05 / LEVEL 02
JUNKBRANDING
Recruitment
スクールの学習用デモ作品です。実在の受注実績を表すものではありません。
仕事と組織を知り、応募を検討する採用サイト。
作品情報
- 想定業種
- Recruitment
- 技術スタック
- HTML / CSS / JavaScript / JSON
- デザインコンセプト
- 青い背景と大きな見出しで職種を案内し、仕事内容や働く環境を写真と具体的な説明で紹介する採用サイト。
- アニメーション
- スクロール時の表示と一覧の切り替え。動きを減らす設定に対応。
主な実装機能
- 12職種を職種・勤務地・キーワードで検索
- 社員6人のインタビューと関連職種へのリンク
- 募集詳細から職種を引き継ぐ応募デモ
- 入力エラーの案内と送信しない完了画面
学習できる内容
- 仕事内容・働く環境・募集要項・応募方法を整理し、応募者が必要な条件を比較できる採用サイトを設計する。
- 職種・勤務地・雇用形態などをJSONの項目として定義し、データから募集一覧と詳細を表示する。
- 募集条件の絞り込みを実装し、該当する求人がない状態と条件を解除する操作も用意する。
- 募集終了や情報変更を想定し、表示処理と求人データを分けて、更新箇所を限定できる構造にする。
- 必須項目・未入力時の表示・更新担当者の手順を整理し、将来CMSへ移す際に必要な項目と運用を説明する。
ソースコードについて
HTML・CSS・JavaScript・JSONで構成した採用サイトの学習用デモです。求人・社員・企業情報は架空の設定で、写真には生成素材を使用しています。
ポートフォリオ制作のポイント
- 求人と社員情報をJSONで管理し、一覧・詳細に共通利用する構成
- 検索条件をURLに残し、再読み込み後も復元する実装
- 応募デモの入力検証とキーボード操作
仕事から募集を探す
仕事内容、担当プロダクト、勤務地、応募条件を募集ごとに掲載。キーワード検索と職種・勤務地の絞り込みを組み合わせられます。
社員紹介から仕事を知る
6人のインタビューに、一日の流れや使用ツール、関連する募集へのリンクを掲載しています。
デモで試せる範囲
募集の検索・絞り込みから詳細の閲覧、応募フォームの入力確認までを試せます。実在企業の求人ではなく、フォームから応募情報は送信されません。
この制作例から学ぶ
デモを操作した後は、使われている技術と課題のつながりを確認できます。