AI開発で意図しないUI変更を防ぐルール設計
この記事で学べること
- AIへの依頼範囲外でUIやナビゲーションが変わる原因と影響
- 保護対象と例外条件をNo UI Regression Ruleへ書く方法
- 実装前の指示と変更後の差分確認を組み合わせて回帰を防ぐ考え方
AI開発のUI変更は明示的な回帰ルールで防ぐ
UI以外の修正を依頼したのにナビゲーションまで変わると、確認範囲と回帰リスクが依頼内容を超えて広がります。このサイトでも、関連改善として加えられた表示変更が意図と一致しないケースを経験しました。保護対象、変更できる条件、変更後の確認方法を明示し、Markdownの指示と実際の差分検査を組み合わせます。
この記事では、「依頼外のUI・ナビゲーション変更をどのルールと検証で防ぐか」という問いに焦点を当て、期待と結果の差、確認できた条件、再発を防ぐ判断を扱います。
最後まで読むと、「依頼外のUI・ナビゲーション変更をどのルールと検証で防ぐか」という問いを、自分の状況に照らして判断するための材料を持ち帰れます。
保護するUI範囲と承認境界を明文化する
このサイトで、ブログ記事の追加をAIへ依頼したことがあります。対象は記事ファイルとfrontmatter（Markdown記事の先頭に置くtitle、description、dateなどの設定情報）の設定で、ナビゲーション変更は依頼していませんでした。
作業が完了したあとにサイトを確認すると、ヘッダーのナビゲーション構造が変わっていました。AIがブログ記事を追加する際に、「ナビゲーションにもブログへのリンクを追加した方がよい」と判断して変更を加えていたためです。
悪意があったわけではありません。AIは「より使いやすくなる」という意図で変更を加えます。しかし、変更された事実を私が把握していないまま、公開サイトのナビゲーションが変わっていました。
無関係なUI変更は確認範囲を広げて回帰リスクを高める
AIが自己判断でUIを変更することには、いくつかの具体的な問題があります。
変更の把握ができない
依頼した作業以外の変更が加わると、何が変わったかをすべて確認しなければなりません。変更範囲が広がるほど、確認作業の負担が増えます。
予期しない影響が生じる
ナビゲーション構造の変更は、リンクの動作、ページのルーティング、スタイルの適用など複数の要素に影響を与える場合があります。記事の追加という作業に付随して、テストが必要な変更が増えます。
意図と異なるデザイン方針が入る
AIは一般的な使いやすさを判断基準にしますが、プロジェクト固有のデザイン方針や意図との整合性は保証されません。
明示指示がないUI・ナビゲーション変更をルールで禁止する
本記事でいう「No UI Regression Rule」は、このプロジェクト内で使用している独自のルール名です。一般的なvisual regression testingそのものではなく、「明示的に指示されていないUI変更を避ける」ための運用ルールを指します。
この経験から、CLAUDE.mdに次のルールを追加しました。
## UI / Navigation Rule
既存のUI、ナビゲーション、ルーティング、生成されたhomepage出力を変更しない。
明示的に指示された場合のみUI変更を行う。「No UI Regression Rule（UIリグレッション禁止ルール）」と呼んでいるのは、「明示的に指示されていないUI変更を行わない」という意味です。リグレッション（regression）はソフトウェア用語で「以前の状態への後退」を意味しますが、ここでは「意図しないUI変更」全般を防ぐためのルールとして使っています。
ルール導入後はAIがUI変更前に確認を求めるようになった
このルールをCLAUDE.mdに追加してから、AIがナビゲーションやデザインを変更しようとする場面では、先に確認を求める可能性が高まりました。「ナビゲーションへのリンク追加が必要かもしれませんが、変更してよいですか」という形です。
AIが自己判断で変更するのではなく、変更の提案として提示されるため、承認するかどうかを判断できます。依頼した作業の範囲が明確になり、確認作業の負担が減りました。
変更可能範囲と承認が必要な範囲を明文化する
このルールが機能する理由は、AIに「変更してよい範囲」と「明示的な指示が必要な範囲」を区別させているためです。
すべての変更を禁止するのではなく、「指示された範囲は変更する、指示されていない範囲は変更しない」という境界を設けることで、AIの作業範囲を制御できます。
AIは一般的に「より良くなる」と判断した変更を加えようとします。プロジェクトの意図やデザイン方針を守るためには、この判断の範囲をルールで定義することが必要です。
まとめ：保護範囲を指示し、差分と画面でUI回帰を確認する
AIに別の作業を依頼しているときにUIが変更されるという経験から、「明示的に指示されない限りUIは変更しない」というルールをCLAUDE.mdに追加しました。このルールにより、AIの作業範囲が明確になり、意図しない変更の確認作業が減りました。Markdown上のルールだけで機械的に防止できるわけではないため、重要な画面ではレビュー、差分確認、必要に応じたテストと組み合わせます。
最初に変更してはいけないUI領域を1つ特定し、例外となる承認条件と確認方法をルールへ書きます。Markdownの指示だけでは変更を機械的に防げないため、重要画面では差分、ブラウザ表示、必要なテストを省けません。