MENU
暮らしを少し便利にするアプリとサービスを作っています
  1. ホーム
  2. Flutter
  3. スプラッシュアイコンについて

スプラッシュアイコンについて

Flutter

スマホアプリの「スプラッシュスクリーン（スプラッシュアイコン/導入画面）」は、アプリをタップしてから起動するまでの間に表示される画面です。
ランチャーアイコンとは役割がかなり違うので、スプラッシュは「別物」として考えるのがポイントと思います。

  1. ユーザーへの心理的負荷を軽減する（待ち時間の解消）
  2. ブランディング（ブランドの印象付け）
  3. アプリの「つかみ」を作る

なので画像は変えた方がいいケースが多いです。
ただし「完全に別デザイン」ではなく、ブランドを保ったまま最適化するのが理想

目次

スプラッシュアイコンで気をつけること

① “一瞬で伝わる”ことが最優先

スプラッシュは数秒しか表示されません。
なので：
• 細かいイラスト → ❌ 見えない
• シンプルなシンボル → ✅ 最適

ランチャーよりもさらに情報量を削るのがコツです。

② 中央配置＋余白たっぷり

• 画面中央にドンと配置
• 周囲にしっかり余白

③ 背景色が超重要

スプラッシュは「背景の印象」が強いです

おすすめ：
• アプリのテーマカラー1色
• もしくは白 or 黒ベース

④ OS仕様に合わせる（特にAndroid）

Android 12以降は
システム側でスプラッシュが制御されるので注意
• アイコンが自動で丸く切り抜かれる
• 背景色も指定が必要

ランチャーアイコンをそのまま使うのはアリ？

OKなケース
• かなりシンプル（例：記号・ロゴ系）
• 余白をつけて中央配置すれば成立する

NGなケース
• イラスト系（細かい）
• 文字入り
• 複雑な構図

この場合は簡略版を作るべきです

アイコンの大きさは

結論：直接サイズ指定はできないが調整可能

画像の余白でサイズをコントロールする

作成方法

2つの選択肢があります

  • ① 背景込みの画像（今の状態）そのままでOK、背景色が若干ズレる可能性あり
  • ② 背景なし透過PNGアイコン部分だけ切り抜き、背景色はコードで指定

②の方がきれいに仕上がりますが、①でも十分実用的です

透過PNGの場合はサイズを小さくした方がいいです！推奨サイズ：300×300px
過PNGはアイコン部分だけなので、大きすぎると画面いっぱいに引き伸ばされてしまいます。
300×300px のアイコンだけの透過PNGにして、背景は 例えばcolor: “#AAAAAA” で塗りつぶす形が一番きれいです。
作れたら assets/images/splash.png として保存してください

pubspec.yamlの一番下に追加

flutter_native_splash:
  color: "#AAAAAA"　//ちゃんとした背景色入れてね
  image: assets/images/splash.png
  android: true
  ios: true

pubspec.yaml の dev_dependencies セクション

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.14.3
  flutter_native_splash: ^2.4.3  # 追加する

ターミナルで実行

flutter pub get
dart run flutter_native_splash:create

Flutter
目次