ブログのアイキャッチと配色、実はここが大事だった

ブログを書いていると、記事の内容と同じくらい「見た目」が読者の印象を左右すると感じることがあります。その中でも特に影響が大きいのがアイキャッチ画像と配色です。

今回はこの2つのテーマについて、実際の色を使いながら整理してみました。

アイキャッチはなぜ重要か

「画像なんてなくても記事の内容が良ければいい」と思っていた時期もありましたが、実際はそうではありませんでした。

SNSシェア時のOGP画像になる

XやFacebookでブログのURLをシェアしたとき、表示されるカード画像がアイキャッチです。このカード画像のことをOGP（Open Graph Protocol）画像と呼びます。画像ありとなしでは、クリック率に明らかな差が出ます。WordPressにSEOプラグインを入れておけば、アイキャッチを設定するだけで自動的にOGP画像として使われる仕組みになっています。

ブログ内の回遊性に直結する

WordPressのテーマによっては、記事一覧がカード型で表示されます。このとき各カードに表示されるのがアイキャッチです。魅力的な画像があるほど「次もこの人の記事を読もう」となりやすいです。

ブログのブランド統一感をつくる

毎記事で配色やデザインに一貫性があると、読者に「このブログらしさ」が伝わります。継続して読んでもらうための地盤にもなります。

「いいな」と感じる配色の6原則

配色は個人のセンスによるところが大きいと思われがちですが、実際には知っているか知らないかの差の方が大きいと感じています。原則を押さえるだけで、見た目の印象は大きく変わります。

① 60-30-10ルール（黄金比率）

使う色の面積比を「メイン60%：サブ30%：アクセント10%」にすると、画面全体が自然と落ち着きます。

特にアクセントカラーは「小さく使うほど効く」というのがポイントです。目立たせたい要素にだけ使うことで、視線を自然に誘導できます。

② 彩度レベルを統一する

複数の色を組み合わせるとき、鮮やかな色と淡い色が混在すると落ち着かない印象になります。彩度のレベルを揃えるだけで、一気に統一感が出ます。

③ 色温度で「雰囲気」を決める

暖色・寒色・中性色にはそれぞれ伝わる印象があります。記事の内容と色温度を合わせると、読者が感じるトーンと実際の中身がズレなくなります。

④ テキストのコントラストを確保する

背景色と文字色の差が小さいと、内容が読めません。特にアイキャッチに文字を入れる場合は、コントラスト比の確保が必須です。

目安はWCAG（ウェブアクセシビリティのガイドライン）のAA基準である4.5:1以上です。迷ったら白か黒の文字を選ぶのが最も確実です。

⑤ 使う色は3色まで

色が多いほど散漫な印象になります。メイン・サブ・アクセントの3色に絞るだけで、まとまりが生まれます。

⑥ 白・グレー・黒を積極的に使う

無彩色は「どんな色とも喧嘩しない」という特性があります。迷ったらベースを白やグレーにして、1〜2色だけ差し色にするのが最短の解決策です。

参考になる本の紹介

配色を自力で考えるのはなかなか大変です。そんなときに役立つ本を紹介します。

　Color Design　（株）KADOKAWA(Googleリンク)

本とCanvaの間の小さなギャップ

この本に掲載されているカラー数値はRGB形式（例：R=83, G=74, B=183）です。一方CanvaでカスタムカラーはHEX形式（例：#534AB7）での入力が必要になります。

変換はGoogleの検索窓に以下のように入力するだけです。

検索結果の一番上に変換結果が表示されるので、コピーしてCanvaに貼るだけです。

まとめ

アイキャッチと配色についてまとめると、こうなります。

配色は「センス」という言葉で片付けてしまいがちですが、実は体系化されたルールがあります。原則を知ったうえで配色の見本帳を活用すれば、ブログのアイキャッチのクオリティは着実に上がっていくと感じています。