名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

TEL.0120-038-517 CONTACT

NEWS & COLUMN

お知らせ・コラム

SCROLL

DESIGN

ホームページに掲載する写真を選ぶときの5つのポイント

2023
.03.16

ホームページに掲載する写真を選ぶときの5つのポイント

ホームページ制作に際して写真撮影を行う際、同じカットの写真のバリエーションやアングル違いの写真から実際に写真を選定するのは基本的に制作会社の役割ですが、場合によってはクライアントが使用してほしい写真を選定する場合もあります。人物写真には服装や表情、ふるまい、姿勢、構図、明るさなど様々な要素が混在しているため、何を基準に選べばいいか分からないということもあるかもしれません。そこで今回は制作会社や制作会社から写真選定を頼まれた担当者向けに、デザイナー目線での写真を選ぶ際のポイントをご紹介します。

【目次】
1.写真撮影を行った際の写真データについて
2.写真を選ぶ際のポイント
 a.人物の表情
 b.人物の服装
 c.人物のふるまいや姿勢
 d.色のバランス
 e.写真の構図

3.今回のまとめ

写真撮影を行った際の写真データについて

カメラマンや制作会社にもよりますが、プロのカメラマンによる写真撮影では膨大な枚数の写真が撮影され、その中からミスショットが間引かれたものが納品されます。間引かれると言っても各カット十数枚〜の写真が撮影されるため、カメラマンによる写真撮影が初めてのクライアントにとってはかなりの枚数と感じるかもしれません。カメラマンが間引く写真はピント、ぶれ、半目など表情の明確なアウトなど商業写真としてホームページの品質を損なう恐れのあるものが挙げられます。また、実際にホームページのWEBデザインに使用する際はデザイナーもしくはカメラマンによって画像補正がされており、画像の明るさやコントラストが調整されます。納品された写真とWEBデザインに反映された写真の色味や明るさが異なる場合があるのはこのためです。これらの前提条件を踏まえた上で、写真を選んでいきましょう。

写真を選ぶ際のポイント

写真を選ぶ際のポイントは写真そのものに含まれる要素とホームページのWEBデザインに反映した際のバランスに分類されます。ここではその両方をご説明します。

人物の表情

人物を撮影した際の表情は、実際に写真の被写体となるクライアントや担当者にとっては一番気にしたいポイントであり、デザイン的な観点でもホームページの雰囲気にも直結する重要なポイントです。まず留意しておくべきこととして、ホームページのデザインは思い出を飾るアルバムではないということです。商用写真に馴染みのない方にとって、写真とは幼い頃の家族写真や学校の記念撮影、会社の行事写真など、思い出の1ページという認識が強く、笑顔=良い写真という固定概念を持ちがちです。しかし、真剣な仕事のワンシーンでの笑顔が必ずしも適切な表情かと言えばそうではありません。もちろん接客業やサービス業などの仕事風景においては笑顔も一つの選択肢にはなりますが、「とりあえず笑顔で」という固定概念で考えるのではなく笑顔の写真を選定するにしても目的を持って写真を選定するようにしましょう。加えて、笑顔は「破顔」とも言い換えられるように顔の造作がある程度崩れる表情でもあります。包み隠さず言うなら、人は基本的に素の表情に近い方がかっこよく、かわいく撮れます。笑顔の持つ「親しみやすさ・明るさ」と言った印象も100%の笑顔でなくとも担保することができるため、ホームページに写真を選ぶ際はあまり表情が崩れていない写真を選ぶ方が結果的に自然な雰囲気かつ好印象な写真に統一することができます。

人物の服装

これも基本的なことですが、人物の服装も重要な写真の1要素です。接客業やサービス業においてはスーツなど服の着こなしを重視し写真のパターンでもなるべく服にシワのよっていない写真を選ぶことでホームページの全体の清潔感にもつながります。工場作業などの専門的な業種においては、手袋など保護具の着用などクライアントにしか最適解が分からないケースも多いため、撮影時やそれ以前にヒアリングを行い適切な服装での撮影、選定ができるように注意しましょう。ホームページの写真を選定する際、BtoCの企業の場合はある程度写真としての見栄えを重視して保護具を簡易化した写真などを使用するケースもありますが、BtoB企業の場合はプロ同士の取引になる場合も多いため、取引先に信頼してもらえるような実際の作業風景を再現した写真の選定が無難です。また、昨今ではホームページ上の写真がSNSに取り上げられバッシングされるケースも稀にあるため、できるだけ適切な写真を選定できるようにしましょう。

人物のふるまいや姿勢

身分証明書などのプロフィール写真などを撮影する場合でも、「背筋を伸ばして」「顎を引いて」などの指示がカメラマンからありますが、胸から上のバストアップ構図でも背筋や顎の引きが印象を左右する写真において、ホームページに使用される手元〜全身が写る仕事風景の写真なども全身の所作、ふるまい、姿勢などで人物の印象が大きく変わります。特に事務作業や商談など会話の風景で写真の一要素として大きく印象が変わるのが手の動きです。撮影の際腕を組む、手振りをして体の動きにも表情をつけるなどの工夫ができるとより良いですが、ホームページに使用する写真を選定する際も、右手で何かを書いている写真を選ぶ際、左手が手持ち無沙汰になっている写真を選んでいないか、商談の風景を選ぶ際表情だけで身振りのない写真を選んでいないかなど、手の指先まで注意して写真を選定するようにしましょう。また、これはWEBデザインとのバランスとも関わることですが、写真中のメインとなる人物がどちらの方向を向いているかというのも選定における重要なポイントです。一般的に親しみやすさなど外交的な雰囲気を演出したいときは画面の内側に視線を向けた写真、アーティスティックな要素や職人のプライドなど情緒的な雰囲気を重視したい場合は画面の外側に向いた写真を使用することでデザインの雰囲気を強調することができます。また、人物の視線の先にボタンやキャッチコピーなどポイント的に注目を集める要素が衝突する場合ユーザーに違和感、一種の強制感を与えることもあるので、3次元的に少し正面、奥を向いた写真で視線を分散させるか、各要素を分散させるようにすることで自然な印象のWEBデザインにまとめることができます。また、この向きという要素は人物だけでなく動物、車など向きの概念がある物体にも関わる要素のため注意が必要です。

色のバランス

例えば商談風景の写真の場合でも、複数アングルで写真を撮影した場合にテーブルを挟んで人物が話し合っているシンプルな写真と、その奥や手前に植物が入っている写真では、緑が入っているか入っていないかで写真全体の色のバランスが大きく変わります。シンプルなWEBデザインの場合、植物のない写真では画面が殺風景になり味気ない印象が出てしまう恐れがあり、植物などある程度彩度のある写真が入った方がデザインのアクセントになるかもしれません。反対に、装飾の多いWEBデザインでは色数の多い写真を使用することで情報量が多くってしまうため、テーブルと人物のみのシンプルな写真がWEBデザインに合うケースもあります。このように、WEBデザインと写真のバランスをとった写真選定を行うことがWEBデザインでは重要になります。また、写真の明るさとWEBデザインの背景色の明度差が近いと境界が視認しづらく曖昧な印象のホームページになってしまう場合もあるため、ある程度明度差(コントラスト)の担保できる写真を選定するようにしましょう。

写真の構図

写真の構図はやや専門的な話になりますが、端的に説明するなら一番見せたい被写体が引き立つ写真かどうかというポイントです。例えば車のホームページで外観の写真を選ぶ際、一番強調したい箇所がエンブレムだった場合、アングルを引いて車全体を撮影した写真を選んでもユーザーはエンブレムまで細かく写真を見ることができません。車のフロント(正面の外観)を強調したい場合は引きのアングルで撮影した写真が適切ですが、ルーフ(屋根)が少し見切れている写真なら車好きのユーザーにはいまいちフロントの格好良さを伝えきれないかもしれません。基本的にはプロのカメラマンの撮影した写真の構図でそのまま写真を選定するのをお勧めしますが、場合に応じてWEBデザイン上で画像の切り取り(トリミング)ありきで写真を選定しても問題ありません。

今回のまとめ

ホームページの静的なページに掲載する写真は基本的にプロのカメラマンが撮影した写真をWEBデザイナーが選定しますが、時にはその業種の専門家であるクライアントのディレクションが重視される場合もあります。写真としての品質やWEBデザインとのバランス、業界のマナーや作法を両立した写真、もしくはそれぞれを尊重した落とし所を示すことができるような写真の選定ができるようにしましょう。

AUTHOR

著者情報

WEBデザイナー

T.S.

デザイン事務所でグラフィックデザイナーとしての勤務を経て、株式会社オンカにWEBデザイナーとして入社。クリニックやサロンなど高級感のあるデザインを得意としながら、サービスサイトやコーポレートサイトなど幅広いジャンルのホームページにおいて緻密な計算に基づいたデザインで顧客の集客力向上に尽力している。

  • カラーコーディネーター AD
  • ウェブマスター検定 1級
  • フードコーディネーター 3級

PAGE TOP