アイコン付きチェックリスト
アイコン付きチェックリストは、丸い背景の中にチェックマークが入った行を縦に並べ、特典や機能、含まれる内容を読みやすく示すリストです。 list-style:none で既定の黒点を消し、各 li を display:flex;align-items:center でアイコンとテキストを横並びに揃えています。
解説
アイコン付きチェックリストは、丸い背景の中にチェックマークが入った行を縦に並べ、特典や機能、含まれる内容を読みやすく示すリストです。list-style:none で既定の黒点を消し、各 li を display:flex;align-items:center でアイコンとテキストを横並びに揃えています。チェックマークは絵文字ではなくインライン SVG で描かれており、フォントや OS に左右されず常に同じ形で表示されるのが利点です。緑の円は border-radius:50% と place-items:center で作っています。
向いている場面
- 料金プランの「含まれるもの」一覧
- サービス申込前の特典・メリットの提示
- CTA セクション直前の「できること」整理
円の色は background、文字色は color で変えられます。否定項目を出したいときは赤い丸にバツの SVG を入れると対比が明確になります。アイコンに flex-shrink:0 が指定されているため、テキストが長く折り返しても丸がつぶれません。読み上げで意味を持たせたくないアイコンには aria-hidden を付け、本文側に意味を持たせるのが無難です。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
チェックの色を変えたいです。
アイコンの丸の background で背景色、color でチェックマークの色を指定しています。ブランドカラーに合わせたい場合はこの2つを書き換えてください。
なぜ絵文字ではなくSVGでチェックを描いているのですか？
絵文字はOSやフォントによって見た目が変わり、AIっぽさも出ます。インラインSVGなら環境に依存せず常に同じ形で表示でき、色やサイズも自由に調整できるためです。