Claude Code だけで企業向けLPを2時間で作った実装ログ — Figma不要・画像生成・API連携まで全部

「企業向けLPを作りたいが、デザイナーもエンジニアも空いていない」— そんなとき、Claude Code だけで2時間で完成 することは可能です。

実際に DigiRise が「claudecode.digirise.ai」(本サイト) を構築した時の実装ログを、所要時間と使ったプロンプト付きで公開します。

0. 完成物の仕様

完成した LP の機能:

機能一覧:

• ✅ レスポンシブ対応 (モバイル / タブレット / デスクトップ)
• ✅ Googleフォーム連携 (お問い合わせ)
• ✅ X / YouTube / Note API で情報を自動更新
• ✅ クライアントロゴ カルーセル
• ✅ FAQ アコーディオン
• ✅ Vercel デプロイ + 自動 CI/CD
• ✅ JSON-LD 構造化データ
• ✅ OGP / Twitter Card

「完全Claude Codeだけで企業向けLPを作成。 ・所要時間 約2時間 ・Figmaなどのデザインツール無し ・画像生成も全部Claude Code内で完結 ・Googleフォーム連携済み ・X / YouTube / Note APIで情報を自動更新 ・カルーセル表示・スクロール型・ロゴ配置までフル対応」— @masahirochaen (240,288 impressions)

1. 全体フロー (2時間の内訳)

2. 各ステップの実例

① 構成設計のプロンプト

あなたは B2B SaaS の LP 制作専門デザイナーです。
以下の条件で、ファーストビュー〜CTAまでのLP構成を提案してください。

【サービス】Claude Code 法人導入支援
【ターゲット】中小・大企業の経営層、情シス、各部門マネージャー
【トンマナ】信頼感・実績重視、過剰な誇張は避ける
【デザイン】白背景 + オレンジアクセント、Apple/Stripeのような上品さ
【セクション数】8-10個
【参考】https://claude.ai (Anthropic公式)

各セクションの目的・構成要素・想定文字量を出してください。

→ 約3分で詳細な構成案が出力。

② HTML/CSS 生成のプロンプト

構成 #1 のヒーローセクションを実装してください。

【要件】
- セマンティックHTML (h1, section, nav)
- インラインCSS (1ファイル完結)
- レスポンシブ (モバイル: 縦並び、デスクトップ: 横2カラム)
- 600-800px 幅で最適表示
- アニメーション: フェードイン (Intersection Observer)

【ヒーロー要素】
- タグ: 「DigiRise × Claude Code — 限定数社で対応」
- 見出し: 「Claude Codeで AI駆動経営を実現。」
- 説明文: 〜
- CTAボタン: 2つ (資料請求 / サービス詳細)
- 信頼指標: 3つ (実績500社+, 受講4万名+, 登壇多数)
- ヒーロー画像: 右側 (画像は後で差し替え)

→ ~5分で実装、その場で Preview で確認しながら微調整。

③ 画像生成のプロンプト

ヒーロー画像を gpt-image-2 で生成してください。

プロンプト:
「Modern, professional hero image for Japanese B2B AI consulting LP.
Floating glassmorphic UI cards: Claude Code CLI, Slack notification (議事録),
Before/After bar chart (120h → 9.6h, 92% reduction).
Clean white background with subtle warm orange (#d4622a) accent.
No people, premium SaaS aesthetic, 16:9 aspect ratio.」

サイズ: 1536x1024
品質: high
出力先: public/images/hero.png
生成後: WebP に変換 (cwebp -q 85)

→ 約30秒で画像生成、cwebp で 1.7MB → 104KB に圧縮。

④ API連携のプロンプト

Vercel Serverless Function を作成してください。

エンドポイント: /api/note-latest
機能:
- note.com の masahirochaen ユーザーの最新6記事を RSS で取得
- タイトル / URL / サムネイル / 公開日を JSON で返す
- ISR キャッシュ: s-maxage=600, stale-while-revalidate=86400

注意:
- note の RSS サムネイル URL は <description> 内に埋め込み形式
- 取得失敗時は空配列を返す (UIフォールバック)

→ ~10分で実装、その場で curl テスト。

⑤ Vercel デプロイのプロンプト

このプロジェクトを Vercel に本番デプロイしてください。

要件:
- カスタムドメイン: claudecode.digirise.ai
- セキュリティヘッダー (CSP / HSTS / X-Frame-Options)
- 静的アセットの長期キャッシュ (immutable)
- HTML は no-cache (毎回更新)
- /api/* に CORS 設定
- 既存 .vercel/project.json があれば上書きしないこと

→ vercel.json 自動生成、vercel --prod で公開。

3. なぜ2時間で出来るのか

3つの要因があります:

要因1: Claude が “全部できる”

これまで「HTML はエンジニア、デザインはデザイナー、画像は画像屋、API は別エンジニア」と分業していたものが、Claude 1人で完結します。タスク間の引き渡しコストがゼロ。

要因2: コード品質が高い

Claude が生成するコードは、シニアエンジニアレベルの品質。「動くだけのコード」ではなく、メンテナブル・セキュア・最適化済み のものが出てきます。

要因3: イテレーションが早い

「ここの色をもう少し落ち着かせて」「フォント太字に」のような細かい修正が5秒で反映。デザイナーとのやり取りで2-3日かかっていたものが、その場で完結。

4. 法人で同じことをやるためのヒント

① まずは社内 LP・キャンペーン LP から

外部公開する企業 LP の前に、社内向け LP (採用ページ、社内イベント告知、製品ドキュメント) で練習するのがおすすめ。失敗してもダメージが少なく、Claude Code の感覚が掴めます。

② テンプレート化して再利用

最初の1本を作ったら、他のLPに使い回せるテンプレート に整理しておく。次回からは10倍速で作れます。

③ デザインシステムを Claude に教える

自社のブランドカラー・フォント・トンマナを CLAUDE.md に記載しておくと、毎回そこから一貫したデザインで生成可能。

④ Vercel + GitHub の自動デプロイ環境を整備

main にマージしたら自動デプロイ の仕組みを最初に作っておくと、その後の更新が圧倒的に楽。

5. 注意点

まとめ

Claude Code だけで企業向け LP を2時間で構築するパターン:

1. 構成設計 → Claude に企画書から設計案を出させる
2. HTML/CSS → セクションごとにイテレーション
3. 画像生成 → gpt-image-2 で内製化
4. API連携 → Vercel Serverless で動的データ
5. SEO + デプロイ → 構造化データ + 自動 CI/CD

これは LP に限らず、社内ツール・ダッシュボード・MVP プロダクト にも応用可能。

DigiRise では、このような Claude Code だけで完結する開発手法 を社内エンジニアに伝授する研修を提供しています。詳細は Claude Code 研修ガイド を参照してください。