「印象的なWebサイトを作るにはキービジュアルが重要」など、企業Webサイトに関わったことのある方であれば「キービジュアル」という単語を耳にしたことがあるかと思います。キービジュアルとは具体的にはどのような意味を持つ言葉で、なぜ重要視されているのでしょうか。
この記事ではキービジュアルという言葉の意味をご説明するとともに、Webでの重要性や作り方のポイントをご紹介します。
キービジュアル（メインビジュアル）とは
キービジュアルは、「メインビジュアル」と呼ばれることもあります。映画・アニメ・テレビドラマなど、コンテンツ作品のプロモーションを例に挙げると分かりやすいでしょう。話題の映画の公式Webサイトや広告には必ず、中心的な存在となる画像が配置されています。その画像を、キービジュアルと呼びます。
キービジュアルを用いるのは、映画やアニメなどの映像作品だけではありません。企業のWebサイトやカタログ・パンフレットなどでも、トップページや表紙にメインとなる画像を配置しています。それらもキービジュアルと呼ばれます。
ひと目見れば意図するイメージが伝わるように、企業ロゴやマークなどのCI、印象的なキャッチコピーや写真を取り入れた画像となっていることが一般的です。誰もが目にする箇所にキービジュアルを表示することで、主張したいメッセージや与えたい印象を端的に伝えることができます。
Webサイトにおけるキービジュアルの役割と重要性
Webサイトでのキービジュアルとは、サイト上のどの要素を指すのでしょうか。
前項でも少し述べましたが、トップページやフロントページに大きく表示する画像がキービジュアルにあたると考えて良いでしょう。
ほとんどのケースで、Webサイトを訪問した方が最初に目にする画像＝キービジュアルとなります。いわばサイトの顔のようなもので、キービジュアルを見たときの印象がそのWebサイトの第一印象になるともいえます。
誰でもキービジュアルを見るだけで「何を説明しているWebサイトか」「サイトによって何のメッセージを伝えようとしているか」を、即座に認識できることが重要です。それができていれば、そのキービジュアルは正しい役割を果たしていると考えてよいでしょう。
Webサイト上でキービジュアルが伝える主張は、おもに以下の3つとなります。
- 製品やサービス
- ブランドやコンテンツ作品のイメージ
- 自社に関して今伝えたいトピックス
キービジュアルは、第一印象となるインパクトを与えることや見る人の興味を引くことだけが目的ではありません。初見で好印象を持ってくれた人に、次の行動をとってもらうという役割も持っています。特にWebサイトの場合、「コンバージョン（購入や問い合わせなどの能動的なアクション）」や「エンゲージメント（企業やブランドに親しんでもらうこと）」へつなげることを意識する必要があるでしょう。
Webサイトにおいて、キービジュアルはとても重要かつさまざまな役割を持っているのです。
キービジュアル作成時のポイント
企業のメッセージを的確に伝え、ユーザーを引きつけるキービジュアルを作るには、どのような点を意識すると良いのでしょうか。ここでは、キービジュアルを作る際の要点についてご紹介します。
画像はシンプルで内容を的確に表すものに
キービジュアルの中心となる要素は、写真などの画像である場合が一般的です。画像を配置する際には、伝えるべきメッセージをすべて盛り込みたいなどと欲張らないことに留意しましょう。配置する画像が多すぎると、印象がぼやけてしまいかえってメッセージが伝わりにくくなります。画像はシンプルに1つとし、そのなかでもっとも自社が伝えたいことを表現するようにしましょう。
適宜余白を設けることも効果的
キービジュアルではメッセージを強く主張したいあまり、すき間なく画像を配置したいと考えがちです。しかし、逆に余白を適度に設けることで、むしろイメージに幅や奥行きを持たせられる場合もあります。
たとえば「人」の画像を配置する場合、前を見ている人の前方に余白を設ければ「未来を見ている人」をイメージできます。逆に人が背中を向けている方向に余白があれば「過去や思い出」を表現できます。
また、画像の周辺に余白を作ることで、中心に配置した画像をより引き立てる効果も期待できます。
色が持つイメージも活用しよう
キービジュアルでは色選びや配色も、イメージを大きく左右します。見る人に与える各色のポジティブなイメージは、以下のようになっています。
- 赤：情熱、強い意志
- 黄色：明るさ、活発さ、面白さ
- 青：静けさ、誠実さ
- 緑：癒し、ヘルシー、安心感
- 白：清潔さ、純粋さ、繊細さ
- 黒：おしゃれ、カッコよさ、重厚さ
- ピンク：愛情、やさしさ、柔軟性
- 紫：気高さ、ミステリアス
また、モノクロ画像のなかで強調したい箇所のみカラーを使用したり、敢えて馴染まない色同士の組み合わせでコントラストを強めたりするなど、配色でも印象を変化させられます。
Webサイト用キービジュアルの作り方
「Webサイトのイメージアップのため、新しくキービジュアルを作ろう」と考えている企業様も多いと思います。実際にキービジュアルを作るとなると、どのような方法があるのでしょうか。
ここではWebサイト用キービジュアルを制作するいくつかの手順と、特におすすめの方法をご紹介します。
1.自社内で制作する方法
社内にWeb部門や広告部門があり、グラフィックデザイナーやWebデザイナーが在籍しているなど、一定のリソースが整っていれば自社内での制作がおすすめです。
2.素材集などのイラストや写真を利用して制作する
無料または有料で利用できるWeb用の写真・イラスト素材を加工して、キービジュアルを制作することも可能です。
ただしその場合は、素材の商用利用が認められているか必ず確認が必要です。他者に著作権があるものを無断で使用すると法令違反になるため、十分に注意しましょう。
また、Webサイトのトップページに表示するキービジュアルを作成する場合は、Web上の素材などを用いず、オリジナルの画像を使用してキービジュアルを作成するほうが良いでしょう。
3.専門のデザイン会社や制作会社へ外注して制作を依頼する
3つ目は、Webサイトの制作やデザインを専門とする制作会社へ依頼し、キービジュアルの制作を行ってもらう方法です。自社にデザイン制作関連のリソースを持っていない企業様には、もっともおすすめの選択肢といえるでしょう。
制作物自体のクオリティの高さはもちろんのこと、希望のスケジュールや具体的な制作物のイメージなどが明確な場合は、確実に対応してもらえるため安心です。特に、キービジュアルに関して盛り込みたいメッセージ性や詳細なイメージをお持ちであれば、詳細なヒアリングや打合せによってご要望を反映できる制作会社を選びましょう。
弊社ジーアングルでも、Webサイト用キービジュアルの制作を承っております。ご予算やスケジュールに合わせ、詳しいヒアリングのもとにご対応できますので、キービジュアル制作の依頼先にお悩みであればぜひお気軽にご相談ください。
おわりに
見た人の記憶に残るWebサイトには、必ずといって良いほど印象的なキービジュアルが用いられています。見た人の印象に残るキービジュアルを作成するには、メッセージが的確に伝わるオリジナルのイラストや写真と、その配置や配色を適切に行うだけのデザイン力が必要です。
「自社サイトに長い歴史がある分、テキスト情報に偏りがちな状況を変えたい」「自社のCI刷新にともない、新たなキービジュアルを核としたサイトリニューアルをしたい」など、Web上のキービジュアルで自社を印象付けたいとお考えなら、ジーアングルまでお問い合わせください。企業のカラーや社風、今後のビジョンなどをきめ細かにお伺いし、伝わるWebサイト作りのお手伝いをいたします。
