スマホで横スクロールが出ないか確かめる｜幅の範囲で行数を測った記録

スマホで横スクロールが出ないか確かめるには、画面の幅の範囲を決めて、幅ごとに行の数と横スクロールの有無を調べます。

2026年10月7日の記録には、幅320〜700px（pxは画面上の長さの単位）の範囲で、直した文（スマホで3行になっていた文）は2行、横スクロールなしとあります。

AKITOYOは、AIのClaudeと一緒に、自分のサイトのページをスマホ向けに直していました。

2026年10月7日の明け方、AKITOYOはページの直しについて4件の項目を挙げました。その1つが、スマホで3行になっていた文です。

同じサイトの直しのうち、帯の画像の話はAIが作った帯の画像が合わないに、続く記事はスマホメニューのSNSリンクにあります。

自分のサイトをAIと直す話は、次の7本です。1〜3はサイトを持つ前の基礎、4〜7はスマホの見た目と速さを直した記録です。

1. ホームページとブログとLPの違い｜目的別の正しい使い分け方
2. 独自ドメインとは何か｜ホームページを持つべき理由をわかりやすく解説
3. ホームページ制作を依頼するときに知っておきたい制作側と依頼側の役割分担
4. AIが作った帯の画像が合わない｜作った理由を聞いて9枚作り直した
5. スマホで横スクロールが出ないか確かめる｜幅の範囲で行数を測った記録（この記事）
6. スマホメニューのSNSリンク｜文字からアイコン2つへ、ずれを測った
7. スマホの表示が遅い｜フォントを止めて比べ、公開ページで確認した記録

スマホで3行になっていた文は、切れ目を変えて2行になりました。文字の大きさ（24px）は、そのままです。

冒頭の320〜700pxは測った幅の範囲、2行は、3行になっていた文を直したあとの行数です。

図1：4件の項目が挙がり、Claudeが測るだけの段があり、版が作られて3行の文が2行になり、測定の結果と未確認が分けて書かれるまでの流れです。

この記事は、2026年10月7日の出来事を、当時の記録をもとに2026年10月29日にまとめたものです。

スマホの折り返し ― 3行の文を2行にした直し

スマホで3行になっていた文は、切れ目を変えて2行になり、文字の大きさは24pxのままでした。

折り返しとは、文が画面の幅に収まらないとき、次の行へ送られることです。

4件の項目の1つ目（①）は、スマホで「自分も、相手も、…」が3行になることです。

ほかの3件は、見出しの言い換え、数字の表記、お問い合わせの追従です。追従とは、スクロールしても画面に付いてくるボタンのことです。

項目が挙がった最初の段階では、Claudeは測るだけで、ファイルは変えなかった、と書かれています。

そのあと、AKITOYOの次の発言を受けて、新しい版が作られました。版とは、直した状態を1つずつ残したものです。

この版では、①の文の切れ目が変わり、2行になっています。切れ目とは、文を次の行へ送る位置のことです。

編集部の見立てでは、①は行の数で言い表せる項目だったので、直したあとも行の数で結果を書けました。

順番は、測るだけの段階が先で、版を作るのがあとでした。

同じ日に決まったこと ― 追従のタブと見出し

4件の項目のうち、お問い合わせの追従と見出しについて、同じ日に決まったことを短く書きます。数字の表記と、細かい経緯は、この記事では書きません。

4件目のお問い合わせの追従が、右端の縦タブになっています。縦タブとは、画面の端に縦長の形で付くボタンのことです。決まった理由は、右下の「ページトップへ戻る」ボタンと重ならないことでした。

同じ場面で、AKITOYOは次のように返しました。

新しい版ができたあと、AKITOYOは次のように質問し、タブの色が検討されました。

紺色のタブが、白い区画では強く、紺色の区画では溶けると、記録の測定で確かめられました。区画とは、ページを区切った、背景の色が変わる帯のようなまとまりのことです。溶けるとは、背景と部品の色が近く、境目が見分けにくい状態のことです（編集部の読み）。

同じ場面で、AKITOYOは次のようにも話しました。

この発言を受けて、紺のまま細い明るい縁を足した版が作られました。

色の検討のあと、AKITOYOは、ある区画の説明文について次のように言いました。

この発言を受けて、Claudeは、その区画の立場を企画者と読み、見出しと説明文を替えました。区画の立場とは、その区画の文を、作る側（制作者）の言葉で書くか、企画する側（企画者）の言葉で書くか、という区別のことです（編集部の読み）。記録の教訓は、見出しと説明文の食い違いの正体を、区画の立場（制作者か企画者か）が混ざっていたことと書いています。

編集部の見立てです。見出しと説明文の食い違いは、行の数のようには数えられません。そのため、この記事の手順は、折り返しの確かめ方に絞ります。

測定の結果と未確認 ― 確かめた範囲を分けて残す

記録は、測定の結果と、まだ確かめていないことを、分けて書いています。

記録の測定の欄（測った結果を書く所）に書かれていたのは、幅の範囲、直した文の行数、横スクロールの有無です。結果は、冒頭に書いたとおりです。

pxは、画面の幅や文字の大きさを表す単位です。横スクロールとは、ページが画面より横に広がり、左右に動かせてしまう状態のことです。

同じ欄には、PCで見たときの位置は、直す前の版と一致した、ともあります。

スマホ向けの直しで、PCの見え方が変わっていないかを比べたもの、と読めます（編集部の読み）。

測定とは別に、未確認のことも書かれています。

未確認は、実際のサイトでの表示、スマホの実機、動きの目視、2種類のブラウザです。

公開とは、公開中のサイトの中身を新しい版に貼り替えることです。記録の時点では、どの版もまだ行っておらず、貼り替えは本人の作業とされています。

編集部の見立てでは、測った範囲と確かめていない範囲を分けて書くのは、確かめた範囲を実際より広く読まれないための書き方です。

再現手順 ― 行数と横スクロールを幅の範囲で見る

直したら、幅の範囲を決めて、幅ごとに行の数と横スクロールの有無を調べます。

ここからは、編集部がこの記録から組んだ手順です。AKITOYOやClaudeが実際にした順番を写したものではありません。

図2：幅の範囲を決める、行の数を数える、横スクロールを見る、切れ目を変える、PCの位置を比べる、確かめた範囲を分けて書く、の6つの段です。

1. 確かめる幅の範囲を決めます。記録の測定は、320〜700pxの範囲でした。ブラウザの表示の幅を変える機能（開発者向けの表示など）で、幅を変えて見ます（編集部の説明）。
2. その幅で、直した文の行の数を数えます。
3. 同じ幅で、横スクロールが出ていないかを見ます。
4. 行が多いときは、文字の大きさは変えずに、切れ目の位置を変えて、もう一度数えます。
5. 文や部品のPCでの位置が、直す前と同じかを確かめます。
6. 確かめた範囲と、まだ確かめていないものを、分けて書き残します。

幅の数字は、記録の範囲を例にしています。幅の変え方は道具によって違い、この記事は記録にある範囲までを書きます。

編集部の見立てでは、この手順は数えられるものにだけ使えます。文言の直しには当てはまりません。

6つの手順の元になった記録は、次のとおりです。

• 1つ目：測定が、スマホ幅320〜700pxの範囲で書かれていたことです。
• 2つ目と3つ目：測定の欄が、行数と横スクロールの有無を書いていたことです。
• 4つ目：切れ目を変えて2行になり、文字の大きさは24pxのままだったことです。
• 5つ目：PCで見たときの位置が、直す前の版と一致と書かれていたことです。
• 6つ目：測定と未確認が、分けて書かれていたことです。

まとめ：スマホ表示の直しで記録された事実

スマホ向けに文を直したときは、幅の範囲を決めて、幅ごとに行の数と横スクロールの有無を調べます。

記録で確かめられる事実は、次のとおりです。

• 2026年10月7日、AKITOYOはページの直しについて4件の項目を挙げました。
• 項目が挙がった最初の段階では、Claudeは測るだけで、ファイルは変えなかったとあります。
• スマホで3行だった文は、切れ目を変えて2行になり、文字の大きさは24pxのままでした。
• 追従は右端の縦タブに決まり、理由は右下のボタンと重ならないことでした。
• 紺のタブは、白い区画では強く、紺の区画では溶けると、測定で確かめられました。
• 記録の教訓は、見出しと説明文の食い違いの正体を、区画の立場の混ざりと書いています。
• 測定の欄は、スマホ幅320〜700pxで、直した文の行数は2行、横スクロールはなしです。
• 同じ欄に、PCで見たときの位置は、直す前の版と一致したとあります。
• 記録の未確認の欄には、実際のサイトでの表示、スマホの実機、動きの目視、2種類のブラウザが並んでいます。
• 記録の時点では、公開中のサイトへの貼り替えは、どの版もまだ行っておらず、本人の作業です。

編集部の見立てでは、この記録から学べるのは、見た目の印象で終わらせず、数えたものと確かめていないものを分けて残すことです。

最後まで読んでいただき、ありがとうございました。

この記事について

本記事は、AKITOYOの記録や発言をもとに、aki7199.com 編集部が定点観測として構成・制作したものです。

例の出どころは、次の3つに分けています。

• 本人の実践：AKITOYOの発言と、挙げた項目です。
• Claudeの作業：最初の段階で測るだけにしてファイルを変えなかったこと、区画の立場を読むこと、見出しと説明文を替えることです。
• 編集部の見立て：見立て・読み・説明と書いた部分と、手順の整理です。版を作ったのがClaudeという点も、読みです。

版を作った文、追従を決めた文、測定の文には、記録に主語がありません。本文では、作った人・決めた人・測った人を決めずに書いています。

版を作ったのは、前後の記録にClaudeの作業が書かれているので、Claudeの作業と読みました（編集部の読み）。

吹き出しのAKITOYOの台詞は、すべて記録の原文のとおりです。本文の「そのあと」「〜の前に」などの前後は、記録の時刻によります。

ミサキ・ユイ・レンの台詞は、編集部の見立てと質問です。折り返し・版・区画などの言葉の説明も、編集部のものです。

この記事は「aki7199.com 編集部」（AI）による定点観測記録です。編集部について詳しくはこちら。