あなたの視線をキャッチしたいので、画像は「続きを読む」の前に入れることにした。

最近、Hike×Hackでは改めて「続きを読む」を導入しました。

しかし、シンプルを目指す者として1つひっかかることが。

それは、アイキャッチの画像を「続きを読む」の前と後ろ、どちらに入れようかということでした。

※2018/05/23追記：「続きを読む」がなくてもトップページがスッキリするようになったため、撤廃しました。

Hike×Hackでの「続きを読む」の導入

以下の記事で書いたように、Hike×Hackでは現在「続きを読む」を導入しています。

導入した理由は「トップページをシンプルで見やすいものにしたい」から。

しかし、その「シンプルにする」という考えのもと、ある問題に直面したのです。

アイキャッチ画像をどこに配置するか。

問題となったのは、「アイキャッチ画像をどこに配置するか」ということ。

「続きを読むの前(以下”冒頭")」に画像を入れれば、トップページにおいてもその画像が表示されます。

逆に、「続きを読むの後(以下”本文")」に画像を入れれば、個別記事で表示はされるけれども、トップページでは画像は表示されないようになります。

つまり「一覧性」という視点から見れば、本文に画像を入れたほうがトップページはスッキリするのです。

しかし「わかりやすさ」「インパクト」といった視点から見ると、冒頭に画像がドンと表示されていたほうが目につきます。

それに、トップページがほとんどテキストのみになってしまうと、いささか味気ない。そこで結局、冒頭にアイキャッチ画像を入れることにしたのです。

画像に文章を差し込むことで、記事内容とのシンクロ率を上げる。 

せっかくアイキャッチ画像を冒頭に入れることにしたのだから、アイキャッチ画像に個性をもたせたい。

ということで、最近は「アイキャッチ画像に文章を入れる」ようにしてみました。そうすることで、「この記事にはこの画像」というように画像の個性を作るようにしたのです。（たとえば、この記事のアイキャッチ画像を他の記事で使いまわすことはできないですよね）

それに「画像だけで内容が想像できる」というのが良いです。もしかしたら、Twitterのシェアなどでも目につきやすくなるかも？

ちなみに私は画像に文章を挿入するのには「Skitch」を使っています。以前よりも「文章を挿入する」という手間が増えたわけですが、思っていたよりもサクサク編集できるので重宝してます。

結論：アイキャッチ画像は冒頭に。

ということで、「アイキャッチ画像は文章を挿入して冒頭に入れる」ということになりました。

Hike×Check!!

1.アイキャッチ画像を「冒頭」と「続きを読むの後」のどちらに入れるか。

2.アイキャッチ画像に文章を入れることで「画像⇔内容」のシンクロ率を上げる。

3.ひと目でわかりやすいように、アイキャッチ画像は冒頭に入れることに。