片手でのジェスチャー

スマートウォッチは外出先での使用に最適ですが、両手がふさがっていると操作が難しくなります。この問題を解決するため、Wear OS 7 では、OEM 向けの新しい片手ジェスチャー フレームワークと、Wear OS で Jetpack Compose を使用するデベロッパー向けの Gesture API が導入されています。この基盤となるフレームワークは、Google Pixel Watch デバイス(Google Pixel Watch 3 以降)でのみ採用されていますが、すべてのメーカーが利用できます。この API をサポートすることで、他の OEM がオプトインすると、アプリのジェスチャー サポートがエコシステム全体に自動的にスケーリングされます。

シームレスなタッチフリー エクスペリエンスを構築するには、次のガイドラインに沿って、片手ジェスチャーがアプリのエクスペリエンスに適しているかどうかを判断してください。

サポートされているジェスチャーとアクション

Wear OS ジェスチャー フレームワークは、2 種類のジェスチャー タイプ( メイン アクションと 操作を非表示)をサポートしています。Google Pixel Watch では、メイン アクションはダブルピンチ ジェスチャーにマッピングされ、操作を非表示は手首をひねるジェスチャーにマッピングされます。

ダブルピンチ: メイン アクションをトリガーします。
手首をひねる: 操作を非表示アクションをトリガーします。

メイン アクション

メイン アクションは、ユーザーが画面またはページで完了できるメインタスク(電話に出る、メディア コントロールで再生 / 一時停止を切り替えるなど)にマッピングする必要があります。ページがスクロール可能な場合、アプリは一度に 1 つの UI 要素のみをメイン アクションにマッピングできます。

電話に出る。
メディア コントロールで再生 / 一時停止を切り替える。

アラームをスヌーズする。
スクロール可能なコンテンツをスクロールする。

ダブルピンチは、ジェスチャーや音声を使用して UI 要素に移動できる場合、または要素が自動的に開く場合(通知やメディア コントロールなど)に最も便利です。UI 要素に移動する唯一の方法がタッチまたはボタンの場合、このアクションはメイン アクション ジェスチャーのユースケースとしては適していません。

操作を非表示アクション

デフォルトでは、操作を非表示アクションはシステムの「戻る」にマッピングされ、前の画面に戻ります。アプリは特定の使用例で手首をひねる操作をオーバーライドできますが、これらの例外は、非表示、ミュート、最小化のコンセプトに沿っている必要があります。オーバーライドの例としては、通話を非表示にするのではなくミュートにする、通知を非表示にするのではなく閉じるなどがあります。このアクションは、アプリ内の任意の操作にマッピングしないでください。操作を非表示アクションを「戻る」または「非表示」コマンドの一貫したインジケーターとして使用するというユーザーモデルが損なわれるため、どれほど魅力的であってもマッピングしないでください。

操作を非表示アクションは、アクティブなワークアウト画面や緊急通話中など、誤ってトリガーされるリスクがある場合は、画面で無効にすることもできます。特定の画面で手首をひねる操作を無効にするには、操作を非表示アクションをサブスクライブしますが、ディスパッチされたジェスチャー イベントに対して何も行いません。つまり、空のサブスクリプションを提供します。

クイック ジェスチャーのガイドライン

Wear OS ジェスチャー フレームワークは、割り込みとコントロールを処理するように設計されています。 スマートウォッチの完全なナビゲーションを可能にするようには設計されていません。アプリで片手ジェスチャーを採用するには、次のガイドラインに沿ってください。

  1. ナビゲーションを最小限に抑える: ジェスチャーは、通知を非表示にする、メディアを一時停止して再開するなど、1 回で完了する操作に使用します。
  2. スクロールは控えめに使用する: メイン ジェスチャー(ダブルピンチ)を使用してスクロールできますが、これはすべてのスクロール可能なコンテンツのデフォルトのエクスペリエンスにすべきではありません。ジェスチャー スクロールを有効にするのは、次の条件を満たせる場合に限ります。
    • ユーザーが片手またはハンズフリーでスクロール ビューに移動できること。たとえば、ジェスチャー、音声コマンド、自動起動する画面(メディア コントロールや地図ナビゲーションなど)を使用します。
    • コンテンツが一目でわかる価値を提供し、ワークアウトの概要など、表示されたらメイン ジェスチャー アクションを実行できるオプションの単一ボタン([完了] エッジボタンなど)以外の操作を必要としないこと。
  3. 行き止まりを避ける: ジェスチャー操作によって、タッチスクリーンや物理ボタンを使用しないとユーザーがジャーニーを先に進めない行き止まりにならないようにします。
  4. 非表示のアクションを避ける: ジェスチャーのみのアクションは非表示にしないでください。ユーザーがダブルピンチでアクションを実行できる場合は、同じタスクを実行する、タップ可能なボタンを表示する必要があります。ただし、手首をひねって戻るなどのユニバーサル アクションは、ユーザーの意図を予測するのが難しいため、例外となります。

ジェスチャー操作のフローとフィードバック

操作が使用可能で、ユーザーが操作を実行すると、次のイベント シーケンスが発生します。

  1. ジェスチャーのヒント: メイン アクション ジェスチャーが使用可能な場合、ジェスチャーを実行する手のイラストが画面にアニメーションで表示され、使用可能なジェスチャーと、ジェスチャーが作用する UI 要素がユーザーに通知されます。通常、操作を非表示アクションが画面上の UI 要素にマッピングされていない限り、ヒントは表示されません。
  2. 触覚フィードバック: ジェスチャー操作が正常に処理されると、短い触覚が再生されます。
  3. 音声と視覚的なフィードバック: タッチ操作で発生する UI 要素に関連付けられた音声または視覚的なフィードバックは、ジェスチャー アクションでもトリガーする必要があります。一貫したエクスペリエンスを提供するには、アプリの既存のタッチ音声と視覚的なコールバックをジェスチャー イベントにフックする必要があります。

    例: カメラには、ジェスチャーでトリガーする必要があるシャッター音とボタン操作が関連付けられています。

ジェスチャーのヒント、教育、設定

ジェスチャー アクションを見つけやすくするため、Google Pixel Watch には、スマートウォッチ上のインタラクティブなチュートリアルと、Gesture API 内のヒント フレームワークが用意されています。ジェスチャーの設定は、システム設定(Google Pixel Watch の場合は [設定] > [ジェスチャー] > [ハンド ジェスチャー] )でも行えます。

オンボーディングのチュートリアル

Google Pixel Watch では、インタラクティブなチュートリアルと Pixel ガイドを通じて、ハンド ジェスチャーが紹介されます。アプリ内で独自のジェスチャー チュートリアルを作成する必要はありません。代わりに、Wear OS で Jetpack Compose によって提供されるコンテキスト内のヒントを活用して、アプリ内でジェスチャーを使用できる場所をユーザーに通知します。

ダブルピンチのオンボーディング チュートリアル画面。
手首をひねるオンボーディング チュートリアル画面。

コンテキスト内のヒント

ユーザーがアプリ内でジェスチャーを見つけやすくするため、ジェスチャー アクションを物理的なアフォーダンスに関連付けるヒントを提供します。控えめなヒントは、他の UI 要素の妨げを最小限に抑え、より明確で読みやすくなります。

コンテキスト内のヒントの種類は次のとおりです。

  • ボタンのヒント
    • ボタンなどの UI 要素内にアニメーション アイコンとして表示され、ボタンラベルやアイコンなど、その要素内の一般的なコンテンツを一時的に非表示にします。
  • フローティング ヒント
    • ジェスチャーが影響する UI 要素を指す小さなバブル オーバーレイ内に含まれるアニメーション アイコン。フローティング ヒントは通常、指している UI 要素が小さすぎてヒントを表示できない場合に使用されます。 主な例はスクロールです。ヒント バブルはスクロールバーを指し、メインの操作でスクロールすることを示します。
    • ヒントは、東西南北のいずれの方向を指すこともできます。

ボタンのヒント

ボタン ジェスチャーのヒントアイコンの例

既存のアイコンまたはテキストと一時的に入れ替わります。

フローティング ヒント

フローティング ジェスチャー ヒントのアイコンの例

ボタンのヒントを表示するには小さすぎる画面上の要素を指します。

色のガイダンス:

  • ボタンのヒント
    • デフォルトでは、アニメーション ベクター型ドローアブル(AVD)の色は、ボタンアイコンまたはテキストの色(LocalContentColor)に合わせて調整されます。
    • 必要に応じて、AVD をカスタムカラーに調整できます。ただし、通常は、一時的に置き換えるコンテンツと同じ色にして、適切なコントラストを提供する必要があります。
  • フローティング ヒント
    • Tertiary カラーがヒント コンテナに適用されます。
    • AVD の色は onTertiary に調整されます。
    • ヒントの色と背景の形状の色をカスタマイズできます。

ボタンのヒントの色に関するガイダンス

ボタンのヒントの色に関するガイダンスの例

AVD の色は、ボタンアイコンまたはテキストの色と一致します。

フローティング ヒントの色に関するガイダンス

フローティング ヒントの色に関するガイダンスの例

ヒント コンテナは Tertiary を使用し、AVD は onTertiary を使用します。

ヒントのケイデンス ルール:

ユーザーがジェスチャーを見つけやすくするため、プラットフォームでは、エクスペリエンスのヒントを表示する頻度を設定できます。ヒントのケイデンス ロジックは、エクスペリエンスごとではなくグローバルです。Wear OS ジェスチャー フレームワークはケイデンスを制御し、ユーザーがケイデンスを調整するための設定(Google Pixel Watch の場合は [ジェスチャー] > [ハンド ジェスチャー] > [ジェスチャーのヒント] )を公開します。

  • ボタンのヒント
    • ジェスチャー アクションを含むアプリを初めて起動したとき、またはジェスチャー アクションを導入するアプリを更新したときに、そのアクションのヒントが少なくとも 1 回表示されます。ヒントは、 ユーザーが定義したケイデンス([常時]、[毎日]、[毎月] など)に基づいてのみ再度表示されます。 ヒントはデフォルトで [常時] に設定されています。
  • フローティング ヒント
    • フローティング ヒントは隣接するコンテンツを覆うため、エクスペリエンスごとに 1 日に 1 回しか表示されません。グローバル ヒントのケイデンスが 1 日に 1 回未満([毎日])に設定されている場合、システムはその頻度の低いケイデンスを使用します。
Google Pixel Watch のジェスチャー ヒントの設定画面
Google Pixel Watch の [ジェスチャーのヒント] 設定画面

参考情報

アプリで片手ジェスチャーを実装する方法については、 Compose を使用した片手ジェスチャーをご覧ください。