スマホ表示で見出しが変な位置で改行される時の直し方とAI依頼文

スマホでサイトを見た時、H1や大きな見出しが意図しない位置で折れてしまうことがあります。内容は合っていても、改行位置が悪いだけで少し雑に見えてしまいます。

たとえば、見出しが 最初に見る場所を、ここで決 / める のように割れるより、最初に見る場所を / ここで決める のように文節で分かれた方が読みやすく、印象も良くなります。

この記事では、そういう「小さいけれどUXに効く違和感」をAIやCodexにどう伝えるかを、実際の修正例に近い形で整理します。

スマホ見出し改行をAIへ頼む流れ

今の割れ方、理想の文節、対象幅、PCを変えるかどうかを分けて伝えます。

よくある違和感

スマホの見出しは、文字数、フォントサイズ、コンテナ幅、句読点、短い動詞の位置で印象が変わります。特に日本語は単語の途中で折れても意味は読めますが、見た目としては不自然になりやすいです。

AIに投げる依頼文テンプレート

見出しの改行は、スクショだけだと「どこが気になるのか」が伝わりにくいです。今の割れ方と理想の割れ方を文字で指定します。

スマホ表示の見出し改行を改善してください。

対象ページURL:

対象の見出し:

スマホ幅:
例: 390px / 414px / 430px

今の見え方:
例:
最初に見る場所を、ここで決
める

理想の見え方:
例:
最初に見る場所を
ここで決める

条件:
- PC表示では大きく見え方を変えない
- スマホだけ自然な文節で改行したい
- 文字を小さくしすぎない
- 必要なら span や br と CSS を使ってよい
- 390px前後と430px前後で確認してほしい
- 変更したファイルと確認結果を教えてください

Codexへ頼む時の依頼文

Codexに実装まで頼むなら、対象ファイルを読んだうえで、スマホだけ意図した改行になるようにしてもらいます。

スマホ表示でH1/H2の改行位置が不自然なので、対象ページを読んで改善してください。

問題:
大きい見出しがスマホで変な位置で折れています。

例:
今: 最初に見る場所を、ここで決 / める
理想: 最初に見る場所を / ここで決める

進め方:
1. 対象ページのH1/H2とCSSを確認する
2. スマホで不自然に折れそうな見出しだけ対象にする
3. PCでは基本的に1行または自然な表示のままにする
4. スマホだけ文節で改行されるようにする
5. 390px前後と430px前後で確認する
6. 変更ファイル、確認結果、残る懸念をまとめる

注意:
- 見出し全体を小さくしすぎない
- すべてのh1/h2へ一律にbrを入れない
- 意味が切れる位置では改行しない

直し方の考え方

見出し改行の直し方は、大きく3つあります。小さい調整で済む場合もありますが、意図した文節で確実に改行したい時は、HTMLに小さな区切りを入れる方が安定します。

スマホだけ改行するCSS例

PCでは横に並べ、スマホでは文節ごとにブロック表示する例です。既存CSSに合わせてクラス名は調整してください。

<h2>
  <span class="mobile-heading-line">最初に見る場所を</span>
  <span class="mobile-heading-sep">、</span>
  <span class="mobile-heading-line">ここで決める</span>
</h2>

.mobile-heading-line {
  display: inline;
}
.mobile-heading-sep {
  display: inline;
}

@media screen and (max-width: 768px) {
  .mobile-heading-line {
    display: block;
  }
  .mobile-heading-sep {
    display: none;
  }
}

AIに任せる前に決めること

見出し改行は好みも関わるため、AIに丸投げすると「文字を小さくするだけ」「全部にbrを入れる」など、意図と違う修正になることがあります。先に判断基準を決めます。

• どの画面幅で気になっているか
• PC表示は変えてよいか
• どの位置で改行したいか
• 文字サイズを下げてもよいか
• HTMLにspanやbrを入れてよいか
• 他の見出しにも同じルールを使うか

やってはいけない頼み方

次のような依頼だと、AIが過剰に直したり、意図と違う修正をしたりしやすくなります。

• 「スマホの見出しをいい感じにして」だけで理想の改行を書かない
• 問題の画面幅を書かない
• PC表示を変えたくないことを伝えない
• 全ページのH1/H2を一括で変更させる
• 文字サイズを小さくしすぎてもよいように見える依頼をする

確認するスマホ幅

1つのスマホ幅だけで確認すると、別の端末でまた不自然に折れることがあります。最低限、狭めと標準的な幅を見ます。

AIへ渡すスクショの撮り方

スクショを渡す場合は、見出しだけでなく、その前後の余白やボタンも少し入るようにします。見出し単体だけだと、全体のバランスが判断しにくくなります。

• 問題の見出しが入っている
• 見出しの前後の余白も入っている
• 画面幅または端末名を書いている
• 理想の改行位置をチャット本文に書いている
• PC表示も変えたいか、スマホだけかを書いている

修正後チェックリスト

• スマホで見出しが文節ごとに自然に改行されている
• 文末の1文字だけが次行に残っていない
• PC表示が不自然に改行されていない
• 見出しの文字サイズを小さくしすぎていない
• 他の見出しやボタンに悪影響が出ていない
• 390px前後と430px前後で確認した