チェックリスト型の悩み

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

このパーツは、読者の悩みをチェックリスト形式で並べ、「一つでも当てはまる方は続きをご覧ください」と次のセクションへ自然につなぐ課題提示型のセクションです。構造は section の中に見出しと ul リストを置いただけのシンプルな組み立てで、各項目はリスト先頭にチェックマーク風の装飾を ::before 等で添える設計になっています。文章を読み込ませる前に、視覚的に「自分ごと」と気づかせるのが狙いです。

向いている場面

制作会社やコンサル、士業、リフォーム業など「依頼前に不安を抱えやすいサービス」で効果を発揮します。たとえば「制作会社選びで失敗した」「納期と品質を両方妥協したくない」のように、見込み客が実際に口にする言葉を並べると共感が生まれます。BtoB のランディングページでも、ヒアリング前の温度を上げる導入部として使えます。

カスタマイズと注意点

• 項目は 3〜5 個に絞る。多すぎると「当てはまらない」印象になり離脱を招きます。
• 抽象論ではなく具体的な失敗・願望を書く。リストの文言がそのまま訴求力になります。
• チェックマークが装飾目的なら list-style:none でも読み上げに支障はありませんが、各項目は意味の通る短文にしてスクリーンリーダーでも理解できる形にします。

レスポンシブでは中央寄せの inline-block リストが狭い画面で詰まりやすいので、左右の余白と行間（padding）を確保すると読みやすさが保てます。