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

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

このドキュメントでは、作成できるさまざまなタイプのウィジェットと、設計の原則について説明します。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 ビルディング ブロックはウィジェットでは使用できません。サポートされている構成要素の完全なリストとレイアウト制限の詳細については、ウィジェット レイアウトを作成する柔軟なウィジェット レイアウトを提供するをご覧ください。

設計ガイドライン

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

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

新聞の 1 面のティーザーのように、ウィジェットはアプリの情報を 1 か所にまとめて表示し、アプリ内の詳細な情報を表示します。アプリは「食事」であるのに対して、ウィジェットは「軽食」である、と言うかもしれません。アプリでは、ウィジェットに表示される情報よりも、より詳しい情報を表示するようにしてください。

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

ウィジェットのナビゲーション リンクとして適した候補は次のとおりです。

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

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

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

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

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

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

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

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

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

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

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

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


5x2「中」サイズの天気ウィジェットの例。3x2 グリッドサイズのすべての UI、「ほぼ曇り」というラベル、午後 4 時から午後 7 時までの気温予測など
図 8. 5x2 グリッドの「中」サイズの天気ウィジェットの例。


3x2 と 5x2 のグリッドサイズのすべての UI と、火曜日から金曜日の天気予報を含む、5x4 の「大」サイズの天気ウィジェットの例
図 9. 5x4 グリッドの「大」サイズの天気ウィジェットの例

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

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

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

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

ユーザー別のウィジェット設定

場合によっては、ウィジェットが有効になる前にユーザーによるセットアップが必要となることがあります。たとえば、メール ウィジェットでは受信トレイを表示する前にメールフォルダを選択する必要があり、静的な写真ウィジェットではギャラリーから画像を割り当てる必要があります。Android ウィジェットは、ユーザーがウィジェットをホーム画面にドロップした直後に構成の選択肢を表示します。

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

  • ウィジェットにはひと目で把握できる少量の情報のみを表示する。アプリ内の情報を開きます。
  • 目的に合ったウィジェット タイプを選択する。
  • ウィジェットのコンテンツをさまざまなサイズに適応させる方法を計画します。
  • レイアウトが引き伸ばされたり縮小されたりできるようにして、ウィジェットのレイアウトを向きやデバイスから独立させます。
  • ウィジェットに追加の設定が必要かどうかを検討してください。