画像分割メインビジュアル
左にコピーと CTA 、右にビジュアルを置いた 2 カラムのメインビジュアルです。 display:grid と grid-template-columns:1fr 1fr で左右を均等に割り、 align-items:center で文章と画像を縦中央に揃えています。
このパーツの使いどころと実装ポイント
左にコピーと CTA、右にビジュアルを置いた 2 カラムのメインビジュアルです。display:grid と grid-template-columns:1fr 1fr で左右を均等に割り、align-items:center で文章と画像を縦中央に揃えています。タグ（NEW・2026）→ 見出し → 説明文 → ボタン2つ、という視線の流れが自然で、最初の数秒で「何のサービスか」を伝えられる構成です。
向いている場面
SaaS やアプリのプロダクト紹介、業務効率化ツールのLP、スクール・オンライン講座の入口など、主役の画面や成果物を画像で見せたいサービスに向きます。左の言葉で価値を語り、右で実物を見せる役割分担が効きます。
カスタマイズと注意点
右カラム mv-sp__r は背景枠なので、ここに製品スクリーンショットや実写を入れてください。見出し（font-size:44px）は強い訴求コピーに、説明文は1〜2文に絞ると読まれます。ボタンは「主アクション」と「資料を見る」の役割を分けておくのが定石です。注意点として、左右2分割のままだとスマホで窮屈になるため、狭い画面では1カラムに積み直し、画像を下に回す指定を足してください。見出しは <h1> なので1ページに1つだけにします。
よくある質問
右側の画像はどう入れますか？
mv-sp__r の背景に画像を指定するか、中に img タグを入れます。実写やプロダクトのスクリーンショットが効果的で、軽量化のためWebP化し、width/heightとalt属性を付けるのがおすすめです。
ボタンは2つ必要ですか？
必須ではありません。主アクション1つでも成立します。2つ置く場合は『無料で始める』のような主要導線と『資料を見る』のような補助導線で役割を分け、色の濃淡で優先度を示すと迷いが減ります。