幅を合わせてほしいと頼みました。返ってきたのは、内側にdivが一つ増えたコードです
その日、私は情報サイトの案件で、AIで作ったデザインを実際のページに反映して、細かい調整をしていました。
「.phone」というdivがあります。幅が1320pxで指定されている。これをヘッダーの幅に合わせたい。それだけの修正です。
そう指示しました。返ってきたものを見ると、確かに幅は合っています。見た目は完璧でした。
中身が違いました。「.phone」の内側に、もう一つdivが作られていたんです。
幅を変えるだけなら、いまある指定を書き換えれば済みます。要素を増やす必要はありません。それなのに、新しい入れ物が一つ増えていました。
画面のほうは、何も変わっていません。
画面が崩れないので、誰も消しません
これが厄介なところです。
コードが増えても、崩れません。エラーも出ません。だから、誰も気づかないまま残ります。
そして修正は一度では終わりません。「ここをもう少し詰めたい」「この余白を広げたい」。そのたびに、また一つ増える。積み上がっていきます。
この増えた一つを、あなたは画面から見分けられると思いますか。
半年後、そのページを開いた人はこう思います。「この入れ子、なんで必要なんだろう」と。理由はありません。ただ、消していいかどうかが誰にも分からない。だから残り続けます。
AIには、あとからやり直せるように作る癖もあります。前の状態に戻せるよう、古い書き方を残したまま新しい書き方を足す。安全ではあります。ただ、これも最後に人が見ないと消えません。使っていないけれど、消していいか分からないコードが、そのまま残ります。
使われないコードは表示速度に効きます。検索エンジンの読み取りにも効いてきます
まず、読み込むファイルが重くなります。ブラウザが解釈する要素も増える。1つなら誤差です。でも積み上がると、体感で分かるところまで落ちます。
次に、検索です。検索エンジンはページの構造を読んで、どこが見出しで、どこが本文かを判断しています。意味のない入れ物が挟まると、その判断が鈍ります。構造を整えることの大切さは、内部SEOの基本でも書いたとおりです。
AIO（AI検索への最適化）でも同じです。AIがページを読むときも、構造をたどります。人が読んで分かりにくい構造は、AIにとっても分かりにくい。構造が素直なほうが有利であることは、まず間違いないと考えています。
崩れたのは、私の見立てのほうでした
AIが勝手に余計なものを足している。ここまでは、そう読める話を書きました。私も最初はそう思っていました。
ただ、AIに指示を出すと、8割はいいものが返ってきます。速いですし、丁寧ですし、こちらが考えていなかった書き方を提案してくることもある。これは本当です。
問題は残りの2割です。この2割が、見た目は正しいのに中身が正しくないコードになります。動くけれど、直しにくい。作った直後は誰も困りません。困るのは、半年後に修正する人です。
では、なぜ「.phone」でdivが増えたのか。私の指示が「ヘッダーの幅に合わせて」だったからです。この言い方だと、幅さえ合えば正解になります。中身をどう作るかは指定していません。だからAIは、自分がいちばん確実だと思う方法を選びました。新しい入れ物を作って、そこで幅を合わせる。指示に対しては、間違っていないんです。
増やさせたのは、こちらの言葉でした。
頼み方を変えれば、返ってくるコードも変わります。効いてくるのは技術より言葉です
では、どう言えばよかったか。
「『.phone』の幅指定をヘッダーと同じ値に書き換えてください。要素は増やさないでください」。これだけです。
AIに何をさせるかは、日本語の精度で決まります。
曖昧な言葉で頼めば、曖昧な解釈が返ってきます。AIが悪いわけではなく、こちらの言葉が足りていない。技術の話に見えて、中身は国語の話です。
弊社ではAIの出力をそのまま納品しません。組み直す係を別に立てています
増やした本人には、自分が増やしたdivが見えません。「これでいい」と思って書いているからです。
そこで、社内のルールを埋め込んだAIのチームを組んで、そこを通してから組み直しています。役割は約70に分けています。調査する係、影響範囲を確かめる係、書いたものを検品する係、といった具合です。
書いた本人には、検品させません。
別の目を通す。それだけで、拾える粗がかなり変わります。
「なんとなく」を指示に組み直す仕事
「もう少し明るい感じに」「ここはもっとすっきりさせたい」。クライアントからいただくご要望は、たいていこの形で届きます。この言葉のままでは、AIには渡せません。
やることは翻訳です。「もう少し明るく」が実際には何を指しているのかを掴んで、指示の形に組み直す。背景色なのか、写真なのか、余白なのか。相手が何を見て「暗い」と感じたのかを聞き出す。そこまでやって、はじめてAIに渡せる言葉になります。
ここは、AIには代わりができません。相手の意図を汲むところは、人の仕事として残ります。これからのWebディレクターの仕事は、そちらへ寄っていくと考えています。
拾えたdivは、目に入った一つだけです。同じものが残っていないかは確かめていません
あの「.phone」ですが、増えていたdivは、たまたま目に入ったので拾えました。指示の出し方に問題があったと分かったのも、拾ったあとです。
同じ経緯で増えたものが、あのページのほかの箇所に残っていないかは、まだ確かめていません。増えても画面は変わらないので、探すには一つずつ中身を開いていくしかありません。
AIがページの構造をどう読んでいるかも、まだ検証途中の領域です。断定はしません。
使われていないコードの調査や、公開後の保守のご相談はお問い合わせから受け付けています。
FAQよくある質問
- QAIで作ったサイトは、そのまま公開しても大丈夫ですか。
- A見た目が仕上がっていれば、公開そのものはできます。ただ、使っていないコードが残っているかどうかは、画面からは分かりません。修正を重ねた回数だけ増えていると考えたほうが、実態に近いと思います。公開の前に一度、人の目で中身を見ておくことをおすすめします。
- Q増えたコードは、あとから自分で見つけられますか。
- A手間はかかります。私の場合も、たまたま目に入ったので気づきました。ブラウザの検証ツールで要素の入れ子は追えますが、どれが不要かの判断には、そのサイトをどう作ってきたかの経緯が要ります。結局、一つずつ開いて確かめる作業になります。
- QAIに指示を出すとき、何に気をつけていますか。
- A「どうなってほしいか」だけでなく、「何をしてほしくないか」まで書くことです。今回なら「要素は増やさないでください」の一文があるかどうかで、返ってくるものが変わりました。曖昧に頼めば、曖昧な解釈が返ってきます。
- Q他社で作ったサイトでも、中身を見てもらえますか。
- Aお引き受けしています。まず現状を拝見して、どこにどれだけ残っているかをお伝えします。お見積もりは無料です。