課題提起3カード
「こんな課題はありませんか」という問いかけの下に、お悩みを 3 枚のカードで並べた課題提起セクションです。見出しを中央寄せにし、カードは display:grid の grid-template-columns:repeat(3,1fr) で 3 等分しています。
このパーツの使いどころと実装ポイント
「こんな課題はありませんか」という問いかけの下に、お悩みを 3 枚のカードで並べた課題提起セクションです。見出しを中央寄せにし、カードは display:grid の grid-template-columns:repeat(3,1fr) で 3 等分しています。各カードは番号（01・02・03）と短い一文だけのミニマルな構成で、白背景に薄い影を付けて読者の悩みを 3 つに整理して見せます。
向いている場面
ランディングページの前半、解決策を提示する前の「共感パート」に向きます。たとえば集客に悩む店舗向けサービス、業務効率化ツール、学習サービスなど、読者が抱えがちな悩みを言語化して「自分のことだ」と思ってもらう場面で効果を発揮します。直後に解決策セクションを置くと流れが自然です。
カスタマイズの勘所
- 番号の
spanはアイコンに差し替えても成立します。装飾より一文の具体性が読者の共感を左右します。 - 悩みは抽象語でなく、読者が実際に口にする言葉に寄せると刺さりやすくなります。
- 3 という数は視認性が高い反面、4 つ以上にする場合はグリッドの列数調整が必要です。
SP では 3 列のままだと文字が窮屈なので、メディアクエリで 1 列の縦積みに切り替えるのが安全です。カードはリンクではないため、必要なら各カードを解決策へのアンカーにする拡張も検討できます。
よくある質問
カードの番号をアイコンに変えても成立しますか？
成立します。番号を表示している span を、課題の内容に合うアイコンに差し替えれば視覚的に分かりやすくなります。ただしカード自体が自己完結する必要がある場面では、外部フォントではなくインライン SVG のアイコンを使うと崩れにくいです。
課題を4つ以上にしたいときはどうすればいいですか？
グリッドの列数が3列に固定されているので、4枚目以降を追加する場合は列数を見直します。4列にすると1枚が狭くなるため、2列2段にする方が読みやすいことが多いです。スマホでは1列の縦積みに切り替えるのが安全です。