エンジニア志望の学生へ向け、モダンなアニメーションや高い表示パフォーマンスで自社の実装品質と技術文化を体現。
ヘッドレスCMSによる迅速な運用体制を整えつつ、ARIA属性やキーボード操作対応などのアクセシビリティを徹底し、誰もが等しく情報にアクセスできるサイトを実現しました。
当社の2027年度新卒採用サイトを制作いたしました。
サイトこちらエンジニアを目指す学生をメインターゲットに据え、当社の技術力と文化を「実装品質」で示すことを目標に設計しています。
運用面ではヘッドレスCMS(microCMS)を導入し、非エンジニアのメンバーでも直感的にコンテンツ更新ができる環境を構築することで、スピーディーな情報発信を可能にしました。
フロントエンドにおいては、モバイル環境でも瞬時にページが表示される高いパフォーマンスを追求し、ユーザーの離脱を防ぐとともにストレスのない閲覧体験を提供しています。また、スクロール連動のインタラクションやタイピングアニメーションなどの視覚的な仕掛けを随所に施し、モダンな技術を楽しむ当社の社風が伝わるような体験設計を行っています。
また、アクセシビリティにも注力しており、セマンティックHTMLによるページ構造の明確化、ARIA属性を用いたスクリーンリーダー対応、キーボードのみでの完全な操作対応、十分なコントラスト比の確保など、あらゆる環境のユーザーが等しく情報にアクセスできる包摂的な設計を行いました。
アクセシビリティに関する取り組み
- ・セマンティックHTML:
見出しタグ等を適切に使用し、ページ構造を明確化 - ・ハンバーガーメニューのフォーカス制御:
inert属性によりメニュー外コンテンツへの誤フォーカスを防止 - ・支援技術への対応:
aria-label,aria-expanded等のARIA属性を実装し、スクリーンリーダーに対応 - ・視認性の確保:
十分なコントラスト比を確保し、読みやすさを重視 - ・キーボード操作対応:
マウスを使わずに、キーボードだけでメニュー開閉や項目選択が可能 - ・パフォーマンス最適化:
loading="lazy"による画像遅延読み込みで、表示速度を向上