Before / After 比較カード
左に Before、右に After を並べ、改善前後の数値を一目で比べさせる比較カードです。 grid-template-columns:1fr 1fr で左右を均等に2分割し、Before 側は淡いグレー、After 側は濃紺＋緑の数字という配色で「悪い→良い」の方向を色だけで直感的に伝えます。
解説
左に Before、右に After を並べ、改善前後の数値を一目で比べさせる比較カードです。grid-template-columns:1fr 1fr で左右を均等に2分割し、Before 側は淡いグレー、After 側は濃紺＋緑の数字という配色で「悪い→良い」の方向を色だけで直感的に伝えます。大きな数字は Georgia のセリフ体で堂々と見せ、説明文を小さく添える構成です。CSS のみで成立し、JavaScript は不要です。
使うと効く場面
- サイト改善やリフォームなど施工事例の実績紹介
- 表示速度・売上・コストなど数値の改善アピール
- ダイエットや学習成果のビフォーアフター表現
中身の数字と単位を書き換えるだけで、どんな実績にも使い回せます。After 側の強調色は数字の color を変えると印象を切り替えられます。スマホで横並びが窮屈なら、グリッドを縦1列に切り替えるメディアクエリを足すと読みやすくなります。注意点として、誇張した数値は信頼を損なうため、必ず実測値を載せ、可能なら計測条件も近くに書き添えると説得力が増します。
よくある質問
数字以外の比較にも使えますか
使えます。大きな数字の部分を短い単語や記号に置き換えれば、機能のあり/なしや状態の変化なども表現できます。ただし左右で同じ種類の項目を並べると比較として伝わりやすくなります。
スマホで左右が狭く感じます
画面が狭いときだけグリッドを縦1列に切り替えるCSSを追加すると、BeforeとAfterが上下に並んで読みやすくなります。数字のフォントサイズも少し小さくすると窮屈さが解消します。