デザインと一口に言ってもデザインの形は日々進化し、トレンドの移り変わりや技術の進歩、また社会の風潮に伴って様々な手法が生まれます。今回はその中の一つである「マテリアルデザイン」についてご紹介します。
マテリアルデザインとは、2014年にGoogleが提唱したデザインのことです。マテリアルは「物質的な」「具体的な」という意味で、デザインのパーツを物質ととらえ、現実世界のルールに基づくことによってユーザーが直感的に理解、操作ができることを目的としています。
マテリアルデザインの基本的な考え方には、3D空間を形成し「紙」と「インク」で構成されているというものがあります。「紙」は文字やアイコンなどの要素を配置するための土台。つまり、Webページで言えば、ヘッダーやセクションなどの一つのまとまりです。一方「インク」は紙の上に配置された写真や文字などの要素を指します。また、縦と横以外に高さの概念を持たせ、影を付けることで立体的な表現が可能になります。
１．色は少なく
色は大きく「メインカラー」「派生カラー」「アクセントカラー」に分けられます。メインカラーは画面内の要素に対して最も使用される色です。しかし、メインカラー一色だけでは要素同士の区別がしづらくなり、かえって見にくい画面になってしまうでしょう。それを防ぐために派生カラーとして、メインカラーの色調は変えずに彩度や明度のみを調整した色味を使います。そうすることで要素ごとが見やすくなり、且つまとまりのあるデザインになります。アクセントカラーは必ず使用する必要はなく、アクセントが欲しい場合のみ使用します。例えば、問い合わせボタンやエラー表示など、目を引く工夫をしたいときに使用すると良いでしょう。
２．影で立体感を
影を入れるべき理由は、弱視の人に効果が得られたからとされています。具体的には影があることでそれぞれの要素を迅速に見つけることができ、操作ができるものなのかを判断するスピードが向上した、といった効果が見られました。つまり影はUIデザインとしての「見やすさ」という部分に直結すると考えられます。
３．操作感のあるアニメーション
ユーザーの操作に対して感覚的なサポートを行うのがアニメーションの役割です。マテリアルデザインの直感的な操作という面で必要不可欠な要素です。例えばタップ操作を行うことでタップしたところから波紋が広がるものなどがあります。
マテリアルデザインを活用するメリットは何といっても「わかりやすさ」です。光や影など、現実世界の物理法則を考慮したデザインは誰が見ても分かりやすいものになっています。デザインをする際にはユーザーのわかりやすさを意識して行いましょう。
エイ・エヌ・エスでは、UIUXの観点からユーザー中心設計にてわかりやすく操作性の良い業務システムの構築を行っています。また、システムの導入を検討されている企業様向けにシステムに関する相談サービスも承っていますので、お悩みや疑問点がありましたらぜひお気軽にご相談ください。
