採用強化サイト
IT・スタートアップ向け採用サイト。職種タブ・1日の流れ・エントリーフォームを一体化した構成。
【実装概要】
KV→採用ミッション→職種紹介→1日の流れ→社員紹介→福利厚生→募集要項→FAQの採用サイト定番構成。
オープニングはドット集合アニメーションを採用しています。また職種タブで絞り込み・タイムラインの▼流れ落ちアニメーション・エントリーフォームのバリデーションとボタン活性化制御を実装。
【実装キーワード】
パーティクルアニメーション／職種タブ切り替え／タイムライン▼アニメ／フォームバリデーション／ボタン活性制御／GTM計測／SP固定CTA／配色案A（ライトトーン）
対応できる案件
ドット集合アニメーション（Canvas）
→ Canvas APIを使ったパーティクルオープニングアニメーションを実装。ランダムに散らばったドットが画面全体から集まり、ロゴ・社名・キャッチコピーの形を形成してからFVに遷移します。
職種タブ切り替え
→ 職種カードをタブで切り替え表示。募集要項テーブルも同じタブで連動制御。
1日の流れ：▼流れ落ちアニメーション
→ タイムライン各アイテム間に▼が3つ縦に並び、上から順に色が変わって流れ落ちるアニメーションをCSSキーフレームで実装。arrowFlowアニメで各▼に遅延をかけた連続表示。
エントリーフォームバリデーション
→ 名前・フリガナ・メール・希望職種の必須4項目＋同意チェックが全て揃った時点で送信ボタンが活性化。Blur/リアルタイム各段階でエラー表示。メール形式チェックあり。
アコーディオン（募集要項・FAQ）
→ 長くなりがちな情報を整理して、必要な人だけ開いて読めるUIにしています。
固定エントリーCTAボタン（SP）
→ スマホで読んでいる間、常にエントリーボタンが見える状態をキープしています。
職種管理
CPT「採用職種」で職種ごとに投稿。タブの表示・非表示を管理画面からON/OFFで切り替え
社員紹介
CPT「社員」で顔写真・名前・入社年・コメントをフィールド管理。追加・削除が非エンジニアでも可能
募集要項
ACFリピーターで「項目名・内容」を自由に追加。ポジションが増えてもコード修正不要
エントリーフォーム
CF7で希望職種をチェックボックス形式で管理。メール振り分け・Slack通知設定も可能
採用状況
「募集中/応募停止」をACFのスイッチフィールドで管理。停止時はボタンをグレーアウトに自動変更