スマホ発注画面の設計｜BtoB受発注で押さえる要件

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

B2B EC-COLUMN

スマホ発注画面の定義と広がる背景

スマホ発注画面とは、取引先の担当者がスマートフォンの画面上で商品を選び、数量を指定して発注を確定するために設計された、受発注業務向けの画面です。PC向け画面をそのまま縮小したものではありません。片手での操作と短い滞在時間を前提に、載せる項目と導線を組み替えた設計を指します。令和6年通信利用動向調査の企業向け調査は、常用雇用者規模100人以上の企業を対象としており^*1、業務での端末利用を読み取る際の母集団もその範囲になります。

電話・FAX・紙の発注書との違いは、発注内容がデータとして残るかどうかにあります。電話の口頭伝達では、受注側が聞き取った内容を自社システムへ入力し直します。FAXや紙の発注書でも、読み取りと転記の工程が挟まります。スマホ発注画面では、発注者の入力がそのまま受注データになりますので、転記の工程を減らせます。

転記が減ると、入力の誤りが生まれる箇所も減ります。ただし、画面設計が粗いままでは、発注者側での選択ミスや数量の入力ミスが新たに生まれます。誤発注を防ぐ設計上の工夫を伴わない置き換えは、ミスの発生場所を移すだけに終わります。画面に載せる項目を決める前に、どの工程でどの誤りが起きているかを洗い出す作業が先に来ます。

発注の記録がデータで残ると、受注側の確認作業も変わります。電話での発注では、聞き取った内容に食い違いがあった場合、通話の記録が残っていない限り確かめようがありません。画面からの発注では、いつ、誰が、どの内容で発注したかが記録に残ります。取引条件の明示や書類の保存という定めを満たす前提としても、記録の残り方が起点になります^*3。

現場で発注する働き方が広がった背景には、発注の判断が起きる場所と、発注を入力できる場所のずれがあります。倉庫の棚前、店舗の売場、施工現場では、欠品や消耗品の不足に気づいた担当者がその場で判断します。事務所へ戻ってPCを立ち上げるまでの間に、発注の内容が記憶から抜け落ちることもあります。手元の端末で入力できれば、判断と入力の間隔を詰められます。

導入の形態は、既存の受発注システムをレスポンシブ対応させる方法と、スマホ向けの発注画面を別に用意する方法に分かれます。前者は画面資産を流用できる代わりに、PC向けの項目数をそのまま抱え込みます。後者は載せる機能を絞れる代わりに、権限や在庫の判定を二重に持たない設計が求められます。どちらを選ぶかで、後の節で扱う保存の要件やログ管理の設計も変わります。

スマホ対応を進めても、取引先が使わなければ電話・FAXは残ります。受注側は両方の経路を維持することになり、業務量はかえって増えます。発注の記録も経路ごとに分かれ、取引条件の明示や書類の保存を経路別に満たす負担が生じます^*3。画面の設計と同時に、取引先への移行の進め方を組み立てる必要があります。

スマートフォンからの発注が広がる一方、すべての取引先が同じ環境で使うわけではありません。端末の世代、通信の契約、社内の持ち込み規則は取引先ごとに異なります。特定の機種でしか動かない実装や、大きな通信量を前提とした画面は、利用できない取引先を生みます。想定する利用環境の幅を先に決めておくと、後からの作り直しを避けられます。

スマホ発注画面の検討は、見た目を決める作業ではありません。発注の判断が起きる場所、入力される項目、残すべき記録、取引先の運用を並べ、載せる機能を選び直す作業です。以降では、機能と情報設計、操作設計、アクセシビリティと通信環境、法令と保存、導入の進め方の順に整理します。

発注画面に求められる機能と情報設計

発注画面に載せる機能は、商品検索、数量入力、発注履歴、承認フローの四つを軸に絞り込みます。スマートフォンの画面では、同時に見渡せる情報量がPCより少なくなります。リフローに関する達成基準では、幅320CSSピクセル相当の表示でも横スクロールを要しない状態が示されています^*6。この幅に収まる情報量を起点として、載せる項目と省く項目を決める進め方が実務に合います。

商品検索と定番品発注の導線は、発注の頻度で分けます。取引先が毎回同じ品目を発注する場合、検索から入る導線は手数が増えます。前回の発注内容や登録済みの定番品を先頭に置き、検索は補助の位置へ下げる構成が合います。型番の一部だけを覚えている担当者のために、部分一致と絞り込みの併用も要件になります。

数量入力では、入数と単位の扱いが誤発注の分かれ目になります。ケース単位とバラ単位が混在する商材では、入力欄の数値が何を指すのかを欄の近くに示します。入数を掛けた合計数量と発注金額の目安を同じ画面に表示すると、桁の取り違えに気づけます。数値キーボードの表示、上限値の設定、単位の切り替えは、入力欄の設計と一体で決めます。

発注履歴からの再発注は、入力の手数を減らす導線です。過去の発注を呼び出し、数量だけを変えて確定できる構成にすると、定番品の発注が短い操作で終わります。呼び出した内容が過去のものであることを画面で示し、単価や在庫の状態を再判定する処理も必要です。価格改定の直後は、履歴の単価をそのまま使うと食い違いが生じます。

承認フローは、発注者と承認者の端末が別であることを前提に設計します。現場の担当者が申請し、管理職が外出先で承認する運用では、承認待ちの件数と期限が一覧で分かる画面が要ります。承認の取り消しや差し戻しの経路を用意しないと、電話での確認が復活します。承認の期限が締め時間を越える場合の扱いも、画面の文言で示します。

項目の並び順は、発注の判断の順番に合わせます。品目を決め、数量を決め、納品日を決めるという流れが崩れると、画面を上下に往復する操作が増えます。1画面に収まらない場合は段階を分けて進める構成にし、現在どの段階にいるかを示します。段階を戻ったときに入力内容が保持されるかどうかも、設計時に決めておきます。

取引先ごとに見せる情報が異なる点も、設計の条件になります。取扱可否、単価、与信の状態は取引先ごとに違いますので、ログインした担当者の所属に応じて表示を切り替えます。表示の切り替えを画面側の条件分岐だけで組むと、権限の設定と食い違ったときに他社向けの単価が見える事態を招きます。表示の制御と権限の判定は、同じ根拠から導く設計にします。

在庫の状態と納期の目安を発注前に示すと、問い合わせの電話を減らせます。欠品時の代替品の提示、分納の可否、締め時間の表示は、発注の判断に直接効きます。締め時間を過ぎた発注がいつ出荷されるのかを画面に示すと、確認の連絡が減ります。

ここでは画面の要素ごとに、スマホ発注画面での扱いと設計上の要点を並べて整理します。

載せる項目を絞る判断は、削る機能を決める判断でもあります。PC向け画面にある一括アップロード、細かな条件検索、帳票の出力は、スマートフォンでは扱いにくい機能です。これらはPC側に残し、スマホ側からは参照や再開の導線だけを用意する分担が現実に合います。

情報設計では、発注1件あたりに必要な操作の回数を数えます。定番品の再発注が短い手数で終わるか、初めて扱う品目でも検索から確定まで迷わずに進めるかを、設計の段階で確かめます。操作の回数が増えるほど、取引先が電話やFAXへ戻る余地が残ります。

自社の商流に合わせた要件整理を進めたい場合は、無料相談で要件を整理するのが近道です。

小さな画面で誤発注を防ぐ操作設計

小さな画面での誤発注を防ぐ設計は、押し間違いを減らす寸法と、間違えた後に戻れる導線の二つで組み立てます。ターゲットサイズに関する達成基準（レベルAA）では、対象の大きさを24×24CSSピクセル以上とすることが示されています⁶。この基準には五つの例外が定められており、間隔を確保した場合や同等の操作が別に用意されている場合などが該当します7。より高い水準の達成基準（レベルAAA）では44×44CSSピクセルが示されています^*6。

タップ領域の確保は、見た目の大きさではなく、反応する範囲の大きさで考えます。文字リンクの周囲に余白を持たせ、押せる範囲を広げる実装が取れます。隣り合う操作の間隔が狭いと、確定と取り消しの押し間違いが起きます。例外の一つは間隔の確保に関するものですので、寸法と間隔は組にして検討します⁷。この例外では、寸法が基準に満たない対象について、その外接矩形の中心に置いた直径24CSSピクセルの円が、隣り合う対象や別の小さな対象の円と重ならないことが条件として示されています7。

タップの操作性については、寸法だけでなく間隔や形状も関わります。人差し指の接触角度を考慮してボタンの寸法と間隔を評価した研究（2015年）では、タブレット端末を用いた実験条件のもとで両者の関係が検討されています⁸。ターゲットの形状が操作性に及ぼす影響を扱った研究（2003年）もあります9。いずれも端末種別・被験者・操作姿勢という条件下の結果ですので、業務用の発注画面へ無条件に当てはめることはできません。

入力エラーの提示は、どこが誤りかと、どう直すかを同じ場所に示します。画面上部にまとめて表示するだけでは、該当の入力欄まで戻る操作が増えます。誤りのある欄の近くに文言を置き、色だけに頼らず文言でも伝えます。冗長な入力に関する達成基準（レベルAA）では、同じ情報を繰り返し入力させない配慮が示されています^*6。

色の使い分けだけで状態を伝える設計は避けます。在庫の状態や入力の誤りを色だけで示すと、色の判別が難しい担当者や、反射のある屋外の画面では伝わりません。文言や記号を添えて、色以外の手がかりを併せて示します。

確認画面の表示は、確定の直前に内容を見直す機会をつくります。品目名、入数、合計数量、納品希望日を一画面にまとめ、桁の大きい数量には目立つ表示を添えます。確認画面を省くと入力から確定までは短くなりますが、取り消しの連絡が増えます。確認の一手間と取り消しの手間を比べて、どちらを取るかを決めます。

取り消しと修正の導線は、確定後に自分で直せる範囲を決めることから始めます。出荷の準備に入った後は連絡が要りますので、締め時間との関係を画面に示します。修正の履歴は受注側にも残し、どちらの操作でいつ変わったのかを追える状態にします。

操作の取り消しについては、どこまで戻れるのかを画面の文言で示します。前の画面へ戻る操作で入力内容が消えるのか保持されるのかが分からないと、担当者は戻る操作をためらいます。時間制限に関する達成基準（レベルA）では、制限が切れる前に警告したうえで、少なくとも20秒の猶予を与え、10回以上の延長を認めることが示されており、20時間を超える制限は例外として扱われます^*6。セッションの時間切れで入力内容が失われる設計は、現場での発注では取り消しの連絡や電話への逆戻りにつながります。入力の途中で離脱した場合の扱いも決めておきます。

操作の設計は、誤りを起こさせない工夫と、誤った後に戻れる工夫の両輪で考えます。片方だけでは、現場での発注は電話へ戻ります。ドラッグ動作に関する達成基準（レベルAA）では、ドラッグ以外の手段でも操作できることが示されており^*6、片手での操作を想定する画面では有効な観点になります。

アクセシビリティと通信環境への配慮

アクセシビリティへの配慮は、特定の利用者向けの追加機能ではなく、発注画面の基本要件です。公的機関向けの導入ガイドブック（2025年）は、日本産業規格JIS X 8341-3:2016のレベルAA準拠を目標とする考え方を示しており²、民間の業務画面でも参照できます。WCAG 2.2（ウェブアクセシビリティの国際的な達成基準。2024年公開の版）は、2.1版に9件の達成基準を追加しています6。屋外や倉庫での利用を含む発注画面では、これらの要件が操作の成否に直結します。

ガイドブックが示す考え方は、担当者が単独で対応するのではなく、企画・設計・制作・運用の各工程へ要件を分けて組み込む点にあります^*2。画面が完成した後の点検だけでは、構造に関わる指摘への対応が難しくなります。発注画面でも、項目の並び順や見出しの構造を決める段階で要件を織り込みます。

文字サイズに関する達成基準では、200%まで拡大しても情報と機能が失われないことが示されています⁶。リフローに関する達成基準では、幅320CSSピクセル相当の表示で横スクロールを要しない状態が示されています6。この幅は、1280CSSピクセル幅の画面を400%まで拡大した状態に相当し、横方向にスクロールする内容については高さ256CSSピクセル相当が条件として示されています⁶。文字の間隔に関する達成基準（レベルAA）では、行の高さを文字サイズの1.5倍、段落の後の間隔を2倍、文字の間隔を0.12em、語の間隔を0.16emに変更しても内容と機能が失われないことが示されています6。表形式で並べた発注明細は、これらの条件で崩れやすい部分です。列を減らす、縦積みに切り替えるといった対応を設計段階で決めます。

コントラスト比に関する達成基準では、通常の文字で4.5対1以上、拡大文字で3対1以上が示されています⁶。入力欄の枠線やアイコンなど文字以外の要素については、3対1以上が示されています6。屋外の明るい場所では、画面の反射で見え方がさらに落ちます。淡い色の枠線や薄い灰色の補足文言は、屋外での判読が難しくなります。

入力欄には、視覚的な配置だけでなく文字のラベルを添えます。プレースホルダーの文言だけで項目名を示すと、入力を始めた時点で項目名が消えます。音声読み上げを用いる担当者にとっても、ラベルの有無が入力の可否を分けます。

音声入力や読み上げの利用も、屋外での操作では選択肢になります。手がふさがっている場面では、画面の見出しの構造が読み上げの手がかりになります。見出しの階層を整え、入力欄とラベルの対応を明示すると、読み上げでの操作が成り立ちます^*2。

電波が弱い場所や屋外での操作は、通信の途切れを前提に設計します。倉庫の奥、地下、山間部の現場では、送信の途中で接続が切れることがあります。入力途中の内容を端末側に保持し、再接続後に再開できる導線があると、入力のやり直しを避けられます。

送信の重複にも備えます。応答が返らないまま利用者が再送すると、同じ発注が二重に登録されることがあります。同一の発注を一度だけ受け付ける仕組みと、送信の結果を明示する表示を組にします。通信が復旧するまでの間、確定したのかどうかが分からない状態を残さない設計が要ります。

屋外での利用では、手袋を着けた操作や、片手で端末を持ったままの操作も想定されます。指の接触面が広がる条件では、隣接する操作の押し間違いが起きやすくなります。操作の並びを縦方向に整理し、確定と取り消しを離して配置する対応が取れます。

法令と保存要件から見た発注データの扱い

発注データには、取引条件の明示と記録の保存という二つの要件がかかります。取適法（中小受託取引適正化法。委託取引の適正化を定めた法律）では、発注時に取引条件を明示する義務があり、支払期日は給付を受領した日から60日以内と定められています³。支払が遅れた場合の遅延利息は年14.6%です3。電子取引でやり取りした注文データは、電磁的記録のまま保存する扱いが原則になります^*5。

取引条件の明示では、給付の内容、代金の額、支払期日、支払方法などを示します³。発注画面では、これらの項目が発注の記録として残るかどうかを確かめます。画面上は見えていても、保存されるデータに含まれていない項目があると、後から根拠を示せません。書類の作成と保存の義務は2年間とされています3。

電磁的方法による提供については、下請取引における電磁的記録の提供に関する留意事項（2023年）が、あらかじめ相手方の承諾を得る手続を示していました⁴。取適法への改正では電磁的方法での提供に関する扱いが見直され、受託側から書面の交付を求められた場合の対応が定められています3。旧法時点の資料と改正後の資料では要件が異なりますので、設計時にどちらを参照しているかを確かめます。

電子取引データの保存では、改ざん防止の措置と検索の機能が求められます。改ざん防止については、タイムスタンプの付与、訂正や削除の履歴が残るシステムでの授受と保存、事務処理規程の備付けなど、示された方法のいずれかを満たします⁵。タイムスタンプによる場合、付与までに認められる期間は業務処理サイクルを経た後の速やかな付与として、最長2か月とおおむね7営業日以内とされています5。検索の機能は、取引年月日、取引金額、取引先の3項目で検索できることが基本です⁵。判定期間の売上高が5,000万円以下の場合など、検索機能の要件が緩和される扱いも示されています5。

保存の要件は、受注側だけでなく発注側にも及びます。画面から発注した取引先も、その注文データを電子取引の記録として保存する立場になります⁵。保存の期間は、法人税法上の帳簿書類と同じく原則7年間です5。発注の控えを画面から取り出せる導線があると、取引先側の手当てを助けられます。取り出せる形式と期間を、案内の段階で伝えておきます。

アカウント権限と操作ログの管理は、誰の発注かを後から示すための要件です。取引先の担当者が交代した際に前任者のアカウントが残っていると、発注者の特定が難しくなります。権限の付与と停止の手順を運用側に用意し、発注、承認、修正、取り消しの操作を記録します。

発注データの扱いは、受注側の基幹システムとの連携方法にも関わります。画面で受け付けた発注を別のシステムへ転記する構成では、転記後のデータが原本なのか、画面側の記録が原本なのかを決めておきます。原本の所在があいまいなままでは、保存の要件を満たしているかを説明できません。

これらの要件を満たさない設計は、後からの作り直しにつながります。保存すべき項目が記録から欠けていた場合、過去の発注分をさかのぼって補うことはできません。検索の要件を満たさない保存では、確認の求めに応じるための手作業が生じます^*5。設計の初期段階で、保存する項目と保存の方法を決めておく必要があります。

導入の進め方と定着に向けた確認事項

導入は、現行フローの棚卸し、取引先への案内、定着状況の確認という三つの段階に分けて進めます。画面を公開してから取引先へ連絡する順序では、電話・FAXとの二重運用が長引きます。棚卸しの段階で経路ごとの件数と担当者を把握し、移行の対象と順序を決めます。定着の測定まで含めて計画すると、使われない画面を抱え込む事態を避けられます。

現行フローの棚卸しでは、発注経路の把握から始めます。電話、FAX、メール、既存の受発注システムのそれぞれについて、件数、品目、担当者、締め時間を並べます。次に商品マスタの整備を進めます。画面から選べる状態にするには、型番、商品名、入数、単位、取引先ごとの取扱可否がそろっている必要があります。

商品マスタの整備は、見込みより時間がかかる工程です。電話やFAXの発注では担当者が読み替えていた表記のゆれが、画面では選択肢の欠落として表れます。取引先ごとの単価や取扱範囲が別の台帳で管理されている場合、統合の作業も加わります。

取引先への案内では、対象取引先の選定を先に済ませます。発注の頻度が高く、現場からの発注が多い取引先から始めると、効果が見えやすくなります。続いて操作案内の提供を用意します。手順を紙とデータの両方で用意し、問い合わせ先を明示すると、初回でつまずいた担当者が電話へ戻る前に解決できます。

移行は、経路を一度に切り替えるのではなく、期間を区切って併用します。併用の期間には終わりを設け、いつまでに切り替えるかを取引先へ伝えます。期限を示さないまま併用を続けると、受注側の負担が減らないまま運用が固まります。

定着状況の確認では、利用率の測定と問い合わせの分類を組にします。発注件数に占める画面経由の比率、取引先ごとの利用の有無、初回の発注から二回目までの間隔を見ます。問い合わせの分類では、操作が分からないのか、商品が見つからないのか、権限の設定なのかを切り分けます。分類の結果が、次の改修の対象になります。

定着の判断は、公開直後の数字だけでは決められません。発注の周期が月単位の商材では、二回目の発注が起きるまでに時間がかかります。測定の期間を商材の発注周期に合わせて設定し、期間内に利用が伸びない取引先へは個別に案内します。

内製で進める場合、必要な知識の範囲は広くなります。受発注業務の商習慣、画面設計とアクセシビリティの達成基準、電子取引データの保存要件、権限とログの設計、取引先への移行支援が同時に求められます⁵6。アクセシビリティだけを見ても、参照する版は2.1版へ9件の達成基準を加えたWCAG 2.2であり、目標として置かれるのはJIS X 8341-3:2016のレベルAAです²6。担当者が兼務で進めると、棚卸しと移行の工程が滞りやすくなります。外部の設計支援を使う判断は、これらの要件の抜け漏れを減らすための選択肢です。

導入後も、取引先の担当者交代や商材の追加に合わせた手当てが続きます。権限の停止と付与、商品マスタの追加、案内資料の更新を誰が担うのかを、導入の段階で決めておきます。運用の担い手が決まっていない画面は、更新が止まった時点で利用が落ちます。

よくある質問

既存の受発注システムをレスポンシブ対応させるのと、スマホ向けの画面を別に用意するのとでは、どちらを選べばよいですか

発注される品目の幅と、権限の複雑さで判断します。定番品の再発注が中心で項目数が少なければ、既存画面のレスポンシブ対応でも幅320CSSピクセル相当の表示に収められます^*6。取引先ごとの単価や承認の経路が入り組む場合は、別画面にして載せる機能を絞るほうが、在庫や権限の判定を二重に持たずに済みます。

取引先がスマホ発注を使ってくれない場合は、どう進めればよいですか

使われない原因を分類してから手を打ちます。操作が分からないのか、商品が見つからないのか、権限の設定が済んでいないのかで対応が変わります。発注頻度の高い取引先から案内し、電話やFAXとの併用期間に期限を設ける進め方が現実的です。期限を示さないまま併用を続けると、受注側の負担が減らないまま運用が固まります。

発注のデータは、どのくらいの期間、どのように保存すればよいですか

電子取引でやり取りした注文データは、電磁的記録のまま保存します^*5。改ざん防止としてタイムスタンプの付与や訂正削除の履歴が残るシステムでの保存、事務処理規程の備付けなどのいずれかを満たし、取引年月日・取引金額・取引先の3項目で検索できる状態にします^*5。取引条件を記した書類の作成と保存の義務は2年間です^*3。

アクセシビリティの達成基準は、取引先向けの業務画面にも当てはまりますか

公的機関向けの導入ガイドブックはJIS X 8341-3:2016のレベルAA準拠を目標とする考え方を示しており^*2、業務画面でも設計の指針として使えます。屋外や倉庫での利用、拡大表示を必要とする担当者の存在を考えると、200%までの拡大やコントラスト比4.5対1以上といった要件は、操作できるかどうかに直接関わります^*6。

導入までにどのくらいの期間を見込めばよいですか

期間は現行フローの整理状況で大きく変わります。発注経路が電話・FAX・メールに分散し、取引先ごとの単価や取扱範囲が別の台帳にある場合、商品マスタの整備に時間がかかります。定着の測定も、発注の周期が月単位の商材では二回目の発注が起きるまで判断できません。画面の開発期間だけで計画を立てないことをおすすめします。

1. *1　出典：総務省「令和6年通信利用動向調査の結果」（2025）　経路
2. *2　出典：デジタル庁「ウェブアクセシビリティ導入ガイドブック」（2025）　経路
3. *3　出典：公正取引委員会「取適法（中小受託取引適正化法）の概要」（2025）　経路
4. *4　出典：公正取引委員会「下請取引における電磁的記録の提供に関する留意事項」（2023）　経路
5. *5　出典：国税庁「電子帳簿保存法一問一答【電子取引関係】」（2025）　経路
6. *6　出典：W3C「Web Content Accessibility Guidelines (WCAG) 2.2（W3C Recommendation）」（2024）　経路
7. *7　出典：W3C Web Accessibility Initiative「Understanding Success Criterion 2.5.8: Target Size (Minimum)」（2024）　経路
8. *8　出典：日本感性工学会「日本感性工学会論文誌『タッチパネルタブレット端末における人差し指の接触角度を考慮したボタンのサイズ及び間隔の評価』」（2015）　経路
9. *9　出典：日本人間工学会「人間工学『ターゲット形状がタッチ画面の操作性に及ぼす影響』」（2003）　経路