Figma で Vision Pro 用アプリのアイコンをデザインするには？
visionOS 向けアプリはアイコンがあるが、普通のアイコン制作とちょっとだけ異なる部分がある。ということで、以下 visionOS 向けアプリのアイコン作成メモ。
アプリのアイコンを作るにあたって、いくつかのお決まりがある。何も考えないで Figma で作ると、のっぺりとしたアプリアイコンになってしまうのだ。ということでまずは次のリンク先をじっくりと読む。
量としては多くないものの、以下の点は踏まえておきたい。
- 1024 x 1024 で作成する
- 背景レイヤーと前景レイヤー、そして更に手前のレイヤーの3レイヤーがある
- アイコンは円で作る必要はなく、正方形の塗りつぶしでも勝手に切り抜かれる
- 前景レイヤーや更に手前のレイヤーは背景レイヤーなどに対して自動で影がつく
特に最初から円形で作ると、変な感じで切り取られる可能性があるし、制作者側で影をつけてしまうと角度によっては変な影としてユーザーにうつるかもしれないということ。
そういえば、ドロップシャドウといえば大昔は画像で作ったり、その後は CSS でつけたりしたが、影の角度や量は制作者が決めていた。visionOS では自然な影がつくようになった。ドロップシャドウは自然にまかせるのが本来なのだろうと思う。
ついでに以下の開発者向けドキュメントも読んでおきたいところ。
具体的な画像のサイズが記載されている他、他のデバイスとのアイコンの比較が掲載されている。
visionOS 向けのアプリアイコンは、3レイヤーとなるという話は書いたが、実際に作るとなると意外と迷う。背景色は決まっているとして、ロゴを載せるだけなら2レイヤーでいいからだ。しかし2レイヤーで作ってしまうといざホーム画面で表示したときに微妙なのっぺり感を感じてしまう。
「よりひろいフロントエンド」のアイコンを作ってみたが、本来は2レイヤーで済むロゴであり、悩んだ挙句ロゴ部分を分解して「よりひろい」の部分を最前面のレイヤーとした。
完成した各レイヤーは Figma 上ではそれぞれエクスポートしておく。個人的には 1024 x 1024 のフレームを3つ用意しておき、その中で作業するというのが手軽かもしれないと思った。というのも最初ロゴを分解してコピー＆ペーストして3レイヤーにしようとしたら位置がずれてしまったのだ。2レイヤー同じロゴを配置しておいて、不要な部分をそれぞれ削除するとかでもいいかもしれない。
出来上がった各レイヤーを Xcode 上で Assets.xcassets を開いてそれぞれのレイヤーにドラッグしていくことでアイコンとして合体することができる。プレビュー画面もあり、マウスカーソルを動かすといろいろな角度から確認ができる。
ひょっとしたら今後のアプリでは3レイヤーを前提に置いたロゴ作成が基本となるかもしれない。
