スプラッシュ画面ジェネレーター

iPhoneやiPadのホーム画面に保存したWebアプリを開くと、iOSはページの読み込み中に起動画像を表示できます。ただしそれは、その画面と向きのピクセルサイズにぴったり合う画像を1枚用意し、apple-touch-startup-imageタグでリンクしている場合に限られます。このジェネレーターは、現行のすべてのiPhoneとiPadのサイズについて、縦向きと横向きで、ブランドカラーの上にロゴを中央配置した画像を描き、対応するHTMLも書き出します。ブラウザ内で動作します。

使い方

1. ロゴを選びます。背景が透明なPNGかSVGが最もきれいに仕上がります。
2. 背景色（できればマニフェストのbackground_color）とロゴのサイズを設定します。
3. 対応するデバイスと向き、形式、サイト上のフォルダを選びます。
4. ZIPをダウンロードし、そのフォルダに画像をアップロードして、HTMLを各ページの<head>に貼り付けます。

計算式

画像サイズ = CSSの画面サイズ × デバイスピクセル比（例：440 × 956 × 3 = 1320 × 2868）；ロゴの倍率 = ロゴのサイズ % × 短辺 ÷ ロゴの長辺

各linkタグには、デバイスのCSSの幅と高さ（常に縦向きの値）、ピクセル比、向きを指定したメディアクエリが使われるため、iOSは画像をちょうど1つ選びます。画面サイズが同じデバイスは画像を共有します。一覧は、iPhone SE（第1世代）からiPhone 17シリーズ、iPhone Air、17 Proと同じサイズのiPhone 18 Pro / Pro Maxまでと、9.7インチモデルからM4以降のチップを搭載したiPad Proまでをカバーしています。

計算例

iPhone 17 Pro Max（440 × 956ポイント、3倍）の縦向きの画像は1320 × 2868 px、横向きは2868 × 1320 pxです。1000 × 400のロゴを30%にすると、0.3 × 1320 = 396 px幅、高さ158 pxに縮小され、画面の中央に置かれます。