地図＋フォーム コンタクト
地図枠と問い合わせフォームを左右に並べたコンタクトセクションです。 display:grid の grid-template-columns:1fr 1fr で 2 カラムを等分し、左の .cm__map はグラデーション背景のプレースホルダ、右の .cm__f は名前・メール・相談内容・送信ボタンを縦並びにした最…
このパーツの使いどころと実装ポイント
地図枠と問い合わせフォームを左右に並べたコンタクトセクションです。display:grid の grid-template-columns:1fr 1fr で 2 カラムを等分し、左の .cm__map はグラデーション背景のプレースホルダ、右の .cm__f は名前・メール・相談内容・送信ボタンを縦並びにした最小構成のフォームです。最大幅 840px に収めているため、本文の流れを邪魔せず問い合わせ導線を置けます。
向いている場面
来店型のビジネスと相性がよく、たとえば歯科や美容室など実店舗のあるサービス、士業事務所、地域密着の工務店などで「場所を見せながら連絡してもらう」用途に向きます。地図とフォームが横に揃うことで、訪問前の不安と問い合わせの手間を同時に下げられます。
カスタマイズの勘所
- 左の
.cm__mapは色ベタの仮置きなので、本番では Google マップのiframe埋め込みに差し替えると実用になります。 - 各
inputにはplaceholderしかないため、labelとidを結び付けるとアクセシビリティが上がります。 - SP では 2 カラムが窮屈になるので、メディアクエリで
grid-template-columns:1frの縦積みに切り替えるのが安全です。
フォームは見た目だけなので、action や送信処理、入力必須（required）やメール形式（type="email"）の指定は実装側で補ってください。
よくある質問
地図の部分を実際の Google マップに差し替えるには？
左側の color ベタの div を Google マップの埋め込み iframe に置き換えます。Google マップで店舗を表示し、共有から埋め込みコードを取得して貼り付けてください。iframe の幅と高さを枠に合わせ、border-radius を継承させると見た目が揃います。
フォームを送信できるようにするには何が必要ですか？
このパーツは見た目だけのため、form タグに送信先の action と method、各入力に name 属性を付け、サーバー側の受信処理やメール送信、または外部フォームサービスとの連携が必要です。あわせて必須チェックや入力形式の検証も実装側で追加します。