名古屋のホームページ制作会社、WEB集客会社なら株式会社オンカ｜コラム

ホームページデザインで写真を取り入れる際のレイアウトのポイント

最近のホームページを見ると、必ずと言っても良い程、ホームページ内に写真が取り入れられています。ホームページ内に写真を取り入れることによって、文字だけでは伝えられない情報を短時間で正確に伝えることが可能になります。しかし、写真を取り入れていても写真の使用方法によっては、ユーザーの情報の受け取り方が異なってくる可能性があります。
今回は、そんな写真のレイアウトの基本と、トリミングを行う際に工夫すべき点についてお伝えします。

写真のレイアウトの基本

ホームページ内に取り入れる写真のレイアウト方法は自由ですが、基本的なルールに則って行うことで、デザイン性や情報伝達力はグッと上がります。ここではレイアウトを行う際に注意したい基本的なポイントをお伝えします。

余分な情報はトリミングする

意図的に斜めにしている場合は別ですが、写真を使用する際は、基本的には傾きを直してから使用します。傾きを直した際に伝えたい情報以外の余分な情報が写り込んでしまっている場合は、その部分をトリミングしましょう。

縦横比を維持する

ホームページ内に写真を取り入れる際、横もしくは縦の長さが足りないからといって一方向にだけ拡大や縮小を行うと、本来写真が持っているイメージや目的が損なわれてしまいます。写真を取り入れたい場所のサイズに合わせて写真を拡大や縮小する際は、必ず縦横比を維持した状態で拡大や縮小を行いましょう。

被写体の大きさや位置を揃える

コンテンツの配置は揃えてあっても、写真の被写体が揃っていなければ統一感がなく、まとまりのないデザインになってしまいます。デザインとして被写体の大きさや位置を変えるときは構いませんが、商品の写真等、同じ種類の写真を複数使用する際には、被写体の大きさや位置を揃えましょう。

トリミングを行う際の工夫

写真をトリミングするという作業自体は、非常にシンプルで簡単に思えますが、トリミングする部分によって、ユーザーに伝わる情報が異なります。ここでは、トリミングを行う際の工夫を二つお伝えします。

目的に応じたトリミング

写真には多くの情報が詰まっています。その中のどの部分をユーザーに伝えたいのか、写真を使用する目的をはっきりとさせ、その部分が一番強調されるようにトリミングします。例えば、人物と景色が写っている写真の場合、人物と景色の両方を見せたい場合はそのまま使用し、人物を見せたい場合は人物の部分だけをトリミング、景色を見せたい場合は人物を覗いてトリミングしましょう。

空間を生かしたトリミング

写真をトリミングする位置によって、ユーザーに伝わるイメージも異なります。例えば、被写体（人物）が横を向いている場合、視線が向いている方向に空間を空けて後ろ部分をトリミングすると未来を連想させ、視線とは逆の方向に空間を空けて前部分をトリミングすると過去を連想させます。このように被写体の向きを考えながら空間を空けてトリミングをすることで、空間に意味を持たせることができ、ユーザーが受け取るイメージも異なります。伝えたいイメージによって、トリミングする位置を工夫しましょう。

今回のまとめ

写真は、使用の仕方次第で様々な表現が可能になります。そのため、時にはユーザーに対して伝えたいイメージと異なるイメージで受け取ってしまうこともあるかもしれません。自社ホームページに写真を取り入れる場合は、ホームページ内に写真を取り入れる目的をはっきりとさせ、その目的と写真が与えるイメージが合っているかどうか確認しましょう。
この機会に、自社ホームページに使用されている写真をもう一度見直して見て、今回ご紹介した基本ルールに基づいた写真レイアウトがなされているかを確認して見てください。

ALL