メッセージAppを使った共同制作の設計

（音楽）

今日は　Jaewooです Apple Design teamのデザイナーです 同僚と Keynoteでプレゼンの準備をしたり 友人とアイディアを収集したり 私たちは毎日 様々な共同制作をします 第一級の共同制作体験を生み出すために iOS 16と macOS Venturaに わずかな変更を加えました 本日は 共同制作の中心に メッセージAppを使う理由を説明し 新しい変更点を説明しながら 共同制作の全ての工程について説明します あなたのAppで メッセージAppを活用した 素晴らしい共同制作体験を デザインする際の注意点も お話していきます 前置きはこのぐらいで始めましょう Eメールは毎日使われる会話ツールの１つです 共同制作Appの多くでも 主要な会話ツールになっています ですがチャットほどのレスポンスがありません それはEメールが非同期の会話ツールだからです その代わりに共同制作に使えるのが メッセージAppです メッセージAppでは 以前に行ったチャットを使って 共同制作の招待状が送れます Eメールアドレスを聞く必要はありません 共同制作の成功のキーは効率の良い会話です メッセージAppにはそれを容易にする 多くの優れた機能があります メッセージAppでのチャット相手とは 簡単にFaceTimeが行えます スクリーンを共有しながらの FaceTimeでの共同制作は はるかに生産的です メッセージAppと共同制作Appは どう協力し合うのでしょうか 僕も友人も焼き菓子が好きで よくお互いにレシピを共有します レシピを Pagesドキュメントで作成して 友人たちと共有したいと思います まず ツールバーの共有ボタンを押します 新しい共有ポップオーバーでは２つの方法で このドキュメントが共有できます 新しい共同制作を始めるかコピーを送るかです このオプションによって メッセージAppや メールや 他のAppで招待状が送れます 僕らのチャットグループの名は Cupcake Designersと言います 僕がよくこのグループチャットを使って 話すのを知っているため 共有ポップオーバーはこれを チャット先の候補として提示します このグループを選択して共同制作を始めます 共同制作の招待状が メッセージAppの入力フィールドに現れ あとは送るだけです 送信ボタンで共同制作がすぐに始まります ツールバーには既に グループ画像のボタンが出ています チャットはこのドキュメントとリンクしています 友人のローレンとクリスが参加したようですね

グループ画像のボタンを押すと 共同制作ポップオーバーが出てきます この共同制作ポップオーバーで 会話ツールへのアクセスが簡単になり 共同制作の概要も素早く簡単に見られます Pagesのこのドキュメントの共同制作者が 表示されています ポップオーバー内の メッセージボタンを押すと この共有ドキュメントに関連する メッセージAppでのチャットが現れます 素早くグループのチャットに戻り ドキュメントについて話せます FaceTimeで話す必要があれば ポップオーバー内の Audio または Video ボタンを押してください

これで友人と僕はリアルタイムで 編集ができます メッセージAppとの緊密な統合で 更にパワーアップです 共同制作Appからの通知が メッセージAppに表示されます

今クリスがドキュメントに 編集を加えたようです

メッセージAppのバナーでドキュメントを 直接開いて更新内容が見られます

共同制作Appと メッセージAppは 強く結びついているので 共同制作ワークフローの能率が上がります 新しい共同制作体験の例を見てきました 共有ボタンとシステム共有ポップオーバーで 共同制作が簡単に始められます 招待状は既存のチャットから簡単に送れます 共同制作ポップオーバーで非常に簡単に メッセージAppのチャットに戻ったり FaceTimeを開始したりできます

共同制作Appからの編集通知で 皆が常に最新の状態を見られます

メッセージAppと共同制作Appの 連携のしかたを説明したので 次はご自分のAppに 共同制作を組み込む方法を 見てみましょう まずはシステム共有シートです これはユーザーがよく知っているものです いろいろなものに使われていて 例えばウェブサイトや 歌やアルバムや写真などの コンテンツの共有に使われています チャット相手のサジェスチョンによって コンテンツの共有先を素早く見つけられます システム共有シートで共同制作が 容易に始められます Appでの共同制作の一貫性と 親密度を上げてくれます システム共有シートを使いたい場合は Appに共有ボタンを設置しましょう 設置場所はアクセスが 容易な位置を選びましょう ツールバーがお勧めの場所です では必要に応じて共有シートを カスタム化する方法を詳しく見ていきましょう ヘッダーのポップアップボタンで ファイルの共有方法が選べます Appがコピーの送信をサポートしていない場合 ポップアップボタンは出てきません ポップアップボタンの下の "Everyone can make changes"が 共同制作のアクセス設定になります Appがサポートする初期設定の 説明文が必要です ユーザーが理解できるよう できる限り簡潔明瞭にしましょう "Everyone can make changes"を押すと アクセス設定の画面が現れます カスタム化する時は 選択肢の構造をシンプルにして 選択肢が一目で理解でき 素早い決断ができるようにします macOSの共有ポップオーバーは デザインが改良され チャットの提案を含む iOSや iPadOSでの 変更を反映しています ドロップダウンメニューから ファイルの共有方法が選べます アクセス設定もこのポップオーバー内で 可能です 簡潔明瞭なパーミッションの説明文で 設定をシンプルに保ちましょう 次は メッセージAppでの共同制作体験の開始を どう最適化するかについてです メッセージAppの入力フィールドから 共有方法だけでなく 共同制作の設定をカスタム化できます オプションを変更するために 共有シートに戻る必要はありません ドラッグ＆ドロップによる メッセージAppのチャットへのファイルの追加は 共同制作を始めるのに便利なもう１つの方法です メッセージAppの入力フィールドで 簡単にアクセス設定を行い 送信ボタンで共同制作を 開始できるようにしましょう 分かりやすい所に共同制作ボタンを置くのは 非常に重要な事です 共同制作を開始すると 共同制作ボタンがAppに現れます 共同制作の全工程の中でこの共同制作ボタンが 最も重要なUIなのです 人目を引く 目立つ所にしましょう 共有ボタンの隣が最もお勧めの位置です 共同制作ボタンの外見は 共同制作の始め方によって少し変わります 招待状が送られたのが１対１のチャットであれば 受信者の画像がボタンに現れます グループチャットで共同制作が始まって そのグループに画像が設定されている場合 その画像がAppに現れます グループチャットの画像がない場合は システムの提供するシンボルが 代わりに使われます 共同制作ボタンを表示する位置が決まったら Appの共同制作ポップオーバーを カスタム化する番です このポップオーバーには ３つのセクションに分かれます １番上は誰と共同制作をしているかを示します システムが 連絡先Appから その人のプロファイル画像を見つけ それをここに表示します チャットのためのボタンもあります ドキュメントと繋がるチャットがない場合は message ボタンが繋げてくれます 真ん中はご自由にカスタマイズしてください Appを使用する人にとって必須だと思うような 情報や機能を考えましょう Pagesではアクティブな参加者リストと 表示設定を示します メモAppでは 最新のアクティビティと ２つのアクションボタンを示します 共同制作ポップオーバーでの情報過多や ボタンのつけ過ぎはダメです 一目で分かるようにしましょう ここで追加する物は ポップオーバーの他の要素と 視覚的に調和することも大切です Appがこのポップオーバーで示すものがない場合 真ん中の部分は無くても構いません リマインダーやファイルAppなどですね 一番下にあるのが “共有ファイルの管理”ボタンです 必要ならボタンのラベルを カスタマイズしてください このボタンで開くのが 共同制作管理画面です ここから参加者の追加や削除 そして他の設定の変更が可能です Appが CloudKit sharingを使っている場合 管理画面はシステムが提供してくれます CloudKit sharingを使っていない場合は Appの管理画面は自分で作ります

macOSの共同制作ポップオーバーも iOSと同じ構造です 真ん中のセクションをカスタム化する際には macOS UIコンポーネントと デザインパターンを使います 最後になりますが メッセージAppのバナーの外見には 十分な注意を払いましょう メッセージAppのバナーは 共同制作者に重要な変更を どう知らせるかに関わります ドキュメントを開けなくてもこのバナーで 新しい更新が知らされます メッセージAppが提供するバナーの テンプレートから選べます “編集あり” “コメントの追加” “あなたについて言及がありました” “変更されたファイル”もあります どんな更新を表示したいか メッセージAppに伝えてください 更新は該当する適切なチャットに きちんと表示されます もし複数の人が複数の編集を 多くの異なるドキュメントに した場合はどうなるでしょう？ 複数のバナーを メッセージAppは 処理できるでしょうか？ チャットがバナーだらけにならないように メッセージAppはバナーを１つにまとめます このまとめたバナーの表示ボタンを押すと メッセージAppはすべての更新を １つにまとめて表示し どれを開くか選ばせてくれます メッセージAppを使った 最高の共同制作体験のデザインについて 詳細を見てきました 新しいシステム共有シートで 共同制作開始を容易にし 共同制作ポップオーバーをカスタムマイズして 会話ツールを提供し 共同制作の概要を表示します メッセージAppを統合して生産性を上げ 共同制作を成功させてください App体験の改善につながる デザインに役立てば幸いです ご清聴ありがとうございました