AI vs 検索エンジンに対応したホームページ制作

: らら

2026.03.26

制作

〜AIネイティブWebという考え方〜

はじめに

今回は、ちょっとしたつぶやきに近い内容です。提案というよりは「最近こう思った」という整理です。

最近、AIと壁打ちしていると、ふと感じることがあります。

UX/UIでABテストされている事例は？
SEOに必要な構造は？
コピーはこれでいい？AIっぽくない？
構造化タグつくってとか・・
セマンティック構造枠ぐみつくってとか・・

こういうやり取り、今ほとんどの人がやっているのでは？と。。。。

制作プロセス自体が均質化していると感じます。

みんな同じものを作っていないか？

AIを使えば使うほど、ある結論に近づきます。

「最適解っぽいもの」は誰でも出せる

レイアウト → ベストプラクティスがある
UI → パターン化されている
SEO → 正解がかなり決まっている

そしてAIがそれを補強する。

結果として、似た構造・似た導線・似たコピーのサイトが量産される傾向があるのかと・・

思いついたこと

テンプレート × JSON-LDで全部よくないか？という考えに行きついたよぉ・・・

完成されたUX/UIテンプレート
構造化されたデータ（JSON-LD）

これらを組み合わせてHTMLを生成する形です。

例えばこんな感じのデータを持つ


  "theme": {
    "mainColor": "#0A84FF",
    "subColor": "#F5F5F5"
  },
  "hero": {
    "topImage": "hero.jpg",
    "nextImage": "subhero.jpg"
  },
  "menu": [
    "トップ",
    "製品情報",
    "私たちについて",
    "FAQ"
  ],
  "company": {
    "name": "株式会社〇〇",
    "address": "愛知県..."
  }
}

このJSONをもとにHTMLをテンプレートで生成する。

なぜこれが成立するのか仮定・・

① デザインはすでに完成している

UX/UIはここ数年でかなり成熟しており、基本構造は共通化されています。

ヒーロー → CTA → 信頼 → コンテンツ → フッター
LP構造もほぼ固定

② AIが構造を均一化している

同じような質問をAIにすることで、似た構造が生まれます。

SEO構造
見出し設計
コピー改善とか・・

③ 差は中身だけになる

文章の質
画像の質
事業の強さ、ブランド力とか

器ではなくコンテンツ勝負かと・・・

未来の形（仮説）

JSON-LD（構造化データ）＝本体

Web = JSONデータの集合
表示 = テンプレートでレンダリング
AI = JSONを読む

課題

① ユーザーと企業の思惑のズレ

ユーザー

比較したい
金額を知りたい
スペックを並べたい

企業

差別化したい
世界観を出したい
価格は出したくない

ユーザーは比較したいが、企業は差別化したいというギャップがあります。

② 標準化の壁

例えば

テーマ情報
カラー
レイアウト指定
コンポーネント定義

今のSchemaでは足りない

③ クリエイティブの価値

テンプレート化により役割が変化する可能性があります。

テンプレート化が進むと、

デザイナーの役割
フロントエンドの価値

「設計」と「体験」にシフトする可能性

AIネイティブWebという考え方

AIが理解しやすいWebを前提にした設計

従来との違い

従来

HTMLが主役
デザイン・レイアウト重視
人間が閲覧する前提

AIネイティブWeb

JSON-LDが主役
構造・意味重視
AIが解釈する前提

本質的な変化

「どう見せるか」から「どう構造化するか」へ

プレーンHTML × AI生成

レンタルサーバーではReactなどが使えないケースも多いため、現実的な解として以下があります。

解決策

プレーンHTMLをAIで生成する

構成

JSONまたはCSVでデータ管理
AIに読み込ませる
HTML生成
そのままサーバーにアップ

ビルド不要・環境依存なし

プロンプトはこんなんだよね？APIで組み込んで・・


あなたはプロのフロントエンドエンジニアです。
構造化JSONデータを元にHTMLテンプレートへデータを埋め込み、最終HTMLを生成してください。
# 入力JSON
{
  "title": "サンプルページ",
  "description": "これはテストです",
  "items": [
    {"name": "商品A", "price": "1000円"},
    {"name": "商品B", "price": "2000円"}
  ]
}
# HTMLテンプレート
{{title}}{{description}}
  {{#items}}
  {{name}} - {{price}}
  {{/items}}
# 要件
- JSONキーとテンプレートのプレースホルダー（{{key}}）を対応させる
- 配列はループ展開する（例：items[] → 繰り返し要素）
- null または未定義の値は空文字に変換
- HTML構文エラーがないようにする
- インデントを整える
- 生成結果はHTMLコードのみ出力（解説禁止）

さらに

テンプレートHTMLとJSONを公開領域に置くことで、誰でも利用可能になります。

AIがこの仕組みでAIブラウザーでレンダリングしてくれると企業の世界観的なもここでだせるかな・・・

再利用可能
量産可能
AIが理解しやすい

最終的な形

HTML → 表示用
JSON → 本体
AI → 生成エンジン

まとめ

AIによって制作プロセスは均一化している
UX/UIはすでに完成形に近い
JSON中心の構造が重要

AIネイティブWeb × プレーンHTML生成がいい？？

結論

これからは「作れるか」ではなく「どう構造化し、何を入れるか」

おまけ（かなり現実的な話）

正直なところ、ここが一番重要かもしれません。

高度なフレームワークを使わなくてもいい
レンタルサーバーでも問題ない
特別な開発環境も不要

つまり。。。。

AI + テンプレート + JSON

これだけで、十分戦える時代になっています。ほんとか・・w

構造がしっかりしていること
情報が整理されていること
AIにとって理解しやすいこと

さいごに・・・

技術よりも「設計」と「中身」がすべてになる

そんな時代に入ってきているのかもしれませんね・・・w

だれか、こんな仕組み作ってくれたらなぁと・・

UX/UI設計、SEO対策そんな甘くねぇよ・・とか・あると思いますが・・・では！！

名古屋のWeb制作会社