こんにちは！ふたっぱインターン10月生のニシグチです！
今日は自分で制作しているサイトのメインビジュアルを作成していたのですが、なかなか思うように作れませんでした…。
なので今日は、メインビジュアルについて今日勉強したことを書いていきます！
そもそもメインビジュアルとは？
メインビジュアルとは、サイトの上部にある大きなイメージの部分です。
メインビジュアルの他に、キービジュアルやタイトルバナーなんて言われたりします。
ここはサイトを見にきた人が最初に見る部分であり、非常に重要な部分です。
ここを効果的に使って、このサイトがどういうサイトなのかユーザーに伝えたり、押し出したい情報などを表示してユーザーに興味を持ってもらえるようにします。
裏返せば、ここを効果的に使えていないと、ユーザーが「欲しい情報はここには無い」と判断して帰ってしまったり、見づらさを感じて帰ってしまう。なんてことになってしまいます。
どれだけ中身のコンテンツが良くても、そこでユーザーが判断して、中身を見てもらえない。ということが起こります。
ちなみに、ページを開いて一番最初に見える範囲をファーストビューなんて言ったりします。
そしてそのファーストビューで返ってしまうユーザーの割合を直帰率といいます。
つまり、ファーストビューで見える範囲にあるメインビジュアルを、しっかり作らないとコンバージョンにもつなげていけないのです。
というワケで実際作っていきます。
ですが、やはりあまり良いのができません。
そこでメインビジュアルのよくある構成なんかを調べてみました。
まず、多くあると思われるのが、左にキャッチコピー。右にイメージというパターンです。
これは左に一番読んで欲しい文章を配置し、その後に写真などで具体的なイメージを持ってもらうというものです。
そして逆のパターンで、左にイメージ、右に文章のパターン。
こちらは左にイメージを配置することで、そのイメージが強調され、右に説明文や表などを記してわかりやすくしているものです。
どちらも左に一番見て欲しい情報を置くというのが共通していますね。
これは一般的に、人はWEBページを見るときに左から右に視線が動くと言われているからです。
そして中央揃え
こちらはイメージに文字が被るので、イメージ自体の印象は薄くなりますが、文字にインパクトを持たせることができます。
タイポグラフィなんか使うときに良いようです。
他にもいろいろやり方はたくさんあるようなんですが、やはり見て勉強ですね。
「メインビジュアル 参考」などで調べると、メインビジュアルのみ集めているサイトとかが出てくるので、とても参考になります。
このような構成以外にも、大事な要素として文字のバランスがあります。
重要な文や目立たせたい文などを、他の字よりも大きいサイズにし、周りの色とは違う色などを使って目立たせるなどして、ユーザーの目をひきつけます。
同じようなサイズだと目立たず、どこが重要な部分かがユーザーにはわからなくなります。
これらを踏まえたうえで、サイトに合った効果的なメインビジュアルを作成するワケですね。
こちらもバナーと同じで、ちょっとした色使いや、画像の補正などでユーザーの反応が変わるらしいので、できるだけ良いものを作っていきたいです。
それでは今日はこのへんで失礼します。
ニシグチ