マテリアルデザインとは
マテリアルデザインは、2014年にGoogleが発表した新たなデザインの概念です。どのような規定や特長があるのかを見ていきましょう。
質量を表現したデザイン
マテリアルデザインの特長は『質量を表現している』という点です。マテリアルデザインは平面ではなくZ軸の概念を持つ『3D空間』と、その場を照射する『仮想の光』を備えています。
光が生まれるということは影が生まれるということであり、ひいては物質に『質量』が生まれることになります。この影の表現によって物質の質感や質量を表現することが、マテリアルデザインがこれまでのデザインと異なる部分です。
Googleがガイドラインを定めている
マテリアルデザインは、発案者であるGoogleがガイドラインを定めています。質量や影を意識した巧みなデザインを考えたとしても、このガイドラインを満たしていない場合はマテリアルデザインとは認められません。
影の付け方・ボタンの形状・紙の重ね方・レイアウトといった全ての要素に細かいルールがあります。
ガイドラインがきちんと定まっていることで、マテリアルガイドラインを作成しようとするデザイナーが、マテリアルデザインを意識したデザイン設計を考えることが可能なのです。
マテリアルデザインアイコンの作り方
マテリアルデザインのアイコンを作成する場合にどのように作成していくべきか、手順や考え方について解説します。
基本的なルールや考え方
マテリアルデザインに対する基本的な考え方やルールを知っていきましょう。マテリアルデザインには『実際に触れることができる現実感』が根底にあります。
そのためにも、まずは『現実の物理法則に沿うこと』がポイントです。物体の重なりや影の付き方が現実世界と同じになることで、『どんな操作をすれば良いか』をユーザーは直感的に理解できます。
印刷物向けの基本的な要素を取り込みつつ、ユーザーに分かりやすいように、ユーザーのアクションに対しアニメーションで反応するといった連続性のある動きを意識することも大切です。その上でGoogleのガイドラインに沿ったデザインが求められるのです。
NGなアイコン
マテリアルデザインにおいてNGとされるアイコン作成の例をご紹介します。
質量を表現するためとはいえ、『立体的』なアイコンデザインはNGです。あわせて斜めから見たようなアイコンを使ってもいけません。マテリアルデザインでは真横もしくは真上から見たデザインのアイコンを使いましょう。
複雑すぎるデザインや、無生物に顔をつけてキャラクター化したアイコンも、マテリアルデザインの規定によってNGとされています。
作成の流れ
作成にはAdobe製品の『Illustrator』などの描画ソフトが必要です。またアイコンのテンプレートがある場合も、あらかじめダウンロードしておきましょう。ここでは、Illustratorでの作成手順について紹介します。
Illustratorを立ち上げた後、まずはバックグラウンドを作成します。影の透明度などもガイドラインに細かく定められていますが、テンプレートを利用することで設定が比較的簡単に行えます。
ガイドラインに規定されている『shade』や『tint』を追加することで、デザインに自然な凹凸感が生まれます。それぞれレイヤーを新たに作成しましょう。バックグラウンドが完成した後でアイコンの主役であるフォアグラウンドを作成し、こちらにもshadeとtintを追加してください。
マテリアルデザインに使用できるカラーについても細かな規定があるため、注意が必要です。配布されているカラーパレットをダウンロードし、誤って規定外の色を使わないようにしましょう。
フリー素材配布サイトから入手
すでにできあがっているフリーアイコンを利用する方法もあります。マテリアルデザインのアイコンを配布しているフリー素材サイトを紹介しますので、活用してください。
Material Icons
『Material icons』は、Googleが提供しているアイコン素材のサイトで、無料利用できるアイコンが多数配布されています。
15カテゴリ、750種類にも及ぶマテリアルアイコンをSVGやPNGでダウンロードすることが可能です。CSSを利用することで、大きさや色を変えることもできます。
Nova
『Nova』は4000以上のアイコンがダウンロードできるかなり大規模なフリー素材サイトです。ただし、無料で利用する場合は350個という上限があり、それ以上のダウンロードは有料となります。
無料で利用する場合、1つのWebサイトやプロジェクトごとに100個以下のアイコンしか使用できず、5人以下のチームでのみ利用など細かい規定がありますので、利用前に確認しましょう。4種類の拡張子で保存ができるので、ユーザビリティにも優れたサイトです。
まとめ
マテリアルデザインは、質量を意識した最新のデザイン概念です。直感的に使える点やユーザビリティに優れ、Googleが定めているガイドラインを満たしていることが条件となっています。
自身で作成することもできますが、Googleの『Material icons』などの素材サイトからダウンロードもできるので、積極的に利用してみてください。マテリアルデザインを用いてWebサイトをブラッシュアップしていきましょう。