このページの本文へ

DESIGN Web制作に役立つ写真撮影のちょっとしたコツ ― 第1回

一眼初心者が知っておきたいホワイトバランス設定とグレーカード

2015年10月09日 11時00分更新

Web Professional編集部

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

Web制作の現場で「ちょっと足りない写真撮ってきて」と頼まれた新米デザイナー。3年前に3万円で買ったデジタル一眼レフは持っているものの、いまいち使いこなせていません。写真撮影本は買ったものの、花や山の写真が撮りたいわけではないしなぁ……。そんなあなたのために、『デザイナー&ディレクターが写真を上手に撮る本』を参考に、Web制作で役立つ撮影のちょっとしたコツを紹介します。

ホワイトバランスの設定で色を合わせよう

デジタルカメラで写真を撮るときには、画像が見た目に近い色で撮影できるようにホワイトバランスを設定する必要があります。

いままでホワイトバランス設定なんてしたこともないけど、ちゃんと撮れていたのに、と戸惑う方も多いでしょう。カメラのホワイトバランスは、多くの場合出荷時に「オート」に設定されていて、いちいちホワイトバランス設定をしなくてもそれなりに撮影できるようになっています。

しかし、オートが万能かというとそうではありません。たとえば、電球色のダウンライトがまぶしいカフェの店内。

01.png
ホワイトバランスをカメラ内蔵のオートに設定

店内のあたたかい雰囲気が伝わる写真ですが、実際には白いはずのマグカップが黄ばんでみえちゃいますね。マグカップを紹介する写真としては失敗です。

そこでホワイトバランスを設定して撮り直してみました。

02.png
ホワイトバランスを手動で設定

オートに設定したときと比べると、白いマグカップがきちんと白く写りました

ホワイトバランスは「反射率18%のグレー」が印刷されている「グレーカード」を使って設定します。実際の設定方法はカメラによって異なりますが、マニュアルホワイトバランスに設定してグレーカードを撮影するのが基本です。

03.png
グレーカードを撮影しているところ

するとカメラがグレーカードの色を基準としてホワイトバランスを設定してくれるのです。

実際に商品を撮影するときもホワイトバランスを手動設定したほうが、色はきちんと再現されます。

04.png
ホワイトバランスをオートに設定(カメラ内蔵)
05.png
ホワイトバランスを手動で設定(カメラ内蔵)

オート設定で撮影するよりも、手動で設定した方が黄色っぽさが取れていますね。特に、同じWebサイトで使う写真の場合、最初にホワイトバランスを設定しておくと、あとで1つずつ修正する手間がなくなり、作業の効率もアップします。

 ※ ※ 

ホワイトバランスの設定のように、ちょっと手をかけるだけで、Webサイトで使える写真が自分で撮れるようになります。より詳しい方法は『デザイナー&ディレクターが写真を上手に撮る本』で解説しています。また、今回の撮影に使った「簡易グレーカード」も付いていますので、グレーカードを購入する前にホワイトバランスの設定を体験できます。

06.png
簡易グレーカード

※簡易グレーカードは、グレーカードの使い方を体験していただく目的で作成したもので、正確な反射率、色は再現しておりません

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ディレクター江口明日香が行く

ランキング