ビフォーアフター

Before / After

使う前と使った後を左右に並べて、どれくらい変わるかを見せる部分。

入れるもの

• 「Before」「After」の見出し
• 使う前の状態（写真や数字）
• 使った後の状態
• 変化がひと目でわかる矢印や数字

作るときのコツ

• 数字で変化を見せると伝わりやすい
• 「使う前」は少し暗め、「使った後」は明るい色に
• 効果を大げさに書きすぎない（法律に注意）

どこで使われている？

よく見かける場所

リフォーム・美容・学習サービスのLP、業務改善ツールのLP

使うとよい場面

変化が目に見えるサービス・商品

いらない・注意する場面

変化を見せにくいもの、効果を約束できないもの

補足健康食品・化粧品などは、効果を言い切ると法律（薬機法・景品表示法）に触れることがあるので注意。

似ている部品との違い

AIへの指示文

LP（宣伝ページ） に入れるときの指示文です。作るものは右上の「何を作る？」で変えられます。

商品・サービスを宣伝する1ページのLP（ランディングページ）に、「ビフォーアフター（Before / After）」のセクションを作ってください。

内容：左に「Before」として使う前の状態、右に「After」として使った後の状態を並べ、間に矢印を置く。使う前は落ち着いた灰色、使った後は明るい色にし、変化を数字で大きく見せる。

入れるもの：「Before」「After」の見出し／使う前の状態（写真や数字）／使った後の状態／変化がひと目でわかる矢印や数字
気をつけること：数字で変化を見せると伝わりやすい／「使う前」は少し暗め、「使った後」は明るい色に／効果を大げさに書きすぎない（法律に注意）

スマホでも見やすいように、画面が狭いときは縦に並べてください。