キービジュアルとは？意味からWebでの役割、作り方のコツまで解説

Webサイト制作において、キービジュアルに頭を悩ませている人も多いでしょう。
キービジュアルはいわばWebサイトの顔。どうしたって考えこんでしまうのも頷けます。

さて、本記事ではWebサイトのキービジュアルについて徹底解説。
意味や役割のおさらいにはじまり、作り方のコツ、注意点、参考サイトの紹介に至るまで幅広く言及します。

キービジュアルの意味とWebでの役割

キービジュアルとは、各媒体におけるメインのイメージ画像のことです。
パンフレットやカタログなどの紙媒体にも当てはまりますが、Webサイトの場合、ファーストビューに配置される大きな画像要素が該当します。
ユーザーがそのサイトを訪れてまず目に入るのは、おそらくキービジュアルでしょう。それゆえ、冒頭で触れた通り、Webサイトの顔といっても過言ではありません。

キービジュアルが意味をなすのは、「そのWebサイトが何のために存在しているのか、何を伝えるためのものなのか」ユーザーが認識したときです。
すなわち、それが役割でもあります。

ユーザーへ訴求するメッセージの内容はさまざまですが、主流は「自社のサービス」「旬な情報」「コンテンツやブランドのイメージ」の3つです。
また、キービジュアルは一目でユーザーの興味関心を惹きつけることに重きを置かれがちですが、Webサイトのコンバージョン率やエンゲージメントの向上にも工夫次第でつながります。
集客を考えるならば、キービジュアルが鍵になるのはまさに一目瞭然です。

なお、“メインビジュアル”と呼ばれることもありますが、同じものを指す認識でいいでしょう。

おさえておきたいキービジュアルの基本

魅力的なキービジュアルを作るためにも、まず基礎が大事。特に事前設計は、入念に行いましょう。最低限おさえておきたいポイントは、以下の通りです。

「何のために」伝えるのか

Webサイトを運用するにあたって、少なからず目的があるはずです。
おそらく「新商品やサービスをアピールしたい」「イベントの集客を行いたい」「資料請求、問い合わせページに誘導したい」「会員登録してもらいたい」などでしょうか。
いずれにせよゴールを明確にしておくことは大切です。
仮に見栄えが美しいだけのキービジュアルであったなら、インパクトこそ与えることができても、収益に結びつけるところまでは届かないかもしれません。この場合、コンバージョンポイントを目立たせるといったそれなりの工夫が欠かせないと考えます。言い換えると、ゴールから逆算した仕掛けが必要です。すなわち、やはりゴールの設定が求められます。

「誰に」伝えるのか

「誰に向けてメッセージを発信するのか」の設定もキービジュアルには大事です。
これは商品やサービスの性質にも関わってきます。
一般的にターゲット層は「性別」「世代」「シチュエーション」の3つで絞り込めるといいでしょう。
また、閲覧されるデバイスも視野に入れる必要があります。
スマホとPCのディスプレイでは表示される情報量が異なることを加味し、どちらに合わせていくか、データなどを根拠に決めておきましょう。

「何を」用いるのか

目的とターゲット層が明確になれば、「どのようにメッセージを伝えるか」を検討する段階です。
「写真かイラストか」「アニメーションか一枚絵か」「被写体は人か物か」等々、さまざまな選択肢のなかジャッジを下し、具体的な構想を練っていきます。
一つひとつの要素を決めつつ「目的」と「ターゲット層」に齟齬が生じていないかどうかまで、念のために確認するようにしましょう。

魅力的なキービジュアルはこう作る！

魅力的なキービジュアルを作るのに絶対的な正解はありません。ケースバイケースで効果的なアプローチ方法が異なります。しかし、セオリーが存在しているのも事実。
初心者もしくはまだ慣れていないという方は、まず、以下の項目に気をつけてみてはいかがでしょうか。

画像の打ち出し方

画像の表示方法を一工夫するとインパクトが生まれやすいです。
常套手段としては「フレーミング」「タイリング」などが挙げられます。
前者は画像を特定のモチーフの形に切り抜いてデザインに盛り込むという手法です。
たとえば、雪景色やクリスマスイルミネーションといった背景画像を雪の結晶の形にフレーミングすると、冬というテーマ性が強調されます。
後者は何枚かの画像を貼り合わせてビジュアルにリズム感を持たせるアプローチです。同じサイズに設定して並べれば規則性を印象として抱かせやすく、逆にランダムなサイズ設定で貼り合わせると独特の躍動感が生まれます。

色味のバランス

文字や画像のレイアウトだけでなく、ビジュアル全体の色見でバランスを整えることも大事です。
多くの色が混在し、印象づけたい部分が前に出てこないようであれば、カラーコントラストに大胆なメリハリをつけましょう。
たとえば、背景画像を一旦モノクロ調で統一したあとで、アピールしたい商品や文字の部分だけにピンポイントで目立つカラーを配色すると、わかりやすく目立たせることができます。一応、寒色や暖色、明度や彩度といった要素に気をつけることは前提です。
また、背景にぼかし効果を入れるだけでも前面に配置されたオブジェクトと対比を生み出せます。
いずれにせよ、どこかしっくりこない場合は、思い切った配色をしてみてください。意外と功を奏すケースが多いです。

余白の使い方

デザイン全般にいえることですが、余白は使い方次第で深みを醸し出せます。
ポピュラーな例としては、人を被写体とした際の視線が挙げられるでしょう。一般的に人物の画像で最初に見られるのは「顔」で次が「視線」であるといわれています。そのため、人物の横に大きな余白を取り、視線の先にメッセージや重要なオブジェクトを配置するというアプローチは自然な誘導にはもってこいです。逆に視線の先にあえて何も配置しないパターンもあります。これは見る人の想像力を掻き立て、結果的にユーザーの興味・関心を高めるテクニックです。
そもそも、なぜ余白は効果的なのでしょうか。それは、いたってシンプル。もちろん、スタイリッシュな印象を与えることもありますが、何よりオブジェクトの存在感を際立たせるところに意味があると考えます。
キービジュアルで主張しているものが節操なく感じたならば、一旦大きく余白を使うのも一つの手です。

キービジュアル制作時の注意点

キービジュアル制作にあたって注意したいのは、情報を詰め込みすぎないことです。前述の余白をうまく使う話ともつながってきますが、とにかく視認性を高めたうえで伝えたいことを主張しなければ、たちまちユーザーは困惑するでしょう。
Webサイトを訪れてからそのサイト内を巡回するかどうかを決めるまでにかかる時間は、大体2～3秒との説が濃厚です。そうしたなか、この短い時間で複雑なものを見せてしまっては、ユーザーの興味や関心を惹きつけるどころか、即離脱にさえ及びかねません。直帰率の高いページの傾向として、「ファーストビューで何のサイトか分からなかった」という意見が多いのも、そうしたユーザー心理・行動が裏付けされているといえます。
ただ一方で裏を返せば、2～3秒で大まかな内容を把握できるキービジュアルにすればいいということです。

具体的に各リソースについて言及すると、写真やイラストについては、テーマを一つに絞り、オブジェクト自体も必要最低限にとどめることをおすすめします。
また、人間が1秒間に読める文字は平均約4～5文字です。3秒間であれば最大15文字程度。つまり、キービジュアルにおいてテキストで伝えたいメッセージは、この文字数から画像要素を差し引いた10文字前後が目安になるかもしれません。
その辺りのデータも含め、キービジュアルは慎重に制作しましょう。

キービジュアルの参考になるWebサイト

キービジュアルを作る際、経験問わず、他のWebサイトのチェックは不可欠です。それは、競合やトレンドの分析に役立つだけでなく、学びとしての収穫が大きいものだと考えます。もちろん、デザインをそのまま真似するのは厳禁ですが、テイストやニュアンスの出し方、細部のこだわりなどアプローチの引き出しを増やすにはもってこいです。
以下、おすすめの参考サイトを紹介します。

RESPONSIVE WEB DESIGN JP

日本国内の厳選されたレスポンシブ対応のギャラリーサイト「Responsive Web Design JP」です。
いまや当たり前となったレスポンシブデザイン。だからこそ、キービジュアルを参考にするうえでは、実践的なチェックが可能です。
各デバイスのサイズでどのように映えるのか。お手本にしたい部分だけでなく、気になるところも見つけながら、有意義に活用してみてください。

日本の秀逸なレスポンシブWebデザインを集めた「Responsive Web Design JP」

Web Design Clip [L]

「Web Design Clip [L]」では、LP中心に国内外を問わず優れたデザインのWebサイトが掲載されています。縦長サイトでのキービジュアル制作には特に役立つはずです。
「テキスト情報が多いのにもかかわらず、なぜか内容が頭に入りやすい」
「自分が制作するなら、ここは余白にするだろう」
「打ち出すオブジェクトが商品一択で潔い！」
漠然とした所感だけでなく、気づきや発見も生まれることでしょう。

LP・ランディングページのWebギャラリー・クリップ集「Web Design Clip [L]」

基本とセオリーと経験を駆使して理想のキービジュアルを作ろう！

たかがキービジュアル？されどキービジュアル？
いやいや文句なし。議論の余地なし。キービジュアルはどうしたって重要です。Webサイトの成否を大きく左右するポイントであるのに違いありません。だからこそ伝えたいメッセージやアピールポイントを適切に表現する術と経験が必要です。

一瞥してユーザーの心を捉える魔法のようなキービジュアルは確かに存在します。ただ、実際は基本やセオリーが土台にあったうえでの産物のはずです。
少ない情報量で最大限の魅力を発揮するには、一歩一歩の積み重ねがどうしたって大切。拙稿にて挙げた参考サイトに倣ってもオッケー。ときにABテストを交えるなどデータを活用してもいいでしょう。
試行錯誤しながら、あなたの理想のキービジュアルを編み出してください。