読む 編集 履歴表示

フラットデザイン

ウィキペディアから、無料の百科事典
Material Designのスクリーンショット（Android）。フラットデザインの適用例。

フラットデザイン（英: 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はこれまでUIに用いてきたスキューモーフィズムを排し[11]、iOS 7 のUIにてフラットデザインを採用した[13]。

また、翌年の2014年にアップルがmacOSをアップデートした際、UIにiOSのOS X Yosemiteに合わせたフラットデザインが使われた。

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

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

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

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

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

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

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

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をはじめとする標準アプリにもこのデザインを適用した[23]。マイクロソフトはこのデザインを導入した理由として、Windows 8のフラットデザインは洗練されているものの、他社のアプリの立体的なアイコンが混じると見栄えが悪くなるためだとしている[23]。

脚注

出典

  1. ↑ “フラットデザインとは？効果的に活用するための基礎知識”. MY FUTURE CAMPUS (2018年9月6日). 2020年5月3日閲覧。
  2. ↑ Yair Grinberg (September 11, 2013). “iOS 7, Windows 8, and flat design: In defense of skeuomorphism”. VentureBeat. April 13, 2014閲覧。
  3. ↑ Carrie Cousins (May 28, 2013). “Flat design principles”. designmodo.com. 2019年11月10日閲覧。
  4. 1 2 3 4 Turner, Amber Leigh (March 19, 2014). “The history of flat design: How efficiency and minimalism turned the digital world flat”. The Next Web. April 11, 2014閲覧。
  5. ↑ Clum, Luke (May 13, 2013). “A Look at Flat Design and Why It's Significant”. UX Magazine. April 11, 2014閲覧。
  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 (July 17, 2009). “Lessons From Swiss Style Graphic Design”. Smashing magazine. March 28, 2014閲覧。
  9. ↑ “A brief history of flat design”. Tech Samurais (July 31, 2013). 2014年10月2日時点のオリジナルよりアーカイブ。2019年11月10日閲覧。
  10. ↑ Xavier Bertels (March 5, 2014). “The History of Flat Design”. Xavier Bertels. 2019年4月16日時点のオリジナルよりアーカイブ。2014年12月23日閲覧。
  11. 1 2 3 Taimur Asghar (July 9, 2014). “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 (August 17, 2015). “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日閲覧。

関連項目

外部リンク

関連記事

コーポレート・メンフィス幾何学イラストレーションチクレットキーボード