架空の採用特設サイト
目的
デザインカンプをもとに、架空の採用特設サイトを制作しました。スクロール連動やレスポンシブ対応など、挙動や設計面を意識して実装しています。
工夫した点
SPではSwiperを自動スライド、PCではナビゲーションボタンによる操作に切り替え、デバイス特性に応じた操作性を意識しました。 また、リンクタブはSPで横スクロール可能にし、無理に縮小せず視認性を保ちながら操作できる設計としています。
さらに、ハンバーガーメニューにはaria-labelを付与し、視覚的なアイコンのみのボタンでもスクリーンリーダー利用者に意図が伝わるよう配慮しました。
技術面
- ・Swiperによるスライダー実装
- ・IntersectionObserverを用いて、スクロール位置に応じて現在のセクションを示す機能を実装
- ・jQueryを用いたフォームバリデーション制御
- ・WordPressによる動的コンテンツ管理
架空の採用特設サイト: https://xs577117.xsrv.jp/tetote/
サイト閲覧用のIDとPasswordです。
下記を入力してください。