サイトリニューアルをAIで｜競合48社→17案→実装の進め方

「サイトリニューアルをAIで進めたいけれど、何から手をつけて、どの順番で、どのツールを使えばいいのか分からない」

そんな状態で止まっていませんか。

結論から言うと、AIでサイトリニューアルを進めるコツは、工程を「リサーチ→デザイン→実装」の3ステップに分け、各ステップで役割の違うAIを使い分けることです。

この記事では、私たちが自社のコーポレートサイトを全工程AIで作り直したときの進め方を、実際に使ったツール・手順・つまずいた場面つきでそのまま公開します。

下のサイトが、その成果物です。

アスタはWebシステム制作やWebサイト制作など、IT全般の困りごとを解決する会社です。

当然、コーポレートサイトもゼロから作れます。

それでも今回は、手では一切コードを書かず、リサーチ・デザイン・画像生成・実装の全工程をAIだけで進めました。

手作業なら1ヶ月はかかるリニューアルが、1週間ちょっとで完成しています。

この記事でわかること（AIでサイトリニューアルを進める全体像）

先に全体の地図を出しておきます。

AIでサイトリニューアルを進める工程は、大きく次の3ステップです。

工程	やること	使ったAI
STEP1 リサーチ	自社サイトの現状整理・競合48社のキャプチャ・分析	Codex
STEP2 デザイン	デザインモックアップを17案生成して並べて選ぶ	ChatGPT image 2.0
STEP3 実装	WordPressのCSS調整・PHPテンプレート生成・一括修正	Claude Code × Codex

ポイントは、工程ごとにAIの役割がまるで違うことです。

リサーチでは「調べるアナリスト」、デザインでは「たたき台を出すデザイナー」、実装では「指示通りに書くプログラマー」として動きます。

この記事を読むと、どの工程で・どのAIを・どう使うと進めやすいのかが、順番に見えてきます。

なぜ工程を3ステップに分けるのか

「AIに全部やらせれば、いきなりサイトができるのでは」と考えたくなります。

ですが、最初にざっくり丸投げすると、見た目だけそれっぽいサイトができて、後から「これじゃない」と作り直しになりがちです。

だからこそ、リサーチ→デザイン→実装の順番を飛ばさないことが、AIリニューアルの進め方の土台になります。

順番の意味はシンプルです。

まず調べて「どこを目指すか」を決め、次にデザインで「どんな見た目か」を固め、最後に実装で「動く形」にする。

AIを使うと、この3ステップそれぞれの中で「調べられる量」「試せる案の数」「直せるスピード」が一気に増えます。

ここが、手作業のリニューアルと根本から変わるところでした。

それでは、1ステップずつ具体的に見ていきます。

STEP1 リサーチ：競合48社を、AIで1時間かからず調べる

最初の工程は、リサーチです。

ここで取り組んだのは、まず自社サイトの現状整理でした。

「今のサイトで、何が伝わっていないのか」を先に整理しないと、見た目だけ変えるリニューアルになってしまいます。

そこで、Codexに既存サイト（astha.jp）の全ページをクロールしてもらい、テキストをMDファイルとして保存しました。

このとき「要約ではなく、忠実に抜き出したテキストも含めてほしい」と指示したのが、精度を上げるコツでした。

続いて、競合・ベンチマークとなる48社のサイトを自動でキャプチャしました。

・和製ハイエンドIT企業（モンスターラボ、クラスメソッドなど）
・士業・コンサル型（リブ・コンサルティングなど）
・海外勢（IDEO、Accentureなど）
・インタラクティブ体験型（ライゾマティクス、BIRDMANなど）

など11カテゴリ、計48社です。

キャプチャの成功率は47/48社（約98%）でした。

ベンチマークサイト比較ページ

これだけ並べて比較できると、「自分たちがどこを目指すべきか」がかなり見えやすくなりました。

手作業で何十社も調べるのは、正直なところ現実的ではありません。

「調べたいけれど時間がない」と後回しにしていたことも、AIを使えばあっという間に片づくと感じた工程でした。

ちなみにCodexは「コードを書くAI」と思われがちですが、こうした競合の自動キャプチャや現状分析、要件整理まで幅広くこなしてくれます。

STEP2 デザイン：案を17個出させて、並べて選ぶ

次の工程は、デザインです。

ここではChatGPT image 2.0で、デザインモックアップを17案生成しました。

モックアップとは、完成形のイメージを事前に確認するための「見た目の下書き」のことです。

ラフとはいえ、これを数種類も手で作るのは相当な手間がかかります。

最初は10案くらいで止めるつもりでしたが、あまりに簡単にできるので、面白くなってつい17案まで増えてしまいました。

・青・白系（清潔感・信頼感）
・濃紺系（重厚感・専門性）
・サイドナビ型（独自レイアウト）
・ティール系・ラグジュアリー系・グリーン系・ダーク系

色ごと、レイアウトごとに、全部違うデザインが並んできました。

しかも、各バリエーションにコピー案まで自動でついてきます。

右上に絞り込み機能まで勝手についてきたのには、正直おどろきました。

「1案だけ作って検討する」より「17案並べて選ぶ」ほうが、方向性を決める速さも精度もまったく違います。

レストランで「何かおすすめして」と言われると答えにくいのに、「この3つから選んで」と言われるとすぐ選べます。

あの感覚に近いです。

ただし、AIが出すデザインはあくまでたたき台です。

「これは自分たちらしいか」を見極めて方向性を決めるのは、人間の役割でした。

モックアップ比較ページ

STEP3 実装：Claude CodeとCodexで組み立てる

最後の工程は、実装です。

ここではClaude CodeとCodexの2つを中心に進めました。

なぜ2種類も使ったのかというと、

・どちらが使いやすいかを比べるため
・作業領域を明確に分けるため
・1つだけだとトークンが足りなかったため

といった理由からです。

実際に使ってみて、Codexの方が優秀な回答や成果物を返してくることが多いと感じました。

ただし、この2つは今も猛スピードで進化しているので、明日には評価が逆になっていてもおかしくありません。

そして実装工程でも、「AIが全部やってくれた」わけではありませんでした。

私とAIのあいだに、明確な役割分担があります。

AIが担った部分	人間が担った部分
CSSの調整・修正	デザインの方向性・トーン
繰り返しパターンのコード生成	仕様と品質の最終確認
複数ファイルをまたいだ一括修正	「何を作るか」の設計
バグ原因の診断・修正案の提示	選択・判断・最終指示

とはいえ、私自身は一切コードに触れていません。

細かい修正も、すべて指示を出してAIに直させながら進めました。

デザインの方向性や「何を作るか」という判断の部分でも、たたき台やアドバイスはAIにまかせています。

つまり、人間が担った部分にも、AIはしっかり入り込んでいた工程でした。

65箇所のCSS指定を、数分で一括削除

実装のなかで、AIらしさが一番出た場面を紹介します。

ある程度できあがったあと、サイト全体のletter-spacing（文字間隔）を0.16emに統一したくなりました。

ところが、個別指定が65箇所あって、全体の指定が効かない状態だったのです。

手作業なら、これだけで数時間はかかります。

そこでAIにPythonスクリプトを作ってもらい、全CSSファイルを解析して一括削除しました。

ものの数分で完了です。

「繰り返し・大量・定型」——この3つが重なる作業こそ、AIが最も力を発揮する場面でした。

AIの提案を、4回断った

実装工程では、AIの提案をそのまま採用したわけでもありません。

今回、トップページの「サービス一覧」のカードデザインは、4回作り直させました。

最初の提案は「カードの端に色をつけるデザイン」。

わかる人にはわかると思いますが、これはAIがよくやりがちなデザインでした。

2案目、3案目と試すたびに「違う」「自分たちっぽくない」と却下していきました。

最終的に、6px幅の左ラインに落ち着くまでに4パターン試しています。

こうした試行錯誤を、すばやく簡単にできるのも実装工程でAIを使う利点です。

ただ「これは自分たちらしいか」の判断は、人間にしかできませんでした。

この往復こそが、品質を決める工程だったと感じています。

AIでリニューアルを進めるとき、多くの人がつまずく3つの疑問

ここまで工程を追ってきましたが、実際に進めようとすると、いくつか不安が出てくるはずです。

よく聞かれる3つに、先に答えておきます。

Q1. どの工程で、どのAIを使えばいい？

役割で選ぶのがおすすめです。

調べる工程は分析が得意なCodex、デザインの下書きは画像生成が得意なChatGPT image、実装はコードに強いClaude CodeやCodex、という使い分けです。

1つのツールで全部やろうとせず、工程ごとに得意なAIへ振るほうが、結果的に速くきれいに進みます。

Q2. 全部AIに丸投げしていい？

丸投げだけだと、途中で「なんか違う」が起きやすくなります。

今回もカードデザインを4回却下したように、AIが出すものは「量」と「たたき台」として受け取り、選ぶ・判断するのは人間が担うのがコツでした。

AIに任せる範囲と、自分で決める範囲を先に分けておくと、迷いが減ります。

Q3. 自社のリニューアルで、どこからAIを使えばいい？

まずは「調べる工程」からがおすすめです。

競合調査や現状整理は、リスクが小さいわりに効果が大きく、AIの得意分野だからです。

自社のどの工程からAIを噛ませられるか整理したい方は、AI活用の無料診断で洗い出すと、最初の一歩が決めやすくなります。

まとめ：AIリニューアルは「工程を分けて、役割を分ける」

今回のプロジェクトを、数字で振り返ります。

指標	数値
ベンチマーク調査社数	48社（11カテゴリ）
デザインモックアップ案数	17案
作成したPHPテンプレートファイル数	約20ファイル
一括削除したCSS letter-spacing宣言数	65箇所
プロジェクト期間	1週間ちょっと（4月28日〜5月12日）

ただ、数字より大きかったのはこちらでした。

・調べる量が増えて、判断の精度が上がった
・試せる案が増えて、自分たちが何を求めているかが見えた
・定型作業をAIに任せた分、こだわるべき部分に時間を使えた

「AIで楽になった」だけでなく、「AIのおかげで、もっと大事なことに集中できた」というのが、より正確な実感です。

調べる・たたき台を作る・繰り返しの定型作業をAIに任せると、人間は判断する・こだわる・方向を決めることに集中できます。

工程を「リサーチ→デザイン→実装」に分け、それぞれで役割を分ける。

この進め方が決まって、AIリニューアルは初めてスムーズに回りました。

もっと具体的な進め方の事例を知りたい方は、メルマガでも実際の作業の裏側を発信しています。

完成したサイトはこちら

今回リニューアルしたコーポレートサイトはこちらです。

ぜひ、実際に見てみてください。

▶ 株式会社アスタ

あなたの会社のサイトも、同じ進め方でリニューアルできます

あなたの会社のサイトは、今どんな状態ですか。

「AIで進めたいけれど、どこから手をつければいいか分からない」「自社のどの工程を任せられるか判断できない」——そんなときは、お気軽にご相談ください。

アスタは、AIを実際の業務で安全に活用するお手伝いをしています。

• AIを業務で使ってみたい方 → AI活用無料診断へ（所要時間：約30分）
• まず話だけ聞いてみたい方 → お問い合わせフォームへ

「まだ何も決まっていない」という段階でも大丈夫です。

今の状況を、お聞かせください。

AI活用の第一歩、いっしょに整えませんか

「AIを使ってみたいけれど、安全面が不安」「自社の業務でどこから任せればいいか分からない」——そんなときは、お気軽にご相談ください。アスタは、AIを実際の業務で安全に活用するお手伝いをしています。

• AIを業務で使ってみたい方 → AI活用無料診断へ（所要時間：約30分）
• まず話だけ聞いてみたい方 → お問い合わせフォームへ

「まだ何も決まっていない」という段階でも大丈夫です。今の状況をお聞きかせください。