{"id":"metro","no":402,"name":"Metro","ja":"メトロ","era":"2010–2015","family":"Microsoft UI","kind":"スタイル","collection":"Dictionary expansion 22","addedAt":"2026-08-18","source":{"title":"Microsoft Design","url":"https://microsoft.design/"},"reference":{"status":"verified","pageUrl":"https://microsoft.design/","credit":"Microsoft Design","gallery":[{"imageUrl":"https://commons.wikimedia.org/wiki/Special:FilePath/ZuneHD-Radio.jpg?width=640","pageUrl":"https://commons.wikimedia.org/wiki/File:ZuneHD-Radio.jpg","credit":"Microsoft《Zune HD》のラジオ画面 — Wikimedia Commons / CC BY-SA 2.0"},{"imageUrl":"https://commons.wikimedia.org/wiki/Special:FilePath/Windows%20Phone%207.jpg?width=640","pageUrl":"https://commons.wikimedia.org/wiki/File:Windows%20Phone%207.jpg","credit":"Microsoft《Windows Phone 7》のタイル画面 2010 — Wikimedia Commons / CC BY 2.0"},{"imageUrl":"https://commons.wikimedia.org/wiki/Special:FilePath/Zune%2030%20Menu.jpg?width=640","pageUrl":"https://commons.wikimedia.org/wiki/File:Zune%2030%20Menu.jpg","credit":"Microsoft《Zune 30》のメインメニュー — Wikimedia Commons / CC BY-SA 4.0"}]},"essence":"Windows Phoneが提示した、アイコンより文字を主役にするフラット言語。大きなタイポグラフィ、平面色のライブタイル、画面端を走り抜ける構成は、交通サインの明快さをUIに移植し、iOS 7に先行してフラット時代を開いた。","cues":["大きな文字が主役","平面色のタイル","画面外へ続く構成","クロームの排除"],"intents":["技術","信頼","反骨"],"works":["ニュースや天気を一覧するダッシュボードを、枠線なしで作り分けるとき","屋内の案内表示やサイネージを、遠くから一語で読ませたいとき"],"recipe":{"type":"見出しを本文の五倍以上に取り、細いウェイトのまま巨大化する","layout":"見出しを画面外へ流し、タイルは大小二種の矩形だけで組む","material":"影も枠も使わず、地は黒か白、面は彩度の高い単色で塗る"},"avoid":"枠も影も外した結果、押せるタイルと単なる見出しの区別が消え、利用者が画面のどこを触るか迷う。","colors":["#ffffff","#ffc211","#131314"],"motif":"graphic","pair":["flat-design","swiss"],"study":["Zune HDからWindows Phone 7へ","交通サインの影響（名前の由来）","Fluentへの継承"],"en":{"essence":"Windows Phone's flat language, which cast type rather than icons in the lead role. Large typography, flat-color live tiles and layouts that run off the edge of the screen transplanted the clarity of transit signage into UI, opening the flat era ahead of iOS 7.","cues":["Type as the hero","Flat-color tiles","Compositions running off-screen","Chrome eliminated"],"works":["Dashboards listing news or weather where borders would only add noise","Indoor wayfinding and signage read from a distance in one word"],"recipe":{"type":"Headings five times body size, kept in a light weight","layout":"Headings running off the edge, tiles in two rectangle sizes","material":"No shadows or borders, black or white ground, saturated flat panels"},"avoid":"Stripping every border and shadow erases the difference between a tappable tile and a plain heading, leaving people guessing where to touch.","study":["from Zune HD to Windows Phone 7","the transit-signage influence behind the name","the inheritance into Fluent"]},"links":{"page":"https://indexstyle.org/styles/metro","json":"https://indexstyle.org/api/styles/metro","designSpec":"https://indexstyle.org/styles/metro/design.md","imagePrompt":"https://indexstyle.org/styles/metro/prompt.txt"},"usage":{"license":"CC-BY-4.0","licenseName":"Creative Commons Attribution 4.0 International","licenseUrl":"https://creativecommons.org/licenses/by/4.0/","attribution":"IndexStyle — https://indexstyle.org","attributionUrl":"https://indexstyle.org","scope":"Original IndexStyle text and structured data. Reference images, quoted works, and third-party material are excluded and retain their own rights."}}