Web担当者必見！サイトに使えるいい写真の撮り方

写真が表現する2つの効果

まず、Webデザインにおける写真の効果をお話しします。写真には大きく2つの効果があります。

トーンの演出

1つはトーンを演出できることです。青空の写真は爽やかな印象が作れ、夜景の写真は大人の雰囲気を演出できます。
写真の加工に寄ってもトーンを演出できます。

彩度を下げるとノスタルジックな印象
コントラストを上げるとアーティスティックな印象

これらの効果を利用して、サイトで訴求したい安心感や先進性、ホスピタリティといった印象が伝わるトーンを制作します。

リアル感の演出

2つ目は、リアル感を演出できることです。百聞は一見にしかずという言葉通り、ビジュアル情報は文字情報より大きな影響を与えます。

「新人でも活発に意見が交わせる会社です」といった新卒採用向けの文章も、その様子がわかる写真の方が、リアリティを持って社内の雰囲気を伝えることができます。採用サイトのような、ユーザーにとってまだ見ぬことをアピールするときに、写真の効果は絶大。

それでは実際に写真を撮る際のポイントを紹介します。

Web用写真の撮影ポイント1：サイズ

Webサイトに写真をレイアウトする際、写真の実寸と異なるサイズで配置することがあります。

たとえば、集合写真のAさんのみを大きく表示する、といった使い方です。この場合、サイズが小さい写真で拡大すると画質が荒れます。そうならないように写真は大きなサイズで撮影しておく必要があります。

2020年12月現在、PCモニタやスマートフォンの解像度シェアから、Webサイトの横幅は950px〜1200pxで制作することが多いです。Webサイトで使用する写真は最低でも72dpiで横幅2000pxは必要になります。
※対応するデバイスによりサイズが異なる場合があります。

Web用写真の撮影ポイント2：画角

画角とは、写真の中に映る範囲です。Webデザインをする際よくあるのが、写真の上にキャッチコピーを載せたいが、被写体と被ってしまうというケース。

もう少し広角（広い範囲）で撮影し、コピーが載るスペースを確保しておけば良かった！というケースです。写真の上に要素を配置する場合は、どのように配置するかをイメージしながら撮影をしましょう。

また、Webサイトでは写真の縦横比と異なる比率で掲載することもかなりあります。その場合、写真の左右または上下がトリミング（不要な部分を除く）されます。写真の縁の近くに被写体が写っていると見切れてしまう可能性があるので、被写体が縁の近くにならないよう撮影をしましょう。

Web用写真の撮影ポイント3：顔は明るい場所で撮影

画角とは、写真の中に映る範囲です。Webデザインをする際よくあるのが、写真の上にキャッチコピーを載せたいが、被写体と被ってしまうというケース。

もう少し広角（広い範囲）で撮影し、コピーが載るスペースを確保しておけば良かった！というケースです。写真の上に要素を配置する場合は、どのように配置するかをイメージしながら撮影をしましょう。

また、Webサイトでは写真の縦横比と異なる比率で掲載することもかなりあります。その場合、写真の左右または上下がトリミング（不要な部分を除く）されます。写真の縁の近くに被写体が写っていると見切れてしまう可能性があるので、被写体が縁の近くにならないよう撮影をしましょう。

Web用写真の撮影ポイント4：笑顔

画角とは、写真の中に映る範囲です。Webデザインをする際よくあるのが、写真の上にキャッチコピーを載せたいが、被写体と被ってしまうというケース。

もう少し広角（広い範囲）で撮影し、コピーが載るスペースを確保しておけば良かった！というケースです。写真の上に要素を配置する場合は、どのように配置するかをイメージしながら撮影をしましょう。

また、Webサイトでは写真の縦横比と異なる比率で掲載することもかなりあります。その場合、写真の左右または上下がトリミング（不要な部分を除く）されます。写真の縁の近くに被写体が写っていると見切れてしまう可能性があるので、被写体が縁の近くにならないよう撮影をしましょう。