フラットデザイン
影・グラデーション・テクスチャを使わず、平面的でシンプルなデザイン。Apple iOS 7(2013 年)以降に主流となった現代 Web デザインの基本スタイル。読み込み速度・モバイル対応・スケーラビリティで優れる。
Web 担当者にとっては、サイトデザインの方向性決定で意識する基本概念。フラットデザインを採用する場合、視覚的なヒエラルキー(色・サイズ・余白)で重要度を表現する設計が肝。
本書のスタンスは「フラットデザインは『時代の主流』だが、判別しにくい要素は注意」。装飾を削ぎ落とすと、ボタンが「ボタンに見えない」事態が起きやすい。アクセシビリティ・UX の観点でバランスを取る。
担当者が陥りやすいのは、フラットデザインを極端に追求して、ユーザーがクリックできる要素を判別できなくなること。Lesson 4-5 のアクセシビリティ視点で、最低限の視覚的区別は保つ。
言葉をよく利用する人
- デザイナー
- Web 担当者(発注側)
- プロデューサー
会話上での使用例
デザインリニューアルの方向性
-
プロデューサー
今風のデザインに
-
Web 担当者
フラットデザイン ベースが現代の基本。ただしボタンの認識性は確保しましょう
ボタン認識性の議論
-
アクセス解析担当
ボタンがクリックされていない
-
Web 担当者
フラットデザイン でボタンの視認性が低い可能性。色・影・形で「押せる」と分かるデザインに調整しましょう