ブログ記事の冒頭や合間に入れるアイキャッチ画像、
適当に選んだり加工なしでそのまま挿入したりしていませんか？
もしそうなら次の２つの意味で画像は最適化した方がいいです。
- アイキャッチ本来の役目を持たせる
- 表示速度に影響を与えさせない
ここではこの２つの観点から記事内のアイキャッチ画像最適化のコツをいくつかまとめました。読みやすいブログを作るなら最適化は必ずしておきましょう。
では早速そのコツを紹介していきます。
目次
１．インパクトのある画像を選ぼう！
まず１つめは インパクトのある画像を選ぶ 、ということ
文字通りアイキャッチというのは「人の注意をひきつけるもの」という役割があるので、印象に残りやすい画像を選んだ方が間違いなくいいです。
またアイキャッチはブログ内だけはなく、次のような場所でも使われます。
- SNSでシェアされたときのサムネ
- 画像検索したときのサムネ
- Chromeのオススメ記事のサムネ
特にTwitterなどはタイムラインの流れが速いので地味だとスルーされやすいです。なので目立つ画像を選んだ方がクリックされやすいですね。
特にインパクトが出るのは人や動物メインの画像
人とか動物だと面白い構図の画像があるので、人の目を引ける画像が見つかりやすいです。
例えばインパクト抜群な画像の例をいくつか挙げるとすると・・・
次みたいな「コンビニチキンの美味しさに感動する男性」の画像だったり、
あるいはホラー風な「呪いをかけてくる貞子風の女性」の画像だったり、
はたまた動物なら「よく分からない変顔をしてる猫」の画像だったり・・・笑
こういう面白い構図の画像だとブログ記事を開いたときに「この記事面白そう！」となって読んでみたくなりますよね。
アイキャッチを選ぶときは奇抜でなくても目を引くような画像を選んだ方が記事内容にも興味を持ってもらえます。
ちなみにこういう人・動物系のアイキャッチを探すなら次の素材サイトがオススメです。
特に面白くてユニークな画像が見つかりやすいのは 写真AC と パクタソ の２つ。どちらもインパクトのある素材が多いのでアイキャッチ探しに重宝します。
もちろん必ずしもインパクトの強い画像を選ぶ必要があるとは限りません。
でも、読みやすいブログを作るには目立つアイキャッチを選ぶのが最善です。
２．画像のサイズ・大きさを最適化する
最適化２番目のコツは 画像の容量・サイズを最適化する 、ということ
特に画像はデータサイズが大きくなりがちでブログの表示速度にも悪影響を与えやすいです。なのでアップロード前に必ず最適化しておきましょう。
具体的には画像最適化は次の順番で行うのがベストです。
ステップ１．圧縮しやすい画像素材を選ぶ
最適化の第１ステップはデータを小さくしやすい画像を選ぶこと
選ぶときのポイントは 圧縮したとき圧縮率が高くなりやすいかどうか です。
例えば圧縮率が高くなりやすい画像の特徴は次の通り
- 背景だけがぼやけている
- 使用している色数が少ない
- グラデーションしていない
なるべくこういった条件に当てはまる画像を選ぶのがベスト。特に背景がぼやけている画像は圧縮率がかなりいいです。
ステップ２．記事幅に合わせてリサイズする
最適化手順２つめは記事幅に合わせて画像をリサイズすること
もし記事幅以上の画像をそのまま挿入してしまうと次の点でよろしくありません。
- データサイズが無駄に大きくなる
- 画像が勝手に縮小されてしまう
- 画像がぼやけてしまう場合もあり
なので事前にPCでの記事幅の最大を調べ、それにフィットするように画像をリサイズしておくとグッドです。
ちなみに次のツールを使うとブラウザ上から直接リサイズできて便利です。
もし「いちいち編集ソフトを起動してアレコレしたくない」という方はこういうWebツールを使うと手間がかかりません。
またWordPressの場合は画像を自動リサイズできるプラグインもあります。
それが次記事で紹介した Resize Image After Upload というプラグイン
記事の最大幅を設定すればアップロード時に最大幅でリサイズしてくれます。設定も簡単なのでムダな手間を減らしたい方にオススメです。
ステップ３．画像のデータサイズを圧縮する
最後の重要なステップが画像データの圧縮
これをするかしないかで読み込み速度やサーバーの転送量もかなり変わってくるので重要な作業です。ちなみにですが表示速度は検索順位にも少しだけ影響します。
この画像圧縮に便利なツールはやっぱり TinyPNG ですね。
圧縮率は他のツールと比べても抜群で、ブラウザから即圧縮できるのも便利です。まだ使ったことがないという方は是非お試しを
ちなみにWordPressの場合はプラグインからTinyPNGを使うこともできます。
その名も Compress JPEG & PNG というプラグインで使い方は次記事の通り
圧縮率も TinyPNG と全く変わらず、アップロード時の自動圧縮機能もついている優れものです。興味のある方は是非導入してみてください。
３．画像にalt属性を追加するのも忘れずに！
アイキャッチ最適化の最後のコツは 画像にalt属性を設定する 、ということ
これは意外と忘れがちで、私自身もよく設定し忘れることがあります・・・でもalt属性は画像の内容を伝えるのに超重要です。
そもそもalt属性とは「画像についての説明」を追加するためのもの
使い方はimgタグの中で alt="画像についての説明" のような記述を追加するだけです。例えば次がその使用例
<img src="neko.jpeg" alt="変顔をしている猫" >
上のタグ例だったら "変顔をしている猫" が画像の説明になる訳です。
そしてこのalt属性、検索エンジンに画像情報を伝えるという重要な役目があります。
なぜなら画像そのものを検索エンジンは理解できないからです。認識できても「なんか画像があるな・・・」程度にしか思われません。
でもalt属性を使って文章で説明すれば「ああ、この画像はそういう意味なのか！」と検索エンジンにもしっかり伝えることができますよね。
そういう意味でalt属性を正しく使うのが大事ということです。
そして、このalt属性にはなるべく詳細な説明を書くようにしましょう。
例えば「不眠を治す方法」という内容の記事に「気持ちよく寝ている猫」の画像をアイキャッチとして使ったとします。
その場合、詳細ではない悪いalt属性の書き方は次のようなもの
<img src="neko.jpeg" alt="猫 寝ている 熟睡" >
こういうキーワードの羅列はNGです。
逆に詳細を説明した良いalt属性の書き方は次のようなもの
<img src="neko.jpeg" alt="不眠を解消して快眠している人をイメージした気持ちよさそうに寝ている猫の画像" >
若干やりすぎな感じはあるものの、画像と記事の関係性を説明するならこれくらい詳しく書いた方が間違いありません。
検索エンジンは文章しか理解できないのでalt属性は忘れず設定しておきたいですね。
アイキャッチ最適化以外にしておきたいこと
ここまでがアイキャッチ画像最適化のコツ
インパクトのある画像を選べば退屈しない記事になるし、圧縮してサイズを小さくすれば表示速度の邪魔にもなりません。
アイキャッチは読みやすい記事を書くために超重要です。
そしてそして・・・
さらに読みやすい記事を書くにはアイキャッチ以外にも工夫が必要になります。
例えば私自身がしておいる工夫をいくつか挙げるなら・・・
- 行間設定を適切なものに調整する
- 文章を下線・色文字で装飾する
- 語尾の形式は必ず統一する
- 語尾のバリエーションを増やす
- 定期的に記事のリライトをする
・・・などなど
レイアウト以外にも文章の書き方も工夫すれば読みやすくなりますね。
詳しくは次の読みやすい記事の書き方レイアウト編＆書き方編をご覧あれ
もし文章自体に問題がないのに「なんか読みにくい・・」と感じるなら、上２つの記事のテクニックを試してみてください。
今までの記事を数倍、数十倍は読みやすくできます。
まとめ
ここまでで紹介したアイキャッチ最適化のコツをまとめると次の通り
- 目を引くようなインパクトある画像を選ぶ
- 画像の最適化（データ圧縮、リサイズ）
- alt属性で画像についての説明を追加する
目立つアイキャッチを使えば途中で離脱されることも少なくなり、記事を最後まで読んでもらいやすくなります（特に文章オンリーで長文の場合）
以上、ブログ記事内でのアイキャッチ画像最適化のコツについてでした。
フク郎
最新記事 by フク郎 (全て見る)
- トレンドブログが資産に？放置でアクセス急増の事例 - 3月 14, 2024