インターネットの普及に伴いWebやアプリ、デバイスなどの著しい発展が続く現代では、企業が提供するプロダクトやブランドのデザインに関しても重要度が増してきています。そのためデザインにおけるルールやレギュレーションである「デザインガイドライン」という考え方が再定義され、多くの企業で取り入れられています。

この記事では、デザインガイドラインが注目されるきっかけのひとつとなったGoogleのガイドライン「Material Design」について解説します。

Webやアプリデザインを中心とした基礎知識となるだけでなく、独自のデザインガイドライン作成の参考となる内容です。ぜひ今後の活動に役立ててみてください。

Material Designの概要

Material Design

Material Design（マテリアルデザイン）とは、Googleが2014年に提唱したデザインガイドラインのひとつです。これにはGoogleの世界観を実現するための開発技術や手法、デザイン、試みなどが含まれています。

新しく優れたユーザーエクスペリエンス（ユーザー体験）を提供するための設計体系で、ユーザーが触れる画面をマテリアル（物質）として捉え、「物質的で」「具体的な」定義を重視してユーザーが直感的に理解し操作できることを目的としています。

スマートフォンやタブレットなどの様々なデバイスが存在する中でも統一感のあるデザインを用いることで、デバイスに関わらず操作性に統一感が生まれます。現在のみならず今後のデバイスや通信環境の変化に対しても、ストレスの無いユーザー体験を実現するための一貫性あるデザインのガイドライン、それがMaterial Designです。

いわゆる「分かりやすさ」を追究したデザインガイドラインであるため、各種デザインで参考となる要素が多く、デザインに関わる業界や職業においては一度は目を通しておくべきバイブル的なガイドラインとして有名です。

Material Designの特徴

Material Designの全体に共通する特徴としては以下の要素が挙げられます。

• 現実世界に則した表現
• 2Dにおける奥行き表現
• シンプルさと見やすさ
• モーション

現実世界に則した表現

Material Designは現実世界のルールに則した表現設計にすることで、誰でも分かりやすいデザインを作り上げます。具体的には「紙」と「インク」で構成されたデザインで、印刷物を意識した作りとなっています。紙はテキストや画像などを配置する土台であり、インクはテキストや画像などの要素を指します。これらは、現実世界と同じように、通り抜けなど物理法則を無視した表現をしないように作られています。また光と影の活用など、物理的な世界から着想した内容になっています。

2Dにおける奥行き表現

デバイスによらず画面は基本的に2Dです。そのため平面的な世界ではありますが、ここに「影」の表現を用いることで、奥行きのある3D表現が生まれます。土台である「紙」に影を付けることで2枚の紙が重なり合った表現を生み出し、どちらが手前にあるかを直感的に分かるようにしています。影の強弱で奥行きの深さを表現するなど、シンプルでありながら多様な表現も可能です。

シンプルさと見やすさ

使いやすさや分かりやすさの重要なファクターである「シンプルさ」。Material Designではシンプルさを大切にしているため、使用する色の数や画面の構成要素を制限しています。これは見やすさだけでなく、読み込む速度を早める効果もあります。余計な要素をそぎ落とし、必要最低限な要素で適切な表現を行うための基準が設けられています。

また色のテーマを設け、色の濃淡や対照的な色使いのコントラストによって強調や区別を表現しています。テキストの不透明度などもきちんと基準が定められています。

モーション

UIを表現力豊かで使いやすいものにするために、Material Designではモーションに関しても取り入れています。

スワイプやタップを行った際に、画面上の要素に適切なモーションを施すことで、画面でどのような操作が可能で、今行った操作からどういったことが起こるのかを直感的にユーザーに理解させることができます。また重要な要素に注目させたり、操作にブランドの個性を加えて表現するためのモーション表現も定義されているので、ユーザー体験の向上に役立つ内容です。

Material Designのメリット、デメリット

Material Designにはメリットとデメリットが存在します。参考にする場合はこの点も理解しておきましょう。

メリット

Material Designのメリットは、やはり上述した「分かりやすさ」にあると言えます。余計な要素を排して現実世界と同じ表現を用いることで、ユーザーは新たな理解を必要とせずにデバイスやプロダクトを利用することが可能になっています。また色使いやテキスト、さらには適切なモーションにも基準が定められているため、直感的かつ見やすく設計されるようになっています。

実際にGoogle製品に触れたことのある方であれば、その分かりやすさについて頷ける部分も多いことでしょう。

デメリット

基準がきっちり決められているということは、それだけ理解して守らなければいけない項目が多いとも言えます。デザインとはある側面では自由な表現を求められる分野でもあるため、Material Designの基準に固執しすぎることは、場合によってはマイナスとなる可能性もあります。

Material Designを参考とする場合は、あくまでも一つの好事例として捉えて、部分的に活かしていくという前提を持っていた方が良いかもしれません。

Material Designはどんな場面でよく使われるのか

Material DesignはUIデザインのガイドラインであるため、基本的にはAndroid OSなどのGoogle製品に使われています。とはいえ様々なUIデザインに活かせる内容は非常に多く、Webやアプリ（iOS含む）全般のデザイン活用できるでしょう。

実際に、Material Designに一通り目を通してからWebやアプリのデザインを行っているというデザイナーも多く、Webデザイン界隈では基礎知識として扱われているといっても過言ではありません。

その他の便利な使い方

またMaterial Designは、デザインガイドライン作りの一例としても非常に有用なものです。分かりやすいデザインを体現するものであるため、ガイドライン自体も非常にシンプルで見やすい構造になっています。これから自社のデザインガイドラインを作成したいと考えている方には、イメージを作るためにきっと役立つはずですので、参考にすると良いでしょう。

デザインガイドライン作成のサポートツール「Spirally」

自社でもMaterial Designのようなデザインガイドラインを作成したい、と考えている方向けに、簡単で利用しやすいツールを最後にご紹介します。

それが企業向けのデザインガイドライン作成プラットフォーム「Spirally（スパイラリー）」です。

「Spirally」の機能

「Spirally」の特徴は以下のような機能があり、デザインガイドラインを作成や運用を非常に簡単に行えます。

• テキストの編集
• メディアの挿入
• テンプレート機能
• カラーブロック設定
• カラーブロックの自動生成
• ファイルアップロード可能
• プロジェクト単位での公開範囲設定
• バージョン管理情報

プロジェクトの編集について

Spirallyのプロジェクト編集画面では以下の機能が備わっているため、手間をかけず直感的にデザインガイドラインの作成を行えます。

• 見出しの挿入
• 文章の挿入
• 画像・ファイルのアップロード
• 引用の挿入
• カラー設定（画像からの自動生成）
• テキストリンクの挿入
• ブロックリンクの挿入
• テーブルの編集

まとめ

デザインガイドラインの代表例であるMaterial Designについてその概要と特徴などについて解説しました。上述したように、Material DesignはUIデザインなどの参考として非常に勉強となる一例です。また、ガイドライン自体も洗練されているがゆえに、多方面で活用されているとも言えるでしょう。

ガイドライン作成を検討中の方もぜひ一度目を通してみることをおすすめします。また、作成に着手する際は、スムーズな作業をサポートする「Spirally」の利用もぜひ検討してみてください。

＞＞お問い合わせはこちら