前のレッスンに戻る
- ✓目的に合ったテーマ・プラグインを自分で選定できる
- ✓デザインカンプの内容を、セクション単位でWordPress上に再現できる
- ✓PC・SPそれぞれの表示を正しく切り替えて実装できる
- ✓フォームを設置し、正常に動作することを確認できる
- ✓デザインカンプと実装結果の差分を検出し、原因を特定して対応できる
- ✓最終アウトプット（公開URL）を完成させ、提出できる
このレッスンについて
目安の学習時間：10分
このレッスンでは、これまで作ってきた企画書・要件定義・ワイヤーフレーム・デザインカンプを、実際に動作する公開状態のランディングページとして形にします。
このレッスンで完成させる公開LPは、企画書・デザインカンプと並ぶ3つの提出物のうち、最後の「最終アウトプット」です。
ここまでの取り組みが実際に動くかどうかが問われる、いわば集大成の工程になります。
WordPressでは、見本サイトと詳細な手順に沿ってサイトを完成させてきました。
このレッスンにはそうした手順書はありません。
自分のデザインカンプを見ながら、「これをどう実現するか」を自分で判断し、必要な情報を調べながら実装を進めてください。
デザインカンプが完成した後、その内容を実際に動作する形に落とし込むのがこのレッスンの役割です。
公開基盤を整える
目安の学習時間：40分
WordPressで学んだ環境構築の手順を踏まえ、公開用のサーバー・ドメイン・WordPress環境を用意します。
すでにWordPressの制作課題で使った環境がある場合は、新規サイトとして立ち上げるか、既存環境を流用するかを自分で判断してください。
復習はこちら：WordPress｜環境構築
判断のポイントは、公開後も一定期間アクセスできる状態を維持できるかどうかです。
修了判定のためには、このレッスンの提出後もURLが有効である必要があります。
テーマとプラグインを選ぶ
目安の学習時間：40分
WordPressで学んだテーマ・プラグインの選定観点（目的に合うか／既存の構成との相性／自分で保守できるか）を、自分の題材に当てはめて選定します。
復習はこちら：WordPress｜テーマとプラグインの選び方
- ランディングページ構築に適したテーマか（多機能すぎるテーマは、かえって不要な要素の除去に手間がかかることがある）
- 必要なプラグイン（フォーム、SEO、画像最適化等）を目的に応じて選ぶ
- プラグインを増やしすぎると、表示速度や保守性に影響することを踏まえる
選んだ理由を、担当コーチに説明できるようにしておいてください。
目的に照らして必要なものだけを選びます。
以前と同じ構成が最適とは限りません。
今回の題材・目的に照らして選び直しましょう。
セクション単位で組む
目安の学習時間：120分
デザインカンプをセクション単位に分解し、上から順に実装していきます。
1セクションを組んだら都度プレビューで確認し、次のセクションに進む、という進め方をおすすめします。
まとめて全部作ってから確認すると、どの段階で崩れたのかが分かりにくくなります。
- ブロックエディタやページビルダーの機能を使って、デザインカンプのレイアウトを再現する
- 部品化した要素（Lesson9でスタイル登録したボタン・見出し等）は、実装上も再利用できる形（再利用ブロック・テンプレートパーツ等）にしておくと効率的
- 画像はLesson9で書き出したものを、適切なサイズで設置する
PC・SPの表示を切り替える
目安の学習時間：60分
デザインカンプのSP版で設計した内容を、実装上も反映します。
多くのテーマ・ページビルダーには、デバイスごとの表示切り替え機能があります。
- 要素の並び順・折り返しがSP版デザインカンプどおりになっているか
- 文字サイズ・余白がSP環境で適切か（PC版のまま縮小されていないか）
- 実機またはブラウザの検証機能で、複数の画面幅で確認する
SP表示でよくある崩れ方と、その原因は次のように対応しています。
| 症状 | 起きている原因 |
|---|---|
| 横並びだった要素が縦に潰れて重なる | PC用の横並び設定（カラム数）がSP用に切り替わっていない |
| 文字が小さくて読みにくい | フォントサイズがPC版の値のまま、レスポンシブ設定がされていない |
| ボタンが押しにくい | タップ領域がPC向けのマウス操作を前提としたサイズのまま |
| 余白が詰まって窮屈に見える | コンテンツ幅の設定がSP画面幅に対して大きすぎる |
「なんとなく崩れている」ではなく、どの設定がPC版のまま引き継がれているかを1つずつ確認すると、修正箇所を素早く特定できます。
フォームまたは申込導線を設置し動作を確認する
目安の学習時間：60分
問い合わせ・申込等のフォーム、または外部の予約・購入ページへの導線を設置し、実際に動作を確認します。フォームを設置する場合は送信テストを行ってください。
- 必須項目・入力形式のチェックが機能しているか
- 送信後に完了ページまたは完了メッセージが表示されるか
- 送信内容が正しく届く、または正しく記録されるか
フォームが正常に機能しない状態のまま次に進まないでください。
このレッスンの後半で行うセルフチェックの必須項目でもあります。
必ず実際に送信して確認します。
フォームは訪問者がコンバージョンに至る最後の接点です。
動作確認を怠らないようにしましょう。
CSSで細部を調整する
目安の学習時間：50分
テーマ・プラグインの標準機能だけでは再現しきれない細部は、CSSで調整します。
WordPressで学んだとおり、CSSを一から自分で書き上げる必要はありません。
検索や生成AIで取得したコードが何を指定しているかを読み取り、意図どおりに動作しているかを確認できることが重要です。
生成AIを使う場合は、Lesson1で学んだルール（出力を検証する責任は利用者にあること、判断そのものを委ねないこと）に従ってください。
カンプとの差分を確認する
目安の学習時間：40分
デザインカンプと実装結果を並べて比較し、差分を洗い出します。
差分は、次の3つの原因のどれかに大きく分かれます。
原因によって対応の仕方が変わるため、まず切り分けてください。
| 原因 | 見分け方 | 対応の方向性 |
|---|---|---|
| CMS・テーマの制約 | 同じ設定を試しても、テーマの標準機能では再現できない | 別の実現方法を探すか、カンプ側の表現を無理のない形に調整する |
| 設定の漏れ | 手順のどこかを飛ばしている、または設定を変え忘れている | 該当箇所の設定を見直し、正しく反映する |
| CSSの未調整 | 標準機能では近いところまで再現できているが、細部（余白・サイズ等）だけずれている | 前のセクションの手順でCSSを調整する |
原因に応じて、意図どおりに再現できるよう修正するか、再現が難しい場合は代替案を検討します。
代替案を選ぶ場合は、なぜ元の案を諦め、この代替案にしたのかという判断根拠も残しておいてください。
これも「差分にどう対応したか」の一部であり、担当コーチとのレビューで説明を求められます。
「なぜその差分が生じ、どう対応したか」を自分の中で整理しておいてください。
最終アウトプットの完成と提出
目安の学習時間：60分
公開前に、以下を自分で確認します。
- PC版・SP版ともに、デザインカンプの内容が反映されているか
- フォームまたは申込導線が正常に機能するか（フォームの場合は送信・完了まで）
- リンク切れや表示崩れがないか
- 誤字脱字がないか
すべて確認できたら、サイトを公開状態にしてください。
課題
デザインカンプの内容を、WordPressで実装し公開する。
提出物
最終アウトプット（公開URL）
提出後、担当コーチからのフィードバックを受け、必要な修正を行ってください。
修正は原則2回までを目安とします。
指摘箇所を直すだけでなく、なぜその状態になったのかの原因を特定し、同種の問題が他の箇所にないかを点検してから修正してください。
- このレッスンで完成させる公開LPは、企画書・デザインカンプと並ぶ最終アウトプットとしての提出物である
- テーマ・プラグインは、目的・相性・保守できるかの観点で自分の題材に合わせて選定する
- セクション単位で組み、都度プレビューで確認しながら進める
- SP版はPC版の縮小ではなく、個別に表示を確認・調整する
- フォームは必ず実際に送信テストを行い、動作を確認する
- CSSは一から書く必要はないが、コードが何を指定しているかを読み取り、意図どおりの動作かを確認する責任は自分にある
- デザインカンプとの差分は原因を特定し、再現するか代替案を検討する
- 提出後の修正対応は原則2回まで。原因特定と横断点検を経てから修正する