ソーシャルモックアップスタジオ は何をしますか？
簡単な概要から、LINE、Facebook、TikTokの各画面をピクセル単位で忠実に再現したモックアップを作成します。あらゆるブランド、iOS、Android、デスクトップに対応します。このキットは、絶対に混ぜてはいけない2つの要素を明確に分離しています。
- プラットフォームUI（ステータスバー、LINEヘッダー、FBタブバー、TikTokレールなど）は
assets/kit.cssにあります。常に実際のアプリのように表示され、ブランドカラーになることはありません。 - ブランドコンテンツ（Flexメッセージ、リッチメニューアート、広告クリエイティブ、アバター、CTAスタイル）は、
<project>/brand.cssの変数だけで制御されます。
ブランドの切り替え = brand.css + 画像 + コピーの切り替え。これにより、ブランド間での比較が同一条件で行えます。
ワークフロー
- 事前チェック（最初の質問の前）。
python3 scripts/preflight.py --brand <ブランドサイト> --surfaces <line,fb,tiktok>を実行します。その出力にある TELL THE USER の行を最初の返信に含めてください。- ブラウザがない場合: ここではレンダリング、エクスポート、視覚的な確認が一切できないことを伝えます。
- ブランドサイトや画像ソースがブロックされている場合: その旨を伝え、アップロードすべき正確なファイル（ロゴ、リッチメッセージのヒーロー画像、タイル画像...、さらにブランドの16進数カラーコードとCTA文言）を指定するか、ユーザーにドメインを許可するよう依頼します。
- 不足を埋めるために、でっち上げのアートワークで作成しないでください。
- 結果を notes.md → Environment にコピーします。
- 要件定義（推測せずに質問する）。
references/intake.mdを読み、AskUserQuestion を使ってラウンド形式で質問します。まず画面を確定します（ラウンド1b）：ユーザーが希望する画面をすでに知っているか（そのままリストとして受け取る）、またはヘルプが必要か（目標を聞き、2～3つの異なるサイズのストーリーボードを提案）を尋ねます。構築前に、番号付きのストーリーボードテーブルを確認してもらい、黙って画面を追加したり削除したりしないでください。LINEチャット画面ごとに、リッチメニューが開いているか（開いている/閉じている/なし）、新しいメッセージのみを表示するか（上詰め）、以前のメッセージも表示するかを常に尋ねます。リッチメニューについては、まずレイアウトピッカー画像（templates/richmenu-picker.svg/.png、intake.md ラウンド3bに環境ごとの方法あり）を表示し、どのコードかを尋ねます。LINEの場合は、リッチメッセージ、Flex、またはその両方かを常に尋ねます（Q3c、references/line.mdの視覚的な比較資料を使用）。ロゴ、ブランドカラー（16進数）、正確なCTA文言は早い段階で尋ねます。すべての回答をnotes.md→ Brief に記録し、推測したことはすべて → Assumptions に記録して確認を求めます。ユーザーがすでに回答したか、妥当なデフォルト値がリストされている場合のみ、質問をスキップします。オファー、価格、日付、ロイヤルティプログラム、商品の主張をでっち上げないでください。質問するか、プレースホルダーとしてマークしてください。 - スキャフォールディング。
bash scripts/new_project.sh <path/to/project-name>→ キット、スターターのindex.html、brand.css、notes.mdをコピーします。 - ブランド + 画像。intake の内容に基づいて
brand.cssを入力します。ライセンスされたフォントはbrand/fonts/に、ロゴ（アバター用の単色マーク）はbrand/に配置します。 すべてのアップロード画像はまずクリーニングします:python3 scripts/clean_image.py <ファイル> --for <配置> --edges /tmp/edges.png。これにより、白い端の帯をトリミングしてassets/clean-log.txtに記録し、references/line-image-sizes.mdと照らし合わせてサイズをチェックし、エッジシートを出力します。シートを開いて確認します。リッチメッセージのデフォルトサイズは1040×1040ですが、ユーザーがOAマネージャーの別サイズを確認した場合はその限りではありません。プラットフォームの制限を引用する場合は、2つ以上の情報源が必要です。それらが矛盾する場合はその旨を伝え、最も安全な方を選択します。 すべての画像スロットには実際の写真を使用します。CSSグラデーションやプレースホルダーテキストを写真の代わりに使うと、モックアップが偽物に見えます。references/image-sourcing.mdに従ってください： ユーザー提供 → ブランドウェブサイト/プレスキット → オンラインで検索（scripts/find_images.py "<クエリ>" --orient portraitでコンタクトシートを作成して確認し、scripts/fetch_image.py <URL> assets/<名前>.jpg --crop 4:5でダウンロード）。また、任意のウェブページ（ニュース、小売店、ブランドのソーシャル）をウェブ検索し、そのURLを fetch_image.py に渡すこともできます。ページのメイン画像を読み取ります。各ダウンロードはassets/credits.jsonに記録されます。 - ショットの構築。ギャラリーには、すべてのサーフェス×OSの組み合わせではなく、サーフェスごとに1つのサンプルがあります（以下のマトリックスを参照）。
templates/gallery.htmlから最も近いブロックをindex.htmlにコピーし、references/devices.mdを使用してデバイスを切り替えます：.dev.android↔.dev.iosを交換し、そのOSのクロームの違い（例：FBのタブが上下するなど）を適用します。コピーと画像を編集します。プラットフォーム固有の詳細はreferences/line.md、facebook.md、tiktok.mdにあります。- 各ショットに一意の
data-shotIDを付けます。これがファイル名になります。ショットごとのCSSは[data-shot="id"]でスコープできます。 - プロジェクトのクラスにはプロジェクトのプレフィックスを付けます（例：
.kv/.heroではなく.sb-hero）。キットのクラスと衝突しないようにします。 - フォントと比率（
references/typography-and-ratios.mdを読む）: アプリが描画するテキスト（吹き出し、Flex、投稿コピー、CTAボタン、キャプション）は常にプラットフォームフォントです。したがって、--brand-head/--brand-bodyを適用しないでください。ブランドフォントは画像内でのみ使用します。メディアボックスは固定の高さではなく比率を取ります：FBフィード 4:5、カルーセル 1:1、ストーリーズ/リール/TikTok 9:16、LINEリッチメッセージはデフォルトで1040×1040（他のサイズは確認後、references/line-image-sizes.md参照。エッジツーエッジのジオメトリは未確認）、Flexヒーロー 20:13。 - ブリーフのコンテンツを、収めるために削除、短縮、移動しないでください（例：スクエア画像をメニューを開いた状態で収めるためにテキストの吹き出しを削除する、「新しいメッセージのみ」のチャットを下詰めにするなど）。ユーザーに伝え、コンパクトメニュー、短いテキスト、メニューを閉じた状態の追加画面などのオプションを提供します。
- UNVERIFIED（未確認）とマークされたキットの詳細（現在は
references/line.mdのリッチメッセージのマージン、半径、幅）は notes.md → Unverified と配信メッセージに記載します。 - タイ語のコピー：価格、日付、単位、終助詞は
<span style="white-space:nowrap">で囲み、行末に「ค่ะ」、「ml」、または分割された単語が孤立しないようにします。
- 各ショットに一意の
- エクスポート（Macの場合、iOSテキストは実際のSF Pro + Thonburiでレンダリングされます）。
node scripts/export.cjs <プロジェクト>（マシンで初めて実行する場合：cd scripts && npm install。Playwrightのブラウザがダウンロードされていない場合は、インストールされているGoogle Chromeにフォールバックします）。プロジェクトフォルダのみを提供します。→captures/NN-<shot-id>.png（3× 電話、2× デスクトップ、透過）、00-overview.png、qa.json。失敗したリクエストとQAの問題をすべて修正します。- ここでエクスポートを実行できない場合（Claude アプリ / Node、Playwright、またはインターネットがない Cowork サンドボックス）：一度
cd scripts && npm install && npx playwright install chromiumを試します。それでも失敗する場合は、Python（pip install playwright && python -m playwright install chromium）を試し、各.frameを自分で3倍でスクリーンショットします。最後の手段として、python3 scripts/bundle.py <プロジェクト>を実行して1つの自己完結型HTML（dist/<名前>.html、ダブルクリックで開く）を作成します。プロジェクトのZIPと一緒に配信し、ユーザーに明確に伝えます：「ここでは何もレンダリングできなかったため、これらの画面は視覚的にチェックされていません。ChromeでHTMLを開いてください。画面を保存するには、右クリック→検証→電話フレームのノードスクリーンショットをキャプチャするか、Macでエクスポートを実行してください。」次に、未確認の詳細をリストします。レンダリングされていない結果をチェック済みとして提示したり、何も表示せずに停止したりしないでください。 - 単一ファイルHTML: 常に
scripts/bundle.pyで構築し、アドホックなスクリプトでは決して構築しないでください。すべてのインラインスクリプトを構文チェックし（node --check）、アイコンIDやファイルが欠落している場合は失敗し、ブラウザが存在する場合はステータスバーとアイコンがレンダリングされることを確認します。アドホックバンドラーはかつてアイコンスプライトを破損し、kit.jsを壊し、ステータスバーやアイコンがなくなりました。 - macOS以外では、iOSテキストはSF Proの代わりにInterを使用します（kit.jsがそれを交換します）。その旨をnotes.mdに記載し、最終的なクライアントファイル用にMacでの再エクスポートを提案します。
- ここでエクスポートを実行できない場合（Claude アプリ / Node、Playwright、またはインターネットがない Cowork サンドボックス）：一度
- クライアントのようにレビューする。すべてのPNGをフルサイズで開き（概要だけでなく）、
references/qa-checklist.mdを実行します。すべてのショットについて、notes.md → "Pre-delivery check against the Brief" に入力します：すべてのブリーフコピーが存在するか、アンカー、メニュー状態、メッセージ形式が要求通りか、削除されたものがないか。モックアップをreferences/screens/device/からの実際のデバイスキャプチャと並べて表示するか（またはユーザーに同じサーフェスの最新の電話スクリーンショットを依頼します）。プラットフォームのUIは数ヶ月ごとに変更されるため、実際のキャプチャが唯一の真実の情報源です。 - 正直に記録して配信する。
notes.mdを更新します：プレースホルダー、仮定、未確認の詳細、画像ソースとクリーニングログ、タイムライン。配信メッセージには以下を含める必要があります： (a) ファイルパス； (b) チェックされたものとされなかったもの、例：「100%でレンダリングおよびチェック済み」 vs 「ここではレンダリングされていません」； (c) 確認すべき仮定、短いリストとして（特に初回配信）； (d) 未確認の詳細； (e) 収まらなかったブリーフ項目と、提供しているオプション。
ギャラリーマトリックス（✓ = 既製のショット、その他 = 同じ行から適合）
| サーフェス | Android | iOS | デスクトップ |
|---|---|---|---|
| LINE OA チャット + Flex | ✓ ダーク | ✓ ライト | – (まだキットにありません) |
| LINE リッチメニュー（12 OAマネージャーテンプレート + カスタム + タブ） | ✓ ダーク L6, ✓ タブ付き | ✓ ラージ L4b, ✓ コンパクト C2l | – (LINE PCには表示されません) |
| LINE プッシュ / ロック画面 | 適合 (.android .notif) | ✓ | – |
| FB フィード 単一画像 | ✓ ライト | ✓ ダーク | ✓ |
| FB カルーセル | 適合 | ✓ ライト | 適合 |
| FB ストーリーズ/リール | 適合 | ✓ | – |
| TikTok フィード内 / Spark / 商品カード | ✓ フィード内 | ✓ Spark, ✓ 商品カード | ✓ |
リアリズムのルール（苦労して学んだこと）
プロジェクトごとに一度 references/realism-rules.md を読んでください。短いバージョン：
- プラットフォームUIはブランドカラーにしない。LINEヘッダー、FB/TikTokのUIはネイティブのまま。
- すべての画面で一貫したタイムライン（ティーザー → ローンチ → 予約注文 → 発売中 → 継続）。日付、曜日、カウントダウン、「有効期限」は一致している必要があります。すべての日付の曜日を確認してください。
- ブランドが実施していない特典（ポイント、会員ティア、無料ギフト）をでっち上げないでください。ブリーフに書いていない場合は、プレースホルダーにするか質問します。
- コンテンツは実際のアプリがアンカーする場所にアンカーします。新しいLINEスレッドは上から始まります。長いスレッドは下揃え（
.ln-msgs.bottom）。大きな空の空白は偽物に見えます。 - 画像は電話サイズで読める必要があります。約60ピクセル未満の製品サムネイルは見えないため、よりタイトにトリミングするか、大きくします。
- もっともらしい数字（いいね、コメント、時間、バッテリー）を使用し、ステータスバーの時間をストーリーと一致させます（07:30のプッシュが21:14を示してはいけません）。
- LINEのリッチメニューは、ネイティブUIタイルではなく、1つのデザイン画像（2500×1686または2500×843）です。アートワークとしてデザインします。
キットにないものがある場合
プロジェクトの index.html <style> に、同じ規則（プラットフォーム変数 vs ブランド変数）を使用して構築します。再利用可能な場合（LINE VOOM、FB Messenger、TikTok TopViewなどの新しいサーフェス）、assets/kit.css + templates/gallery.html に追加し、チームが上流に統合できるように言及します。
ファイル
| パス | 内容 |
|---|---|
assets/kit.css、kit.js、icons.svg、fonts/ | キット（各プロジェクトに kit/ としてコピーされます） |
templates/gallery.html | すべてのサーフェス × OS、ここからブロックをコピー |
templates/brand.example.css | コメント付きのブランド変数 |
templates/index.starter.html、notes.template.md | プロジェクトスターター |
scripts/new_project.sh | プロジェクトのスキャフォールディング |
scripts/preflight.py | ステップ0：レンダリング可能か？Macか？ブランドサイトと画像ソースにアクセス可能か？ユーザーに伝える内容を出力 |
scripts/clean_image.py | アップロード画像の白い端をトリミング（記録）、配置ごとのサイズチェック、エッジ拡大QAシート |
scripts/bundle.py | 1つの自己完結型HTML（CSS/JS/フォント/画像/スプライトをインライン化）、構文、アイコン、レンダリングチェック付き |
templates/richmenu-picker.svg / .png | すべてのリッチメニューレイアウトとそのコード、intakeでユーザーに表示。scripts/richmenu_picker.py --png で再構築 |
references/line-image-sizes.md | 送信経路ごとのLINEリッチメッセージ/リッチメニュー/Flex/画像サイズ、情報源と矛盾を含む |
scripts/find_images.py、fetch_image.py | オンラインで実際の写真を見つける（コンタクトシート）・ダウンロード+クロップ+ソース記録 |
references/image-sourcing.md | 画像の入手元、配置ごとのクロップ、広告作成ルール |
scripts/export.cjs | レンダリング+QA（scripts/ で一度 npm install が必要） |
references/intake.md | 質問ラウンド+デフォルト値 |
references/line.md、facebook.md、tiktok.md | プラットフォームごとの構造、制限、クラスマップ |
references/devices.md | フレーム、ステータスバー、OSの違い |
references/realism-rules.md、qa-checklist.md、localization-th.md | 品質基準 |
references/screens/ | 日付入りの実際のアプリスクリーンショット + calibrate/ レプリカ |
references/typography-and-ratios.md | 各プラットフォームが実際に使用するフォント、測定サイズ、メディア比率 |
scripts/calibrate.cjs | 実際のスクリーンショットにキットのレプリカを重ねて表示（サイド/ブレンド/差分 + バンド別スコア） |