プロジェクト概要

エンジニア・ディレクターとしての技術力とデザイン感覚を体現するために制作した、セルフブランディング用のポートフォリオサイトです。

「Grid（格子）」をコンセプトに、構造的な美しさと動的な表現を両立させました。メインビジュアルでは、格子状に配置されたブロックが有機的に動き、訪れた人の目を引きつけます。技術スタックの選定から UI/UX デザイン、アニメーション実装まで、すべてを一貫して設計・開発しています。

技術選定とフロントエンド実装

なぜこの構成なのか

このサイトは、単なる技術のショーケースではありません。訪問者に心地よい体験を届けることを最優先に、最新のフレームワークとライブラリを組み合わせています。

フロントエンドには Nuxt 4 と Vue 3 を採用し、高速なページ遷移とSEO最適化を実現。スクロール体験には Lenis による滑らかな慣性スクロールと、GSAP による緻密なアニメーション制御を組み合わせ、「見ていて気持ちいい」と感じてもらえる動きを追求しました。

Three.js を用いた3D表現も部分的に取り入れ、視覚的なインパクトと技術的な深みを両立させています。

技術スタック

フロントエンド

• Nuxt 4 / Vue 3（最新フレームワークによる高速レンダリング）
• GSAP / Lenis（滑らかなスクロールと精密なアニメーション制御）
• Three.js（3D表現による視覚的インパクト）

品質管理

• ESLint / Markuplint（コード品質の自動チェック）

グローバル対応

• 多言語化対応（日本語・英語の完全サポート）
• テーマカラー切り替え（ライト / ダークモード）
• PWA 対応（オフライン閲覧とアプリライクな体験）

インフラ・運用

• AWS（S3 / CloudFront / Lambda による高速配信）
• Git（CI/CD パイプラインによる自動デプロイ）
• GA4 / GTM（データドリブンな改善サイクル）

デザイン

• Figma（デザインシステムの構築と管理）

効率的なコンテンツ運用の仕組み

ポートフォリオサイトで最も重要なのは、継続的な更新です。実績が増えるたびに手間がかかる仕組みでは、更新が滞ってしまいます。

そこで、マークダウンベースのコンテンツ管理システムを構築しました。新しい制作実績を追加する際は、マークダウンファイルを1つ作成するだけ。ルーティングは自動生成され、デザインも統一されたテンプレートが適用されます。

運用の特徴

• マークダウン + フロントマターによる一元管理 記事の内容とメタデータを1ファイルで完結。Git で履歴管理も可能
• テンプレート化された新規ページ作成 決まったフォーマットに沿って書くだけで、デザインが自動適用される
• 自動ルーティング ファイルを配置するだけでページが生成され、手動でのルーティング設定は不要

この仕組みにより、コンテンツの追加にかかる時間を短縮し、制作そのものに集中できる環境を実現しています。