ダイナミックなライブアクティビティのデザイン

♪ ♪

Mac Tyler：ダイナミックな ライブアクティビティのデザインへようこそ 私はMacです 同僚のChanが後で合流します 今日はシステム全体で ライブアクティビティをデザインする際 考慮すべきことについて取り上げます ロック画面から始まり スタンバイを手短に説明し 最後にChanが Dynamic Islandを説明します それぞれコンテキストを見ながら 特有の考慮点は何か その中でデザインをどう適応させるのが 効果的かに焦点を当てます その前にライブアクティビティ そのものについて 少し説明します 私たちのゴールは 通知機能の限界に押し上げるように いくつかの既存の体験を改善し よりパワフルで直感的な方法で 継続的な活動をフォローできる 新しいシステムを構築することでした ライブアクティビティは リッチなグラフィカルレイアウトを使い 情報を表示し生き生きとした方法で シームレスにインラインで更新します スポーツ ライドシェアリング 配達追跡 ライブのワークアウトなどは これらの新しい機能を 活用できるいくつかの良い例です 数分から数時間の間 誰かが記録しておきたいことというのは 何でもライブアクティビティに できる可能性があり 探求すべきエキサイティングな アイデアがたくさんあります さっそく見ていきましょう ロック画面では ライブアクティビティが通知と並んで リストの一番上に表示されます ここではそれぞれの端の余白を 同じ14ポイントにすることで 異なるレイアウトを使用していても 各要素をきれいに揃え リストを見た際の 一貫した視覚的なリズムを 維持できるようにしています ロック画面のライブアクティビティの 情報をレイアウトする際 通知のレイアウトそのものを 再現しようとしないことが重要です それよりも表示する情報に特化した ユニークなレイアウトを作りましょう リッチなレイアウトというのは ライブアクティビティの利点のひとつです このステップに時間をかけ 丁寧にデザインしましょう 最も役に立つと思われる情報について考え それらの要素のサイズや スケールに優先順位をつけ 一目でわかるようにします タイマーのライブアクティビティでは タイマー名と残り時間の表示に加え タイマーを一時停止かキャンセルするため クイックコントロールも利用できます ボタンはライブアクティビティに インタラクティブな 機能を提供する素晴らしい方法ですが 多くのスペースを占める可能性があるため アクティビティ自体の重要な部分を コントロールする場合にのみ 使用するようにしてください 次にライブアクティビティの 個性について少しお話します グラフィカルなレイアウトを デザインする際には アプリの色 アイコン 書体や その他の属性を考慮してください ライブアクティビティとアプリが 同じ視覚的な美学と個性を共有していると 感じられることが最終目標です アプリのアイコンから インスピレーションを得ることは ライブアクティビティの デザインとアプリを 連想させる最良の方法になります TVのライブアクティビティは アプリのアイコンと 同じ背景色と前景色を共有し 2つのデザインを一体化させています このようなつながりを 維持することが重要です この視覚的な関連性を壊すようなら ライトモードとダークモードの間で 色を変えないようにしてください ライブアクティビティのデザインに 大胆な色を取り入れることで 他とは一線を画す個性を 打ち出すこともできます また表現する内容に応じて 色を変えることで よりダイナミックで魅力的な ビジュアルで情報を伝えるれます

ロゴマークをブランドの 一部として使用する場合は アプリのアイコンを 丸ごと使用するのではなく レイアウト自体に違和感なく 統合されていることを確認ください ライブアクティビティが提供する 背景色と前景色は スワイプしてロック画面から ライブアクティビティを削除する際に システムが自動的に一致するような 解除ボタンを生成するために使用されます 出来上がったボタンが正しく見えるか デザインに合った色を 提供しているかを確認ください 次にレイアウトでスペースを効率的に 使う方法について説明します ロック画面には ミュージックプレーヤーや通知 ライブアクティビティなど さまざまな情報が一度に表示されるため 不要なスペースを取らないよう できるだけコンパクトな レイアウトにすることが大切です 各要素のサイズや配置を調整することで デザインの高さを抑え よりコンパクトにまとめる方法を探します スペースを効率的に使うもう一つの方法は 表示する情報量によって ライブアクティビティの 高さを動的に変えることです この例では利用可能な ドライバーを検索している間 表示する追加情報があまりないため 乗車許可が出るまで レイアウトをコンパクトに保ち 関連性が高くなったら 残りの情報へと移り変わるようにしています このケースの場合 試合がハーフタイムに入ると ライブ実況は必要なくなり プレーが再開されるまで 折りたたむことができます これがトランジションへとつながります

ライブアクティビティで このような異なる瞬間の更新をする場合は レイアウトの高さを変えるだけでなく 個々の要素自体にトランジションを 適用することもできます

アクティビティで重要な数字を カウントアップまたはダウンするには 数字コンテンツの トランジションを使用します またグラフィック要素やテキストの アニメーションの出し入れには コンテンツの置き換えトランジションを 使うようにします これらはシステムが提供する デフォルトのトランジションの一部ですが 要素のスケール 不透明度 位置といった 異なるアニメーションを組み合わせ 独自のトランジションを作成できます このNearby Friendsの例では マップが更新されると ピンはスムーズに新しい場所に移動します 更新間で要素の位置を アニメーションさせるのは アクティビティをより視覚的に 表現する強力な方法となります リスト内のアイテムの位置を アニメーションする場合は 新しい位置に移動する1つの行だけを アニメーションし 他の行を フェードイン・アウトさせることで 要素が重なるのを避けましょう 次にアラートについてです ユーザーの注意を必要とする アップデートがあった場合 ライブアクティビティで アラートを出すべきです アラートは画面を点灯させ 通知音を再生することで アップデートを見逃すことがなくなります このトランジションの間は アラートの原因となった情報を レイアウトで強調するようにしましょう 最後にライブアクティビティが終了し 関連性がなくなった場合 長時間表示して ユーザーをイラつかせないよう ロック画面から短時間で 削除するようにしてください 次にスタンバイのデザインを見てみましょう スタンバイはiPhoneを周囲における 情報ディスプレイとして 使用できる新機能です キッチンカウンターやデスク ベッドサイドに置くことができ 表示させたい情報も選べるので 当然ライブアクティビティの 表示に最適です スタンバイではレイアウトの コンテンツがデバイスの センサー領域の下に 描画されないようにしながら レイアウトのサイズを最大化するために 200%拡大されます ライブアクティビティで 背景色を使用している場合 システムは自動的にこの色を 拡張して残りのスペースを埋め シームレスなフルスクリーンデザインを 作成します ライブアクティビティの端に描かれた グラフィック要素がある場合 背景が拡張され見切れてしまい 壊れているように感じられるでしょう レイアウトの異なる領域を区切るために 区切り線や包含シェイプを使用して この問題を回避することを検討してください ライブアクティビティが表示する 情報によっては スタンバイ時に背景を完全に削除し 代わりにレイアウトをデバイスの ベゼルにシームレスに溶け込ませ よりソフトなアンビエント感を演出できます 追加の利点のひとつは デバイスのセンサーマージンを 考慮する必要がなくなるため レイアウトを少し大きめに 表示できることです スタンバイ用のライブアクティビティで 他の調整を行うこともできますが 最も重要なことの1つはデザインで 使用しているすべてのアセットや画像が この大きなサイズで表示するのに 十分な高解像度であることを 確認することです スタンバイのもうひとつの特徴は 光が少ない時にディスプレイを美しい赤色に 変化させるエレガントなナイトモードです ライブアクティビティは 自動的にこの変化を受ける形となりますが このモードがアクティブになっているときに 色に十分なコントラストがあるかを 確認することをお勧めします 次はDynamic Islandについてです ここからはChanが詳細を説明します Chan Karunamuni: ありがとう Mac Dynamic Islandは 1日中デバイスを使用する際に表示される 様々なアラートやアクティビティに 関するインジケータを 一元的に管理するために作られました

これはハードウェアと ソフトウェアの融合であり あらゆる種類のアラートと インジケータの間を有機的に 移動できる単一の システムレイヤーを提供します 主な目的はバックグラウンドで 起こっていることを監視し それらとやり取りするための 迅速な方法を提供することです Dynamic Islandに あるものはすべて 見た目も感じ方もアニメーションの仕方も ユニークでありながら ひとつのファミリーのように デザインされています それぞれにユニークで活気のある 体験をデザインすることで それぞれが独自のアイデンティティを 持つことができます そして多様な体験は それぞれの体験を自分の中に定着させ 一目で見分ける認知的負担を 軽くしてくれます こうした挙動や感触も重要な要素となります 生物のフォルムと動きに着想を得た Dynamic Islandは まるで生き物のように 感じられるようデザインされており その意図的な弾力性は それが具現化するハードウェアの 固定された性質とは対照的な 遊び心のあるコントラストとなっています よってみなさんのアプリにも 同じ原則が適用されます この意味を探るために サイクリングアプリの例を考えます ここではアクティビティが進行中なので 他の場所に行くためにアプリを離れると アプリはDynamic Islandにジャンプします これはアプリがその空間に物理的に 存在するように感じられるよう デザインされています アプリと同じ特徴と アイデンティティを引き継いでいます これらの例ではアプリの見た目は アプリそのものと同じように 多様で変化に富んでいて それぞれのやり方でファミリーであると 感じられるように意図されています アニメーションや継続的に更新される データを使い生き生きとした印象を与え また丸みを帯びた太めのシェイプや 大きくウェイトのある読みやすい文字も アイデンティティを伝える 色の使い方と同様に効果的です Dynamic Islandを デザインする場合 その中に何を収めるかが重要です 中の物の形や配置に神経を使いましょう この形と調和するように物や 情報を配置することが 本当に重要です Dynamic Islandの中に物を うまく収めるために重要なのは その形と中心を共有するようにすることです これは丸みを帯びた形が 互いの内側に入り込み 余白が均等になることを意味します 丸い形状のものを中に入れるときは 最適な収まりを目指してください これは丸みを帯びていない形状にも 適用されます 形状の視覚的な集まりや重心は Islandの境界の内側に うまく収まるはずです 視覚化するコツはオブジェクトをぼかし その結果の形状が外側の境界線と できるだけ同心円になるようにします そうすることでコンテンツが Dynamic Island内で可能な限り 快適に感じられるよう 視覚上良い場所に配置されます またオブジェクトやテキストを 配置する際は Islandの外周の内側に 同心円状の余白を確保し コーナーから突き出さないようにします コンテンツを内側に押し込んだり コンテナを丸めたりすることで 全体的な形が調和します

コンテンツのブロックを分割する場合は コンテナの端まで描画するのではなく インセットシェイプ内に配置するか セパレーターラインを使用します Dynamic Islandには 3つのサイズクラスがあります コンパクトビューと呼ばれるものまで 水平方向に拡大し さらに大きな拡張ビューへと 発展することができます 最後に小さな最小限ビューです 最もよく見られるのは コンパクトな形です このビューの目的は iPhoneを使いながら アクティビティを チェックできるようにすることです

単なるアプリへの静的なリンクではなく アクティビティに関する 最も重要なことを伝える情報的なものです またアプリのアイデンティティを 明確に反映させる必要があります 目標とすべきなのは 無駄なスペースがなく 可能な限り狭い形で カプセル化することです 内容がセンサーの領域に ぴったり合っているか確認します こうするとDynamic Islandは 必要以上に幅を取りません そしてできるだけ多くのコンテンツで 視界が埋め尽くされることを目指します 左側の空きスペースに注目してください 単位のように切り詰めたり縮小したり あるいはデータの幅が広くなりすぎたり バランスが悪くなったりしないよう あまり厳密でないバージョンの データ表示を検討します

アプリで複数のセッションを 一度に表示したい場合は それらの表示の間に間隔を入れて ユーザーに進行中にすべてを 見せられるよう検討ください またセッション中にユーザーに イベントを知らせる必要がある場合は プッシュ通知を送るのではなく 可能な限りアイランドを拡張し 情報を提示しましょう 重要なのは通知と同様 Dynamic Islandは アプリの上のレイヤーに 浮かんでいるということです アプリでIslandを指し示したり 相互作用するUIを描くべきではありません 拡大ビューについて説明しましょう

警告だけでなく Dynamic Islandを押して このビューにズームインし より多くの情報を見たり 重要なコントロールに アクセスすることができます アクティビティの本質を見極め 過不足なく表示させるようにしましょう アプリの特徴を伝え アプリを少し覗いているような 気分になってもらう絶好の機会となります ここでもDynamic Islandの 視覚的言語と調和させることが重要で 丸みを帯びた太めの形を強調し アイデンティティを確立するために 色を多用しました ここにアプリの小さなバージョンが 存在するように感じられるはずです

拡張ビューをレイアウトするときは 2つのビューの間の相対的な 配置を維持するようにしてください そうすれば両者に一貫性が生まれます 拡張ビューにはより多くのコンテンツを 表示するための背の高いビューから コンパクトな短いサイズの ピルサイズビューまであります どの程度スペースが必要かは みなさん次第ですが ギリギリの高さは避けるようにしてください

またコンテンツをレイアウトする際には センサー部分に注意を喚起するような トップのスペースは避けるようにします そうではなくセンサーにできるだけ寄せ集め その周りを コンテンツで包み込むようにします これでほとんど目立たなくなります 最後にDynamic Islandには 最小ビューもあります このビューは一度に複数のセッションを 扱うときに表示されます ここで純粋にロゴだけに戻すことは避け この小さな状態でもセッションが情報を 伝え続けられる方法を考えましょう 今日お話ししたように Dynamic Islandは あなたのアプリが表示できる ユニークな新しいシステムレイヤーです デザインする場合に 留意すべきことがたくさんあります 例えばアプリのアイデンティティを このスペースに適応させ Dynamic Islandの中で アプリのユニークさを 感じられるようにすることです またIslandの丸い形と調和するよう 要素の収まりや配置にも 配慮が必要です Dynamic Island内で 構築されるこれらの体験はすべて 新しいタイプのマルチタスクや アプリとの新しいインタラクションと 考えることができ これまで不可能だった体験や デバイスの使い方を解き放つことができます

どこまでやれるか本当にわくわくしますね ご視聴ありがとうございました