ホームkeyboard_double_arrow_rightナレッジブログkeyboard_double_arrow_rightWebサイトで取り入れたい!効果的な「写真」の使い方

Webサイトで取り入れたい!効果的な「写真」の使い方

さとお
  • デザイン
  • Webデザイン
公開: 2017.12.15 更新: 2022.01.17

こんにちはー!Grow Groupデザイナーのさとおです!

ブログを書き始めてから早1年が過ぎました!

早い…早すぎる…1日1日を大切にこれからも丁寧な仕事を心がけていきたいと思う所存でございます。

ということで今回はWebサイトで取り入れたい!効果的な「写真」の使い方についてお話ししたいと思います!

はじめに

 

先ほど1年過ぎるのが早過ぎる…というお話しをしましたが、なんと、人間の集中力も年々短くなっており、現在人間が注意力を持続できる時間は8秒しかないのだそうです!

ちなみに金魚は9秒らしいです…。

特にオンライン上での集中力はますます弱くなっており、Webサイトの読み込み時間に1秒の遅れが生じるだけで40%の人がそのWebサイトを離れ、

結果的にはコンバージョン(目的達成率)が7%低下することがわかっているそうです。

このような現状がある中、Webサイトを作って目的を達成させるために大事になってくる視覚効果の一つとして、適切な写真選定があると思います!(前置きが長くなりましたが…汗)

Webサイトにおける写真の重要性

結論から申し上げますと、Webサイトにおいて写真などの視覚的要素は必要不可欠です!!

一つのウェブページに留まる平均時間は10秒程度と言われていますが、その間に注目して欲しいコンテンツにきちんと誘導できるかのカギを握ると言ってもいいほど、かなり影響力のあるものに値します。

例えば、Googleの検索エンジンから調べ物をしようとした時、その目的がテキスト情報だったとしても、結果として画像が出てきた時にはTOPの項目ではなくその画像情報に目がいきますよね。

 

 

それだけ感覚的に視線を誘導される要素であり、無意識の中で「最初に」目がいくという点がキモになります。

画像を戦略的に使っていくということ

とは言っても、ただただ写真を多用すればいいという訳ではありません。

例えば上の広告バナーは、女性がこちらをまっすぐに見ていることでユーザーの視線を集めます。

右側のアイトラッキングを見てみると、①女性の顔、②文字情報に視線が集中しており、製品に対してはあまり視線を獲得できていないということがわかります。

対して上の図では、女性の目線が製品に向いています。それによってユーザーは、女性から製品へ、自然と視線誘導されるという仕組みが出来上がっています。

右側のアイトラッキングを見ても一目瞭然、①女性の目線、②文字情報、③製品、④ロゴマーク、全ての要素に視線を獲得できていることがわかります。

この例では、女性の目線一つで、商品認知に14倍もの差が生まれるという結果が出ています。

この結果から分かるように、目線に違い一つで伝えたい感じて欲しいメッセージの方向性がずれ、コンバージョン率の低下につながる恐れも出てきてしまいます。

ただ写真を使うというだけでは目的達成には繋がりにくい場合があるという、シンプルながらに大変重要な役割を担っているということがわかりますね!

ですので、作り手側からしても画像選定は思ったほど単純ではなく、 使用する画像が文章とリンクし、注目して欲しいコンテンツにきちんと誘導できているかどうか、 画像選定の段階でしっかりチェックする必要が大いにあります。

中心視野と周辺視野

ここまでは、Webサイトで写真を使うことに対しての特徴と効果についてでした。

次は具体的にどのような仕組みで、人は写真イメージを認識しているのかについてお話ししていきます。

人は物を見る際、それ「だけ」を見るということはありえません。

焦点を当てた物を中心に見ております。

それを中心視野と言い、逆にその周りにある焦点は合っていないけどぼんやりと見えている背景のことを周辺視野と言います。

中心視野で見えるものは親指の爪2つ分ほどしかなく、そのまわりの周辺視野の方がはるかに広く大きいといわれています。

そして脳は中心視野と周辺視野からくる情報を同時に処理しています。

周辺視野はなぜボケているかというと、より広い範囲の視覚情報を素早く処理するために低解像度の画像を脳に送っているからということになります。

少し堅い話にはなりましたが、つまり何が言いたいかというと、

中心視野で見るべきものは周辺視野で決めており、対象物以外の背景となる部分も、イメージをユーザーに伝える上で重要となってくるということです。

 

 

例えば上のWebサイトは、どんな様子がうかがえますでしょうか?

笑顔の女性がパンフレットを広げています。

接客でしょうか…?相手は男性でしょうか…?外でしょうか…?

これでは少し現場のイメージが付きづらいかもしれません。テキスト情報が、情報を補充する要素になっています。

 

 

対して、上の写真ではどうでしょう?

女性従業員が、20代後半〜30代くらいの私服の女性に対して、おそらくカウンターなどを挟んで何か説明をしているという様子が瞬時に予測できるのではないでしょうか。

ほんの少しの違いのように感じるかもしれませんが、周辺視野にターゲット情報を加えることで写真の伝えたいイメージが明確になり、テキスト情報への視線移動がスムーズに行えるようになります。

このように、画像を戦略的に使っていくにあたって周辺視野にも配慮することが必要となります。

フリー素材ではなく、撮影することをお勧めします!

 

やはり、目的を達成するためにはそのWebサイト「オリジナル」であることは大きな強みとなります!

フリー素材は、ネット上で制限なく誰でもダウンロードできる写真素材ですので、他と被ってくる場合が大いに考えられますし、クオリティとしてもきちんと撮影したものに比べるとどうしても劣ります。

また、構図が限られているなど自由が効かないことも多いです。

 

オリジナル写真のメリット

  • 目的に合わせて、そのサイト唯一のブランディングとして個性を出すことができる
  • プロの撮影によるクオリティの高い写真を獲得できる
  • Webサイトの構成やデザインのレイアウトに合わせて、細かい指示のもと思い通りの写真を獲得できる

オリジナル写真のデメリットとしては、費用がかかってきてしまうことですかね。

ちなみに弊社でもWebサイトに合わせて写真撮影・動画撮影等ご対応可能です!

お気軽にご相談くださいませ。

 

お問い合わせ

さいごに

いかがでしたでしょうか。

Webサイトに写真を使うこと、写真の選定が大変重要だということが少しでも伝わっていれば幸いです!

今年もブログを読んでいただき、誠にありがとうございました!!

来年も目標に向かって頑張るぞー!

以上、さとうでした!

制作の流れについて
  • 制作の流れ
  • 制作フェーズ
  • 運⽤フェーズ
  • お問い合わせ
  • 会社概要
GrowGroupの会社概要をはじめ、
成功事例などをご紹介しています。
  • 会社概要
  • 制作実績
  • 事業コンセプト
  • 会社概要
見積もりを依頼する見積もりを依頼する
顧客の課題解決を行い、成果を上げたGrowGroupの成功事例
GrowGroupは、ただただ制作するだけではありません。ご依頼の背景、⽬的からWebサイトの⽅向性を⾒極め「⽬的の達成」を第⼀に制作しています。

著者情報
デザイナー
さとお

甘いものより炭水化物派のデザイナーさとおです!
よろしくお願いします。


弊社エンジニアが執筆したWordPress標準デザイン講座が出版されています弊社エンジニアが執筆したWordPress標準デザイン講座が出版されています
メルマガ登録に登録するメルマガ登録に登録する