エクスポート (0) 印刷
すべて展開

Windows Phone アプリのデザインの実装

2013/12/05

対象: Windows Phone 8 | Windows Phone OS 7.1

 

このトピックには、Windows Phone プラットフォームと調和した外観と使い心地のアプリをデザインするための重要な情報が記載されています。このようなデザイン プロセスに関するトピックで紹介するデザインの原則と戦略は、進化する Windows Phone Store でアプリを目立たせるための鍵となります。原則や戦略に従うことで、反復の際に見つかったユーザビリティの問題も解決しやすくなります。優れたデザインは良いカスタマー エクスペリエンスとレビューを生み出します。これは、競合他社のアプリから突出するために不可欠です。

ブレインストーミングとプランニングについては、「Windows Phone のアプリ概念」を参照してください。

このトピックは、次のセクションで構成されています。

 

プロトタイプのデザインでは、これまでのブレインストーミングの結果を 1 つにまとめる作業を行います。このセクションでは、アプリケーションの外観のモックアップをスケッチする方法と、モックアップを使用してデザインの主要ポイントをテストする方法を説明します。

メモメモ:

プロトタイプ作りは、品質向上だけでなく、時間の節約やフラストレーションの軽減にも役立ちます。このセクションのアドバイスに従うことで、より優れたアプリをより短い時間で開発することができます。

Blend for Visual Studio は、現実的なプロトタイプを短時間で行うのに役立ちます。Blend を使用すると、モックアップをスケッチして、インタラクティブなプロトタイプを作成できます。インタラクティブなプロトタイプは、カスタム UI、アニメーション、または遷移を必要とするアプリの領域について、ユーザーに使用感を伝えるために役に立ちます。このやり取りは、多くの場合にアプリの成功にとって不可欠であり、ユーザビリティ テストでユーザーにそれを "感じて" もらうことができます。Blend を使用すると、プロトタイプから実際の製品版デザインを直接作ることもできます。Blend の詳細については、Microsoft Expression のホームページを参照してください。

Microsoft Visual Studio 2012 で使用可能な PowerPoint ストーリーボードは、スケッチに使用できるもう 1 つのツールです。このツールを使用すると、定義済みのストーリーボード形状のコレクションからストーリーボードを構築し、既存のユーザー インターフェイスをキャプチャすることができます。詳細については、「PowerPoint を使用したユーザー ストーリーまたは要件のストーリーボーディング」を参照してください。

コンセプトのスケッチ

このセクションでは、アプリのモックアップの作り方を説明します。

プロトタイプ作りの第一段階は紙とペンで行い、その後すぐに PC でのスケッチに移行します。モバイル デバイス用アプリのスケッチは、デスクトップ ソフトウェアのスケッチとは異なります。モバイル デバイス用アプリのナビゲーション階層は浅く、範囲も狭いので、ストーリーボードはあまり有用ではありません。モバイル UI の課題は、操作手順やデータを直感的かつ動的な方法で示すことです。

デザインするアプリに専門的なタスクが含まれる場合は、それらをできるだけ少ない手順で簡単に実行できるよう、個別にストーリーボードを作成します。以下の図は、一般的なストリーミング ラジオ アプリのプロトタイプ スケッチです。

  1. まず、ユーザーが最も頻繁に見たり使ったりする静止画面をスケッチします。例として、ストリーミング ラジオ アプリの初期スケッチを以下に示します。これは、ホーム画面、カテゴリ、アーティスト情報画面、お気に入りステーションのリストなどのモックアップです。

    UX_AppDesign_MainScreens

    メイン画面

  2. アプリで何らかの進行中画面を表示する場合は、それらの外観もスケッチします。たとえば音楽再生アプリの場合は、設定画面やスプラッシュ スクリーンなどです。

    UX_AppDesign_States

    進行中画面

  3. カスタマイズする重要なコントロールをすべてスケッチします。カスタム コントロールを使用していかに画面の構成を単純化できるかを考えてください。以下のモックアップには、詳細な再生用コントロールと、コントロールを含む特別な横向きビューが示されています。

    UX_AppDesign_ImportantControls

    重要なコントロール

  4. 次に、いくつかの画面を組み合わせて、タスクを実行するための一連の手順を決定します。重要なタスクや操作を実行するためにユーザーが行う必要のある手順を計画します。タスクの各手順で使用する静止画面を、表示される順に並べます。以下の図は、アーティスト情報を表示するための検索操作の流れを示したモックアップです。

    UX_AppDesign_Search

    一般的な検索タスク

    この作業を実行するには、まずユーザーがアプリで実行すべきタスクをリストアップします。たとえば、音楽ジャンルの検索や、お気に入りリストへの新しいステーションの追加などです。その後、それらタスクのマップを作成します。このマップは、特定のタスクを実行するために各画面を通過していく経路を示します。

  5. アプリの各部で使用される全静止画面の関係をすべてスケッチしてください。特定のタスクに関連した画面では、タスクの進行が実感できるような外観と動作を示すよう心がけてください。以下の図に、単純なストリーミング ラジオ アプリの完全な情報アーキテクチャ マップを示します。

    UX_AppDesign_Map

    マスター マップ

    マスター マップはタスク マップとは異なります。マスター マップは静的であり、特定のタスク手順の流れを示すのでなく、すべての画面とそれらの階層関係のみを示します。先に示した例では、ホーム画面から、お気に入り、カテゴリ、検索結果画面に移動できることがわかります。

    このようなスケッチが完了したら、Blend で新しいプロジェクトを開き、プロトタイプの作成を開始します。

    メモメモ:

    Blend でプロトタイプを作成すると、必要な XAML コードが自動的に追加されます。繰り返すたびに実際に動作するコントロールとスタイルが自動的に作成されるので、互換性の問題を心配する必要がありません。また、Blend を使うことで、モックアップに最適な機能を最終的なデザインに完全に再現することができます。

プロトタイプまたはモックアップの主要エリアを特定する

モバイル アプリのプロトタイプは、中心となるエリアを特定することで効率的に作成できます。一般に、アプリのすべての部分の詳細なプロトタイプを作成する必要はありません。最も重要な部分や最も難しい部分に焦点を当てて作業を行います。特に、新しいテクノロジや新しい機能、または開発チームの通常の専門分野でカバーされない部分を優先します。

つまり、重要なのは、ユーザーに価値を提供するタスクや操作のモックアップです。アプリの目的の説明書について熟考し、どのように動作させたいか構想した内容に沿って一段階ずつプロトタイプを作成し、カスタム コントロールによって手順を省略したり高速化できそうな部分をメモします。

一般に、Web やその他のプラットフォームから Windows Phone にアプリを移植する際には、画面に表示するコントロールやグラフィックの数を少なくしたり、全体にすっきりさせる必要があります。また Web では多くのコントロールを大きなグループに入れ子にできるのに対し、Windows Phone では、理論的に構成したカテゴリごとの画面に分散させる必要があります。アプリで表示するグラフィック、コンテンツ、写真を拡大する必要性について十分に検討してください。また、できるだけネイティブのコントロールを使用し、WebBrowser コントロールはなるべく使用しないでください。

事前に現実的な反復回数を決めてください。

プロトタイプの詳細レベルを決定する

プロトタイプを迅速に作成してなるべく早く構築に移れるよう、反復の際にアプリの中で優先度を高くする要素を決定します。そのためには、アプリの以下の部分についてどの程度詳細にプロトタイプを作成するか決定する必要があります。

  • ビジュアルの詳細レベル

    このアプリにとってアートワークや外観が最優先要素である場合は、機能、画面、状態などのグラフィックを詳細にデザインしておく必要があります。また、カスタム コントロールとそれらの状態もモックアップします。

    メモメモ:

    Blend を使ってカスタム コントロールをモックアップすることにより、XAML での機能性を確実にすることができます。

    詳細なビジュアル モックアップの要素

    1. スタイルとテーマ

    2. スプラッシュ スクリーン

    3. アプリのタイル

  • 機能の詳細レベル

    機能性がアプリの最も重要な要素である場合は、ある程度動作可能でインタラクティブなプロトタイプを構築します。1 つまたは複数の静止画面から始めて、それらの間の相互作用を 1 つずつ構築していきます。機能を効率化し、コントロールや入力の必要性を減らせないかどうか検討してください。

  • コンテンツの詳細レベル

    コンテンツが最も重要となるアプリの場合は、UI 構築の際に、最も正確なプレースホルダーを作成する方法を決定する必要があります。コンテンツがテキストなら文字体裁に細心の注意をはらい、コンテンツが表示される部分に、ブロックなどの抽象的な要素でなく実際にテキストを表示してみます。

    コンテンツがビジュアル メディアの場合は、プロトタイプ作成にも紙とペンを使った作業を加える必要があるかもしれません。アプリのコンテンツが再生される際にどのように表示されるかを、横向き縦向き両方を使用して詳細にスケッチします。向きが変わる際にコントロールをカスタマイズするか、またはレイアウトを変更するかなどを検討してください。

    アプリをローカライズする予定がある場合は、別の言語でも表示できるよう十分なスペースを取り、またグローバリゼーションの問題にも留意します。ローカリゼーションとグローバリゼーションについては他のドキュメントも参照してください。

  • ブランドの詳細レベル

    商用目的のアプリで、ブランドの管理が必要となる場合は、一貫したブランドの印象を与えるよう細心の注意をはらってビジュアル プロトタイプを作成します。これにより、企業が定めるテーマ カラー、レイアウト、ロゴの使い方などから外れないアプリを作成することができます。

カスタマイズの一貫性

カスタム ビジュアル要素を使うことで、アプリの品質、独自性、ブランドなどを印象付けることができます。アプリのビジュアル デザインをどの程度カスタマイズするかを事前に決め、それに従って、これらの要素を計画します。アプリのデザインの後の段階でカスタム アートワークやブランドを加えるのは容易ではありません。

カスタム要素には、テーマ、テンプレート、コントロール、スタイルなどが含まれます。

Windows Phone でビジュアル要素をカスタマイズする場合は、以下のガイドラインに従ってください。

リアリズムより実用性を重視する

一般に、実物に似せたコントロールをアプリに使用することはお勧めしません。たとえば、Windows Phone の [ミュージック+ビデオ] ハブにある FM ラジオ機能では、選局にダイヤル、つまみ、ボタンなどは使用しません。代わりに、周波数を変更するためのスライダー コントロール、ラジオのオンとオフを切り替える再生/一時停止ボタン、そして特定のラジオ局を保存するためのお気に入りボタンが付いています。

UX_AppDesign_FMRadio

Windows Phone OS 7.1  での FM ラジオ

また実用性を確保するため、全画面モードでコンテンツやゲームを表示している間は、必要のないコントロール、アプリ バー、ステータス バーなどをフェード アウトさせるか削除するとよいでしょう。

カスタム コントロールの相互作用をグループ単位で計画する

カスタム コントロールを使ったアプリの一貫性と信頼性を高めるため、記号、形状、単語、色などに一貫した意味を持たせたデザイン スタイルを採用してください。

相互に関連し影響し合うカスタム コントロール グループを使用する場合は、コントロールのあらゆる組み合わせが理にかなうよう、また意図したとおりに動作するよう注意します。

可能であれば、カスタム コントロール間の相互作用を図示してみて、あらゆる動作が妥当であることを確認してください。いずれかの組み合わせが混乱を招きそうなら、デザインの変更を検討します。

プロトタイプが完成に近づいたら、Windows Phone デザインの基本から外れていないことを確認します。以下の質問を参考に、作成中のアプリケーションがプラットフォームと OS の利点を最大限に活かしているかどうか検討してください。

プロトタイプ レビューの質問事項

  • アプリは、Windows Phone ハードウェアを明確に活用するようデザインされていますか?

  • アプリのタスクは楽に操作できますか?

  • アプリが提供する情報や機能が多すぎませんか?または、少なすぎませんか?

  • アプリで実行できるタスクや操作は、ユーザーにとって価値あるものですか?

  • 他のモバイル プラットフォームのアプリ開発に携わっていましたか?その場合、Windows Phone ユーザーが、より少ないタップ数、見やすいビュー、大きな文字、そしてはっきりしたコントラストや色を好むことに留意してください。

  • 水平と垂直の両方向のスクロールが可能ですか? また横向きと縦向きの両方の表示が可能ですか?アプリの目的によっては、どちらも必要とされることがあります。

  • 指でコントロールを簡単に操作できますか?コントロールのテキストは見やすいですか?

  • タップしたときや作業の進行中に、UI はフィードバックを返しますか?

  • ハードウェアの [戻る] ボタンは適切に利用されていますか?

  • 埋め込み Web コンテンツや WebBrowser コントロールを多用していませんか?

  • 全画面モードでコンテンツを再生中に、ステータス バー、コントロール、アプリ バーなどがフェード アウトしますか?

  • Pivot コントロールや Panorama コントロールを正しく効果的に使用していますか?

カスタム UI 要素をテストする

カスタム UI 要素をモックアップしたら、テストを行います。Blend を使用している場合は、デザイン中に自動的に挿入されたコードを使って、コントロールが実際に XAML で動作するかどうか検証することができます。

ユーザー フィードバック

プロトタイプを開始したら、アプリのターゲット ユーザーの中から信頼できる数名のユーザーを見つけ、プロトタイプの準備ができしだいテストしてもらいます。こちらからアプリについての説明はせず、ユーザーが自分で簡単にアプリの目的や動作方法を理解できるかどうかを確認します。

メモメモ:

初期ユーザー テストでは、ワイヤーフレーム スケッチではなく、詳細なビジュアルを備えたモックアップを使うことをお勧めします。ワイヤーフレームでは実際の使用感をシミュレートすることはできません。

早期にカスタマーとの対話を

ビジネス用のアプリをデザインしている場合は、ターゲット ユーザーに加え、マネージャーや専門知識を持たないユーザーのニーズと優先事項もテストします。たとえばプロジェクト管理のアプリの場合、プロジェクトに携わっている人だけでなく、その上司もプロジェクトの進行状況の確認のために使用する可能性があります。

メモメモ:

ユーザーの際限ない要求にまどわされないでください。ユーザー フィードバックの中には重大な UI の問題を指摘するようなものもありますが、多くの場合、フィードバックは全般論として受け取るべきです。アプリは、明確な目的を持ったスリムなものにしてください。一般に、ユーザーの意見は、特定の UI や相互作用の改善よりも、そのアプリで何ができるべきかという点を明確にすることに役立ちます。

この時点であなたのアプリは既に、先に示した Windows Phone のユーザビリティ ガイドラインを満たしているはずです。最終モックアップを評価するには、次の手順を実行します。

  1. プロトタイプが、「アイディアの収集」で計画したニーズと要件を満たしているかどうか確認します。

  2. モックアップが、最終アプリ レビューで必要となる詳細レベルを満たしているかどうか確認します。「デザインの主要ポイントを実現したプロトタイプの開発」で決定した、プロトタイプに必要な詳細レベルに照らし合わせてください。

  3. 最終モックアップは、以下について適切なレベルの詳細情報を備えている必要があります。

    • ビジュアル要素 - 文字やその他のコンテンツがはっきりと読みやすく、簡潔に表示されていますか?魅力的な外観となっていますか?

    • 機能要素 - タスクの目的や操作方法は直感的ですか?アプリの目的と操作方法は明確ですか?

    • コンテンツ要素 - すべてのカスタム コントロールが一貫したデザイン原則に沿って機能していますか?簡単にタップ操作できるようサイズやスペースが調整されていますか?

    • ブランド要素 - 色やロゴは正確ですか?アートワークは著作権の規約に準拠していますか?

  4. プロトタイプの際にマップした相互作用が保持されていることを確認します。最も重要な、または頻繁に使用されるタスクや操作が、意図したとおりの外観と手順で動作することを確認します。

  5. デザインが確定して構築を開始できる段階になったら、「Windows Phone 用の初めてのアプリを作成する方法」を参考に、申請のデザイン要件を満たすためにアプリの準備を開始します。

表示:
© 2014 Microsoft