ウィジェットの対話式操作の設計のガイダンス

注意

一部の情報はリリース前の製品に関する事項であり、正式版がリリースされるまでに大幅に変更される可能性があります。 Microsoft は、ここに記載されている情報について、明示または黙示を問わず、一切保証しません。

重要

このトピックで説明する機能は、ビルド 25217 以降の Windows の Dev チャネル プレビュー ビルドで使用できます。 Windows のプレビュー ビルドの詳細については、「Windows 10 Insider Preview」を参照してください。

この記事では、Windows ウィジェットの対話を設計するための詳細なガイダンスを提供します。

ウィジェットは、ひとめで見て焦点を当てる必要があり、アプリの主な目的の 1 つの側面を表す必要があります。 ウィジェットでは、1 つ以上のアクション呼び出しが提供される場合があります。 ユーザーがアクションの呼び出しをクリックすると、ウィジェット自体にアクションを実装するのではなく、関連付けられているアプリまたは Web サイトを起動する必要があります。 ウィジェットには、複数の対話を収容できるプライマリ ページが 1 つだけ存在します。 ウィジェット内の項目をクリックすると、ウィジェットの完全に異なるビューに表示されることはありません。 たとえば、天気予報ウィジェットでは、複数の日の天気を表示できますが、いずれかの日をクリックしても詳細はインラインで展開されず、代わりにアプリまたは Web が起動されます。

サポートされている各ウィジェット サイズに推奨されるタッチ ポイントの最大数を次に示します。

ウィジェットのサイズ 最大タッチポイント数
1
3
large 4

次のナビゲーション要素は、Windows ウィジェットではサポートされていません。

  • ピボットはウィジェット内ではサポートされません
  • L2 ページはウィジェット内ではサポートされません
  • 垂直または水平スクロールはウィジェット内ではサポートされません

Containers

次の図は、ウィジェット テンプレートでのコンテナー要素の使用例を示しています。 コンテナーは、ビジュアル要素を列と行にグループ化して、階層グリッド構造を作成します。

コンテナーを示すウィジェットの 4 つの画像。画像内のウィジェットには、階層グリッド構造を提供するために、行と列に分割された要素があります。

次の画像は、ウィジェット テンプレートでのイメージ リンク要素の使用例を示しています。

画像リンクを示すウィジェットの 2 つの画像。画像は、グリッドを作成する列と行に配置されます。

改ページ位置の自動修正

次の図は、ウィジェット テンプレートでの改ページ位置の例を示しています。 改ページ調整コントロールは、水平方向または垂直方向に配置できます。 カーソルのホバーに応じてナビゲーション矢印が表示されます。

この 2 つの画像のセットは、水平方向の改ページ位置を示しています。最初の画像では、ドットの列が右側に揃っています。現在アクティブなページを示すために、1 つのドットが大きくなります。2 番目の画像では、ウィジェットの下部にある下向きの矢印の上にカーソルを置いて、ユーザーが次のページに移動できるようにします。ウィジェットの上部には、前のページに移動するための一致する上向き矢印があります。

この 2 つの画像のセットは、垂直方向の改ページ位置を示しています。最初の画像では、ドットの行が下部に沿って配置されています。現在アクティブなページを示すために、1 つのドットが大きくなります。2 番目の画像では、ウィジェットの右側にある右向きの矢印の上にカーソルが置かれます。これにより、ユーザーは次のページに移動できます。ウィジェットの左側には、前のページに移動するための一致する左向きの矢印があります。

これら 2 つの画像は、ウィジェットに画像の背景がある場合の改ページコントロールの外観を示しています。

次の図は、ウィジェット テンプレート内のハイパーリンクの例を示しています。

ハイパーリンクを示すウィジェットの 2 つの画像。最初の画像は、ハイパーリンクされたテキスト文字列を示しています。テキストはプレーンです。2 番目の画像では、ハイパーリンクの上にマウス カーソルを置くと、テキストに下線が引かれます。

ページ分割ドットの水平行のすぐ上にある、ウィジェットの下部の中央にハイパーリンクを示す画像。赤い X は、ページ分割ドットとハイパーリンクを同じスペースに配置しないことを示します。右側の別の画像は、下部にハイパーリンクを示していますが、ページ分割ドットは右側の列に垂直方向に配置されています。緑色のチェックは、2 つの要素のこの配置が正しいことを示します。

ドロップダウン メニューを示すウィジェットの 2 つの画像。左側の画像では、ドロップダウン メニューが折りたたまれます。右側の画像では、ドロップダウンが展開され、ウィジェットの境界線を越えて拡張されます

ウィジェットは、ユーザーがメニューまたはドロップダウンを操作している場合、ウィジェットのサイズを少し超えて一時的に拡張できます。 ユーザーがメニュー/ドロップダウン領域の外側をクリックした場合、メニューの動作は軽く閉じ、メニューを閉じる必要があります。