0%

Designデザインワークショップ

Posted:2019.09.05

複数の人物写真を並べるデザインで気をつけるポイント

コーポレートサイトなどを制作していると、社員紹介のページや求人関連のインタビューページというようなコンテンツを作成する機会もよくあるかと思いますが、そんな時に人物写真を複数並列して配置するレイアウトでデザインしたりします。今回はそのような人物写真を複数並べて配置するようなデザインを作成するときのポイントについて個人的に気をつけている点をまとめていきたいと思います。

 

今回の記事では、とある会社の社員紹介という例をサンプルに見ていきたいと思います。まずはこちらのNG例のデザインを見てみます。

複数の人物写真を並べるデザインで気をつけるポイント

 

どうでしょうか、写真の被写体である人物の大きさや構図がバラバラで、どことなく落ち着かない印象で、まとまりがないデザインになってしまっています。そこで、このデザインに対してどのようなポイントに気をつけていけば、整ったデザインになるかを考えていきます。

 

ポイント1. 被写体人物の頭の大きさを揃える

写真によっては引きで撮っているもの、寄りで撮っているものなど、構図もバラバラで被写体との距離も違うかと思います。NG例のデザインで青い円をガイドにして見てみるとよくわかります。

複数の人物写真を並べるデザインで気をつけるポイント

 

そこでまずは被写体人物の頭の大きさを揃えることが大事です。こうすることで見た目上は被写体と焦点距離を合わせられるので、同じ条件で撮影されたのと等しくなります。青い円をガイドとして大きさを合わせ、それに沿ってそれぞれ被写体人物の頭の大きさを揃えています。

複数の人物写真を並べるデザインで気をつけるポイント

 

ポイント2. 被写体人物の目線の位置を合わせる

次にポイントになるのは被写体の「目線の位置」です。同じくNG例のデザインを見てみます。基準として目線の位置に赤いラインを引いています。写真ごとにバラバラで揃っていない感じがよくわかります。

複数の人物写真を並べるデザインで気をつけるポイント

 

この目線の位置を写真ごとに揃えていきます。こうすることで被写体のポーズが違ってもある程度の統一感を出すことができます。揃える時にはまずガイドとなる線を引いた上で、写真の配置を調整するとわかりやすいですね。

複数の人物写真を並べるデザインで気をつけるポイント

 

上記の通り「被写体人物の頭の大きさ」「被写体人物の目線の位置」という2つのポイントを合わせたデザインはこちらになります。NG例のデザインと見比べてみていかがでしょうか。

複数の人物写真を並べるデザインで気をつけるポイント

 

 

リズムを出すためはアシンメトリーの構図にする

先ほどの頭の大きさと目線の位置を揃えたデザインもいいのですが、構図が揃っているとどうしても単調な印象を与えてしまい、写真から伝わるメッセージ性が低くなってしまいます。下記のように上記デザインでは被写体人物の顔の位置がちょうど写真の中央になるよう配置していました。

複数の人物写真を並べるデザインで気をつけるポイント

 

ですので、たくさん並べるような場合には少しアレンジすることでより良いデザインに仕上がります。今回は被写体人物の顔の向きやポーズに合わせてアシンメトリーの構図になるよう調整してみました。下記の通り写真の中央から少しずらして配置してみます。構図についてはこちらの記事「構図とアングルで決める写真のテーマ(構図編)」も参考にどうぞ。

複数の人物写真を並べるデザインで気をつけるポイント

 

このようにアレンジすることで、写真の並びの中にもリズムが生まれ、単調な印象を消すことができます。そして、被写体人物の表情やポーズから伝わるメッセージ性もより強調させることができます。実際に仕上がったデザインはこちらです。見比べてみると違いがわかりますね。

複数の人物写真を並べるデザインで気をつけるポイント

 

あとは、明るさやコントラスト、彩度やホワイトバランスといった色調を合わせたりするとよりデザインにまとまりが出てきますので、サイト全体のデザインに合わせて調整していきましょう。

 


 

今回は複数の人物写真を並べるデザインを作成する際に気をつけるポイントについてまとめてみました。クライアントワークでも要件に含まれることが結構多いのではないでしょうか。ぜひそのような機会には試してみてはいかがでしょうか。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】