App Store画像メーカー は、App Store申請に必要なスクリーンショット画像をブラウザ上で作成できるWebツールです。インストール不要で、画像をアップロードしてテキストを設定するだけで申請サイズのPNGをダウンロードできます。
目次
作った理由
App Storeにアプリを申請するとき、6.5インチと13インチの2サイズのスクリーンショット画像が必要です。
最初はペイントなどで手動で作っていましたが、アプリを複数本リリースするようになると毎回同じ作業を繰り返すことになり、面倒になってきました。専用の有料ツールもありますが、個人開発でそこまでコストをかけたくない。
「自分が使う用に作ればいい」と思い、ブラウザで完結するシンプルなツールとして開発しました。今では自分のアプリのスクリーンショットはすべてこのツールで作っています。
対応サイズと向き
App Storeの審査で必要な2サイズに対応しています。
| サイズ | 縦向き | 横向き |
|---|---|---|
| 6.5インチ ディスプレイ画像 | 1242 × 2688 px | 2688 × 1242 px |
| 13インチ ディスプレイ画像 | 2048 × 2732 px | 2732 × 2048 px |
縦向き・横向きはボタンで切り替えられます。向きを変えるとサイズ表示もリアルタイムで更新されます。
使い方の流れ
- 出力サイズ（6.5インチ／13インチ）と向きを選択
- スクリーンショット画像をアップロード（複数枚まとめて選択可）
- 上部に表示するテキストを入力
- フォント・文字色・背景色・フォントサイズを調整
- プレビューを確認してPNGでダウンロード
複数枚アップロードした場合はサムネイル一覧が表示され、画像ごとに個別のテキストを設定できます。「すべてダウンロード」ボタンを押すと全枚数を連続でダウンロードします。
実装のしくみ
HTML5のCanvas APIを使って画像を生成しています。サーバーへの通信は一切なく、すべてブラウザ内で処理が完結します。
描画の基本構造はシンプルです。
1. Canvasを出力サイズに設定（例：1242×2688）
2. 上部のテキスト帯（縦の約22%）を背景色で塗りつぶす
3. テキストを中央揃えで描画
4. 残りの領域にスクリーンショット画像を配置（アスペクト比を保持）
5. canvas.toDataURL("image/png") でダウンロード
テキスト帯の高さ比率は縦向きで22%、横向きで26%にしています。横向きは縦に使える領域が少ないため少し多めに確保しています。
フォントは日本語フォントを中心に9種類から選択できます。Canvas上でシステムフォントを指定しているため、フォントの読み込み待ちは不要で即座にプレビューに反映されます。
複数画像の一括処理
複数枚のスクリーンショットを一括でダウンロードする機能を実装するうえで、ブラウザのダウンロード制限に対処する必要がありました。
複数のダウンロードを連続で発火させると、ブラウザによってはブロックされることがあります。そこで各ダウンロードの間に350ミリ秒の待機を挟むことで、安定して全ファイルがダウンロードされるようにしています。
ダウンロードされるファイル名には画像ファイル名・サイズ・向き・解像度が自動で付くようにしました（例：screenshot_6_5inch_portrait_1242x2688.png）。申請ファイルの管理がしやすくなります。
日本語テキストの折り返し処理
Canvas APIには自動折り返し機能がないため、テキストの折り返しを自分で実装する必要があります。
英語テキストはスペースで単語を区切って折り返しますが、日本語にはスペースがありません。そのため、テキストに半角スペースが含まれるかどうかで処理を分岐しています。
- スペースあり（英語混じりなど） → 単語単位で折り返し
- スペースなし（日本語のみ） → 1文字ずつ計測して折り返し
どちらも ctx.measureText() で文字列の幅を測りながら、最大幅（Canvas幅の86%）を超えたタイミングで改行を入れています。
実際に使ってみて
自分のアプリを10本以上リリースしてきた中で、毎回このツールを使っています。作った当初は「縦向き6.5インチのみ」でしたが、使っていくうちに「横向きも欲しい」「13インチも対応したい」「フォントを選びたい」と機能が増えていきました。
個人的に一番便利だと感じているのは、複数のスクリーンショットを一括で処理できる点です。アプリ1本あたり5〜6枚のスクリーンショットを作ることが多く、これを2サイズ分用意するとなると10枚以上の作業になります。画像を一括でアップロードして、各画像にテキストを設定して、「すべてダウンロード」を押すだけで終わるのは、繰り返し作業のストレスが大幅に減ります。
個人開発でApp Storeに挑戦している方に参考になれば。