見出し画像

WWDC24のデザイン関連セッション

鈴木慎吾 / TSUMIKI INC.

今年のWWDCから各セッションの動画がYouTubeで視聴できるようになりました。日本語字幕を確認できたり、読み上げソフトで日本語音声で視聴できたりします。

手軽に視聴できるようになったので、いつもよりたくさんのセッションを視聴することができました。

主にデザインに関連するセッションで気になったものをまとめていきます。
ラインナップは以下の通りです。


visionOSやApp Intentのセッションはまだ未視聴のため、紹介していませんが、今後視聴の上で追加するかもしれないです。

UXライティングでアプリにパーソナリティを追加

このセッションでは、アプリやWebのインターフェース上のライティング（UXライティング）について説明しています。

2022年のWWDCでもUXライティングについてのセッションがありました。

2022年のセッションでは、インターフェースの言葉をデザインする際に、目的、予測、文脈、共感という４つの軸で考えることが提唱されていました。

今年のセッションでは、UXライティングでアプリに個性を与える方法としてボイスとトーン（Voice & Tone）について説明されています。
まず、アプリ独自の個性（Personality）があり、それを言葉で表現する際の声（Voice）があります。AppleにおけるVoiceは以下のような言葉で定義されているそうです。

  • 明快さ（Clarity）

  • シンプルさ（Simplicity）

  • 親しみやすさ（Friendliness）

  • 親切さ（Helpfulness）

そして、実際にライティングをする際にはコンテキストを踏まえる必要があります。例えば、100回目のワークアウトを祝福する際のメッセージと、自分の健康に悪影響があるかもしれない場合のメッセージのトーン（Tone）は異なります。

左：100回目のワークアウトを祝福する際のメッセージ、右：自分の健康に悪影響があるかもしれない場合のメッセージ

Toneを検討する際には、事前に定めたVoiceの各項目の何を重視するかを検討します。祝福のメッセージでは、シンプルさよりも親しみやすさを重視します。

祝福のメッセージでは、シンプルさよりも親密さを重視する

一方ネットワークの再接続を求めるメッセージでは、親しみやすさよりも明瞭さや親切さを重視します。

ネットワークの再接続を求めるメッセージでは、親しみやすさよりも明瞭さや親切さを重視する

このToneを決めるためのツールが便利で、グラフィック要素や配色などデザインのトーンを決める際にも流用できそうだと感じました。

デザイン原則を日常のデザイン業務で活用しやすくするツールとして、SmartHRさんのトンマナダーツに近いと感じました。

SmartHRのトンマナダーツ https://cocoda.design/sayuriko/p/p5b2a95ad3f6b 


次世代のCarPlayのデザインシステムの紹介

このセッションでは次世代のCarPlayで提供されるデザインシステムが紹介されています。自動車メーカーの各ブランド毎にゲージのスタイルやレイアウトが柔軟にカスタマイズ可能であることがわかります。

この次世代のCarPlayは2022年のWWDCで発表されました。

次世代CarPlayでは車のハードウェアとCarPlayのソフトウェアの密接な統合が目指されています。車の計器ディスプレイに速度や燃料メータが表示されたり、サブディスプレイにiPhoneのウィジェットが表示されたりします。

今回のセッションでは、これらのメーター類のデザイン要素がどのように提供されているかが説明されています。

タイポグラフィでは、SFフォントのバリアブルフォントとしての機能が活用されています。ウェイト、幅、角の丸みを連続的に変更でき、ゲージの各要素でも同様に幅や角の丸みをカスタマイズできるそうです。
メモリの数や長さ、位置、数値のラベルなども細かくカスタマイズできるため、様々なスタイルのゲージを利用することができます。

次世代CarPlayでは様々なスタイルのゲージを利用できる

これによって、各自動車メーカーのブランドに沿って、CarPlayのスタイルを柔軟に変更することができます。
また、各ゲージはコンポーネント化されているため、ディスプレイの形状やサイズに応じて柔軟な配置も実現されるそうです。

各ゲージはコンポーネント化されていて、様々な配置が可能

AppleWatchで取り入れられていた文字盤のカスタマイズやスタイルのパーソナライズの機能が、CarPlayでは各自動車メーカーのスタイルへの適合方法として提供されている印象を受けました。


SF Symbols 6

SF SymbolsはiOSやMacなどAppleのプラットフォームで利用できるアイコンライブラリです。単にアイコン集というだけでなく、複数のサイズやウェイトや既定のシンボルアニメーションを利用できます。独自で作成したアイコンをカスタムシンボルとして追加し、実装から簡単に利用することができます。

このセッションでは、新しく追加されたアニメーションのプリセットについて紹介されています。

そもそもシンボルアニメーションの仕組みは2023年のWWDCで発表されたSF Symbols 5で導入されました。以下のセッションをあわせて確認すると理解が深まると思います。

今回のセッションではSF Symbols 6に追加された、Wiggle、Rotate、Breathのアニメーションについて紹介されています。

Wiggleは行動喚起、Rotateは現実世界のオブジェクトの模倣、Breathはステータスの変化や継続的なアクティビティがあることを伝える目的が想定されているそうです。

SF Symbols 6 betaは以下からダウンロードできます。

SwiftUIによるカスタムビジュアルエフェクトの作成

このセッションではSwiftUIに新しく追加されたビジュアルエフェクトが複数紹介されています。

  • Scroll effects

  • Color treatments

  • View transitions

  • Text transitions

  • Metal shaders

Scroll effectsではスクロールのトランジションやスクロールビューに追加された様々なエフェクトが説明されています。Viewのスクロールに合わせて角度や位置が変更されたり、パララックス効果が追加されたりカラーが変更されたりします。Swift UIの少ない行数のコードで柔軟にエフェクトを加えることができます。

Color treatmentsでは、新しく追加されたMeshGradientの仕組みが説明されています。Adobe Illustratorのグラデーションメッシュの機能がSwift UIでも使えるようになったと考えるとわかりやすいです。

グラデーションメッシュの仕組み

Swift UIでは、横方向と縦方向のポイント数と、各ポイントの相対座標とカラーを示す配列で簡単に実装できます。

MeshGradientの実装方法

タッチ操作でアニメーションさせたり、ボタンの背景に使用したり、待ち時間のアニメーションに使用したり、iOSアプリの表現の幅が広がります。

他にも、Custom transitionやText Renderer、Metal shadersについて説明されています。

TipKitによる機能検索のカスタマイズ

このセッションでは、アプリ何にヒントのポップオーバーを提供するTipKitの追加機能について説明しています。

TipKitは2023年のWWDCで発表されました。以下の動画をあわせて視聴すると理解が深まると思います。

アプリのUIでは一般的に、初回利用時の操作方法や、機能追加のお知らせを、インライン要素やポップオーバー要素で表示します。

そのための仕組みがTipKitで、表示要素や表示条件、表示頻度の制御を短いコードで実現できることが利点です。

今回のセッションでは、新たな追加された「Tipのグループ化」「Tipの再利用」「アプリのスタイルへの適合方法」「CloudKitを使用したデバイス間の同期」について説明されています。

UIデザイナーとしては、個々の機能の内容よりもユーザーにヒントを表示する際のUIのパターンや、表示条件、表示順、表示頻度など、ヒントの要件を決定する際に考慮すべきことを学べる点が良かったです。

X（Twitter）でもUIデザインについて発信しています。感想やコメントなどいただけると嬉しいです！

@shingo2000

この記事が気に入ったらサポートをしてみませんか？