本記事はアジアクエスト Advent Calendar 2025の記事です。
はじめに
デザイナーに依頼して作成していただいた素材をもとにコーディングしたり、画像の多いウェブサイトを SEO 観点でコーディングし直す機会は少なからずあると思います。
近年、AI による画像認識技術や自動コード生成の精度が向上し、「デザインカンプから直接 HTML/CSS を生成する」というアプローチが現実的になってきました。しかし、実務レベルで活用できるのか、どこまで人手による調整が必要なのかは、実際に試してみないと分かりません。
そこで今回、Claude Code と Astro を組み合わせた開発環境で、デザインカンプから HTML/CSS を自動生成するワークフローの実用性を検証しました。本記事では、その技術選定の理由、実装プロセス、そして得られた実践的知見を解説します。
注記： 本記事で使用するデザインカンプは、製作者である友人から掲載の許可をいただいています。実際のデザインカンプと生成結果を比較しながら、実用性を評価していきます。
1. 技術選定の背景
注記： 本記事は特定ツールの優位性を主張するものではなく、「公式環境で最新モデルを試す」という観点での選択です。今回の検証は2025年9月に実施しています。
1.1 Astro を選んだ理由
Astro は Web フロントエンドのフレームワークの一つで、軽量でコンポーネント開発ができ、SEO に必要な機能を一元管理できるなど、LP 開発に適した特徴を持っています。
- HTML ファースト & Zero JS により、初期表示が軽く、LP で重要な体感速度を確保できます
- BaseLayout でメタ管理を一元化することで、ページ追加時の書き漏れを防止できます
- コンポーネント化により、セクション単位での再生成・差し替えが容易になります
- 公式サイトマップとして
@astrojs/sitemapが提供されており、自動生成が可能です
1.2 Claude Code を選んだ理由
Claude Code は、Anthropic 社が開発する AI アシスタント Claude を基盤としたコーディング支援ツールです。Anthropic は 2021 年に OpenAI の元メンバーによって設立され、「安全で信頼できる AI の構築」をミッションに掲げています。同社の Claude シリーズは、長文の文脈理解や高度な推論能力で知られ、開発現場での採用が進んでいます。
- Anthropic純正の最新機能や新モデルを他のツールより早く体験できます。公式ツールとして、最新のClaudeモデル（Claude Sonnet 4.5など）がリリースされると同時に利用可能になるため、最先端のAI機能を開発に活かせます
- VS Code との統合で既存開発環境にシームレスに導入でき、直近のアップデートで Cursor や Copilot との UI 差分が解消されて、さらに使いやすくなりました
- 2025 年 2 月に正式発表され、GitHub Copilot（2022 年一般公開）や Cursor（2023 年リリース）に続く新たな選択肢として登場しました
2. 実験設計
目的： 今回の実験では、デザインカンプ画像から「視覚的に遜色ない HTML/CSS」を自動生成することを目的としました。
制約条件：
- モバイルファースト（375px）で開発
- CSS フレームワーク不使用（素の CSS）
- 画像配置は人手微調整を許容
- 色指定は測色ツールで正確な値を取得
開発フロー：
デザインカンプ → Claude Code → 初期HTML/CSS生成
→ 画像配置調整 → 細部最適化 → 完成
3. 実装で得られた実践的知見
3.1 良かった点
3.1.1 OCR の精度は想像以上
見出しや本文、箇条書きの改行位置や記号まで再現性が高いため、HTML の構造化にかかる工数を大幅に削減できました。特に日本語テキストの認識精度が高く、デザインカンプからテキストを手作業で書き写す手間がほとんど不要になりました。
今回の検証では、デザインカンプと背景画像があらかじめ提供されており、これらを Claude Code のプロンプトに組み込んでテキスト抽出と HTML/CSS 生成を行いました。
ポイント：段落・箇条書き・記号の「どこで区切るか」が最初から正しいため、文言の修正はほぼ不要になりました。
図 1-1：デザインカンプ（該当セクション）
図 1-2：背景画像素材
図 1-3：Claude Code 実行時のプロンプト例
図 1-4：OCR によるテキスト抽出結果
位置は追加指示や手直しが必要だが、改行や文字は正確に再現されています。
図 1-5：手直し後の最終実装結果
3.1.2 視覚的再現度は十分実用レベル
初期生成の段階で、レイアウト・配色がデザインカンプに比較的近い水準まで到達。細部の詰めは必要ですが、ゼロからの手実装と比べて体感で実装スピードが大幅に上がっていました。
3.1.1 と同様に、あらかじめ提供されたデザインカンプと背景画像を Claude Code に読み込ませ、初期実装を生成しました。その後、追加のプロンプト指示と手直しを行い、最終的な実装に仕上げました。
図 2-1：デザインカンプ（該当セクション）
図 2-2：背景画像素材
図 2-3：初期生成結果
Claude Code による初期生成。レイアウトの骨格は再現されています。
図 2-4：追加プロンプト指示
色の指定や配置の微調整を追加で指示しました。
図 2-5：手直し後の最終実装結果
追加指示と手直しにより、デザインカンプに近い仕上がりを実現しました。
3.2 課題点と工夫が必要だった点
3.2.1 複雑な装飾は外部 CSS 参照が効率的
デザインカンプに複雑な装飾要素（リボン・吹き出し・図形の重なりなど）がある場合、画像から直接生成するとイメージと異なる結果になることが多く、追加プロンプトでの軌道修正も困難でした。
このような場合、外部サイトから近いデザインの CSS を取得し、それをベースに調整する方が仕上がりが格段に良くなります。完璧に同じにはなりませんが、ゼロから生成するより確実に意図に近づけられます。
ポイント：複雑な視覚効果は「言葉で説明 → 生成」より「既存実装 → 改変」の方が、デザイナーの意図を反映しやすい。
ワークフロー：
- CodePen や CSS-Tricks CSS デザインサンプルをまとめた外部サイトなどで近い装飾を探す
- CSS コードを Claude Code に読み込ませる
- 「このスタイルをベースに、色を #XXX にして」と指示
図 3-1：デザインカンプ（複雑な装飾あり）
リボン風の見出し装飾と斜めストライプ背景を含むセクション。画像からの直接生成では形状が崩れやすいです。
図 3-2：外部 CSS 参照を指示したプロンプト例
図 3-3：最終的な実装結果
外部 CSS をベースにしたことで、リボンの立体感と角度がデザインカンプに近い仕上がりになりました。
3.2.2 SVG アーチの制御は座標理解と直接編集が効率的
プロンプトでの指示では、意図したアーチの深さや幅を正確に再現するのが困難でした。SVG の path 座標の意味を理解して直接編集する方が、再生成を繰り返すより圧倒的に効率的でした。
図 4-1：デザインカンプ
図 4-2：アーチ生成・調整のプロンプト例
「アーチをもう少し深くして」「幅を広げて」といった指示を複数回試行。生成される度に微妙に異なる結果となり、意図通りの調整が困難と判明しました。
図 4-3：最終的な実装結果（座標理解後）
座標の意味を理解して直接編集した結果、デザインカンプに忠実なアーチが実現できました。
座標を理解した調整プロセス：
/* プロンプトによる生成結果（幅が狭く、カーブが浅い） */
path {
d: path("M 50 25 Q 450 -40 850 25 L 800 250 Q 450 90 100 250 Z");
}
/* 座標の意味を理解して調整 */
path {
d: path("M 50 25 Q 700 -95 1350 25 L 1250 450 Q 700 330 150 450 Z");
}調整のポイント：
- 横幅の拡大：制御点 X を 450 → 700、終点を 850 → 1350 に変更（800 → 1300 の幅を確保）
- 台形の高さ調整：上辺 25 と下辺 450 の差が 425 となり、十分な視覚的空間を確保
- 上辺の曲線：制御点 Y を -95 にすることで、しっかりとしたアーチの深さを実現
- 下辺の対称性：下辺制御点を 330 に設定し、上辺との視覚的バランスを調整
ポイント：プロンプトでは「もう少し深く」「幅を広げて」といった相対的な指示になりがちで、意図が正確に伝わりません。座標の絶対値と相対関係を理解することで、手作業での 1 回の編集で目的の形状を実現できます。
3.2.3 色の管理は測色が必須
Claude Code の色推測は雑になりがちで、ブランドカラーの統一には課題がありました。カラーピッカーで正確な値を取得し、明示的に指定することで解決できます。
3.2.4 複雑な形状は既存 CSS 参照が安定
リボン・六角形・付箋などの特殊形状は、ゼロから生成するより、既存実装を参照・改変する方が確実に意図に近づけられます。
4. まとめ
4.1 自動生成で効果的だった部分
テキストと構造化
見出し・本文・箇条書きなどのテキスト抽出と HTML 構造化は高精度で実現できました。日本語の認識精度が高く、改行位置や記号まで正確に再現されるため、手作業での書き写しや修正がほぼ不要になりました。
コンポーネント単位での開発と修正
claude.md でプロジェクト全体の文脈を共有することで、以下のような効率的な開発が可能になりました。
- どのコンポーネントを修正中か、ターゲットがどこかを明確に指示できる
- 特定のコンポーネントに対して、どんな修正を行いたいかを部分的に指示できる
- Astro のコンポーネント化により、セクション単位での再生成・差し替えが容易
コード理解による効率的な修正
たとえイメージとズレた実装になったとしても、生成されたコードの構造を理解すれば、部分的な修正のみで完成に近づける点が大きなメリットでした。特に SVG の座標調整や CSS の既存実装を参照する方法は、プロンプトでの試行錯誤より確実で効率的でした。
4.2 人の手が必要だった部分
一方で、完全自動化には至らず、以下の点では必ず人の手直しが必要になりました。
- 色の指定 - 自動推測では精度が低く、カラーピッカーでの測色と明示的な指定が必須
- 背景画像や装飾の配置 - 自動では位置や重なりの調整が難しく、視覚的バランスの微調整が必要
- 複雑な図形や装飾 - リボンやアーチなどは、外部 CSS 参照や座標の直接編集が効率的
- 完全な再現 - デザインカンプとの完全一致は困難で、細部の品質確認が必要
4.3 実用性の評価と推奨される活用方法
今回の検証を通じて、デザインカンプからの初期実装速度は劇的に向上することが分かりました。特に、テキスト抽出と HTML 構造化、コンポーネント単位での開発、コード理解による効率的な修正といった点で大きな効果がありました。
一方で、色の指定や背景画像の配置、複雑な装飾の実装など、細部の調整には人の手が必要です。そのため、完全自動化ではなく、「高度なアシスタント」として人間と協働するのが現実的な活用方法と言えます。
LP やキャンペーンページの量産、デザイン確定後の実装加速、プロトタイプの高速作成など、初期実装のスピードが求められる場面で特に効果を発揮するでしょう。ただし、ブランドカラーの統一や画像配置の最適化、品質の最終確認といった仕上げの工程では人間の判断が不可欠です。
関連リンク：
