この記事では、アイキャッチ・サムネイルでどこまでの範囲にテキストを配置すれば文字切れを回避できるか検証したものです。
検証方法
Canvaで、アイキャッチの推奨サイズである1200×630サイズに、以下のように色を付けました。
※各色（赤・青・黄・黒・白）は、図形サイズの違いを表すためのラベルカラーです。
LINE・サムネイルでどこまで見えるかの目印になります。
| 図形の割合 | 横幅のpx | 縦のpx | ラベル色 | 表示範囲 |
|---|---|---|---|---|
| 100% | 1200 | 630 | 赤 | |
| 98% | 1176 | 617.4 | 青 | |
| 96% | 1152 | 604.8 | 黄 | ここまで、LINE・サムネイルで切れる（幅）↑ |
| 94% | 1128 | 592.2 | 黒 | ここまで、サムネイルホバー時に切れる（縦）↑ |
| 92% | 1104 | 579.6 | 白 | |
| 90% | 1080 | 567 | 赤 | ここまで、サムネイルホバー時に切れる（幅）↑ |
| 88% | 1056 | 554.4 | 青 | |
| 86% | 1032 | 541.8 | 黄 | |
| 84% | 1008 | 529.2 | 黒 | |
| 82% | 984 | 516.6 | 白 | |
| 80% | 960 | 504 | 赤 |
長方形を上記サイズで11個用意し、中央寄せで重ねて配置しました。この記事のアイキャッチがそれです。
検証結果
スマホでの見え方
サムネイル
ホバー無し
サムネイルでは、ホバー（拡大）されていない場合は上下は切れていません。
横幅は、ぎりぎり黒が見えます。1128px以内に配置すれば文字切れしなさそうです。
カテゴリーの帯を付けている場合は、どのくらい隠れるか把握しておく必要があります。
ホバー時
上下も切れています。ぎりぎり白が見えるのでホバーで切れたくない場合は567px以内に配置する必要があります。
横幅については青がしっかり見えているので1056px以内に配置すれば切れないはずです。
LINEでシェアした場合
OG画像にも、アイキャッチと同じ画像を使っています。
SNSシェアでLINEが一番切れやすいので、LINEで検証しています。
上下は切れていないように見えます。
横幅は黒が見えていますので、サムネイルのホバー無しの時と同じサイズに見えます。
1128px以内に配置すれば文字切れしなさそうです。
アイキャッチ
1200×630のフル画像で表示さえ、全く切れていません。
PCでの見え方
サムネイル
ホバー無し
サムネイルでは、ホバー（拡大）されていない場合は上下は切れていません。
横幅は、ぎりぎり黒が見えます。1128px以内に配置すれば文字切れしなさそうです。
カテゴリーの帯を付けている場合は、どのくらい隠れるか把握しておく必要があります。（スマホと一緒）
ホバー時
上下も切れています。ぎりぎり白が見えるのでホバーで切れたくない場合は567px以内に配置する必要があります。
横幅については青がしっかり見えているので1056px以内に配置すれば切れないはずです。（こちらもスマホと一緒）
アイキャッチ
1200×630のフル画像で表示さえ、全く切れていません。
（スマホと一緒）
まとめ
一番安全をみると、「ホバー時に切れない範囲。かつカテゴリー帯を考慮」がいいかと思います。👇
アイキャッチの文字切れは「経験則」で語られることが多いですが、
この記事では実際に検証し、誰が作っても再現できる基準をまとめました。
コメント