写真と文字を一体化しデザインイメージを膨らませ、用途・目的で使い分けるポイントとは!?

写真と文字を一体化しデザインイメージを膨らませ、用途・目的で使い分けるポイントとは!?

紙面のデザインイメージを膨らませる技法に、写真と文字を一体化させる方法があります。これはシンプルでありながら効果が大きいデザイン手法です。

写真は用途・目的に合わせて使い分ける必要があります。複数枚の写真をメインとサブで役割を与えて情報のコントロールを行いましょう。

この記事では写真の用途・目的ごとの使い分け方や写真と文字を組み合わせる技法を説明します。

写真に用途・目的等の役割を与えて使い分ける方法とは!?

写真のメインとサブ、被写体の大きさを揃え情報をコントロールする。

写真に用途や目的等の役割を与えるには、使い分け方が大切です。

複数枚の写真をデザインレイアウトする際は、これからデザインレイアウトする制作物の用途や目的に応じて、メインとなる写真要素、サブとなる写真要素などの役割を考え、写真情報をデザイン的にコントロールする方法を説明していきます。

用途・目的を考え写真の被写体サイズを揃える

デザインにおける写真のインパクトや美しさはとても大きいです。

写真サイズや被写体のサイズ、使用する写真同士の配置方法を整え調整することで、制作物から伝えたい内容や情報を視覚的にコントロール(用途や目的を与える)することができます。

複数の写真要素をデザインレイアウトする際は、使用するメインの写真要素やサブで使用する写真要素などの役割を考え、写真や被写体のサイズや配置方法、間隔を調整することが重要です。

目的として関係性を強調したい場合は写真同士を近くに配置し、関係性を弱めたい場合は写真同士の距離を離して写真を配置すると、デザインレイアウトの情報に違いがでてきます。ゲシュタルトの法則を取り入れ考えていきましょう。ゲシュタルトの法則は下記を参考にしてください。

「デザインはゲシュタルトの法則でグループ化が有効!綺麗な演出は「コントラスト」と「揃える」で決まる!」はこちらから

デザインレイアウトで写真の用途や目的を表現する方法として、ここでは下図の4枚の写真を用意しました。下図の写真をデザインレイアウトの用途・目的ごとに使い分けた例を説明します。

今回使用する写真素材は下図の通りです。

今回説明で使用する写真4点です。

日本料亭の紹介ページを想定し、下図4枚の写真を使用してデザインレイアウトした例を説明します。

外観の良さを伝えるデザインレイアウト

メイン写真に外観の写真を使用しました。

外観の良さを伝えるデザインレイアウト

被写体は斜めになっていますが、建物自体のシンメトリーな外観の特徴と写真の構図を生かし、レイアウトは対称性のあるデザイン構図を使用しています。

サブに内覧と日本料理の写真を使い、左右対称に同じサイズで写真を配置することで写真同士の関係性を際立たせています。

内覧の雰囲気を伝えるデザインレイアウト

メイン写真に内覧の写真を使用しました。

内覧の雰囲気を伝えるデザインレイアウト

メイン写真の横にサブで外観の写真を配置しました。内覧の写真と外観の写真を近くに配置することで写真同士の関係性を際立たせています。

また、日本料亭の雰囲気を伝えるために、料理の写真と調理の写真を近づけてグループ化し小さめに配置しています。

料理のイメージを伝えるデザインレイアウト

料理の写真をメインに使って見た目のディテールを際立たせています。

料理のイメージを伝えるデザインレイアウト

実際にその場所に居なくても写真やデザインレイアウトを通して味や香りが伝わる情報が伝わってきます。

また近くに調理している写真を配置することで、料理の情報が写真を通して強調されます。お店の雰囲気が読み手にわかるように、少し距離を置いて外観と内覧の写真を小さめに配置しています。

調理やシェフ、料理長を紹介するデザインレイアウト

調理をしている写真をメインに大きく配置しました。

調理やシェフ、料理長を紹介するようなデザインレイアウト

調理現場である厨房の雰囲気も鮮明に伝わります。近くに料理の写真を配置すると、料理人としての食人技が雰囲気で強調されます。

また働いている現場の店舗がどのような雰囲気なのか伝わるように少し距離を離して外観と内覧の写真を配置しています。

雰囲気全体を伝えるデザインレイアウト

写真のサイズを全て揃えて同じ距離感で配置すると、すべての写真情報が均等に相手に伝わるため、日本料亭全体の雰囲気を伝えることができます。

このような写真配置は、似た内容の写真要素を近くに配置します。次に読み手の視線の流れを意識して配置します。この2つを意識してデザインの目的を表現すると効果的です。

例えば、料理の写真の横に外観の写真を配置します。するとイメージする順番が合わないため、何の目的なのか用途なのか読み手にはわかりづらく、あまり良いイメージを想像できません。

極力同じ内容の写真や、良いイメージを連想させる写真同士を近くに配置すると目的や用途が明確になります。

また読み手は、横組みの場合は左上から右下(Z型)へ向かって視線が動き、縦組みの場合は右上から左下へ(N型)へ向かって視線が動きます。

この動きを意識して、読み手の視線を誘導するとより良い紙面に仕上がります。またデザインレイアウトの目的や用途が明確になることだと感じます。

下図を見てみましょう。料理の写真と外観の写真には共通点が少ないため、これらを並べて配置するとイメージが飛んでしまい読み手に違和感が生じてしまいます。

料理の写真と外観の写真には共通点が少ない

では次の下図を見てみましょう。

料理→調理→内覧→外観のように順番を意識して順序立てると、写真同士の関連性を読み手は認識しやすくなります。

写真同士の関連性を認識しやすい

写真同士の関連性がでることで、デザインレイアウトにストーリー性を感じられます。

読み手にイメージを膨らませる写真と文字を使ったデザインのポイントとは!?

写真や文字の関係や文字レイアウト技法を上手に使おう!

読み手のイメージを膨らませるには、「写真と文字」を組み合わせた技法でイメージを膨らませることができます。写真と文字を一体化させて、デザインレイアウトするシンプルな技法ですがとても効果的です。デザインの目的や用途に合わせやすい手法です。

デザインレイアウトにおける写真と文字の関係を意識しよう。

写真要素の上に文字や文章をレイアウトすると、デザインに一体感を感じられます。文字や文章をレイアウトすると相乗効果で写真の見栄えがよくなります。

読み手はイメージを膨らませながら文字を読むためスムーズな情報提供が可能になります。

デザインレイアウトにおける文字のレイアウト方法を覚えよう!

文字や文章を写真の上に配置するレイアウトを行う場合には、文字と背景のコントラストが十分であるかを確認しておく必要があります。

基本的に文字や文章は写真の上に情報量が少ない部分へ配置します。わかりやすく説明すると文字や文章を配置しても見づらくならない部分に配置します。

情報量の多い写真を使用する場合は、十分にコントラストが確保できる部分を見つけるか、または配置する文字に装飾を行いデザイン的な処理を加えることが必要です。

ここでの写真の情報量とは文字や文章を配置する部分の色の情報のことを言います。たくさんの色情報がある場合は、その上に配置しても見づらくなる傾向にあります。

簡単にまとめると「写真の情報量が多い、少ないとは写真の色数やコントラストの差」のことです。色数が少なく、コントラストの幅が小さい場合を「情報量が少ない」といいます。

ここではいくつか参考例を下図に用意しましたので見ていきましょう。

下図は、情報量の少ない写真です。

情報量が少ない写真

色のコントラストは幅がありますが、ほぼ同系色であるため情報量は少ない写真です。

下図は、情報量の多い写真です。

情報量が多い写真

色のコントラストが大きく、色数も多いです。これは情報量の多い写真です。

情報量が多い写真は、トリミングで情報量の少ない箇所を作る!

デザインレイアウトでは、情報量の多い写真の上に文字を乗せることもあります。

目的や用途から大きく外れることがない範囲で写真をトリミングするなどして背景とのコントラストを十分に確保できるスペースを作るようにします。

写真の上に文字を乗せるスペースが窮屈だと圧迫感を感じてしまいます。空間を確保して見た目に美しくなるように調整を行います。下図は情報量の多い写真に対してどのようにすると見え方が変わるかを例えたレイアウトです。

下図は、写真の情報量が多く背景とのコントラストが確保できていない場合。

背景とのコントラストが確保できていない

情報量の多い箇所に文字を乗せると背景とのコントラストを十分に確保できないため、文字がとても読みづらくなります。

下図は、情報量の少ない箇所に文字を配置しているがスペースが不十分。

情報量が少ないがスペース不十分

情報量の少ない箇所に文字を配置していますが、スペースが狭いために文字の周囲に十分な余白がありません。窮屈なイメージになります。

下図は、トリミングを行い十分なスペースを確保できている。

トリミングしてスペースを確保できている

写真からスペースを確保できる箇所を見つけてトリミングをしています。

情報量の少ない箇所を十分に確保して、そこに文字を乗せると写真と文字に一体感がでてきます。読み手にも認識しやすく、美しく魅力的なデザインになります。

下図は、トリミングと文字の装飾を行った場合。

情報量が多くても装飾や加工で見え方が変わる

意図的に情報量が多い部分に文字を配置しています。白の半透明の帯を入れ文字を袋文字とドロップシャドウを薄く入れるなどすることで、情報量の多い部分にも文字要素を配置しても美しい仕上がりになる。

デザインイメージを膨らませる写真への文字配置と写真は用途・目的で使わけるポイントのまとめ

  • 写真をデザインレイアウトする際はメインとサブの役割を考える。
  • 写真は視覚的にコントロールすることができるため配置方法や間隔を揃えると良い。
  • 写真に文字を配置する場合は十分なスペースを確保してデザインすること。

普段何気なく見ている広告やチラシ、デザインされたものは写真に何かしらの目的や用途等の役割を与えているからこそ見た目に美しくなっていることだと感じます。

写真や文字をどのように配置しデザインレイアウトするかにより読み手へのイメージは大きく異なります。

写真1枚1枚の特徴を掴みつつ最適な配置方法と文字レイアウト考えていきましょう。これを身につけることで初心者でも美しく綺麗なデザインレイアウトを実現できます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする