2018年3月8日 11:00 pm

「これからホームページ用の写真を撮影するぞ」という方は、このページをスマホで開いて、一つ一つ確認しながら撮影してください。

ホームページで使用する写真は、ページ全体のクオリティに大きな影響を及ぼします。

写真の良しあしで、せっかくのホームページも台無しになってしまいます。

WEBで使用する写真は、単純に腕の良いカメラマンにとってもらっても「WEBで使用する」にはどんな写真が良いかをわかっていないと、「写真自体は良いんだけど、使いにくいなぁ」という事になってしまいます。

ホームページの写真は、「作品としてクオリティの高い写真」ではなくて、「何らかの意味を伝える」などの意図のある写真です。

弊社にて撮影する場合は細かくディレクションをするのですが、お客様にご用意いただくケースも多々あるため「これをふまえて撮影しておけばとりあえずは大丈夫」という点をまとめました。

この記事は「素敵な写真を撮る」という内容ではなく「ホームページで使うことを考えた」写真の撮影についてです。

アップで撮らないで!

普通に写真として印刷する写真の場合、出来上がりのことも考えてちょうど良い構図で撮影するかと思いますが、ホームページで使う場合、そのまま使うことはほとんどなく、ページのデザインやレイアウトに合わせてデザイナーがサイズや構図を決めていきます。どのみちPhotoshopで加工するので、できるだけ引きで撮ってください。

なるべく背景部分が多い方が、何かにつけて使いやすいです。

もしアップで使うとしても、上下左右をトリミングして「アップ」の画像にして使用しますが、すでにアップになってしまっていると、「ここもう少し上下左右余白があれば、良い感じに使えたのにな」ってことも多々あります。

アップで使う際はこちらでアップにするので、撮影時は引きで!

そうするとデザインに応じて好きな構図にデザイナーが編集できます。

 

真ん中に配置した写真で満足しないで!

良く言われる「日の丸構図」と呼ばれるもの。これ自体がいけないわけではありません。

ホームページのどの部分にどのように使うかが明確であれば問題ありませんが、大体の場合そこまで明確になっていないことが多いため、どんな風にでも使えるように「真ん中」「右寄せ」「左寄せ」と複数のパターンで撮影してください

後から取り直すとメンドクサイですが、その時に「真ん中」「右寄せ」「左寄せ」とカメラの向きを変えて撮ればいいだけなので、必ず複数のパターンで撮影してください。

縦はなるべくやめて!

特に人物やお花などの写真で多いのですが、ホームページ上に配置する画像って、ヨコ型が圧倒的に多いです。ホームページは「縦軸」は結構大事で、縦が大きくなればなるほどコンテンツが下へ下へ、スクロールしないと見えないところへ追いやられていきます。

↓ほら 次の文章がだいぶ下に!

そして、横型のブロックごとにコンテンツを作っていくことが多いので、できるだけ横の写真が多くあった方が使いやすいです。

縦にして使いたいときは縦に加工します。逆に縦の写真を横に加工すると、上述した「アップ」の写真になってしまう上、写真として意味を成す大事な部分が切れてしまうことが多いです。

ホームページの元画像は横の方が使い勝手が圧倒的に良い!

被写体が複数ある場合、なるべく近づけて!

「受付の様子」とかでよくある構図ですが、被写体が複数ある場合、その2つが写って初めて意味を成す写真となります。その被写体①と被写体②の距離が遠いと、下の写真くらい大きく使えればまだ顔もはっきりしたある程度のサイズ感で使えますが、

ホームページの場合これくらい大きく使うことはあまりなくもっと小さいパーツとして使ったりもします。

そうすると、重要な人物の部分が小さくなってしまいます。人物を大きくしようとするとトリミングをしないといけないのですが、トリミングをしてしまうと被写体①か②のどちらかを切ってしまうため、意味をなさなくなってしまいます。

この写真の場合、この二人の「写真上」の距離を近づけてほしいのです。

とはいえ、テーブルを挟んでの撮影なので具体的には、カメラマンが横に立つのではなくて、なるべく被写体①の真後ろに近い斜めの位置に立って撮影すれば、「写真上」のこの二人の距離は近づいた写真になります。

目線ってとても大事

ユーザーは写真に写っている人の目線の先を見る習性があります。

モデルの目線上に伝えたいコピーを置くのは、広告では常套手段です。これもどんな配置でどんな風に使うかわからないので、右目線、左目線と、複数の目線のパターンも撮影しておきましょう

垂直・水平 ちゃんと見て!

三脚に水の中に空気の入った水平器がついているのを見たことある人も多いでしょう。

デジカメなんかでもほとんどのものに 水平・垂直の「グリッドライン」が表示できますし、画面上に傾きを表示してくれる機能もあります。

こうした予防策がしっかりあるのに、ちゃんと見てくれてない人がとても多い!
これとても大事です。

特に建物などの撮影や、建物内外での撮影の場合、カメラの向きをしっかりと水平、垂直にしておかないと、残念な仕上がりになります。

↓ボケっと突っ立って何も考えず撮影した写真(昔の自分撮影)
このバーカウンターを撮りたかったんだと思いますが、これはカメラが少し前に傾いた状態で撮影した結果です。

赤い線を見てもらえれば一目瞭然ですが、建物自体も傾きまくってます。

人間は本来これは絶対的に(柱などの縦のラインは)垂直に存在していることを本能的に知っているため、「何がおかしいか」と具体的に分からなくても、すごく違和感を覚えます。

これはカメラの垂直をしっかりと捉えていれば、防げたものです。しかし、この時の私はそんなことも考えずに撮影しているため、駄作となりました。

しっかりとカメラを垂直にしていればこうなったはずのものです。

これはbefore after を見てもらうために、後から修正したものです。

これは違和感のある傾きが垂直方向だけだったためまだ修正でなんとかモノになりましたが、そう簡単に行かないモノの方が多いです。

例えばこの写真でも無理やり修整したため、並んでいるイスの右の2つや壁にかかったテレビなどは間延びしてしまっていますね。

芸能人が無理やり写真を修整しスタイルを良く見せようとして誰かに突っ込まれるみたいなものです。

このように、本来垂直なものは垂直に、水平なものは水平になるようにファインダーをしっかり見ながら撮影します。

ただし、水平・垂直どちらもしっかりしないといけないわけではありません。例えばこのバーカウンターを正面から撮影する場合は、どちらもしっかり見て撮影する必要がありますが、この写真のように斜めから撮る場合、水平は絶対にとれません。確実に斜めになりますね

この場合、縦軸さえしっかり垂直をとらえていれば、開き直って水平は斜めであっても違和感もうまれません。
あくまで一番最初の失敗写真は、縦も横も傾いているから強烈な違和感を与えてしまいますが、真正面から、真上からなどの撮影以外は、どちらかをしっかりとる という形でかまいません。

この2枚の写真も、すごく惜しいですが、一番右の出入り口の垂直がとれているかいないかで仕上がりに結構差が出ています。

惜しい例(右の出入り口の垂直(縦ライン))が気になる

まだましな例

並べてみてみるとけっこう違いますよね

垂直や水平をしっかりとろうとすると、コッチを合わすとこっちが傾くみないな事がかなりたくさん発生します。三脚に立ててしっかり見ていけば防げますが、手持ちの時はなかなかこれが決まらずシャッターが押せなくなる時もあります。

そういう時は、目立つ傾きは写さないようにする手もあります。 例えばこの2枚目の写真も本当は左端の窓枠(の左)がけっこう傾いていました。コッチをしっかり垂直にすると今度は反対の出入り口が傾いて と、手持ちだとこれを繰り返したりします。

なので、右側の出入り口は垂直をとらえ、左の窓枠のハジは無視してファインダーの外にもってきて写真に写らないようにしました。目立つ傾きはこうやって写さないようにするのも一つの手です。

番外編

男より女がベター

これはウェブに限りませんが、男性向けの場合は女性が写った広告の方が効果があります。

Aという商品を300円と記載し男性モデルが写ったチラシと500円と記載した女性のチラシでは金額がこれだけ違っても、同じ数売れたという実験結果があります。(内容はちょっと違いますが、わかりやすくしています。)

なんとなくわかりそうな気もしますが、実際の実験結果でもそのような結果が出ています。

どちらかというと男性向けのビールのポスターなんかも女性ばかりですよね。

そして大事なのが、じゃあそれを女性が見た場合どうか?という部分。

女性はこうしたジェンダーな部分に興味を示さないので、女性を起用したところで(よほどのことが無ければ)マイナスにはなりません。

女性ではマイナスにはならない。男性では明らかにプラスに作用するのであれば、女性を使う方が良いですね。

ちなみにこの弊社ホームページのトップページのヒートマップ(よく見られている箇所がどこかわかるもの)を見てみると、よく見られているところは赤く、それほど見られていないところは青くなるのですが、トップページ下部にある「写真撮影」のところの女性の写真のところから、「こんなに下の方なのにウソでしょ」と思うほど急に真っ赤になります。

ほんとにちょうど写真の始まりのところから見事なまでに赤い。

単純に男心とかたずけるのではなくて、これも一つの結果ですので、有効に活用したいですね。

 

まだまだありますので、随時追記してまいります。

 

Categorised in: , ,