ソーシャルセーフゾーン は何をしますか？
各プラットフォームのアプリは、ボタン、キャプション、プロフィールバーでフレームの一部を覆い、プロフィールグリッドは端を切り取ります。重要なものがそこにあると隠れてしまいます。このスキルはそれを防ぎます。
すべての数値は zones.json にあります。ハードコードしないでください。プリセット一覧: python scripts/zones_lib.py list
ワークフロー（順に従ってください）
- プリセットを選ぶ。 プラットフォームに合わせます:
ig-reel,ig-story,ig-story-strict,ig-feed,tiktok,yt-shorts,linkedin-4x5,linkedin-16x9。ユーザーがプラットフォームを指定しない場合はig-reelを仮定します。複数のプラットフォームが必要な場合は、最も厳しいゾーンで1つのマスターデザインを作成し、その後他のプラットフォームをチェックします。 - ゾーンを読み込む。
python scripts/zones_lib.py show <preset>で安全な矩形と回避すべきボックスが表示されます。 - その中で構築する。
- フルブリードの背景やフッテージはフレーム全体を埋めて構いません。
- 重要なものはすべて安全な矩形の中に入れます: 見出し、本文、字幕、ロゴ、顔、CTAボタン、主要な商品ショット。
avoidボックス（Reels: 右下のボタン列）には絶対に何も配置しないでください。- 字幕は安全領域の下部に配置し、下端に置かないでください。
- 最小テキストサイズ: 1080幅で42px。すべての背景に対して高いコントラストを確保。
- ReelsとFeed: プロフィールグリッドのサムネイルでも読めるよう、主要コンテンツをグリッドクロップ内にも収めてください。
- ツールに適したヘルパーを使用する:
- Remotion / React:
templates/SafeZone.tsxとtemplates/zones.ts - HTML / CSS:
templates/safezone.css（sz-ig-reelのようなクラス） - Python / Pillow / ffmpeg:
scripts/zones_lib.py - Canva / CapCut / Premiere:
assets/guides/<preset>.pngをロックしたレイヤーとして上にドロップ - 詳細:
references/integrations.md
- Remotion / React:
- 納品前に検証する。
- レイアウトJSON（正確）:
python scripts/check_zones.py layout.json - 画像または動画:
python scripts/check_zones.py file --preset <preset> --overlay check.png（tesseract が存在する場合は--ocrを追加） - 疑似アプリプレビュー:
python scripts/preview_mock.py frame.png --preset <preset> --out mock.png
- レイアウトJSON（正確）:
- 修正して再チェックする。
python scripts/autofix.py layout.jsonで要素の移動や拡大縮小を行います。再レイアウトできない完成済みフッテージの場合:python scripts/autofix.py fit in.png --preset <preset> --out out.png - 結果を1行でユーザーに伝える。 使用したプリセット、PASS または FAIL、何を移動したかを示します。必要に応じてオーバーレイやモックプレビューを表示します。
レイアウト JSON（正確なチェックと自動修正用）
{"preset": "ig-reel", "elements": [
{"id": "headline", "type": "text", "text": "Hello", "x": 60, "y": 300, "w": 700, "h": 90, "size": 90},
{"id": "logo", "type": "box", "x": 60, "y": 1500, "w": 220, "h": 110},
{"id": "bg", "type": "box", "x": 0, "y": 0, "w": 1080, "h": 1920, "important": false}
]}
important: false はゾーン外にはみ出してもよい背景を示します。
ルール
- ユーザーが明示的に危険領域に何かを配置したい場合は、実行しますが、何が隠れる可能性があるかを伝えてください。
zones.jsonでestimateとマークされた値はコミュニティによる測定であり、公式なものではありません。クライアントワークの場合はこのことを伝え、テスト投稿を提案してください。- プラットフォームを追加したり数値を変更するには、
zones.jsonのみを編集し、その後python scripts/export_zones.py css > templates/safezone.cssとpython scripts/make_guides.py --allを実行してください。