WEBマーケティングのトータルサポートならディーエムソリューションズ株式会社
0120-934-226受付時間 平日9:00~18:00

Webサイトの魅力が伝わるメインビジュアルの作り方と参考デザイン20選

このエントリーをはてなブックマークに追加

メインビジュアルはWebサイトの顔と言える部分で、メインビジュアルの質が高いWebサイトは、サイト全体、さらにはサービスの質まで高い印象を与えることができます。また、メインビジュアルが変わるだけでもガラッと違うWebサイトになったような印象を与える場合もあります。それだけメインビジュアルが与える影響は大きいのです。

ここではそんなメインビジュアルに焦点を当て、Webサイトの魅力が伝わるメインビジュアルの作り方と参考デザインをご紹介します。

目次

メインビジュアルとは

主にWebサイトのトップページ上部に配置されるイメージ画像のことで、Webサイトを訪れたユーザーが最初に目にする部分です。

メインビジュアルとキービジュアルの違い

映画やドラマの宣伝では「キービジュアル公開」といった表現をよく耳にします。そのため、メインビジュアルよりもキービジュアルという呼び方の方が一般的には馴染みがあるかもしれません。ただ、実際のところは同じ映画やドラマの宣伝でも「メインビジュアル公開」と表現されている場面もあり、同じ意味合いで使われているようです。
メインビジュアルは他にも、トップ画像、タイトル画像、ヒーローイメージなど様々な呼び方で指し示されています。

メインビジュアルとファーストビューの違い

メインビジュアルとファーストビューの違い

メインビジュアルはファーストビューと同義とされることもありますが、一般的にはファーストビューに含まれる要素の1つです。
ファーストビューとは、Webページ上部の一度もスクロールせずに表示されているエリアを指します。例えば、ブランディングサイトなど、ファーストビューにメインビジュアルと少しのナビゲーションしか表示されない場合もあります。一方で、不動産や求人ポータルサイトなど、ファーストビューにヘッダーナビゲーション、メインビジュアル、CTAボタン、検索コンテンツといった多くの要素を詰め込んでいる場合もあります。
なお、ファーストビュー全面にメインビジュアルを配置する大胆なレイアウトのWebサイトにおいては、ファーストビュー≒メインビジュアルと捉えられます。

メインビジュアルの役割

様々なWebサイトを見てみると、メインビジュアルの役割は大きく3つに分かれると考えられます。

1.企業イメージやブランドイメージを伝える役割

メインビジュアルは企業理念やブランドコンセプトなど、メッセージやイメージを伝えることができます。コーポレートサイトや採用サイト、ブランドサイトなどでよく目にするメインビジュアルです。

企業イメージやブランドイメージを伝えるメインビジュアル

2.サービスの内容を伝える役割

サービスの特徴やベネフィット、価格などを伝えることができます。サービスサイトやコーポレートサイトなどでよく目にするメインビジュアルです。メインビジュアルの中や直下に「申し込む」や「お試しする」などのCTAボタンとセットで置かれている例もよく見かけます。

サービスの内容を伝えるメインビジュアル

3.キャンペーンや新商品など旬な情報を伝える役割

イベントの内容・期間といった告知や、新商品・おすすめ商品など旬な情報を伝えることができます。ポータルサイトやECサイトなどでよく目にするメインビジュアルです。旬な情報を伝えることが目的のため、期間を限定して掲載されるケースが多いです。また、企業側の力を入れているイベントや商品をPRする役割を担うため、他のスライド(メインビジュアル)や他のコンテンツと比べて目立つデザイン、差別化したデザインで作られる傾向にあります。

キャンペーンや新商品など旬な情報を伝えるメインビジュアル

メインビジュアルの最も重要な役割

メインビジュアルの最も重要な役割は、Webサイトの目的にもよりますが、基本的には「何のサイトなのか?」「誰に何を提供しているのか?」を正しく伝えることです。
そのため、スライド形式のメインビジュアルで1枚目からキャンペーンや新商品の情報を訴求しているWebサイトも見かけますが、初めて訪問したユーザーもターゲットにしている場合は見直した方が良いかもしれません。

例えば、BtoBのインテリア雑貨を販売している卸業者のサイトで、スライド形式のメインビジュアル1枚目が全商品20%OFFのキャンペーン画像である場合を考えます。自分の家に置く雑貨をネットショップで買おうと検討している一般の顧客が訪問してきた際に、1枚目のキャンペーン画像にとても魅力を感じるでしょう。ですが、一般の顧客には販売していないことが伝わっておらず、後にBtoBであることが分かりがっかりするかもしれません。どこか目に入るところに「BtoB」や「卸」と分かるコピーが表示されていればすぐに判断できたでしょう。
つまりメインビジュアルにどんな役割を持たせるかは、ターゲットの目線で考える必要があります。上記の例では、「スライド形式の1枚目はサイトの内容を正しく伝えるメインビジュアルを載せ、2枚目以降でキャンペーン情報を載せる」、「メインビジュアルではなくその下にキャンペーン情報を掲載するエリアを設ける」「ロゴに何のサービスや会社かを説明するコピーを入れて、ヘッダーエリアで何のサイトか伝わるようにする」など、メインビジュアルだけに固執せず情報を伝える工夫をした方が良いかもしれません。

ユーザーに刺さるメインビジュアルを作るポイント

Webサイトを制作する際にはターゲットと目的を定めることが重要です。そして、それはメインビジュアルにおいても同じです。メインビジュアルを作る際にも「誰のための」「何のための」メインビジュアルなのかを明確にしなければ、見当違いで誰にも響かないメインビジュアルになり兼ねません。

極端な例ですが、化粧品のブランディングを目的としたサイトでメインビジュアルにキャンペーン情報を載せてしまうと、ブランディングどころか安っぽい印象のWebサイトになってしまう可能性もあります。また、最新で有益な求人情報を届けることを目的とした求人ポータルサイトでメインビジュアルに詩的な企業メッセージを載せてしまうと、ユーザーは「企業理念など求めていない、すぐ目に入る位置に新着求人のお知らせを載せてくれ」と思うかもしれません。ただし、これがブランディングも目的とした求人ポータルサイトであれば、メインビジュアルに詩的な企業メッセージがあっても良いかもしれません。

つまり、Webサイトのターゲットや目的に見合ったメインビジュアルの作成が重要にあるということです。ターゲットと目的を設定することで初めてメインビジュアルの内容やサイズ感、デザインの方向性が決まってきます。

メインビジュアルの作り方・フロー

メインビジュアルの作り方は人それぞれですが、参考までにメインビジュアル作成フローの例をご紹介します。

ステップ1:ターゲットや目的に合わせて載せる内容を決める

  • メッセージを伝える役割
    例)キャッチコピーとキャッチコピーを補完する写真やイラストなど
  • サービスの内容を伝える役割
    例)キャッチコピーと写真・イラストの他に権威づけの要素やベネフィットなど
  • 旬な情報を伝える役割
    例)期間やお得な情報、詳細ページへのリンクボタンなど
  • ステップ2:参考になるデザインやレイアウトパターンを探す

    ステップ1で決めた載せる情報の量が同程度のデザインを参考にすると作成がスムーズになります。注意点として、難易度が高いデザインを参考に選ぶと、作成の際に苦戦する場合もあります。そのため、デザインではなくレイアウトパターンを参考に選ぶ方が、作成が容易な場合もあります。実際にメインビジュアルを作っていく中でやりやすい方法を見つけてください。

    ステップ3:写真やイラストを選ぶ

    基本的にはキャッチコピーに合った写真やイラストなどの素材を選びます。文字情報よりも視覚情報の方が早く正確に伝わるためです。対応したイメージを見ながら文字を読むことで、より早く、より深く、ユーザーの心にキャッチコピーが入っていくことが期待できます。一方で、あえてキャッチコピーとは直接関係のない素材を組み合わせることで印象的なメインビジュアルにする手法もあります。(ターゲットが大人である転職サイトで赤ちゃんの素材を使うなど)

    ステップ4:入れたい要素をすべて配置する

    PhotoshopやGIMPなどお好みのデザインツールを使って、まずは入れたい要素を適当にすべて配置します。配置した後は要素に抜けがないか必ずチェックしましょう。時間をかけてデザインを整えた後に要素が足りないことが発覚すると、うまく追加できる場所がなくて作り直しになる場合もあるためです。

    ステップ5:他社デザインやレイアウトパターンを参考にデザインする

    参考はあくまでも参考です。配置や表現のヒントを得る程度にしましょう。他とは違う、独自のデザインが自サイトの個性や魅力に繋がります。

    以上がメインビジュアル全般をイメージした作り方の例ですが、ランディングページのメインビジュアルはよりPR色が強まります。
    ランディングページのメインビジュアルについては以下の記事で詳しくご紹介していますので併せてご覧ください。

    ランディングページにおけるファーストビューの作り方とは?

    メインビジュアルを作る際の注意点

    情報を詰め込みすぎない

    アピールしたい内容をあれもこれもと詰め込むとユーザーは情報を処理しきれません。「結局何が言いたいの?」と伝えたいことが伝わらないメインビジュアルになってしまいます。ごちゃごちゃとしていると細かいところまでユーザーに見てもらえない可能性もあるでしょう。
    入れたい内容が盛りだくさんになってしまった際には、最初に設定した目的に沿って、伝えたい優先度を考えながら載せる情報を絞り込みます。

    スライド形式を安易に使用しない

    スライド形式は、Webサイトの顔となるメインビジュアルの限られたエリアに、複数の情報を載せることができる便利な手法です。一方で、2枚目以降のスライドはユーザーに見られないというデータが出ています。その他にも、Webサイトの表示速度が遅くなる、ユーザーのペースを乱す、1つ1つの情報の注目度や内容の理解度が低下する、などデメリットもあるとされています。スライド形式を使う際にはデメリットも理解したうえで、適切に取り入れるのが良いでしょう。

    スライド形式のメリット・デメリットや効果的な使い方は以下の記事で詳しくご紹介していますので併せてご覧ください。

    カルーセルとは?NGな使い方&効果的な使い方をご紹介

    フル画面メインビジュアルを安易に使用しない

    ファーストビュー全面を使ったフル画面メインビジュアルはデザイン性が高く、多くのWebサイトで採用されています。ですが、デザイン性の高さだけでフル画面メインビジュアルを採用してしまうと、自サイトのターゲットや目的に合わず、かえってマイナスな印象を与えてしまう可能性があります。
    例えばAmazonや楽天で買い物をしたい時に、すぐに商品キーワードで検索したりイベント情報を確認したりしたいのに、フル画面のメインビジュアルが配置されていたらどう思うでしょうか?スクロールしないと検索や情報が見られないことに苛立ちを感じるかもしれません。一方で、同じ買い物ができるサイトでも、メーカーのブランディングを兼ねたECサイトの場合は、フル画面のメインビジュアルが効果的かもしれません。メインビジュアルにはブランドイメージを伝える役割があるためです。
    メインビジュアルのサイズは、Webサイトの種別や目的に合わせて適切に設定することをおすすめします。

    英語のみのキャッチコピーを安易に使用しない

    英語のキャッチコピーをかっこいいと感じる日本人が多いのではないでしょうか。グローバルな企業やサービスだから英語を使用しているというWebサイトももちろんありますが、デザイン性を重視して英語を取り入れていると思われるWebサイトも多くあります。
    ですが、英語のみのキャッチコピーを安易に使うことは避けた方が良さそうです。なぜなら、英語が苦手な人もいるためです。自分が当たり前に読める英語をユーザーも当たり前に読めるとも限りません。気づかず誤った英語を使用して正しく伝えたい内容が伝わらない可能性もあります。
    日本人をメインターゲットにしているのであれば、誰でも分かるような簡単な英文にするか、そうでない場合はサブコピーで日本語を入れた方が良いでしょう。

    レイアウトパターン別!メインビジュアル作りのヒントになる参考デザイン20選

    秀逸なデザインが集まるまとめサイトには、Webサイトの魅力が伝わるメインビジュアルが多数並んでいます。その中から、参考にしたいデザインをレイアウトパターン別にいくつかご紹介します。

    1.フル画面配置パターン

    フル画面配置パターン

    ファーストビュー全面に画像やイラスト、背景色を配置するパターンです。画面全体を使って伝えたいことを表現できるインパクトの強いレイアウトのため、ブランディング目的のWebサイトと相性が良いです。

    Y’sデンタルクリニック

    Y’sデンタルクリニックのメインビジュアル

    引用元:https://www.ys-dc.jp/

    1枚写真を大胆に使い、透明感が印象的なデザインです。写真を背面に敷く場合は、半透明のフィルターをかけると文字が読みやすくなります。

    パシフィックシステム株式会社

    パシフィックシステム株式会社のメインビジュアル

    引用元:https://www.pacific-systems.co.jp/

    背景のないイラストを大きく使い、キャッチコピーとも一体感が出ているデザインです。フル画面配置でもイラストを使うと文字も読みやすくレイアウトしやすいです。

    株式会社エックスポイントワン

    株式会社エックスポイントワンのメインビジュアル

    引用元:https://x-point-1.net/

    写真やイラストなどの素材を使わず、シェイプを背面に敷いたデザインです。鮮やかなグラデーションでDX感が表現され、ロゴのXのように見えるシェイプで企業らしさが表現されています。自サイトと関連のあるモチーフを取り入れると効果的です。

    2.横幅のみフル配置パターン

    横幅のみフル配置パターン

    画面の横幅のみフルに使い、高さはコンパクトに抑えたパターンです。フル画面配置よりもファーストビューに入る要素が多いため、ポータルサイトなど情報量が豊富なWebサイトとの相性が良いです。

    株式会社LITALICO

    株式会社LITALICOのメインビジュアル

    引用元:https://litalico.co.jp/

    文字を載せやすい写真が選定されていて、伝えたい要素(この場合はロゴ)がしっかりと目に入ってきます。メインビジュアルがコンパクトなため、事業の説明もすぐに目に入り安心感があります。

    ほうだいぎキャンプ場

    ほうだいぎキャンプ場のメインビジュアル

    引用元:https://hodaigi-camp.jp/

    メインビジュアルの下ラインが山と道のシルエットになっていてユニークです。

    PLAY COLOR Dot

    PLAY COLOR Dotのメインビジュアル

    引用元:https://www.tombow.com/sp/playcolordot/

    切り抜かれた商品がずらりと並び、色彩も鮮やかで、メインビジュアルのサイズはコンパクトでも印象的なデザインになっています。

    土肥農園

    土肥農園

    引用元:https://www.dosuika.com/index.html

    スライド形式で、前後のスライドまで含めると横幅フル配置に見える例です。キャッチコピーの背景に四角いシェイプが敷かれているため、文字が読みやすく存在感も出ています。

    3.上下左右に余白ありパターン

    上下左右に余白ありパターン

    メインビジュアルの周囲に余白が入るパターンです。他の要素とずらして重ねることでデザインに厚みを出せたり、余白があるため文字を配置しやすかったり、使い勝手が良いです。

    OM SYSTEM

    OM SYSTEMのメインビジュアル

    引用元:https://www.olympus-imaging.jp/product/dslr/beginner/

    薄いグレーの背景と半分ほど重なるような位置にメインビジュアルが配置されていたり、角丸が取り入れられていたり、シンプルすぎずデザインに厚みが出ています。

    B.Nature

    B.Natureのメインビジュアル

    引用元:https://bnature-hawaii.com/

    余白と写真の両方にかかるように文字が置かれ、雑誌やポストカードのような印象に仕上がっています。余白があるからこそ表現できるデザインです。

    SEINO FLOWER

    SEINO FLOWERのメインビジュアル

    引用元:https://seinoflower.net/

    余白に緑色を使用し、サイトカラーが強調されたデザインです。落ち着いた濃い色など、背景色によっては写真を際立てることもできます。

    みんなの発酵BLEND

    みんなの発酵BLENDのメインビジュアル

    引用元:https://www.hakko-blend.com/

    スライド形式で、左右に余白をとっている例です。左右の余白にサイト名を英語で入れることでデザイン性も上がっています。

    4.画像エリアと文字エリアを分けて配置パターン

    画像エリアと文字エリアを分けて配置パターン

    画像と文字エリアを分けるパターンです。写真に重なった文字は見づらくなりがちなため、エリアを分けることで写真もキャッチコピーもすっきりと見やすく配置できます。

    株式会社牛久工務店 一級建築士事務所

    株式会社牛久工務店 一級建築士事務所のメインビジュアル

    引用元:https://www.asmo-e.co.jp/

    シンプルなコマ割りで安定感があるデザインです。キャッチコピーを縦書きにすることで、より印象づけています。

    ユニバーサル・ビジネス・ソリューションズ株式会社

    ユニバーサル・ビジネス・ソリューションズ株式会社のメインビジュアル

    引用元:https://www.ubsc.co.jp/

    写真と文字を斜めの要素で区切ることで、シャープな印象や勢いが出ています。

    Via Vita

    Via Vita

    引用元:http://viavita.studio/

    近年よく目にするようになった、写真に文字を少しだけ被せるデザインです。文字のエリアを確保しながらもデザイン性も高く、取り入れやすい配置です。

    mybest

    mybestのメインビジュアル

    引用元:https://my-best.com/company/

    文字と写真を縦に配置したデザインです。ファーストビュー内で写真は一部分しか見えませんが、その分キャッチコピーを主役として際立たせた大胆な魅せ方です。

    クラウド歯科

    クラウド歯科のメインビジュアル

    引用元:http://cloud-dental-clinic.com/

    写真が切り抜かれているため、自然と余白ができ、キャッチコピーも読みやすく配置されています。「歯」の形で切り抜かれているところに個性が出ています。

    5.画像を組み合わせて配置パターン

    画像を組み合わせて配置パターン

    複数の画像を組み合わせたパターンです。1枚の画像では伝えきれない情報も、複数の画像を組み合わせることで一度に、視覚的に伝えることができます。

    エネカリ

    エネカリのメインビジュアル

    引用元:https://www.tepco-ht.co.jp/enekari/

    複数の写真が組み合わさっていますが、全体にフィルターがかかっているため統一感があり馴染んでいます。キャッチコピーも四角い白背景を敷いているため読みやすいです。

    いい部屋Space

    いい部屋 Spaceのメインビジュアル

    引用元:https://www.e-heyaspace.com/

    複数の写真と余白を組み合わせたデザインです。複数の情報を視覚的に伝えることと、キャッチコピーの読みやすさ、デザイン性の高さを両立させています。

    株式会社 マヌカンピス

    株式会社マヌカンビスのメインビジュアル

    引用元:https://mannekenpis-ceres.com/

    写真のサイズや位置をランダムに配置したデザインです。余白の位置をコントロールしやすいため、文字の配置もしやすいです。

    Professional Balance

    Professional Balanceのメインビジュアル

    引用元:https://www.petline.co.jp/pb/?entrance

    画面を2つに分割したデザインです。対比するものを並べる際や、商品単体と全体イメージを伝える際など様々な場面で活用できそうです。

    メインビジュアル作りで参考にしたいデザインまとめサイト

    上記でご紹介した以外にもヒントになるデザインが溢れています。クオリティが高くおすすめのWebデザインまとめサイトをいくつかご紹介しますので、イメージに近いデザインを探してみてください。

    Parts.

    https://partsdesign.net/mainvisual/

    パーツ別にデザインを探すことができるWebデザイン集です。メインビジュアルはもちろん、フローや導入事例といった各種コンテンツ、CTAなど、Webサイトのパーツごとにデザインがまとまっているため効率よくイメージに近い参考を見つけることができます。

    Web Design Clip

    「メインビジュアル」というタグがあるため、メインビジュアルにスポットを当てたまとめページから参考デザインを探すことができます。個性的なメインビジュアルを作る際にヒントになりそうなデザインが集められています。もう少しスタンダードなメインビジュアルをイメージしている場合は「Category」や「Tag」から業種、デザインテイストといった他の絞り込み方法で探してみると良いかもしれません。スマートフォンサイトの参考デザインも豊富です。

    SANKOU!

    https://sankoudesign.com/

    「メインビジュアル」というカテゴリはありませんが、厳選された多様なWebデザインがまとめられています。カテゴリも豊富で、メインビジュアルの参考デザインを探す際にもとても参考になります。スマートフォンサイトの参考デザインも豊富です。

    おわりに

    メインビジュアルのポイントや作り方、参考デザインなどをご紹介しました。
    メインビジュアルはWebサイトの第一印象、そしてサイト全体やサービスの印象まで左右する重要な要素です。「何のサイトなのか?」「誰に何を提供しているのか?」ユーザーに正しく伝わるメインビジュアルを作り込むことでWebサイトの魅力を最大限に伝えてください。

     

    このエントリーをはてなブックマークに追加
    The following two tabs change content below.

    digital-marketing

    デジタルマーケティング研究所では、デジタルマーケティングの施策・広告・技術を、分析・実装・検証して、WEB担当者・マーケティング担当者の方の役立つ情報を発信していきます。
    お役立ち資料ダウンロード

    問い合わせCTA

    ウルロジ誘導CTA_900

    セルマーケ

    SNSでフォロー

    Contact

    Webマーケティングに関わる施策全般をワンストップでご提供します。
    お気軽にご相談ください。

    Webマーケティング最新情報をお届け
    東京営業所
    東京都新宿区西新宿1丁目6-1 新宿エルタワー3階
    電話番号 03-6374-1393 FAX番号 0422-57-2761
    大阪営業所
    大阪府大阪市北区堂島1丁目5-30 堂島プラザビル10F
    電話番号 06-7176-3367 FAX番号 06-7176-3368
    Copyright © 2022 DM SOLUTIONS Co.,Ltd. All rights reserved.