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っぽい見た目を避けるには配色とトーンの具体指定が効く
- モックのコードは使い捨て。本番流用はしない