複数のClaudeCodeサブエージェントを組み合わせ、ランディングページを作ってみよう

「このままコーダーで、3年後も食べていけるだろうか？」
AIが進化するほど、手を動かすだけの作業者の単価は下がり続けます。これからのWeb制作で生き残るのは、AIに指示を出す「司令塔」側に回った人だけです。

14日間で「作業者」から「AI Webディレクター」へ転身する集中プラン『10倍速 AIワークフロー マスタープラン』を公開中です。プロの個別メンタリング＆8日間の全額返金保証付き。

（先着限定、6月21日まで）

» 「司令塔」側に回る14日間プランを見る

前回の記事で、要件定義をアシストするサブエージェント（requirements-organizer）を作り、こもれびcafeの 要件定義書（requirements.md）を仕上げました。 今回は、その担当者に仲間を加えて「チーム」を作り、カフェ紹介のシングルページ（ランディングページ）を実際に完成させるところまで体験します。

Claude Codeがそのまま HTML/CSS を書いてコーディングまで進めます。ブラウザで表示できるページを完成させながら、ClaudeCodeのサブエージェント活用方法のイメージをつかんでいきましょう！

• 今回作成するサブエージェント・作業のイメージ
• 作るチームの全体像
• 素材について
• 必要なエージェント3体を追加する
• チームを動かしてLPを完成させる
• 進め方：1工程ずつ「確認しながら」進める
• 構成設計：ページの「骨組み」ができる
• コピー：骨組みに「言葉」が入る
• コーディング：ブラウザで見える形になる
• 仕上げを整える
• ① もっと「やわらかい」雰囲気にする
• ② ページ内を移動できるナビを足す
• チームは、自分の仕事に合わせて組み替えられる
• 公式スキル frontend-design を使う手も
• まとめ

今回作成するサブエージェント・作業のイメージ

作るチームの全体像

今回のチームは、4つの工程を専門担当が順番にこなすリレー方式です。
①の要件定義は前回すでに完成しているので、今回新しく作るのは②〜④の3体です。

ポイントは、前の工程の成果物（ファイル）が、次の工程の入力になること。
バトンを渡すように requirements.md → structure.md → copy.md → index.html とつながっていきます。

エージェント同士は直接やりとりしません

サブエージェントはそれぞれ独立した作業スペースで動くため、担当同士が直接バトンを渡すことはできません。間に立つのが司令塔＝メインのClaude Codeです。「構成担当の結果を、コピー担当に渡す」という受け渡しを、司令塔が自動でこなします。
私たちは司令塔に一言頼むだけでOKです。

デザインはどうするの？

今回、Figmaなどのデザインツールは使いません。
セクション数の少ないペライチLPなら、デザインカンプを別に作るより、コードを直接つくってブラウザで見ながら直すほうが速く、修正も実物ですぐ確認できます（カンプと実装のズレも出ません）。

なお、複数人で作り込む大規模サイトや、緻密なデザインが必要な案件ではデザインツールの需要は今でももちろんあります。
今回のような案件の場合は、小規模・短納期だから省ける、という位置づけです。

素材について

今回使用する素材をご用意しています。

• 前回エージェントと固めた想定の要件定義書：requirements.md
• 今回使用するエージェント：agentフォルダ内

こちらをご活用いただくと、LPを作るフローだけ即試してみることができます。

素材ダウンロードはこちら

必要なエージェント3体を追加する

作り方は前回とまったく同じなので、ここでは各担当の要点だけまとめます。

ターミナルからエージェントを作成する場合

前回同様にターミナルから/agentsコマンドを使ってClaudeCodeにエージェントを作成してもらう場合は、以下のように役割を伝えます。そのあとの選択画面で設定するツールやモデルも、基本的に前回と同じ設定で良いです。

上の表のとおり、コーディング担当は 権限でExecution（実行） も入れると良いです。コーディング担当だけ権限を多めにしているのは、ファイルの作成・修正に加えて、動作確認でコマンドを使うことがあるためです。

【構成担当（lp-architect）を作成時】

LPの構成設計を担当するエージェントです。
requirements.md を読み込んで、LPのページ構成（セクションの順序・各セクションの見出し・載せる情報・CTAの配置）を設計してください。
「本当の課題」と「コアメッセージ」を軸に、訪問者の心の流れに沿って並べます。
出力はマークダウンで structure.md として保存してください。

【文章担当（lp-copywriter）を作成時】

LPのコピー（文章）を担当するエージェントです。
structure.md と requirements.md を読み込んで、各セクションのキャッチ・リード・説明文・CTAテキストを書いてください。コアメッセージとトーンを必ず守り、ターゲットに刺さる言葉で、行動を促す文章にしてください。
出力は copy.md として保存してください。

【コーディング担当（lp-coder）を作成時】

LPのHTML/CSSコーディングを担当するエージェントです。
structure.md・copy.md・requirements.md を読み込んで、レスポンシブ対応のペライチLPを作ってください。index.html 1枚にまとめ、CSSは <style> 内に書きます。
画像はまだ無いのでプレースホルダーを置いてください。
完成したら index.html として保存してください。

手で書く・素材を入れる方法でもOK

エージェントは /agents から作るほかに、自分で .md ファイルを作って .claude/agents/ に置く方法でも使えます。
この場合はClaude Codeの再起動が必要な点にだけ注意してください。

3体ぶんを書くのが大変なら、配布している見本ファイルにあるエージェント設定ファイル（lp-architect.md / lp-copywriter.md / lp-coder.md）をそのまま .claude/agents/ に入れてもOKです。

チームを動かしてLPを完成させる

3体そろったら、いよいよチームを動かします。
ここからが本番。各工程がどう進むかを順番に見ていきましょう。

進め方：1工程ずつ「確認しながら」進める

「全部まとめてお願い」と一言で最後まで走らせることもできますが、今回は1工程ずつ呼んで、出てきたファイルを確認してから次へ進めます。

LP制作は、前の工程のズレが後の工程にそのまま効いてきます。
節目で確認すれば、早い段階で軌道修正できるので手堅いです。

なお、この「節目の確認」を挟んでも、サブエージェントのうまみ（重い作業を任せられる／役割ごとに権限を絞れる／文脈が分離される）はそのまま残ります。なくなるのはノールックで一気通貫の部分だけです。

それでは、前回確定した requirements.md をプロジェクトフォルダに置いた状態で始めましょう。

構成設計：ページの「骨組み」ができる

まず、構成設計担当を呼びます。

requirements.md をもとに、lp-architect に LPのセクション構成を設計し、設計内容を出力してください。

司令塔が lp-architect を呼び出します。
途中でファイルへのアクセス許可を求められたら 1（許可）を選んで進めてください。

サブエージェントがファイルを読み、どのセクションを・どんな順番で並べるかを設計してくれます。
少し待っていると、structure.mdが出力されます。

ここで決まるのは、いわば家でいう間取り図。
「本当の課題（はじめての人が入りづらい）」を解消する流れになっているのがポイントです。

📄 出力された structure.md の例を見る （部分抜粋）▾

# こもれびcafe LP 構成設計

## 全体方針

- ターゲット：店の近くに住む・働く 30〜40代の女性。一人でゆっくり過ごせる時間・場所を探している層
- 本当の課題：はじめての人が「一人で入っていい店か」「自分が浮かないか」分からず、来店の最初の一歩を踏み出せない。このLPで"心理的ハードル"を取り除き、ふらっと来てもらうきっかけをつくる。
- コアメッセージ：「一人で、ふらっと。こもれびの中で、自分の時間を。」
- 主CTA：地図を見る（Googleマップへのリンク）
- 副CTA：Instagramをフォローする（@shdemo_komorebicafe）
- 補助CTA：電話・LINEで予約する（予約したい人向け）

---

## セクション構成

### Section 1 — ファーストビュー

- 目的：「自分のための場所かもしれない」と直感してもらう。コアメッセージと主CTAをページ上部で完結させる。
- 見出し案：
  - H1：「一人で、ふらっと。こもれびの中で、自分の時間を。」
  - サブコピー：「窓から緑が見える、木のぬくもりのカフェ。みどり台駅から徒歩5分。」
- 載せる情報：
  - 店名ロゴ（支給あり）
  - 店内・窓辺の雰囲気が伝わるメインビジュアル（全幅）
    ※写真は後日支給。制作中はプレースホルダー（店内・窓辺イメージ）で対応
  - 営業時間：11:00〜18:00（定休日：水曜）をコンパクトに表示
- CTA：「地図を見る」ボタン（Googleマップ、主CTA）
- 備考・デザインメモ：
  - スマホ表示でボタンが親指の届く範囲（画面下寄り）に来るレイアウトを優先
  - ビジュアルは縦長（スマホ全画面）を基本。PCでは左テキスト・右画像の2カラム構成も検討
  - トーンは「いつでもどうぞ」の空気感。「来てください」的な押しつけ感を出さない

---

### Section 2 — こんな時間を過ごせます（共感・情景提示）

- 目的：「一人で入っていいか分からない」不安を、具体的な過ごし方の描写で解消する。訪問者が自分を重ねられるシーンを見せる。
- 見出し案：
  - H2：「一人のための、ちょうどいい場所」
  - または：「窓辺の席で、コーヒーと、ひとり時間。」
- 載せる情報：
  - 過ごし方を3〜4つのショートコピーで並列表示（アイコンまたは小見出し＋2〜3行の文章）
    - 例1：「窓から緑が見える席で」― 木のぬくもりの内装、やわらかい光と植物
    - 例2：「BGMはジャズ。静かに流れる音の中で」― 会話が少なくても気にならない空気感
    - 例3：「ランチ1時間も、読書の3時間も」― 一人で来ても自然な、居場所としての安心感
    - 例4：「手作りスイーツと、お気に入りのひと口を」― 毎日変わる3〜4種類
  - 窓辺・内観の写真（1〜2枚）
    ※写真後日支給。プレースホルダーで対応
- CTA：なし（この時点では感情を育てる段階。ボタンは置かない）
- 備考・デザインメモ：
  - 「一人歓迎」を前面に出しつつ、グループ客を排除する表現にしない（雰囲気で伝える）
  - カラーはベージュ・白ベース。緑の差し色でナチュラル感を演出

---

以下略

出てきた構成を確認して、必要なら直す

ここで一度、structure.md に目を通します。
「各要素の順番はこれでいい？」「抜けはない？」を見るだけでもOK。
気になる箇所があれば、メインのClaudeにそのまま言葉で相談し、修正していきましょう。ここは前回やった会話のラリーと同じ要領です。

このように、気になった所だけ会話で直せるのが、節目で確認するよさです。
納得できるページ構成ができたら、次のコピー担当に進みましょう。

コピー：骨組みに「言葉」が入る

表現や言葉のトーンを更に底上げするために文章を練り上げていきましょう。
structure.mdを次の文章作成エージェント（lp-copywriter）に渡します。

structure.md と requirements.md をもとに、lp-copywriter に各セクションの文章を書いてもらってください。

エージェントがstructure.md と requirements.md を読み、各セクションの実際の文章を copy.md に書きおこしてくれます。

📄 出力された copy.md の例を見る（部分抜粋） ▾

# こもれびcafe LP コピー（確定版）

> lp-coder への引き渡し用。各セクションの全文字列を確定させた版。
> 事実情報はすべて requirements.md に基づく。ダミー表記はそのまま反映。

---

## Section 1 — ファーストビュー

### 見出し（H1）
一人で、ふらっと。こもれびの中で、自分の時間を。

### サブコピー
窓から緑が見える、木のぬくもりのカフェ。みどり台駅から徒歩5分。

### 営業情報（コンパクト表示）
営業時間 11:00〜18:00（ラストオーダー 17:30）　定休日：水曜

### CTAボタン
地図を見る

---

## Section 2 — こんな時間を過ごせます

### 見出し（H2）
一人のための、ちょうどいい場所。

### リード文
気を遣わなくていい。急がなくていい。
ここは、自分のペースでいられる場所です。

### ショートコピー 1
#### 小見出し（H3）
窓から緑が見える席で

#### 本文
木のぬくもりのある内装と、窓の外にそっと広がる緑。やわらかい光の中に、自然と気持ちがほどけていきます。

---

～　以下略　～

copy.md にも一度目を通し、言い回しやトーンが気になればメインのClaudeに調整を頼みます。
直したいけれど思いつかない…という場合は、下記のように「候補を〇個出して」とお願いするのもおすすめです。

文言はクライアントからの調整も多い箇所なので、一字一句にまでこだわる必要はありません。

コーディング：ブラウザで見える形になる

最後に、コーディング担当を呼びます。

requirements.md・structure.md・copy.md をもとに、lp-coder に index.html を作ってもらってください。

lp-coder は3つのファイル（requirements.md・structure.md・copy.md）をすべて読み、HTML/CSSのLP（index.html）を作成します。構成・文章・雰囲気（ナチュラル、緑・ベージュ・白）が、ここで1枚のページに組み上がります。

しばらくすると、完了の連絡が来ます。
プロジェクトフォルダに index.html ができているはずです。

ブラウザで確認してみよう

作成されたindex.htmlをブラウザで表示して、仕上がりを確認しましょう。
ファイルを右クリック →「ブラウザで開く」でプレビューできます。

LPがブラウザに表示され、ここまでエージェントを活用して決めた内容が反映されていたら初回としては成功です。

仕上げを整える

ここまでで「ブラウザで動くLP」はできました。ただ、最初の出力はあくまでたたき台。
土台はしっかりしていますが、雰囲気や使い勝手は、ここから対話で整えていきます。

細かいところを上げるとキリがありませんが… 以下では実際に表示してみて気になった、大きな２つのポイントを直してみます。
どちらもFigmaなどのデザインツールは使わず、メインのClaudeにそのまま言葉で頼むだけで直せます。

① もっと「やわらかい」雰囲気にする

整ってはいるけれど、少し直線的で硬い印象。
角を丸く、影をやわらかく、書体にも丸みを足して、ナチュラルな空気感に寄せます。

全体の印象を、もっとやわらかくしてください。
- 角丸を大きめに、影はぼかして淡く、余白も広めに
- 見出しに少し丸みのある書体（Google Fonts の Zen Maru Gothic など）を使う
- ベージュと白の境目をくっきり分けず、ゆるくつなげる
- 木漏れ日や葉っぱのさりげない装飾を、邪魔にならない程度に添える

② ページ内を移動できるナビを足す

セクションが多いので、上部に追従するヘッダーナビを付けて、見たい場所へすぐ飛べるようにします。

上部に追従するシンプルなヘッダーを足してください。
ページ内リンクで「メニュー / 雰囲気 / 店舗情報 / アクセス / ご予約」へスクロールで移動
アンカーナビにして、主CTA「地図を見る」もヘッダーに常駐させてください。
スマホでは折りたたみ（ハンバーガー）か省略表示でOKです。

それ以外にも「ここのマージンを広く」「見出しのサイズを～にして」「スマホでメニューが崩れる」など、気になったところをそのまま伝えれば直してくれます。

写真がそろったら、プレースホルダーを差し替えるだけでOK。
写真・素材画像が無い部分については「イメージ画像を生成するプロンプトを作って」などのお願いをするのも良いですね。ClaudeもSVGを作ってくれますが、デザインに素材探し・素材作りをしたほうがクオリティが上がることも多いです。

チームは、自分の仕事に合わせて組み替えられる

今回は最小構成として「要件定義 → 構成 → コピー → コーディング」の4工程で行いました。

ClaudeCodeのサブエージェントでチームの形に決まりはありません。
担当を足す・減らす・順番を変えるのは自由です。たとえば「企画書づくり → Notion登録 → Slack通知」「コードレビュー → テスト → デプロイ確認」のように、自分の作業フローをそのまま担当に分けるだけ。

担当を足すと、初回の精度が上がる（例：デザイン設計担当）

今回は、出来上がったLPにあとから「やわらかさ」と「ナビ」を足しました。
毎回これをやるのが手間なら、コーディングの前にデザイン設計担当を1体はさむ手があります。

• 役割：配色・余白・書体・トーン・ナビ方針などを先に決めて、design.md にまとめる
• 効果：lp-coder がそれを読んでから実装するので、初回の index.html が最初から狙いに近づき、仕上げの手間が減る

チームは一度作って終わりではありません。
回しながら担当を足したり、それぞれのエージェントファイルの指示を調整したりして、使うほど自分の仕事に馴染むように育てていけます。

公式スキル frontend-design を使う手も

デザインの質感づくりは、Anthropic公式の frontend-design スキルに任せる方法もあります。
ただしこれは最初から使える組み込みスキルではなく、Claude Skillsの利用方法で紹介した「公式Skill」です。使う前に導入（追加）が必要なので、使用してみたい方は上記記事をご確認ください。

まとめ

この記事では、3体のサブエージェントを加えてチームを作り、前回の requirements.md からブラウザで見られるカフェLPの完成まで通しでやりました。

• 要件定義（前回）→ 構成 → コピー → コーディングの4工程を、担当が順番にこなす
• 前の工程のファイルが、次の工程の入力になる（requirements → structure → copy → index）
• 司令塔はメインのClaude Code。担当同士の受け渡しを自動でこなしてくれる
• Figmaなし・コードだけでデザイン〜実装まで完結できる
• 各担当の tools を役割に合わせて絞ると、安全で見通しが良い

要件定義（記事11）からLPの完成まで、サブエージェントのチームで通して作れました。
次はあなたの案件で、自分だけのチームを組んでみてください。

エージェントに任せるべき要件がわからない、AIとチャットでどのように詰めていけばよいのかわからない・上手くいかない…という方は、以下のご受講もおすすめです。
「AIと会話のラリー」を中心に、イメージを形にしていく手法をより詳しく解説しています。

Claude Code × AIデザイン
次世代Web制作ワークフロー

GPTやGeminiでデザインを生成し、Claude Codeに「指示」を出して一気に実装から公開まで持っていく。
「AI時代のモダンな開発ワークフロー」と「新しい学び方」を14日で習得します。プロの個別メンタリング付きで、絶対に迷わせません。

吉田 光利

Skillhub代表 & Edbase代表

教育者&起業家です。今は教育テック系のSkillhubとEdbase（エドベース）という会社をやっています。強みはビジネス構築からデザイン、プログラミング、サーバー構築までひと通できることです。著書に「起業のWeb技術」日本実業出版社があります。