AIに頼むなら知っておきたい用語19語【スマホ対応編｜レスポンシブ・タップ・はみ出し】
幅320pxの画面で、1つのリンクだけが377pxありました。
外出中、iPhoneで自分のブログを開いたら、画面が横に動きました。パソコンで見たときは、何も変わったところはありません。しかも、動く記事と動かない記事があります。
原因は、本文に貼ったnoteの長いURLでした。リンクが途中で折り返されず、その1つだけが画面の幅を超えていたのです。直す作業は、リンクに「途中で折り返す」設定を1行足しただけでした。
パソコンで問題なく見えるのに、スマホで開くと文字が小さい、ボタンが押しにくい、文章が長すぎる、ということがあります。公開前は「作った側」ではなく「初めて見る人」の目でスマホを確認したほうがいい、という声があります。
そして、AIに「スマホで崩れた」と伝えても、思った通りに直らないことがあります。崩れている場所が1つでも、AIには直し方が何通りにも見えるからです。
骨組み、見た目の次は「スマホ」の言葉
この記事は、シリーズの第3弾です。
- 第1弾「AIに頼むなら知っておきたい用語23語【Webサイト制作編】」：余白・配置・動きなど、骨組みの言葉
- 第2弾「AIに頼むなら知っておきたい用語20語【Webデザイン編｜文字・色・質感】」：見た目の言葉
https://note.com/shinemon33/n/na000d66f9c7e
https://note.com/shinemon33/n/n1fd90fff8312
骨組みと見た目が決まったら、次にぶつかるのは「スマホで見たら崩れた」です。今回は、そのときに使える言葉を19語、同じ形でまとめます。前の2本を読んでいなくても、この記事だけで使えるように書いています。
「スマホ対応して」という一言を、AIの側から見てみてください。画面の幅に合わせて縮小するのか、スマホ用に並びを変えるのか、スマホ専用の別ページを作るのか。何通りにも読めるので、AIはそのどれかを当てにいくしかありません。
今回の19語も、前回までと同じ基準で選びました。「この語が無いと、直す場所が2択以上に割れる」語だけです。第1弾に出た「カラム」「ホバー」「ファーストビュー」などは、説明をくり返さず、スマホだとどう変わるかだけを足します。
なお、コードはのせていません。AIに貼る指示文として使える形に、言葉で書き直しています。
【切り替えの考え方】「スマホ対応して」が一番割れる4語
最初の4語は、「何を、どの幅で、どう切り替えるか」を決める言葉です。ここが決まっていないと、あとの直しもすべて割れます。
レスポンシブ — 画面の幅に合わせて、見た目が切り替わること 頼み方｜「スマホ対応して」→「レスポンシブで、パソコンは3列、スマホは1列に」 AIが迷う理由｜「スマホ対応して」と言われると、画面に合わせて縮小して表示するのか、スマホ用に並びを変えるのか、スマホ専用の別ページを作るのか、3通りあります。
ブレイクポイント — 見た目が切り替わる、画面の幅の境目 頼み方｜「タブレットだと変」→「ブレイクポイントは768pxと480pxの2か所で」 AIが迷う理由｜「タブレットだと変」と言われると、どの幅で切り替えるのか、何段階に分けるのか、パソコンとスマホの間をどちらに寄せるのか、3通りあります。
モバイルファースト — スマホ用の見た目を先に作り、広い画面で足していく考え方 頼み方｜「スマホで見る人が多い」→「モバイルファーストで作って」 AIが迷う理由｜「スマホで見る人が多い」と言われると、パソコン用を作ってから縮めるのか、スマホ用から作って広げるのか、2通りあります。
確認する画面幅 — どのスマホの幅で確認するか。375px前後（iPhone SEなど）が一つの目安で、新しい機種は390px台です。小さめの端末の確認には320pxがよく使われます 頼み方｜「スマホで確認して」→「幅375pxと320pxで確認して」 AIが迷う理由｜「スマホで確認して」と言われると、375pxで見るのか、小さめの320pxで見るのか、新しい機種の390px台で見るのか、3通りあります。機種ごとに幅がちがう（おおむね360〜430px）ので、幅を言わないと、どれで確認したのかも分かりません。
余談｜折りたためるiPhoneが出たら Appleは2026年9月に、折りたためるiPhone「iPhone Duo」を発表しました。予約は10月16日、発売は10月23日です。公式の仕様では、閉じたときの画面が1398×2034ピクセル、開いたときが1878×2670ピクセルです。画面の細かさ（3倍）で割ると、Webの幅は閉じたとき約466px、開くと約890px（高さは約626px）になる計算です。公式の仕様にはWebの幅が載っていないので、3倍と仮定した推定です。
開いたときの約890pxは、スマホの幅でもパソコンの幅でもない、中間の大きさです。たとえば、ブレイクポイントを768pxの1か所だけにしていると、開いた890pxはパソコン用の並びになります。それで見やすいかどうかは、実機かシミュレーターで確かめないと分かりません。このシリーズでも、必要になったら、こうした幅の話を取り上げます。
【並びの変え方】「窮屈」が割れる4語
パソコンで横に並べたものを、スマホでどうするか。ここでも、「窮屈」という一言が何通りにも割れます。
縦積み（1カラム化） — 横に並べたものを、スマホでは上から順に積む（第1弾の「カラム」の続きです） 頼み方｜「スマホで窮屈」→「スマホは1カラムで、上から縦に積んで」 AIが迷う理由｜「スマホで窮屈」と言われると、縦に積むのか、文字を小さくするのか、一部を隠すのか、3通りあります。
折り返し（wrap） — 横に並べたものが入りきらないとき、次の行に回す 頼み方｜「カードが入りきらない」→「カードは入りきらなければ、次の行へ折り返して」 AIが迷う理由｜「入りきらない」と言われると、折り返すのか、縮めるのか、横にスクロールさせるのか、3通りあります。
出し分け — パソコンだけ表示、スマホだけ表示にする 頼み方｜「スマホでは要らない」→「このバナーはパソコンだけ表示、スマホでは非表示に」 AIが迷う理由｜「スマホでは要らない」と言われると、消すのか、小さくするのか、別の場所に移すのか、3通りあります。消した内容が、スマホで読めなくなることもあります。
ハンバーガーメニュー — 三本線のボタンに、メニューをたたむ 頼み方｜「スマホでメニューが長い」→「スマホはハンバーガーメニューにして」 AIが迷う理由｜「メニューが長い」と言われると、三本線にたたむのか、画面の下に固定するのか、項目を減らすのか、3通りあります。
【大きさの変え方】パソコンの数字のままだと崩れる5語
パソコンで決めた文字サイズや余白を、そのままスマホに持ってくると崩れます。数字を「画面に合わせて変える」言葉がここに集まっています。
可変サイズ（clamp） — 画面の幅に合わせて、文字や余白の大きさが、なめらかに変わること 頼み方｜「スマホで文字が大きすぎる」→「見出しはスマホで24px、パソコンで40pxまで、画面幅に合わせて可変に」 AIが迷う理由｜「大きすぎる」と言われると、固定で小さくするのか、画面幅に合わせて可変にするのか、段階で切り替えるのか、3通りあります。
文字サイズの目安も、ここで置いておきます。スマホの本文は16px前後（16〜18px）、見出しは本文の1.3倍前後が、よく挙げられる目安です。大見出しは28〜32px、中見出しは22〜28px、小見出しは18〜24pxあたり。行間は本文の1.5〜1.6倍が目安で、行間は第2弾の語です。いずれも決まりではなく、読みやすさの「目安」として使ってください。
画像の収め方 — 画像が枠に合わないとき、縮めるのか、はみ出させるのか、切り抜くのか 頼み方｜「スマホで画像が切れる」→「画像は枠の幅まで縮めて、縦横比は保って」 AIが迷う理由｜「画像が切れる」と言われると、縮めるのか、端を切り抜くのか、縦横比を変えて入れ直すのか、3通りあります。
スマホの左右余白 — 画面の左右に空ける余白。パソコン用のままだと、スマホでは本文が細くなる（第1弾のパディング・最大幅の続きです） 頼み方｜「スマホで窮屈」→「スマホは左右の余白を16pxに」 AIが迷う理由｜「窮屈」と言われると、余白を減らすのか、文字を小さくするのか、1行を短くするのか、3通りあります。
画面の高さ（100vh問題） — スマホのブラウザは、上下のバーが出たり隠れたりして、実際に見える高さが変わります。100vh（画面の高さ全部）で指定すると、バーの分だけ下が切れることがあります。第1弾の「vh」と「ファーストビュー」の続きです 頼み方｜「最初の画面がはみ出す」→「ファーストビューの高さは、バーが出たり隠れたりしても見える高さに合わせて変わる高さ（100dvh）で」 AIが迷う理由｜「最初の画面がはみ出す」と言われると、高さを減らすのか、バーを除いた高さで指定するのか、中身を減らすのか、3通りあります。
表の収め方 — 横に長い表を、スマホでどう見せるか 頼み方｜「表がスマホで切れる」→「表は横スクロールにして、最初の列は固定」または「スマホではカード形式に組み替えて」 AIが迷う理由｜「切れる」と言われると、横にスクロールさせるのか、列を減らすのか、カードに組み替えるのか、3通りあります。
【指で触る】マウスと指はちがう4語
パソコンはマウス、スマホは指です。操作の道具がちがうので、押しやすさの基準も変わります。
タップ領域 — 指で押せる範囲 頼み方｜「ボタンが押しにくい」→「ボタンのタップ領域は縦横44px以上、隣との間隔は8px以上に」 AIが迷う理由｜「押しにくい」と言われると、ボタンを大きくするのか、隣との間隔を空けるのか、位置を指の届く下のほうへ移すのか、3通りあります。目安は、Appleの基準が「44pt」、Googleの基準が「48dp」です。ptとdpは、それぞれの会社が使う画面上の大きさの単位で、Webのpx（第1弾で説明した単位）とほぼ同じ大きさと考えて大丈夫です。どれも、実際の画面では約9mm前後、指先ほどの大きさになります。Webの使いやすさの国際的な基準（WCAG 2.2）では、最低線が24pxとされていますが、これは「最低限」であって、押しやすいサイズではありません。
ボタンの幅いっぱい — スマホでは、ボタンを画面の横幅いっぱいに広げる 頼み方｜「ボタンが小さい」→「スマホでは、メインのボタンを横幅いっぱい、高さ48pxに」 AIが迷う理由｜「小さい」と言われると、高さを足すのか、幅を足すのか、文字を大きくするのか、3通りあります。横幅いっぱいにすると、押す場所を探さなくてよくなり、親指で押しやすい場合が多いです。購入・送信のような主要なボタン向けで、すべてのボタンを広げるわけではありません。
ホバーが無い — スマホには、マウスを乗せる操作がありません（第1弾の「ホバー」の続きです） 頼み方｜「ホバーで説明を出す」→「スマホではホバーが無いので、タップで開く形に」 AIが迷う理由｜「ホバーで出す」と言われると、タップで開くのか、常に表示するのか、消すのか、3通りあります。
入力欄の文字サイズ — 入力欄の文字が16px未満だと、iPhoneのSafariでは、タップした瞬間に画面が勝手に拡大されることがあります 頼み方｜「フォームを押すと画面が拡大される」→「入力欄の文字サイズは16px以上に」 AIが迷う理由｜「拡大される」と言われると、入力欄の文字を大きくするのか、拡大を禁止するのか、入力欄の形を変えるのか、3通りあります。拡大を禁止する方法もありますが、文字が読みにくい人の妨げになるので、まず文字サイズのほうを直すのがおすすめです。
【崩れの原因を探す】全体が崩れて見えて、原因は1つのこともある2語
最後の2語は、「崩れた」の原因を探すための言葉です。
はみ出し（横スクロール） — どれか1つの要素が画面の幅を超えて、ページ全体が横にズレること 頼み方｜「スマホで横にズレる」→「スマホで横スクロールが出る。幅を超えている要素を探して」 AIが迷う理由｜「横にズレる」と言われると、画像なのか、長い文字列なのか、表なのか、固定幅の枠なのか、余白なのか、5通りあります。しかも、犯人は1つとは限りません。
冒頭の話が、これです。ブログの画面が横に動く原因を探したところ、犯人は本文に貼った長いURLの1つでした。DevToolsで測ると、幅320pxの画面に対して、そのリンクだけが377px。リンクに「途中で折り返す」設定を1行足すと、枠に収まり、iPhoneの実機でも直りました。
この「全体の枠は画面の幅に収まっているのに、中のどれか1つだけがはみ出して、ページ全体が横にズレる」という形は、Webデザインの講師をしていたとき、受講生にもよくあるミスでした。見た目では「全体がズレている」ように見えるので、どこが原因なのか分かりにくいのが、初心者の詰まりどころです。
だから、AIへの頼み方は「スマホで崩れる」ではなく、「スマホで横スクロールが出る。はみ出している要素を探して」です。探す場所が、一気に絞られます。
はみ出しやすい要素は、ほかにも、固定幅の画像、表、コードなどが挙げられます。私が実際に測ったのは、長いURLの1件だけです。
ビューポート設定 — スマホに「画面の幅のとおりに表示して」と伝える設定。これが無いと、スマホはパソコン用の幅（約980px前後）で表示してから縮小するので、全体が小さく縮んで見えます 頼み方｜「スマホで全体が小さく縮んで見える」→「スマホ用の表示設定（viewport）が入っているか確認して」 AIが迷う理由｜「小さく縮んで見える」と言われると、文字サイズなのか、画像なのか、表示設定なのか、3通りあります。なお、第1弾に出た「ビューポート（vw / vh）」とは、同じ言葉で別の意味です。第1弾のほうは画面の大きさを基準にした長さ、こちらはスマホへの伝え方の設定です。
そのまま貼れる：実戦の頼み方4パターン
実際にAIへ貼る指示文として使えるパターンを4本用意しました。「ふつうの頼み方」と「用語ありの頼み方」で、何が変わるかも添えています。
パターン1｜パソコンは3列、スマホは1列に（切り替え＋並び）
ふつうの頼み方：
スマホでも見やすくしてください。用語ありの頼み方：
レスポンシブで、カードはパソコンは3列、768px以下は1列に縦積みして。
スマホの左右の余白は16pxに。AI側で変わること｜「見やすく」は、縮小・並び替え・別ページの3通りに割れます。語がそろうと、切り替える幅と並び方が一度に決まります。
パターン2｜スマホで横にズレる（崩れの原因＋確認する幅）
ふつうの頼み方：
スマホで崩れます。直してください。用語ありの頼み方：
幅375pxと320pxで確認して、横スクロールが出る原因の要素を探して。
長いURLや画像は、折り返して幅に収めて。AI側で変わること｜「崩れる」を探す場所が、確認する幅と、はみ出している要素に絞られます。冒頭の長いURLのような「1か所だけ」の原因にも、たどり着きやすくなります。
パターン3｜ボタンが押しにくい（指で触る）
ふつうの頼み方：
スマホでボタンが押しにくいです。用語ありの頼み方：
スマホではメインのボタンを横幅いっぱい、高さ48pxに。
ボタン同士の間隔は8px以上にして。AI側で変わること｜大きさ・間隔・位置のどれを直すかの迷いが消えます。
パターン4｜メニューと最初の画面がおかしい（並び＋大きさ）
ふつうの頼み方：
スマホでメニューと最初の画面がおかしいです。用語ありの頼み方：
スマホはハンバーガーメニューにして。
ファーストビューの高さは100dvhにして、ブラウザのバーで切れないように。AI側で変わること｜第1弾の「ファーストビュー」と「vh」の語と合わせると、スマホ専用の直しが2か所、同時に決まります。
「スマホ対応は、AIに丸投げすれば、用語はいらない？」
「スマホで横に動いてしまうとき、AIに『まだスマホで横に動くよ。直して』とチャットで丸投げするだけで直せる」という声があります。実際、そう頼んで直った人もいるでしょう。
これは本当です。AIは、原因が単純なときは、丸投げでも見つけてくれます。
ただ、以前こんな声もありました。スマホ表示で、画面の高さが変わる影響でレイアウトが崩れる問題を、数日頑張っても解決できず、Claude Codeなど他のAIもほとんど役に立たなかった、というものです（2026年1月ごろの声です）。
丸投げが通じるときと、通じないとき。その差は、直す場所が1つに絞れているかです。「崩れた」だけだと、AIは文字サイズ・余白・高さ・はみ出しのどれを疑えばいいのか、決めきれません。そこに「幅375pxで確認」「はみ出している要素を探して」「ファーストビューは見える高さで」と言葉が足されると、疑う場所が絞られます。
丸投げでも通る場合がある。でも、どの幅で・どこが・どの高さで、のような細部が割れると、AIも直す場所を決めきれない。 そこを指すのが、今回の19語です。
丸投げか、言葉を足すか、どちらかを選ぶ必要はありません。まず丸投げで頼み、直らなければ、言葉を1つずつ足していく。それが、往復を減らしやすい頼み方です。
まとめ｜全部覚えなくていい。まず覚えたい3語
19語を一度に使いこなそうとしなくて大丈夫です。
最初に使ってほしいのは、はみ出し・ブレイクポイント・タップ領域の3語です。「スマホで横にズレる」「パソコンとスマホで見た目が合わない」「ボタンが押しにくい」という、よく出る直しは、この3語で指しやすくなります。残りは、必要になったときに戻ってきてください。
前の2本の語と合わせれば、骨組みから見た目、スマホまで、言葉で頼めるようになります。修正の往復で溶けていた時間は、言葉1つずつ減らしていけます。
まず、いま気になっているページを、自分のスマホで開いてみてください。横に指で払って、少しでも動いたら、上の「はみ出し」から試してみてください。
みなさんの「スマホで崩れた」は、どこでしたか。コメントで教えてもらえると嬉しいです。このシリーズは、まだ続けるつもりです。フォローしておくと、次の記事が届きます。