AIで作ったサイトを直したい｜よくある失敗と修正を頼む前の整理
AIでホームページを作ったものの、「表示が少し崩れている」「文章が自社らしくない」「どこを直せばよいか分からない」と困っていませんか。
ぱっと見は完成しているので、全部を作り直すべきか、一部だけ直せばよいのかも判断しにくいですよね。
ただし、AIで作ったサイトだからといって、問題の原因がすべてAIにあるとは限りません。
AIへ入力した情報、選んだテンプレート（ひな型）、公開後の設定、外部サービスとの接続など、原因になりうる場所はいくつもあります。
大切なのは、「AIで作ったから変」の一言でまとめず、実際に起きている症状を一つずつ分けることです。
この記事では、直したい内容を文章・画像、デザイン・操作、コード・仕組みの三つに分け、自分で直す範囲と人へ頼む範囲を整理します。
最初から原因を言い当てる必要はありません。
まずは、どのページで何が起きていて、どうなってほしいのかを記録できれば十分です。
1. 直したい理由を症状で書き出す
修正を始める前に、気になることを「症状」として書き出してみましょう。
「何となく変」「AIっぽい」「使いにくい」だけでは、修正を担当する人が同じ問題を画面上で再現できません。
技術的な原因や直し方まで、自分で決める必要はありません。
1件ずつ同じ形で記録する
気になった問題は、次の項目にそって1件ずつまとめると伝わりやすくなります。
- 対象ページ：
ページの名前とURL - 場所：
見出し、画像、ボタン、フォームなど、画面のどこで起きているか - 確認環境：
使った端末（スマートフォンかパソコン）、OS、ブラウザの種類 - 操作：
問題が起きるまでに、どこを押して何をしたか - 現在の状態：
実際に表示されている内容や、動いている状態 - 希望する状態：
どうなれば修正が終わったと判断できるか - 影響：
誰が、どの場面で困るのか - 記録：
個人情報を消したスクリーンショットや画面録画
たとえば「スマホでボタンが変です」と伝えるより、次のように書いた方が状況は伝わります。
記録例：トップページをスマートフォンで開くと、料金案内のボタンが画面の外へはみ出し、右側の文字を読めません。ボタン全体が画面内に収まり、文章を読んで押せる状態を希望します。
一つの記録に文章、画像、フォーム、色など複数の問題を詰め込まず、場所や症状ごとに分けましょう。
症状ごとに分けておけば、修正後も同じ端末と同じ手順で結果を確かめられます。
「直したつもり」で終わることを防げます。
そのまま使える不具合記録
制作会社や技術者へ渡すときは、次の形をコピーして1件ずつ記入しましょう。
対象ページ:
URL:
確認日時:
端末・OS:
ブラウザ:
問題が起きる場所:
再現する手順:
現在の状態:
希望する状態:
困る人・影響:
スクリーンショットや動画:
修正完了と判断する条件:スクリーンショットや動画を添えるときは、「顧客情報とパスワードは消し済み」のように、確認した結果もメモに書き添えましょう。
共有する前の見落としを減らせます。
修正完了の条件は、「きれいにする」ではなく、「スマートフォンでボタン全体が表示され、文章を読んで押せる」のように、あとから確認できる形で書きましょう。
秘密情報を記録へ含めない
スクリーンショットや修正資料には、問い合わせ内容、顧客情報、管理画面のURL、パスワード、APIキー（外部サービスとつなぐための合い言葉）などが写り込むことがあります。
外部へ渡す前に、必要のない情報は隠すか削除してください。
サイトへログインしての確認を依頼するときも、普段使っている管理者アカウントをそのまま渡さないようにしましょう。
可能であれば、必要な権限だけを付けた一時的なアカウントを用意してください。
どの情報を渡せばよいか分からないときは、先に依頼先へ聞き、求められていない秘密情報は送らないようにしましょう。
2. 文章・画像の問題を分ける
文章と画像の問題は、管理画面から自分で直せることが多い部分です。
ただし、見た目を整えるより先に、間違っていると読者に迷惑がかかる情報から確認しましょう。
文章は事実、伝わり方、表現の強さを見る
まずは、社内で正しいと確認できる料金表、会社概要、サービス資料と、サイトの記載を照らし合わせましょう。
優先して確認したい項目は、次のとおりです。
- 会社名、住所、電話番号、営業時間
- サービス内容、対象者、対応地域
- 料金、追加料金、納期、支払条件
- 資格、実績、受賞歴、導入件数
- 問い合わせた後の流れと、返信までの目安
- キャンセル、返品、利用条件
AIは自然な文章を作りますが、こちらが入力していない条件を勝手に補ったり、ひな型の見本用の数字や社名をそのまま残したりすることがあります。
「地域で一番」「必ず成果が出る」「誰でも簡単」のような強い表現がある場合は、そのまま公開できる根拠があるか確認しましょう。
根拠を示せない場合は、実際に説明できる範囲の表現へ直しましょう。
書かれている事実が合っていると確認できたら、次は自社らしさと読みやすさを見ていきましょう。
- 普段の接客や資料とかけ離れた言葉遣いになっていないか
- 誰に向けたサービスかが具体的に伝わるか
- 同じ意味の文章を何度も繰り返していないか
- 専門用語に、初めて出てくる場所で短い説明があるか
- 読者が次に何をすればよいか分かるか
「AIっぽい文章」を直すときは、語尾を変えるだけでは足りません。
実際のお客様、よく受ける相談、対応できる範囲を具体的に書き足すと、自社らしい文章へ近づきます。
画像は不自然さと利用条件を分ける
AIで作った画像は、全体の雰囲気が合っていても、人物の手や画像内の文字、小物、商品の形などに不自然な部分が残ることがあります。
画像は、次の点を確認しましょう。
- 人物の手、顔、服、小物が不自然な形になっていないか
- 画像の中の文字や数字が、意味の通る内容になっているか
- 実際の商品や店舗と違う見た目の画像を、そのまま使っていないか
- 他社のロゴや商標に見える要素が入っていないか
- 自社の色、雰囲気、想定するお客様と合っているか
- AIへ読み込ませた素材と、できあがった画像の利用条件を確認できるか
その画像を使ってよいかどうかは、利用したAIサービス、読み込ませた素材、できあがった内容、使い道によって変わります。
「AIで作った画像だから自由に使える」と決めつけず、利用したサービスの最新の規約を確認してください。
判断に迷う内容があれば、必要に応じて専門家へ相談しましょう。
問題が文章と画像だけなら、サイト全体を作り直さなくても、内容の差し替えで改善できます。
3. デザイン・操作の問題を分ける
デザインは、好みだけでなく、読めるか、押せるか、目的の場所へ進めるかで確認しましょう。
パソコンできれいに見えても、スマートフォンで開くと順番や余白が変わり、急に使いにくくなることもありますよね。
まず主要な流れを実際に操作する
問い合わせが目的のサイトなら、次の順にたどってみましょう。
- トップページを開く
- サービス内容と料金を確認する
- 問い合わせボタンを押す
- フォームへ入力する
- 送信し、完了表示と通知を確認する
途中で迷ったり進めなくなったりした場所が、最初に直す候補です。
それぞれの画面では、次の点を確認してみてください。
- 文字が小さすぎず、行と行の間隔も詰まりすぎていないか
- 文章や画像が画面の外へはみ出していないか
- 大事な見出しやボタンが、装飾に埋もれていないか
- メニューを開いて、目的のページへ移動できるか
- ボタンが押せる場所だと見て分かり、指でも押しやすいか
- フォームの項目名と、入力を間違えたときの直し方が分かるか
- 送信した後に、次の流れが案内されるか
見た目だけを直しても、情報の順番やページの構成が合っていなければ、使いにくさは残ります。
たとえば、色やボタンの角の丸みを整えても、料金が見つからない、問い合わせボタンまでたどり着けないという問題は解決しません。
好みと不具合を分ける
修正を頼むときは、気になる点を次の3つに分けましょう。
見積もりの内容や、直す順番を相手と合わせやすくなります。
気になる点の種類 | 具体例 |
|---|---|
不具合 | ボタンが動かない、画像が重なる、フォームを送れない |
使いやすさの問題 | 文字が読みにくい、重要な情報が見つからない、操作に迷う |
好み・追加要望 | 色を変えたい、動きを追加したい、新しいページを増やしたい |
不具合の修正と追加の要望では、必要な作業や費用が変わります。
最初に分類しておくと、「どこまでが修正で、どこからが新しい制作か」を確認しやすくなります。
4. コード・仕組みの問題を分ける
表示や操作の問題が、文章やデザインの編集だけでは直らないこともあります。
その場合は、サイトを動かしているコードや仕組みの確認が必要です。
この段階では、画面に見えている症状だけで原因を決めつけないことが大切です。
画面に見える症状と技術的な原因を分ける
コードや仕組みに関係する可能性がある症状には、次のようなものがあります。
- 特定の端末やブラウザだけで表示が崩れる
- ボタンやメニューを押しても動かない
- フォーム送信時にエラーが出る
- 管理画面で変更しても公開画面へ反映されない
- ページの読み込みが途中で止まる
- 外部の予約、決済、地図などが表示されない
- 修正するたびに別の場所が崩れる
ただし、同じ症状でも原因は一つとは限りません。
たとえばフォームを送れない原因は、入力内容の不備、使っているブラウザ、フォームの設定、メールの送信設定、外部サービスの障害など、いくつも考えられます。
依頼する側が原因を突き止める必要はありません。
URL、使った端末、行った操作、表示されたエラーメッセージ、起きた日時を記録して渡せば十分です。
修正後も扱える状態か確認する
AIで生成したコードが動いていても、保守しやすいとは限りません。
保守とは、公開後も安全に修正や更新を続けられる状態を保つことです。
技術者へ確認を頼むときは、今出ているエラーだけでなく、次の点も一緒に相談してみましょう。
- 同じ役割のコードが、いくつも重複して書かれていないか
- 使っていない処理や部品が残っていないか
- どこを変えるとどこへ影響するのかが分かる構成になっているか
- 外部サービスが止まったとき、サイトのどの機能が使えなくなるか把握できるか
- 利用している部品や仕組みの更新方法が分かるか
- 修正後のテストと、バックアップを取る手順が決まっているか
- 次の担当者が内容を理解できる記録があるか
次の担当者へ引き継げるか確認する
修正した後に、特定の人しか扱えない状態を残さないよう、次の項目も確認しましょう。
- 今公開されているページが、どのファイルや管理画面と対応しているか分かる
- 公開前に確認する環境、公開の手順、公開後の確認方法が記録されている
- 使っている部品やライブラリ（機能をまとめた部品集）、外部サービスと、その更新方法が分かる
- ドメイン、サーバー、CMS（管理画面から更新する仕組み）、外部サービスの契約者と管理者が分かる
- 環境変数の名前と設定場所が、秘密の実値を含めず記録されている
- 変更前のバックアップと、問題が起きたときに元へ戻す手順がある
- 対象の端末、ブラウザ、フォームなど、修正後に行うテストが決まっている
- 画像、フォント、コード、外部の部品について、利用条件を確認できる
環境変数とは、接続先や外部サービスの設定などを、コードの外で管理する仕組みです。
引き継ぎ資料には環境変数の名前と設定場所だけを残し、パスワードやAPIキーの実際の値は書かないでください。
もちろん、これらの資料をすべて公開する必要はありません。
自社と依頼先のどちらが何を保管し、担当者が変わったときに誰へ確認するかを決めておきましょう。
ログイン、決済、会員情報、個人情報を扱う機能は、一般的な見た目の確認だけで安全性を判断できません。
こうした機能を扱うときは、同じ分野の経験がある技術者や、必要に応じてセキュリティの専門家へ確認してください。
5. 自分で直す・診断する・修正を頼む
問題を分けたら、内容と影響の大きさに合わせて対応方法を選びましょう。
全部を自分で直す必要はありません。
かといって、原因が分からないまま、サイト全体の作り直しを依頼する必要もありません。
三つの選択肢を使い分ける
三つの選択肢と、それぞれが向いている場面は次のとおりです。
対応方法 | 向いている内容 | 注意すること |
|---|---|---|
自分で直す | 会社情報、料金、文章、使用許可を確認した画像の差し替え | 変更前の内容を保存し、一か所ずつ確認する |
診断で整理する | 問題が複数あり、直す順番や確認範囲が分からない | 診断を受けただけでは、実際の修正までは終わらない |
修正を頼む | 表示崩れ、フォーム、コード、外部サービスとの連携 | 対象、希望する状態、見積もりの範囲、テスト方法を先に合わせる |
自分で直す場合は、公開中のページを書き換える前に、バックアップと元の文章を残しておきましょう。
一度に多くの場所を変えると、どの変更で問題が起きたのか分からなくなります。
小さな修正を一つ行い、パソコンとスマートフォンで確認してから次へ進んでください。
診断を頼む場合は、対象となるURL、調べる項目、人の目による確認が入るか、実際の修正まで含むかを、申し込む前に確かめましょう。
サイト診断で分かる範囲は、別記事の「サイト診断で何がわかる？」で整理しています。
修正を頼む場合は、最初に作った症状の記録をそのまま渡しましょう。
依頼する前に、次の内容を相手と確かめておきましょう。
- 対象のページと、直してもらう項目
- 見積もりに含まれる作業
- 追加費用が発生する条件
- 修正前にバックアップを取る方法
- 修正内容を確認する環境と、公開までの手順
- 修正後に行うテスト
- 納品後に自分で更新できる範囲
AIで作ったサイトを公開してよいか、内容や操作の面から見直したい方は、別記事の「AIで作ったホームページ、そのまま公開して大丈夫？」の確認ポイントも一緒に使えます。
「全部作り直す」という選択は、症状を整理した後でも選べます。まずは事実の誤り、利用者が進めない操作、影響の大きい不具合の順に分けていくと、必要な修正の範囲が見えてきます。
まとめ
最後に、AIで作ったサイトを直す前の整理ポイントを振り返ります。
- 「AIで作ったから変」で済ませず、URL、端末、操作、現在の状態と希望する状態を記録する
- 文章と画像は、事実の誤り、自社らしさ、利用条件に分けて確認する
- デザインは好みだけで判断せず、読めるか、押せるか、目的の場所へ進めるかで見る
- コードや仕組みの原因は画面だけで決めつけず、症状を技術者へ伝える
- 自分で直す、診断で整理する、修正を頼む、の三つを使い分ける
- 秘密情報を修正資料へ含めず、渡すアカウントの権限も必要な範囲だけにする
- ファイル、公開手順、契約、バックアップ、テストを次の担当者へ引き継げる状態にする
まず一つやるなら、いちばん困っているページを開き、「現在の状態」と「希望する状態」を一文ずつ書いてみましょう！
この二つが書けるだけでも、自分で直すのか、誰かへ相談するのかを判断しやすくなります。
症状を書き出しても、直す順番や範囲を自分で決めきれないときは、なのはAIラボのホームページ仕上がり診断もあります。
プランによって確認するページ数と項目が変わり、実際の修正作業は含みません。
申し込む前に、どこまで確認できるかを見ておいてください。
関連記事
