project detail
Demo Recruit Site
Overview
Figmaで提供されたデザインカンプをもとに、HTML / SCSS / JavaScriptでコーディングした架空の新卒採用サイトです。
ページ読み込み時にはローディング画面を実装し、コンテンツが表示される前の演出にこだわりました。jQueryのinviewプラグインを活用したスクロールアニメーションやprogressbarプラグインによるスキルバーの表現など、ユーザー体験を高めるインタラクションを複数実装しています。
コンタクトフォームは必須項目がすべて入力されるまで送信ボタンが非活性になるバリデーション処理を実装し、送信後はサンクスページへ遷移する設計としました。
Points
- FigmaのデザインカンプをSCSSで忠実に再現
- jQueryによるローディング画面でページ表示前の演出を実装
- inviewプラグインを活用したスクロール連動フェードアニメーション
- progressbarプラグインでスキルや数値をビジュアルで表現
- 必須項目未入力時は送信ボタンを非活性にするバリデーション処理
- 送信後サンクスページへ遷移するUXを設計
- ドロワーメニューでモバイルのナビゲーションをスムーズに
コンタクトフォームのバリデーション処理はユーザーの入力ミスによる送信エラーを防ぐために実装しました。必須項目がすべて入力されて初めて送信ボタンが活性化する設計で、ユーザーが迷わず操作できるフォーム体験を意識しています。
制作会社様の外部コーディングパートナーとして、
スポットの修正から継続的なコーディング業務まで対応しています。
案件概要・希望納期・デザインの有無など、分かる範囲だけでもご相談いただけます。通常24時間以内に返信します。