コラム

WEBサイトのTOPページはそのサイトがどういうものなのかを伝える非常に重要な役割を持っています。
自社の商品やサービスの強み・特徴をたったの5秒間で伝えなければなりません！
5秒間で見える部分はどこでしょうか？
ほとんどのサイトがメインビジュアルの部分かと思います。
このメインビジュアルでしっかりとアピールできなければ、離脱されてしまう可能性は大です！
そうならないためにも、本日はWEBサイトの命とも言えるメインビジュアルについてテクニックをご紹介します。

1.テキストの配置

人間の目は基本的に左から右に流れます。
キャッチコピー等の訴求する部分はなるべく左上に配置しましょう。
特に文字は流し読みされやすいので、一番最初に目に入ってくるところに配しておくのがベストです。
イメージ型の場合は中央にキャッチコピーやメッセージを入れると収まりが良くなります。

2.画像トリミング

これはイメージ型のメインビジュアルを作る際に重要になってきます。
例えば人物の写真を入れる時にその人物の背景や周りのものが入っていると良く分からない写真になってしまいます。
他にも商品の一部だけを移すような形でトリミングするとインパクトが出たりします。
人間は文字よりも写真やイラストに先に目が行きますので、画像でインパクトを出すだけで、印象が変わると思います。
トリミングはセンスが出るので、意外と重要ですよ！

3.訴求型の場合は空白を無くす

訴求型のメインビジュアルの場合は画像の中の空白を無くすことを心がけましょう！
キャッチコピーが少なければ、中の画像を増やしたり、何かオブジェクトになるものを入れたりして、
画像内の空白を埋めましょう。
そうすることで、インパクトが出て目に止まりやすくなります。
ただゴチャゴチャにならないように気をつけましょう！

4.キャッチコピーデザインの強弱

せっかく考えたキャッチコピーも一瞬で目に入らなければ意味が無くなってしまいます。
よくあるのが、同じ色・サイズでデザインされてしまっているパターンです。
もちろん一行だけのイメージ型のメイン画像などでは問題ないですが、
文字のデザインにも強弱を付けるだけで印象がガラッと変わります！

まず下記2点をデザイン前に決めましょう！
・メインビジュアルに入れるテキストの中で優先順位を決める
・キャッチコピーの中でも優先させるワードを決める

上記2点さえしっかり決めれば一番優先度の高いワードはもちろん大きく、
低いワードに関しては小さくという形でまずは作ってみましょう。
その次は色です。
優先度の高いワードは目立つ色を付けてあげることで、メリハリのあるデザインができます。

いかがでしたでしょうか？
上記のことを気をつけるだけでも、変わってくると思います！
特にTOPページの直帰率が高いサイトは改善してみる価値はあると思います。
みなさんも、さっそくご自身のホームページをチェックしてみましょう！