Microsoft のデザイン チームのアプリ作成プロセスは、5 つの段階 (概念、構造、ダイナミクス、視覚、プロトタイプ) で構成されています。 同様のプロセスを採用して、だれもが楽しめるエクスペリエンスを実現することをお勧めします。
注
新しいプロジェクトを作成する開発者は、UWP ではなく、Windows App SDK と WinUI の使用を検討することをお勧めします。 詳細については、UWP から Windows App SDK に移行するを参照してください。
概念
アプリにフォーカスを設定する
Universal Windows Platform (UWP) アプリを計画するときは、アプリの実行内容と目的だけでなく、アプリの用途も決定する必要があります。 すべての優れたアプリの中心には、しっかりした基盤を提供する強力な概念があります。
たとえば、写真アプリを作るとします。 ユーザーが写真を操作、保存、共有する動機を考えてみると、写真で思い出をたどったり、写真を通じて他の人々と交流したり、写真を安全に保管したりすることであるとわかります。 アプリに優れた機能を持たせたい要素はこれらです。これらのエクスペリエンス目標を使用して、設計プロセスを進めていきましょう。
何のためのアプリか まず、大まかなコンセプトを決めます。ユーザーがアプリで何をできるようにするか、一覧にまとめてみましょう。
たとえば、旅行の計画に使うアプリを作るとします。 ナプキンの裏に落書きするようなアイデアをいくつかご紹介します。
- 旅行計画に含まれている場所の地図をすべて集めて、旅行中もそれを携帯する。
- 町にいる間に開催されている特別なイベントを調べる。
- 必ずするアクティビティや必ず見る観光名所の一覧を、旅行に行くメンバーが各自で作成し、他のメンバーも見られるようにする。
- 旅行のメンバーが撮ったすべての写真をまとめて、友人や家族と共有する。
- 航空料金に基づいて、お勧めの行き先を選ぶ。
- あなたの目的地周辺にあるレストラン、店舗、およびアクティビティのお得情報が集まったリストを見つけてください。
アプリの 1 番の特徴は何か すべてのアイデアを全体的に見て、特に目立つシナリオがないか考えてみます。 数多くのアイデアの中から絞り込んで、これに集中しようと思えるシナリオを 1 つだけ選びます。 優れたアイデアをたくさん捨てることになりますが、その 1 つのシナリオを良いものにしあげるには、いさぎよくアイデアを捨てることが肝心です。
シナリオを 1 つ選んだら、アプリの 1 番の特徴を普通の人に 1 行で伝えるにはどうしたらよいかを考えます。 たとえば、次のように入力します。
- この旅行アプリを使えば、友人どうしで協力してグループ旅行の計画を作り上げることができます。
- このワークアウト アプリを使うと、友人どうしでトレーニングの経過を記録して、互いに成果を見せることができます。
- この食料雑貨アプリを使うと、家族で毎週の食料雑貨を計画的に買うことができ、買い忘れや重複がなくなります。
このようにアプリの 1 番の特徴を示す説明文を作っておくと、アプリを作るプロセスで、設計上のさまざまな決定事項や妥協点を判断する際に役立ちます。 アプリでユーザーに提供するエクスペリエンスのシナリオを中心とした説明文にしますが、単なる機能一覧にならないように注意してください。 この説明文では、アプリが実行できる機能を説明するのではなく、ユーザーがこのアプリを使ってできることを説明します。
設計ファネル
面白いアイデアが浮かぶと、すぐにでもその開発に取りかかり、ひょっとしたら製品化まで検討したくなるものです。 ただし、仮にそれを実現したとして、新たに別の興味深いアイデアが思い付きます。 当然のことながら、2 つのアイデアの優劣にかかわらず、既に投資してきたアイデアにこだわろうとするでしょう。 その別のアイデアをプロセスのもっと早い段階で思い付いていればよかったのです。 そこで、じょうご型設計は、できるだけ早く最善のアイデアを発見するのに役立つ手法です。
"じょうご" という用語は、その形に由来しています。 じょうごの幅広の部分には多くのアイデアが入り、それぞれが非常に低い忠実度の設計アーティファクト（スケッチやテキストの段落など）として実現されます。 このように集められたアイデアがじょうごの狭い方に向かって移動するにつれ、アイデアを表すアーティファクトの忠実度が高まると同時にアイデアの数は削減されます。 各アーティファクトでは、アイデアどうしを比較して判定するため、または "これが使って便利なのか (つまり直感的に使えるのか)" などの特定の質問に答えるために必要な情報のみをキャプチャする必要があります。 それ以上の時間と労力をそれぞれに置く必要はありません。 アイデアによっては、テスト時に途中で挫折することもありますが、そのアイデアの判定に必要以上に投資しないようにするため、それでかまいません。 アイデアがファネル内で次の段階に進むと、そのアイデアは順次、高精度な評価を受けます。 最終的には、魅力的なアイデアを表す 1 つの設計アーティファクトが残ることになります。 これは、単に最初に思い付いたからではなく、その利点によって残ったアイデアといえます。 これで、最適なアプリを設計できるでしょう。
構造
組織がすべてを簡単にする
概念に満足したら、次の段階としてアプリの青写真を作る準備に入ります。 情報アーキテクチャ (IA) により、コンテンツには、必要な構造的整合性が提供されます。 これは、アプリのナビゲーション モデルを定義し、最終的にアプリの ID を定義するのに役立ちます。 コンテンツをどのように整理するか、また、どうすればユーザーがそのコンテンツを見つけられるのかを計画することにより、ユーザーがアプリを使ったときのエクスペリエンスについて理解を深めることができます。
優れた IA は、ユーザーのシナリオを容易にするだけでなく、最初に主な画面を構想するのに役立ちます。 たとえば、Audible アプリは、ユーザーのライブラリ、ストア、ニュース、統計へのアクセスを提供するハブに直接起動します。エクスペリエンスに重点が置かれたため、ユーザーはオーディオブックをすばやく入手して楽しむことができます。 アプリのより深いレベルでは、より具体的なタスクに焦点を当てています。
関連するガイドラインについては、「 ナビゲーションデザインの基本」を参照してください。
ダイナミクス
概念を実行する
概念の段階でアプリの目的を定義した場合、ダイナミクスの段階ではその目的を遂行するだけです。 これを実現するには多くの方法があります。たとえば、ワイヤーフレームを使ってページ フロー (目的を果たすためにアプリ内のある場所から別の場所に移動する方法) をスケッチしたり、アプリの UI 全体で使う音声や言葉について考えたりします。 ワイヤーフレームは簡単ですが忠実度の低いツールで、アプリのユーザー フローについて重要な判断を行うのに役立ちます。
アプリの流れは、アプリの「優れている点」の声明としっかり結び付いており、ユーザーがそれを実現するためのシングルシナリオに貢献するように設計する必要があります。 優れたアプリは、最小限の労力で覚えられるフローを備えています。 まずは画面間レベルで考えてみましょう。アプリを初めて使うかのように眺めてください。 作るページのユーザー シナリオを正確に示す場合、不要な画面タッチが多くならないように、必要なものだけを提供します。 Dynamicsもモーションに関する情報です。 適切なアニメーション機能によって、ページ間の滑らかな動作と使いやすさが決まります。
この手順に役立つ一般的な方法:
- フローの概要: 最初の操作とその次の操作を決める
- フローのストーリーボード: フロー完了までの UI 操作の順序を決める
- プロトタイプ: 簡単なプロトタイプを使用してフローをテストする
ユーザーは何をすることができるのか たとえば、旅行アプリを使うと "友人どうしで協力してグループ旅行の計画を作り上げる" ことができます。必要なフローを以下のようにリストにまとめましょう。
- 一般的な情報で旅行計画を作る。
- 友人たちを旅行に誘う。
- 友人の旅行に参加する。
- 他の旅行者が勧める旅行計画を見る。
- 目的地とアクティビティを旅行に追加する。
- 友人たちが追加した目的地とアクティビティを編集したり、コメントを書いたりする。
- 友人や家族に見てもらえるように旅行計画を共有する。
ビジュアル
単語なしで話す
アプリのダイナミクスを確立したら、アプリの外観を洗練して魅力的なものにすることができます。 優れた視覚効果として、アプリの外観だけでなく、アニメーションやモーションを使ってライブ感を出す方法を定義します。 選んだカラー パレット、アイコン、アートワークは、この視覚言語の一例です。
すべてのアプリにはそれぞれのユニークなアイデンティティがあるため、アプリで実現できる視覚的なデザインを探求してください。 コンテンツによって外観を誘導できます。つまり、外観によってコンテンツが決まるのではありません。
プロトタイプ
あなたの傑作を絞り込む
プロトタイプ作成は 、設計ファネル (前に説明した手法) の段階であり、アイデアを表すアーティファクトはスケッチ以上のものに発展しますが、完全なアプリよりも複雑ではありません。 プロトタイプは、ユーザーに表示される画面を手書きで表したフローである場合があります。 テストの実行者は、実行中のアプリをシミュレートするために、さまざまな画面を下に配置したり、ページ上のいくつかの UI をくっつけたり離したりすることで、ユーザーのキューに応答する場合があります。 また、操作者がスクリプト最後まで実行して正しいボタンを押す場合、プロトタイプは複数のワークフローをシミュレートする非常にシンプルなアプリになります。 この段階で、アイデアは実際に実現性を帯び始め、これまで費やしてきた作業が本格的にテストされます。 アプリの領域のプロトタイプを作る場合、時間をかけて、最も必要なコンポーネントを調整して絞り込んでください。
経験の少ない開発者に対しては、いくら強調してもしすぎることはありません: 優れたアプリの作成は、反復プロセスなのです。 初期段階から何度もプロトタイプを作ることをお勧めします。 創造力を養う努力と同様、最適なアプリは徹底的な試行錯誤による成果です。
アプリに含める機能を決める
ユーザーの目的を理解し、その目的を助ける方法もわかったら、次にすることは、それを実現するための機能を探すことです。 Universal Windows Platform (UWP)を調べ、機能をアプリのニーズに関連付けます。 各機能の ユーザー エクスペリエンス (UX) ガイドラインに 従ってください。
一般的な方法:
- プラットフォームの調査: プラットフォームにある機能を確かめて、どのように使えるかを考える。
- 関連付けのダイアグラム: フローと機能を結び付ける。
- プロトタイプ: 機能をテストして、必要な働きができるかを確かめる。
アプリ コントラクト アプリは、アプリ間の広範な機能間ユーザー フローを可能にするアプリ コントラクトに参加できます。
- 共有 ユーザーが他のアプリを介してアプリのコンテンツを他のユーザーと共有したり、他のユーザーやアプリから共有可能なコンテンツを受信したりできるようにします。
- Play To ユーザーがアプリからホーム ネットワーク内の他のデバイスにストリーミングされたオーディオ、ビデオ、または画像を楽しむことができます。
- ファイル ピッカーとファイル ピッカーの拡張機能 ユーザーがローカル ファイル システム、接続ストレージ デバイス、HomeGroup、または他のアプリからファイルを読み込んで保存できるようにします。 また、ファイル ピッカーの拡張機能を使って、アプリのコンテンツを他のアプリに読み込むこともできます。
詳細については、「 アプリ コントラクトと拡張機能」を参照してください。
さまざまなビュー、フォームファクター、ハードウェア構成を備えたWindowsでは、ユーザーが制御を持ち、アプリが優先されます。 アプリの UI は、ユーザーが使うあらゆるデバイス、入力モード、向き、ハードウェア構成、状況で適切に表示される必要があります。
Touch first Windows は、単にマウス機能をエミュレートする以上のユニークで独特なタッチ エクスペリエンスを提供します。
たとえば、セマンティック ズームは、大きなコンテンツ セットの中を移動するときにタッチ操作のメリットが活かした操作方法です。 パンまたはスクロールでコンテンツのカテゴリを移動し、カテゴリを拡大して詳しい情報を見ることができます。 タブなどの従来のナビゲーション手法やレイアウト パターンよりも、コンテンツを感覚的、視覚的に表現でき、多くの情報を示すことができます。
もちろん、回転、パン、スワイプなどタッチ操作のさまざまな長所を利用できます。 Touch やその他のユーザー操作の詳細を確認します。
魅力的で新鮮 アプリが新鮮に感じられ、次の標準的なエクスペリエンスをユーザーに引き付ける必要があります。
- アニメーション アニメーションのライブラリを使用して、アプリを迅速かつ柔軟にユーザーに提供します。 コンテキストの変化がわかりやすく、視覚的な切り替えがエクスペリエンスに結び付きます。 UI のアニメーション化の詳細を確認します。
- トースト通知 トースト通知を通じて、時間の影響を受けやすいコンテンツや個人的に関連するコンテンツについてユーザーに知らせ、アプリが閉じられた場合でもアプリに招待し直します。 タイル、バッジ、トースト通知について詳しく学びます。
- アプリ タイル 新しい関連する更新プログラムを提供して、ユーザーをアプリに戻します。 次のセクションで詳しく説明します。 アプリ タイルの詳細を確認します。
個人用設定
- 設定 アプリの設定を保存して、ユーザーが必要なエクスペリエンスを作成できるようにします。 すべての設定を 1 つの画面にまとめて、ユーザーが使い慣れた一般的なメカニズムでアプリを構成できるようにします。 詳細については、 アプリ設定の追加に関するページを参照してください。
- ユーザー タイル ユーザー タイルイメージを読み込んで、ユーザーに対してアプリをより個人的なものにするか、ユーザーがアプリのコンテンツをWindows全体で個人用タイルとして設定できるようにします。
デバイスの機能 アプリが現在のデバイスの機能を最大限に活用していることを確認します。
- 近接ジェスチャ デバイスを物理的に一緒にタップ (マルチプレイヤー ゲーム) することで、物理的に近接している他のユーザーとデバイスを接続できるようにします。 近接通信とタップについて詳しくは、こちらをご覧ください。
- カメラと外部記憶装置 チャットや会議、ブログの記録、プロフィール写真の撮影、周囲の世界の文書化、アプリの優れたアクティビティを行うために、ユーザーを組み込みのカメラまたは接続されたカメラに接続します。 リムーバブル 記憶域のコンテンツへのアクセスについて詳しくは、こちらをご覧ください。
- 加速度計とその他のセンサー デバイスには、今日では多くのセンサーが付属しています。 アプリでは、環境光に応じてディスプレイの明るさを調節したり、ユーザーがディスプレイの向きを変えたときに UI を自動的に再配置したり、物理的な動きに応じて処理を行ったりできます。 センサーの詳細を確認 します。
- ジオロケーション 標準的な Web データまたは位置情報センサーからの位置情報情報を使用して、ユーザーが周囲を移動したり、地図上でその位置を見つけたり、近くの人、アクティビティ、目的地に関する通知を受け取ったりするのに役立ちます。 ジオロケーションについて詳しく知ることができます。
旅行アプリの例についてもう一度考えてみましょう。 友人と協力してグループ旅行の計画を作成する際に、以下のような機能を利用すると良いでしょう（例を挙げると）:
- 共有: 次の旅行の計画を複数のソーシャル ネットワークで公開して、旅行前の楽しみを家族や友人と分かち合います。
- ［検索］:他のユーザーの共有された旅行計画や公開された旅行計画を検索して、アクティビティや目的地を探し、自分たちの旅行に取り入れることができます。
- 通知: 旅行の仲間が旅行計画を更新したときに、通知を受け取ります。
- ユーザーは、好みに応じてアプリを設定できます。例えば、特定の旅行に対する通知を選択したり、ソーシャルグループに旅行行程の検索を許可したりできます。
- セマンティック ズーム: ユーザーは旅行計画のタイムラインを閲覧しながら、数多くの計画済みアクティビティを必要に応じて拡大表示し、詳しい内容を見ることができます。
- ユーザー タイル: 友人と旅行を共有するときに表示する画像を選択できます。
アプリで収益を得る方法を決める
さまざまな方法でアプリから収益を得られます。 アプリ内の広告や販売を使う場合は、それに対応するように UI を設計します。 詳細については、「 収益化の計画」を参照してください。
アプリの UX を設計する
ここでは、適切な基本構造を作ります。 アプリの 1 番の特徴が決まり、サポートするフローも決まったので、次はユーザー エクスペリエンス (UX) 設計の基本構造を検討します。
UI コンテンツをどのようにまとめるか ほとんどのアプリ コンテンツは、特定の形式のグループまたは階層にまとめることができます。 コンテンツのトップレベルのグループ化は、あなたの「最も得意なこと」の記述に一致させる必要があります。
旅行アプリを例に考えてみましょう。旅行計画をグループ化する方法はいくつかあります。 アプリの主な目的が興味深い目的地を見つけることであれば、冒険旅行、リゾート旅行、ロマンチックな休暇旅行など、興味の対象ごとにグループ化できます。 しかし、このアプリの主な目的は友人と協力して旅行計画を立てることなので、家族、友人、同僚など、ソーシャル グループごとに旅行計画を整理する方が理にかなっています。
コンテンツのグループ化の方法が決まると、アプリにどのようなページやビューが必要なのかがわかります。 詳しくは、「UI の基本」をご覧ください。
UI コンテンツをどのように表示するか UI をまとめる方法が決まったら、UI がどのように構築され、ユーザーに表示されるかを指定する、UX の目標を定義できます。 どのシナリオでも、できるだけ早くユーザーがアプリを楽しんで使い続けることができるようにする必要があります。 これを行うには、最初にユーザーに表示する UI の部分を決めて、その部分を完成させてから、その他の重要でない部分の構築に時間を使う必要があります。
旅行アプリでは、ユーザーはまず具体的な旅行計画を探します。 この情報をできるだけ早く表示するには、 まず ListView コントロールを使用して乗車の一覧を表示する必要があります。
旅行の一覧が表示されると、友人の旅行のニュース フィードなどの機能の読み込みが始まります。
必要な UI サーフェスとコマンドは何か 前の手順で決めたフローをもう一度見てみます。 各フローについて、ユーザーが行う手順を大まかに作成します。
たとえば、"友人や家族が旅行計画を確認できるように共有する" フローで考えてみましょう。 ユーザーが既に旅行計画を立てているとします。 旅行計画を共有するには、次の手順が必要です。
- アプリを開き、作成した旅行の一覧を表示します。
- ユーザーが彼女の共有したい旅行をタップします。
- 旅行の詳しい内容が画面に表示されます。
- 共有を開始するための UI を操作します。
- 旅行を共有したい友人のメール アドレスまたは名前を選ぶか、入力します。
- ユーザーが共有を完了するために UI にアクセスします。
- あなたのアプリが彼女の旅行の詳細を更新し、旅行計画を彼女と共有したメンバーの一覧が反映されます。
このプロセスによって、作る必要のある UI と、さらに作り込みが必要な部分 (アプリをまだ使っていない友人に送るメールの定型文を考えるなど) を把握することができます。 さらに、不要な手順を削る作業も始めます。 たとえば、旅行の詳しい内容を共有前に実際に見る必要はないかもしれません。 フローが整理されると使いやすくなります。
さまざまなサーフェスの使用方法の詳細については、 を参照してください。
フローはどのように感じるべきか ユーザーの手順を定義したら、そのフローをパフォーマンスの目標にします。 詳細については、「 パフォーマンスの計画」を参照してください。
コマンドをどのように配置するか フローチャートの手順を使用して、設計が必要な可能性のあるコマンドを特定します。 次に、アプリのどこでコマンドを使うかを考えます。
常にコンテンツを利用するように心がけてください。 できる限り、コンテンツを操作するコマンドを用意せず、アプリのキャンバス上でユーザーがコンテンツを直接操作できるようにします。 たとえば、旅行アプリで旅行計画を編集するときに、リスト内のアクティビティを上下に移動するコマンド ボタンを使うのではなく、キャンバスのリスト上でアクティビティをドラッグ アンド ドロップできるようにします。
コンテンツを利用できない場合。 コンテンツを直接操作できない場合は、コマンドを次の UI サーフェスのいずれかに配置します。
- コマンド バー: ほとんどのコマンドをコマンド バーに配置する必要があります。これは通常、ユーザーがタップして表示されるまで非表示になります。
- アプリのキャンバス上: 目的が 1 つに限られているページまたはビューは、その目的用のコマンドをキャンバス上に直接配置できます。 しかし、このようなコマンドはなるべく作らないでください。
- コンテキスト メニュー: クリップボードの操作 (切り取り、コピー、貼り付けなど) や、選択できないコンテンツに適用されるコマンド (マップ上の場所にプッシュ ピンを追加するなど) にコンテキスト メニューを使用できます。
各ビューでアプリをレイアウトする方法を決定します。 Windowsでは、横向きと縦向きをサポートし、全画面表示から最小幅まで、任意の幅にアプリのサイズを変更できます。 アプリは、任意のサイズの任意の画面で、どの向きでも適切に表示され、機能することが望まれます。 つまり、さまざまなサイズとビューについて、UI 要素のレイアウトを計画する必要があります。 そうすることで、ユーザーのニーズと好みに合わせてアプリ UI が柔軟に変化します。
さまざまな画面サイズの設計の詳細については、 レスポンシブ デザインの画面サイズとブレークポイントに関するページを参照してください。
第一印象を良くする
初めてアプリを起動したユーザーがどのように思ったり感じたりするかを考えましょう。 あなたの「得意なこと」についての記述に戻ってください。 アプリの 1 番の特徴をユーザーに直接説明できなくても、第一印象を演出することでメッセージを伝えることができます。 次の機能を利用します。
タイルと通知 タイルはアプリの顔です。 ユーザーのスタート画面に表示される数多くのアプリの中から自分のアプリが起動される決め手になるのは、何でしょうか。 タイルでアプリのブランドを明確にして、アプリの特徴を示すようにします。 アプリで常に最新の役立つ情報が伝えられるようにタイル通知を使うことで、ユーザーがアプリを繰り返し利用するようにします。
スプラッシュ画面 スプラッシュ画面はできるだけ速く読み込み、アプリの状態を初期化する必要がある限り画面に残ります。 スプラッシュ画面の表示内容で、アプリの特徴を伝えます。
最初の起動 ユーザーがサービスにサインアップする前に、自分のアカウントにログインするか、独自のコンテンツを追加する前に、ユーザーには何が表示されますか? ユーザーに情報を求める前に、アプリの価値をアピールします。 アプリを使ってもらうためには、ユーザーが自由に見ることのできるサンプル コンテンツを表示して、どのようなアプリなのかを知ってもらうのもよいでしょう。
ホームページ ホームページは、アプリを起動するたびにユーザーが戻る場所です。 ここに表示されるコンテンツは、目的をはっきりさせ、アプリの特徴がすぐにわかるようにする必要があります。 このページを特定の点で素晴らしいものにして、アプリの残りの部分はユーザーが探索してくれると信頼しましょう。 ランディングページでは、見つけやすさではなく、気を散らす要素を排除することに重点を置いてください。
設計を検証する
設計のやり直しを避けるために、アプリの開発があまり進まないうちに、設計内容またはプロトタイプをガイドライン、ユーザーの印象、要件に照らして検証します。 それぞれの機能について、アプリの改善に役立つ UX ガイドラインと、Microsoft Store でアプリを公開するために必要なストア要件があります。 Windows App認定キットを使用して、ストアの要件に対する技術的なコンプライアンスをテストできます。 また、Microsoft Visual Studio のパフォーマンス ツールを使用して、すべてのシナリオでユーザーに優れたエクスペリエンスを提供できるようにすることもできます。
UWP アプリの詳細な UX ガイドラインを使用して、重要な機能に集中します。 Visual Studio パフォーマンス ツールを使用して、各アプリのシナリオのパフォーマンスを分析します。