アプリ ウィジェットの概要

ウィジェットはホーム画面のカスタマイズに欠かせない要素です。これは、アプリの最も重要なデータと機能を「一目で」把握し、ユーザーのホーム画面から直接アクセスできるビューと考えることができます。ユーザーはホーム画面のパネル間でウィジェットを移動できます。また、サポートされている場合は、ウィジェット内の情報量を好みに合わせてサイズを変更することもできます。

このドキュメントでは、作成できるさまざまなタイプのウィジェットと、従うべき設計原則について説明します。Remove View API と XML レイアウトを使用してアプリ ウィジェットを作成するには、シンプルなウィジェットを作成するをご覧ください。Kotlin と Compose スタイルの API を使用してウィジェットを作成するには、Jetpack Glance をご覧ください。

ウィジェットのタイプ

ウィジェットを計画するときは、どのようなウィジェットを作成するかを考えます。通常、ウィジェットは次のいずれかのカテゴリに分類されます。

情報ウィジェット

東京はおおむね曇り、気温は 14 度、予想気温は午後 4 時から午後 7 時までの予定を表示している天気ウィジェットの例
図 1: 天気情報アプリの情報ウィジェット。

情報ウィジェットは通常、重要な情報要素を表示し、その情報が時間の経過とともにどのように変化するかを追跡します。情報ウィジェットの例としては、天気ウィジェット、時計ウィジェット、スポーツのスコア トラッキング ウィジェットなどがあります。通常、情報ウィジェットをタップすると、関連付けられているアプリが起動して、ウィジェット情報の詳細ビューが開きます。

コレクション ウィジェット

コレクション ウィジェットは、ギャラリー アプリの画像のコレクション、ニュースアプリの記事のコレクション、通信アプリのメールやメッセージのコレクションなど、同じタイプの複数の要素の表示に特化しています。コレクション ウィジェットは、縦方向にスクロールできます。

コレクション ウィジェットは通常、次のユースケースに焦点を当てています。

  • コレクションを閲覧します。
  • コレクションの要素を、関連するアプリでその詳細ビューで開きます。
  • Android 12(API レベル 31)では複合ボタンをサポートするなど、要素の操作(完了マークを付けるなど)

コントロール ウィジェット

「ライトリスト」というアプリのウィジェットで、「ベッドルーム」、「キッチン」、「リビングルーム」というラベルの切り替えスイッチが表示され、最初の 2 つの切り替えスイッチがオフになっている
図 4. コントロール ウィジェットの例

コントロール ウィジェットの主な目的は、よく使用する機能を表示して、ユーザーがアプリを開くことなくホーム画面からトリガーできるようにすることです。アプリのリモコンと考えることができます。コントロール ウィジェットの例として、ユーザーが家の照明をつけたり消したりすることができるホーム コントロール ウィジェットがあります。

コントロール ウィジェットを操作すると、関連する詳細ビューがアプリ内で開きます。これは、コントロール ウィジェットの関数がデータを出力するかどうかによって異なります(検索ウィジェットの場合など)。

ハイブリッド ウィジェット

「低評価」、「戻る」、「再生/一時停止」、「早送り」、「高く評価」のボタンを表示する一般的な音楽アプリ。アーティストとトラックはそれぞれ「アーティスト」と「サンプル音楽」と表示されます。
図 5. 音楽アプリ ウィジェットの例

前のセクションで説明した情報、収集、制御のいずれかのタイプのウィジェットを表すウィジェットもありますが、多くのウィジェットは、異なるタイプの要素を組み合わせたハイブリッドなものです。たとえば、音楽プレーヤー ウィジェットは主にコントロール ウィジェットですが、情報ウィジェットのように、現在再生中のトラックもユーザーに表示されます。

ウィジェットを計画する際は、1 つの基本タイプを中心に設計し、必要に応じて他のタイプの要素を追加します。

ウィジェットを Google アシスタントと統合する

あらゆる種類のウィジェットが、ユーザーの音声コマンドに応じて Google アシスタントによって表示されます。ウィジェットは App Actions を実行するように構成できます。これにより、ユーザーは Android や Android Auto などのアシスタント サーフェスで、クイック回答とインタラクティブなアプリ エクスペリエンスを実現できます。アシスタントのウィジェット フルフィルメントについて詳しくは、App Actions を Android ウィジェットと統合するをご覧ください。

ウィジェットの制限

ウィジェットは「ミニアプリ」と考えることができますが、ウィジェットを設計する前に理解しておくべきいくつかの制限事項があります。

操作

ウィジェットはホーム画面に配置されるため、ホーム画面で設定されているナビゲーションと共存する必要があります。そのため、全画面アプリに比べてウィジェットで使用できる操作のサポートが制限されます。アプリではユーザーが画面を水平方向に移動できる場合がありますが、このジェスチャーはホーム画面間を移動するためにすでにホーム画面で行われています。

ウィジェットで利用できるジェスチャーは、タップ縦スワイプのみです。

エレメント

ウィジェットで利用可能な操作には制限があるため、制限付き操作に依存する一部の UI 構成要素はウィジェットでは利用できません。サポートされている構成要素の全リストとレイアウトの制限の詳細については、ウィジェット レイアウトを作成する柔軟なウィジェット レイアウトを提供するをご覧ください。

設計ガイドライン

ウィジェットのコンテンツ

ウィジェットは、アプリで利用できる新しい興味深いコンテンツを「広告」することで、ユーザーをアプリに惹きつける優れた方法です。

新聞の一面のティーザーのように、ウィジェットはアプリの情報を集約、集中し、アプリ内のより詳細な情報とのつながりを提供します。ウィジェットは「おやつ」の情報で、アプリが「食事」である、というような言い方をするかもしれません。ウィジェットに表示される情報よりも詳細な情報項目をアプリで表示するようにしてください。

純粋な情報コンテンツだけでなく、アプリのよく使用する領域へのナビゲーション リンクをウィジェットに表示することも検討してください。これにより、ユーザーはより迅速にタスクを完了し、アプリの機能範囲をホーム画面まで広げることができます。

ウィジェットのナビゲーション リンクには、次のようなリンクが適しています。

  • 生成関数: 新しいドキュメントやメッセージの作成など、ユーザーがアプリの新しいコンテンツを作成できる関数です。

  • トップレベルにアプリを開く: 情報要素をタップすると、通常は下位の詳細画面に移動します。アプリのトップレベルにアクセスできるようにすることで、ナビゲーションの柔軟性が高まり、ユーザーがホーム画面からアプリに移動するために使用する専用のアプリ ショートカットを置き換えることができます。この機能にアプリアイコンを使用すると、表示するデータがあいまいな場合にウィジェットを明確に識別できます。

ウィジェットのサイズ変更

標準の Google 時計ウィジェット
図 6. 標準の Google 時計ウィジェット。

サイズ変更可能なウィジェットを長押しして離すと、ウィジェットがサイズ変更モードになります。ユーザーはドラッグ ハンドルまたはウィジェットの角を使用して、好みのサイズを設定できます。

サイズ変更を使用すると、ユーザーはホーム画面の配置グリッドの制約内でウィジェットの高さと幅を調整できます。ウィジェットを自由にサイズ変更できるようにするか、水平または垂直のサイズ変更に制限するかを決定できます。ウィジェットが本質的にサイズが固定されている場合は、サイズ変更をサポートする必要はありません。

ユーザーがウィジェットのサイズを変更できるようにすると、次のようなメリットがあります。

  • 各ウィジェットに表示する情報の量を微調整できる。
  • ホームパネルのウィジェットとショートカットのレイアウトをより細かく調整できます。

作成するウィジェットのタイプに応じて、ウィジェットのサイズ変更方法を計画します。通常、リストベースまたはグリッドベースのコレクション ウィジェットは単純です。ウィジェットのサイズを変更すると垂直方向のスクロール領域が拡大または縮小されるためです。ウィジェットのサイズに関係なく、ユーザーはすべての情報要素をスクロールして表示できます。

情報ウィジェットはスクロール不可であり、すべてのコンテンツが所定のサイズに収まる必要があるため、より詳細な計画を立てる必要があります。ウィジェットのコンテンツとレイアウトは、ユーザーがサイズ変更操作で定義したサイズに合わせて動的に調整する必要があります。

以下の例では、ユーザーは 3 ステップで天気ウィジェットのサイズを変更できます。ウィジェットのサイズが大きくなるにつれて、現在地の天気に関するより豊富な情報が公開されます。

場所の名前(東京)、気温(14°)、部分的な曇りを示す記号が表示されている、最小の 3x2 グリッドサイズの天気ウィジェットの例
図 7. 3x2 グリッドの「小」サイズの天気ウィジェットの例


5x2 の「中程度」サイズの天気ウィジェットの例。グリッドのサイズが 3x2 で、UI に「おおむね曇り」というラベルが追加され、午後 4 時から午後 7 時の気温が予測される。
図 8. 5x2 グリッドの「中程度」サイズの天気ウィジェットの例


5x4 の「大」サイズの天気ウィジェットの例。グリッドのサイズが 3x2 と 5x2 の UI と、火曜日から金曜日までの天気予報が表示されている
図 9. 5x4 グリッドの「large」サイズの天気ウィジェットの例。

ウィジェットのサイズごとに、表示されるアプリの情報の量を決定します。サイズが小さい場合は、重要な情報を重視し、ウィジェットが水平方向や垂直方向に大きくなってコンテキスト情報を追加します。

レイアウトに関する考慮事項

開発に使用するデバイスの配置グリッドの寸法に応じてウィジェットをレイアウトしたくなるものです。これは初期の近似値として有用な場合がありますが、次の点に注意してください。

  • 可変グリッド ディメンションではなく、複数の「サイズバケット」にわたってウィジェットのサイズ変更戦略を計画すると、最も信頼性の高い結果が得られます。
  • セルの数、サイズ、間隔は、デバイスによって大きく異なります。そのため、ウィジェットが柔軟で、想定よりも多いまたは少ないスペースに対応できることが非常に重要です。
  • ユーザーがウィジェットのサイズを変更すると、システムはウィジェットが自身を再描画できる dp サイズ範囲を返します。
  • Android 12 以降では、サイズ属性をより細かく設定し、レイアウトをより柔軟に設定できます。これには次のものが含まれます。

ユーザーによるウィジェット構成

ウィジェットを実際に活用するには、ユーザーによる設定が必要になる場合があります。たとえば、ユーザーがメールフォルダを選択しないと受信トレイを表示できないメール ウィジェットや、静的な写真ウィジェットでは、ギャラリーから画像を選んで表示させる場合などです。Android ウィジェットでは、ユーザーがウィジェットをホーム画面にドロップした直後に、設定の選択内容が表示されます。

ウィジェットのデザインのチェックリスト

  • ウィジェットにはひと目で把握できる少量の情報のみを表示する。アプリ内の情報を開きます。
  • 目的に合ったウィジェット タイプを選択する。
  • ウィジェットのコンテンツがどのようにさまざまなサイズに適応するかを計画します。
  • ウィジェットのレイアウトは画面の向きやデバイスを問わないように、伸縮自在に調整できます。
  • ウィジェットに追加の構成が必要かどうかを検討します。