• HOME
  • デザイン
  • マテリアルデザインとは。基本概念や作り方、フレームワークのまとめ

マテリアルデザインとは。基本概念や作り方、フレームワークのまとめ

『マテリアルデザイン』は、Googleが提供する多くのサービスにおいて取り入れられています。統一性のあるデザイン設計により、一貫して使い勝手の良いサービスが提供できることが特徴です。マテリアルデザインの基本概念や考え方などを解説します。

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。「副業・複業」で、本業では経験できない、新しい環境/デザイン組織を経験しよう!

→「Offers」をもっと詳しくみる! かんたん60秒で副業を始めてみる

マテリアルデザインの基礎知識

マテリアルデザインは『物質的なデザイン』と直訳されるものの、言葉の限りでは具体的なイメージが伝わりにくいです。

マテリアルデザインとは具体的にどのようなデザインなのでしょうか。ここではマテリアルデザインの概念やその歴史、特徴について説明します。

マテリアルデザインとは

マテリアルを直訳ですると『物質的な』という意味になります。つまりマテリアルデザインとは、現実世界における物質の動きや影、物が持つ奥行きをデバイス上で表現するデザイン手法のことです。

マテリアルデザインは、デバイスの違いによる操作性の違いを限りなくゼロに近づけることを目指しています。視覚的な工夫を随所に取り込み、ユーザーがデバイスに接する際の利便性を高める役割を果たしているのです。

マテリアルデザインの歴史

2014年6月頃から耳にするようになったマテリアルデザインですが、ここに行き着くまでには、いくつかのデザインの歴史の変遷があります。

  1. スキューモーフィズム
  2. フラットデザイン
  3. メトロデザイン

『スキューモーフィズム』は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のガイドラインにそったサービスを作るために、多くの人が利用しているフレームワークです。

poloymer

人気の高いMUI

MUIは、操作性が高く人気が高いフレームワークです。個人開発のフレームワークであるにもかかわらず、デフォルトでAngularReact、WebComponents、HTMLメールに対応しています。

MUI

GoogleエンジニアによるMaterial Components for the Web

Material Components for the Webは、Material Design Liteの後継で、グーグルのエンジニアとデザイナーが管理しています。モジュール性を堅持し、ほかのJavaScriptフレームワーク・ライブラリーとの統合を目標にした、優れたフレームワークです。

Material Components for the Web

手軽に始められるMaterialize

Materializeは、代表的なマテリアルデザインCSSフレームワークの一つです。優秀な学生チームによって開発されたMaterializeは、初心者が手軽にマテリアルデザインを始める際に最適と言えます。

現在多くのユーザーが利用しており、テンプレートや拡張機能なども継続的に追加されているので、マテリアルデザインの入門としても活用できます。

Materialize

まとめ

マテリアルデザインは物質的なデザインで、感覚的な操作を可能とする利便性の高いものです。多くのWebサイトやアプリ開発などにもマテリアルデザインは取り入れられ、デバイスにとらわれず統一的な表示をすることで、操作性を高めています。

Googleでは具体的なマテリアルデザインのガイドラインを公開しています。まだマテリアルデザインに触れたことがないのであれば、ユーザーにより分かりやすいサービス提供をするために、ぜひ取り入れてみてはいかがでしょうか。

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。

いくつもの転職媒体を使って、企業を探し回るのはもう終わり。「副業」から始まる新しい働き方を実現します!

本業では経験できない、新しい環境/デザイン組織を経験しよう!



この記事をシェア

関連記事


副業・フリーランス

プログラミング

インタビュー

シニアレベルを2名採用!現場の負荷を軽減した採用活動、その打ち手がOffersだった

700万ダウンロードを突破し、コスメの口コミアプリとして急成長を続ける「LIPS」。これまで正社員や業務委託問わず、各専門性をもったエンジニアが集うことでグロースを続けてきた。そんな同社のハイス...

インフラとフロントエンドの3名を採用! Hotspringが考える採用方針と旅行サービスの未来とは

旅行予約サービス『こころから』を運営するHotspringは、今後の旅行業界の変化を見据えたプロダクト開発を推進している。これまでリファラルやTwitter採用を行ってきた同社が、なぜOffer...

フロントエンジニアの採用に成功!複業採用の秘訣はコンシェルジュの伴走と、独特な1on1にあった

AIチャットボット市場で圧倒的なシェアを誇る「HiTTO(ヒット)」を展開するHiTTO株式会社。今後さらなる顧客満足の向上に向けて、自社プロダクトの強化を加速していく。そこで重要になるのが開発...

専任CSメンバーがサポート。わずか1ヶ月半で、採用難易度の高いリードクラス2名の採用に成功!

女性限定コミュニティに注力する株式会社SHEでは女性の「自分らしい生き方」の実現を目指し、クリエイティブスクール「SHElikes」に加え、美容領域「SHEbeauty」や金融領域「SHEmon...

デザイン

お金

採用・組織

グルメ