ウィジェットは、ユーザーのホーム画面をカスタマイズするための重要なコンポーネントです。多くの場合、ユーザーは 1 回のタップ操作でアプリの重要なユーザー ジャーニーを達成したり、アプリの最も重要なデータを簡単に確認したりできます。また、ユーザーのニーズに合わせてカスタマイズしたり、個々の好みに合わせて調整したりすることもできます。
ウィジェットの品質は、アプリのコンテンツや機能に対するユーザー エンゲージメントに影響します。ウィジェットの品質には、次の 3 つの主要な階層があります。
- ティア 3: 低品質 - 最低限の品質基準を満たしておらず、優れたユーザー エクスペリエンスを提供していない。
- Tier 2: 品質基準 - 有用で、使用でき、質の高いエクスペリエンスを提供します。
- レベル 1: 差別化 - パーソナライズされたヒーロー エクスペリエンスを提供する優れたウィジェットであり、ユーザーが独自で生産性の高いホーム画面を作成できるようにします。
Tier 3: 低品質
ウィジェットが標準のレイアウト、色、見つけやすさ、コンテンツの条件を満たしていない場合、低品質と見なされます。ベスト プラクティスに沿った高品質なウィジェットを作成する方法については、次のガイドラインをご覧ください。
ティア 2 - 品質基準
ウィジェットが高品質と見なされるには、ウィジェットが次のレイアウト、色、見つけやすさ、コンテンツの基準をすべて満たしている必要があります。
レイアウト
- ウィジェットは、ホーム画面にドロップしたときに、ランチャー グリッドによって設定された境界を埋める必要があります。ウィジェットのサイズは、2x2、4x2(ランチャー グリッド セル)のいずれか以上に変更できます。詳細については、サイズ設定に関するガイドラインをご覧ください。
- ウィジェットは、縦軸または横軸で他のホーム画面要素と適切に配置され、不要なスペースを占有しないようにする必要があります。
- ウィジェットは、グリッドの反対側のエッジを少なくとも 2 つに接触させる必要があります。つまり、ウィジェットを長方形である必要はありません。シェイプのエッジがグリッドの 2 つ以上のエッジに接している限り、カスタム シェイプを使用できます。
- サイズ変更が可能な場合は、ウィジェットに適切な最小サイズまたは最大サイズを設定する必要があります。これは、AppWidgetProviderInfo XML で
minWidth
、minHeight
、maxResizeWidth
、maxResizeHeight
を使用して設定できます。- ウィジェットのサイズ変更で空白スペースのみが追加される場合は、最大サイズを設定する必要があります。
- 最小サイズは、ウィジェットが価値を提供し、タップ ターゲットの要件(48 x 48)を満たす最小サイズに基づいて設定する必要があります。

すべきこと

すべきでないこと
色
- ウィジェットのテキスト ボタンとアイコンボタンは、ユーザー補助機能の要件を満たすために十分なコントラスト比が必要です(サムネイルと画像を除く)。

すべきこと

すべきでないこと
ファインド
ウィジェット選択ツールでウィジェットの正確なプレビューを表示する必要があります。これは、AppWidgetProviderInfo XML で
previewImage
とpreviewLayout
を使用して設定するか、生成されたプレビューを使用して設定できます。- ウィジェットのプレビューは、ホーム画面に追加したときに提供される機能との一貫性が保たれます。
動画 1: プレビューが正しくないウィジェット。
コンテンツ
- ウィジェットのコンテンツが常に古い、またはタイムリーでない状態になってはいけません。
- ユーザーがウィジェットからアクションを完了した後に、ウィジェットを更新する必要があります。
- ユーザーがアプリ内から関連するアクションを完了した後にウィジェットを更新する必要がある
- データが UI よりも頻繁に更新されることが想定される場合は、ユーザーがコンテンツを手動で更新できるようにする必要があります。
- ウィジェットの UI が機能している必要があります。コンテンツが切り抜かれている場合は、機能していないと判断されます。
- ウィジェットのゼロ状態と空の状態は意図的に設定し、ウィジェットがインストールされていてもユーザーがログインしていない場合は、ウィジェットの値を表示するか、行動を促すメッセージを表示する必要があります。


Tier 1 - 差別化
最適なウィジェットは、Tier 2 のすべての基準と、次のレイアウト、色、検出、システムの整合性のすべての基準を満たしています。
レイアウト
- ウィジェットが境界を埋め、縦軸または横軸で他のホーム画面要素と適切に配置され、不要なスペースを占有していない。
- シェイプはすべて、グリッドの境界の 4 つの端すべてにヒットしなければなりません。

すべきこと

すべきでないこと
ウィジェットが優先サイズをサポートしている
- ウィジェットのサイズは、2x2、4x2 のいずれかに変更できます。
ウィジェット ヘッダーが一貫して使用、適用されている
- ヘッダーの使用をおすすめする場合:
- 検索などの特定のアプリ機能へのディープリンクを提供したい場合。
- タップしたときにアプリに戻る一貫したリンクとしても機能する、アプリのブランディング アイコンを適用したい。
- ウィジェットにスクロール コンテンツ(リスト、グリッドなど)が含まれる
- ヘッダーの内容が役立つコンテキスト(To-Do リストの名前)を提供している
- ヘッダーは、次の場合に省略可能です。
- ウィジェットがフルブリードの画像(フォト)である
- スペースが限られています(高さが 2 行未満)
- ヘッダーの内容が冗長な場合。
- ヘッダーを使用する場合は、次の仕様を満たす。
- アイコン、タイトル、アクション。
- アイコンが常に表示される
- 十分なスペースがある場合にタイトルが表示される
- ウィジェット コンテキストに基づくアクション。
- 高さ 48 dp、パディング 14 dp
- アイコン、タイトル、アクション。
- ヘッダーの使用をおすすめする場合:

すべきこと

すべきでないこと
色
- ウィジェットは、システムのテーマ設定、コンテンツの色、ブランドの色に基づくカラーパレットをサポートしています。
- ウィジェットは、ライトモードとダークモードのパレットをサポートしています。
- ダイナミック カラーは、デバイス コンテキストのテーマ設定の一例です。
- ローカルカラー抽出は、アプリ コンテンツに基づくテーマ設定の例です。
- セマンティック カラーは、アプリ コンテンツベースのテーマ設定の例です。

ファインド
- プレビューにユーザー コンテンツが含まれているか、システムテーマが適用されている(生成されたプレビュー API または AppWidgetProviderInfo XML の
previewLayout
)。

- ウィジェットには、ユーザーがウィジェットの値を理解するのに役立つ名前または説明があります。
- 名前の長さが 50 文字未満です。
- 名前と説明はアプリ内で一意にする必要があります。たとえば、アプリ内で同じ名前のウィジェットを複数使用することはできません。

すべきこと

すべきでないこと
システムの整合性
- 長方形のウィジェットには、システムから提供される角の半径を使用する必要があります(OEM 固有)。

すべきこと

すべきでないこと
- 進行状況インジケーター(テーマカラーまたはブランドの同等の色の
initialLayout
内)で読み込み状態を表示します。

- カスタム ウィジェット設定エントリポイントではなく、システムの構成を使用
- アプリからウィジェットへの移動/移動時にシステム起動遷移を使用する
ウィジェットを作成する際は、このガイドで紹介したヒントを参考にしてください。最高の品質と優れたユーザー エクスペリエンスを提供したいと考えています。多くの品質バーは、標準レイアウトで満たすことができます。品質バーについて詳しくは、デザイナーは Android ウィジェット テンプレートを、デベロッパーは プラットフォーム サンプルのレイアウト コードサンプルとレイアウトのデベロッパー ガイドを参照してください。