初めに

先日、クライアントサイトのレスポンシブ対応を行っていた際に、iPhone SE（375px）だけで表示崩れが発生しました。

PC表示では問題なく、Chromeの検証ツールでも一見正常に見えていたため、最初は気付きませんでした。

しかし実機確認を行ったところ、

• ボタンが横にはみ出す
• テキストが窮屈になる
• フォーム全体が圧迫される

といった問題が発生していました。

案件の画面は公開できないため、本記事では自サイトのお問い合わせページを例に、実際に起きた現象を再現しながら解説します。

この記事を読めば、なぜiPhone SE（375px）の確認が重要なのか、そしてレスポンシブ対応で確認すべきポイントが理解できます。

レスポンシブ対応でiPhone SE（375px）確認とは？

レスポンシブ対応とは、画面サイズに応じてレイアウトを最適化することです。

現在よく使われているスマホサイズは以下の通りです

端末	画面幅
iPhone SE	375px
iPhone 12/13/14	390px
iPhone Plus系	428px
Pixel系	393px〜
iPad	768px

主なデバイスの画面幅一覧

Chromeの検証ツールでiPhone SE（375px）を表示する方法

レスポンシブ対応を確認する際はChrome DevToolsを利用します。

ステップ1：検証ツールを開く

右クリックで「検証ツール」を選択

ステップ2：デバイスモードに切り替える

検証画面の左上の「レスポンシブ」をクリック

ステップ3：iPhone SEを選択する

ステップ4：375px表示で確認する

iPhone SEを選択すると、

375px × 667px

で表示されます。

この状態で、

• ボタン
• フォーム
• テキスト
• 画像

が崩れていないか確認します。

実際に起きたエラー

実案件ではお問い合わせフォーム周辺で表示崩れが発生しました。

案件の画面は公開できないため、自サイトのお問い合わせページで同じ状況を再現しています。

発生していた問題は以下です。

• ボタンと入力欄が横にはみ出す
• 長いテキストで横スクロールが発生する

PCでは正常でも、375pxになると一気に問題が表面化しました。

結論（先に知りたい人向け）

レスポンシブ対応では必ず以下のサイズを確認しましょう。

• 375px（iPhone SE）
• 390px（iPhone 12〜15）
• 768px（タブレット）
• PC

特にスマホ対応では、

375pxで崩れないことを基準に設計する

のがおすすめです。

原因の詳細

今回の表示崩れの原因は固定幅指定です。

例えば以下のようなCSSです。

.contact-btn {
    width: 360px;
}

一見問題なさそうですが、

375pxの画面で

左右余白20px

があると、

実際に使える横幅は

335px程度

になります。

その結果、ボタンやフォームが収まらなくなります。

固定幅指定はスマホ表示崩れの原因になりやすいです。

解決方法

ステップ1：固定幅を削除する

修正前

.contact-btn {
    width: 360px;
}

ステップ2：画面幅に合わせるもしくは比率（％）を指定する

修正後

.contact-btn {
    width: 100%;
}
.contact-btn {
    width: 80%;
}

ステップ4：375pxで再確認する

なぜ解決するのか

画像で解説します

レスポンシブ対応でiPhone SE確認が重要な理由

1. 小さい画面で問題が見つかる

390pxでは正常でも、

375pxでは崩れるケースがあります。

制作現場ではよくあるパターンです。

2. 多くのスマホ表示をカバーできる

375pxで正常表示できれば、

それ以上のサイズでも安定するケースが多くなります。

3. 納品後のトラブルを減らせる

クライアントやユーザーが古い端末を利用している場合もあります。

事前確認しておけば、

後から

「スマホだけ崩れています」

という連絡を減らせます。

初心者向けまとめ

レスポンシブ対応で迷ったら、

まず375pxを確認しましょう。

確認ポイントは以下です。

• 横スクロールが出ていないか
• ボタンが切れていないか
• フォームが崩れていないか
• テキストが見切れていないか
• 画像が大きすぎないか

まとめ

レスポンシブ対応では最新のiPhoneだけ確認して終わりにしてしまうことがあります。

しかし実際の制作現場では、375pxのiPhone SEでのみ発生する表示崩れは珍しくありません。

今回も実案件で発生した問題を、お問い合わせページを使って再現してみましたが、小さな画面だからこそ見つかる問題がありました。

レスポンシブ対応の品質を上げるためにも、最終チェックでは必ずiPhone SE（375px）を確認することをおすすめします。

レスポンシブ対応 最終チェックリスト

公開前に以下を確認しましょう。

iPhone SE（375px）確認

• Chrome DevToolsでiPhone SEを選択した
• 横スクロールが発生していない
• ボタンが画面内に収まっている
• フォームがはみ出していない
• 画像が見切れていない
• テキストが自然に折り返されている

CSS確認

• 固定幅（width: 360px など）を使いすぎていない
• width: 100% を適切に利用している
• max-width を活用している
• min-width が原因で崩れていない
• box-sizing: border-box; を設定している

複数端末確認

• iPhone SE（375px）
• iPhone 12/13/14（390px）
• Plus系（428px）
• タブレット（768px）
• PC表示

実機確認

• 実際のスマホでも確認した
• フォーム送信までテストした
• メニュー開閉を確認した
• ボタン操作を確認した