1. MetroStyle
ハッカソンに参加してきた
@thayamizu

2. 自己紹介
• ハンドル
o Twitter : @thayamizu
o Hatena: Crest
• お仕事
o 某工業大学大学院の博士後期課程に在籍
o 大学では助手として仕事に携わってます
o 専攻分野は，コンピュータネットワークおよびグラフィックス．最近は，画像
処理・パターン認識を中心に取り扱ってます
• 趣味
o 読書，プログラミング，逆アセンブル，音楽鑑賞，絵描き，カラオケetc.

3. Metro Style ハッカソンに
参加したよ
• MetroStyle ハッカソンとは
o Metro Developer コミュニティ[1]とVSハッカソン倶楽部[2]のコラボ企画
o 7/14のアイディアソンと7/21のハッカソンに，分けて行われる
o 今回は前哨戦のアイディアソンに参加，来週も参加予定
• アイディアソンの内容
o Windows8の環境構築
o Metro Style アプリの基本事項の勉強会
o グループに分かれてアイディアソン
o 作業風景撮り忘れてました（汗
• 今回は，Metro Styleのアイディアソンに参加して得たことを
紹介できたらいいなと思ってます
[1] http://metrostyledev.net/index.php/
[2] https://sites.google.com/site/visualstudiohackathon/

4. Windows8の環境構築
• 午前中は，環境構築のインストール作業の教えあい
o 半数ぐらいの人はすでにインストール済みだった
• 仮想環境か，デュアルブートか
o 仮想環境なら，VMWareFusion，Virtual Boxがオススメ
o デュアルブートの人は見かけなかった
o なぜか，Macユーザが多かったです
• Boot Campは，Windows8未対応らしいです
• たぶんWindows8が，一部屋に30台以上動作してるのは
日本でここぐらいじゃないでしょうか

5. Metro Styleとは
• メトロ(Metro)は英語で「地下鉄」の意味
• 地下鉄の情報表示のように、シンプルで直感的なグラ
フィックを使ってユーザに情報を伝達する．

6. Metro Style UI

7. Metro Style UI の特徴
• コンテンツが主役
o コンテンツ主体のインタフェース
o アプリのコンテンツに没入できるように設計されている
• WebであればWebコンテンツ
• クロムレス
o 余分な情報は提示しない → 枠がない
o メニューやコマンドなどの，余分な情報を画面から削除
o コマンドを呼び出す時は，アプリバーやチャームを使う

8. Metro Style UIの画面構成
• 主に２種類
• Hub,spokes, details.
o 情報に階層を持たせるような構成
o 情報消費型のアプリ向け(ニュース等)
• Flat
o 同じ階層レベルのページが続く
o 非情報消費型のアプリ向け

9. Demo(1)
• COCKTAIL FLOW
o どうでもいいけど，Mtero関係の勉強会でUIを紹介するときの定番になってます
• COD2012とか，MetroStyleハッカソンとか

10. Metro Style 独自のUI
• アプリバー
• スナップ
• タイル
o ライブタイル
o セカンダリタイル
• チャームとコントラクト
o Windows8で採用されたインタフェース
o チャーム
• 端末の右端から画面上に向かってスワイプすると出現するインタフェース
o コントラクト
• チャームに収納されている４つの機能
• 検索コントラクト
• 共有コントラクト
• デバイスコントラクト
• 設定コントラクト
• セマンティックズーム
o 画面をピンチすることでページに表示される情報の詳細度を上下できる

11. Demo(2)

12. Metro Style アプリの
ガイドライン
• かなり厳しいらしい上に，審査がある
• タイポグラフィ
o Metroデザインにおいては重要な要素．疎かにするとアプリの質がグッとさがる
o フォント・フォントサイズはガイドラインに指定がある
• グリッドとマージン
o タイポグラフィと同様に重要な要素
o ただ単純に余ったから空間を開けるということはしない．空間それ自体に意味
を持たせる
o 基本的に5px単位で考えるといいらしい

13. アイディアソン
• 4～6人程度のグループに分かれてハッカソンに向けての
アイディア出し
o 一つのグループにとどまるのではなく，３回に分けていくつかのグループを
回って自分の好みに合うアイディアのところに参加
o ちょっと短かったかなぁという感想
• アイディアの例
o 美人時計のＭｅｔｒｏ版，かわいいねボタン
o ソーシャルデータの一元管理，彼女ができる仕組み
o メトリス
o Etc..
• 来週のハッカソンが超楽しみです

14. • ご清聴ありがとうございました