PC・スマホのカンプ承認後に実装した自主制作LP｜Webスクールの制作事例

承認したカンプを、PCでもスマホでも崩さず実装する

社会人向けWeb・AIスクール「WEEKEND LAB」を題材に、縦長LPを自主制作しました。WEEKEND LABは架空のサービスで、実在するクライアント案件ではありません。

この制作で試したのは、生成AIで素早く画面を作ることではなく、参考選定、PC・スマホのカンプ確認、実装、差分確認を一つの流れとして成立させることです。完成したデモはこちらで確認できます。

最初の案を捨てて、参考LPの選定からやり直した

第1稿は表示速度やアクセシビリティの検査に通っていました。しかし、カンプと実装で写真やコピー、料金、配置が変わり、デザインも既視感のあるテンプレート表現に寄っていました。技術スコアが良くても、見た目と約束した内容が違えば制作実績にはできません。

そこで第1稿は公開せず、次の順序で作り直しました。

1. 実在するスクール系LPを4件選ぶ
2. 写真の使い方、余白、文字の強弱、CTAの置き方を言葉にする
3. PC・スマホを一枚で確認できるカンプを作る
4. カンプの承認を受ける
5. 承認後に初めてコードを書く

参考にしたのはCreators Factory、Famm、デジハク、SHElikesのLPです。画面をそのまま写すのではなく、人物写真を中心にすること、成果を数字で早めに示すこと、受講後の姿からカリキュラムへつなぐことなど、構成上の考え方を抽出しました。

PCの縮小版ではなく、スマホ用の読み順を決めた

PCでは、左側に大きな見出しとCTA、右側に受講風景の写真を配置しています。スマホでは同じ画面を縮めず、写真、見出し、説明、CTAの順に組み替えました。

縦長LPは情報量が多いため、各セクションの役割も先に固定しています。

• ファーストビューで対象者と得られる変化を伝える
• 数字の帯で判断材料を短く見せる
• 受講後の変化を人物写真と3つの例で示す
• 8週間の流れ、制作物、サポート、料金の順に具体化する
• FAQで不安を解消し、最後のCTAへつなぐ

コピー、写真、料金、セクション順は、承認されたカンプを基準に実装しました。

実装時に変えた3点は、差分として残した

実装は静的なHTML、CSS、JavaScriptで構成しています。FAQは実際に開閉できるようにし、スマホではハンバーガーメニューを用意しました。

カンプから意図的に変えた点は3つです。

• PCヘッダーにページ内ナビと説明会CTAを追加
• サポート項目を、アイコン列から読みやすい番号付きリストへ変更
• ボタンの白文字が読みにくくならないよう、赤の色味を少し暗く調整

完成後はPC 1440px、タブレット768px、スマホ375pxで画面を撮り、カンプとの差分表を作成しました。「だいたい同じ」で済ませず、変更点と理由を後から確認できる状態にしています。

制作時間は、記録できた範囲だけ公開する

ファイルの保存時刻と監査レポートから確認できた、カンプ保存からローカル監査完了までの経過時間は9分25秒でした。生成AIによる画像カンプ作成とコーディング支援を含む時間で、人手だけのコーディング時間ではありません。

参考LPの選定とカンプ作成は開始時刻を記録していなかったため、合計時間には入れていません。本番公開もユーザー確認待ちとSSH再接続待ちが混ざったため、完了時刻だけを制作ログに残しました。測れていない時間を推定値で埋めない方針です。

本番URLで確認した品質

デモ環境へ公開した後、375px、768px、1440pxで再監査しました。

デモページは実在サービスと誤認されないよう、自主制作であることをフッターに記載し、HTTPヘッダーとHTMLの両方でnoindexを設定しています。

この制作で確認できたこと

生成AIを制作に使っても、承認前にコードへ進まないこと、カンプとの差分を説明すること、公開後のURLを検査することは省略できません。むしろ速く作れるからこそ、どの時点を合格とするかを先に決めておく必要があります。

今回の成果は一枚のLPだけではありません。参考選定からカンプ承認、実装、公開監査までを同じ基準でつなげられたことが、次の制作にも使える部分です。

LP制作や、支給カンプからのHTML・CSSコーディングについては、お問い合わせフォームからご相談ください。