制作課題：デザイン画像からLPを完成させる

ここまで学んだ内容を使い、完成見本の画像から1ページのLPを制作します。既存のLP教材を写す課題ではなく、画像を読み取り、自分で構造と実装方法を判断する課題です。

画像素材は教材の最終調整時に追加します。それまでは、指定された縦横比の仮画像を使い、画像が差し替わっても崩れないレイアウトを作ります。

制作するLPの要件

制作課題では、デザイン見本を読み取り、パソコンで次のような完成状態を目指します。

スマートフォンでも内容の順番とCTAを保ち、横スクロールが発生しない状態へ仕上げます。

• ヘッダー、ヒーロー、特徴、利用手順、CTA、フッターを含む
• HTMLだけでも内容を上から読める
• 共通の見出し、ボタン、カードを再利用できるCSSにする
• 320pxから大画面まで横スクロールを発生させない
• メニューまたは表示アニメーションをJavaScriptで実装する
• リンクとボタンをキーボードで操作できる
• ConsoleとNetworkに未解決のエラーを残さない

実装前に設計する

次の図では、「実装前に設計する」の仕組みや関係を確認できます。

1. 完成見本をセクションへ分ける
2. HTMLの見出し構造と読む順番を決める
3. 画像、文字、色、余白を一覧にする
4. 共通部品とセクション固有の見た目を分ける
5. スマートフォンで変わる配置を決める
6. JavaScriptが必要な操作だけを決める

小さな完成を積み上げる

HTML全体を作った後、基本スタイル、共通部品、各セクション、レスポンシブ、JavaScriptの順で進めます。途中で細部だけを完成させず、ページ全体の大きな差から調整します。

次の図では、「小さな完成を積み上げる」の仕組みや関係を確認できます。

セクションが完成するごとに、表示確認とGitコミットを行います。変更内容を説明できる単位で履歴を残してください。

想定外の内容でも崩れないか確認する

• 見出しと本文を長い文章へ変更する
• 画像がない状態を試す
• カードの数を増減する
• ブラウザの文字サイズを拡大する
• JavaScriptを読み込めない状態を試す

課題の提出物

• HTML、CSS、JavaScript、使用画像を含む制作フォルダー
• デザインの判断と未確定事項を記録した実装メモ
• 確認した画面幅と結果をまとめたチェック表
• 制作過程が分かるGitの履歴

次のレッスンで完成見本との差、レスポンシブ、操作、読み込みを検証し、公開できる状態へ仕上げます。