//build/ カンファレンス、Store Preview イベント、そして先週の CES と続いた、ここ最近のイベントで Store のエクスペリエンスの一端をご披露しました。そこで、このタイミングで、カタログの閲覧と検索、および Windows 8 でのアプリの更新とローミングについて Store のカスタマー エクスペリエンスの全容をお伝えしておくとお役に立つのではないかと考えました。今回の記事では、Store クライアント チームのプログラム マネージャーである Jonathan Wang が、Store の構成要素と設計上の指針について説明します。

-- Antoine


Windows Store の設計を始めるにあたって、Store の最終的なエクスペリエンスに至るまでの指針となった、さまざまな設計上の目標と原則がありました。Store を設計するうえで基本としたのは、アプリを簡単に見つけ、すぐに入手できるようにすることでした。これはカタログや市場では当然とも言える目標ですが、Windows Store で予想されるような速さで、カタログのサイズやバラエティが増える場合は非常に困難です。

この記事では、Store の主な構成要素をすべて紹介します。具体的には、ランディング ページ、エディトリアル トピック ページ、データ生成リスト、アプリの内容ページ、および検索、閲覧、インストール、更新のエクスペリエンスについて説明します。効率よくアプリを見つけられるという目標を達成するために、これらの UI 領域で Windows Metro スタイルの設計言語がどのように適用されているかについて説明します。

Store の構成図。Store のランディング ページは、エディトリアル ページ、アプリの説明ページ、カテゴリ ページにリンクしている。また、エディトリアル ページとカテゴリ ページも、アプリの説明ページにリンクしている。 Windows Store の構成

見つけやすさを重視したランディング ページ

以前のブログ記事で、見つけやすさを重視した設計が、Store の主要な設計上の原則の 1 つであることをお話しました。私たちは、クロムを目立たせず、コンテンツを主役にするという考えを基に、Windows 8 を開発しました。Store のランディング ページでは、クロムの使用を最小限に抑えることでアプリが前面に押し出され、アプリのブランドと持ち味によってユーザーの興味を引き付けられるようにしています。

Store ページ / Evernote、Cut the Rope、eBay、Paintplay アプリと、お勧めのアプリについてのエディトリアル コンテンツを表示するスポットライト カテゴリ、およびお勧めのゲームについてのエディトリアル コンテンツと 2 つのゲーム アプリを表示するゲーム カテゴリ
Windows Store ランディング ページ

Store のランディング ページでは、新しい刺激的なコンテンツを次々に取り上げ、内容を頻繁に更新して、ユーザーが Store には必ず何か新しい情報があると期待するようにします。ランディング ページには、ピックアップ コンテンツと、ナビゲーション可能なコンテンツ (カテゴリやピックアップ アプリのリストなど) が併せて表示されます。マイクロソフトのユーザビリティ ラボの調査とユーザーとの個別のインタビューから、現在のアプリ ストアでは、ほとんどの閲覧エクスペリエンスに訴求力がないために、ユーザーは必要とするものしか検索しない傾向が強いことがわかりました。そこで、ピックアップ コンテンツ、データ ドリブンなリスト、カテゴリ別のリストを 1 つにまとめて、内容の濃い、魅力ある閲覧エクスペリエンスを実現するランディング ページを設計しました。

ナビゲーションはシンプルで、Windows 8 Metro スタイルの UI との整合性が取れているため、Windows 8 のユーザーであれば抵抗なく、簡単に Store を操作できるでしょう。画面上部には、Store のカテゴリ (英語) が横一列に並び、カテゴリごとにお勧めのピックアップ アプリが表示されます。閲覧は、パン操作で画面を左右に移動するだけです。指先 1 つで驚くほど簡単に、すべてのカテゴリの新着アプリや面白そうなアプリをチェックでき、Store の全体像を把握できます。また、面白そうなカテゴリがあったら、カテゴリ名を 1 回タップするだけで、特定のカテゴリのアプリ ページに移動できます。

Store のカテゴリの横長のビュー: スポットライト、ゲーム、エンターテイメント、写真、音楽 & ビデオ、本 & 辞書、ニュース & 天気、ライフスタイルなどのカテゴリがある他のカテゴリを表示するには水平方向にスクロールする (クリックすると大きな画像が表示されます)

Store の新しいカテゴリの多くでは、Store のプラットフォームを活用できているか、Metro スタイルの設計原則 (英語) に忠実に従っているかなど、さまざまな要素を基に編集上選ばれたアプリがピックアップ アプリとして表示されます。ピックアップしたい複数のアプリを結び付ける特定のテーマがある場合は、それらのアプリを紹介する特別な "トピック" ページを設け、ランディング ページにこのページへのリンクを用意します。また、最も人気のあるアプリや、各カテゴリで最も質が高いと思われるアプリのピックアップ リストも表示されます。高品質のアプリを提供すると定評がある開発者が作成したアプリと併せて、勢いがある "注目株" の開発者のアプリも取り上げられる予定です。また、ユーザーの過去の購入履歴に基づいたお勧めのアプリも表示されます。

Store のカテゴリの全体像をつかみたい場合は、ピンチのジェスチャを使ってズームアウトしてカテゴリの種類を確認できます。また、Store で提供されるアプリの種類を詳しく知りたい場合は、タップして特定のカテゴリに移動できます。このジェスチャは、スタート画面でも使用できます。このジェスチャは、ズームインまたはズームアウトして、ページに表示される情報の詳細度を上げたり下げたりできるため、"セマンティック ズーム" と呼ばれます。Store のビューをズーム アウトすると、アプリの全カテゴリを 1 度に表示できるので、カタログが大きくて、さまざまなカテゴリを扱っている場合でも、ユーザーは効率よくナビゲーションできます。このデザインにより、カタログやカテゴリが拡張された場合でも、効率よくナビゲーションすることができます。Store のランディング ページは、標準の ListView コントロール (英語) と、セマンティック ズーム コントロール (英語) を使用して作成されています。セマンティック ズーム コントロールは、HTML と JavaScript を使って Metro スタイル アプリを開発する場合に利用できます。

スポットライト、ゲーム、エンターテイメント、写真、音楽、エンターテイメントのカテゴリが表示された Store のランディング ページ ズーム アウトしてより多くのカテゴリを表示できる

カテゴリの数が多い場合、Store のフラットなナビゲーション構造は、ズームを利用することで格段に使いやすくなります。フラットなナビゲーション構造は Windows 8 の Metro スタイルのユーザー エクスペリエンスをデザイン (英語) するうえで、軸となるアーキテクチャ上の要素の 1 つです。

Store の検索と閲覧

検索は、ユーザー インターフェイスの非常に重要な要素になっていて、現在、ユーザーがオンライン ストアで購入する商品を見つける最も一般的な手段の 1 つでもあります。Windows Store には、どのアプリを使用していても、検索チャームをタップすることで検索を実行できる検索コントラクト (英語) が実装されています。これにより、Store アプリが既に開かれている場合に、新しいアプリを簡単に検索できるだけでなく、Store 自体を起動しなくても、簡単に Store を検索できるようにしています。

天気予報アプリのビュー。Store で「sudoku」を検索するように指定した検索ウィンドウが右側に表示されている。Windows のどこからでもアプリを検索できる

Web の閲覧中やアプリの使用中に、ある特定のアプリのことを思いついたら、検索チャームをタップして、検索語句を入力し、Store を選択するだけで、指定した条件の検索結果が表示されます。

検索の UI は Store と同じであるため、同じ操作で同じ機能を利用できます。

Store のホーム ページ。Store で「intern apps」を検索するように指定した検索ウィンドウが右側に表示されている。
Store で検索機能を使用する

入力を始めると、語句の候補が直ちに検索ウィンドウに表示されます。これは入力の手間が省かれて便利ですが、特にタッチ キーボードを使う場合に役立ちます。語句の候補の 1 つがアプリだった場合、該当するアプリは "お勧め" の検索結果として表示されます。この表示結果をタップすると直接アプリの内容ページに移動できます。つまり、最初に検索結果のページに移動する必要がなく、ユーザーがアプリの内容ページにアクセスするまでのステップが最小限で済んでいます。検索でお勧めアプリが表示された場合は、アプリのブランド アイコンも表示されるので、すぐにアプリを見分けられます。

特定のアプリを想定せずに一般的な検索語句を入力した場合は、検索結果ページが表示されます。

10 個のアプリが表示された「intern apps」の検索結果 検索結果ページ

このページから、結果内容をまとめて確認できます。検索結果は、最初は関連度の高い順に表示されますが、価格順、ユーザー評価の平均値の高い順、リリース日順など、別の属性を基に並べ替えることもできます。結果を絞り込むには、カテゴリまたは価格によってフィルターを適用できます。

Store のカテゴリ ビューにも同じデザイン モデルを使用しています。この場合も、ステップを最小限に抑えた効率的なエクスペリエンスを提供することで、"見つけやすさ" を高めています。ランディング ページでカテゴリの見出しをタップすると、カテゴリ ページの 1 つにアクセスできます。このようなビューなら、気軽にカタログ内の詳細情報を閲覧できます。カテゴリ ページを検索結果ページと非常によく似た設計にすることで、検索結果ページと同じ高度なフィルタリング オプションと並べ替えオプションを提供しています。また、ランディング ページや検索 UI と同様に、カテゴリ内のナビゲーションもとてもシンプルです。ページの切り替えはなく、スクロールするだけでアプリを次々に表示できます。

28 個のアプリが表示されているゲーム カテゴリ。フィルターには、[すべての価格]、[無料]、[無料またはお試し版]、[有料] がある。
カテゴリ ページ

アプリの内容ページ

アプリの内容ページは、ユーザーがアプリについて知りたいすべての情報を参照できる場所です (開発者にとっては、アプリの長所をアピールし、ユーザーにアプリを訴求できる場でもあります)。

Cut the Rope / Store > [ゲーム] > [パズル] / ***** [平均評価] (1023) / $1.49 / ボタン: [購入] / [試す] / アプリのイメージと詳細
アプリのブランドをアピールできるアプリの内容ページ

アプリの持ち味が伝わるように、アプリのパッケージのビジュアル要素を使って、アプリのブランド カラーとロゴがアプリの内容ページに適用されます。アプリの説明や機能の一覧のほかに、ユーザー評価の平均値やユーザーが書き込んだレビューを参考にして、アプリの質やアプリが自分のニーズに合うかどうかを判断できるようになる予定です。また、スクリーンショットは、FlipView オブジェクト コントロール (英語) を使って実装されていて、フリップ表示することができます。このコントロールも開発にお使いいただけます。多くのユーザーにとって、視覚的な要素は、アプリケーションについての情報が得られる最も効果的な手段であるため、スクリーンショットはひときわ目立つ場所に配置されます。アプリの内容ページには、対象ユーザーの年齢制限、および位置センサーやドキュメント ライブラリへのアクセス権などの、必要なアプリの権限も表示されます。

マイクロソフトのデスクトップ アプリ認定 (英語) に合格したデスクトップ アプリも、アプリの内容ページを設けることができます。このようなアプリの内容ページは、検索や閲覧によって Store から見つけることができます。また、アプリの開発者の Web サイトへのリンクも記載され、ユーザーがリンク先のサイトからアプリを購入できます。

Contoso / [アプリを開発者から入手してください] / [開発者の Web サイトに移動] (リンク) / アプリの概要
デスクトップ アプリの内容ページ

アプリのインストール

Windows 8 でのアプリのインストールは、シンプルで高速なうえ、信頼性もあります。

Windows Store にサインインしている場合、無料の試用版アプリについては、アプリの内容ページを 1 回タップするだけでインストールできます。実に簡単です。有料アプリの場合は、購入の確認のため、パスワードを入力する必要があります。購入するたびにパスワードを入力したくない場合は、このセキュリティ対策のステップを無効にする設定があります。ただし、お子様がいるユーザーにとっては、意図しない購入を防ぐために、このちょっとしたステップが役に立つのではないでしょうか。

私たちはアプリを見つけやすくすることが非常に大切だと考えているため、アプリのインストールが始まったとたんに、それまでのユーザーの操作の流れがまったく別の内容に切り替わるような動作は避けるべきだと判断しました。たとえば、進行状況バーで 1 秒ずつ残り時間が減っていくようすをユーザーが眺めるような動作は、ふさわしいとは思いません。また、入手したばかりのアプリの内容ページが表示されたままで、ユーザーが何の操作もできず手持ちぶさたになる状況も好ましくありません。そこで、Store ではインストールが開始されたらすぐに、直前に表示されていたページに戻り、ユーザーが買い物を続けられるようにしています。多くの場合、ランディング ページかカテゴリ ページ、または直前に表示していた、試してみたいすばらしいアプリの別のリストに戻ることになるでしょう。マイクロソフトのラボで調査したところ、あるアプリを入手したら、続けて他のアプリを検索できるという一連の動作はユーザーに好評でした。

ただし、インストールの進行状況をインジケーターで確認できることに変わりはなく、また、インストール中のアプリのタイルが、スタート画面に追加されます。インストールの進行状況を詳しく確認したい場合は、インジケーターをタップすると詳細を表示できます。

4 つのアプリが表示されたインストールの詳細ページ。アプリごとに進行状況バーと "ダウンロード中..." のメッセージが表示される
インストール中のアプリの表示

インストールが完了すると、完了通知が表示され、アプリが使用できる状態になったことが示されます。この通知をタップするとアプリが起動するので、アプリが使用可能になったらすぐに使い始めることができます。新しいアプリのタイルは常にスタート画面の最後に表示されますが、この位置から任意の場所に簡単に移動できます。スタート画面でアプリをどのように整理するかは、ユーザーのお好みしだいです。

アプリの更新

また、更新も簡単で予測のつくエクスペリエンスになるようにしました。インストール済みのアプリの更新プログラムの有無が、1 日に 1 度 Store によって確認されます。更新があれば、提供されている更新プログラムの数が Store のタイルに表示されるので、Store に何かダウンロードすべきものがあるとユーザーがすぐに認識できます。

更新ページにアクセスしたら、1 つのボタンをタップするだけですべてのアプリが更新されます。すべての更新プログラムが、自動的に選択されます。開発元から更新プログラムが提供されたら、速やかにすべてのアプリを更新することをお勧めします。

[アプリの更新プログラム] / [利用できる更新プログラムが 8 個あります。] アプリの更新プログラムは、すばやく簡単にインストールできる

更新プログラムは、非常にすばやくインストールされます。Store では、タイミングを計って、コンピューターがアイドル状態のときに、バックグラウンドで更新プログラムがダウンロードされます (インストールはされません)。また、データ使用料がかかるモバイル ブロードバンド ネットワークが使われている場合は、ダウンロードは実行されません。もちろん、自動的に更新プログラムをダウンロードしたくない場合は、Store の設定でこの動作を無効にできます。更新プロセスが始まると、Store で直前に表示されていたページに戻ります。更新プログラムのインストール中も、新しい興味深いコンテンツをお楽しみいただけます。

アプリの再入手

複数の PC をお持ちの場合、すべての PC にアプリをインストールしたいとお考えになるでしょう。そこで、最高で 5 台の Windows 8 PC にアプリを簡単にインストールして実行できるようにしました。新しいデバイスにアプリをインストールすると、アプリの実行を許可するデバイスのリストに、そのデバイスが追加されます。6 台目のデバイスにアプリをインストールしようとした場合、他のいずれかのデバイスからアプリを削除するように求められます。

[アプリ] / 9 個のアプリが表示されている入手したすべてのアプリを参照して、再インストールできる

また、特定のデバイスにインストールされているアプリを基に、すばやくフィルタリングすることもできます。これによって、あるデバイスにインストールしているアプリを、簡単に別のデバイスにインストールできます。実際、このようなアプリにローミングが実装されていて、ネットワーク アカウントをお使い (Windows Live ID を使用して Windows 8 にサインインしている) 場合、各アプリの設定や状態も複数のデバイス間で維持されます。

2 つのデザインを両立

Windows Store をデザインするにあたって、キュレーションによるコンテンツを使って偶然アプリを見つけられる確率が高いデザインと、ユーザー自身が探しているアプリを直接見つけやすいデザインを両立させるようにしました。各アプリのブランド アイコンやブランド カラーをアプリの内容ページで目立つようにし、アプリそのものにも注目を集めやすくすることで、ユーザーを引き付ける努力をしました。アプリの検索も、インストールも、更新も、できる限りシンプルですばやく実行できるようにデザインされています。アプリを見つけることがユーザーにとってかつてないほど簡単になるため、新しい Windows Store は開発者にとって今までで最大のチャンスを提供できると考えています。

Jonathan J. Wang


ビデオをダウンロードしてお好みのメディア プレーヤーで再生することができます:
高画質 MP4 | 低画質 MP4