Before / After 比較型悩み
この「Before / After 比較型悩み」は、今の困った状態と理想の状態を左右 2 枚のカードで対比し、間に矢印を置いて変化を視覚化するパーツです。レイアウトは grid-template-columns:1fr auto 1fr で、左カードに赤系の罫線（BEFORE）、右カードに緑系の罫線（AFTER）を…
このパーツの使いどころと実装ポイント
この「Before / After 比較型悩み」は、今の困った状態と理想の状態を左右 2 枚のカードで対比し、間に矢印を置いて変化を視覚化するパーツです。レイアウトは grid-template-columns:1fr auto 1fr で、左カードに赤系の罫線（BEFORE）、右カードに緑系の罫線（AFTER）を付け、見出しにはインライン SVG アイコン（×印とチェック）を入れて状態をひと目で区別できます。各カードの中身は <ul><li> の箇条書きです。
向いている場面
課題解決型のサービス紹介に幅広く使えます。制作会社の「納期遅延が当たり前 → 進捗共有で安心」、ジムの「続かない → 習慣化」、業務ツールの「手作業 → 自動化」など、導入前後のギャップが価値そのものになる商材に向きます。提案資料やランディングページの問題提起セクションに最適です。
カスタマイズと注意点
- 左右の
<li>は 同じ観点で対になるように書くと対比が際立ちます（例：納期遅延 ↔ 納期厳守）。 - 矢印は装飾文字なので、装飾アイコンには
aria-hiddenを付けて読み上げから除外すると親切です。 - スマホでは
720px以下で縦 1 列になり、矢印がrotate(90deg)で下向きに回転します。項目数は左右でそろえてください。
よくある質問
Before と After の項目数は同じにすべきですか？
そろえるのが基本です。同じ観点で対になる項目を左右に書くと「ここがこう変わる」という対比が明確になり、説得力が増します。数がずれるとカードの高さが合わず、変化の対応関係も読み取りにくくなります。
矢印が縦になるのはどんなとき？
画面幅が 720px 以下になると、2 枚のカードが横並びから縦並びに変わり、それに合わせて矢印が 90 度回転して下向きになります。スマホでも Before から After への流れが自然に読める設計です。