MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
Webサイトで取り入れたい!効果的な「写真」の使い方

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

公開日:2017年12月15日
最終更新日:2017年12月15日
オンスタ運営
デザイン
Webデザイン
ホーム > 全記事一覧 > お知らせ > Webサイトで取り入れたい!効果的な「写真」の使い方
このエントリーをはてなブックマークに追加
Webサイトで取り入れたい!効果的な「写真」の使い方
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

こんにちはー!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サイトに写真を使うこと、写真の選定が大変重要だということが少しでも伝わっていれば幸いです!

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

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

以上、さとうでした!


【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ

知っておきたい!Photoshopを使ってできることを大公開
Webデザイン
公開日: 2019年06月14日
最終更新日: 2022年01月17日
知っておきたい!Photoshopを使ってできることを大公開
  • # Photoshop
  • # pickup
  • # できること
オンスタ運営
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
Webデザイン
オンライン学習
プログラミング
マークアップ
公開日: 2019年06月20日
最終更新日: 2022年01月17日
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
  • # cocoda!
  • # pickup
  • # Schoo
  • # TECHACADEMY
  • # Udemy
  • # オンライン学習
オンスタ運営
パンフレット・リーフレットの違いと活用方法
デザイン
パンフレット
公開日: 2017年09月06日
最終更新日: 2017年09月06日
パンフレット・リーフレットの違いと活用方法
オンスタ運営
これで安心!Illustrator入稿時のチェックリスト!
デザイン
公開日: 2018年02月08日
最終更新日: 2018年02月08日
これで安心!Illustrator入稿時のチェックリスト!
オンスタ運営
デザイナーが成長するには(デザイナーがキャリアアップするための道のり-其の2)
デザイナー
デザイン
公開日: 2017年01月16日
最終更新日: 2022年01月17日
デザイナーが成長するには(デザイナーがキャリアアップするための道のり-其の2)
オンスタ運営
これは便利!デザイナー向け【chrome拡張機能】7選!
Webデザイン
デザイナー
デザイン
デザイン
公開日: 2017年10月11日
最終更新日: 2022年01月17日
これは便利!デザイナー向け【chrome拡張機能】7選!
オンスタ運営
グリットデザインを使いこなそう!
Webデザイン
デザイン
公開日: 2018年08月10日
最終更新日: 2022年01月17日
グリットデザインを使いこなそう!
オンスタ運営
WordPressの導入費用はいくら?相場を解説
WordPress
デザイン
公開日: 2018年11月23日
最終更新日: 2018年11月23日
WordPressの導入費用はいくら?相場を解説
  • # WordPress
  • # 導入
  • # 費用
オンスタ運営
よく使われるA4パンフレットの折り加工の種類
デザイン
パンフレット
公開日: 2018年08月02日
最終更新日: 2022年01月17日
よく使われるA4パンフレットの折り加工の種類
オンスタ運営
デザイナーが知っておくべきデザイン業界用語集【DTP】
デザイン
公開日: 2017年12月27日
最終更新日: 2017年12月27日
デザイナーが知っておくべきデザイン業界用語集【DTP】
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。