HTML・Figma・STUDIOで比較した自主制作LP｜Webスクールの制作事例

WEEKEND LAB

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

実在LPの調査からPC・スマホのカンプを作り、HTML、CSS、JavaScriptで実装しました。その後、同じデザインをFigma上に編集可能なレイヤーとして再構築しています。完成したデモはこちらで確認できます。

最初の案を捨てて、参考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で画面を撮り、カンプとの差分表を作成しました。「だいたい同じ」で済ませず、変更点と理由を後から確認できる状態にしています。

FigmaカンプとHTML実装

HTML版の完成後、WEEKEND LABをFigmaでも作り直しました。画像を一枚貼っただけのカンプではありません。見出し、本文、写真、ボタン、料金表、FAQを編集できるレイヤーに分け、Auto Layoutを設定しています。

FigmaファイルはStarterプランの3ページ上限に合わせ、System、LP、Comparisonの3ページにまとめました。カラー7変数、寸法12変数、文字16スタイル、エフェクト1スタイル、主要コンポーネント9件を登録しています。編集可能なFigmaカンプはこちらから閲覧できます。

このFigmaカンプも自主制作です。クライアントから支給されたデータではありません。公開時は「支給を想定した自作カンプ」と明記しています。

PC 1440px

Figmaカンプ：

HTML実装：

スマホ 375px

Figmaカンプ：

HTML実装：

比較すると、コピー、料金、写真、配色、セクション順、スマホの読み順は共通しています。一方、ヒーローの写真比率、カード幅、セクション間の余白は同一ではありません。ピクセル単位の完全一致とは表記せず、比較画像と差分を残すことにしました。

同じデザインをSTUDIOで4ページに再構築した

同じFigmaカンプをSTUDIOへ取り込み、TOP、COURSE、STORIES、BRIEFINGの4ページへ再編集しました。これは別の4実績ではなく、WEEKEND LABという一つの自主制作で、HTML・Figma・STUDIOという制作フローの違いを確認するための成果物です。

• TOP
• COURSE
• STORIES
• BRIEFING

PC用とスマホ用のFigmaフレームをそれぞれ取り込み、STUDIOのブレークポイントで表示を切り替えています。TOPを基準にページを複製し、各ページの役割に合わせてセクションを絞りました。公開後の実寸確認では、TOPが長くなりすぎていたため、概要を伝えるダイジェスト構成へ短縮し、詳細はCOURSE、STORIES、BRIEFINGへ分けています。

STUDIO版 PC 1440px

STUDIO版 スマホ 375px

公開後は4ページを375px、768px、1440pxで確認しました。全URLがHTTP 200、横スクロール0、画像読み込みエラー0でした。LighthouseはPerformance 99、Accessibility 92、Best Practices 100です。

一方、Figmaから取り込んだテキストが段落要素として生成され、見出しやmainランドマークなどHTMLの意味構造にはaxe-coreの指摘が4種類残りました。また、ボタン風レイヤーがフォーム要素へ変換されたため、CTAは見た目だけの静的デモで、フォーム送信やページ遷移には使用していません。STUDIO対応実績として、見た目の再現だけでなく、この変換上の制約も記録しています。

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

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

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

本番URLで確認した品質

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

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

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

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

今回の成果は、参考選定からカンプ承認、実装、Figma再構築、公開監査までを一つの記録にまとめたことです。支給カンプからのコーディング案件でも、比較画像と差分表を残す進め方を使えます。

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