行き過ぎたフラットデザイン
フラットデザインの普及
Windows8がMetroデザインになり、AppleのiOSが、これまでのスキューモーフィズムデザインから、フラットデザインに方向転換すると、その波はWebのデザインにおいても、爆発的な影響を与えました。
モバイルファーストの考え方が一般化し、それに合わせて、Webのデザインまでもフラットデザイン化が一気に進みました。
レスポンシブにとって、フラットデザインは、CSSだけで定義出来る為、都合が良いのも、要因の一つかもしれません。
フラットデザインの失敗例
しかし、行き過ぎたフラットデザインも増え、見難く使いにくいWebサイトが増えました。
例として、日清グループのサイトを見てみてください。
日清食品グループ
何でもかんでも赤いレクタングルの上に白い文字が乗り、ボタンなのか、ただのアイコンなのか区別が付きません。
ナビゲーションは、赤いレクタングルに白い文字が重なっているだけの、ただの帯に見えます。
これはもはや、デザインではありません。
また、情報量が多いのにもかかわらず、無理に1カラムレイアウトにした為、動線が悪化。
どこになんの情報があるのか？わかりにくくなりました。
試しに、日清グループのサイトから、「明星食品」のオフィシャルサイトへ、リンクを辿って、アクセスしてみてください。なかなか辿りつけず、イライラするはずです。
これは、ナビゲーションなのか？ボタンなのか？リンクなのか？それらは、大きさ、色、目印等によってコントラストの強弱を明確にする必要があるにもかかわらず、全てが同じ色と大きさで強調されてしまい、違いがなくなってしまっている事が大きな要因です。
これは、フラットデザインのやり過ぎの良い例です。時代の流れに合わせて使いやすくUIを改良する事や、意欲的な事はとても良い事です。
しかし、トレンドと捉えているのであれば、それは大きな間違いです。
一方で、非常に上手くフラットデザインを取り入れているサイトもあります。
インテルのサイトでは、全体的にはフラットデザインになっていますが、押せるもの、押せないものの区別を明確にし、また、動きも取り入れており、マテリアルデザインの良い見本になっています。テキストや写真も見やすく調整されているのもわかります。
Webデザインとは何か？
そもそも、Webにおいてデザインとは何か？原点に帰ってみる必要があるようです。
その、シンプルな答えは「情報伝達」のはずです。
閲覧者に情報が正しく伝わるか？一つ一つの要素にそれが求められるはずです。
ではWebの要素とは何か？htmlの構造上、テキスト、画像（メディア）、リンクの3つになるはずです。
ですから、これはテキスト、これは動画が再生される、これはリンク、それらが正しく伝わらないと、Webの定義が崩壊してしまう訳です。
逆を言えば、たった3つの要素しかない訳ですから、この3つが明確になってさえいれば、Webの定義が守られ、閲覧者にとって自然と使いやすいサイトになるはずです。フラットデザインを取り入れた場合でも、同じです。
デザインにエフェクトは必要か？
基本的には、必要だと考えます。それは、人間の目から伝達された情報を脳で理解する限り、その認識とマッチする様に、合わせる必要があるからです。影が付いていれば、立体的に見え、他の平面上の物とは違った物体であると、認識する訳です。この脳の仕組みを使わないほうが不自然で手間なのです。
この事は、スキューモーフィズムデザインにも言える事です。現実世界に存在する物体の形状を再現する事で、それがそのように動作する、具体的には、影の付いた四角い描写が、押す事が出来そうな「ボタン」に見える訳です。これはアフォーダンスとも言えます。下の図を見て、押せそうなもの、そうではないものはどれか？ひと目で明白だと思います。
この事はGoogleがフラットデザインを取り入れつつも、WebやアプリのUIをマテリアルデザインに移行している事実を見れば、明らかです。
また、クライアントの要望や、事業、コンセプト等にデザインのテイストに合わせた時に、フラットデザインだけで合わせる事は難しいと言えます。かっこ良くとか、可愛くとか、技術思考的なデザインとは全く異なる、クライアントがWebで表現したい要望というものが出てくるものです。その場合には、表現力の低いフラットデザインが必ずしも正解とはならないはずです。閲覧者だけでなく、クライアントのニーズも満たす必要があるわけです。
いつの時代も、トレンドに左右されず、全ての人にとって、使いやすい恒久的なサイトにする。それが我々の使命なのです。
