Liquid Glass に対応したアイコンデザインについて。「等間隔になった」デザイングリッドについて、たしかに以前はそうでなかったことを思い出した。レイアウトがしやすくなりそう（どれだけのデザイナーが従来のグリッドを尊重してデザインしていたかは不明だが、、） これまで自社アプリはダークテーマにも対応できてない状態だったが、強制的に Liquid Glass の視覚効果が与えられることによって従来のままではやや不恰好に見えてしまっている。Icon Composer も用意され、これを機に自社他社問わず、放置されていたアイコンの最適化が促進されるかもしれない。
0:00 – Intro
- visionOS のレイヤーアイコンと実際のガラス特性を研究して生まれた「Liquid Glass」マテリアル
- エッジハイライト、曇り(frosty)、透過性を組み合わせて奥行きと内側からの照明効果を実現
- iOSホーム画面ではジャイロ入力に基づいて光が動き、周囲の世界を反射しているような感覚
- 新しい外観モード：
- モノクロガラス（ライト・ダーク）
- ティントモード（ダーク・ライト）
- ダーク：前傾にカラー
- ライト：背景ガラスにカラーが注入
- 全ての外観モードが iPhone、iPad、Mac で利用可能。Apple Watch でもライトモードアイコンが更新された外観で表示
- App Store 商品ページでも更新されたアイコンが反映
2:20 – Design System
- 統一されたアイコン言語により、デバイス間でのデザインが容易になった
- 角丸四角型 (macOS, iOS)：1024px キャンバスで、よりシンプルで均等に配置され余裕のあるデザイングリッド、より同心円状で丸い角半径
- macOS では従来、アイコン形状から一部はみ出すケースがあった
- 形状がキャンバス形状がマスクとして機能し、不規則な形状を回避
- 既存のアイコンは自動的にリサイズ、マスクまたは拡張されて、新しいマテリアルを適用
- 円型 (watchOS)：1088px キャンバスで、角丸矩形よりも広く、プラットフォーム間の一貫性を実現しやすい
- 新しいテンプレート（Figma、Sketch、Photoshop、Illustrator対応）をApple Design Resourcesで提供
5:18 – Drawing Icons
- レイヤリング：背景と前面レイヤーの基本構造、複数レイヤーの積層で奥行きを表現
- 1枚の背景レイヤーと、1枚以上の前面レイヤーで構成可能
- Messages: 背景1枚、前面1枚
- Podcasts: 背景1枚、前面3枚として立体感ある奥行きを実現
- 1枚の背景レイヤーと、1枚以上の前面レイヤーで構成可能
- シンプルさの重視：複雑な3Dオブジェクトや遠近法は避け、フロントビューとフラットな外観を推奨 (e.g. Chess)
- 透過性：新しいマテリアルでの透過性とブラー効果で軽やかさと奥行きを追加
- 「少ないほど良い」原則：重複を減らし、Liquid Glass の効果を活かす（透明感、レイヤーごとの影やスペキュラハイライト）e.g. Photos
- レイヤーの数を減らし、形状に丸みを持たせ、視覚的効果を削除 → Liquid Glass の処理にゆだねる (e.g. Home)
- 細部の配慮：鋭いエッジや細い線を避け、丸い角を使用して光の流れを滑らかに → 要素端の光の動きが滑らかになる (e.g. Settings の歯車)
- 背景：ソフトな明暗グラデーションに加え、白黒背景の代わりに使えるシステムライト・ダークグラデーションを用意
- グラデーションは、上から下に、明 → 暗
- 色付き背景を推奨。ライト・ダークモード間の区別を明確にできる