PCで作ったWebアプリが、スマホでも同じように使えるとは限りません。

PCの画面では問題なく見えていたのに、スマホで開いた瞬間に「思ったより使いにくい」と感じることがあります。

文字が小さい。
ボタンが押しにくい。
横スクロールが出る。
入力欄が使いにくい。
キーボードで画面が隠れる。

こうした違和感は、PCだけで確認していると見落としやすいです。

この記事では、Webアプリをスマホで確認するときに、初心者が見ておきたいポイントを整理します。

PCで見て問題なくても、スマホでは使いにくいことがある

WebアプリをPCで作っていると、PCの画面ではきれいに見えます。

画面は広い。
文字も読みやすい。
ボタンもマウスで正確に押せる。

そのため、PCで確認した時点では「これで大丈夫」と思いやすいです。

ただ、スマホで開くと状況が変わります。

画面は小さくなります。
操作はマウスではなく指になります。
文字入力時にはキーボードが出ます。
縦長の画面で、余白や配置の見え方も変わります。

実際に、PCでは問題なさそうに見えた自分用Webアプリをスマホで開いたとき、文字の小ささやボタンの押しにくさ、横スクロールに気づいたことがありました。

PCでは「完成に近い」と思っていても、スマホで触ると違和感が一気に見えることがあります。

Webアプリのスマホ確認で見る5つのポイント

スマホ確認で見るポイントは、まず次の5つで十分です。

  1. 文字が小さすぎないか
  2. ボタンが指で押しやすいか
  3. 横スクロールが出ていないか
  4. 入力欄が使いやすいか
  5. キーボードで入力欄が隠れないか

完璧なスマホ対応を目指す必要はありません。

まずは、自分がスマホで普通に使えるかを確認します。

1. 文字が小さすぎないか

最初に見るのは、文字の大きさです。

PCでは読みやすく見えていた文字でも、スマホでは小さすぎることがあります。

特に注意したいのは、次のような場所です。

  • 入力欄の文字
  • ボタンの文字
  • 一覧表示の本文
  • 日付や補足情報
  • 注意書き
  • ラベル

PCの大きな画面では、少し小さい文字でも読めます。
でもスマホでは、画面が小さいぶん、同じ文字サイズでもかなり窮屈に感じます。

実際にスマホで開いてみると、「PCではちょうどよかったのに、スマホでは目を近づけないと読みにくい」と感じることがあります。

スマホで使う予定があるなら、文字はPC画面だけで判断しない方が安全です。

2. ボタンが指で押しやすいか

次に見るのは、ボタンの押しやすさです。

PCではマウスカーソルで細かく操作できます。
そのため、小さいボタンでもあまり気になりません。

でもスマホでは、指でタップします。

指はマウスカーソルより太いので、ボタンが小さすぎたり、近くに並びすぎたりすると押しにくくなります。

確認するときは、次の点を見ます。

  • ボタンが小さすぎないか
  • ボタン同士が近すぎないか
  • 押したいボタンを指で自然に押せるか
  • 重要なボタンが画面の端に寄りすぎていないか
  • 削除ボタンなどを誤タップしやすくないか

PCで作っていると、ボタンの大きさは見た目だけで判断しがちです。

でもスマホでは、「見える」だけでなく「指で押せる」ことが大事です。

3. 横スクロールが出ていないか

スマホ確認でかなり大事なのが、横スクロールです。

PCでは画面に収まっていたレイアウトでも、スマホでは横にはみ出すことがあります。

横スクロールが出ると、縦に読みたいのに画面が左右に動いてしまい、使いにくくなります。

確認するときは、スマホ画面で左右に少し動かしてみます。

横に動く場合は、どこかの要素が画面幅を超えている可能性があります。

よくある原因は、次のようなものです。

  • 横幅の大きい表
  • 長いURLや英数字
  • 横並びのボタン
  • 固定幅のカード
  • 余白が大きすぎる要素

自分用アプリでも、横スクロールがあるだけで使い心地はかなり落ちます。

スマホで開いたときに横へズレる感覚があるなら、早めに直した方がよいです。

4. 入力欄が使いやすいか

日記アプリ、タスクアプリ、メモアプリのようなWebアプリでは、入力欄の使いやすさも大事です。

スマホでは、文字入力がPCより面倒になりやすいです。

確認するときは、次の点を見ます。

  • 入力欄が小さすぎないか
  • 入力欄をタップしやすいか
  • 長い文章を入れても見づらくないか
  • プレースホルダーの文字が読めるか
  • 保存ボタンが入力欄から遠すぎないか

PCではキーボードで楽に入力できます。
でもスマホでは、入力欄が小さいだけでかなり使いにくく感じます。

特に、自分が毎日使うアプリなら、入力欄の使い心地はかなり重要です。

5. キーボードで入力欄が隠れないか

スマホ特有の確認ポイントが、キーボード表示です。

スマホで入力欄をタップすると、画面下にキーボードが出ます。

そのとき、入力欄や保存ボタンがキーボードに隠れることがあります。

PCにはこの問題がありません。
そのため、PCだけで確認していると気づきにくいです。

確認するときは、実際にスマホで入力欄をタップしてみます。

  • 入力中の文字が見えるか
  • 保存ボタンが見えるか
  • スクロールすれば入力欄を見られるか
  • キーボードが出ても操作できるか

ここは、Chromeの開発者ツールだけでは分かりにくいことがあります。

スマホで使う予定があるなら、できれば実機で一度確認しておくと安心です。

開発者ツールのスマホ幅だけでなく、実機でも一度開く

PCのChromeには、スマホ幅の表示を確認できる開発者ツールがあります。

これは便利です。

PC上でスマホ幅にして、

  • 横スクロール
  • 文字サイズ
  • ボタンの配置
  • 余白
  • レイアウト崩れ

をある程度確認できます。

ただし、スマホ幅の表示だけでは分からないこともあります。

実際にスマホで開くと、手に持ったときの操作感が分かります。

片手で持ったときに親指が届くか。
ボタンを押すときに誤タップしないか。
入力中にキーボードが邪魔にならないか。
自分が毎日使う気になるか。

こうした感覚は、実機で触った方が分かりやすいです。

PC上のスマホ表示は、レイアウト確認に向いています。
実機確認は、実際の使い心地の確認に向いています。

両方を使い分けると、見落としが減ります。

スマホ確認は完成後ではなく、早めに見る

スマホ確認は、完成後に一度だけ見るものではありません。

できれば、ある程度形になった段階で早めに見た方がよいです。

理由は、最後にまとめて直そうとすると、修正の影響範囲が大きくなるからです。

たとえば、文字サイズやボタンの大きさ、余白、横並びの配置などは、画面全体に関わります。

あとから直そうとすると、いろいろな場所を調整することになります。

一方で、早い段階でスマホ表示を見ておけば、土台のレイアウトを小さく直すだけで済むことがあります。

Webアプリをスマホでも使う予定があるなら、

  • PCで作る
  • スマホ幅で見る
  • 実機で触る
  • 気になるところを直す

この流れを早めに回すのがおすすめです。

全部を完璧に直さなくても、気づいておくことが大事

スマホ確認で見つけた違和感を、全部すぐに直す必要はありません。

自分用Webアプリなら、「気づいたけれど、今は許容する」という判断もあります。

たとえば、

  • 少し文字が小さいけれど、自分は読める
  • 入力欄が少し狭いけれど、短文しか入れない
  • キーボードで一部隠れるけれど、使う場面では困らない

こういう判断は、自分用アプリならありです。

大事なのは、気づかないまま放置しないことです。

「これは今すぐ直す」
「これはあとで直す」
「これは自分用なので許容する」

このように分けられるだけで、改善しやすくなります。

スマホ確認は、完璧な画面を作るためだけではありません。
自分がどこまでなら使えるかを判断するための確認でもあります。

スマホ確認で見つけた違和感をCodexに頼むときの書き方

スマホ確認で違和感を見つけたら、Codexに修正を頼むこともできます。

そのときは、「スマホで使いにくいです」だけでは少し曖昧です。

どこが、どの画面幅で、どう使いにくいのかを書きます。

たとえば、文字が小さい場合はこうです。

スマホ幅で見ると、一覧の本文が小さくて読みにくいです。
PC表示は大きく変えずに、スマホ幅だけ少し読みやすくしてください。
変更後は、Chromeの開発者ツールでスマホ幅にして確認してください。

ボタンが押しにくい場合はこうです。

スマホで見ると、保存ボタンと削除ボタンが近くて押し間違えそうです。
スマホ幅ではボタン同士の余白を少し広げてください。
見た目全体は大きく変えないでください。

横スクロールが出る場合はこうです。

スマホ幅で横スクロールが出ています。
どの要素がはみ出しているか確認し、必要最小限の修正で横スクロールをなくしてください。
PC表示はできるだけ変えないでください。

このように、違和感をそのまま書くのではなく、確認した状況と直してほしい範囲を合わせて伝えると、修正依頼がしやすくなります。

スマホ確認で使える簡単チェックリスト

最後に、スマホ確認で使える簡単なチェックリストをまとめます。

Webアプリのスマホ確認チェック

□ スマホでページを開ける
□ 文字が小さすぎない
□ 入力欄をタップしやすい
□ 入力中の文字が見える
□ ボタンが指で押しやすい
□ ボタン同士が近すぎない
□ 横スクロールが出ていない
□ 長い文章でも表示が大きく崩れない
□ キーボードで入力欄や保存ボタンが隠れすぎない
□ 片手で使う場面を想像しても無理がない
□ 気になる違和感をメモした

全部を一度に完璧に直す必要はありません。

まずは、

  • 文字
  • ボタン
  • 横スクロール
  • 入力欄
  • キーボード

の5つを見れば十分です。

まとめ：スマホで使う予定があるなら、文字・ボタン・横スクロールを見る

PCで作ったWebアプリは、PCで問題なく見えても、スマホで使いやすいとは限りません。

スマホで確認するときは、まず次の5つを見ます。

  • 文字が小さすぎないか
  • ボタンが指で押しやすいか
  • 横スクロールが出ていないか
  • 入力欄が使いやすいか
  • キーボードで入力欄が隠れないか

スマホ確認は、完成後のおまけではありません。

スマホでも使う予定があるなら、早めに一度開いてみる。
PCの開発者ツールだけでなく、実機でも触ってみる。
違和感を見つけたら、直すものと許容するものに分ける。

この流れにすると、Webアプリを実際に使う場面に近づけながら改善しやすくなります。