Webデザインで使用する写真のおすすめ構図を7つ紹介

多くのWebサイトには写真が使用されています。写真はWebサイトにとって重要な役割をするお店の看板と言えるでしょう。

写真を撮る時、何も意識せずにシャッターを切っていませんか?

ただ漠然と撮った写真は、加工してもしっくりきませんよね。

「どうやってうまく写真が撮れるのか知りたい」 「Webサイトの見た目にインパクトがある写真が欲しい」

綺麗な写真を撮るには、構図を意識して撮影しなければなりません。

構図にはたくさんの種類があるので、より良い写真をWebデザインに活用するためにもしっかりと覚えていきましょう。

構図とは

人物や物体、背景などの配置によって見え方が変わります。その配置の仕方を構図といいます。

ただ闇雲に撮るのではなく、構図を意識して撮ることで写真の印象を劇的に変化させるのです。

カメラ初心者の方は、レンズにグリッド線(構図を分かりやすくする罫線)を表示させましょう。

一眼レフだけでなくスマートフォンでも、カメラの設定でグリッド線を表示できます。

おすすめの構図を7つ紹介

日の丸構図

写真の中心に主張したい被写体を持ってくる構図になります。名前の通り、日本の国旗が由来になります。

日の丸構図は誰が写真を見ても、主張したい被写体が分かりやすい構図です。

ポイントは被写体から距離を少し離して、撮影してみるとより被写体を引き立てます。

初心者でもかんたんに綺麗な写真が撮れる構図なので、すぐに挑戦してみましょう。

三分割法

縦3本、横3本の線に区切った線(グリッド線)の交差する点に被写体を合わせる構図です。

交点だけでなく線上に被写体以外の背景を移すことで、より良い写真が撮れるでしょう。

人物だけでなく、物や自然の景色なども被写体にできるため様々なシーンで活用できますね。

日の丸構図に慣れてきたら、三分割法にステップアップしてみてはいかがでしょうか。

シンメトリー構図(二分割)

二分割法は上下または左右を中心で分割して写真を撮る構図です。

例えば海と浜辺の水平線で二分割した構図は、シンプルで映える写真が撮れます。

二分割法ではきちんとした水平垂直を取らなければなりません。カメラが斜めになってしまってはせっかくの構図も台無しです。

三脚を使ってカメラを固定し、水平をとってから撮影しましょう。

対角線構図

四隅に対角線を引いてそこに被写体を合わせる構図です。

ただし被写体がななめに並んでいれば、四隅に合わせなくても大丈夫です。

対角線構図には奥行きを感じさせ、臨場感がある写真に仕上がる特徴があります。

被写体の手前側をメインにして、後方側をぼかすとより動きが出る写真ができて効果的です。

三角構図

写真の中に三角形ができる構図をいいます。富士山やピラミッドなど山形になっていると、綺麗に写真が撮れやすいです。

三角構図でよく使われる写真に真っ直ぐな道を中心に撮影する方法があります。撮影された道の奥が頂点となり、三角構図が完成します。

視線が手前から奥まで動き、メッセージ性のある写真に仕上がるでしょう。

また別のパターンを紹介すると、大きな大木の写真は下から上に向かって木の枝が広がるため逆三角形の構図で撮影できます。

アルファベット構図

写真の中にアルファベットを作る構図になります。アルファベット構図は「C字」「S字」が有名です。奥行き、遠近感、なめらかさを表現できます。

被写体とその周囲全体を見渡して、アルファベットになりそうな箇所を探してみましょう。

特に丸みを帯びた被写体には、積極的に活用したい構図です。

お皿に盛り付けられた料理をただ撮影するのではなく、円形のお皿をC字に合わせてシャッターを切りましょう。

放射構図

写真の収束点から線が放射線状に伸びていく構図を放射構図といいます。収束点とは放射状に出ている線の中心部です。

放射構図では、広がりを表現できるので写真に動きやインパクトを与えます。

収束点に見せたい被写体を置くことで、被写体をより際立たせることも可能です。

全体的な広がりを見せるための構図なので、広角レンズ(スマートフォンなら広角撮影機能)で撮ることをおすすめします。

写真を使用したWebデザインテクニック2つ紹介

構図の基礎を覚えて、実際に撮影してみましたか?

せっかく撮った写真を、Webサイト上で映させるためのテクニックも知りたくありませんか?

ここではWebデザインでよく使われるテクニックを紹介します。

ヒーローイメージ

Webサイトのトップページ全体に画面表示されている写真を、ヒーローイメージといいます。

ヒーローイメージを活用すれば、ページを開いた瞬間に強烈な印象を与えるでしょう。

Webデザインではトップページはとても重要視されます。自社のホームページを覚えてもらうために、インパクトのある写真を選ぶことに妥協をしてはいけません。

ヒーローイメージは、一つの商品と言えます。見せる写真によってコンバージョン率(成約率)が大きく変わるのです。

今回紹介した構図を活用して、より良い写真を選択しWebデザインを練ってみるのもいいですね。

カルーセル

カルーセルとはWebサイトのトップページで、複数の写真や画像がスライドして切り替わることをいいます。

プログラミングによって、自動的に画像がスライドする設定もできるので視線を誘導する効果もあります。

人は動くものを目で追う習性があるので、画像の動作に反応してしまうのです。

ただし画像が自動的に切り替わる場合、デメリットがあります。

気になる画像にカーソルを合わせたタイミングで、別の画像に切り替わってしまうこともあります。画像の切り替え速度には注意が必要ですね。

様々な構図で写真を撮ってみましょう

今回紹介した構図は全て覚えましたか?

まずは簡単な構図からチャレンジしてみて、慣れてきたら別の構図にシフトしていくと撮影技術も向上して良いでしょう。

また良い写真が撮れたからといって安心してはいけません。その写真をWebデザインに活かすことも忘れないでくださいね。