「アンケート回答が思ったより少ない」と悩んだとき、まず確認すべきが モバイル UX です。近年、アンケート回答の過半数はスマートフォン経由。PC で設計したアンケートをそのまま配信すると、モバイルで使いづらく、離脱率が急増します。
本記事では、モバイル最適化の具体的な設計ポイントを解説します。
モバイル特有の制約
画面サイズが小さい
スマホは縦長（375×667px〜414×896px が主流）。1画面に表示できる情報量が PC の1/3〜1/4。
タッチ操作が中心
マウスより指の方が大きい。タップ領域を 44px 以上 にしないと押し間違いが発生。
縦スクロールが基本
横スクロールは UX として失敗。すべて縦スクロールで完結させる。
キーボード入力が遅い
物理キーボードよりも入力速度が遅い。自由記述は最小限 に。
通信環境が不安定
モバイル回線・公共 Wi-Fi など、通信が遅い・不安定な環境がある。重い画像は避ける。
設計の基本ルール
ルール1: タップ領域 44px 以上
button, input, select {
min-height: 44px;
}
ラジオボタン・チェックボックスも、タップ領域を広げる。
ルール2: フォントサイズ16px以上
iOS Safari は font-size 16px 未満 の入力フィールドにフォーカスすると、自動でズームします。これを避けるため、入力フィールドは 16px 以上に。
input, textarea {
font-size: 16px;
}
ルール3: ラベルを上に置く
PC では「ラベル：入力欄」の横並びが一般的だが、モバイルでは縦並びにする。
<!-- ❌ NG（モバイルで詰まる） -->
<label>会社名</label><input>
<!-- ⭕ OK -->
<label>会社名</label>
<input>
ルール4: 入力タイプを正しく指定
<input type="email" inputmode="email"> → メール用キーボード
<input type="tel" inputmode="tel"> → 数字キーボード
<input type="number"> → 数字キーボード
<input type="url"> → URL用キーボード
質問タイプ別のモバイル最適化
単一選択（ラジオボタン）
選択肢が4個までなら横並び、5個以上なら 縦並び が見やすい。
1〜4個: 横並び OK
5個以上: 必ず縦並び
複数選択（チェックボックス）
縦並びが基本。選択肢間のスペースを十分に取る。
5段階評価
ラベル付き: 「不満 1 ─ 2 ─ 3 ─ 4 ─ 5 満足」
スマホでは縦並び表示にして、各段階を大きくタップできるように。
マトリクス（マトリックス）
モバイルで最も問題が起きるタイプ。複数の項目 × 複数のスケールが画面に収まらない。
対策：
- マトリクスを使わず、項目ごとに別設問に分解する
- どうしてもマトリクスを使うなら、縦並びレイアウトに自動切替
長文入力（テキストエリア）
サイズを最低でも rows="4" 確保。プレースホルダーで例を示すと書きやすい。
<textarea rows="4"
placeholder="例: ○○の機能が使いにくいと感じます"></textarea>
日付選択
OS 標準の日付ピッカーを使う（type="date"）。独自 UI は避ける。
ステップ分割の活用
長いアンケートは1画面に詰め込まず、複数ステップに分割。
メリット
- 1画面の情報量が減り、認知負荷が下がる
- 「あと○ステップ」のプログレス表示で完了率が上がる
- 入力済みの内容が「答えた感」として可視化される
デメリット
- ステップ間でデータ消失するリスク（バックエンドで保持を）
- ボタン押下回数が増える
設問数が 5問を超えるなら分割 を検討。
レポアンのモバイル最適化
レポアンのフォームは、デフォルトで 完全モバイル対応 です。
- すべての質問タイプがモバイル UI に自動切替
- マトリクスはモバイルでは項目ごとの縦並びに自動変換
- iOS の自動ズームを防ぐため、入力フィールドは 16px 以上
- タップ領域は 44px 以上で設計
- ステップ分割もスマホ向けにレイアウト最適化
特別な設定なしに、すべてのフォームがスマホで快適に使えます。
ロード時間の最適化
画像の軽量化
ヘッダー画像・ロゴは WebP 形式で、最大 100KB 以内が目安。
不要な装飾を削る
「サンキュー画面のアニメーション」「効果音」などはモバイルでは重い・鬱陶しい。
CDN の活用
画像・スクリプトは CDN 経由で配信。モバイル回線でも速い。
レポアンは Cloudflare の CDN を使っており、グローバルで高速に動作します。
モバイル特有のアンケートデザイン
1スクリーン1設問
PC では複数設問を1画面に置くのが普通だが、モバイルでは 1スクリーン1設問 が読みやすい。
スワイプ操作
「左右スワイプで次の設問」のような UI も、設問が多いアンケートでは有効。
スクロール疲労を避ける
長すぎるアンケートは、スクロール途中で離脱される。1画面で見える範囲 に重要要素を配置。
モバイル離脱を防ぐ工夫
1. 所要時間を冒頭で明示
「3分で完了」とトップに書くだけで離脱率が下がる。
2. プログレスバー
「3/10 問」「30% 完了」を表示。ユーザーの認知負荷を下げる。
3. 自動保存
途中まで入力した内容を、バックエンドで保存。誤って画面を閉じても再開できる。
4. 通信エラー時の救済
通信失敗時に「再送信」ボタンを表示。ユーザーがやり直しやすくする。
チェックリスト
配信前にスマホで確認：
- iPhone（Safari）で表示・入力が正常
- Android（Chrome）で表示・入力が正常
- 各設問のタップ領域が 44px 以上
- 入力フィールドのフォントが 16px 以上
- マトリクスが縦並びで表示される
- プログレスバーが見える
- サンキューページもモバイル対応
まとめ
モバイル最適化のキー：
- タップ領域 44px 以上
- フォントサイズ 16px 以上
- マトリクスは縦並びに自動切替
- 長いアンケートはステップ分割
- 配信前にスマホで実機確認
レポアンは すべてのフォームがデフォルトでモバイル最適化 されています。特別な設定不要で、過半数のスマホ回答者を逃さない設計が標準です。