スマホ発注で画面が小さい理由｜24pxと48dpの設計基準

◆監修・編集責任者　小園 将隆　2026年9月11日

B2B EC-COLUMN

原因は画面幅でなくタップ領域の不足

スマホ発注で画面が小さいとは、文字の大きさではなく、指で押す操作対象の寸法と間隔が足りていない状態を指します。WCAG 2.2は達成基準2.5.8で24CSSピクセルを、Androidの公式文書は48dpを、操作要素の下限として示しています⁴⁵。

朝の倉庫で、取引先の担当者が片手に荷物を抱えたまま端末を取り出します。画面には、PCの一覧表をそのまま縮めた行が並んでいます。品番・品名・入数・単価・在庫・数量が横に詰まり、1列あたりの文字は米粒ほど。数量欄をタップしたつもりが、隣の行の数量欄に数字が入ります。気づくのは、注文の確認へ進んだ後です。

戻って直し、また同じ行を探す。この往復が、1回の発注で何度か起きます。「スマホだと見づらい」という一言は、文字の大きさへの不満に見えて、その中身は押し間違いの記憶から出ています。あなたの会社に届いている声も、同じ出どころではないでしょうか。

この戻って直す時間は、どの請求書にも載りません。

24CSSピクセルを満たす操作対象の寸法

WCAG2.2が定める最小寸法と例外

押し間違いの原因は、指の側ではなく画面の側にあります。WCAG 2.2（Web Content Accessibility Guidelines、W3Cが勧告するウェブアクセシビリティの国際的なガイドライン）は、達成基準2.5.8で、ポインタ操作の対象に24CSSピクセルの最小寸法を求めています⁴。2024年に公開された改訂版の勧告における、レベルAAの基準です⁴。発注画面でこの基準が真っ先に当たるのは、数量の増減ボタンとチェックボックスです。

この基準を一律の必須要件として読むと、設計を誤ります。達成基準2.5.8には、操作対象どうしの間隔が確保されている場合、同じ機能へ届く等価な手段が別にある場合、文中のインラインの要素などの例外が置かれています⁴。例外の確認を先に済ませれば、直す箇所は画面の全体ではなく、発注の主要な導線に絞り込めます。「全部作り直し」と身構える前に、対象を数える。ここが費用を抑える入口になります。

44CSSピクセルを狙う場面の見分け

44CSSピクセルは、達成基準2.5.5が求めるレベルAAAの最小寸法です⁴。レベルAAの24CSSピクセルより大きい寸法であり、同じ画面のすべてへ適用する性質のものではありません。見分けの軸は、押し間違えた後に取り返しがつくかどうかです。注文の確定や行の削除のように、誤ると出荷まで進む操作では、AAAの寸法を目標に置く判断が成り立ちます。

戻しの利く補足のリンクまでAAAへそろえると、1画面に載る情報が減ります。すると取引先はスクロールの回数を増やすことになり、別の不便が生まれます。基準は画面へ一律にかけるのではなく、操作の取り返しのつきにくさで分けるのです。

数量入力とカート投入の当たり判定

発注画面で押し間違いが集中するのは、数量入力とカート投入の2か所です。どちらも行ごとに繰り返し並ぶため、縦の間隔が詰まりやすい箇所になります。見た目の枠を大きくすれば1画面の行数は減りますが、当たり判定（タップを受け付ける範囲）だけを枠の外側へ広げれば、行数を保ったまま24CSSピクセルを満たせます。見た目と当たり判定は別に設計できる。ここを知っているかどうかで、改修の重さが変わります。

いまの形を続ける費用は、2024年に74.4%へ達した個人のスマートフォン利用の広がりのぶんだけ、取引先の手元で積み上がります³。

48dpを目安に操作対象の寸法と導線を整える

Androidの推奨値と余白の取り方

48dp——Androidの公式開発者ドキュメントが、タッチ操作のUI要素に推奨する最小のタッチターゲット寸法です⁵。dp（density-independent pixel、画面の密度に左右されない単位）で示されているため、端末の解像度が変わっても、指に対する実寸はおおむね保たれます。24CSSピクセルが「割ってはいけない下限」だとすれば、48dpは「そろえておきたい目安」にあたります。

この下限と目安を画面へ移す順序は、3段です。第一に、操作対象の寸法をそろえます。数量の増減ボタン、チェックボックス、カート投入のボタンを拾い出します。24CSSピクセルの下限を割っているものを引き上げ、48dpの目安へ寄せます⁴⁵。第二に、操作要素の間隔を空けます。達成基準2.5.8は、操作対象どうしの間隔が確保されている場合を例外に置いています⁴。間隔の確保そのものが、寸法の不足を補う手立てになるのです。寸法だけを広げて隙間を詰めたままにすると、隣の行へ指が触れる誤りは残ります。

親指の届く範囲に置く主要導線

第三が、主要導線の位置です。片手で端末を持つと、親指が自然に届く範囲は画面の下半分に寄ります。発注の確定やカートへの遷移を画面の上端に置くと、取引先は端末を持ち替えるか、もう一方の手を使うことになります。倉庫で片手が荷物でふさがっている場面を思えば、この持ち替えが押し間違いの入口になります。

主要導線の位置まで含めた3段のうち、第一と第二は既存の画面へ手を入れるだけで進みます。第三は並び替えを伴うため、影響の及ぶ画面を洗い出す確認が要ります。着手の順序を逆にすると、並び替えの途中で寸法の不足が見つかり、作業をやり直すことになるのです。

数千品種を1画面に載せない一覧設計

検索・履歴・お気に入りの三経路

一覧の設計で決めるのは、「何件を1画面に出すか」ではありません。「どの経路で品にたどり着かせるか」です。日東電工CSシステム株式会社は、約3,800品種を提案・販売する事業者です⁶。この約3,800品種は、取り扱う品種の数を指します。同社は業務用通販サイトに、当初から約2万5,000品を揃えました⁶。この約2万5,000品は、サイトに掲載した商品点数です。品種の数と商品点数は数え方が違うため、両者の値も一致しません。いずれも2020年に公開された導入事例の掲載時点の数値であり、現在の品種数や商品点数を示すものではありません。この規模を1枚の一覧へ載せる設計は、スマートフォンでは成立しません。

経路は検索・履歴・お気に入りの三つに分けます。品番が手元の伝票にあるなら検索、前回と同じ品なら履歴、繰り返し頼む定番品ならお気に入り。どの経路でも、画面に出る件数は取引先の入力か過去の行動で絞り込まれます。全件を並べてから探させる設計をやめる。多品種の発注画面で先に決める軸は、ここです。

明細行を縦積みに変える表の作法

PCの一覧表が品番・品名・入数・単価・在庫・数量を横に並べる形は、スマートフォンの画面へそのままは持ち込めません。この並びをスマートフォンの幅へ縮めると、1列あたりの文字が小さくなり、数量欄の当たり判定も細くなります。手当ては、横並びの行を1件ずつの縦積みへ組み替えることです。1件が画面の高さを使うぶん、寸法と間隔に余裕が生まれます。

行の組み替えに取りかかる前に、載せる商品情報そのものの点検も避けられません。株式会社ポディウムは、BtoB ECサイトの移行にあたって約20,000点の商品登録を精査しました⁷。2025年に公開された導入事例に記載された、移行時に精査した件数です。現在の登録数として読むものではありませんが、画面の作法を変える前に情報の側を整える段が要ることは、この例からも読み取れます。

以降は、上の3段だけでは決めきれない条件を抱えた方に向けて、更に詳しく述べる内容です。

ここまでの手順を自社の条件で確かめたい場合は、無料相談で要件を整理するのが近道です。

60代78.8%が示す端末前提のずれ

2024年の調査では、60代のスマートフォンによるインターネット利用率は78.8%でした³。同じ調査で、70代は53.0%です³。60代と70代のあいだに、25ポイント以上の差が開いています。年代で分かれるこの利用率の差は公表された調査に依り、端末の前提が取引先ごとにずれていることを示します³。

この差は、発注画面の設計へ直に効きます。担当者が60代なら、スマートフォンからの発注を前提として置けます。担当者が70代に寄る取引先では、PCからの発注が主たる経路として残ります。どちらか一方だけを想定した画面を作ると、もう一方の取引先が発注の手前で止まります。

取引先の担当者の年代を、発注する側が選ぶことはできません。だからこそ、端末の前提は取引先ごとに違うものとして扱います。次に述べる3つの型のうち、端末混在型はこのずれを正面から受けるものです。

自社の行がこの3つに見当たらない方は、次の型の表から自社の条件を探せます。

現場・多品種・端末混在で発注画面の設計は分かれる

発注画面の設計を分ける軸は、3つあります。第一は、取り返しのつきかたです。手袋のまま片手で操作する現場では、押し間違いを戻せるかどうかが先に来ます。第二は、入力の手数です。品種が数千を超える卸では、品にたどり着くまでの操作回数が発注の速さを決めます。第三は、端末の統一可否です。取引先ごとに端末がそろわないなら、同じ注文を別の端末で続ける仕組みが要ります。下の表は、この3つの条件と型の対応をまとめたものです。以降で、3つの型を順に述べます。

型名	条件
手袋と片手操作の現場型	倉庫や工場で、手袋のまま片手で発注する取引先が主体になっている
多品種の卸型	扱う品種が数千を超え、品番からの指定が発注の起点になっている
端末混在型	取引先ごとにPCとスマートフォンが混在し、端末をそろえられない

手袋と片手操作に耐える発注画面

タップ領域48dpと間隔の確保

手袋をしたまま発注する取引先では、第1ブロックの3段だけでは足りません。手袋の厚みぶん指が触れる面積が広がり、寸法の下限を満たした操作対象でも隣に触れるからです。屋外や冷蔵の現場では、端末が濡れていたり、片手が荷物でふさがっていたりします。「外して押す」を前提にした画面は、現場では使われません。

この型で見る軸は、寸法そのものではなく「取り返しがつくか」です。数量の入力では、タップ領域48dpと間隔の確保を先に満たします⁵。そのうえで、注文の確認に品番と数量の一覧を置き、注文の取消に1手で戻す導線を用意します。押し間違いをなくす設計ではなく、押し間違いが起きても戻せる設計へ切り替えるのです。

誤タップを戻せる確認と取消の設計

開発会社へ依頼せずに済ませる道も、一つあります。発注の確定前に品番と数量の一覧を出す確認画面を1枚だけ挟むなら、既存の画面の並びを変えずに追加できます。押し間違いの発生そのものは減りませんが、出荷まで進んでしまう誤りは減ります。まずここだけを入れて様子を見る判断は、じゅうぶん成り立ちます。

確認の画面を入れたうえで、取消の導線を常に出しておきます。誤りに気づいた取引先が、前の画面を探して戻る操作をすると、そこでまた押し間違いが起きるからです。1手で戻す導線を画面の下半分に固定すれば、戻る操作そのものが片手で完結します。

この型の手当ては画面の実装に閉じるため難易度は中位ですが、発注の主要な導線にある操作対象を1件ずつ拾い出し、寸法と間隔を点検する手間がかかります。

場面	起きること
数量の入力	手袋の指が隣の行に触れ、別の品に数字が入る
注文の確認	確定の直前に品番を読み返せない
注文の取消	誤りに気づいても前の画面へ戻れない

多品種の卸に効く検索起点の発注

品番直打ちと履歴からの再発注

扱う品種が数千を超えると、一覧を整えるだけでは発注は速くなりません。取引先は品名を知らず、品番だけを伝票で持っていることがあるからです。約3,800品種を扱う事業者が業務用通販サイトへ約2万5,000品を載せた例では、探させるのではなく、品番から直接たどり着かせる入口が要ります⁶。

この型の軸は、画面の寸法ではなく「入力の手数」です。品番直打ちなら、検索窓に数文字を入れて候補を絞ります。履歴からの再発注なら、過去の注文を開いて数量だけを直します。どちらの経路でも、一覧をスクロールする操作が消えます。手数が減れば、押し間違いの機会そのものが減るのです。

2万5,000品を扱う検索条件の設計

絞り込み検索は、品名も品番も分からない場合の受け皿に置きます。用途や規格で絞る条件をあらかじめ用意しておけば、取引先は候補を数件まで狭めてから品を選べます。条件を用意せずに全文検索だけを置くと、約2万5,000品の中から数百件が返り、スマートフォンの画面ではかえって探しにくくなります⁶。

経路ごとに1画面へ出す件数の考え方を決めておくと、画面の設計と商品情報の整理が同じ基準で進みます。下の表は、その対応をまとめたものです。

この型は商品情報の整理を伴うため難易度は高めで、要件定義から公開前の検証用サイトを開くまで約10か月をかけた例があります⁶。この段取りを自社だけで組み切れないなら、BtoB EC構築の実績がある支援先へ相談する道も残ります。

発注の起点	使う場面	1画面に出す件数の考え方
品番直打ち	品番が手元の伝票にある場合	入力した品番に一致する分だけ
履歴からの再発注	前回と同じ品を頼む場合	直近の注文に含まれる分だけ
お気に入り	定番品を繰り返し頼む場合	取引先が自ら登録した分だけ
絞り込み検索	品名や用途しか分からない場合	条件で絞った後の該当分だけ

端末がそろわない取引先への代替導線

PCとスマホで同じ注文を続ける仕組み

取引先の端末をそろえることはできません。2024年、モバイル端末全体の世帯保有割合は97.0%、パソコンの世帯保有割合は66.4%でした²。スマートフォンの世帯保有割合は同じ2024年で90.5%です¹。なお、世帯を母数とする保有割合と、個人を母数とする利用率は調査の母集団が異なるため、単純には比較できません。

この型の軸は、画面の作りではなく「同じ注文を別の端末で続けられるか」です。現場でスマートフォンから品を選び、事務所のPCで数量をまとめて入れて確定する。この行き来の途中で入力が消えるなら、取引先は結局どちらか一方へ寄せます。カートの状態を取引先の単位で保持し、端末をまたいでも続きから戻れるようにします。

文字サイズとコントラストの下限

文字の大きさとコントラストは、寸法と間隔を直した後に決めます。順序を逆にすると、文字だけが大きくなって1画面の行数が減り、スクロールの回数が増えるからです。70代のスマートフォンによるインターネット利用率は53.0%であり、PCからの発注が続く取引先も残ります³。どちらの端末でも同じ注文情報を読める状態を保つことが、この型の到達点です。

この型は画面の実装に加えて、注文情報を端末のあいだで保持する仕組みへ手が及ぶため難易度は高く、既存の受注側との連携を含めた確認が要ります。既存の受注側との連携まで自社で見通せないなら、構築と連携の両方を任せられる支援先へ相談する道も残ります。

端末の前提	2024年の世帯保有割合	代替導線の置き方
モバイル端末を持つ世帯	97.0%	スマートフォンを既定の入口にする
スマートフォンを持つ世帯	90.5%	片手操作の画面を標準として用意する
パソコンを持つ世帯	66.4%	同じ注文をPCでも続けられる状態を残す

この型に当てはまる場合は、判断の抜けによる手戻りを防ぐために、無料相談で自社の条件を持ち込むのが確実です。

要点の整理

判断の軸	基準
操作対象の寸法	24CSSピクセル以上を下限にする（2024年の改訂版勧告・レベルAA）。タッチ操作のUI要素は48dpを目安に置く（Androidの公式開発者ドキュメント）。取り返しのつきにくい操作は44CSSピクセルを目標に置く
操作要素の間隔	達成基準2.5.8は、間隔が確保された場合を例外に置く。隣の行との余白を空け、指が隣へ触れる誤りを防ぐ
主要導線の位置	片手で親指が届く画面の下半分へ、発注の確定とカートへの遷移を寄せる
1画面に出す件数	検索・履歴・お気に入りの三経路で絞り、全件を並べてから探させる一覧をやめる
取り返しのつきかた	品番と数量の一覧を確定前に置き、1手で戻す導線を常に出す
端末の前提	2024年の個人のスマートフォン利用率74.4%を前提にしつつ、パソコンの世帯保有割合66.4%を踏まえてPCの導線も残す
段取りの期間	商品情報の整理を伴う場合、要件定義から公開前の検証用サイト開設まで約10か月の例がある（2020年公開の導入事例）

よくある質問

文字サイズを大きくするだけでは足りませんか

足りません。押し間違いは文字の大きさではなく、指が触れる操作対象の寸法と間隔から起きるためです。WCAG 2.2は達成基準2.5.8でポインタ操作の対象に24CSSピクセルの最小寸法を求めています⁴。文字だけを拡大すると1画面の行数が減り、スクロールの回数が増える一方で、隣接する行への誤りは残ります。

24CSSピクセルと48dpのどちらに合わせればよいですか

両方を役割で分けて使います。24CSSピクセルはWCAG 2.2の達成基準2.5.8が示すレベルAAの最小寸法で、割ってはいけない下限にあたります⁴。48dpはAndroidの公式開発者ドキュメントがタッチ操作のUI要素に推奨する寸法で、そろえておきたい目安として使えます⁵。下限を満たしたうえで、目安へ寄せる進め方が現実的です。

既存のPC向け画面を残したまま、スマートフォン用の画面を別に作れますか

作れますが、注文情報の持ち方を先に決める必要があります。画面を分けても、カートや入力途中の数量が端末ごとに分かれていると、取引先は途中で作業をやり直すことになるからです。2024年のパソコンの世帯保有割合は66.4%で、PCからの発注も残ります²。両方の画面から同じ注文へ戻れる状態を保つことが前提になります。

改修にはどのくらいの期間を見ておけばよいですか

扱う品種の数と、商品情報の整理の量で変わります。約3,800品種を扱う日東電工CSシステム株式会社の業務用通販サイトでは、要件定義から公開前の検証用サイトを開くまで約10か月をかけています⁶。2020年に公開された導入事例の記載です。既存の画面で寸法と間隔だけを直す場合は、これより短い段取りになります。

取引先から具体的な不満が出ていない場合も直すべきですか

押し間違いは、取引先の側で戻して直せてしまうため、声になりにくい種類の不便です。注文の訂正や電話での確認が発生していないかを、受注側の記録から確かめる方法があります。2024年の個人のスマートフォンによるインターネット利用率は74.4%で、発注の端末はスマートフォンへ寄っています³。声が出る前に、対象の操作を数えておく価値はあります。

どの端末で画面を確認すればよいですか

実機での確認が要ります。寸法の下限は24CSSピクセル、目安は48dpと数値で示されていますが、指の太さや手袋の厚みは画面の上では再現できないためです⁴⁵。発注が実際に行われる場所に近い条件、たとえば片手で持った状態や屋外の明るさでも確かめると、机上では見えない誤りが拾えます。

1. 1　出典：総務省「令和6年通信利用動向調査の結果」（2025年）　経路
2. 2　出典：総務省「令和7年版 情報通信白書 情報通信機器・端末」（2025年）　経路
3. 3　出典：総務省「令和7年版 情報通信白書 インターネット接続端末」（2025年）　経路
4. 4　出典：W3C（World Wide Web Consortium）「Web Content Accessibility Guidelines (WCAG) 2.2（W3C勧告）」（2024年）　経路
5. 5　出典：Google（Android Developers）「Make apps more accessible（公式開発者ドキュメント）」（2026年）　経路
6. 6　出典：株式会社イーシー・ライダー「導入事例 日東電工CSシステム株式会社様」（2020年）　経路
7. 7　出典：株式会社イーシー・ライダー「導入事例 株式会社ポディウム様」（2025年）　経路