SiteForge登場｜本格プレミアムなAIウェブサイトを作るエンジン

AIのウェブサイト作成ツールには、どれも同じ根本的な問題があります。AIがデザイン、レイアウト、タイポグラフィ、色、余白、レスポンシブ対応のすべてを一度で行い、すべてがうまくいくことを願うのです。うまくいくこともあります。でも多くの場合、いかにも「AI」らしいものができあがります。見慣れたレイアウト、無難なフォント、予想どおりの配色。10個並べると、1つに溶け込んでしまいます。

私たちは、この問題を根本から解決することにしました。今日は、SiteDropにこれまでで最大の変更を加えたことをお伝えします。SiteForgeです。AIが得意なことと不得意なことを切り分け、テンプレートではない、本当にオーダーメイドに見えるウェブサイトを作る、専用のサイトコンパイラエンジンです。

生のHTMLを書くAIサイトが、限界にぶつかる理由

ChatGPT、Claude、Geminiがウェブサイトを作るとき、書いているのは生のHTMLとCSSです。つまりAIは、グラフィックデザイナー、タイポグラファー、色彩の専門家、アクセシビリティの専門家、フロントエンド開発者を、1回の応答の中で同時にこなさなければなりません。

その結果は、それなりに見事です。でも、はっきりとした限界があります。

• タイポグラフィは当て推量です。AIは、学習データで見たことのあるフォントを選びます。モジュラースケールも、計算されたトラッキングも、ウェイトの段階もありません。見出しと本文は、ただ「まあまあ見える」だけです。
• 配色は表面的です。メインカラーとアクセントカラーは手に入りますが、体系的に導き出された背景色、暗い帯、コントラストを確認した落ち着いた色、操作時の状態の段階はありません。
• レイアウトが繰り返されます。AIは、何千回も見てきた無難なパターンに落ち着きます。ヒーロー → 特長 → お客さまの声 → CTA。毎回です。
• レスポンシブ対応がもろい。メディアクエリは、計算されたものではなく推測されたものです。公開してから初めて気づくような壊れ方が、スマホで起きます。

これはAIの欠陥ではありません。安全網のない形式（生のHTML）で、すべてを一度にAIにやらせていることの欠陥です。

SiteForgeのアプローチ：ジェネレーターではなく、コンパイラ

SiteForgeは、根本的に違う方法で動きます。AIにHTMLを書かせる代わりに、作業を2つの層に分けます。

1. AIが、創造的な判断を行う。構成（どのセクションを、どの順番で入れるか）、ブランドの配色、フォントの組み合わせ、文章、画像の方向性を選びます。それを、生のマークアップではなく、構造化された仕様、つまりSiteSpecとして出力します。
2. コンパイラが、エンジニアリングを担当する。確定的なエンジンがSiteSpecを読み取り、保証されたコントラスト比、計算された文字スケール、適切なレスポンシブのブレークポイント、なめらかな背景の切り替え、動くナビゲーションのアンカーを備えた、ピクセル単位で完璧なHTMLを出力します。毎回です。

プログラミング言語のコンパイラを思い浮かべてください。プログラマーは高水準のコード（創造的な意図）を書き、コンパイラが最適化された機械語（磨き上げられたウェブサイト）を出力します。プログラマーは、メモリやCPUのレジスタを管理する必要はありません。それはコンパイラの仕事です。

何が生まれるのか

違いは、さりげないものではありません。SiteForgeで作ったサイトは、1つ1つが別の制作会社のデザインのように見えます。システムが、それぞれの業界と雰囲気に必要なものを理解しているからです。

• 厳選されたタイポグラフィの組み合わせ：「Googleフォントから選ぶ」だけではありません。入念にテストした見出し用と本文用のフォントのペアをライブラリとして用意しました。雑誌のような法律事務所にはPlayfair DisplayとInter、ムードのある理容室にはBebas NeueとInstrument Serif、モダンなSaaSにはSpace GroteskとDM Sans。それぞれにモジュラースケール、トラッキングの段階、ウェイトの体系、行間の設計があります。
• 体系的な配色：すべての配色は、Radix方式の完全なシステムです。背景、サーフェス、文字、控えめな色、さらに淡い色、罫線、アクセント（ホバーとアクティブの状態つき）、サポートカラー、暗い帯、チップの背景。すべてWCAG AAに照らしてコントラストを確認しています。
• デザインのトリートメント：AIが視覚的な処理を選びます。グラデーション、影、角丸、サーフェスのテクスチャ（粒状、ドット、グリッド）、区切りのスタイル（斜め、曲線、アーチ）、画像のフレーム。コンパイラが、それをすべてのセクションに一貫して適用します。
• 背景のリズム：隣り合う2つのセクションが、同じ背景になることはありません。AIがブロックをどの順番で並べても、コンパイラが自動で背景を交互に切り替え、視覚的なゆとりを生み出します。
• 確実に動くナビゲーション：すべてのアンカーリンクが、きちんと移動先につながります。切れたリンクは自動で調整されます。AIがナビを省いても、補って作られます。これは確定的に処理されるため、「どこにも行かないスクロール」のCTAはありません。

20種類以上の、専用ブロック

SiteForgeは、文字を差し替えるだけのテンプレートではありません。エンジンには、AIが組み合わせて使える、豊富なブロックのライブラリが入っています。

• ヒーローのバリエーション：全面表示、右パネル、左パネル、背景分割、コラージュ。メディアの位置、文字の配置、数値の配置、タグカードを調整する、構図のコントロールつき。
• コンテンツのブロック：特長のグリッド、アイコンのグリッド、交互に並ぶ行、数値のカウンター、タブ付きのコンテンツ、手順やタイムラインのステップ、スタッフのカード、プロジェクトのギャラリー。
• 社会的な証明：お客さまの声のカルーセル、SNS投稿の埋め込み、ロゴの帯、ビフォーアフターのスライダー、事例のブロック。
• コンバージョン：料金プラン、予約のCTA、最後のCTA、FAQのアコーディオン、地図連携つきの問い合わせフォーム。

すべてのブロックには、専用のCSS、専用のレスポンシブな動き、専用のコントラストと余白のロジックがあります。すべて確定的で、すべてテスト済みです。

プレイブックのアーキテクチャ

これを拡張しやすくしているのが、プレイブックというパターンです。コンパイラは、プレイブックの純粋な関数です。プレイブックを入れ替えれば、同じエンジンで、別のデザイン言語が手に入ります。

プレイブックには、次のものがまとめられています。

• 文法：AIが従う、創造的な指示書。
• 自己説明型のスキーマ：AIが出力に使う構造化された仕様です（出力を制約しながら、AIにその言語を教えます）。
• ブロックのレンダラー：それぞれのセクションの種類のための、マークアップの関数。
• ベースのCSS：決定した配色とフォントの組み合わせから生成される、デザインシステムのトークン。
• デザインのリゾルバー：AIの創造的な選択を、エンジンが使えるトークン（コントラストの段階、ウェイトの段階、レスポンシブのクランプ）に変換します。

その結果、AIが数行の創造的な指示を書くと、エンジンが、制作会社なら何千ドルも請求するようなウェブサイトを仕上げます。

あなたにとっての意味

SiteDropの作成フロー、つまり事業についての質問に答えて雰囲気を選ぶ方法を使うと、手に入るサイトは、今ではSiteForgeで作られています。体験は同じです（質問に答えると、サイトができる）。品質は、一段階変わりました。

• プレミアムなタイポグラフィ：ランダムなフォント選びではなく、デザインシステムに本当に従ったもの。
• 奥行きのある配色：サーフェス、帯、ホバーの状態、コントラストの保証。
• 呼吸するレイアウト：適切な余白、背景の切り替え、視覚的な階層。
• 最初からスマホで完璧：レスポンシブな動きはエンジンに組み込まれていて、AIの推測にまかせていません。
• 動く問い合わせフォーム：連絡先のデータは、確定的に正規化されます（E.164形式の電話番号、表示用のラベル、住所の整形）。

HTMLは、これまでどおりあなたのものです。ダウンロードして、編集して、どこにでも公開できます。違うのは、最初から手に入るものが、格段に良くなっていることです。

まとめ

AIは、創造的な判断がすばらしく得意です。事業にふさわしい雰囲気、文章、構成を選ぶことです。一方、その判断を、洗練されて、アクセシブルで、レスポンシブなウェブサイトにする精密なエンジニアリングは、あまり得意ではありません。

SiteForgeは、AIに得意なことを任せ、残りを品質を保証する確定的なエンジンが引き受けます。その結果、「AIっぽい」ではなく、本当にプレミアムに見えるAIサイトができあがります。