左情報＋右フォーム コンタクト

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

これは左に連絡先情報、右に入力フォームを並べた 2 カラム構成の問い合わせセクションです。レイアウトは display:grid と grid-template-columns:1fr 1.2fr で組み、フォーム側をやや広く取っています。左カラムは濃紺の背景に住所やメール、電話を置き、メール・電話のアイコンはインライン SVG で描かれているため外部フォントに依存しません。角丸とやわらかい影でカード全体をまとめ、信頼感のある印象に仕上げています。

向いている場面

企業のコンタクトページ、サロンや士業の予約・相談窓口、サービスサイトの資料請求など、連絡手段と入力欄を一画面で見せたいページに向きます。営業時間や対応曜日を左に添えられるので、来訪者の不安を減らせます。

カスタマイズの勘所

• 入力欄は :focus で枠線色が変わるため、ブランドカラーに合わせて変更すると一体感が出ます
• 項目を増やすときは input や textarea を足すだけで縦に伸びます
• 左カラムの背景色を変えるとサイト全体のトーンに合わせやすくなります

実装上は、各入力に label を関連付けると音声読み上げで何の欄か伝わりやすくなります。placeholder だけに頼らないのがアクセシビリティの基本です。max-width:680px 以下では 1 カラムに切り替わるため、スマートフォンでも縦に積まれて読みやすく表示されます。