Zenn
💎

FlutterでApp Iconを作って設定するまで

2022/01/17に公開
Flutter
#
icon
tech

自己紹介

はじめましての方もそうでない方も、レシピサイトやSNSなどメニューを横断的に取り込める

おうちメニュー

というプロダクトをやっているkentarohです。

iOS Android
App Store Play Store

本題

プロダクトマーケットフィットを目指すためUXの改善をし続けています。
アプリのアイコンをiOS用、Android用にXDで作ってサイズや解像度を意識して複数作って、配置してーと、これまで大変な思いをしながら、アイコン作って設定していました。おうちメニューでもアイコンの変更のために楽したいなーと思ったら良さげなパッケージ見つけたので、使い方を共有したいと思います。アイコンを作るところについてもちょっとaddしたものにしようと思います。

＊ここでは、アプリないで使うアイコンと紛らわしいので ”App Icon”という言葉で統一して使っていきたいと思います。

前提

flutter_launcher_icons: ^0.9.2を使います。

Flutter用のApp Iconを作る

正確にいうと、flutter_launcher_icons用のApp Iconですね。

iOS用のApp Iconを作る

早速作っていきましょう。その前にまずは公式のガイドにApp Iconを作る上でのヒントが書いてありますのでチェックです。Human Interface Guidelines
私が重要だと思っているところを要約してみます。

要約
アプリには、ストアで注目を集め、ホーム画面で目立つ、美しく印象的なアイコンが必要です。アイコンは、アプリの目的を一目で伝える最初の機会です。また、設定や検索結果など、システム全体で表示されます。

以下の10を意識して作りましょう。

  1. 本質を捉えた単一の要素をシンプルでユニークな形で表現すること。詳細化は慎重に。

  2. フォーカスポイントは1つに絞ること。

  3. 一目で認識可能なアイコンをデザインすること。

  4. 背景をシンプルに保ち、透明にしないこと。

  5. 単語は、必須またはロゴの一部である場合にのみ使用すること。

  6. 写真、スクリーンショット、またはインターフェイス要素を含めないこと。

  7. Appleハードウェア製品のレプリカを使用しないこと。

  8. ここだけ理解が甘いので原文のまま引用させてもらいます。

Don’t place your app icon throughout the interface. It can be confusing to see an icon used for different purposes throughout an app. Instead, consider incorporating your icon’s color scheme. See Color.

  1. さまざまな壁紙に対してアイコンをテストすること。
  2. アイコンの角を正方形にすること。

各サイズ、解像度で生成してくれるので1024*1024のpng形式のものを1つ用意すれば、Flutter_launcher_iconsを使って出力してくれるので楽です。

私はAdobe XDを使って作りますが、PowerPointとかでも作れます（）。

Android用のApp Iconを作る

こちらも公式のガイドからチェックしていきましょう。こちらは日本語でドキュメントがありますので要約は無しで。Google Play アイコンのデザイン仕様からちょっと引用します。

Google Play におけるアプリの掲載情報用のアセットを作成する際に遵守する必要があるガイドラインについて説明します。たとえば、Google Play ではアプリアイコンの角の丸みとドロップ シャドウを動的にレンダリングするため、これらは元のアセットから除外する必要があります。

アイコン アートワークでアセット スペース全体を占有するか、または、アートワークの要素（ロゴなど）を設計してキーライン グリッド上に配置することができます。アートワークを配置する際には、キーラインをハードルールとしてではなく、ガイドラインとして使用します。

アートワークを作成する際には、以下の要件を満たしていることを確認してください。
最終的なサイズ: 512 ピクセル x 512 ピクセル
形式: 32 ビット PNG
色空間: sRGB
最大ファイルサイズ: 1,024 KB
形状: 正方形 – Google Play が動的にマスキングを処理します。半径はアイコンサイズの 20% に相当します。
シャドウ: なし – Google Play が動的にシャドウを処理します。アートワークにシャドウを付ける方法については、下記の「シャドウ」をご覧ください。

知っておいた方がいい技術としてはアダプティブアイコン

Android 8.0（API レベル 26）では、アダプティブ ランチャー アイコンが導入され、デバイスモデルごとに異なる図形を表示できるようになりました。たとえば、アダプティブ ランチャー アイコンを利用すれば、ある OEM デバイスでは円形のアイコン、別のデバイスで角が丸い正方形のアイコンを表示できます。各デバイスの OEM が指定するマスクを使って、すべてのアダプティブ アイコンが同じ図形でレンダリングされます。アダプティブ ランチャー アイコンは、ショートカット、設定アプリ、共有ダイアログ、概要画面でも使用されます。

アイコンと背景を用意してちょっとコード書いて、丸アイコンや角丸アイコンなど自動で設定してくれるようにすることができます。Flutter_launcher_iconsでもadaptive_icon_backgroundなどで設定できるので理解しておいた方がいいです。

Material Design/Product Iconsも参考に作りたいですね。

Flutter用のApp Iconを1枚で作るには

iOSの制約とAndroidの制約の両方を満たす1枚を作ればいいということになります。アプリをリリースしていわゆるPMF（Product Market Fit）までの間、またはグロースのフェーズでApp IconのiOS、Android最適化を行うのがいいかと考えています。
1024 * 1024 のキャンバスで、Material DesignのKeylineに従い、背景を透明にせずロゴ以外の文字を使わず、インターフェース要素も使わず、焦点は１つになるような、シンプルで洗練されたアイコンを作るということになります。

FlutterでApp Iconを設定する

Flutter_launcher_iconsを使って、作成したファイルを元に各解像度、各プラットフォームにビルドするだけです。pubspeck.yamlでオプションを設定すると、iOS Android各プラットフォーム上に適切な画像が出力され設定されます。

flutter_launcher_iconsの導入

pubspec.yaml
dev_dependencies:
  flutter_launcher_icons: "^0.9.2"

を追加しましょう。なんでdev_dependencies？このパッケージは、アイコンを生成して配置してくれるものなので、リリースする本体には含める必要ないからですね。

一旦起動できるように

flutter pub get

しておきましょうか。

App Iconの配置

assets/icon/とディレクトリを作り配置しましょう。
iOSとAndroidで分ける場合は,assets/icon/androidとasetts/icon/iosというディレクトリに分けてもいいですね。ここでは例としてicon.pngというファイルを置いたとして説明します。

pubspeck.yamlでの記述

pubspec.yaml
flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon/icon.png"

pubspeck.yamlの階層（タブ、スペースで右にずらすやつ）的には一番左で合ってます。
こちらに配置した画像のパスや各種設定を設定しておきましょう。

設定の解説

1.androidとios
trueかfalseか画像のパスを設定します。画像のパスを設定すると、過去の画像は残してくれるようです。
2.image_pathまたはimage_path_androidとimage_path_ios
共通の画像を使う場合はimage_pathを。iOSとAndroidで分ける場合は、image_path_androidとimage_path_iosを両方使いましょう。
3.adaptive_icon_backgroundとadaptive_icon_foreground
AndroidのAdaptive Iconを使う場合に設定します。バックグラウンドにはカラーコードか背景画像のパスを指定します。adaptive_icon_foregroundにはその名のように、前面に表示するアイコンのパスを設定します。

App Iconのビルド

flutter pub run flutter_launcher_icons:main

これで指定したパスのApp Iconの画像をもとにiOS、Androidの画像など（設定のコードも含む）を生成して配置してくれます。便利ですねー。

注意事項

iOSのエミュレーターの場合、反映されないことがありました。エミュレーターを再起動したところ反映されましたのでご注意、お試しください。

2022/5/14更新
Android 11においてスプラッシュ画面のアイコンが更新されていないことがありました。 drawableのlauncher.pngとic_launcher_foreground.pngとmipmap-v26のic_launcher_foreground.pngが過去のままだったのでこちらを手で更新したら解決しました。正確にどこが原因かとかは一旦機会があればとさせていただきます。

参考

pub.dev
https://pub.dev/packages/flutter_launcher_icons

感想

flutter_launcher_iconsの使い方の記事はいくつか見つけましたが、アイコンの作り方にまで言及している記事だったら価値が出せるかなと思って書いてみました。

次回予告

最近使い始めたFlexColorSchemeか、SliverAppbarあたりを解説させていただこうかと。

Discussion