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