2章やってみよう！AI活用LP実装ワークフロー

INDEX

前の章に戻る次の章に進む

2章やってみよう！AI活用LP実装ワークフロー

この章の目安学習時間：180分

この章で到達できるゴール：

AI（GitHub Copilot）を駆使して、デザインカンプに基づいたLPのHTML/CSS/JavaScriptを効率的に実装できる。
AIとの対話を通じて、レスポンシブ対応や簡単なインタラクションを実装できる。

【2-1】Step1：AIと実装の最終準備

目安の学習時間：20分

開発環境とファイルの準備

まずはコーディングを始めるための準備を整えましょう。

作業フォルダの作成: PCの任意の場所に、lyna-lpのような名前で新しいフォルダを作成します。
ファイルの作成: 作成したフォルダをVSCodeで開き、中にindex.html、style.css、script.jsの3つの空ファイルを作成します。
画像の配置: 使用する画像が入ったフォルダを、2で作成した空ファイルと同じ階層に配置します。

lyna-lp.zip

AIとスタイルガイドを定義する

以前の教材では、SVGのコード解析などから正確なスタイル情報を抽出しました。
今回はJPG画像しかありませんので、AIの画像認識能力を使って、実装の指針となるスタイルガイド（CSS変数）を作成します。

操作手順

デザインカンプのJPG画像をAIにアップロードします。

以下のプロンプトを入力し、CSS変数を生成させます。

このデザインカンプを分析し、Webサイト実装のベースとなるCSS変数を生成してください。
以下の点を考慮してください：
 - **カラー**:
主要な色（背景色、テキスト色、アクセントカラーなど）を抽出し、
`--color-primary`のような役割ベースで命名してください。
- **フォント**: 
見出しと本文で使われているフォントファミリー（Serif系かSans-serif系か）と、
おおよそのフォントサイズを推測し、`--font-family-heading`や`--font-size-lg`のように命名してください。
生成した変数は:root内で定義し、
それぞれの変数がデザインのどの部分に対応するかのコメントも追加してください。

生成されたCSS変数コードをコピーし、`style.css`ファイルの先頭に貼り付けます。

:root {
  /* Color Palette 
    役割ベースで命名したカラー変数です。
  */

  /* 基本の背景色 (ほぼ白) */
  --color-background: #FFFFFF; 
  
  /* 主要なテキストカラー (濃いグレー) */
  --color-text-primary: #333333;

  /* 薄いテキストや罫線の色 (ライトグレー) */
  --color-text-secondary: #AAAAAA;

  /* ボタンやアクセントに使われる色 (ゴールド/イエロー) */
  --color-accent: #E5B842; 

  /* メールマガジンセクションの背景色 (ミディアムグレー) */
  --color-background-secondary: #707070;

  /* フッターなどの背景色 (白) */
  --color-surface: #FFFFFF; 


  /* Typography 
    フォントファミリーとサイズに関する変数です。
  */

  /* 見出し用フォント (セリフ体) */
  --font-family-heading: "Garamond", "Times New Roman", serif;

  /* 本文用フォント (サンセリフ体) */
  --font-family-body: "Helvetica Neue", "Arial", sans-serif;

  /* 特大サイズ (セクションタイトルなど) */
  --font-size-xl: 2.25rem; /* 36px */

  /* 大サイズ (小見出しなど) */
  --font-size-lg: 1.5rem; /* 24px */

  /* 中サイズ (基本の本文) */
  --font-size-md: 1rem; /* 16px */

  /* 小サイズ (商品価格や補足情報) */
  --font-size-sm: 0.875rem; /* 14px */

  /* 極小サイズ (フッターのリンクなど) */
  --font-size-xs: 0.75rem; /* 12px */
}

出力例

この一手間により、後のコーディング作業で色やフォントの値を迷うことなく、一貫性のあるスタイルをスピーディーに適用できるようになります。

【2-2】Step2：AIとHTMLの骨格を組む

目安の学習時間：30分

コメント駆動でHTML構造を生成！

ここからは GitHub Copilot を相棒に、HTMLの骨格を効率的に組み上げていきます。
index.html の <body> タグ内に、デザインカンプのセクション構成をコメントとして書き出していきましょう。
GitHub Copilot がコメントを解釈し、適切なHTML構造を提案してくれます。

index.htmlへの記述例
このようにコメントを記述し、改行するとCopilotがheaderタグやsectionタグを使った構造案を灰色の文字でサジェストしてくれます。
「Tab」キーを押して、その提案を採用しながら、全体の骨格を素早く完成させましょう。

練習問題

問題
LPのフッター部分について、以下の要素を含むHTMLをCopilotに生成させるプロンプトを記述してみましょう。

<footer>タグを使用する
ロゴ画像を表示する
主要セクションへのナビゲーションリンク（例：CONCEPT, ONLINE STOREなど）をリスト形式で配置する
コピーライト表示を一番下に配置する

解答例
Copilotが <footer> タグの中に、<img> タグ（ロゴ）、ナビゲーション用の <ul> と <li>、そして <p> タグを使ったコピーライト表示など、指定された要素を構造的に配置したHTMLを生成することを確認します。

<footer class="footer">
    <div class="footer-inner">
        <img src="image/logo.png" alt="LYNAロゴ" class="footer-logo">
        <ul class="footer-nav">
            <li><a href="#concept">CONCEPT</a></li>
            <li><a href="#products">ONLINE STORE</a></li>
            <li><a href="#voice">VOICE</a></li>
            <li><a href="#magazine">MAIL MAGAZINE</a></li>
        </ul>
    </div>
    <div class="footer-copyrights">
        <p class="copyright">Copyright &copy; LYNA ALL RIGHTS RESERVED.</p>
        <ul class="sub-nav">
            <li>プライバシーポリシー</li>
            <li>利用規約</li>
            <li>クッキー規定</li>
        </ul>
    </div>
</footer>

HTML

同様の方法でCopilotを活用しながらHTML全体を完成させましょう。

HTML全体の制作例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- ヘッダー（ロゴ画像とナビゲーションを含むheader） -->
    <header class="header" id="TOP">
        <div class="header-inner">
            <img src="image/logo.png" alt="LYNAロゴ" class="logo">
            <nav>
                <button class="hamburger" aria-label="メニューを開く">
                    <span></span><span></span><span></span>
                </button>
                <ul class="nav-list">
                    <li><a href="#TOP">TOP</a></li>
                    <li><a href="#concept">CONCEPT</a></li>
                    <li><a href="#products">ONLINE STORE</a></li>
                    <li><a href="#voice">VOICE</a></li>
                    <li><a href="#magazine">MAIL MAGAZINE</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- メインビジュアル（キャッチコピーとCTAボタンを含むsection） -->
    <section class="main-visual">
        <img src="image/main-visual.jpg" alt="メインビジュアル" class="main-visual-img">
        <div class="catchcopy">
            <h1>10年先も、<br>愛せる一着を。</h1>
        </div>
    </section>

    <!-- 商品コンセプト紹介（見出し、説明文、画像を含むsection） -->
    <section id="concept" class="concept-section">
        <div class="concept-inner">
            <div class="concept-text">
                <h2>CONCEPT</h2>
                <p>
                    作り手の顔が見える、誠実なものづくり。都会の日常に自然に溶け込む、洗練されたデザイン。
                    そして、肌に触れるたびに感じる、オーガニックな素材の心地よさ。<br><br>
                    LYNA（リナ）は、ただ服を届けるのではなく、あなたの毎日に、長く続くささやかな自信と輝きをお届けします。
                </p>
            </div>
            <div class="concept-image">
                <img src="image/concept.jpg" alt="コンセプトイメージ">
            </div>
        </div>
    </section>

    <!-- ブランドストーリー（見出し、テキスト、画像を含むsection） -->
    <section class="story-section">
        <div class="story-bg">
            <div class="story-inner">
                <div class="story-text">
                    <h2>OUR STORY</h2>
                    <p>
                        ブランド名「LYNA」に込めた想い。<br><br>
                        LYNA（リナ）は、Light（光・軽やかさ）You（あなた自身）Natural（自然体・調和）Aesthetic（美意識・感性）
                        という4つの言葉から生まれた名前です。それは、「わたしらしく、軽やかに、美しくあるために」という願いを込めた、
                        日常に寄り添うコンフォートウエアのあり方を象徴しています。忙しい毎日のなかでも、自分の感性を大切にしながら、
                        無理なく心地よく過ごせること。肌にも地球にもやさしい選択を、自然体で楽しめること。
                        そして、纏うたびにそっと自分を取り戻せるような、静かな自由と美しさを届けること。
                        LYNAには、そんな私たちの哲学が込められています。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- オンライン商品紹介（商品リスト、各商品画像、価格、カートボタンを含むsection） -->
    <section id="products" class="products-section">
        <h2>ONLINE STORE</h2>
        <h3>DAILY WEAR</h3>
        <div class="product-list">
            <!-- 商品カード（例） -->
            <div class="product-card">
                <img src="image/product1.jpg" alt="デイリーシャツ（半袖）">
                <p>デイリーシャツ（半袖）<br>￥8,900</p>
                <button>カートに追加</button>
            </div>
            <div class="product-card">
                <img src="image/product2.jpg" alt="クロップドシャツ（半袖）">
                <p>クロップドシャツ（半袖）<br>￥8,900</p>
                <button>カートに追加</button>
            </div>
            <div class="product-card">
                <img src="image/product3.jpg" alt="デイリーシャツ（長袖）">
                <p>デイリーシャツ（長袖）<br>￥12,000</p>
                <button>カートに追加</button>
            </div>
        </div>
        <h3>HOME WEAR</h3>
        <div class="product-list">
            <div class="product-card">
                <img src="image/product4.jpg" alt="ホームドレス（半袖）">
                <p>ホームドレス（半袖）<br>￥12,000</p>
                <button>カートに追加</button>
            </div>
            <div class="product-card">
                <img src="image/product5.jpg" alt="ホームパンツ">
                <p>ホームパンツ<br>￥8,900</p>
                <button>カートに追加</button>
            </div>
            <div class="product-card">
                <img src="image/product6.jpg" alt="ホームタンクトップ">
                <p>ホームタンクトップ<br>￥5,800</p>
                <button>カートに追加</button>
            </div>
        </div>
    </section>

    <section class="commitment-section">
    <div class="commitment-inner">
        <div class="commitment-text">
            <h2>Our Commitment</h2>
            <h3>一着に、未来への敬意を込めて。</h3>
            <p>
                私たちは、ただ美しいだけの服は作りません。生産の過程で環境への負荷を最小限に抑え、
                作り手の生活を持続可能にすること。そして、その一着があなたの日常を長く、豊かに彩ること。
                LYNAの服作りは、未来の地球と、服を着るあなた自身への敬意から生まれています。
            </p>
        </div>
        <div class="commitment-image">
            <img src="image/commitment.jpg" alt="サステナビリティをイメージした写真">
        </div>
    </div>
</section>

    <!-- お客様の声（見出し、お客様のコメント、写真を含むsection） -->
    <section id="voice" class="voice-section">
        <h2>VOICE</h2>
        <p>お客様からの声をご紹介します。</p>
        <div class="voice-list">
            <div class="voice-card">
                <p>★★★★★<br>「LYNAの服を着ることで、自信が持てるようになりました。」</p>
                <p>安藤 美咲<br>PR、株式会社ABC</p>
            </div>
            <div class="voice-card">
                <p>★★★★★<br>「環境に優しいだけでなく、スタイリッシュです。」</p>
                <p>佐藤 香織<br>マーケター、株式会社DEF</p>
            </div>
            <div class="voice-card">
                <p>★★★★★<br>「このブランドの服は、等身大の自分を表現してくれます。。」</p>
                <p>山本 直子<br>デザイナー、株式会社GHI</p>
            </div>
        </div>
    </section>

    <!-- メールマガジン登録（見出し、入力フォーム、登録ボタンを含むsection） -->
    <section id="magazine" class="magazine-section">
        <div class="magazine-inner">
            <h2>MAIL MAGAZINE</h2>
            <p>最新のサステナブルファッション情報を<br>手にいれるチャンスはこちら</p>
            <button>購読する</button>
        </div>
    </section>

    <!-- フッター（ロゴ、コピーライト、SNSリンクを含むfooter） -->
    <footer class="footer">
        <div class="footer-inner">
            <img src="image/logo.png" alt="LYNAロゴ" class="footer-logo">
            <ul class="footer-nav">
                <li><a href="#concept">CONCEPT</a></li>
                <li><a href="#products">ONLINE STORE</a></li>
                <li><a href="#voice">VOICE</a></li>
                <li><a href="#magazine">MAIL MAGAZINE</a></li>
            </ul>
        </div>
    </footer>

    <button id="toTopBtn" aria-label="トップへ戻る">
        ↑
    </button>

    <script src="script.js"></script>
</body>
</html>

HTML

【2-3】Step3：AIとCSSでデザインを再現する！

目安の学習時間：60分

Copilot Chatで基本スタイルを当てる

HTMLの骨格ができたら、次はCSSでデザインを再現していきます。VSCodeのCopilot Chat機能を開き、対話形式でスタイリングを進めましょう。

Copilot Chatへの指示例

「style.css を開いて。まずは基本的なページ全体のスタイルを設定します。背景色は -color-background、基本の文字色は -color-text-primary を適用してください。」
「header のスタイルを作成します。中のロゴとナビゲーションを横並びにして、上下中央に配置してください。」
「.button というクラスのスタイルを作成します。背景色は -color-accent、文字色は白、角を少し丸めて、内側に適度な余白（padding）を設定してください。」

このように、日本語で具体的な指示を出すことで、Copilot ChatがCSSコードを生成してくれます。
生成されたコードをstyle.cssに貼り付け、ブラウザで表示を確認しながら作業を進めます。

制作例

:root {
  /* Color Palette 
    役割ベースで命名したカラー変数です。
  */

  /* 基本の背景色 (ほぼ白) */
  --color-background: #FFFFFF; 
  
  /* 主要なテキストカラー (濃いグレー) */
  --color-text-primary: #333333;

  /* 薄いテキストや罫線の色 (ライトグレー) */
  --color-text-secondary: #AAAAAA;

  /* ボタンやアクセントに使われる色 (ゴールド/イエロー) */
  --color-accent: #E5B842; 

  /* メールマガジンセクションの背景色 (ミディアムグレー) */
  --color-background-secondary: #707070;

  /* フッターなどの背景色 (白) */
  --color-surface: #FFFFFF; 


  /* Typography 
    フォントファミリーとサイズに関する変数です。
  */

  /* 見出し用フォント (セリフ体) */
  --font-family-heading: "Garamond", "Times New Roman", serif;

  /* 本文用フォント (サンセリフ体) */
  --font-family-body: "Helvetica Neue", "Arial", sans-serif;

  /* 特大サイズ (セクションタイトルなど) */
  --font-size-xl: 2.25rem; /* 36px */

  /* 大サイズ (小見出しなど) */
  --font-size-lg: 1.5rem; /* 24px */

  /* 中サイズ (基本の本文) */
  --font-size-md: 1rem; /* 16px */

  /* 小サイズ (商品価格や補足情報) */
  --font-size-sm: 0.875rem; /* 14px */

  /* 極小サイズ (フッターのリンクなど) */
  --font-size-xs: 0.75rem; /* 12px */
}
:root {
  /* ...既存の変数定義... */
}

/* ベース設定 */
body {
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-md);
  margin: 0;
  padding: 0;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ヘッダー */
.header {
  width: 100%;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-text-secondary);
  background: var(--color-surface);
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.logo {
  height: 28px;
}

.nav-list {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  transition: color 0.2s;
}

.nav-list a:hover {
  color: var(--color-accent);
}

/* メインビジュアル */
.main-visual {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  margin-bottom: 56px;
}

.main-visual-img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.catchcopy {
  position: absolute;
  right: 8%;
  bottom: 18%;
  color: #fff;
  text-align: right;
  text-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.catchcopy h1 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: normal;
  margin: 0;
  line-height: 1.4;
}

/* コンセプトセクション */
.concept-section {
  max-width: 1100px;
  margin: 0 auto 64px auto;
  display: flex;
  gap: 48px;
  align-items: flex-start;
  padding: 0 24px;
}

.concept-inner {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

.concept-text {
  flex: 1.2;
}

.concept-text h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  letter-spacing: 0.15em;
  margin-bottom: 16px;
}

.concept-text p {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.concept-image {
  flex: 1;
  min-width: 260px;
}

/* ストーリーセクション */
.story-section {
  background: #f7f7f7;
  margin-bottom: 64px;
}

.story-bg {
  background: url("image/story.jpg") no-repeat center;
}

.story-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 48px;
  align-items: center;
  padding: 48px 24px;
}

.story-text {
  flex: 1.2;
  color: #fff;
}

.story-text h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  letter-spacing: 0.15em;
  margin-bottom: 16px;
}

.story-text p {
  font-size: var(--font-size-xs);
  line-height: 2;
}

/* 商品セクション */
.products-section {
  max-width: 1100px;
  margin: 0 auto 64px auto;
  padding: 0 24px;
}

.products-section h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  letter-spacing: 0.15em;
  margin-bottom: 24px;
}

.products-section h3 {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  margin: 32px 0 16px 0;
  letter-spacing: 0.1em;
}

.product-list {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

.product-card {
  flex: 1;
  background: #fff;
  border: 1px solid var(--color-text-secondary);
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  margin-bottom: 8px;
}

.product-card p {
  font-size: var(--font-size-sm);
  margin: 0 0 8px 0;
}

.product-card button {
  background: transparent;
  border: 1px solid var(--color-text-secondary);
  color: var(--color-text-primary);
  padding: 8px 0;
  border-radius: 2px;
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.product-card button:hover {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

/* VOICEセクション */
.voice-section {
  max-width: 1100px;
  margin: 0 auto 64px auto;
  padding: 0 24px;
}

.voice-section h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  letter-spacing: 0.15em;
  margin-bottom: 16px;
}

.voice-list {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.voice-card {
  flex: 1;
  background: #fff;
  border: 1px solid var(--color-text-secondary);
  padding: 16px;
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  border-radius: 2px;
}

/* メールマガジンセクション */
.magazine-section {
  background: var(--color-background-secondary);
  color: #fff;
  padding: 48px 0;
  margin-bottom: 64px;
}

.magazine-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.magazine-inner h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  letter-spacing: 0.15em;
  margin-bottom: 16px;
}

.magazine-inner p {
  font-size: var(--font-size-sm);
  margin-bottom: 24px;
}

.magazine-inner form {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.magazine-inner input[type="email"] {
  padding: 8px 12px;
  border: none;
  border-radius: 2px;
  font-size: var(--font-size-sm);
  width: 220px;
}

.magazine-inner button {
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 2px;
  padding: 8px 24px;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.2s;
}

.magazine-inner button:hover {
  background: #bfa02e;
}

/* フッター */
.footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-text-secondary);
  padding: 32px 0 16px 0;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 24px;
}

.footer-logo {
  height: 24px;
}

.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-nav a {
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
}

.footer-nav a:hover {
  color: var(--color-accent);
}

.copyright {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: 24px;
}

/* レスポンシブ対応 */
@media (max-width: 900px) {
  .concept-inner,
  .story-inner,
  .product-list,
  .voice-list,
  .footer-inner {
    flex-direction: column;
    gap: 24px;
  }
  .main-visual,
  .main-visual-img {
    height: 260px;
  }
}

@media (max-width: 600px) {
  .header-inner,
  .concept-section,
  .products-section,
  .voice-section,
  .footer-inner {
    padding: 0 8px;
    max-width: 100%;
  }
  .main-visual,
  .main-visual-img {
    height: 160px;
  }
  .magazine-inner {
    padding: 0 8px;
  }
}

CSS

レスポンシブ対応もAIに相談しよう

PC版のスタイリングがある程度できたら、レスポンシブ対応も進めます。

Copilot Chatへの相談例
「このLPのレスポンシブ対応について相談です。
画面幅が768px以下になったら、ヘッダーのナビゲーションメニューをハンバーガーメニューに変更したいです。
そのためのCSS（メディアクエリ）とJavaScriptのコードを提案してください。」

AIが提案するコードを参考に実装することで、複雑に見えるレスポンシブ対応もスムーズに進めることができます。

実務でのヒント：レスポンシブのデザイン指示がない場合

実務の現場では、PC版のデザインのみが提供され、タブレットやスマートフォン版の具体的なデザイン指示がないケースは少なくありません。
このような場合、開発者にはPC版のデザイン原則やスタイルを引き継ぎつつ、モバイル環境で最適化されたレイアウトを自身で判断して実装することが期待されます。
AIの提案にもあるような、以下のような対応が一般的な「よしなに計らう」範囲と言えるでしょう。
- カラムレイアウト（横並びの要素）を1列にして縦に並べる。
- PCでは広すぎる余白を、画面幅に合わせて狭く調整する。
- フォントサイズや画像の大きさを、可読性を損なわない範囲で調整する。
デザイン指示がない中で、ユーザーにとって最善の表示を考える力も、開発者にとって重要なスキルの一つです。

Copilot Chat出力例

ハンバーガーメニュー化と、追加でおすすめのレスポンシブ対応（例：商品カードの縦並び、余白調整など）
を含めたCSS・JavaScript例を提案します。

1. HTMLの修正（ハンバーガーメニュー用ボタン追加）

// ...既存の<header>内...
<nav>
    <button class="hamburger" aria-label="メニューを開く">
        <span></span><span></span><span></span>
    </button>
    <ul class="nav-list">
        <!-- ...既存のリスト... -->
    </ul>
</nav>
// ...既存のコード...

2. CSS（メディアクエリ含む）

/* ハンバーガーメニュー初期状態（PCでは非表示） */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  gap: 6px;
  padding: 0;
}
.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: all 0.3s;
}

/* 768px以下でハンバーガー表示＆ナビ非表示 */
@media (max-width: 768px) {
  .nav-list {
    display: none;
    position: absolute;
    top: 56px;
    right: 16px;
    background: #fff;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border-radius: 4px;
    min-width: 160px;
    z-index: 100;
  }
  .nav-list.open {
    display: flex;
  }
  .hamburger {
    display: flex;
    z-index: 101;
  }
  .header-inner {
    position: relative;
  }
  /* 商品リストを縦並びに */
  .product-list {
    flex-direction: column;
    gap: 16px;
  }
  /* voiceカードも縦並び */
  .voice-list {
    flex-direction: column;
    gap: 16px;
  }
  /* 余白調整 */
  .concept-section,
  .products-section,
  .voice-section {
    padding: 0 8px;
  }
}

/* 追加：ハンバーガー開閉時のアニメーション例 */
.hamburger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

3. JavaScript（ハンバーガーメニュー開閉）

Downloads/lyna-lp.demo/script.js
document.addEventListener('DOMContentLoaded', function() {
  const hamburger = document.querySelector('.hamburger');
  const navList = document.querySelector('.nav-list');
  if (hamburger && navList) {
    hamburger.addEventListener('click', function() {
      navList.classList.toggle('open');
      hamburger.classList.toggle('active');
    });
    // メニュークリックで自動的に閉じる
    navList.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', () => {
        navList.classList.remove('open');
        hamburger.classList.remove('active');
      });
    });
  }
});

4. その他のレスポンシブ提案
商品カードやVOICEカードを縦並びにすることでスマホで見やすく。
セクションの余白を減らすことで画面幅が狭いときもバランス良く。
必要に応じて画像の高さやフォントサイズも@mediaで調整。
この内容を反映すれば、ハンバーガーメニューとスマホ向けの見やすいレイアウトが実現できます。

出力例

【2-4】Step4：AIとJavaScriptで動きをつける(任意)

目安の学習時間：40分

AIと作る「トップへ戻る」ボタン

LPが長くなると、ユーザーがページの先頭に戻るのが大変になります。
そこで、多くのWebサイトで採用されている「トップへ戻る」ボタンを実装してみましょう。
これもAIに相談すれば簡単です。

JavaScript未学習の方へ

このセクション【2-4】では、JavaScriptを使ってWebサイトに「動き」を追加するインタラクションを実装します。

JavaScriptをまだ学習していない、あるいは難しいと感じる場合は、このセクションを一旦スキップしても問題ありません。
まずはHTMLとCSSだけでデザインカンプの見た目を完成させることを目指しましょう。
JavaScriptの学習が進んだ後で、いつでもこの章に戻って挑戦することができます。

Copilot Chatへの相談例
「Webサイトに『トップへ戻る』ボタンを実装したいです。
普段は隠れていて、ある程度下にスクロールしたら右下にフワッと表示され、クリックするとページ上部にスムーズにスクロールする、という仕様です。
この機能を実現するためのHTML, CSS, JavaScriptのコードをそれぞれ生成してください。」

AIが生成したコードをそれぞれのファイルに追記するだけで、リッチなUIを実装できます。
これにより、Webサイトでよく使われるインタラクションの実装パターンを学びます。

以下の手順で「トップへ戻る」ボタンを実装できます。

1. HTML（</body>直前に追加）

<!-- トップへ戻るボタン -->
<button id="toTopBtn" aria-label="トップへ戻る">
  ↑
</button>

2. CSS（style.cssの末尾に追加）

/* トップへ戻るボタン */
#toTopBtn {
  position: fixed;
  right: 24px;
  bottom: 32px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 999;
}
#toTopBtn.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#toTopBtn:hover {
  background: #bfa02e;
}

3. JavaScript（script.jsに追加）

document.addEventListener('DOMContentLoaded', function() {
  // トップへ戻るボタン
  const toTopBtn = document.getElementById('toTopBtn');
  window.addEventListener('scroll', function() {
    if (window.scrollY > 200) {
      toTopBtn.classList.add('show');
    } else {
      toTopBtn.classList.remove('show');
    }
  });
  toTopBtn.addEventListener('click', function() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
});

これで、スクロール時に右下へ「トップへ戻る」ボタンが表示され、クリックでスムーズにページ上部へ戻ります。

4. HTML（</body>直前に追加）

<script src="script.js"></script>

Copilot Chat出力例

考えてみよう！

このLPに、さらに追加するとユーザー体験が向上しそうな「動き（インタラクション）」はありますか？
AIに「このLPに加えると効果的な、さりげないインタラクションのアイデアを3つ提案して」と相談してみましょう。

可能であれば提案されたアイデアをコードに落とし込むところまでチャレンジしてみましょう。

解答例
AIの回答案：

画像の遅延読み込み（Lazy Loading）: 画面に表示されるまで画像の読み込みを遅らせ、初期表示を高速化する。
スクロールに応じたフェードイン効果: 各セクションが画面に入ってきたときに、フワッと表示される効果。
ボタンホバー時のエフェクト: ONLINE STOREのボタンなどにマウスが乗ると、少しだけ浮き上がるような影（box-shadow）をつける。

【2-5】2章 -章末課題- [2カラムレイアウトのセクション追加]

目安の学習時間：30分

問題

LPの実装、お疲れ様です。クライアント（LYNAの担当者）から、ブランドの姿勢をより伝えるため、「OUR COMMITMENT（私たちの約束）」というセクションを追加してほしい、と追加依頼が来ました。

以下のテキストと画像を使い、左側にテキスト、右側に画像を配置する「2カラムレイアウト」で実装してください。
AIと協力し、HTMLとCSSを追記してこのセクションを実装しましょう。

クライアントからの支給テキスト

見出し: Our Commitment
タイトル: 一着に、未来への敬意を込めて。
本文:
私たちは、ただ美しいだけの服は作りません。生産の過程で環境への負荷を最小限に抑え、作り手の生活を持続可能にすること。そして、その一着があなたの日常を長く、豊かに彩ること。LYNAの服作りは、未来の地球と、服を着るあなた自身への敬意から生まれています。

使用画像

解答手順

HTMLの追加:
index.html の適切な場所（例: VOICEセクションの上）に、OUR COMMITMENTセクションというコメントを記述します。GitHub Copilotに、支給されたテキスト（見出し、タイトル、本文）と画像を配置するための基本的なHTML構造を生成させます。
CSSでのレイアウト作成:
Copilot Chatを開き、「.commitment-section というクラスを新しく作り、Flexboxを使って中のテキストエリアと画像エリアが横並びになるようにスタイリングしてください。カラム間の余白も設定してください」のように、具体的なレイアウトを指示します。
スタイルの微調整:
生成されたCSSを style.css に追記します。AIに「テキストが見出し、タイトル、本文の順に並ぶようにしてください」や「テキストエリア全体が、画像の上下中央に配置されるようにしてください」といった指示を加え、デザインを整えます。
ブラウザで確認:
ブラウザで表示を確認し、指定されたテキストと画像が意図通りに左右の2カラムで表示されているか確かめて、完成です。

解答例

1. HTMLの追加
index.htmlのVOICEセクションの上など、適切な場所に以下を追加します。

<!-- OUR COMMITMENTセクション -->
<section class="commitment-section">
    <div class="commitment-inner">
        <div class="commitment-text">
            <h2>Our Commitment</h2>
            <h3>一着に、未来への敬意を込めて。</h3>
            <p>
              私たちは、ただ美しいだけの服は作りません。生産の過程で環境への負荷を最小限に抑え、
              作り手の生活を持続可能にすること。そして、その一着があなたの日常を長く、豊かに彩ること。
              LYNAの服作りは、未来の地球と、服を着るあなた自身への敬意から生まれています。
            </p>
        </div>
        <div class="commitment-image">
            <img src="image/commitment.jpg" alt="サステナビリティをイメージした写真">
        </div>
    </div>
</section>


2. CSSの追加
style.cssの末尾に以下を追加してください。

/* OUR COMMITMENTセクション */
.commitment-section {
  max-width: 1100px;
  margin: 0 auto 64px auto;
  padding: 0 24px;
}

.commitment-inner {
  display: flex;
  gap: 48px;
  align-items: center;
}

.commitment-text {
  flex: 1.2;
}

.commitment-text h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  letter-spacing: 0.15em;
  margin-bottom: 16px;
}

.commitment-text h3 {
  font-size: 1.25rem;
  margin-bottom: 16px;
  font-weight: normal;
  letter-spacing: 0.08em;
}

.commitment-text p {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.commitment-image {
  flex: 1;
  min-width: 260px;
}

.commitment-image img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}

/* レスポンシブ対応 */
@media (max-width: 900px) {
  .commitment-inner {
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
  }
  .commitment-image {
    width: 100%;
  }

解答例

ここまで完成したら、フォルダに画像を入れて一度制作物を確認してみましょう！
おそらくUIの細かい部分が再現できていないことに気づくと思います。

制作例

lyna-lp.demo.zip

ここから先は手動での修正作業がメインになっていきます！
今までの学習事項を活用して、完璧なLPページを再現してみましょう！（工数2~3時間）

制作例

lyna-lp.revised.zip

これで「2章：やってみよう！AI活用LP実装ワークフロー」の解説を終わります。
次の章に進みましょう。

前の章に戻る次の章に進む