Windows 8 のユーザー エクスペリエンスの中心となるのが Metro スタイル アプリです。魅力的な Metro スタイル アプリには、一貫性があり、洗練された魅力的なユーザー エクスペリエンスを実現する重要な特徴があります。ここでは、魅力的な Metro スタイル アプリの 8 つの特徴を紹介します。
ビデオの視聴
このビデオでは、Metro スタイルの設計原則を利用して、魅力的なアプリを作成する方法について説明します。ビデオを視聴したら、魅力的な Metro スタイル アプリの特徴の要約をお読みください。
Metro デザイン スタイルの活用
Metro スタイル アプリの核となるのはコンテンツです。クロムよりコンテンツを優先させることが Metro スタイル アプリの設計の基本です。その他のものはすべて、コンテンツの表示や操作を支援するアクセサリ、またはクロムです。
コンテンツの表示
コンテンツが引き立つようにアプリの UI を設計し、障碍のあるユーザーが UI にアクセスできるようにします。
すっきりした開放的なレイアウト
- 最も重要な要素だけを画面上に残し、ユーザーの邪魔になるものは極力取り除いて、ユーザーがコンテンツに没入できるようにします。
- 線およびボックスや、不要なグラフィック効果 (ぼかしやグラデーションなど) を取り除いて、コンテンツにゆとりを与えます。コンテンツは空間で区切ります。
- 常に画面に表示されるナビゲーション クロム (タブなど) を絞り込みます。ユーザーが操作のためのクロムに煩わされずに現在のコンテンツに集中できるようにします。
明確な情報階層 Metro のデザイン言語は、ユーザーがコンテンツの階層を理解しやすいような、簡潔で美しいタイポグラフィを土台としています。線やボックスの代わりにタイポグラフィを使って構造や階層を示します。
- 使用するテキストのサイズ、太さ、幅に一貫性を持たせて、コンテンツの重要度を識別できるようにします。コンテンツの全体的な階層がすぐにわかるように、バリエーションは少なくします。テキストとタイポグラフィのガイドラインに関するトピックをご覧ください。
- 既定のスタイルシートを使って、あらかじめ定義されている書体見本(type ramp) でテキストを表示します。
Metro スタイルのシルエット ユーザーがコンテンツに集中するようになると、アプリケーションがコンテンツの構成で識別されるようになります。 見慣れたシルエットが使われていると、Metro スタイル アプリであることを (Web ページなどとは対照的に) ユーザーが直感的に認識できます。
- Metro スタイルのシルエットに合わせて、ユーザーに親近感と安心感を与えます。
- レイアウトを作成する際には、Visual Studio のグリッド プロジェクト テンプレートまたはスプリット プロジェクト テンプレートから開始します。Visual Studio の Metro スタイル アプリ用 JavaScript プロジェクト テンプレートのガイドラインをご覧ください。
コンテンツの操作
すべてを制御しているという安心感をユーザーに与えるようにします。
直接的な操作 ユーザーがコンテンツを操作する最も自然な方法は、クロムを介さない直接的な操作です。
- できる限り、コントロールによる間接的な操作ではなくコンテンツの直接的な操作によってユーザーが目的を達成できるようにします。
実行用のボタンを画面に追加するのではなく、項目をタップして詳細を表示する、クロススライドして選ぶ、ドラッグして移動する、縮小してコンテキスト全体を表示するなど、ユーザー自身がこれらの操作できるようにします。
- 長いコンテンツを操作するための、軽快で柔軟なコンテンツ優先の方法として、セマンティック ズームを活用します。
- スクリーン リーダーとキーボードを使うユーザーがどのようにコンテンツを扱うかに留意します。
端の活用 中には、直接的な操作では実行できない操作もあります。それらの操作に対しては、キャンバスを散らかさないように、状況に応じたコマンドを必要なときにだけ表示します。ユーザーが確実にコマンドを見つけられるように、画面やデバイスの端を活用します。
- コマンドをアプリ バーに配置します。アプリ バーは、上端または下端からのスワイプによってオンデマンドで表示できます。ユーザーが操作を完了したら消すこともできます。
- チャームを活用します。チャームは、右端からのスワイプによってオンデマンドで表示できます。検索、共有、デバイス、設定のチャームがあります。
- コマンドを画面に表示したままにしたり、チャームを使ってアクセスするコントラクトに対して重複するエントリ ポイントを表示したりするのは避けます。
- 快適なデザインを心がけて、よく使うインタラクション サーフェスを端の近くに配置します。
詳しくは、「コマンド実行の設計」をご覧ください。
軽快かつ柔軟
相応のエネルギーを注いで、ユーザーの操作にすばやく応答します。
目的性のあるアニメーション
アニメーションは、Metro のデザイン言語の中心的要素の 1 つです。適切にデザインされたアニメーションは、アプリを生き生きとさせ、精巧で洗練された印象を与えます。
- 目的性のあるアニメーションを使って、ユーザー エクスペリエンスに視覚的連続性とストーリー性を持たせます。柔軟なインターフェイスでは、すべての要素に始まりと終わりがあります。
- 情報を伝えるために作られた、アニメーション ライブラリのシナリオ固有のアニメーションを活用します。ユーザーが見慣れたアニメーションを使うことで、概念を強化したり、何が起こるのかわかるようにしたり、安心感を与えたりすることができます。「UI のアニメーション化」のアニメーションのガイドラインをご覧ください。
- アニメーションを使って重要な情報を伝える場合は、アクセシビリティに対応した代わりの伝達方法を用意しておくことを忘れないでください。
タッチのための設計
Metro スタイル アプリはタッチ優先で設計されます。使い勝手や人間工学を念頭に置いて、アプリの重要な機能を手や指で操作できるようにします。
- Windows 8 タッチ言語を採用し、所定のジェスチャ セットを使って、一貫性のある自然な方法でコンテンツを操作できるようにします。詳しくは、「タッチ操作の設計」をご覧ください。
- コンテンツが指の動きに直接従うようにします。タップだけでなく、セマンティック ズームなどのスライド操作も使って、すばやく簡単にコンテンツを操作できるようにします。
- タッチに対する視覚的なフィードバックを即座に返して、目的の対象にヒットしたことがユーザーにわかるようにします。また、操作を元に戻せるようにして、ユーザーが間違いを正したり、あれこれ試してみたりできるように、ユーザーの指が離れてから操作をコミットするようにします。
- タッチ操作とマウス操作を別々に作らないようにします。
- アクセシビリティに対応するために、すべてのインタラクティブ要素にプログラムでアクセスできるようにします。詳しくは、「タッチ イベントをアクセシビリティ対応にする」と「ナレーターでアプリの主要なシナリオを確認する」をご覧ください。
ビルトイン コントロール
ビルトイン コントロールを活用すると、柔軟で美しい一貫性のあるアニメーションや、タッチに最適化された動作を利用できます。以下に例を示します。
- ListView コントロールには、スワイプ ジェスチャ (クロススライド) による選択の機能が組み込まれています。この機能をセマンティック ズームで拡張して、長いリストをすばやく柔軟に操作できるようにすることもできます。ListView コントロールのガイドラインをご覧ください。
- FlipView コントロールを使うと、ユーザーがドラッグして項目間を移動できるようになります。経過のアニメーションも組み込まれています。
- ボタン、トグル ボタン、チェック ボックス、オプション ボタン、評価、スライダーのすべてのコントロールで、タッチ ダウンしたときに視覚的なフィードバックが返され、タッチ アップするまで操作がコミットされません。ユーザーは、ドラッグしてキャンセルすることで、操作を元に戻すことができます。ボタン、トグル ボタン、チェック ボックス、オプション ボタン、日付と時刻の選択、評価、スライダーの各コントロールのガイドラインをご覧ください。
ビルトイン コントロールが既定でアクセシビリティに対応していることを思い出してください。これにより、アクセシビリティ対応のアプリの開発コストを下げることができます。ビルトイン コントロールについては、ユーザー エクスペリエンス (UX) の詳細なガイドラインの一覧をご覧ください。
美しいスナップとスケーリング
ユーザーが使用できるすべてのフォーム ファクターとすべての表示方法で高い操作性を実現します。
スケーリングによるさまざまなフォーム ファクターへの対応 開発するアプリは、Windows 8 が稼働する何億もの PC で使われる可能性があります。これらの PC の画面サイズと解像度は、<10 インチのタブレットから >27 インチの画面まで、多岐にわたります。
- プラットフォームのコントロールに組み込まれている柔軟なレイアウトのサポートを使って、画面上のスペースを最大限に活用します。たとえば、ListView では、使用できるスペースに基づいてコンテンツが自動的に再配置されます。
- プラットフォームでは、デバイスの画面サイズと解像度に基づく自動スケーリングが行われます。 アプリが常に鮮明に、洗練された状態で表示されるようにするには、3 つのサイズの資産を用意するか、スケーラブル ベクター グラフィックス (SVG) を使います。「画面に合わせたスケーリングのガイドライン」と「ピクセル密度に合わせたスケーリングのガイドライン」をご覧ください。
- [コンピューターの簡単操作] で [画面上のすべてのものを大きくする] をオンにすると、現在の解像度が実質的に低下することに注意してください。この場合でも、すべての UI が表示され、使うことができるようにする必要があります。詳しくは、「[画面上のすべてのものを大きくする] がオンの状態でアプリを確認する」をご覧ください。
- Microsoft Visual Studio のシミュレーターを使って、アプリがさまざまなフォーム ファクターでどのように表示されるのかを確認します。
ビュー状態のための設計 マルチタスクは当たり前のように利用されるため、スナップを使って 2 つのアプリを左右に並べて実行できるようになっています。すべてのアプリで Snapped 状態を実装する必要があります。魅力的な Snapped 状態は、アプリが画面に表示される時間を長くするのに役立ちます。スナップされたビューとページ横幅に合わせたビューのガイドラインに関するトピックをご覧ください。
- アプリの実用的なビューを提供する便利なスナップ ビューを設計します。ビュー状態を切り替えてもユーザーのコンテキストが保持されるようにします。
- アプリがスナップされると、幅は 320 ピクセルに固定されますが、高さは固定されません。端およびスナップ ガターとの競合を避けるために垂直方向にパンします。
- アプリが画面に表示されているときに他のアプリがスナップされる可能性もあるため、最小の幅 1024 ピクセルから柔軟に再配置されるようにアプリを設計します。
正しいコントラクトの使用
Metro スタイル アプリは、コントラクトを通じて他の Metro スタイル アプリやシステム UI に結び付けられます。同じコントラクトを実装した 2 つのアプリを連携させて、大きなシナリオや複雑なシナリオを実現することができます。
- 検索、共有、ファイル ピッカーなどの一般的なコントラクトには、対応する項目テンプレートが Visual Studio に用意されています。
- チャームを活用して、ユーザーが一貫した方法でコントラクトを呼び出せるようにします。コントラクトを呼び出すためにアプリのキャンバスに別の UI を作成しないでください。ユーザーを混乱させる原因になります。
- すべてのアプリ コントラクトの一覧をご覧ください。
共有 共有コントラクトは、特定のアプリのデータを別のアプリと共有できるようにします。共有するコンテンツを提供するアプリがソース アプリで、共有されたコンテンツを受け取るアプリがターゲット アプリです。共有には、一連の一般的なデータ形式が使用されます。コンテンツの共有のガイドラインに関するトピックをご覧ください。
- すべてのアプリを共有ソースにして、できるだけ幅広い形式を実装する必要があります。
- 共有されたデータを公開、格納、変換するアプリは共有ターゲットに向いています。そのようなアプリには、たとえば、コミュニケーション アプリ、ソーシャル ネットワーキング アプリ、デバイス接続アプリなどがあります。
検索 検索コントラクトは、Windows のあらゆる場所からアプリのコンテンツを検索できるようにします。結果はアプリから提供され、アプリの UI で表示されます。検索のガイドラインとチェック リストに関するトピックをご覧ください。
- 独自のアプリ内検索の代わりに検索チャームを使います。これは、検索範囲にアプリのすべてのコンテンツが含まれる場合 (ショッピング アプリで商品を検索する場合など) に重要です。検索範囲が現在のビューに限定される場合 (ドキュメント内の単語を検索する場合など) は、通常の検索機能を使用してください。
- ユーザーが目的のものをすばやく見つけられるように、検索候補を提供します。
- 結果ページとアプリのメイン UI の間を行き来するための手段を提供します。
ファイル ピッカー ファイル ピッカー コントラクトは、アプリのコンテンツに別のアプリからアクセスできるようにします。ファイル ピッカーを呼び出すと、ローカル記憶域のファイルや、ファイル ピッカー コントラクトをサポートしている別のアプリのファイルを、参照して選択できるようになります。ファイル ピッカーのガイドラインに関するトピックをご覧ください。
- アプリでアクセスしたり格納したりするファイルが別のコンテキストのユーザーにも役に立つ場合は、このコントラクトを活用します。
- ListView コントロールに組み込みまれている柔軟なレイアウトと選択動作を活用します。
魅力的なタイルの作成
タイルはアプリへの入り口です。アプリの延長としてスタート画面に表示され、従来のアイコンよりはるかにパーソナルで魅力的な情報を提供できます。ユーザーをアプリに引き付ける魅力的なタイルの作成に取り組みます。タイルのガイドラインに関するトピックをご覧ください。
- タイルに表示するコンテンツをユーザーに合わせてカスタマイズします。また、アプリのコンテンツが変更されたら更新して、最新の状態に保ちます。あらかじめデザインされたさまざまなタイル テンプレートが用意されています。コンテンツに最も適したデザインを選択してください。
- ユーザーがアプリを起動してすぐに見つけられるように、アプリのホーム ページにあるコンテンツを参照します。
- セカンダリ タイルを使って、アプリのコンテンツのよく更新される興味深いサブセクションをユーザーがスタート画面に表示できるようにします。セカンダリ タイルのガイドラインに関するトピックをご覧ください。
つながり感とライブ感
Live タイルと通知を使って最新のコンテンツを提供し、ユーザーがアプリとのつながりを感じられるようにします。Live タイルと通知は同じインフラストラクチャを使用しており、アプリの実行中またはスケジュールされた時刻に、Windows プッシュ通知サービス (WNS) を使っていつでもローカルで更新できます。
Live タイル 動的で、関連性の高い、カスタマイズされたコンテンツをアプリのタイルに表示して、ユーザーを継続的に引き付けることができます。 タイルに最新のコンテンツが表示されるようにすると、ユーザーがタイルをスタート画面の目立つ場所に配置して、アプリを繰り返し起動するようになります。
- Live タイルには、最大で 5 つのコンテンツを順番に表示できます。たとえば、ニュース アプリで、毎日複数の記事が順番に Live タイルに表示されるようにすることができます。
- Live タイルに表示されているコンテンツには、アプリのホーム ページからアクセスできるようにする必要があります古くなった通知は、不要になったりホーム ページからアクセスできなくなったりしたら削除します。
- バッジを使って、数字や装飾文字による簡潔な情報を表示します。
通知 アプリで通知を使うと、即時性が必要なメッセージを Windows のあらゆる場所に割り込ませて一時的に表示することができます。トースト通知のガイドラインに関するトピックをご覧ください。
- 通知は、通常は使用しないでください。アプリで通知を有効にするにはユーザーがオプトインする必要があります。
- アプリの通知機能はユーザーが制御できます。したがって、本当に即時性が必要な、重要な通知以外には使用しないでください。表示できなかった通知は、重要なものであればアプリのタイルに表示します。
- 短い期間に複数の更新が発生した場合は、通知を結合します。
- エラーや警告の表示には通知を使用しないでください。エラーはインラインで表示するか、ポップアップやメッセージ ダイアログで表示します。
クラウドへのローミング
ローミング データのローミングによってデバイス間で連続性のあるエクスペリエンスを実現し、ユーザーが作業を中断したところから再開できるようにします。アプリのデータのローミングのガイドラインに関するトピックをご覧ください。
- Microsoft アカウントとユーザー単位のクラウド記憶域を活用して、設定、状態、少量のユーザー コンテンツを格納してローミングします。
- ローミングに適したアプリの設定の例:
- 天気予報アプリの市町村や摂氏/華氏の設定
- ニュース アプリでユーザーが受信登録した RSS フィード
- スポーツ アプリのお気に入りのチーム
- ローミングに適したアプリの状態の例:
- 読書アプリでどこまで読んだかを示す位置
- ゲームの最後のチェックポイントや手
- 音楽アプリで最後に再生した曲
プロセス ライフタイム管理 (PLM) (アプリのライフサイクル) ユーザーが明示的に保存しなくても状態が維持されて、連続性のあるエクスペリエンスが提供されるようにします。「アプリの一時停止と再開のガイドライン」をご覧ください。
- 一般に、アプリは毎回新たに開始するのではなく、前回の状態から再開します。ユーザーが別のアプリに切り替えても、元のショッピング カートや、書きかけのメールや、中断したゲームに戻れるようにする必要があります。
- ユーザーが最後にアクセスしてから長い時間が経過して、前のコンテキストが適切でなくなった場合は、アプリを新たに開始します。たとえば、ニュース アプリで、ユーザーが最後に記事を開いてから長い時間が経過して、その記事が既に古くなっている場合は、ホーム ページに移動します。
- アプリが画面から消されても終了しないでください。アプリのライフサイクルをシステムにゆだねて、ユーザーができるだけ効率的にアプリに戻れるようにします。ユーザーにアプリを終了する方法を提示しないでください。
Metro スタイルの設計原則の採用
以下の原則に従ってデザインします。
作品へのこだわりを示す
- 多くのユーザーの目に触れることが多い細部に時間と手間をかけます。
- すべての段階で完全かつ洗練されたエクスペリエンスを作り上げます。
より少ない要素でより大きな効果を上げる
- アプリの特徴に気付きやすくするのではなく、散漫な印象を与えないようにします。ユーザーが目的のものに没入できるようにして、後は自分で探させます。
- ユーザーがコンテンツに没入できるように、最も重要な要素だけを画面上に残して、簡潔で目的性の高いエクスペリエンスを実現します。
軽快かつ柔軟にする
- ユーザーが直接コンテンツを操作できるようにして、相応のエネルギーを注いで操作にすばやく応答します。
- 生き生きとしたエクスペリエンスを提供し、意味のあるアニメーションを使って操作に連続性とストーリー性を持たせます。
真のデジタル化を心がける
- デジタル メディアの利点を最大限に活用します。物理的な境界を取り除いて、現実の世界より効率的で容易なエクスペリエンスを実現します。
- ここで扱っているのは画面上のピクセルであるという事実を利用します。現実の素材の限界を超えるような、大胆で、力強い、生き生きした色や画像を使ってデザインします。
全体で勝つ
- エコシステムを活用し、他のアプリ、デバイス、システムと連携してユーザーのシナリオを実現します。
- UI モデルに合わせて冗長さを減らします。ユーザーが既に知っていることを活かして、親近感、コントロール感、安心感を与えます。