1. TOP
  2. お役立ち情報
  3. ノンデザイナーがデザイナーを目指す!⑥~意図が伝わる写真の上手な使い方~

ノンデザイナーがデザイナーを目指す!⑥
~意図が伝わる写真の上手な使い方~

ノンデザイナーがデザイナーを目指す!⑥~意図が伝わる写真の上手な使い方~

デザインに写真を使用するとき、デザイナーは明確な意図をもってその写真を使うことが大切です。素材としてとてもいい写真があっても、使い方を間違えると写真の魅力もデザインの意味も半減してしまいます。
今回は具体例と共にさまざまな写真の使い方のテクニックを学びましょう。

いい写真は大きく使う

写真を配置する際に「裁ち落とし」というテクニックがあります。

いい写真は大きく使う

左に比べて、右のレイアウトは迫力が出て人物の印象がより強くなりました。ここでは写真の上下を切り取り、枠いっぱいに配置しています。このようにまずは出来るだけ大きく写真を配置し、さらに裁ち落としによってデザインの印象を高めることができます。

では、こちらの例はどうでしょうか。

いい写真は大きく使う2

「裁ち落とし」で写真を大きく見せ、さらに画面全体に写真を配置しています。文章をしっかりと読ませたい意図があれば、左の例でもいいでしょう。しかし、写真を全面に使うことでビジュアルを強く見せることができ、印象に残るデザインになります。

ここで、注意しなければならないのは、「文字の乗せ方」です。写真の上に文字を乗せる場合、どうしても場所によっては読みづらくなってしまいます。右の例では文字の下に半透明の白いマットがひいてあります。些細なことですが文字の可読性を高めるためにもこのような工夫が必要になります。

顔の向きで記事の意味が変わる?

A.とB.の2つの記事があります。どちらもダミー文章なので文字から意味は読み取れません。それぞれどのような内容が書かれているのか想像してみましょう。

顔の向きで記事の意味が変わる?

A.の記事は「2人の男性が別々の話題をそれぞれ話している記事」と推測されます。対して、B.の記事は「2人の男性が1つのテーマについて対談をしている記事」のように見て取れます。同じレイアウトで同じ写真を使っているのにどうしてこのような受け取り方の違いが生まれるのでしょうか。

答えは「顔の向き」です。
A.の場合、それぞれ別の方向を向いているのでまったく別の話をしているような印象を受けますが、B.の記事は人物を向かい合わせることで2人が話し合っている雰囲気が出ています。

このように複数の人物の写真を使用する場合、顔の向きで受け手の印象が変わってしまうのできちんと記事の内容を理解して写真を配置することが重要です

好奇心を刺激する

楽しい雰囲気やイメージを膨らませてもらうためにたくさんの画像を並べて配置する「タイリング」というテクニックがあります。人は心理的に多くの情報を好む傾向があります。たくさん情報があれば想像力が沸き立ち、さまざまなイメージが浮かんできます。少ないバリエーションの中から商品を選ぶよりも、多くのバリエーションが揃った中から商品を選ぶ方がうれしいと感じるように、たくさん写真を並べることで好奇心を刺激し、想像力に訴えかけることができます。

タイリングで写真を配置した場合に、少しうっとおしく感じることがありますが、そんなときは写真を罫線で分けるテクニックを使うといいでしょう。

タイリング

右のように白い罫線を入れて写真を分けることで、密集感が緩和されて、写真同士が干渉しなくなります。

このように、楽しい雰囲気を打ち出すには効果的な「タイリング」ですが、使うシーンを間違えると逆効果になってしまいます。マーケティング的には、多くの選択肢を与えることでユーザーが選択を拒否してしまうため、何かを買ったり、決めてもらうときにはたくさんの写真を使ったレイアウトは不向きとされています。

背景と写真のイメージを統一する

基本的に清潔感のある白い背景がよく使われますが、高級感を訴求したい場合などには黒の背景を用いることもあります。

背景と写真のイメージを統一する

背景を黒にする場合、合わせる写真の選び方も重要になります。黒い背景で高級感を出したい場合は、メインで使用する写真の雰囲気を統一することで全体の印象がまとまります。

写真と背景をそれぞれ白ベースにしてみるとどうでしょうか。

背景と写真のイメージを統一する

どちらも高級感が薄れ、違和感の残るデザインになってしまいました。
このように、ただ黒い背景にしたからといって高級感が訴求できるわけではなく、れに見合った写真をチョイスすることも重要なポイントとなります

エッジをひと工夫する

白い背景でデザインを組むときには、写真のエッジの処理を工夫すると、よりやわらかい印象になります。

エッジをひと工夫する

まず、6つ並んだサブの写真の角を丸めています。さらに、左右を見比べるとよくわかりますが、メインの写真のエッジを溶かすように、ぼかしています。そうすることで、自然な感じが演出でき、一体感が生まれます。

他にもサブの写真を丸くトリミングしてもポップな印象になり、よりよい効果が得られるでしょう。

主役を決める

次の2つの記事を見比べてみましょう。どのような印象を受けるでしょうか。

主役を決める

左の人物の写真をメインにした記事は、この人のこだわりや思いについて書いてある記事という印象を受けますが、右のコーヒー豆をメインにした記事は、話題の中心がお店やモノについて書かれた記事という印象を受けます。このように写真の選び方によって印象が大きく変わります。複数の写真を使う場合は、それらの主従関係に注意し、文脈に沿って写真の大小の組み合わせも選ばなくてはいけません

動画による解説はこちら

ノンデザイナーがデザイナーを目指す!~意図が伝わる写真の上手な使い方 1/2 ~ 「前編」
ノンデザイナーがデザイナーを目指す!~意図が伝わる写真の上手な使い方 2/2 ~ 「後編」

最後に・・・

最後に・・・

写真の使い方を間違えると、記事の内容が正反対に捉えられてしまうことがわかりました。これはデザイナーにとっては致命的です。クライアントのOKも出ないでしょう。写真選びも重要ですが、目的のデザインに合った使い方をしないとデザインの方向性を見失ってしまうことになります。写真はクリエイティブの質を高める要素になりますが、正しく使わなければ意味がありません。写真が持つ印象をデザインに取り入れて、写真の魅力を活かしたデザインを心がけましょう。

関連記事