採用サイトを制作するとき「どんなページを、どんな順番で並べればいいのか」と悩む担当者は多いです。コンテンツの中身が良くても、ページの構成や導線が悪いと求職者はすぐに離脱してしまいます。この記事では、採用サイトのページ構成と情報設計の考え方を、求職者の閲覧行動に沿って解説します。スマートフォン・PCそれぞれの設計上の注意点も含めて紹介するので、制作前の整理にぜひ役立ててください。
採用サイトの情報設計の基本的な考え方
採用サイトの情報設計で最初に意識すべきことは「求職者がどの順番で情報を求めているか」です。闇雲にコンテンツを並べると、求職者は欲しい情報にたどり着けず途中で離脱してしまいます。
求職者の閲覧行動を大きな流れで見ると、おおよそ以下のような順番になります。
- STEP1会社への興味・共感：この会社は何をしている会社か、自分の価値観と合うか
- STEP2仕事・職場への理解：実際に何をする仕事か、どんな人が働いているか
- STEP3条件・待遇の確認：給与・勤務形態・福利厚生など自分の生活に関わる条件
- STEP4応募への決断：選考フローを確認してエントリーフォームへ
この流れに沿って情報を配置することが、離脱を防ぎ応募率を高める採用サイトの情報設計の根本です。「伝えたい情報を全部並べる」ではなく「求職者が欲しい順番に届ける」という発想の転換が大切です。
採用サイトを見るのは求職者だけではない
情報設計を考えるうえでもう一点押さえておきたいのが、採用サイトの読者層の広さです。新卒・中途の求職者がメインターゲットですが、実際には転職エージェント・取引先・社員の家族・退職者・投資家なども閲覧することがあります。
こうした多様な読者層を意識した構成にすることで、採用サイトが企業の価値を伝えるメディアとしても機能するようになります。特に上場企業やブランド認知度の高い会社では、採用サイトが多くの目に触れる機会があることを念頭においてください。
採用サイトの4ブロック構成
採用サイトのページ構成は、採用トップページを起点として下層ページを大きく4つのブロックに分けるのがベストです。以下にそれぞれの役割とポイントを解説します。
ブロック1：自社訴求（会社・ビジョン・事業を知る）
採用サイトの入り口となる最初のブロックです。「この会社は何者か」「どこに向かっている会社か」を伝えることを目的としています。
含めるべき主なコンテンツ
- ミッション・ビジョン・バリュー（MVV）
- 採用コンセプト・求める人物像
- 代表メッセージ
- 事業内容・サービス内容・実績
- 会社概要
- 数字で見る会社
設計のポイント
- 過去・現在・未来の企業の方向性を明確にする
- 業界内での立ち位置を具体的に示す
- 一般的に知られていない業界・職種は特に丁寧に説明する
- 他社競合との差別化・優位性が出やすいブロック
このブロックは他社との差別化・優位性を発揮しやすい場所でもあります。競合の採用サイトを事前に調査しておくと、打ち出し方や表現の方向性を決めやすくなります。また、ニッチな業界や専門性の高い事業を持つ会社では「どこで・何を・どのように・結果どうなるか」まで具体的に伝えることが入社後のギャップ防止にもつながります。
ブロック2：インタビュー系（人を知る）
実際に働く社員の声を届けるブロックです。いまの採用サイトのトレンドは「人にフォーカスしたサイト」であり、このブロックは閲覧数・閲覧率が高いコンテンツの一つです。
含めるべき主なコンテンツ
- 社員インタビュー
- クロストーク・座談会
- スペシャルトーク（テーマ設定型）
- 1日の過ごし方
- 新卒インタビュー
- 中途入社社員の声
設計のポイント
- 年次・職種・バックグラウンドに多様性を持たせる
- テーマ性・企画性を持たせると差別化になる
- 見出し・本文・画像の配置を丁寧に設計する
- スマホでも読みやすい縦スクロールを意識する
ただのインタビューを掲載するだけでも一定の効果はありますが、最近ではテーマ性の強い企画型インタビューを設けている採用サイトも増えています。工夫やテーマ性を持たせることで他社との差別化になり、閲覧者の印象に残りやすくなります。
インタビューページの構成は主に「見出し・本文・画像」の3要素ですが、それぞれの大きさや配置・スマートフォンでの見せ方まで検討することが重要です。人物の写真があるかどうかで信頼感と安心感が大きく変わるため、人物写真の掲載は強く推奨します。
ブロック3：仕事・将来性（仕事内容と条件を知る）
具体的な仕事内容・募集要項・待遇・キャリアパスなど、応募判断に直結する実務的な情報をまとめるブロックです。新卒・中途ともに重要であり、コンテンツの詳しさが応募率に直結します。
含めるべき主なコンテンツ
- 職種別の仕事内容・具体的説明
- 募集要項（給与・勤務地・休日など）
- 福利厚生（独立したコンテンツとして）
- 研修制度・オンボーディング
- キャリアパス・なれる将来像
- プロジェクト・実績事例（社員目線）
- FAQ・よくある質問
設計のポイント
- 楽しそうな雰囲気だけでなく実態に即した情報を出す
- 福利厚生はコンテンツとして独立させると効果的
- 未経験可の場合は研修内容・期間・給与まで明記
- キャリアはマネジメント系・スペシャリスト系など方向性を示す
- 実績事例は社員目線で語ることで仕事イメージが膨らむ
よくある落とし穴として「楽しそう・やりがいありそう」という雰囲気だけを前面に出すページがありますが、実態との乖離が入社後のギャップを生み、早期退職につながるリスクがあります。ある程度詳しい実務内容を掲載することが、長期的な採用の質向上にもつながります。
また、コーポレートサイト側に実績・事例を掲載している企業も多いですが、それは企業・取引先目線の実績であることがほとんどです。採用サイトでは社員がプロジェクトを通じて苦労した点・工夫した点・進め方で気を付けた点など、社員目線の視点で語り直すことで求職者の仕事イメージが膨らみます。
ブロック4：エントリー系（応募・選考を知る）
応募フォーム・選考フロー・スケジュールなど、実際のアクションに直結するコンテンツをまとめるブロックです。求職者がここまでたどり着いたときに、スムーズに応募できる動線を作ることが最大のミッションです。
含めるべき主なコンテンツ
- 応募エントリーフォーム（新卒・中途は分ける）
- インターン応募フォーム
- アルムナイ（退職者）採用フォーム
- リファラル（社員紹介）採用フォーム
- 選考フロー・スケジュール
- 説明会・カジュアル面談の案内
設計のポイント
- 新卒と中途のフォームは分けるのが望ましい
- 外部の採用管理システム（ATS）との連携も検討する
- フォームの入力項目は必要最低限にする
- スマホでの入力のしやすさを必ず確認する
近年ではアルムナイ採用（退職した社員の再採用）やリファラル採用（社員からの紹介採用）も活発になっており、フォームを4種類用意する企業も増えています。一方で、エントリーフォームを外部の採用管理システムと連携させるために、自社ドメイン内にフォームを持たないケースも増えています。インターンの応募も大手求人サイト経由が多いため、自社サイトにインターン用のフォームを持たない企業も珍しくありません。
番外編：採用ブログ
上記4ブロック以外で、余力があれば取り組みたいのが採用ブログです。直近行ったイベントのレポート・入社式の様子・動画コンテンツの掲載など、ブログならではの「動き」があるコンテンツ作りができます。うまく活用できれば集客力の向上にもつながりますが、更新が途絶えると逆効果になる点には要注意です。採用部署内で更新スキームをきちんと設計してから導入することをおすすめします。
スマートフォンでの設計上の注意点
採用サイトの閲覧はスマートフォンが主流です。Wi-Fiではなく4G・5Gでの閲覧も多く、ページの読み込み速度や操作感がそのまま印象に直結します。スマホファーストを大前提として設計することが今や必須です。
グローバルナビゲーションはハンバーガーメニューが基本
スマートフォンは横幅に制限があるため、メインメニュー（グローバルナビゲーション）はハンバーガーメニューを採用するケースがほとんどです。スマホに慣れた新卒世代であれば操作に問題はありませんが、中高年向けの採用サイトを制作する場合は一工夫必要なケースもあります。
実際に中高年向けサイトで「メニューが直接見えたほうが使いやすい」という声があり、一部の主要ページへの導線をメニューとして常時表示した経験があります。ターゲットのリテラシーや年齢層を考慮した設計が大切です。
スマートフォン設計の主な注意点
- 文字サイズは16px以上を基本とする：スタイリッシュに見せたいという理由で14px程度にしたいという要望を受けることがありますが、実際の端末で見ると読みにくい印象になります。字が小さいと読むのをやめてしまったり、内容が印象に残りにくくなるデメリットがあります
- ページ速度を最優先にする：ローディングアイコンが数秒表示されるサイトは避けてください。「これは何の時間？」と思われた時点で応募意欲が削がれる可能性があります。ページが表示されるまでに2〜3秒かかるような状態はNGです
- スクロール演出は慎重に：数スクロールを要する画像や背景、反応が鈍い横スクロールコンテンツは操作性を損ないます。紙芝居のように切り替わる演出も自己満足になっていないか、ユーザビリティの視点でチェックが必要です
- ハンバーガーメニュー以外の導線も用意する：グローバルナビ以外にも、各ページから次に知ってほしいページへのリンクを設けることで回遊性が上がります。関連ページへのバナーやテキストリンクを各ページ末尾に配置する設計が有効です
- 文字だけに頼らない：図やイメージ画像のほうが分かりやすい情報も多くあります。インフォグラフィックや図解を適切に取り入れることでページの理解度と閲覧継続率が上がります
スマートフォンで特に気をつけたいリンク設計
スマートフォンでは指でタップするため、ボタンやリンクの大きさと間隔にも注意が必要です。小さすぎるリンクや近接しすぎたボタンは誤タップを招きます。また、エントリーフォームへの導線となるCTAボタンは画面内に常に表示されるような固定配置（スティッキーCTA）の検討も有効です。
PCでの設計上の注意点
スマートフォンをメインに考えつつも、PCでの見せ方をないがしろにするのはNGです。転職エージェントが候補者に企業情報を共有するとき、取引先の担当者が閲覧するとき、社員が家族に職場を紹介するときなど、PCで採用サイトを閲覧するシーンは一定数あります。
PCならではの表現力を活かす
PCは画面幅がスマートフォンより大きく活用できるため、2カラムレイアウト・横並びのカード型コンテンツ・大きなビジュアルを使った表現など、より豊かなデザイン表現が可能です。採用サイトのブランドイメージを高める演出はPCで特に映えます。
PCで効果的な表現
- 2カラム・3カラムのカードレイアウト
- 横スクロールのスライダー（社員インタビュー一覧など）
- 大きなキービジュアルでの第一印象形成
- インタビューページの左右対称型レイアウト
- タイムライン型のキャリアパス紹介
PC設計の主な注意点
- 文字サイズは16px以上（スマホと同様）
- リンクが分かりにくい位置に置かない
- 同系色で見にくいリンクは避ける
- 重要コンテンツへの導線を画面の端に追いやらない
- ホバーエフェクトを活用してクリッカブルを明示する
リンク配置に特に注意する
PCは画面が広い分、あるテーマについて詳しく紹介するページへのリンクが分かりにくい位置にあると、そのままスクロールされてページが閉じられることがあります。せっかく労力をかけて作ったコンテンツが読まれずに終わることは大きな機会損失です。
- 分かりにくい位置のリンクは避ける：コンテンツの末尾や、直感的に分かる場所にリンクを配置する
- 離れた位置のリンクは避ける：関連コンテンツへのリンクは、そのコンテンツの近くに置く
- 同系色で見えにくいリンクは避ける：背景色とリンク色のコントラストを十分に確保する
デザインの方向性と挙動の考え方
ページ構成と情報設計が固まったら、デザインの方向性を定める必要があります。採用サイトのデザインは大きく2つのパターンがあります。
パターン1：企業カラーを踏襲する
企業ロゴと同様にカラーのレギュレーションがある場合は、このパターンが基本になります。ブランドの一貫性を保てる点が最大のメリットです。
| メリット | デメリット・注意点 | |
|---|---|---|
| 企業カラーを踏襲 | ブランド形成を助ける。一貫したブランディングができる | 企業カラーによっては採用サイトで伝えたいイメージと合わない場合がある。デザイナーとの綿密なすり合わせが必要 |
| カラー制約なし | 自由度が高く、ターゲットや訴求テーマに合わせた表現が可能 | ブランドの一貫性が損なわれる可能性がある。企業ロゴやシンボルとの整合性に注意が必要 |
例えば企業カラーが赤の場合、爽やかなイメージを基調とした採用サイトを作りたいときに赤をポイント使いに限定しなければならないケースがあります。逆にグリーン系の企業カラーで熱意や力強さを表現したい場合、ブランドカラーを損なう可能性もあります。このあたりはデザイナーとよくすり合わせをして、どの程度ならば許容範囲かを確認しながら進めることが重要です。
パターン2：カラー制約なし
企業カラーの制約がない場合は表現の自由度が大きく広がります。色・形・イラスト・漫画・動画・ナビゲーションなど幅広い選択肢があり、ターゲットユーザーの属性や採用戦略に合わせた制作が可能です。ただしブランドの一貫性を完全に無視することは避け、企業ロゴや代表的なシンボルを活用するなど方針を決めておくことで自由度とブランド性を両立できます。
サイトの挙動はシンプルを心がける
デザインの演出や挙動に関しては「シンプルで速いこと」が採用サイトでは特に重要です。以下の点に注意してください。
- ローディング画面は避ける：数秒のローディングアイコンは「これは何の時間？」と思われた時点で減点対象です。情報が多く存在する現代において、見たいときにすぐ見られることが基本的な配慮です
- 重いプログラム・複雑な演出は慎重に：Wi-Fiではなく4G回線での閲覧も想定して、複雑な挙動や重いプログラムは極力避けます。ページ表示に2〜3秒かかるようなサイトはNGです
- スクロール演出は自己満足になっていないか確認する：物々しいスクロール演出や紙芝居型の切り替わりは、斬新に見える一方でユーザビリティを損なう可能性があります。社内外から多くの意見を集めて判断しましょう
デザインは主観的すぎると外れる
デザインはデザイナーの技量とセンス以外に、企業・団体側の意向が強く反映されやすい要素の一つです。主観的すぎる判断は、特定のターゲットに深く刺さる一方で大きく外れる可能性もあります。「自分はこれが好き」ではなく「ターゲットはこれを好むか」という視点でデザインを評価することが大切です。今一度ターゲットの属性を振り返り、どのようなデザイン・演出・色・形で情報を届けるかを検討してください。
競合採用サイトの調査はデザイン設計前に済ませる
自社のデザイン方向性を決める前に、競合他社の採用サイトを調査しておくことを強くおすすめします。同じ業界・地域・職種で求職者を取り合うことになる以上、競合サイトと比べて自社がどう見えるかは重要な判断材料です。
競合調査では以下の点を確認・資料化しておくと制作で役立ちます。
- ページ構成・コンテンツの種類と量
- デザインの色・雰囲気・ビジュアルの使い方
- 導線・ナビゲーションの設計
- インタビュー・社員紹介の見せ方
- エントリーフォームへの誘導方法
競合サイトだけでなく、同業界で出来の良いとされる採用サイトをベンチマークとして調査する方法も有効です。良い点・改善できる点を整理して自社の制作に落とし込むのが定石です。
まとめ
採用サイトのページ構成・情報設計のポイントをまとめます。
- STEP1求職者の閲覧行動に沿った順番で情報を配置する：会社理解 → 仕事理解 → 人理解 → 条件確認 → 応募という流れを意識する
- STEP24ブロック構成を基本にする：自社訴求・インタビュー系・仕事と将来性・エントリー系の4つで下層ページを整理する
- STEP3スマホファーストで設計する：文字16px以上・ページ速度最優先・ハンバーガーメニューに加えた追加導線を設ける
- STEP4PCでも見やすいリンク設計をする：分かりにくい位置・同系色のリンクを避け、コンテンツの近くに次のページへの導線を置く
- STEP5デザイン前に競合調査を済ませる：競合との比較で自社の打ち出し方・差別化ポイントを明確にしてからデザインに着手する
情報設計とページ構成が固まったら、次は実際のコンテンツ制作・費用・制作期間の検討に進みます。以下の関連記事も合わせて参考にしてください。
採用サイト制作の関連記事
