フォーム + 地図 2 カラム

このパーツの使いどころと実装ポイント

左に問い合わせフォーム、右にアクセス情報と地図枠を並べた 2 カラムのコンタクトセクションです。外側を display:grid の 2 列にし、フォーム側は flex-direction:column でラベルと入力を縦に積んでいます。アクセス情報は住所・電話・最寄駅を dl（定義リスト）で構成し、項目名と内容の対応を構造的に表現しています。地図部分はプレースホルダの枠で、実装時に Google マップ等の iframe を差し込む想定です。

向いている場面

来店が前提の実店舗ビジネスに最適です。美容室・クリニック・飲食店・士業事務所・リフォームの実店舗など、「問い合わせ」と「行き方」を同じ画面で完結させたい業種に向きます。1 ページで予約と来店動機を同時に高められるのが利点です。

カスタマイズと実装の注意

• 各 input には対応する label を必ず関連付けます。ラベルのない入力欄はアクセシビリティ上の問題になります。
• 地図は遅延読み込み（loading="lazy"）にし、初期表示の重さを抑えます。
• 住所・電話・営業時間は dl の dt/dd で対応づけると、構造化データへの展開もしやすくなります。

スマートフォンでは 2 カラムを縦 1 列にし、フォーム→アクセスの順に並べ替えると、入力途中で地図に気を取られにくくなります。送信ボタンはタップしやすい大きさを確保してください。