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

[読了時間: 2分]

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

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

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

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

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


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

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

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

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

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

　ただ、セマンティックズームそのものが、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」の完成度が高く、これに慣れることで、より効率良く開発するとができそうだ。