採用サイト（6ページ・アニメーション・応募フォーム付き）のデモ「ソラハコ物流 採用サイト」
ドライバー・倉庫スタッフを募集する物流会社を想定した、6ページの採用サイト。仕事内容・社員インタビュー・福利厚生・募集要項・エントリーまで、応募を後押しする導線で組み立てました。
レスポンシブ表示
PC（1440px）
タブレット（820px）
スマートフォン（390px）
このデモで目指したこと
- 「未経験でも大丈夫そう」と思える情報（研修・免許支援・1日の流れ）を先に見せる
- 職種ごとの違いと給与のイメージが、比べながら分かる
- スマートフォンで、どのページからでも迷わずエントリーできる
- Googleしごと検索に載るための求人の構造化データ（JobPosting）
ページ構成（6ページ）
- トップ →せり上がる見出し・配送ルートの線描・数字のカウントアップ・職種とインタビューへの入口
- 仕事を知る →3職種の仕事内容・向いている人・スクロールで伸びる1日の流れ・給与のモデル
- 社員インタビュー →未経験で入社した3人の一問一答。写真はスクロールに追従
- 働く環境・福利厚生 →数字で見る6項目・免許取得支援の5ステップ・研修・福利厚生8項目
- 募集要項 →キーボードでも操作できる職種タブ・選考の流れ・求人の構造化データ（JobPosting）
- エントリー →職種→基本情報→確認の3ステップフォーム（入力チェック・進捗表示）・よくある質問
制作のポイント
動きで、読み進めたくなる
見出しのせり上がり、配送ルートを描く線、数字のカウントアップ、スクロールに合わせて伸びる「1日の流れ」。動きはすべて transform と opacity だけで作り、表示速度を落としません。視差効果を減らす設定の端末では、すべて止まります。
応募までの距離を短く
スマートフォンでは、ヒーローを過ぎると画面下に「エントリーする」ボタンが現れ、ページ末尾の応募案内が見えると引っ込みます。フォームは3ステップに分け、必須項目の入力チェックと確認画面をつけました。
求人検索に強い作り
募集要項には、職種・給与・勤務地・雇用形態を持つ JobPosting の構造化データを3職種分。ページごとのタイトル・説明文・パンくずも、検索されやすい言葉で組んでいます。
誰にでも使えること
オレンジと白の組み合わせは、白い文字が載る場所だけ濃いオレンジにしてコントラスト基準を満たしています。タブは矢印キーで切り替えでき、フォームのエラーは読み上げにも伝わります。