あえて写真に文字をかぶせるデザインテクニック

今回は、写真の上に文字をかぶせるレイアウトのデザインテクニックをお伝えします!

限られたスペースを有効に使えるため、雑誌デザインやwebデザインでもよく使われてるテクニックなので、ぜひ参考にしてみてください。

今回のテクニック:”あえて”写真に文字をかぶせる

あえて写真の上に文字をかぶせることで、視線誘導をさせたり、スペースにゆとりがでて窮屈感を解消できたり、写真(ビジュアル)を大きく使いインパクトを作り出す、といった効果が期待できるレイアウトのテクニックです。

上下に余白を空けて文字をかぶせる

なるべく写真を大きく使いつつ、上下に余白のスペースを作り出し、文字の半分程度がかぶるように配置します。

そうすることで「写真」と「文字」どちらも大きく配置することができ程よい余白も生まれ、限られているスペースを有効的に使うことができます。

縦長写真を使う場合に、できるだけ大きく写真を配置すると、文字を置くスペースが少なくなってしまいます。少ないスペースに文字を配置すると窮屈なイメージになってしまいます。

1文字だけはみ出してかぶせる

あえて文字の1文字目だけはみ出してかぶせることで、1文字だけずれて見えるのが不自然に見えるのですが、それが視線を誘導をさせることができるというテクニックです。

不自然さをあえてデザインの中に作り出すことで、読ませたい文字に誘導させることができます。

写真の中に、すべてを文字を収めてしまうと不自然さを無くなりますが、文字が目立たなくなってしまいます。(デザイン上の要素の優先度によっては、こちらの方が正解の場合ももちろんあります)

写真の端(左右)に文字をかぶせる

1番目に紹介した「上下に余白を空けて文字をかぶせる」を左右に文字を置くパターンになります。(左右どちらに置くでもOKです)

こちらも写真も文字も大きく配置することができます。このパターンは紙デザインで使わてましたが、最近ではwebデザインでもよく見かけるようになりました。

左右のどちらかに文字を乗せるスペースがある写真、写真の上に文字を乗せても視認性(=文字の確認のしやすさ)が確保できる写真素材を選ぶこともポイントになってきます。

写真にかぶらないようにトリミングしてみると、写真が小さくなってしまいダイナミックさがイマイチでないレイアウトになってしまいます。

さいごに

今回は”あえて”写真に文字をかぶせるというテクニックでした!

文字要素や写真構図に応じて、どのようなレイアウトにするかは都度考えていかなければなりません。空いているスペースにレイアウトするのではなく、あえて写真に文字かぶせることでレイアウトの選択肢が増えます。

雑誌でもwebでもスペースは限られているので、写真と文字を効果的にレイアウトするために使われるテクニックなので、ぜひ参考にしてみてくださいね。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA