仕事で使うものだからこそ楽しいデザインで

一般的な業務システムは洗練されているけど味気ないものが多いですよね。

過度な装飾は不要であるという考えもあるかと思いますが、私は毎日のお仕事で使うものだからこそ、遊びゴコロのあるデザインをご提供したいと思っています。

例えば、ホーム画面に戻るボタンを自社のロゴやキャラクターにしてみたり

ちょっとポップな色を使ってみたり

しかし、凝り過ぎるとダサくなってしまいます。
例えばこんな感じに…

とても見辛いですよね。毎日使うものだからこそ、見ていて疲れる画面になってはいけません。

いくつかのセオリーを知っておくと、こんな画面を作ってしまう恐れはありません。

色の使い方

まずベースとなる色を決めて、そのグラデーションの中から使用する色を選びます。

色の属性には
・色相
・明度
・彩度
があります。 参考:Wikipedia 色の三属性

ベースとなる色を選んだら、色相と明度を固定して配色していきます。
アクセントが欲しいときは、ベースの色と同じ明度と彩度の色相グループの中から色をチョイスします。
隣り合う色ではなくて、逆の色にすると効果的です。

あとはベースの色とアクセントの色の使用率を気をつければ大丈夫です。
(9:1とか8:2くらいがちょうど良いと思います)

 

フォントの使い方

フォントも使いすぎに注意します。
フォントは大きくわけて2種類あります。

・うろこなし
・うろこあり

見出しにはうろこなし(ゴシック)が適していて、長文にはうろこありの明朝体が適しています。
システムの中では、長文を入力すること自体を避ける方が良いので、うろこありのフォントを使うことはあまりないと思います。(ボタンの文字はうろこなしが良いです)

また、フォントのスタイルで「太字」は極力使わないようにします。
よく見ると文字が潰れてしまっていることがあり、読みにくいです。

3の倍数を意識する

これはシステム開発にはあまり関係ないかもしれませんが、書類を作るときに役に立ちます。
目次を作るときに、項目を3の倍数(できれば3)にすると頭に入りやすいです。

例えば、厚生労働省のホームページから通所介護(デイサービス)の説明文にこの手法を使ってみます。

通所介護は、利用者が可能な限り自宅で自立した日常生活を送ることができるよう、自宅にこもりきりの利用者の孤立感の解消や心身機能の維持、家族の介護の負担軽減などを目的として実施します。
利用者が通所介護の施設(利用定員19人以上のデイサービスセンターなど)に通い、施設では、食事や入浴などの日常生活上の支援や、生活機能向上のための機能訓練や口腔機能向上サービスなどを日帰りで提供します。生活機能向上グループ活動などの高齢者同士の交流もあり、施設は利用者の自宅から施設までの送迎も行います。

⬇︎

通所介護(デイサービス)とは

1.目的
・利用者が可能な限り自宅で自立した日常生活を送る
・自宅にこもりきりの利用者の孤立感の解消や心身機能の維持
・家族の介護の負担軽減

2.サービス内容
・食事や入浴などの日常生活上の支援
・生活機能向上のための機能訓練や口腔機能向上サービス
・利用者の自宅から施設までの送迎

3.デイサービスの基本条件
・利用定員19人以上
・日帰りでのサービス提供

どうでしょうか?少し頭に入りやすくなったと思います。

 

これらのセオリーをなんとなく守りつつ自由にデザインしていくと、良い具合に楽しいデザインになります。
これらに加え、世の中で一般的なUI(ユーザーインターフェイス)から逸脱しないような設計をしていくことで、愛着を持って使ってもらえるシステムになっていきます。

私もまだまだ模索中ですが、FileMakerで開発するときはデザインも自分でするので、日頃から世の中のWebページやシステムの動き方や見た目(UI,UX)には注目しています。