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

本記事では、DigiRise が実際に「claudecode.digirise.ai」（本サイト）を構築した際の実装ログを、所要時間と使用したプロンプト付きで公開します。Figma・Photoshop・外部デザイナー、すべて不要。エンジニア1人でも数時間で公開レベルのLP（ランディングページ）が作れる時代になりました。

i

本記事のポイント: Claude Code は「コード補完ツール」を超え、LP1本を企画から本番デプロイまで完結させる実用ツールに進化しました。構成設計・コーディング・画像生成・API連携・デプロイまで、すべて1つの環境で完結します。

完成物の仕様と成果

今回構築したLPの実装内容は以下の通りです。

2 時間
総所要時間
¥0
外部ツール費用
100
Lighthouse SEOスコア

実装した機能一覧:

  • ✅ フルレスポンシブ対応（モバイル・タブレット・デスクトップ）
  • ✅ Googleフォーム連携によるお問い合わせ機能
  • ✅ X（旧Twitter）・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)

従来の制作フローでは、デザイナーとの打ち合わせ・修正のやり取り・エンジニアへの引き継ぎなどで数週間かかっていた工程が、Claude Code を使うことで圧縮されました。

全体フローと時間配分（2時間の内訳）

実際の制作フローを時系列で整理します。各ステップの所要時間と作業内容を明確にすることで、再現性の高い手順としてまとめました。

① 構成設計・要件定義（15分）

サービス概要・ターゲット・トンマナ（トーン&マナー）を Claude に伝達し、LP全体の構成案を出力。セクション数・各セクションの目的・必要要素を明確化します。

② HTML/CSS コーディング（40分）

ヒーローセクション・サービス紹介・実績事例・FAQ・CTAなど、各セクションを順次生成。Tailwind CSS は使用せず、純粋なHTML+CSSで実装することで軽量化と保守性を両立しました。

③ 画像生成と最適化（20分）

Claude Code 内で画像生成APIを呼び出し、ヒーロー画像・図解・アイコンを生成。WebP形式への変換と圧縮もスクリプト化して自動実行します。

④ API連携の実装（25分）

Vercel Serverless Functions を使って、X・YouTube・Note の最新投稿を取得するエンドポイントを作成。ISR（Incremental Static Regeneration）でキャッシュ最適化を実施します。

⑤ SEO対策とデプロイ（20分）

JSON-LD・OGP・sitemap.xml・robots.txt を整備し、Vercel に push して本番公開。セキュリティヘッダーも同時に設定します。

各ステップで Claude とのやり取りを記録しておくことで、次回以降の制作時間をさらに短縮できます。

ステップ別の実装詳細とプロンプト例

ここからは、各ステップで実際に使用したプロンプトと、Claude がどのように応答したかを具体的に示します。

① 構成設計フェーズのプロンプト

最初のステップでは、LP全体の骨格を Claude に設計させます。ターゲット・目的・トンマナを明確に伝えることで、精度の高い構成案が得られます。

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

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

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

Claude は約3分で、以下のような構成案を出力しました:

  • ヒーローセクション（キャッチコピー・信頼指標・CTA）
  • 課題提起（従来の開発フローの課題）
  • ソリューション（Claude Code による解決策）
  • 導入事例（具体的な数字と成果）
  • サービス詳細（機能・サポート内容）
  • 料金プラン（明確な価格帯と含まれる内容）
  • FAQ（よくある質問への回答）
  • 最終CTA（資料請求・無料相談）

この構成案をベースに、次のコーディングフェーズへ進みます。

② HTML/CSSコーディングのプロンプト

構成が決まったら、セクションごとにコードを生成します。ここではヒーローセクションの実装例を示します。

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

【技術要件】
- セマンティックHTML（h1, section, nav を適切に使用）
- インラインCSS（1ファイルで完結、外部CSSファイル不要）
- レスポンシブ対応（モバイル: 縦並び、デスクトップ: 横2カラム）
- 最適表示幅: 600-800px
- アニメーション: フェードイン（Intersection Observer API を使用）

【コンテンツ要素】
- タグライン: 「DigiRise × Claude Code — 限定数社で対応中」
- メイン見出し: 「Claude Codeで AI駆動経営を実現。」
- 説明文: 「開発工数を92%削減し、エンジニア不足を解消する法人向け導入支援」
- CTAボタン: 2つ（資料請求・サービス詳細）
- 信頼指標: 3つ（導入実績500社以上、受講者4万名以上、登壇実績多数）
- ヒーロー画像: 右側配置（画像は後で差し替え予定）

Claude は約5分で実装コードを出力。その場で Claude のプレビュー機能で確認しながら、配色・フォントサイズ・余白を微調整しました。

生成されたコードは、以下の点で高品質でした:

  • アクセシビリティを考慮したaria属性の適切な使用
  • SEOを意識したセマンティックなHTML構造
  • パフォーマンスを考慮した最小限のCSS
  • モバイルファーストのレスポンシブ設計

Tailwind CSS を使わなかったのは、CSSの肥大化を避け、保守性を高めるためです。必要な部分だけをカスタムCSSで実装することで、読み込み速度も向上しました。

③ 画像生成フェーズのプロンプト

ヒーロー画像や図解は、Claude Code 内で画像生成APIを呼び出して作成します。外部のデザインツールは不要です。

ヒーロー画像を画像生成APIで作成してください。

【画像生成プロンプト】
「Modern, professional hero image for Japanese B2B AI consulting landing page.
Composition: Floating glassmorphic UI cards showing Claude Code CLI interface,
Slack notification with meeting minutes, and Before/After bar chart
(120 hours → 9.6 hours, 92% time reduction).
Style: Clean white background with subtle warm orange (#d4622a) accent glow.
No people, premium SaaS aesthetic, minimalist design.
Aspect ratio: 16:9」

【生成設定】
- サイズ: 1536×1024px
- 品質: high
- 出力先: public/images/hero.png
- 生成後処理: WebP形式に変換（cwebp -q 85 を使用）

画像は約30秒で生成され、cwebp ツールを使った圧縮処理により、ファイルサイズを 1.7MB から 104KB へ削減（約94%圧縮）しました。

この工程で重要なのは、プロンプトの具体性です。「ビジネス向けのかっこいい画像」ではなく、配色・構成要素・スタイルを明確に指定することで、1発で期待通りの画像が得られます。

④ API連携の実装プロンプト

LP に動的なコンテンツを表示するため、Vercel Serverless Functions を使って外部APIと連携します。ここではNote の最新記事を取得するエンドポイントの実装例を示します。

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

【エンドポイント仕様】
- パス: /api/note-latest
- メソッド: GET

【機能要件】
- note.com の masahirochaen ユーザーの最新6記事をRSSで取得
- 返却データ: JSON形式（タイトル・URL・サムネイル画像URL・公開日）
- キャッシュ設定: ISR を使用（s-maxage=600, stale-while-revalidate=86400）

【エラーハンドリング】
- note の RSS サムネイル画像URL は <description> タグ内に埋め込まれているため、正規表現で抽出
- 取得失敗時は空配列を返す（フロントエンドでフォールバック表示）
- タイムアウトは10秒に設定

【セキュリティ】
- CORS ヘッダーを適切に設定
- レート制限を考慮したキャッシュ戦略

Claude は約10分で実装コードを出力し、その場で curl コマンドでテストして動作確認しました。

X（旧Twitter）やYouTube の API連携も同様の手順で実装。各APIの仕様に合わせて、認証・レート制限・エラーハンドリングを適切に設定しました。

ISR（Incremental Static Regeneration）を使うことで、リアルタイム性と高速表示を両立できます。初回アクセス時は最新データを取得し、その後10分間はキャッシュを返す設計です。

⑤ SEO対策とデプロイのプロンプト

最後に、SEO対策とVercelへのデプロイを実施します。

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

【デプロイ要件】
- カスタムドメイン: claudecode.digirise.ai
- 環境変数: .env.local の内容を Vercel の環境変数に設定

【セキュリティヘッダー】
- Content-Security-Policy（CSP）の設定
- Strict-Transport-Security（HSTS）の有効化
- X-Frame-Options: DENY
- X-Content-Type-Options: nosniff

【キャッシュ設定】
- 静的アセット（画像・CSS・JS）: immutable + 長期キャッシュ
- HTML: no-cache（毎回最新版を配信）
- /api/* エンドポイント: ISR設定を反映

【注意事項】
- 既存の .vercel/project.json がある場合は上書きしない
- vercel.json を自動生成する

Claude は vercel.json を自動生成し、vercel --prod コマンドでデプロイまで実行。約5分で本番環境が立ち上がりました。

デプロイ後、Lighthouse でスコアを確認したところ、SEO: 100、パフォーマンス: 95、アクセシビリティ: 98 という高スコアを達成しました。

なぜ2時間で完結できるのか — 3つの構造的要因

従来の制作フローでは数週間かかっていたLP制作が、なぜ2時間で完結できるのか。技術的・構造的な要因を整理します。

要因1: タスク間の引き渡しコストがゼロ

従来のフローでは、デザイナー → エンジニア → 画像制作 → API開発 と複数の担当者を経由していました。各フェーズで仕様書・デザインデータ・実装指示を作成し、確認・修正のやり取りが発生します。

Claude Code では、これらすべてを1つの環境で完結できます。デザイン案をそのままコードに落とし、画像生成も連続して実行できるため、引き渡しコストがゼロになります。

要因2: 生成されるコードの品質が実用レベル

Claude が生成するコードは、「動くだけのプロトタイプ」ではなく、本番投入可能な品質です。具体的には:

  • セマンティックHTML の適切な使用
  • アクセシビリティ対応（aria属性・キーボード操作）
  • セキュリティ対策（CSP・CORS・入力検証）
  • パフォーマンス最適化（遅延ロード・キャッシュ戦略）

シニアエンジニアが書くレベルのコードが出力されるため、修正・レビュー工数が大幅に削減されます。

要因3: 即座のフィードバックループ

「この色をもう少し落ち着かせて」「フォントを太字に」といった細かい調整が、5秒で反映されます。

従来のフローでは、デザイナーに修正依頼を出して数時間〜数日待つ必要がありました。Claude Code では、その場で調整→プレビュー確認→さらに調整、というサイクルを秒単位で回せます。

このフィードバックループの高速化が、全体の制作時間を劇的に短縮します。

LP制作は、もはや「外注して数百万円・数週間」ではない。エンジニア1人で「2時間・コードのみ」で完結する時代になった。

法人で同じ手法を再現するための実践ガイド

ここまでの内容を、社内で再現するための具体的な手順とヒントをまとめます。

① 社内向けLPから始める

外部公開する企業サイトの前に、まずは社内向けLPで練習することを推奨します:

  • 採用ページ・社内イベント告知ページ
  • 新製品のドキュメントサイト
  • 社内ツールの紹介ページ

外部公開しないため、失敗してもリスクが小さく、Claude Code の感覚を掴むのに最適です。最初の1本を2時間で作れたら、次回からは1時間、30分と短縮できます。

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

最初のLP制作で使ったプロンプト・構成・コードをテンプレート化しておくと、次回以降の制作が10倍速になります。

具体的には:

  • プロンプト集を社内Wikiにまとめる
  • セクションごとのコードをコンポーネント化
  • カラーパレット・フォント設定をCSS変数で管理
  • vercel.json・SEO設定のベーステンプレート

テンプレートがあれば、新しいLPを作る際は変数部分を差し替えるだけで完成します。

③ デザインシステムを CLAUDE.md に記載

自社のブランドガイドライン（ロゴ・カラーパレット・フォント・トンマナ）を CLAUDE.md ファイルにまとめておくと、毎回一貫したデザインで生成できます。

CLAUDE.md の記載例:

# DigiRise ブランドガイドライン

## カラーパレット
- プライマリ: #d4622a（オレンジ）
- セカンダリ: #333333（ダークグレー）
- 背景: #ffffff（白）
- テキスト: #1a1a1a（ほぼ黒）

## フォント
- 見出し: Noto Sans JP Bold
- 本文: Noto Sans JP Regular
- コード: Fira Code

## トンマナ
- 過剰な誇張表現は避ける
- 数字・実績は具体的に示す
- 信頼感・実用性を重視

この情報を Claude に読み込ませておけば、毎回ブランドに沿ったデザインが自動生成されます。

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

main ブランチにマージしたら自動デプロイされる環境を最初に構築しておくと、その後の更新が圧倒的に楽になります。

設定手順:

  1. GitHub リポジトリを Vercel と連携
  2. プレビュー環境（PR単位）と本番環境（main）を分離
  3. 環境変数を Vercel 管理画面で設定
  4. セキュリティヘッダー・リダイレクト設定を vercel.json で管理

この仕組みがあれば、コード修正 → push → 自動デプロイが1分以内で完了します。

実装時の注意点とトラブルシューティング

Claude Code を使った LP制作で、よくある落とし穴と対処法をまとめます。

!

LP制作で必ず確認すべきポイント

  • 法的表記: 特定商取引法・プライバシーポリシーは AI 任せにせず、必ず弁護士または法務担当に確認
  • 著作権・肖像権: 画像生成APIはオリジナル画像を生成しますが、意図せず既存作品に類似する可能性があるため、公開前に目視確認
  • セキュリティヘッダー: CSP・HSTS・X-Frame-Options は必須設定。設定漏れは脆弱性につながる
  • パフォーマンス測定: Lighthouse・PageSpeed Insights でスコアを確認し、画像圧縮・遅延ロードを最適化
  • アクセシビリティ: alt属性・キーボード操作・スクリーンリーダー対応を見落とさない
  • モバイル対応: 実機でのテストを必ず実施（ブラウザのエミュレーターだけでは不十分）

よくあるトラブルと解決法

Q: 画像生成が期待通りにいかない
A: プロンプトを具体化する。色・構成・スタイルを明確に指定し、参考画像のURLを渡すと精度が上がります。

Q: API連携でデータが取得できない
A: エラーハンドリングを確実に実装する。外部APIは常に失敗する可能性があるため、フォールバック表示を必ず用意します。

Q: デプロイ後にレイアウトが崩れる
A: ローカル環境と本番環境で CSS のロード順序が異なる場合があります。インラインCSSまたはCSSファイルの読み込み順序を確認します。

Q: Lighthouse スコアが低い
A: 画像の最適化（WebP変換・遅延ロード）、不要なJSの削減、サーバーレスポンス時間の短縮を優先的に実施します。

まとめ: Claude Code による LP制作の実践パターン

Claude Code だけで企業向けLPを2時間で構築する実践パターンは以下の通りです:

  1. 構成設計: Claude に企画書から設計案を出力させる（15分）
  2. HTML/CSS実装: セクションごとにコードを生成し、プレビューで確認しながら微調整（40分）
  3. 画像生成: 画像生成APIで必要な画像を内製化し、WebP圧縮で最適化（20分）
  4. API連携: Vercel Serverless Functions で動的データを取得し、ISRでキャッシュ最適化（25分）
  5. SEO + デプロイ: 構造化データ・セキュリティヘッダー・自動CI/CDを整備して本番公開（20分）

この手法は LP に限らず、社内ツール・管理画面・MVP（最小実用プロダクト） にも応用できます。デザイナー・エンジニアが不在でも、Claude Code があればビジネス要件を満たすWebアプリケーションを短時間で構築可能です。

DigiRise では、このような Claude Code だけで完結する開発手法を社内エンジニア・非エンジニアに伝授する研修プログラムを提供しています。構成設計・プロンプト設計・コードレビュー・デプロイ自動化まで、実務で即使えるスキルを習得できます。

詳細は Claude Code 研修ガイド をご覧ください。LP制作だけでなく、業務自動化・データ分析・API開発など、幅広い用途で Claude Code を活用できるようになります。