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

WEBデザインでは、主に文字情報の補助の役割で写真画像を配置していますが、被写体には「視線」があり、コンテンツの内側に向かうように配置することでページ下部にある購入ボタンやお問い合わせボタンまで誘導することができます。
この視線による誘導は、WEBデザインで重要な役割の一つです。
今回は、WEBデザインで重要な「視線」を意識した写真トリミングのポイントをご説明します。

トリミングとは

トリミングとは、写真編集において、画像やオブジェクトの不要な部分を切り取り、必要な部分のみを表示させることです。
不要な部分の削除したいときや、画像の一部だけを使いたいときにトリミングをすることで、写真の見栄えが向上したり、写真が持つイメージをより明確に表現できます。

トリミングする際のポイント

写真をトリミングする際は、何を一番見せたいのか目的をはっきり決めることが重要です。スムーズにトリミングするためにも以下のポイントを意識しましょう。

主役を決める

何を一番ユーザーに見せたいのか目的をはっきりさせたうえで主役を決め、不要な部分をトリミングしましょう。
一枚の写真から情報をトリミングすることで、その写真が持つ意味が変わります。
以下の写真を例にトリミングの違いを考えてみると、視覚的に伝える情報が多いと「イメージ写真（部屋紹介）」となり、不要な情報をトリミングすると「説明写真（人物紹介）」になる、という違いがあります。

視線を意識する

写真の中で被写体が向いている方向のスペースを開けることで、被写体とイメージがより引き立つようになります。
WEBデザインでは、視線の先にテキストを配置すると、ユーザーの目線を自然にテキストに誘導することができるので、まとまりのあるWEBデザインになります。

写真の魅力を強める

写真をトリミングする際に、被写体に寄ってトリミングすると、写真のイメージを更に強めることができます。
また、大胆に裁ち落とすと、写真を大きく扱う事ができるので、見た目のインパクトが作りやすく迫力のある写真になります。
逆に被写体から離れてトリミングした写真は、空間の広がりを表現することができます。
また、被写体を切り抜いたりするとポップな印象になるので、デザインにあったトリミング方法を選びましょう。

人物の魅力を強める

ホームページ制作でよく使用される、人物写真においてトリミングのポイントがあります。
それは、被写体を関節で切らないことです。
人は、首、手首、足首、肘、膝、などの関節で切られた写真を見せられると違和感を持ちます。
普段目にしている、テレビ番組やトーク番組などでも、画面に人物が映る場合はこの構図で撮られているそうです。
また、写真撮影の際にも、この構図を取り入れるとバランスのよい写真ができます。

商品の魅力を強める

ECサイトのように商品を紹介する物撮りの写真では、なるべく中心に商品を置き、余白をたくさん持たせるようにトリミングするのがポイントです。
余計な情報を削除することができ、情報を正確に伝える事ができます。
元の写真をそのまま配置するのではなく、画像の中に余白を持たせてトリミングすることで、より分かりやすいECサイトになります。

今回のまとめ

WEBデザインに使用する写真は、構成に合わせてトリミングをすることでWEBデザインの統一性を強め、イメージを高める事ができます。
同じWEBデザインでも写真の切り取り方次第で、ユーザーに与える印象はがらりと変わります。
WEBデザインを作る上で、写真は重要な要素でもあるので、ご紹介したポイントを意識して効果的な写真のトリミングについて改めて考えてみましょう。
皆様の自社ホームページやブログに写真を載せる際にも、構図について一度確認してトリミングしてみると、より魅力的なWEBサイトになるかもしれません。