STYLE PROFILE
フラットデザイン
Flat Design
光沢や写実的な立体感を抑え、平らな色面と簡潔な要素で組むデザイン表現。
フラットデザインの代表配色例
| 色 | 役割 | 比 | 文字に使う目安 |
|---|---|---|---|
#202F44 | 文字と構造 | 12.50:1 | 本文の文字にも使える |
#3E71C6 | 主色 | 4.42:1 | 大きな文字や図形なら使える |
#51A498 | 強調色 | 2.72:1 | 文字には向かない |
比はWCAG 2.2の計算式で求めた値です。4.5:1以上は本文の文字、3:1以上は大きな文字や図形に使える目安です（達成基準1.4.3・1.4.11）。
フラットデザインのプロンプト例
フラットデザインでデザインしてください。光沢や写実的な質感を抑えた面、強い立体効果に頼らない構成、色と輪郭で区別する要素を取り入れてください。
フラットデザインの主な視覚的特徴
- 光沢や写実的な質感を抑えた面
面を均一な色で塗り、光沢や、現実の物の素材をまねた質感を加えません。物理的な世界を再現せず、デジタルの画面らしさを生かす考え方の表れと受け止められました。
- 強い立体効果に頼らない構成
影やグラデーション、ハイライトで浮き上がったり沈んだりして見せる効果を使わず、画面を平面として組み立てます。そのぶん、押せる部品を示す手がかりが弱くなりやすくなります。
- 色と輪郭で区別する要素
立体感の代わりに、色の違いや輪郭線、囲み、文字の大きさで要素の役割を区別します。囲みや下線は、押せる部品であることを伝える手がかりにもなります。
フラットデザインが向いている成果物
平らな色面と簡潔な輪郭で情報や操作を区切り、光沢に頼らず内容の違いを見せられる。
図、見出し、区切りを平面的な要素に統一し、多数の説明や数値を整理して伝えられる。
限られた色と単純な形で、短い告知の要点を明快に示せる。
フラットデザインとは
フラットデザインは、光沢や立体的な視覚効果を使わないことを特徴とするウェブデザインの様式です。2011年に現れ、2012年ごろに人気を得ました。立体的な効果や現実の物をまねる表現への反動と受け止められ、ミニマリズムの派生とみるデザイナーも多くいます。
完全にフラットな画面では、影やハイライトによる疑似的な立体感も、現実の物をまねた装飾（スキューモーフィズム）や質感の再現（リアリズム）も使いません。フラットデザインは、物理的な世界の見た目を再現せず、デジタルという媒体そのものを探る方法とみなされました。
広まるうえで大きかったのが、マイクロソフトのデザイン言語「Metro」とWindows 8です。同社の資料は、この作風を「本物のデジタル（authentically digital）」と表しました。写実的な表現を特徴としてきたアップルのトップページは、2013年ごろまでこの流れに加わりませんでした。
一方でNielsen Norman Groupは、登場当初から使いやすさの問題を指摘してきました。押せる場所を示す手がかりが弱くなりやすいためです。同社の視線計測の実験では、手がかりの弱い画面で押す場所を探す時間が平均22%長くなりました。その後、影やハイライト、重なりをわずかに使う「フラット2.0」が現れ、グーグルのマテリアルデザインがその例とされます。
見分けるときは、次の点を確かめてみてください。
- ボタンや面に、光沢・陰影・素材の質感がない
- 要素の違いが、色や輪郭、文字の大きさで示されている
これらが揃っていると、フラットデザインの特徴を持っていると言えるでしょう。
わずかな影だけを加えたものは、フラット2.0に近い表現です。
実例を見る
Google画像検索で「フラットデザイン」を見る（新しいタブで開きます）検索結果の画像はこの図鑑には保存しません。出典
- Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users（新しいタブで開きます）Nielsen Norman Group
- Flat UI Elements Attract Less Attention and Cause Uncertainty（新しいタブで開きます）Nielsen Norman Group
名称・説明・主な視覚的特徴と「フラットデザインとは」の事実は、上の出典に基づきます。特徴の説明と見分け方は、出典の内容をこの図鑑がまとめたものです。代表配色例・向いている成果物・プロンプト例は、この図鑑の編集上の提案です。制作・編集：小林 秀樹（セカヤサAIブログ）
