こんにちは、株式会社テラ AIエンジニアリグチームです。

Claude、Gemini、Codexなど、生成AIを使ってWebサイトを構築する企業や個人が急増しています。

実際に、AIに指示を出すだけで驚くほど短時間でWebサイトの形が出来上がる時代になりました。「自分たちでやってみよう」と考えるのは、ごく自然な判断です。

しかし、実際にやってみると、80%までは驚くほど速く出来上がるのに、残りの20%でどうしても行き詰まるという声を多くいただきます。

デザインがどこか素人っぽい、スマホで見ると崩れる、検索に出てこない ── 。こうした「あと一歩」の壁は、AIのコツを知るだけでは乗り越えにくいものです。

確かに、ClaudeやGeminiを使えば、Webサイトの「形」は一瞬で出来上がります。しかし、いざ公開しようとすると見つかる、細かなズレや使い勝手の違和感。その「80%の壁」を突破し、ビジネスで戦える武器へと昇華させる「プロの視点」があります。

この記事では、AIでWebサイトを作った際にありがちな6つの課題と、Web制作のプロフェッショナルだからこそ提供できる「仕上げ」の価値を解説します。

「掛けるべきコストはかけて、きちんとフィニッシュさせたい」という方に向けた内容です。

AIでWebサイトを作る時代が来ている

昨今、AIの進化スピードは加速の一途をたどっています。

• Claude Code ── 対話しながらコードを生成し、Webサイトの構造からデザインまで一気に組み上げる
• Gemini ── Googleの大規模言語モデル。長いコンテキストに強く、大量のコンテンツ生成に向く
• Codex（OpenAI） ── プログラミング特化のAI。HTMLやCSS、JavaScriptの生成精度が高い

これらを併用することで、それぞれの得意領域を活かしながら、1つのAIに頼りすぎない制作が可能になっています。実際に、Claude・Gemini・Codexを使い分けてWebサイトを公開する事例も出てきました。

しかし、「作れる」ことと「ビジネスで使える品質」の間には、まだ明確なギャップがあります。

AIが得意なのは「構造を素早く組み上げること」。一方で、ブランドとしての一貫性、細部の品質、見えない技術設定、そして公開後の運用設計は、依然として人間の専門性が求められる領域です。

AIで作ったWebサイトに起きがちな6つの課題

1. デザインが「それっぽい」けど素人感が抜けない

Claudeでデザインを指示すると、それなりに整った見た目のページが出来上がります。しかし、どこか「テンプレート感」が拭えないと感じることはないでしょうか。

AIは、フォントの選定、余白の設計、色彩のバランスといった要素を「一般的に良いとされるパターン」で処理します。そのため、見た目は整っていても、自社ブランドの世界観やトーン&マナーとの一貫性が弱くなりがちです。

Claudeできれいに仕上げるコツとして「具体的にデザインの方向性を指示する」方法はありますが、そもそもデザインの方向性を言語化すること自体が、専門的なスキルを必要とします。

2. レスポンシブが崩れる・ブラウザ差異が出る

PC画面では問題なく見えるのに、スマートフォンで見ると崩れる。あるいは、Chromeでは正常なのにSafariだと表示がおかしい。

AIは基本的にPC表示を前提にコードを生成する傾向があり、レスポンシブ対応が甘くなるケースが少なくありません。特に、画像の扱い、ナビゲーションの開閉、フォームのレイアウトなどは、実機で確認しなければ気づけない問題が潜みやすい箇所です。

「Claude デザイン 崩れる」で検索される方も多いですが、多くの場合、CSSのメディアクエリやflexbox/gridの指定が不十分であることが原因です。

3. SEO・構造化データ・OGPなど見えない部分が抜ける

Webサイトを公開したのに検索に出てこない。SNSでシェアしたのにサムネイルが表示されない。

こうした問題は、AIが自発的には設定しない「見えない部分」に起因します。

• meta要素（title、description）の最適化
• 構造化データ（schema.org）のマークアップ
• OGP（Open Graph Protocol）の設定
• canonical URL、sitemap.xml、robots.txtの整備

これらはブラウザ上では見えませんが、検索エンジンやSNSがサイトを正しく認識するために不可欠な設定です。Claudeに「SEO対策をして」と指示しても、これらを網羅的にカバーすることは難しいのが現状です。

4. トークン制限で途中から品質が落ちる

Claudeをはじめとする生成AIには、一度に処理できる情報量（トークン）に上限があります。

プロジェクトが大きくなると、AIが前半で作った内容を「忘れる」ため、後半のページほど品質が下がる、デザインの一貫性がなくなる、といった現象が起きます。

対策として、Claude・Gemini・Codexを併用してトークンの消費を分散させる方法はあります。しかし、複数のAI間でデザインやコードの一貫性を保つには、全体を俯瞰して統合する「人間の目」が必要です。

5. 写真・素材がストックそのままで印象が薄い

AIが生成するWebサイトに配置される画像は、多くの場合フリー素材やAI生成画像です。

見た目は整いますが、リアリティと訴求力に限界があります。特にBtoBサイトでは、自社の人、空間、製品の実写があるかどうかが、訪問者に与える信頼感に直結します。

「どこかで見たことのある素材」が並ぶサイトと、その会社ならではの空気感が伝わるサイト。印象の差は歴然です。

6. 更新・運用の設計がない

AIでWebサイトを「作る」ことはできても、「作った後」のことまでは設計してくれません。

• CMSが入っていないため、更新のたびにコードを触る必要がある
• 更新マニュアルがなく、担当者が変わったら誰も触れなくなる
• そもそも「何を・いつ・どう更新するか」の運用方針がない

Webサイトは公開してからが本番です。更新されないサイトは、検索順位の低下、情報の陳腐化、ブランドイメージの毀損につながります。

プロが仕上げるとどう変わるか ── 6つのソリューション

上記の課題に対して、Web制作のプロフェッショナルがどのような価値を提供できるのか。課題と1対1で対応する形でご紹介します。

1. プロのアートディレクター・デザイナーが仕上げる

AIが組み上げたデザインをベースに、プロのアートディレクターとデザイナーがブランドの世界観に合わせてチューニングします。

フォント、配色、余白、あしらい ── 「なぜか洗練された印象になる」のは、こうした細部の設計にプロの知見が入るからです。ゼロからデザインするよりも大幅にコストを抑えながら、プロ品質の仕上がりを実現します。

2. プロのエンジニアがソースをレビューし、仕上げる

AIが生成したHTML、CSS、JavaScriptを、プロのエンジニアがレビューします。

レスポンシブ対応の不備、ブラウザ間の表示差異、パフォーマンスのボトルネックなど、実機検証でしか見つからない問題を洗い出し、修正します。コードの品質を担保することで、安定した表示と快適な閲覧体験を実現します。

3. プロがコードを確認し、推奨設定の抜け漏れを埋める

SEO、構造化データ、OGP、アクセシビリティ ── Webサイトに求められる「見えない品質」を、プロが網羅的にチェックします。

検索エンジンに正しく認識され、SNSでシェアされたときに意図通りの表示になる。こうした基本品質の担保は、公開後の成果に大きく影響します。

4. 素案を頂いて、プロがフィニッシュまで持っていく

「AIで途中まで作ったけど、ここから先が進まない」── そんな状態でも大丈夫です。

出来上がっている素案をお預かりし、プロが残りの作業を引き継いでフィニッシュまで持っていきます。AIで作った80%を無駄にせず、残り20%をプロの手で仕上げる。これは、フルスクラッチで依頼するよりも大幅にコストを抑えられる、新しい制作モデルです。

5. プロのカメラマンをアサインし、訴求力のある素材を撮影する

素材は訴求力の要です。

自社の人、空間、製品を、プロのカメラマンが撮影します。撮影した素材は、Webサイトだけでなく、パンフレットやSNSなど幅広い用途で活用できます。「その会社ならでは」の空気感が伝わるビジュアルは、フリー素材では絶対に手に入りません。

6. 運用マニュアルを整備し、作った先まで支える

公開後に「誰が、何を、どう更新するか」を設計し、運用マニュアルとして整備します。

CMS（WordPress等）の導入支援、更新手順書の作成、運用フローの策定まで。担当者が変わっても運用が止まらない仕組みを、サイト構築とセットでご提供します。