AIネイティブなホームページ設計とは？AIに更新を頼めるサイトの作り方と5つのポイント

AIネイティブなHPは、更新のたびにAIを呼べるサイト

「AIを使ったホームページ」と聞いて思い浮かぶものは、人によって違います。AIで文章やデザイン案を作ったサイト、訪問者の質問にAIチャットが答えるサイト。どちらもAIを使っていますが、ここで扱うAIネイティブなHPとは別のものです。

• AIで作ったサイト：制作のときにAIを使う。公開後の更新方法は、これまでと変わらないこともある
• AIチャットを載せたサイト：訪問者の案内にAIを使う。記事の更新とは別の仕組み
• AIネイティブなサイト：公開後の更新にAIが加わる。担当者が頼むと、AIが下書きを作ってサイトに保存する

違いが出るのは、公開した後。サイトを作る作業は一度で終わりますが、お知らせや実績、ブログの更新は何年も続きます。AIネイティブな設計は、この続く部分の手間を減らすための考え方です。

AIは後から足すこともできます。ただ、記事の入力欄が整理されていない、AIに渡す権限が広すぎるサイトでは、つないでも任せられる作業が限られます。そのため、どこをAIに任せ、どこを人が確かめるかを設計の段階で決めておきます。決めることは次の5つです。

ポイント1：AIに任せる更新の場所を絞る

まず決めるのは、AIに頼む更新の範囲です。サイト全体を任せる必要はありません。よく頼むのは、お知らせ、制作実績、ブログ、採用情報など、決まった形で増えていく部分です。

会社案内やサービス紹介のレイアウト、共通のデザインは固定しておき、変更は制作担当へ相談する。この分担なら、AIが誤ってページの見た目を崩す心配も減ります。

当社のコーポレートサイトでは、更新する場所をニュース・実績・注目のサービスの3つに絞りました（移管後の運用はEmDashに移管すると変わるサイト運営で紹介しています）。更新する場所が3つなら、担当者も「何を頼めるか」を覚えやすいと思います。

ポイント2：入力欄を、項目ごとに分けておく

更新する場所が決まったら、入力欄を細かく分けます。1つの大きな本文欄に全部を書き込むより、タイトル、日付、本文、画像、画像の説明文といった項目に分けたほうが、AIは「どこに何を入れるか」で迷わないんですよ。

例えば記事なら、「タイトル」「導入文」「本文」「よくある質問」「紹介文」の欄に分けます。AIは欄ごとに合った文章を作って保存するので、人が後から確かめるときも、どの欄を読めばよいかが分かります。

当社が採用しているEmDashは、Cloudflareが公開しているオープンソースのCMS（記事や画像を管理する仕組み）です。本文も、見出しや段落、画像といった単位で保存します。ページ全体をHTMLのまま扱うより、AIが内容を読み取りやすく、一部だけを直す作業も頼みやすい形です。

項目を決めるときは、実際に載せたい記事を1本用意して、必要な情報を書き出してみてください。実績なら、画像、制作内容、期間、お客様の業種。この書き出しがそのまま入力欄の設計になります。

ポイント3：AIとサイトをつなぐ口と、渡す権限を決める

AIがサイトに下書きを保存するには、AIとサイトをつなぐ接続口が必要です。代表的なのがMCPです。MCPは、AIが外部のツールを操作するための共通の仕組みで、EmDashは標準で備えています。WordPressの場合は、公式チームが公開しているMCP Adapterというプラグインを追加して接続します（対応するWordPressのバージョンなど、前提があります）。

つなぐときに決めるのは、AIに何を許すかです。EmDashでは、接続用の鍵にあたるトークンを管理画面で作るときに、記事の読み取りや書き込み、画像の読み書きなど、許可の範囲と有効期限を選べます。実際にできる操作は、接続するユーザーの役割（権限）でも制限されます。

「公開はしないで」と文章で頼むだけでは、AIがその通りに動くとは限りません。下書きの保存までは許可し、公開は担当者が行う。こうした線引きを、権限の設定で決めておきます。当社の制作でも、AIが触れる範囲は御社のサイトだけに絞って設定しています。接続の手順と依頼文の例は、AIでホームページを更新する方法で紹介しています。

ポイント4：人が確認してから公開する流れを入れる

AIが作る下書きには、日付の間違いや、材料にない内容が入ることがあります。そのため、AIネイティブなサイトでも、最後に公開を判断するのは人です。

流れは3つの手順です。担当者がいつもの言葉で頼み、AIが下書きを保存し、担当者が公開前の確認画面（プレビュー）で確かめて公開ボタンを押す。違う所があれば、例えば「2段落目の日付を11月5日に直して」と、そのまま伝えれば直せます。

公開前に見る項目は、3つに絞っておくと迷いません。

• 名称、日付、金額、連絡先が材料どおりか
• リンク先が開くか、画像と説明文が合っているか
• スマホで表示したときに崩れていないか

公開した後で間違いに気づいたときの戻し方も、最初に確かめておきます。EmDashには記事の変更履歴があり、前の版に戻せます。ただ、サイト全体の復旧は別の手段になるので、どこまで戻せるかはホームページを自分で更新する方法で確かめてください。

ポイント5：よく頼む作業を、手順として登録しておく

毎回ゼロから頼み方を考えるのは、担当者の負担になります。お知らせの書き方、実績記事の項目、確認すること。こうした手順をAIに覚えさせておくと、短い依頼でも、項目と書き方のそろった下書きが返ってきます。

当社の制作では、AIエージェントのセットアップを付けた場合、よく頼む作業を、チャットで「/」に続けて名前を打つだけで呼び出せる手順（スキル）にまとめます。あわせて、管理画面での投稿ルールと、AIへの頼み方をまとめたマニュアルも用意するので、担当者が替わっても手順をそのまま引き継げます。費用の内訳はEmDashのサイトっていくら？料金と制作代行の費用を分けて解説をご覧ください。

今のサイトをどうするか。入り口は3つ

今のサイトを捨てる必要はありません。仕組みを見て、3つのうちどれで進めるかを決めます。

• 今のサイトを残す：会社案内などはそのままにして、お知らせやブログの部分だけ、AIで更新できる仕組みを足す。足せるかどうかは、今のサイトの構成を見て判断する
• WordPressから移す：記事や画像は移行機能で取り込み、デザインや機能は作り直す
• 新しく作る：最初から、更新する場所と入力欄を決めて組み立てる

お知らせだけを更新できるようにする構成は、サイト全体に入れず、ニュースだけ更新する設計で詳しく紹介しています。WordPressから移る手順は、WordPressから他のCMSへ移行する方法をご覧ください。

なお、AIネイティブなHPは「更新する側」の話で、AI検索に記事を読んでもらう対策とは別のテーマです。検索への対応はAI検索に対応するホームページとは？で扱っています。

ただ、予約や会員機能、ネットショップが中心のサイトは、WordPressなど別の構成のほうが合う場合があります。AIに任せたい更新が何かを先に整理し、それに合う仕組みを選ぶのが近道です。