設計のケース スタディ: iPad から Windows ランタイム アプリへ

iOS は、タッチ操作主体の楽しく魅力的なアプリを開発できる、人気の高いプラットフォームです。しかし、Windows 8 の登場により、設計者と開発者は、創造性を発揮できる新しいプラットフォームを利用できるようになりました。

このケース スタディでは、iOS を使い慣れた設計者と開発者が Windows ストア アプリの設計原則に従ってアプリを作り直す際に役立つ情報を提供します。具体的には、iPad アプリで使われる一般的なユーザー インターフェイスとエクスペリエンス パターンを Windows 8 の Windows ストア アプリに変換する方法を紹介します。ここでは、これまでの経験を活かして iPad 用と Windows 8 用に同じアプリを構築します。さらに、一般的な設計シナリオと開発シナリオを使って、Windows 8 プラットフォームを活用する方法や Windows ストア アプリの設計原則を取り入れる方法を示します。

Windows 8 のビジネス チャンスについては、「アプリの販売」をご覧ください。Windows ストア アプリを構築するための機能について詳しくは、開発者向け Windows 8 製品ガイドに関するページをご覧ください。

この記事をダウンロードする: この記事をダウンロードする場合は、この記事のオフライン版をご覧ください。

アプリ

ここでは、ユーザーがタイムライン ビューを使って写真や動画をオンラインで表示し管理できる接続型フォト ジャーナルを開発します。

このアプリは、最初に iPad 向けに開発されました。次の図に、iPad アプリの構造を示します。それでは、それぞれのコンポーネントを Microsoft デザイン言語に変換していきましょう。

1. レイアウトとナビゲーション

2. コマンドと操作

3. コントラクト: 検索、共有、その他

4. タッチ

5. 向きとビュー

6. 通知

レイアウトとナビゲーション

クロムよりもコンテンツを優先させる

フォト ジャーナル アプリには、ユーザーの写真とその写真に対する最近のソーシャル アクティビティを美しく表示する機能が必要です。この Windows ストア アプリを作るときの第一の目標は、アプリのコア機能に直接関係しないすべての UI 要素をなくすことでした。たとえば、上部ナビゲーション バー、改ページ調整コントロール、下部コントロール バーはすべてなくすことができます。 次のセクションでは、ユーザーが必要に応じてどのようにアプリ バーを使ってクロムを呼び出すかについて説明します。

iPad アプリ A.上部ナビゲーション バー B.アプリのコンテンツ C.改ページ調整 UI D.下部タブ バー	Windows ストア アプリ B.アプリのコンテンツとロゴ

 

例: ホーム画面のタイムライン ビュー

どちらのアプリでもホーム画面に写真が月ごとに整理されて表示されていますが、その表示方法は大きく違います。iPad バージョンのフォト ジャーナルでは、1 年の 12 か月をすべて表示するようにページが最適化されています。それぞれの月は、積み重ねられた写真の山のメタファーによって表されます。一方、Windows ストア アプリのホーム画面は、より多くの写真とソーシャル コンテンツをトップ レベルに配置し、ユーザーにより多くのコンテキストを提示できるように設計しました。写真の枠をなくし、代わりに空白を使って、アプリの主役である写真を視覚的に強調しました。

iPad: それぞれの月は積み重ねられた写真の山で表され、そのうちの 1 枚だけが表示されます。	Windows ストア アプリ: 月ごとに、複数の写真とそのタイトル、その写真に付けられたコメントの数が表示されます。ホーム画面上で、その月のハイライトとなるコンテンツがより多く表示されます。

 

ナビゲーション階層をフラットにする

Windows ストア アプリの設計では、階層型のナビゲーション パターンを使いました。アプリを設計し直すにあたり、アプリのハブ画面からより多くのコンテンツにアクセスできるようにナビゲーション階層をフラットにして、ナビゲーションの必要性を取り除きました。

例: 下部のタブ バーを削除する

iPad アプリ A.写真ビュー B.コメント ビュー 2 つのピボット (写真、コメント) を持つ下部タブ バーが画面に常に表示されます。一度に表示できるのはどちらか一方のビューのみです。

Windows ストア アプリ コメントと写真を 1 つのビューにまとめているため、タブ方式のユーザー インターフェイスを使う必要がありません。 ホーム画面のハブ設計は、各セクションの最も関連性の高いコンテンツを反映します。 すべてのコメントを表示するには、Recent comments というラベルのグループ ヘッダーをタップします。

 

直接操作を使ってナビゲートする

ユーザーはコンテンツを直接的に操作し、別の領域に自然に移動できます。Windows ストア アプリの設計では、セマンティック ズームなどの組み込みコントロールを使った直接的な操作をできる限り採用しました。その結果、効率の高いナビゲーションが実現しました。

iPad アプリ ホーム画面で、上部ナビゲーション バーにある [Years] ボタンをタップしてポップオーバーを呼び出し、年を選びます。	Windows ストア アプリ ホーム画面で、2 本の指を互いに近づけて縮小表示にすると、すべての月と年が表示されます。ユーザーは、どの年のどの月にでも簡単に移動できます。また、ユーザーは写真がある月とない月 (背景が薄い赤になっている月) を見分けることができます。ユーザーは、クロムを使ったり他のページに移動したりすることなく、すべてのコンテンツを表示できます。

 

アプリの最適なナビゲーション パターンの選択については、「ナビゲーション パターン」をご覧ください。

フラット ナビゲーション パターンの実際の使い方については、「アプリの機能の概要」シリーズをご覧ください。

コマンドと操作

アプリのコンテキストに依存する操作をアプリ バーに常に表示する

アプリのコンテキストに依存する操作やコマンドを設計し直すにあたっても、"クロムよりもコンテンツを優先させる"方針に従って、すべてのコンテキストに依存する操作をアプリ バー コントロールから利用できるようにしました。よく使うコマンドは左右の端に近い場所に配置して、簡単に手が届くようにしました。このようにして、すっきりとしたデザイン サーフェスが完成しました。どの画面を表示していても、画面の下部または上部からアプリ バーをスワイプするだけで、適切な操作を行うことができます。すべての Windows ストア アプリでは、アプリ バーをコマンド用に使うことができます。ユーザーがアプリ バーの対話式操作に慣れることで、ますますアプリが使いやすくなり、システム全体で一貫した使い心地を感じられるようになります。

例: 写真を削除する

iPad アプリ 選択モードに切り替えると、画面の上部にアプリ コマンドが表示されます。	Windows ストア アプリ A. イマーシブ エクスペリエンスを提供するために、アプリ バーは既定で表示されないように設定されています。アプリ バーを開くには、画面の下部または上部からスワイプします。 B.ページ上のオブジェクトを選ぶと、選んだ項目に対するコンテキストに依存する操作がバーに表示されます。 操作は、選択されているオブジェクトがあるかどうか、ユーザーがアプリのどの画面を開いているかに応じて変化します。通常は、グローバルなコマンドをアプリ バーの右側に配置します。使用頻度が高くないコマンドはアプリ バーの左側に配置します。

 

コントラクト

検索コントラクトを使って検索エクスペリエンスを一元化する

このアプリでは、アプリ キャンバスの一部として固定される検索入力インターフェイスを作る代わりに、検索コントラクトを実装しました。ユーザーはいつでもチャームから検索を起動でき、コンテンツに自然な形でアプリに結果を表示できます。検索コントラクトを使うと、ユーザーはシステムのどこからでも検索チャームを起動して、検索コントラクトをサポートするアプリからコンテンツを検索できます。

例: フォト ジャーナル アプリ内で写真を検索する

iPad アプリ 検索はアプリ内のホーム画面で実行できます。 ユーザーが入力した検索語句に対応する結果が表示され、その中から選ぶことができます。	Windows ストア アプリ ユーザーはチャーム バーを開き、検索チャームにアクセスします。現在フォト ジャーナル アプリを開いているため、フォト ジャーナル アプリが既定で選択されています。 入力を開始すると、検索候補がウィンドウに表示されます。このように、どの語句によって検索結果が生成されるかがすぐにわかります。ユーザーが検索語句を決定すると、検索結果ビューが表示され、ここから目的の結果を選ぶことができます。

 

例: フォト ジャーナル アプリの外部で写真を検索する (Windows ストア アプリでのみ可能)

この例では、検索ウィンドウで新しいアプリを選び、複数のアプリ間で語句を検索する方法を示します。この機能により、ユーザーは、あらゆるアプリのあらゆるコンテンツをいつでも検索できます。

Windows ストア アプリ Tweet@Rama アプリで "Barcelona" という語句を検索し、フォト ジャーナルを使ってバルセロナの写真を表示したいとします。 このとき、フォト ジャーナルは検索結果プロバイダーとなります。アプリが自動的に起動され、検索結果が表示されます。ユーザーは、検索を実行する前にフォト ジャーナル アプリを起動する必要はありません。

 

共有コントラクトを使って興味のあるたくさんの場所や人とつながる

ソーシャル メディアの統合は、ほとんどのアプリで重要となる要素です。iPad アプリを開発する場合、一般的には設計者と開発者が、アプリでサポートするソーシャル メディア チャネル (Twitter、Facebook など) を決めます。その後で、これらのサービスを個別に統合するか、いずれかのフレームワークを利用する必要があります。このような共有サービスの API が変更された場合には、共有サービスを継続して動作させるためにコードを更新する必要があります。

共有機能をこの Windows ストア アプリに適用するにあたり、システムの共有コントラクトを使いました。このコントラクトを使うと、ユーザーが使う可能性があるすべてのサービスに接続する必要性がなくなり、設計と開発が単純化されます。ユーザーはソーシャル ネットワークだけでなく、コンテンツを他のサービス (たとえば、Notespace、Evernote などのメモ帳アプリ) に保存することもできます。 コードを少し使うだけで、このアプリは、共有コントラクトが実装されているあらゆる Windows ストア アプリに接続されます。外部のソーシャル ネットワーキング サイトや Web サービスの API の変更に対応する必要はありません。ユーザーから見ると、チャームにアクセスし、[共有] ウィンドウを開くことで、いつでも同じ場所から共有できます。

例: フォト ジャーナルの写真を別のアプリと共有する

iPad iPad バージョンのフォト ジャーナル アプリから写真を共有するには、ユーザーは最初に上部ナビゲーション バーの操作ボタンをタップし、Facebook での共有を選びます。後から他のソーシャル ネットワーキング サービスとの統合を実装する場合は、開発者がコードを変更して、対応する共有ボタンを追加する必要があります。

Windows ストア アプリ 利用するアプリに関係なく、いつも同じ場所で共有オプションを見つけることができます。 共有ターゲットに指定されたインストール済みのアプリは、[共有] ウィンドウのアプリの一覧に表示されます。たとえば、Socialite、Tweet@Rama、Notespace、PaintPlay はすべて共有ターゲットです。 ユーザーは、さまざまな種類のコンテンツを共有できます。たとえば、リンクや写真を共有したり、メモ帳アプリに情報を保存したりできます。 最もよく使われる共有ターゲットは、共有操作をすばやく完了できるように、一覧の最上部に表示されます。

 

フォト ジャーナル アプリは、共有ソースでありながら、共有ターゲットにもなるように設計されています。別のアプリの写真をフォト ジャーナルの写真ストリームで簡単に共有できます。このつながりを可能にしているのは、やはり共有コントラクトです。優れた共有ターゲットとなるアプリについて詳しくは、「コンテンツの共有のガイドラインとチェック リスト」をご覧ください。

例: 別のアプリの写真をフォト ジャーナルと共有する - 共有ターゲット (Windows ストア アプリでのみ可能)

この例では、ユーザーが別の写真アプリを使ってメキシコ旅行の写真を見ています。このユーザーは、このアルバムの写真をフォト ジャーナル アプリのコレクションと共有して、これらの写真を簡単にタイムライン ビューで見ることができるようにしたいと考えました。そこでユーザーは、[共有] ウィンドウを開きます。フォト ジャーナル アプリが共有ターゲットの 1 つとして表示されたら、共有ワークフローを起動します。

 

ファイル ピッカーを使ってさまざまな場所からファイルにアクセスする

ファイル ピッカーは、ローカル PC、接続されている記憶装置、またはホームグループ上のファイルやフォルダーにアクセスするための全画面ダイアログです。ユーザーは、この機能を使って、ファイル ピッカー コントラクトに参加しているアプリの項目にアクセスすることもできます。

例: ローカル ファイル システムから写真をアップロードする

iPad アプリ iPad アプリでは、ローカルのフォト ライブラリといくつかのソーシャル ネットワーキング サービスの写真にアクセスできます。

Windows ストア アプリ A.アプリ バーの [Upload] ボタンをタップして、ファイル ピッカー UI を開きます。これは、ユーザーがファイルにアクセスするときに必ず表示される UI サーフェスです。 B.[ファイル] ヘッダーをタップするとすべての利用できるファイルの場所がポップアップで表示されるので、目的のファイル フォルダーに移動します。 C.ユーザーがフォルダー内で複数の写真を選ぶと、選ばれた写真を表すサムネイルの一覧が画面の左下に表示されます。

 

例: フォト ジャーナルの写真を別のアプリで使う (Windows ストア アプリでのみ可能)

Windows ストア アプリ独自の機能を利用して、別のアプリの中からフォト ジャーナルのフォト コンテンツを選択する機能も追加しました。 この機能により、ユーザーはフォト ジャーナルからローカル ファイル システムに写真をダウンロードした後で別のアプリに写真をアップロードするという手順を踏む必要がなくなりました。 フォト ジャーナルにはファイル ピッカー コントラクトが実装されているため、システムからはファイルの保存場所として認識されます。

Windows ストア アプリ ユーザーがアカウントの写真をカスタマイズするために、[PC 設定] 画面で [参照] をタップしています。フォト ジャーナルにはファイル ピッカー コントラクトが実装されているため、ユーザーは、ファイル ディレクトリ内でこのアプリにアクセスできます。 そこで、ユーザーは、フォト ジャーナル コレクションに保存されている写真を選ぶことができます。

 

タッチ

アプリ コマンドとシステム コマンドにアクセスするための画面の端のスワイプ

Windows 8 では、画面の端からスワイプすると、コマンドにアクセスしたり、アプリを切り替えたりできます。

• 画面の上端または下端からスワイプすると、アプリ コマンドが表示されます。アプリ バーは、必ずアプリ コマンドを表示するために使う必要があります。
• 画面の右端からスワイプすると、システム コマンドが含まれたチャームが表示されます。
• 左端からスワイプすると、前に使ったアプリに切り替わります。
• 画面の上端から下端へスワイプすると、アプリをドッキングしたり、閉じたりできます。

例: Windows ストア アプリでアプリ バーとチャームにアクセスする

画面の上端または下端からスワイプすると、アプリ コマンドにアクセスできます。	画面の右端からスワイプすると、システム コマンド (検索、共有、スタート、デバイス、設定) が含まれたチャームが表示されます。

 

クロススライドによるオブジェクトの選択

Windows 8 では、パン方向に対して垂直方向に指を少しスライドさせて、一覧またはグリッドの中のオブジェクトを選ぶことができます。オブジェクトを選ぶと、自動的にアプリ バーに適切なコマンドが表示されます。

例: 削除対象の複数の写真を選ぶ

iPad アプリ 選択操作やその他の編集操作を実行するために、特定の編集モードに切り替えます。これは、タップが起動などのプライマリ操作用に予約されているためです。 ユーザーは、作業が完了したら編集モードを終了します。	Windows ストア アプリ ユーザーは、オブジェクトを下にスワイプしてオブジェクトを選択します。すると、コンテキストに応じたコマンドがアプリ バーに自動的に表示されます。 ユーザーは、別のモードで作業することなく、オブジェクトに対してタップ操作と選択操作を行うことができます。 このジェスチャは元に戻すことができるため、Windows 8 アプリでより効率的にオブジェクトを選ぶことができます。

 

ピンチとストレッチによるセマンティック ズーム

ピンチ ジェスチャとストレッチ ジェスチャは iPad アプリと Windows ストア アプリの両方で一般的にサイズ変更に使われますが、Windows 8 では、セマンティック ズームを使ってコンテンツ内の先頭、末尾、または任意の場所に移動することができます。セマンティック ズームを使うと、関連するグループ内のデータを縮小表示し、それにすばやく戻ることができます。この種の対話式操作には、多数のコンテンツを閲覧するためのナビゲーションを用意するのではなく、できる限りセマンティック ズームを使ってください。もちろん、全画面表示モードで写真を表示しているときは、ピンチ操作とストレッチ操作を光学式ズームに使うことができます。

例: ホーム画面と月スポーク ページでのセマンティック ズーム

Windows ストア アプリ A.ホーム画面でセマンティック ズームを使うと、任意の年の特定の月にすばやくジャンプできます。 B.月ビューのスポーク ページでセマンティック ズームを使うと、特定の日付にジャンプした後、その年の写真の数を示すインフォグラフィックが表示されます。

 

向きと画面のサイズ

適応するレイアウトを設計する

iPad アプリの画面サイズと解像度は固定されており、設計者が考慮する必要があるのは 2 つの向きです。 Windows 8 は、ポータブル タブレットからオールインワン型デスクトップまでのさまざまなフォーム ファクターで動作します。そのため、広い画面スペースを使ってより多くのコンテンツを表示できます。フォト ジャーナル アプリを設計し直すにあたり、画面解像度とデバイス サイズを考慮しながら、2 つのデバイスの向きに対してアプリをどのような外観にするかを検討しました。グリッド レイアウトにすることで、縦長レイアウト画面と高解像度画面のどちらにもデザインを簡単に合わせることができます。たとえば、縦方向のスペースをより多く利用できるときは、それぞれの月でより多くのハイライト写真を含めることができます。

例: 横方向の画面、縦方向の画面、大画面でのホーム画面のデザイン (Windows ストア アプリのみ)

iPad アプリ 横長レイアウトと縦長レイアウトで同じコンテンツが表示されます。コンテンツは、縦長レイアウトで再配置されます。

Windows ストア アプリ 縦長レイアウトと大きな画面では、追加のスペースを使ってハブ ページの各セクションにより多くのコンテンツが表示されます。 iOS の Retina ディスプレイ用に画像を作る場合と同様に、Windows のさまざまなスケールの割合 (100%、140%、180%) に合わせて複数の画像を用意しました。HD タブレットでは、これらの画像が自動的に読み込まれます。

 

狭い幅を使ってユーザーの関心を集める

Windows 8 では、画面上に複数のアプリを並べて配置することで、マルチタスク動作を実現できます。 狭い幅で正しく動作するようにアプリを設計することは、アプリが画面に表示されている時間を長くし、より長くユーザーの関心を集めておくのに効果的な方法です。2 つのアプリの間にある区切り線を操作するとアプリのサイズを簡単に変更できるため、サイズが変更された後もコンテキストを保つことが重要になります。アプリのサイズを変更した結果としてアプリの状態が失われることがないようにする必要があります。

サイズ変更について詳しくは、「ウィンドウ サイズと画面に合わせたスケーリングのガイドライン」と「縦長で幅の狭いレイアウトに対するウィンドウ サイズの変更のガイドライン」をご覧ください。

例: 狭い幅のホーム画面

Windows ストア アプリ ホーム画面が狭い幅にサイズ変更されても、ユーザーは引き続き同じコンテンツにアクセスできます。 縦長で幅が狭い場合は、縦方向にパンして、他のコンテンツを表示します。これは、長い端に沿ってパンする操作の方がより自然であるためです。この動作は、同様に長い端に沿ったパンに最適化されている完全ビューでの横方向のパンとは異なります。

 

通知

永続的で動的な更新にタイルを使う

iOS 5 では、通知センターが導入されました。新しい通知は画面の上部に表示され、上端からスワイプするとセンター内のすべてのメッセージを表示することができます。これに加え、iOS スプリングボードのアプリ アイコンには、新しいメッセージがあることを示す数字バッジが表示されます。Windows 8 のスタート画面のタイルには、アプリ アイコンの数字バッジと iPad の通知センターの両方の機能が取り入れられています。ユーザーは、アプリを起動する操作と通知を読む操作を 1 か所で行うことができます。加えて、書式が固定されている iOS の通知とは異なり、Windows ストア アプリのタイルには 3 つの正方形サイズと 1 つのワイド サイズがあり、テンプレートも豊富に用意されているので、その中から自由に選ぶことができます。

例: ホーム画面の通知

iPad A.iPad スプリングボード上の数字バッジ付きのアプリ アイコン B.通知センターに表示されたフォト ジャーナルの通知	Windows 8 C.スタート画面のタイルには、数字バッジと通知が表示されます。さまざまなタイル テンプレートが用意されています。

 

一時的で重要な通知にトーストを使う

トースト通知を使うと、イベントをリアルタイムで通知できます。Windows ストア アプリのトースト通知は、パッシブなタイル更新とは異なり、ユーザーの操作に割り込む形で重要な更新を表示します。トースト通知は、画面の右上隅に表示されますが、システムのどこにでも表示できます。一般的には、アプリの最初の実行時にユーザーが通知をオプトインする方法をお勧めします。また、必要に応じて、最新のトースト通知がまだ該当する場合はそのトースト通知をタイルに表示します。トーストは、画面の上部にバナーとして表示される iOS の一時的なアラートと似ています。しかし、トースト通知は、トースト テンプレートのコレクションからより適切な通知を選ぶことができます。

例: ユーザーが家族からコメントを受け取ったときに、フォト ジャーナルでユーザーに対して通知が行われる

ユーザーが、家族がアプリの写真にコメントしたときにトースト通知を受け取るように設定しています。

 

執筆者紹介

	Bart Claeys は、Ratio Interactive 社のリード ユーザー エクスペリエンス デザイナーで、Web アプリとモバイル アプリ向けの UI/UX を専門としています。以前に所属していた Saatchi & Saatchi Brussels 社では、インタラクティブ アート ディレクターとして、トヨタ、ソニー、その他の世界的ないくつかのブランドのインタラクティブ キャンペーンを製作しました。Bart は、製品開発の分野で修士号を取得し、ブランド管理に関して追加のトレーニングを受けています。ベルギーの大手クリエイティブ人材求人情報サイトである、Creativeskills.be の創設者でもあります。2006 年には、フランデレン地域政府が起業家を支援するために設立した "You are Flanders future" 賞を受賞しました。
	Qixing Zheng は、Microsoft Corporation のユーザー エクスペリエンス プログラム マネージャーです。Windows 8 ユーザー インターフェイスの開発チームの一員であり、設計者に Microsoft デザイン言語を理解してもらうためのサポートを提供しています。日常的に使うテクノロジのユーザー エクスペリエンスの改善に努力している人々を支援する業務に熱心に取り組んでいます。Qixing は、Windows チームに参加する前に、Microsoft Canada で最初の UX アドバイザーとして勤務し、Microsoft の UX に対する投資に関してさまざまな大学、デザイン コミュニティ、企業で講演を行ってきました。また、優れた設計者を発掘し、コミュニティで設計に関するアンケートを実施する仕事にも携わっていました。

 

関連トピック

Windows 8 での iOS アプリ設計の再作成

iOS 開発者向けリソース