Flutterでアプリを作っていますが、今はシミュレーターでプロジェクトを実行するとFlutterのロゴが表示されています。
既に作ったロゴがありますが、そのまま適用してしまうと、既存のリリース済みアプリのように余白やサイズを気にしていないので、きれいに収まらない感じがします。
そこで、どうすれば余白とサイズをうまく調整して入れられるか調べてみました。
既に作ったロゴはFigmaで作ったので、Figmaコミュニティでアプリアイコンを簡単に作れる方法を探しました。
このApp Icon Toolkit - iOS/macOS/Androidツールキットを使えば、Keylineと様々なサンプルを表示してくれるので、自分のアイコンをコンポーネントに適用すれば簡単にプレビューが確認できます。デザインに詳しくなくても感覚で余白やサイズを調整できます。
ここで知っておくべき点は、Icon_Artフレーム内にはMaterial - GridとiOS - Gridが一緒に表示された状態になっていることです。そのため、どちらかを選んで削除するか非表示にするのがおすすめです。自分はiOS - Gridを選びました。そしてbgのせいで線が見えにくいので、これも非表示にするのがいいでしょう。
自分は1024x1024サイズで892x892を大枠として設定し、ロゴが円の中に収まるようにしました。特別な場合を除いて、円のサイズを超えないようにロゴを円の中に収めるのが一般的なようです。必要であれば円の中で余白を設けてもいいでしょう。
左右の余白を66pxにすると1024pxから892pxになります。そして892x892フレームで66pxサイズ分の左右余白を設けると760pxになります。すると1024pxで左右132pxの余白を持つ四角形の中にロゴが配置されます。
自分のロゴサイズではサイズが大きすぎず小さすぎない感じがしました（デザイン専攻ではないので感覚でしか説明できませんが）。
追加で以下のリンクもアプリアイコンについて説明しているのでチェックしてみることをおすすめします。
- App Icon Toolkitの代わりに使えるFigmaファイル: Icon Grid Templates
- アプリUIデザイン基本：アイコンデザイン時に知っておくべき概念とガイドライン - UX/UIデザイン講座 2-4
- ios Appleアイコン描き - 1. グリッドテンプレートキーライン
- Google Play icon design specifications
- Apple Developer アプリアイコン
アプリアイコンのデザインが整理できたら、後でFlutterでアイコンを適用する方法について記事を書きますね！
A fine quotation is a diamond on the finger of a man of wit, and a pebble in the hand of a fool.
— Joseph Roux
