キービジュアルの作り方｜メインビジュアル・FVとの違いと構成要素

LP（商品やサービスの申し込みまでを1ページにまとめたページ）を作るとき、いちばん時間がかかるのが上の1枚です。ここが決まらないと、下も決まりません。

その1枚をキービジュアルと呼びます。現場ではメインビジュアル、MV、FVといった呼び方も飛び交うので、まずここを整理します。言葉が揃っていないと、修正の指示が噛み合いません。

そのあと、キービジュアルの構成要素と作る順番を見ていきます。最後に、実際のLPを1つ分解する練習をします。作る前に、良い1枚の中身を知っておきましょう◎

キービジュアル・メインビジュアル・ファーストビューの関係

3つとも「ページの上のほう」を指す言葉ですが、意味する範囲が違います。

言葉	略	指すもの
キービジュアル	KV	そのブランドや企画の顔になる1枚。Web・チラシ・広告で使い回す
メインビジュアル	MV	そのページの主役になる画像。ページごとに変わる
ファーストビュー	FV	スクロールせずに見える範囲。画像ではなく「領域」を指す

いちばん大きいのがキービジュアルです。1つの企画に対して1枚作り、Webサイト、SNS、チラシ、交通広告と、あらゆる場所で同じ1枚を使います。
メインビジュアルはページ単位です。トップページと採用ページで別々のものを置きます。

いま手元で確かめられます。YouTubeを開いて、スクロールせずに見えている範囲。あれがファーストビューです。映画の公開時に駅のポスター・Web・SNSで同じ絵柄を見かけるとしたら、そちらがキービジュアルにあたります。

ファーストビューだけは種類が違います。画像そのものではなく、画面をスクロールしないで見える範囲のことです。「FVに入れる」は「上の見える範囲に置く」という意味になります。

実務では、この3つが混ざったまま会話が進むこともあります。相手が範囲の話をしているのか、画像1枚の話をしているのか。ここだけ確認すれば、指示のずれはほぼ防げます。
ページ全体の部品の呼び方はWebページの構成要素でまとめています。

キービジュアルの構成要素は5つ

良いキービジュアルは、だいたい同じ部品でできています。この5つです。

順番も大事です。上から1→2→3の順で目に入るように、大きさと位置を決めます。ジャンプ率で学んだ倍率がそのまま使えます。キャッチコピーと補足の差は、最低でも1.5倍つけてください。

5の安心の材料は、入れすぎると邪魔になります。1〜2個で十分です。3秒で読み切れる量に収めてください。

Amazonの商品ページが分かりやすい例です。商品名のすぐ下に星の評価とレビュー件数が置いてあります。文章の説明ではなく、記号と数字だけ。安心の材料は、この形が理想です。楽天の商品ページも同じ位置に同じものを置いています。あなたが作るバナーなら、実績の数字を1つだけ大きめに出す形になります。

逆に、キービジュアルに入れなくていいものもあります。会社の沿革、細かい料金表、長い説明文。これらは下のセクションで扱えば足ります。上で全部説明しようとすると、どれも読まれません。

作る順番は「言葉 → 配置 → 写真」

写真から選ぶと、まず失敗します。きれいな写真に合わせて言葉を削ることになり、伝えたいことが消えるからです。

1. キャッチコピーを決める：20字以内。誰の何が変わるかを書きます
2. 5つの要素を四角で配置する：写真は灰色の四角のまま、大きさと位置だけ決めます
3. 写真を当てはめる：2で決めた四角に合う写真を探します
4. 文字が読めるか確認する：写真の上に文字が乗る場合、背景を暗くするか帯を敷きます
5. スマホで見る：横長で作ったものは、縦になると左右が切れます

写真を先に決めないでください。灰色の四角のまま配置を終わらせると、「この位置に、この形の写真が要る」と条件がはっきりします。素材探しの時間も短くなります。

4の「文字が読めるか」は、写真を使うキービジュアルで必ず起きる問題です。直し方は3つあります。写真全体を暗くする、文字の裏に半透明の帯を敷く、写真の中の空いている部分に文字を置く。
いちばん強いのは3つ目です。最初から文字を置ける余白がある写真を選べば、加工が要りません。

スマホでの見え方を先に決める

キービジュアルの失敗でいちばん多いのが、スマホで主役が切れることです。パソコンの横長で作った1枚は、縦長の画面に入れると左右が削られます。Instagramに横長の写真を上げると、一覧では正方形に切り取られますよね。あれと同じことが起きています。

対策は2つです。

• 大事なものを中央に寄せる：左右の端は残らない前提で置きます
• スマホ用に別の1枚を作る：縦長のレイアウトを作り直します。手間はかかりますが確実です

アクセスの多くがスマホからなら、スマホの縦長で先に作るのが早いです。縦で成立したものを横に広げるほうが、逆より簡単です。

公開前に、次の項目を確認してください。

ミニ実践：LPのキービジュアルを分解する

所要15分。作る前に、実物を分解します。

1. 気になる商品やサービスのLPを1つ開き、上の1画面をスクリーンショットで撮ります
2. その画像を、Canvaやパワーポイントに貼ります
3. 5つの要素（キャッチコピー・補足・ビジュアル・ボタン・安心の材料）を四角で囲み、番号を振ります
4. 足りない要素があれば書き出します。なくても成立しているなら、その理由を考えます
5. 同じページをスマホでも開いて、何が切れているか見ます
6. キャッチコピーを書き写して、文字数を数えます

6をやると気づきます。うまいキャッチコピーは、たいてい20字前後です。長い説明は下に置いてあります。

3つのLPで同じことをすると、業種ごとの型が見えてきます。物を売るページは写真が大きく、サービスのページは文字が大きい。自分が作るときの参考になりますよ。

よくある質問

メインビジュアルとキービジュアルの違いは何ですか？

使う範囲が違います。キービジュアルは企画やブランド全体で使い回す1枚で、Webにもチラシにも広告にも同じものを使います。メインビジュアルはページ単位の主役画像で、トップページと採用ページでは別々のものになります。
ただし現場では、この2つをほぼ同じ意味で使う人もいます。話が噛み合わないと感じたら、「ページ単位の話ですか、企画全体の話ですか」と聞くのが早いです。

キービジュアルにはどんな例がありますか？

身近なところだと、映画の公開時に駅・Web・チラシで見かける同じ絵柄。あれが典型です。ドラマの番宣、季節キャンペーン、イベントの告知でも同じ作り方をします。
Webだと、LPの上に大きく置かれた写真とキャッチコピーの組み合わせがそれにあたります。
共通しているのは、媒体が変わっても同じ絵柄を使い続けている点です。何度も見せることで覚えてもらう狙いがあります。

キービジュアルは日本語で何と言い換えますか？

1語で置き換えられる訳語はありません。「主要画像」「看板になる1枚」「顔となるビジュアル」あたりが近い言い方です。
社内の資料では「メインの絵柄」と書く例もよく見ます。相手が用語に慣れていないときは、無理に英語のまま使わず、「ページの上に置く大きい1枚」と説明したほうが伝わります。

写真がなくてもキービジュアルは作れますか？

作れます。文字と図形だけで組む方法があります。大きなキャッチコピーを主役にして、背景は1色か薄い質感だけにする。この形は、サービス系のLPでよく見かけます。
写真がないぶん、文字の大きさの差と余白で見せることになります。余白の使い方とジャンプ率が効いてくる場面です。

次に学ぶこと

今回のまとめです。

• キービジュアル（KV）は企画の顔。メインビジュアル（MV）はページの主役。ファーストビュー（FV）は見える範囲
• 構成要素は、キャッチコピー・補足・ビジュアル・ボタン・安心の材料の5つ
• 作る順番は、言葉 → 四角で配置 → 写真 → 可読性 → スマホ確認
• スマホでは左右が切れる。大事なものは中央に寄せる

次のレッスンはインフォグラフィックです。1枚の絵で情報を伝える話で、キービジュアルの中に数字や流れを入れたいときに役立ちます。
ページ全体の組み立てに進みたい方はWebページの構成要素へどうぞ。

コース全体の流れはデザイン基礎知識コースの目次から確認できます。