WWDC Quick Look 💓 By SwiftGGTeam
Say hello to the next generation of CarPlay design system

Say hello to the next generation of CarPlay design system

元の動画を見る

ハイライト

次世代 CarPlay の核心目標は、車内の全画面をカバーすること——センターだけでなく計器類(instrument cluster)も含む。Apple デザインチームの Ben Crick が、この新しいデザインシステムが CarPlay 機能の一貫性を保ちながら、自動車メーカーがビジュアルスタイルを深くカスタマイズできる方法を紹介します。


主要内容

2022 年 WWDC で Apple は次世代 CarPlay のコンセプトを初公開。2 年後も課題は同じ——車内画面は増え、大きくなり、従来のアナログ計器類はデジタル画面に置き換わっている。各メーカーの機能構成、画面サイズ、ブランドトーンは異なり、固定 UI では全車種に適合できない。

Apple の答えは、ゼロから構築したパラメトリックデザインシステム。「テーマ A か B か」という限られた選択肢ではなく、ゲージ(gauge)のあらゆる視覚属性——弧の太さ、角の丸み、弧の角度、開始・終了位置、色(単色とグラデーション)、目盛りの数とスタイル——を連続調整可能なパラメータに。SF 可変フォントの weight、width、corner softness の 3 軸連続変化と組み合わせ、メーカーはブランドの視覚言語から独自の計器類スタイルを体系的に調整できる。

このシステムが生み出す結果を Apple は「co-branded」体験と呼ぶ——2 つのブランドが 1 つのインターフェースで融合し、独自の視覚言語を生む。各車の次世代 CarPlay 計器類は異なる見た目になる。


詳細

Typography:SF 可変フォントの 3 軸連続調整

SF フォントがデザインシステム全体の基盤。従来フォントは light / regular / bold など離散的な選択肢。SF 可変フォントは weight(太さ)、width(condensed から extended)、corner softness(角の丸み)の 3 次元で連続調整可能(03:41)。任意の 2 点間の値を選べ、スタイル選択の範囲は従来フォントを大きく超える。

残りのシステムコンポーネントも同じパラメトリックロジック。ゲージの幅、角、弧、開始・終了点、色はすべて連続調整可能。プリセットから限定的に選ぶ必要はない。

ゲージスタイルのカスタマイズ

Ben Crick は「軽やかでエレガント」から「力強くタフ」への段階的デモでカスタマイズ能力を示した(04:30):

  • 弧とジオメトリ: 円形ゲージは弧の角度と開始・終了点を調整でき、完全なリングに拡張も可能。付属ゲージ(燃料量計など)の位置も調整して適合(04:54)。
  • : 単色と多色の組み合わせ、グラデーションで奥行きと深みを追加(05:25)。ストローク幅を中心に向かって拡張するとグラデーション効果を強調し、クラシックな針へのオマージュに(05:34)。
  • 針と目盛り: 従来のアナログ針スタイルをサポート(05:56)。目盛りの数、長さ、スタイル、位置はすべてカスタマイズ可能。複数の目盛りセットを重ねてテクニカルな視覚効果も(06:02)。

ゲージ機能の適応

視覚スタイルに関わらず、ゲージは全機能に適応(07:34)。セッションは 2 つのスタイルを並べて比較——左はミニマルなリニア light mode、右はテクニカルな円形 dark mode:

  • クルーズコントロール: 目標速度はドットでマーク、設定速度は近くにテキスト表示。アダプティブクルーズ作動時、現在速度と目標速度の間に線を描き、条件が許せば目標速度に戻ることを示す(08:13)。
  • スピードリミッター: 線で表示(クルーズのドットと区別)、色も異なる(08:49)。
  • 道路標識と速度単位: 現在速度付近にスペース確保(08:58)。
  • 燃料/バッテリー低下警告: オレンジは低下、赤は危機的。トリガー閾値はメーカー定義(09:07)。

パワートレイン別の適応:

  • ガソリン車: タコメーター + エンジン冷却液温度計。現在ギア、レッドライン、シフト推奨矢印をサポート(09:20)。
  • EV: パワーゲージ。ドライブモードとトランスミッション状態、boost と回生ブレーキ表示(09:45)。
  • ハイブリッド: ハイブリッドゲージでパワーとタコメーターを同時表示。電気部分は太い弧で強調、ガソリン部分はコンパクト形式で並列(10:00)。円形ゲージではブランド画像でトランスミッション状態を置換可能(10:17)。

モジュラー型レイアウトシステム

各ゲージは自己完結型モジュラーコンポーネント。サイズ調整と自由な組み合わせが可能(11:41)。現在速度と燃料量は必須、その他(タコメーター、パワーゲージなど)は完全オプション。シンプルから情報密集まで様々な構成に並べられる(12:07)。ワイド、異形、計器類非中心のコンパクトレイアウトにも対応(13:14)。

メーカーは全画面にカスタム壁紙を追加可能。壁紙とゲージスタイルの組み合わせでブランド雰囲気を強化(12:41)。

ダイナミックコンテンツ領域

レイアウトに関わらず、システムは「ダイナミックコンテンツ」領域を確保(14:47)。一部レイアウトでは常時表示可能——大きな地図やトリップコンピューターなど。計器類中心のレイアウトでも、非重要ゲージの背後にスタックし、ステアリングホイール操作でページ切替(15:17)。

ダイナミックコンテンツは通知とアラートのデフォルト位置。テキスト + シンボル、インタラクティブで閉じられる、車両画像を含むリッチな多状態通知。2 件同時表示も可能(15:47)。

計器類に表示できるダイナミックコンテンツ: 地図、再生中、トリップコンピューター、タイヤ空気圧、ADAS(高度運転支援システム)。車両ビジュアル関連はメーカー画像素材をサポート。色、構成などの属性を反映(16:14)。センターと助手席画面にはさらに多くの表示スペース。


重要ポイント

  • 何をするか: 車載 HMI 向けにパラメトリックなデザイントークンシステムを構築。なぜ価値があるか: 次世代 CarPlay は「連続パラメータ」が「離散テーマ」より多様なハードウェアとブランド要件に適応できることを証明——軽やかでエレガントから力強くタフまで、コンポーネント書き換えなしでパラメータ調整のみ。始め方: フォントの weight と width でブランドトーンを定義し、ゲージの弧の太さ・角をフォントと視覚リズムを揃える。全数値を design token で管理。

  • 何をするか: モジュラーコンポーネント + 組み合わせ可能レイアウトで複数画面形状に対応。なぜ価値があるか: 車内画面のサイズと形状はワイドから異形、コンパクト表示まで大きく異なる。モジュラーレイアウトなら同一コンポーネントを柔軟に組み合わせ、画面ごとに独立 UI を開発不要。始め方: 各情報表示単位(速度、燃料、ナビ、メディア)を自己完結コンポーネントに。サイズ調整と位置配置のインターフェースを定義し、組み合わせでレイアウト生成。

  • 何をするか: 計器類 UI に「ダイナミックコンテンツ」領域を確保。ステアリングホイール操作で情報ビュー切替。なぜ価値があるか: 運転シーンごとに注目情報が異なる——ナビ時は地図、通勤時はメディア、長距離はトリップデータ。固定情報領域では全ニーズをカバーできない。始め方: レイアウトシステムにスタック可能なコンテンツスロットを定義。通知とアラートもこのスロット管理に含め、現在表示内容に関わらず緊急通知が視覚優先度を確保。


関連セッション

コメント

GitHub Issues · utterances