フラットデザイン

フラットデザインは、以下のような、立体的に見える要素の使用を最小限に抑え、簡略化したデザインである^[3]。

• スキューモーフィズム
• ドロップシャドウ（英語版）（影付け）
• 空間認知
• グラデーション
• 多様性
• ボーダーライン（例：メニュー等の表示方法、背景から独立したテキストボックス）
• 見やすいプレースホルダー（例：テキストボックスと背景で異なる色を使う）
• テクスチャ
• コントラスト
• 触覚へのフィードバック（Haptic feedback）
• 聴覚へのフィードバック（Accoustic feedback）

フラットデザインは見た目も華やかで情報を伝えやすいという利点から、インターフェースのデザインをより合理化・効率化するために使われるときがある^[4][5][6]。

スキューモーフィズムにおいては、ボタン1つを作るにしても複数の状態にあわせた画像を作るなどといった手間がかかっていたのに対し、フラットデザインは処理が軽く、デバイス間で画面の大きさが違っても対応しやすいという利点がある^[6][4]。

デザイナーの秋葉秀樹は、MdNに寄せた記事の中で、Mac OS 9用のDVDプレイヤーとiOS 7用の動画プレイヤーのUIを比較し、フラットデザインを取り入れたiOS 7用の動画プレイヤーの方がUIとしての主張が控えめであったことから、多くの利用者から斬新かつ高級感があると受け止められたのだろうとみている^[7]。

フラットデザインは国際タイポグラフィー様式（スイス・スタイル）やテキストユーザインタフェース、モダニズムやバウハウスをルーツとしている^{[4][8][9][10]}。

特に国際タイポグラフィー様式からの影響は大きく、1950年代から60年代におけるこの様式の流行がフラットデザインの始まりだと言われているが、後に到来したデジタル時代において、しばらくの間フラットデザインは登場せず^[11]、スキューモーフィズムが主流だった^[6]。

フラットデザインはマイクロソフトがMetroというデザイン言語において使用し、その後別のフラットデザインを採用した。マイクロソフトが2002年に公開したWindows Media Centerおよび、2006年に発売したMP3プレイヤーのZuneには、いずれもフラットデザインが用いられている。

Zuneのデザインは単純明快であり、メニュー表記は大きく書かれた小文字から構成されており、シルエット調のロゴや単色のフォントカラーが用いられた^[11]。

2010年に発売されたWindows Phone 7にもZuneと同様のデザインが使われた。

同OSのデザインには、サンセリフ体を中心とした大きくはっきりとした書体や、平面のイメージ、グリッド調のメニュー画面が用いられた。

このOSの好評を受け、Windows 8や、Xbox 360、Microsoft Office、さらにはマイクロソフトのウェブサイトなど、同社の他のサービスにも同様のデザインが取り入れられた^[4][12]。

2013年、AppleはAquaを初めとして、これまでUIに用いてきたスキューモーフィズムを排し^[11]、iOS 7にてフラットデザインを採用して、iOS 18/iPadOS 18まで改良し一部を立体的にしつつも利用し続けた^[13]。また、翌2014年にOS X Yosemiteアップデートに合わせOS Xでもフラットデザインが使われ始め、iOS/iPadOS同様に改良し一部を立体的にしつつmacOS Sequoiaまで使い続けた。Appleは、2025年秋に全てのOSで新しいデザイン言語のLiquid Glassへ刷新することを発表している^[14][15]。

フラットデザインはユーザーインターフェースから直感性を奪い、使いにくくなってしまうという批判が起きている。すべてのデザインを簡略化した結果、ボタンとインジケータの区別がつかなくなるといった弊害が起きることもあった^[6][16]。

ある調査によると、年配の人々よりも若者の方がフラットデザインを受け入れているという結果が示された。同じ研究において、若者はフラットデザインをより素早く見つけられる一方、インターフェースの使い方を誤ることもあったという結果も出ている^[17]。

ウェブサイトのユーザビリティ（使いやすさ）の研究で知られるヤコブ・ニールセンは、フラットデザインがタブレット端末のユーザビリティに悪影響を与えていると指摘し、現行のフラットデザインの代わりに、スキューモーフィズムとフラットデザインの中間に当たるデザインを使ってみてはどうかと提言している^[18]。

ニールセンのグループが2017年に行ったUIの使い方に関する研究では、フラットデザインの方が平均よりも22%遅かったという結果が出ている^[19]。

その一方で、コンピュータゲーム『Wilmot's Warehouse』のように、フラットデザインのわかりにくさを応用してゲームのデザインに取り入れた例もある^[20]。

2014年には、GoogleがAndroidやChrome OSのアプリケーションの開発者向けの設計体系であるマテリアルデザインを提唱した^[6]。このデザインはフラットデザインとされているものの^[21]、ドロップシャドウ（英語版）（影付け）などスキューモーフィズムの要素が一部取り入れられている^[22][23][6]。

このように、フラットデザインにスキューモーフィズムの要素を部分的に取り入れる動きは「セミフラット」（semi flat）や「ほぼフラット」（almost flat）、または「フラットデザイン2.0」(flat 2.0)などと呼ばれており、マテリアルデザインはその良い例だとされている^[24]。

また、Windows 8でフラットデザインを適用してきたマイクロソフトも、2017年にフルーエント・デザイン・システム（英語版）をWindows 10に取り入れ、2020年にはMicrosoft Officeをはじめとする標準アプリにもこのデザインを適用した^[25]。マイクロソフトはこのデザインを導入した理由として、Windows 8のフラットデザインは洗練されているものの、他社のアプリの立体的なアイコンが混じると見栄えが悪くなるためだとしている^[25]。