Windows ランタイム アプリのガイドライン

Applies to Windows and Windows Phone

この索引を使って、優れた Windows ストア アプリの設計に役立つガイドラインをすばやく検索します。 優れた Windows ストア アプリについてまだ十分に明確でない場合は、「魅力的な Windows ストア アプリの作成」と「ビジョンの定義」を先にお読みください。

UI の設計および実装のチュートリアルについては、「Windows ストア アプリ UI の概要」をご覧ください (「JavaScript と HTML」または「C#/C++/VB および XAML」)。

クリックして、すべての UX ガイドラインを含む Portable Document Format (PDF) ファイルをダウンロードしてください。

クリックしてガイドラインをダウンロード

この記事の内容

アニメーション

目的がはっきりし、適切にデザインされたアニメーションは、アプリを生き生きとさせ、精巧で洗練された印象を与えます。エクスペリエンスをまとめて関連付け、視覚的切り替えにより、コンテキストの変更に対するユーザーの理解を支援します。

 

コントラクトとチャーム

天気アプリと検索ウィンドウ

Windows ストア アプリは、コントラクトを通じて他の Windows ストア アプリやシステム UI に結び付けられます。同じコントラクトを実装した 2 つのアプリを連携させて、大きなシナリオや複雑なシナリオを実現することができます。 共有コントラクトなどのいくつかコントラクトは、チャームによって表されます。さらに、検索チャーム、デバイス チャーム、設定チャームは、一般的なタスクのための一貫性のあるメニューを提供します。

すべてのアプリ コントラクトの一覧をご覧ください。

 

コントロール

各種コントロールを備えたビデオ プレーヤー アプリ

コンテンツが引き立つようにアプリの UI を設計します。最も重要な要素だけを画面上に残し、ユーザーの邪魔になるものは極力取り除いて、ユーザーがコンテンツに没入できるようにします。以下のガイドラインに従うと、一貫性があり、洗練された魅力的なエクスペリエンスをユーザーに提供できます。

 

ファイル、データ、および接続性

デスクトップのフォルダーからファイルを開くためのファイル ピッカーアプリからフォルダー、ファイル、データにアクセスします。ユーザーがアカウントから、または Microsoft OneDrive などのクラウド サービスにあるデータにアクセスできるように、ユーザーにサインイン エクスペリエンスを提供できます。またアプリにアプリ データ ローミングを含めると、デバイス間でのシームレスなエクスペリエンスが実現します。

 

グローバリゼーションとローカライズ

タイルの双方向対応の UI

Windows は全世界で使われており、それを念頭にアプリを設計してください。リソース (文字列や画像など) をコードから分離します。これにより、ローカライズが容易になります。

 

ヘルプと手順

Cut the Rope アプリで Om Nom にキャンディーを与える手順

ユーザーにヘルプやトラブルシューティングのヒントを提供して、効果的にアプリの操作法を示す必要があります。

 

起動、中断、再開

People アプリのスプラッシュ画面

カスタマイズしたスプラッシュ画面で魅力的な起動エクスペリエンスを作成します。ユーザーが切り替えたときに一時停止し、元に戻すと再開するアプリを設計します。

 

レイアウトと拡大縮小

アプリのグリッド レイアウト

ナビゲーションを容易にするアプリのレイアウトを設計し、すべての UI 要素について最適な場所を選択します。ユーザーに提供するすべてのフォーム ファクターとすべての表示方法で優れたアプリ エクスペリエンスを実現します。

 

テキストと入力

Segoe UI

フォントのサイズ、太さ、色、トラッキング、間隔、テキスト ボックス コントロールを適切に設定すると、外観がきれいに整い、Windows ストア アプリが使いやすくなります。

 

タイルと通知

スタート画面上のタイル

タイルはアプリへの入り口です。アプリの延長としてスタート画面に表示され、従来のアイコンよりはるかにパーソナルで魅力的な情報を提供できます。ユーザーをアプリに引き付ける魅力的なタイルの作成に取り組みます。ライブ タイルと通知を使って最新のコンテンツを提供し、ユーザーがアプリとのつながりを感じられるようにします。

 

ユーザー操作

Windows ストア アプリのタッチ操作

ユーザーの管理性を維持し、ユーザーが安心してコマンドを見つけることができるように、画面またはデバイスの端を利用して、操作を設計します。

 

関連トピック

Windows ストア アプリ UI の概要 (HTML)
Windows ストア アプリ UI の概要 (XAML)

 

 

表示:
© 2014 Microsoft