AIはホーム、Pricing、Blogをすばやく生成できますが、ボタン、フォント、余白、CTAの不一致も生みやすいという課題があります。本記事では、FigmaがAgentにキャンバスを開放する製品方針、デザインシステムに関する研究、We0.aiのウェブサイト構築機能を踏まえ、Br...
生成AIは通常、その時点で与えられたタスクからページの目的を理解します。ホームページはブランドの第一印象、Pricingはプラン比較、Blogは記事の読了を重視します。毎回ゼロから生成すると、モデルは個別の問題ごとに「見た目には妥当な」答えを探すため、局所最適が生まれます。
これは単なる美観の問題ではありません。視覚的な不統一は訪問者の理解コストを高め、保守、コンテンツ公開、継続的な実験も遅らせます。SaaS、AIプロダクト、B2B企業にとって、公式サイトはブランド紹介、プロダクト教育、コンテンツ配信、リード獲得を同時に担うことが多くあります。ページのルールが崩れると、影響を受けるのは獲得ファネル全体です。
Design Systemは、デザイナーだけが読む規範ドキュメントではありません。ブランドに関する意思決定を、チームとAIの双方が再利用できる「インターフェース」に変換するものです。少なくとも、次の4つの層で構成されます。
研究からも、デザインシステムがあるだけで十分とは限らないことが示されています。49名のプロフェッショナル開発者を対象に、手作業による開発、デザインシステムのみを使用する開発、企業のデザインシステムと組み合わせたAI支援開発を比較した統制実験では、デザインシステムを認識するAIが納期、タスクの完全性、成果物の安定性を改善できることが示されました。ただし論文では、実験タスク、企業サンプル、社内ツールの背景が結論の外部適用範囲を制限すると注意喚起しています（arXiv：Design-System-Aware Development with AI）。ウェブサイト構築チームにとっての示唆は、ルールをPDFの中に留めず、実際の生成とチェックのフローに組み込む必要があるということです。
ブランドカラーを「テクノロジーブルー」といった抽象的な表現から、color.brand.primary、color.surface.muted、color.text.strongのような実行可能なセマンティックトークンに変換します。同様に、フォントサイズ、コンテナ幅、余白も、AIが各ページで18px、19px、21pxを自由に生成するのではなく、限られた尺度として定義します。
Tokenの価値は、一元的に変更できる点にあります。ブランドのメインカラーを調整する際、チームはページごとに十数種類の似た青色を探す必要がありません。またAIに明確な選択肢を与えられます。「見栄えのよい青を選ぶ」のではなく、「メインCTAにはprimary、次の操作にはsecondaryを使う」と指示できます。
ボタンは色や角丸だけでなく、階層、状態、サイズ、アイコンの位置、無効状態、ローディング状態まで明確に定義すべきです。カードについても、タイトル、概要、メタ情報、操作エリアの関係を規定する必要があります。コンポーネントの定義が明確であるほど、AIがPricingとBlogで別のボタンを新たに発明する可能性は低くなります。
グローバルスタイルは、フォントスタック、見出し階層、リンク状態、フォーカススタイル、段落間の余白、コンテンツの最大幅、レスポンシブブレークポイントなど、ページ間で共有される骨格を管理します。「ブランドらしさ」を単一ページのデザインから、サイト全体のデフォルト動作へと変換します。
CTAには、視覚的なルールとビジネス上のルールの両方が必要です。どの場面で「無料で始める」を使い、どの場面で「デモを予約する」を使うのか、ボタンはどのページに遷移するのか、フォームでどの項目を収集するのかを定義します。CTAを統一することは、すべてのページに同じ文言を置くことではありません。異なる意図を、明確で追跡可能なコンバージョン経路に結び付けることです。
生成を始める前に、次のような意思決定チェックリストを作成することをおすすめします。「高級感があり、モダンで、統一感のあるデザインにする」という一文よりも、人とAIの双方が正しく実行しやすくなります。
| レイヤー | 定義する内容 | 確認用の質問の例 |
|---|---|---|
| Token | 色、フォント、フォントサイズ、余白、角丸 | ページでシステム外の色やフォントサイズを使っていないか？ |
| コンポーネント | Button、Card、Form、Nav | 同じコンポーネントに、説明のない複数のバリエーションが存在していないか？ |
| パターン | Hero、Pricing、導入事例、記事一覧 | ページ構成は対応するビジネス目的に合っているか？ |
| グローバル | コンテナ、ブレークポイント、見出し、リンク状態 | PCとモバイルのルールは一貫しているか？ |
| コンバージョン | CTA文言、リンク、フォーム、イベント | ユーザーの次のステップは明確で追跡可能か？ |
| ガバナンス | 命名、バージョン、レビュー、廃止 | システムを迂回せず、新しいページを追加するにはどうするか？ |
ホームページを生成する前に、サイトレベルの短いコンテキストを作成します。対象ユーザー、ブランドパーソナリティ、主要プロダクト、主要コンバージョン目標、ページ一覧、使用禁止表現、Token表、コンポーネント一覧などを含めます。ページ用のプロンプトではページ固有の内容だけを記述し、サイトレベルのルールは安定させます。
例えば、次のように記述します。
B2B SaaS公式サイトのPricingページを生成してください。サイトレベルで定義されたButton、Card、Typography、spacing tokensを継承し、メインCTAにはブランドの主要ボタンコンポーネントを使用してください。プランの違いは統一された表構造で表現し、未定義の色、フォント、角丸の値は追加しないでください。
このようなプロンプトでは、「ページを創造すること」と「システムに従うこと」を分けられるため、生成のたびに生じるランダム性を抑えられます。
ツールが構造化編集に対応している場合は、似たHTMLを新たに生成させるのではなく、既存のコンポーネントを呼び出してコンテンツを入力させることを優先します。コンポーネントには、PrimaryButton、FeatureCard、ArticleCard、LeadFormのように、明確な名前と適用場面を設定します。コンポーネント名、プロパティ、使用禁止条件が明確であるほど、ページをまたいだ再利用の信頼性は高まります。
アイデアを一文で入力するだけで、We0 AI が紹介サイト、ページ、CMS を生成し、公開後の顧客獲得と流入拡大を支援します。
無料登録で完全なプロジェクトを 1 つ生成
1 つの完全な生成フローを試し、最初のプロジェクトのドラフトをすぐに確認するのに最適です。
生成が完了したら、次の4種類の問題を確認します。
チェック結果は、そのページだけにパッチを当てるのではなく、ルールやコンポーネントの改善として反映させるべきです。そうしなければ、次の生成でも同じミスが繰り返されます。
ホームページでは、より強い視覚的な階層を使っても構いません。ただし、Heroのタイトル、本文の幅、メインボタン、サブボタンは、引き続きグローバル体系から継承すべきです。アニメーションやイラストでページ固有の特徴を出すことはできますが、基礎コンポーネントまで変形させるべきではありません。
Pricingで重要なのは、プラン名、価格、特典、制限、CTAを比較しやすくすることです。統一されたカード、タグ、ボタン状態を再利用することをおすすめします。特定のプランを強調したい場合は、既定の強調バリエーションで表現し、一時的にフォント、色、シャドウを変更するべきではありません。
Blogを別の独立したテーマのように扱うべきではありません。記事一覧、著者情報、カテゴリータグ、目次、本文幅、関連記事はすべてGlobal Stylesを継承すべきです。コンテンツ成長には安定したテンプレートが必要です。安定したテンプレートがあれば、コンテンツをまとめて制作し、メタデータを更新し、内部リンクを保守しやすくなります。
| 方法 | 初期の速さ | ページ間の一貫性 | その後の保守 | 適した場面 |
|---|---|---|---|---|
| ページごとに個別プロンプト | 速い | 低い | 高コスト | 一度きりのプロトタイプ |
| 既存ページのコピー | 中程度 | 中程度 | 分岐が生じやすい | ページ数が少ない場合 |
| Design System + AI | 初期投資が必要 | 高い | 集中的にガバナンス可能 | 企業公式サイトと継続的な成長 |
| ページごとの手作業デザイン | 比較的遅い | チームに依存 | 人件費が高い | 高度なカスタマイズが必要なプロジェクト |
これは「AIにデザイン上の意思決定を置き換えさせるか」という二択ではありません。より合理的な方法は、人がブランドとビジネスの境界を定義し、AIがその境界内でページを組み合わせ、コンテンツを入力し、反復的なチェックを実行することです。
スタートアップチームは、10個のToken、5つの主要コンポーネント、3つのページパターンから始めるとよいでしょう。完全なシステムを目指すあまり、公開を遅らせることを避けられます。マーケティングチームは、CTA、フォーム、記事テンプレート、内部リンクを優先して統一すべきです。これらの要素はコンテンツ公開とリードの受け渡しに直接影響するためです。Agencyやコンサルタントは、顧客ごとに独立したTokenセットとコンポーネントライブラリを構築し、同じ制作フローで複数のウェブサイトを納品できます。海外展開チームは、多言語テキストの長さ、フォントフォールバック、日付形式、市場ごとのCTAルールも追加で定義する必要があります。
We0.aiの公開プロダクト情報によると、ユーザーは自然言語で要件を説明し、複数のAgentで構成されたチームに実行可能なウェブサイトを生成させたうえで、ビジュアルキャンバス上で調整し、自分のドメインにデプロイできます。ページには、CMS、SEOおよびGEO最適化、複数のデザインスタイル、ドメインデプロイなどの機能も記載されています（We0.ai公式サイト）。このようなワークフローは、ウェブサイト構築の段階からデザインの一貫性を組み込むのに適しています。
ツールは実装コストを下げられますが、企業に代わってブランドルールを根拠なく決めるべきではありません。公開前には、責任者がブランド資産、事実に関する表現、プライバシー、コンプライアンス要件を確認し、実際のデバイスでレスポンシブ表示も検証する必要があります。
第一に、システムが厳格すぎると、すべてのページから階層や個性が失われます。あらゆる違いを禁止するのではなく、限定的で命名の明確なバリエーションを認めるべきです。第二に、コンポーネントの再利用はコンテンツ上の問題を隠す可能性があります。統一されたカードは、明確な価値提案や信頼できるプロダクト情報の代わりにはなりません。第三に、AIはコンポーネントを正しく呼び出しても、不正確または古い文言を入力する可能性があります。そのため、事実、価格、事例、機能については引き続き人が責任を負う必要があります。第四に、デザインシステムにはバージョン管理が必要です。ブランド、プロダクト、コンバージョン目標が変化した場合、古いコンポーネントには目印を付け、移行し、廃止する必要があります。
最も実用的な評価方法は、「すべてのページがピクセル単位で完全に同じか」ではありません。次の3点を確認することです。ユーザーがブランドをすばやく認識できるか、チームが低い摩擦で新しいページを追加できるか、訪問者が各ページで合理的な次のステップを見つけられるかです。
AIウェブサイト構築の本当の難しさは、魅力的なページを1つ生成することではなく、10ページ、数十ページを長期にわたって同じブランドに属するものとして保つことです。解決策は、Design SystemをAIが実行できるコンテキストに変換することです。Brand Tokensで基礎値を制約し、Reusable Componentsでインタラクションを再利用し、Global Stylesでサイト全体の表現を統一し、Consistent CTAでビジネス目標に接続します。そうすることで、AIは毎回ゼロから新しいテーマを作るのではなく、システムの中でウェブサイトを拡張できるようになります。迅速な公開と継続的なリード獲得を目指すチームにとって、まず最小限の実用的なデザインシステムを構築し、その後AIをBuild、Showcase、Grow、Leadsの一連のプロセスに参加させる方が、公開後にページごとの修正を繰り返すよりも、通常は安定した進め方です。
ひとことから始めて、数分で完全なサイトを手に入れましょう。
