10年以上前に、タグ打ち制作した古いサイトを「リニューアルしたい」と思ったものの、手作業でやるのは面倒なので「AIに丸投げ」してみました。このページは、その感想です。
使用したのは、Gemini、ChatGPT、Grok の無料で使えるサービスです。
結論から言うと、作業は早く終わりますが、最終チェックとして人の目が必要ですね。
作業の手順
結論から言うと、作業はすごく早いけど、最終チェックは人間が必要という感じ。
以下は、やってみた手順（基本パターン）です。
- 既存のHTMLファイルをまるごとコピペしてAIに投げる
- 以下のようなプロンプトを入れる
先のHTMLコードを、2025年現在のトレンドに合わせたモダンなデザインにリニューアルしてください。
・Tailwind CSSは使わない（CDNも不可）
・レスポンシブ対応
・ダークモード対応（prefers-color-schemeで）
・アニメーションは控えめに
・既存のコンテンツ内容は一切変えない
以上の点を踏まえ、HTMLファイルとして出力してください。 - 出たコードをローカルで確認 → 微調整 → 次のページの生成へ
AIによる作業結果の違い
各AIの性格が如実に出ました。
【Gemini】
指示を一番正確に汲んでくれました。
「この部分だけ変えてほしい」「このクラス名に統一して」みたいな追加の指示にも素直についてきてくれます。
無料枠でも使用制限に余裕があるのか、長いページも最後まで出力してくれる率が高かったです。
【Grok】
わりと素直にやってくれますが、指示が曖昧だと勝手に解釈して大きく変えてくることも。
「titleタグ、h1、h2、pタグ内のテキストだけ換えて」「ここからここまでだけ変更して」みたいに範囲を明確に指定すると、正確にやってくれます。
アイデアの提案といった指示では、一番 面白味がありますね。
【ChatGPT】
一番 扱いづらかったです。
「元の構成を崩さないで」と言っても、勝手にセクションを再構成したり、文章を書き換えたりしてきます。
無料枠だと使用制限が厳しくて、長いページは途中で切られる確率が高め。
困ったポイント
・CSSがページごとに雪だるま式に増殖する
1ページずつ別々に生成させると、同じようなボタンスタイルが複数パターンできました。
最終的に「今までの全ページのCSSをまとめて、重複を削除して1つのCSSファイルにしてください」と頼んで整理することに。
・環境依存文字の「?」化
Windows環境で開くと全部「?」になる環境依存文字の使用が多発。一括置換で直す羽目に。
・生成されたJavaScriptが動かない
JavaScript の生成になると、普通に動かないケースがあり、その理由も単なる記述不足というケースも……。
・Markdown記法が混入
例えば「**太字**」のように、太字にしたい個所を「**」で囲むMarkdown記法が混入し、ブラウザ上で「**」が表示されることに。
・インデントがガチャ
タブ、半角スペース2つ、半角スペース4つ、混在と、インデントの仕方が毎回違います。
良かったポイント
タグを全部手打ちするのに比べたら、何十倍も早かったのは間違いないです。
特に「似たような構成のページを20ページ作る」みたいな作業は、もうAI無しではやりたくないレベル。
実際にやってみて思ったのが、無料ホームページのサービスを利用し、テストサイトを量産して検索エンジンにインデックスされるか試すサイトを作るのに最適だということ。
データを随時更新しているサイトのAPI利用などは、人間が一から調べて導入するより、早そうな気もしました。
あとは、今までは無料で使える素材イラストを使っていた箇所に、AI生成画像を使える点が大きいでしょうか。
終わりに
全部のページをリニューアルし終え、ちゃんとしたサイトができたのですが、生成されたコードをそのまま公開するのは、やめた方がいいでしょう。
とはいえ、80％くらいはAIにやらせて、残り20％を人間が整えるというワークフローは、もう完全に手放せないなと感じました。
また、HTMLのコードの変化を追っていないと、何が古くなっているのも気づかないので、「あっ、もうdivによるレイアウトは終わったんだ」なんて感想も出てきます。
【オマケ】Perplexity（パープレキシティ）スコア
2025年12月現在のGoogleが最も重視する「AIっぽさ」判定指標です。
以下はGrokによるデータ。
・測定ツール
Originality.ai、Writer.com Perplexity Checker、HuggingFace Open Tool など。