「PCで採用LPは綺麗に見える」のにスマホで開くと文字が小さい・ボタンが押しにくい・フォーム入力が大変——という採用LPは今でも珍しくありません。一方で候補者の多くは移動中・休憩時間にスマホで求人を探しています。Indeed・doda・engageなど主要求人媒体経由のアクセスは8〜9割がスマホです。採用LPのスマホ最適化が整っていないと、応募の入り口で離脱が起きます。この記事では中小企業の採用担当者向けに、モバイル前提の設計原則と具体的な改善ポイントを整理します。
- 採用LPでモバイル最適化が必要な理由
- スマホ閲覧で押さえる6つの設計要素
- タップターゲット・フォントサイズの基準
- フォーム入力の負荷を減らす設計
- スクロール深度と縦長設計の考え方
- 読み込み速度の改善
採用LPでモバイル最適化が必要な理由
現在の採用LPアクセスはスマホが圧倒的多数です。特に中途採用では「通勤電車」「昼休み」「就寝前」など、デスクから離れた場所でスマホから求人を探すケースが大半を占めます。スマホ前提の設計ができていないと、せっかく集めたアクセスを応募につなげられません。
| PC表示前提の場合 | スマホ最適化された場合 |
|---|---|
| スクロールしないと内容が見えない | ファーストビューで価値が伝わる |
| フォントが小さく読みにくい | スマホでも自然に読める文字サイズ |
| CTAボタンが小さく押しにくい | 指で確実にタップできるサイズ |
| フォーム入力に時間がかかる | 最小入力で応募完了できる |
| 読み込みが遅く離脱 | 3秒以内に表示完了 |
採用LP全体の構成・改善については採用LPの作り方｜応募率を上げる構成・設計・改善の全手順を参照してください。本記事はその中でもモバイル設計に絞って深堀りします。
押さえる6つの設計要素
採用LPのスマホ最適化で押さえる要素は6つです。1つだけ整えても効果は限定的で、全体として最適化することで応募率が改善します。
6要素を一貫して最適化することでスマホからの応募率が上がる
要素①：ファーストビュー
スマホの画面に最初に映る領域です。ここで「何の会社か」「どんなポジションか」「応募ボタン」の3点が伝わらないと、スクロール前に離脱されます。ファーストビューの整え方は中小企業の求人LPファーストビューを15分で整えるチェックリストを参照してください。
要素②：タップ操作のしやすさ
ボタン・リンクのサイズ・配置を指で確実に押せる形にします。Apple HIG（Human Interface Guidelines）では44×44px以上、GoogleのMaterial Designでは48×48dp以上が推奨です。
要素③：フォントサイズと行間
本文は16px以上、見出しは24px以上が標準です。行間は1.5〜1.8倍を確保することでスマホでも読みやすくなります。
要素④：フォーム入力の負荷
応募フォームの入力項目数・入力タイプ・スマホキーボードへの最適化が応募完了率に直結します。
要素⑤：スクロール設計
スマホは縦長スクロールが基本です。情報の優先順位を上から順に並べ、重要な情報がスクロールの早い段階で出てくるようにします。
要素⑥：読み込み速度
画像の圧縮・遅延読み込み・不要なJavaScriptの削減で、3秒以内の表示完了を目指します。3秒超過で離脱率が大幅に上がります。
タップターゲット・フォントの基準
タップターゲットのサイズ基準
指で確実に押せるサイズが基準です。小さすぎると押しにくく、誤タップの原因にもなります。
| 要素 | 最小サイズの基準 |
|---|---|
| 応募CTAボタン | 高さ48px以上・幅は画面横幅の80%以上が理想 |
| 通常のリンク | 44×44px以上を確保。リンク同士は8px以上の間隔 |
| アイコンボタン | 44×44px以上の領域を確保（アイコン自体は小さくてもOK） |
| フォーム入力欄 | 高さ44px以上・幅は画面横幅の90%以上 |
フォントサイズの基準
スマホは画面が小さいため、PC基準のフォントサイズだと読みにくくなります。ピンチアウト（拡大）をしないと読めないLPは離脱されます。
| 要素 | 推奨サイズ |
|---|---|
| 本文 | 16px以上（14pxは小さく感じる） |
| 小見出し（h3相当） | 18〜20px |
| セクション見出し（h2相当） | 22〜26px |
| メインタイトル（ファーストビュー） | 28〜36px |
| 行間（line-height） | 本文は1.6〜1.8倍・見出しは1.3〜1.5倍 |
固定追従CTAの活用
長いLPでは、画面下部にCTAボタンを固定表示する「フローティングCTA」が有効です。ユーザーがどこをスクロール中でも、いつでも応募ボタンにアクセスできます。ただしコンテンツを隠さないサイズ（高さ60〜70px程度）にとどめます。
💡 スマホ最適化済みの採用LPはHirePageで一括設計。レスポンシブ対応とCVR改善まで月額サブスクで支援します。
フォーム入力の負荷を減らす設計
採用LPの応募完了率を左右する最大の要素はフォーム設計です。スマホでの入力は物理キーボードより負荷が高く、項目数が多い・入力支援が弱いだけで離脱されます。応募フォームの離脱対策は応募フォームの離脱を減らす3つの見直しポイントと合わせて参照してください。
必須項目を最小化する
応募完了に必須の項目は3〜5項目に絞ります。一般的な最小構成は次の通りです。
- 氏名（フルネーム1欄に統合・姓名分割は任意）
- メールアドレス
- 電話番号
- 履歴書・職務経歴書のアップロード（任意か必須かは設計次第）
「現在の年収」「希望勤務地」「自己PR」などは応募後の連絡で確認できます。応募ハードルを下げる設計が初期の応募数を増やします。
スマホキーボードに合わせた入力タイプ
HTMLの`type`属性をフィールドごとに適切に設定することで、スマホで適切なキーボードが自動表示されます。
| 入力項目 | 推奨type属性 |
|---|---|
| メールアドレス | type="email"（@キー表示） |
| 電話番号 | type="tel"（数字キーパッド表示） |
| 郵便番号・数値 | inputmode="numeric" |
| 日付 | type="date"（カレンダーUI表示） |
自動入力（autocomplete）への対応
`autocomplete`属性を適切に設定することで、スマホの自動入力候補が機能し、入力時間が大幅に短縮されます。たとえばautocomplete="name"、autocomplete="email"、autocomplete="tel"を指定すると、過去入力履歴から候補が出てきます。
エラー時のリカバリ設計
入力エラーが発生した時、何が問題かが一目でわかる表示にします。「フォーム上部にまとめて表示」よりも「エラー項目の直下に赤色でメッセージ」のほうがスマホでは見つけやすいです。送信後のエラーで全項目が消えると、その時点で離脱されるため、入力値の保持も必須です。
応募後のサンクスページも設計する
応募完了後の体験設計もスマホ最適化の対象です。「ありがとうございました」だけで終わらせず、次の選考フローや問い合わせ先を明示します。詳しくは採用LPサンクスページの作り方｜応募完了後の体験を整える設計を参照してください。
スクロール深度と読み込み速度
スクロール深度の設計
スマホ画面はPCより1画面の情報量が少ないため、LP全体の縦長設計が必要です。重要な情報を上から順に並べ、スクロールの早い段階でCTAに到達できるようにします。
- 0〜1画面（ファーストビュー）：会社名・ポジション・応募ボタン
- 1〜3画面：主要な訴求（事業内容・募集背景・想定する人物像）
- 3〜5画面：具体的な業務内容・条件・社員紹介
- 5〜8画面：カルチャー・働き方・福利厚生
- 8画面以降：FAQ・選考フロー・応募フォーム
応募CTAは複数箇所に配置する
「ファーストビュー」「3画面目あたり」「最終CTA」の最低3箇所に配置します。スクロール深度ごとに「ここで応募したい」と思った時の動線を確保します。
読み込み速度の改善
Google PageSpeed Insightsで3秒以内・モバイルスコア80以上を目指します。改善の優先度が高い項目は次の通りです。
| 改善ポイント | 対応例 |
|---|---|
| 画像の最適化 | WebP形式への変換・適切なサイズへリサイズ・遅延読み込み（lazy load） |
| 不要なJavaScriptの削減 | 使っていないトラッキングタグ・ライブラリの整理 |
| サーバー応答速度 | ホスティングプランの見直し・CDNの活用 |
| フォントの読み込み | Webフォントの使いすぎを避け、システムフォント中心の設計 |
CVRを継続的に計測する
モバイル最適化の効果は「スマホ経由のCVR」で確認します。PC経由とスマホ経由を分けて計測すると、改善ポイントが明確になります。CVR計測の詳細は採用LPの応募転換率を計測する｜CVRの計算と改善チェックリストを参照してください。
🔧 スマホ最適化の継続改善とCVR分析はLoopOpsへ。データに基づくモバイル改善サイクルを構築します。
よくある質問
Q. レスポンシブデザインにしておけばスマホ最適化は十分ですか？
レスポンシブ対応は最低限の前提で、それだけでは不十分です。レスポンシブはPCのデザインをスマホ画面に縮小表示する仕組みであり、必ずしもスマホで最適な体験になるとは限りません。タップターゲットのサイズ・フォントサイズ・フォーム入力の最適化など、スマホ特有の設計要素を追加で整える必要があります。「PCで作ったものをスマホでも見られるようにする」発想から「スマホファーストで作ったものをPCでも見られるようにする」発想への転換が重要です。
Q. 既存の採用LPをモバイル最適化する場合、どこから着手すべきですか？
優先順位の高い順に3つ着手します。1つ目は「フォーム入力の最小化と入力タイプ最適化」（応募完了率に直結）、2つ目は「タップターゲットとフォントサイズの調整」（読みやすさ・操作性に直結）、3つ目は「読み込み速度の改善」（離脱率に直結）です。すべてを同時に完璧にする必要はなく、1つずつ改善してCVRの変化を確認しながら進めるのが現実的です。改善前後の数値比較で効果が見えると、社内承認も得やすくなります。
Q. 写真や動画を多く使うとスマホで読み込みが遅くなりますか？
適切な最適化をすれば問題ありません。画像はWebP形式に変換し、適切なサイズにリサイズ（横幅は最大1200px程度）、遅延読み込み（loading=”lazy”）を設定します。動画は自動再生せず再生ボタンで起動する形式にし、可能ならYouTube・Vimeo等の埋め込みで負荷を分散します。視覚的なリッチさはスマホでも採用LPの魅力に直結するため、最適化と両立する設計を目指します。LPビジュアル全般は写真素材だけで印象が変わる採用LPビジュアルの作り方を参照してください。
採用LPのモバイル最適化についてご相談がある方は、まずは下からご連絡ください。
