画面いっぱいに写真を敷き、中央にキャッチコピーを重ねる王道の形。写真の力で第一印象をつくります。ヘッダーは透過させて写真の上に重ねるのが一般的です。
構成はそのままで、画像だけ縦長に切り抜いたスマホ用を用意します。PC用の横長写真をそのまま縮めると、主役が小さく左右も切れがちです。
左にコピーとボタン、右に画像を並べる形。文字と写真が重ならないので、どんな写真でも読みやすさを保てます。情報を正確に伝えたいサービスサイトで定番です。
画像を上、コピーとボタンを下に縦積みします。画像の高さを画面の4〜5割に抑えると、最初の画面にボタンまで収まります。
音なしの短い動画を背景にループ再生し、コピーを重ねる形。職場の雰囲気や製品が動く様子など、写真では伝わりにくい空気感を伝えられます。
構成はPCと同じですが、縦長に切り出した軽い動画に差し替えるか、静止画に切り替えます。通信量の多い動画はスマホの表示速度に直結します。
複数の写真を数秒ごとに切り替える形。商品や施設など、見せたいカットが複数あるときに使います。コピーは固定して、画像だけを切り替えるのがおすすめです。
画像を上、コピーを下に分けると、写真が小さくなってもコピーが読みやすくなります。切り替えは左右のスワイプにも対応させます。
画像を使わず、大きなキャッチコピーそのものを主役にする形。言葉に自信があるとき、写真素材が用意できないときにも有効で、画像がない分とても軽く表示されます。
文字の大きさを保ったまま、改行位置を決めて3〜4行に組み直します。自動の折り返しに任せると、単語の途中で改行されて読みにくくなります。
コピーとボタンを中央にまとめ、その下に製品画面やイメージ画像を大きく見せる形。画像は画面の下で途切れさせ、続きを見たくなるようにスクロールを促します。
同じ順番のまま縦に積みます。画像は画面幅いっぱいに近づけ、一部が最初の画面に見えている状態にすると、下に続くことが伝わります。
画像を画面端まで広げず、余白と角丸で枠に収め、コピーを白いカードで少し重ねる形。全面画像より上品で落ち着いた印象になり、写真の上でも文字が読みやすいのが利点です。
画像を上に置き、コピーのカードを画像の下端に少し重ねます。重なりがあることで、2つの要素がひとかたまりに見えます。
大きさの違う複数の写真をグリッドに並べ、コピーと組み合わせる形。人・場所・商品など、1枚では伝えきれない多様さを一度に見せられます。
コピーを先に見せ、写真は2列の小さなグリッドに組み直します。PCと同じ枚数を並べると1枚が小さくなりすぎるため、3〜4枚に絞ります。
キャッチコピーを縦書きにして写真と組み合わせる、日本語ならではの形。明朝体と合わせると、和の趣や老舗らしい格調を表現できます。
写真を全面に敷き、縦書きのコピーを右上に重ねます。縦書きは横幅をとらないため、スマホの狭い画面でも大きな文字で見せられます。
コピーの横に動画のサムネイルを置き、クリックで再生する形。サービス紹介やインタビューなど、音声付きでしっかり見てほしい動画に向いています。
コピーを上、16:9の動画を下に縦積みします。再生ボタンは指で押しやすい大きさ（44px以上）にします。
コピーと実績の数字、問い合わせフォームを最初の画面にまとめるLP向けの形。広告から来た人がスクロールせずに申し込めるため、問い合わせや資料請求の獲得を目的とするページで効果的です。
スマホの最初の画面にフォームは収まらないため、コピーと実績の下に目立つボタンを置き、フォームまでスクロールさせます。フォームはその直下に置きます。
メインビジュアルの下端に、最新のお知らせを1行の帯で表示する形。更新情報を最初の画面で伝えられるため、お知らせの重要度が高い企業・団体のサイトで使われます。
帯はPCと同じく画面の下端に置き、日付とタイトル1件だけに絞ります。タイトルが長い場合は1行で省略します。
画像を斜めのラインで切り抜き、コピーの面と分ける形。左右2分割と同じく文字が読みやすいまま、勢いや前向きな印象を加えられます。
画像を上に置き、下端を斜めに切ってコピーにつなげます。スマホでは斜めの角度を浅くすると、画像の欠ける部分が少なくて済みます。
背景を写真ではなくブランドカラーの面にし、人物や商品を切り抜いて置く形。色で印象を統一でき、写真の背景に左右されないので、撮影環境が整っていなくても成立します。
切り抜き画像を上、コピーを下に縦積みします。背景の色面はそのまま画面いっぱいに広げ、PCと同じ印象を保ちます。
画面を縦に3つのパネルに分け、事業や部門ごとの写真と入口を並べる形。最初の画面で「何をしている会社か」と「どこへ進めばよいか」を同時に示せます。
3つのパネルを横長の帯にして縦に積みます。帯ごとにタップできるリンクにすると、最初の画面がそのままナビゲーションになります。
コピーの下に検索窓と、よく使われる条件のボタンを置く形。物件・求人・店舗などを探しに来た人を、最初の画面からすぐに検索へ進ませます。
検索窓を画面幅いっぱいにし、条件のボタンは横スクロールのチップにします。入力欄をタップしたときにキーボードで隠れない位置に置きます。
商品を画面の中央に大きく置き、その左右に特徴を短く添える形。商品そのものが主役で、見た瞬間に「何が良いのか」まで伝えられます。
商品を中央に置いたまま、特徴は商品の下に横並びの小さなアイコンにまとめます。左右に振り分けると文字が小さくなりすぎます。
コピーの下で、たくさんの写真が横にゆっくり流れ続ける形。スライダーのように1枚ずつ待たせることがなく、にぎやかさや人の多さ、実績の幅を自然に見せられます。
写真の帯は1〜2段にして、1枚の大きさを保ちます。コピーは上にまとめ、帯との間に余白をとって読みやすくします。
画面からはみ出すほど大きな英字（ブランド名やコンセプト）を写真に重ね、日本語のコピーは小さく添える形。雑誌の表紙のような、デザイン性の高い印象をつくれます。
英字は改行して2〜3行に積み、画面幅いっぱいに大きく見せます。日本語のコピーとボタンは写真の下にまとめて読みやすさを確保します。
大きなビジュアルを置かず、短いコピーのすぐ下から記事・サービス・商品の一覧を見せる形。情報を探しに来る人が多いサイトでは、最初の画面から目的の情報に届くことが何より大切です。
コピーは1〜2行に抑え、カードは1列で次のカードが少し見えるように並べます。下に続くことが分かれば、自然とスクロールされます。
高さを 100vh だけで指定すると、縦に長いモニターでは間延びし、スマホではアドレスバーの分だけ下が隠れます。PCは上限と下限を設け、スマホは 100svh（ブラウザのUIを除いた高さ）を使うと安定します。
.mv {
/* PC：縦に長い画面で間延びしないよう上限を設ける */
height: min(100vh, 860px);
min-height: 560px;
}
@media (max-width: 767px) {
.mv {
/* スマホ：アドレスバーを除いた高さ（100vh だと下が隠れる） */
height: 100svh;
min-height: 0;
}
}横長の写真をスマホでそのまま使うと、主役が小さくなったり左右が切れたりします。<picture> で画面幅ごとに別の画像を指定すると、それぞれに合った切り抜きを見せられます。width / height も画像ごとに書いておくと、読み込み時のレイアウトのずれ（CLS）を防げます。
<picture>
<source media="(max-width: 767px)" srcset="/img/mv-sp.webp" width="750" height="1334">
<img src="/img/mv-pc.webp" width="1920" height="1080" alt="" fetchpriority="high">
</picture>メインビジュアルの画像は、表示速度の指標であるLCP（最大の要素が表示されるまでの時間）の対象になることがほとんどです。loading="lazy" を付けず、fetchpriority="high" で優先して読み込ませます。WordPressのテーマで出力する場合は次のように指定できます。
<?php
// テーマでメインビジュアルの画像を出力する場合（lazy を外し、優先して読み込む）
echo wp_get_attachment_image( $image_id, 'full', false, array(
'loading' => false,
'fetchpriority' => 'high',
) );自動再生には muted と playsinline が必須です。poster で最初の1コマの画像を指定し、動きが苦手な人の設定（prefers-reduced-motion）では再生を止めます。動画はMP4（H.264）で10〜20秒、数MB以内が目安です。
<video class="mv-video" autoplay muted loop playsinline poster="/img/mv-poster.webp">
<source src="/video/mv.mp4" type="video/mp4">
</video>
<script>
// 「動きを減らす」設定の人には再生しない（poster の画像が表示される）
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
document.querySelector('.mv-video').pause();
}
</script>写真の明るい部分に白い文字が重なると読めなくなります。半透明の暗幕やグラデーションを重ね、文字と背景のコントラスト比を確認しましょう。ほかにも、次のリソースが役立ちます。
メインビジュアルの企画・撮影から、WordPressでのサイト制作までご相談ください。
お問い合わせ arrow_forward