メインビジュアルはWebサイトの顔と言える部分で、メインビジュアルの質が高いWebサイトは、サイト全体、さらにはサービスの質まで高い印象を与えることができます。また、メインビジュアルが変わるだけでもガラッと違うWebサイトになったような印象を与える場合もあります。それだけメインビジュアルが与える影響は大きいのです。
ここではそんなメインビジュアルに焦点を当て、Webサイトの魅力が伝わるメインビジュアルの作り方と参考デザインをご紹介します。
目次
主にWebサイトのトップページ上部に配置されるイメージ画像のことで、Webサイトを訪れたユーザーが最初に目にする部分です。
映画やドラマの宣伝では「キービジュアル公開」といった表現をよく耳にします。そのため、メインビジュアルよりもキービジュアルという呼び方の方が一般的には馴染みがあるかもしれません。ただ、実際のところは同じ映画やドラマの宣伝でも「メインビジュアル公開」と表現されている場面もあり、同じ意味合いで使われているようです。
メインビジュアルは他にも、トップ画像、タイトル画像、ヒーローイメージなど様々な呼び方で指し示されています。
メインビジュアルはファーストビューと同義とされることもありますが、一般的にはファーストビューに含まれる要素の1つです。
ファーストビューとは、Webページ上部の一度もスクロールせずに表示されているエリアを指します。例えば、ブランディングサイトなど、ファーストビューにメインビジュアルと少しのナビゲーションしか表示されない場合もあります。一方で、不動産や求人ポータルサイトなど、ファーストビューにヘッダーナビゲーション、メインビジュアル、CTAボタン、検索コンテンツといった多くの要素を詰め込んでいる場合もあります。
なお、ファーストビュー全面にメインビジュアルを配置する大胆なレイアウトのWebサイトにおいては、ファーストビュー≒メインビジュアルと捉えられます。
様々なWebサイトを見てみると、メインビジュアルの役割は大きく3つに分かれると考えられます。
メインビジュアルは企業理念やブランドコンセプトなど、メッセージやイメージを伝えることができます。コーポレートサイトや採用サイト、ブランドサイトなどでよく目にするメインビジュアルです。
サービスの特徴やベネフィット、価格などを伝えることができます。サービスサイトやコーポレートサイトなどでよく目にするメインビジュアルです。メインビジュアルの中や直下に「申し込む」や「お試しする」などのCTAボタンとセットで置かれている例もよく見かけます。
イベントの内容・期間といった告知や、新商品・おすすめ商品など旬な情報を伝えることができます。ポータルサイトやECサイトなどでよく目にするメインビジュアルです。旬な情報を伝えることが目的のため、期間を限定して掲載されるケースが多いです。また、企業側の力を入れているイベントや商品をPRする役割を担うため、他のスライド（メインビジュアル）や他のコンテンツと比べて目立つデザイン、差別化したデザインで作られる傾向にあります。
メインビジュアルの最も重要な役割は、Webサイトの目的にもよりますが、基本的には「何のサイトなのか？」「誰に何を提供しているのか？」を正しく伝えることです。
そのため、スライド形式のメインビジュアルで1枚目からキャンペーンや新商品の情報を訴求しているWebサイトも見かけますが、初めて訪問したユーザーもターゲットにしている場合は見直した方が良いかもしれません。
例えば、BtoBのインテリア雑貨を販売している卸業者のサイトで、スライド形式のメインビジュアル1枚目が全商品20%OFFのキャンペーン画像である場合を考えます。自分の家に置く雑貨をネットショップで買おうと検討している一般の顧客が訪問してきた際に、1枚目のキャンペーン画像にとても魅力を感じるでしょう。ですが、一般の顧客には販売していないことが伝わっておらず、後にBtoBであることが分かりがっかりするかもしれません。どこか目に入るところに「BtoB」や「卸」と分かるコピーが表示されていればすぐに判断できたでしょう。
つまりメインビジュアルにどんな役割を持たせるかは、ターゲットの目線で考える必要があります。上記の例では、「スライド形式の1枚目はサイトの内容を正しく伝えるメインビジュアルを載せ、2枚目以降でキャンペーン情報を載せる」、「メインビジュアルではなくその下にキャンペーン情報を掲載するエリアを設ける」「ロゴに何のサービスや会社かを説明するコピーを入れて、ヘッダーエリアで何のサイトか伝わるようにする」など、メインビジュアルだけに固執せず情報を伝える工夫をした方が良いかもしれません。
Webサイトを制作する際にはターゲットと目的を定めることが重要です。そして、それはメインビジュアルにおいても同じです。メインビジュアルを作る際にも「誰のための」「何のための」メインビジュアルなのかを明確にしなければ、見当違いで誰にも響かないメインビジュアルになり兼ねません。
極端な例ですが、化粧品のブランディングを目的としたサイトでメインビジュアルにキャンペーン情報を載せてしまうと、ブランディングどころか安っぽい印象のWebサイトになってしまう可能性もあります。また、最新で有益な求人情報を届けることを目的とした求人ポータルサイトでメインビジュアルに詩的な企業メッセージを載せてしまうと、ユーザーは「企業理念など求めていない、すぐ目に入る位置に新着求人のお知らせを載せてくれ」と思うかもしれません。ただし、これがブランディングも目的とした求人ポータルサイトであれば、メインビジュアルに詩的な企業メッセージがあっても良いかもしれません。
つまり、Webサイトのターゲットや目的に見合ったメインビジュアルの作成が重要にあるということです。ターゲットと目的を設定することで初めてメインビジュアルの内容やサイズ感、デザインの方向性が決まってきます。
メインビジュアルの作り方は人それぞれですが、参考までにメインビジュアル作成フローの例をご紹介します。
ステップ1で決めた載せる情報の量が同程度のデザインを参考にすると作成がスムーズになります。注意点として、難易度が高いデザインを参考に選ぶと、作成の際に苦戦する場合もあります。そのため、デザインではなくレイアウトパターンを参考に選ぶ方が、作成が容易な場合もあります。実際にメインビジュアルを作っていく中でやりやすい方法を見つけてください。
基本的にはキャッチコピーに合った写真やイラストなどの素材を選びます。文字情報よりも視覚情報の方が早く正確に伝わるためです。対応したイメージを見ながら文字を読むことで、より早く、より深く、ユーザーの心にキャッチコピーが入っていくことが期待できます。一方で、あえてキャッチコピーとは直接関係のない素材を組み合わせることで印象的なメインビジュアルにする手法もあります。（ターゲットが大人である転職サイトで赤ちゃんの素材を使うなど）
PhotoshopやGIMPなどお好みのデザインツールを使って、まずは入れたい要素を適当にすべて配置します。配置した後は要素に抜けがないか必ずチェックしましょう。時間をかけてデザインを整えた後に要素が足りないことが発覚すると、うまく追加できる場所がなくて作り直しになる場合もあるためです。
参考はあくまでも参考です。配置や表現のヒントを得る程度にしましょう。他とは違う、独自のデザインが自サイトの個性や魅力に繋がります。
以上がメインビジュアル全般をイメージした作り方の例ですが、ランディングページのメインビジュアルはよりPR色が強まります。
ランディングページのメインビジュアルについては以下の記事で詳しくご紹介していますので併せてご覧ください。
アピールしたい内容をあれもこれもと詰め込むとユーザーは情報を処理しきれません。「結局何が言いたいの？」と伝えたいことが伝わらないメインビジュアルになってしまいます。ごちゃごちゃとしていると細かいところまでユーザーに見てもらえない可能性もあるでしょう。
入れたい内容が盛りだくさんになってしまった際には、最初に設定した目的に沿って、伝えたい優先度を考えながら載せる情報を絞り込みます。
スライド形式は、Webサイトの顔となるメインビジュアルの限られたエリアに、複数の情報を載せることができる便利な手法です。一方で、2枚目以降のスライドはユーザーに見られないというデータが出ています。その他にも、Webサイトの表示速度が遅くなる、ユーザーのペースを乱す、1つ1つの情報の注目度や内容の理解度が低下する、などデメリットもあるとされています。スライド形式を使う際にはデメリットも理解したうえで、適切に取り入れるのが良いでしょう。
スライド形式のメリット・デメリットや効果的な使い方は以下の記事で詳しくご紹介していますので併せてご覧ください。
ファーストビュー全面を使ったフル画面メインビジュアルはデザイン性が高く、多くのWebサイトで採用されています。ですが、デザイン性の高さだけでフル画面メインビジュアルを採用してしまうと、自サイトのターゲットや目的に合わず、かえってマイナスな印象を与えてしまう可能性があります。
例えばAmazonや楽天で買い物をしたい時に、すぐに商品キーワードで検索したりイベント情報を確認したりしたいのに、フル画面のメインビジュアルが配置されていたらどう思うでしょうか？スクロールしないと検索や情報が見られないことに苛立ちを感じるかもしれません。一方で、同じ買い物ができるサイトでも、メーカーのブランディングを兼ねたECサイトの場合は、フル画面のメインビジュアルが効果的かもしれません。メインビジュアルにはブランドイメージを伝える役割があるためです。
メインビジュアルのサイズは、Webサイトの種別や目的に合わせて適切に設定することをおすすめします。
英語のキャッチコピーをかっこいいと感じる日本人が多いのではないでしょうか。グローバルな企業やサービスだから英語を使用しているというWebサイトももちろんありますが、デザイン性を重視して英語を取り入れていると思われるWebサイトも多くあります。
ですが、英語のみのキャッチコピーを安易に使うことは避けた方が良さそうです。なぜなら、英語が苦手な人もいるためです。自分が当たり前に読める英語をユーザーも当たり前に読めるとも限りません。気づかず誤った英語を使用して正しく伝えたい内容が伝わらない可能性もあります。
日本人をメインターゲットにしているのであれば、誰でも分かるような簡単な英文にするか、そうでない場合はサブコピーで日本語を入れた方が良いでしょう。
秀逸なデザインが集まるまとめサイトには、Webサイトの魅力が伝わるメインビジュアルが多数並んでいます。その中から、参考にしたいデザインをレイアウトパターン別にいくつかご紹介します。
ファーストビュー全面に画像やイラスト、背景色を配置するパターンです。画面全体を使って伝えたいことを表現できるインパクトの強いレイアウトのため、ブランディング目的のWebサイトと相性が良いです。
1枚写真を大胆に使い、透明感が印象的なデザインです。写真を背面に敷く場合は、半透明のフィルターをかけると文字が読みやすくなります。
引用元：https://www.pacific-systems.co.jp/
背景のないイラストを大きく使い、キャッチコピーとも一体感が出ているデザインです。フル画面配置でもイラストを使うと文字も読みやすくレイアウトしやすいです。
写真やイラストなどの素材を使わず、シェイプを背面に敷いたデザインです。鮮やかなグラデーションでDX感が表現され、ロゴのXのように見えるシェイプで企業らしさが表現されています。自サイトと関連のあるモチーフを取り入れると効果的です。
画面の横幅のみフルに使い、高さはコンパクトに抑えたパターンです。フル画面配置よりもファーストビューに入る要素が多いため、ポータルサイトなど情報量が豊富なWebサイトとの相性が良いです。
文字を載せやすい写真が選定されていて、伝えたい要素（この場合はロゴ）がしっかりと目に入ってきます。メインビジュアルがコンパクトなため、事業の説明もすぐに目に入り安心感があります。
メインビジュアルの下ラインが山と道のシルエットになっていてユニークです。
引用元：https://www.tombow.com/sp/playcolordot/
切り抜かれた商品がずらりと並び、色彩も鮮やかで、メインビジュアルのサイズはコンパクトでも印象的なデザインになっています。
引用元：https://www.dosuika.com/index.html
スライド形式で、前後のスライドまで含めると横幅フル配置に見える例です。キャッチコピーの背景に四角いシェイプが敷かれているため、文字が読みやすく存在感も出ています。
メインビジュアルの周囲に余白が入るパターンです。他の要素とずらして重ねることでデザインに厚みを出せたり、余白があるため文字を配置しやすかったり、使い勝手が良いです。
引用元：https://www.olympus-imaging.jp/product/dslr/beginner/
薄いグレーの背景と半分ほど重なるような位置にメインビジュアルが配置されていたり、角丸が取り入れられていたり、シンプルすぎずデザインに厚みが出ています。
引用元：https://bnature-hawaii.com/
余白と写真の両方にかかるように文字が置かれ、雑誌やポストカードのような印象に仕上がっています。余白があるからこそ表現できるデザインです。
余白に緑色を使用し、サイトカラーが強調されたデザインです。落ち着いた濃い色など、背景色によっては写真を際立てることもできます。
引用元：https://www.hakko-blend.com/
スライド形式で、左右に余白をとっている例です。左右の余白にサイト名を英語で入れることでデザイン性も上がっています。
画像と文字エリアを分けるパターンです。写真に重なった文字は見づらくなりがちなため、エリアを分けることで写真もキャッチコピーもすっきりと見やすく配置できます。
シンプルなコマ割りで安定感があるデザインです。キャッチコピーを縦書きにすることで、より印象づけています。
写真と文字を斜めの要素で区切ることで、シャープな印象や勢いが出ています。
近年よく目にするようになった、写真に文字を少しだけ被せるデザインです。文字のエリアを確保しながらもデザイン性も高く、取り入れやすい配置です。
引用元：https://my-best.com/company
文字と写真を縦に配置したデザインです。ファーストビュー内で写真は一部分しか見えませんが、その分キャッチコピーを主役として際立たせた大胆な魅せ方です。
引用元：https://cloud-dental-clinic.com/
写真が切り抜かれているため、自然と余白ができ、キャッチコピーも読みやすく配置されています。「歯」の形で切り抜かれているところに個性が出ています。
複数の画像を組み合わせたパターンです。1枚の画像では伝えきれない情報も、複数の画像を組み合わせることで一度に、視覚的に伝えることができます。
引用元：https://www.tepco-ht.co.jp/enekari/
複数の写真が組み合わさっていますが、全体にフィルターがかかっているため統一感があり馴染んでいます。キャッチコピーも四角い白背景を敷いているため読みやすいです。
引用元：https://www.e-heyaspace.com/
複数の写真と余白を組み合わせたデザインです。複数の情報を視覚的に伝えることと、キャッチコピーの読みやすさ、デザイン性の高さを両立させています。
引用元：https://mannekenpis-ceres.com/
写真のサイズや位置をランダムに配置したデザインです。余白の位置をコントロールしやすいため、文字の配置もしやすいです。
引用元：https://www.petline.co.jp/pb/?entrance
画面を2つに分割したデザインです。対比するものを並べる際や、商品単体と全体イメージを伝える際など様々な場面で活用できそうです。
上記でご紹介した以外にもヒントになるデザインが溢れています。クオリティが高くおすすめのWebデザインまとめサイトをいくつかご紹介しますので、イメージに近いデザインを探してみてください。
https://partsdesign.net/mainvisual
パーツ別にデザインを探すことができるWebデザイン集です。メインビジュアルはもちろん、フローや導入事例といった各種コンテンツ、CTAなど、Webサイトのパーツごとにデザインがまとまっているため効率よくイメージに近い参考を見つけることができます。
「メインビジュアル」というタグがあるため、メインビジュアルにスポットを当てたまとめページから参考デザインを探すことができます。個性的なメインビジュアルを作る際にヒントになりそうなデザインが集められています。もう少しスタンダードなメインビジュアルをイメージしている場合は「Category」や「Tag」から業種、デザインテイストといった他の絞り込み方法で探してみると良いかもしれません。スマートフォンサイトの参考デザインも豊富です。
「メインビジュアル」というカテゴリはありませんが、厳選された多様なWebデザインがまとめられています。カテゴリも豊富で、メインビジュアルの参考デザインを探す際にもとても参考になります。スマートフォンサイトの参考デザインも豊富です。
メインビジュアルのポイントや作り方、参考デザインなどをご紹介しました。
メインビジュアルはWebサイトの第一印象、そしてサイト全体やサービスの印象まで左右する重要な要素です。「何のサイトなのか？」「誰に何を提供しているのか？」ユーザーに正しく伝わるメインビジュアルを作り込むことでWebサイトの魅力を最大限に伝えてください。
ウェブサイトを運営していると、アクセスの急増やGoogleアップデートによる検索順位の影響で、サーバーやドメインの移管作業が必要な場合があり…
Webサイトのトレンドは日々変わります。一度作ったきりのWebサイトは、時間の経過とともにどこか古臭くなってしまい、ユーザーにとっても使いに…
EC・通販サイト運営における売上アップを考えたとき、ECサイトそのもののリニューアルを行うのは有効な手段です。特にサイト作成から時間が経過し…
WordPressは、Webサイトを誰でも簡単に作ることができるCMS（コンテンツ・マネジメント・システム）です。そのWordPressの機…
こんにちは、デジタルマーケティング研究所です。 ホームページ制作やリニューアルの際に、制作担当の方からよく聞かれる質問があります。 「うちの…
ワイヤーフレームとは、Web制作において「図面や設計図の役割」をするものです。 サイトを制作するためには、「どんな情報」を「どんなデザイン」…
あなたのサイトは、集客できていますか？各々の課題に沿ったSEOとユーザーに響くデザインを両立したサイト制作で、意識の高いターゲットをフロントへ呼び込みます。
Webマーケティングに関わる施策全般をワンストップで
ご提供します。
お気軽にご相談ください。
Webマーケティング最新ニュースのレポートや無料セミナーの先行案内が届く、お得なメルマガ配信中！
検索順位で1位まで上げるためのSEOポイント8つ
E-E-A-Tとは？ SEOにおける重要性と評価の高め方を解説
成功確率アップ！BtoBのコンテンツマーケティング施策とは
YMYLとは？該当するジャンルとSEOにおける対策のポイント8つ
SEO内部施策とは？重要な項目16選【セルフチェックリストつき】