フラットデザイン()は、グラフィカルユーザインタフェース(ウェブアプリケーション・モバイルアプリケーション)や出版物などの視覚に訴える分野において、ミニマリズムを取り入れたデザインであり、スキューモーフィズムやリッチデザインの対義語とされている一方で、スキューモーフィズムを取り入れる場合もある。
定義 フラットデザインは、以下のような、立体的に見える要素の使用を最小限に抑え、簡略化したデザインである。
スキューモーフィズム (影付け) 空間認知 グラデーション 多様性 ボーダーライン(例:メニュー等の表示方法、背景から独立したテキストボックス) 見やすいプレースホルダー(例:テキストボックスと背景で異なる色を使う) テクスチャ コントラスト 触覚へのフィードバック(Haptic feedback) 聴覚へのフィードバック(Acoustic feedback)
フラットデザインは見た目も華やかで情報を伝えやすいという利点から、インターフェースのデザインをより合理化・効率化するために使われるときがある。
スキューモーフィズムにおいては、ボタン1つを作るにしても複数の状態にあわせた画像を作るなどといった手間がかかっていたのに対し、フラットデザインは処理が軽く、デバイス間で画面の大きさが違っても対応しやすいという利点がある。
デザイナーの秋葉秀樹は、MdNに寄せた記事の中で、Mac OS 9用のDVDプレイヤーとiOS 7用の動画プレイヤーのUIを比較し、フラットデザインを取り入れたiOS 7用の動画プレイヤーの方がUIとしての主張が控えめであったことから、多くの利用者から斬新かつ高級感があると受け止められたのだろうとみている。
歴史
フラットデザインは国際タイポグラフィー様式(スイス・スタイル)やテキストユーザインタフェース、モダニズムやバウハウスをルーツとしている。
特に国際タイポグラフィー様式からの影響は大きく、1950年代から60年代におけるこの様式の流行がフラットデザインの始まりだと言われているが、後に到来したデジタル時代において、しばらくの間フラットデザインは登場せず、スキューモーフィズムが主流だった。
フラットデザインはマイクロソフトがMetroというデザイン言語において使用し、その後別のフラットデザインを採用した。マイクロソフトが2002年に公開したWindows Media Centerおよび、2006年に発売したMP3プレイヤーのZuneには、いずれもフラットデザインが用いられている。
Zuneのデザインは単純明快であり、メニュー表記は大きく書かれた小文字から構成されており、シルエット調のロゴや単色のフォントカラーが用いられた。
2010年に発売されたWindows Phone 7にもZuneと同様のデザインが使われた。
同OSのデザインには、サンセリフ体を中心とした大きくはっきりとした書体や、平面のイメージ、グリッド調のメニュー画面が用いられた。
このOSの好評を受け、Windows 8や、Xbox 360、Microsoft Office、さらにはマイクロソフトのウェブサイトなど、同社の他のサービスにも同様のデザインが取り入れられた。
2013年、AppleはAquaを初めとして、これまでUIに用いてきたスキューモーフィズムを排し、iOS 7にてフラットデザインを採用して、iOS 18/iPadOS 18まで改良し一部を立体的にしつつも利用し続けた。また、翌2014年にOS X Yosemiteアップデートに合わせOS Xでもフラットデザインが使われ始め、iOS/iPadOS同様に改良し一部を立体的にしつつmacOS Sequoiaまで使い続けた。 フラットデザインに対する批判 フラットデザインはユーザーインターフェースから直感性を奪い、使いにくくなってしまうという批判が起きた。すべてのデザインを簡略化した結果、ボタンとインジケータの区別がつかなくなるといった弊害が指摘された。
ある調査によると、年配の人々よりも若者の方がフラットデザインを受け入れているという結果が示された。同じ研究において、若者はフラットデザインをより素早く見つけられる一方、インターフェースの使い方を誤ることもあったという結果も出ている。
ウェブサイトのユーザビリティ(使いやすさ)の研究で知られるヤコブ・ニールセンは、フラットデザインがタブレット端末のユーザビリティに悪影響を与えていると指摘し、現行のフラットデザインの代わりに、スキューモーフィズムとフラットデザインの中間に当たるデザインを使ってみてはどうかと提言した。
ニールセンのグループが2017年に行ったUIの使い方に関する研究では、フラットデザインの方が平均よりも22%遅かったという結果が出ている。
コンピュータゲーム『Wilmot's Warehouse』のように、フラットデザインのわかりにくさを応用してゲームのデザインに取り入れた例もある。
スキューモーフィズムとの折衷 代替文=|サムネイル|マテリアルデザインのスクリーンショット(Android)。 2014年には、GoogleがAndroidやChrome OSのアプリケーションの開発者向けの設計体系であるマテリアルデザインを提唱した。このデザインはフラットデザインとされているものの、(影付け)などスキューモーフィズムの要素が一部取り入れられている。
このように、フラットデザインにスキューモーフィズムの要素を部分的に取り入れる動きは「セミフラット」(semi flat)や「ほぼフラット」(almost flat)、または「フラットデザイン2.0」(flat 2.0)などと呼ばれており、マテリアルデザインはその良い例だとされている - 日本語訳:。
また、Windows 8でフラットデザインを適用してきたマイクロソフトも、2017年にをWindows 10に取り入れ、2020年にはMicrosoft Officeをはじめとする標準アプリにもこのデザインを適用し、モノクロだったWindows標準アプリを色付きに回帰。マイクロソフトはこのデザインを導入した理由として、Windows 8のフラットデザインは洗練されているものの、他社のアプリの立体的なアイコンが混じると見栄えが悪くなるためだとしている。
Appleは、2025年秋に全てのOSで新しいデザイン言語のLiquid Glassへ刷新することを発表している。
脚注
出典
関連項目 コーポレート・メンフィス - フラットデザインに基づいた幾何学的なイラストレーションスタイル チクレットキーボード
外部リンク Video: Why 3D Logos Fell Out of Favor Overnight by Cheddar.