セーフゾーンチェッカーについて
テロップ・ロゴ・スーパーのはみ出しを、実際の画像に重ねてひと目で確認できるツールです。 スクリーンショットや静止画をブラウザにドロップするだけで、アクションセーフ・タイトルセーフなどのセーフゾーン枠をリアルタイムに表示します。
🔒 プライバシー・セキュリティ 読み込んだ画像はサーバーへ一切送信されません。すべての処理はあなたのブラウザ内で完結します。社外秘・未公開素材でも安心してお使いいただけます。
主な機能
- セーフゾーン表示: アクションセーフ(95%)・タイトルセーフ(90%)・カスタムゾーンを重ねて表示
- ゾーンのカスタマイズ: ゾーン名・色・範囲(%)・線幅を自由に変更。ゾーンの追加・削除も可能
- 外側を暗くする: 指定ゾーン外を半透明でマスク、はみ出し箇所を直感的に把握
- センタークロスヘア / 三分割グリッド: センター位置・構図の確認に
- コーナーマーカー: 各ゾーンの角を見やすく強調表示
- ズーム: ホイールスクロール・ボタンで拡大縮小。フィット・100%リセットに対応
- 書き出し: セーフゾーン枠を焼き付けた画像をPNGでダウンロード
画像の読み込み方
3種類の方法で画像を読み込めます。
- ドラッグ&ドロップ — 画像ファイルを画面中央にドロップ
- ファイルを選択 — ヘッダーの「画像を開く」ボタンから選択
- クリップボードから貼り付け —
Ctrl+V(または「貼り付け」ボタン)でキャプチャ画像をそのまま読み込み
使い方
セーフゾーンを確認する
- 確認したいフレームのスクリーンショットを撮影
- ツールに画像を読み込む(ドラッグ or Ctrl+V)
- 左パネルで確認したいゾーンを有効にする
- テロップ・ロゴがゾーン内に収まっているか確認
- 必要に応じて「外側を暗くする」をONにすると、はみ出しが一目でわかる
ゾーンをカスタマイズする
- 範囲(%): 画像に対する割合で指定。例)90% = 上下左右それぞれ5%ずつ内側
- 色: カラーピッカーで任意の色に変更可能
- 線幅: 数値を大きくすると枠線が太くなる
- ゾーンの追加: 「+ ゾーンを追加」でゾーンを自由に増やせる
結果を書き出す
「書き出し」ボタンをクリックすると、セーフゾーン枠を焼き付けた画像を safezone_overlay.png としてダウンロードします。ディレクターやクライアントへの確認資料として活用できます。
セキュリティ仕様
本ツールは以下のセキュリティ対策を実装しています。
| 項目 | 内容 |
|---|---|
| 通信なし | ファイル読み込み時・操作時ともに外部への通信は発生しません |
| ローカル処理 | FileReader API・Canvas API のみ使用。すべてブラウザ内で完結 |
| ファイル実行なし | 読み込んだファイルは「画像データ」として扱われるのみで、コードとして実行されません |
| CSP適用 | Content-Security-Policy により外部スクリプト読み込み・外部通信をブロック |
| MIME検証 | image/* 以外のファイルは読み込みを拒否 |
| サイズ制限 | 100MB を超えるファイルは拒否 |
悪意あるファイルをドロップ・選択しても、このツールを通じてシステムに影響を与えることはありません。
活用シーン
- テロップ・スーパーチェック: ニュースや情報番組のテロップが規定のセーフゾーンに収まっているか確認
- ロゴ・クレジット配置の確認: 動画末尾のクレジットが正しい位置にあるか
- SNS動画の確認: プラットフォームごとの安全表示領域(UI重複を避けるため)の確認
- プレゼン資料の確認: スライド上の重要要素がプロジェクター出力時に切れないか確認
- ディレクター・クライアントへの説明資料: 書き出し機能で枠付き画像を共有
注意事項
- 表示はあくまでも目安です。正確な確認には本番環境での確認を推奨します
- ズームはCanvas表示の拡大であり、画像データ自体を変更しません
- 書き出し時は等倍(zoom 100%)でレンダリングされます