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

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

このページでは、開発の参考となるようないくつかのタイプのウィジェット例と、設計上の原則を紹介します。アプリ ウィジェットを実際に作成する際には、アプリ ウィジェットを作成するをご覧ください。

ウィジェットのタイプ

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

情報ウィジェット

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

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

コレクション ウィジェットは、ギャラリー アプリからの画像のコレクション、ニュースアプリからの記事のコレクション、コミュニケーション アプリからのメールやメッセージのコレクションなど、同じタイプの複数の要素を表示することに特化したウィジェットです。コレクション ウィジェットでは通常、コレクションをブラウジングする利用場面と、コレクションの要素を開いて詳細ビューを表示する利用場面が考えられます。コレクション ウィジェットは上下にスクロールできます。

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

コントロールウィジェットの主な目的は、ユーザーがよく使う機能を、アプリを最初に開かなくともホーム画面から直接起動できるようにすることです。アプリのリモコンと考えるとわかりやすいでしょう。コントロール ウィジェットの典型的な例として音楽アプリ ウィジェットがあります。音楽アプリ ウィジェットでは、実際の音楽アプリの外部から音楽トラックを再生、一時停止、スキップできます。

コントロール ウィジェットを操作すると、関連する詳細ビューに進む場合と進まない場合があります。この違いは、コントロール ウィジェットの機能によってデータセットが生成されるかどうか（検索ウィジェットの場合など）によります。

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

すべてのウィジェットがおおむね上記の 3 つのタイプのいずれかに重点を置いたものとなりますが、実際には多くのウィジェットが、異なるタイプの要素を組み合わせたハイブリッド ウィジェットです。

ウィジェットの計画にあたっては、基本タイプから主とするものをいずれか 1 つ選び、必要に応じて他のタイプの要素を追加します。

ウィジェットの制限

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

操作

ウィジェットはホーム画面に表示されるため、ホーム画面のナビゲーションと共存する必要があります。このため、ウィジェットで行える操作はフルスクリーンのアプリに比べて制限されます。たとえば、アプリが横向きに画面間を移動できるビュー ページャーに対応していても、その操作はすでにホームパネル間の移動に割り当てられています。

ウィジェットで行えるのは以下の操作のみです。

• タップ
• 上下のスワイプ

要素

上記のような操作の制限により、制限されている操作を必要とする UI ビルディング ブロックはウィジェットでは使用できません。サポートされているビルディング ブロックの一覧とレイアウトの制約に関する詳細については、アプリ ウィジェット API ガイドの「アプリ ウィジェットのレイアウトを作成する」をご覧ください。

設計ガイドライン

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

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

新聞の一面に載るリードのように、ウィジェットはアプリの情報をコンパクトに要約して伝えた上で、アプリ内にある詳細情報に誘導する必要があります。たとえれば、ウィジェットは「軽食」でアプリは「食事」のようなものです。つまり、アプリでは必ず、そのトピックについてウィジェットで表示した情報より詳細な情報を表示する必要があります。

ウィジェットのナビゲーション

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

ウィジェットに表示するナビゲーション リンクの例:

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

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

サイズ変更では、ホームパネル配置グリッドの範囲内でウィジェットの高さと幅を調整できます。ウィジェットのサイズを自由に変更できるようにするか、縦または横のサイズ変更のみ可能とするかを指定できます。そのウィジェットがその性質上、必然的に固定サイズとなる場合は、サイズ変更をサポートする必要はありません。

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

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

ウィジェットのサイズ変更の計画は、作成するウィジェットのタイプによって異なってきます。リストやグリッド形式のコレクション ウィジェットでは通常、シンプルな計画になります。ウィジェットのサイズを変更すると、上下のスクロール領域が拡大または縮小されるだけだからです。ウィジェットのサイズに関係なく、ユーザーはすべての情報要素をスクロールして表示できます。一方、情報ウィジェットはスクロール可能でなく、すべてのコンテンツが所定のサイズに収まる必要があるため、より詳細な計画が必要になります。ユーザーがサイズ変更操作で指定したサイズに合うようにウィジェットのコンテンツとレイアウトを動的に調整する必要があります。

このシンプルな例では、ユーザーは天気ウィジェットの幅を 4 段階に拡大し、ウィジェットの大きさに合わせて現在の場所の天気に関するより詳細な情報を表示することができます。

ウィジェットのサイズごとに、アプリの情報をどれくらい表示するかを決定します。小さいサイズでは特に重要な情報に限定し、ウィジェットが横方向と縦方向に大きくなるにつれてより多くの関連情報が表示されるようにします。

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

ウィジェットのレイアウトは、開発に使用する特定のデバイスの配置グリッドのサイズに合わせて考えたくなるものです。この方法は、ウィジェットのレイアウトを設定するにあたって最初に行うおおまかな設計としては有用ですが、以下の点に注意してください。

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

ウィジェットの設定

チェックリスト

• ウィジェットにはひと目で把握できる少量の情報のみを表示する。情報の詳細はアプリ内で表示する。
• 目的に合ったウィジェット タイプを選択する。
• サイズ変更可能なウィジェットについては、ウィジェットのコンテンツをどのように各種サイズに合わせるかを計画する。
• 拡大と縮小に対応できるレイアウトにして、ウィジェットの向きとデバイスが互いに依存しないようにする。