フラットデザインのメリットとデメリットについて（制作会社/運営者向け）

昨年からWeb業界で一気に流行したフラットデザイン。
特にWindows8が発売されてからは、あの独特のUIに影響されたサイトがたくさん出てきましたよね。
今後もその風潮は続いて行くと見られている方が多いと思いますが、フラットデザインを単に流行りだからという理由で取り入れるのは危険です。
ユーザーの見ている環境、シチュエーションを考慮して考えなければ例え流行りのデザインで見た目に楽しいサイトだったとしても、ユーザーライクとは言い難いです。

では、流行のデザインをどのように取り入れれば、先進的かつユーザビリティーの高いサイトを実現することができるのでしょうか？

今回では、今流行しているフラットデザインを例に挙げて、流行の正しい取り入れ方を考えてみたいと思います。

フラットデザインの特徴

フラットデザインは大まかに分けて下記のような特徴が上げられます。

立体感を廃したリンク

所謂「押せる感」を取り払って、色、線、文字のみで平面構成を行っています。

タイポグラフィーによる表現

上記の立体感がなくなったことにより、デザインを構成する上でフォントの表現が強調されるようになりました。

テーマカラー以外にも様々な色を使用

ロゴやリンクカラー、見出しの差し色をテーマカラーとして使用する以外にも、同じ彩度で様々なカラーパターンをボタンや背景として使用するようになりました。

以上が私の目から見たフラットデザインの大まかな特徴です。

こういったデザインが流行した背景には、サイトを訪れるユーザーが今まで見ていたテクスチャーやグラデーションをふんだんに使った所謂「リッチデザイン」に飽きてしまったこと。

また、文字を小さくし空間を狭めてシャープな印象を持たせるサイトに見づらさと使いづらさを感じてしまったことにあると思います。

その観点から言えば、目新しさと空間を広く取ったことによる見やすさ、ボタンやリンクを大きく配置することによる使いやすさが受け入れられるのは自然のように思われます。

しかし、今までのリッチデザインを見てきたユーザーが、はたしてすんなりとフラットデザインを使いこなしてくれるでしょうか？
ここで、フラットデザインにおけるメリットとデメリットを簡単にまとめてみます。

EC-CUBE公式アドバイザーが、ツール選びからサイト制作、マーケティング・セキュリティの領域までアドバイスいたします。ご相談窓口はこちら

フラットデザインのメリット

• 目新しく、見た目が華やか
• コントラストがはっきりしているため、文字が見やすい
• ボタンの領域がひろく、押しやすい
• シンプルな構成のため、制作者もレイアウトがしやすい

フラットデザインのデメリット

• 平面的過ぎるため、ボタンやリンクが認識しずらい
• 多くの色を使用している場合、重要なコンテンツが伝わりづらい
• 日本語サイトの場合、フォントのシルエットが不揃いなため、あまりマッチしない

上記で挙げた項目を見た時に感じるのは、特徴がそのまま裏目に出てしまう可能性があるということです。

むやみに「フラットデザイン」の印象だけに囚われて構成を行えば、いい結果はでないと思います。

重要なのは、あくまで使うユーザーのシチュエーションや使い勝手を理解した上で構成すること。

その上で、使う素材や表現方法を決めていくこと。これはフラットデザインであれリッチデザインであれ違いはありません。

例えば、英語ではそのまま文章を流し込めばまとまるレイアウトも、日本語では見た目が大きく異なりますよね。

その場合、空白を均一に見せるために文字同士の字間を調整すれば、フラットデザインにマッチした構成ができます。

また、ボタン等のクリッカブルな領域がわかりづらくなってしまった時は、全体の印象を崩さない程度の淡いグラデーションをかけたり、
ボタンの上下に微量のハイライトとシャドウを入れて微かな立体感を出したり。

文字のみの構成でコンテンツが把握しづらくなったときは、アイコンを使用したり。

工夫次第ではデメリットを克服し、ユーザビリティーを高くすることは可能です。

これからも様々な表現手法や流行が現れると思いますが、

その一つ一つはあくまで「手法」であって、それに適した「シーン」や「文脈」があって初めて有効になるということを忘れずに、より使いやすいデザインを考えていきましょう。