Module 4: LP制作入門 - EMPLAY AI ACADEMY

4.1 HP と LP の違い — どちらを作るべきか

⏱ 所要: 約15分 📖 形式: 読み物 🔰 前提: Module 3

🎯 このレッスンの到達目標

HP（ホームページ）と LP（ランディングページ）の目的の違いを説明できる
自分が作るべきはどちらか判断できる
LPの代表的な8セクション構成を覚える

🏢 HP (Homepage)

複数ページの総合サイト
会社紹介・サービス・採用・ブログ・問合せを網羅
目的: ブランディング / 情報提供
ページ数: 10〜100ページ
訪問経路: 指名検索、直接URL、口コミ

🎯 LP (Landing Page)

縦長1ページ完結型
1商品・1サービスだけを深く訴求
目的: 1つのコンバージョン（申込/購入）
ページ数: 1〜3ページ
訪問経路: 広告、SNS、メルマガ

典型的なLPの8セクション構成（王道パターン）

ファーストビュー（ヒーロー）: 3秒で「自分ごと」と思わせるキャッチコピー + CTA
共感・課題提起: 「こんなことで困っていませんか？」
解決策の提示: 商品・サービスで何がどう解決するか
特徴・ベネフィット: 他社との違い、得られる価値を3〜4つ
証拠（ソーシャルプルーフ）: お客様の声、事例、受賞歴、数字
価格・プラン: 料金とプラン比較
よくある質問: 購入直前の不安を潰す
最終CTA: 申込ボタン + 緊急性（期間限定等）

LPの成果は「最初の3秒」で8割決まる

📊 業界データ

・ユーザーは LP に来てから平均 3秒で離脱判断する
・ヒーロー部分で「自分ごと」と思えないと、90% 以上が離脱
・CTA ボタンの文言だけで CVR が 2〜3倍変わる事例も珍しくない

🎯 このモジュールのゴール

上の8セクション構成に沿った1本のLPを自分の手で完成させ、公開URLで共有できる状態にします。テーマは自由。初めての方は「架空のカフェ」「自分のサービス」「好きなお店の紹介」などがおすすめ。

✏️ MINI QUIZ

新商品の Instagram 広告から誘導する Web ページは、HP と LP のどちらが向いている？

AHP（10ページ以上の総合サイト）
BLP（1ページ完結で1商品に集中）
Cどちらでも同じ

✅ 正解！広告から誘導する「1商品を売りたい」ケースは LP 一択。ページ遷移があると離脱率が跳ね上がります。

💡 30秒で復習

HPは複数ページで会社の顔となる総合情報サイト、LPは1ページ完結で1つのCV（申込/購入/問合せ）に最適化された営業マシン。広告流入はLP、ブランド構築はHPと使い分ける。

4.2 Web の仕組み — HTML / CSS / JS の役割分担

⏱ 所要: 約20分 📖 形式: 読み物 🔰 前提: 3.1

🎯 このレッスンの到達目標

Webページが「3つの言語の組み合わせ」で動いている仕組みを理解する
HTML / CSS / JavaScript それぞれの役割を例えで説明できる
ブラウザが Web ページを表示するまでの流れを掴む

例え：Web ページは「家」

🏗 HTML = 骨組み

柱・壁・屋根の配置。「ここは見出し」「ここは段落」「ここはボタン」と構造と意味を定義する。
拡張子: .html

🎨 CSS = 内装・外観

色・サイズ・配置・フォント。見た目を整える。
HTMLが同じでも、CSSで全く違う印象になる。
拡張子: .css

⚡ JavaScript = 電気・設備

ボタンを押したら動く、スクロールで要素が出る、フォーム送信。動き・インタラクションを作る。
拡張子: .js

🖼 画像・動画 = 家具

ロゴ、写真、動画、アイコン。
フォルダ images/ videos/ などに整理。

ブラウザが表示する流れ

ブラウザに URL を入力（例: https://example.com）
サーバーから HTML を受信
HTML を解析しながら、CSS / JS / 画像を追加ダウンロード
すべて組み立てて「完成したページ」として表示
JavaScript が動き始める（イベントに応じてページを書き換え）

実際のフォルダ構成例（LP 1本分）

my-lp/
├── index.html        ← メインのページ
├── style.css         ← デザイン
├── script.js         ← 動き（任意）
├── images/
│   ├── hero.jpg
│   ├── logo.svg
│   └── feature-1.png
└── CLAUDE.md         ← プロジェクトルール

💡 この研修の方針

フレームワーク（React / Vue）は Module 7 で学びます。Module 4 では、素の HTML / CSS / JS で制作します。1本のHTMLファイルから世界に公開できる、この基礎が全ての土台になります。

✏️ MINI QUIZ

Web ページで「ボタンを押したらモーダルが開く」という動きを実装するときに使う言語は？

AHTML
BCSS
CJavaScript

✅ 正解！ HTML は構造、CSS は見た目、動きは JavaScript の担当です。ただし最近は簡単なアニメは CSS だけでもできます。

💡 30秒で復習

Webは「HTML（構造）+ CSS（見た目）+ JS（動き）」の3層。ブラウザがHTTPでサーバからファイルを受け取り表示。ドメイン・DNS・SSL・HTTPSの基本も押さえる。

4.3 HTML の基礎 — 最低限これだけ

⏱ 所要: 約40分 📖 形式: 読み物 + 実習 🔰 前提: 3.2

🎯 このレッスンの到達目標

HTML の「タグ」の概念を理解する
よく使う12タグを見て意味が分かる
Claude Code のコード提案を読解できるようになる

HTML (HyperText Markup Language)は、Webページの骨組みを作る言語。<タグ>でコンテンツを囲むだけのシンプルな作りです。

最小の HTML ファイル

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>はじめてのLP</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>ようこそ</h1>
    <p>これは私のはじめてのページです。</p>
  </body>
</html>

覚えるべき12タグ

📝 文章の構造

<h1> 〜 <h6>: 見出し（h1 が最大）
<p>: 段落
<ul> / <li>: 箇条書き
<ol>: 番号付きリスト

🔗 参照系

<a href="...">: リンク
<img src="..." alt="...">: 画像

🎛 インタラクション

<button>: ボタン
<form>: フォーム
<input>: 入力欄

🏗 レイアウト

<header> / <footer>: 上下領域
<section>: セクション
<div>: 汎用のハコ

属性（attribute）も覚えておく

class="button-primary": CSS のグループ名（何度でも使える）
id="hero": ページ内で一意の名前（1回だけ）
href="...": リンク先URL
src="...": 画像や動画のファイルパス
alt="...": 画像の代替テキスト（アクセシビリティで必須）

💡 全部覚える必要はない

実際、書くのは Claude Code がやってくれます。あなたに必要なのは「これは見出しだな」「これは段落だな」とコードを見て意味がわかるレベル。Claude Code に「もっと大きくして」と指示するとき、どこを指すのかが伝われば十分です。

Claude Code への実践指示

landing.html を作ってください。
内容は「カフェ モカの木」のLPの
ファーストビュー（ヒーロー）部分だけ。

- 店名（h1）
- キャッチコピー（p）
- 予約ボタン（button）

HTML だけ、CSS はまだ当てない。
タグの意味も分かるようにコメントを入れて。

✏️ MINI QUIZ

次のコードで「画像の代替テキスト（目の不自由な方や画像が表示されないときに使われる説明）」を指定する属性はどれ？

<img src="hero.jpg" alt="浜辺に立つ女性">

Asrc
Balt
Cimg

✅ 正解！ alt 属性はアクセシビリティと SEO の両方で必須。全ての <img> に書きましょう。

💡 30秒で復習

HTMLはタグで「意味」を表す（h1=見出し / p=段落 / a=リンク / img=画像）。セマンティックタグ（header/main/section/footer）でSEOとアクセシビリティが向上。

4.4 CSS の基礎 — 見た目を操る

⏱ 所要: 約50分 🎨 形式: 読み物 + 実習 🔰 前提: 3.3

🎯 このレッスンの到達目標

CSS の基本構文を理解する
色・余白・フォント・レイアウトの4大カテゴリを把握する
Claude に「こういう見た目にして」と具体的にディレクションできる

CSS の基本構文

セレクタ {
  プロパティ: 値;
}

/* 例 */
h1 {
  color: #2dd4bf;
  font-size: 48px;
  text-align: center;
}

.cta-button {
  background: #fbbf24;
  padding: 16px 32px;
  border-radius: 8px;
}

セレクタ: スタイルを当てる対象（タグ名 / クラス名 / ID名）
プロパティ: 何を設定するか（color、font-size、paddingなど）
値: どう設定するか（#2dd4bf、48px、centerなど）

4大カテゴリで押さえる

🎨 ① 色（Color / Background）

color: #09090b; 文字色
background: #fef3c7; 背景色
色の表現: #hex / rgb() / hsl()

📏 ② 余白（Margin / Padding）

margin: 16px; 外側の余白
padding: 16px; 内側の余白
「もっと詰めて」「広げて」で伝わる

🔠 ③ フォント

font-family: 'Noto Sans JP';
font-size: 18px;
font-weight: 600; 太さ

📐 ④ レイアウト

display: flex; 横並び
display: grid; 格子状
「3カラムで」「中央寄せ」で伝わる

Flexbox と Grid（現代レイアウトの2トップ）

📦 Flexbox（一方向の並び）

ヘッダーのロゴとメニューを横並びにする、カードを等幅で並べる、など。
display: flex; justify-content: space-between;

🎯 Grid（二次元レイアウト）

複雑な格子レイアウト、ギャラリーの3×3 など。
display: grid; grid-template-columns: repeat(3, 1fr);

良いディレクション指示の例

✅ 伝わる指示

「ヒーローセクションの背景を、ダークネイビー（#0f172a あたり）に変えて。
タイトル文字は白・フォントサイズ 56px・太め（weight 700）、CTA ボタンは温かみのあるオレンジ（#f97316）で、角を 12px 丸めて。
全体的に高級感のある明朝系フォントに変更してください。」

❌ 伝わらない指示

「かっこよくして」「いい感じに」「オシャレに」

よく使うCSSチートシート

やりたいこと	CSS
中央寄せ（要素を画面中央）	`display: flex; justify-content: center; align-items: center;`
角を丸める	`border-radius: 8px;`
影を付ける	`box-shadow: 0 4px 12px rgba(0,0,0,0.1);`
ホバーで色変える	`:hover { background: ...; }`
グラデーション背景	`background: linear-gradient(135deg, #0f172a, #1e3a8a);`

✏️ MINI QUIZ

3つの要素を「横一列に等間隔で並べたい」とき、最も一般的な CSS プロパティは？

Afloat: left;
Bdisplay: flex;
Cposition: absolute;

✅ 正解！ Flexbox は横並びレイアウトの現代の標準手段。float は古い書き方で今はほぼ使いません。

💡 30秒で復習

CSSは「セレクタ { プロパティ: 値; }」でデザインを当てる。レイアウトはFlexbox/Grid、配色はメイン+アクセント+背景の3色設計、余白はpadding/marginで余裕を作る。

4.5 LP の構成設計 — 企画が全て

⏱ 所要: 約40分 🧭 形式: 企画ワーク 🔰 前提: 3.1〜3.4

🎯 このレッスンの到達目標

LP の「狙い」と「ターゲット」を言語化できる
セクション構成のラフを作れる
Claude Code に渡せる「構成指示書」を作成できる

いきなり作り始めず、設計から入るのがプロの仕事の進め方。設計がしっかりしていれば、Claude Code も精度の高い成果物を出してくれます。設計 30% / 制作 70% のバランスが理想です。

最低限決めておきたい7項目

何を売るか: 商品・サービス名
誰に売るか: ターゲット（年齢・職業・悩み）
一番の強み（USP）: 他との違い、選ばれる理由
最終ゴール（CTA）: 予約・購入・資料請求など
トーン&マナー: 高級 / 親しみ / クール / 信頼感
配色方針: メイン2色 + アクセント1色
参考にしたい LP: 雰囲気のリファレンス3つ

構成指示書テンプレート（そのまま Claude に渡せる）

【LP構成指示書】

■ 商品/サービス: カフェ「モカの木」
■ ターゲット: 都心で働く20〜40代女性、平日昼ランチ
■ USP（一番の強み）:
   店内焙煎のスペシャルティコーヒー / 静かで集中できる空間
■ 最終ゴール: 公式LINEの友だち登録（初回10%OFFクーポン配布）
■ トーン&マナー: 落ち着き / 上品 / 木目の温かみ
■ 配色: ベージュ #F5E6D3 + ダークブラウン #3E2723 + 差色オレンジ #E67E22
■ 参考LP: Starbucks Japan / 猿田彦珈琲 / Blue Bottle

■ セクション構成（8セクション）:
1. ヒーロー
   - 店外観の写真（プレースホルダー）
   - キャッチコピー（30字以内）
   - LINE登録CTAボタン

2. 課題提起「こんな時間、ほしくないですか？」
   - 3つの問いかけ

3. 選ばれる3つの理由
   - 焙煎 / 空間 / 接客 をアイコン付きで

4. 人気メニュー
   - ドリンク3種 + フード2種

5. お客様の声
   - 3件、☆5評価付き

6. アクセス・営業時間
   - 地図の埋め込みプレースホルダー

7. よくある質問
   - 予約必要？ / Wi-Fi ある？ / etc

8. 最終CTA
   - LINE登録ボタン（固定表示）

💡 設計に時間をかけるほど制作が速くなる

この構成指示書を作るのに 1〜2時間かかります。でもこの後の制作は半分以下の時間で終わります。しかも品質は圧倒的に高い。「急がば回れ」が LP 制作の鉄則です。

構成案を Claude Code に壁打ちしてもらう

慣れないうちは、Claude に構成案の妥当性を聞くのも有効:

以下のLP構成指示書を見てもらって、
LP制作のプロ目線でレビューしてください。

【観点】
- ターゲットに刺さる構成になっているか
- セクションの順序に違和感はないか
- 足りていないセクションはないか
- CVR 観点で改善すべき点

（ここに指示書を貼る）

業種別LPテンプレート 3パターン

業種ごとに「刺さる構成」と「強調ポイント」が違います。下記3パターンをベースに、自社向けにアレンジしてください。

① サービス業（コンサル / 士業 / SaaS）

セクション	狙い	具体例
FV	ベネフィット訴求	「3ヶ月でリード獲得2倍。BtoB特化のCRMコンサル」
共感・課題	悩みの言語化	「営業リストが枯渇」「商談化率が低い」
解決策	3ステップで提示	診断→戦略設計→実行支援
実績	数値+ロゴ	「導入企業100社」「平均CVR+2.3倍」
料金	3プラン提示	ライト/スタンダード/エンタープライズ
CTA	無料相談	「30分の無料診断はこちら」
FAQ	導入不安の解消	契約期間・解約条件・サポート体制

② EC・物販

セクション	狙い	具体例
FV	商品ビジュアル+価格	大きな商品写真+「本日限定 30%OFF」
共感・悩み	使用シーン提示	「肌荒れに悩む30代女性へ」
商品特徴	3〜5の差別化	成分・製法・産地・受賞歴
お客様の声	顔写真+レビュー	★★★★★ レビュー5件+写真
使い方	3ステップ図解	朝→夜→週1スペシャルケア
料金・特典	限定オファー	「初回50%OFF+送料無料+返金保証」
CTA	カートへ	「今すぐ購入する」（ボタン×複数配置）
FAQ	配送・返品	配送日数・返品ポリシー・支払方法

③ 予約・来店系（クリニック / サロン / 飲食 / 教室）

セクション	狙い	具体例
FV	店舗写真+一言訴求	清潔感ある店内+「駅徒歩3分の隠れ家サロン」
サービス紹介	メニュー表示	カット¥4,500 / カラー¥7,800
こだわり	3つの強み	使用商材・施術技術・空間演出
スタッフ紹介	顔写真+経歴	指名予約への導線
お客様の声	before/after	施術前後の写真+コメント
アクセス	地図+営業時間	Googleマップ埋込+営業時間表
CTA	予約フォーム	「LINEで予約」「電話で予約」併記
FAQ	初回不安の解消	所要時間・キャンセルポリシー・駐車場

💬 Claude Code への指示テンプレ

業種：[サービス業/EC/予約系]
ターゲット：[年齢/性別/職業/悩み]
最終CV：[無料相談/購入/予約]
強み3つ：[強み1][強み2][強み3]
トーン：[専門的/親しみやすい/高級感]

上記を踏まえて、添付の「業種別LPテンプレ」をベースに
1ページのLP（HTML+CSS）を作ってください。

✏️ MINI QUIZ

LP制作で「最優先で決めるべき」のはどれでしょう？

A使うフォント
B背景の画像素材
Cターゲット（誰に売るか）と最終ゴール（CTA）

✅ 正解！「誰に、何を、どうしてほしいか」が決まらないと、綺麗なLPでも成果が出ません。

💡 30秒で復習

LPの黄金構成は「FV（ファーストビュー）→ 共感 → 問題提起 → 解決策 → 実績 → CTA → FAQ → 最終CTA」。FVで3秒以内に「誰に・何を・どう変わる」を伝える。

4.6 実制作 — Claude Code で LP を作る

⏱ 所要: 約150分 🛠 形式: 実践ハンズオン 🔰 前提: 3.5 の指示書

🎯 このレッスンの到達目標

Claude Code と対話しながら、1本の LP を完成させる
修正・改善を対話で重ねる反復サイクルを身につける
困ったときの対処法を身につける

STEP 1: プロジェクト準備

mkdir ~/projects/my-lp
cd ~/projects/my-lp
claude

# Claude 起動後、最初に CLAUDE.md を作る
> このフォルダに CLAUDE.md を作ってください。
  （3.5 の構成指示書の内容）

STEP 2: 初稿を一気に作らせる

CLAUDE.md に書いた構成指示書に基づいて、
index.html と style.css の2ファイルで
LP一式を作ってください。

条件:
- HTML5 + モダンCSS（Flex/Grid活用）
- スマホ幅 375px まで対応
- 画像はダミー（unsplash や placehold.co のURL）
- フォームは見た目のみ（送信機能なし）
- JSは使わない方針

まず構成を説明してから実装してください。
OKを出したら進めて。

STEP 3: ブラウザで確認

> index.html を open でブラウザで開いて

あるいはターミナルで:

open index.html
# または軽量サーバーを立てる
python3 -m http.server 8080
# → http://localhost:8080 で確認

STEP 4: 対話で磨く（このサイクルを5〜10回繰り返す）

🔄 よくある磨き指示（効果の出やすい順）

1. ヒーローを最重要視
「ヒーローの高さを画面の90%に」「タイトルをもっと大きく 60px に」「CTAボタンを目立つオレンジに」

2. 余白の統一
「全セクションの上下余白を 80px に統一」「カード内の padding を 32px に」

3. リズムを作る
「セクションごとに背景色を交互に変えて（白 → ベージュ → 白）」

4. 視線誘導
「中央寄せじゃなく、左揃えで数字を強調」「3カラムの真ん中だけ少し大きくして主役感を」

5. ディテール
「ボタンにホバーでシャドウが付くアニメ」「スクロールで各セクションがふわっと出る」

STEP 5: 細部の調整

完成度を上げるために、細部の指示も効果的:

以下を調整してください:
1. セクションタイトルの下に 3px の下線、色はメインカラー
2. 箇条書きのポイントに ✓ アイコン
3. 画像に border-radius: 12px + 影
4. フォーム入力欄の focus 時は枠が緑に光る
5. ページ最下部に「トップへ戻る」ボタンを固定表示

⚠️ つまずきポイントと対処

Q. 修正を重ねてレイアウトが崩れた
A. 「さっきの状態に戻して」または Module 6 で学ぶ git で戻す

Q. 何が違うか言語化できない
A. 参考にしたい LP の URL を Claude に見せる「このサイト見て。この雰囲気にしてほしい」

Q. 画像素材がない
A. Claude に「Unsplash の無料画像 URL を使って組み込んで」と頼む

✅ 初稿完成チェック

8セクション全て実装されている
ヒーローで3秒以内に「何のページか」分かる
CTAボタンが目立つ色と配置になっている
ブランドトーンに沿ったデザイン
見出し・本文・余白のリズムが整っている

✏️ MINI QUIZ

LP制作で「修正を重ねてレイアウトが崩れてしまった」とき、最初に試すべきは？

AClaude を終了してやり直す
B「さっきの状態に戻して」「全体の統一感を整えて」と対話で戻す
CCSS を全部自分で書き直す

✅ 正解！ Claude との対話で戻せます。根本的には git で版管理しておくと安全（Module 7 で詳述）。

💡 30秒で復習

Claude Codeに「業種・ターゲット・CV・トーン」を伝えてLPを一気通貫で生成。生成後はFV画像、コピー、CTA文言、配色を1つずつ磨いて完成度を上げる。

4.7 レスポンシブ対応 — スマホで崩れないLPに

⏱ 所要: 約45分 📱 形式: 実習 🔰 前提: 3.6 完了

🎯 このレッスンの到達目標

レスポンシブデザインの必要性を理解する
ブラウザのデベロッパーツールで確認できる
Claude に「スマホで崩れている」と具体的に指摘できる

📊 2026年のモバイル比率

・LP 閲覧者の 約75%がスマホ（広告流入の場合は85%超え）
・Google検索は「モバイルファーストインデックス」。スマホ版で評価される
・スマホで崩れている LP は、PC で綺麗でも CVR 半減

確認すべき3つの画面幅

デバイス	幅	優先度
iPhone SE / iPhone mini	375px	最重要（最小基準）
iPhone 15 Pro / Plus	390〜430px	高
iPad mini / Pro（縦）	768〜820px	中
PC（通常）	1280〜1920px	高

デベロッパーツールで確認（Chrome / Safari / Firefox 共通）

ブラウザで LP を開く
右クリック → 「検証」
左上のデバイス切替アイコン（📱）をクリック
上部の「レスポンシブ」「iPhone SE」等でサイズ切替
ドラッグでリアルタイムに幅を変えながら確認

スマホで頻発する問題と対処

🚨 横スクロールが発生

画像や要素が画面幅を超えている。
対策: Claude に「横スクロールが発生しないように img と section に max-width: 100% 適用」

🚨 文字が小さすぎる

PC サイズそのままだと読めない。
対策: 「スマホでは見出し 28px、本文 16px に」

🚨 ナビが横に並びきらない

メニュー項目が折り返して醜い。
対策: 「スマホではハンバーガーメニューに変換」

🚨 3カラムが窮屈

カードが縦長になる。
対策: 「スマホでは1カラムに縦並び」

Claude への修正依頼（1発で伝わる形）

スマホ表示（375px）で確認したら、以下の問題があります。
修正してください:

1. ヒーローのタイトルが画面からはみ出している
   → 55px → 32px にサイズ落として、line-height 調整
2. 「選ばれる3つの理由」が3カラムのまま
   → 768px 未満では1カラム縦並びに
3. CTAボタンのフォントが小さすぎる
   → スマホでは 18px に
4. ヘッダーのメニューが折り返して2行
   → 768px 未満ではハンバーガーメニューに
5. 画像が画面からはみ出している箇所がある
   → すべての img に max-width: 100% を適用

修正後、PC（1280px）とスマホ（375px）の
両方で崩れていないか確認してから報告して。

💡 メディアクエリとは

CSSで「画面幅が◯◯px 以下ならこのスタイル」と切り替える仕組み（@media）。細かい書き方は覚えなくてもOK。「レスポンシブにして」と Claude に伝えれば自動で実装してくれます。

✏️ MINI QUIZ

LPのレスポンシブ確認で、最低限必ずチェックすべき画面幅は？

A1920px（4Kモニタ）だけ
B375px（スマホ最小）/ 768px（タブレット）/ 1280px（PC）の3サイズ
C自分の PC のブラウザ幅だけ

✅ 正解！特に 375px で崩れないことが最優先。広告から流入するユーザーの大半がこのサイズ帯です。

💡 30秒で復習

スマホ流入が7割超のため、レスポンシブ対応は必須。@media (max-width: 768px) でブレークポイント設定、フォント・余白・画像サイズをモバイルファーストで設計。

4.8 SEO とパフォーマンス — 見つけられるLPへ

⏱ 所要: 約30分 🔍 形式: 読み物 + 実装 🔰 前提: 3.7

🎯 このレッスンの到達目標

最低限の SEO 対策を実装できる
表示速度を測定・改善できる
OGP でSNSシェア時の見え方をコントロールできる

最低限のSEO — メタタグの3点セット

<head>
  <title>モカの木 | 赤坂の隠れ家カフェ｜スペシャルティコーヒー</title>
  <meta name="description" content="赤坂駅徒歩3分。店内焙煎のスペシャルティコーヒーが楽しめる、静かな隠れ家カフェ。平日昼のランチ需要に対応。">
  <meta name="keywords" content="赤坂 カフェ, スペシャルティコーヒー, 焙煎">

  <!-- OGP（SNSシェア時の見え方） -->
  <meta property="og:title" content="モカの木 | 赤坂の隠れ家カフェ">
  <meta property="og:description" content="...">
  <meta property="og:image" content="https://example.com/og-image.jpg">
  <meta property="og:type" content="website">

  <!-- ファビコン -->
  <link rel="icon" href="favicon.svg">
</head>

押さえるべき6項目

📄 1. title タグ

検索結果の青い見出し。30〜60文字、メインキーワード前半に。

📝 2. description

検索結果の説明文。120〜160文字、クリックしたくなる内容。

🏷 3. 見出しタグ (h1-h6)

h1 は1ページ1つ。h2→h3 の順序を守る。キーワード自然に含める。

🖼 4. 画像の alt / サイズ

全画像に alt。WebP 形式で軽量化。width/height 指定でレイアウトシフト防止。

🔗 5. OGP（SNSシェア）

X / Facebook / LINE でシェア時のカード表示を制御。画像は 1200x630 推奨。

⚡ 6. ページ速度

Core Web Vitals 指標（LCP / FID / CLS）。3秒以内の表示が目標。

Claude に一括対応させる

このLPに以下のSEO / パフォーマンス改善を加えてください:

1. メタタグ: title / description / keywords 追加
2. OGP: og:title / og:description / og:image 追加
   og:image は assets/og-image.jpg を参照
3. ファビコン: assets/favicon.svg を参照
4. 画像: すべてに alt と width/height 指定
5. スクリプト: defer or async 属性を付けて描画をブロックしない
6. CSS: クリティカル CSS は inline 化、残りは外部ファイル
7. フォント: preconnect で先読み

最後に、Google PageSpeed Insights で改善点があれば教えて。

表示速度の測定

Google PageSpeed Insights: pagespeed.web.dev — URLを入れるだけでスコア表示
目標スコア: モバイル 70点以上、PC 90点以上
Lighthouse: Chromeのデベロッパーツール内蔵の測定機能

💡 Core Web Vitals の3指標

LCP (Largest Contentful Paint): メインコンテンツの表示速度。2.5秒以内が良好
INP (Interaction to Next Paint): 操作への反応速度。200ms 以内
CLS (Cumulative Layout Shift): レイアウトのずれ。0.1 以下
Claude に「これらを改善して」と伝えれば具体的な対処を提案してくれます。

✏️ MINI QUIZ

LP を X（Twitter）でシェアしたときに、画像付きのカードで表示されるようにするには？

A画像を多く貼れば自動で表示される
Bog:title / og:description / og:image の OGP メタタグを設定する
C有料プランに登録する必要がある

✅ 正解！ OGP タグがあれば SNS のカード表示が綺麗になり、クリック率が2〜3倍になるケースも。

💡 30秒で復習

SEOはtitle/description/h1/構造化データの基本4点セット。パフォーマンスは画像WebP化・遅延読込・CSS/JS最小化でLighthouse 90点以上を目指す。

4.9 公開とシェア — 世界中からアクセス可能に

⏱ 所要: 約40分 🌐 形式: 実習 🔰 前提: 3.8

🎯 このレッスンの到達目標

完成した LP をインターネットに公開できる
URL を発行し、友人・クライアントに共有できる
独自ドメイン設定の基礎を理解する

Vercel で公開する手順（Claude Code に任せる）

このLPを Vercel にデプロイしたいです。

事前条件:
- GitHubアカウントあり
- Vercelアカウントはまだない → 作る手順から案内して

手順を教えてください。自動化できる部分は
あなたが実行してください:

1. git init して、初期コミット
2. GitHubに新規リポジトリ作成（gh CLI 使用）
3. git push でアップロード
4. Vercel に GitHub 連携でインポート
5. 自動デプロイが走って、URLが発行される

ブラウザ認証が必要な場面では、
私に具体的な操作を指示してください。

⚠️ 手動操作が必要な箇所

・GitHub へのログイン（gh auth login 実行 → ブラウザ認証）
・Vercel へのログイン（vercel login 実行 → ブラウザ認証）
→ Claude が手順を案内してくれます。落ち着いて1つずつ。

独自ドメインの設定（任意）

発行される URL は my-lp-abc123.vercel.app のような形。独自ドメインを使いたいなら:

ドメインを購入（お名前.com / Value-Domain / Cloudflare で年 1,000〜3,000円）
Vercel のプロジェクト設定 → Domains でドメイン追加
表示された DNS レコードを、ドメイン会社の管理画面で設定
数分〜数時間で独自ドメインで公開される

公開後のチェックリスト

公開URLをブラウザで開くと LP が表示される
スマホで開いても崩れていない
Google PageSpeed Insights でスコア70点以上
URL を X にシェアすると OGP カードが表示される
友人/家族に見せて感想をもらった

🎓 モジュール3 修了チェック

自分で考えたテーマのLPが完成した
スマホ・PCで崩れずに表示される
インターネットに公開され、URLで共有できる
SEO / OGP の基本設定ができた
Claude Code との対話で迷わず修正できるようになった

🎉 制作編クリア！

あなたは今、「1本のLPを自分で作って世界に公開する」を達成しました。これはもう、プロのフリーランスとして仕事を受けられる入口に立った状態です。
次の Module 5 では、Next.js + Tailwind + microCMS を使った本格的なコーポレートサイト制作に進みます。要件定義から公開・運用まで、実案件そのままのワークフローです。

✏️ FINAL QUIZ

完成したLPを無料で素早く公開し、git push で自動デプロイできるサービスは？

A自宅にサーバーを立てる
BVercel / Netlify / Cloudflare Pages などの静的ホスティング
CUSB メモリで渡す

✅ 正解！ 2026年、個人LPの公開は Vercel か Netlify が定番。無料でプロ品質のインフラが使えます。

💡 30秒で復習

公開はGitHub Pages / Netlify / Vercel が無料で爆速。独自ドメインはお名前.com等で取得→DNS設定。公開後はSearch Console・GA4・SNSシェアで流入導線を作る。

Module 4 : LP制作入門

4.1 HP と LP の違い — どちらを作るべきか

🎯 このレッスンの到達目標

🏢 HP (Homepage)

🎯 LP (Landing Page)

典型的なLPの8セクション構成（王道パターン）

LPの成果は「最初の3秒」で8割決まる

4.2 Web の仕組み — HTML / CSS / JS の役割分担

🎯 このレッスンの到達目標

例え：Web ページは「家」

🏗 HTML = 骨組み

🎨 CSS = 内装・外観

⚡ JavaScript = 電気・設備

🖼 画像・動画 = 家具

ブラウザが表示する流れ

実際のフォルダ構成例（LP 1本分）

4.3 HTML の基礎 — 最低限これだけ

🎯 このレッスンの到達目標

最小の HTML ファイル

覚えるべき12タグ

📝 文章の構造

🔗 参照系

🎛 インタラクション

🏗 レイアウト

属性（attribute）も覚えておく

Claude Code への実践指示

4.4 CSS の基礎 — 見た目を操る

🎯 このレッスンの到達目標

CSS の基本構文

4大カテゴリで押さえる

🎨 ① 色（Color / Background）

📏 ② 余白（Margin / Padding）

🔠 ③ フォント

📐 ④ レイアウト

Flexbox と Grid（現代レイアウトの2トップ）

📦 Flexbox（一方向の並び）

🎯 Grid（二次元レイアウト）

良いディレクション指示の例

よく使うCSSチートシート

4.5 LP の構成設計 — 企画が全て

🎯 このレッスンの到達目標

最低限決めておきたい7項目

構成指示書テンプレート（そのまま Claude に渡せる）

構成案を Claude Code に壁打ちしてもらう

業種別LPテンプレート 3パターン

① サービス業（コンサル / 士業 / SaaS）

② EC・物販

③ 予約・来店系（クリニック / サロン / 飲食 / 教室）

4.6 実制作 — Claude Code で LP を作る

🎯 このレッスンの到達目標

STEP 1: プロジェクト準備

STEP 2: 初稿を一気に作らせる

STEP 3: ブラウザで確認

STEP 4: 対話で磨く（このサイクルを5〜10回繰り返す）

STEP 5: 細部の調整

✅ 初稿完成チェック

4.7 レスポンシブ対応 — スマホで崩れないLPに

🎯 このレッスンの到達目標

確認すべき3つの画面幅

デベロッパーツールで確認（Chrome / Safari / Firefox 共通）

スマホで頻発する問題と対処

🚨 横スクロールが発生

🚨 文字が小さすぎる

🚨 ナビが横に並びきらない

🚨 3カラムが窮屈

Claude への修正依頼（1発で伝わる形）

4.8 SEO とパフォーマンス — 見つけられるLPへ

🎯 このレッスンの到達目標

最低限のSEO — メタタグの3点セット

押さえるべき6項目

📄 1. title タグ

📝 2. description

🏷 3. 見出しタグ (h1-h6)

🖼 4. 画像の alt / サイズ

🔗 5. OGP（SNSシェア）

⚡ 6. ページ速度

Claude に一括対応させる

表示速度の測定

4.9 公開とシェア — 世界中からアクセス可能に

🎯 このレッスンの到達目標