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

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

このドキュメントでは、作成できるさまざまなタイプのウィジェットと、遵守すべき設計原則について説明します。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 ウィジェットでは、ユーザーがウィジェットをホーム画面にドロップした直後に設定内容が表示されます。

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

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