設計のケース スタディ: Web サイトから Windows ランタイム アプリへ
Web サイトを設計することは、長年にわたって普通に行われてきたことです。Windows 8 を使うと、HTML5、カスケード スタイル シート レベル 3 (CSS3)、JavaScript などの使い慣れた Web テクノロジを使って、Windows ストア アプリを作ることができます。ここでは、Web サイトの機能を明らかにして優れた Windows ストア アプリを作る方法を示すと共に、Windows 8 プラットフォームの機能を使って、付加価値、個人用設定、より豊かなエクスペリエンスを提供する方法について説明します。
ここでは、設計者や開発者が Web サイトを Windows ストア アプリとして作り直す際に役立つ情報を紹介します。
Windows 8 のビジネス チャンスについては、「アプリの販売」をご覧ください。Windows ストア アプリを構築するための機能について詳しくは、開発者向け Windows 8 製品ガイドに関するページをご覧ください。
この記事をダウンロードする: この記事をダウンロードする場合は、この記事のオフライン版をご覧ください。
フード トラック Web サイトとアプリ
この記事では、フード トラック (移動販売車) の情報を集めた Web サイトを取り上げます。この Web ページでは、地域に出店しているフード トラックや最新ニュースを調べたり、ユーザーによるフード トラックの評価を見ることができます。後半のケース スタディでは、設計を中心的に取り上げます。サイトのコア機能を Windows ストア アプリとして作り直し、さらに拡張する方法について説明します。
Windows ストア アプリに移行するにあたっての目標は、Web サイトのコア機能と同等の機能を確保する一方で、この Web サイトの特徴を強く打ち出すことでした。そこで、Windows ストア アプリの長所はユーザーが近くのフード トラックを探す手段として優れていることだと判断しました。次の図に、フード トラック Web サイトの UI の構造を示します。ここでは、これらの UI コンポーネントのそれぞれを Microsoft デザイン スタイルに変換する方法について説明していきます。
- レイアウトとナビゲーション
- コマンドと操作
- コントラクト: 検索、共有、設定
- タッチ
- スケーリングとビュー
- 通知
レイアウトとナビゲーション
クロムよりもコンテンツを優先させる
ほとんどの Web サイトでは、実績のあるレイアウト パターンが使われています。ホーム ページの設計には、ナビゲーション (ヘッダー、フッター)、ユーティリティ コンポーネント (サインイン、検索)、他のコンテンツ (ブログ、ニュース) へのアクセスをサポートする UI が含まれています。これらは Web サイトにとって一般的な要素ですが、近所のフード トラックを見つけるという最も重要な操作からユーザーの注意がそらされてしまいます。Windows ストア アプリを設計するにあたり、アプリのメイン機能とは直接関係しない UI とコンテンツの多くをなくしました。
Web サイト:
- この Web サイトには一般的な 2 列のレイアウト パターンが使われていて、メインとなるコンテンツが左側、それ以外のコンテンツが右側に配置されています。
- このサイトで最も重要なフード トラックの情報は、画面のスペースの 1/3 程度しか割り当てられていません。
Windows ストア アプリ:
ランディング ページ上のすべてのスペースが、このアプリの特徴である近くのフード トラックを見つける機能に割り当てられています。
例: Web サイトのホーム ページと Windows ストア アプリのホーム画面のコンテンツを強調表示する
Web サイトと Windows ストア アプリのどちらにも、メイン ページにフード トラックの紹介とカテゴリが表示されています。 Web サイト上ではスペースに制限があるため、フード トラックの各カテゴリは 1 つの画像で表されています。 Windows ストア アプリのホーム画面を設計するにあたり、より多くのフード トラック情報をトップ レベルに配置して、ユーザーにより多くのコンテキストを示し、インターフェイスの魅力を高めることにしました。
Web サイト: フード トラックの各カテゴリは 1 つの画像で表されています。このカテゴリ内のトラックを見つけるには別のページに移動する必要があり、トラックの詳しい情報を表示するにはさらにトラックを選ぶ必要があります。 |
Windows ストア アプリ: 各カテゴリは複数の画像によって表されるため、特定のカテゴリに含まれる近くのトラックをすぐに見つけることができます。ユーザーは、ホーム画面からトラックに直接移動できます。 |
アプリの最適なナビゲーション パターンの選択については、「ナビゲーション パターン」をご覧ください。
フラット ナビゲーション パターンの実際の使い方については、「アプリの機能の概要」シリーズをご覧ください。
直接操作を使ってナビゲートする
Web サイトでは、ナビゲーション要素が上部ナビゲーション バーとフッターの両方で繰り返されています。ナビゲーション要素は不変で、常に表示されています。Windows ストア アプリでは、ナビゲーション要素をコンテンツに直接組み込む一方で、ユーザーが必要とするまで表示されないようにしました。
例: Web サイトや Windows ストア アプリの特定のトラックに移動する
Web サイト: A.ユーザーは、Web サイト上の別のカテゴリ ページに移動して、すべてのトラック カテゴリを表示します。 B.次に、ユーザーは、カテゴリ ("Barbecue food trucks" など) を選んで、そのカテゴリに移動します。 C.ようやく、ユーザーは選んだカテゴリ内のトラックを見ることができます。 |
Windows ストア アプリ: A.ホーム画面には、コンテンツのグループ (トラックの特集、近所のトラック、カテゴリ ビュー) から構成されるハブ ページがあります。 B.ユーザーは、タッチした後でどちらかの方向にパンすることで、ホーム画面を離れずに、フード トラックのさまざまなカテゴリを表示できます。 C.それぞれのハブでは、カテゴリ内のいくつかのトラックがハイライトされています。ユーザーは、トラックをタップして直接そのトラックのページに移動することも、カテゴリ グループ ヘッダー テキスト (たとえば、"Asian") をタップしてそのカテゴリ ページに移動することもできます。 |
コマンドと操作
アプリ コマンドと操作をアプリ バーに常に表示する
Web サイトでは、コンテンツに基づくユーザー操作として表示されるアドホック コマンドがよく使われます。たとえば、この Web サイトには、すべてのフード トラックのページに、ユーザーに特定のトラックに関する写真をアップロードしてもらうためのリンクが用意されています。それぞれのトラック ページでは、このようなコンテキスト内操作が繰り返されています。
このアプリでは、Windows ストア アプリ設計の "クロムよりもコンテンツを優先させる" 方針に従って、システムの共通のコントロールであるアプリ バーに、すべてのコンテキスト内操作を組み込みました。これに加え、よく使うコマンドを端に近い場所に配置して、簡単に手が届くようにしました。これらの設計原則を取り入れた結果、すっきりとしたデザイン サーフェスが完成しました。どの画面を表示していても、画面の下部または上部からスワイプするだけで、アプリ バーに関連性のある操作が表示されます。すべての Windows ストア アプリでは、アプリ バーをコマンド用に使うことができます。ユーザーがアプリ バーの対話式操作に慣れることで、ますますアプリが使いやすくなり、システム全体で一貫した使い心地を感じられるようになります。
例: フード トラック写真を Web サイトや Windows ストア アプリへアップロードする
Web サイト:
|
Windows ストア アプリ:
|
コントラクト
フード トラック Web サイトは、検索、サインインなどのグローバルな操作に関して、一般的な Web サイトの慣例に従っています。これらの操作は、サイトの右上隅に常に表示されています。Windows ストア アプリを設計するにあたり、このようなグローバルな操作に対する独自の UI を用意しませんでした。代わりに、検索コントラクト、共有コントラクト、設定コントラクトなどのシステムの組み込みの機能を使いました。これらの UI コンポーネントは常に画面に表示されているわけではないので、アプリのキャンバスが整理され、より多くのスペースをコンテンツに割り当てることができます。
検索コントラクトを使って検索エクスペリエンスを一元化する
ほとんどの Web サイトと同様に、フード トラック サイトではすべてのページに検索ボックスが用意されています。そして、この検索の範囲は、このサイトに限定されています。これは、検索をする前にフード トラック Web サイトに移動する必要があることを意味します。
Windows ストア アプリの検索エクスペリエンスを設計するとき、検索コントラクトを組み込んで、ユーザーが最初にアプリを開かなくてもフード トラックを検索できるようにしました。検索チャームによって提供される検索機能は、システムのどこからでも起動できます。
例: Web サイトや Windows ストア アプリを使ってフード トラックを検索する。
Web サイト:
- サイト上で検索ボックスが常に表示されます。
- 検索結果が表示されるとき、すべての Web サイト クロムも表示されたままになります。
- ユーザーは、フード トラックを検索する前に必ず Web サイトに移動する必要があります。
Windows ストア アプリ:
- 端からスワイプしてチャームを表示し、[検索] を選ぶと、アプリ内のどこからでも検索を実行できます。また、アプリ バーまたはアプリ キャンバスに表示されるアプリ内検索ボックスを用意することもできます。
- 現在フード トラック アプリを開いているため、フード トラック アプリが既定で選択されています。入力を開始すると、検索候補が検索ウィンドウに表示されます。このように、どの語句によって結果が生成されるかがすぐにわかります。ユーザーが検索語句 (たとえば、"barbecue truck") を決定すると、アプリに検索結果ビューが表示されます。
- 検索結果ビューには、必要のないクロムをはじめとする余分なものがなく、検索結果のみが表示されます。検索ボックスを追加すると、検索のユーザー エクスペリエンス全体を制御できます。
例: アプリの外部でフード トラックを検索する (Windows ストア アプリでのみ可能)。
アプリ内検索に加えて、フード トラック アプリを検索ターゲットとして選ぶと、アプリ外部から検索できます。この例では、スタート画面から "Barbecue Truck" を検索しています。検索ウィンドウ内のアプリの一覧でフード トラック アプリをタップすると、アプリが起動され、検索クエリが実行されます。フード トラック アプリは近くのフード トラックを検索するように最適化されているため、1 回タップするだけで検索が完了し、近くのバーベキュー トラックを見つけることができます。
共有コントラクトを使って興味のあるたくさんの場所や人とつながる
フード トラック Web サイトでは、メール、Facebook、Twitter を使って特定のフード トラックに関する情報を共有できます。共有オプションは、Web サイト上のさまざまな場所で、共有できるコンテンツの近くに配置されています。
この Windows ストア アプリには共有コントラクトが使われているため、特徴的な共有シナリオを実現できます。システムの組み込みの共有チャームを使うと、アプリ全体にわたって共有ボタンを表示する必要がなくなります。利用するアプリに関係なく、いつも同じ場所で共有オプションを見つけることができます。この変更により、ユーザーが使う可能性があるサービスすべてに接続する必要がなくなるため、設計と開発の両方が容易になります。アプリを "共有" と統合すると、共有コントラクトが実装されているあらゆる Windows アプリに接続されます。外部の Web サービスの API の変更に対応する必要はありません。
例: フード トラック写真を共有する。
Web サイト:
|
Windows ストア アプリ:
|
例: [共有] ウィンドウを詳しく調べる。
Windows ストア アプリ:
- 共有ターゲットとして実装されたアプリは、[共有] ウィンドウのアプリの一覧に表示されます。たとえば、Socialite、Tweet@Rama、Mail がこれに該当します。
- ユーザーは、アプリでサポートされるさまざまな種類のコンテンツを共有できます。たとえば、リンクや写真を共有したり、必要に応じてメモ帳アプリに情報を保存したりできます。
- よく使われる共有ターゲットは、共有操作をすばやく完了できるように、一覧の最上部に表示されます。
[設定] ウィンドウを使う
フード トラック Web サイトには、About us、Sign-in、Contact info、Newsletter などのさまざまな実用的な機能が用意されています。これらの機能は一般的な Web デザイン パターンに従って画面の特定の領域に配置されているため、ユーザーはこれらの機能を簡単に見つけることができます。しかし、これらの機能は、サイトのさまざまな部分に分散しています。構成タスクや管理タスクは、この Windows ストア アプリの中心的な機能ではありません。一貫したエントリ ポイントを持つ設定コントラクトを使うと、ユーザーはアプリ管理機能がどこにあるかを覚える必要がなくなり、必要なときに確実にアプリ管理機能を呼び出すことができます。
例: Web サイト上のオプションと Windows ストア アプリ上のオプションを設定する。
Web サイト:
- Sign-in、About Us、Contact、Newsletter などのユーティリティ機能が、サイトの別々の部分に分散しています。
Windows ストア アプリ:
A.設定オプションは、[設定] ウィンドウの 1 か所に集められています。
B.ユーザーは、現在のコンテキストを離れることなく、アプリのどこからでもサインインできます。
C.ユーザーは、通知設定を使って、受け取る通知の種類を指定できます。通知はサイトのニュースレターに代わるもので、ユーザーはジャスト イン タイムの情報をアプリから受け取ります。
ファイル ピッカーを使ってさまざまな場所からファイルにアクセスする
フード トラック サイトでは、ユーザーに地域のトラックに関する写真をアップロードしてもらうためのしくみが用意されています。この機能は、ファイル ピッカーを使うことで、簡単に Windows ストア アプリに実装できます。ファイル ピッカーは、ローカル PC、接続されている記憶装置、ホームグループを介して接続される他のコンピューターのファイルやフォルダーにアクセスするための全画面ダイアログです。ユーザーは、この機能を使って、ファイル ピッカー コントラクトに参加しているアプリの項目にアクセスすることもできます。
例: ローカル ファイル システムからフード トラック写真をアップロードする。
Windows ストア アプリ:
- アプリ バーの [Upload] ボタンをタップして、ファイル ピッカー UI を開きます。これは、ユーザーがファイルにアクセスするときに必ず表示される UI サーフェスです。
- [ファイル] ヘッダーをタップするとすべての利用できるファイルの場所がポップアップで表示されるので、目的のファイル フォルダーに移動します。
- ユーザーがフォルダー内で複数の写真を選ぶと、選ばれた写真を表すサムネイルの一覧が画面の左下に表示されます。
タッチ
横長のレイアウトに横方向のパンを使う
フード トラック Web サイトと Windows ストア アプリは、どちらもユーザーの対話式操作の方法と人間工学を念頭に置いて設計されています。Web サイトは、主にマウスによる対話式操作向けに設計されています。そのため、各ページのコンテンツは縦長にレイアウトされ、ユーザーがマウスを使ってすばやく簡単に目的のコンテンツまでスクロールできるようになっています。一方、Windows ストア アプリはタッチ操作向けに設計されていて、ほとんどのデスクトップ PC やノート PC のような横長のレイアウトが使われています。横長のレイアウトでは、画面スペースの利用が最適化されます。また、横長のデバイスでは、ユーザーにとっても、縦方向にスクロールするよりも横方向にパンする方が快適で自然です。
例: Web サイト上のコンテンツのナビゲーションと Windows ストア アプリ ホーム画面上のコンテンツのナビゲーション。
クロススライドによるオブジェクトの選択
Web サイトで複数の選択を表す場合、一般的に、複数のオブジェクトの横にチェック ボックスを表示します。Windows 8 では、ユーザーはパン方向に対して垂直方向にオブジェクト上ですばやくスワイプすることで、一覧またはグリッドの中のオブジェクトを選ぶことができます。オブジェクトを選ぶと、項目に関連するコマンドが自動的にアプリ バーに表示されます。
例: ホーム画面上で複数のフード トラックを選択し、スタート画面にピン留めする。
アプリのランディング ページでスワイプしてトラックを選ぶと、アプリ バーが表示されます。このアプリ バーには、選んだトラックをブックマークに追加できるお気に入りコマンドが含まれています。このジェスチャは元に戻すことができるため、Windows ストア アプリでより効率的にオブジェクトを選ぶことができます。これにより、ユーザーは、安心してアプリを操作できます。
ピンチとストレッチによるセマンティック ズーム
ピンチ ジェスチャとストレッチ ジェスチャを使うと、長いコンテンツ内を簡単に移動できます。Windows ストア アプリのランディング ページには、Featured Truck、Near me、Asian、Barbeque、Breakfast などのいくつかのグループが表示されています。ユーザーは、パンを使ってより多くのコンテンツを表示したり、セマンティック ズームを使って特定のセクションにすばやくジャンプしたりできます。セマンティック ズーム コントロールを使ったピンチ操作で表示を縮小すると、現在のビューのすべてのセクションを 1 画面で表示できます。その後、タップするだけで、リスト内の最初、最後、または特定のセクションに移動することができます。縮小表示は、各セクション内の興味の対象となるコンテンツやセクションに関するメタ情報 (各カテゴリに含まれるトラック数) を表示するように設計することもできます。これは、アプリ キャンバスの一部として固定されるナビゲーション要素の代わりに、ナビゲーション用に使うことができます。
例: セマンティック ズームを使って特定のトラック カテゴリにジャンプする。
Web サイト:
|
Windows ストア アプリ:
|
拡大縮小とサイズ変更
さまざまな向きや画面サイズに合わせて変化するレイアウトを設計する
フード トラック Web サイトのレイアウトは、さまざまなデバイス、画面サイズ、解像度、向きに柔軟に対応するよう設計されています。流動的な Web サイト デザインと同様、Windows 8 を搭載する PC は、小型のタッチ操作のみのタブレットから、大型のノート PC やデスクトップまで多岐にわたります。より多くのユーザーにアプリを使ってもらうには、Windows ストア アプリをサポートする多種多様なデバイスで適切に表示されるアプリを設計することが重要です。
Web サイトの設計原則の多くは、Windows ストア アプリ開発に適用できます。組み込みのテンプレートとコントロールを使うと、横長のビューと縦長のビューの切り替えを簡単に行うことができます。向きを縦にした場合、それぞれのカテゴリでより多くのトラックが表示されます。同様に高解像度モニターでは、画面のスペースが増えるため、それぞれのカテゴリでより多くのトラックが表示されます。
例: 異なるデバイス上のフード トラック Web サイトと Windows ストア アプリ。
Web サイト:
- フード トラック Web サイトでは、異なる画面サイズとフォーム ファクターに対してレイアウトが調整され、再配置されます。
Windows ストア アプリ:
- 縦モード、横モード、高解像度画面で表示された Windows ストア アプリ。増えたスペースを使ってより多くのコンテンツを表示できます。
狭い幅を使ってユーザーの関心を集める
Windows 8 では、画面上に複数のアプリを並べて配置することで、マルチタスク動作を実現できます。狭い幅で正しく動作するようにアプリを設計することは、アプリが画面に表示されている時間を長くし、より長くユーザーの関心を集めておくのに効果的な方法です。2 つのアプリの間にある区切り線を操作するとアプリのサイズを簡単に変更できるため、サイズが変更された後もコンテキストを保つことが重要になります。アプリのサイズを変更した結果としてアプリの状態が失われることがないようにする必要があります。
サイズ変更について詳しくは、「ウィンドウ サイズと画面に合わせたスケーリングのガイドライン」と「縦長で幅の狭いレイアウトに対するウィンドウ サイズの変更のガイドライン」をご覧ください。
例: ワイド サイズと狭いサイズの Windows ストア アプリのホーム画面。
- 左: ワイド サイズのフード トラック アプリが画面スペースのほとんどを占めています。天気予報アプリとフード トラック アプリを横に並べて使うことができます。
- 右: 狭いサイズでは、縦方向にパンして、他のコンテンツを表示します。これは、長い端に沿ってパンする操作の方がより自然であるためです。この動作は、同様に長い端に沿ったパンに最適化されている完全ビューでの横方向のパンとは異なります。
通知
永続的で動的な更新にタイルを使う
フード トラック Web サイトのユーザーは、自分の地域に出店した新しいフード トラックや場所を移動したフード トラックがないかどうかを調べるために、サイトを訪れ、ニュースやブログをチェックします。また、この Web サイトでは、フード トラックからのアナウンスを Facebook と Twitter を使ってフォローできるようになっています。しかし、そのためには、ユーザーは、Web サイトにアクセスして新着記事を見たり、更新情報を見るためにサインアップしたりする必要があります。更新情報に気付いたときにはもう遅いという場合もあります。
この機能を Windows ストア アプリに変換するにあたり、タイルとトースト通知を使って、ユーザーのニーズに合うようにカスタマイズされた最新情報を表示することにしました。スタート画面に表されるタイルは、Windows ストア アプリの入り口です。タイルには最新情報が反映され、それぞれのユーザーに合わせた新鮮なコンテンツが表示されるため、ユーザーがアプリをもっと有効に活用するようになります。このコンテンツは、アプリが実行されていないときでも表示されます。
Web サイト:
- Web サイトの最新ニュース セクションには、最新のトラックの出店場所が表示されます。
- Web サイトのブログでは、新しいトラックに関する情報と、特定の地域でのフード トラックの出店に関する情報がレポートされます。
Windows ストア アプリ:
- フード トラック アプリのメイン タイルには、ユーザーの近所に出店しているフード トラックと、トラックがその場所で営業する予定の期間が表示されます。タイルはフード トラック アプリが実行されていないときでも更新されるため、ユーザーはスタート画面から更新情報を受け取ることができます。
- 気に入ったトラック (たとえば、Cheeseburger Truck) をスタート画面のタイルとして固定すると、このトラックに関する最新ニュースを受け取ることができます。このように、ユーザーのニーズに合わせて高度にカスタマイズできます。アプリの設計者向けに多くのタイル テンプレートとサイズが用意されているため、簡単に実装できます。
一時的で重要な通知にトーストを使う
タイル通知に加え、トースト通知を使ってリアルタイムのイベントをユーザーに通知することもできます。Windows ストア アプリのトースト通知は、パッシブなタイル更新とは異なり、ユーザーの操作に割り込む形で重要な更新を表示します。トースト通知は、画面の右上隅に表示されますが、システムのどこにでも表示できます。一般的には、アプリの最初の実行時にユーザーが通知をオプトインする方法をお勧めします。また、必要に応じて、最新のトースト通知がまだ該当する場合はそのトースト通知をタイルに表示します。
例: ユーザーのお気に入りのフード トラックの場所が変わった場合
ユーザーは、[設定] ウィンドウを使って、お気に入りのフード トラックが出店場所を変えたときにそのトースト通知を受け取るように設定しています。
まとめ
既にある Web サイトに基づいて Windows ストア アプリを構築するときは、そのアプリでどのような機能を提供するかよく考えてください。答えが見つかったら、そのシナリオに合わせて Windows ストア アプリを最適化します。 クロムよりもコンテンツに重点を置くことを忘れないでください。共有、検索、設定などのシステムの組み込みのコマンドを使って、親しみのある直感的なメカニズムで共通の機能にアクセスするようにしてください。アプリ バーとセマンティック ズーム コントロールを使って、必要時以外はコマンドを非表示にしてください。ライブ タイルと通知を利用して、アプリが実行されていないときでもアプリから情報を得られるようにしてください。これらの注意点に従うことで、ユーザーに愛される魅力的な Windows ストア アプリを作ることができ、ビジネスの発展に役立てることができるでしょう。
執筆者紹介
Nicholas Huttema は、Plain Concepts 社のビジュアル/インタラクション デザイナーです。斬新な発想で、クリーンなユーザー インターフェイスを製作しています。ミシガンでの印刷デザイナーとしての仕事が、Nick の教育とキャリアの出発点でした。以降、ロサンゼルス地域とシアトル地域でさまざまな企業に勤めながら、UX 設計のスキルを習得してきました。これまで、Microsoft、Myspace、Amazon.com、Herman Miller など、さまざまな企業のために設計を行ってきました。趣味は、ハイキング、キャンプ、スノーボードなどのアウトドア スポーツです。 |
|
Qixing Zheng は、Microsoft Corporation のユーザー エクスペリエンス プログラム マネージャーです。Windows 8 ユーザー インターフェイスの開発チームの一員であり、設計者に Microsoft デザイン スタイルを理解してもらうためのサポートを提供しています。日常的に使うテクノロジのユーザー エクスペリエンスの改善に努力している人々を支援する業務に熱心に取り組んでいます。Qixing は、Windows チームに参加する前に、Microsoft Canada で最初の UX アドバイザーとして勤務し、Microsoft の UX に対する投資に関してさまざまな大学、デザイン コミュニティ、企業で講演を行ってきました。また、優れた設計者を発掘し、コミュニティで設計に関するアンケートを実施する仕事にも携わっていました。 |