問い合わせ誘導バンド
「問い合わせ誘導バンド」は、電話・メール・フォームという 3 つの連絡手段をアイコン付きカードで横並びにした連絡導線です。 display:grid の 3 列で均等に配置し、各カードにアイコン・見出し（電話番号など）・補足（受付時間など）を載せています。
このパーツの使いどころと実装ポイント
「問い合わせ誘導バンド」は、電話・メール・フォームという 3 つの連絡手段をアイコン付きカードで横並びにした連絡導線です。display:grid の 3 列で均等に配置し、各カードにアイコン・見出し（電話番号など）・補足（受付時間など）を載せています。アイコンはインライン SVG で描かれ、外部読み込みなしで表示できます。複数の連絡方法を同じ重みで示し、利用者が好きな手段を選べるのが利点です。
向いている場面
店舗や事務所のコーポレートサイト、士業・医療など信頼が重視される業種、地域密着のサービス紹介ページなどに向きます。電話とフォームを併記したい BtoB サイトとも相性が良いです。
カスタマイズと注意点
- 電話のカードは
tel:リンク、メールはmailto:、フォームは問い合わせページへのリンクにすると、スマホからそのまま発信・送信に進めて便利です。 - 受付時間や対応内容の補足を添えると、問い合わせ前の不安を減らせます。
- レスポンシブは
max-width:680pxで 1 列に切り替わります。SVG のfillはcurrentColorなので、文字色を変えればアイコン色も一緒に変わります。
よくある質問
スマホからタップで電話やメールを起動できますか？
電話のカードにtel:電話番号、メールのカードにmailto:メールアドレスのリンクを設定すれば、スマホでタップしたときに発信画面やメール作成画面が開くようになります。
連絡手段を3つ以外に増減できますか？
カードのdivを追加・削除すれば対応できます。3列レイアウトのため、LINEやチャットなどを足す場合は列数のCSSも合わせて調整すると整います。