Webサイトのモックアップ作成はAIにHTMLを書かせるのが速い

Webサイトのモックアップ、もうAIにHTMLを書かせればいいんじゃないか

結論から言うと、Webサイトのモックアップ作成はAIにHTMLを直接書かせるのが一番速い。自分はここ半年くらい、デザインツールでワイヤーフレームを引く工程をほぼやめて、ClaudeやChatGPTに「こういうサイトのモックをHTML 1ファイルで」と頼む方式に切り替えた。実際に使っているプロンプトとハマりどころを、自分の経験ベースで書いていく。

なぜデザインツールではなくHTMLモックなのか

以前はFigmaでモックを作っていた。ただ、自分のような開発寄りの人間にとって、Figmaは正直オーバースペックなんだよね。オートレイアウトの設定に時間を食って、肝心の「どんなサイトにするか」を考える時間が削られていく感覚があった。

HTMLモックには明確な利点がある。ブラウザでそのまま開けるから、クライアントや社内メンバーに「このURLを開いて」で共有が終わる。ウィンドウ幅を縮めればレスポンシブの挙動も実物で確認できる。静止画のモックだと「スマホだとどう見えるんですか」という質問に毎回別画面を用意する必要があったけど、HTMLならその場で縮めて見せるだけ。

そして何より、HTMLを書く作業自体をAIに丸投げできるようになったのが大きい。手書きでHTMLモックを作るのは正直つらいけど、書くのがAIなら話は別だと思う。体感だけど、以前Figmaで半日かけていたレベルの提案用モックが、いまはプロンプトを書いて修正指示を数回出すだけ、30分前後で形になっている。

実際のやり方

基本は「1ファイル完結」で頼む

自分がいつも使っているプロンプトの型はこんな感じ。

以下の要件でWebサイトのモックアップを作って。
- HTML 1ファイル完結（CSSは<style>タグ内に書く）
- 構成: ヘッダー / ヒーロー / 特徴3つ / 料金表 / お問い合わせフォーム / フッター
- ターゲット: 中小企業の経営者
- 配色: 紺をベースに、アクセントは1色だけ
- ダミー画像は使わず、CSSのグラデーションか単色で代用
- 文言は「ここに入ります」ではなく、それらしい日本語を入れる

ポイントは外部依存をなくすこと。CSSを別ファイルにされたり、CDNから画像を引っ張られたりすると、ファイルを渡した相手の環境で崩れることがある。「1ファイル完結」と明示しておけば、メールに添付するだけで誰でも開ける成果物になる。

文言はダミーにしない

地味に効くのが「それらしい日本語を入れて」という指示。モックの段階で「サンプルテキストサンプルテキスト」が並んでいると、見る側はデザインじゃなくて空白の文言が気になってしまう。文言まわりは、業種とターゲットを添えるとぐっと良くなる。

・文言はダミー禁止。税理士事務所のサイトという前提で、
  40〜50代の個人事業主に響くキャッチコピーと説明文を入れて
・キャッチコピーは20字以内、説明文は各80字程度

AIならそれらしいキャッチコピーや説明文を一緒に生成してくれるので、モックの完成度が一段上がる。実際、クライアントに見せたとき「この文言ほぼこのままでいいね」と言われて、コピーライティングの工数まで浮いたことがあった。逆にここをダミーのままにしておくと、打ち合わせの場で文言の話に脱線して、肝心のレイアウトの議論が進まなかったりする。

修正は会話で回す

初回の出力が微妙でも問題ない。修正指示を会話で投げれば、数十秒で修正版が返ってくる。自分が実際によく使う修正プロンプトはこのあたり。

・ヒーローセクションの高さを画面の70%にして、キャッチコピーをもっと大きく
・料金表は3プラン横並び。真ん中のプランを「おすすめ」として少し目立たせて
・全体的に余白が窮屈。セクション間の余白を1.5倍くらいに
・スマホ表示のとき、特徴3つは縦積みにして

Figmaで自分で直すより圧倒的に速い。自分の場合、初回生成から3〜5往復くらいで「見せられるモック」に到達することが多い。

ハマったポイントと対策

いいことばかり書いてきたけど、ハマりどころもある。

まず、AIが作るデザインは放っておくと似たり寄ったりになる。紫系のグラデーション、カード型レイアウト、絵文字アイコン。いかにも「AIが作りました」という見た目になりがちなんだよね。対策としては、配色とトーンを具体的に指定すること。自分はこういう指示を最初のプロンプトに足している。

・配色は #1e3a5f（紺）をベースに、アクセントはオレンジ1色だけ。グラデーション禁止
・絵文字アイコンは使わない
・無印良品の公式サイトみたいな、余白多めで色数を絞った落ち着いたトーン
・フォントは游ゴシック系。丸ゴシックは使わない

「参考サイトの雰囲気を文章で説明する」のが特に効く。デザインの専門用語を知らなくても、「〜みたいな感じ」で伝えるだけでだいぶ変わる。

もうひとつは、モックのHTMLをそのまま本番に流用したくなる誘惑。これはやめたほうがいい。モック用に生成されたコードはアクセシビリティやセマンティクスが甘いことが多くて、本番品質にするには結局書き直しに近い手間がかかる。自分は「モックは使い捨て、本番は別物」と割り切ることにしている。

ツールの選択肢としては、ChatGPTやClaudeのようなチャット型のほか、Vercelのv0みたいなUI生成特化のサービスもある。ただ個人的には、日本語の文言込みで作るなら普通のチャット型AIで十分というのが体感。プレビュー機能つきのチャットAIなら、生成結果をその場で確認しながら会話で直せる。

デザインツールとの使い分け

じゃあFigmaが要らなくなったかというと、そうでもない。デザイナーが入るプロジェクトでは、コンポーネント管理やコメント機能を含めてFigmaのほうが回しやすい。自分の整理はこう。

• 提案段階の叩き台、個人開発、社内ツール → AIにHTMLモックを書かせる
• デザイナーと共同作業する本格的な案件 → Figma
• 「とりあえず見た目のイメージを共有したい」だけ → AIのHTMLモックで十分

体感だと、自分の仕事の8割は上の1番目と3番目で済んでいる。叩き台の段階で時間をかけても、どうせ要件が変わって作り直しになる。だったら30分で出せるHTMLモックを使い捨てる前提で回したほうが、トータルでは速い。モックに対する心理的なコストが下がると、「とりあえず2案作って並べて見せる」みたいな贅沢な使い方もできるようになるしね。

まとめ

• モックアップはAIにHTML 1ファイルで書かせるのが速い。ブラウザで開けてレスポンシブ確認もできる
• プロンプトは「1ファイル完結・構成・配色・それらしい日本語の文言」を指定する
• AIっぽい見た目を避けるには配色とトーンの具体指定が効く
• モックのコードは使い捨て。本番流用はしない

広告代理店経由の受託開発がしんどい話

広告代理店経由の受託開発、何がしんどいのか

受けなきゃよかった、と後悔した案件が何件かある。そのほとんどが広告代理店を挟んだ受託開発だった。「大手クライアントの仕事に関われる」という響きに最初は引かれていたけど、今は案件の構造を聞いた時点でかなり慎重に判断するようにしている。中抜き・スケジュール感覚のズレ・体育会系の空気、この3つが揃ったときのしんどさは直接取引とは別次元だと思う。

中抜きの構造と、実際の金額感

まず前提として、広告代理店経由の案件では「お金がどう流れるか」を把握しておく必要がある。典型的な構造はこんな感じだ。

エンドクライアント → 広告代理店 → 制作会社（ウェブ系）→ 自社（受託開発会社）

自分たちが経験した案件で、これが一番リアルに刺さった数字がある。自社が1000万円で見積もった案件が、上位の制作会社に渡った時点で3000万円に化けていた。さらにその上の広告代理店がエンドクライアントに請求した金額は5000万円だったと後から知った。エンドクライアントが5000万円を出して、実際に手元に来るのは1000万円。その比率は20%だ。

各層が普通に利益を乗せているだけで、誰が意地悪をしているわけでもない。広告代理店はクライアントとの折衝・企画立案を担い、中間の制作会社もPMを一人プロジェクトに張り付けている。それぞれが何かしら動いているのは事実だ。ただ、実装のほぼすべてを担う会社が全体の20%以下しか受け取れない構造は、それが「慣行」として成立していること自体がちょっと不思議ではある。

契約形態も確認が必要で、準委任契約であれば月額単価が明示されるから計算できる。ただ請負契約で「このシステム一式、○○万円でお願いします」という形で来る場合は、そもそも適正価格がいくらなのかが見えない。スコープが不明瞭なまま受けると、後から「やっぱりこの機能も追加で」という話が平気で出てくる。

スケジュールの感覚が根本的にズレている

「来週中に」が意味するもの

広告代理店の担当者と仕事をしていて一番つらいのは、スケジュール感覚の違いだと思う。広告業界はスピードを美徳とする文化があるらしくて、メッセージの返信は確かに早い。でも「仕様書を来週中に共有します」という約束が守られたことはほとんどない。

一方で「今週金曜日までに初稿を上げてほしい」という依頼は普通に来る。デザインカンプもない、コピーもない、要件も半分しか固まっていない状態で。自分が経験した中で一番しんどかったのは、金曜の午後3時に「月曜のプレゼン用にランディングページを作ってほしい」という連絡が来たことだ。何を入れるかの情報は「社内で確認してから共有します」と言われて、実際に来たのは土曜の夜10時過ぎだった。

エンジニアリングコストが計算に入っていない

根本的な問題は、広告代理店側に「コードを書く時間」しか見えていないことだと思う。要件のヒアリングに使う時間、仕様の確認と折り返しのやり取り、テスト、修正対応、デプロイ後の検証——こういった工程がすべてゼロコストとして扱われている感じがある。「ページを1枚作るだけでしょ」という感覚で依頼が来るのに、実際は認証が絡んでいたり、既存システムとの連携が必要だったりする。

これは担当者が悪意を持っているわけじゃなくて、単純にソフトウェア開発のことを知らないまま窓口をやっているケースが多い。「この機能はどれくらいかかりますか」と聞いてもらえるならまだいいほうで、工数の確認なしにスケジュールを決めてからこちらに伝えてくる、というパターンも普通にある。

体育会系の空気というか、「できない」が許されない感じ

体育会系という言葉を使う人が多いけど、自分が感じるのは少し違って「上位者の判断を技術的な理由で覆すことが許されない」という空気だと思っている。

広告代理店の担当者は、エンドクライアントから言われたことをそのまま伝達してくる役割を担っている。そこで「それは技術的に難しいです」「セキュリティ上のリスクがあります」と指摘すると、返ってくる言葉が「クライアントがそれでよいと言っているので」だったりする。技術的な問題を、クライアントの意向で上書きする。それが普通の意思決定フローとして機能している。

自分がある案件で、明らかに問題のある認証の実装を指摘したことがある。JWTのsecretをハードコードした状態でのデプロイを求められた場面だ。「本番環境でそれをやると後々大きな問題になる」と説明したら、「クライアントのスケジュール優先で、後から直してもらえれば」と言われた。「後から直す」案件がその後どうなったかは想像の通りだ。

技術判断をエンジニアに委ねてもらえない案件は、作り手としてもリスクが高い。何か起きたときに「言われた通り作っただけ」では済まないことも多いし、そもそも自分の名前がコードに残るのに、納得できない実装をするのはしんどい。

直接取引との差と、自分なりの判断基準

直接クライアントと契約する場合、中間マージンは発生しない。同じ1000万円の案件なら、1000万円がそのまま売上になる。それ以上に大きいのは、要件の解像度と意思決定の速さだと思う。「なぜこの機能が必要か」を直接聞けるし、技術的な判断について相談できる相手がいる。

一方で、直接取引には別のコストが伴う。営業・提案・見積もり・契約書の交渉・入金管理、これを全部自社でやることになる。「案件が降ってくる」という意味での楽さは、代理店経由の仕事にはある。

今の判断基準は2つ：中間マージンの層が何段あるか把握できること、技術的な判断を尊重してもらえる可能性があるか。この2点が怪しい案件は、たとえ単価が魅力的でも断るようにした。そうすると受ける案件は減るけど、一件一件の密度と実入りは上がった気がしている。

まとめ

• 広告代理店経由の受託は2〜3層の中抜き構造になることが多く、エンドクライアントが出した予算の20%以下しか手元に来ないケースもある（そして最上位がいくら積んでいるかは分からない）
• スケジュールの感覚のズレは構造的なもので、エンジニアリングコストの見積もりを理解できる人間が中間にいないことが原因だと思う
• 「できない」「リスクがある」という技術的な主張が通らない文化は、作り手としてのリスクにもつながる
• 直接取引には営業コストが伴うが、中間マージンと技術的な裁量の面では明確に違う