Design great App Clips

ハイライト

Apple は、App Clip が完全なアプリの軽量ネイティブ エクスペリエンスとして機能することを許可しており、App Clip コード、NFC、QR コード、マップ、Safari、メッセージを通じて特定のシナリオで起動され、単一のタスク、最短のプロセス、クリア カード、およびタスク完了後の完全なアプリ ガイダンスに焦点を当てた設計を要求しています。

主要内容

App Clipの設計は特定のタスクから始まります。コーヒーショップの例における最小限のプロセスは、メニューを閲覧し、注文し、Apple Pay で支払い、取引が完了した後に完全なアプリをダウンロードするよう求めることです。 (16:08) 駐車場の例の最小限のプロセスは、駐車時間の料金を支払い、有効期限が切れる前に通知を送信し、ユーザーが通知をクリックした後にリモートで時間を遅らせることです。 (16:33)

Safari の商品詳細ページは、別のタイプの入り口です。Etsy は詳細ページにスマート アプリ バナーを配置して、ユーザーが対応するアプリ クリップに直接入力できるようにします。 (08:16) Apple はまた、Safari ポータルが Web 製品に対応する App Clip の部分を自動的に開き、ユーザーが再度製品に戻る手順を省く必要があることも強調しました。 (09:56) 完成したアプリからアプリクリップを抽出する場合、紹介ページ、ログインページ、グローバルナビゲーション、タブ、設定、管理入口を削除する必要があります。 Apple でサインインは、登録が必要な場合にのみ使用されます。 (18:56)

App Clip はまったく逆の位置にあります。これは、ネイティブ テクノロジーを使用して、ユーザーが必要なときに必要な場所に表示する完全なアプリの軽量バージョンです。アプリクリップコード、NFCタグ、QRコード、マップ、Safari、メッセージから入力できます。ユーザーが使用した後、拭き取るとシステムがクリーンアップします。より高速なアクセスやより多くの機能が必要な場合は、対応する完全なアプリをダウンロードしてください。 (01:01)

このセッションの焦点は、設計上の決定です。 App Clip は、アプリ全体を縮小して収まるようにするべきではありません。物理タグは入口コンテキストをデフォルトの状態に変更する必要があります。ストア タグはストアを直接選択し、テーブル タグはテーブル番号を直接取り出します。 (06:08)

Safari ポータルもコンテキストを保持します。 Etsy の例では、製品が配置されている App Clip セクションに直接移動するため、ユーザーが一般的なホームページに誘導されることはありません。 (10:04)

エクスペリエンスに入る前に、App Clip カードはまず、それが何であるか、何ができるか、そしてなぜ開く価値があるのか​​を説明する必要があります。これは App Store の製品ページに似ており、ユーザーが App Clip を開くかどうかを決定する前に表示される導入部分です。 (10:49) エクスペリエンスに入った後、プロセスでは 1 つのタスクに必要なステップのみが保持されます。コーヒー App Clip は、タスク完了後のメニュー、注文、Apple Pay、およびダウンロードのプロンプトを担当します。駐車場 App Clip は、支払い、有効期限通知、遠隔遅延の責任を負います。 (16:08) (16:33)

詳細

ディスカバリーエントリーはタスクコンテキストを運ぶ必要があります

(05:02) App Clip は、App Store の検索ではなく、オンサイトで発見されます。物理的な入り口には、App Clip コード、NFC タグ、QR コードが含まれます。 Apple は、各入力方法が明確なタスク コンテキストに対応している必要があることを強調しています。

キーポイント:

• App Clip コードの中央には NFC タグを含めることができ、外側の円はスキャン可能なビジュアル コードです。デスクトップ、看板、ポスター、またはユーザーの手の届かない場所に配置するのに適しています。
• 同じコーヒーショップの異なる店舗では、App Clip が現在の店舗メニューを自動的に表示できるように、異なるタグを使用する必要があります。
• 同じストア内の異なるテーブルでも異なるタグを使用できるため、注文を自動的にテーブル番号にバインドできます。
• これにより、場所の選択とテーブル番号の選択が保存され、ユーザーが間違った場所を選択するリスクも軽減されます。

(07:00) App Clip は場所に関連付けることもできます。リンクすると、マップの場所カードに表示されることがあります。セッションで明確に挙げられた例は、Panera Bread などの食品アプリです。ユーザーは店舗を訪れる前に予約したり、テイクアウトを注文したりできます。 App Clip が特定の場所で十分に役立つ場合は、Siri の提案や Spotlight で提案される場合もあります。

キーポイント:

• この例のマップの入り口は食事の場所に対応しており、事前注文やテイクアウトをサポートできます。
• Siri の提案は、高頻度の位置関連のエクスペリエンスに適しています。
• 設計時には、ユーザーはコードをスキャンしなくても、対応する場所のタスク ページに直接入力する必要があることを想定する必要があります。

Safari とメッセージは純粋にデジタルなシナリオに適しています

(08:16) 一部のエクスペリエンスには物理的な場所がなく、ユーザーは Safari スマート アプリ バナーからアプリ クリップに入ることができます。 Etsy のセッションの例は商品詳細ページで、バナーによってユーザーは対応する App Clip に移動できます。

(09:24) Apple はまた、Web 上で完了するのが難しく、App Clip が取り組むのに適したいくつかのタイプのエクスペリエンスを挙げています: ビデオの録画と編集、Bluetooth デバイスの接続、拡張現実でのインタラクティブ 3D シーンの表示。

キーポイント:

• Safari バナーは、より優れたネイティブ エクスペリエンスを提供する App Clip ページに表示される必要があります。
• フルアプリがインストールされている場合、バナーによりフルアプリが開きます。
• App Clipを開いた後は、Webページに対応する特定のコンテンツにドロップする必要があり、ユーザーはホームページから再度検索することはできません。
• メッセージで同じリンクを共有すると、受信者は App Clip を直接開くこともできます。

App Clip カードは非常に短い自己紹介です

(10:49) App Clip を開く前に、ユーザーには最初に App Clip カードが表示されます。これは、App Store の製品ページの役割の一部を担っており、このエクスペリエンスが誰から来たのか、それによって何が実現できるのか、ページを開いたときに何が起こるのかをユーザーに伝えます。

キーポイント:

• 通常、タイトルにはアプリ名またはブランド名が使用されます。エクスペリエンスが 1 つの機能のみに焦点を当てている場合は、その機能をタイトルに含めることができます。
• App Clip のブランドに初めて触れる人も多いため、サブタイトルでは App Clip の使命を説明する必要があります。
• ヘッダー画像には、場所の写真、サービスの写真、ブランド グラフィックまたはロゴ関連のグラフィックを使用し、スクリーンショットや長い段落のテキストは避けてください。 ・操作ボタンは「開く」「見る」「再生」から選択可能で、それぞれ一般作業、情報閲覧、メディア、ゲームに適しています。
• 下部の帰属リンクは完全なアプリに戻ります。プライバシー ポリシー、開発者情報、ダウンロードの入り口がすべて入力されます。

最小限のプロセスはタスクから始まります

(15:12) 優れた App Clip の共通点は、シンプルさ、スピード、集中力です。設計する前に、完了する単一のタスクを決定し、そのタスク以外のコンテンツを削除します。

キーポイント:

• Coffee App Clip の最小限のプロセスは、メニューを閲覧し、注文し、Apple Pay で支払うことです。
• App Clipの駐車の最低限のプロセスは、駐車時間を選択し、料金を支払い、有効期限が切れる前にユーザーに通知することです。
• EC App Clipの最低限のプロセスは、商品を閲覧し、ショッピングカートに追加し、取引を完了することです。
• レストランのテーブルサイド App Clip は、各テーブルに独立した App Clip コードを配布し、コードをスキャンした後、直接注文して支払いを行う必要があります。
• AR App Clipはカメラビュー、周囲情報の注釈、入り口の共有のみを提供します。

(18:24) アプリ全体から App Clip を抽出する場合、Apple は最初に特定のタスクを選択することを推奨しています。コーヒーアプリには注文、飲み物の受け取り、店舗検索、アカウント作成などの機能がある場合がありますが、App Clip は注文を保持するだけです。

キーポイント:

• お気に入り、近くのストア、設定、管理ページなど、単一のタスクに関連しないポータルを削除します。
• 紹介ページ、チュートリアル、ようこそページを開かないようにします。ユーザーはエントリーする時点ですでに明確な目的を持っています。
• ログイン ページやアカウント ページを避けてください。登録が必要な場合は、「Apple でサインイン」を使用して入力コストを削減します。
• App Clip は短いタスクのみを実行するため、グローバル ナビゲーションや多くのタブは必要ありません。

システムコンポーネントは現在のタスクを実行する必要があります

(19:32) App Clip は通知を送信できます。デフォルトでは、最初の使用後 8 時間の間通知を送信できます。エクスペリエンスが複数日に渡る場合は、通知機能を 1 週間延長するための明示的な承認をリクエストできます。

キーポイント:

• 通知は、駐車場の有効期限が近づいているなど、明示的なユーザーのアクションにのみ応答する必要があります。レンタカーなど、タスクが複数日に渡る場合は、通知機能を拡張するために明示的な承認を要求できます。
• プロモーションや突然の通知を送信しないでください。
• App Clip内でタスク全体が完了した場合、通知を送信する必要はありません。

(20:17) 取引を行う際は、Apple Pay の使用を優先してください。これにより、ユーザーは銀行カードと住所を再入力する必要がなくなりました。完全なアプリのプロモーションはメインタスクの完了後に配置する必要があり、最初に App Clip がその価値を証明できるようにします。

キーポイント:

• Apple Pay は、ここで説明した注文、駐車場、電子商取引でのショッピング、テーブル チェックアウトに適しています。
• フルアプリのダウンロードプロンプトは、追加の収益を説明する必要があります。レストランの例では、完全なアプリで事前注文、テイクアウト、配達を提供できます。
• お気に入りの保存と販売通知の受信は、オンライン ストアでの取引後に「Apple でサインイン」を提供する利点の一部であり、完全なアプリのダウンロード プロンプトと混同しないでください。
• App Clip 自体は独立した価値を持つ必要があり、完全な App をダウンロードするための入り口としてのみ使用することはできません。

重要ポイント

• やるべきこと: App Clip を注文するテーブルを作成します。 実行する価値がある理由: セッションでは、テーブルごとに異なるタグを使用でき、App Clip は店舗とテーブル番号を自動的に把握できると述べました。 開始方法: 各テーブルに独立した URL を生成し、QR コードをスキャンしてメニューを直接開き、チェックアウトに Apple Pay を使用します。完了後、テイクアウトおよびデリバリー機能を利用するために完全なアプリをダウンロードするよう求められます。

• やるべきこと: 駐車場拡張機能 App Clip を作成します。 実行する価値がある理由: 駐車場の例では、支払い後の通知による有効期限のリマインダーと、通知から App Clip に戻るまでのリモート遅延を示しています。 開始方法: 支払い後 8 時間以内にタスク通知を手配します。ユーザーは通知をクリックして更新ページに入ります。

• 手順: 製品詳細ページを Safari App Clip に接続します。 実行する価値がある理由: Safari スマート アプリ バナーを使用すると、Web ページ上の特定の製品をネイティブの購入プロセスに入れることができるため、製品を再度検索する必要がなくなります。 開始方法: ネイティブ エクスペリエンスに適した詳細ページのバナーのみを表示します。 App Clip は製品 URL を読み取り、同じ製品を直接表示し、Web ページから完全なアプリへのアップグレード パスを保持します。

• やるべきこと: 中小企業向けにブランドの App Clip を作成します。 実行する価値がある理由: このセッションでは、アイスクリームの配達を例として、小規模販売者がプラットフォーム アプリへの帰属を維持しながら、より大きなプラットフォームを通じて独自のブランド エクスペリエンスを提供できることを説明します。 開始方法: 加盟店ごとに独立したカードタイトル、ヘッダー画像、入り口 URL を用意します。 App Clipには販売者の注文や配送のプロセスのみが表示されます。

• やるべきこと: シーン指向の AR アプリクリップを作成します。 実行する価値がある理由: セッションの山頂認識の例は、App Clip が短期間の場所固有のエクスペリエンスでカメラと AR を使用できることを示しています。 開始方法: 開いた後、カメラビューに入り、周囲の山の名前、説明、共有ボタンを重ね合わせ、タスクの終わりとして共有入り口を維持します。

関連セッション

• App Clip を探索する — まず、App Clip の位置付け、トリガー エントリ、および完全なアプリ全体との関係を理解し​​ます。
• App Clip を構成してリンクする — URL、App Clip コード、NFC、QR コード、マップ、Safari、関連ドメイン、App Store Connect の構成について学びます。
• App Clip を合理化する — App Clip のタスクの焦点、トランザクション フロー、通知、位置確認、完全な App アップグレード パスの最適化を継続します。
• 他のビジネス向けの App Clip を作成する — プラットフォーム アプリが複数の販売者にカスタマイズされた App Clip エクスペリエンスを提供する方法を学びます。