フラットデザインで気を付けたいこと

フラットデザインが大流行中

フラットデザイン流行ってますね。2013年のWEBデザインの主流と言えば誰もが間違いなく「フラットデザイン」と言うでしょう。

しかし、ECサイト制作の現場はというと、ここはまだまだフラットデザインが主流というほど広がってはいない印象です。私の手掛ける案件でも、ぼちぼちフラットデザインを採用するサイトが出て来たかな？という程度です。

恐らくですが、ECサイトという売り上げへ直結感が一般的なホームページのそれよりも強いので、サイトデザインが古くなって来たのでリニューアルをしたいと思っても、検索順位が変わることの恐れ、UIの大幅な変更による売り上げの低下への懸念もより強いのでしょう。

デザインの大幅な変更という冒険的な試みには二の足を踏んでしまう印象です。新規構築はどうかというと、やはり既存の売れている（想像も含む）サイトの多くが旧式スタイル（フラットデザインではない）を採用しているので、それに倣うような形で似たようなサイトデザインを好む傾向があるようです。

以前紹介した「Origami」のように今風デザイン、フラットデザインを採用しているようなECサービスもあるのですが、今のところは少数派といった印象です。

参考：Origamiの使い方？ソーシャルECサービス「Origami」を使ってみた

ECサイトでフラットデザインを採用する際に気を付けたいこと

上述したように、私の手掛ける案件でもぼちぼち登場しているフラットデザインですが、最低限気を付けていることがあります。

まずですが、フラットデザインの定義的なものを一部再確認します。

立体的な処理は極力避ける（フラット＝平面的の名前の由来）
鮮やかな色彩を用いる（あくまでも傾向としてです）

他にもフラットデザインの定義的なものは存在しますが、ここではこの2つに注目します。

1点目の「立体処理は極力避ける」ですが、これはこれまでのWEBサイトに置いては様々な箇所にて重宝されてきたイフェクトの1つです。例えばボタン類、相対的に他の要素が平面的で、ボタンが立体処理をされているからこそ「押せる（クリックできる）」と捉えていた人も多いでしょう。

これがいきなりフラットになると、場合によってはどこを押せば良いのか気が付かないってことも懸念されます。

もちろん「カートに入れる」「買い物かごに入れる」「Add to cart」と書いているから気が付くことの方が多いと思いますが、あまりにも極端にフラットにこだわりすぎるとクリック出来るところと出来ないところの区別が曖昧になるのも事実ですね。

それと同様に入力フォームもそうです。立体処理（この場合は内側にシャドー処理されることが多いはず）により、凹んでいるように見えます。そのためここに入力すれば良いのだということが伝わります。これを無くしてしまうと外側の枠線のみで、入力フォームなのかどうかの判別が困難になる可能性があります。

▼最近気になった例が「Skype」の入力フォームです。

Skype

ご覧の通り、ただの枠線を引いているだけ。もちろん経験則的に入力フォームなんだろうなとは分かりますし、カーソルを合わせてクリックすればカーソルが点滅するので「入力出来る」と分かるのですが、ちょっと戸惑いを感じました。

インターネットエキスパートだと自負するつもりはないですが、自分としては平均的以上であるとは思っております。そんな人間が多少なりとも違和感を感じるのですから、ひょっとするとこれを見ても入力方法がさっぱり分からないなんて方がいてもおかしくないと思います。

フラットデザインの懸念点

正に今回のテーマ、フラットデザインの懸念点とは上述した「分かりにくい表現」になってしまうこともあるということです。

フラットデザインは「今風のデザイン」と見てもらえるだけでなく、表示速度が軽くなったり（Googleでも表示速度が速いサイトは検索上位表示の条件の1つ）、シンプルな構成でユーザーが使いやすくなったりと、実質的なメリットもあります。

しかし一方では表面的なフラットデザインのみを取り入れて、実際の使い勝手を低下させてしまうこともあり得ます。これはフラットデザインに限らず様々なデザイン手法でも考えが足りないと起こりえる問題ですが、フラットデザイン＝平面的ですから、とにかくすべて平面的にしてしまうと、視覚的な区分が曖昧になり、使い勝手の低下を招く事になり得ます。

デザインの流行に敏感なのは大切ですが、特にECサイトにおいては機能性の追求を第一に考えたデザインを模索する必要があると考えます。

▼近頃Yahoo!もフラットデザイン化している様子です。分かるのはアイコン類の刷新と、検索ボタンのフラット化くらいかな？

Yahoo JAPAN