Reels & TikTok セーフゾーンプレビュー：9:16 縦型構図、UI遮蔽検証とクリーン出力
Instagram Reels、Stories、およびTikTokの縦型ショート動画フォーマットは、標準的な9:16のアスペクト比（通常1080×1920ピクセル）を採用しています。しかし、プラットフォームのモバイルアプリでは、アカウントアイコン、フォローボタン、いいねやコメントのアクションレール、キャプション、楽曲アイコン、端末ステータスバーなどのUI要素が動画の上に直接重なって表示されます。画面の端や下部に配置された重要なテキスト、行動喚起（CTA）、ロゴは完全に隠れてしまうリスクがあります。Reels & TikTok セーフゾーンプレビューツールは、ブラウザ内の幾何学的計算により、オーガニック投稿および広告配信の両方で重要な情報が確実に視認できるかを検証します。
具体的な実装シナリオ： クリエイターが下部3分の1に字幕を配置した1080×1920の告知動画を作成しました。このツールに読み込むと、Metaの公式ガイドライン（上部14％、下部35％、左右6％を安全マージンとして確保）およびTikTokインフィード広告仕様に基づき、バウンディングボックスの交差判定を瞬時に実行します。ロゴがY=1650pxに配置されている場合、下部キャプションや音声タイトルとの重なりが即座に警告表示されます。フィット（レターボックス）とフィル（クロップ）の切り替えや垂直パン調整を行うことで、公開前にセーフゾーン内へ安全に再配置できます。
すべてのメディア描画、動画シーク、フレーム抽出、画像出力は、HTML5 CanvasおよびHTMLVideoElement APIを使用してブラウザのメモリ内（100％ローカル）で完結します。元ファイルがGoToolstackサーバーや外部サービスに送信されることは一切ありません。エクスポートされるファイルには端末の枠線やガイドラインは含まれず、純粋な画像データのみが出力されます。
コアアーキテクチャ＆計算式
Safe Box = [X: W × m_left, Y: H × m_top, W_safe: W × (1 - m_left - m_right), H_safe: H × (1 - m_top - m_bottom)]
1080×1920のデザインキャンバス上の正規化レイアウト座標に対する軸平行境界ボックス（AABB）の交差判定。
ベストプラクティスと必須ガイドライン
- 字幕は下部アクションマージンより上に配置する： キャプションや各種ボタンによる遮蔽を防ぐため、字幕や重要なCTAテキストはY=650px〜Y=1350pxの範囲内に配置してください。
- 右側のアクションレールに注意する： TikTokやReelsでは、右端の120〜140ピクセルにいいねやコメント等のボタンが並びます。右揃えのロゴ等をこの領域に配置しないようにしてください（アラビア語等のRTL言語では左側に移動します）。
- オーガニック投稿と有料広告の違いを考慮する： スポンサー広告では画面下部に常時固定の大きなCTAバナーが表示されます。有料広告を配信する場合は広告用レイアウトも必ず確認してください。
- モックアップを含めないクリーンな形式で出力する： ダウンロードされるファイルには余計な端末枠や線が含まれないため、元の品質を保ったまま公式アプリへ直接アップロードできます。