スマホで入力する前提で作る

パソコンで見ると、ちゃんとした画面。ところが、スマホで開くと、押しにくい。そんな経験はありませんか。

現場で使う入力画面は、スマホやタブレットで開かれることが多いはずです。ところが、アプリを作る人は、パソコンで作るので、パソコンの画面を基準に考えてしまいます。

「モバイルファースト」という考えかた

最初に小さい画面（スマホ）で使いやすいかを考えて、そのあとに大きい画面へ広げる設計です。スマホで使える形にしておけば、広い画面ではもっと使いやすくなります。逆はうまくいきません。

パソコンから考える

スマホから考える

横に何列も並べる

縦一列に並べる

文字を打つ前提

選ぶ・読み取る前提

小さなボタンでも押せる

指で押せる大きさ

項目が多くても気にならない

項目を絞る

スマホで入力するときの制約

制約	影響
画面が小さい	一度に見える項目が少ない
指で操作する	小さいボタンは押しにくい
片手・立ったまま	長い文章を打つのがつらい
外の明るさ・手袋	画面が見えにくい、反応しにくい

スマホ向けの設計の工夫

縦一列に並べる

項目は、縦に一列に並べるのが基本です。横に何列も並べると、画面が窮屈になります。

打つより選ぶ

文字入力はスマホでもっとも手間のかかる操作です。選択肢、日付ピッカー、カメラでの読み取り（バーコード・QR）、写真など、打たずに済む入力を優先します。

たとえば、こんな画面です。日報の報告日には、「今日」「昨日」のボタンがあり、報告者や部署はプルダウンから選びます。

• 日付は、ボタン一つで入ります。
• 報告者・部署は、一覧から選ぶ形です。

点検の画面では、設備の欄に「スキャン」ボタンがあり、読み取った設備の名前が緑の枠で出ます。

• 「スキャン」のボタンで、番号を打たずに入れられます。
• 下の保存ボタンは、画面に固定されています。

ボタンは大きく、間隔をあける

押し間違いを防ぐため、ボタンや選択肢は十分に大きく、隣との間隔をあけます。

項目を減らす

パソコンなら気にならない二十項目も、スマホでは、スクロールの繰り返しになります。「入力項目を絞る」の考えかたが、より重要になります。

1縦一列

項目は、縦に並べる

2打つより選ぶ

選択・日付・読み取り・写真

3大きいボタン

押し間違いを防ぐ

4項目を減らす

スクロールを短く

スマホで試す

作った画面は、必ず、実際にスマホで開いて試します。

1. 片手で、親指だけで、最後まで入力できるか
2. 外の明るさ、手袋など、現場の条件でも使えるか
3. 入力途中で電話が来たりしても、慌てずに戻れるか

• 片手の親指だけで、最後まで入力できる
• 外の明るさ・手袋など、現場の条件でも使える
• 入力の途中で中断しても、戻れる
• 現場に電波が届くことを確かめた

まとめ

• 現場の入力はスマホが多い。最初からスマホで考える
• 縦一列、打つより選ぶ、ボタンは大きく
• 項目を減らして、スクロールを短くする
• 実際のスマホ・現場の条件で試す

Formia でやるなら

Formiaの入力画面は、スマホの画面幅に合わせて、項目が縦一列になり、ボタンも押しやすい大きさになります。送信のバーが下に固定され、必須項目の残りも分かります。フォームデザイナーでも、スマホ・タブレット・パソコンの見え方を切り替えて確認できます（スマホで使う、レコードを入力する、入力の補助機能）。

関連する記事

• 入力しやすいレイアウト
• 入力項目を絞る
• 外出先でスマホから入力