メインビジュアルとは？サイズ・作り方・デザイン例を解説

2026年7月28日

生徒

「メインビジュアル」ってよく聞きますが、ヒーロー画像と何が違うんですか？サイズも迷います…

ペン博士

ほぼ同じ意味で使われるよ！サイトの第一印象を決める一番上の大きな見せ場のこと。今日は推奨サイズや作り方の考え方をまとめて解説するね。

Webサイトを開いた瞬間、訪問者の目に最初に飛び込んでくる大きなビジュアル領域——それがメインビジュアルです。企業サイト、ポートフォリオ、ECサイト、あらゆるWebサイトにおいてメインビジュアルはブランドの第一印象を決定づける最重要エリアといっても過言ではありません。しかし「ヒーローイメージ」「ファーストビュー」「キービジュアル」など類似する用語が多く、どう違うのか、どのサイズで作ればいいのかと迷っている方も多いでしょう。

本記事ではメインビジュアルの定義から推奨サイズ・解像度、HTML/CSSによる実装方法、デザインのポイントまでを体系的に解説します。Webデザイン初学者からコーダーまで、実務で使える知識を網羅しました。

メインビジュアル・ヒーローイメージ・ファーストビューの違い
PC・タブレット・スマートフォン別の推奨サイズと解像度
Retinaディスプレイ対応と画像最適化（WebP・遅延読み込み）の方法
テキストコピーとCTAボタンの効果的な配置
HTML/CSSで全面背景表示を実装するコード
よくある失敗とその解決策

メインビジュアルとは何か

メインビジュアル（Main Visual）とは、Webページのトップ部分に配置される最も大きなビジュアル要素のことです。英語では「Hero Image」「Hero Section」と呼ばれることが多く、写真・イラスト・動画・グラデーションなどを背景にブランドメッセージやCTAボタンを重ねる構成が一般的です。

Webサイトにアクセスした際に最初に目に入るエリアであるため、ブランドの世界観・信頼感・サービスの魅力を瞬時に伝える役割を担っています。訪問者が「このサイトを読み続けるか離脱するか」を決める数秒間の勝負どころともいえます。

ヒーローイメージとの違い

「ヒーローイメージ（Hero Image）」はメインビジュアルとほぼ同義で使われることがほとんどです。ただし厳密には、ヒーローイメージは背景に使用する大きな画像そのものを指し、メインビジュアルはその画像を含むセクション全体（テキスト・ボタン込み）を指す場合があります。日本語のWeb制作現場では「メインビジュアル＝ヒーローセクション」という意味合いで使われることが多いです。

ファーストビューとの違い

ファーストビュー（First View）とは、スクロールせずにブラウザウィンドウ内に表示される領域全体を指します。メインビジュアルがファーストビュー全体を占有するデザインも多いですが、ファーストビューにはナビゲーションバーや検索ボックスなど他の要素も含まれます。「ファーストビュー＝メインビジュアル」ではなく、「メインビジュアルはファーストビューの中核を占めるビジュアル要素」という関係が正確です。

キービジュアルとの違い

キービジュアル（Key Visual、KV）はもともと広告・印刷物の世界で使われてきた用語で、キャンペーン全体を象徴する核となるビジュアルを意味します。Webの文脈でもトップページの大きなビジュアルをキービジュアルと呼ぶケースがあり、実質的にメインビジュアルと同義です。LP（ランディングページ）ではファーストビューの画像をキービジュアルと呼ぶことが特に多い傾向があります。

メインビジュアルの推奨サイズと解像度

メインビジュアルのサイズ設計で最も重要なのは、「どのデバイスでどう見えるか」を起点に考えることです。PC・タブレット・スマートフォンそれぞれの標準的なビューポートサイズを把握したうえで、画像の実寸・解像度を決定します。

PCの推奨サイズ

現在の主流モニターサイズは1280px〜1920px幅です。メインビジュアル画像は幅1920px・高さ1080px（16:9）を基準に用意しておくと、フルHDモニターでも画質が落ちません。ただし実際のコンテンツ幅（コンテナ幅）は1000px〜1200px程度に制限するサイトが多いため、背景全面に画像を敷く場合は1920px、コンテナ内に収める場合は1200px幅で用意すれば十分です。

フルスクリーン背景：幅1920px × 高さ1080px
コンテナ幅に収める場合：幅1200px × 高さ675px（16:9）または任意の高さ
解像度：72dpi（Web標準）、Retina対応は2x画像（3840×2160）も用意

タブレットの推奨サイズ

タブレット（iPad等）の代表的なビューポートは768px〜1024px幅です。CSS側でメディアクエリを設定し、PCと同じ画像を使いながら高さや表示位置を調整するのが一般的です。専用のタブレット画像を用意する場合は幅1024px × 高さ768pxが基準になります。

スマートフォンの推奨サイズ

スマートフォンは375px〜430px幅が主流です。PC向けの横長画像をスマートフォンでそのまま使うと、人物や商品が小さく見えたり、重要な被写体が切れたりする問題が起きます。そのためスマートフォン専用の縦長画像（幅750px × 高さ1000px〜1334px程度）を別途用意することを強くおすすめします。

Retinaディスプレイへの対応

Apple製品をはじめとするRetinaディスプレイ（高DPIディスプレイ）は、デバイスピクセル比（DPR）が2倍または3倍になります。CSSピクセルで1920px幅のエリアに1920px画像を表示すると、Retinaでは引き伸ばされてぼやけて見えます。対処法は2種類あります。

2倍サイズの画像を用意してmax-widthで制御：3840px幅の画像をCSSで1920pxに収める
srcset属性でDPR別に画像を切り替え：1x用と2x用を用意してブラウザに選択させる

<!-- srcsetを使ったRetina対応 -->
<img
  src="hero-1920.jpg"
  srcset="hero-1920.jpg 1x, hero-3840.jpg 2x"
  alt="ブランドメインビジュアル"
  width="1920"
  height="1080"
>

画像最適化の方法

メインビジュアルはサイズが大きいためページ読み込み速度に直結します。Core Web Vitalsの指標であるLCP（Largest Contentful Paint）に最も影響する要素でもあるため、画像最適化は必須です。

WebPフォーマットへの変換

WebPはGoogleが開発した次世代画像フォーマットで、同等の画質でJPEGより25〜35%、PNGより最大80%ファイルサイズを削減できます。現在はほぼすべての主要ブラウザがWebPをサポートしているため、積極的に活用すべきフォーマットです。

<!-- pictureタグでWebP対応とフォールバックを両立 -->
<picture>
  <source
    srcset="hero.webp 1x, hero@2x.webp 2x"
    type="image/webp"
  >
  <img
    src="hero.jpg"
    srcset="hero.jpg 1x, hero@2x.jpg 2x"
    alt="メインビジュアル"
    width="1920"
    height="1080"
    fetchpriority="high"
  >
</picture>

遅延読み込み（Lazy Load）の注意点

画像の遅延読み込み（loading=”lazy”）はスクロール後に表示される画像には有効ですが、メインビジュアルには絶対にloading=”lazy”を設定してはいけません。ファーストビューに表示される最重要画像を遅延させるとLCPスコアが大幅に悪化します。代わりに`fetchpriority=”high”`を設定して優先読み込みを指示してください。

<!-- メインビジュアルはlazyを使わず優先読み込みにする -->
<img
  src="hero.webp"
  alt="メインビジュアル"
  width="1920"
  height="1080"
  fetchpriority="high"
  decoding="async"
>
<!-- スクロール後の画像にはlazyを使う -->
<img
  src="product.webp"
  alt="商品イメージ"
  width="800"
  height="600"
  loading="lazy"
  decoding="async"
>

preloadリンクタグによる先読み

メインビジュアルのLCPをさらに改善するには、`<head>`内でpreloadを設定し、ブラウザが早期に画像のダウンロードを開始できるようにします。

<!-- headタグ内に追加 -->
<link
  rel="preload"
  as="image"
  href="hero.webp"
  imagesrcset="hero-750.webp 750w, hero-1920.webp 1920w"
  imagesizes="100vw"
>

メインビジュアルのデザイン例と作り方

効果的なメインビジュアルは「写真・コピー・CTA」の3要素を適切に組み合わせることで成立します。それぞれの設計ポイントを解説します。

主なデザインパターン

メインビジュアルのデザインには大きく分けて以下のパターンがあります。

パターン	特徴	向いているサイト
フルスクリーン背景画像	迫力・没入感が高い	ブランドサイト・観光・飲食
左テキスト＋右画像（半割）	情報が整理されて読みやすい	SaaS・コーポレート
スライダー（カルーセル）	複数コンテンツを訴求できる	ECサイト・メディア
グラデーション＋テキスト	軽量・モダン	スタートアップ・アプリ
背景動画	インパクト大・世界観を伝える	ラグジュアリー・クリエイティブ系

コピーライティングのポイント

メインビジュアルに載せるキャッチコピーは「誰の・何の・どんな価値か」を一瞬で伝えることが重要です。長い文章は読まれません。以下のフォーミュラが使えます。

価値提案型：「〇〇が、もっと簡単に。」
課題解決型：「〇〇で悩んでいませんか？」
数字訴求型：「導入企業3,000社突破」
ベネフィット型：「明日から使える〇〇」

CTAボタンの配置

CTAボタンはコピーの直下に配置し、背景との十分なコントラスト比（WCAG AAでは4.5:1以上）を確保してください。ボタンの大きさは最低でもタップエリアとして48px × 48pxを確保します。アクションを促すテキストは「詳しく見る」より「無料で試す」「資料を今すぐダウンロード」など具体的な行動を示す言葉が効果的です。

HTML/CSSでメインビジュアルを実装する

ここからは実際のコードを使って、代表的な実装パターンを解説します。背景画像をCSSで全面表示する方法と、imgタグを使った方法の両方を紹介します。

background-sizeを使った背景全面表示

CSSの`background-size: cover`を使う方法は最も手軽です。コンテナのアスペクト比に合わせて画像が自動的に拡縮・クロップされます。

<section class="hero">
  <div class="hero__inner">
    <h1 class="hero__title">あなたのビジネスを、次のステージへ</h1>
    <p class="hero__lead">Web制作・システム開発のプロフェッショナルチーム</p>
    <a href="/contact/" class="hero__cta">無料で相談する</a>
  </div>
</section>

.hero {
  /* 背景画像の全面表示設定 */
  background-image: url('hero.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  /* 高さの設定 */
  min-height: 100vh;
  /* モダンブラウザはdvhを使うと正確 */
  min-height: 100dvh;

  /* フレックスでコンテンツを中央配置 */
  display: flex;
  align-items: center;
  justify-content: center;

  /* オーバーレイ（暗幕）で文字を見やすく */
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: 0 1.5rem;
  max-width: 800px;
}

.hero__title {
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.hero__lead {
  font-size: clamp(1rem, 2vw, 1.3rem);
  margin-bottom: 2rem;
  opacity: 0.9;
}

.hero__cta {
  display: inline-block;
  padding: 1rem 2.5rem;
  background-color: #d16176;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 1.1rem;
  font-weight: 700;
  transition: background-color 0.2s;
}

.hero__cta:hover {
  background-color: #b84d61;
}

/* スマートフォン対応 */
@media (max-width: 640px) {
  .hero {
    background-image: url('hero-sp.webp');
    background-position: top center;
  }
}

object-fitを使ったimgタグによる実装

imgタグを使う方法はLCPの最適化・SEOフレンドリー・アクセシビリティの面でCSSバックグラウンドより有利です。`object-fit: cover`でコンテナに合わせてクロップします。

<section class="hero">
  <picture class="hero__bg">
    <source
      media="(max-width: 640px)"
      srcset="hero-sp.webp 750w"
      type="image/webp"
    >
    <source
      srcset="hero-1920.webp 1920w, hero-1280.webp 1280w"
      sizes="100vw"
      type="image/webp"
    >
    <img
      src="hero-1920.jpg"
      alt=""
      width="1920"
      height="1080"
      fetchpriority="high"
      decoding="async"
    >
  </picture>
  <div class="hero__inner">
    <h1 class="hero__title">あなたのビジネスを、次のステージへ</h1>
    <a href="/contact/" class="hero__cta">無料で相談する</a>
  </div>
</section>

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* オーバーレイをimgの上に重ねる */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: 0 1.5rem;
}

レスポンシブ対応の高さ設定

スマートフォンでは100vhがアドレスバーの高さを含んでしまい、意図した表示にならない問題があります。モダンブラウザでは`100dvh`（dynamic viewport height）を使うことで解決できます。古いブラウザへのフォールバックも忘れずに設定しましょう。

.hero {
  /* フォールバック */
  min-height: 100vh;
  /* 対応ブラウザではdvhで上書き */
  min-height: 100dvh;
}

/* タブレット：少し低めに設定 */
@media (max-width: 1024px) {
  .hero {
    min-height: 80vh;
    min-height: 80dvh;
  }
}

/* スマートフォン：縦横比で制御することもある */
@media (max-width: 640px) {
  .hero {
    /* アスペクト比で高さを決める手法 */
    aspect-ratio: 3 / 4;
    min-height: unset;
  }
}

よくある失敗と解決策

メインビジュアルの実装でつまずきやすいポイントをまとめます。

失敗1：画像が重くてページ読み込みが遅い

原因は画像を最適化せずにそのままアップロードしていることです。Photoshopで書き出す場合は「Web用に書き出し」からWebPを選択し、品質70〜80%が目安です。オンラインツールではSquoosh（squoosh.app）が無料で高性能です。目安はファイルサイズ200KB以下。

失敗2：スマートフォンで人物が切れる

PC向け横長画像をスマートフォンでもそのまま使っている場合に起きます。解決策は①スマートフォン専用縦長画像をmedia queryで切り替える、②`background-position`や`object-position`で表示位置を調整する、の2つです。

/* PCでは中央、スマートフォンでは人物に合わせて位置調整 */
.hero {
  background-position: center center;
}

@media (max-width: 640px) {
  .hero {
    /* 右寄りに人物がいる場合の例 */
    background-position: 70% center;
  }
}

失敗3：テキストが背景と同化して読めない

明るい背景画像の上に白文字を置くと、画像によっては読みにくくなります。解決策は①`::before`擬似要素で半透明の暗幕オーバーレイを追加、②テキストに`text-shadow`を追加、③背景の暗い部分にテキストを配置するよう`object-position`で調整、の3つです。

失敗4：alt属性を空のまま装飾画像に使ってしまう

メインビジュアルの背景画像がデザイン上の装飾に過ぎない場合（テキストや製品写真ではなく抽象的なグラデーション写真など）、`alt=””`（空のalt）が正しい対応です。ただし商品や人物など意味のある画像を使っている場合は適切な代替テキストを必ず記述してください。

失敗5：CLS（累積レイアウトシフト）が発生する

imgタグに`width`と`height`属性を省略すると、画像読み込み前後でレイアウトがズレてCLSスコアが悪化します。必ず実際の画像サイズと同じ数値をwidth/height属性に指定してください。CSSで`max-width: 100%`と`height: auto`を組み合わせれば、属性値とCSSが共存できます。

まとめ

メインビジュアルは、サイトを開いた瞬間に印象を決める最上部のビジュアルです。ポイントは①横幅は1920px前後、レスポンシブで複数サイズを用意②伝えたいメッセージを1つに絞る③文字は画像の上でも読める配色にする、の3点。デザイン例とサイズの目安を参考に、目的に合ったメインビジュアルを設計してください。

よくある質問（FAQ）

メインビジュアルのファイルサイズはどれくらいが目安ですか？

WebP形式で200KB以下を目標にしてください。Google PageSpeed Insightsでは画像圧縮の改善提案が表示されるので、定期的にチェックして100〜200KBに収まるよう調整するのがベストです。どうしても大きくなる場合でも300KB以内に抑えることを推奨します。

メインビジュアルの高さに決まりはありますか？

決まりはありませんが、PCでは画面の50〜100%の高さが一般的です。フルスクリーン（100vh）はインパクトがある反面、スクロールを促す必要があります。高さ600〜700pxに固定して「続きが見える」デザインにする方が直帰率が下がるという事例も多くあります。サービスの性質に合わせて選択してください。

スライダー（カルーセル）はSEOに悪影響がありますか？

スライダー自体がSEOに悪影響を与えることはありませんが、自動スクロールが速いとユーザーが内容を読めず離脱率が上がる可能性があります。また複数の画像をすべて読み込むため初期表示速度が遅くなりやすい点に注意が必要です。SEOより表示速度を優先するなら、スライダーを1枚の静止画に切り替えることを検討してください。

background-imageとimgタグどちらを使うべきですか？

SEO・アクセシビリティ・LCP最適化の観点ではimgタグが推奨されます。imgタグはブラウザのプリロードスキャナーに認識されるため、CSSで指定するbackground-imageより早く読み込みが開始されます。ただし装飾目的でalt属性を空にする場合など、意味を持たない画像にはbackground-imageでも問題ありません。

スマートフォン用の画像は必ず別途用意すべきですか？

必須ではありませんが、強く推奨します。横長のPC向け画像をスマートフォンで表示すると、重要な被写体が端に切れたり画像容量が過剰になったりします。pictureタグのmedia属性でPC用・スマートフォン用を切り替えることで、ユーザー体験と読み込み速度の両方を改善できます。

あわせて読みたい関連記事

CSS・Webデザイン実装の総まとめ

CSSの実装テクニックを「レイアウト・装飾・アニメーション・基礎・トラブル解決」の目的別に探せる総まとめページを用意しています。実装で迷ったときの索引としてどうぞ。

【CSS実装テクニック完全マップ】コピペで使えるWebデザイン実装ガイド総まとめ

AIスキルで、未来の自分をアップデート！

今なら完全無料でAIを学べる！

動画や実践で楽しく学べる：初心者でも安心のカリキュラム
スマホ・PCどちらでもOK：好きな時間に学習できる
料金は一切ナシ：0円でAIスキルが身につく

目的に合わせて選べる「AI副業」「AI転職」「AI活用」の3コースを用意。副収入・キャリアチェンジ・日常の生産性アップまで、あなたのゴールに合わせてAIを学べます。

会員登録はカンタン30秒で完了します。まずは公式LINEから、無料でAI学習をスタートしましょう！

公式LINEから学習をスタート

この記事を書いた人

田中誠

WithCodeでWeb制作を習得後、フリーランスエンジニアとして活動。HTML/CSS・JavaScript・WordPress案件を中心に年間20件以上の制作実績を持つ。「難しい技術をわかりやすく」をモットーに、初心者〜中級者向けの技術記事を執筆。副業・フリーランス独立を目指す方に向けた情報発信に注力している。