このページの本文へ

写真、重要ですよね…?

"佐野問題"でWeb制作の画像は「選ぶ」から「撮る」へ

2015年10月07日 13時00分更新

伊藤和久/Web Professional編集部

  • この記事をはてなブックマークに追加
本文印刷

Webデザインで重要なのが「写真」。インパクトがあってきれいな写真がどーんと使われていると、その先に書いてあることが読みたくなったり、サービスや商品を試してみたくなったりしますよね。たとえば、こちらのページ。

01.png
神戸市に本店がある銀行のカードローンサイト(http://www.minatobk.co.jp/personal/rent/unsecured/qport/lp1/)

ちょっとお金を借りようかと調べていたらたまたま見つけたページですが、笑顔のさわやかな女性が「安心で選ぶなら銀行系カードローン」と訴えています。「こんなすてきな女性がすすめてくれるなら、ここで借りちゃおうかな。安心できそうだし」。

でもちょっと待って。あれ、でもこの子、前にも別のどこかで見たことがあるような……。いまどきは銀行でも画像の使い回しをしているのかと、気になった私は、Google画像検索でさっそく調べてみました。

同じ女性が脱毛やクルマ女子にも!

「銀行系カードローン」の女性(長いので「人差し指さん」と呼びます)を検索してみると、やっぱりありました。格安脱毛店の紹介ページです。

02.png
心斎橋にある脱毛店の紹介ページ(http://ミュゼプラチナム心斎橋.net/)

これはやっぱり画像の使い回し……?

続けて調べてみると、まだありました。クルマ女子向け情報サイトです。なんと、人差し指さんが「かわいい車を探す」と微笑んでくれているところに、「銀行系カードローン」の広告でもにっこりの2ショットstrong>、と思ったら、左下にも登場していますから3ショットでした! 最初にローンのサイトを見てからこのサイトを開いたので、リターゲティングバナーが表示されてしまったようです。これは笑えません。

03.png
クルマ女子向け情報サイト(http://www.lepetitfarwest.com/)

笑顔のさわやかな人差し指さんが「銀行系だから安心」と訴えていたから信用したのに、脱毛やクルマまでおすすめされていると、さすがにちょっと不安になってきますね……。

この後、人差し指さんは次々と見つかりました。これは絶対使い回しに違いありません

04.png
文京区の労務行政書士事務所(http://634-kyoninka.com/service/kobutu/kobutukyoka.html)
05.png
表参道のカルチャースクール(http://omotesando-school.jimdo.com/%E3%82%B9%E3%82%AF%E3%83%BC%E3%83%AB-%E3%82%BB%E3%83%9F%E3%83%8A%E3%83%BC-%E6%95%99%E5%AE%A4-%E7%89%B9%E5%BE%B4/)
06.png
東京都区内にあるハウスクリーニング会社のサイト(http://www.clean-life-up.com/)
07.png
埼玉県の自費出版サイト(http://www.imprve.com/)
08.png
東京都区内の電話番号サービス会社サイト(http://www.quadstaterealty.com/tusin/itendenwa/)
09.png
東京都区内の化粧品販売、企画会社が運営しているサイト(http://hanastar.biz/kathy.html)
10.png
茨城県のスキンケア通販会社が運営しているサイト(http://ムダ毛処理後のブツブツ.biz/)
11.png
運営会社の住所が分からないFX情報サイト(http://hanamaru-fx.com/feature/demo-trade/)

「使える写真」は自分で撮ろう

使い回しだと思った人差し指さん。種明かしをすると、実は人物専門の無料素材サイトの写真です(現在は入手できません)。

さすがにプロのモデルさんをプロカメラマンが撮った写真だけに、さわやかで清潔感があり、魅力的な写真です。ポーズが決まっているのでWebデザインに使いやすく、素材サイトのライセンスに従って利用していれば法的にも問題ありません。

ところが、ここまでいろいろなサイトで見かけるようになると、お客さまは胡散臭さを感じるようになります。一方では「安心感」を訴えていたのに、別のサイトでは全然違うメッセージを発していたのでは、せっかくのメッセージも台無しです。もし、品のないサイトや違法なサイトで同じ写真が使われていれば、企業に対する信頼感を損なう可能性だってあります。

そもそも、素材集や素材サイトの写真は、いつか、どこかで使われる可能性があるものです。せっかくWebサイトを制作するのですから、本来はそのサイトのための写真を撮るべきでしょう。

11.png
撮り下ろした写真で構成されたWebサイト。そのサイトに合った写真を撮り下ろすことで、自然で誠実な印象を与えることができる

え、そんな予算はない? 大丈夫です。10月2日に発売された書籍『Web制作のための撮影から管理、レタッチまで デザイナー&ディレクターが写真を上手に撮る本』(岡田陽一著、KADOKAWA刊)では、非カメラマンの方を対象に、Webサイトの種別ごとに「使える写真」の撮り方を解説。カメラや照明機材の選び方、ロケ撮影のための段取りと心構え、撮影後の写真管理、効率のいい補正テクニックなど、予算や時間がなくても実践できるノウハウを、フォトグラファーであり、Webディレクターでもある岡田陽一さんが紹介しています。

サイトの目的やイメージに合った写真の撮影は、コツさえつかめば難しいものではありません。自分で撮影した写真で、Webサイトのクオリティアップをしてみませんか。

Web制作のための撮影から管理、レタッチまで
デザイナー&ディレクターが
写真を上手に撮る本

06.png

岡田陽一 著

  • 価格:価格:2,808円(本体2,600円)
  • 発売日:2015年10月2日
  • 形態:B5変型(176ページ)
  • ISBN:978-4-04-866452-3
  • 発売:KADOKAWA

目次

第1章[基礎編]写真撮影の前に知っておきたいこと
1 Web制作に写真撮影が必要な理由
2 撮影前にするべき準備と段取り
3 カメラ、レンズ、撮影用品を揃える
4 シャッターを切る前の設定と心構え
   コラム 「写真」とは何か
   コラム なぜコンデジやミラーレスじゃいけないの?
   コラム ISO感度
   コラム 遅いシャッタースピードのときは三脚が必須
   コラム APS-Cカメラとレンズ
   コラム なぜ18%のグレーが中間なの?
第2章[実践編]業種別サンプルで学ぶ素材写真の撮り方
Case A サービス業サイト
来店を促すネイルサロンサイト
  A-1 丁寧な仕事ぶりをアップで撮る
  A-2 安全、安心を感じさせるショップページ
  A-3 女性の肌を手間なくきれいに見せる
   コラム 影は薄く、背景はシンプルに
   コラム お店の雰囲気を伝える写真も撮っておこう
Case B 企業サイト
「問い合わせ」を増やしたい企業サイト
  B-1 ボケをコントロールしてメインの背景を撮る
  B-2 好感の持てる人がいる会社案内ページ
  B-3 大勢のスタッフを撮影する段取り
Case C 店舗サイト
こだわりをアピールしたい自転車ショップサイト
  C-1 センスあふれる雰囲気をありのままに撮る
  C-2 お店に行きたくなるカスタマイズ紹介ページ
Case D 製造業サイト
現場写真で商品の魅力を伝える食品加工会社サイト
  D-1 会社と製品を連想できる漁港風景を撮る
  D-2 ドキュメンタリー調の仕入れページ
Case E 飲食店サイト
店主の人柄と雰囲気でお客を呼ぶ居酒屋サイト
  E-1 店主の人柄、店の雰囲気を伝えるトップページ写真
  E-2 手際よさやスピード感を詰め込んだ料理紹介ページ
  E-3 料理をおいしそうに見せる補正テクニック
   コラム 「シズル感」って何?
   コラム Lightroomなら補正処理がコピペできる
Case F ECサイト
健康志向で販売を増やしたいジャムの通販サイト
  F-1 映り込みのあるガラスビンを撮る
  F-2 「おいしそうな朝食にはジャム」の演出
  F-3 商品撮影を成功させるコツ
   コラム 便利な小物をストックしておこう
   コラム 商品撮影(ブツ撮り)は標準レンズで
第3章[応用編]撮影がもっとはかどるグッズとノウハウ
1 商品撮影に便利な小物を揃える
2 写真データをLightroomで効率よく整理する
3 レイアウトに合わせるテザー撮影
4 Lightroomをもっと便利に使うTips
5 難しい撮影や失敗写真を合成で乗り切る

Web Professionalトップへ

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング