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サイトの印象に大きく関わるようになったということです。
自社で撮影するときにちょっとした工夫でとても良い印象になるので、トライしてみてください。
阪口英基
Web写真の課題はクーシーが解決します
-
コーポレート
サイト制作各ステークホルダーに合わせて情報設計を行い、企業のブランディングが伝わるデザインを心がけています。
-
採用サイト
制作・デザイン新卒と中途では欲しい情報のニーズが異なります。ターゲットに向けて応募率を高めるようにデザインします。
クーシーのWeb制作実績
-
難解サービスを再構築。
アイディア コーポレートサイトアイディア株式会社は、海事産業界向けプラットフォームの開発・運用を行うスタートアップ企業。収集した膨大な航海データを活かして航海支援スマホアプリ「Aisea(アイシア)」を小型船舶向けに提供。本プロジェクトでは、コーポレートサイトおよび「Aisea」サービスサイトのリニューアルを手がけました。
記事を読む
-
国内最大手「辻・本郷 税理士法人」
コーポレートサイトリニューアル辻・本郷 税理士法人は、北は北海道から南は沖縄まで国内60拠点以上を展開する国内最大手の税理士法人です。法人/個人、医療・公益法人・地方公共団体といった様々な顧客に向けて会計・税務顧問業務をはじめ、事業承継、組織再編、M&Aアドバイザリーなど幅広いサービスを提供しています。本件では、同法人のコーポレートサイトをリニューアルしました。
記事を読む
-
リビングから「注文住宅」相談。
NTTデータ・スマートソーシング
「HOME4U 家づくりのとびら」「HOME4U 家づくりのとびら」は株式会社NTTデータ・スマートソーシングが新事業として展開する、注文住宅のオンライン相談サービスです。PC/スマートフォンから注文住宅の疑問や不明点を専門アドバイザーに相談し、理想の住まいづくりを叶えることができます。
記事を読む