当社のコーポレートサイトをリニューアルしました。
サイトの構成は、Claude Codeで実装を進め、Astroでサイトを構築し、Vercel CLIでデプロイ、データベースはNotion、スパム対策はCloudflare、メール送信はResendという形です。APIキーや環境変数はenvで管理しています。
これまではWordPressベースで、各種プラグインを組み合わせながら制作していて、人材データベースだけNotionで管理していました。今回はその構成を見直して、WordPressを使わない形で全体を組み直しました。
結論からいうと、やろうと決めてから公開まで2日、本番移行後の調整に1日とかなり短期間で形にすることができました。ただ、その一方で強く感じたのは、AIでのサイト制作は速いけれど、決してラクではないということでした。
AIがエンドレスに作業する分、こちらもエンドレスにフィードバックしがち。通常のサイト制作プロジェクトで当たり前の待機時間がまったくない。メリットもあるけど適度に休まないとすさまじく消耗します（笑）
せっかくなので、どんな風に進めたか、苦労した点、価値を感じた部分など振り返り的にまとめてみました。
ちなみに公開までにかかった日数は2日とはいっても、そのうち1日は出張でした。往復の新幹線の中でも開発を進めていたので、まとまった作業時間をずっと確保できていたわけではありません。それでもここまで形にできたのは、AI開発の強みだと感じています。
ただ、順調だったわけではありません。正直、最初にClaude Codeで出てきたものを見たときは、けっこう心が折れました。「さすがにまだAIじゃ無理か……」と思ったんですよね。GoogleのStitchと接続させてみたり、やっぱりFigma使おうかとか、いろいろ試したのですが、スムーズにはいきませんでした（自分がデザイン業務経験がなく指示の言語化ができないせいだと思うんですが）。結局Claude Code一本でデザインも作ったのですが、あれこれ試しながら進めていく中で、だんだん形になっていった感覚です。
既存サイトや参考サイトのURLもかなり渡していたのですが、そのままうまく効くわけではありませんでした。おそらく、参考URLを渡すだけだと「何をどう参考にすべきか」までは十分に伝わらないのだと思います。人間のデザイナーであれば当然のごとく汲み取ってくれる部分も、AIだともう少し細かく分解して伝えないとズレやすい。そのあたりは今回かなり感じたところでした。
あと、振り返るとかなり何度も「シズル感やワクワク感を出して」と言っていた気がします。特に意識していたのは、コピーや見出しテキスト、それからサイトのちょっとした動きや装飾の部分です。AIで出てくるものって、きれいにはまとまるのですが、ちょっと温度が低いんですよね。情報としては合っているけれど、ぐっとくる感じが足りない。そこをどう足すかは、かなり意識していた部分でした。まだ不十分かもしれませんが。。
たたき台を作る速さ、実装の速さ、修正の速さは、人間がやるときより明らかに速かった。作り手の理解の速さと実装の速さが一気に上がるので、短期間で前に進めやすい。この点は本当に大きかったです。
今回の構成は、以下のような形です。
WordPressは使わず、Claude Codeで実装を進め、Astroでサイトを構築し、Vercel CLIでデプロイしました。データベースはNotionに寄せていて、人材DBだけでなく、問い合わせフォームの受け皿も含めてできるだけNotionを中心に整理しています。
なお、CMS的な管理画面は現時点では作っていません。いったん自分だけが触る前提なので、まずは必要十分な構成を優先しました。
今回は、ワイヤーやサイトマップ、データベース設計書のようなものは事前には一切作っていません。最初に設計資料を固めてから進めるというより、実装しながら全体を詰めていく形でした。
これは従来の開発だと不可能な進め方だと思います。人間同士で進める場合、後戻りにはどうしてもコストがかかるので、先に設計資料を揃えたくなります。でも今回は、Claude Codeを使う前提だったので、後戻りのコストをあまり気にしなくてよかった。だから、最初から重たいドキュメントを作り込まずに、その場で試しながら進めるやり方が成立しました。
これはAIのすごいところだと思っています。後戻りが発生しても、その変更による影響範囲をまとめて直しやすいんですよね。人間同士だと、ここを変えるとどこまで直さないといけないかを追うだけでも大変ですが、AIにもそこを一気に見てもらいやすい。この差はかなり大きいです。
また、人間同士の制作だと「もうここまで作ったし、このままでいいか」と妥協が入りやすいですが、AI相手だとそこを気にしなくていい。途中で全体をゼロベースで見直すことに抵抗がないのも、かなり大きいと感じました。
AIを使えば、サイトなんてちゃちゃっとできるんでしょ、と思う人もいるかもしれません。たしかに、たたき台を作る速さ、実装の速さ、修正の速さはかなり大きく変わります。人間同士でやるより、明らかに前に進むスピードは速いです。
でも、サイト制作で本当に大変なところは、そこだけではありません。実際に気を使うのは、たとえばこういう部分です。
このあたりは、AIがどれだけ優秀でも、最後は人が責任を持って考える必要があります。指示しない限り、ここはあまり考慮してはくれません。
特に今回はリニューアルだったので、単に新しく作るだけではなく、既存サイトの資産をどう引き継ぐかも重要でした。見た目がきれいになればそれで終わりではなく、検索評価を落とさないか、導線が崩れないか、見えないところで事故が起きないかまで見ないといけない。実際の制作・開発現場ではAIが作ったからなんて言い訳は許されない。
最後の仕上げでは、Webアクセシビリティや脆弱性の観点でも全体をチェックしました。こういうのもかなり見落としがちです。たとえば見ていたのは、次のようなポイントです。
こうした観点は最後に気づくと影響範囲が大きいのですが、AI前提だとかなり違います。影響する箇所の洗い出しや、関連部分の修正もまとめてAIに任せやすいので、最後に大きめの観点を入れても十分対応しやすい。この感覚はかなり大きかったです。
大変だったのがデザインでした。
AIに指示を繰り返しながらページを作っていくと、各ページ単体ではそれっぽく仕上がるのですが、全体で見ると少しずつトンマナがズレてきます。フォントサイズ、余白、カラム幅、見出しの強さみたいなところが、微妙に揃わなくなるんですよね。
ただ、このあたりも自分で全部見返して直すというより、Claude Codeにサイト全体を見返してもらい、ズレている箇所の洗い出しや修正も担ってもらう、という進め方ができました。人間が一つひとつ確認するより速いですし、全体をまとめて揃え直せるのはかなり助かりました。
AIを使えば自動的に全部きれいに統一される、という感じではないですが、ズレを見つけて整えるところまでAIに担ってもらえるのは大きかったです。
今回、AIを使っていて良かったこともかなりありました。
まず大きかったのは、大きめの修正を遠慮なくできることです。人間同士の制作だと、どうしても「もうここまで作ってもらったし、このままでいいか……」みたいな妥協が入ることがあります。でもAI相手だと、そこを気にしなくていい。全体のカラースキームを変える、構成を見直す、デザインルールを揃える、といった修正も、心理的な負担なく言い直せるのはかなり大きかったです。
実際、最後の段階でサイト全体のカラースキームを一気に見直したのですが、これは人間相手だとなかなかやりにくい変更です。そういう意味では、妥協せずに全体最適をかけやすいのはAIならではの良さだと思いました。
もうひとつ良かったのは、残タスクの洗い出しまでAIに任せられることです。実装がある程度進んだ段階で、「この状態で不足している論点は何か」「公開前に何を確認すべきか」といった観点で整理を任せると、自分だけでは見落としそうな項目も出てきます。最終判断はもちろん人がやる必要がありますが、チェックの補助役としてはかなり優秀でした。
今回、個人的にやってよかったと思っているのが、システムノートを作ったことです。
Claude Codeとのやりとりで決まっていく仕様や構成をまとめたものを、別で作った自社の業務ダッシュボードに自動記帳するようにしました。しかもこれを自動更新にしておいたので、人が手で管理する仕様書みたいに、気づいたら中身が古くなっている、ということが起きにくい。
スクラッチ開発では、実装が進むほど仕様が担当者の頭の中に寄っていき、あとから見るとブラックボックス化している、ということがよくあります。人が仕様書を管理すると、どうしても更新されないドキュメントができがちです。でも、ダッシュボードでもClaude Codeのフォルダ上でもなんでも良いのですが、こういう形でシステムノートを持てると、そのリスクをかなり減らせる。これは思っていた以上によかったです。
さらに今回は、動的な部分もある程度作れたのが大きかったです。
たとえば、NotionのタレントDBからリアルタイムで集計したデータをサイトに表示するようにしました。コーポレートサイトというと静的な情報だけを載せるイメージもありますが、こういう形で運用中のデータとつなげられると、サイトの価値はかなり変わってきます。
しかも今回は、データベースをNotionに寄せています。タレントDBだけでなく、問い合わせフォームの受け皿も含めて、CF7+Flamingoの構成を辞めて、できるだけNotionを中心に整理しました。そのNotionのデータベース自体もClaude Codeで作っています。サイトの見た目だけではなく、裏側のデータ構造まで含めて一気通貫で組めたのは、今回かなり大きかったところです。
データの置き場所がバラバラだと、あとで必ず運用が複雑になります。見せるサイトと、裏側の管理をある程度つながった状態で持てるのは、実務上かなり大きいと思っています。
インフラ素人の自分が今回かなり苦労したのが、DNSまわりでした。Vercelへの移行の中で設定をミスってしまい、月刊タレンタルとBizDevアカデミーのサイトが一時404になってしまいました。ここは復旧も含めてかなり大変でした。
これはAIがどうこうというより、WordPressベースの構成からVercel側へ寄せていくときに、もっと気を付けるべきポイントだったと思っています。特に複数サイトや既存ドメインが絡んでいると、影響範囲をきちんと把握したうえで進めないと事故が起きやすい。
また、こういう部分はClaude Codeに全部任せられるわけでもありません。たとえばサーバのコンパネや外部の管理画面にログインしてDNS設定を変更するような作業は、自分で対応する必要があります。実装はかなりAIに担ってもらえても、最後のインフラまわりや外部管理画面での作業は、まだ人が責任を持って進める必要があると実感しました。
あと、旧サイトのブログ記事にある画像を一括で移管していたのですが、そのパスの問題で画像がぜんぶ非表示になっちゃうとか、アクセスマップのiframeがうまく表示されないとかも。。
Vercel環境できちんとチェック済でも、本番移行時にどういう影響が予想されるかの洗い出しが足りなかったなと。
ここはAIの恩恵というわけじゃないのですが、体感として表示速度もかなり改善しました。WordPress + プラグイン中心の構成から、Astro + Vercelの構成に切り替えたことで、サイト全体の軽さは明らかに出やすくなったと思います。
今回の反省点としては、UIベースでの設計をもう少しきちんとできていれば、全体はもっとスムーズだったと思っています。
今回はゼロから進める形だったので、どうしても出来上がったものを見ながら、「ここをこうしたい」「やっぱりこっちの方がよさそう」と修正を重ねる進め方になりました。もちろんそれでも進められるのがAIの良さではあるのですが、最初の段階でUIの設計や画面イメージをもっと明確に持てていれば、やり直しは減らせたはずです。
自分はデザイナー経験があるわけではないので、そのあたりを最初からきれいに設計するのは正直難しいところがありました。結果として、出来上がったものに対して口を出しながら整えていく形になったのですが、ここはデザインがわかる人のほうが絶対にスムーズだと思います。
AIを使えば実装はかなり速く進みますが、最初にどういうUIにしたいかが明確な人ほど、その速さをよりうまく活かせる。今回やってみて、そのことはかなり実感しました。
今回あらためて感じたのは、AIによって作り手の理解の速さと、実装の速さは本当に大きく上がったということです。だから、一気に作れる。これは間違いなく大きな変化です。
でも、品質管理の責任や、要件定義の大変さは、ほとんどそのまま残ります。むしろAIが速いぶん、要件が曖昧でも一瞬でそれっぽいものができてしまうので、あとから整合性を取る大変さが増えることすらあります。
サイトを見て「こんなもんか」と思う人もいるかもしれません。でも、実際には見た目以上に、裏側の設計や接続、運用まで含めてかなり考えることがありました。だからこそ、完璧ではないにせよ、現時点では自分として納得できるクオリティだと思っています。
今回のプロセスで強く感じたのは、スピードそのものに値段がつく時代になったということです。単純に「AIで1日でできるなら1日分の費用ですよね」という話ではなく、実際には完成を待つ間の事業側の待機コストや機会損失コストまで含めて考える必要があります。サイト公開が遅れれば、そのぶん営業や採用、問い合わせ獲得、仮説検証のタイミングも後ろにずれる。そう考えると、早く形にできること自体にかなり大きな価値があると感じました。
AIでのサイト制作は、たしかにめちゃくちゃ速いので、その点は素晴らしい。でも、決してラクではありません。
見た目だけでなく、SEO、セキュリティ、データベース接続、リダイレクト、運用設計まで含めて仕上げようとすると、きっとサイト制作の大変さがかなり理解できると思います。
それでもなお、AIを使う価値はすごく大きい。とにかく圧倒的なのはスピード。そして、速く作れるだけではなく、妥協を減らし、全体を見直し、仕様を残し、動的な仕組みまで短期間で形にできる。今回のリニューアルを通じて、そんな手応えを強く感じました。