Project Detail
( 05 )
mesel7 Dev Portfolio
以前の React SPA・Firebase ベースで構築していた個人ポートフォリオを、Next.js・TypeScript・Tailwind CSS を用いて全面的にリニューアルしたプロジェクトです。 全体の構造を見直し、UI/UX を再整理することで、プロジェクト・経験・技術スタックをより直感的かつ一貫性のある形で伝えられるように改善しました。
本プロジェクトの主要機能・構造・スクリーンショット等はGitHubにてご確認いただけます。また、プロジェクトリンクから実際のサービスを体験することも可能です。
本ページでは、開発の背景、課題解決の過程、学んだ点を中心にまとめています。
Motive
初期の React ベースのポートフォリオは構造的な制約や拡張性の不足があったため、今後のプロジェクトや技術スタックをより専門的に提示できるよう、全面的なリニューアルを企画しました。 レイアウト構造を基盤に、カラーパレット、インタラクション、コンポーネント構成を自ら再設計し、独自のデザインテイストとブランド性を反映させました。
Problem Solving
従来の React SPA 構造を Next.js App Router ベースにマイグレーションすることで、ルーティング構造、SEO、パフォーマンスを大幅に改善しました。 JavaScript で実装していたコードを TypeScript へ移行し、型安全性と保守性を強化しました。また、CSS ベースのスタイリングを Tailwind CSS に再構成し、スタイルの一貫性と管理性を向上させました。 静的データは JSON ファイルとして管理し、バックエンド呼び出しなしで高速にレンダリングできる構成としました。さらに、国際化 (i18n) を実現するため、言語別リソースを ko.json・ja.json に分離し、保守性と拡張性を確保しました。 レスポンシブ対応では、モバイル・PC 専用レイアウトを適切に分けることで自然な画面遷移を実現し、UI はシンプルなホワイトベースのレイアウトにネオン・グラデーションのアクセントを施し、情報性と独自性のバランスを取りました。
Learned
Next.js・TypeScript を基盤とした再構築を通じて、技術選定と構造設計の重要性を改めて実感しました。 i18n の導入、Tailwind CSS によるスタイルシステム構築、型を意識したコンポーネント設計など、実サービスに近い構造的な課題に向き合う経験を得ました。 また、単なる機能実装に留まらず、UI、ブランディング、可読性まで含めた総合的な完成度がポートフォリオの価値を大きく高めることを学び、開発者としてのアイデンティティを視覚的に表現する貴重な経験となりました。