アイコン課題チェックリスト
Material Symbolsアイコン付きの2列カードで「こんなお悩みはありませんか」を並べる課題提起セクション。共感から提案へつなぐ導入に。
このパーツの使いどころと実装ポイント
このパーツは、アイコン付きの2列カードで「こんなお悩みはありませんか」を並べる課題提起セクションです。grid-template-columns:repeat(2,1fr) で2列に整列し、各カードは display:flex でアイコンとテキストを横並びにします。アイコンはインラインSVGで、丸い背景と影が付いた枠の中に収まります。共感を生む悩みを列挙し、その後の提案へ自然につなぐ導入として使う構成です。
向いている場面
- サービスLPの冒頭で、読者の悩みに先回りして共感を得たいとき
- コンサルや士業が、よくある相談内容を整理して見せたいとき
- 商品紹介ページで、購入前の不安を言語化したいとき
差し替えどころは、各カードの pb__text の悩み文と、対応するアイコンです。悩みは抽象的にせず、読者が「まさに自分のことだ」と感じる具体的な言い回しにすると刺さります。アイコンは内容に合うものをインラインSVGで差し替えます。
実装上の注意
装飾アイコンには aria-hidden を付け、悩みのテキストだけが読み上げられるようにします。2列はスマートフォンでは1列に折り返す前提です。SVGは fill:currentColor で色がテキストに追従するため、線アイコンを差し込む場合は fill:none;stroke の指定が残っていないか確認してください。悩みの数は4〜6個程度に絞ると、読み手が負担なく目を通せます。
よくある質問
悩みの項目はいくつくらいが適切ですか？
読み手が一目で把握できる4個から6個程度がおすすめです。多すぎると読み飛ばされ、共感の効果が薄れます。2列レイアウトなので偶数にすると最終行が半端になりません。最も多い相談や、解決後の価値が大きい悩みを優先して選ぶと、後続の提案へつながりやすくなります。
アイコンが表示されないのですが？
差し込んだSVGが線アイコン用に作られていて、枠側のCSSが fill:none;stroke 前提になっていると塗りが出ず不可視になります。このパーツは塗りで描くアイコンを想定しているため、SVGには fill:currentColor を指定し、stroke 系の指定が残っていれば削除してください。viewBox の指定漏れでも崩れることがあります。