MetroStyleハッカソンに参加してきた

@thayamizu

自己紹介• ハンドル

o Twitter : @thayamizu

o Hatena: Crest

• お仕事o 某工業大学大学院の博士後期課程に在籍

o 大学では助手として仕事に携わってます

o 専攻分野は，コンピュータネットワークおよびグラフィックス．最近は，画像処理・パターン認識を中心に取り扱ってます

• 趣味o 読書，プログラミング，逆アセンブル，音楽鑑賞，絵描き，カラオケetc.

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/

Windows8の環境構築• 午前中は，環境構築のインストール作業の教えあい

o 半数ぐらいの人はすでにインストール済みだった

• 仮想環境か，デュアルブートかo 仮想環境なら，VMWareFusion，Virtual Boxがオススメ

o デュアルブートの人は見かけなかった

o なぜか，Macユーザが多かったです

• Boot Campは，Windows8未対応らしいです

• たぶんWindows8が，一部屋に30台以上動作してるのは日本でここぐらいじゃないでしょうか

Metro Styleとは• メトロ(Metro)は英語で「地下鉄」の意味

• 地下鉄の情報表示のように、シンプルで直感的なグラフィックを使ってユーザに情報を伝達する．

Metro Style UI

Metro Style UI の特徴• コンテンツが主役

o コンテンツ主体のインタフェース

o アプリのコンテンツに没入できるように設計されている

• WebであればWebコンテンツ

• クロムレスo 余分な情報は提示しない → 枠がない

o メニューやコマンドなどの，余分な情報を画面から削除

o コマンドを呼び出す時は，アプリバーやチャームを使う

Metro Style UIの画面構成• 主に２種類

• Hub,spokes, details.o 情報に階層を持たせるような構成

o 情報消費型のアプリ向け(ニュース等)

• Flato 同じ階層レベルのページが続く

o 非情報消費型のアプリ向け

Demo(1)

• COCKTAIL FLOWo どうでもいいけど，Mtero関係の勉強会でUIを紹介するときの定番になってます

• COD2012とか，MetroStyleハッカソンとか

Metro Style 独自のUI• アプリバー• スナップ• タイル

o ライブタイルo セカンダリタイル

• チャームとコントラクトo Windows8で採用されたインタフェースo チャーム

• 端末の右端から画面上に向かってスワイプすると出現するインタフェースo コントラクト

• チャームに収納されている４つの機能• 検索コントラクト• 共有コントラクト• デバイスコントラクト• 設定コントラクト

• セマンティックズームo 画面をピンチすることでページに表示される情報の詳細度を上下できる

Demo(2)

Metro Style アプリのガイドライン

• かなり厳しいらしい上に，審査がある

• タイポグラフィo Metroデザインにおいては重要な要素．疎かにするとアプリの質がグッとさがる

o フォント・フォントサイズはガイドラインに指定がある

• グリッドとマージンo タイポグラフィと同様に重要な要素

o ただ単純に余ったから空間を開けるということはしない．空間それ自体に意味を持たせる

o 基本的に5px単位で考えるといいらしい

アイディアソン• 4～6人程度のグループに分かれてハッカソンに向けての

アイディア出しo 一つのグループにとどまるのではなく，３回に分けていくつかのグループを

回って自分の好みに合うアイディアのところに参加

o ちょっと短かったかなぁという感想

• アイディアの例o 美人時計のＭｅｔｒｏ版，かわいいねボタン

o ソーシャルデータの一元管理，彼女ができる仕組み

o メトリス

o Etc..

• 来週のハッカソンが超楽しみです

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