PROJECT 04PORTFOLIO / PERSONAL PROJECT

NobLAB.LAB.

SCENE 01

THE BRIEF

コーダー／フロントエンド実装者としての制作実績や技術を伝えるために、自身のポートフォリオサイトを企画・デザイン・実装しました。

作品情報を掲載するだけではなく、スクロールやページ遷移、タイポグラフィなどのインタラクションそのものから、フロントエンド実装の考え方が伝わるサイトを目指しています。

SCENE 02

MOTIONWITHPURPOSE.

動きを追加すること自体を目的にせず、視線誘導や情報の切り替わりを補助するためのモーションとして設計しました。

Astroをページ構造の基盤とし、TypeScriptにインタラクションの制御を分離。ページ遷移後の再初期化やレスポンシブ時のモーションまで含め、サイト全体で一貫して動作する構成を意識しています。

SCENE 03

01
Architecture
Astroをページ構造の基盤とし、UI・スタイル・インタラクション・Worksデータの責務を分離。作品ページはDynamic Routesとデータ駆動で構築しています。
02
Motion
GSAPとScrollTriggerを用いてスクロール演出やページ内モーションを実装。Astroのページ遷移にも対応し、遷移後の再初期化やクリーンアップまで制御しています。
03
Responsive
レイアウトだけでなく、タイトルの改行、動画ソース、モーションの挙動まで画面幅に応じて調整し、デバイスごとの体験を設計しています。
04
Accessibility & SEO
セマンティックなHTMLやアクセシビリティを意識しながら、OGP、canonical、sitemap、robots.txt、Google Search Consoleなど公開後の検索環境まで整備しています。