【Webサイト診断】あなたのホームページ、スマホで見にくくなっていませんか？ - デザイナーがやりがちな「小さすぎるUI」とiOSフォームズームの罠 -
この記事をスマートフォンで読んでいるなら、先に自社のホームページを、同じ端末で開いてみてください。PC のブラウザ幅を狭めただけ、エミュレータだけ、で終わっていないか。レスポンシブになっていることと、指で使えることは、同じではありません。
結論です。PC では整って見えても、実機では文字が小さい、ボタンが隣と近い、入力の瞬間に画面が寄る、といったストレスが残ることがあります。それが離脱と CVR 低下に直結する、と断定できる数字はこの原稿にはありません。起きやすいのは、読んで拡大する、誤タップする、入力のあとに横へずれる、です。隠れストレスの有無は、今の実機で確認できます。
この記事では、フリーランスのWebディレクター兼エンジニアとして、制作現場で繰り返す「スマホでは使えるように見えて、使いにくい」型を整理します。無料診断という商品名は使いません。基準の数字は、WCAG と OS の案内を分けて書きます。
今すぐ見る、7つの症状
全部当てはまらなくても、1つあれば範囲を切って直す対象です。
- ファーストビューが、大きな画像とハンバーガーだけ。 何の店か、何をしてほしいかが、最初の画面に無い。
- 本文を読むために、ピンチで拡大している。 スマホなのに、拡大が常態になっている。
- リンクやボタンが近く、隣を押してしまう。
- 料金表やスペック表が、PC の表の縮小。 文字が潰れる。横スクロールの手がかりが無い。
- 入力欄をタップした瞬間、画面が寄って、位置がずれる。 iPhone の Safari で起きやすい型です。
- 1行が極端に短い、または折り返しが無く長い。 縦のリズムが、画面幅と合っていない。
- 下部の固定 CTA（電話、予約）が、キーボードやブラウザのバーに隠れる。
100vhやsafe-areaを見ていないときによく出ます。
小さすぎる UI が残る理由
大きなディスプレイで作っている
27 インチや Retina のノートで、12px が「引き締まって見える」。実機の片手持ちでは、視距離も照度も違います。呪縛、というより、確認端末が制作機だけ、です。エミュレータは幅の確認です。指の腹は再現しません。
画面が大きい機種なら、小さい文字でも読める、という読み
Plus や Pro Max は論理ピクセル幅が広いことがあります。それでも、本文 12px は拡大なしでは厳しい人が残ります。致命的な誤解、と決めつける数字はありません。本文の出発点を 15〜16px 相当にする、は現場で説明しやすい線です。WCAG の条文が 16px 固定、ではありません。相対サイズと、ユーザー拡大が前提です。
実機でイライラしやすい、3つの落とし穴
1. iOS の入力ズーム（16px 未満）
Safari（iPhone）では、フォーカスした input / textarea / select の計算後の font-size が 16px 未満だと、入力中にページが拡大されることがあります。公式の1枚の仕様書というより、長年の実装として共有されている挙動です。14px のプレースホルダーと入力を揃えると、当たりやすい。入力後に横スクロールが残る、も同じ系統です。
対策は、viewport の maximum-scale=1 で拡大を禁止することではありません。拡大できないと、本文のアクセシビリティが落ちます。入力コントロールを 16px 以上にする。本文より小さく見せたいなら、余白と行間で整える。
2. 指の腹より小さいタップ領域
指の幅を 9〜10mm と置く資料はありますが、ここでは規格を分けます。Apple の HIG では、コントロールを 44pt 以上にする案内があります。Material では 48dp がよく使われます。WCAG 2.2 の 2.5.8 は AA で 24×24 CSS px。2.5.5 の 44×44 は AAA。最低 48px が唯一の正解、ではありません。実務の目標として 44〜48px のヒット領域（見た目の高さ＋余白）を確保する、と申し送りに書く。狭いアイコンだけの送信は、押し直しの原因になりやすい。
3. 表の縮小と、折り返さない長文
スマホで最も嫌われる、は調査が無いので言いません。起きやすいのは、横スクロールと気づかず、右の列が切れ、料金が読めないこと。カード型に組み直すか、横スクロールするなら、端が見切れていることが分かること。改行の無い一塊は、行長が画面幅を超えて読みにくい。表は「PC のまま縮小」にしない。
今日から使える、改善の線
爆上げ、ではありません。検収で言いやすい数字です。
- 本文: 15〜16px 相当を下限の目安。見出しとの差は、大きさより階層。
- フォームの入力: 16px 以上。iOS のズームを避ける。
- タップ: 目標 44〜48px。AA だけなら 24px でも足りることがあるが、隣接との間隔は残す。
- 表: カード化、または横スクロールと「横に続く」表示。固定 CTA は
env(safe-area-inset-bottom)と、キーボード表示時に隠れないか実機で見る。
スマホ UI・操作性チェックシート
チェック項目 | 今の状況（記入） | 改善の目安 |
|---|---|---|
実機で開いたか | 機種とブラウザ | エミュレータだけで完了にしない |
最初の画面で何のサイトか | 分かる／分からない | 店名または価値と、次の行動 |
本文を拡大したか | した／していない | 本文 15〜16px 相当 |
誤タップ | ある／ない | ヒット領域 44〜48px 目標 |
表 | 潰れる／横へ切れる | カード化またはスクロールが分かる |
入力で画面が寄るか | iPhone Safari で確認 | 入力 16px 以上。拡大禁止はしない |
1行の長さ | 極端に短い／折り返し無し | 画面幅に対して読める行長 |
固定 CTA | バーやキーボードに隠れる | safe-area と、入力中の重なり |
viewport | user-scalable を切っている | 拡大は残す |
フォーム送信 | 押しにくい、ズーム後にずれる | ボタン高と入力サイズをセットで直す |
まとめ：縮小ではなく、指と視線に合わせる
スマホ対応は、PC レイアウトを細くすることではありません。片手の距離と、入力と、誤タップを、実機で見る。診断という商品名である必要はありません。
実機での見にくさ、フォームのズーム、固定ボタンの重なりの相談は、相談・お問い合わせからどうぞ。