4 アイコン横並び（コンパクト）

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

このパーツは、サービスの強みを「アイコン＋短い見出し＋一言」の組で 4 つ横並びに見せるコンパクトな紹介セクションです。grid で 4 列に分け、各ブロックにインライン SVG のアイコン、太字の見出し、補足の一文だけを置く最小構成にしています。説明を削ぎ落としているため、流し読みでも「速い・安全・対応が手厚い」といった要点が一瞬で伝わるのが利点です。

向いている場面

選ばれる理由や 4 つの特長を簡潔に並べたいサービスサイトに向きます。SaaS の強み紹介、制作会社の対応範囲、士業や店舗の安心ポイントなど、詳しい説明は別ページに譲り、ここでは要約だけ見せたい場面で使いやすい型です。

カスタマイズと注意点

• アイコンは内容に合った形（稲妻・盾・人・時計など）へ差し替え、見出しと意味を一致させる
• 各ブロックの文章は一言に抑え、4 つの粒度をそろえる
• アイコンには aria-hidden を付け、意味は見出しと本文のテキストで伝える

レスポンシブでは 4 列が窮屈になるため、狭い画面では 2 列に折り返すと読みやすく保てます。要点だけを置く設計なので、より詳しい説明が必要なら、各項目から詳細ページへ誘導する動線を別途用意してください。