コンテンツにスキップ

英文维基 | 中文维基 | 日文维基 | 草榴社区

「フラットデザイン」の版間の差分

出典: フリー百科事典『ウィキペディア（Wikipedia）』
履歴の双方向閲覧
← 古い編集新しい編集 →
削除された内容 追加された内容
ビジュアルウィキテキスト
m publisher
Cewbot (会話 | 投稿記録)
ボット
782,029 回編集
67行目: 67行目:
=== スキューモーフィズムとの折衷 ===
=== スキューモーフィズムとの折衷 ===
[[File:Android L Develpment Preview.png|thumb|Android 5.0のスクリーンショット。フラットデザインにスキューモーフィズムを取り入れたマテリアルデザインが適用されている。]]
[[File:Android L Develpment Preview.png|thumb|Android 5.0のスクリーンショット。フラットデザインにスキューモーフィズムを取り入れたマテリアルデザインが適用されている。]]
2014年には、[[Google]]が[[Android]]や[[Chrome OS]]のアプリケーションの開発者向けの設計体系である[[マテリアルデザイン]]を提唱した<ref name="MdN20190925"/>。このデザインはフラットデザインとされているものの<ref>{{Cite web|url=https://thenextweb.com/google/2014/06/26/google-explains-principles-material-design-language-android-chrome-web/#gref|title=9 Principles Google Created for its ‘Material Design’ UI Refresh|last=Summers|first=Nick|date=2014-06-26|language=en-US|access-date=2016-07-04}}</ref>、{{仮リンク|ドロップシャドウ|en|Drop shadow}}（影付け）などスキューモーフィズムの要素が一部取り入れられている<ref>{{Cite web|url=http://designmodo.com/flat-vs-material/|title=Flat Design vs. Material Design: How Are They Different? – Designmodo|date=2015-04-10|language=en-US|access-date=2016-07-04}}</ref><ref>{{Cite web|url=http://blogs.adobe.com/dreamweaver/2015/05/flat-design-vs-material-design-what-makes-them-different.html|title=Flat Design vs. Material Design: What Makes Them Different? {{!}} Creative blog by Adobe|website=Adobe Dreamweaver Team Blog|access-date=2016-07-04}}</ref><ref name="MdN20190925"/>。
2014年には、[[Google]]が[[Android (オペレーティングシステム)|Android]]や[[Chrome OS]]のアプリケーションの開発者向けの設計体系である[[マテリアルデザイン]]を提唱した<ref name="MdN20190925"/>。このデザインはフラットデザインとされているものの<ref>{{Cite web|url=https://thenextweb.com/google/2014/06/26/google-explains-principles-material-design-language-android-chrome-web/#gref|title=9 Principles Google Created for its ‘Material Design’ UI Refresh|last=Summers|first=Nick|date=2014-06-26|language=en-US|access-date=2016-07-04}}</ref>、{{仮リンク|ドロップシャドウ|en|Drop shadow}}（影付け）などスキューモーフィズムの要素が一部取り入れられている<ref>{{Cite web|url=http://designmodo.com/flat-vs-material/|title=Flat Design vs. Material Design: How Are They Different? – Designmodo|date=2015-04-10|language=en-US|access-date=2016-07-04}}</ref><ref>{{Cite web|url=http://blogs.adobe.com/dreamweaver/2015/05/flat-design-vs-material-design-what-makes-them-different.html|title=Flat Design vs. Material Design: What Makes Them Different? {{!}} Creative blog by Adobe|website=Adobe Dreamweaver Team Blog|access-date=2016-07-04}}</ref><ref name="MdN20190925"/>。
<!--In 2014, [[Google]] released [[Material Design]] to developers to incorporate into their design language for [[Android (operating system)|Android]] and [[Chrome OS]] apps. Material Design has been called flat design, although it includes some elements of [[skeuomorph]]ism like [[drop shadow]]s.-->
<!--In 2014, [[Google]] released [[Material Design]] to developers to incorporate into their design language for [[Android (operating system)|Android]] and [[Chrome OS]] apps. Material Design has been called flat design, although it includes some elements of [[skeuomorph]]ism like [[drop shadow]]s.-->
このように、フラットデザインにスキューモーフィズムの要素を部分的に取り入れる動きは「セミフラット」（semi flat）や「ほぼフラット」（almost flat）、または「フラットデザイン2.0」(flat 2.0)などと呼ばれており、マテリアルデザインはその良い例だとされている<ref>{{Cite web|title=Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users|url=https://www.nngroup.com/articles/flat-design/|publisher=Nielsen Norman Group|accessdate=2019-11-10|language=en|author=Kate Moran}} - 日本語訳：{{Wayback|url=https://u-site.jp/alertbox/flat-design|title=フラットデザイン：起源、問題、フラット2.0のほうが望ましい理由|date=20190512231834}}</ref>。
このように、フラットデザインにスキューモーフィズムの要素を部分的に取り入れる動きは「セミフラット」（semi flat）や「ほぼフラット」（almost flat）、または「フラットデザイン2.0」(flat 2.0)などと呼ばれており、マテリアルデザインはその良い例だとされている<ref>{{Cite web|title=Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users|url=https://www.nngroup.com/articles/flat-design/|publisher=Nielsen Norman Group|accessdate=2019-11-10|language=en|author=Kate Moran}} - 日本語訳：{{Wayback|url=https://u-site.jp/alertbox/flat-design|title=フラットデザイン：起源、問題、フラット2.0のほうが望ましい理由|date=20190512231834}}</ref>。

2020年9月6日 (日) 10:09時点における版

Material Designのスクリーンショット（Android）。フラットデザインの適用例。

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

定義

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

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

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

デザイナーの秋葉秀樹は、MdNに寄せた記事の中で、MacOS9用のDVDプレイヤーとiOS7用の動画プレイヤーのUIを比較し、フラットデザインを取り入れたiOS7用の動画プレイヤーの方が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年、アップルはこれまで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]。

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

ファイル:Android L Develpment Preview.png
Android 5.0のスクリーンショット。フラットデザインにスキューモーフィズムを取り入れたマテリアルデザインが適用されている。

2014年には、GoogleがAndroidやChrome OSのアプリケーションの開発者向けの設計体系であるマテリアルデザインを提唱した[6]。このデザインはフラットデザインとされているものの[19]、ドロップシャドウ（英語版）（影付け）などスキューモーフィズムの要素が一部取り入れられている[20][21][6]。 このように、フラットデザインにスキューモーフィズムの要素を部分的に取り入れる動きは「セミフラット」（semi flat）や「ほぼフラット」（almost flat）、または「フラットデザイン2.0」(flat 2.0)などと呼ばれており、マテリアルデザインはその良い例だとされている[22]。 また、Windows8でフラットデザインを適用してきたマイクロソフトも、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. ^ a b c d 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. ^ a b c d e f 上田恵 (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. ^ a b c 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日). http://www.vandelaydesign.com/why-the-flat-design-trend-is-hurting-usability/ 2017年7月6日閲覧。 
  15. ^ “The Problem With Flat Design, According To A UX Expert” (英語). Co.Design. (2016年3月23日). https://www.fastcodesign.com/3058094/the-problem-with-flat-design-according-to-a-ux-expert 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. ^ a b 石井徹 (2020年2月21日). “Windows 10のアイコンが『脱フラットデザイン』。カラフルな新アイコンに”. Engadget. 2020年5月9日閲覧。

関連項目

外部リンク

「https://ja-two.iwiki.icu/w/index.php?title=フラットデザイン&oldid=79397534」から取得