リノベーション

マテリアルデザイン

マテリアルデザインを取り入れて、
ビジュアルアイデンティティの確立と直感的なユーザービリティ―で顧客を定期訪問させる。
オフィシャルサイトは毎日見ていると飽きるものです。視覚効果はどんなに作り込んだサイトで有っても、
バナーや全体の色味、背景等を見直しデザインの鮮度を保つ必要が有ります。

Googleが昨年7月に発表した「マテリアルデザイン」です。
「2015年のWebデザイントレンド」関連記事には必ずと言っていいほど取り上げられるテーマです。
「マテリアルデザイン」は、iOSやWindows 8などで採用されている「フラットデザイン」と、
デザイン要素のシンプルさでは共通する部分があるものの、最大の違いは「光源、影、奥行き」の概念を持つことでしょう。

しばしば「どこを押せば良いか分からない」と言う声も聞かれるフラットデザインとは違い、
マテリアルデザインでは「キーライト」と「アンビエントライト」という2種類の仮想の光源がもたらす影を重視し、
直感的に分かりやすいインタラクションを提供します。

画面の中に奥行き(3D空間のZ軸)の概念を設定し、
影を使ってオブジェクト同士の関係性を表します。
しかしその影は、かつてトレンドだった「スキュアモーフィズム」のリアルな質感よりも控えめです。
基本の状態やフロートした状態など、コンテキストによって、どのくらいの奥行きの影を使うかが、
ビジュアル言語として規定されています。

この辺りの考え方は、本家本元であるGoogleのガイドラインにまとめられていますので、
英語ではありますが、ぜひ一読されることをお勧めします。

図解やアニメーションでの説明も豊富で、なによりこのガイドライン自体が、
マテリアルデザインの(かつレスポンシブな)サンプルとなっています。
また、アニメーションを利用する際にも、現実の物理法則を裏切らないようなイージングの方法などが詳しく解説されています。

このような要素、トレンドから、これからのスタンダードを取り入れ続けることが、
顧客を飽きさせない。
さらに「潜在顧客獲得」への要素となります。crema201502-001crema201502-002
Inbox

Gmailの新しいインターフェイス「Inbox」の紹介サイトも、マテリアルデザインの良いお手本です。
上部のナビゲーションと、それ以下のコンテンツの境目には最小限の影がついており、
メニューバーの下にコンテンツが潜り込んでいく奥行き感が表現されています。
ボタンにも影がついていることで、押すべきところが明確に分かります。
加えてこのサイトは、下に向かってスクロールする際に、機能説明のアニメーションも進んでいくという見せ方が上手です。
自動で再生されるアニメーションだと流し見されてしまうところを、
ユーザーの操作に応じて進むアニメーションであれば、機能を「短いストーリーの積み重ね」として伝えられます。
(ただし、複数回訪問しているユーザーにとっては、しつこいかもしれません)

ホームページ診断・提案・お見積りは無料です。お気軽にお問合せ下さい。

お問い合わせ内容

お名前・法人の場合は会社名(必須)

フリガナ (必須)

電話番号 (必須)

メールアドレス (必須)

現在のホームページURL(無ければ入力不要)

ご用件

ご依頼、ご質問等出来るだけ詳しくお書き下さい。

ご希望の連絡方法
 お電話 メール

必要事項をご記入いただき、「送信」ボタンを押してください。

メールの返信については24時間以内に対応しております。
※年末年始・日曜・祝日を除きます。