アプリスクリーンショットショーケースは何をしますか？

実際のスクリーンショットを真実の源として扱います。アプリUIの捏造、再描画、レタッチ、「改善」は決して行わないでください。スクリーンショット内のテキストを決して変更しないでください。

2種類のデバイスタイプ。 Report、Review、Resolveは市民向けモバイルアプリの画面です（device: "mobile"、PhoneFrameで縦向き表示）。AssignとRespondはオペレーションセンターのWebビュー（モバイルアプリではありません、device: "web"、BrowserFrameで横向き表示）で発生します。詳細は sos-content-accuracy の「Verified product facts」を参照してください。この違いを正しく理解してください：Webダッシュボードのスクリーンショットをスマートフォンフレームに無理に詰め込むと、製品を誤って表現することになります。

ファイルの保存場所

ファイルの種類	配置場所（ユーザー）	出力（生成）
アプリアイコン、ブランドマーク	`assets/brand-raw/`	`public/brand/`
Open Graph画像（1200×630）	`assets/brand-raw/og-image.png`	`public/brand/og-image.jpg`

assets/ はデプロイされません。public/ 内の最適化済みファイルのみが出荷されます。

命名規則

<順序>-<画面の目的>.png、小文字のkebab-case（例：01-home.png、02-category-select.png、03-report-form.png、04-report-submitted.png、06-welcome.png、07-register.png、08-verify.png、09-login.png）。ユーザーのファイル名が任意の場合は、各ファイルを検査し、目的に応じて名前を変更してください。

現在のマニフェストIDと各画面の内容：

id（ファイル名ベース）	デバイス	画面
`hero-primary`	mobile	ホーム画面
`hero-secondary`	mobile	カテゴリ選択画面
`how-report`	mobile	報告フォーム（インシデントのキャプチャ/送信）
`how-review`	mobile	送信後の確認画面
`how-assign`	web	オペレーションセンターWebビュー — レポート割り当て中
`how-respond`	web	オペレーションセンターWebビュー — 対応者ルート案内/場所
`how-resolve`	mobile	解決済みレポートを表示するステータス画面
`register-welcome`	mobile	ウェルカム / 初回起動画面
`register-form`	mobile	登録詳細画面
`register-verify`	mobile	確認画面（アプリにない場合は省略）
`register-home`	mobile	サインイン画面

モバイルスクリーンショット：ポートレート、端末からそのまま、トリミングなし。Webスクリーンショット（how-assign、how-respond）：オペレーションセンタービューのランドスケープブラウザキャプチャ、トリミングなし。

取り込みワークフロー（新しいバッチごと）

検査 — 各画像を開き、目的を特定（ウェルカム、登録、確認、ログイン、ホーム、カテゴリピッカー、報告フォーム、カメラ/キャプチャ、確認、ステータス/追跡、通知、対応者ビュー、マップ/ルート、その他）。
プライバシーレビュー — 実在の名前、電話番号、メール、住所、顔、ナンバープレート、正確な自宅位置、ID、トークンを確認。見つかった場合は、ユーザーにクリーンバージョンを依頼します。自分でぼかしたり編集したりしないでください（ユーザーから明示的に依頼された場合のみぼかしますが、UIは変更しないでください）。
寸法とアスペクト比を記録。UIを切り取ったり引き伸ばしたりしないでください。ステータスバーはそのままでも構いません。
最適化: npm run optimize:screenshots（sharpを使用）: WebP q≈82、AVIF q≈60、最大幅1080pxで出力。元のアスペクト比を維持し、メタデータ（EXIF/GPS）を削除。テキストの可読性を確認し、圧縮後に小さいUIテキストを拡大して確認。
マニフェストに登録（src/config/screenshots.ts、下記スキーマ参照）。
配置 — マッピングテーブルを使用し、曖昧な場合はユーザーに短いリストで配置を提案。
レイアウトを確認 — 320/768/1440で、CLSなし、altテキストあり、heroのみpriorityを使用。
docs/assets-guide.mdの取り込みログを更新。

マニフェストスキーマ

// src/config/screenshots.ts
export type ScreenPurpose =
  | "welcome" | "register" | "verify" | "login" | "home"
  | "category" | "report-form" | "capture" | "submitted"
  | "status" | "notifications" | "responder" | "map" | "other";

export type Slot =
  | "hero-primary" | "hero-secondary"
  | "how-report" | "how-review" | "how-assign" | "how-respond" | "how-resolve"
  | "showcase" | "register-welcome" | "register-form" | "register-verify" | "register-home"
  | "tracking";

export type Device = "mobile" | "web"; // mobile → PhoneFrame, web → BrowserFrame

export interface Screenshot {
  id: string;                 // "03-report-form"
  src: string | null;         // "/screenshots/03-report-form.webp"; null = プレースホルダー
  width: number; height: number; // 最適化ファイルの実際のピクセル数
  alt: string;                // 画面に表示されている内容を事実に基づいて説明
  purpose: ScreenPurpose;
  slots: Slot[];
  device: Device;
  caption?: string;
  privacyChecked: boolean;    // 本番環境でsrcがnull以外になる前にtrueである必要がある
}
export const screenshots: Screenshot[] = [ /* ... */ ];
export const bySlot = (slot: Slot) => screenshots.filter(s => s.slots.includes(slot));

デフォルトのプレースホルダー比率: device: "mobile" は 1179×2556（≈ 9:19.5）; device: "web" は 1600×1000（≈ 16:10）— 実際のサイズが判明するまで。
ビルド時に、src があるが privacyChecked: false のスクリーンショットがある場合、警告（開発環境ではコンソールに）を表示する必要があります。

配置マッピング

画面の目的	スロット	デバイス
home	hero-primary, register-home, showcase	mobile
category	hero-secondary, how-report, showcase	mobile
report-form / capture	how-report, showcase	mobile
submitted	how-review, showcase	mobile
status	tracking, how-resolve, showcase	mobile
notifications (assign)	how-assign	web
map/route (respond)	how-respond	web
welcome	register-welcome	mobile
register	register-form	mobile
verify	register-verify（該当画面がない場合は手順全体を省略）	mobile
login	register-home	mobile

showcase はモバイルアプリ画面（Report、Review、Resolve）のみを保持します。これは市民向けアプリのショーケースであり、オペレーションセンターのWebビューを配置する場所ではありません。

altテキストルール

表示内容を説明し、マーケティング的な主張は避けてください。良い例：「カテゴリ選択画面。Rescue、Police、Fire、およびその他の報告タイプをリスト表示。」悪い例：「高速で簡単な報告！」装飾的な重複（例：反射）には alt="" を使用します。

PhoneFrame / BrowserFrame / DeviceFrame コンポーネント

PhoneFrame: 純粋なCSSフレーム、角丸長方形（ink-raised）、1pxの内側ハイライト、細い画面のインセット、オプションのDynamic Islandピル。PNG端末モックアップは使用しません。
BrowserFrame: 純粋なCSSブラウザウィンドウフレーム（同じサーフェス言語）、3つのシンプルなクロームドット、偽のURLバーやブラウザUIの作り込みなし。device: "web" の画面（Assign、Respond）に使用します。
DeviceFrame: screenshot.device に基づいて PhoneFrame と BrowserFrame を自動選択します。段階/スロットを汎用的にレンダリングする呼び出し箇所（「動作の仕組み」など）では、フレームタイプをハードコードせずにこれを使用します。
子要素: next/image、マニフェストから明示的な width/height を設定、sizes を設定（例：(min-width:1024px) 320px, 70vw）、loading="lazy"（ただしhero-primaryは priority、fetchPriority="high"）。
プレースホルダーモード（src === null）: ニュートラルなグラデーション画面、小さなラベル「Screenshot slot: — awaiting real app screen」、正しいアスペクト比。偽のUI要素、偽のボタン、テキストは一切使用しません。
画面コンテンツは直立し、読みやすい状態を維持: max rotateY 18°、ミラーリング禁止。
モバイル（< 1024px）: 3D回転なし、フラットなスマートフォン、ネイティブの水平スクロールスナップギャラリー（snap-x snap-mandatory、scroll-padding）、可視のスクロールジェスチャー、キーボード操作可能な領域に aria-label を設定。

バッチごとのチェックリスト

すべての画像を検査し、目的を特定した
個人データが表示されていない（またはユーザーがダミーデータであることを確認した）
最適化ファイルはそれぞれ約180KB未満、テキストは読みやすい
マニフェストエントリが完全: 寸法、alt、目的、スロット、デバイス、privacyChecked
ページ上に priority 画像は1つだけ
レイアウトシフトなし、アスペクト比が維持されている
未使用のプレースホルダースロットも、正直にラベル付きでレンダリングされている
統合後にLighthouseモバイルで再テスト済み

アプリスクリーンショットショーケース