No.012 / Websites / 2025
Portfolio Site
プロダクト群と開発スタイルを遊び心でまとめた公式ポートフォリオ
Project facts
- Role
- Designer / Full-stack Engineer
- Deliverable
- ポートフォリオサイト
- Industry
- ポートフォリオ・実績管理
- Capability
- 情報設計 / UI設計 / フロントエンド開発 / 開発環境整備 / パフォーマンス最適化
- Technology
- Next.js / TypeScript / React / Next Image / Tailwind CSS
- Audience
- 制作実績と技術背景を確認する採用・協業担当者 / プロダクトや受託事例を横断して探す閲覧者
課題
モーションを多用した一覧でも、WorkとTimelineから同じ詳細へ迷わず移動でき、マウス、キーボード、タッチのいずれでも操作結果を決定的にする必要があった。
解決策
実績データを型付きの単一ソースへ集約し、分類、フォーカス、ジェスチャー判定を純粋関数として分離。詳細シート、画像マニフェスト、静的出力時のデータ・アセット検証まで整備した。
主要機能・工夫
- 複数軸の実績分類
Category、Year、Role、Valueの観点で同じ実績を整理して表示する。
- 入力方式をまたぐフォルダUI
マウス、キーボード、タッチから同じ詳細へ移動できるようにする。
- 同一ページの詳細シート
概要、ギャラリー、技術背景、リンクを一つの詳細体験へまとめる。
- ビルド時の整合性検証
参照ID、画像、分類の欠落や重複を静的出力前に検出する。
成果・変化
- 実績と技術背景を横断できるUIを構築
異なる分類から同じ詳細へ一貫して移動できるようにした。
- 静的公開物の整合性を自動検証
データ参照と配布アセットの問題をビルド前に検出できる形にした。
概要
Work Archives でアプリ、Webサイト、システム・ツールを4つの観点から整理。フォルダ操作と同一ページの詳細シートを組み合わせ、マウス・キーボード・タッチのどの操作でもプロジェクトを素早く確認できる構成にしました。
課題と設計
フォルダの重なりとモーションを保ちながら操作結果を決定的にするため、表示データをreadonlyの単一ソースへ集約し、インデックス計算とジェスチャー判定を純粋関数として分離した。
主な機能
- Category / Year / Role / Value の4軸で並べ替え
- ホバー、扇状展開、ドットスクラブ、スワイプに対応したフォルダUI
- 同一ページの詳細シートにギャラリー/技術背景/CTAを集約
- 画像ディレクトリから型付きギャラリーマニフェストを生成
成果
- 9件の実績を4つの観点で欠落・重複なく分類
- マウス/キーボード/タッチで同一の二段階選択を実現
- 静的出力時にデータ参照と配布アセットを厳格検証
制約・前提
- モーション多めでも操作決定性を維持
- モバイルのLCP/画像読み込み体験
- console.* に依存しないデバッグ
技術的なポイント
- Project/Timeline/ProfileをreadonlyのTypeScriptデータとして一元化し、参照IDをビルド時に検証
- Archiveの各グループを述語関数で定義し、全プロジェクトが各表示で一度だけ割り当てられることを検証
- Folderのフォーカス、スクラブ、スワイプ、transform計算を副作用から分離し、同じ入力から同じ表示を生成
- ギャラリーは実ファイルから型付きマニフェストを生成し、重複画像・空ファイル・生成差分をビルド前に検出
- 詳細シートにフォーカス制御、Escape、明示的な閉じる操作、背景スクロール抑止を実装
- Next.jsのstatic exportとしてlint、型検査、データ/アセット検証、本番ビルドを一括実行可能に構成