メインビジュアル作成のコツ

webサイトを作成するうえで必ず必要となるメインビジュアル(キービジュアル/メイン画像)。

サイト訪問時にまず目に留まる大きな領域だからこそ、どんなデザインにしたらいいか悩みがちなのではないでしょうか？

今回はこのメインビジュアルの役割、作り方、実際の参考画像を紹介していきます。

1.メインビジュアルとは

webサイトにアクセスしたユーザーは、アクセスしてから3秒でそのサイトが自分にとって有益かを判断するといいます。

その短い時間でユーザーに情報を伝えるのに重要なのが「メインビジュアル」です。

ユーザーは真っ先に目に留まるメインビジュアルで「何のECサイトか」「ターゲットは誰か？」「自分の欲しい情報があるか？」などを判断しますので、ひと目でユーザーに情報が伝わるデザインにする必要があります。

さぁメインビジュアルのデザインをしよう！…と思ったはいいけれど、どんな写真を使えばいい？どんな風に文字を入れたら効果的？などなど、手が止まってしまう方もいるのではないでしょうか？

そんなデザイン初心者の方に、簡単なポイントをお教えします。

先ほどお伝えしたとおり、ユーザーはサイトにアクセスしてすぐに「ターゲットは誰か？」「自分の欲しい情報があるか？」などを判断します。

そこで、「ターゲットはあなたです！」「あなたの欲しい商品がここにありますよ！」とアピールをしなくてはなりません。

そのため、どの層をターゲットにするか、商品の何をアピールするかなどをしっかり整理して、明確にする必要があります。これをしっかり整理できていると、どんなデザインにするか、どんな写真を使ったらいいかがはっきりしますし、デザインの方向性に迷うことが少なくなります。

「どんなデザインにしたらいいか分からない」という方は、ターゲット・目的が決まっていないのかもしれませんね。

メインビジュアルに使う写真は、ページ全体の雰囲気を左右する重要な役割を担います。そのため、写真の選び方がとても大切になってきます。

ターゲット・目的を明確にしたら、それらに合った写真を選びます。

例えば「まずはブランドイメージをしっかり伝えたい」ということであれば、イメージや雰囲気が伝わる写真に。飲食のECサイトであれば食欲を誘うようなものが好ましいですね。

よくありがちなのが、あれも伝えたい、これも伝えたい・・と欲張って文字をたくさん入れてしまうこと。そうすると結局何が言いたいのか分かりづらくなってしまう上に、文字が多く読んでもらえなくなってしまいます。そのため、なるべく入れる要素はシンプルにしましょう。

ここからは実際のECサイトで使われているメインビジュアルを業種別に紹介していきます。

シンプルで分かりやすいメインビジュアル。余計な情報は入れずに、商品写真のアップと商品名、アイコンのみで構成されています。

この画像のように「期間限定」など、ぱっと目を引く情報を入れるのもいいですね。

こちらは湯気が立って美味しそうなシズル感のある写真を使用しています。

商品写真を並べて、バリエーションを紹介しているところもポイントです。

商品イメージ写真を大胆に使ったメインビジュアル。

このように文字色を写真の中に使われている色と合わせると統一感が出ます。

また「○○受賞」などと商品の強みを入れると説得力がありますね。

グリッドで区切り、写真を配置した構図。

「WINTER ITEMS」というアイコンがあり、冬物商品が揃っていることがわかります。

複数の写真を使用する時は、このように同じトーンの写真を使うとごちゃつかず、統一感が出ます。

いかがでしょうか？

メインビジュアルはそのサイトを見るかどうかを決める重要な役割を担っています。

しっかりとユーザーの心を掴み、売り上げにつなげていきましょう！