1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

既存のiOSアプリアイコンをIcon ComposerでLiquidGlass対応してみた

Last updated at Posted at 2025-12-02

はじめに

最近のXcodeアップデートで登場したLiquidGlassスタイル(液体のように透明で、ガラスのようにきらめくアイコン効果)を、既存のアプリアイコンに適用する方法です。案件の依頼があり対応したのですが、意外と関連情報が見つからなかったため、ここに整理しておきます。

image1.png

アプリデザインに関する内容は以下リンクの動画で参照できます。(レイヤーごとに作業した成果物をIcon Composerに適用するのが効果があるような印象です)デザイン領域の話なので、ここでは割愛します。

背景

iOS 26では、ホーム画面のアイコンがガラスのように透明に処理されるUI変更が導入されました。
私がやっているアプリでもこの機能を適用しようとしたのですが、なぜか既存アイコンだけ透明効果が反映されませんでした。調べてみるとAppleが提供するIcon Composerで生成したアイコンファイルのみ、この効果が保証されることが分かりました。

前提条件

  • Xcodeおよび開発ツールは最新バージョン(Xcode 26)にしておくこと
  • アイコン画像の背景が透明(Transparent)であること
  • Icon Composerでアイコンファイル(.iconset または .icon)を生成すること

手順

1. Icon Composerで .icon ファイルを生成

Apple公式サイトからIcon Composerをダウンロードしてインストールします。
Icon Composerを起動し、アイコン画像(透明背景のPNG)をドラッグ&ドロップします。
デフォルトのFill色は青になっていますが、必要に応じて色やグラデーションに変更できます。
File → Save で保存し、ファイル形式は .icon を指定します。

image2.png

2. Xcodeプロジェクトに適用

Xcodeでプロジェクトを開き、生成した .icon ファイルをドラッグして追加します。
(最初はAssetsに追加しようとしましたが、うまくいきませんでした)

image3.png

追加時の設定は以下の通りにします。

  1. Action: Copy files to destination

  2. Groups: Create groups

  3. Targets: 対象アプリのプロジェクトにチェック

  4. [General] → [App Icons and Launch Screen] で、App Icon設定が生成したアイコンファイル名と一致しているか確認します。
    image4.png

  5. ビルドして実行し、ホーム画面でアイコンが透明に表示されるか確認します。
    image5.png

Tips / 注意点

ダークモードでもアイコンが適切に表示されるか確認しましょう。

既存アイコンが透明背景でない場合、効果が反映されなかったり不自然に見えたりすることがあります。

チーム内では「アイコンデザイン → 透明背景PNG準備 → Icon Composer生成」という流れを整理しておくとスムーズです。

まとめ

作業していて感じたのは、UIの変化は単なる見た目の問題にとどまらず、プラットフォーム全体の体験に影響するという点です。既存のコードやリソースだけでは、新しいOS機能に完全対応できないケースも出てきます。

アイコンのように小さく見える要素でも、実際には“第一印象”を左右します。こうした細部まできちんと対応することが、サービスの完成度に大きな差を生むのだと思います。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?