色んなデバイスサイズに対応できるマテリアルデザインとは？

Home
Webプログラミング, デザインの知識
色んなデバイスサイズに対応できるマテリアルデザインとは？

2021.11.3

色んなデバイスサイズに対応できるマテリアルデザインとは？

Webサイトにアクセスするデバイスは、PCやタブレット・スマートフォンなど様々なタイプがあります。それぞれのタイプでも大小さまざまなサイズがあるため、ウェブデザインする上で様々なサイズに対応できるデザインをする必要があるケースが非常に増えています。

今回は、さまざまなデバイスサイズに対応することができるデザイン手法の１つであるマテリアルデザインについて紹介します。

マテリアルデザインとは

Google が提唱しているデザイン手法のガイドラインです。言葉の通り「物質的な」デザインを意識したデザイン手法です。「物の動き」「影」「奥行き」を現実世界の法則に沿った形でデザインしていくことで、ユーザーが直感的に捉えられるようにしていく考え方になります。似たようなデザイン手法にフラットデザインがありますが、スキューモーフィズムを取り入れているという点で違いがあります。

マテリアルデザインの特徴は、装飾が少ないシンプルなデザインであるため様々なデバイスサイズに対応しやすい特徴があります。最近は、パソコンやスマートフォンなど様々なデバイスがあるため、ディスプレイサイズや向きが多くなるため装飾が多いデザインはレイアウトが崩れたり操作性が悪くなりやすい傾向があります。

デザインのルールや注意ポイント

マテリアルデザインは、現実世界の「紙」と「インク」の関係に紐づけてルールが設計されています。紙は、文字が書かれるための土台で、ボタンやカード、ヘッダーのメタファーです。重ねたり浮かせたりすることはできますが、逆に通り抜けのような物理的な法則に反するような動きができません。インクは紙の上に描写されるもので変幻自在なものであり、文字やイラスト、画像などを表現するメタファーです。

土台を立体的に見せるために影をつけたり、奥行きを表現するために紙を重ねることでユーザーが直感的に理解できるようにします。

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

フラットデザインは、立体感や光沢などを省いたシンプルで平面的な概念のデザイン手法です。過剰な装飾がなく何がどこにあるか解りやすくなっているため、ユーザーの視覚的負担も減らすことができるようになっています。

また、シンプルなデザインであるため、データ容量の少なさからアイコンやロゴによく使わわれることが多いです。一方で、画面上の変化があまりないため、重要な部分を目立たせにくいといったデメリットもあります。

マテリアルデザインは、フラットデザインのシンプルさを残しつつ感覚的な操作を可能にしたデザインと言えます。アニメーションで視覚的変化つけたり、影や厚みを出すことで立体的に見えるように工夫しています。

マテリアルデザインの大事な要素

マテリアルデザインには重要な４つの要素があります。

影

影を利用することで、各オブジェクト間の距離を知るための手がかりになるようにできます。例えば写真だと、クリックした画像は背景が薄暗くなり写真がはっきり見えるようにしたりします。そうすることで、写真が上にあるオブジェクトとはっきり理解しやすくなります。

アニメーション

アニメーションは、感覚的なサポートする役割があります。視覚的な動きがあることで、ユーザーは行った操作を認識しやすくなって操作に迷いにくくなります。

厚み

厚みは、紙のレイアウトで表現することができます。表現する時は、「つなぎ目」と「段差」の２つの要素を利用します。
「つなぎ目」は２枚の紙を並べて繋ぎ合わせたイメージで、見た目に奥行きはありませんが影のような雰囲気を作ることができます。

「段差」は、紙を重ねているように表現することで厚みが出ているように見せます。影を使うことによって背面、前面を表現して段差を表現します。

ボタン

ボタンには、「フロート型」「持ち上げ型」「フラット型」といった３つの種類があります。フロート型は、紙のつなぎ目に両方を跨ぐように配置される場合と、段差に上に重なるように配置される場合と、目的によって使い分けます。
持ち上げ型は、影や段差を作ることで持ち上がったようなデザインになります。フラット型は、周辺の要素と並ぶようにさせて、操作時に色が変化させることで異なる要素だと認識させます。

マテリアルデザインを実現するCSS フレームワーク

MUI

mui

Google のマテリアルデザインガイドラインに則って作成されたCSSベースのフレームワークです。CSSとJSのファイルを合わせても10Kbyteほどで非常に軽量化されています。また、遅延読込なども対応しているため画面読み込み完了までの速度が非常に早いといった特徴があります。

マテリアルデザインを実現するフレームワーク

マテリアルデザインを実現できるフレームワークはたくさんあります。いくつかフレームワークとそれぞれのメリットとを紹介していきます。

Material UI

Material-UIは、Reactでマテリアルデザインを容易に実現することができるライブラリです。あらかじめ、ボタンやカードなどのUIをコンポーネント化しているので一からデザインする手間がありません。Reactベースのフレームワークなので、データに応じたカスタマイズやイベントに合わせたアニメーションなどもしやすくなっています。

Material Design for Bootstrap

Bootstrapでマテリアルデザインをできるようにするためのフレームワークです。ReactやVueなどモダンなフレームワークにも対応しているため、既存のプロジェクトなどに導入がしやすいといったメリットがあります。

Material Components for Web

CSSベースのマテリアルデザインフレームワークです。CSSのみでマテリアルデザインができるため、ReactやVueといった使っているJavaScriptフレームワークに依存せずに利用することができるのが特徴です。依存せずにデザインできるため、後々使用するJavaScriptフレームワークを変更する際にも対応しやすいと考えられます。

マテリアルデザインを採用して様々なデバイスに対応しよう

ディスプレイサイズが変化しやすい最近では、マテリアルデザインを使うことで多くの端末に対応しやすくすることができます。マテリアルデザインはGoogleがガイドラインを作っているということもあり、ベースがしっかりしている点もメリットとしてあげられます。マテリアルデザインをサポートするWebフレームワークは豊富に存在しているので、自分に合ったフレームワークを選んで開発しやすいデザイン手法と言えるでしょう。