「このページのBefore/Afterコンテンツを反映させてほしい」
オーナーが送ってきたのはReserveStockのURLだった。現在使っている予約サービスのページで、実際のお客様のビフォーアフター写真が4事例掲載されている。これを予約システムのLPに移したい、という依頼だった。
写真の置き場所を考えた。サービス紹介とコーチングセクションの間が自然だと判断した。「こんなサービスがあります」の次に「実際こう変わりました」が来て、「では相談しませんか」に続く流れだ。
画像はReserveStockのURLから直リンクした。サーバーに転送する手間が省ける上、元サイトが更新されれば自動的に最新になる。著作権の扱いは自社サイトのコンテンツなので問題ない。
CSSで2×2のグリッドを組んだ。
各カードはBefore側とAfter側を横に並べ、矢印で繋ぐ。画像の縦横比を4:3に固定して、object-fit:coverで埋める。縦長の写真も横長の写真も同じ枠に収まる。
最初に詰まったのはBefore写真の見え方だ。人物が写っている縦長の写真を横長の枠に収めると、デフォルトのcenter表示では顔が切れて胴体だけが見える。object-position:center topを指定して、上端を優先的に表示するよう直した。
ここで一度、逆方向のobject-position:center bottomを指定してしまった。「右側が見えなくなりました、逆に動いてますよ」というフィードバックが来て気づいた。top方向に動かすべきところをbottomにしていた。修正して顔が見えるようになった。
4事例それぞれにタイトルを付けた。
- 30代女性｜服選びが楽しくなったクローゼット
- 50代男性｜片づけの感動を体験
- 60代女性｜毎日ときめきチャージできるクローゼット
- 60代女性｜料理がもっと楽しくなるキッチン
カテゴリバッジ（「衣類」「クローゼット」「キッチン」）の下に、年代と変化のタイトルを置く構成にした。読んだ人が自分と近い属性の事例を探しやすくなる。
デプロイ後に確認してもらうと、最初に「上2件のBeforeとAfterが逆になっています」という指摘が来た。
写真のURLを見返すと確かに逆だった。BeforeとAfterのsrcを入れ替えた。
Before/Afterの入れ替えは視覚的に分かりにくいミスの代表格だ。コードを見ているとURLの並び順で判断してしまい、実際の絵が頭に入りにくい。見た目を確認するしかない。
モバイルでは1カラムに落ちるよう@mediaを当てた。680px以下で縦積みになる。
片づけのビフォーアフターは、LPで最も説得力がある要素のひとつだと思っている。サービス説明がいくら丁寧でも、変化した部屋の写真には敵わない。
写真があるだけで人は想像できる。自分の部屋がこうなったら、という想像が申込みへの意欲につながる。
次回は、予約の入り口をLINEに一本化した話を書く。
シンプルシステム株式会社 代表 伊藤勝彦