ホームページにサムネイルを入れる前と後を比べる
見出しも説明もあるのに、ホームページを眺めると文字のかたまりが続いて見える。そんなとき、案内する内容を一枚の画像でも示す方法があります。ここでいうサムネイルは、リンク先の内容を表す小さな代表画像です。
私たちが運営するMiraiでは、トップに仕事・家族・ロボット・AIへの不安という四つの入口を置いています。修正前は、小さな案内役の顔、見出し、説明、記事へのリンクという構成でした。そこへ、各テーマの場面を描いたイラストを加えました。
追加前・追加後を切り替えて、同じ場所を見比べられます。
2026年9月29日に、同じ制作中のページをPC幅1440px、スマホ幅390pxで撮影しています。画像を切り替えると、見出しの下にイラストが入り、その分だけ説明とリンクが下へ移ったことも分かります。
サムネイル画像の選び方は、見出しが伝える場面から考える
仕事のカードには、机に向かう人物とパソコン。家族のカードには、写真を手にした人物を置いています。同じ書斎の画風を保ちながら、手元の道具や視線で話題を変えています。
どちらにも人物がいるので、顔だけを見れば似ています。画像を選ぶときは「きれいな人物か」に加えて、「仕事の話と家族の話を分ける手がかりがあるか」を見ると、直したい点が具体的になります。
- 商品の案内なら、形や使う場面が分かる画像。
- サービスの案内なら、相談する場面や作業の流れが分かる画像。
- 読み物の案内なら、そこで扱う問いや場面を想像できる画像。
画像にすべてを説明させる必要はありません。見出しで話題を示し、画像で場面を添え、短い説明で読む理由を伝える。この分担から、一枚に何を入れるかを決められます。
スマホのサムネイルは、画像の下のリンクまで見る
画像が入ると、カードは縦に長くなります。今回のPCの画面では、追加前に見えていた二段目の入口が、追加後は画面の下へ移りました。スマホも、一つのカードを読むための縦幅が増えています。
場面を見せたいページなら、その空間を使う理由があります。急いで答えを探す一覧なら、画像を小さくする、説明を短くする、よく使うリンクを上へ出す、といった調整も考えられます。画像の見栄えと、読者が先へ進むまでの距離を一緒に見てください。
今回見せているのは、画像を追加した画面の変化です。クリック数が増えたという測定結果ではありません。まずスマホでカードを一つ開き、画像・説明・次のリンクまで自然に目で追えるか、確かめるところから始めましょう。
ホームページにサムネイルを追加するときのAIへの指示例
次は、この改善から組み直した指示例です。画像を用意する依頼と、置く場所の指定を一緒に伝えます。
［ページURL］の案内カードへサムネイルを追加してください。 カードのテーマ：［仕事／家族など］ 見る人が知りたいこと：［例：自分の仕事がどう変わるか］ 画像で見せたい場面：［例：机で資料とパソコンを見比べている場面］ 使う画像：［用意した画像。新しく作る場合は、先に案を見せてください］ 見出し → 画像 → 短い説明 → 記事へのリンク、の順にしてください。 今ある本文、見出しの大きさ、リンク先は保ってください。 画像の前後に余白を取り、説明文とつながって見えないようにしてください。 似た画像が並ぶ場合は、道具や場面でテーマを区別してください。 修正前後を同じPC幅・スマホ幅で撮影してください。 顔や道具が切れていないか、画像の下のリンクを見つけやすいかも確認してください。
自分の商品や店舗を紹介するなら、まず手元の実際の写真から選んでみてください。写真が足りないときは、「どの場面を撮れば説明が伝わるか」をAIに整理してもらう使い方もできます。
サムネイルの改善例は、同じ画面幅で残しておく
この比較では、画面幅と高さをそろえ、同じ見出しが同じ位置に来るように撮りました。画像を追加するとページ全体が長くなるため、同じ量だけスクロールしても、別の場所が写ってしまうからです。
以前の余白と文字サイズの修正例では、二枚を小さく並べたため違いが読み取りにくくなりました。今回は一枚を広く表示して切り替え、原寸でも開けるようにしています。
自分のページでも、まずは一つの案内カードだけで試してみましょう。「何を読む場所か伝わるか」「その先のリンクへ進みやすいか」を見比べると、次に直すところを選びやすくなります。
制作例に使ったMirai（ミライ分岐点）は、仕事や暮らしの未来を考えるメディアです。画像の容量や表示サイズを整える段階では、ホームページの画像を軽くする方法も参考にしてください。