業務システムを開発するとき、
「スマートフォンでも使えるようにした方がよい」
「レスポンシブ対応しておけば十分」
「PC版と同じ機能をスマホでも使えるようにしたい」
といった要望が出ることがあります。
確かに、営業・保守・施工・配送・店舗など、社外や現場で業務を行う場合、スマートフォンやタブレットからシステムを利用できると便利です。
例えば、
現場到着
↓
スマートフォンで案件確認
↓
作業内容を入力
↓
写真撮影
↓
作業報告を送信
まで行えれば、帰社後にPCへ転記する必要を減らせます。
一方で、
顧客一覧500件を確認する
複雑な帳票を作る
大量のデータを一括編集する
細かな管理設定を行う
といった業務まで、スマートフォンで使いやすくする必要があるとは限りません。
そのため、モバイル対応の業務システムを設計するときは、
PC版の全機能をスマートフォンへ詰め込むのではなく、現場で必要な操作を優先すること
が重要です。
この記事では、業務システムをどこまでモバイル対応すべきか、スマートフォン・タブレット向けに優先したい機能、画面設計、写真・バーコード・オフライン対応まで具体的に解説します。
業務システムのモバイル対応とは
業務システムのモバイル対応とは、スマートフォンやタブレットから業務システムを利用できるようにすることです。
例えば、
- 顧客情報を確認する
- 今日の訪問予定を見る
- 作業内容を登録する
- 写真をアップロードする
- 問い合わせへ返信する
- 申請を承認する
- 在庫を確認する
といった操作です。
Webシステムの場合は、ブラウザで利用できる画面をスマートフォン向けに調整する方法があります。
ただし、
画面幅に合わせて縮小表示できる
だけでは、実際の現場で使いやすいとは限りません。
モバイル対応では、
小さい画面・タッチ操作・移動中・通信環境
まで考える必要があります。
モバイル対応とレスポンシブ対応は同じではない
Webシステムではレスポンシブデザインを利用して、
PC
タブレット
スマートフォン
の画面幅に合わせてレイアウトを変更できます。
しかし、
レスポンシブ対応
＝
モバイルで使いやすい
とは限りません。
例えばPC版で、
顧客名
担当者
住所
電話番号
契約状況
最終訪問日
売上
備考
更新日
という9列のテーブルがあるとします。
これをスマートフォン幅に縮めると、横スクロールだらけになります。
そこでスマートフォンでは、
顧客名
担当者
ステータス
だけを一覧表示し、タップしたら詳細を表示する方が使いやすい場合があります。
つまりモバイル対応では、
レイアウトだけではなく情報量そのものを見直す
必要があります。
業務システムをモバイル対応した方がよいケース
特にモバイル対応の効果が出やすいのは、現場で情報を確認・入力する業務です。
1．営業担当者が外出先で利用する
例えば営業支援システムなら、
訪問前
↓
顧客情報確認
訪問後
↓
商談結果登録
という使い方があります。
スマートフォンから入力できれば、
帰社
↓
PCを開く
↓
商談内容を思い出して入力
という作業を減らせます。
2．現場作業の報告を行う
例えば、
- 建設
- 設備保守
- 点検
- 清掃
- 修理
などです。
現場で、
作業開始
↓
作業内容入力
↓
写真撮影
↓
作業完了報告
まで行えると効率的です。
3．倉庫・店舗で在庫を確認する
倉庫内で、
商品を確認
↓
スマートフォンで検索
↓
現在庫を確認
という使い方があります。
バーコード・QRコード読み取りまで組み合わせる方法もあります。
4．承認だけ外出先で行う
申請・承認業務では、詳細な申請書作成はPCで行い、
承認
差し戻し
だけスマートフォンで行う方法があります。
これはモバイル対応の考え方として分かりやすい例です。
すべての機能をスマートフォン対応せず、
外出中に必要な操作だけ対応する
という設計です。
5．予約・受付業務で利用する
例えば店舗やイベント会場で、
- 予約一覧
- 来場確認
- 受付処理
- キャンセル
などをタブレットから操作するケースです。
6．配送・訪問業務で利用する
例えば、
本日の訪問先
↓
住所確認
↓
訪問
↓
完了登録
という業務です。
地図アプリとの連携なども検討できます。
モバイル対応を優先しなくてもよいケース
一方、すべての業務システムでスマートフォン対応が必要なわけではありません。
例えば、
- 大量データの集計
- 複雑なExcelのような編集
- 帳票レイアウト作成
- システム管理
- マスタ一括登録
- 詳細な分析
などは、PCの方が作業しやすい場合があります。
例えば管理者が、
顧客10,000件から条件を指定
↓
一覧比較
↓
CSV出力
↓
分析
するのであれば、無理にスマートフォンへ最適化するメリットは小さいかもしれません。
モバイル対応は「閲覧」「入力」「管理」に分けて考える
すべての機能を同じレベルでモバイル対応する必要はありません。
例えば、
閲覧
スマートフォン対応する。
簡単な入力
スマートフォン対応する。
管理設定
PCのみ。
という設計ができます。
例えば顧客管理システムなら、
スマートフォン
- 顧客検索
- 顧客詳細
- 電話
- 訪問履歴
- 商談メモ
PC
- 顧客一括登録
- CSV出力
- マスタ管理
- 権限設定
と分けます。
この方が開発コストも抑えやすくなります。
モバイル対応すべき機能を判断する5つの質問
どこまでモバイル対応するか迷った場合は、次の質問から整理できます。
1．その操作は現場で行うか
事務所へ戻ってから行う業務なら、PCだけでも問題ない可能性があります。
2．その場で入力しないと二重入力になるか
例えば紙へメモして後でPC入力しているなら、モバイル化の効果が大きい可能性があります。
3．スマートフォンの機能を活用できるか
例えば、
- カメラ
- GPS
- バーコード
- QRコード
などです。
4．入力項目は少ないか
大量の文章や表を編集する操作は、スマートフォンでは使いにくくなります。
5．利用頻度は高いか
毎日利用する機能なら、モバイル対応による改善効果も大きくなります。
モバイル業務システムで優先したい機能
現場利用を考えるなら、次のような機能が候補になります。
今日の予定
例えば営業なら、
10:00 株式会社ABC
13:00 株式会社DEF
16:00 株式会社GHI
のような予定です。
現場スタッフなら、
本日の作業一覧
を表示します。
検索
スマートフォンでは、深いメニューをたどるより検索を利用した方が早い場合があります。
例えば、
顧客名
設備番号
案件番号
から検索します。
詳細確認
現場で必要な、
- 顧客住所
- 電話番号
- 作業内容
- 注意事項
- 過去履歴
などを確認します。
ステータス更新
例えば、
未着手
↓
作業中
↓
完了
という変更です。
数回のタップで更新できるようにします。
コメント・メモ
現場で、
「部品交換済み」
などの短いメモを残します。
写真撮影
スマートフォンのカメラを利用します。
例えば、
作業前
作業中
作業後
の写真を登録できます。
電話・地図
電話番号をタップすると電話を発信したり、住所から地図を開いたりできるようにします。
バーコード・QRコード
設備・商品・会員証などのコードを読み取り、対象データを表示できます。
現場利用では「入力を減らす」ことが重要
PCでは問題ない入力フォームでも、スマートフォンでは負担になることがあります。
例えば、
顧客名：入力
担当者：入力
作業日：入力
作業開始時間：入力
住所：入力
作業種類：入力
作業内容：入力
完了時間：入力
というフォームです。
現場では、
顧客
→ 予定から自動設定
担当者
→ ログインユーザーから自動設定
作業日
→ 当日を自動設定
開始時間
→ ボタン押下時刻
住所
→ 顧客マスタから取得
など、自動入力できる可能性があります。
モバイル対応では入力欄を小さくするのではなく、入力そのものを減らすこと
が重要です。
文字入力より選択式を増やす
スマートフォンでは長文入力が負担になります。
例えば、
作業結果を入力してください
という自由記述だけではなく、
作業結果
- 正常
- 要確認
- 再訪問必要
と選択させます。
補足がある場合だけコメントを書いてもらいます。
これにより入力時間を短縮できます。
ボタンを押しやすい大きさにする
PCではマウスを利用できますが、スマートフォンでは指で操作します。
そのため、
小さなチェックボックス
細いリンク
密集したボタン
は操作しにくくなります。
特に現場では、
- 手袋をしている
- 片手で操作する
- 移動しながら確認する
場合もあります。
誤タップしにくいUIを考えます。
PC向けテーブルをそのまま表示しない
業務システムではテーブル表示を多く利用します。
例えば、
| 案件 | 顧客 | 担当 | 期限 | 状況 | 金額 | 更新日 |
|---|
という一覧です。
PCでは便利ですが、スマートフォンでは横幅が足りません。
そこでカード形式にします。
例えば、
株式会社ABC
案件：設備点検
担当：田中
期限：7/31
状態：対応中
という表示です。
スマートフォンでは、情報量を絞って縦方向に並べる方が見やすくなる場合があります。
重要な操作を画面下部へ配置する
スマートフォンでは、
- 完了
- 保存
- 写真追加
など、頻繁に利用する操作へすぐアクセスできることが重要です。
例えば作業報告画面の最下部に、
[下書き保存] [完了報告]
を固定表示する方法があります。
モバイル対応の具体例｜作業報告システム
例えば設備点検業務です。
PC中心の運用
現場へ移動
↓
紙へ作業内容を記録
↓
写真撮影
↓
帰社
↓
PCへ作業報告入力
↓
写真アップロード
となっているとします。
モバイル対応後
現場到着
↓
スマートフォンで案件確認
↓
作業開始
↓
チェック項目入力
↓
写真撮影
↓
完了報告
とできます。
ポイントは、
現場で入力したデータをそのまま正式な作業報告として利用すること
です。
モバイル対応の具体例｜営業支援システム
営業担当者なら、
顧客訪問前
↓
顧客情報確認
訪問
↓
商談
訪問直後
↓
商談結果入力
↓
次回予定登録
という流れです。
時間が経ってから入力するより、商談直後に簡単な入力だけ済ませる方が情報の精度を保ちやすくなります。
モバイル対応の具体例｜在庫管理システム
倉庫で、
商品棚へ移動
↓
バーコード読み取り
↓
商品表示
↓
数量入力
↓
入庫・出庫登録
とします。
PCへ商品コードを入力するより、現場で直接処理できます。
特に、
商品検索
数量入力
登録
を少ない操作で行えることが重要です。
モバイル対応の具体例｜承認システム
申請作成はPC。
承認だけスマートフォン。
という分け方です。
例えば、
メール通知
↓
スマートフォンで申請詳細確認
↓
承認・差し戻し
とします。
複雑な申請書作成画面までスマートフォンへ最適化する必要はない場合があります。
モバイル対応の具体例｜問い合わせ管理
外出中の担当者が、
新しい問い合わせ通知
↓
スマートフォンで内容確認
↓
担当設定
↓
顧客へ連絡
↓
ステータス変更
までできるようにします。
ただし、長文回答が必要ならPCで行うという使い分けもできます。
カメラを利用できるのがモバイルの強み
モバイル対応では、単にPC画面を小さくするのではなく、スマートフォン固有の機能を利用すると効果が大きくなります。
代表例がカメラです。
例えば、
設備点検
↓
対象設備を撮影
↓
作業報告へ自動添付
とできます。
また、
- 工事前後
- 故障箇所
- 納品状態
- 商品状態
などの記録にも利用できます。
写真アップロードでは圧縮も考える
スマートフォンで撮影した写真は容量が大きい場合があります。
例えば1枚数MBの写真を、
1案件10枚
×
1日100案件
保存すると、ストレージや通信量が大きくなります。
そのため、
- 画像圧縮
- リサイズ
- サムネイル生成
- オブジェクトストレージ利用
などを検討します。
画質が必要な業務では、必要な解像度を確認して決めます。
GPS・位置情報は本当に必要か確認する
スマートフォンでは位置情報も利用できます。
例えば、
訪問場所を記録する
用途です。
ただし、位置情報はプライバシーにも関係します。
そのため、
「取れるから取得する」
のではなく、
業務上なぜ必要なのか
を明確にします。
必要な場合でも、
常時追跡
ではなく、
作業開始時のみ取得
など、必要最小限にする方法があります。
バーコード・QRコードを活用する
モバイル業務システムと相性が良い機能の一つです。
例えば設備へQRコードを貼ります。
QRコード読み取り
↓
設備詳細
↓
点検履歴
↓
点検登録
とできます。
これにより、現場で設備番号を手入力する必要を減らせます。
在庫管理でも、
商品バーコード
↓
商品検索
↓
入出庫登録
という使い方があります。
オフライン対応は必要？
現場によっては、
- 地下
- 山間部
- 工場
- 建設現場
など、通信が安定しない場所があります。
その場合、
通信できないと何も入力できない
システムでは使いにくくなります。
そこでオフライン対応を検討します。
例えば、
現場で入力
↓
端末に一時保存
↓
通信復旧
↓
サーバーへ同期
という方式です。
オフライン対応は複雑になる
オフライン対応は便利ですが、設計は複雑になります。
例えば、
端末Aがオフラインで顧客情報編集
同時に、
端末Bがオンラインで同じ顧客情報編集
した場合、
通信復旧後にどちらを正しいデータとするか
という問題があります。
そのため、
- オフラインでは閲覧のみ
- 作業報告だけオフライン可能
- マスタ編集はオンライン限定
など、対象機能を絞ることが重要です。
PWAという選択肢
Webシステムをスマートフォンで使いやすくする方法として、PWAを検討することもあります。
PWAではWebアプリをホーム画面から起動しやすくしたり、構成によってはキャッシュや通知などを利用したりできます。
ただし、
モバイル対応するなら必ずPWA
というわけではありません。
通常のレスポンシブWebシステムだけでも十分なケースは多くあります。
必要な機能から判断します。
Webシステムとネイティブアプリはどちらがよい？
モバイル対応を考えると、
Webシステム
にするか、
iPhone・Androidアプリ
にするか迷うことがあります。
Webシステムが向いているケース
- PCとスマホの両方で利用
- 配布・更新を簡単にしたい
- 一般的なフォーム入力・閲覧
- カメラなど基本機能で十分
という場合です。
ネイティブアプリを検討するケース
- スマートフォン機能を高度に利用
- 高度なオフライン対応
- バックグラウンド処理
- 高度なプッシュ通知
- 端末固有機能との密接な連携
などが必要な場合です。
業務システムでは、まずWebで実現できないかを検討すると開発・保守範囲を抑えられる場合があります。
タブレット対応も検討する
現場利用ではスマートフォンだけでなく、タブレットが適している場合があります。
例えば、
- 工場
- 店舗受付
- 医療・介護
- 倉庫
- 現場点検
などです。
スマートフォンより画面が大きいため、
一覧
入力フォーム
画像
を同時に確認しやすくなります。
例えば、
スマホ
→ 確認・簡単入力
タブレット
→ 現場作業
PC
→ 管理業務
と役割を分ける方法があります。
モバイル対応ではログインのしやすさも重要
PCでは、
メールアドレス
＋
長いパスワード
を入力してもそれほど負担にならない場合があります。
しかしスマートフォンで毎回入力すると使いにくくなります。
そのため、
- SSO
- パスワードマネージャー
- パスキー
- 適切なセッション管理
なども検討します。
ただし、使いやすさを優先して認証を弱くするのではなく、扱う情報に応じたセキュリティ設計が必要です。
モバイル対応でも権限管理は同じ
スマートフォン版だけ権限チェックを簡略化してはいけません。
例えばPCでは、
管理者だけCSV出力可能
なのに、モバイル用APIでは全員取得可能
という状態にならないようにします。
権限判定は画面ではなくサーバー側で行います。
紛失を前提にセキュリティを考える
スマートフォンやタブレットは持ち運ぶため、紛失の可能性があります。
そのため、
- 端末へ必要以上のデータを保存しない
- ログアウト
- セッション期限
- アカウント無効化
- 必要に応じた二要素認証
などを検討します。
特に、
顧客一覧を端末へ全件ダウンロード
のような設計は慎重に判断します。
【コピペ用】モバイル対応業務システム検討シート
利用者
営業：
現場担当：
管理者：
顧客：
その他：
利用端末
PC：
スマートフォン：
タブレット：
会社端末：
個人端末：
利用場所
社内：
顧客先：
現場：
屋外：
地下：
通信不安定：
モバイル対応する機能
ログイン：
一覧：
検索：
詳細：
新規登録：
編集：
承認：
ステータス変更：
コメント：
写真：
バーコード：
QRコード：
位置情報：
PCのみの機能
CSV：
マスタ管理：
ユーザー管理：
権限設定：
一括登録：
帳票：
その他：
入力
文字入力：
選択式：
自動入力：
音声入力：
通信
常時オンライン：
オフライン対応：
一時保存：
同期：
セキュリティ
二要素認証：
権限管理：
セッション：
端末紛失：
現場UX
片手操作：
手袋操作：
屋外利用：
大きなボタン：
モバイル対応を進める7ステップ
STEP1｜利用場所を確認する
まず、
誰がどこでシステムを使うのか
を整理します。
社内PCだけならモバイル対応の優先度は低いかもしれません。
STEP2｜現場業務を整理する
例えば、
訪問
↓
点検
↓
写真
↓
報告
という業務です。
STEP3｜現場で必要な情報を絞る
PC版のすべての情報を表示するのではなく、
- 顧客名
- 住所
- 作業内容
- 注意事項
など必要な情報に絞ります。
STEP4｜現場で必要な操作を決める
例えば、
- ステータス変更
- 写真登録
- コメント
- 完了報告
だけ対応します。
STEP5｜端末機能を確認する
例えば、
- カメラ
- GPS
- QRコード
を利用するか確認します。
STEP6｜通信環境を確認する
現場で安定して通信できるか確認します。
必要ならオフライン対応を検討します。
STEP7｜実際の端末でテストする
開発者のPCブラウザを狭くしただけでは不十分です。
実際のスマートフォンで、
- 入力できるか
- ボタンを押しやすいか
- 文字が見えるか
- 写真アップロードできるか
を確認します。
モバイル対応でよくある失敗
失敗1｜PC版をそのまま縮小する
画面は表示できても操作しにくくなります。
情報・機能をモバイル向けに絞ります。
失敗2｜全機能をスマートフォン対応する
管理画面や一括処理まで対応すると開発コストが増えます。
現場で必要な機能を優先します。
失敗3｜文字入力が多い
選択・自動入力を増やします。
失敗4｜テーブルをそのまま表示する
カード表示など、スマートフォン向けUIを検討します。
失敗5｜通信環境を確認しない
現場で圏外になるなら利用できません。
実際の利用場所を確認します。
失敗6｜写真容量を考えない
大量の高解像度画像で通信量・保存容量が増える可能性があります。
失敗7｜オフライン対応を何でも入れる
同期処理が複雑になります。
本当に必要な機能だけに絞ります。
失敗8｜スマートフォン版だけ権限制御が弱い
API側でもPC版と同じ権限チェックを行います。
失敗9｜スマホ対応したのに紙が残る
システムへ入力した後、さらに紙へ記録する運用が残ると効果が限定されます。
業務フロー全体を見直します。
モバイル対応の費用対効果は「二重入力」で考える
モバイル化の効果が出やすいのが、
現場
↓
紙・メモ
↓
帰社
↓
PC入力
という業務です。
例えば1件10分の転記作業が、
1日20件
あれば、
200分
の入力作業が発生します。
現場入力によってこの工程をなくせるなら、モバイル対応の価値は高くなります。
一方、
月に1度しか使わない管理画面
をスマートフォン対応しても効果は限定的です。
そのため、
現場で入力できることで消せる後工程があるか
を見ることが重要です。
モバイル対応に関するよくある質問
業務システムはすべてスマホ対応した方がよいですか？
必要ありません。
現場で利用する閲覧・入力・承認などを優先し、管理・集計・一括処理はPCのみとする方法があります。
レスポンシブ対応だけで十分ですか？
画面内容がシンプルなら十分な場合があります。
一方、PC向けの複雑なテーブルやフォームが多い場合は、スマートフォン向けに情報構造や操作方法も見直す必要があります。
スマートフォンから写真を登録できますか？
Webシステムでも端末のカメラや写真を利用してアップロードできる構成があります。
写真サイズや通信量も考慮します。
QRコード・バーコードは読み取れますか？
構成によって可能です。
在庫、設備、受付などの業務と相性があります。
圏外でも利用できますか？
通常のWebシステムは通信が必要です。
オフライン対応を実装することもできますが、データ同期や競合処理が複雑になるため、必要な機能だけ対応することをおすすめします。
モバイル対応ならアプリを作る必要がありますか？
必ずしも必要ありません。
ブラウザで利用するレスポンシブWebシステムでも実現できる業務は多くあります。
タブレットとスマートフォンのどちらがよいですか？
業務内容によります。
短時間の確認・入力ならスマートフォン、入力項目や表示情報が多い現場作業ならタブレットが使いやすい場合があります。
hiro-dev-labでは現場利用を前提としたモバイル対応の整理から相談できます
hiro-dev-labでは、単純にPC版をスマートフォン表示へ変更するだけではなく、実際の現場業務から必要なモバイル機能を整理する段階から相談できます。
例えば、
- 現在の業務フロー整理
- PC・スマートフォンの役割分担
- 現場入力の整理
- スマートフォン向け画面設計
- タブレット対応
- 写真アップロード
- QRコード・バーコード
- 位置情報
- 作業報告
- 在庫管理
- 承認
- オフライン利用の検討
- 権限・認証設計
- 要求整理
- 業務要件・機能要件整理
- Webシステム設計・開発
などです。
例えば、
現場から作業報告を入力したい
営業担当者が外出先から顧客情報を確認したい
倉庫でスマートフォンから在庫を登録したい
PC向けシステムをどこまでスマホ対応すればよいか分からない
という場合でも、
利用場所 → 現場業務 → 必要情報 → 必要操作 → 端末機能 → システム
の順番で整理できます。
まとめ｜業務システムのモバイル対応は「全機能」ではなく「現場で完結させたい業務」から考える
業務システムをモバイル対応するとき、
「PC画面をすべてスマートフォンでも表示できるようにする」
ことを目標にする必要はありません。
まず、
- 誰がスマートフォンを使うのか
- どこで利用するのか
- 現場で何を確認するのか
- 現場で何を入力するのか
- 帰社後に何を再入力しているのか
- カメラ・QRコードなどを使うのか
- 通信環境に問題がないか
を整理します。
その上で、
スマートフォン
- 検索
- 詳細確認
- 簡単な入力
- ステータス変更
- 写真撮影
- 承認
PC
- 一括登録
- 集計
- CSV
- 帳票
- マスタ管理
- 権限設定
というように役割を分けます。
特に重要なのは、
PC版を小さくするのではなく、モバイルで必要な業務だけを短時間で完了できるようにすること
です。
例えば、
紙へ作業記録
↓
帰社
↓
PCへ転記
という業務が、
スマートフォンで現場入力
↓
完了
になるなら、モバイル対応による効果は大きくなります。
逆に、月に数回しか使わない複雑な管理機能までスマートフォン対応すると、開発コストだけが増える可能性があります。
「スマートフォンでも使いたい」
という要望をそのまま機能要件にするのではなく、
現場でどの業務を完結させたいのか
から整理することが、使いやすいモバイル対応業務システムを作るポイントです。