見た目の崩れをAIに直させるとき、画像より言葉で伝えたほうが速かった

• 画面の写しだけでは、意図した状態が伝わらない
• 「どうなっているか」と「どうしたいか」を分けて書く
• 数値で測ると、原因の切り分けが速い

表示が崩れたとき、画面の写しを貼って「直して」と頼んでいた。当たることもあるが外れることも多く、やり方を変えた。

写しだけでは伝わらない

画像を渡しても、こちらの意図は伝わらない。

• どこが崩れているのか、見ただけでは判断できない
• 意図した状態がどれか分からない
• 画面の幅や環境が分からない

2つ目が本質的だ。崩れているかどうかは、意図を知っている人にしか判断できない。

3つに分けて伝える

こう書くようにしてから、1回で直ることが増えた。

【いまどうなっているか】
ロゴの下に検索欄が落ちて、左端に寄っている

【どうしたいか】
検索欄をロゴと同じ行の右端に置きたい

【環境】
画面幅1440px、Chrome
該当するCSS（貼る）

1つ目と2つ目を分けるのが要点だった。現状と理想を分けないと、どちらの話か分からない。

数値で測る

感覚で「ずれている」と言うより、数字を出すと速い。

• 要素の左端の位置
• 要素の幅
• 画面全体の幅と、横のはみ出し量

開発者ツールで測れる。「170pxずれている」と言えると、原因の候補が絞られる。

はみ出しの見つけ方

横スクロールが出るときは、全体の幅と画面の幅を比べる。差が出ていれば、どれかの要素がはみ出している。要素ごとに右端の位置を調べれば、犯人が分かる。

該当箇所だけ渡す

CSSファイル全体を渡すと、関係ない箇所まで変更される。

• 崩れている要素に当たっている指定だけ抜く
• 親要素の指定も一緒に渡す
• 画面幅ごとの指定があれば、それも渡す

2つ目を忘れると原因にたどり着けない。崩れの原因は親にあることが多い。

よくあった原因

実際に直した中で、繰り返し出てきた原因を挙げる。

• まとめて指定する書き方が、別の指定を打ち消していた
• 幅の指定が、中央寄せと組み合わさって意図と逆に働いた
• 画面幅ごとの指定の順番が逆で、後ろが勝っていた
• どこかの要素が画面幅を超え、全体がずれていた

1つ目が多い。四辺をまとめて書く指定は、片側だけ指定した別の指定を上書きする。

直した後に確認する

1か所直すと別の場所が崩れることがある。確認の範囲を決めている。

• 直した画面を、3つの幅で見る（スマホ・タブレット・PC）
• 同じ指定を使っている別のページも見る
• 横のはみ出しが0になっているか測る

2つ目を飛ばして、別ページを崩したことがある。共通の指定を触ったなら、使っている全箇所を見る。

直す前に戻せるようにする

見た目の調整は試行が増えるので、戻せる状態を先に作っている。

• 変更前のファイルを複製しておく
• 開発者ツールで試してから、ファイルに反映する
• 1つ直すごとに確認する。まとめて直さない

2つ目が効率的だった。開発者ツール上なら、値を変えて即座に見た目が変わる。当たりが出てから、その値だけファイルに書く。ファイルを直して読み込み直す往復が無くなり、調整が数分で終わるようになった。

自分で切り分ける

頼む前に、原因の範囲を狭めると速い。

• 開発者ツールで、該当する指定を一時的に消してみる
• 消して直るなら、その指定が原因
• 直らないなら、別の場所を探す

この作業は数分で済む。原因が特定できていれば、頼む範囲が小さくなる。

画像が効く場面もある

写しが無駄というわけではない。言葉と組み合わせると効く。

• 崩れ方が複雑で、言葉にしづらいとき
• 意図した状態の見本がある場合。「こうしたい」を見せる
• どの要素の話か、印を付けて示すとき

2つ目が最も有効だった。理想の状態を画像で見せ、現状を言葉で説明するという組み合わせだと、どちらの情報も欠けない。写し1枚だけを渡すのが問題で、写しそのものが悪いわけではなかった。

まとめ

• 画面の写しだけでは、意図した状態が伝わらない
• 「いまどうか」「どうしたいか」「環境」を分けて書く
• 位置と幅を数値で測ると、原因の候補が絞られる
• 崩れの原因は親要素にあることが多い
• 直した後は、3つの幅と他のページを確認する