マテリアルデザインを取り入れて、
ビジュアルアイデンティティの確立と直感的なユーザービリティ―で顧客を定期訪問させる。
オフィシャルサイトは毎日見ていると飽きるものです。視覚効果はどんなに作り込んだサイトで有っても、
バナーや全体の色味、背景等を見直しデザインの鮮度を保つ必要が有ります。
Googleが昨年7月に発表した「マテリアルデザイン」です。
「2015年のWebデザイントレンド」関連記事には必ずと言っていいほど取り上げられるテーマです。
「マテリアルデザイン」は、iOSやWindows 8などで採用されている「フラットデザイン」と、
デザイン要素のシンプルさでは共通する部分があるものの、最大の違いは「光源、影、奥行き」の概念を持つことでしょう。
しばしば「どこを押せば良いか分からない」と言う声も聞かれるフラットデザインとは違い、
マテリアルデザインでは「キーライト」と「アンビエントライト」という2種類の仮想の光源がもたらす影を重視し、
直感的に分かりやすいインタラクションを提供します。
画面の中に奥行き(3D空間のZ軸)の概念を設定し、
影を使ってオブジェクト同士の関係性を表します。
しかしその影は、かつてトレンドだった「スキュアモーフィズム」のリアルな質感よりも控えめです。
基本の状態やフロートした状態など、コンテキストによって、どのくらいの奥行きの影を使うかが、
ビジュアル言語として規定されています。
この辺りの考え方は、本家本元であるGoogleのガイドラインにまとめられていますので、
英語ではありますが、ぜひ一読されることをお勧めします。
図解やアニメーションでの説明も豊富で、なによりこのガイドライン自体が、
マテリアルデザインの(かつレスポンシブな)サンプルとなっています。
また、アニメーションを利用する際にも、現実の物理法則を裏切らないようなイージングの方法などが詳しく解説されています。
このような要素、トレンドから、これからのスタンダードを取り入れ続けることが、
顧客を飽きさせない。
さらに「潜在顧客獲得」への要素となります。
Inbox
Gmailの新しいインターフェイス「Inbox」の紹介サイトも、マテリアルデザインの良いお手本です。
上部のナビゲーションと、それ以下のコンテンツの境目には最小限の影がついており、
メニューバーの下にコンテンツが潜り込んでいく奥行き感が表現されています。
ボタンにも影がついていることで、押すべきところが明確に分かります。
加えてこのサイトは、下に向かってスクロールする際に、機能説明のアニメーションも進んでいくという見せ方が上手です。
自動で再生されるアニメーションだと流し見されてしまうところを、
ユーザーの操作に応じて進むアニメーションであれば、機能を「短いストーリーの積み重ね」として伝えられます。
(ただし、複数回訪問しているユーザーにとっては、しつこいかもしれません)