2026年 YouTube・SNS最新UI仕様準拠
🎬 YouTube・SNSサムネイル視認性&UI被り検証スタジオ

SNSサムネイル&バナー 「スマホ縮小・文字潰れ&UI被り」視認性プレビュー

PCで作ったときは完璧に見えても、スマホでは「右下の時間バッジで文字が消える」「一覧で縮小されて読めない」「インスタで左右が切れる」。 画像をドラッグ&ドロップするだけで、主要SNSのUI被り・スマホ縮小可読性・文字占有率を即座に検証します。

① YouTube時間バッジ
スマホ・PC・関連動画の3大UI被りを完全再現
② 1:1 正方形クロップ
インスタ投稿グリッドで見切れる左右領域を可視化
③ スマホ極小表示プレビュー
幅120px・160pxでの文字潰れ・可読性をチェック
④ 5×5 文字占有率グリッド
広告リーチを落とさない20%ルールを即座に計算
完全ブラウザ内処理(ゼロ外部送信): アップロードされた画像はすべてお使いのPC/スマホのメモリ内(HTML5 Canvas)でのみ処理されます。外部サーバーへの画像保存・送信は一切行われません。

1 サムネイル画像の読み込み

画像をドラッグ&ドロップ
またはファイルを選択
対応: PNG, JPG, WebP(推奨: 1280×720)

2 検証オーバーレイ切り替え

バッジ表示シミュレーション:

メインキャンバス検証(基準 1280×720px)

YouTube右下再生時間バッジ被り&1:1クロップマスク

✅ 右下危険領域:安全
インスタ見切れ インスタ見切れ Instagram 1:1 グリッド 12:34 ⚠️ 被り絶対禁止
💡
なぜYouTube右下の「時間バッジ被り」が致命的なのか?

YouTubeアプリおよびブラウザでは、右下に再生時間(例: 12:34)が半透明黒背景で常に強制オーバーレイされます。サムネイル右下に重要な文字(「衝撃」「無料」「第1位」など)や登場人物の顔を配置すると完全に隠れ、クリック率(CTR)が平均15〜30%低下します。重要な情報は**「左上〜中央」**に配置するのが鉄則です。

可読性(Legibility)テスト

スマホ実機での「極小縮小プレビュー(文字潰れ判定)」

大画面モニターで作成したサムネイルが、スマホの小さな画面(おすすめ・検索結果・関連動画一覧)でどう見えるかを縮小実寸で再現します。

① ホームおすすめ一覧 幅 約340px
12:34

タイトル文字が瞬時に読めるか?

② 検索結果(モバイル) 幅 約180px
12:34

フチ取りやコントラストが効いているか?

③ 関連動画一覧(極小) 幅 約120px
12:34

メインキーワードが判別できるか?

スマホ視認性チェック基準:
メインフォント目安: 70pt以上 文字数: 15文字以内

🎯 プロが徹底するクリック率(CTR)最大化チェックリスト

01. 右下20%は完全ブランク

再生時間バッジが被るため、右下隅の横160px×縦60px以内にはいかなる文字・顔・重要アイコンも置かない。

02. 文字数は12〜15文字以内

スマホ画面で瞬時に脳が認識できる限界は13文字前後。長い説明文は避け、インパクトある単語で引きつける。

03. 境界フチ取り・座布団の活用

背景写真が複雑な場合、白文字+黒フチ(3〜5px)または黒半透明座布団を敷き、WCAGコントラスト4.5:1以上を確保。

04. 人物の顔は「左または中央」

顔の表情(驚き・疑問・笑顔)は最大の視線誘導トリガー。右下に置かず、左側や中央寄りに大きくトリミング。

🔗 併せて使いたい goroneko のWeb・デザイン実務ツール