手作業と AI で同じコーポレートサイトを作り比べてみた

デザイン事業部のコーポレートサイトを題材に、同じコンセプトのサイトを「手作業」と「Figma Make・Claude Code などの AI」の 2 通りで制作しました。作業日数は手作業の 16 日に対して AI 活用は 5 日でしたが、この記事で残したいのは日数よりも、AI と作業する中で見えた意図のずれと、役割分担の決め方です。

---

研修の題材と比較の条件

AIDD デザイン室の研修として、デザイン事業部のコーポレートサイトを 2 通りの方法で作りました。一方は手作業でデザインとコーディングを行い、もう一方は AI でデザインを生成してコード化しています。

比較の条件をそろえるため、どちらも同じコンセプトとペルソナを使いました。

• コンセプト: テクノロジーと発想を、洗練された寒色のトーンで可視化する。飾らなくても伝わる本質と誠実さで、「アピールしなくても確かな実力がある組織」という信頼感を出す
• キーワード: 洗練された寒色、グラフィック的・最先端、削ぎ落とす・誠実さ
• ペルソナ: 実務経験 4 年の UI デザイナー。デザインを作って終わりにせず、エンジニアと対等に議論し、リリース後の運用やプロダクト設計にも関わりたいと考えている

研修用の制作物なので、完成したサイトを一般公開する予定はありません。

手作業と AI 生成の工程

工程は手作業が 4 ステップ、AI 生成が 5 ステップです。AI 側は工程が 1 つ多いものの、各ステップの所要時間が短くなりました。

手作業の工程

手作業では、コンセプト策定からアップロードまでをすべて自分の手で進めました。

1. コンセプト・デザイン策定: PC 版と SP 版のデザインを手作業で作成・修正する
2. デザインフィードバック: レビューを受け、手動での微調整を繰り返す
3. HTML / Sass 構築: 構造・スタイル・レスポンシブをゼロから書く
4. 検証・アップロード: 表示崩れを直し、S3 などへアップロードする

AI 生成の工程

AI 生成では、最初にデザインのルールを言語化したファイルを用意し、それを起点に UI とコードを生成しました。

1. 下準備・トークン抽出: design-tokens.json と DESIGN.md を Claude Code で作成する
2. プロンプト作成・UI 生成: NotebookLM で指示書を作り、Figma Make で UI を出力する
3. レビュー・手動調整: 再指示と Figma 上での直接修正を行う
4. Claude Code での実装: Figma MCP と連携し、HTML / CSS とアセットを出力する
5. 最終検証・微調整: 表示崩れ・Hover・装飾を Claude Code で仕上げる

Figma Make のデザイン生成で生じた 3 つのずれ

完成したデザインは手作業版・AI 版ともに形になりましたが、AI 版はそこに至るまでに言葉のニュアンスの調整とプロンプトの試行錯誤が続きました。特に Figma Make によるデザイン生成では、AI の判断と人の意図のあいだに 3 種類のずれが出ています。

抽象的な表現の振れ幅

1 つ目は、程度を表す言葉の解釈が極端に振れることです。「控えめに」と指示すると要素そのものが消え、少し強めるよう指示すると一気に過剰になりました。「寒色で」と頼むと、彩度ゼロのモノクロとして出力されたこともあります。

相反する要素の偏り

2 つ目は、相反する要素を同時に与えたときの偏りです。今回のコンセプトには「誠実さ」と「最先端」が同居していますが、両方を同時に渡すと AI は優先順位を判断できず、「削ぎ落とす」側に極端に寄ったデザインが出てきました。

抽象グラフィックの限界

3 つ目は、抽象グラフィックの生成です。図表化や情報の整理は得意な一方で、ファーストビュー（ヒーロー）のモチーフやランダムな表現は、なかなか意図どおりになりませんでした。

グラフィックは 70 点の土台から人が仕上げる

グラフィックについては、AI に完璧を求めるのをやめました。AI には 70 点の土台を作らせ、装飾と抽象グラフィックは人の手で差し替えるのが、今回の制作ではいちばん早いという判断です。

実際には、AI が生成したグラフィックのパーツをベースに、手作業で組み合わせ直して仕上げました。あわせてヒューリスティック評価と認知的ウォークスルーを行い、画面構造と動線が妥当かどうかを客観的に確認しています。

Claude Code と Figma MCP でのマークアップ

マークアップでは Claude Code と Figma MCP を使いました。デザイン生成とは対照的に、こちらは初速の速さが目立った工程です。

骨組みと動的パーツの初期生成

HTML / CSS の骨組みとスタイルは、ほぼ一瞬でコードになりました。スライダーやハンバーガーメニューのような JavaScript のパーツも一気に形になります。

プロンプトと DESIGN.md の読み込み

Claude Code には、通常版の Claude で作ったプロンプトと DESIGN.md を読み込ませています。これで出力の精度が上がり、デザインルールに沿っているかどうかのチェックも AI 自身に任せられました。

SP 版デザインの先行作成

効果が大きかったのは、Figma Make で SP 版のデザインを先に少し作っておくことです。レスポンシブを AI に自動で生成させるのは難しかったため、SP 版のレイアウトの形だけでも Figma 上に用意してから読み込ませると、崩れが減って再現度が上がりました。

微調整の役割分担

一方で、余白・装飾・細部のレスポンシブは、AI に「いい感じに」と投げても、それらしい形にはなるものの細かな調整まではしてくれません。ここは人が先に「こういう形にする」と意図を決め、そのうえで Claude Code に個別に指示して直してもらう形を取りました。

作業日数の比較

デザインとマークアップに分けた作業日数は次のとおりです。

合計では約 70% の短縮になりました。ただし、これは研修の題材で、同じコンセプトとペルソナを使って 2 回制作した条件での数字です。

日数以上に変わったのは時間の使い方です。AI 活用の 5 日間は、手を動かす時間よりも、判断と検証に使う時間が中心でした。具体的には、プロンプトの試行錯誤、言葉の解釈のずれの補正、どちらの要素をどれくらい立たせるかというトレードオフの調整、そして Figma とコードでの仕上げです。

AI と人の役割分担

今回の制作を通じて、AI が得意な領域と人が担う領域を次のように整理しました。

今後の制作では、次の 3 点を意識していきます。

• 役割を分ける: AI の一発出しに頼らず、70 点の土台を AI に作らせて、抽象グラフィックや細かな余白は人が仕上げる
• 言語化の力を磨く: 「控えめに」のような曖昧な指示をやめ、要素の理由と強度をプロンプトや DESIGN.md に定義する
• 得意・不得意を見極める: ベースの実装は AI に任せ、自分はコンセプトの本質とユーザー体験の設計に時間を割く

まとめ

手作業と AI で同じサイトを作り比べると、AI は工程全体を速くする一方で、「控えめに」「寒色で」といった言葉の解釈や、相反する要素のバランスは人が補う必要がありました。AI 生成の面白さと難しさの両方を体感できた研修です。

デザインのルールを Markdown で AI に渡す進め方は、DESIGN.md の解説でも紹介しています。Figma Make に渡す前の準備は、Figma Make でワイヤーフレームを作る前の下準備にまとめています。

gaipack では、AI が UI を生成する際の品質と統一感を担保する AIDD デザインのスキームを整えています。AI を使ったデザイン制作の進め方でお悩みの方は、お気軽にご相談ください。