AI ウェブデザインを五つのゲートで検証する方法

AI ウェブデザインは、今ではコーヒーを一杯淹れる間に、それらしいトップページを作れます。そのスピードは本物です。しかし、そこが罠でもあります。生成されたページは、実際に完成するずっと前に完成して見えるからです。コントラスト、見出しの順序、左右反転したレイアウト、デザイントークンの管理といった未完成の部分こそ、納品から三週間後にクライアントが見つけてしまう箇所です。ここでは、スピードを保ったまま驚きを減らすための手順を紹介します。合否が明確な五つのゲートを、順番どおりに通していきます。

なぜ生成されたサイトは、未完成なのに完成して見えるのか？

モデルは、スクリーンショットに映るものを最適化するからです。ヒーローセクション、三つの特徴カード、お客様の声の並び、フッター。どれも統計的に見慣れた要素なので、ページ全体が一目でプロフェッショナルに見えます。しかし、スクリーンショットには映らないものが、サイトを引き渡しの後も生き延びさせるかどうかを決めます。

アクセシビリティがその典型です。WebAIM Million 2026レポートによると、上位100万件のトップページのうち95.9%で、WCAG 2の失敗が検出されました。さらに83.9%では、低コントラストのテキストが見つかっています。そのようなウェブで学習したモデルは、同じ傾向を再現します。淡いグレーのキャプションを、クリーム色の背景に自信満々で配置してくるでしょう。

二つ目の見えない問題は、デザイン上の判断がどこに置かれているかです。生成されたページは、色、サイズ、余白を、マークアップの至るところに直接の値として散らばらせがちです。来期にブランドの青を変えたくなったら、四十個のブロックを探し回ることになります。これは保守コストであり、そのコストを払うのはモデルではなく、制作を担当するあなたです。

ですから、役に立つ問いは「AIでこのサイトをデザインできるか」ではありません。AIはドラフトを作れます。問うべきは「どの判断をAIに任せ、どこで成果物を確認するか」です。五つのゲートが、その答えになります。

ゲート1：ツールを開く前にブリーフを書く

期待外れのAI出力の多くは、一行のプロンプトにさかのぼります。「カサブランカのパン屋のウェブサイト」と書けば、モデルは対象読者、トーン、ページ構成、CTAのすべてを自由に決めてよいと判断します。しかも、見たことのあるパン屋サイトの平均から決めるのです。

うまくいくブリーフは、半ページに収まります。誰が訪れ、最初の十秒で何をしに来るのか。必ず存在すべき三つのページ。サイトの目的となる一つの行動（予約、問い合わせ、注文）。クライアントが気に入っている二つのサイトと、嫌いな一つのサイト。使用する言語と、文字の向きも含めます。アラビア語やヘブライ語で公開するなら、レイアウトが承認された後ではなく、今この時点で伝えてください。

最後の一点は、見た目以上に重要です。右から左へ書く言語（RTL）は、レイアウトの性質であり、翻訳の作業ではありません。何も伝えられていないモデルは、左揃えのデザインにアラビア語を貼り付けただけのものを作ります。ブリーフに向きを書くと、ツールが提案するレイアウトそのものが変わります。書くのに一文しかかかりません。

「モダンでクリーンに」といった形容詞は省きましょう。情報をほとんど含まないからです。「新聞の一面のように、情報密度が高く編集的な」と書けば、ずっと多くが伝わります。

ゲート2：ページではなく、方向性を求める

この仕事でAIがもっとも安上がりに使える場面は、探索です。三つから五つの異なる方向性を、ラフなレイアウトと書体の組み合わせとして出してもらい、何かを作る前に選びます。スケッチ六枚なら数分で済みます。クライアントに却下されたページを作り直すには、午後いっぱいかかります。

ここでは、コストを低く保つことが肝心です。方向性ごとに、AIで生成した写真を使った完成ページまで描かせないでください。クライアントは写真に惚れ込み、レイアウトと写真を切り離せなくなります。グレーのボックスと本物の見出しで十分です。三つのグレーボックスのレイアウトからクライアントが選べないなら、問題はブリーフにあります。それを無料で学べたことになります。

ツールのカテゴリについても、はっきり述べておきます。10Webのようなフルサイト生成ツールは、プロンプト、URL、Figmaファイルから完全なWordPressサイトを作ります。1サイト向けの年額プランは月$10からです。Durableのようなホスト型ビルダーは、数個の質問から中小企業向けの完成サイトまで、約30秒で作ります。どちらもゲート2には優れていますが、ゲート4には弱いです。判断を見せるのではなく、ツールが握ってしまうからです。選択肢を見るために使い、何年も保守するサイトの最終ビルドとして使うことには慎重であるべきです。

ゲート3：ビルドする前に、デザインを theme.json に固定する

多くのワークフローが飛ばすのがこのゲートです。そして、保守できるサイトと、デモしかできないサイトを分けるのもこのゲートです。方向性が決まったら、その判断をトークンに落とし込み、theme.json に書き込みます。カラーパレット、フォントファミリーとサイズ、スペーシングの尺度、コンテンツ幅です。以降、すべてのブロックは生の値ではなく、スラッグでトークンを参照します。

theme.json のリファレンスは、まさにこの目的のためにあります。ブロックテーマが、パレットと尺度を宣言する唯一の場所を与えてくれるのです。エディターはそれを操作用のコントロールとして提示します。ブランドの青が変わったら、一行を変えるだけです。クライアントがサイトエディターを開いたとき、自由な色相環ではなく、あなたのパレットから選ぶことになります。それだけで、ブランドから外れた編集という種類のミスを静かに防げます。

ここでAIが役立つのは、別の形です。選んだ方向性を渡して、トークンのセットを出してもらいます。そのうえで、二つのルールで確認してください。通常のテキストに使うすべての文字色と背景色の組み合わせは、WCAG AAの基準である4.5:1に達していなければなりません。比率はモデルの主張を信じず、自分で計算してください。そして、尺度は小さく保ちます。スペーシングは五、六段階、タイプスケールは六サイズ程度です。モデルは、ほとんど同じグレーを十四色も出してきがちです。そのうち十一色は削除してください。

このゲートを守れたかどうかを確かめる実践的な方法があります。完成したテーマを開き、どのテンプレートでも構いませんので、16進数のカラーコードを検索してください。見つかったら、判断がシステムの外に漏れています。

ゲート4：ネイティブブロックで組み、生成ツールをループから外す

ここでビルドします。モデルが提案した構造は、たいてい残す価値があります。セクションの順序、カラムの論理、密な領域と開けた領域のリズムなどです。一方、そこで生成されたマークアップは、たいてい残すべきではありません。承認された構造を、コアブロック（Group、Columns、Cover、Query Loop）で、自分のトークンを使って組み直してください。生成された出力は、ソースファイルではなく参考の下絵として扱います。

これは遅く見えます。しかし経験上、二ページ目からは速くなります。ネイティブブロックはトークンを継承し、サイトエディターに反応し、クライアントが編集しても壊れにくいからです。スタイルをマークアップに直接書き込む生成コードは、そのすべてに逆らいます。ページビルダーは、同じトレードオフのもう一方の端にあります。2026年2月にDivi 5として再構築されたDiviは、Proプランで年額$277のDivi AIを提供しています。Diviに標準化した制作会社にとって、それは正当な選択です。ただし、ブロックテーマとは別の製品であり、乗り換えのコストが異なります。見積もりには、その乗り換えコストを必ず織り込んでください。

AI生成がビルドの中で居場所を得るのは、反復的な層です。料金セクションのバリエーション、実際のものに近い形のプレースホルダーのコピー、クライアントが比べられる別のヒーロー配置などです。それぞれは、整えて登録すべき下書きパターンとして扱い、完成品として扱わないでください。

正直な限界が一つあります。プロジェクトに本物のインタラクション（絞り込みができるアーカイブ、独自のクエリロジック、JavaScriptによる挙動など）が必要なら、どのジェネレーターもそれを運べません。そこは開発者が書きます。AIの関与は、端の部分にとどまります。

ゲート5：スクリーンショットに映らないものを監査する

すべてのサイトで、同じ短い監査を同じ順序で行ってください。気分ではなく、習慣にするためです。

まずコントラスト。実際にレンダリングされたペアを確認します。画像の上のテキストや、モデルが考慮しなかった無効状態やホバー状態も含めてください。次に見出し構造。H1は一つだけ、見出しは飛ばさずに下がっていくこと、大きく見えるからという理由だけで選ばれた見出しがないこと。三つ目はキーボードです。ページ全体をTabキーで移動し、フォーカスが見えること、順序が読む順序に従うことを確認します。四つ目は、意味を持つすべての画像に代替テキストを、意味を持たない画像には空の代替テキストを付けることです。

五つ目の確認が、この監査を一般的なチェックリストと分けるものです。それは向きです。アラビア語やヘブライ語版があるなら、RTLで表示して、反転されなかったものを探してください。向きが逆になったアイコン、テキストの上に来てしまった被写体のヒーロー画像、margin-left ではなく margin-inline-start のような論理プロパティで書かれていない余白。これらは、このゲートで見つければ修正が安く、クライアントのスクリーンショットで見つければ恥ずかしい思いをします。

監査の証拠を残してください。ページごとの修正前後のペア、失敗した内容のメモ、変更内容のメモです。これによって「AIを使いました」という曖昧な主張が、納品物になります。そして、数週間前に自分で生成ツールを試したクライアントに対して、報酬を正当化する引き継ぎ文書の一段落にもなります。

ワンプロンプトのサイトビルダーについては？

役割はあります。ただし、その範囲は狭いです。ワンプロンプトのビルダーは、提案用の使い捨てプロトタイプ、週末のイベント用のランディングページ、何を望むのかを言葉にできないクライアントのための視覚的な出発点を作るには、よい手段です。Framerは、AIサイトジェネレーターと自由なキャンバス、無料プランを組み合わせており、そうした素早く使い捨ての視覚的作業に向いています。ベーシックプランは月$10からです。

サイトがWordPressで動き続ける必要がある場合、非技術系のクライアントが編集する場合、RTLの読者を対象とする場合は、使わないでください。結局、出力をブロックで組み直すことになるからです。プロトタイプには価値がありました。しかし、そのページは出荷する価値がありませんでした。自分がどちらを手にしているのかを知ることが、結局もっとも時間を節約します。

次のブリーフで試すこと

実際のプロジェクトを一つ選び、ゲート1とゲート3だけを実行してください。半ページのブリーフを書き、ページが一枚も存在しないうちに、選んだパレットと尺度を theme.json に固定します。時間を計り、前回のサイトが安定したデザインに到達するまでの時間と比べてください。結果が良ければ、残りの三つのゲートを一つずつ加えていきます。最後に出荷したサイトで、どのゲートがもっとも多くの苦労を省けたでしょうか。