重なりの確認 · ヒートマップ

バッジと重なりのためのサムネイル・セーフゾーンチェッカー

1枚のサムネイルを 640、360、246、168 ピクセルで、再生時間バッジ、ホバーアイコン、進行バーを重ねて確認。ヒートマップと角メーターが、右下が混み合いすぎていると警告します。

  • 100% ローカル、アップロードなし
  • 登録不要
  • 無料
文字がバッジの下
文字がバッジの下
文字を移動
文字を移動

あなたのサムネイル

16:9 画像を1枚ドロップ、スロットをクリック、または貼り付け。

重なりの設定

確認する幅を選びます。168px はサイドバーのリストで使われるサイズです。

すべての表示サイズ

ビジュアル監査スコア

使い方

3ステップで重なりを確認

  1. 01

    サムネイルを追加

    16:9 画像を入れるか、角が混雑した例を読み込みます。

  2. 02

    各サイズを確認

    重なりとヒートマップを表示したまま 640、360、246、168 ピクセルを切り替えます。

  3. 03

    角を直す

    メーターが赤くなったら、重要な文字と顔を左上へ移動します。

詳しく

インターフェースの重なりを避けて設計する

22%バッジに隠れる角の範囲
4確認する幅
16×9ヒートマップのグリッド
168px最小チェック
01

プラットフォームのインターフェースの重なりを考慮する

動画プラットフォームは、重要な操作要素をサムネイルの上に自動的に重ねて表示します。

何もないキャンバスでデザインしていると、公開後の画像の上に動的なバッジやアイコンが載ることを忘れがちです。

端の近くに置いた重要な図、文字のオチ、顔の要素は、公開後に隠されるおそれがあります。

セーフゾーンチェッカーは、大きなプレビューキャンバス上にプラットフォームのインターフェースのマスクを重ねます。

書き出し前にこれらの重なりをプレビューすれば、重要な焦点がインターフェース要素で隠れるのを防げます。

再生時間バッジ

フィードや検索レイアウトでは右下に塗りつぶしのバッジが表示され、その下にあるものを隠します。

ホバー時のボタン

デスクトップでは、カーソルを載せると「後で見る」や再生リスト保存などのアイコンが上部の角に現れることがあります。

視聴履歴の進行バー

視聴済みの動画では最下部に赤や色付きの再生バーが走り、細い下余白を覆います。

02

右下の角の混雑を管理する

動画サムネイルの右下は、現在のフィードレイアウトで最も弱いゾーンです。ほぼすべての主要な表示形式で、この角は動画の長さを示す再生時間バッジのために確保されています。

それでも多くのクリエイターがここに重要な文字やサブのロゴ、表情を置き、公開後にまったく読めなくなっています。

ThumbProof はこのゾーン専用の自動警告と視覚ガイドを用意しています。

右下の混雑警告

ビジュアル監査が右下の区画のピクセルの複雑さとコントラストを分析し、密な要素があれば警告します。

再生時間バッジの再現

任意の再生時間を入力し、短い・長いタイムコードが角をどれだけ覆うか確認できます。

構図の再配置

右下を空けるか、シンプルで暗い背景にしておけば、必ず表示される再生時間が主なメッセージとぶつかることはありません。

03

縮小サイズでのセーフゾーンの余裕を確認する

1280x720 の高解像度キャンバスではわずかに見える重なりの余白も、小さな画面ではデザインの大部分を飲み込むことがあります。

モバイルフィードやサイドバーのおすすめでは、縮小されたサムネイルに対して再生時間バッジやタイトル余白の占める割合が大きくなります。

原寸では余裕があった要素も、縮小すると窮屈に感じられます。

縮小サイズでセーフゾーンの余裕を確認すると、圧迫されるポイントがわかります。

セーフゾーンチェッカーで複数のサイズを確認すれば、どの縮尺でも主要な要素が見えることを確かめられます。

サイドバーでの縮小

168x94 では、再生時間バッジが画面のずっと大きな割合を覆います。

モバイルでの見え方

モバイルレイアウトには狭い縦の余白と隣接するUIがあり、端に寄せた要素は詰まって見えます。

外周の安全マージン

四辺の内側に少なくとも10%の余白を取れば、プラットフォームの切り抜きのわずかな差で大切な部分が切られることはありません。

FAQ

よくある質問

サムネイルのセーフゾーンとは何ですか?

再生時間バッジ、ホバーアイコン、進行バーなどのインターフェース要素が重なった後も、完全に見えて遮られないサムネイルの領域です。

なぜ右下の角に特に注意が必要なのですか?

右下はプラットフォームの再生時間バッジが置かれる場所だからです。重要な文字、ロゴ、顔の要素をここに置くと、タイムスタンプの裏に隠れてしまいます。

右下の混雑警告は何を示していますか?

ビジュアル監査が画像の右下で細部、コントラスト、複雑さが高いことを検出したという意味で、重要な要素が再生時間の表示とぶつかる可能性を示しています。

動画の長さごとにセーフゾーンをテストできますか?

はい。模擬する再生時間を変更して、短いタイムスタンプや時間単位の長いバッジがサムネイルの右下をどれだけ覆うか確認できます。

プラットフォームの重なりの位置は正確ですか?

いいえ。重なりの寸法、余白、フォントは一般的なフィードの基準を反映した模擬的な近似で、正確な座標は端末、アプリのバージョン、画面サイズによって異なります。

セーフゾーンチェッカーは元の画像ファイルを変更・切り抜きしますか?

いいえ。ブラウザのキャンバス上で画像にマスクを重ねて表示するだけで、元のファイルを変更、切り抜き、編集することはありません。

見出しをバッジの下に置かない

アップロード前の1回のチェックで、後の書き出し直しを防げます。

関連

その他の無料ツールとガイド