名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

Googleが推奨するマテリアルデザインというデザイン手法を聞いたことがあるでしょうか。
ホームページを制作する上で、デザイナーが無視して通れないデザイン手法です。
今回はマテリアルデザインの特徴と、制作する際にWEBデザイナーが気をつけるべきポイントを紹介します。

マテリアルデザインとは

マテリアルデザインとは前述の通り、Googleが推奨するデザインです。マテリアルデザインは、フラットデザインとは異なり、より現実的な空間を意識させるようなデザインとなっています。
フラットデザインは、ボタンの立体感や奥行きを感じさせないベタっとした平面的なデザインでした。WEBデザインでは、ボタンにグラデーション効果を用いてリアルなボタンを表現することも可能ですが、iOSやWindowsなどのOSではフラットデザインが主流となっていきました。その背景には、シンプルでミニマルなデザインの評価や、スマートフォンやタブレットなどの多様なデバイスの普及があります。
マテリアルデザインは、フラットデザインのシンプルさを残しつつ、分かりやすく直感的なデザインです。3Dの奥行きを感じさせるデザインですが、シンプルで見慣れたデザインは初めて見るUIでもなんとなく操作がわかるようになっています。

マテリアルデザインの特徴とデザイン時のポイント

分かりやすく直感的なデザインのマテリアルデザインについて、Googleはデザインのガイドラインを公表しています。ここからはマテリアルデザインの特徴とともに、デザイン時に気をつけるべきポイントを紹介します。

要素に自然な陰影をつける

現実世界で目にすることができる紙が重なっているような陰影を、デザインに取り入れる事で、要素の重なりが分かりやすくなります。現実世界の物理法則のように、ボタンなどのオブジェクトを配置することで、ユーザーは直感的に「押せるボタン」だと分かります。
濃すぎる陰影や不自然な陰影は逆にユーザーを混乱させてしまうので、あくまで自然な陰影を心がけましょう。

色数を決め、ルールを守って配色する

マテリアルデザインで使用できる色数は有彩色４色です。デザイン全体でメインカラーとして使用する1色、メインカラーを補助する目的で使用するメインカラーの同系色2色、目立たせる要素に使用するメインカラーとは異なる1 色を使用します。
上記の有彩色の使用方法を守った上で、黒・グレー・白の無彩色を使用できます。
それぞれの色の役割をサイト内で決めて、ルールに則って使用することで分かりやすいUIに近づけることができます。

ユーザーの操作を補助するアニメーションを取り入れる

ユーザーがホームページ上で何か操作を実行した時には、分かりやすいアニメーションを使ってユーザーに反応を返します。Twitterでは「お気に入りボタン」を押した時に、ハートがアニメーションと共に色が変わるというUIが採用されています。ユーザーが「お気に入りボタンを押した」というアクションに対して、自然なアニメーションで反応を返す事で、ちゃんとボタンが押せているという認識が生まれます。このように、ユーザーの操作を補助するような連続的なアニメーションを取り入れ、ユーザーを混乱させないようにします。ユーザーが「自分の操作で画面が動いた」と分かるように、アニメーションは必ず連続的に変化するアニメーションを取り入れましょう。
Googleは、マテリアルデザインで取り入れるべきアニメーションについてYoutubeに公開しています。
https://www.youtube.com/watch?v=Q8TXgCzxEnw

今回のまとめ

マテリアルデザインについてGoogleはデザインガイドラインを公開しています（https://material.io/）。
マテリアルデザインで使用が推奨されるアイコンや、コンポーネントについても紹介されているので、マテリアルデザインでホームページを制作する際には、ぜひ参考にしてみてください。