Sota Nakano

このポートフォリオサイトは、約１ヵ月をかけて現役デザイナーの方と共同開発したサイトとなっています。デバック時は都度コミュニケーションを取りながら、レイアウトやアニメーションなど1px単位でこだわり作成しました。 また、UXだけでなく、コードの可読性・保守性・拡張性を重視して設計しました。スタイル設計にはSCSSを採用し、コンポーネント単位でファイルを分割することで、予測可能でスケーラブルな構造を実現しています。レスポンシブ対応では、CSSのclamp()を応用した独自のfluid-clamp()関数をSCSSで定義し、メディアクエリによるコード量の増加を防ぎつつ、画面幅に応じて要素のサイズが線形的かつ滑らかに変化する仕組みを構築しました。加えて、@mixinや@extendを活用して共通レイアウトを抽象化し、コードの重複を排除することでDRY原則を徹底しています。アニメーション制御にはJavaScriptを用い、Promiseやasync/awaitによる非同期処理を導入することで、複数のアニメーションを順序どおりに再生し、競合を防止しました。こうした実装を通して、フロントエンド開発で求められる設計の考え方や実装の基本を意識して取り組みました。