WORKS
WEB
ポートフォリオサイトリニューアル

自身の制作実績およびスキルセットを公開するための、基盤となるポートフォリオサイトです。
Webエンジニアリングと映像制作、グラフィックデザインの3領域を横断する活動を統合し、機能性と独自の視覚表現を両立させたプラットフォームとして構築しました。
WEBサイト制作においては非公開実績が多いためぜひ直接お問い合わせください!
技術スタック
- Design: Ai / Ae / Figma
- Build: Vite / ESModules
- Styling: Tailwind CSS
- Animation: GSAP / Lottie
- Back-end: WordPress (Custom Theme)
制作の意図と実装内容
lottieアニメーションを活用したデザイン
イラストの作成からデザインを行いAfter Effect(Bodymovin)でのアニメーション作成を前提としてフラットデザインをベースにデザインしました。カラーはビビットカラーを取り入れインパクトの強いデザインにまとめました。
Viteによる高速な開発環境とビルドプロセスの構築
WordPressテーマ制作にモダンなビルドツール「Vite」を導入。開発時のホットリロードによる効率化と、本番公開時のアセット最適化(Minify、ハッシュ付与)を行い、サイトの表示速度とメンテナンス性を高めています。
GSAPを用いたマイクロインタラクションの実装
After Effectでオリジナルのlottieアニメーションを作成し、加えてGSAPを連動させることで、よりインタラクティブなsvgアニメーションを実装しました。
「何を、どのように作るか」というプロセスそのものを実績として提示することで、クリエイティブとエンジニアリングの両面から、プロジェクトに対する姿勢を表現しています。