画像を取り入れて、お客様を魅了するサイトを作ろう!

こんにちは。
内定者の村越です。

みなさん、「3秒ルール」はご存知でしょうか。
食べ物を落としたときに3秒以内ならすぐ口に入れられるというアレではありませんよ!

サイトを作成する際に言う「3秒ルール」とは、『サイト閲覧者のほとんどは、ページを開いて3秒以内に、自分に必要な情報かを判断する』というものです。もしこの3秒間で自分に必要な情報が載っていそうと判断されれば、読み進めてもらえます。しかしたったの3秒ですが、興味を持ってもらえなかった場合は“離脱”。つまり読み進めてもらえず、このサイトから離れていってしまいます。

それでは、この3秒間でより訪問者様を惹きつけるためにはどのような工夫が必要でしょうか。今回はその内の一つをご紹介します。

画像は必要?不要?

みなさんはどちらに魅力を感じますか?

1.文だけがズラーと並んでいるサイト
2.文に合った画像が取り入れられているサイト

2番を選んだ方がほとんどではないでしょうか。なぜなら、人は文章だけを追い続けていると疲れてしまいやすいのです。この現象は普段から紙媒体よりもWEBサイトを利用する方には特に表れます。しかしもし文章の間に関連する画像が入っていれば、文が表すイメージが掴みやすくなります。サイト訪問者の集中力を切らさないように画像を取り入れてみましょう。

画像は流し読みのストッパー

Webサイトは紙媒体と比較して、飛ばし読み・拾い読みされる確率が非常に高いメディアです。特にスマートフォンやタブレットからの訪問者様は、スクロールが容易にできるため、流し読みをしやすい傾向にあります。

そこで、文章の内容を簡単に分かりやすく表現した画像を置くことで、スクロールをしている場合もサイト全体の流れを把握しやすいのです。
さらに、画像は目にダイレクトに飛びこんでくるので、ページをスクロールする手を止めるフックの役割も果たしてくれます。一度スクロールする手を止めてもらえれば、画像の周囲の内容も読んでもらいやすくなるのです。

WEBサイト×画像のポイント

・段落は短くする。6行以上にはしない
 文章が長すぎると読み手が疲れてしまいます。

・6~10段落ごとに画像やイメージを入れると効果的
 画像の枚数が多すぎて容量が増えてしまうと、表示速度が落ち、サイト訪問者がストレスを感じて離脱してしまう可能性もあります。画像の入れすぎには注意が必要です。

・記事のはじめに画像を入れる
 読み手が最初に目にする場所であり、記事を記憶する際のイメージが作られる位置だから。

・「文章を読みやすくするために画像を入れる」という目的は、最後まで忘れない
一目で伝えたい事(何のお店なのか、どのような製品なのか等)が伝わる画像を選びましょう。

・画像は、あくまで文章が主体となるサイズに抑える

番外編 動画でもっと分かりやすく

近年、背景に動画が流れているサイトをよく目にするようになりましたよね。静止画だけでは伝えられない効果とはどのようなものがあるのでしょうか。

・製品の利用イメージを伝える
◆URL:https://questant.jp/
実際に製品を利用している動画を流すことで、文章だけでは分かりにくかった使い勝手が購入前にチェックできるのです。

・店舗の雰囲気を伝える

◆URL:http://www.brindisatapaskitchens.com/
内装やスタッフの雰囲気など、店舗サイトがある場合は取り入れてみてはいかがでしょうか。お食事や製品も気にはなりますが、お客様は店内の様子や実際のスタッフの雰囲気というのも気にされる方が多いそうです。お客様の“気になる”は動画にすることで画像よりも伝わりやすくなります。

容量が重いと、サイトの読み込みが遅くなる

ここで一つ注意があります!

ここまでじっくり読んでくださったあなたは、サイトを読みやすくするために、画像を多く取り入れようと考えてくださったのではないでしょうか。だからこそ一点注意をしていただきたいのです。
画像を取り入れすぎると、サイトの容量が重くなってしまうのです。容量が増えて重くなるということは、お客様がサイトにアクセスをした際、サイトの読み込み速度が遅くなったり、読み込まれない画像が出てきてしまう場合があります。

枚数はサイト内の構造などによっても異なるため、一概には言えません。ですので、実際にパソコンとスマートフォンで検証をしていただくことをオススメします。

まとめ

「文章と画像のバランス」。サイト作成に夢中になると、なかなか難しいですよね。こまめにプレビューをして、読みやすい構成になっているかを確認できるとよいでしょう。また同僚などにも一度見てもらえると、より良いサイトが出来上がりそうですね。

 

▼参考資料▼
Webサイトの画像の重要性とは? 画像の使い方が印象や離脱率を左右する!
ブログ記事をもっと読んでもらうための、画像の効果的な使い方
背景動画を利用したWEBサイトが効果的な理由と厳選事例11選

参考になったらシェアをお願いします!