ウィジェット設計の基礎

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

ウィジェットのサイズ

ウィジェットには、ユーザーが選択できる 3 つのサイズが用意されています。 3 つのサイズをすべて作成して検討し、サイズごとにデザインを調整することをお勧めします。 小と中のサイズは、動的フィード内で表示される頻度がより高いため、より見つけられやすくなります。 大サイズは、より詳細な情報を表示するのに役立ちます。 複数のサイズをサポートすることで、ユーザーがウィジェット ボードにピン留めするために選択したウィジェットを柔軟にカスタマイズできるようになります。

小さい

ウィジェットの原則である "一目でわかる" ことと "焦点を絞る" ことは、小サイズのウィジェットのデザインを決定するうえでより重要になります。 大サイズのウィジェットには快適に収まるすべての機能を、小サイズのウィジェットに無理に収めようとしないでください。 1 つのタッチ ターゲットで、ここに表示できる 1 つのユーザー対話式操作または重要な情報の一部に焦点を絞ります。

中程度

中サイズのウィジェットでは、小サイズと比較してより多くのスペースが確保できるため、より多くの機能や追加情報を含めることができます。 中サイズのウィジェットでも、小サイズのウィジェットと同じ焦点を絞ったエクスペリエンスを提供することができますが、2 から 3 のタッチ ターゲットを提供できます。

大

サイズが大きいと、より多くの情報を表示できますが、それでもコンテンツの焦点を絞って、使用しやすいものにする必要があります。 または、大サイズのカードで 1 つの画像またはトピックを強調表示すると、よりイマーシブなエクスペリエンスが得られます。 大サイズのタッチ ターゲットは、3 - 4 個までにする必要があります。

色とテーマ

Windows 11では、明るい色と暗い色の 2 つの色モードがサポートされています。 各モードは、最適なコントラストを確保するために自動的に調整される、ニュートラル カラー値のセットで構成されています。 サポートするウィジェットのサイズごとに、明るいテーマと暗いテーマ用に個別のデザインを作成し、ウィジェットがより広いオペレーティング システムとユーザーのテーマの選択内にシームレスに統合されるようにしてください。 ウィジェットの背景は、単色の明るい/暗い背景、グラデーションの濃淡、または画像の背景を使用してカスタマイズすることができます。

背景色、画像、コンテンツを選択するときは、読みやすさとアクセシビリティを確保するために色のコントラストが十分にあることを確認してください。

Web コンテンツ アクセシビリティ ガイドライン (WCAG) 2.0 レベル AA では、通常のテキストの場合は少なくとも 4.5:1、大きなテキストの場合は 3:1 のコントラスト比が必要とされています。 WCAG 2.1 では、グラフィックスおよびユーザー インターフェイス コンポーネント (フォーム入力枠など) には、少なくとも 3:1 のコントラスト比が必要とされています。 WCAG レベル AAA では、通常のテキストでは少なくとも 7:1、大きなテキストの場合は 4.5:1 のコントラスト比が必要とされています。 大きなテキストは、14 ポイント (通常は 18.66 ピクセル) で太字以上、または 18 ポイント (通常は 24 ピクセル) 以上として定義されています。

余白

各ウィジェットの周囲には 16 ピクセルの余白があり、コンテンツを配置できない 48 ピクセルの属性領域があります。 右側の余白と下側の余白に配置できる唯一のコンポーネントはページネーションドットです。 ページネーションのドットの配置例については、「ウィジェット相互作用デザインガイドライン」のページネーションセクションを参照してください。

コンテナーを使用するウィジェットの場合、各要素間の余白は 4 ピクセルで、コンテナーが余白の端に触れている必要があります。 また、コンテンツでは、さまざまな画面解像度にわたってクリーンでピクセル パーフェクトなデザインを実現するために、4 ピクセルの倍数の間隔とサイズ値も使用する必要があります。

また、コンテンツのデザイン時に、Windows アプリのContent デザインの基本の間隔と余白のガイダンスも参照してください。

タイポグラフィ

アクセシビリティのために、次の表は、上の画像に示されている表のテキストを示しています。

Segoe UI は、ウィジェットとWindows全体で使用される書体です。 上記のタイプ ランプには、アダプティブ カード デザイナーで適切なスタイルを適切に設定する方法の定式化が含まれています。 書体のスタイルは、上記の指定された数式から逸脱しないようにする必要があります。 アダプティブ カード デザイナーを使用してウィジェット テンプレートを作成する方法の詳細については、「アダプティブ カード デザイナーを使用してウィジェット テンプレートを作成するを参照してください。

アダプティブ カード デザイナー内では、タイトルと本文のコピーでは、ウィジェット テーマに関連付けられている既定の色が使用されます。 タイトルと本文のコピーをさらに区別する追加のオプションでは、既定の色の微妙なバージョンを使用できます。 アクセント カラーはハイパーリンクにのみ使用されます。

アイコン

プロフィール画像

ウィジェットにユーザー プロファイルの表示 (ソーシャル メディア フィードやストリームなど) が含まれている場合は、許可されている円形のプロファイル サイズ (96x96px、48x48px、32x32px、24x24px) のいずれかを使用します。

ツール ヒント

ツール ヒントは、タイトル テキストがウィジェットでトリミングされるときに使用できます。 ベスト プラクティスとしては、テキストはウィジェットのスペース内にきちんと収まり、トリミングの必要がないようにするべきです。ただし、言語のローカライズ、システム テキストのスケーリング、または何か (記事のタイトル、曲名など) の引用などのシナリオによっては、必ずしもそれが実現するとは限りません。 これはウィジェットの本文には適用されません。