Global Standard Recruitment Site

実案件を想定した実装チャレンジ。デザイン支給から実装を担当し、外部の技術審査で満点・優秀賞を獲得したコーポレート採用サイト。

Category: Corporate
Tech Stack: HTML5, CSS3, JavaScript, GSAP, Vite, Gulp, FLOCSS
Highlights: Frontend Architecture, Performance Optimization, Code Quality
Action: Visit Website

Project Outline

「挑戦が世界を変える」というコアメッセージを掲げる、グローバル企業の採用サイトを題材とした、実案件を想定した実装チャレンジです。デザインカンプが支給され、そこからの実装を担当しました（デザインは支給物であり、担当範囲は実装です）。

本プロジェクトでは、フロントエンドアーキテクチャの設計から実装までを一貫して担当しました。デザインカンプの意図を正確にブラウザ上に再現するだけでなく、長期的な運用や将来の拡張、チーム開発を見据えた堅牢なシステム基盤を構築しています。

細部までこだわったマークアップとロジカルなコンポーネント設計により、制作後の外部の技術審査において「デザイン再現度」「仕様」の全項目で最高評価（満点 100pt）を獲得。優秀賞を受賞し、プロフェッショナルな現場に求められる高い品質水準を実証しました。

🏆 Proof of Quality: Award-Winning Architecture
外部の技術審査において、デザインのピクセルパーフェクトな再現性、インタラクションの実装精度、および静的解析を含むコードの堅牢性が高く評価され、優秀賞を獲得しました。
Evaluation Feedback: 「見栄え、アニメーションともに十分な品質。仕様のチェック項目、デザインカンプの表現を十分に満たしており、指摘項目はなく満点です！」

Technical Specifications

Role

Frontend Architecture / Systems Architecture / Interaction Design

Tech Stack

Languages & Architecture: HTML5 CSS3 (Dart Sass) JavaScript (ES Modules) FLOCSS
Libraries: GSAP ScrollTrigger SplitText Splide.js
Development & Quality Assurance: Vite Gulp PostCSS ESLint Prettier Stylelint Markuplint

Engineering Highlights

01. Mathematical Layout Strategy

数理的アプローチによる流体レイアウト（Fluid Layout）設計

多様なデバイスサイズに対応するため、無数のブレークポイントを設ける従来の手法は、CSSの肥大化と保守コストの増大を招きます。本プロジェクトでは、src/assets/sass/global/function/_clamp-linear.scss に独自のSass関数 clamp-linear を定義しました。最小幅（390px）から最大幅（1440px）の範囲で、タイポグラフィや余白などのあらゆる数値を線形補間（Linear Interpolation）で計算。これにより、どのスクリーンサイズでもデザイン比率が数学的に維持される、拡張性と再現性に優れたレイアウト基盤を構築しています。

02. Interactive Performance & Logic

レンダリング負荷を最小化するインタラクション制御

採用サイトに求められるリッチな演出（GSAPを活用したパララックスやテキストアニメーション）を取り入れつつ、パフォーマンスの低下を防ぐ設計を行いました。具体的には、AppearOnScroll.js クラスを実装し、Intersection Observer API を活用。ユーザーの視界（ビューポート）に要素が入ったタイミングで的確にアニメーションを発火させ、見えない領域での不要なレンダリングを制御しています。美しいユーザー体験とデバイスへの低負荷を両立させるアプローチです。

03. Component-Based Architecture

保守性を見据えたモジュール指向の Vanilla JS 設計

将来的な改修や他のエンジニアの参画を想定し、特定のフレームワークに依存しない、Vanilla JSによるクラスベースのコンポーネント設計を採用しました。

DrawerMenuController.js: ドロワーの開閉状態とWAI-ARIA属性（アクセシビリティ）を連動して一元管理。
SmoothScrollManager.js: 固定ヘッダーの高さを動的に計算し、アクセシビリティを考慮したフォーカス制御を伴うスムーススクロール。

機能ごとに責務を明確に分離しカプセル化することで、依存関係の絡み合いを防ぎ、見通しが良くテストしやすいコードベースを実現しています。

04. Hybrid Build & Quality Assurance

ビルドプロセスの最適化と静的解析による堅牢な品質保証

静的アセット（画像やHTML）のルーティングに長けた Gulp と、JavaScriptモジュールの高速なバンドルを得意とする Vite を組み合わせた、独自のハイブリッドビルド環境を構築しました。

さらに、ESLint, Stylelint, Markuplint, Prettier などの静的解析ツールとフォーマッタを厳密に設定。構文エラーやコードスタイルの揺らぎをシステム的に検知・排除することで、属人性をなくし、チーム開発においても常に高品質なソースコードを担保するワークフローを導入しています。