Webサイト(ホームページ)で効果的な写真の選び方を解説!

Webデザイン
さいとぅ
さいとぅ

Webサイト(ホームページ)を閲覧すると、サイトの第一印象となるトップページ(ファーストビュー)を始め、各ページや要所要所において写真(画像)を見かけるかと思います。これらの写真は理解や共感につながりやすいため、必要不可欠な要素と言えます。

しかし、サイト制作時に写真のあつかいを誤ると、目的とする理解や共感とはまったく逆の影響を与えてしまう可能性があるため、しっかりと吟味して選ぶ必要があります。

本記事では、「写真の重要性」や「選び方」について詳しくまとめていきます。

なぜ写真が必要なのか

写真選びの第一歩は、「なぜ」写真が必要なのか を明確にすることです。

本来、Webサイト内で伝えたい情報はテキストとして記載しているはずであり、そのテキストを読んで理解が完結するのであれば、大きな存在感で情報量が増える(伝えたい情報がブレる)ような写真は配置しなくても良いと判断できます。

写真はとても存在感があり、初見でまず目に入る可能性が高い要素です。つまり、写真の最大の役割は読み手の目につき、伝えたい情報(テキスト)がイメージしやすい道すじを作ることにあります。

たとえば、「目の前に広がる開放的なオーシャンビュー」という情報では海の景色を思い浮かべるかと思います。

しかし、その海の位置関係や規模感までは読み取れず、イメージは読み手の感覚に依存してしまいます。このとき情報を補うために写真を用いると、不足なくイメージを共有できるようになります。

写真の役割

あくまでも、テキストとして最大限伝わる努力をしたうえで、「さらに理解を深めたい・特定のイメージを持ってもらいたい」という場面において、写真の真の効果が発揮されます。

さいとぅ

さらに踏み込むと、しっかりテキストで書いていても読み手の記憶に全てが残るか、と考えるといささかあやしいものですよね…ここぞという場面で写真があると、絵として記憶の一助にもなるのではないでしょうか!

Webサイトにおける写真の役割

Webサイトに用いられる写真には大きく2つの役割があります。まずは、各役割についてまとめます。

印象を膨らませる写真
(全体的)
印象を膨らませる写真
(部分的)
情報を正確に伝える写真
画面の一面や大部分に置く

インパクトが大きい

デザインの軸になる
紹介文や説明文に添える

詳細度が高い

加工や演出がしやすい
一覧や詳細説明に必要

被写体は商材

撮影環境が等しい
Webサイトにおける写真の役割

印象を膨らませる写真

全体的な写真

Webサイトのトップページ(ファーストビュー)や各ページトップでメインとなる写真です。とくに、トップページはサイト内の各コンテンツへ遷移する起点となるため、もっとも目に留まりやすいです。

この写真は周りに余白が無く(少なく)、インパクトや没入感が生まれます。そして、サイトの内容や雰囲気のイメージにつながるため、サイト全体の印象(デザインの軸)を形作ります。

部分的な写真

コーポレートサイトでは事業内容や採用情報など、街のお店や企業のサービスサイトでは商材の紹介ページで用いられるワンポイントの写真があります。この写真は全体の印象を形作る写真より詳細度が上がり、より個別の内容をとらえやすくなります。

また、デザインのいちパーツとして扱うので、形の加工やレイアウトの工夫によってサイトのデザインにフィットする演出・効果をかけやすいという特徴もあります。

左側の全体的な写真は広々とした景色が感じ取りやすく、右側の部分的な写真はいち風景(パーツや要素)としてとらえやすいです。
印象を膨らませる写真(全体と一部分)

情報を正確に伝える写真

印象が膨らむ写真に対して、サービスサイトやECサイトにおける商材比較や一覧に表示する場合は、より鮮明で正確な写真が求められます。この写真は、明るさや構図などが一定の条件下による写真が好ましいです。

ECサイトで見られる商材の一覧写真では、背景や写真ごとの色味が統一されており、見やすく見つけやすくなっています。
情報を正確に伝える写真(一覧表示)

写真を選ぶときの3つのポイント

伝えたい情報と写真の整合性

実際に写真を選ぶときは、伝えたい情報と写真の整合性が大切です。使用する写真が、伝えたい情報にフィットしているかを見極める必要があります。

具体的には、その写真とテキストをあわせると、ストーリーが展開されるかどうかです。
というのも、ギャラリー(一覧表示)でない限り写真の使い所にはテキストが存在するので、その写真にナレーションとしてテキストが当てられるかどうかが判断基準として使えます。

さいとぅ

選んだ写真を見ながら、キャッチコピーやテキストを音読してみるのがおすすめです!

また、Webサイトの構成は基本的にページの上から下へ情報が流れていくため、各要素が地続きとなります。写真を用いたときに、使用箇所だけでなく、サイトやページ全体のストーリーとしても自然な流れとなるか確認しましょう。

具体的な写真と抽象的な写真

写真には、被写体が具体的な写真と抽象的な写真があります。
より具体的な写真はそれだけでわかりやすく、ユーザーが商材購入後やサービス利用後の自身を思い浮かべやすいので、テキストとの整合性が高くなります。

一方、抽象度が高い写真は雰囲気を出しやすく、当てはまるテキストの間口が広がるものの、そのぶん具体的な写真よりもフィット感は弱まります。

とくに、訴求内容が無形商材の場合は具体的な被写体が得られず、どうしても抽象度が高い写真になってしまいます。こんなときはデータや事例など、可能な限り情報に具体性を持たせ、その一助となるような写真や図(アイコン・インフォグラフィックなど)を用いる方法がおすすめです。

クオリティの高い写真

使用する写真のクオリティはWebサイトの仕上がりを大きく左右します。では、どのような写真が高品質と言えるのか、大きくまとめると以下の3点が重要なポイントとなります

写真のクオリティのポイント

  • ピントが合っている
  • 意図した明るさである
  • 自然な色味である

ピントが甘いと、被写体にフォーカスされていても真っ直ぐなインパクトが得られなくなってしまいます。また、明るさや色味はデザイン時に都度調整しないと、サイト内でのトーンや印象が崩れてしまいます。

どこかに違和感のある写真は、テキストの説得力を弱めてしまう可能性があるため、ポイントをおさえてしっくりフィットする写真を選んでいきましょう。

写真の視覚的効果

写真は被写体や構図、使い方によって得られる効果が異なります。効果の条件と種類を覚えておくと、写真選びがより洗練されていきます。

被写体と構図による効果

被写体がどのような構図で撮影されているかによって、その写真の印象は変化します。

単一の被写体

被写体が単一のものは、自然と被写体に視線が集まります。そのため、主題にしっかり注目して欲しいときやインパクトが演出できます。

このとき、その被写体は中央(日の丸構図、トンネル構図など)にある場合が多いですが、中央以外に配置すると奥行きや余白による抜け感を生む(分割法や放射線構図などとの併用)も可能です。

複数の被写体

被写体が複数ある場合は、その写真内で関係性が生まれます。対比関係にある被写体では各存在感を高め合う効果(対比構図や対角線構図など)があり、同一の被写体が並んでいる場合は、にぎやかさやバリエーションの豊富さが表現できます。

左側の単一の被写体では時計を実際に着用したイメージがしやすく、左側の複数の被写体ではあつかう時計の種類の多さがわかります。
単一の被写体と複数の被写体

被写体が人であるときの効果

「目は口ほどに物を言う」とはよくいわれますが、被写体が人の場合は目線の行き先が印象に変化を与えます

たとえば、被写体の目線がキャッチコピーやテキストを向いている場合、写真→テキストへと写真のイメージを持ったまま内容が入ってくる流れを生みます。また、被写体が正面を向いている(読み手と目が合う)場合は表情が読み取りやすく、誠実さが感じられます

一方、目線をテキストから外している場合は、その内容をシーンとして再現していることが多いです。部分的な写真として使用する場合には、テキストを向いていない分レイアウトの自由度が上がるため、抜け感の演出もしやすくなります。

上の写真は被写体である人が見出しを向いており、目線が自然に流れるようになっています。下の写真は見出しと反対向きにして写真に収まっていないシーンまで想起するようになります。
被写体の向きによる印象の変化

また、後ろ姿や顔が映らないようにトリミングされた人物写真は、被写体個人に対する情報量が減るので、写真のシーンを読み手自身に置き換えやすいといえます。これは多数の人に当てはまる情報や、主観に訴える内容などで効果を発揮します。

レイアウトによる効果

これまでは写真そのものの効果を挙げましたが、複数ある写真はデザイン的な要素やレイアウトによっても印象付けの効果があります。

交互の表示

写真をテキストに添えて左右交互にレイアウトされているデザインを目にしたことがありませんか?それらはWebサイトを閲覧する視線の流れをを意識しています。

自然な視線の流れにそって写真をレイアウトすると、その写真たちにも自然と連続性が生まれ、ストーリーが紡がれていきます

大小の表示

複数ある写真の中で、サイズ差をつけると大→小の従属性が生まれます。これは、大きな写真のイメージ、余韻を保ったまま、小さな写真によってイメージをさらに膨らませる効果があります。

もっとも立たせたい写真をどれにするかによって、伝わる内容や印象が大きく変化するため、組み合わせるパターンの比較が重要です。

グリッド表示

グリッド表示は、カード形式のコンテンツやギャラリーに多く見られる均一的なレイアウトです。一覧として表示されるため、各写真に優劣はなく、数量の多さとして伝わります。

このとき、写真のアスペクト比を整った比率(1:1、4:3、16:9 など)で設定すると、一覧としてスッキリするため見栄えが良くなります。

レイアウトによる効果

ダウンロードの注意点

撮影した写真ではなく、インターネット上の写真(画像)をダウンロードして使用する場合は著作権肖像権利用規約を慎重に確認しましょう。

さいとぅ

ルールの確認を怠ると、のちのち訴訟問題になりかねません。法律にかかわる大事な話なので、知らなかったとは言えないのです、!

詳しくは、こちらの記事で解説していますのでご覧ください。

まとめ

今回は写真の効果や選び方をまとめました!Webサイト制作時の写真選びはとても重要ですが、なかなか思うようにいかないこともあるかと思います。
そんなときは、サイトのクオリティを上げるためにも、新たに素材の撮影を検討してはいかがでしょうか。 Wepot では撮影対応も可能です!ぜひお問い合わせください。

ご依頼・ご相談はこちら

お客様の課題解決に最適なメンバーアサインでスムーズなプロジェクト進行をいたします。制作して終わりではなく、お客様が求める成果に結びつくご提案をさせていただきます。

この記事がシェアできます

この記事を書いた人
さいとぅ

さいとぅ
デザイナー

さいとぅ
デザイナー

Webデザインをはじめロゴデザインやインフォグラフィックなどのグラフィックデザインも幅広く対応可能です。コンセプトを重視し、ビジュアルから想いが伝わりひろがるようなデザインを軸としています。

  • Wepotについて

    アイコン

    Wepotはデジタルクリエイティブで課題を抱えるすべての人への解決策を提示できます。

  • 実績一覧

    アイコン

    Wepotには多種多様な実績があります。メンバーの強みが生きた実績をご覧ください。

  • 制作のご相談

    アイコン

    現在の課題やお悩みをお聞かせください。あなただけのクリエイティブチームを編成し解決へと導きます。