マテリアルデザインとは
Googleが推奨するマテリアルデザインは、厳密にルールが定められたガイドラインが存在します。
Google推奨のデザイン
2014年にGoogleが発表して世界的な統一デザインとなったのがマテリアルデザインです。『マテリアル』とは、英語で『物質的な』という意味を持つ単語です。マテリアルデザインとは、現実世界の物理的法則を取り込んだデザインということになります。
つまり、光と影、物の重なり、奥行きといったものを、実際の物がそこにあるようにデザインするということです。ユーザーが操作する際、直感的にわかりやすい動きや反応をし、誰でも見ただけで扱い方がわかるというものです。
Googleのガイドラインでルールが決まっている
Googleはガイドラインによって厳密にルールを作っており、ルールに則ったデザインでない場合は、マテリアルデザインとは言えません。
ガイドラインでルールを決めることによって、どのようなデバイスや閲覧環境で見ても、誰もがわかるようにするねらいがあるのです。統一されていないデザインは、ユーザーの迷いにつながってしまいます。
基本概念と使い方
世の中には、さまざまなサイトやアプリがありますが、統一されたデザインによって、初めて利用する際にも簡単に操作ができることを実現しているのがマテリアルデザインです。基本的な概念と使い方を紹介します。
紙要素とボタンやアイコン
画面上にあるボタンやアイコンは、マテリアルデザインにおいては『紙要素』として捉えます。つまり、現実世界での紙と同様に重ねることができ、厚みがあり、伸縮できて無色という要素です。
マテリアルデザインで使用されるボタンは、主に以下の4種類あります。
- フローティングアクションボタン：浮き出したように見える円形のボタン。テキストを含めるなどアレンジ可能
- 浮き出しボタン：浮き出したように見える長方形のボタン。クリックやタップで押したような動きがつく場合が多い
- フラットボタン：テキストのみのシンプルなボタンで、色は自由に付けられる
- アウトラインボタン：2018年に新規追加された、囲みがデザインされたボタン
アイコンは無料で使用できるGoogle提供の『Material Icon』があり、HTMLのヘッダーにコードを入れるだけで導入できます。色やサイズも変更できるので、マテリアルデザインに簡単に活かせます。
インク要素とカラーパレット
マテリアルデザインでは、画面上の色をインク要素と呼びます。これは、紙に印刷された状態と思えばわかりやすく、文字や写真、動画などもインク要素となります。
色はそのデザインを決める大切な要素ですが、Google推奨のカラーパレットがあり、その中から選ぶことで、マテリアルデザインに合う配色が実現可能です。『メインカラー』『サブカラー』『アクセントカラー』を選ぶ際に参考にすると、デザイン全体に統一感が生まれます。
カラーパレット以外に、白・黒・グレーを合わせて使うことができるので、より見やすい配色を考えてみましょう。
フレームワークやテンプレートの活用
マテリアルデザインが素晴らしいデザインであることはわかりましたが、ルールが細かく、すべて覚えるのは大変です。そこで便利なフレームワークやテンプレートをご紹介します。
Google提供のpolymer
ホームページの各パーツをコンポーネント化する、『Web Components』という新技術が使用されているGoogle提供のフレームワークです。
各パーツの再利用や、複数人での作業がしやすいことが特徴です。新しい技術なので、今後Webデザインの標準になるとも言われているため、先取りしてみましょう。
手軽に始められるMaterialize
マテリアルデザインを手軽に導入できるCSSのフレームワークです。基本的なパーツやスタイルが準備されているので、シンプルで簡単にWebページを作ることができます。
『Bootstrap』と使い方が似ているので、使ったことがあるならすぐに使いこなせるでしょう。スタイルの変更や追加も可能ですが、カスタマイズが多いと修正しにくい面もあります。
デモが便利なMaterial UI
Googleのガイドラインに則って開発されたコンポーネントセットです。全体の色調を設定するテーマと、部品に当たるReactコンポーネント群を組合せ、アプリケーションを作ることができます。
トップページでデモを見ることができるので、どのような見え方をするのか確認しながら開発を進められて便利です。
まとめ
マテリアルデザインは、現実世界での奥行きや重なり、影や質量を取り入れることで、直感的な操作ができることを目指したGoogle提唱のデザインです。
マテリアルデザインには、細かいガイドラインやルールがあり、開発したくても敷居が高いと感じている人も。しかし、マテリアルデザインを踏襲した便利なフレームワークやテンプレートを活用することで、マテリアルデザインをうまく取り入れた開発をすることができます。
トレンドであるマテリアルデザインを取り入れたい人は参考にしてみてください。