コンテンツにスキップ

フラットデザイン

出典: フリー百科事典『ウィキペディア（Wikipedia）』

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

定義

[編集]

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

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

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

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

歴史

[編集]
Zune80とZune4の画面

フラットデザインは国際タイポグラフィー様式（スイス・スタイル）やテキストユーザインタフェース、モダニズムやバウハウスをルーツとしている[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まで使い続けた。

フラットデザインに対する批判

[編集]

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

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

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

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

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

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

[編集]
マテリアルデザインのスクリーンショット（Android）。

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

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

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

Appleは、2025年秋に全てのOSで新しいデザイン言語のLiquid Glassへ刷新することを発表している[25][26]。

脚注

[編集]

出典

[編集]
  1. ↑ “フラットデザインとは？効果的に活用するための基礎知識”. MY FUTURE CAMPUS (2018年9月6日). 2020年5月3日閲覧。
  2. ↑ Yair Grinberg (2013年9月11日). “iOS 7, Windows 8, and flat design: In defense of skeuomorphism”. VentureBeat. 2014年4月13日閲覧。
  3. ↑ Carrie Cousins (2013年5月28日). “Flat design principles”. designmodo.com. 2019年11月10日閲覧。
  4. 1 2 3 4 Turner, Amber Leigh (2014年3月19日). “The history of flat design: How efficiency and minimalism turned the digital world flat”. The Next Web. 2014年4月11日閲覧。
  5. ↑ Clum, Luke (2013年5月13日). “A Look at Flat Design and Why It's Significant”. UX Magazine. 2014年4月11日閲覧。
  6. 1 2 3 4 5 6 上田恵 (2019年9月25日). “GUIの歴史とこれから”. MdN Design Interactive. エムディエヌコーポレーション. 2019年11月10日閲覧。
  7. ↑ 秋葉秀樹 (2013年10月9日). “第2回 フラットデザインの主役は誰だ？ - 秋葉秀樹の人に伝えるデザイン”. MdN Design Interactive. エムディエヌコーポレーション. 2019年11月10日閲覧。
  8. ↑ Diogo Terror (2009年7月17日). “Lessons From Swiss Style Graphic Design”. Smashing magazine. 2014年3月28日閲覧。
  9. ↑ “A brief history of flat design”. Tech Samurais (2013年7月31日). 2014年10月2日時点のオリジナルよりアーカイブ。2019年11月10日閲覧。
  10. ↑ Xavier Bertels (2014年3月5日). “The History of Flat Design”. Xavier Bertels. 2019年4月16日時点のオリジナルよりアーカイブ。2014年12月23日閲覧。
  11. 1 2 3 Taimur Asghar (2014年7月9日). “The True History of Flat Design”. Web Design Ai. 2014年9月13日時点のオリジナルよりアーカイブ。2020年5月3日閲覧。
  12. ↑ “米Microsoft、検索エンジン「Bing」のロゴと検索ページデザインを刷新”. www.mdn.co.jp. エムディエヌコーポレーション (2013年9月19日). 2019年11月10日閲覧。
  13. ↑ Verve (2015年8月17日). “The History of Flat Design”. Infographics. 2019年11月10日時点のオリジナルよりアーカイブ。2019年11月10日閲覧。
  14. ↑ “Why the Flat Design Trend is Hurting Usability”. Vandelay Design (アメリカ英語). 2015年4月7日. 2017年7月6日閲覧.
  15. ↑ “The Problem With Flat Design, According To A UX Expert”. Co.Design (アメリカ英語). 2016年3月23日. 2017年7月6日閲覧.
  16. ↑ “Tablet Usability: Findings from User Research”. www.nngroup.com. 2017年7月6日閲覧。
  17. ↑ “Flat UI Elements Attract Less Attention and Cause Uncertainty”. www.nngroup.com. 2018年5月8日閲覧。
  18. ↑ 洋ナシ (2019年9月8日). “【PCゲーム極☆道】第五十回『Wilmot's Warehouse』 バナナの色違いを見分けるだけでも大変な、かわいい倉庫整理ゲーム”. IGN. 2019年11月9日閲覧。
  19. ↑ Summers, Nick (2014年6月26日). “9 Principles Google Created for its ‘Material Design’ UI Refresh” (英語). 2016年7月4日閲覧。
  20. ↑ “Flat Design vs. Material Design: How Are They Different? – Designmodo” (英語) (2015年4月10日). 2016年7月4日閲覧。
  21. ↑ “Flat Design vs. Material Design: What Makes Them Different? | Creative blog by Adobe”. Adobe Dreamweaver Team Blog. 2016年7月4日閲覧。
  22. ↑ Kate Moran. “Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users” (英語). Nielsen Norman Group. 2019年11月10日閲覧。 - 日本語訳：フラットデザイン：起源、問題、フラット2.0のほうが望ましい理由 - ウェイバックマシン（2019年5月12日アーカイブ分）
  23. 1 2 石井徹 (2020年2月21日). “Windows 10のアイコンが『脱フラットデザイン』。カラフルな新アイコンに”. Engadget. 2022年2月20日時点のオリジナルよりアーカイブ。2020年5月9日閲覧。
  24. ↑ 株式会社インプレス (2020年2月21日). “OS標準アプリがカラフルアイコンへ回帰 ～「Windows 10」Build 19569が“Fast”リングに（2月28日追記）／正式版のWindows 10でも「メール」と「カレンダー」の新アイコンがロールアウト”. 窓の杜. 2026年5月19日閲覧。
  25. ↑ “Apple、楽しくて優雅な新しいソフトウェアデザインを発表”. Apple Newsroom (日本). 2025年6月13日閲覧。
  26. ↑ “OS - Top OS Features” (英語). Apple. 2025年6月13日閲覧。

関連項目

[編集]

外部リンク

[編集]
「https://ja.wikipedia.org/w/index.php?title=フラットデザイン&oldid=109600042」から取得