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

カテゴリ

私たちが閲覧しているWebサイトのほとんどが写真を使用しています。Webサイトを制作するときの写真は、制作会社に撮影を依頼するかレンポジ(写真素材)を使用することが多いです。
お客さまご自身で撮影した写真を提供いただく機会もあります。そんな社内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サイトでは写真の縦横比と異なる比率で掲載することもかなりあります。その場合、写真の左右または上下がトリミング(不要な部分を除く)されます。写真の縁の近くに被写体が写っていると見切れてしまう可能性があるので、被写体が縁の近くにならないよう撮影をしましょう。

まとめ

Webサイトがフラットデザイン主流となったことで、Webにおける写真の需要は飛躍的に上がった印象があります。裏を返すと、写真の印象がWebサイトの印象に大きく関わるようになったということです。

自社で撮影するときにちょっとした工夫でとても良い印象になるので、トライしてみてください。

Share on

お問い合わせはこちら

Web写真の課題はクーシーが解決します

  • コーポレート
    サイトデザイン

    各ステークホルダーに合わせて情報設計を行い、企業のブランディングが伝わるデザインを心がけています。

  • 採用サイトデザイン

    新卒と中途では欲しい情報のニーズが異なります。ターゲットに向けて応募率を高めるようにデザインします。

クーシーの制作実績

すべての制作実績をみる

Web写真に役立つ記事はこちら

カテゴリ一覧

COOSY BLOG TOP