SONICMOOV Googleページ

今さら聞けない?! 5分でわかる!マテリアルデザイン入門

今さら聞けない?! 5分でわかる!マテリアルデザイン入門

  • このエントリーをはてなブックマークに追加

Googleマテリアルデザインガイドライン
2014年6月に公開されてから1年が過ぎ、AndroidはもとよりiOSのアプリでも、このガイドラインを取り入れたUI/UXの優れた作品が多数出てきました。

今回はそんな相変わらずトレンディなマテリアルデザインのガイドラインをわかりやすく、ポイントを絞ってお伝えします。

マテリアルデザインとは?

マテリアルデザインを直訳すると「物質的なデザイン」という意味です。
デジタルのデザインなのにどの辺が「物質的」なのか、それは次の2つの概念で表現されています。

平面なのに3D

マテリアルデザインでは、要素の重なりを物理的にとらえ、平面の中に、明確なZ軸の概念を持たせています。

マテリアルデザインとは「物質的なデザイン」であること

なので、この要素の重なり・階層を表現する上で影が重要な役割を果たします。

平面なのに3D

現実での影の付き方と同じように、要素のZ軸上の位置によって影の表現を変えるようにします。

続きを読む

紙とインク

マテリアルデザインでは、ヘッダーやカード型リスト、ボタンなど、あらゆる要素のベースとなる部分は「紙」のメタファーです。
ざっくり言うと「紙みたいなもの」っていうことです。

マテリアルデザインの要素は「紙」と「インク」のメタファー

この「紙」は、現実の紙と同様に重ねたりすることはもちろん、バーチャルなものなので拡大縮小など変形したりすることができます。
ですが、下図のように、別の紙を通り抜けるなど、マテリアルデザインの概念に反する物理的に不可能な動きはできません。

マテリアルデザインの概念に反する動き

そして、紙のベース上に乗っている文字やアイコン、写真などは「インクみたいなもの」です。
文字や写真はインクだって分かるけど、動画は…?
違和感ありますが、何と言われようとマテリアルデザインでは動画もインクでできています。
この「インク」もバーチャルなものなので、色や大きさ・形を自由に変えることができます。

マテリアルデザインのカラー

マテリアルデザインでは、1つの画面内であまりたくさんの色数を使いません。
基本的な画面の要素は、次の4色での構成を心掛けます。

マテリアルデザインカラー

  • colorPrimary(メインとなる色)
  • colorPrimaryDark (colorPrimary と同系色)
  • colorAccent (colorPrimary に対比して目立つ色、アクセントカラー)
  • windowBackground (白または黒に近い無彩色または colorPrimary と同系色)

ちなみに、マテリアルデザインガイドラインにカラーパレットが用意されていますが、その色を使わなければマテリアルデザインじゃない!ということではありません。
既存のサービスをリデザインする場合などは、そのブランドカラーをcolorPrimaryとして構成すれば良いのです。

<参考:マテリアルデザインのカラーパレット>
http://www.google.com/design/spec/style/color.html#color-color-palette

グリッドシステム

マテリアルデザインでは8dpのグリッドシステムで設計されています。

グリッドシステム

テキストは4dpのグリッドです。

マテリアルデザインテンプレートを使うと便利

上記のグリッドシステムに則った、デバイス毎のUIコンポーネントのテンプレートがガイドライン内で配布されています。

<参考:マテリアルデザインのテンプレート>
http://www.google.com/design/spec/resources/layout-templates.html

アニメーション

ユーザー体験に大きな影響を与えるアニメーションはマテリアルデザインでも超重要です。 アニメーションの要点は、ざっくり以下の3つです。

心地の良い動き

アニメーションには物理的な加減速を付け、自然で心地よい動きを心がけます。

マテリアルデザインのアニメーション

タッチフィードバック

タップ可能な場所を押した際には、何らかの演出(タッチフィードバック)を付けなければなりません。

タッチフィードバック

意味を持ったアニメーション

ボタンを押すなどのユーザーのアクションと、その後展開されるアニメーションは、前後の関連性や繋がりが表現されていなければなりません。

意味を持ったアニメーション

まとめ

マテリアルデザインは、デザイナーにもエンジニアにもユーザーにも分かりやすくて、非常によくできたガイドラインです。
ですが、実際にアプリやサービスを作ってみると、完全に忠実にガイドラインに則るのは・・・結構大変だったりします。
そして何より一番大事なのは、今作ろうとしているアプリやサービス自体のコンセプトとユーザに提供する新しい価値だと思います。

アプリのコンセプトや価値をユーザに提供することを実現するためのUI/UXデザインの手段として、マテリアルデザインのガイドラインを上手に取り入れてみてはいかがでしょうか。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

ユウコ(デザイナー)

デザイナーが所属するクリエイティブDivのマネージャーをしています。

関連するSONICMOOVのサービス

Webデザイナー募集!

イラストーレーター募集!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ

Webデザイナー募集!

新着の記事