フラットデザイン

フラットデザイン（）は、グラフィカルユーザインタフェース（ウェブアプリケーション・モバイルアプリケーション）や出版物などの視覚に訴える分野において、ミニマリズムを取り入れたデザインであり、スキューモーフィズムやリッチデザインの対義語とされている一方で、スキューモーフィズムを取り入れる場合もある。

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

 スキューモーフィズム
 （影付け）
 空間認知
 グラデーション
 多様性
 ボーダーライン（例：メニュー等の表示方法、背景から独立したテキストボックス）
 見やすいプレースホルダー（例：テキストボックスと背景で異なる色を使う）
 テクスチャ
 コントラスト
 触覚へのフィードバック（Haptic feedback）
 聴覚へのフィードバック（Accoustic 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はこれまでUIに用いてきたスキューモーフィズムを排し、iOS 7 のUIにてフラットデザインを採用した。
また、翌年の2014年にアップルが macOSをアップデートした際、UIにiOSのOS X Yosemiteに合わせたフラットデザインが使われた。

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

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

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

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

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

スキューモーフィズムとの折衷 

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

このように、フラットデザインにスキューモーフィズムの要素を部分的に取り入れる動きは「セミフラット」（semi flat）や「ほぼフラット」（almost flat）、または「フラットデザイン2.0」(flat 2.0)などと呼ばれており、マテリアルデザインはその良い例だとされている。
また、Windows 8でフラットデザインを適用してきたマイクロソフトも、2017年にをWindows 10に取り入れ、2020年にはMicrosoft Officeをはじめとする標準アプリにもこのデザインを適用した。マイクロソフトはこのデザインを導入した理由として、Windows 8のフラットデザインは洗練されているものの、他社のアプリの立体的なアイコンが混じると見栄えが悪くなるためだとしている。

脚注

出典

関連項目 
 チクレットキーボード

外部リンク 
 Video: Why 3D Logos Fell Out of Favor Overnight by Cheddar.

デザインの概念
グラフィカルユーザインタフェース