app-store-screenshot

app-store-screenshot

基本ルール

元のアプリの UI をそのまま維持してください。スクリーンショット内のコンテンツを描き直したり、スタイルを変更したり、翻訳したり、書き換えたり、捏造したり、「改善」したりしないでください。スクリーンショットは元の画像として扱い、その周囲をデザインしてください。

スクリーンショットを画像生成モデルに渡し、アプリの UI として結果を提示することは絶対に避けてください。モデルはテキスト、数値、アイコンを見落としやすい形で変更します。代わりに合成してください。ここでの処理はすべて、スクリーンショットを単なる画像レイヤーとして配置し、拡大縮小以外の加工はしません。

ワークフロー

1. スクリーンショットを確認します。 プラットフォーム、ブランドカラー、UI がライトかダークか、各画面で示されている機能を確認します。ピクセルサイズも確認してください。幅がおよそ 1000 px 未満（メッセージアプリで送信されたファイルに多いサイズ）の場合、拡大が必要になり、ぼやけて見えます。その旨を伝え、オリジナル画像を依頼してください。その間は、拡大を避けられるよう、十分に小さいデバイスを使って作業を進めます。device_max_w は、キャンバス幅に対する元画像の幅の比率以下にします（1290 px のキャンバスに 738 px の画像を使う場合は 0.57）。
2. 色を選ぶ前にコンセプトを決めます。 スクリーンショットごとに 1 つずつ考えます。アプリのテーマがどのようなものかを確認し、そのシーンにデバイスを配置します。アートアプリなら絵画、字幕アプリなら多言語の字幕吹き出し、ハイキングアプリならトレイルです。さらに、各画像に、その画面に表示されている要素をもとにした独自の背景を用意し、ベゼルの外までスクリーンショットの世界が続くようにします。「背景」を参照してください。パターンを組み合わせた単色グラデーションは、あくまで代替案であり、目指すものではありません。
3. アプリ自体をもとにテーマを作ります。 スクリーンショットのボタン、ハイライト、アイコンから bg、accent、accent2 を選びます。フレームはプラットフォームに合わせ、画面と背景が区別しやすい仕上げを選んでください。鮮やかな背景にライト UI を合わせる場合はダークフレーム、暗いシーンにはチタンまたはシルバーが適しています。
4. コピーを書きます。 画像ごとに見出しを 1 つ付けます。2～6 語で、メリットを先に伝え、重要な語句を強調します。任意で 1 文のサブ見出しを付けてもかまいません。スクリーンショットにすでに表示されているテキストを繰り返さず、健康や金融に関する主張は控えめにしてください。検索結果では最初の画像だけが表示されることも多いため、最初の画像に主な価値提案を載せます。ストアの掲載情報と同じ言語で書いてください。不明な場合は確認してください。
5. scripts/render.mjs（以下を参照）でレンダリングします。設定ファイル、背景、出力ファイルは、スキルのフォルダーではなく、ユーザーの作業ディレクトリに保存してください。
6. 出力画像をすべて確認し、最後のチェックリストに沿って確認します。問題があれば修正して再レンダリングし、合格するまで繰り返してください。

レンダリング

各画像は、ヘッドレス Chrome でスクリーンショットを撮る HTML ページです。CSS で背景、金属製のデバイスフレーム、実際の書体を指定します。

スクリプトのパスは、このスキルのディレクトリからの相対パスです。

cp <skill-dir>/assets/set.example.json ./set.json    # then edit it
node <skill-dir>/scripts/render.mjs ./set.json

スクリプトは、画像ごとに screen_box（キャンバス上でスクリーンショットが配置される位置）、screenshot_scale、headline_px、warnings を含む JSON を出力します。設定ファイル内のパスは、絶対パス、~ で始まるパス、または設定ファイルからの相対パスを指定できます。

見出しが指定行数に収まらない場合、自動的に文字サイズが小さくなります。そのため、見出しが長すぎると、画像ごとに headline_px が異なります。各行をおよそ 20 文字以内に収め、セット内で headline_px がすべて同じになるまでコピーを短くしてください。

必要なもの：Node 18 以降と Chromium ベースのブラウザー（Chrome、Chromium、Edge、Brave。見つからない場合は CHROME_PATH を設定してください）。インストールが必要なパッケージはありません。該当するブラウザーが利用できない場合は、その旨を伝えてインストールを依頼してください。画像生成モデルで代用しないでください。

出力は不透明な RGB PNG です。どちらのストアもこの形式を必須としており、透明画像は受け付けません。スクリプトはこの形式とピクセルサイズを確認し、問題があれば警告を報告します。

設定リファレンス

トップレベルの設定：size（デフォルトは"1290x2796"。Google Play では長辺が短辺の2倍を超える画像が拒否されるため、"1080x1920"を使用します）、out_dir、省略可能なtemplate、theme、images。

テーマキー（それぞれ、単一の画像エントリー内で上書きできます）：

• bg、bg2：上から下へのベースグラデーションです。accent：グローです。accent2：強調する単語とハイライトラインです。text、line：省略した場合はbgから導出されます。
• headline_font（CSSフォントスタック）、headline_weight、em_style（normalまたはitalic）、font_links（Google Fonts の URL。オンライン時のみ）。情報量の多い背景には太字のサンセリフ体が最適です。落ち着いた背景の編集系または文化系アプリにはセリフ体が適しています。
• headline_lines、sub_lines：ヘッドラインとサブヘッドライン用に確保するスペースです。画像ごとにデバイスのサイズと位置を統一するため、テーマで一度設定します。同じ理由から、各画像にeyebrow（ヘッドラインの上に置く小さな大文字のピル型ラベル）を設定するか、すべてに設定しないようにします。
• device_max_w：キャンバスに対する画面幅の割合です（デフォルトは0.73。0.62～0.68にすると、シーンにゆとりが生まれます）。
• platform（iosまたはandroid）、frame（black、titanium、silver）、cutout（falseにするとDynamic Islandまたはカメラホールを非表示にします）。
• scene、scene_vars：HTMLシーンフラグメントと画像ごとの変数です。「Backgrounds」を参照してください。
• background_image、background_position（"94% center"などのCSS位置指定）、scrim（0～1の値。画像をbgにどれだけ近づけて色付けするか）。背景画像を使うとグロー、グレイン、パターンは無効になりますが、色は引き続き重要です。bg2はヘッドラインの背後の領域を暗くし、テキストシャドウの色にも使われます。また、bgによってデフォルトのテキスト色が白か、ほぼ黒か決まります。

画像キー：screenshot、out、headline（\nで改行、*text*で強調する単語を指定）、sub、eyebrow、patternに加え、任意のテーマキーを指定できます。特にsceneとscene_varsを使うと、画像ごとに背景を設定できます。

背景

背景を作る方法は3つあります。おすすめ順に紹介します。

各画像に、スクリーンショットをもとにした個別の背景を設定する。 スクリーンショットを開き、実際に何が写っているかを列挙します。画像の要素、モチーフ、描かれている計器やチャート、色などです。次に、これらの要素がデバイスの外側にも続くように背景を作り、スマートフォンがグラデーション上のステッカーではなく、シーンを切り取った窓のように見えるようにします。夕暮れの写真を背景にしたカウントダウン画面なら、アプリ独自の装飾が入った夕焼け空にします。コンパス画面なら、スマートフォンが収まる大きな文字盤を作り、方位を目的地の方向へ伸ばします。ライトテーマとダークテーマのある設定画面なら、両者でキャンバスを分けます。セット全体で同じ背景を再利用すると、どれほど美しくてもテンプレートのように見え、レビュー担当者には同じことを伝える画像が5枚並んでいるように映ります。

セットとして統一感を保つ要素は、共通のテーマにまとめます。キャンバスサイズ、タイポグラフィ、device_max_w、フレーム、ヘッドラインのスタイルです。違いはシーンで表現します。device_max_wを約0.66にすると、シーンを配置するのに十分な幅の余白ができます。

1. シーン画像。 写真、アート作品、イラストをbackground_imageとして渡します。推奨するソースは、ユーザー自身のブランド画像、アプリのコンテンツに合ったパブリックドメインまたは自由にライセンスされた画像（Wikimedia Commons、博物館のオープンアクセスコレクション、Unsplashなど。ライセンスを確認し、ソースをユーザーに伝えてください）、背景専用の画像生成ツールの順です。画像を生成する場合は、スマートフォンもUIも含まないシーンを指定してください。ヘッドラインの背後に落ち着いた領域がある画像を選び、暗い画像ではscrimを0.05～0.15に設定します。ヘッドラインのコントラストが不足する場合は、さらに高くします。 2. HTML シーン。 適切な画像がない場合は、HTML でシーンを作成します。画像ごとにフラグメントファイルを作成し（<style> ブロック、マークアップ、必要に応じてインラインの <svg> と <script> を含めます）、設定ファイルと同じ場所にある scenes/ フォルダーに保存して、各画像エントリにそれぞれのファイルを指定します："scene": "scenes/02-compass.html"。scene はテーマキーなので、テーマに設定するとすべての画像が同じ背景になり、画像ごとに設定するとその値が上書きされます。画像ごとに設定することをおすすめします。レンダラーはこれを背景レイヤーに挿入します。bgからbg2 へのグラデーションの上、見出しとデバイスの下に配置されます。アプリのテーマに沿って作成してください。たとえば、ブランドグラデーション、柔らかなラジアルグラデーションの光、キャプションのピル、コマンドチップのパイプライン、波形、地図の等高線、五線譜、チャートの線などの装飾を使います。参考として、同じレシピアプリのセットから、異なる画面をもとに作成した動作する例が 3 つあります。examples/scenes/berries.html（ベリーが上にのったレシピ写真：果物がベゼルからはみ出し、ラズベリーレッドの光に広がります）、examples/scenes/plate.html（縞模様の皿が写真に写った食事プラン：スマートフォンを皿の上に置き、皿の縞模様がデバイスを囲みます）、examples/scenes/tracker.html（日次トラッカー：画面の週表示とマクロ栄養素バーを両脇に配置し、scene_vars の値で埋めます）。assets/set.example.json` では、これら 3 つを 1 つのセットにまとめています。

• 画像エントリに "scene_vars": {"seed": 4, ...} を指定してフラグメントをパラメーター化できます（テーマ内の scene_vars があれば、その値にマージされます）。フラグメントは window.SCENE から値を読み込みます。画面に表示されている方位など、スクリーンショットの実際の値をシーンに渡したり、散らした装飾のシード値にしたりできます。例と同じようにシード付き乱数生成器を使うと、再レンダリングしても同じ画像になります。
• 推測ではなく、測定値を使って装飾を配置します。レイアウト後、ページは window.LAYOUT を設定し、document 上で store:layout イベントを発火します。このイベントには、ピクセル単位の canvas {w, h}、device と screen の各ボックス {left, top, right, bottom}、および headerBottom が含まれます。空いている側面の余白の幅は LAYOUT.device.left です。このイベントハンドラー内で描画してください。
• 装飾は側面の余白と下端に収め、全体が表示される大きさにします。単語が半分だけ切れていると、間違いのように見えます。見出しの領域（headerBottom より上）は落ち着いた印象にしてください。
• 装飾はテーマに沿った抽象的なものにしてください。スマートフォンの周囲に、アプリ画面や通知、レビューを偽装したものを描かないでください。
• 装飾はスクリーンショットより控えめにします。鮮やかな背景ではコントラストを抑えた塗りを、暗い背景ではアクセントカラーの細い線を使います。
• フラグメントでは、テンプレートのプレースホルダーと CSS 変数を使用できます：{{ACCENT}}、{{ACCENT2}}、{{BG}}、{{BG2}}、{{WIDTH}}、{{HEIGHT}}、{{SCREENSHOT}}（現在のスクリーンショットの URL）、var(--vh)、および vw 単位です。vh 単位は使用しないでください。
• シーンの背景光として、ぼかしたスクリーンショットや色を付けたスクリーンショットの複製を表示してもかまいません。フィルターを使わないというルールが適用されるのはデバイス内のスクリーンショットであり、こちらには手を加えないでください。
• インストール済みのフォントファミリーを使うか、font_links を使ってウェブフォントを読み込みます。
• 出力に装飾が反映されない場合は、warnings を確認してください。ページで発生した JavaScript エラーがここに報告されます。

3. 組み込みパターン。 pattern には rings、dots、grid、rays、arcs、diagonal、frames、none のいずれかを指定します。これらは bg グラデーションの上に、accent の光彩と粒子を重ねて描画されます。手早く安全に仕上げるのに適しています。

カスタムテンプレート。 設定で表現できない見た目にするには、assets/template.html をコピーして CSS を変更し、コピーしたファイルを "template" に指定します。ルールは 2 つです。スクリーンショットの <img> にフィルター、オーバーレイ、色味を加えないこと、そして vh 単位や innerHeight を使わないことです。ヘッドレス Chrome では、キャプチャ時よりも短いビューポートでページが読み込まれるため、var(--vh) と var(--canvas-h) を使用してください。

納品前のチェックリスト

レンダリングしたファイルを開き、各項目を確認してください。合格しない項目があれば、隠さずに報告してください。

• すべての画像で warnings が空であること。「upscaled」という警告は、元の画像が小さすぎることを意味します。ユーザーに伝え、元のファイルを依頼してください。
• screen_box がセット内のすべての画像で同一であること。
• フレーム内のテキスト、数字、アイコンが元のスクリーンショットと一致し、角の丸みやカメラの切り欠きによって重要な部分が隠れていないこと。
• 画像を約300 px幅で表示しても、見出しとサブ見出しが読めること。ストアのギャラリーでは、この幅で表示されます。
• 背景の装飾が単語の途中で切れておらず、スクリーンショットと競合していないこと。
• それぞれの画像に固有の背景があり、その画像がフレームに収めている画面の内容を認識できること。誰にも気づかれずに2枚の画像の背景を入れ替えられるなら、コンセプトがありきたりです。手順2に戻ってください。
• シーンの要素が見出しに重なっていないこと。見出しの枠内に格子線、星、装飾を入れないでください。
• 出力サイズが対象ストアに合っていること（スクリプトはサイズまたはアルファチャンネルの不一致について警告します）。
• ファイルにギャラリーの順番どおりに番号が付いており、コピーを編集して再レンダリングできるよう、ユーザーに設定ファイルの場所を伝えていること。

参考情報

• references/visual-directions.md：方向性、見出しのトーン、構成、カテゴリー別の注意点（ウェルネス、金融、ダークモード、生産性、教育、クリエイターツール）。
• references/store-sizes.md：App Store と Google Play の正確なサイズ、枚数、フォーマット規則。
• examples/：ウェルネス、金融、ダークモードアプリ向けの見出し案とセットの並べ方、および assets/set.example.json でセットとしてレンダリングする examples/scenes/ 内の3つの HTML シーン。