はじめてWEBエキスパート(専門家)コラム 写真撮影入門(全12回)

ウェブサイトの看板「キービジュアル」の正しい撮影方法(第7回)

第7回では、感情が動かされ、実際にお店に行ってみよう、商品を買ってみようという気持ちになるウェブサイトの看板となる、キービジュアルの撮影方法について解説します。

ウェブサイトには、さまざまな写真を掲載します。
利用者は文章を読み、写真を見ることで、必要な情報を得るだけでなく、感情が動かされ、実際にお店に行ってみよう、商品を買ってみようという気持ちになります。
第7回では、ウェブサイトの看板となる、キービジュアルの撮影方法について解説します。

お店の「売り」を看板に

利用者がもつウェブサイトの印象は、「3秒で決まる」とも言われています(デザインカスタマイズ:第1回「デザインの方向性を決めよう」参照)。そのため、ウェブサイトの中で一番目立つところに、看板となる写真を配置するのが一般的です。
みなさんはそこに、どのような写真を掲載すると効果的だと思いますか?

ウェブサイト全体を通して、「伝えたいこと」や「アピールポイント」はたくさんあります。何枚か撮影した写真を、実際にレイアウトし、比較することで、どれが一番メイン写真にふさわしいのかを決めるのが鉄則ですが、これから説明する「事前準備の工夫」によって、作業がだいぶスムーズに進みます。

撮影前の打ち合わせが一番重要
絵コンテを準備して「仕上がり」を確認

絵コンテといっても、簡単な手書きの絵(ラフスケッチ。撮影ラフ、略してサツラフとも言います)で充分です。それを元に「事前打ち合わせ」をします。これでメイン写真制作の70%が終わったと言っても過言ではありません。

絵コンテを使い、打ち合わせをするメリット3点

  • 事前に被写体を引き立たせる為の、撮影小物※ を準備する時間ができ、写真の完成度が上がる
  • スタッフ間で共有することにより、「+α」のアイデアが生まれる
  • 撮影当日に悩むことが減るので、忘れ物や見落としがなく、スムーズに短時間で作業が終わる

単に写真を撮るだけならとても簡単です。しかし、キービジュアル用の撮影は少し工夫が必要です。
店名やロゴマーク、キャッチコピー、切り抜き画像の貼りこみなど、複数の要素が組み合わさることで、1枚の写真(画)になります。

チェック項目は以下の通りです。

  • 店名やロゴマークが入るスペース
  • キャッチコピーが入るスペース
  • 切り抜いた写真が入るスペース

これらを事前に考え、適正な「間」を空けて撮影するようにしましょう。
撮影した写真だけを見たら、「間抜け」に見えるかもしれませんが、ジグソーパズルのように必要なピースを配置することでメイン写真は完成します。

この考え方は、ウェブサイトに限らず、ポスター、チラシ、DM、ポストカードなど、全てのものに共通です。是非参考にしてください。

※撮影小物とは

  • 飲食・・・食べ物の下に敷く布、季節感を出す草花、盛り付ける皿やかご、ザル、お盆など
  • アパレルや人物・・・商品を引き立たせるモデルの手配、ヘアメイク、メインの被写体に関連した周辺道具など
  • 施設・・・生花や家具など(特に室内撮影の場合、整理整頓し、いらないものを省くことも必要です)

では、実際に見てみましょう。

撮影場所:高松市中心街のカフェ
営業時間:11:00~17:00 と 20:00~26:00
利用者層:学生、20~40代の社会人

撮影意図(店の特徴)は次の通りです。

  • ゆったりとした、広い店内(1人当たりのスペースも広い)
  • こだわりの椅子やテーブル(特に無垢板のカウンター)
  • 大人数でも、1人でも居心地がいいように考えられたテーブルレイアウト
  • 深夜2時まで営業
  • 21、22時頃から夜カフェとしての利用者が多い(美味しいケーキと飲み物が楽しめる)
  • 女性店員がつくる「温かい店の雰囲気」
  • 結婚式の二次会など、パーティーでも使用できる収容力をアピール
撮影ラフ1:コーヒーとケーキ、奥行きを出す、ピントを手前のカップに合わせる
完成1:女性スタッフの手をいれ、人の気配を感じる写真に仕上げる

絵コンテには暖色系と白色しかなかったので、木の小物を入れ写真の中に緑色を加えました。

撮影ラフ2:コーヒーとケーキ、真俯瞰(真上)から撮影
完成2:店の雰囲気としては、上が正解ですが別の背景でも撮影

例えば、クリスマスシーズンに、下のような赤い写真に変えてみるのも、イメージアップにつながります。
真俯瞰からの撮影は、皿やグラスなどの丸い形状もあり、かわいい写真に仕上がります。

撮影ラフ3:広い店内、奥行きを出す、ピントはコーヒーカップに合わせ背景はしっかりぼかす
第6回「今までに使ったことのない撮影モードにチャレンジ」参照)
完成3:カップの手前に本を置くことにより、ゆっくりと流れる時間を演出
撮影ラフ4:1人掛のカウンタースペース
完成4:女性が気軽に入れるように、可愛い小物と清潔感のある白い壁を撮影
撮影ラフ無し:男性向けにすわり心地のいい椅子やソファーを撮影

利用者が足を止めたくなるキービジュアルは

今回の例で出したカフェの写真は、「食べ物」と「空間」を中心に数パターン撮影しましたが、どの写真がキービジュアル向きかはわかりません。
そんなときは、「アクセス解析」をふまえた考え方が効果的です。

例えば宿泊施設で説明します。

決まった期間ごとに、「料理」→「部屋」→「周辺の美しい風景」→「建物の外観」→「料理人の真剣な調理姿」と写真をかえてみます。

写真を変える前と後で、利用者の滞在時間が長くなったり、利用者の動きに変化がないか注目すると、コンバージョンの達成につながるキービジュアルがなにか判断できます。
この方法をA/Bテストと言います。
データが得られれば、キービジュアル選定に悩むことはなくなります。
仮に料理写真に絞れた場合は、少し季節を先取りするなど工夫をして撮影し、掲載しましょう。
メイン写真に使われなかった写真は、スライドショーにして本文に掲載し、大切な説明写真として活用しましょう。

建物の外観は撮影時刻が大切

屋外での外観撮影で注意することは、太陽光線のあたり方です。

このカフェの撮影状況と対策は次の通りです。

  • 玄関は北向きのため、日中は常に逆光

    北向きなので太陽光のあたり方を気にせず、明るさや雰囲気で判断しました。
    東向きなら午前、南向きなら正午前後、西向きなら午後に撮影すると逆行にならないので良いでしょう。やむを得ず逆光になる場合は「露出補正」を活用しましょう(第4回:「被写体が生きる明るさのコントロール」参照)。

  • 夜の営業時間がメインのお店

    室内の照明がきれいに写りはじめる、夕方ごろに撮影しました。

  • 繁華街にある店舗

    店の雰囲気とは違うビルが隣接しています。なるべく入らないように撮影しました。

完成6(撮影ラフ無し):系列店が2階にもあり、縦位置も撮影

まとめ

撮影に重要な考え方は以下の3点です。

  • 何を撮るのかを考え、絵コンテを準備、スタッフ全員で撮影前に「完成イメージ」を共有する
  • キャッチコピーや店名、ロゴマークが無理なく入るように「スペース」を考え撮影する
  • 「アクセス解析」を利用しどのような写真がキービジュアルになれば利用者が足を止め、長く滞在してもらえるかを知る

今回は撮影前の準備、撮影中の注意点、掲載してから後の考え方について解説しました。
写真はみなさんが心を込めて作った製品やサービスを、一瞬にして利用者に伝える大切なツールです。
慣れるまでは、この一連の流れを参考に撮影する事をおすすめします。

第8回では、お店のスタッフを撮影し、ウェブサイトに掲載する際のポイント、利用者に与える印象や注意点など「人物撮影」について解説します。

このコーナーのコンテンツは、KDDI提供の情報サイト「はじめてWEB」掲載の「エキスパート(専門家)コラム」の情報を、許諾を得てWeb担の読者向けにお届けしているものです。

「はじめてWEB」掲載のオリジナル版はこちら:
写真撮影入門(全12回)「第7回:メイン写真が変わると、集客が変わる」(2012/10/31)

この記事が役に立ったらシェア!
tweet21はてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

人気記事トップ10(過去7日間)

今日の用語

フラッシュマーケティング
同義語のグルーポンを参照。 「24時間」のように期限を決めたり予定数を設定 ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper株式会社ブレインパッド
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore