マテリアルデザインの基礎知識
マテリアルデザインは『物質的なデザイン』と直訳されるものの、言葉の限りでは具体的なイメージが伝わりにくいです。
マテリアルデザインとは具体的にどのようなデザインなのでしょうか。ここではマテリアルデザインの概念やその歴史、特徴について説明します。
マテリアルデザインとは
マテリアルを直訳ですると『物質的な』という意味になります。つまりマテリアルデザインとは、現実世界における物質の動きや影、物が持つ奥行きをデバイス上で表現するデザイン手法のことです。
マテリアルデザインは、デバイスの違いによる操作性の違いを限りなくゼロに近づけることを目指しています。視覚的な工夫を随所に取り込み、ユーザーがデバイスに接する際の利便性を高める役割を果たしているのです。
マテリアルデザインの歴史
2014年6月頃から耳にするようになったマテリアルデザインですが、ここに行き着くまでには、いくつかのデザインの歴史の変遷があります。
- スキューモーフィズム
- フラットデザイン
- メトロデザイン
『スキューモーフィズム』は1890年頃から使われているデザイン手法です。iPhoneでiOS6まで採用されていました。実在するものをモチーフにして、リアリティを重視したデザインが特徴です。
『フラットデザイン』はシンプルさを重視したデザインです。これまでのスキューモーフィズムの特徴である装飾を取り払い、できる限りシンプルで分かりやすいデザインになりました。
フラットデザインは、2013年にiPhoneのiOS7で採用されたのをきっかけに注目を集めました。これにより、ユーザーが以前に比べて直観的にデバイスに接することが可能になったのです。
『メトロデザイン』は、Windows Phone7やWindows8などで導入されました。フラットデザインと同じくシンプルさを追求したデザインであり、『タイル』と呼ばれるパネル状の大きなボタンが特徴的です。
そして最新のデザイン手法が『マテリアルデザイン』です。フラットデザインやメトロデザインが表現するシンプルさと、スキューモーフィズムが表現するリアリティのいずれも兼ね備えた複合的なデザインと言えます。
出典：歴史から考えるフラットデザインとマテリアルデザインの違いとは？
マテリアルデザインの特徴
マテリアルデザインは、ユーザーのデバイスに対する利便性を追求したデザイン設計を施しています。過剰な装飾を取り除き、デバイスのディスプレイごとにサイズを合わせてデザインされているので、シンプルかつ使いやすい特徴があるのです。
マテリアルデザインではそれほど多くの色を使用しません。あまりに多くの色を画面の中に取り入れると、ユーザーが混乱してしまいストレスを与えることになるからです。
現実における光や影、奥行きなどを表現し、より日常生活に近い感覚で使えるような工夫や配慮をしています。
マテリアルデザインの基本となる概念
マテリアルデザインは、どんなデバイス環境であっても、ユーザーの利便性を第一にデザイン設計を行っています。
マテリアルデザインの基本となっている概念はどういったものなのでしょうか。大切な要素をピックアップして解説を加えながら、マテリアルデザインを紐解いていきましょう。
ボタンやアイコン、カードなどの紙要素
マテリアルデザインは『紙要素』と『インク要素』と呼ばれる要素で構成されています。マテリアルデザインは、要素の重なりを現実味のある物理的なものとして構成しているのです。
例えば、画面上にあるボタンやバー、リストなどは、紙で構成されていると捉えてデザインされています。これらの機能を取り入れることで、シンプルでありながらリアリティ溢れる機能的なデザインが生まれるのです。
色や文字などのインク要素
デバイス画面上の色は、紙の上に色を乗せた『インク要素』と捉えられています。画面上の写真や動画、文字などもインク要素として自在に色を変更できるという考え方です。
紙要素では四角形しか表現できませんが、その他のさまざまな形状は、インク要素の中で表現できます。
画面の奥行きと影
マテリアルデザインでは、影をうまく活用してUIパーツの動作状態を表現しています。影は画面上のオブジェクトの奥行きを際立たせる役割を果たし、マテリアルデザインの要として重要な存在です。
影ができる箇所はクリックなどの機能が働く一方で、影のない箇所は機能しないなどの区別を、ユーザーは視覚的に理解できるのです。
フラットデザインとはどう違う？
マテリアルデザインとは少し異なるデザインとして、1900年代の初頭から活用されているフラットデザインがあります。それまでのスキューモーフィズムにより表現されていた過度な装飾から脱却し、シンプルでありながら使い勝手のいいデザインとして広がりました。
フラットデザインとマテリアルデザインの違いはどこにあるのでしょうか。フラットデザインについてさらに具体的に解説しながら、両者の違いについて説明します。
フラットデザインとは
フラットデザインは、ユーザーの利便性に配慮してシンプルさに重点を置いたデザイン手法です。スキューモーフィズムが発展したことで、徐々に装飾が派手になり過ぎ、ユーザーにとって分かりにくくなったという背景があります。
フラットデザインは2013年、iPhoneのiOS7のデザインに採用されました。これをきっかけにこのデザイン手法が一気に広がり、さまざまな場所で目にするようになったのです。
シンプルさは分かりやすさにつながり、ユーザーは以前よりデバイスを直感的で使いやすく感じるようになりました。
両者の違い
フラットデザインとマテリアルデザインは似ていますが違いがあります。
マテリアルデザイン
フラットデザインでは使用されていなかったアニメーション表現や、ボタンにできる影など、細部のデザインが導入されているという点が大きな違いです。
フラットデザイン
『紙要素』という考え方はなく、奥行きのないフラットなデザインでした。マテリアルデザインでは、紙要素と、その背景という区別をつけることで、奥行きが生まれ、フラットではない立体的なデザインになっています。
マテリアルデザインのメリットデメリット
マテリアルデザインはシンプルなデザインを基本としています。パソコンやスマートフォン、タブレットといったデバイスそれぞれのディスプレイサイズに合わせてデザインを最適な形に整えるので、ユーザーに安定した情報提供が可能です。
ここからは、マテリアルデザインの持つメリットとデメリットそれぞれについて解説します。
マテリアルデザインのメリット
マテリアルデザインはフラットデザインの持つシンプルなイメージを残しつつ、物質的な奥行きと感覚的な操作を併せ持ったデザインです。限りなくユーザー目線に配慮してデザインしている点がメリットと言えます。
フラットデザインと比較して、見出しや本文、ラベルやボタン、テキストインプットなどの区別がつきやすい特徴があります。メリハリがつきやすいことから、フラットデザインに物足りなさを感じていたユーザーにとっては都合のよいデザインなのです。
マテリアルデザインのデメリット
マテリアルデザインはフラットデザインに比べて一画面のファイル容量が大きいため、読み込み速度が遅くなるというデメリットがあります。
しかしあくまでもフラットデザインと比較した場合なので、スキューモーフィズムと比較すればシンプルで速いということには変わりありません。
マテリアルデザインの基本ルール
マテリアルデザインには、いくつかの基本的なルールがあります。一定のルールに従ってその範囲内でデザインをすることで、マテリアルデザインの特徴が活かされ、統一感が出せるのです。
ここでは、マテリアルデザインの基本ルールについてまとめました。
現実の紙と同じようにデザインする
マテリアルデザインでは、カードなどの紙要素を適切にレイアウトしていく必要があります。
紙要素は、あくまでも現実世界の紙と同じようにデザインすることがポイントですから、現実にはあり得ないようなデザインを避けるのが基本ルールです。
例えばカード内の文字が、カードの外にはみ出るようなデザインはNGです。また、カード内でスクロールできるようにするのも禁止されています。
シンプルにする
フラットデザインと同じように、マテリアルデザインでもシンプルさが重要視されています。
例えば、カードの上にさらに浮き出しボタン（影つきボタン）を乗せると、影が多くなりすぎてシンプルではなくなってしまうのでNGです。カードにボタンをつける場合は、影のないフラットボタンを使用します。
また、カードが多くなりすぎると、しつこい印象になってシンプルさが失われます。記事一覧をカードにする場合、幅のせまい横長のカードにしてしまうと、一画面に大量に表示されてしまいますので避けるべきです。
そのため、カード1枚ごとの幅を、ある程度大きくする必要があります。カード内の文章が4行以上になることを目安としてください。
アニメーションを使ってもOK
シンプルさが重要なマテリアルデザインですが、ある程度のアニメーション効果をつけることは問題ありません。むしろ適切なアニメーションをつけることで、ユーザーの使いやすさ、分かりやすさを実現することが重要です。
カーソルをカードの上に乗せる（マウスオーバー）すると、カードの背景の影が増えて、カードが浮き上がったように見せるアニメーションや、ボタンをクリックすると波紋が広がったようになる『リップルエフェクト』などがよく使われています。
また、後述する『FABボタン』のアイコンが常に動いているアニメーションも使用可能です。
ただし、アニメーションをつけすぎるのはNGです。紙要素を折りたたむ動きなど、禁止されているアニメーションもありますので注意しましょう。
ボタンを作ってみよう
マテリアルデザインにおいて、ボタンには『フローティングアクション』『浮き出し』『フラット』の3つの種類があります。いずれもユーザビリティー溢れる分かりやすいデザインです。それぞれのボタンには違う役割があり、その役割によって使われる箇所も変わります。
ここでは、3つのボタンの作り方、デザインの概要を解説します。
フローティングアクションボタンの作り方
フローティングアクションボタンは、影がついて少し浮き上がったようなデザインの円形のボタンです。省略して『FABボタン』とも呼ばれます。
新規作成を意味する『+』アイコンのボタンや、お気に入り登録に使う『星マーク』アイコンのボタンなど、主にアイコンだけがデザインされたボタンです。『Extended FAB』といって、アイコンと文字列を併用したボタンも使用できます。
FABボタンは『1ページにつき1つまで』とされていて、本当に重要な操作にだけ使用するルールです。前のページに戻る操作や、メニューボタンなどには使用しません。
浮き出しボタンの作り方
浮き出しボタンも、影があるデザインですが、丸ではなく長方形です。『インストール』ボタンや『購入』ボタンなど、強調したいボタンに使用されます。
前述のように、浮き出しボタンをカードの上に置いてしまうなどの使いすぎに注意して、適切な箇所に設置することがポイントです。
フラットボタンの作り方
フラットボタンはごく単純なテキストのボタンです。他の文字と見分けがつくように余白を十分にとり、色を効果的に使って作成する必要があります。
具体的にはテキストリンクを使用して、適切な場所に貼り付けるだけで簡単に作成できるボタンです。カード上のボタンに使用するなど、デザインのシンプルさを保つためにも必要なボタンと言えます。
フレームワークを活用しよう
マテリアルデザインは、2014年にGoogleが自社の主力サービスに取り入れて以来、アンドロイドのアプリケーションなど多くの場面で見られるようになりました。マテリアルデザインを学ぶことでデザインの最新トレンドを把握することができるでしょう。
マテリアルデザインには多数のCSSフレームワークがあります。これらをプロジェクトやサイトの特性に合わせて活用することで、最新のデザインに従った利便性が高いサイトを作成できるのです。
おすすめのフレームワークを4つ紹介するので、サービス作りの参考にしてください。
Google提供のpolymer
PolymerはGoogleが提供するフレームワークです。このフレームワークを利用することで、マテリアルデザインのルールを詳しく知らなくても、適切なデザインのサイトやアプリを構築できます。Googleのガイドラインにそったサービスを作るために、多くの人が利用しているフレームワークです。
人気の高いMUI
MUIは、操作性が高く人気が高いフレームワークです。個人開発のフレームワークであるにもかかわらず、デフォルトでAngular、React、WebComponents、HTMLメールに対応しています。
GoogleエンジニアによるMaterial Components for the Web
Material Components for the Webは、Material Design Liteの後継で、グーグルのエンジニアとデザイナーが管理しています。モジュール性を堅持し、ほかのJavaScriptフレームワーク・ライブラリーとの統合を目標にした、優れたフレームワークです。
Material Components for the Web
手軽に始められるMaterialize
Materializeは、代表的なマテリアルデザインCSSフレームワークの一つです。優秀な学生チームによって開発されたMaterializeは、初心者が手軽にマテリアルデザインを始める際に最適と言えます。
現在多くのユーザーが利用しており、テンプレートや拡張機能なども継続的に追加されているので、マテリアルデザインの入門としても活用できます。
まとめ
マテリアルデザインは物質的なデザインで、感覚的な操作を可能とする利便性の高いものです。多くのWebサイトやアプリ開発などにもマテリアルデザインは取り入れられ、デバイスにとらわれず統一的な表示をすることで、操作性を高めています。
Googleでは具体的なマテリアルデザインのガイドラインを公開しています。まだマテリアルデザインに触れたことがないのであれば、ユーザーにより分かりやすいサービス提供をするために、ぜひ取り入れてみてはいかがでしょうか。