feb19

Nobuhiro Takahashi
Designer / Engineer

macOS のアプリアイコンの形を揃える

macOS のアプリアイコンの形を揃える

date
2021.2.10(Wed.)
tags
macOSFigma

なんとなくアイコンの形を揃えたくなって。

上のカバー画像、微妙に左右(Before-After)で Figma, Zoom, VSCode, FF14 のアイコンで変更があるのがわかると思います。(右下のフォルダの中は変えられてないけど...)

macOS Big Sur からアプリアイコンが iOS っぽい見た目(角丸矩形)が標準になったのですが、意外と大きさやシャドーあと角丸具合に癖があるので、 Figma でテンプレートを作りました。

Figma テンプレートを使ってアイコンを作る

Duplicate していただけると使えると思います。好きなアイコンを作り Export してください。ダウンロードされた画像がまとまっているフォルダの名前を 好きな名前.iconset という感じで .iconset 接尾辞付きに変えます。

その後、ターミナルを開いて、そのフォルダまで移動し、以下のコマンドを叩きます。

% iconutil -c icns 好きな名前.iconset

これをやるとさっきのフォルダが 好きな名前.icns というアイコンファイルになってくれます。

アプリアイコンを置き換える

あとはアイコンを変えたいアプリの「情報を見る」を開いて、icns ファイルを既存アイコンにドラッグアンドドロップしたら置き替えられます。

BigSur でアプリアイコンをかえる

アプリがバージョンアップされると置き換えられてしまうので、都度置き換えますw

便利なサイト

上の Figma やターミナルを使って icns を作る流れが面倒な場合は、有志の人が macOS アプリアイコンを作って共有しているサイトがあるので、お好みのものを使ってもいいかもしれません。

Visual Studio Code や Android Studio 、 Zoom などはこちらの作品から置き換えたりしました。

感想

揃うと気持ちがいいです。

ちなみに関係ないですが FF14 が MacBook Air M1 で動くのはすごくて、ファンレス PC なのにレイドとか行けるの本当すごいです。白魔導士かナイトをやっていますのでよかったら零式とか連れていってください。

著者: @feb19