FigmaでiOSアプリのアイコンを改善しました
↑個人開発のノートアプリの、アプリアイコンを変えました。
アイコンのBefore/Afterがこんな感じです。
Before
After
Figmaがなんとなく使えるようになるまで
もともとのアイコンはKeynoteでつくりました。
所要時間は10分くらい？
AppleのPagesのアイコンを参考……というかパクってますね。
Figmaを使うといい感じのアイコンがつくれる、というのは小耳に挟んでいて、何もわからないままとりあえず白紙のページを開いてもみたんですが、
いかんせん使い方がわからず、納得いかないアイコンのまま月日が流れていきました。
転職をきっかけに、Figmaを使ってデザイナーさんとコミュニケーションとる感じになって、なんとなくFigmaの使い方がわかってきました。
Figmaでアプリアイコンつくる流れ
この記事はアプリアイコンをいい感じにしたい思いはあるけど、具体的にどうしたらいいのかよくわかってない人向けに書くので、まずはざっくり流れを書きます。
- Figmaで1536 x 1536サイズでアイコンをつくる
（このサイズなのはmakeappiconの推奨がこのサイズだから、というだけ） - Figmaのエクスポート機能でPNG（JPEGでも可）として出力
- makeappiconにつっこむ
- Xcodeでポチポチ貼る
- ストア提出！
Figmaでやったこと
まずFigmaで会員登録します。
ログインできたなら、「New design file」を選びます。
すると、いきなり砂漠みたいなページに遷移して面食らうと思います。
転職前の僕はここで挫折しました。
完成したデザインページから入ると、操作のイメージがわくんですが、空白のページで１から習得しようとするとちょっと難しかったですね。
上のツールバーから色々ツールを選びます。
アプリアイコンをつくる、というだけだったら、↓の３つのボタンを主に選べばOKだと思います。
それぞれ図形、曲線、文字です。
エクスポート機能
四角形を置いたら、右側で大きさを変えたり、色を変えたりできます。
角丸にしたり、色にグラデーションつけたり、影つけたりもできます。
大きさについては、真ん中のキャンバスで、GUI操作でやることもできますが、
僕はこれでやったら正方形にするの失敗したので、数字で入れるのをオススメします。
で、ここが大事なところなんですが、Figmaにはエクスポート機能がありまして、つくったオブジェクトを画像ファイルとして出力できます。
右のバーからExportを選んで、出力します。
アプリアイコンはベクター画像にできない
今のiOSアプリは、ベクター画像という、解像度考えなくていい画像形式に対応しているので、
普通の画像アセットだったら、x2/x3を用意しなくても、Single Scaleで指定することができます。
（これも転職してから知りました）
アプリアイコンもそれでやろうと思ったら、どうもアプリアイコンは対応していない模様で、やたら多い画像サイズにそれぞれ指定する必要があります。
画像サイズの変更は単純作業ですが、さすがに指定された画像サイズが多すぎるので、専用のサービスを使うのが賢いと思います。
僕はmakeappiconというサービスを使っていますが、他にもあるので、好きなサービスを使えばいいと思います。
Apple Pencilっぽいオブジェクトをつくる
アイコン上のApple Pencilっぽいオブジェクトは、線オブジェクトを加工してつくっています。
両端を丸くして、太さを70ptにしています。そして影を落としてます。
手書きっぽい線
アイコンに、手書き感のある線を入れてみました。
これは、曲線機能を使って、パソコンのブラウザ上で頑張って書きました。
今気づいたのですが、iPadでFigma操作すると、Apple Pencilの入力を普通に受け付けるので、こっちで書けばよかったですね。。。
Figmaのクリック操作で曲線を思い通りに曲げるのは結構大変です。
アイコンサイズになると線はほぼ見えなくなる
アイコン作成のときの失敗なんですが、１~5ptぐらいの線を描いちゃうと、アプリアイコンにしたときにほぼ見えなくなるので注意が必要です。
最終的に僕は手書きっぽい線を12ptでつくりましたが、端末上ではこのぐらいの太さで十分細い線に見えます。
Figma上だと結構太く見えちゃうんですが、アプリアイコンは100〜200pxの世界なので、想像以上に小さいです。
最初につくった線は、実際にiPadで見ると、「ゴミがついてんのかこれ……？」ぐらいになりました。
まとめ
アプリアイコン、本当にこだわるのであればプロに発注するという手もありますが、
個人開発だとそこまで潤沢に資金ないと思うので、結局自前でつくることになるかと思います。
Figmaは最初のハードルが高かったですが、使えるようになると、
ノンデザイナーでも、そこそこのクオリティのものができると感じました。
この記事が同じようなことしようとしてる方の役に立てば幸いです。
Discussion