ブログのアイキャッチを作ったのに、
アップすると文字がつぶれて読めない… そんな経験ありませんか？
じつはこれは、デザインセンスの問題ではなく
「サイズ」「文字量」「圧縮設定」 の3つでほぼ決まります。
本記事では、初心者でもできる
アイキャッチがくっきり見える設定・デザインのコツ を、画像例つきで解説します。
Canvaを使っている人にも役立つ内容なので、ぜひ参考にしてください。
1. ブログのアイキャッチで文字がつぶれる原因はこの3つ
まずは、原因を知ることが一番の近道です。
① 画像サイズが小さく、解像度が足りない
小さい画像を無理に拡大すると、どうしてもぼやけます。
特にフリー素材の小型画像は要注意です。
② 文字が多すぎる・小さすぎる・細いフォント
アイキャッチは「読むもの」ではなく、一瞬で伝えるもの。
細かい文章を詰め込むと、必ず読みにくくなります。
③ 圧縮やリサイズで画質が劣化している
ブログ側（WordPressやテーマ）が
自動で縮小・圧縮して、画質を落としてしまうことがあります。
ここまで紹介した原因は、どれも初心者がつまずきやすいポイントです。
まずは 「ブログ初心者がやりがちな失敗7選」 もチェックしてみてください。
→初心者ブロガーに多い「失敗7つ」
🔍 画像指示（ビフォー／アフター）
左：小さい画像＋細い文字 → ぼやけて読めない
右：1200px以上＋太字 → くっきり
2. アイキャッチの最適サイズ（WordPress・SNS対応）
どの媒体でも安定して見やすいのは、次のサイズです。
-
WordPress：1200 × 630
-
Twitter/X：1200 × 675
-
Facebook：1200 × 630
-
Pinterest：1000 × 1500（縦長）
画像サイズはプラットフォームごとに推奨値が違います。
公式の最新情報はこちらで確認できます。
→ Google 検索セントラル（画像の最適化）
→ X/Twitter公式ヘルプ（画像サイズ）
👉 安全ライン（共通）
-
横幅 1200px 以上
-
比率は 16:9 が無難
比率が違うと、表示時に上下が切れる場合があるので注意しましょう。
画像指示
「16:9 の枠」を重ね、
中央が安全エリアであることを示す図
3. 文字がつぶれない「デザイン原則」
🔹 文字は“必要最小限”に
-
理想は 3〜5語
-
残りは本文で説明
👉 例
❌「ブログでアイキャッチ画像の作り方を詳しく解説します」
⭕「アイキャッチの作り方」
🔹 フォントサイズの基準
-
最小 48pt
-
スマホ重視なら 72pt 以上
🔹 読みやすいフォント
-
Noto Sans
-
BIZ UDGothic
-
見出し向けの太字ゴシック
細い明朝体や手書きフォントは、縮小表示でほぼ読めません。
画像指示
・細いフォント vs 太字フォント
・縮小したスマホ表示の比較
4. 視認性を高める「背景 × 文字」のコツ
背景写真が主張しすぎると、文字が埋もれます。
そこで役立つのが次のテクニックです。
-
背景の上に半透明の黒帯・白帯を敷く
-
文字に**薄い影（シャドウ）**を入れる
-
文字と背景の明暗コントラストを強くする
❌ NG例
-
明るい写真＋白文字
-
細かい柄の背景に文字
画像指示
同じ写真で
「帯なし → 読みにくい」
「帯あり → はっきり読める」比較
5. Canvaで失敗しない設定（手順つき）
手順
-
カスタムサイズ → 1200×630 を指定
-
文字は中央に配置（上下左右に余白）
-
書き出し形式は PNG（高画質）
Canvaでは書き出し形式ごとの注意点が公開されています。
→ Canva公式ヘルプ：ファイル形式について
4.ブログへアップ後、スマホで確認
💡 JPEG は圧縮がかかりやすく、文字が劣化しやすいです。
もしCanva自体の使い方に不安があるなら、
「無料と有料Canvaの違い」 も先に読んでおくと迷いません。
→無料と有料Canva、どこが違う？損しない選び方【失敗しない判断基準】
画像指示
Canva の画面で
・カスタムサイズ入力
・PNG選択のスクショ
6. WordPressでつぶれるときのチェック
✔ テーマの自動トリミング
→ 重要な文字は中央に寄せる
✔ 画像圧縮プラグイン
→ 圧縮率が強すぎる場合、
90〜95％へ緩めるだけで改善します。
✔ サムネイル生成サイズ
→ 管理画面の「メディア設定」で確認。
7. よくある失敗と修正事例
事例①：文字が多くて読めない
修正：キーワードだけ残す
→ クリック率アップ
事例②：スマホだけ読めない
修正：フォントを太く・72pt以上に
事例③：アップしたら荒れた
修正：元画像の解像度を上げる
画像指示
3つの事例を「失敗 → 修正」で並べた図
8. すぐ使えるチェックリスト
-
画像サイズは 1200px以上？
-
文字は 5語以内？
-
フォントは 太字？
-
背景と文字の コントラスト十分？
-
PNG形式で書き出した？
-
スマホ表示で確認した？
この6つを押さえるだけで、
「文字つぶれ問題」はほぼ解消します。
まとめ：大事なのはこの3つ
アイキャッチの文字がつぶれる原因は、
小さい画像・細かすぎる文字・強すぎる圧縮 の3つが中心です。
そして、
1200×630px・文字は少なめ・PNGで書き出し
——この3つを徹底するだけで、見やすさは一気に改善します。
まずはこの記事のチェックリストを使って、
いつも作っているアイキャッチを見直してみてください。
さらに、Canvaを使うなら次の記事も読めば、
もっと効率よく・キレイに 画像が作れるようになります👇
-
Canva無料と有料の違い・損しない選び方
-
文字つぶれしないアイキャッチテンプレ配布
ひとつずつ改善していくだけで、
クリック率も見た目の印象も、しっかり変わっていきます。
コメント