課題チェックリスト

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

「こんなお悩みありませんか」を箇条書きで列挙し、読み手の共感を引き出すパートです。各項目の先頭にはチェックマークのインライン SVG が置かれ、外部アイコンフォントに頼らず自己完結しています。リストは list-style:none で標準の点を消し、項目の間を破線のボーダーで区切ることで、チェックシートらしい見た目を作っています。全体は白いカードに収め、中央寄せの見出しで導入しています。

向いている場面

サービス紹介ページや LP の序盤、コンサルや士業の相談誘導、リフォームや学習塾など「困りごと」から入りたい商材に合います。ベネフィットを語る前に課題を言語化することで、その後の提案を受け入れてもらいやすくする役割です。

カスタマイズの勘所

• 項目はターゲットが実際に抱える悩みの言葉に置き換えるほど刺さります
• 4 項目前後が読みやすく、増やしすぎると印象がぼやけます
• このパートの直後に解決策や CTA を続けると流れが自然になります

実装上は、装飾のチェックマーク SVG に aria-hidden="true" が付いているため、読み上げでは余計な読み上げが起きず本文だけが伝わります。max-width:560px で横幅を抑えているので、文章が間延びせず一覧として読みやすく、スマートフォンでも縦に並んで自然に収まります。