フラットデザイン
フラット‐デザイン【flat design】
読み方：ふらっとでざいん
陰影による立体感などの装飾を排し、直線や単一の色面を使った単純明快なデザイン。特に、ウェブページやアプリケーションソフト、オペレーティングシステムなど、コンピューターのユーザーインターフェースにおける平面的なデザインを志向したものを指す。→スキュアモーフィックデザイン
フラットデザイン
【英】flat design, flat UI design
フラットデザインとは、主にコンピュータシステムのユーザーインターフェース（UI）において、装飾性をできるだけ抑えたシンプルで平面的なデザインの総称である。
フラットデザインにおおむね共通する特徴として、単色・ベタ塗りでメリハリのある色使い、単純で直線的・幾何学的な図形と配置、個々のパーツにではなくUI全体に着眼したデザイン設計、といった要素を挙げることができる。よりモダンで洗練された印象を与えやすく、テキパキとした操作に適したルック&フィールであるといえる。
フラットデザインに対する概念は「リッチデザイン」あるいは「スキュアモーフィックデザイン」とされる。リッチデザインは装飾性をふんだんに取り入れた華美なデザイン、スキュアモーフィックデザインは現実世界における質感・立体感の再現を志向した写実的でリアルなデザインを指すと言うことができる。
2000年代半ば以降しばらくの間、Webデザインの分野を中心として、リッチデザイン（リッチインターフェース）をUIに取り入れる流行があった。2010年代に入ると、大手サービス・人気サービスの中にフラットデザインを取り入れたものが目立ちはじめた。2011年半ばにMicrosoftがフラットデザインを取り入れたWindows 8およびWindows Phoneを発表し、Googleも2013年春までにYouTube、Google Play、Gmailなどのサービスをフラットデザイン化した。2013年6月にAppleが発表したiOS 7も、従来のスキュアモーフィックデザインから新たにフラットデザインが採用され、あらためて注目を集めている。
フラットデザイン
(flat design から転送)
出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2023/11/24 07:13 UTC 版)
フラットデザイン（英: Flat design）は、グラフィカルユーザインタフェース（ウェブアプリケーション・モバイルアプリケーション）や出版物などの視覚に訴える分野において、ミニマリズムを取り入れたデザインであり、スキューモーフィズムやリッチデザインの対義語とされている[1]一方で、スキューモーフィズムを取り入れる場合もある[2]。
- ^ “フラットデザインとは？効果的に活用するための基礎知識”. MY FUTURE CAMPUS (2018年9月6日). 2020年5月3日閲覧。
- ^ Yair Grinberg (2013年9月11日). “iOS 7, Windows 8, and flat design: In defense of skeuomorphism”. VentureBeat. 2014年4月13日閲覧。
- ^ Carrie Cousins (2013年5月28日). “Flat design principles”. designmodo.com. 2019年11月10日閲覧。
- ^ a b c d 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日閲覧。
- ^ Clum, Luke (2013年5月13日). “A Look at Flat Design and Why It's Significant”. UX Magazine. 2014年4月11日閲覧。
- ^ a b c d e f 上田恵 (2019年9月25日). “GUIの歴史とこれから”. MdN Design Interactive. エムディエヌコーポレーション. 2019年11月10日閲覧。
- ^ 秋葉秀樹 (2013年10月9日). “第2回 フラットデザインの主役は誰だ？ - 秋葉秀樹の人に伝えるデザイン”. MdN Design Interactive. エムディエヌコーポレーション. 2019年11月10日閲覧。
- ^ Diogo Terror (2009年7月17日). “Lessons From Swiss Style Graphic Design”. Smashing magazine. 2014年3月28日閲覧。
- ^ “A brief history of flat design”. Tech Samurais (2013年7月31日). 2014年10月2日時点のオリジナルよりアーカイブ。2019年11月10日閲覧。
- ^ Xavier Bertels (2014年3月5日). “The History of Flat Design”. Xavier Bertels. 2019年4月16日時点のオリジナルよりアーカイブ。2014年12月23日閲覧。
- ^ a b c Taimur Asghar (2014年7月9日). “The True History of Flat Design”. Web Design Ai. 2014年9月13日時点のオリジナルよりアーカイブ。2020年5月3日閲覧。
- ^ “米Microsoft、検索エンジン「Bing」のロゴと検索ページデザインを刷新”. www.mdn.co.jp. エムディエヌコーポレーション (2013年9月19日). 2019年11月10日閲覧。
- ^ Verve (2015年8月17日). “The History of Flat Design”. Infographics. 2019年11月10日時点のオリジナルよりアーカイブ。2019年11月10日閲覧。
- ^ “Why the Flat Design Trend is Hurting Usability” (英語). Vandelay Design. (2015年4月7日) 2017年7月6日閲覧。
- ^ “The Problem With Flat Design, According To A UX Expert” (英語). Co.Design. (2016年3月23日) 2017年7月6日閲覧。
- ^ “Tablet Usability: Findings from User Research”. www.nngroup.com. 2017年7月6日閲覧。
- ^ “Flat UI Elements Attract Less Attention and Cause Uncertainty”. www.nngroup.com. 2018年5月8日閲覧。
- ^ 洋ナシ (2019年9月8日). “【PCゲーム極☆道】第五十回『Wilmot's Warehouse』 バナナの色違いを見分けるだけでも大変な、かわいい倉庫整理ゲーム”. IGN. 2019年11月9日閲覧。
- ^ Summers, Nick (2014年6月26日). “9 Principles Google Created for its ‘Material Design’ UI Refresh” (英語). 2016年7月4日閲覧。
- ^ “Flat Design vs. Material Design: How Are They Different? – Designmodo” (英語) (2015年4月10日). 2016年7月4日閲覧。
- ^ “Flat Design vs. Material Design: What Makes Them Different? | Creative blog by Adobe”. Adobe Dreamweaver Team Blog. 2016年7月4日閲覧。
- ^ 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日アーカイブ分）
- ^ a b 石井徹 (2020年2月21日). “Windows 10のアイコンが『脱フラットデザイン』。カラフルな新アイコンに”. Engadget. 2022年2月20日時点のオリジナルよりアーカイブ。2020年5月9日閲覧。
- 1 フラットデザインとは
- 2 フラットデザインの概要
- 3 関連項目
- flat designのページへのリンク
