のんでざ!

艦これ、デザイン、webに興味があるただの大学生のブログ

マテリアルデザインの2つの目標と3つの基本原理

 

f:id:pinebook0416:20170406224826p:plain

こんにちは、Airです。

マテリアルデザインっていいですよね。このブログのデザインもマテリアルデザインのテーマを使っています。

 

webgaku.hateblo.jp

みなさんが毎日使っているであろうGoogleのサービスのいたるところでマテリアルデザインは使われています。

そんな身近なデザインの考え方を見ていきましょう。

マテリアルデザインとは

まずはこちらの動画をご覧ください。

youtu.be

 

公式ドキュメントからマテリアルデザインの概要をそのまま引用します。

Googleでは、時代を超えて共通する優れたデザインの原則と、科学技術の革新性と可能性とを融合させた視覚言語を作り出すことに取り組んできました。こうしてできたのが、マテリアルデザインです。

Googleがマテリアルデザインの理念や特徴を発展し続ける限り、この仕様は生きたドキュメントとしてこれからも更新されていきます。

と、すごい(語彙力皆無)デザインをグーグル先生は考えたわけです。

私はiPhoneユーザーですがこのマテリアルデザインがすきでアプリはGoogle製のものを多く使っています。

その中でも特にGoogleカレンダーがおすすめです。

 

 予定がある日だけ予定が表示され、リマインダーや自分のゴールを設定することなどができます。

個人的には予定の名称に合わせてサムネ画像が変わる機能が地味に好きです笑

f:id:pinebook0416:20170406231726p:plain

マテリアルデザインの目標

  1. 時代を超えて共通する優れたデザインの原則と、科学技術の革新性と可能性とを融合させた視覚言語を作り出すこと。
  2. プラットフォームの種類やデバイスのサイズにかかわらず統一感を出すことができ、単独の基盤システムを開発すること。

となっています。

1を私なり解釈すると

「今だけでなく、未来のテクノロジーくんとも仲良くやっていけるようなデザインを作る」

といった感じでしょうか(?)

また、2については

「スマートフォン、PC、タブレットのどの端末を使っても違和感なく使えるデザインをみんなが創り出すことができる環境を整える」

みたいな感じでしょうか(違ってたらゴメンナサイ)

このように、グーグル先生は現在だけでなく、未来も見据えた壮大なデザインを考えたわけです。

また、それらをみんなが享受できるような環境も作ろうをしているわけです。

 

マテリアルデザインの基本原理

マテリアルデザインの基本原理1

 マテリアルはメタファー(比喩)である

f:id:pinebook0416:20170407000318p:plain

 

マテリアル(Material)、つまり物質のことです。

マテリアルはメタファー(比喩)である。

...?? 

ちょっとよくわからない。

公式ドキュメントを熟読して自分なりに理解すると、

現実世界の物理法則を破ることはないが、現実世界とは異なる体験を与えてくれる。

ということではないでしょうか。

Googleのアプリやウェブサービスを使っていて確かにそのことは感じます。

すごく動きがナチュラルなんですよ。

初めて使うアプリでもどのボタンを押したらどのようなことが起こるのかひと目でわかっちゃうんです。

これって、当たり前のように見えて実はとてもすごいことなんだと思います。

 

マテリアルデザインの基本原理2

大胆で生き生きとした、意識的なデザイン

f:id:pinebook0416:20170407000537p:plain

 

マテリアルデザインは見た目をよくするだけではなく、

  • 計画的に選んだ色
  • 鮮明な画像
  • 大きな文字
  • 意図的な余白

を用いることによって大胆で生き生きとしたインターフェースを実現させます。

これらによって私たちユーザーは操作に夢中になるのです。

また、ユーザーの操作を強調することによって重要な機能が瞬間的にわかり、ユーザーにとっての道しるべとなります。

さきほどのグーグルカレンダーでいえば、右下のボタンはユーザーの「予定を追加する」という機能をひと目で分かるようになっています。

 

 

マテリアルデザインの基本原理3

動きには意味がある 

 

f:id:pinebook0416:20170407001647p:plain

オブジェクトひとつひとつの動きには意味があり、注意を引いたり連続性を維持するのに有効です。

動きは控えめだけど明確であるから状態の遷移は効果的でありながら、一貫性があるものになります。

 

まとめ

マテリアルデザインは明確な目標と基本原理の上に成り立っており、私たちユーザーに自然な形で最高のエクスペリエンスを与えてくれる。

そんな素晴らしいデザイン。