SaaS風ランディングページ模写
模写上級シリーズ第6弾は、SaaS風のCTA特化ランディングページです。
BtoB向けSaaSのWebサイトには共通点があります。ページのあちこちに「無料で始める」「資料請求」といったボタンが配置されていること。これは偶然ではなく、ユーザーを行動に導くための計算された設計です。
今回はそんなCTA（Call To Action）特化型のLPを模写対象として用意しました。デザインを再現しながら、「なぜこの位置にボタンがあるのか」「なぜこの余白なのか」を考えることで、実務で通用するLP制作スキルが身につきます。
デモページ
デモを見る → https://codequest.work/html/advanced/006/
まずはPCとスマートフォンの両方でページ全体を眺めてみてください。CTAボタンが何箇所にあるか、どんな色が使われているか、余白はどのくらいか——観察するポイントはたくさんあります。
今回のLPの特徴
CTA特化の設計
このLPには、CTAボタンが5箇所に配置されています。ヘッダー、ファーストビュー、ページ中盤、最終セクション、そして画面下部に常時表示されるフローティングバナー。
ユーザーがページのどこにいても、行動を起こしたいと思った瞬間にボタンが目に入る。この徹底した設計が「CTA特化」と呼ばれる理由です。
特にフローティングバナーは、スクロールしても常についてくる存在感のあるパーツ。模写する際は、このバナーの高さ、余白、ボタンのサイズ感をしっかり観察してください。
SaaS系LPの王道構成
Problem（課題）→ Solution（解決策）→ Social Proof（実績）→ FAQ → CTA
この流れは、BtoB SaaSのLPでよく見られる王道パターンです。ユーザーの心理に沿って情報を並べることで、自然と行動を促す構成になっています。
今回の模写を通じて、この構成パターンを体に染み込ませてください。一度身につければ、どんな業種のLPでも応用できます。
模写で身につくスキル
デザインの「型」を学べる
LPには「売れる型」があります。ファーストビューの構成、CTAボタンの配置、信頼性を示すセクションの作り方——これらは業界を問わず共通するパターンです。
今回のLPは、そうした「型」が詰め込まれた教科書的な作品。模写することで、プロの設計思想を体感できます。
余白の感覚が磨かれる
プロのデザインと素人のデザインの最大の違いは「余白」です。
このLPでは、セクション間にたっぷりと余白が取られています。この「呼吸感」が洗練された印象を生み出しているのです。模写する際は、要素間の距離をピクセル単位で観察してください。
色の使い方が理解できる
このLPで使われている色は驚くほどシンプルです。背景は白〜ライトグレー、テキストは黒〜濃いグレー、CTAボタンだけが赤系。
たった3系統の色で洗練されたデザインが成立しています。色数を絞ることで、本当に目立たせたい要素（CTAボタン）が際立つのです。
模写のポイント
まずは全体を観察する
いきなり手を動かすのではなく、まずはデモページを何度もスクロールしてください。
全体の構成はどうなっているか。何色が使われているか。どこに余白があるか。どんな要素が繰り返し登場するか。
この「観察」の時間を十分に取ることで、模写の精度が大きく変わります。
細部にこだわる
ボタンの角丸はどのくらいか。影はついているか。ホバー時に色は変わるか。
こうした細部の作り込みが、「素人っぽさ」と「プロっぽさ」を分けます。ブラウザの開発者ツールを使って、実際の数値を確認しながら進めるのがおすすめです。
レスポンシブも確認する
PC版を模写したら、スマートフォンサイズでの表示も確認してください。
ヘッダーがハンバーガーメニューに変わる。カードの列数が変わる。フォントサイズが調整される。これらの変化を観察し、同じように実装できるかチャレンジしてみましょう。
模写が終わったら
模写が完了したら、色やテキストを変えて「自分版」を作ってみてください。アレンジを通じてデザインの引き出しが増えます。
完成した作品はポートフォリオに追加しましょう。「模写作品」として掲載し、オリジナルへのリンクを併記すれば問題ありません。
そして次の模写に進みましょう。模写は数をこなすことで効果が出ます。
なぜ模写が効果的なのか
「ゼロから作ったほうが勉強になるのでは？」と思うかもしれません。
しかし、ゼロからの制作には「正解がわからない」という壁があります。模写には「正解」があります。プロが作った完成形を目指すことで、迷いなくスキルを吸収できる。これが模写学習の最大のメリットです。
プロの作品を細部まで観察することで、「なぜこうなっているのか」を考える習慣も身につきます。
まとめ
今回の模写課題は、SaaS風のCTA特化ランディングページです。CTAボタンの配置、余白、色のコントラスト——学べるポイントが詰まっています。
デモページをじっくり観察し、細部までこだわって再現してみてください。
それでは、模写チャレンジを楽しんでください！