サイトの顔!メインビジュアルの鉄板レイアウト!

サイトの顔!メインビジュアルの鉄板レイアウト!

こんにちは、デザイナーのレミーです。
WEBデザインをする上で一番目を引くメインビジュアル、制作する上で何度も修正を重ねる部分ですね。
メインビジュアル(とコピー)の役割は、何のサイトなのかをユーザーに対し分かりやすく「伝える」ことです。
今回は、メインビジュアルが素敵なサイトを参考に「メインビジュアルの鉄板レイアウト」についてまとめてみました!

レイアウトの印象

メインビジュアルのレイアウトは「全体画像に中央寄せのテキスト」、「画像の上下どちらかにテキスト」、「画像の左右どちらかにテキスト」が定番です。
同じ画像やテキストでもどこに画像を配置するか、どこにテキストを配置するかで与える印象も異なります。

1.「全体画像に中央寄せのテキスト」の印象
2.「画像の上下どちらかにテキスト」の印象
3.「画像の左右どちらかにテキスト」の印象

1.「全体画像に中央寄せのテキスト」の印象

全体画像に中央寄せのテキストを配置した場合、画像の面積が広くインパクトがあるため画像の印象がサイトの印象になります。
クオリティの高い雰囲気のある写真(またはイラスト)を使えば、その分印象の強いサイトになります。

img

マーケティング支援BOKURA様のサイト。全体がイラストで文字が中央寄せになっています。
イラストの面積が広い分、イラストの雰囲気がそのままサイトの世界観に直結しています。

 

img02

ウェブマガジンあづんど村のサイト。田んぼの風景の写真にテキストを中央配置することで、写真とコピーがリンクし「お米ができるまで」を連想させています。

2.「画像の上下どちらかにテキスト」の印象

画像の上下どちらかにテキストを配置した場合、写真もしっかりと見せつつ、コピーも頭にはいってくるレイアウトになります。
商品紹介サイトによく使用されるレイアウトです。

img03

株式会社クレアフォーム様のサイト。商品のテレビフレームカバーの上にコピーが配置されています。
商品がスライドすることで、コピーの「えらぶように」とリンクしています。

 

img04

新型プリウス」の紹介サイト。プリウスの画像の上にコピーが配置されています。
プリウスの写真が目立ちながらもテキストの情報もきちんと伝わります。

3.「画像の左右どちらかにテキスト」の印象

画像の左右どちらかにテキストを配置した場合は、テキストも画像も見やすく認識しやすくなります。
こちらも商品紹介サイトでよく使われているレイアウトです。

img05

apple様のサイト。商品画像の横に、名称とコピーがレイアウトされています。
商品画像とコピーが並ぶことで、イメージと内容が一緒に認識できます。

img06

スマホ販売TONE様のサイト。使用イメージの写真の横にキャンペーンがレイアウトされています。
キャンペーン内容が目立ちながらも、使用イメージも伝わってきます。

まとめ

例えクオリティの高い写真や良いキャッチコピーを使用していても、レイアウトが上手くできていなければ良いサイトとは言えません。ユーザーにとって分かりやすいメインビジュアルをデザインして、うまく「伝える」ことのできるデザインをしていきたいですね!


Previous: 色で決まる!ぱっと見の印象作り。 Next: 「美味しそう!」シズル感のあるデザインって?

© 2017 ALL CONNECT Inc. All Rights Reserved.