ビデデジの本体ホームページを、WordPressから自作サイトに作り替えました。

いつもAIを使っているので、今回だけ特別にAIを使ったわけではありません。 ただ、Codexを使ってサイト全体を作ったのは今回が初めてです。

ChatGPT Plusの無料お試しをきっかけに、 せっかくなら普段の相談だけでなく、 実際のホームページ制作までAIに任せてみようと思いました。

ページ構成を考えるところから、 WordPressをやめるかどうかの相談、 SEOや表示速度の確認、 旧サイトの分析、 HTML・CSSの作成、 デザインの調整まで、 ほとんどの作業でAIを使っています。

自分で一からコードを書いて作ったサイトというより、 ChatGPTと相談しながら内容を整理して、 Codexに実際のファイルを作成・編集してもらったサイトです。

最初のきっかけはGoogleのインデックス問題

もともとビデデジの本体サイトはWordPressで動かしていました。

ただ、Google Search Consoleを確認すると、 トップページ以外のページがなかなかインデックスされていませんでした。

「クロール済み - インデックス未登録」や 「検出 - インデックス未登録」、 「リダイレクト エラー」なども出ていて、 一度サイト全体を見直した方がよさそうな状態でした。

このあたりも、Search Consoleの画面をChatGPTに見せながら、 何が問題になっていそうかを確認していきました。

Lighthouseの結果もAIに見てもらった

次にLighthouseでサイトの表示速度も確認しました。

本体サイトでは、 First Contentful Paintは約1.3秒だった一方で、 Largest Contentful Paintは約6.2秒でした。

数字だけ見ても原因までは分かりにくかったので、 LighthouseのJSONデータもChatGPTに読み込ませて、 どこが重そうなのかを見てもらいました。

すると、 大きめの画像や外部スクリプトなど、 WordPressサイトとして積み重なった要素がいくつも見つかりました。

そこで、 「WordPressを頑張って軽くするより、 もう自作にした方がよくない？」 という話になりました。

そもそもWordPressが必要なかった

改めて考えてみると、 ビデデジの本体ホームページでは、 記事をほとんど投稿していませんでした。

置いているのは、 ビデデジについての紹介、 お問い合わせ、 ポリシー、 YouTubeやWebツールへの案内など、 ほぼ固定ページだけです。

ブログはBloggerで書いているので、 本体サイトでWordPressの投稿機能を使う場面はほとんどありません。

それなら、 WordPress本体やテーマ、 プラグインを抱え続けるより、 HTML・CSS・必要最低限のJavaScriptだけで作った方が シンプルで軽くできそうです。

この判断も、 ChatGPTとやり取りしながら整理していきました。

これでWordPressを完全に引退

今回、本体サイトも自作に変えたことで、 ビデデジではWordPressを完全に使わなくなりました。

  • 本体サイト：AIを使って自作
  • ブログ：Blogger
  • Webツール：AIを使って自作

WordPress自体が悪いわけではありません。

ただ、 今のビデデジの使い方だと、 WordPressを置いておくメリットより、 管理するものが増えるデメリットの方が大きくなっていました。

旧サイトをHTTrackで丸ごと保存

新しいサイトを作る前に、 HTTrackを使って旧ホームページ全体をローカルに保存しました。

これは単純にバックアップを取るためではありません。 一番の目的は、 旧サイトを丸ごとAIに読み込ませるためです。

WordPressの管理画面を一つずつ確認したり、 ページの内容を手作業でまとめたりするのはかなり大変です。

そこでHTTrackで、 HTMLやCSS、 画像、 内部リンク、 ページ構成などをまとめて保存し、 そのデータをAIに渡して分析してもらいました。

HTTrackのログも確認してもらい、 WordPressの「?p=○○」形式のURLや、 タグページ、 リダイレクト、 不要そうなページなども洗い出していきました。

人間が一つずつページを開いて確認するより、 サイト全体をまとめてAIに渡して、 構造を見てもらった方がかなり楽でした。

新しいホームページの構成もChatGPTに相談

新しいサイトをどうするかも、 ChatGPTとかなり長く相談しました。

ただ旧サイトをそのままHTMLに変換するのではなく、 そもそも本体サイトの役割から考え直しています。

最終的には、 新しい本体ホームページを 「ビデデジ全体の入口」 として作ることにしました。

withDigi、 PhotocameHOT、 Webツール、 ブログ、 お問い合わせなどへ、 初めて訪れた人でも迷わず移動できる構成です。

ページ数も増やしすぎず、 本当に必要なページだけを残す方向にしました。

READMEまでAIに作ってもらった

実際にサイトを作る前には、 ローカルプロジェクト用のREADMEもChatGPTに作ってもらいました。

そこには、 サイトの目的、 ページ構成、 パフォーマンス方針、 レスポンシブ対応、 SEO、 旧URLからの移行方針などをまとめています。

先に方針を文章にしておくことで、 Codexにコードを書いてもらうときも、 「どういうサイトを作るのか」 を共有しやすくなりました。

実際の制作は初めて使うCodex

実際にローカルのプロジェクトを作って、 HTMLやCSSなどを書いてもらう部分ではCodexを使いました。

Codexを使ってサイト全体を作るのは、今回が初めてです。

ページを作る、 デザインを調整する、 レスポンシブ対応を入れる、 SEO用のタグを追加する、 既存コードを直す、 といった作業をCodexに進めてもらいました。

自分でコードを書いているというより、 「こうしたい」 「ここを直して」 と伝えて、 Codexに実際のファイルを編集してもらう形です。

ChatGPT Plusの無料お試しで使える環境をきっかけに、 いつものAI活用を、 相談だけでなくサイト制作全体まで広げてみました。

ChatGPTとCodexを使い分ける

今回使ってみて分かりやすかったのが、 ChatGPTとCodexで役割が少し違うことです。

ChatGPTでは、 「そもそもWordPressをやめるべきか」 「どんなサイト構成にするか」 「SEOで何を確認するか」 「旧サイトのどこが問題か」 といった相談をしています。

一方でCodexには、 実際のローカルプロジェクトを触ってもらい、 コードを書いたり修正したりしてもらいました。

いつもAIを使っているとはいえ、 ここまで制作の中心をAIに任せたのは初めてです。

考えるところから実装まで、 AIをつなげて使っている感じでした。

軽いサイトにするのもAIに意識してもらう

新しい本体サイトでは、 HTML・CSS・必要最低限のJavaScriptを基本にしています。

不要なライブラリや外部スクリプトをなるべく使わず、 画像もWebPやAVIFなどを使って、 できるだけ軽い構成にしています。

こうした方針もREADMEに書いて、 Codexにコードを作ってもらうときに 最初から意識してもらうようにしました。

WordPressでは、 テーマやプラグインの都合で 自分では使っていないコードも読み込まれることがありますが、 自作なら必要なものだけにできます。

SEOもAIに確認してもらいながら設定

SEOについても、 WordPressのプラグイン任せではなくなりました。

title、 meta description、 canonical、 OGP、 構造化データ、 sitemap.xml、 robots.txtなども、 AIに確認してもらいながら設定しています。

特に今回は、 Googleのインデックス問題がきっかけの一つだったので、 新しいサイトでは 「何が設定されているのか分からない」 状態をなるべく減らしたいと思っています。

ほぼAIでホームページを作る時代になった

今回やってみて一番感じたのは、 ホームページ制作で自分がコードを書けるかどうかの重要度が、 かなり下がってきていることです。

以前なら、 WordPressを使わずにサイトを作るとなると、 HTMLやCSSをかなり自分で書く必要がありました。

でも今は、 旧サイトをAIに読み込ませ、 構成を考えてもらい、 READMEを作ってもらい、 Codexに実際のコードまで編集してもらえます。

自分がやっているのは、 完成したものを見て、 「ここを変えたい」 「これは違う」 「こうしたい」 と伝える部分が中心です。

いつもAIを使っている自分にとっても、 今回は「AIを少し使った」というレベルではなく、 Codexでサイト全体を作るという新しい使い方に挑戦した制作でした。

まとめ

今回のリニューアルは、 Googleのインデックス問題や表示速度を調べたところから始まりました。

そこからChatGPTと相談して、 「そもそもWordPressが必要なのか」 というところまで戻って考え、 最終的に本体サイトを自作へ移行することにしました。

旧サイトはHTTrackで丸ごと保存し、 AIに読み込ませて分析。

新しいサイトの構成やSEO方針はChatGPTと整理し、 実際のコード作成や修正は、 今回初めて本格的に使ったCodexに任せています。

ブログはBlogger、 本体サイトとWebツールはAIを使って自作、 というかなりシンプルな構成になりました。

ChatGPT Plusの無料お試しをきっかけに、 いつも使っているAIの力を、 サイト全体の制作にまで広げることができました。

これでどこまで使いやすく、 軽く、 Googleにも正しく認識されるサイトにできるのか、 これからもAIと一緒に調整していきます。