Webサイトのトップページを作るとき、いちばん上の大きな画像のエリアに何を置けばいいのか、迷ったことはありませんか。
このエリアは「メインビジュアル」と呼ばれ、ページを開いた人が最初に目にする、サイトの顔にあたる部分です。
この記事では、メインビジュアルとは何か、ファーストビューとの違い、画像・キャッチコピー・CTAの組み立て方を、見本を使って初心者向けに解説します。
メインビジュアルの基本
まずは、メインビジュアルとは何を指すのか、どんな役割があり、どんな要素でできているのかを押さえましょう。
メインビジュアルとは
メインビジュアルとは、Webページのヘッダー(ロゴやメニューが並ぶ一番上の帯)のすぐ下に置かれる、画面の中でいちばん大きく目立つ画像とキャッチコピーのエリアのことです(ページ全体の中での位置はWebページの基本構造とは?で解説しています)。
「キービジュアル」や「ヒーローイメージ」と呼ばれることもあり、指しているものはほぼ同じです。
よく似た言葉に「ファーストビュー」があります。
ファーストビューは、ページを開いたときにスクロールしないで見える範囲のことで、画面の大きさによって範囲が変わります(ファーストビューに何を入れるかは重要な情報はどこに置く?で解説しています)。
つまり、ファーストビューは「見える範囲」、メインビジュアルは「その範囲の中心に置く大きな画像と文字のかたまり」という関係です。
見本Aと見本Bは同じ内容ですが、画面の形が違うため、メインビジュアルの中での画像と文字の並べ方が変わっています。
どちらの見本でも、メインビジュアルがファーストビューの大部分を占めていることが分かります。
メインビジュアルの役割
メインビジュアルのいちばんの役割は、「このサイトは何で、自分に関係があるか」を、ページを開いた人に短い時間で伝えることです。
ページを開いた人は、最初に見えた範囲で読み進めるかどうかを判断することが多い、とよく言われます。
そのため、ファーストビューの中心にあるメインビジュアルは、サイトの第一印象を大きく左右します。
- 何のサイトかを伝える
写真やイラストと短い言葉で、扱っている商品やサービスがひと目で分かるようにします。 - 雰囲気を伝える
写真の明るさや色合いで、「信頼できそう」「楽しそう」といったサイトの世界観を伝えます。 - 次の行動へつなぐ
興味を持った人が、そのまま申し込みや詳しい説明へ進めるきっかけを用意します。
メインビジュアルを構成する要素
メインビジュアルは、主に「画像」「キャッチコピー」「サブコピー」「CTA」の4つの要素で組み立てます。
それぞれに役割があり、全部を入れなければいけないわけではありませんが、役割を知っておくと何を置くか決めやすくなります。
| 要素 | 役割 | 作るときのポイント |
|---|---|---|
| 画像(写真・イラスト) | 商品やサービスの雰囲気を、言葉より先に伝える | 何を扱うサイトかが分かるものを選ぶ |
| キャッチコピー | いちばん伝えたいことを短い言葉で伝える | 一番大きく、ひと目で読める長さにする |
| サブコピー | キャッチコピーを補足し、具体的な内容を伝える | キャッチコピーより小さく、1〜2行に収める |
| CTA(次の行動を促すボタン) | 興味を持った人を次の行動へ案内する | 押せることが分かる見た目にし、1つに絞る |
CTAとは「Call To Action(コール・トゥ・アクション)」の略で、「無料で試す」「資料を請求する」のように、見ている人に次の行動を促すボタンのことです(詳しくはCTAボタンとは?で解説しています)。
キャッチコピーの文字の大きさや書体の選び方はキャッチコピーのデザイン、周りの空け方はキャッチコピー周りの余白とは?で解説しています。
メインビジュアルの作り方
ここからは、メインビジュアルを実際に組み立てる手順とコツを見ていきます。
「伝えることを決める」「配置の型を選ぶ」「主役を1つにする」「文字を読みやすくする」「スマホ用に組み直す」の順に考えると迷いにくくなります。
最初に「誰に何を伝えるか」を一文で決める
メインビジュアルを作り始める前に、「誰に、何を伝えたいか」を一文で書き出しておきます。
伝えることが決まっていないまま画像を選ぶと、見た目はきれいでも、何のサイトか分からないメインビジュアルになりやすいためです。
たとえば「忙しい会社員に、15分で作れる夕食のレシピを届ける」と決めれば、画像は手早く作れる料理の写真、キャッチコピーは「15分」という手軽さを伝える言葉、と自然に決まっていきます。
この一文が、画像・キャッチコピー・CTAを選ぶときの判断の基準になります。
画像と文字の配置の型を選ぶ
メインビジュアルの画像と文字の並べ方には、よく使われる型がいくつかあるので、まずはその中から選ぶと組み立てやすくなります。
型ごとに得意なことが違うため、伝えたい内容や手元にある画像に合わせて選びます。
15分で、夕食をもう一品
忙しい日のかんたんレシピ
レシピを見る15分で、夕食をもう一品
忙しい日のかんたんレシピ
レシピを見る15分で、夕食をもう一品
忙しい日のかんたんレシピ
レシピを見る| 型 | 向いている場面 | 気をつけること |
|---|---|---|
| パターンA(写真に文字を重ねる) | 雰囲気の伝わる写真があり、世界観を強く見せたいとき | 写真の模様で文字が読みにくくならないようにする |
| パターンB(左右に分ける) | 商品やアプリの画面など、見せたいものがはっきりしているとき | スマホでは縦に積むので、上下の順番も決めておく |
| パターンC(文字を中心にする) | よい写真がないときや、言葉そのもので勝負したいとき | 文字の大きさや太さの差で、平坦に見えないようにする |
たとえば、飲食店や服、旅行のように写真で魅力が伝わるものならパターンA、アプリやWebサービスの画面、商品の形を見せたいものならパターンB、写真を用意しにくい個人のブログや、言葉で考え方を伝えたいサイトならパターンC、と考えると選びやすくなります。
どの型を選んでも、画像・キャッチコピー・CTAの3つが見つけやすい位置にあることは変わりません。
主役を1つに絞る
メインビジュアルでは、いちばん伝えたいメッセージを1つに決め、それだけを大きく見せます。
伝えたいことをいくつも同じ大きさで並べると、どれも目立たず、結局何も伝わらなくなるためです。
主役の決め方や、脇役との差のつけ方は主役と脇役とは?で解説しています。
初月無料キャンペーン中
レシピ数1,000品以上
アプリでも使える
無料で試すアプリを入手15分で、夕食をもう一品
1,000品以上のかんたんレシピ。初月は無料です。
無料で試すNGの見本では、「キャンペーン」「レシピ数」「アプリ」の3つが同じ大きさで並び、ボタンも2つあるため、どこから見ればいいのか迷います。
OKの見本では、キャッチコピーを1つだけ大きくし、レシピ数や無料の情報は小さなサブコピーにまとめたので、伝えたいことがまっすぐ届きます。
入りきらなかった情報は、メインビジュアルの下のコンテンツで改めて紹介すれば十分です。
文字の大きさの差で強弱をつける考え方は、ジャンプ率の記事でも解説しています。
写真に文字を重ねるときは読みやすさを確保する
写真の上にキャッチコピーを重ねる場合は、文字の後ろに暗い帯や色の面を敷くなどして、文字と背景の明るさに差をつけます。
写真は場所によって明るい部分と暗い部分が混ざっているため、文字をそのまま重ねると、一部だけ読めなくなることがあるからです。
15分で、夕食をもう一品
15分で、夕食をもう一品
NGの見本はわざと読みにくくしたもので、明るい模様の上に白い文字があるため、文字の形がほとんど見分けられません。
OKの見本では、文字のすぐ後ろだけを暗い色にしたことで、背景の写真がどんな模様でも文字がはっきり読めます。
帯を敷く以外にも、写真全体を少し暗くする、文字を写真の中の模様が少ない部分に置く、といった方法があります。
写真全体を暗くするには、写真の上に半透明の黒い面を1枚重ねる方法がよく使われ、「オーバーレイ」と呼ばれます。
FigmaやCanvaなら、写真の上に黒い四角を置いて不透明度を下げる、CSSなら写真の上に半透明の背景色を重ねる、といった方法で作れます。
文字と背景の明るさの差は「コントラスト比」という数値で確かめられます(基準の数値はコントラスト比とは?で解説しています)。
スマホでは縦長に組み直す
スマートフォン向けには、PC用の横長のメインビジュアルを縮めて使うのではなく、縦長の画面に合わせて組み直します。
横長の画像をそのまま縦長の画面に収めると、画像も文字も小さくなり、写真の大事な部分が切れてしまうこともあるためです。
この記事の最初に紹介した見本Bのように、スマホでは画像と文字を縦に積み、画像はスマホ用に切り抜いたものを用意するのが基本です。
スマホのファーストビューは狭いので、キャッチコピーとCTAが最初の画面に収まっているかも確かめましょう。
コーディングで画像を出し分ける
ここからは、Webサイトを自分でコーディングする人向けの補足です。
デザインツールだけで作る場合は、「PC用とスマホ用で別々に切り抜いた画像を用意しておく」とだけ覚えておけば十分です。
WixやSTUDIOのようなノーコードツール(コードを書かずにサイトを作れるサービス)や、WordPressのテーマの中には、管理画面でPC用とスマホ用の画像を別々に設定できるものもあります。
HTMLでは、picture要素を使うと、画面の幅に合わせてPC用とスマホ用の画像を出し分けられます(MDN: picture要素)。
<picture>
<!-- 画面の幅が768px以上ならPC用の横長の画像 -->
<source srcset="hero-pc.jpg" media="(min-width: 768px)">
<!-- それ以外はスマホ用の縦長の画像 -->
<img src="hero-sp.jpg" alt="フライパンで炒め物を作っている様子">
</picture>768pxという境目は一例なので、デザインで決めた画面幅に合わせて書き換えてください。
また、メインビジュアルの画像はページを開いてすぐに表示したいので、画像を後回しで読み込むloading="lazy"は付けないようにします。
後回しにすると、ページを開いた瞬間にメインビジュアルの場所が空白のまま待たされ、第一印象を損ねてしまうことがあるためです。
Googleの開発者向けサイトweb.devでも、最初の画面に表示される画像は遅延読み込みしないよう勧めています(web.dev:ブラウザレベルの画像の遅延読み込み)。
実践のポイント
メインビジュアルを作るときに陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- 見た目のインパクトを優先して、何のサイトか分からないメインビジュアルにしてしまうことがあります。
おしゃれな写真だけでは伝わらないので、キャッチコピーで「何を提供しているか」が分かるようにしましょう。 - キャッチコピーを画像の中に文字として描き込んでしまうことがあります。
画像の中の文字は、拡大すると粗くなったり、読み上げソフト(画面の文字を音声で読み上げるソフト)で読めなかったりします。
だれでも情報を受け取れるWebにするための国際的なガイドラインWCAG 2.2でも、ロゴのような例外を除き、文字は画像ではなくテキストで表すことを求めているので、キャッチコピーはなるべくHTMLの文字で載せましょう(WCAG 2.2 達成基準1.4.5 文字画像・WAIC日本語訳)。 - ファイルサイズの大きな画像をそのまま使い、ページの表示が遅くなってしまうことがあります。
画像は表示する大きさに合わせて縮小・圧縮しておきましょう(表示の速さはGoogle Lighthouseで確かめられます)。 - キャッチコピーやCTAがファーストビューからはみ出してしまうことがあります。
特にスマホでは画像を大きくしすぎると文字が画面の外に押し出されるので、実際の画面で確かめましょう。
よくある質問
- Q. メインビジュアルとファーストビューは同じもの?
A. 同じ意味で使われることもありますが、厳密には違います。
ファーストビューはスクロールせずに見える「範囲」、メインビジュアルはその範囲に置く大きな画像と文字の「かたまり」です。 - Q. 画像が自動で切り替わるスライダーにしてもいい?
A. 使えますが、伝えたいことが1つに絞れているなら、1枚で見せるほうが伝わりやすくなります。
自動で切り替える場合は、WCAG 2.2で、5秒以上続く動きは止められるようにすることが求められている点にも注意しましょう(WCAG 2.2 達成基準2.2.2 一時停止、停止、非表示・WAIC日本語訳)。 - Q. 使える写真がないときはどうすればいい?
A. 文字を中心にしたパターンCの型がおすすめです。
キャッチコピーを大きく、背景は落ち着いた色の面にして、イラストや図形を添えるだけでも十分なメインビジュアルになります。 - Q. メインビジュアルの高さは何pxにすればいい?
A. 決まった数値はありません。
画面の大きさは人によって違うので、「キャッチコピーとCTAがファーストビューに収まり、下にコンテンツが続くことが少し見える」高さを目安に、PCとスマホの両方で確かめながら決めましょう。
まとめ
メインビジュアルとは、ヘッダーのすぐ下に置く大きな画像とキャッチコピーのエリアのことで、ページを開いた人に「何のサイトか」を最初に伝える役割があります。
伝えることを一文で決め、配置の型を選び、主役のメッセージを1つに絞ったうえで、文字の読みやすさとスマホでの見え方を確かめることがポイントです。
まずはよく見るWebサイトのトップページを開き、メインビジュアルが画像・キャッチコピー・CTAのどの型で組まれているかを観察してみましょう。
