AIでサイトの小さな修正をする｜非エンジニアが安全に進める手順
文言の変更や表示崩れなど、自社サイトの小さな修正をAIに手伝ってもらいたい非エンジニアの担当者へ。任せてよい修正の範囲、事前準備、AIへの頼み方、公開前の確認手順をまとめました。
「ボタンの色を少し変えたい」「スマートフォンで見ると文字がはみ出している」「フッターの住所を新しくしたい」。こうした小さな修正のたびに制作会社へ依頼するのは、時間も手間もかかります。最近は、対話型AIやAIコーディング支援ツールに相談すれば、HTMLやCSS（Webページの構造と見た目を決める言語）の修正方法を教えてもらえるようになりました。
とはいえ、コードの知識がないまま本番のサイトを触るのは不安もあります。実際、AIの提案どおりに直したら別の場所の表示が崩れた、元に戻せなくなった、という失敗も起こりがちです。
この記事では、非エンジニアの担当者がAIの力を借りてサイトの小さな修正をするときに、任せてよい範囲の見極め方、事前の準備、AIへの頼み方、公開前の確認手順を紹介します。AIツールの機能は変わりやすいため、2026年時点の一般的な情報として読み、最新の情報は各社の公式情報を確認してください。
自分で直してよい修正・依頼すべき修正
まず、AIの助けを借りて社内で対応してよい修正と、制作会社や専門家に依頼すべき修正を分けておきましょう。
| 区分 | 修正の例 | 判断の理由 |
|---|---|---|
| 社内で対応しやすい | 文言・住所・電話番号の変更、色や文字サイズの調整、画像の差し替え、余白の調整 | 影響範囲が狭く、失敗しても元に戻しやすい |
| 慎重に判断する | レイアウトの組み替え、新しいセクションの追加、スマートフォン表示の大きな修正 | 他のページや画面サイズに影響が出やすい |
| 依頼すべき | フォームの送信処理、会員機能、決済、サーバーの設定、セキュリティに関わる修正 | 不具合が起きたときの影響が大きく、専門的な確認が必要 |
また、制作会社と保守契約を結んでいる場合は、社内で修正してよい範囲を事前に確認しておきましょう。契約によっては、社内での修正が原因の不具合は保守の対象外になることがあります。
修正を始める前の準備
小さな修正でも、次の準備をしてから始めることで、失敗したときにすぐ元に戻せます。
- バックアップを取る：修正するファイル、またはサイト全体のバックアップを取ります。WordPressなどのCMS（更新管理の仕組み）を使っている場合は、バックアップの方法を確認しておきます。
- 修正前の状態を記録する：修正するページを、パソコンとスマートフォンで画面の写真に撮っておきます。
- テスト環境があるか確認する：本番サイトとは別に、公開前に確認できる環境があればそちらで試します。
- 修正内容を一文で書く：「お問い合わせボタンの色を、ロゴと同じ紺色にする」のように、何をどう変えたいかを明確にします。
AIへの頼み方のコツ
AIに修正方法を相談するときは、状況をできるだけ具体的に伝えることが大切です。次の情報を含めると、的確な答えが返ってきやすくなります。
- サイトをどの仕組みで作っているか（WordPress、ノーコードツール、HTMLファイルなど）
- 修正したい箇所と、今の状態、希望する状態
- 関係しそうなコードの部分（パスワードやAPIキーなどの秘密の情報は含めない）
- 自分の知識の程度（「コードは初心者です」と伝えると説明が丁寧になります）
頼み方の例を挙げます。
- 「WordPressで作った会社サイトです。コードは初心者です。スマートフォンで見ると、料金表の右側が画面からはみ出してしまいます。管理画面の追加CSSで直したいです。次が料金表部分のHTMLです。修正するCSSと、それをどこに貼ればよいかを手順で教えてください。また、この修正で他のページに影響が出る可能性があれば教えてください。（HTMLを貼り付け）」
- 「いま提案してもらったCSSが、それぞれ何をしているのかを一行ずつ説明してください。」
AIの提案を使う前に、「何をしているコードか」を説明してもらい、理解してから使うことが安全につながります。説明を聞いても分からない場合は、無理に使わず、制作会社に相談しましょう。
なお、AIが提案するコードは、一般的な書き方としては正しくても、自社サイトで使われているテーマや既存のCSSと競合して、思ったとおりに反映されないことがあります。そのため、一度に複数の修正をまとめて行わず、1か所直すごとに表示を確認するのが基本です。何を変えたら何が起きたのかが分かるので、問題が起きたときも原因を特定しやすくなります。
公開前の確認チェックリスト
修正をしたら、公開する前に、または公開直後に、次の項目を確認してください。
- 修正したい箇所が、意図どおりに変わっているか
- 同じ部品を使っている他のページの表示が崩れていないか
- パソコン、スマートフォン、タブレットのそれぞれで表示を確認したか
- 主要なブラウザ（Chrome、Safariなど）で表示を確認したか
- お問い合わせフォームなど、重要な機能が今までどおり動くか
- ページの表示が極端に遅くなっていないか
- 修正内容、修正日、修正者、元に戻す方法を記録したか
修正の記録は、後で制作会社に相談するときや、担当者が替わったときに大いに役立ちます。共有のドキュメントに、日付と修正内容、使ったコードを残しておきましょう。
うまくいかなかったときの対処
AIの提案どおりに修正しても、表示が崩れたり、思った結果にならなかったりすることがあります。そのときは、慌てずに次の順で対応します。
- まず修正を元に戻し、サイトを修正前の状態に復旧する
- 何が起きたか（どの画面で、どう崩れたか）を画面の写真とともに記録する
- その情報をAIに伝えて、原因と別の方法を相談する
- 2〜3回試しても解決しない場合は、無理をせず制作会社に依頼する
制作会社に依頼するときも、それまでに試したことと記録を共有すれば、原因の特定が早くなります。AIに相談した内容を整理して、依頼文をまとめてもらうのも良い方法です。
まとめ
AIを使えば、非エンジニアの担当者でも、文言の変更や色・余白の調整など、サイトの小さな修正を自分で進めやすくなりました。ただし、フォームや決済、セキュリティに関わる修正は専門家に任せ、社内で対応する修正も、バックアップ、修正内容の明確化、公開前の確認を欠かさないことが前提です。
次にやることとして、まずは社内で直したい小さな修正を書き出し、表の区分で「社内で対応しやすい」ものだけを選んでください。保守契約がある場合は、社内で修正してよい範囲を制作会社に確認してから始めましょう。