3案から選んでもらって、そこから直す。

子どもから大人の初心者・再開組までを対象にした、無料体験レッスンの申込LPです。1ファイルのHTML／CSSで、ファーストビューから申込フォームまで11セクションを制作しました。

今回のテーマは「お客さんに3案を見てもらってから仕上げる」という進め方そのものです。いきなり1本を作り込むのではなく、方向の違う3案を同じ原稿で作って見比べてもらい、選んでもらった案を土台に直していきました。

1. 原稿を先に固める。ターゲット・強み・申込までの流れを整理し、キャッチコピーと本文を3案で共通にする。見た目だけを比べられる状態にするため。
2. 案ごとにデザインルールを書いてから作る。配色・書体・余白・角丸など9項目を1案ずつ文章で決めてから実装する。いきなり作ると案ごとの違いが曖昧になるため。
3. 方向の違う3案を実装。A「写真で温度を伝える」／B「明るい紙面と図形」／C「上品・クラシック寄り」。
4. ダミー写真を17枚まとめて生成。レッスン風景・講師・教室内装・発表会など、必要なカットを洗い出してから一度に生成し、3案すべてに同じ写真を差し込む。
5. 3案を見てもらって、近い案と直したい箇所を聞く。選ばれたのはB案。「ファーストビューの写真は良いが、左右が空いて中央が窮屈」「装飾の線画が小さすぎて描き残しに見える」という指摘をもらう。
6. 指摘をもとに2往復で手直し。写真クラスターを約1.8倍に拡大、線画モチーフを大きくはっきりと、セクションの境目に残っていた白い帯を解消。スマホでは装飾を非表示にして読みやすさを優先。