当サイトの記事一覧を、文字だけの並びから画像入りのカードに作り替えました。 あわせて、サイト全体の色も緑から青に変えています。 この記事では、なぜ変えたのか、何を参考にして、どう作ったのかを書きます。 自分でブログを運営していて「一覧が地味だな」と感じている人に役立つ話です。
文字だけの一覧が、単調で読まれにくかった
きっかけは、自分のスマホで自分のサイトを開いたときの違和感でした。 記事のタイトルと説明文が、上から下までずっと文字で続いています。 どれを読めばいいのか、目の止まる場所がありません。 書いた本人でもそう感じるなら、初めて来た人はもっと迷うはずです。
一覧の役割は、来てくれた人を記事の中へ案内することです。 その入り口が地味だと、読まれる前に離れてしまいます。 中身には自信があったので、見せ方でもったいないことをしている、と考えました。
伸びているブログを参考にした
まず、うまくいっている個人ブログをいくつか観察しました。 共通していたのは、記事ごとに画像（アイキャッチ）が付いていることです。 画像が並ぶだけで一覧が明るくなり、「これを読みたい」と目が止まります。 真似すべきはこの一点だと決めました。
ただ、全部を真似はしませんでした。 参考にしたブログは、顔を隠した人物写真や、にぎやかな装飾を多く使っています。 当サイトの看板は「実際に試した正直なレビュー」です。 にぎやかさより、清潔さと信頼感を優先することにしました。
決めたこと① 色を緑から青に変えた
最初に基調色を見直しました。 もとの緑は落ち着いていて悪くありませんが、少し地味に感じていました。 清潔感と信頼感を出したかったので、明るめの青に変えました。 レビューを読む人に安心してもらう色として、青が合うと考えたからです。
ここで注意したのは、淡すぎる水色を避けたことです。 淡い色は可愛い一方で、文字が読みにくくなり、印象も弱くなります。 爽やかさは残しつつ、しっかり読める濃さの青を選びました。
決めたこと② 全記事にアイキャッチを付けた
次に、17本すべての記事に画像を用意しました。 方針はシンプルです。実物の写真がある記事は、その写真を使います。 MacBookやトラックボールのレビューは、撮った実物がそのまま入り口になります。
問題は、写真がない記事でした。 ログインの失敗談やドメインの話には、写せる「モノ」がありません。 こういう記事は、内容を表す簡単な図解を自分で作りました。 「2つの入り口を取り違えた話」なら、入り口を2つ並べた図、という具合です。
正直さを守るために決めたルール
画像を増やすとき、一番気をつけたのはここです。 AIで作った画像を、あたかも実物の写真のように見せてはいけません。 レビューサイトでそれをやると、信頼を一気に失います。
そこで、画像の種類を必ず明記することにしました。 カードの左下に、小さな帯を付けています。 「実物写真」「画面スクショ」「図解」「AI生成」のどれなのかが、ひと目でわかります。 本物とそうでないものを、隠さず分ける。これが当サイトの線引きです。
やってみて感じたこと
作り替えてみると、一覧の印象がはっきり変わりました。 文字が並んでいた画面に画像が入り、どの記事も入り口ができた感覚です。 写真と図解が混ざっても、同じ青い枠でそろえたので、ばらつきは出ませんでした。
肝心の「読まれる数が増えたか」は、まだわかりません。 見た目を変えた効果は、数週間ぶんのアクセスを見てから判断すべきものです。 結果が出たら、この記事に追記します。
地味だと感じたら、まず記事に画像を1枚足すところから始めてみてください。 色や装飾より、その1枚が一覧の印象を大きく変えます。