改装中

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

こんにちは、Airです。

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

参考 ウェブ学のすすめhttp://webgaku.hateblo.jp/

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

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

マテリアルデザインとは

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

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

Googleでは、時代を超えて共通する優れたデザインの原則と、科学技術の革新性と可能性とを融合させた視覚言語を作り出すことに取り組んできました。こうしてできたのが、マテリアルデザインです。Googleがマテリアルデザインの理念や特徴を発展し続ける限り、この仕様は生きたドキュメントとしてこれからも更新されていきます。

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

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

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

Google カレンダー

Google カレンダー

Google, Inc.無料posted withアプリーチ

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

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

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

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

となっています。

1を僕なり解釈すると

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

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

また、2については

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

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

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

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

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

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

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

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

…?? 

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

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

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

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

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

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

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

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

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

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

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

  • 計画的に選んだ色
  • 鮮明な画像
  • 大きな文字
  • 意図的な余白
を用いることによって大胆で生き生きとしたインターフェースを実現させます。

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

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

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

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

動きには意味がある


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

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

まとめ

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です