インタラクティブなスニペットのデザイン

こんにちは Apple Design Teamで デザインを担当しているRayです 今日はインタラクティブスニペットの デザインについて学びます App Intentで表示されるコンパクトな ビューがインタラクティブスニペットです 最新の情報を表示し アプリから直接操作を行います App Intentがサポートされていれば スニペットはどこでも表示されます

たとえば Spotlight、Siri Shortcutsアプリなどが対応しています この統合により システム内での アプリの利用範囲と利便性が拡大されます スニペットは常に画面のトップに配置され 他のコンテンツに重なって表示されます ユーザーがコンテクストから外れることなく 利用できるということです 確定、キャンセル、またはスワイプで 消去されるまでそのままの状態です

このように アプリの単純なルーチンタスクや 情報を表示するには スニペットが最適です スニペットは独自のアイデンティティを 反映できる豊富なレイアウトを備えています 現在は ボタンなどの要素をサポートし 最新情報を表示できるようになっており App Intentのインタラクティブ性を 新たな次元に高めます では まずスニペットの内容と レイアウトの外観について 説明を始めます 次に 簡潔で便利なインタラクションを 作成する方法を学びます 最後に 結果や確認など さまざまなタイプの スニペットの使用方法について説明します スニペットは俊敏で瞬間的な体験を提供する App Intentで設計されています そのため コンテンツが読みやすく 理解しやすいことが重要です スニペットをひと目で把握できるように するには文字サイズが重要です スニペットのテキストはデフォルトよりも 大きなサイズに設定されています 大きなサイズの文字を使用することで 最も重要な情報に注目してもらえます レイアウトがごちゃごちゃしないように エレメントの間に 十分なスペースを設けるようにしてください スニペットの中のコンテンツを配置する場合 見やすいレイアウトにするため ビューの 周囲のコンテンツの余白を一定にそろえます こうすると スニペットが整理され 重要な点に集中できるようになります ContainerRelativeShape APIを 使用するとマージンがレスポンシブに対応し 各プラットフォームや画面サイズに 合わせて調整されます

文字サイズを大きくすると スペースに余裕がなくなります 高さが340ポイント以上のコンテンツは 含めないようにしましょう スクロールが必要になり 予期しない操作上のトラブルが生じます 最も重要な情報だけに絞り コンテンツは簡潔にまとめましょう 詳細な情報が必要な場合は スニペットをアプリの関連するビューに リンクして必要な情報をすべて表示させます 他のコンテンツの上部に表示される エクスペリエンスを設計する場合 アプリのビジュアルアイデンティティに 基づいたあざやかな背景を使用すれば スニペットを目立たせることができます しかし こうすることで逆に コンテンツが読みにくくなる場合もあります 特に スニペットを 離れた位置から見る場合 標準以上の コントラスト比に設定し コントラストをチェックすることが重要です 読みにくい場合は レイアウトや背景に対するコンテンツの コントラストを上げてみてください こうすれば背景にあざやかな色を使用しても スニペットが読みやすくなります ここまでは 読みやすくわかりやすい スニペットを作るコツを紹介しました 次は インタラクションについて説明します インタラクションによってスニペットは よりステートフルで実用的になります つまり ボタンを組み込んで ユーザーがIntentを使用する際 関連性のある簡単なアクションを 直接実行できるようになります スニペットは アプリから取得した 最新の情報を反映して 更新されたデータを 表示することもできます

インタラクティブ機能の使い方を学ぶため ここで 水追跡のインテントの 例を見てみましょう 水を追加するシンプルなボタンを 設定することで 軽いエクスペリエンスを維持しながら 情報がより実用的になります

データはスケールとぼかしを加えて 更新されます これにより アクションに対する明確で 視覚的なフィードバックが提供されます スニペット内で データを更新し アクションの成功を確認することで 自らのルーティンに関する アプリのインテントへの信頼が高まります また スニペットに 複数のボタンを含め 同時に更新したコンテンツを 設定することもできます

たとえば イコライザースニペットは 更新されたオーディオ設定を表示しながら その場で選択できる 複数のプリセットを提供します スニペットがメインのタスクを 補完する明確で関連性のある アクションを実行することを確認します インタラクティブ機能がなくても アプリの最新情報に基づいて スニペットをアニメ表示することもできます

では 今度はスニペットの対応について お話しましょう スニペットには 結果と確認という 2種類のタイプがあります 結果スニペットには 確認の結果である情報 またはそれ以上のアクションが 必要ない情報が表示されます このスニペットにはフォローアップ タスクや意思決定は必要ないため ビューの下部には「完了」という ボタンしかありません 結果タイプは注文状況などを チェックするスニペットに最適です 次は確認スニペットです 結果を表示する前にアクションを必要とする 場合は確認スニペットを使用します 例として このコーヒー注文のインテントを 見てみましょう ここにはエスプレッソの量を 変更するボタンがありますが スニペットは確認タイプです ユーザーが操作するまで コーヒーは注文されないからです ボタンのアクション動詞は「注文」のように 次に起こる動作を明確に示します 確認タイプの動詞は 以下の事前定義された オプションに変更するか インテントに合わない場合は 独自の動詞を書くこともできます

エスプレッソ2ショット入りの カフェラテなど注文を確定した後は 結果スニペットが 選択の結果を表示します このパターンはユーザーがインテントを 開始したことを検知し 完了したことを確認する際に便利です 今度はダイアログを表示する タイミングについて説明しましょう ダイアログは Siriが App Intentについて話す内容です これは音声優先の インタラクションで特に重要です たとえば ユーザーがAirPodsを使用して 画面を見ていなくても 確認の結果や返信のダイアログは 聞き取ることができます ダイアログ付きでスニペットを 表示させることもできますが ダイアログを表示させたり 音声表示できない場合でも 単体で理解できるような スニペット作成に挑戦してみてください スニペットはダイアログに頼らず 単体でインテントの目的を 伝達できるようにする必要があります こうすることで冗長性をなくし より直感的なスニペットになります

アクションを要求したり結果を表示させたり するには確認と結果を使用します では 今日学んだ内容をまとめ 次回の予告を見てみましょう 軽量でルーティンで使用するスニペットを 一目で把握できるデザイン シンプルな操作性と適切なスニペットの タイプを指定して設計します ShortcutsとSpotlightの アプリインテント構築における 新機能については 「Develop for shortcuts and spotlight with app intents」と 「Explore advances in app intents」を ご覧ください 皆さんのスニペットを見るのが楽しみです！ ありがとうございました