ポートフォリオ
本サイトは、コーダー・フロントエンドエンジニアとしてのスキルやこれまでの制作実績をまとめた個人のポートフォリオサイトです。
今後の継続的な作品追加を想定し、WordPressのオリジナルテーマとしてゼロから構築しました。管理画面から直感的に作品の追加・編集を行えるよう、運用面を考慮した設計にしています。
- POINT
-
・GSAPを活用した滑らかなスクロールアニメーション
GSAPとScrollTriggerを用いて、スクロールに連動した心地よいアニメーションを実装しました。背景の一部にはThree.jsによる描画をアクセントとして取り入れ、シンプルながらも視線を惹きつけるリッチな表現を目指しました。
・スクロール連動によるコンテンツ表示
トップページの作品紹介エリアでは、ScrollTriggerのPin（固定）機能を活用しています。スクロール操作だけで次々と作品が切り替わるUIを実装し、ユーザーがスムーズに実績を閲覧できる心地よい体験にこだわりました。
・細部までデザインを調和させたUI設計
詳細ページの作品画像エリアにはカスタムスクロールバーを実装し、ブラウザ標準のデザインではなく、サイトの雰囲気に馴染むよう細部まで調整しています。また、横長の作品は横スクロールで対応するなど、快適に作品を閲覧できる設計を心掛けました。
・カスタム投稿とACFを駆使した「運用しやすい」CMS設計
更新作業の負担を減らすため、カスタム投稿タイプとACF（Advanced Custom Fields）を活用しています。トップページでの表示切替や一覧ページでの表示順、スキルタグ（カスタムタクソノミー）による絞り込み機能など、管理画面から柔軟に作品を管理できる仕組みを構築しました。 - ページ数
- 5 ページ
- 使用技術
- WordPress / GSAP / Three.js / JavaScript / HTML/CSS
- デザイン
- Figmaページ（閲覧のみ可能です）