iOS 7 にフラットデザインが採用されるというウワサがたち、WWDCのアプリがフラットデザインだったことで更に話題が沸騰した今日この頃。採用しているウェブサイトも多くみられるようになりましたが、ほとんどがポートフォリオかアプリ、制作会社のコーポレートサイトなんですよね。今ではまだ「流行ってる」とは言えない状況ではと。
でもウワサ通りにフラットデザインのiPhoneが発売されれば一気に加速するかもしれません。

そこで、海外のサイトなどで話題になったものからECサイトだけをいくつか見てみました。

機能をシンプルに伝える

表現をミニマルなものにしたからといって機能がミニマルになるわけではありません。説明を省いたことでソレがどう機能するか伝わらなければデザインではありません。ユーザーが迷わずに利用できなければ自己満足で終わってしまいます。

「クリックできる」ことの伝え方

ウェブサイトでは基本的にクリックで操作します。クリックできる場所は「クリックできる」と伝えないといけません。これを伝えるには立体的なボタンやテキストを用いることでできますが、立体感を抑えたフラットデザインではこの手法は使えません。

そこで色をどう使うかがポイントになります。多くのサイトではクリック出来る場所で背景色として使い、テキストはほぼ一色にすることで「色が違う=クリックできる」と認識させていました。

ボタン

押したくなる部分といえばボタンですね。「背景色をもつ四角形=クリックできる」と伝えています。

ボタンへのこだわり
http://sevenly.org http://concrete-matter.com http://freshproduct.at

タイプの選択

ボタンだけではありません。色やサイズの選択のセレクトボックスも気を配っています。デフォルトのものだと立体的なボタンになってしまうため統一感がなくなってしまいます。

選択できる項目にもわかりやすく色付け。
http://thewclub.com http://ariashop.co.uk

どこまでミニマルにするか?

ミニマルにこだわり情報を省くと機能がつたわらない時もあります。カートや虫眼鏡、SNSのアイコンなど見慣れたものであれば大体の予想がつきますが、感覚的なものなので難しいところ。

http://hardgraft.com http://lacarotte.be http://lazymade.com
アイコンだけで伝わらない?

ミニマルでフラットなデザインはいくつかの犠牲はあるものの、大きなメリットがあります。それは余計な要素がなくなることでブランドのイメージがダイレクトに伝わります。
今回参考にしたサイトも、大きな写真を使ってテキストは最低限にした商品を押し出すような形。ボタンやリンクがシンプルな分、商品の写真に集中できます。

ECサイトへ採用することは賛否両論わかれるところ。でも商品の特徴を押し出すことでブランドの色を出すにはかなり効果を発揮します。

ミニマルだフラットだと流行りを優先しないで、そのブランドでどこまでミニマルにするか、フラットデザインは当てはまるのか、ブランドの軸をブレることのないようブランドを理解しないといけませんね。

参考にしたサイト