みなさんこんにちは、たいくんです。
今から2ヶ月ほど前、私の人生初となるMacアプリ「Clip Hold」をリリースしました。
その後、macOS Tahoeのリリースが近づいてきて、App StoreでXcode 26 RCを使ったTahoe対応向けアップデートを受け付けるようになったため、数日前にTahoeとLiquid Glassに対応したClip Hold 1.4.0をリリースしました。
Liquid Glass対応アイコンを作るのに少し苦戦したので、この記事では、その時のお話をしようと思います。
アイコンのデザイン
以前のアイコン
こちらが、今までのバージョンのClip Holdアイコンです。
細長いアルファベットの「O」の形をしたクリップが、小文字の「h」の上に引っかかっているようなデザインです。
そもそも「Clip Hold」という名前は、「クリップ（ボードに入ったアイテム）をしっかりホールドする（離さない）」という意味を込めて名前をつけました。
世の中にはクリップボードマネージャーがたくさんあるため、他のクリップボードマネージャーと被らないような名前にするのが大変でしたが、「Clip Hold」は他のどのクリップボードマネージャーとも似通っておらず、私の考えた意味を込めることができたので、自画自賛ではありますが、この命名にはとても満足しています。
そのため、アイコン（ロゴ）のデザインにも名前に込めた意味を反映させたいと思い、たどり着いたデザインがこちらになります。
クリップを「h」に引っ掛けるデザインにすることで名前の意味を込めることができたように思います。
Liquid Glassアイコン
続いてこちらが、Clip Hold 1.4.0で新たに追加されたLiquid Glassのアイコンになります。
どうでしょうか。先ほどお見せした以前のアイコンと同じように、ガラス効果のついた半透明なクリップが「h」に引っかかっているように見えませんか？
一見、シンプルで単純なデザインに見えると思いますが、実は最終的なこのアイコンを完成させるのに紆余曲折がありました。
最終的なデザインに到達するまで
3パターンのデザイン
こちらは、ライトとダークのアイコンを、リビジョン順に並べたものです（光沢表現がわずかに異なるのは、画像の作成に使ったIcon Composerのバージョンが異なるためです）。
実は、最終的なデザインに到達するまで、合計3回ほどデザインのし直しを行いました。
厳密には、デザインのし直しというよりも微調整ではありますが、Clip Holdのロゴは「h」がクリップの手前と奥を行き来するような奥行きのあるデザインになっているため、Liquid Glassアイコンでもいい感じの奥行き感を出すのがなかなか難しかったです。
そもそもLiquid Glassアイコンはレイヤー間を交差する奥行きのあるデザインに向いていない
Appleが公開しているどのLiquid Glassアイコンを見ても、ほとんどのアイコンデザインはレイヤーが奥から手前に乗っかっていくようなものばかりです（ポッドキャストのアイコンが最もわかりやすいと思います）。
実際、Liquid Glassアイコンを作成するために使用したAppleのツールである「Icon Composer」も、そのようなアイコンを簡単に作成するためにできています。
そのため、クリップの手前と奥を行き来するようなデザインをどのように作成すれば良いのかかなり悩みました。
最初のアイデア
最初に思い浮かんだのは、「クリップの上部分（『h』の後ろに回り込む部分）を切り取って、クリップを『h』の上に乗っければ良いのでは？」というアイデアでした。
実際にやってみたのが上記のアイコンです（ちょっとだけ質感がマットっぽいのは、この画像を作成したときに使ったIcon Composerが初期のバージョンであるためです）。
うーん…遠目かつ薄目で見れば裏側に回り込んでいるように見えるかもしれませんが、それでもあまり奥行き感は感じられません。
それに、明らかにクリップの上部分が切り取られているように見えてしまいます。
しかし、この時は他に良いアイデアが思い浮かばなかったのと、まだTahoeが発表されたばかりでリリースまでは少し時間があるため、ひとまずこちらのデザインを仮アイコンとして使うことにしました。
最初のLiquid Glassアイコンを作成してからしばらく経ち、気づけば9月になっていました。
さすがにそろそろちゃんと考えないといけないなと思い、どのようにすれば奥行き感を演出できるかを考えることにしました。
次のアイデア
いろいろと考えた結果、「h」の上側に乗る部分と下側に回り込む部分に分けてみることにしました。
その結果のアイコンがこちらです。
最初に考えたアイコンよりもうんと良くなりました！
これなら奥行き感もあるように見える…と思っていたのですが、少しアイコンを眺めていると、「h」の切り取った上部分が浮いているように見えてきました。
一度気になり出すと、もうそのようにしか見えなくなってしまい、ちょっとだけ違和感がありました。
だいぶ私の想定には近づいたものの、もう少し改善が必要そうです。
何か他に良いアイデアはないか、Appleがデザインした様々なLiquid Glassアイコンを見ながら考えてみることにしました。
良さそうなヒントを発見
すると1つ、私のやりたいことに近いデザインのアイコンを発見しました。それが「App Store」アプリです。
実は、このアイコン自体は最初のアイコンをデザインする前から知っていたのですが、このようなデザインはAppleだけが作成できて、開発者が一般的に作成することはできないと思い込んでいました。
しかし、9月になったことで考え方が少し変わり、ふと「実はそんなことないのでは？」と思ったので、ファイルの中身を覗いてみてどのようにアイコンが作られているのかを確認してみることにしました。
アセットファイルを開いて確認してみることに
といっても、ビルドされたアプリにはIcon Composerのアイコンファイルは存在しないので、アプリで使用されている様々なアセットが格納されたアセットファイルを確認してみることにしました。
アセットファイルは「App Store.app/Contents/Resources」フォルダの中に、「Assets.car」という名前で保存されていることがわかりました。
しかし、アセットファイルはそのままでは開くことができないので、この種類に対応したアプリが必要です。
幸い、過去にも別のアセットファイルを開くために「Asset Catalog Tinkerer」というアプリをインストールしていたので、特にアプリを追加する必要なく開くことができました。
Tahoeに入っているApp Storeのアセットファイルを開いた結果がこちらです（このスクリーンショットはSequoiaで撮影しています）。
この中にLiquid Glassアイコンを構成する画像ファイルが含まれているはずです。
まず見つけたのが、こちらの基本パーツたちです。
App Storeのロゴを構成するためのパーツが複数個に分かれていました。
また、長い棒部分と、後ろに回り込むための短い棒部分に分かれていることも確認できました。
次に、5番目のパーツとして色付きの影が見つかりました。
なるほど！影レイヤーを使って奥行きがあるように見せていたのか！と納得しました。
これを見なければ「影レイヤーを追加する」という考えは浮かばなかったでしょう。
最後に、別の種類の影のような画像も見つかりました。
これらの結果から、基本パーツを表側と裏側に分割して、影レイヤーを追加して上に乗せることで奥行きがあるように見せることができるということがわかりました。
これはとても良いヒントになりました！
すでに基本パーツは分解されているので、これに加えて影レイヤーを追加すれば良さそうです。
最終デザイン
こうして出来上がったのが最初にお見せしたこちらのアイコンです。
クリップの周りに影ができたことで、「h」の手前と奥を交差するような奥行き感を演出することができました。
実は最終的なアイコンでも、よく近づいて見てみると「h」の上パーツとクリップのつなぎ目が若干浮いているように見えてしまいますが、かなり拡大して近づかなければわからないので、良しとしました。
最終アイコンの解説
最終的に完成したLiquid Glassアイコンをレイヤーごとに分けると、このような感じになります。
レイヤーごとに色分けしたので少しはわかりやすいかなと思います。
「h」を、クリップの後ろ側に回り込む部分と手前に乗っかる部分に分けました。
分けられたパーツの間に、どこも切り取られていないクリップが挟まっています。
これらの3つを組み合わせたレイヤーに、さらに上から影レイヤーを乗せています。
最初はこの画像にある影レイヤーの最も上にある、全体の影を1つだけ使用していましたが、「h」の上部分とクリップのつなぎ目が奥行き感に欠けているように感じたため、その部分の影をさらに強調するために単体の影を追加しています。
色分けした状態ですべてのレイヤーを重ね合わせたのがこちらになります（各レイヤーの透明度を90%にして、背景は透明にしています）。
これだけでも確かに奥行きを感じることができますね。
これら一つ一つのレイヤーを透過画像として書き出し、Icon Composerを使って色合いや大きさなどを微調整してアイコンを作成しました。
それぞれのパーツはグループ分けし、最も表側にある影グループと「h」の上側の影レイヤーにはLiquid Glass効果を適用しないように設定しています（見た目はほとんど変わりませんでしたが、念のため）。
また、最も表側にある影グループにはブレンドモードとして「Overlay」（モノカラーには「Plus Darker」）を使って、全体に影が馴染むようにしています。
他にも、クリップや「h」パーツの透明度や色合いなどを調整し、ガラスの透明感や美しさを表現しています。
さいごに
今回は、私が奥行き感のあるLiquid Glassアイコンを作成したときの話をご紹介しました。
これからmacOS Tahoeがリリースされ、Liquid Glassアイコンをデザインすることになる人も増えてくるだろうと思いますので、Clip Holdのようなレイヤー間を交差する、奥行き感のあるデザインでどのようにLiquid Glassアイコンを作成しようか悩んでいる方の参考になれば幸いです。
Buy Me a Coffeeでは、緑茶1杯分からのサポートを受け付けております。
私の情報が役に立ったと感じていただけましたら、サポートをご検討いただけますと幸いです。
最後まで読んでくださりありがとうございました。それでは、また！