ご覧になればお分かりの通り、ウェブサイトがリニューアルしました。いくつかのページを作成し、情報を追加。そして記事における動線もいろいろと検討して今の所ここに辿り着いています。
今回のリニューアルにおいて、やはりこの時期ではありますから生成AIと一緒にどこまで作ることができるのかを試さないわけにはいきません。ということで今回はそこから感じたことなどをレポートしようと思います。生成AIでウェブサイトを作る・・とはどういうことで、何を気をつけたか・・というところを感じてもらえたら幸いです。
まずは私の経歴を
他のところでも書いていたりしますが、私はもともとはコーダー出身です。HTMLやCSS、jsを書いたりPHPを書いたりしていました。そして、その後はいわゆるウェブディレクターと言われるようなポジションでコーダーのスタッフに指示を出す・・ような感じでした。もちろん、デザインや操作性の部分ではデザイナーに指示を出すこともあります。
今においてもたまにはコーディングをすることもありますが、めっきり指示役というところでしょうか。。。
使った生成AIはClaudeCode
そんな私が今回「生成AIを使ってウェブサイトを作ってみよう」と思って選んだ生成AIはClaudeCodeです。最近はめっきりClaudeかGeminiか・・ですが、やはりさまざまな記事を読むとClaudeCodeが良さそうなので、そちらを選択しました。
まず行ったのはアクセス解析
以前記事にも書きましたが、私はGA4とClaudeをMCPで繋げています。ClaudeでまずはGA4のデータから感じられるポイントをいくつか挙げてもらいました。もともとのサイトにおいてはトップページにいろんな情報を入れておいたので（時間があまりなかったので）、そこにおける指摘や、比較的多く読まれている記事の特性などをClaudeが指摘をしてくれます。
Claudeに指摘をされるばかりではなく、こちらからも仮説を立て、仮説の確度具合をClaudeと会話をしながら（チャットですが）一定の考察まで導きました。
サイトの構成を練り上げる
この時点でもまだClaudeですね。サイトの構成をどうしようと思いこれまでのトップページにいろんな情報を載せるという構成からページを整えていくことを検討しました。その上で、データとしてあるのがアクセス解析のデータしかないので、加えて別でClaudeと会話をしながら検討していた「第２期の事業計画」もデータに加えて、どうしていきたいのかという足並みを合わせながら必要なコンテンツと必要なアプローチ方法を検討しました。
そこから簡易的なサイトマップを作成し、それぞれのページにおいて何を伝えるかを仮原稿レベルで整えていきます。
Codeに依頼する
Claudeのチャットでやりとりをしてある程度の型を決めてから、その型を指示書としてマークダウン形式でアウトプットしてもらいました。そしてそのアウトプットをClaudeCodeに渡します。そもそもをClaudeCodeでチャットとしてもいいのでしょうが、今回はスタートがまずは思いつきということでチャットだったので、このステップになりました。
Codeに連絡したのは以下
- 指示書をまず読んで欲しい
- 今ある既存のWPのサイトをリニューアルしていくのでサポートして欲しい
- まず枠組みを作って徐々に仕上げていくステップにしたい
既存のWPという前提にしたので、ClaudeCodeからは、「まず既存サイトのデータのエクスポート」を求められました。指示の通りエクスポートをしてローカルに保存。その後ClaudeCodeが解析をしてくれました。
その後は、事前に指示したサイトマップや仮の原稿などを使ってサイトを作成してくれました。
一旦仕上がる
しばらくすると一旦のサイトが仕上がります。各ページを見ても見た目上はほぼ問題はなさそうです。ふむふむ。リンクも問題なし、マークアップも基本的に問題なし・・・と思いきや、特にマークアップです。ちゃんとできてるページとできていないページがありました。
具体的には、本来sectionで囲んで欲しい情報の塊が、単なるdivで囲まれていてそこにclassでsectionと名付けられていました。これが全体であればいいのですが、ページによるということが見えてきたのです。
そしてよく見てみるとCSSです。CSSが以上に多くありました。印象ではありますが、生成AIでウェブページを作ることはできますが、ウェブサイトとなるとウェブページの集合体のような形で作成されてしまい、そのページごとに見た目を揃える・・つまりそのページごとに同じCSSが書かれる傾向にあるように思います。
（コーディングし始めの人たちによくある感じだなー）
全体を見直してもらう
先ほどの状況がありましたので、「全体のデータ構造を見直して、まとめらるところ、共通化できるところなどを判断しファイルを整理して」という指示をだします。少し時間はかかりますが、不要な行の削除共通のCSSの反映に伴うHTMLの書き換えなどが流れ作業のように発生します。
また先ほどのようなセクションの考え方などは個別に話をしながら、理想系としてできてるページを参考にするように・・と指示をだします。
いろんなページが作られますが、１ページ理想系のHTMLの構造を作っておくと参考にするデータがあるので、比較的進行に役立つことがここで発見でした。
他の情報を加える
これはもともとの指示が不足していたから・・・なのでしょうが、例えばOGPや構造化マークアップといった類のものがこの段階では設定されていなかったので、これも指示。
何をOGPの画像に使うのかなど的確に指示を出すとコードを追加してくれます。
※もちろん、そのコードで正しいかどうかは他のサービスを使いながらチェックを欠かさず。
ここでClaudeにはおやすみをとってもらう
ここからが私のタームです。情報設計として今のサイトの利用者を想像しサイトのあり方を文言を読みながらチェックをしていきます。ページの中の情報はもちろん、その先への誘導がきちんとできているのか、また再来訪されるきっかけは作られているのか・・・と、過去のサイトの際には作ることに意識を向けすぎて発想に繋がらなかったことを考える時間になりました。集中的にみる時間を2日に分けて作り確認（これは、少し気持ちをリセットするため）。
その結果・・・
- 文脈上まとめた方がいいページがある
- 見出しと内容がよく読めばわかるけど初手としての違和感がどこか気持ち悪い
- あれ？このページの下にこのブログ記事が掲載されてるほうがいいよな・・・
- ファーストビューにこういうのをいれたいな・・
など新しい要望が出てまいりました。
ClaudeCodeに修正指示を出す
先ほどのような新たに生まれた要望を適宜ClaudeCodeに指示します。その際には必ず「サイトのコンセプトとの整合性を意識して疑問があれば質問を返して」ということを伝えながら、こちらの意見だけではなく第３者的な視点（ここには冒頭に会話した指示書の内容も加味される）を含めて議論しながら作るという体制は崩さないようにしました。
いい感じで上がってきます。いい感じてまとめてくれています。
ローカル環境にてもろもろ確認をするとこちらのイメージした情報設計に対してニーズを満足させてくれる形で仕上がりました。
本番環境に移設
本番環境に移設するにあたり、ひとつの課題が。これは私の契約しているレンタルサーバーの仕様でしかたなかったのですが、そのままのインポートがデータ容量的に難しかったのです。
もちろん、別案をClaudeに計画してもらいテストをしました。
結果、いくつかのバグ（エラー）が発見され、少しClaudeとの間での会話にズレを感じることがありました。同じことを繰り返してしまう・・・などの状況が見て取れましたので、「少し落ち着こう」という言葉をかけてみたら、的確な指示をくれました。（面白い）
無事に公開
各種バグも解消し、エラーも出ない状況において本番公開が無事に完了しました。公開後改めてサイトの様相を確認してみると・・・よくあることですが、この段階で気がつくことがありますよね。。不思議なもんです。気になったことはすぐにClaudeCodeに相談してコードを改修。すぐに本番更新を行い、解消。
このスピード感はさすが・・・と思いました。
見直しの時間を作った
先ほども言ったように、すべてが順調に・・というように思えていたのですが、本番公開のタイミングで少しエラーや手間取りがありました。こういうのは実際の業務においても起こりうることだし、これまでもいわゆる不測の事態というものは味わってきました。
今回、実際に作業をしたのは私ですが、その指示や方法をアウトプットしたのはClaudeでした。すべてのログが溜まっているということはある意味「宝の山」です。
Claudeと一緒に今回のプロジェクトの全体を見直して、特に最後の引っ掛かりに関しても原因の究明と反省と課題の整理、さらにチェックリストを作成してみました。
仕上がったドキュメントはマークダウン形式で保存し、いつでも確認できるようにしました。
まとめと感想
・・・とこんな感じで、2026年3月時点のサイトが出来上がったわけです。
今回作ってみて特に感じたことは、「専門的な知識とそこからくる感覚は絶対必要」ということです。
これについては次回のブログに書いてみようと思います。
リリースした後にまた気になるところは出てくるもの・・。でもそれを比較的用意にリニューアルすることはできるという状況が生まれました。
作業時間の短縮は確実起きていますが、仕上がるまでの時間は短縮されないような気がします。作業時間で削減された箇所に人間が考える、塾講するという時間が差し込まれて、実は頭をすごく使う日々の始まりのように感じた次第です。
