kokh log

yumikokhの開発日記

flutter: SimulatorでAppleStore申請用のスクリーンショットを作成する

AppleStoreの申請でスクショを用意するときに最初から知ってけばスムーズだったなということをメモしておきます。

スクショの要件

ストアの申請画面

サイズは、6.9インチか6.5インチのどちらかでアップロードすれば、自動的に片方の大きさ分作成されます。 私は6.9インチのiPhone 16 Pro MaxのSimulatorを使いました。
このタイトルに「プレビューとスクリーンショット」とあるのは、プレビューは動画、スクリーンショットは画像のことを指します。ここにアップするアセットは審査だけでなくストアでも一般公開されるもので、プレビューは3つ、スクリーンショットは最大10枚まで掲載できます。 また、「インストールシート」というのが分からなかったのですが、ストアで検索時一覧表示されるときにでてくる画面のことだと思います。 1~3枚目に特に重要なポイントを含めるべきです。(メルカリと一緒ですね)

developer.apple.com

developer.apple.com

debugバナーを非表示にする

iOS Simulatorでスクショをとろうとしたところ、Simulatorはdebugモードでしかビルドターゲットに指定できず、そのままだとdebugバナーが表示されてしまいます。(ちなみに間違えてこのまま審査に出して見事にリジェクトされましたw)

実機をつなげばprofileモードやreleaseモードでビルドしてバナーを非表示にできますが、便宜上Simulatorでスクショをとれるようにしたかったので、下記のようにコード上で一時的に非表示にする方法をとりました。

MaterialApp(
  debugShowCheckedModeBanner: false, // demo用
  ...

これでdebugバナーは非表示になります。スクショを撮り終わったら念の為戻しておきましょう。

Simulatorでスクショをとる

Simulatorでは右上のカメラボタンを押下、もしくは⌘Sでスクショが撮られ、Desktopに保存されます。操作中の動作も撮れる⌘Sのほうが気軽に使えそうです。
また、Altキーで、カメラボタンから画面録画を行うこともできて便利です。

おまけ

ちょっと凝った画像を作ろうとしたとき、iPhoneのベゼルを合成するとちょっとそれっぽくなります。
下記のfigmaアセットをありがたく使わせていただきました。

https://www.figma.com/community/file/1240555966950810381www.figma.com

おわり