Sabakura Blog

※今回のタイトルはホッテントリメーカーを使わせていただきました。

さて、アイキャッチ画像とは、記事の先頭部分に表示される画像のことで、名前のとおりに人の目を引いて記事に誘導する効果があります。
有名なブログの多くで、記事の先頭に写真やイラストが載っているのを見たことがあると思いますが、あれのことです。さらに言うなら、この文章のすぐ上にあるネコ画像のことです。

今回は、このアイキャッチ画像がどのように使われているか、幾つかのパターンにまとめてみました。なお、パターンの元となるサイトは、比較的有名どころと思われるサイトを中心に選ばせていただきました。

形やサイズによる分類

まず、アイキャッチ画像の形やサイズにあわせての分類をしてみます。

長方形＆大きめ

上記サンプルは「ホームページを作る人のネタ帳」様の記事からお借りしました。

長方形はアイキャッチ画像のなかでも一番スタンダードかもしれません。
画像の横幅も記事と同じになるため、人の目を惹きつけるという意味では、非常に大きな効果が期待できます。

画像が大きいぶん、それだけ記事本文が下にずれてしまいがちなので、その辺りをどう工夫するかがウェブデザイナーの腕の見せどころかもしれません。

以下、長方形のアイキャッチ画像を多く使っているサイトを集めてみました。

• ホームページを作る人のネタ帳
• ライフハッカー[日本版]
• らばQ

横長＆大きめ

上記サンプルは、「バシャログ」様の記事からお借りしました。

横長タイプは長方形に似ていますが、長方形が4：3や5：2ぐらいの比率であるのに対し、5：1、6：1など横に非常に長いのが特徴です。当サイトでもアイキャッチ画像を使うときは、この横長タイプを採用しています。

長方形に比べると画像が小さいぶんインパクトには欠けますが、記事本文があまり下にずれないというメリットがあります。
そのほか、GoogleAdsenseやアフィリエイト広告バナーなどもこうした横長タイプが多いため、これら広告と間違われないように注意する必要があります。

以下、横長のアイキャッチ画像を多く使っているサイトを集めてみました。

• バシャログ
• 二十歳街道まっしぐら
• Web Design KOJIKA17

正方形＆小さめ

上記サンプルは「男子ハック」様の記事からお借りしました。

正方形タイプは、折り返した記事の本文と一緒に表示させるパターンです。

記事本文が最初から見えているため、記事自体に読者を惹きつける力がある場合にはとても有用だと思います。ただ画像サイズが小さいぶん、どんな画像を使うべきかセンスが問われるところではあります。

以下、正方形のアイキャッチ画像を多く使っているサイトを集めてみました。

• 男子ハック
• Webクリエイターボックス
• Webデザインレシピ

画像の内容による分類

次に、アイキャッチ画像の内容によっても分類してみます。

記事内容のイメージ写真・イラスト

上記サンプルは「Webクリエイターボックス」様の記事からお借りしました。

たとえば記事内容がWordPressのカスタマイズに関するものであれば、WordPressのアイコンやイメージ画像を使う、といった記事内容にアイキャッチ画像を合わせるパターンです。

アイキャッチ画像の大半はこの分類に属するかもしれません。しかしTwitterネタだからといって毎回小鳥や鯨の画像を使っていては芸がないです。
ここでちょっとした変化球な画像が使えるかで、サイトのセンスも見えてくる気がします。その意味では掲載したWebクリエイターボックスさんなどはいつも秀逸な画像です。

サイトや画面のキャプチャ

上記サンプルは「コリス」様の記事からお借りしました。

こちらもそこそこ数が多いパターン。たとえばサイト紹介記事であれば、そのままそのサイトのキャプチャ（スクリーンショット）を使う、あるいはPhotoshopのチュートリアル記事であれば、完成画像を載せるなどといったパターンです。

深く考えずに利用できて便利なパターンではありますが、ブログなどだととくに掲載すべきキャプチャ画像がない記事を書くこともあると思うので、そうした場合は使えない点は要注意です。

ロゴ画像などのワンポイント

上記サンプルは「二十歳街道まっしぐら」様の記事からお借りしました。

前述のキャプチャパターンに近いですが、ウェブサービスやソフトのロゴ画像を利用してアイキャッチ画像にしてしまうパターンです。

良いアイキャッチ画像がないときに、私自身ついつい使ってしまいます。とはいえ、上手な方はロゴのサイズや配置を工夫したりと見せ方が上手いです。

その他

アイキャッチ画像という概念をある意味でくつがえしているのが“>WebDesign KOJIKA17さんのブログ。

もちろん内容に即した画像のこともあるのですが、記事内容と関係なく赤一色、黄一色といったアイキャッチ画像をどん！と入れてらっしゃいます。
でも、技術うんぬんは別として、かなりのデザインセンスが求められる手法だと思います。

まとめ

以上、最近よく見るアイキャッチ画像のパターンについてまとめてみました。

どのパターンもそれぞれメリット・デメリットがありますが、やはり有名なサイトはどこも上手に使っているのが良く分かります。

最近ちょっとマンネリ化した画像ばかり使っているな、とか、これからアイキャッチ画像を使っていきたいという方は、ぜひ参考にしてみてください。

WordPressで記事に画像を追加しようとする場合、投稿画面から画像挿入ボタンを使うことが多いです。

この画像挿入の画面では、以下のように「タイトル」「代替テキスト」「キャプション」「説明」など、一つのファイルにつき4箇所もテキストが入力できます。

しかし、よく分からないままに必須の「タイトル」だけ入れて使っているという方も多いのではないでしょうか？ 私自身いままで曖昧にしていたのですが、今回あらためて学び直しました。

というわけで今回は、この4つの項目それぞれの違いについて解説します。

タイトル

画像を入れる際に必須となっているのが「タイトル」です。
このタイトルは「img要素（imgタグ）内のtitle属性」に入る文字列となります。

このtitle属性に入力された文字列は、マウスに画像を合わせた際にツールチップとして表示される文字列でもあります。
title属性には「画像についての補助説明をする」という役割があります。（後述しますが、alt属性の持つ代替テキストとは役割が違います）

そのため、たとえばチュートリアル記事の途中に挿入されたキャプチャであれば、「この画像の赤枠内をクリックします」のように、補助的な説明を入れるのに利用できます。もちろん日本語で入力してもらってOKです。

※なおWordPressでの画像挿入時は、タイトルは自動的にファイル名が入力されます。そのため書き換えたい場合は、自分で手動で書き換える必要があります。

代替テキスト

代替テキストは「img要素（imgタグ）内のalt属性」に入る文字列となります。
前述のtitle要素が画像の補助説明だったのに対し、alt要素は「画像の代替テキスト」という役割があります。

なんらかの状況で画像が表示できない場合や、そもそも画像が見れないテキストブラウザなどに対して、画像のかわりに表示するテキストです。
またSEO対策でも、ロボットは画像が読めないのでなるべくalt要素に文字列を指定しておくことが推奨されることが多いです。

alt要素はあまり長々とした文字列にはせず、簡潔に画像の内容を示すことがおすすめです。たとえばロゴ画像などであれば、そのままロゴの内容を文字列にする、などです。

※なお、テキストとして表現しにくい画像の場合にalt要素をどうするかについては、いろいろと意見がわかれるところですので、ここでは割愛させていただきます。

キャプション

「キャプション」はWordPress独自の設定項目です。
キャプションは英語のCaption本来の意味どおり「写真・画像の説明文」という役割を持っています。

キャプションに文字列を設定すると、投稿画面では、以下のようにaタグ・imgタグを囲む形で、WordPressのショートコードであるcaptionタグが追加されます。

［caption id="attachment_1599" align="alignnone" width="598" caption="★キャプションに設定した文字列★"］
<a href="http://serverkurabe.com/wordpress/wp-content/uploads/2011/06/eyecatch.png">
<img src="http://serverkurabe.com/wordpress/wp-content/uploads/2011/06/eyecatch.png"
alt="[代替テキストで設定した文字列]" title="[タイトルで設定した文字列]" width="598" height="120" class="size-full wp-image-1599" />
</a>［/caption］

しかし実際に投稿を行うと、captionコードはpタグへと変換されて、以下のようなHTMLに変わります。

<img src="http://serverkurabe.com/wordpress/wp-content/uploads/2011/06/eyecatch2.png"
 alt="[代替テキストで設定した文字列]" title="[タイトルで設定した文字列]" class="size-full wp-image-1599" height="120" width="598"></a>
<p class="wp-caption-text">★キャプションに設定した文字列★</p>

このようにcaptionコードは、画像の直後に表示されるpタグでの説明文に変換されます。
なおキャプションには「wp-caption-text」というクラスが自動で設定されるので、CSSなどでデザインを行うこともできます。

説明

ここの「説明」とは、画像に関する覚書・メモと考えてもらって良いです。

「説明」に記入した項目は、HTML上には一切書き出されることはありません。
あくまでも、管理者が自分のために設定する覚書です。

画像も多数アップロードしていくと、後になってなんのために使った画像だったか分からなくなることがあります。そんな場合に、この「説明」を見れば分かる、というわけです。
また、メディアライブラリ（アップロード画像一覧）の検索では、この「説明」も対象となるため、画像に関しての情報を多く書き込んでおくと、後になって探しやすいです。

まとめ

以上が、それぞれの項目の違いになります。
最後にもう一度、簡単にまとめておきます。

• タイトル：img属性のtitle要素。画像の補助説明を書く。ツールチップに表示。
• 代替テキスト：img属性のalt要素。画像が表示されないとき用のテキストを設定。
• キャプション：WordPress独自の項目。画像の直後に画像の説明文を表示。
• 説明：HTMLには書き出されない。管理画面で画像を探すときに使える

このように違いがありますが、個人的にはキャプションは使わないのと、説明もめったに書き入れることはないです。
そのため、タイトルと代替テキストのみ、両者の違いをきちんと理解した上で設定しておけば問題ないと考えています。

zenbackとは

「zenback」は、MovableTypeなどでも有名なシックスアパート社によるアクセスアップツールです。ソーシャルネットワーク系サービスのボタン追加や、自分のサイトの関連記事、他サイトの関連リンク表示などたくさんの機能があり、人気が出てきています。

しかし、なんとなく登録が面倒に感じて手を出していない方も多いのではないでしょうか。
今回このサイトにzenbackを導入しましたので、さくっと分かる導入方法を書いてみました。

1分で読めるzenback導入方法

1. zenbackのサイトへ行き「新規登録＆コードを取得する」をクリックします。
   
2. メールアドレス・パスワードを入力し、規約に同意してから確認画面へ進みます。
   
3. 登録完了のあとに出てくるコードは飛ばして、いったん管理画面に進み、「EDIT」をクリックします。
   
4. 各パーツの表示の有無、表示数、位置を設定します。
5. 設定できたら「保存」をクリックしてから「ホーム」に戻ります。
6. 「code」をクリックして表示されるコードをコピーします。
7. コピーしたコードを、自分のサイトのzenbackを表示したい場所に貼り付けます。
   • たとえばWordPressで記事の下にのせたい場合は、以下のようにthe_content()のあとに貼り付けます。

     	<?php the_content('続きを読む'); ?>
     	<!-- ここにzenbackのコード貼り付け -->

以上でzenback導入は完了です。あとは数時間～数日すると自動的に反映されます。