マテリアルデザインとは
マテリアルデザインは『物質的なデザイン』と直訳されます。物質の動きや影、物が持つ奥行きをデバイス上で表現するデザイン手法のことです。
ボタンやアイコン、カードなどの『紙要素』と、色や文字などの『インク要素』の二つの要素で構成され、奥行きや影を取り入れることでユーザー目線に配慮した直感的なインターフェイスを作り上げることができます。
物理的な法則に則ったデザイン
マテリアルデザインとは異なるものとして『フラットデザイン』という手法があります。平面的かつシンプルにデザインすることで利便性に配慮していますが、このデザインに物足りなさを感じるユーザーも少なくありません。
マテリアルデザインは動きやアニメーション、影や奥行きなどを導入して、視覚に多様な影響を与えます。物理的な法則に則ったデザインなので、ビジュアル的にも認識しやすいWebサービスを作り出せるのです。
色の選び方
マテリアルデザインにおける色の選び方は重要です。Webサービスにおいては比較的鮮やかで明るい色が使われる傾向があります。これらの色はユーザーにとって判別しやすく操作性を向上させることから、Google社も鮮明で明るい色を推奨しているのです。
ここからは、カラーの具体的な活用について解説します。
カラーパレットの活用
Googleは、デザイン制作において自由に活用できるカラーパレットを用意しています。
このカラーパレットには多くの色が用意されており、使いたい色を選んでコードをコピーできます。
また、ネット上には他にも多数のカラーパレットが無料で公開されています。自分にとって使いやすいパレットを選び、デザイン構成に役立てるとよいでしょう。
メインカラー
Webサイトやアプリケーションを制作する際の主軸となるカラーを『メインカラー』と言います。メインカラーはサービスの一番広い面積を占めており、そのサービスのイメージを作り出しています。従って主に開発の最初の段階でメインカラーは決定されます。
サービスの内容に合わせた適切な色を選択するよう心がけましょう。
サブカラー
『サブカラー』はメインカラーのサポート的な役割を果たしています。メインカラーと同系色の色を設定し、グラデーションを作ることでユーザーの利便性を高める効果を発揮します。
サブカラーは、メインカラーほど目立たせることなく、メインカラーを際立たせる箇所に使います。
アクセントカラー
大切なポイントや重要なボタンなど、ユーザーの視線を集めたいときにアクセントとして利用するカラーです。あくまで部分的な強調をする際に利用するカラーなので、使いすぎることがないように注意しましょう。
アクセントカラーは、本当に目立たせたい部分にだけに差し色の役割を果たすケースが多い色です。メインカラーとの違いを鮮明にして、ユーザーの目を引くカラーを選ぶのがポイントになります。
色の使い方をサポートしてくれるサイト
マテリアルデザインの色選びは奥が深く、どのように選択すれば良いのか判断に迷う場面があります。不適切な色を選択してしまうと逆にサービスの利便性を下げてしまうことがあるので、慎重に選ぶ必要があるのです。
ここからは、色の使い方をサポートしてくれるおすすめのサイトを2つ紹介します。
色の組み合わせならMaterial Palette
Material Paletteは、用意されているカラーパレットの中から2色を選択し、マテリアルデザインに合うWebサイト構成を提案してくれるサイトです。
サイト上にあるボタンは美しいだけでなく操作性に優れており、楽しみながら簡単にマテリアルデザインのカラーを構成できます。
色とアイコンを探せるMaterial Design Colors
マテリアルデザインカラーに始まり、UIアイコン、UIデザイン、ソーシャルカラーやHTMLカラーなど、あらゆる場面に対応できるコンテンツを多数用意しているサイトです。
サイトにはブログがあり、使い方のノウハウなども掲載されていることから、分からないこともすぐに解決できます。
まとめ
マテリアルデザインにおいて、色選びは大切なポイントになります。Webサービスの特性に合わせた効果的な色を選択することで、そのサービスの利便性が格段に上がることもあるのです。
色の選択は奥が深い作業ですが、Web上には無料のツールや役立つサイトがいくつも用意されています。これらをうまく活用して、クオリティの高いマテリアルデザインを実現しましょう。