store-screenshots-panorama

スクリーンショットを保存 — パノラマ

アプリの生のスクリーンショットから、ひと続きの画面として見える App Store 用セットを作成します。レイアウトは大規模なマーケットプレイスアプリのセットをもとに計測し、3D オブジェクトとヒーローはアプリ独自のコンテンツから作成します。詳細は references/style.md を参照してください。最初のセットを作る前に、ファイルを最初から最後まで読んでください。テンプレートで決められていない事項（色、曲線、手前に出す部分、3D にするシンボル、Duo のレイアウト）は、そこに記載されています。

ユーザーが求めているのは成果物であり、作業プロセスではありません。計画書、仕様書、計測ファイルは作成せず、承認を待って作業を止めないでください。自分で判断し、セットを作成して確認したうえで納品してください。本当に必要な入力が不足していて、妥当なデフォルトがない場合に限り、質問してください。たとえば、生のスクリーンショットの幅が1206px未満の場合は、より大きな元画像を依頼してください。

基本ルール

• UI はピクセル単位で正確に保ちます。 生のスクリーンショットとその切り抜きは、通常の画像レイヤーとして扱います。画面を描き直したり、AI で再生成したり、翻訳したり、画面上のテキストを変更したりしないでください。カードは data-crop を使って生のファイルからのみ切り抜きます。App Store のスクリーンショットには実際のアプリを表示する必要があります。UI を作り上げると、信頼と App Review の両方を損ないます。
• 各デバイスには、そのデバイス固有の生のスクリーンショットを使用します。 iPhone Duo では、タブバーとステータスバーは横に配置され、分割ビューは内側のディスプレイに表示されます。iPhone のスクリーンショットを Duo のフレームに入れると、実際とは異なるアプリの表示になってしまうため、避けてください。Duo のスクリーンショットがない場合は、iPhone のセットを作成し、Duo 用に撮影すべき内容をユーザーに伝えてください（style.md §10）。
• 暗くする処理は独立したレイヤーとして扱います。 画面に適用するのは .phone.dim レイヤーだけです。ピクセル自体は変更しません。
• 装飾はアプリのコンテキストに合わせます。 3D オブジェクトはアプリのテーマを繰り返し表現します。ショッピング用のセットにあるキャンペーンバッジ、リボン、割引を示す表現、無関係なプラス記号やハートを借用しないでください。どのアプリもストア広告のように見えてしまいます。
• AI または 3D による生成は、オブジェクトとヒーローシンボルにのみ使用し、スマートフォンや UI を含めないでください。
• 未確認のハードウェアは描画しません。 Duo のフレームには、位置が確認されていないカメラ、ヒンジ、ボタンを含めません。
• 他社ブランドのロゴや名前は使用しません。
• 優位性を主張する表現（「最高」「ナンバーワン」など）は、出典がある場合にのみ使用します。出典がない場合は、主張ではなく利点を記載してください。
• ステータスバーは生のスクリーンショットの状態を保ちます。

入力とデフォルト

入力	デフォルト
iPhone の生のスクリーンショット	raw/（1206×2622 以上）。両方のテーマで表示します。または raw-light/ と raw-dark/：ライトモードとダークモードのアプリを、それぞれ同じファイル名とサイズで用意します。この場合、各テーマには対応するスクリーンショットを表示します（style.md §9）。
Duo の生のスクリーンショット	raw-duo-outer/（外側ディスプレイ）と raw-duo-inner/（内側ディスプレイ）。順序とファイル名は同じにします。外観ごとに raw-duo-outer-light/、raw-duo-outer-dark/ などを用意します。これらがない場合、Duo のセットは作成しません。
出力フォルダー	out/
デバイスセット	iPhone 6.9"（1320×2868）と 6.3"（1206×2622）：両方必要です（style.md §4）。Duo のスクリーンショットがある場合は、Duo の外側（1398×2034）と内側（2007×2853）も作成します。
言語	生のスクリーンショットの言語を使用します。見出しは言語ごとに作成し、切り抜き位置はその言語のスクリーンショットをもとに計測します。
テーマ	both：ライトとダークの両方。ユーザーが一方を指定した場合は、そのテーマのみ作成します。
色	生のスクリーンショットから導き出します（style.md §1、§9）。
メッセージと3D シンボル	生のスクリーンショットから導き出します（style.md §6、§8）。

出力先は <out>/<lang>/<theme>/<device>/01.png … NN.png です。テーマは light または dark、デバイスは iphone-6.9、iphone-6.3、duo-outer、duo-inner です。ソース HTML ファイルとプレビューは <out>/.src/ に保持してください。ユーザーが文言を変更して再レンダリングできるように、削除しないでください。出力フォルダーに別のセットのファイルがすでにある場合は、それらに触れないでください。ファイルが競合する場合は、新しいサブフォルダーを選び、その旨を伝えてください。

ファイル

• references/style.md：色の役割、背景、見出し、デバイス、ハイライト手法、コンテキストに合わせた3Dオブジェクト、 ヒーロー、コピーのトーン、ダークテーマ、iPhone Duo。
• assets/panorama.html：テンプレートです。デバイスフレーム（iPhone、Duoの外側、Duoの内側）、見出し、切り抜き（ポップアウトカード、 スポットライト、フレーム、チップ）、暗転、ふっくらした3Dオブジェクト（.obj：三日月、星、きらめき、泡、再生、音符、ハート、オーブ、または 独自のパス）、ヒーローオブジェクト、テーマ別のRAWフォルダー（RAW）が用意されています。レイアウトの寸法は固定です。これを コピーし、パレット、背景の図形、画像、RAWだけを編集してください。
• scripts/render.mjs：パノラマをPNGに分割します。 node <skill>/scripts/render.mjs <panorama.html> --out <dir> --theme light|dark --device iphone|duo-outer|duo-inner [--size WxH] [--preview <png>] [--only 2,5] [--no-slices]。 各デバイスのデフォルトサイズはApp Store Connectで受け付けられるサイズです。iPhoneのデフォルトは6.9インチです。6.3インチの場合は --size 1206x2622を指定してください。JSON出力のwarningsフィールドには、サイズ、比率、アルファの問題、ページの エラー、コントラストや切り抜きに関する警告（WARN:）が表示されます。
• scripts/grid.mjs：未加工のスクリーンショット上に、ラベル付きのピクセルグリッドと試し枠を描画し、切り抜きを測定します。 node <skill>/scripts/grid.mjs raw/02.png --out <png> [--box x,y,w,h]。 目視で推測した切り抜きは拡大するとずれてしまうため、グリッド上ですべての切り抜きを測定してください。

Node 18以降とChrome（またはChromium、Edge、Brave）が必要です。見つからない場合はCHROME_PATHを設定してください。見出しフォントは macOSではSF Pro Display、それ以外ではInter（Google Fonts）です。

ワークフロー

1. 元のスクリーンショットを確認します。 各ファイルのピクセルサイズ、各画面の用途、画面内のテキストを確認します。アプリのテーマやシンボル（アイコン、タブアイコン、画面上のイラスト）にも注目します。3D オブジェクトとヒーローシンボルは、これらをもとに選びます。 アクセントカラー（A）を選びます。ボタン、選択中のタブ、またはロゴの色です。style.md §1 に従って、A をもとにカラーパレットを決めます。色をサンプリングするには、magick <png> -format "%[hex:p{x,y}]" info: またはグリッド画像を使用します。 Duo フォルダーが存在し、適切なサイズであることを確認します（style.md §10）。 存在する元画像フォルダーを確認し、各テーマで使うフォルダーを選びます（style.md §9）。ライトとダークのフォルダーがある場合、ファイル名とピクセルサイズが一致し、同じ状態（コンテンツ、スクロール位置、時刻）を示していることを確認します。
2. 構成を頭の中で計画します。書き留めないでください。 順番は、ヒーロー、その後に価値の高い順で画面を並べます。各画像について、見出し、見出し領域の色（A、または2～3枚ごとの2番目の背景色）、主なハイライト手法、切り抜く箇所を決めます。画面の要点を示す箇所が主なハイライトです。次に、継ぎ目に3D オブジェクトを配置します。Duo セットでは同じストーリーを伝えます。順番、見出し、パレット、シンボルを揃えます。
3. 切り抜き範囲を測ります。 各箇所で grid.mjs を実行し、画像を確認して、--box で範囲を試してから、もう一度確認します。範囲は要素に少し余白を持たせて沿わせ、テキストを切らず、隣接する UI を含めないようにします。カードの角丸の半径も測ります（data-r）。Duo の切り抜き範囲は、それぞれの元画像から個別に測ります。 ライトのスクリーンショットで測定します。ダークのフォルダーがある場合は、ダーク画像でも同じ範囲を試します（grid.mjs raw-dark/02.png --box …）。切り抜き範囲は共通なので、両方で同じ要素に沿わせる必要があります。
4. iPhone のパノラマを作成します。 assets/panorama.html を <out>/.src/panorama.html にコピーします。
   • :root のパレットを変更します。
   • スクリプトの RAW を設定します。フォルダーが2つなら { light: 'raw-light', dark: 'raw-dark' }、1つなら { light: 'raw', dark: 'raw' } とします。すべてのパスはライトのフォルダーを指定して記述します。ダークのレンダリング時に自動で切り替わります。
   • 各画像に対して <section class="shot"> を記述します。切り抜き範囲には data-raw を指定します。パスは HTML が置かれた .src フォルダーからの相対パスです（出力先が out/ なら ../../raw/…、out/x/ なら ../../../raw/…）。 テンプレートの切り抜き範囲と色はあくまで例です。このアプリ用にすべて測定してください。
   • svg.bg に背景の図形をパノラマ座標で描きます。まず見出し領域の色の順序を決め、それに合うように図形を配置します。
   • 3D オブジェクトは .pano の直下要素として継ぎ目に配置します。ヒーローオブジェクトは最初のセクションに配置します。
   • 例のセクションとオブジェクトを削除します。
5. Duo パノラマを作成します（Duo のスクリーンショットがある場合）。iPhone のパノラマを .src/panorama-duo-outer.html と .src/panorama-duo-inner.html にコピーし、style.md §10 に従って調整します。見出し、パレット、シンボルは同じものを使い、切り抜き範囲は新たに設定します。デザインの高さに合わせて、カード、オブジェクト、背景図形を再配置します。RAW には Duo のフォルダーを設定します（例：{ light: 'raw-duo-outer-light', dark: 'raw-duo-outer-dark' }）。
6. レンダリングします。 テーマとデバイスごとに1回実行します（ダークの場合は --theme dark と dark を指定します）。

   R=<skill>/scripts/render.mjs; S=<out>/.src; O=<out>/<lang>/light
   node $R $S/panorama.html          --theme light --device iphone    --out $O/iphone-6.9 --preview $S/preview-light.png
   node $R $S/panorama.html          --theme light --device iphone    --out $O/iphone-6.3 --size 1206x2622
   node $R $S/panorama-duo-outer.html --theme light --device duo-outer --out $O/duo-outer --preview $S/preview-light-duo-outer.png
   node $R $S/panorama-duo-inner.html --theme light --device duo-inner --out $O/duo-inner --preview $S/preview-light-duo-inner.png
   

   警告はすべて解消します。コントラストに関する警告が出た場合は、パレットを調整します。各画像のレンダリングには、個別の Chrome 実行が必要です（約10秒）。修正中は、--only 2,5 で変更した画像のみ、または --no-slices --preview … でプレビューのみをレンダリングします。納品前には、すべてを最初からレンダリングします。
7. 確認して修正します。 まずプレビューを見てから各画像を確認し、チェックリストに沿って点検します。修正後、再度レンダリングします。確認していない画像は納品しないでください。切り抜きのずれ、見出しの背後にある曲線、カードを覆うオブジェクトは、画像でしか確認できません。6.3" セットは6.9" セットを縮小したものです。片方を確認すれば十分ですが、両方のファイル数とサイズは確認してください。
8. 納品します。 フォルダー、デバイスセット、画像の枚数、各画像の見出し、各テーマで使用した元画像フォルダーを簡潔に伝えます。ダークのスクリーンショットで状態が異なっていた場合は、撮り直す画面を挙げます。Duo セットを作成しなかった場合は、その理由と撮影が必要なものを説明します。コピーの変更は .src/ 内の HTML を編集し、手順6のコマンドを実行するだけでできることも伝えます。

参照セットが指定されている場合

ユーザーが別のアプリのストアスクリーンショットを参考として指定した場合は、そのセットの測定値に合わせて style.md のレイアウト値を置き換えます。

• 画像を1枚ずつ確認した後、横に並べてフル解像度で測定します。背景と連続性、見出し、デバイス、強調手法、装飾、特殊な画像、リズム、トーンを確認します。
• 参照にないものは追加しないでください。
• 参照画像と出力画像のアスペクト比が異なる場合は、幅に対する比率で測定値を引き継ぎます。上部にある要素は上端に固定し、下部で切れている要素は下端に固定します。
• 参照から取り入れるのはスタイルとレイアウトだけです。ロゴ、ブランド名、マスコット、写真、テキストは決してコピーしないでください。装飾もアプリ独自のコンテキストに合わせて置き換えます。
• 測定値を記録するファイルも作成しないでください。

チェックリスト

• すべてのテーマとデバイスで warnings が空ですか？すべてのファイルは適切なサイズで、アルファチャンネルはありませんか？各デバイスセットの画像数は同じですか？
• プレビューで、背景の図形や継ぎ目にまたがるオブジェクトは、すべての継ぎ目で連続していますか？
• 見出し領域（y 0–650）に曲線はありますか？見出しの色は背景に合い、2～3個ずつのグループで変化していますか？
• すべての画像で見出しのサイズは同じですか？ヒーロー以外の見出しが2行を超えていませんか？
• すべての画像でデバイスの位置は同じですか？UI の重要な部分が角丸や Dynamic Island の下に隠れていませんか？
• 各クロップには表示すべきものだけが正確に写っていますか？テキストが切れていたり、端に隣接する UI が細く写り込んだりしていませんか？カードは鮮明ですか？
• ポップアウトカードの端が、その下に暗く表示された画面のテキストを途中で切っていませんか？カードグリッドの隙間からテキストが見えていませんか？
• ヒーローオブジェクトが画像2にはみ出す場合、そこにあるカードやテキストに触れていませんか？ヒーローのカードは縁の後ろに収まっていますか？それとも溶けて消えるように見えますか？
• 3D オブジェクトはアプリのテーマに沿っていますか？見出し、カード、重要な UI テキストを覆っていませんか？1画像あたり最大2個ですか？
• ヒーローのシンボルは認識できますか？カードはシンボルの内側に収まっていますか？それとも手前にありますか？
• ダークテーマは暗い色が主体ですか（広い範囲を占める単色の A はなく、A は見出し、オブジェクト、フレームだけに使われていますか）？デバイスの縁、カード、オブジェクトは背景から際立っていますか？両方のテーマでレイアウトは同じですか？
• ダークモードのスクリーンショットでは、ダークセットのデバイス内とすべてのクロップにダーク UI が表示され、ライトセットにはライト UI が表示されていますか？共通の各クロップでは、両方に同じ要素が表示されていますか？
• Duo セットでは、すべての画面が Duo の元スクリーンショットから作成されていますか？カード、オブジェクト、背景の図形は短い Duo キャンバスに収まっていますか？デバイスの下部やカードが切れていませんか？サイドタブとステータスバーはクロップ後も正しく残っていますか？
• 言語固有の文字は正しいですか（例：トルコ語の İ、ı、ş、ğ）？（<html lang> は言語と一致している必要があります。）