情報デザインを “仕組み化” したWindows 8、ハブ&スポークで没入観を演出 #wddjp @maskin

News


[読了時間: 2分]

Windows 8 Metro スタイル アプリ 開発週間 powered by MSP

screenshot_109

次期バージョンのオペレーティング システムとなる Windows 8 の可能性と技術情報を提供する「Windows Developer Days」。TechWaveでは、アプリ開発を通じてグローバルに活躍したい学生を支援する「Microsoft Student Partners (MSP)」と共にその模様をお伝えしていきます! →[まとめページ]

hub_and_Spoke

 昨日4月25日までの2日間に渡り東京で開催された「Windows Develeper Days (以下WDD)」。

 WDDでは、「Immersion (没入)」というキーワードが、「Windows 8 Metro スタイル アプリ」開発におけるコンセプトとして度々登場していた。

 「Immersion」には、情報を中心に、余計なことを考えず操作できるようにするという思いがあり、その世界観を実現するためにスピーディさ見やすさを重視するデザイン原則の徹底など、あらゆる角度から施策が提示されていたのが印象的だった。それはまさに「自転車のハブ&スポーク」。


 中心が利用者の立ち位置で、外周部分に近づくに連れて “詳細” 情報を入手できるようになるというもの。Microsoftは「セマンティックズーム」という言葉を用い、情報の段階構造をイメージして開発することを提案している。

没入するシチュエーションにあわせて情報を制御する

 では「セマンティックズーム」とは何か。まず、以下の画面を御覧頂きたい。両方とも、Windows 8 Metro スタイル のデスクトップ。上は通常の画面で、Windows 8 Metro スタイル の原則に従い、水平方向へのスクロールでタイルをブラウズする。下はデスクトップ全体を表示している状態で、「セマンティックズーム」で言うところハブ側(中心)に位置することになる。

R0018090

いわゆる標準的な Metro スタイルのデスクトップ。タイルをクリックするとアプリが起動する

R0018091

デスクトップを鳥瞰するビュー。アイコンもそれにあわせてデフォルメされている

 つまり、[ハブ(鳥瞰)]→[スポーク(標準デスクトップ)]→[アプリ(詳細、リム(外周部)] という流れで、情報をその意味に従い堀り下げていく仕組みになっている。利用者は求める情報の位置付けに応じてセマンティックズームの度合いを選択することで、チャーム(右側の機能パネル)や上下メニューなどが切り換わり、その内容のみに集中できるようになっているわけだ。

 これはアプリの内部にも実装することが可能で、大きなデータを扱うアプリの中にはデスクトップと同様のセマンティークズーム型の仕組みを利用しているところもある。(楽天市場アプリの例)

 ただ、セマンティックズームそのものが、Metro スタイル のテンプレートで自動で処理してくれるわけではなく、開発者自身が「ハブ」「スポーク」「詳細」というシチュエーションに適したテンプレートを選択して逐一開発する必要があり、そのルールを完全に体現するには経験の蓄積が必要になると考えられる。

 「Metro スタイル アプリ」のUIデザインの部分は、テンプレートを利用することで、原則に沿ったアプリに近づけることができるが、アプリ全体の情報デザイン像をイメージしてより良いアプリを構築するにはセマンティックズームを十分に咀嚼する必要がありそうだ。

【関連URL】
●Windows 8 Consumer Preview
http://windows.microsoft.com/ja-JP/windows-8/download
●デベロッパーセンター ~ Metro スタイル アプリ
http://msdn.microsoft.com/ja-jp/windows/apps/
●MSP フェローシップ募集ページ
http://msdn.microsoft.com/ja-jp/academic/hh455211
●イマジンカップ世界大会 学生レポーター募集!
http://blogs.msdn.com/b/microsoft_japan_academic/archive/2012/04/24/msp-japan-social-media-member.aspx

蛇足:僕はこう思ったッス
WDDでは、既存のウェブサービス&ウェブアプリをMetro スタイル アプリに移植するセッションが複数存在したが、どの会社も既成概念を取り払うことに難儀しているようだった。しかし、つき詰めれば詰めるほど、ユーザーの没入度合いは深まるという印象を受けた。また、「Metro スタイル アプリ」開発に最適化されたIDE(開発環境)である「Visual Studio 11」の完成度が高く、これに慣れることで、より効率良く開発するとができそうだ。

著者プロフィール:TechWave副編集長・イマジニア 増田(maskin)真樹
 8才でプログラマ、12才で起業。18才でライター。日米のIT/ネットをあれこれ見つつ、生み伝えることを生業として今ここに。1990年代はソフト/ハード開発&マーケティング→週刊アスキーなど多数のIT関連媒体で雑誌ライターとして疾走後、シリコンバレーでベンチャー起業に参画。帰国後、ネットエイジ等で複数のスタートアップに関与。関心空間、@cosme、ニフティやソニーなどのブログ&SNS国内展開に広く関与。坂本龍一氏などが参加するプロジェクトのブログ立ち上げなどを主導。 Rick Smolanの24hours in CyberSpaceの数少ない日本人被写体として現MITメディアラボ所長 伊藤穣一氏らと出演。大手携帯キャリア公式ニュースサイト編集デスク。TechWaveでは創出支援に注力。

メール maskin(at)metamix.com | 書籍情報・Twitter @maskinChatWorkcoffee-meeting 詳しいプロフィールはこちら


maskin
Follow me

maskin

Editor In Chief at TechWave.jp
1990年代初頭からソフトからハードまで50以上のスタートアップ立ち上げを国内外で経験。平行して雑誌ライターとして疾走。シリコンバレーでガレージベンチャーに参画後は、国内でネットエイジを筆頭にスタートアップに多数関与。ブログやSNSの国内啓蒙、ソニーの社内イノベーション事業など関与。通信キャリアのニュースポータルの立ち上げ期の編集デスクとして数億PV事業に育てた後、TechWaveにジョイン。世界最大のグローバルIT系メディアであるスペインの「Softonic」の元日本編集長
https://www.wantedly.com/users/24387
https://keybase.io/maskin
maskin
Follow me

最新情報をお届け

こっちはいろいろ

PAGE TOP
More in App, HTML, Metroスタイル, microsoft, Windows, windows8, セマンティックズーム, マイクロソフト
狭き門だけど貴重な体験ーーイマジンカップ世界大会 学生レポーター募集開始! #wddjp @maskin

Metro スタイル アプリ開発の基本「非同期」とは? #wddjp @maskin

あの「楽天市場」をスッキリとさせてしまう、Metro スタイル アプリの可能性 #wddjp @maskin

Close