3 枚カードで悩み提示
「こんなお悩み、ありませんか？」という共感の見出しの下に、アイコン付きカードを3枚並べて読者の悩みを言語化するセクションです。 display:grid の repeat(3,1fr) で等幅3カラムを作り、各カードは中央揃え・白背景・やわらかい影で、悩みを1つずつ提示します。
このパーツの使いどころと実装ポイント
「こんなお悩み、ありませんか？」という共感の見出しの下に、アイコン付きカードを3枚並べて読者の悩みを言語化するセクションです。display:grid の repeat(3,1fr) で等幅3カラムを作り、各カードは中央揃え・白背景・やわらかい影で、悩みを1つずつ提示します。アイコンは pb-3__ic 枠に大きめ（48px相当）で置かれ、見出しと短い補足文が続きます。
向いている場面
LPの冒頭で読者に「自分のことだ」と感じてもらい、その後の解決策パートへ橋渡しするのに最適です。制作・コンサル・士業・スクールなど、課題解決型のサービス全般で使えます。3つに絞ることで、ターゲットの悩みを的確に突けます。
カスタマイズと注意点
差し替えどころはアイコン・見出し（悩みの要約）・補足文です。悩みは抽象的にせず、ターゲットが実際に口にしそうな言葉にすると刺さります。注意点として、このパーツのアイコンは一部が SVG ですが、絵文字（時計マークなど）が混ざっている箇所があります。表示環境に左右されAI感も出るため、すべて統一した SVG アイコンに揃えることをおすすめします。3列のままだとスマホで窮屈なので、狭い画面では1列に積む指定を足してください。
よくある質問
悩みは3つでないとダメですか？
3つは要点を絞りやすく記憶に残る数ですが、必須ではありません。カードを増減し列数を合わせれば変更できます。ただし多すぎると焦点がぼやけるため、まずは代表的な3つに絞るのがおすすめです。
アイコンに絵文字が混ざっています。直すべきですか？
直すことをおすすめします。絵文字は環境によって見た目が変わり、ややAIっぽい印象にもなります。すべてのカードを同じ規格のSVGアイコンに統一すると、見た目が締まり信頼感が増します。