記事にすると、同じ悩みを持つ初心者に刺さる内容になります。

AIがコードを書いてくれても、サイト構築は簡単ではなかった話

AIを使えば簡単にサイトが作れると思っていた

最近はChatGPTやClaudeなどのAIを使えば、HTMLやCSS、JavaScriptを簡単に作れるようになりました。

実際に私もAIを活用して、

• HTMLページ作成
• SEO対策
• パンくずリスト導入
• JavaScriptツール作成
• Cloudflare Pages運用

などを行っています。

しかし、実際にサイトを運営してみると、コードを作ることとサイトを構築することは別の話だと感じるようになりました。

AIはコードを書いてくれる

例えば、

「パンくずリストを作りたい」

とAIへ相談すると、

• breadcrumb.css
• breadcrumb.js
• HTMLへの設置方法

などを数秒で作成してくれます。

コードを書く速度だけを見ると、人間より圧倒的に速いです。

本当に難しいのはサイト構成

実際に困ったのはコードではありませんでした。

問題は、

• どこに設置するのか
• カテゴリーをどう分けるのか
• 記事同士をどうつなぐのか
• トップページに何を置くのか
• 英語版をどう管理するのか

といったサイト全体の設計でした。

AIはコードを作るのは得意ですが、サイト全体の方向性を決めるのは人間の役目です。

パンくず導入で気付いたこと

今回、アップ済みHTMLへパンくずを導入する仕組みを作りました。

最初は、

「各ページへパンくずを付ければ終わり」

と思っていました。

しかし実際には、

• パンくずのリンク先ページが必要
• カテゴリーページが必要
• 一覧ページが必要
• 関連記事ページが必要

という問題が次々に見えてきました。

結果として、

パンくずを作る作業よりも、サイト構造を整理する作業の方が重要だと分かりました。

開発記録専用の一覧ページを作ることにした

現在は記事が増えてきたため、

be_on_one's_mind
├ index.html
├ html-breadcrumb-automation.html
├ seo-url-generator.html
├ cloudflare-pages.html
└ ...

という形で、開発記録用の一覧ページを作ることにしました。

トップページから一覧へ移動し、一覧から各記事へ移動できる構造です。

この形にすると、

• ユーザーが探しやすい
• 内部リンクが増える
• SEOにも有利
• 管理しやすい

というメリットがあります。

AIとの付き合い方

今回の経験で感じたのは、

AIは優秀なプログラマーですが、サイト運営者ではないということです。

サイト全体の設計や運営方針は、自分で考える必要があります。

逆に言えば、

• アイデアを考える
• 構成を決める
• 方向性を決める

ことができれば、

• HTML
• CSS
• JavaScript
• 記事作成

はAIが大きく助けてくれます。

まとめ

AIによってコードを書くハードルは大きく下がりました。

しかし実際にサイトを運営してみると、重要なのはコードを書くことではなく、サイト全体をどう設計するかでした。

今回パンくずリストの導入を進めながら、

「作ること」よりも「どう整理するか」が大切だと改めて実感しました。

今後もAIを活用しながら、より分かりやすく管理しやすいサイト作りを目指していきたいと思います。

このまま「開発記録」カテゴリの記事として公開できますし、最後に今回作ったパンくず自動化の記事へのリンクを付けると関連記事としても機能します。