メトロ
Metro / 2010–2015 / スタイル / Microsoft UI
Windows Phoneが提示した、アイコンより文字を主役にするフラット言語。大きなタイポグラフィ、平面色のライブタイル、画面端を走り抜ける構成は、交通サインの明快さをUIに移植し、iOS 7に先行してフラット時代を開いた。
ひと目で判断
見た目の特徴
- 大きな文字が主役
- 平面色のタイル
- 画面外へ続く構成
- クロームの排除
向いている用途
- ニュースや天気を一覧するダッシュボードを、枠線なしで作り分けるとき
- 屋内の案内表示やサイネージを、遠くから一語で読ませたいとき
このスタイルを使う
短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式
辞書情報
- 文字
- 見出しを本文の五倍以上に取り、細いウェイトのまま巨大化する
- 構成
- 見出しを画面外へ流し、タイルは大小二種の矩形だけで組む
- 素材
- 影も枠も使わず、地は黒か白、面は彩度の高い単色で塗る
- 注意
- 枠も影も外した結果、押せるタイルと単なる見出しの区別が消え、利用者が画面のどこを触るか迷う。
- 関連研究
- Zune HDからWindows Phone 7へ / 交通サインの影響（名前の由来） / Fluentへの継承
関連項目
- フラットデザイン / ベクターミニマリズム（Flat Design / Vector Minimalism）共通する印象：信頼。メトロとフラットデザイン / ベクターミニマリズムの違いを見る
- スイス・スタイル（Swiss）共通する印象：信頼。メトロとスイス・スタイルの違いを見る
取り違えられやすい
Microsoft UIをさらに見る
同じ「Microsoft UI」から、共通する印象が多い順に次の項目を選んだ。
- フルーエント2（Fluent 2）共通する印象：信頼 / 技術。
- Windows 95 インターフェース（Windows 95 Interface）共通する印象：信頼 / 技術。
- リボン（Ribbon）共通する印象：信頼 / 技術。
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/metro
- Markdown
- [メトロ（Metro） — デザインスタイル辞典](https://indexstyle.org/ja/styles/metro)
- HTML
- <a href="https://indexstyle.org/ja/styles/metro">メトロ（Metro） — デザインスタイル辞典</a>