• Top
  • > Blog
  • > Google「Material Design」のデザインガイドラインをみる
2014/07/15 User Experience, UXデザイン

Google「Material Design」のデザインガイドラインをみる

こんにちは、デザイナーの清水です。

先週に続き、Googleが発表した「Material Design」について、デザインガイドラインを参照しながらデザインの特徴を探っていきたいと思います。

今回はデザインガイドラインの2つ目にある「Style」を見てみました。ここでは、Material Designで扱われるビジュアルデザインの4要素、「カラー」「文字」「アイコン」「画像」の表現様式についてまとめられています。それぞれのデザイン的特徴について幾つかご紹介します。

 
1. カラー

UIで使用するカラーが「UI Color Palette」として規定されています。これを見ると全体では256色ありますが、中心となる色味(色相)は19色用意されています。これら19色のうち16色は鮮やかな色調で、残りの3色は、ブラウン、グレー、ブルーグレーと彩度の低い色調のものになっています。※下図参照

基本19色

基本19色

 

また、19種類の色ごとに、明るい色から暗い色まで色調(トーン)の異なる10種類の色がバリエーションとして用意されています。それらは数字で命名され、明るい色から暗い色へ50、100、200……900となっています。500が優先的に使うプライマリーカラーとして規定されています。他にアクセントカラーは、先の19色の内、鮮やかな16色に対し用意されています。アクセントカラーも複数の色調があり、A100、A200、A400、A700の計4種が用意されています。このアクセントカラーは、基本色より彩度を高めた色が設定されています。

UIcolor

 

上記のUI Color PaletteをUIデザインに適用する際は、3色以内の色相から色を選ぶことになっています。基調色となるプライマリーカラーに対し、アクセントカラーは1色のみ指定できます。

また無彩色の指定は少し特徴的なものになっています。無彩色を使用するテキストや、アイコン、区切りに対しては、基本的に完全な黒(#000000)を指定したうえで、不透明度(アルファ値)で明暗を表現するようになっています。これは効果的に情報の階層を示すことを意図しているようです。

 
2. タイポグラフィ

Material Designでは多様なプラットフォームに統一的なデザインを適用させることで、一貫した体験を提供することを狙っています。その中でタイポグラフィも統一的なデザインを支える重要な要素になっています。Material Designに合わせ、これまでAndroidで使われていた「Roboto」という書体がリファインされました。最小のウェアラブルデバイスから、最大となるテレビでの表示まで広範囲なプラットフォームに対応できるよう、調整を施したようです。比較画像がアップされていましたので、確認してみました。

分かりやすいところでは「i, j」のドットが丸くなり、「k, K, R」はより自然なストロークに修正されています。全体的には以前より丸みが連続的になり柔らかい読みやすい印象になっています。「C, G, Q」を見比べると、以前のものはやや垂直方向に直線的なラインがあり堅い印象がありました。
また数字は全て書き直されているようです。

roboto

 
3. アイコン

先のタイポグラフィと同じように、システムアイコンにも統一的な設計基準を決めることで、デザインに一貫性をもたせています。アイコンデザインは様々なモチーフや要素を図記号化する必要があるため、視覚的な一貫性をもたせるための基本ルールが大事になってきます。ここでは、基本となるグリッドと比率、サイズを定めることで対応しています。アイコングリッドは24×24マスを基準につくられており、それを基準にアイコンがデザインされています。また図にあるように、4つの幾何学的基本形状(正方形、円形、横長方形、縦長方形)ごとのサイズや比率が決められ、どの造形でも視覚的な重さ(濃さ)が揃うように設計されています。また角丸の曲率や線幅も揃えられています。

Icon1

Icon2

 

アイコンの次には「画像」についてのガイドラインが書かれています。こちらはボリュームも多いので、またの機会に確認できればと思います。

今回は「Style」の中を見ていきました。カラーやタイポグラフィ、アイコンはUIデザインの世界観に大きく影響を与える要素になります。多様な要素や情報を合理的にまとめつつ、統一性を出すためには、どの程度自由度をもたせ、制限するかが難しいところです。例えば色数ひとつとっても、多すぎれば選択肢が増えすぎて使いにくくなりますし、少なすぎれば情報の差異を付けるときの選択肢が少なく、破綻することがあります。

個人的には、この「Style」の各規定は、UIデザインとしてはバランスよくまとめられていると思います。結果としてまとめられたガイドラインを見るだけではわかりませんが、これらが定まるまでのプロセスは、様々な実践的な検証と調整があり、その積み重ねがバランスよくガイドラインに反映されているのではないかと考えられます。

※詳細情報、参考・画像転載:

Material Design – Google Design Guideline

Google Design – Google+

清水良介(インタラクション&インフォメーションデザイナー)

記事一覧へ