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

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

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

ウィジェットのタイプ

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

情報ウィジェット

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

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

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

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

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

  • コレクションをブラウジングしている。
  • コレクションの要素を開いて、関連するアプリの詳細ビューを表示する。
  • 要素の操作(完了のマーク付けなど) - Android 12(API レベル 31)では複合ボタンがサポートされています。

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

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

コントロール ウィジェットの主な目的は、よく使う機能を表示して、ユーザーがアプリを開かなくてもホーム画面から起動できるようにすることです。アプリのリモコンと考えるとわかりやすいでしょう。コントロール ウィジェットの例として、家の中で照明のオン / オフを切り替えることができるホーム コントロール ウィジェットがあります。

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

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

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

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

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

ウィジェットを Google アシスタントと連携させる

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

ウィジェットの制限

ウィジェットは「ミニアプリ」と理解して構いませんが、ウィジェットの設計に着手するにあたっては以下の制限事項にご注意ください。

ジェスチャー

ウィジェットはホーム画面に表示されるため、ホーム画面のナビゲーションと共存する必要があります。これにより、全画面表示のアプリと比較して、ウィジェットで利用できるジェスチャーのサポートが制限されます。アプリではユーザーが画面を横方向に移動できる場合がありますが、そのジェスチャーはホーム画面間の移動を目的としてホーム画面ですでに使用されています。

ウィジェットで行えるのは、タップ縦方向へのスワイプのみです。

要素

ウィジェットで使用できる操作には制限があるため、制限されている操作を必要とする UI ビルディング ブロックはウィジェットでは使用できません。サポートされているビルディング ブロックの一覧とレイアウトの制約に関する詳細については、ウィジェット レイアウトを作成する柔軟なウィジェット レイアウトを提供するをご覧ください。

設計ガイドライン

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

ウィジェットは、アプリで利用できる新しい魅力的なコンテンツを「宣伝」することでユーザーをアプリに呼び込む優れた仕組みです。

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

純粋な情報コンテンツに加えて、アプリのよく使用されている部分へのナビゲーション リンクをウィジェットに提供することを検討しましょう。このようにすると、ユーザーがタスクをすばやく処理でき、アプリの機能をホーム画面でも利用できるようになります。

ウィジェットのナビゲーション リンクの例:

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

  • アプリをトップレベルで開く: 通常、情報要素をタップすると、下位の詳細画面に移動します。アプリのトップレベルにアクセスできるようにすると、より柔軟なナビゲーションが可能になり、アプリのホーム画面からアプリに移動する手段として使用される専用ショートカットの代わりに利用できるようになります。また、この機能にアプリアイコンを使用すると、表示されているデータが曖昧な場合でも何のウィジェットなのかがわかりやすくなります。

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

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

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

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

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

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

作成するウィジェットのタイプに応じて、ウィジェットのサイズ変更戦略を計画します。リストやグリッド形式のコレクション ウィジェットでは通常、シンプルな計画になります。ウィジェットのサイズを変更すると、上下のスクロール領域が拡大または縮小されるだけだからです。ウィジェットのサイズに関係なく、ユーザーはすべての情報要素をスクロールして表示できます。

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

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

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


5x2 の「中」サイズの天気ウィジェットの例。3x2 グリッドサイズの UI のすべてに加えて、「曇り」のラベルと午後 4 時から午後 7 時までの気温予報が表示されています。
図 8. 5x2 グリッドの「中」サイズの天気ウィジェットの例。


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

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

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

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

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

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

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

ウィジェットの設計チェックリスト

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