アイキャッチ画像の構成やデザイン、皆さんどうしていますか？
「とりあえず画像を作って設定しておけばOK」と思いがちですが、実はSNSにシェアされたときに画像が表示されなかったり、文字が見切れてしまったりする意外な落穴が存在します。
今回は、私どんまが自身のサイトでアイキャッチ画像作成を見直した際に気づいた注意点と、それを解決するために作成した便利ツールについて詳しく解説します！
実際に運用していて失敗した気づきをまとめてるので参考にしてください～。
ファイル名は英語に（日本語NG）
意外と見落としがちなのが「画像ファイル名」です。
アイキャッチ画像を保存する際、日本語のファイル名（例：アイキャッチ1.png）を使っていませんか？
SNSに記事をシェアした際、日本語ファイル名のままだとOGP（SNS用のプレビュー画像）が正常に読み込まれず、画像が表示されないことがあります。
特にThreadsなどの一部SNSでは、日本語を含んだ画像URLを正しく表示できない仕様があるため注意が必要です。
アイキャッチ画像を保存・アップロードする際は、必ず半角英数字（例：eyecatch-01.png）に設定しておきましょう。
どんまもこの仕様に気が付かないで投稿していて、何度も修正しています。
実際のところ一番見落としするので注意が必要です。
サイズの指定
SNS上でカード画像を綺麗に表示させるためには、推奨されている適切な画像サイズとアスペクト比（縦横比）で作ることが重要です。
- 推奨サイズ： 1200 × 630 px
- 推奨比率： 1.91 : 1
このサイズと比率で作成しておくと、XやFacebook、Threadsなど主要なSNSで自動トリミングされた際も、画像が荒れたり不自然に切り取られたりするのを防ぐことができます。
デザインの工夫
見た目の美しさだけでなく、「SNS上でどう表示されるか」をあらかじめ計算してデザインを配置することが大切です。ここからは具体的な配置のポイントを見ていきましょう。
下の表示エリアは隠れることがある
X（旧Twitter）などでリンクカードが表示される際、カードの下部エリアにドメイン名や記事タイトルが被って表示されることがあります。
そのため、画像の下側ギリギリに重要な文字やロゴを配置してしまうと、せっかく作成した画像が隠れて見えなくなってしまう危険があります。
重要なテキストや要素は画像の下部ギリギリには置かず、しっかり余白を取るのが鉄則です。
どんまが過去投稿したアイキャッチ画像、見返すとダメなものが多いなと実感しています。反省点です。
ロゴは上部に配置するのが無難
ロゴの配置場所は「上部」かつ「中央」にするのがおすすめです。
上部に配置： 先述した「下部のタイトル被り」を確実に回避できます。
中央に配置： SNSによっては画像を正方形（1:1）に切り取って表示する仕様もありますが、中央に寄せておけば切り取られてもロゴが画面内に残ります。
PC版のLINEのトークを確認すると、実際に画像が中央に切り取られれていることが確認出来ます。
綺麗に魅せるなら下記の様な画像のレイアウトが望ましいです。
TOP画像など、確実にサイトの名前を認知したい場合は正方形に切り取られても問題無い用に意識した配置にしましょう。
ページタイトルを魅せたい場合のデザイン例です。この状態だと正方形に切り取っても全て収まります。
しかし、正方形に切り取り前提だと情報量が減ってしまうので、どんま的の考えとしては重要なページ（TOPページなど）だけを正方形の切り取り前提で作成、それ以外のページは推奨サイズ（1200 × 630 px）を有効活用した作成で問題無いと思っています。
何を伝えたいかを一番大切にするのが優先ですし、実際推奨サイズで表示されるサイトのほうが多いです。
中央に情報を寄せるという事だけを守って頂けたら良いと思います。
タイトルが長い時は改行を入れる
アイキャッチ内のタイトル文字が長すぎると、文字サイズを小さくせざるを得ず、スマホの画面で見た時に一目で内容が伝わらなくなってしまいます。
- 文字数は15〜20文字程度に要約する
- 意味のまとまりごとに適切な位置で改行を入れる
- 強調したいキーワードだけフォントサイズを大きくする
「パッと見でどんな記事かわかる」視認性を意識しましょう。
サブタイトルがある場合は短く簡素に
メインタイトルの補足としてサブタイトルを入れる場合も注意が必要です。
要素を詰め込みすぎると画面全体がごちゃごちゃしてしまい、一番伝えたいメインタイトルが霞んでしまいます。
サブタイトルを入れる際は10文字前後の短いフレーズにとどめ、メインタイトルとのメリハリを意識しましょう。
OGP確認チェッカーでそれぞれ確認しよう
ここまで解説した通り、SNSごとに画像の表示領域やテキストの被り方が異なります。
「記事を公開してみたら画像が見切れていた…」という失敗を防ぐために、表示確認は必須です。
そこで、各SNSでの表示状態を一括でシミュレーションできる「OGP確認チェッカー」を自作しました！
投稿後のURLを指定するだけでOGPが確認可能です。
各SNSやサイトの見え方の目安も一覧で見れます。
このツールで確認しておけば、どのSNSでシェアされてもバッチリ美しいカードが表示できる用になると思います。
サムネイルメーカ自作しました
さらに、アイキャッチ画像作成にかかる手間を減らし、毎回統一感のあるデザインをサクッと作るために「サムネイルメーカー」も自作しました！
ブログも勿論、YouTubeのサムネイル作りなども活用可能です。
作成中の画像ですが、各SNSの見え方のプレビュー機能も搭載しています！
毎回デザインソフトを一から立ち上げる必要がなくなり、ブログ運営の作業効率が格段にアップします。ぜひ活用してみてください！
まとめ：アイキャッチ作成時の重要チェックリスト
今回ご紹介したアイキャッチ画像作成の落とし穴と対策をまとめました。記事を公開・シェアする前に、以下のポイントをチェックしておきましょう！
- ファイル名: 日本語はNG！必ず半角英数字（例：
eyecatch-01.png）にする - サイズ・比率: 推奨サイズである 1200 × 630 px（比率 1.91 : 1） で作成する
- 文字・ロゴの配置:スマホでの見え方を考慮し、文字数は15〜20文字程度に要約する
- 下部のタイトル被りを防ぐため、ロゴや重要文字は上部〜中央に配置し、下部に余白を空ける
- サブタイトルを入れる場合は10文字前後に抑える
- 確認: OGP確認チェッカー を使って、各SNSでの表示崩れや切れ方がないかを確認する
- 作成: サムネイルメーカなど専用ツールを使ってデザインを整える
上記を意識するだけで良いアイキャッチ画像が作成出来ます。
是非みなさんも作ってみてください！
コメント