コーポレートサイトなどを制作していると、社員紹介のページや求人関連のインタビューページというようなコンテンツを作成する機会もよくあるかと思いますが、そんな時に人物写真を複数並列して配置するレイアウトでデザインしたりします。今回はそのような人物写真を複数並べて配置するようなデザインを作成するときのポイントについて個人的に気をつけている点をまとめていきたいと思います。   今回の記事では、とある会社の社員紹介という例をサンプルに見ていきたいと思います。まずはこちらのNG例のデザインを見てみます。   どうでしょうか、写真の被写体である人物の大きさや構図がバラバラで、どことなく落ち着かない印象で、まとまりがないデザインになってしまっています。そこで、このデザインに対してどのようなポイントに気をつけていけば、整ったデザインになるかを考えていきます。  

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

写真によっては引きで撮っているもの、寄りで撮っているものなど、構図もバラバラで被写体との距離も違うかと思います。NG例のデザインで青い円をガイドにして見てみるとよくわかります。   そこでまずは被写体人物の頭の大きさを揃えることが大事です。こうすることで見た目上は被写体と焦点距離を合わせられるので、同じ条件で撮影されたのと等しくなります。青い円をガイドとして大きさを合わせ、それに沿ってそれぞれ被写体人物の頭の大きさを揃えています。  

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

次にポイントになるのは被写体の「目線の位置」です。同じくNG例のデザインを見てみます。基準として目線の位置に赤いラインを引いています。写真ごとにバラバラで揃っていない感じがよくわかります。   この目線の位置を写真ごとに揃えていきます。こうすることで被写体のポーズが違ってもある程度の統一感を出すことができます。揃える時にはまずガイドとなる線を引いた上で、写真の配置を調整するとわかりやすいですね。   上記の通り「被写体人物の頭の大きさ」「被写体人物の目線の位置」という2つのポイントを合わせたデザインはこちらになります。NG例のデザインと見比べてみていかがでしょうか。    

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

先ほどの頭の大きさと目線の位置を揃えたデザインもいいのですが、構図が揃っているとどうしても単調な印象を与えてしまい、写真から伝わるメッセージ性が低くなってしまいます。下記のように上記デザインでは被写体人物の顔の位置がちょうど写真の中央になるよう配置していました。   ですので、たくさん並べるような場合には少しアレンジすることでより良いデザインに仕上がります。今回は被写体人物の顔の向きやポーズに合わせてアシンメトリーの構図になるよう調整してみました。下記の通り写真の中央から少しずらして配置してみます。構図についてはこちらの記事「構図とアングルで決める写真のテーマ（構図編）」も参考にどうぞ。   このようにアレンジすることで、写真の並びの中にもリズムが生まれ、単調な印象を消すことができます。そして、被写体人物の表情やポーズから伝わるメッセージ性もより強調させることができます。実際に仕上がったデザインはこちらです。見比べてみると違いがわかりますね。   あとは、明るさやコントラスト、彩度やホワイトバランスといった色調を合わせたりするとよりデザインにまとまりが出てきますので、サイト全体のデザインに合わせて調整していきましょう。  

---

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