【実践テクニック#1】複数の人物写真を並べるデザインで気をつけるポイント
最終更新日: Update!!
コーポレートサイトなどを制作していると、社員紹介のページや求人関連のインタビューページというようなコンテンツを作成する機会もよくあるかと思いますが、そんな時に人物写真を複数並列して配置するレイアウトでデザインしたりします。今回はそのような人物写真を複数並べて配置するようなデザインを作成するときのポイントについて個人的に気をつけている点をまとめていきたいと思います。
今回の記事では、とある会社の社員紹介という例をサンプルに見ていきたいと思います。まずはこちらのNG例のデザインを見てみます。
どうでしょうか、写真の被写体である人物の大きさや構図がバラバラで、どことなく落ち着かない印象で、まとまりがないデザインになってしまっています。そこで、このデザインに対してどのようなポイントに気をつけていけば、整ったデザインになるかを考えていきます。
そこでまずは被写体人物の頭の大きさを揃えることが大事です。こうすることで見た目上は被写体と焦点距離を合わせられるので、同じ条件で撮影されたのと等しくなります。青い円をガイドとして大きさを合わせ、それに沿ってそれぞれ被写体人物の頭の大きさを揃えています。
この目線の位置を写真ごとに揃えていきます。こうすることで被写体のポーズが違ってもある程度の統一感を出すことができます。揃える時にはまずガイドとなる線を引いた上で、写真の配置を調整するとわかりやすいですね。
上記の通り「被写体人物の頭の大きさ」「被写体人物の目線の位置」という2つのポイントを合わせたデザインはこちらになります。NG例のデザインと見比べてみていかがでしょうか。
ですので、たくさん並べるような場合には少しアレンジすることでより良いデザインに仕上がります。今回は被写体人物の顔の向きやポーズに合わせてアシンメトリーの構図になるよう調整してみました。下記の通り写真の中央から少しずらして配置してみます。構図についてはこちらの記事「構図とアングルで決める写真のテーマ(構図編)」も参考にどうぞ。
このようにアレンジすることで、写真の並びの中にもリズムが生まれ、単調な印象を消すことができます。そして、被写体人物の表情やポーズから伝わるメッセージ性もより強調させることができます。実際に仕上がったデザインはこちらです。見比べてみると違いがわかりますね。
あとは、明るさやコントラスト、彩度やホワイトバランスといった色調を合わせたりするとよりデザインにまとまりが出てきますので、サイト全体のデザインに合わせて調整していきましょう。
今回は複数の人物写真を並べるデザインを作成する際に気をつけるポイントについてまとめてみました。クライアントワークでも要件に含まれることが結構多いのではないでしょうか。ぜひそのような機会には試してみてはいかがでしょうか。

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

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


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


今回は複数の人物写真を並べるデザインを作成する際に気をつけるポイントについてまとめてみました。クライアントワークでも要件に含まれることが結構多いのではないでしょうか。ぜひそのような機会には試してみてはいかがでしょうか。
sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories