ニュースレター購読モーダル
このパーツは、左に画像・右にフォームを並べた2カラムのニュースレター購読モーダルです。外枠を grid-template-columns:200px 1fr で画像列とフォーム列に分け、左の img は position:absolute + object-fit:cover で枠いっぱいにトリミング表示します。
このパーツの使いどころと実装ポイント
このパーツは、左に画像・右にフォームを並べた2カラムのニュースレター購読モーダルです。外枠を grid-template-columns:200px 1fr で画像列とフォーム列に分け、左の img は position:absolute + object-fit:cover で枠いっぱいにトリミング表示します。右上には aria-label="閉じる" 付きの閉じるボタンを置き、見出し・説明・メール入力フォーム・解約に関する注記を縦に積んでいます。
向いている場面
LP やブログを一定時間読んだ後にそっと出すメルマガ誘導、限定情報の購読受付、無料特典の配布などに向きます。画像で世界観を伝えつつフォームは1項目に絞るため、離脱直前のひと押しとして機能します。メディア運営やD2Cブランド、オンラインサロンの集客などで使いやすい型です。
カスタマイズと注意点
- 画像は Unsplash の実写が入っており
altも付いています。差し替え時も内容を表すaltを必ず残します。 - このパーツは見た目の枠だけで、表示・非表示や背景オーバーレイの開閉は JS で制御します。閉じるボタンに
Escキー対応を足すと操作性が上がります。 - スマホでは画像列が細くなるため、狭い画面では画像を上、フォームを下の縦並びへ切り替えると見やすくなります。
よくある質問
モーダルの表示タイミングはどう決めますか？
このパーツは見た目だけで、表示制御はJSで実装します。一定時間の滞在後、一定スクロール量、または離脱しようとする動き（exit intent）をきっかけに出すのが一般的です。一度閉じたら当面再表示しないようcookie等で記録すると、しつこさを避けられます。
閉じるボタン以外の閉じ方も用意すべきですか？
用意するのが親切です。背景オーバーレイのクリックとEscキーでも閉じられるようにし、閉じるボタンには aria-label を残してスクリーンリーダーでも操作できる状態を保つと、使い勝手が大きく上がります。