撮影・インタビューと複雑な応募フォームを一体で設計した採用サイト

採用候補者に、会社の役割や仕事の専門性だけでなく、働く人や職場の雰囲気を具体的に伝えることが求められました。そのため、社員インタビューと撮影をコンテンツの中心に置き、採用トップから会社、仕事、社員、新卒・キャリアの各情報へ自然につながる導線が必要でした。

応募フォームは、年月日や選択項目、注釈など要素が多く、PCでは2カラム、スマートフォンでは一列で扱いやすく表示する必要がありました。既存のフォームテンプレートや納品先の仕様に合わせつつ、入力制限、バリデーション、必要な説明を整理することが重要です。募集要項の表もスマートフォンで横幅が不足するため、読みやすさと操作方法を分かりやすくする必要がありました。

構成段階から、撮影で必要な仕事風景、人物、ポーズ、表情をページごとに整理し、撮影前の打ち合わせと香盤表へ落とし込みました。インタビュー内容は、社員ごとの魅力だけでなく、会社や仕事の説明を補完するよう編集し、写真と文章が同じメッセージを伝える配置にしています。撮影後のレタッチでは、サイトのトーンに合わせて彩度やコントラストを調整しました。

応募フォームと募集要項は、デザイン確定前に実装担当と項目・表示方法を確認。PCでの2カラムは関連項目をまとめ、スマートフォンでは入力順序が自然になるよう再配置しました。横幅のある表にはスクロール可能であることを示す案内を加えています。公開後に新卒、キャリア、点検員など採用区分が増えても、共通ナビゲーションとフォーム部品を再利用できる構成としました。

仕事の専門性と、働く人の親しみやすさを両立するため、実際の社員と現場を撮影し、説明的な写真と表情を伝える写真を使い分けました。撮影前にシーンとポーズを想定し、メインビジュアル、仕事紹介、インタビューで必要な構図を共有しています。写真には統一したニュアンスの加工を加え、ページをまたいでも採用サイトとして一貫した印象を保ちました。

フォームや募集要項は情報量が多いため、装飾よりも入力項目のまとまり、ラベル、注釈、余白を優先しています。PCの2カラムがスマートフォンで不自然な順序にならないよう、画面幅ごとの並びも設計しました。採用情報を見るボタンや新しい採用区分を追加しても、既存ページの視線誘導を妨げない位置と表現を選べるルールを整えています。

複数ページの中規模採用サイトとして、共通ナビゲーション、見出し、インタビュー、募集要項、フォームを部品化しました。アニメーションにはGSAPを採用し、従来のjQueryへ依存せず、表示開始やスクロールに合わせて写真とテキストを自然に見せています。デザインから受け取る画像は用途が分かる命名で整理し、リタッチ済み素材と元画像を混同しない運用にしました。

応募フォームでは、項目数の多い2カラム表示を実装し、スマートフォンでは入力順序とタップ領域を優先して一列へ切り替えました。年月日入力の制限、バリデーション、注釈、送信後の挙動などを納品先仕様と照合しています。横幅のある表はスクロール表示と案内を組み合わせ、内容を削らず閲覧可能にしました。公開後の新しい採用ボタンやフォーム追加にも、既存部品を利用して対応しています。