マテリアルデザインとは – まーくんのアフィリエイト学校【afb】

アフィリエイトを始めるために知っておきたいことなどの基礎から、運営に関する知識やテクニックなどの応用まで様々なノウハウを学ぶことができます

アフィリエイトを始めるために知っておきたいことなどの基礎から、運営に関する知識やテクニックなどの応用まで様々なノウハウを学ぶことができます

マテリアルデザインとは

公開日 最終更新日

マテリアルデザイン

マテリアルデザインとは、Googleが提唱しているデザインの考え方で、現実世界の法則をデザインに取り込む手法のこと。それによってユーザーが直感で操作できるように導くためのデザインです。

 

マテリアルデザインの大まかな特徴

・現実の法則を取り入れる

・奥行きの表現

・連続性のある動き

 

現実の物理法則を取り入れる

影を付けて浮き上がっているように見せ、重なりを表現することによってユーザーに操作方法を伝わりやすくします。

マテリアルデザインの特徴

なので、枠から文字がはみ出したデザインや、下にあるデザインが上に飛び出したりするといった、現実的ではないデザインはNGです。

マテリアルデザインNG

▲文字が枠から飛び出している×

 

▲下にあるデザインが上に飛び出している×

 

正しいマテリアルデザイン 

▲しっかりと下にある枠に収まっている◎ 

 

奥行きの表現

マテリアルデザイン_奥行きの表現

マテリアルデザインには上下左右だけでなく、奥行きも表現してユーザビリティを高めます。

しかし奥行きと言っても洞窟のように深いわけではなく「紙が重なっているような薄い奥行き」を表現します。

 

マテリアルデザイン例

 

連続性のある動き

物理法則に従ってデザインを作るなら、動きも派手で突拍子もない動きを付けるわけにはいきません。

現実でモノが動く(動かす)のと同じような要領で、クリックしたときの動きや、マウスオーバーした時の動きを作らなければなりません。

この他にも細かくルールが決められているので、気になる方はGoogleのガイドラインを参照してください。

 

なぜこんなに細かくルールを決めてるの?

 

どのサイト・アプリでも統一したデザインというのは、ユーザーに一目見ただけで「何をするものなのか」というのが伝わりやすくなります。

 

例えばハンバーガーメニュー。

スマホが普及してからメジャーなデザインとなり、ほとんどの人が「ここを押せばメニューが出てくる」とユーザーに分かります。

 

このように、ルールを厳密に定めることによって「説明せずとも知っている(分かる)」という、非常に分かりやすいサイトになっていくのです。

 

マテリアルデザインのおさらい

簡単に今回のまとめをしておくです~。
のまとめ

・マテリアルデザインは現実的な法則に沿ったデザイン

・紙を重ね合わせたような奥行

・現実的な動きを持たせたアニメーション

 

関連用語

CSS

jquery

 

その他参考になる記事

【2018年版】マテリアルデザインとは?作り方とガイドラインまとめ:サルワカ

マテリアルデザインについて少し調べる:Qiita

 

アフィリエイト用語辞典 一覧に戻る