マテリアルデザインとはどのようなWebデザインのこと？

マテリアルデザインとは、Google（グーグル）が発表したデザイン手法のガイドラインのことです。「マテリアル」とは、すなわち「物質的な」という意味を持ち、物質的要素を加えたデザインのことを言います。

平面のデザインに物質的な重さや奥行き、質量を加えることで、ユーザーに分かりやすさを与え、直感的な操作が行えるように手助けをします。ここでは、そんなマテリアルデザインの使い方や作り方についてご説明します。

マテリアルデザインの目的とは

Googleが提唱しているマテリアルデザインは、Androidでオープンソースによって無料で内容を公開しています。

マテリアルデザインによって、ユーザーはどんなデバイスであっても、統一した操作体験ができるようになります。

たとえば、デスクトップなどの大きな端末から小さなモバイル端末のスマートウォッチ、タブレット、スマホなど異なるプラットフォーム、サイズであっても構築できるように設計されています。

また、マテリアルデザインは、表示される時間がユーザーにとって快適な時間とするなど、人間工学に基づいて研究されたUX（ユーザーエクスペリエンス）にも対応しています。

フラットデザインとの違い

フラットデザインとは、シンプルで余計な装飾を省いた平面的なデザインになります。

フラットデザインができた背景として、フラットデザインの前にスキューモーフィズムという現実の物質のリアリティを追及したデザインが流行していた歴史があります。これは「リッチデザイン」と呼ばれるものです。

現在リッチデザインは古い、ダサいといったイメージを与えます。また、デザインが凝っているために何を表現しているのか小さい画面などでは見にくいという意見もあります。

一方フラットデザインは、立体感を出す影やグラデーションなどが無く、デザインは極力シンプルにそぎ落とされていて、洗練されたイメージを与えます。iPhoneのiOSホーム画面のアイコンやMicrosoft（マイクロソフト）のWindows 8からホーム画面に使用されています。

また、ファイルの容量を小さく抑えることができるメリットがあります。

フラットデザインには優れた点が多いですが、項目が一覧表示されている場合、どの項目が重要なのか分からず結局使いにくいというデメリットが指摘されました。削除されたリアリティにも見直すべき点があったということです。

その問題を解消するために誕生したのがフラットデザイン2.0、そしてマテリアルデザインです。

フラットデザイン2.0とマテリアルデザインの違いを比較すると、マテリアルデザインはGoogleによって明確なルールの定義がある点が異なります。

転職時にマテリアルデザインを学ぶ可能性がある職業

転職時にマテリアルデザインを学ぶ必要がある職業にはどのようなものがあるでしょうか。

Webデザイナーはもちろん、現在のデザイン手法の最新トレンドであるマテリアルデザインは必須の知識と言えます。

また、アプリ・フロントエンドエンジニアにも、マテリアルデザインはAndroidの開発には標準デザインシステムとなっているため、Webデザイナーに提案する意味でも必要です。

Webデザイナー

Webデザイナーは、クライアントから依頼された企業サイトの制作、業務アプリの開発、ロゴなどの商用デザインを行います。現在のデザイン手法の最新トレンドであるマテリアルデザインは多く求められるデザインであると言えます。

デザインの色、タイポグラフィ、見た目、構造は、ユーザーが快適に操作するために設計されます。CSSのコードで作成して実装することもできますが、コーディングを効率的に行うために、マテリアルデザインのCSSフレームワークを利用することができます。

中でも「Materialize」は認知度が高いフレームワークであり、多くのユーザーがいます。タグも豊富に用意されていますので、マテリアルデザインを始めるための入門として勉強することをおすすめします。

他にも、Xamarin.FormsやVuetifyなどのライブラリもあります。Adobeは、様々なOSに対応したUIキットも提供しています。

また、マテリアルデザインのワイヤーフレームキットをPSDテンプレートでダウンロードできるサイトなどもあります。

マテリアルデザインのガイドラインは公式サイトのドキュメントがPDFで公開されています。

アプリ・フロントエンドエンジニア

マテリアルデザインは、Androidの開発には標準デザインシステムとなっていることから、アプリ・フロントエンドエンジニアにも必要な知識となります。

マテリアルデザインを導入するためにJavaScriptのライブラリを活用する会社が増えています。

Googleと個人や企業のコミュニティから開発されたJavaScriptフレームワークが「Angular」です。マテリアルデザインに沿ってアプリケーション開発ができます。

Angularに対応しているJavaScript「Wijmo」は、グリッドを複数行に表示できる機能を備えていて、一覧表グリッドが画面の統一感を与え、ユーザーが使いやすい操作性を持ちます。またVue.jsもサポートしています。

他にもFacebookが開発を進めている「React」のほか、「jQuery」もJavaScriptのフレームワークです。

AngularとVue.jsは日本語版書籍があるため、この2つのフレームワークはプログラム初心者の方におすすめです。

Googleが開発しフリーで提供している、AndroidおよびiOSのアプリ向けフレームワークの「Fultter」も抑えておくべきフレームワークです。Flutterは、基本ライブラリーとGUI設計に必要な様々なウィジェットで構成されています。

Laravelは、PHPで開発されたフレームワークです。
Ruby on Railsは、少ないコードで簡単に設計できるため、初心者にもおすすめです。

プログラマーのためのナレッジコミュニティとして、「Qiita」で情報を得ることができます。

マテリアルデザインの特徴6つ

次に、マテリアルデザインで知っておきたい特徴を6つ挙げます。マテリアルデザインは、シンプルなデザインを基礎とし、デザインの基本から色数のルール、ユーザーの操作性の考慮、画面を立体的に見せるための技法や、アニメーションといった特徴があります。

1：シンプルなデザインを基本としている

マテリアルデザインに使われる形状は、基本的に長方形となっています。この形を基本に、四隅の角を丸く、つまり角丸にします。角度やカーブさせる位置によって形状の変化を付けますが、非常にシンプルな形になります。

シンプルな形状の中に異なる形状を追加することで、その異なる箇所が重要な意味を持つことをユーザーに知らせます。

2：多くの色数を使用していない

画面の中でたくさんの色を使用すると、ユーザーがどこに注目を置けばよいのか分からなくなるため、マテリアルデザインではあまり色数を使いません。目的により使える色を限定し、配色を決定しています。

その目的に沿った一貫性をもつ色を使い、他の項目との区別をつけるように要素ごとに色を分け、現在意識を向ける場所はどこなのかをユーザーに提供します。

カラーパレットを作成するカラーツールやカラージェネレーターツールも多数ありますが、マテリアルデザインのガイドラインでは、色見本が用意されています。

3：ユーザーの操作性を重視している

ユーザーが画面を移動するためにナビゲーションと言われる表現を使います。現在の自分がどこにいるのか、目的地にたどり着きやすくするために提供する表現です。

例えば、音楽サイトで曲を探している場合、ライブラリや曲検索フォームなど、最初にトップページにある上位階層レベルを確認することができます。さらに検索画面から、すばやく下位階層の曲にたどり着けます。

また、新たに別の検索をしたいと思った場合は、元の画面に戻る方法として戻るボタンやナビゲーションバー、タブなどで任意の階層レベルに画面遷移することもできます。

他にもパンくずリストによりユーザーが一目見て操作できるように工夫を凝らしています。

4：平面の画面でも立体的に見える

実際の物理的な世界では、複数のオブジェクトは重なり合う（オーバーレイ）ことができます。重なり合うと、自然に影を落としその重なりの状態を把握することができます。

この物理法則に則って、マテリアルデザインでは、平面であっても立体的に見せる手法として、まるでライトが物質を照らすかのように「影（shadow, シャドウ）」や「光（light, ライト）」が有効に使われています。

また、エレベーションと呼ばれる高さ、つまり標高を表すコンポーネント間の距離を表す影を使用します。ベースの場所からどのくらい上に移動したか、高さを示す影を使用することで立体的かつ現実世界に近いイメージを与えます。

5：アニメーションを多く採用している

マテリアルデザインでは、モーションと呼ばれるアニメーションで意味のある動きを加えています。

例えば、ボタンにマウスを置く「ホバー」という動作の時にはボタンの色を変更する、オブジェクトを指先の動きで小さくしたり大きくしたりする、ページをめくるように右から左へと動かすなど、アニメーションを多く採用しています。

このように視覚的に変化をつけることで、ユーザーに実際に触っているような感覚を与え操作性を向上しています。

6：ルールが統一化されている

マテリアルデザインでは、統一感のあるデザインを取り入れており、デバイスの変化によりユーザビリティが損なわれないように設計されています。

インターネットで使用されるデザインは、画面の大きさやデバイスが変わると、レイアウトが変わったり、操作性が違ったりすることがあります。

しかし、デバイスの多様化によって様々なモバイル端末からサイトを操作するユーザーが増えたため、どんなデバイスでも対応できる普遍的なデザインが求められています。

転職前に覚えておこう！マテリアルデザインの作り方6つ

マテリアルデザインは、Googleがデザイン手法のガイドラインを設定しています。ここでは、マテリアルデザインの作り方をご紹介します。

紙とインクをメタファーしたデザインを取り入れたその手法は、影の使い方、アニメーションの使い方、紙の重なりを利用した厚みの表現方法、ボタンの種類の使い方、カードの使い方、ツールバーの使い方などのルールを定めています。

1：影の使い方

マテリアルデザインでは、影の使い方が特徴的です。

マテリアルサーフェスと呼ばれる紙をイメージしたオブジェクトを重ねていくイメージでデザインを考えます。

また、サーフェスが重なっている状態で上に移動したときにできる影を表現することも決められています。サーフェスの高さの物理法則に則った影を使用し、高さの表現を供わない影の使用はやってはいけないことになっています。

サーフェスの色は、通常の白っぽい色と黒っぽいダークテーマがあります。ダークテーマでは、サーフェスが暗い色を持つため影がほとんど見えません。そのため、サーフェス上を半透明のオーバーレイで覆い、そのオーバーレイの透明度の数値を調整させることでエレベーションの表現を行います。

この表現は、イラストレーター（イラレ）では、ドロップシャドウの機能を使用します。cssでは、box-shadowで要素に影を付けます。

2：アニメーションの使い方

マテリアルデザインでは、オブジェクトのマウス操作、例えばクリックやマウスオーバー（ホバー）により、色を変化させたり、浮かび上がるような表現を使用したりしています。

視覚的に変化をつけることで、ユーザーに実際に触っているような感覚を与え操作性を向上しています。

3：紙の重なり方を利用した厚みの表現方法

使用するオブジェクトの水平方向、垂直方向（XとY軸）はさまざまな寸法に自由に変更できますが、奥行き（Z軸）は1dpという決まりがあり、変更ができません。マテリアルサーフェスの重なりは、まるで紙が重なっているように表現されています。

1dpという非常に薄い紙を重ねていくイメージでデザインを考えます。

その上で、2020年から次世代のトレンドである「ニューモーフィズム」というデザイン表現も注目されています。マテリアルデザインと異なる点は、マテリアルデザインが紙を重ねた表現であることに加えて、ニューモーフィズムでは地上であるベースレイヤーを基本として、オブジェクトが押し出されたり凹んだりしている特徴があります。

4：ボタンの種類別の使い方

ボタンには種類があり、その目的や用途によって使い分けます。フロート型、浮き出し、フラット型、アウトライン型と呼ばれるボタンに分けられています。

中でも一番重要とされているのはフロート型で、使用回数を絞り、重要な時にのみ使用する、目立たせるボタンです。

フロート型の場合

フローティングボタンは、ボタンの中でも一番重要とされるボタンです。英語ではFAB（Floatin Action Button）と呼ばれています。FABは、1画面に1つだけの使用とされています。

2018年からはテキストも追加することができ、アイコンの意味が分かりやすくなりました。

ボタンの形は円形で、ボタンサイズにも規定があります。画面の端に配置する場合は、24dp以上の余白（マージン）を設けます。

浮き出し型の場合

形は長方形で、浮き出したような立体感のあるボタンです。

ホバーするとふわっと浮き上がったように影が大きくなります。クリックもしくはタップ時に波紋が広がるような、リップルと呼ばれるエフェクトをもちます。

浮き上がっているため、フロート型ほどではないですが比較的重要なボタンとして使われます。

フラット型の場合

フラットボタンは、フラットでシンプルなボタンになります。フロート型、浮き出しボタンと比べて一番シンプルで、テキストリンクと同様です。

シンプルなため、他の要素との組み合わせで使用されることが多くなります。例えば、カードの上などでも使用され、他のテキストと区別するために色を追加します。

アウトライン型の場合

アウトラインボタンは、Google I/O 2018で発表され、ガイドラインに新たに追加された新しいボタンです。

薄いグレーの線で囲まれた、シンプルなボタンです。フラットボタンと同じく、カード上に使用されます。浮き出しボタンよりも重要度が低い位置づけで使われます。

5：カードの使い方

マテリアルデザインでは「カード」という概念が重要です。

カードとは、実際の紙同様、薄く四角い紙の素材で、インクで印刷されているイメージです。マテリアルデザインではアプリ上にカードが表示されているような隠喩（メタファー）の概念をもちます。

カードは関連性のある情報をまとめています。カード1つにつき1つの情報にします。また、現実世界の印刷物と同様と考えますので、カードの上の文字がはみ出して表示されないようにコンポーネントを組み合わせます。

カードの表示にはルールがあり、複数のカードが並べられている場合、横にスクロールはできません。スクロールできるのは縦の方向のみです。

また、カードに入る要素がたくさんある場合、隠れている文章などの情報はスライドダウンさせます。

6：ツールバーの使い方

ツールバーは、アプリバーとも言われます。画面のヘッダー部分に表示されるバーです。

ツールバーに使用する色は、プライマリーカラーにすることが多いですが、黒や透明の場合もあります。

左側には、「ハンバーガーメニュー」と呼ばれるナビゲーションドロワーの開閉を行うボタンを配置してメニューをすぐに確認できるようにしています。

参考にすべきマテリアルデザイン事例5選

マテリアルデザインの参考となるecサイトをご紹介します。

ユーザビリティの向上を目的とした、サイドメニューやパンくずリスト、プルダウンなどの配置が参考になります。また、マテリアルデザインで統一されたデザインは、美しく、どこに注目を置くのか一目で分かる操作性の快適さが洗練されています。

1：Google Trips

Google Trips（Google travel）は、旅行予約を行うために必要なデザインが豊富な内容になっています。

サイドメニューを設定してすぐに行きたい項目にアクセスできるユーザビリティがあります。カレンダーの設定、スクロールバーの場所、スナックバーの使い方も参考になります。

2：Materialize

マテリアルデザインのCSSフレームワークで有名なMaterializeは参考になります。

文字の情報の中に、影のある浮き出しボタンを効果的に使い、重要な情報へのアクセスを際立たせています。JavaScriptやCSS、プラグインなど使いやすいパーツを紹介しています。

3：Rentberry

ネット不動産サービスのWebサイトです。トップページが淡い色のきれいなグラデーションで統一されています。透明感のある色味が素敵な印象のサイトになっています。

写真に影を使用し魅力的に演出し、訪問スケジュールの決定などのボタンが分かりやすく配置されています。

4：Hoo Koo Koo

幾何学的なシンプルな形のアニメーションが効果的に使用されていて、美しいWebサイトになっています。

浮き上がった形や画像をエレベーションで表現し、高さのある浮遊感を持つ物体が、アートのような美しいマテリアルデザインを作り出し完成されています。

5：Udacity

すっきりとした直線的な表現がアカデミックな雰囲気を出しています。カードを有効的に使って、まるで映画を選ぶかのように講座やセミナー、コンテンツを選択できるように設計されています。

色々なところからアクセスができる構造になっていて、目的の場所にたどり着きやすくなっています。

マテリアルデザインについて理解しよう

マテリアルデザインは、ホームページ、WordPress、ブログなどが、パソコンやスマホアプリ上で統一されたプラットフォームで提供されています。

東京大学、慶應義塾大学、芝浦工業大学といった大学や研究所でも専門に学ぶことができます。

今後も普遍的で求められるマルチデザインを理解して転職に活かしましょう。

インフラエンジニア専門の転職サイト「FEnetインフラ」

FEnetインフラはサービス開始から10年以上『エンジニアの生涯価値の向上』をミッションに掲げ、多くのエンジニアの就業を支援してきました。

転職をお考えの方は気軽にご登録・ご相談ください。