3 列特徴アイコン
サービスや製品の強みを、アイコン・見出し・短い説明の3点セットで横3列に並べる特徴パートです。 display:grid の repeat(3,1fr) で均等幅のカードを作り、それぞれ白背景に薄い影を付けて中央寄せにしています。
このパーツの使いどころと実装ポイント
サービスや製品の強みを、アイコン・見出し・短い説明の3点セットで横3列に並べる特徴パートです。display:gridのrepeat(3,1fr)で均等幅のカードを作り、それぞれ白背景に薄い影を付けて中央寄せにしています。アイコンはインラインSVGで描かれているため画像の読み込みが不要で、表示が速いのが利点です。1枚ずつの情報量が少ないので、ぱっと見で要点が伝わります。
向いている場面
- サービスサイトの「3つの特徴」「選ばれる理由」
- アプリや製品の主要機能の紹介
- 料金プランや導入メリットの要約セクション
カスタマイズの勘所
3列にこだわらず、項目が4つならrepeat(4,1fr)に変えるだけで対応できます。アイコンは差し替えが前提なので、内容に合った形を選んでください。SVGにはfill:currentColorが効くため、色はカード側の文字色で揃います。見出しは2〜3語、説明は1文に収めると、3枚の情報量がそろってリズムが出ます。
レスポンシブの注意
狭い画面で3列のままだと文字が詰まります。メディアクエリで1列に切り替える指定が入っているので、増減した場合もこの折り返しを忘れず調整してください。
よくある質問
特徴を4つや6つにしても使えますか？
使えます。グリッドの列数指定を変えるだけで対応でき、4列なら均等4分割になります。ただし1行に並べる数が多いほど1枚あたりが狭くなるため、内容が長い場合は2行に分ける方が読みやすくなります。
アイコンを自社の画像に変えたいのですが？
インラインSVGをimg要素や別のSVGに置き換えれば変更できます。画像を使う場合は幅と高さ、altを設定してください。線で描かれたアイコンを使うときは、枠が塗り前提のため色指定の調整が必要になります。