フォーカスしたいもの
マテリアルデザインと聞くと、一番に思い付くのはGoogleのサービスが一般的でしょう。
Googleが推奨するマテリアルデザインは、ユーザーが感じる操作性を最も重視しており、
利用するユーザーからも安定した人気を誇るデザインです。
今回の記事では、マテリアルデザインの概要からメリット・デメリット、使用事例などを紹介します。
マテリアルデザインとは？
マテリアル（material）は原料・材料・物質的などと訳される通り、物理的な法則にのっとったデザインを指します。
デバイスが今後、どれだけの多様化しても対応できるよう、統合フレームワークを作ろうとしたのがマテリアルデザインができたきっかけです。
マテリアルデザインは、どのデバイスでも操作性の分かりやすさを実現するために、現実の世界と同じ物理法則を踏まえたデザインとして誕生しました。
マテリアルデザインの特徴
マテリアルデザインでは1つのページに多くの色は使いません。ユーザーは画面の中に多くの色があると注意が散漫になってしまうからです。
webサイト自体は本来、平面であるもののマテリアルデザインでは「影」を活用することで、立体的に見えるよう演出されています。
視覚的にも変化が分かりやすいように作られており、ボタンにマウスポインタを合わせると、色が変わる等のアニメーションを数多く採用しています。ユーザーが「自分が操作している」感覚を演出しているのです。
マテリアルデザインとフラットデザインの違いは？
マテリアルデザインと比較されるデザインに、「フラットデザイン」というものがあります。
フラットデザインとは、その名の通り「平面的でシンプルなデザイン」のこと。
フラットデザインは、画面上の変化がほとんどなくアイコンなどもシンプルなため、一見すると分かりにくい場合もあります。
しかしマテリアルデザインは、立体的な表現とアニメーションにより、ユーザーが視覚的にも感覚的にも分かりやすいデザインとして設計されています。
マテリアルデザインの重要な要素
マテリアルデザインを構成する大事な要素をひとつずつ、ご紹介します。
ボタン
ボタンのデザインは「フロート型」「レイズド型」「フラット型」の3種類です。
各タイプ、webサイトのレイアウトに適した部分の表現方法として選択し、配置していきます。
厚み
厚みの表現は実際の紙のイメージで表現しています。
「つなぎ目」と「段差」の2つの表現があり、つなぎ目は2枚の紙を平行に並べてつなぎ合わせたイメージ。
「段差」は、紙が重なって厚みのあるイメージで、影によって背面と前面を表現可能。見た目でも奥行きを表現することができます。
アニメーション
アニメーションによって、ユーザーの感覚的サポートを行います。
マウスポインタを画像などの要素の上に持ってくると、画像が暗く表示されたり、影が付いたりなど、
ユーザーの操作でweb上に変化が生まれ、操作性を感じることができます。
他にも画面をタップすることで、波紋が生まれるアニメーションがあり、
ユーザーはこの波紋のエフェクトによってタップした場所を認識。操作を感覚的に理解することができます。
影
影をweb上で演出することで、オブジェクトの距離感や関係を知る手がかりになります。
ひとつの例として、画像を表示する場合、リストの中から見たい画像をクリックすると背面が暗くなり、写真がはっきりと表示されます。
マテリアルデザインを使用するメリット
マテリアルデザインを導入するメリットは、ユーザーが感じる「分かりやすさ」です。
現実世界の物理の法則をweb上で演出するのがマテリアルデザイン。
ユーザーは影の付き方やその他の動作から、画面がどのように構成されているのかを感覚的に判断できるのです。
自分が行った操作がweb上でアニメーションとして反映されることで、どんな操作がweb上にどんな影響を与えるのかが分かります。
色を多く使わないことや、配色のルールも「分かりやすさ」を作り出す要素です。
マテリアルデザインのデメリット
マテリアルデザインには、定義付けされたデザインルールがたくさん存在します。
覚えることが多く、制約も多いため、慣れるまで時間がかかってしまうという点がデメリットです。
しかしルールがしっかり決まっているということは、ルールさえ覚えてしまえば、誰でも簡単に作りやすいということでもあります。
マテリアルデザインの使用事例
ここでは実際にマテリアルデザインの使用事例を紹介します。
Google Map
地図の部分と、検索および情報表示部分は明らかに異なる役割があります。そのため、サイドバーの周囲に影を演出しています。
それ以外にも、地図上のピンにも影の演出があり、本当の地図にピンが刺さっているような立体感を得ることができます。
Google Play
各アプリの枠に影を付けることで、立体感と商品としての特別感を生み出しています。他にもボタンやサイドバーにも影が付いています。
アプリ上やサイドバーの各要素の上にマウスポインタを移動させることで、その部分が暗くなるよう演出されており、ユーザー自身の操作を視覚化できるように作られています。
Think with Google
色の使い方がシンプルで、一見するとフラットデザインのようにも見えますが、記事の上にマウスポインタを動かすと影が付くアニメーションが発生します。
他にも、複数の記事がある項目に関しては厚みがあるように演出されています。
マテリアルデザインと相性の良いCSSフレームワーク
Googleの自社デザインであるマテリアルデザインは、上記のもの以外にも多く使われています。
ここでは、デザインのトレンドのひとつであるマテリアルデザインと相性の良いCSSフレームワークを3つご紹介。
Materialize
Materializeは、マテリアルデザインを実装しようと思った方ならば、ほとんどの方が知っているCSSフレームワークではないでしょうか。
webで手軽にマテリアルデザインを始めるのに最適で、サードパーティー製のテーマにも広く使われています。
Surface
Surfaceは小型で、とても軽量なCSSフレームワーク。初心者向けではありませんが、フレームワークを難なく使える人なら問題無く使えます。
新しいプロジェクトの試作をするために最適なフレームワークです。
MUI
MUIは個人開発のCSSフレームワーク。一定の人気もあり、個人開発のCSSとは思えないクオリティです。AngularやReact向けにそのまま使えるほどです。
マテリアルデザインのまとめ
マテリアルデザインは、どのデバイスでもユーザーが操作性を最大限に感じられることを意識して作られたデザインのガイドラインです。
現実の物理法則を取り込んだデザインのため、直感的に操作ができることでも人気を誇っています。
気になった方は、Googleが公開するガイドラインを基にして作成してみてはいかがでしょうか？
要素の取り入れ方なども分かりやすいので、比較的スムーズに導入が可能です。
デパート採用情報
株式会社デパートでは一緒に働く仲間を募集しています
