👌

Liquid Glass時代のIcon Composerを触ってみた

に公開
iOS
アイコン
デザイン
アプリ
tech

はじめに

こんにちは！アプリ開発グループ iOSチームのソンチャンです。

2023年にAppleがVision Proを発表したとき、visionOSには現実世界と自然に溶け込む半透明なグラスUIが搭載されていました。私は「綺麗だけど、VRヘッドセットの話だから今すぐは関係ないな」と思っていました。

ところがWWDC25で状況が変わりました。AppleがそのグラスUIを「Liquid Glass」という名前でiOS、iPadOS、macOS、watchOS全体に適用すると発表したのです。Vision Proから始まったデザイン言語が、すべてのAppleプラットフォームの標準になる瞬間でした。

個人的にこれは単なるデザイントレンドの変化ではないと思っています。Appleが空間コンピューティング時代を本格的に準備しているのではないでしょうか？今からiPhoneやMacユーザーにグラスUIを馴染ませておけば、将来AR/VRデバイスが普及したときに「あれ、このインターフェース見たことあるな」と自然に適応できるはずです。未来のインターフェースに対するメンタルモデルを今からそっと植え付ける戦略ではないかと思います。

この記事では、Appleがこの新しい時代のためにリリースしたツールの一つであるIcon Composerを実際に使ってみた感想と使い方を共有します。

Icon Composerとは？

Icon ComposerはAppleがWWDC25で発表したLiquid Glass対応アプリアイコン制作ツールです。iOS 26、iPadOS 26、macOS Tahoe、watchOS 26から導入される新しいデザイン言語「Liquid Glass」に対応したアイコンを、単一ファイルで複数プラットフォーム向けに作成できます。

Icon Composerのアイコン

なぜIcon Composerが登場したのか？

これまでアプリアイコンは、各プラットフォームごとに複数サイズの画像を用意してXcodeのアセットカタログに登録する必要がありました。さらにiOS 26からは以下のような新しいアピアランスモードが追加されました。

モード 説明
Default 従来のライトモード
Dark ダークモード
Clear Light/Dark 半透明グラス効果
Tinted Light/Dark 色付きグラス効果

各アピアランスモードの比較

これらすべてに対応するアイコンを個別に作成するのは大変ですが、Icon Composerを使えば1つのファイル（.icon）ですべてのバリエーションを管理できます。

Icon Composerの使い方

インストールと起動

Icon ComposerはApple Developer Design Resourcesから無料でダウンロードできます。

動作要件

  • macOS Sequoia 15.3以上

画面構成

Icon Composerは3つのパネルで構成されています。

Icon Composer全体画面

① サイドバー（左）

  • レイヤーとグループの管理
  • 最大4つのグループ（深度レベル）まで作成可能

② プレビューパネル（中央）

  • リアルタイムでLiquid Glass効果を確認
  • 動的なライティング効果のプレビュー
  • 各プラットフォーム・アピアランスモードの切り替え

③ インスペクター（右）

  • レイヤーの不透明度、ブレンドモード、塗りつぶし設定
  • グループのLiquid Glassプロパティ調整
  • プラットフォームごとの表示設定

アイコン制作の流れ

Step 1: 素材の準備

まずFigma、Sketch、Illustratorなどでアイコンの各レイヤーをデザインします。

重要なポイント

  • キャンバスサイズは1024×1024px（iPhone/iPad/Mac用）または1088×1088px（Watch用）
  • 背景グラデーションや単色はIcon Composer内で追加できるので不要
  • SVG形式で書き出すのがベスト（ベクターなのでスケーラブル）
  • テキストは必ずアウトライン化
  • 角丸マスクは含めない

Step 2: レイヤーのインポート

Icon Composerを起動して新規プロジェクトを作成します。サイドバーまたはプレビューパネルにSVGまたはPNGファイルをドラッグ＆ドロップしてレイヤーを追加します。

レイヤーをドラッグ＆ドロップ
ファイルをドラッグ＆ドロップしてレイヤーを追加

Step 3: Liquid Glass効果の適用

レイヤーをインポートすると自動的にLiquid Glass効果が適用されます。もちろんON/OFFの切り替えも可能です。

Liquid Glass OFF Liquid Glass ON
OFF ON

グループレベルで調整できるプロパティ

プロパティ 説明
Mode グラスモード（Individual/Combined）
Specular 光の反射（輪郭のハイライト）
Blur ブラー効果
Translucency 半透明度
Shadow 影の設定（Chromatic/Neutral）

グループレベルのプロパティ設定
Shadowで影を適用してみた例

レイヤーレベルで調整できるプロパティ

プロパティ 説明
Liquid Glass ON/OFFの切り替え
Opacity 不透明度
Blend Mode ブレンドモード
Fill 塗りつぶし色

レイヤーレベルのプロパティ設定
Fillで青りんご色に変更してみた例

Step 4: アピアランスモードの調整

プレビューパネル下部でDefault、Dark、Mono各モードを切り替えながら見た目を調整します。

Default Dark Mono
Default Dark Mono

Dark Modeのコツ

  • 明るい色は暗めに調整しないと浮いて見える
  • 赤など彩度の高い色は特に注意

Mono Modeのコツ

  • 少なくとも1つのレイヤーは白に近い色に
  • コントラストを意識した配色

Mono Modeの設定

Mono Modeでは以下のアピアランスを調整できます。

アピアランス 説明
Clear Light/Dark 半透明グラス効果
Tinted Light/Dark 色付きグラス効果

Step 5: Xcodeへのエクスポート

Icon Composerで作成した.iconファイルはXcodeと直接連携できます。

  1. File > Export to Xcodeを選択
  2. プロジェクトのアセットカタログを指定
  3. 保存すると自動的に同期

またマーケティング用にフラットな画像としてエクスポートすることも可能です。

Xcodeへのエクスポート

実際にココナラアプリアイコンを作ってみた

今回は試しにココナラアプリのアイコンをIcon Composerで再現してみました（あくまで個人的な実験です）。

ココナラアイコンについて

ココナラのシンボルマークは、6色（Blue、Green、Yellow、Orange、Pink、Purple）が重なり合った再生ボタンのような形をしています。

ココナラ現在のアプリアイコン

ロゴガイドラインによると、このデザインには以下のような意味が込められています。

コンセプト 意味
Diversity 6色で多様なスキルを持つユーザーの多様性を表現
CO-Creation 色の重なりで出品者と購入者の共創体験をイメージ
Connection 人と社会がつながる場所であることをロゴの形状で表現

このように複数の色が重なり合う構造は、Icon Composerでレイヤーを分けて深度効果を出すのに適していると感じました。

試した構成

パターンA: Foregroundレイヤー1つ

  • Group 1（背景）: 白
  • Group 2（ロゴ）: ココナラシンボルマーク全体を1つのレイヤーで

パターンAのレイヤー構成

パターンA

  • シンプルに作れましたが、Liquid Glass効果が全体に一括適用されました

パターンB: Foregroundレイヤー複数

  • Group 1（背景）: 白
  • Group 2〜4（ロゴ）: ココナラシンボルマークをパーツごとに分離

パターンBのレイヤー構成

パターンB

  • 各要素ごとにLiquid Glassプロパティを個別調整できるのでディテールを活かしやすかったです
  • パーツ間の深度差でより立体的な表現が可能でした
  • パーツを分離したことで、重なる部分がブレンドモードにより光の合成のような効果が生まれました。オレンジ、グリーン、パープルの表現が面白かったです
  • ただし、各パーツにLiquid Glassが適用されるため、黄色パーツのSpecularハイライト（白い線）が遠くから見ると白い点のように見えてしまう欠点もありました

パターンBの欠点
黄色パーツのSpecularハイライトが白い点のように見える

感じたこと

  1. Liquid Glass効果が想像以上に美しい

    • 単色のアイコンでもグラスの質感が加わることで立体感が生まれました
    • 動的なライティングでアイコンが「生きているように」見え、光の角度も自由に調整できました

  2. Dark Mode対応が簡単

    • 以前は別途画像を用意していましたが、プロパティ調整だけで対応可能でした
    • 各モードを行き来しながらリアルタイムで確認できました

  3. プラットフォーム間の一貫性を保てる

    • iPhone、iPad、Mac、Watchで統一されたアイコンを1ファイルで管理できました
    • 各プラットフォームの形状（角丸/円形）に自動対応してくれました
iOS / macOS watchOS
iOS/macOS watchOS

少し困った点

  1. レイヤーのリサイズ・位置調整が少し手間

    • リサイズが%単位で調整されるため、細かい位置調整は元のデザインツールでやった方が楽でした

  2. 複雑なイラストには向かない

    • グラフィックでシンプルなアイコンに最適化されているようでした

Icon Composerを使うべきケース・使わなくてもいいケース

Icon Composerが効果的なケース

  • シンプルなシンボルマークのアイコン
  • 色数が少なくグラフィックなデザイン
  • 複数のアピアランスモードに対応したいとき
  • Liquid Glassの深度効果を活かしたいとき

従来の方法でも良いケース

iOS 26では、Icon Composerを使わなくても既存のアイコンに自動的にLiquid Glass効果（Specularハイライト）が適用されます。そのため以下のケースでは無理にIcon Composerを使う必要はありません！

  • 写実的なイラストや複雑なアートワーク
  • 既存のアイコンをそのまま使いたいとき
  • Dark ModeやMono Modeの細かいカスタマイズが不要なとき

まとめ

Liquid Glassの登場により、Appleプラットフォーム全体のデザイン言語が大きく変わりました。iOS 26では既存のアイコンにも自動的にLiquid Glass効果が適用されるため、対応自体は必須ではありません。

しかし、Icon Composerを使えば深度効果を活かした立体的な表現や各アピアランスモードの細かいカスタマイズが可能になります。シンプルでグラフィックなアイコンであれば、ぜひ試してみる価値があるツールだと感じました。

今後の展望

Icon Composerはまだ初期バージョンですが、今後のアップデートでより便利な機能が追加されることを期待しています。

iOS 26のリリースに向けて、ココナラでもLiquid Glass対応を進めています。デザイナーと協力しながら、新しいデザイン言語にふさわしいアイコンを作っていきたいと思います。

最後に

最後まで読んでいただきありがとうございました！Icon Composerを使ってみた感想や質問があれば、ぜひコメントで教えてください。
ココナラではさまざまな課題を解決するエンジニアを絶賛募集しています！気になった方は採用ページをご覧いただければと思います。

参考リンク

Discussion