画面の崩れをAIが直す

なぜ、画面は崩れるのか

作った人が、いちばん最後に気づく。ページの崩れには、そういう困った性質があります。作っている本人は、たいてい会社の大きなパソコンの画面で見ています。そこでは何も起きません。ところが、同じページを電車の中でスマホから開いた人には、文字が途中で切れ、ボタンが重なり、読む気をなくす形で表示されている。作り手と読み手が、違う大きさの画面を見ている。これが、そもそもの原因です。

もう一つの理由は、中身が「決め打ちの幅」で作られていることです。写真の横幅を数字で固定してしまうと、画面がその数字より狭くなった瞬間にはみ出します。紙のチラシなら、紙の大きさは最初から決まっています。でもウェブのページは、開く人の画面に合わせて伸び縮みしなければいけません。ここが紙といちばん違うところで、慣れていない人がいちばんつまずくところでもあります。

同じページ、違う見え方

起きていること

パソコンで完璧でも、スマホでは読めない。

• 横に3枚並べたカードが、タブレットでは詰まって読みにくくなります。
• 文字が枠からはみ出したり、上の並びが中身に重なったりします。
• 気づくのは確認の終わりごろ。ひどいときは、公開したあとです。

次の写真は、まったく同じ中身が、画面の大きさによってどれだけ別物に見えるかを並べたものです。左と右で、内容は一文字も変わっていません。変わったのは幅だけです。

ここで大事なのは、これは「作った人の腕が悪い」話ではない、ということです。画面の大きさは無数にあります。人の目で全部を見て回るのは、そもそも無理な作業なのです。

これまでの直し方と、その手間

手間はかかるのに、取りこぼす

これまでも直し方はありました。ただ、どれも人の手と時間を大量に使います。順番に見ていきます。

幅ごとに手で書く

この幅ではこう見せる、と一つずつ書きます。書いた分だけ直す場所も増えます。指示を10個書けば、あとで文言を一つ変えるだけでも、10か所を見直すことになります。引き継ぎ書を、ページの幅の数だけ別々に作っているようなものです。

実機で確かめる

スマホやタブレットを何台も机に並べて、見比べます。直すたびに全部やり直しです。しかも手元にある端末は、せいぜい数種類。世の中にある画面の大きさは、それよりずっと多いので、必ず取りこぼしが出ます。

部品集を使う

あらかじめ用意された部品を組み合わせる方法もあります。Tailwind（ページの見た目を短い指定で整える道具）やBootstrap（同じく、よく使う部品をまとめた道具）が有名です。ただし、幅は決め打ちです。用意された幅と、自分のページが崩れる幅が、ぴったり一致するとは限りません。

切り替える幅の決め方

ここが一番むずかしい

崩れる幅は、中身が決める。

• 端末の規格ではなく、文字や項目が折り返す場所で決まります。
• 上の並びが折り返すのが920px（pxは画面の細かさを測る単位）なら、そこで見せ方を切り替えます。
• 843pxで崩れる原因が、幅と余白と文字の大きさの重なりということもあります。

つまり「スマホは何px、タブレットは何px」と表で覚えても、当たりません。自分のページの、自分の文章の長さが、崩れる場所を決めています。下の図は、その考え方を絵にしたものです。数字を先に決めるのではなく、中身が折り返す場所を見つけてから数字を決める、という順番に注目してください。

Claudeに任せる：入口は二つ

ここからが本題です。この「探して、直して、確かめる」という根気のいる作業は、AIに任せられます。入口は二つあり、目的で使い分けます。ここを間違えると遠回りになるので、最初にはっきりさせておきます。

これから新しく作るなら、Claude.ai（画面で会話しながら頼める入口）。すでにあるページを直すなら、Claude Code（自分のパソコンの中の一式を、そのまま読んで直せる道具）。やり方を教わりたいだけなら、Claude.aiで十分です。次の図が、その分かれ道です。

迷ったときの判断は単純です。直したいページのファイルが、すでに自分のパソコンの中にあるかどうか。あるならClaude Code、まだ何もないならClaude.ai。それだけで決めてかまいません。

こう頼むと返ってくる

そのまま真似できる言い方

頼み方は、新しく入った人にお願いするときと同じで大丈夫です。専門の言葉はいりません。困っている状態と、どうなってほしいかを、そのまま言います。

「3列のカードを、スマホでは1列に」

横に並んだ3枚が、狭い画面では縦に重なります。「見やすくして」だけだと相手も迷うので、いくつ並んでいるものを、いくつにしたいのかまで言うのがコツです。

「768pxより狭ければ、メニューを畳んで」

細い画面では、上の並びをボタン一つにまとめます。幅の数字が分からなければ、「スマホでは」と書けば、こちらで妥当な幅を選んでくれます。

「なぜこの作り方なのか教えて」

選んだ理由も返るので、次からは自分で決められます。これが地味にいちばん効きます。一度理由を聞いておくと、二回目からは自分で判断できるようになります。次の写真は、実際にこう頼んだときの流れです。

すでにあるページを直す

ここからは、Claude Codeを使う側の話です。どんな道具かを見て、入れ方の案内まで進みます。難しそうに見えますが、やることは三つだけ。入れる、開く、日本語で頼む。それだけです。

まず、道具を自分のパソコンに入れます。入れ方の案内は画面に出るので、その通りに進めます。つまずきやすいのは「入ったのかどうか分からない」という点です。案内の最後に、道具の番号（バージョン）が表示されます。この番号が出れば、入っている合図です。出なければ、まだ入っていません。

直したい一式を開く

実際の画面

直したいページが入った場所を、先に開いておきます。

ここを飛ばす人がとても多いです。相手は、開いている場所の中しか見ません。別の場所を開いたまま「直して」と頼んでも、直したいページが見つからず、話がかみ合いません。先に、直したいページの入ったフォルダを開く。順番はこれだけです。

日本語で頼む

実際の画面

困っていることを、そのまま日本語で伝えます。

「トップページが、スマホで見ると横にはみ出します。直してください」。この一文で通じます。英語に直す必要も、専門の言葉に言い換える必要もありません。むしろ、無理に専門ぶった言い方をすると、意図がぼやけて的外れな直し方になります。困っている状態を、同僚に相談するときの言葉のまま書くのがいちばん確実です。

直すまでの4つの流れと、点検の型

この順番は変えない

頼んだあと、裏側では次の順番で作業が進みます。この順番は変えないでください。飛ばすと、直ったつもりで別の場所が崩れます。

1. 今の作りを調べる

崩れの元になる固定の幅を探し、場所を行番号つきで示します。いきなり直さず、まず原因の場所を洗い出す。これは、修理の前に見積もりを取るのと同じです。ここで示された場所は、あとで見返せるようメモしておくと安心です。

2. 固定をやわらかい指定に変える

決め打ちの幅をやめ、空いた場所に合わせて伸び縮みする形にします。「必ず横幅◯◯」ではなく「入る分だけ広がる」に変える、ということです。これが崩れの根本の手当てになります。

3. 狭い幅で確かめる

320pxと512pxで、横にはみ出していないかを見ます。いちばん狭いところで通れば、広いところはたいてい通ります。逆をやると取りこぼします。

4. 端末の大きさで通す

iPhone SEからiPad Pro、パソコンまで順に確かめます。ここまでやって、はじめて「直った」と言えます。次の図が、この4つの流れの全体像です。調べる→直す→確かめるの並びを覚えて帰ってください。

最後に点検の型を作る

次に崩れないために

一度直して終わりにすると、次に文章を足したときにまた崩れます。そこで、点検そのものを型にして残します。Playwright（人の代わりにページを操作して確かめる道具）を使えば、決めた大きさを、いつでも同じ手順で見直せます。毎回おなじ手順なので、人によって見落としが変わることもありません。

これがあると、直した後に別の場所が崩れても、すぐ分かります。やってはいけないのは、点検の型を作らずに「今回は直ったからよし」で終えることです。ページは足したり消したりし続けるものなので、崩れは必ず戻ってきます。点検の型は、その戻りを見張ってくれる仕組みです。

まとめ：明日からできること

ここまでの内容を、明日そのまま手を動かせる形にまとめます。全部を一度にやる必要はありません。上から順に、一つずつで十分です。

• 自分の関わるページを、まずスマホで開いて見る。パソコンで綺麗でも、スマホでは崩れます
• 崩れた場所を見つけたら、切り替える幅は端末ではなく中身で決める、と覚えておく
• これから新しく作るならClaude.aiに頼み、もうある物を直すならClaude Codeに調べさせる
• 頼むときは、困っている状態を日本語のまま書く。専門の言葉に直さない
• 調べる→直す→確かめる、の順番を守る。確かめる前に次へ進まない

AI図書館

フォローといいね、お願いします

AIを仕事で使う話を、やさしく1本ずつ出しています。次の回もここで会いましょう。