SNSリンク付きコンタクトセクション
メール・電話・各SNSへの導線を、アイコン付きカードで並べたコンタクトセクションです。グリッドは repeat(auto-fit,minmax(180px,1fr)) で、カード数や画面幅に応じて列が自動で折り返します。
このパーツの使いどころと実装ポイント
メール・電話・各SNSへの導線を、アイコン付きカードで並べたコンタクトセクションです。グリッドは repeat(auto-fit,minmax(180px,1fr)) で、カード数や画面幅に応じて列が自動で折り返します。メールのカードは mailto:、電話は tel: のように、リンク先のプロトコルで直接アクションへつなげられるのが特徴です。各カードはアイコン・名称・値（アドレスやID）の3段構成です。
向いている場面
問い合わせフォームを置かずに連絡手段を一覧したいランディングページ、フリーランスや個人事業主のプロフィール、店舗の連絡先案内などに向きます。SNS中心に集客している事業では、各アカウントへの導線をまとめて見せられます。
カスタマイズと注意点
- カードは複製してリンク先（
mailto:/tel:/ SNSのURL）と表示テキストを変えるだけで増やせます。実在の連絡先に必ず差し替えてください。 - メールアイコンは Material Symbols 風のSVGですが、X や Instagram などのSNSロゴは公式のブランドSVGに置き換えるのが適切です。
tel:リンクはスマホで即発信できて便利な反面、誤タップを招くこともあるため、PCでも違和感のない表記にしておくとよいでしょう。各リンクには分かりやすいラベルを残します。
よくある質問
メールや電話のカードをタップすると何が起きますか？
メールカードはmailto:リンクなのでメールソフトが新規作成状態で開き、電話カードはtel:リンクなのでスマホでは発信画面が立ち上がります。フォームを置かなくても、ワンタップで連絡アクションにつなげられます。
SNSのカードは何個まで並べられますか？
上限はありません。グリッドはauto-fitで自動折り返しするため、カードを複製してリンク先と表示名を変えるだけで増やせます。SNSアイコンは各サービス公式のブランドSVGに差し替えて使ってください。