メトロ（デザイン言語）

Windows 8.1の Metro デザインを使用して作成されたWindows Calculator : ここで示されている主要な Metro コンポーネントには、明るい/細いフォントとフラットなアイコンが含まれます。

Microsoft Design Language（MDL）[ 1 ]（旧称Metro）は、Microsoftが開発したデザイン言語で、フラットデザインスタイルに基づいています。このデザイン言語は、タイポグラフィとシンプルなアイコン、無駄の排除、コンテンツ対クローム比（「コンテンツ先行」）、そして基本的な幾何学的形状に重点を置いています。

Windows Phone の Music+Video ハブ。小文字の見出しや幅広のタイルを含む Metro デザイン要素が表示されている。

MDL原則の初期の例としては、Encarta 95とMSN 2.0が挙げられます。[ 2 ] [ 3 ]このデザイン言語はWindows Media CenterとZuneで進化し、2010年のWindows Phone 7の発表時にMetroとして正式に導入されました。その後、Xbox 360システムソフトウェア、Xbox Oneシステムソフトウェア、Windows 8、Windows Phone、Outlook.comなど、同社の他の製品にも組み込まれました。[ 4 ] [ 5 ]「Microsoftデザイン言語」という名称が正式に採用される前、Microsoftの幹部であるQi LuはMIXXカンファレンスの基調講演でこれをモダンUIデザイン言語と呼んでいました。[ 6 ] Microsoftによると、「Metro」はあくまでコードネームであり、最終製品として発表されたことはなかったとのことですが、ニュースサイトはこの変更を商標の問題によるものとしています。[ 4 ]

Microsoft Design Language 2（MDL2）はWindows 10と並行して開発され、いくつかの調整が行われました。[ 7 ] [ 8 ] 2017年にマイクロソフトはFluent Design言語を導入し、その後数年間で徐々にMetroに取って代わりました。[ 9 ]

歴史

デザイン言語は、古典的なスイスグラフィックデザインのデザイン原則に基づいています。このスタイルの初期の特徴は、ナビゲーションの主な形式としてテキストを重視したWindows XP Media Center Edition用のWindows Media Center [ 10 ]や、Neptuneの初期のコンセプトに見られました。[ 11 ]このインターフェースは、 Media Centerの後継バージョンにも引き継がれました。2006年、Zuneはこれらの原則に基づいてインターフェースを刷新しました。Microsoftのデザイナーは、UIクロームよりもクリーンなタイポグラフィを重視してインターフェースを再設計することを決定しました。[ 12 ]これらの原則と新しいZune UIは、2010年に初めてリリースされたWindows Phoneに引き継がれました（Windows 8の多くはWindows Phoneに基づいています）。Zuneデスクトップクライアントも、Zuneの以前のPortable Media CenterベースのUIとは異なる、タイポグラフィとクリーンなデザインを重視して再設計されました。初期のWindows Phoneの研究中に、フラットな色の「ライブタイル」がデザイン言語に導入されました。

インタビューでは、マイクロソフトの複数の部門が互いの製品を利用しており、Metroの拡張は全社的な取り組みではなく、XboxなどのチームがMetroを気に入り、自社製品に適応させたことが説明された。最終的に、マイクロソフトの多くの部門がMetroを採用した。[ 13 ]

Microsoft Design Language 2（MDL2）はWindows 10と並行して開発されました。このバージョンでは、日付ピッカー、トグル、スイッチなどの新しいウィジェットセットが導入され、すべてのユーザーインターフェイス要素の境界線の太さが削減されました。[ 7 ] [ 8 ]その他の変更点としては、元のMetroのパノラマ/カルーセルの代わりに、ビューにアクセスするためのハンバーガーボタンが採用されています。 [ 14 ]

原則

Windows VistaおよびWindows 7のSegoe UIフォント(上)、およびWindows 8、Windows 8.1、Windows 10 (下)
Windows 8とXbox One（上）とWindows 10の「Threshold」（下）のスタート画面の背後にあるMicrosoftデザイン言語の設計原則。これはWindowsストア、Xbox Music、Xbox Videoでも使用されています。タイルは情報の原子単位を表します。

マイクロソフトのデザインチームは、デザイン言語のインスピレーションとして、公共交通機関でよく見られる標識を挙げています。[ 15 ]このデザイン言語は、優れたタイポグラフィと、目を引く大きな文字を重視しています。マイクロソフトは、このデザイン言語を「洗練されていて、素早く、現代的」であり、Windows、Android、iOSのアイコンベースのインターフェースを「一新」したものと見ていました。[ 16 ]すべてのインスタンスで、 Agfa MonotypeのSteve Mattesonがデザインし、マイクロソフトにライセンス供与されたSegoeフォントファミリーに基づくフォントが使用されています。Zune用に、マイクロソフトはZegoe UIと呼ばれるカスタムバージョンを作成しました。[ 17 ]また、Windows Phone用に、マイクロソフトはSegoe WPフォントファミリーを作成しました。これらのフォントはほとんどが細かい部分でのみ異なります。Segoe UIとSegoe WPのより明らかな違いは、それぞれの数字文字に現れています。Windows 8のSegoe UIフォントには、Segoe WPと同様に明らかな違いがありました。顕著な印刷上の変化があった文字には、1、2、4、5、7、8、I、Q などがあります。

ジョー・ベルフィオーレはMetroの設計者の一人です。Nokia World 2011で、ベルフィオーレはUIのテキスト要素とアイコンにおいて「芸術的」であることを目指していると説明しました。また、特にWindows Phoneにおけるライブタイル、動くドット、キネティックスクロールといったUIの「動き」についても言及しました。[ 18 ]

Microsoftは、共通のタスク群を統合して操作性を向上させることを目的に、このデザイン言語を設計しました。これは、余分なグラフィックを排除し、実際のコンテンツがメインUIとして機能することで実現されています。結果として、インターフェースは小さなボタンよりも大きなハブを優先し、横スクロール可能なキャンバスを採用することが多くなりました。ページタイトルは通常大きく、結果として横スクロールも活用されています。

アニメーションは大きな役割を果たします。Microsoftは、画面遷移やユーザーインタラクション（押下やスワイプなど）を、自然なアニメーションやモーションで一貫して認識することを推奨しています。これは、ユーザーに「生き生きとした」、反応の良いUIと「奥行き感」を与えている印象を与えることを目的としています。[ 19 ] [ 20 ]

受付

モバイル

この言語に対する初期の反応は概ね好意的でした。EngadgetはZune HDのレビューで、「マイクロソフトはここでも大きなタイポグラフィへの取り組みを継続し、洗練された、すっきりとデザインされたレイアウトを提供し、機能性と魅力をほぼ同等に兼ね備えています」と述べています。[ 21 ] CNETはデザイン言語を称賛し、「iPhoneやiPod Touchの狭くて無味乾燥なアイコングリッドやロロデックスメニューよりも、より大胆でカジュアルな印象です」と述べています。[ 22 ]

アメリカ工業デザイナー協会（IDSA）は、IDEA 2011授賞式において、このUIを採用したWindows Phone 7に「ゴールドインタラクティブ賞」、「ピープルズチョイス賞」、「ベストインショー賞」を授与した。[ 23 ] [ 24 ] IDSAのユーザーエクスペリエンスコンサルタントであるイザベル・アンコーナは、Windows Phoneが受賞した理由を次のように説明している。[ 25 ]

ここでの革新性は、ウィンドウやフレームといった従来のユーザーインターフェースの慣習にとらわれず、データに焦点を合わせた流動的なエクスペリエンスにあります。データが視覚的な要素やコントロールとして機能します。シンプルなジェスチャーとトランジションが、ユーザーをコンテンツの奥深くへと導きます。真にエレガントでユニークなエクスペリエンスです。

UIは女性や初めてのユーザーに好評だったと報告されています。[ 26 ]

特に批判の的となったのは、すべて大文字のテキストの使用でした。インターネットの利用が増加するにつれ、批評家たちはこれを、まるでコンピュータプログラムがユーザーに向かって叫んでいるかのようだと例えています。ITジャーナリストのリー・ハッチンソンは、MicrosoftがmacOS版OneNoteでこの手法を採用していることを酷評し、「OS Xのデザイン慣習に違反しているというよりは、むしろそれらを小屋の裏に持ち出してガソリンをかけ、火をつけているような、狂気じみた非標準的なアプリケーションウィンドウメニューに悩まされている」と述べています。[ 27 ]

Windows 8デスクトップの場合

Windows 8の登場により、同OSのユーザーインターフェースとそのデザイン言語の使用は、概して否定的な批判を浴びました。2012年8月25日、Ars Technicaのピーター・ブライト氏はWindows 8のプレビュー版をレビューし、レビューの前半でWindows 8とWindows 7のスタートメニューのデザインを比較しました。それぞれの長所と短所を論じた上で、ピーター・ブライト氏はWindows 8のスタートメニュー（スタート画面と呼ばれる）は、問題がないわけではないものの、明らかに優れていると結論付けました。しかし、Windows 8のユーザーインターフェースは使いにくく、ユーザーインターフェースの様々な側面がうまく連携していないと結論付けました。[ 28 ]ウッディ・レオンハルト氏はさらに批判的で、「ユーザーの視点から見ると、Windows 8は失敗作だ。ユーザーを二方向に同時に引きずり込む、ぎこちない寄せ集めだ」と述べています。[ 29 ]

Windows 8はスタートメニューの変更に加え、アイコンベースのデスクトップインターフェースへの依存を脱却し、フルスクリーンアプリの採用など、よりモーダルなアプローチを採用しています。しかし、これによりマイクロソフトはマルチタスクやビジネス生産性の向上から焦点を移しました。[ 30 ]

名前の変更

2012年8月、The Vergeは、開発者とマイクロソフトの従業員に社内メモが送られ、「ヨーロッパの重要なパートナーとの協議」を理由に「Metro」という用語の使用を「中止する」という決定が発表され、「代替用語に取り組んでいる」と報じた。[ 31 ]テクノロジーニュースメディアのArs Technica、[ 32 ] TechRadar、[ 33 ] CNET、[ 34 ] Engadget [ 35 ] Network World [ 36 ]と、主要メディアのThe New York Times CompanyのBits Blog [ 37 ]とBBC News Online [ 38 ]は、メモに記載されたパートナーはマイクロソフトの販売パートナーの1つであるドイツ企業Metro AGである可能性があると報じた。その名称は同社の「Metro」商標を侵害する可能性があるからである。マイクロソフトは後に、名称の重要性を軽視した理由は進行中の訴訟とは関係がなく、「Metro」は社内プロジェクトのコードネームに過ぎなかったと述べたが[ 39 ] 、同社はこのブランドを大々的に一般に宣伝していたにもかかわらず[ 40 ]、状況によっては新しいデザインを指すために「Modern」という用語やより一般的な「Windows 8」という修飾語を使い始めた。これはおそらくプレースホルダーとしてのものであろう[ 41 ] 。

2012年9月、「Microsoftデザイン言語」がデザインスタイルの正式名称として採用されました。[ 1 ] [ 42 ]この用語は、Microsoft Developer Networkのドキュメント[ 43 ] [ 44 ] [ 45 ] [ 46 ]および2012年のMicrosoft Buildカンファレンスでデザイン言語を指すために使用されました。 [ 1 ] [ 47 ]

関連する変更として、マイクロソフトはWindowsストア経由で配布されるモバイルアプリを指すために「メトロスタイルアプリ」というフレーズの使用をやめました。[ 42 ]

参照

参考文献

  1. ^ a b c Foley, Mary Jo (2012年10月29日). 「Microsoft Design Language: 『Metro』の最新の公式表記法」" . ZDNet . CBS Interactive .
  2. ^ Green, Jay (2012年2月8日). 「なぜMetroがMicrosoftで今や主流なのか」 . CNET . CBS Interactive .
  3. ^ Massey, Stephane (2012年2月15日). 「Metro UI [ sic ] Design Principles」 . stephanemassey.com .自費出版. 2018年8月2日時点のオリジナルよりアーカイブ。 2012年2月17日閲覧。
  4. ^ a b Chang, Alexandra (2012年8月8日). 「Microsoftのユーザーインターフェースには名前は必要ない」 . Wired . Condé Nast .
  5. ^ Kruzeniski, Mike (2011年4月11日). 「印刷デザインはインタラクションの未来である」 . Kruzeniski.com .自費出版. 2012年3月14日時点のオリジナルよりアーカイブ。 2011年8月27日閲覧。
  6. ^ Lu、Qi (2012 年 10 月 1 日)。「Qi Lu: IAB MIXX カンファレンスの基調講演」。ニュースセンター。マイクロソフト。
  7. ^ a b Sams, Brad (2015年4月21日). 「MetroからMicrosoft Design Language 2へ：比較」Neowin .
  8. ^ a b Rubino, Daniel (2015年4月21日). 「Windows 10向けMicrosoft Design Language 2の新機能」 . Windows Central . Mobile Nations.
  9. ^ https://www.theverge.com/2017/5/11/15615812/microsoft-fluent-design-system-project-neon-features
  10. ^ Lefevers, Jason (2013年9月15日). 「Metro UIの歴史を紐解く」 . Windows Phone Metro .自費出版. 2013年5月22日時点のオリジナルよりアーカイブ。 2013年9月15日閲覧。
  11. ^ 「SuperSite Flashback: Neptune」 2013年8月6日。
  12. ^ 「Windows Phone デザイン システム: コードネーム「Metro」（PDF） 。 2010年11月15日時点のオリジナル（PDF）からアーカイブ。2010年10月9日閲覧。
  13. ^ Carr, Austin (2014年1月25日). 「Microsoftは時に素晴らしいものをデザインする。しかし、それが決して重要ではない理由とは？」 Fast Company .
  14. ^ https://www.digitaljournal.com/tech-science/microsoft-s-project-neon-to-give-windows-10-a-visual-make-over/article/480591
  15. ^ 「Windows Phone 7のデザイン言語」 . .toolbox . Microsoft . 2012年10月9日時点のオリジナルよりアーカイブ。2012年10月5日閲覧。
  16. ^ Hamburger, Ellis (2011年4月27日). 「メトロ」 . Business Insider . 2013年4月23日時点のオリジナルよりアーカイブ。
  17. ^ Zheng, Long (2007年11月14日). "「Zegoe」、新しい Zune フォント。何か始めました。自費出版。
  18. ^ 「異なる種類のUIを構築する」 2011年10月28日。
  19. ^ Roberts, Chad; Shum, Albert; Smuga, Michael (2010年3月15日). 「Windows Phone UI and Design Language」 . MIX 2010. Microsoft .
  20. ^ Kruzeniski, Mike (2011年2月17日). 「From Transportation to Pixels」 . Windows Phone Developer Blog . Microsoft . 2011年2月18日時点のオリジナルよりアーカイブ。
  21. ^ Topolsky, Joshua (2009年9月17日). 「Zune HD レビュー」 . Engadget . AOL .
  22. ^ 「Zune HD 64GB レビュー」 . CNET . CBS Interactive . 2009年9月17日.
  23. ^ Warren, Tom (2011年9月18日). 「Windows PhoneがIDEA 2011 – people's choice design awardを受賞」 . WinRumors . 2012年3月3日時点のオリジナルよりアーカイブ。
  24. ^ 「IDEA 2011 Best in Show」 .アメリカインダストリアルデザイナー協会. idsa.org. 2011年9月23日. 2014年2月25日時点のオリジナルよりアーカイブ。
  25. ^ 「Windows Phone 7」 . Industrial Designers Society of America . idsa.org. 2011年6月8日. 2013年5月15日時点のオリジナルよりアーカイブ。 2011年9月20日閲覧。
  26. ^ 「異なる種類のUIを構築する」 2011年10月28日。
  27. ^ハッチンソン、リー（2014年7月12日）「嫌われても仕方がないソフトウェアデザインのトレンド」 Ars Technica、コンデナスト。
  28. ^ブライト、ピーター（2012年4月25日）「デスクトップ上のWindows 8—ぎこちないハイブリッド」 Ars Technica、コンデナスト・デジタル、pp.  1– 5。
  29. ^レオンハルト、ウッディ（2012年8月15日）「Windows 8レビュー：本当にひどい」InfoWorld IDG
  30. ^バーニー、ダグ（2012年8月17日）「Windows 8は終了、そろそろ心配だ」『レドモンド・マガジン』 1105メディア。
  31. ^ Warren, Tom (2013年8月2日). 「独占記事：MicrosoftのMetroブランドは社内メモによると『今週』変更される」 The Verge . Vox Media .
  32. ^ Bright, Peter (2012年8月3日). 「Microsoft：「Metro」は廃止、「Windows 8スタイルのUI」導入、商標紛争の噂も」 Ars Technica . Condé Nast .
  33. ^ Smith, Chris (2012年8月3日). 「Microsoft、商標権侵害の懸念からWindows 8の名称を『Metro』から変更」 . TechRadar . 2013年9月24日閲覧。
  34. ^ Whitney, Lance (2012年8月10日). 「なぜマイクロソフトは『Metro』という名前を廃止したのか？」 . CNET . CBS Interactive .
  35. ^ Fingas, Jon (2012年8月2日). 「Microsoft、Metroのデザイン名を軽視、その俗語をめぐって訴訟も」Engadget . AOL .
  36. ^ Patrizio, Andy (2012年8月6日). 「情報筋によると、Microsoftは商標権侵害によりMetroの開発を中止した」 . Network World . IDG .
  37. ^ Wingfield, Nick (2012年8月3日). 「Microsoft、新製品デザインでMetroという名称を廃止」 . Bits Blog . The New York Times Company .
  38. ^ 「マイクロソフト、Windowsの『Metro』名称を廃止へ」 BBCニュースオンラインBBC 2012年8月3日
  39. ^ Foley, Mary Jo (2012年8月2日). 「『Metro』はMicrosoftで禁止語になったのか？」 ZDNet . CBS Interactive .
  40. ^ Humphries, Matthew (2012年8月3日). 「Microsoft、Metroの名称使用を中止」 . Geek.com . 2015年6月16日時点のオリジナルよりアーカイブ。2015年6月13日閲覧。
  41. ^ Keizer, Gregg (2012年8月10日). 「Microsoft、『Metro』を『Windows 8』および『Modern』ラベルに置き換え」 . Computerworld . 2020年1月30日閲覧。
  42. ^ a b 「Microsoft 、Metro以降の命名計画についてついに明らかに」 ZDNet CBS Interactive 2012年9月12日
  43. ^ 「優れた Windows ストア アプリを作成する」 . MSDN . Microsoft . 2017 年8 月 5 日閲覧。
  44. ^ 「デザインケーススタディ: iPadからWindowsストアアプリへ」 MSDN Microsoft 2013年5月28日閲覧。
  45. ^ 「タイポグラフィのガイドライン」 MSDN 、 Microsoft 、2013年5月28日閲覧。
  46. ^ 「DirectXとC++を使用したWindowsストアアプリのロードマップ」 MSDN 、 Microsoft 、2013年5月28日閲覧。
  47. ^ Tschumy, Will (2012年11月16日). 「Microsoftのデザイン言語」 . Channel 9. Microsoft .
「 https://en.wikipedia.org/w/index.php?title=Metro_(design_language)&oldid=1333048257」より取得