優れたApp Clipをデザインする

こんにちは WWDCへようこそ

“優れたApp Clipsをデザインする” Appleデザインチームのグラント・ポールです 同僚のヒーナ・コウも後ほど登場します 本日はApp Clipsのデザインに 必要なことを詳しくお話しします 私たちもワクワクしています 早速 始めましょう まずお話しするのは App Clipsとは何かということと 既存のアプリケーションとの関係です それからApp Clipsの 取得方法をご説明します App ClipsはApp Storeで 見つかるものではありません 最後に より使いやすいApp Clipsに するためのポイントと ユーザーインターフェースについて ご紹介します App Clipsとは何でしょう App Clipsは 軽量型のアプリケーションです アプリケーションの機能の一部を 必要な場面で提供します ネイティブなエクスペリエンスであり 既存のアプリケーションと 同じ技術を使用します App Clipsは軽いので すぐに利用できます アプリケーションの ダウンロードは不要です むしろアプリケーションを まだ持っていない人や 知らない人に有益です App Storeを検索して見つける アプリケーションと違って App Clipsは必要な時に現れます 街中ではコードやタグを使って 入手できます App Clips専用の新しいコードも作りました iOSに内蔵されたアプリケーションからも App Clipsが使えます マップやSafariなどです App Clipsの最適な活用事例については 後ほどお話しします 最後に重要なことですが App Clipsはデバイスに残りません 使い終わると削除されます App Clipsをデバイス上で管理したり 削除する必要はありません すべて自動で行われます またApp Clipsが必要になったら 同じ場所から取得し直せばよいのです すぐに使いたい時は 元のアプリケーションをダウンロードすれば App Clipsで使える機能に加えて アプリケーションのみの機能も使えます これがApp Clipsです どんなものかお見せします これはおなじみの アプリケーションのアイコンです

こちらはApp Clipsのアイコンです 元のアイコンが 自動的に点線で囲まれます App Clipsのアイコンを作るために 特に何かする必要はありません 実際にApp Clipsを使ってみましょう NFCタグをiPhoneでタップします

App Clipsの情報が記載された App Clipカードが瞬時に表示されます そのApp Clipsを使う場合は Openをタップします するとApp Clipカードが消え 読み込みが終了します これで準備完了です App Clipsはとても速く簡単に使えます

App Clipsはどんな用途にも使えます 他のカテゴリーや使用実例のセッションで 多くのアイデアを紹介しています さらに我々は新たなアイデアが 出てくることを楽しみにしています それはあなたのアイデアかもしれません App Storeにあるような すばらしいアプリケーションと同じです これまで可能性のなかった場所を App Clipsが開拓し 新しいアイデアを 生み出してほしいのです App Clipsで切り開ける可能性が あるのが中小企業です 中小企業には完全なアプリケーションを 作るための環境がありません そのため中小企業は 他社が作った大きなアプリケーションの 一部として出てきます 例えば このアプリケーションから アイスクリームの配達を 注文する場合です まずアプリケーションを取得し 次に目的の店を探します しかし すでに知っている店を 利用したい人は 新たなアプリケーションを ダウンロードしたくありません そこでApp Clipsの出番です App Clipsなら中小企業向けの エクスペリエンスが作れます 自社独自のブランド名を使った エクスペリエンスを App Clipsの力を借りて作るのです それは自社で生み出した エクスペリエンスのように見えます

App Clipsやアプリケーションの力が これまでより多くの会社に対して 効果をもたらすことを期待しています App Clipsとは何かをご説明しました 次にApp Clipsの取得方法について お話しします 先ほども触れましたが App ClipsはApp Storeにはありません 名前やカテゴリーでの検索も不要です App Clipsは状況に応じて出合うものです 必要な場面で見つかります 見つける方法の１つが物理的なタグです App Clipsは様々なタグに対応しています App Clips専用の新しいコードや あらゆるNFCタグ QRコードにも対応しています この新しいApp Clipコードが 最も見つけやすい方法です すぐに認識できるよう 一貫性のあるデザインにしました コードをスキャンすれば App Clipsが使えます 見つけやすいので コードを見れば 何をすべきかすぐに分かるでしょう また このコードはフレキシブルです 真ん中がNFCタグになっていて iPhoneをタグにかざすだけで使えます NFCタグを囲むコードは コードに近づけない時に便利です コードが看板やポスターなど 手の届かない位置にある場合です 実際はこのように使います App Clipコードがテーブルにあれば 必要な時にすぐ見つけられます App Clipコードの詳細については また近日中にお伝えします コードやタグを使う上で重要なのは 目的に合わせ 異なるコードやタグを使うことです 例えば ４店舗あるコーヒーショップの場合 クパティーノの店舗では 他店舗とは違うコードが使われています するとApp Clipsには自動的に クパティーノのメニューが表示されるので 初めに店舗を選ぶ必要がありません １ヵ所に複数のコードも設置できます クパティーノの店内で テーブルごとにコードを変えたとします App Clipsは どの店舗かだけでなく どのテーブルかも判別します 手順が省かれ App Clipsは速くなります さらに店員がうっかり違う場所や テーブルに行くようなことがなくなります App Clipsが自動で管理するからです 物理的なタグ以外の方法で App Clipsを場所に設置することもできます それはマップを使って説明しましょう 目的地に着く前に App Clipsが使えるようになります 例えば Panera Breadという フードアプリケーションでは 目的地に着く前に事前注文や テイクアウトの注文ができます そのApp Clipsが頻繁に使用されたり 特定の場所にひもづいていれば Siriからの提案に 自動で出てくるようになります ウィジェットとSpotlightの検索結果の 両方に表示されます 初めにコードやタグをスキャンしたり 探したりしなくても App Clipsを取得できます 物理的なタグやマップを使った App Clipsの取得方法でした 続いてデバイス上の違う場所から App Clipsを取得する方法です App Clipsでのエクスペリエンスは タグやマップにひもづける 実際の場所がなくても作れます これも優れた点です App Clipsは目に見える形だけではなく 完全にバーチャルな形でも活用できます この使い方をしたい時には Safariのスマートアップバナーを使います App Clipsを取得して ウェブサイトを開くと 上部にスマートアップバナーが追加されます ボタンを押せば すぐにApp Clipsに飛びます

例えば Etsyの詳細ページにある スマートアップバナーから App Clipsへ飛ぶことができます すでにアプリケーションが入っていれば そちらに飛ぶので App Clipsだけでなく アプリケーションの全機能を使えます Safariのスマートアップバナーを 使った場合と ウェブサイトだけの場合を 比べてみましょう 主な違いは２つあります １つ目はアプリケーションと同様に App Clipsの方が ウェブサイトよりも よいエクスペリエンスが得られます ネイティブなシステムを利用した App Clipsは操作も分かりやすく すぐに理解できます もちろんApp Clipsの方が 速くて反応がいいです 元のアプリケーションと同じ すばらしいエクスペリエンスが得られるのです ２つ目はApp Clipsなら 新しいエクスペリエンスが手に入ります それはウェブでは実現が難しいですが アプリケーションでは当たり前のことです 例えば 動画の撮影と編集です ウェブ上では難しいですが アプリケーションを使えば 簡単にできます 同様に Bluetoothで デバイスに接続したり ARでインタラクティブな3D映像を流せます App Clipsならアプリケーションの機能を すぐに利用できます 物理的なタグと同様に スマートアップバナーを使う時には App Clipsが正しいページを開くことが重要です 例えば Etsyのページでは 商品のApp Clipsが Safariの画面の下に表示されます これでApp Clipsから 商品を探しに戻る手間が省かれます 最後に もう１つご紹介しましょう スマートアップバナーのあるページを メッセージでリンク共有した場合 メッセージからApp Clipsに 直接飛ぶことができます あなたのApp Clipsを 知り合いに共有し知ってもらえば 自然と元のアプリケーションも 広めることができます Safariのスマートアップバナーと メッセージへのリンク方法でした 次は取得したApp Clipsを 実際に使ってみます App Clipsを使う時 必ず最初に 表示されるのがApp Clipカードです App ClipカードはApp Storeの 商品ページのようなものです App Clipsで何ができるかを 人々に紹介するチャンスです App Clipsを使う理由を 伝えることができます 画面のApp Clipコードを タップしましょう

どんな方法でApp Clipsを取得しても まずはApp Clipカードが表示されます すべてのApp Clipカードは同じ形ですが カスタマイズできる部分があります どうカスタマイズできるか 見てみましょう App Clipカードをカスタマイズする上で 最も重要なのはタイトルです これが何のApp Clipsかを 示す場所です 大抵のApp Clipsは アプリケーションや ブランドの名前になるでしょう 時にはもっと特徴的な タイトルがいい場合があります App Clipsは１つの機能だけに 特化しているので その機能をタイトル名に 入れるといいです 例えば音楽再生のアプリケーションの場合で ラジオに特化していたら タイトルに「ラジオ」と 入れるのがいいでしょう タイトルがApp Clipsの商品名なら サブタイトルは 何ができるかを説明する場所です 特にユーザーはApp Clipsを使う時に 初めてアプリケーションや商品名を知ります 名前の意味さえ 分からないかも知れません だからApp Clipsでできることを 説明する必要があるでしょう それをサブタイトルで 説明してください 次にヘッダー画像です App Clipsで何ができるかを 視覚的に伝えることができます もし実際の場所やサービス ロケーションを表す写真など 実質的な画像なら とてもいいヘッダー画像です そのような画像を使わない場合は ロゴなど分かりやすい画像にしましょう どちらにしても写真か カスタムしたグラフィックを張り付けるべきです スクリーンショットや テキスト満載の画像はやめましょう App Clipカードの表示スペースでは とても読みづらいからです ヘッダー画像の他に カスタマイズできる場所があります App Clipsの右側にあるボタンは デバイスでApp Clipsを開いた時の アクションを指定できます 現在 アクションボタンには ３種類あります OpenとViewそしてPlayです 一般的なApp Clipsを作るなら デフォルトで設定されている― Openでいいでしょう しかし情報を表示したり 何かを見せるなら Viewを選ぶといいです もちろんPlayは メディアやゲームなどに最適です またこの３つ以外で使い勝手のいい アクション名を募集しています もしアイデアがあれば フィードバックアシスタントでお知らせください 最後にApp Clipカードの一番下には 関係するアプリケーションが明示されます ここをタップするとApp Storeに移動し さらに情報を見ることができます 例えば開発者や プライバシーポリシーの情報です この部分をカスタマイズすると メタデータを変えることになります さてApp Clipsを取得するには App ClipコードやNFCタグ QRコードのような 物理的なタグを使います Safariのスマートアップバナーを使って 提供することもできます ウェブページを見るよりも 新しく いい体験ができます

App Clipsへ誘導する簡潔な情報が書かれた 特定のタグやページに 必要以上の説明なく すぐにApp Clipsが 実行できるように設置してください

最後は App ClipsやApp Clipカードへの 誘導方法の配慮です 分かりやすい言葉や 効果的なイメージがいいでしょう App Clipsそのものや 取得方法は理解できたかと思います 次はコンテンツをデザインする方法について ヒーナがお伝えします これからApp Clipsをデザインする方法 についてお話しします まずは すばらしいApp Clipsにする方法です 重要なのは 優れたApp Clipsは シンプルだということです １つのタスクを達成することに 特化しています 操作性も優れています すぐに読み込むだけではなく 限りなく無駄のないフローになっています App Clipsを作る時は ３つのことを覚えていてください １つ目は目的の設定です 何をするにしても App Clipsが果たすタスクは１つです

２つ目は最低限のフローで タスクを達成させることです App Clipsは瞬間的な体験なので フローは焦点を絞り 効率的にしてください シームレスな体験にするために Apple PayやApple IDを使いましょう

３つ目は 完全版のアプリケーションの提案です App Clipsは単独で使えるものなので 充実した機能は完全版に任せます ではいくつか例を紹介します 注文やテイクアウトができる カフェ用のApp Clipsを作ってみましょう 最低限のフローは メニューを見て注文することです

そしてApple Payで支払います

支払いが完了した後は完全版の アプリケーションのダウンロードを提案します その際 アプリケーションの便利な機能を 明確に説明することが大切です 次は様々な駐車場料金を 支払うためのApp Clipsの例です

最低限のフローは 時間に応じた駐車料金を払うことです 駐車場の有効期限を 通知で送ることができます

通知をタップすれば 車まで戻ることなく 遠隔で時間を延長できます 次の例にいきましょう このようなアクセサリーを購入できる オンラインショップがあるとします

最低限のフローは オンラインショップから カートにアイテムを追加することです

買い物終了後 Appleにサインインすれば セールの通知機能やお気に入り機能が使えます レストランなら座っている席で 注文も支払いもできます 重要なのは このような体験を提供する場合は それぞれのテーブルごとに App Clipコードを配布する必要があります コードをスキャンしてできるのは 簡易メニューで料理を選ぶことや そのまま料理を注文することです そしてApple Payで支払いもできます App Clipsで すばらしい体験を提供した後で テイクアウトや配達ができる アプリケーションを提案します 分かってきましたか？ 最後はARエクスペリエンスです カメラを使って周囲の山や 山頂の名前を表示します これはシンプルな撮影画像に 周囲の情報や解説を 追加できるというものです

友人にその画面を 共有したくなるかもしれません ここまではApp Clipsに 必要なものをお伝えしました 次に気になるのは アプリケーションを App Clipsにする方法でしょう まず初めに特定のタスクに 焦点を当ててください コーヒーショップの場合です 完全版のアプリケーションでは 商品をお気に入りに登録できたり 近くの店舗を探せたり アカウントを作れたりします 焦点を絞るということは １つの機能に絞り込むことです 今回は注文することに焦点を当てました 商品をお気に入りに登録するなどの 他の機能は注文するタスクに必要ありません 機能を単純化して タスクの達成に 関係ない要素を取り除きます App Clipsの説明も必要ありません メインフローに入る前の 指示やチュートリアルも控えてください ログインや アカウント用のページも避けます 必要な場合は Apple IDを使えば 迅速かつプライバシーも保護されます App Clipsならグローバルナビゲーションや 複数のタブも不要です また設定や管理の類いも避けましょう これがアプリケーションをApp Clipsに 変えるための基本です 今からユーザーインターフェイス について説明します 具体的には システムコンポーネントの使い方です

App Clipsには通知機能があります 必要不可欠な情報を 伝えるためにはいい手段です デフォルトでは最初に利用してから ８時間は通知を送れます タスクを達成するのに 十分な時間だと思います

しかし１日以上必要な場合は 1週間延長するための許可を 求めることができます 例えばレンタカー会社は レンタル期間を延ばす許可を求められます これはタスクに特化した通知で 予期しない通知や セールスの通知ではありません 送るのはユーザーアクションに 対応した通知のみです すべての体験がApp Clips内で完結するなら 通知機能すら必要ありません App Clipsでの支払いは Apple Payを使ってください クレジットカード情報や住所を入力しないので 瞬時に支払いが可能です 最後は適切なタイミングでの アプリケーションの提案です 適切なタイミングとは 最優先のタスクが完了した時です つまりアプリケーションの価値を 証明できた瞬間です App Clipsはトロイの木馬ではありません 独自の価値があります ではまとめましょう App Clipsはすぐに利用できる 軽量化された機能です 瞬間的な体験で デバイスにも残りません

物理的な場所ではApp Clipコードを 使ってください 生活の中での顧客とアプリケーションの 接点を考えてください 簡単にApp Clipsが見つかるように 目立たせてください

特定のタスクに特化させ 不要な要素はすべて取り除いてください

見つけやすいApp Clipsを経由して より多くの人がアプリケーションを使うでしょう

最後にHuman Interface Guidelinesを おすすめします すばらしいApp Clipsをデザインする方法が 記載されています “Configure and Link Your App Clips”など App Clips関連の全セッションをおすすめします ありがとうございました すばらしいApp Clipsを作ってください