WordPressのブログはそのままに、ホームページをAIと作った。WordPressを使わないページをドメインの入口に置くまで

WordPressのブログはそのままに、ホームページをAIと作った。WordPressを使わないページをドメインの入口に置くまで AI活用術

読む前に

こんな人向け: WordPressでブログを続けていて、ブログ以外の活動も増えてきたので、全体の入口になるホームページをAIと作りたい人

必要な前提: ブログと同じサーバーにファイルを置けること(記事の例はXserver)、.htaccess(サーバーの転送などを決める設定ファイル)を触る前に控えを取れること。HTMLを自分で書ける必要はない

読後にできること: WordPressを使わないホームページを作って、ブログを壊さずにドメインの入口(/)へ切り替える流れと、AIに任せる部分・自分で決める部分の分け方を、自分のサイトで使える

課題

2026年8月に、AIと一緒にブログを始めた。

そのうち、ブログ以外の活動も増えてきた。AIと作っているスマホのパズルゲームやアプリは、10月末の時点でiPhone・iPad向けに8本。10月27日には、そのうちの1本をブラウザでも遊べるようにして、ブログと同じドメインの/games/に置いた。

ところが、ドメインの一番上(noto-forest.com/)に来た人は、そのままブログへ転送されていた。ブログ以外も育ってきたのに、全体を紹介する入口が無い。

ブログはWordPressで動いている。ホームページもWordPressで作るのか、それとも別に作るのか。別に作るなら、動いているブログを壊さずに入口だけ差し替えられるのか。今回の悩みどころは、そこだった。

解決できるようにすること

WordPressのブログはそのままに、WordPressを使わないホームページをAIと作り、ドメインの入口(/)を、ブログを壊さずにそのホームへ切り替えられるようにする。

持ち帰ってほしいのは、次の3つ。

  • WordPressを使わないホームの作り方(1ファイルのページと、ブログの新着の読み込み)
  • 入口を切り替える前後で確かめることと、戻し方
  • AIに任せた部分と、自分が決めて直した部分の分け方

先に結論

10月27日にサイト全体の構成を決め、28日の未明に最初の下書きができて、同じ28日の14時22分ごろに/をホームへ切り替えた。

やったことを並べると、こうなる。

  • ホームは、WordPressを使わない1ファイルのHTMLにした。見た目の指定(CSS)も動き(JavaScript)も同じファイルの中に書いた
  • ブログの新着3本だけは、WordPressから自動で読み込む。読めないときは、ブログへのリンクだけが残る
  • 切り替えは、.htaccessから「/に来たらブログへ転送する」1行を外しただけ。前後で比べて、変わったのはホームとその画像、新しく置いたサイトマップの3つだけだった
  • HTMLを書く、画像を整える、サーバーに置く、前後を比べる、はAIがやった。何を載せるかを決めて、ずれを見つけて直させたのは自分だった

この記事でわかること

  • ブログ以外が増えたときに、ホームページをどこに・何で作ったか
  • WordPressを使わないホームに、ブログの新着を出す方法
  • AIの作った下書きのどこを、自分が直したか
  • /を切り替える前に決めておくことと、前後の確かめ方
  • 置いたあとに見つかった3つの直し

ここで、こう思う人もいるかもしれない。

「AIに頼めば、ホームページって簡単にできるの?」

作る部分は、確かに速かった。下書きから切り替えまで、同じ日のうちに進んだ。

でも、それで終わりではなかった。コンセプトの言い回し、キャラクターの絵の切れ方、ゲームとアプリの欄の重なり、タブに出るアイコン。「あれ、ここ違うな」と気づいて直させたのは、どれも自分のほうだった。速いのは作るところで、決めるのと直すのは人。この記事は、その両方の記録になる。

ブログ以外が育って、入口が要るようになった

10月27日の時点で、ドメインの中はこうなっていた。

  • /blog/: ブログ(WordPress)
  • /games/: ゲームの一覧と、ブラウザで遊べるゲーム(ゲームとアプリを担当しているAIが置いている。WordPressではない)
  • /: ブログへ転送(301)

この日に、全体の名前を「Noto-Forest」にそろえて、ブログ・ゲーム・アプリをその下に並べる形に決めた。ブログは「AI活用Lab」という名前で、Noto-Forestの一部門という扱い。そして/には、全体を紹介するホームを置く。

ホームは、ブログとは別の、WordPressを使わない静的なページ(サーバーに置いたファイルをそのまま返すだけのページ)として作ることにした。

ドメインの中の3つの場所。一番上の「/」はWordPressを使わない1ファイルのホーム、「/blog/」はWordPressのブログ、「/games/」はゲームの一覧。ホームはブログの新着3本をWordPressのREST APIから、ゲームとアプリの最近の更新3件を/games/のJSONから読む。ブログとゲームのページからはホームへ戻るリンクがある

最初のつまずきは、作り方より「誰が作るか」

自分は、ブログの運用と、ゲームとアプリの開発を、それぞれ別のAIに任せている。

構成を決めた同じ日、ブログ担当のAIは「ホームの中身はゲームとアプリ担当のAIが作る」という案を出した。自分も一度はその案でOKを出した。

でも、直前に「/のホームも、ブログ担当のAIの持ち場にする」と決めたばかりだった。

「ホームページの作成をゲーム側に投げたのは何故?ブログ側の持ち場では?」と聞き直すと、ブログ担当のAIは、ゲーム側にもともとあった「ホームページを作る」という作業の予定に引きずられた、と答えた。

そこで、ホームの中身・作成・切り替え・確認はブログ担当のAIが受け持ち、ゲームとアプリの名前・紹介文・アイコンは、ゲームとアプリ担当のAIの情報を正にする、と分け直した。

複数のAIに仕事を分けているなら、担当を決めた直後の提案が、その決定と合っているかを一度見直したほうがいい。決めたことと、それまでの予定が食い違うのは、こういう切り替わりのタイミングだったりする。

WordPressを使わずに作ったホームの中身

ホームは、index.htmlという1つのファイルと、画像のフォルダだけでできている。

上から順に、こんな欄を並べた(今の形)。

欄中身
ヘッダーブログ・ゲーム・アプリ・SNSへのメニュー
ヒーロー(一番上の大きな帯)見出し「ひとりとAIで、会社はどこまで育つのか。」、ひと言、ブログで使っているキャラクターの絵、「ブログを読む」「ゲームとアプリを見る」のボタン
Noto-Forestの事業モバイルアプリ・ゲームと、コンテンツ発信(ブログ)の2つ
SNSと動画X・YouTube・Instagram
ブログの新着記事3本(WordPressから自動)
ゲームとアプリの最近の更新3件(ゲームの一覧のJSONから自動)
ひとりとAIのメンバー運営者と、4体のAIのメンバー
Noto-Forestについて紹介文と運営者情報
フッタープライバシーポリシー・お問い合わせ

色は、アプリのアイコンなどと共通の紺を帯に使い、本文は明るい地にした。

ブログの新着は、WordPressのREST APIから読む

ホームのページ自体はWordPressを使っていない。でも、ブログの新着記事は自動で出したい。

そこで、WordPressに最初から付いているREST API(ほかのプログラムから記事の一覧などを読み出せる窓口)を、ホームのJavaScriptから呼ぶ形にした。中身を短くすると、こんな感じになる。

// ブログの新着3本を、同じドメインのWordPressから読む
fetch('https://noto-forest.com/blog/wp-json/wp/v2/posts?per_page=3&_embed=wp:featuredmedia')
  .then(function (r) { if (!r.ok) throw new Error(r.status); return r.json(); })
  .then(function (posts) {
    // 記事ごとに、アイキャッチ・日付・タイトルのカードを作って差し込む
  })
  .catch(function () {
    // 読めなかったら何もしない(最初から置いてある「ブログを見る」リンクが残る)
  });

ポイントは、読めなかったときに何もしないこと。HTMLには最初からブログへのリンクを書いておき、読めたときだけカードに差し替える。WordPressが止まっていても、ホームが空っぽにはならない。

手元のPCで下書きを開いたときも、新着の3本はちゃんと読めた。WordPressのREST APIが、別の場所からの読み込みを許す応答を返していたため。

ちなみに、「WordPressなし」はホームのページそのものの話。新着の3本、お問い合わせのフォーム、ブログのプライバシーポリシーは、WordPressのブログ側のものを使っている。

ゲームとアプリの更新は、ゲームの側が書くJSONから読む

最初は、ゲームとアプリを全部、ホームの中に手で並べていた。これは置いたあとに形を変えた(後で書く「置いたあとに直した3つ」の1つ目)。

今は、ゲームとアプリ担当のAIが、新しいゲームを出したり更新したりするたびに/games/recent.jsonというファイルを書き換える。ホームはそこから3件を読むだけ。こちらも、読めないときは一覧へのリンクと「8本を公開しています」の一文が残る。

計測

アクセスの計測は、ブログと同じGoogle アナリティクス(GA4)にした。

作るのは速かった。決めて、直すのは自分だった

最初の下書きができたのは、28日の未明。そこから昼過ぎの切り替えまでの間に、自分の一言で直したところを並べると、こうなる。

自分が言ったこと何がずれていたかどう直したか
「全体のコンセプトは『ひとりとAIで会社はどこまで育つのか。』のはず」見出しや説明文が、そのコンセプトに沿っていなかったAIが、Xのヘッダーや動画で使ってきた言い回しを記録から確かめ、見出し・ひと言・検索に出る説明文・紹介文をそろえた
「信じたから失敗したのではない。ルールが甘かったから失敗した」紹介文に「AIの提案をそのまま信じて失敗したり」と書かれていた「AIと共に作業する中で様々な失敗をしたり」に直した
「ホームページにもキャラクターを載せるべきでは?」AIはキャラクターを出さない案を「公開の決まりに触れずに済む」と推していた。でもこのキャラクターは、すでにブログで公開しているヒーローの右に1回だけ置いた
「画像が見切れている」公開中のブログの絵から切り出したため、頭と袖が枠で切れていた切り出しをやめ、元になった上半身の絵を縮めて使った
「会社のホームページだと仮定して見直してほしい」運営者情報、事業の紹介、メンバーの紹介が足りなかった次の節のとおり足した
「Instagramも載せて良いのでは?」SNSの欄がXとYouTubeだけだった3つともアイコン付きで並べた
「ブラウザで遊べるゲームと、アプリの欄、ほぼ被りますよね?」同じゲームが2つの欄に出ていた「ゲームとアプリ」の1つの欄にまとめた
「ブログとゲームのページには、ホームへ戻る道が要りますよね?」ブログやゲームのページから、ホームへ戻るリンクが無かった切り替えの日に、ブログのメニューの先頭に「Noto-Forest」、ゲームのページに「ホーム」を足した

左の列は、どれも自分の一言から始まっている。AIは言われてからの直しは速かった。ただ、ずれそのものは、AIの側からは出てこなかった。

2行目は、自分の中でも引っかかったところ。失敗したのは、AIを信じたからではなく、AIと作業するときの決まりごとが甘かったから。ホームは自分たちを紹介する場所なので、こういう言い回しこそ、人が読んで決めたほうがいい。

ホームを作って置くまでの、AIがやったことと自分が決めたこと。AIはHTMLを書く、画像を整える、サーバーに置く、前後の応答を比べる、サイトマップを送る。自分はコンセプトと載せる中身を決める、ずれに気づいて直させる、サーバーに書き込むたびに承認する、切り替えの時期を決める

会社ではないけれど、「会社の顔」として見直した

Noto-Forestは法人ではない。それでも、ブログ・ゲーム・アプリ・SNSの全部の入口になるなら、初めて来た人には「どこの誰がやっているのか」が分かったほうがいい。

そこで、「このホームページが、ある会社のホームページだとしたら」という目で見直してもらった。AIが挙げた足りないものは、会社の概要、事業の紹介、お知らせ、サイト全体の問い合わせとプライバシーポリシー、メンバーの紹介。全体を見渡す役のAIにも判断を求めて、次の形に落ち着いた。

  • 「Noto-Forestについて」に運営者情報を置く。屋号、運営者名、始めた時期、事業、お問い合わせ。屋号には「個人の屋号です。法人ではありません」と書き添える。住所や電話番号は載せない
  • 事業は2つ(モバイルアプリ・ゲームと、コンテンツ発信)。SNSと動画は事業ではなく「届ける場所」として、事業の欄の外に分ける。事業に入れていない試作は載せない
  • 「ひとりとAIのメンバー」の欄で、運営者と4体のAIを紹介する。AIの絵は、それぞれの絵を管理している側が公開してよいとしたものだけを使い、「メンバーの絵は、AIで生成しています。」と書き添える

SNSと動画を事業の外に分けたのは、全体を見渡す役のAIの指摘。事業の欄の中に「届ける場所: X・YouTube」と書いてあると、3つ目の事業に読めてしまう、という理由だった。

もう1つ、見直しのときにAIが気にしていたのが、会社法との関係。会社法の第7条は、会社でない者が、名前や商号に会社だと間違われる文字を使うことを禁じている。対象になるのは本文ではなく名前と商号だ、と全体を見渡す役のAIが条文で確かめて、守ることは次の2つにした。

  • 名前に「株式会社」「合同会社」「Inc.」などを付けない
  • 「代表取締役」のような法人の役職名を名乗らない

見出しの「ひとりとAIで、会社はどこまで育つのか。」は、名前でも商号でもない言い回しなので、そのまま使っている。これはAIが条文を読んで整理したことで、専門家に確かめたものではない。個人で屋号を出す人は、自分でも条文を確かめてほしい。

切り替えは、転送の1行を外すだけにした

ここからが、動いているブログを壊さずに入口を差し替える部分。

1. まず、検索に出ない仮の場所で確かめる

最初は、本番のドメインの中の仮の場所(/home-preview/)に、検索に出さない設定(noindex)を付けて置いた。本番のサーバーで、新着3本が読めること、画像が欠けないことを見てから、次へ進んだ。

手元では、幅390px(スマホの幅)で横にはみ出さないことも確かめている。

2. 切り替える前に、5つのことを決める

/を切り替えると、ドメイン全体の見え方が変わる。先に次の5つを決めた。

決めること決めたこと
Search Console(Googleの検索の管理画面)の範囲ドメイン全体で登録してあったので、設定は変えない
robots.txtWordPressが出しているまま変えない
サイトマップホームとゲームのページ(7つのURL)を書いたサイトマップを新しく置き、Search Consoleに送る
ads.txt(広告の販売者の情報)ブログ側のものへの転送のまま変えない
計測ブログと同じGA4

もう1つ、広告の審査(Google AdSense)はドメイン全体を見る。だから、/の切り替えは次の申請より前に済ませて、落ち着いてから申請する、という順番も決めた。

3. 置く作業もAIに任せ、書き込むたびに自分が承認した

サーバーへは、ゲームとアプリ担当のAIがすでにSSH(サーバーに安全につなぐ方法)でファイルを置いていた。同じ方法なら、ブログ担当のAIにも置いてもらえる。後回しにする理由も無いので、自分から「11月2日を待たずに進めたい」と伝えて、前倒しにした。

条件は1つ。サーバーへ書き込む操作は、そのたびに自分が承認する。読むだけの操作(今の設定の控えを取る、応答を確かめる)は、AIがそのまま進めてよい。

4. 切り替えは、最後に1行外すだけ

切り替えの手順は、こうした。

  1. 今の.htaccessとトップのindex.htmlの控えを取る(index.htmlは、サーバーを借りたときに入っていた初期ページだった)
  2. ホームのファイル(検索に出さない設定を外した版)を、ドメインの一番上に置く
  3. 新しいサイトマップを置く
  4. 最後に、.htaccessから「/に来たらブログへ転送する」1行だけを外す

.htaccessをいじるのは最後の1行だけにして、ほかの規則には触らなかった。転送の1行が外れると、/は「実在するフォルダ」として扱われ、そこに置いたindex.html、つまりホームが返るようになる。

5. 前後で同じものを比べる

切り替えの前と後で、同じURLの応答を比べた。見たのは「全部正常か」ではなく、「切り替えで変わったものが、変えるつもりのものだけか」。

切り替えの前後で比べた応答。変わったのは、/(ブログへの301転送から200のホームへ)、新しく置いたサイトマップ、ホームの画像の3つだけ。/blog/、robots.txt、sitemap.xml、ads.txt、/games/と各ページ、ブログの記事、実在しないパス、httpからhttpsへの転送は前と同じだった

変わったのは、/(ブログへの転送から、ホームの表示へ)、新しいサイトマップ、ホームの画像の3つだけ。ブログ、robots.txt、ads.txt、ゲームのページ、ブログの記事、実在しないURLの扱いは、前と同じだった。

「お、ブログには本当に何も起きていない」。ここで、ようやく一息つけた。

戻し方も先に決めておいた。控えた.htaccessを元に戻せば、/はブログへの転送に戻る。置いたホームのファイルは残っていても、表には出ない。

6. 戻る道とサイトマップ

同じ日に、ブログのヘッダーとフッターのメニューの先頭に「Noto-Forest」(/へのリンク)を足した。項目名を「ホーム」にしなかったのは、ブログのトップと区別できなくなるため。ゲームのページには、ゲームとアプリ担当のAIが「ホーム」のリンクを足した。

ブログのパンくずリストの「ホーム」と、スマホの下のボタンの「ホーム」は、ブログのトップを指したままにしている。使っているWordPressのテーマには、この行き先を変える設定が無かったため。

Search Consoleには、新しいサイトマップと、ブログのサイトマップの両方を送った。送る前に見ると、それまでSearch Consoleに送ったサイトマップは1つも無かった。ブログのサイトマップはrobots.txtに書いてあるだけだった。

最後に、仮の場所(/home-preview/)はサーバーから消した。

置いたあとに直した3つ

切り替えて終わり、にはならなかった。公開してから数日のうちに、3つ直している。

1. ゲームとアプリを、手で並べるのをやめた(10月31日)

10月30日に新しいアプリが1本増えたとき、ホームにも足した。でも、ヒーローに並べていたアプリのアイコンへの追加が漏れていた。

その翌日、ゲームとアプリ担当のAIから、ホームの「ゲームとアプリ」を、/games/recent.jsonから読む「最近の更新3件」に替える案が来た。新作のたびに手でホームを直す形だと、また漏れかねない。案のとおりに替えて、リリースのたびにホームを直さなくてよくなった。

2. ヒーローのアイコン8つを、ボタン2つに替えた(11月1日)

ヒーローには、アプリのアイコンを8つ並べていた。自分が見返して気になったと伝え、AIと理由を整理すると、こうなった。

  • 8つとも行き先がゲームの一覧で、メニューや下の欄と重なっている
  • 名前が出ないので、何のアプリか分からない
  • 新作のたびに手で足す必要があり、実際に1回漏れた
  • スマホでは2段に折り返して、本文を下へ押し下げる

アイコンを外して、「ブログを読む」「ゲームとアプリを見る」の2つのボタンにした。スマホの幅でも、2つが1行に収まる。

3. タブのアイコンが、ゲームのアイコンになっていた(11月1日)

ブラウザのタブに出る小さなアイコン(ファビコン)が、Noto-Forestのものではなく、一筆書きパズル「雪里の火守」のアイコンになっていた。

気づいたのは自分。「サイトのアイコンが、ゲームのアイコンになっていませんか?」と聞くと、AIが調べて、最初の下書きのときから、ホームのアイコンの指定がアプリ一覧用のゲームのアイコンのファイルを指していたと分かった。ブログのサイトアイコンを指すように直した。

アイコンは、ページの中を見ているだけでは目に入りにくい。タブやブックマークで初めて気づく類いのずれだった。

置き直したあとに確かめるときは、ブラウザのキャッシュで古い版が出ることがある。URLの末尾に?v=2のような文字を付けて読み直すと、新しい版かどうかを確かめやすい。

ホームをAIと作って置くときのチェックリスト

作るとき

  • ホームを誰(どのAI)が作るかを決め、直前の決定と食い違っていないかを見直した
  • 見出しとひと言は、すでに外に出している言い回し(SNSのヘッダー、動画など)とそろえた
  • 外から読み込む部分(ブログの新着など)は、読めないときにリンクが残る作りにした
  • 幅390px前後で、横にはみ出さないことを見た
  • タブのアイコン(ファビコン)が、自分のサイトのものを指している

載せる中身を決めるとき

  • 「ある会社のホームページだとしたら」という目で、運営者情報・事業・問い合わせが足りているかを見た
  • 法人でないなら、名前に「株式会社」などを付けず、法人の役職名を名乗っていない
  • 載せる絵や名前は、それを管理している側が公開してよいとしたものだけ
  • 同じものが2つの欄に出ていない。新作のたびに手で直す欄が無い

切り替えるとき

  • 検索に出ない仮の場所で、本番のサーバーで一度見た
  • Search Consoleの範囲、robots.txt、サイトマップ、ads.txt、計測を先に決めた
  • .htaccessとトップのindex.htmlの控えを取った
  • .htaccessの変更は「/の転送」の1行だけにした
  • 前後で同じURLの応答を比べ、変わったのが変えるつもりのものだけだと確かめた
  • 戻し方(控えの.htaccessを戻す)を決めてある

置いたあと

  • ブログやほかのページから、ホームへ戻るリンクを足した(項目名はブログのトップと区別できる名前にした)
  • Search Consoleにサイトマップを送り、ブログのサイトマップも送ってあるかを確かめた
  • 仮の場所を消した
  • 新しい版はキャッシュを避けて(URLの末尾に?v=2など)確かめた

こんな人に向いている

  • WordPressでブログを続けていて、ブログ以外の活動(アプリ、動画、ショップなど)もまとめて紹介したい人
  • ブログのテーマや設定には手を入れずに、ドメインの入口だけを作り直したい人
  • HTMLは書けないけれど、AIに作ってもらったものを読んで、直してほしいところを言える人

逆に、ブログそのものをWordPressから別の仕組みへ移したい人には、この記事は答えにならない。ブログは今もWordPressのまま動いている。

まとめ

ホームページは、AIと作ると速くできた。下書きから切り替えまで、同じ日のうち。WordPressを使わない1ファイルのページでも、ブログの新着はREST APIから読めるし、/の切り替えは転送の1行を外すだけで済んだ。

ただ、速いのは作るところまでだった。コンセプトの言い回し、紹介文の一言、キャラクターの絵、欄の重なり、タブのアイコン。ずれに気づいて直させたのは、どれも自分。切り替えも、決めておくことを先に並べて、前後で同じものを比べたから、ブログを壊さずに済んだ。

項目内容
結論WordPressのブログはそのままに、WordPressを使わない1ファイルのホームを作り、転送の1行を外して/をホームへ切り替えた。前後で変わったのは、ホームとその画像、新しいサイトマップだけだった
教訓作るのはAIに任せても速い。何を載せるか、どこがずれているかは、人が読んで決める。切り替えは「変えるもの」を最小にして、前後で同じものを比べる
対象読者WordPressでブログを続けていて、全体の入口になるホームページをAIと作りたい人

同じ状況に陥ったときの回避策

  • ホームの見出しや紹介文は、AIの下書きをそのまま使わず、すでに外で使っている言い回しと並べて読む
  • 外から読み込む欄は、読めないときにリンクが残る作りにする。新作のたびに手で直す欄は作らない
  • /の切り替えは、.htaccessの1行だけを変え、控えを取り、前後で同じURLの応答を比べる
  • 置いたあとは、タブのアイコンやメニューの戻り道のように、ページの中を見ているだけでは目に入らない所も確かめる

次に読むなら

ホームの横にある「ゲーム」のページは、スマホのアプリをブラウザ版にして、ブログと同じドメインの/games/に置いたもの。既存のサイトの下に、ブログを壊さずに置く前後の確認は、こちらでも同じ考え方を使っている。


この記事は、筆者が実際に個人で運営しているサイト(ブログ・ゲーム・アプリの入口)の作成記録(2026年10月27日〜11月1日)を基に、独自調整したAIが下書きを作成し、筆者が事実確認・編集を行った上で公開しています。

トップへ戻る
タイトルとURLをコピーしました