デザイナーがAIでHTML+CSSを自動生成 — モック画像1枚からコーディングする実践例

「デザインは得意だけど、コーディングに時間がかかる」。福島県や山形県の中小Web制作会社、あるいは社内にデザイナーを抱える中小企業で、この悩みは非常に多く聞かれます。

デザインモックを作って、そこからHTML+CSSを組む。この工程は、デザイナーにとって本来の「デザインを考える」仕事とは異質な作業です。にもかかわらず、工数としては全体の30〜50%を占めることも珍しくありません。

この工程をAIエージェントに任せたらどうなるか。私はITコーディネータとして、南東北の小規模な制作会社でその実験を行いました。結果は「一発で完璧にはならないが、初稿として使える品質のコードが数分で出てくる」というものでした。

本記事では、その実践の過程で見えてきた可能性と限界、そしてデザイナーが効果的にAIを使うためのコツをお伝えします。

デザイナーがコーディングに費やす時間の実態

Web制作の現場では、デザイナーの業務は大きく4つに分かれます。

1. ヒアリング・提案 — お客様の要望を聞き、方向性を決める
2. デザイン制作 — Figma、Photoshop、Illustratorなどでモックアップを作る
3. コーディング — HTML+CSSでデザインを実装する
4. 修正対応 — お客様のフィードバックに基づいて調整する

このうち、3のコーディングは「デザイナーの本来の専門性が活きる工程」とは言い難いものです。デザインの専門教育を受けたスタッフが、HTMLの閉じタグやCSSのプロパティと格闘する時間は、本来デザインに使うべき時間です。

この事務所では、成果管理チャットのやり取りをAIに分析させたところ、「案件が多すぎて細切れになっているため、本来2〜3時間で終わる仕事が2週間かかっている」という結果が出ていました。コーディング工程を圧縮できれば、この細切れ問題の一部を緩和できる可能性があります。

デザインモック1枚からHTML+CSSを生成する手順

用意するもの

• AIエージェント（この検証ではClaude Codeを使用）
• デザインモック画像（JPEG、PNG、PDFのいずれか）
• デスクトップに画像を配置

手順

Step 1: デザインモック画像をデスクトップに配置する

担当デザイナーは、過去に制作したサンプルページをデスクトップに配置しました。このページはHTMLベースで制作されており、エレメンター（WordPressのページビルダー）は使用していません。

Step 2: AIエージェントに指示する

「デスクトップにあるこのファイルからHTML+CSSを組み立ててください」

この一言だけです。AIエージェントは画像を読み取り、レイアウト構造を解析し、HTML+CSSを自動生成します。

Step 3: ブラウザで確認する

生成されたHTMLファイルをブラウザで開き、デザインモックと見比べます。

生成結果: デザイナーの率直な評価

担当デザイナーがブラウザで確認した際の反応は、驚きと冷静な評価が入り混じったものでした。

良かった点:

「文字が流れるというのを認識しているのがすごい」

元のデザインにはマーキー的な流れるテキストがありましたが、AIはこれをCSSアニメーションで再現していました。静止画像から動きのある要素を推測して実装した点は、担当デザイナーも予想外だったようです。

「マークアップやってくれれば、あとは（自分で調整できる）」

HTML構造が適切に組まれていれば、CSSの細かい調整はデザイナーの得意分野です。AIが「骨組み」を作り、デザイナーが「仕上げ」をするという役割分担が成立することを、担当デザイナーは直感的に理解しました。

課題点:

「レスポンシブにはなっていない。レスポンシブは別途指示しないといけない」

担当デザイナーの指摘通り、最初の出力はレスポンシブデザイン（スマートフォン対応）に対応していませんでした。固定幅のレイアウトで生成されており、ブレイクポイントの設定やフレキシブルなレイアウトへの変換は、追加の指示が必要です。

「リキッドデザインにしてください」と追加指示を出したところ、AIは固定幅をフレキシブル幅に修正し、ビューポートに応じたレイアウト変更を試みました。ただし、ナビゲーション部分の処理は不完全で、再修正が必要でした。

AIモデルの性能差 — 用途で使い分ける

この実験では、コスト節約のためにSonnet（中位モデル）を使用しました。しかし、経営者はこうコメントしています。

「これはOpus（最上位モデル）にしたら、多分一発で上がってきた可能性がある」

「メールの返信とかはSonnetでいいけど、プログラミングはOpusの方が全然いい」

AIモデルには性能段階があり、コーディングのような複雑なタスクほど上位モデルの効果が大きくなります。以下は、この事務所で確認された使い分けの目安です。

タスク	推奨モデル	理由
ChatWork返信、簡単なテキスト作成	Haiku（軽量）	速度重視。品質は十分
提案書作成、見積もり	Sonnet（中位）	バランスが良い
HTML+CSS生成、設計作業	Opus（最上位）	構造理解力が段違い

ただし、上位モデルほどAPIコストやトークン消費が大きくなります。Proプランの場合、週間の使用量上限があるため、「チラシ1個の作成と修正で週間上限の約19%を消費した」という実例も報告されています。軽いタスクは下位モデル、重要なタスクにだけ上位モデルを使う、という使い分けが経済的です。

スキル化で「社内コーディングルール」に近づける

AIが生成するHTML+CSSは、そのままでは「AIっぽい」コードになります。クラス名の命名規則、CSSプロパティの記述順序、インデントの深さなど、各社固有のコーディングルールとは異なる書き方をしてきます。

ここで重要になるのが「スキル化」です。

スキル化の手順

1. 見本となるコードを用意する: 社内のデザイナーが過去に制作したHTML+CSSファイルを1つ選ぶ
2. AIエージェントに読ませる: 「これが当社のデザイナーが書いたHTML+CSSです。このコーディングルールを参考にしてください」
3. スキルとして保存する: 「この書き方のルールをスキルにしてください」と依頼する

以後は、「HTML+CSSを組んでください」と指示するだけで、社内ルールに近い記法のコードが出力されるようになります。

「CSSは特に書き方がありますもんね」

担当デザイナーのこのコメントが象徴しているように、CSSの記法は個人や会社によって大きく異なります。同じレイアウトでも、Flexbox中心で書く人、Grid中心で書く人、BEMの命名規則を使う人……さまざまです。

AIに見本を1つ渡すだけで、その会社の「方言」に寄せたコードを出力してくれるようになるのは、実用上非常に大きなメリットです。

「一回その見本を提供して、スキル化すれば、次回からはHTML+CSSを組んでくださいと言うだけでそのスキルが自動発動して瞬時にできあがる」

WordPressとの関係: エレメンターを使っている場合

多くの中小企業のWebサイトはWordPressで運用されており、Elementor（エレメンター）やDivi等のページビルダーを使っている場合があります。

この場合、AIが生成したHTML+CSSを「そのまま」使うことは難しいかもしれません。ページビルダーは独自のウィジェット構造を持っているため、生のHTMLを貼り付けてもデザインが崩れることがあります。

しかし、以下のような使い方は有効です。

1. HTMLベースのページの場合: 生成されたコードをそのまま使用可能。今回の実験もこのパターンです
2. エレメンターのHTMLウィジェットを使う場合: 部分的にカスタムHTMLを埋め込むことが可能
3. プロトタイプとしての活用: お客様への提案段階で、デザインモックからHTMLプロトタイプを素早く作り、ブラウザで動く状態を見せる

特に3のプロトタイプ活用は、提案の説得力を大幅に向上させます。「画像のモックアップ」と「ブラウザで実際に動くプロトタイプ」では、お客様の反応が全く異なります。

Claude Designとの使い分け

AIを使ったデザイン→コード変換には、もう一つのルートがあります。Claude.aiの「Claude Design」機能です。

Claude Designは、テキスト原稿を渡すとHTMLベースのチラシやLP（ランディングページ）をデザインごと自動生成してくれるツールです。この事務所では、前回の研修でWPガーディアン（WordPress監視サービス）のチラシをClaude Designで作成するデモも行いました。

Claude DesignとClaude Code（HTML+CSS生成）の違いは以下の通りです。

項目	Claude Design	Claude Code
入力	テキスト原稿（md形式等）	デザインモック画像
出力	HTMLベースのデザイン完成品	HTML+CSSのコードファイル
デザインの自由度	AI任せ（パラメータで調整）	デザイナーが決めたモックが基準
適する場面	ゼロからデザインを作る	既存デザインをコード化する
仕上げ	Canvaでロゴ差替え・微調整	デザイナーがCSS調整

デザイナーがいる事務所では、デザインは人間が作り、コーディングをAIに任せる（Claude Code方式）の方が品質管理しやすいでしょう。デザイナーがいない場合は、Claude Designでデザインごと自動生成する方が効率的です。

現時点での限界と今後の展望

率直に言って、2026年5月時点では「AIが生成したHTML+CSSをそのままお客様に納品する」水準には達していません。レスポンシブ対応の不完全さ、画像のスライス（切り出し）ができない点、アクセシビリティへの配慮不足など、人間の手で仕上げる工程は残ります。

しかし、「初稿」としての価値は十分にあります。ゼロからHTMLを書き始めるのと、AIが生成した骨組みを修正するのでは、後者の方が圧倒的に速いです。

「構造とディレクトリをスキル化して、一回やり方を確立すれば、以後は自動的に同じ品質で出てくる」

担当デザイナーのこの理解は正確です。AIによるコーディング支援は、「一発で完璧なコードを出す魔法」ではなく、「繰り返し改善して精度を上げていく仕組み」です。最初は人間が70%修正する必要があるかもしれませんが、スキル化を重ねるたびにその割合は減っていきます。

---

Web制作の生産性向上でお悩みなら

ITC南とうほく事業協同組合では、山形県・福島県・宮城県の中小企業を対象に、AIを活用した業務効率化を支援しています。

ITコーディネータが在籍し、デザイン→コーディング→WordPress実装の各工程でAI活用を検討し、御社の制作フローに最適な導入プランを一気通貫でサポートします。特定のベンダーに縛られない、御社に最適なツールをフラットに選定できるのが、協同組合という形態の強みです。

まずは30分のZoom相談（無料）で、御社の現状をお聞かせください。

無料相談のお申し込みはこちら →

---

まとめ

デザイナーがAIでHTML+CSSを自動生成する際のポイントは、以下の4つです。

1. デザインモック画像をデスクトップに置いて指示するだけ — 数分で初稿が出てくる
2. レスポンシブ対応は別途指示が必要 — 最初の出力は固定幅になりがち
3. モデルの使い分けが品質を左右する — プログラミングには上位モデル（Opus）を推奨
4. スキル化で社内コーディングルールに近づける — 見本を1つ渡すだけで精度が上がる

AIは「デザイナーの仕事を奪う」ものではありません。デザイナーがデザインに集中するための時間を作るツールです。コーディングに費やしていた時間を、ヒアリングやデザイン検討に振り向けることで、制作物の品質そのものが向上します。

「デザインの基礎がない人がAIでデザインを作るよりも、デザインの基礎を持っている人がAIを使う方が品質は高い」——この原則を忘れずに、まずは1案件でAIコーディングを試してみてください。

ITC南とうほくに相談する →