codexに依頼する

このPDFをcodexに渡して、以下のデザインを変更してもらおう

データベース設計から見直す必要がある

それぞれのカテゴリーの詳細ページで表示させるべきデータは柔軟に変更できるようにしたい

チャッピーに相談するためのプロンプトをLMに作ってもらう

いきなりcodexだと心許ない（こころもとない）ので、チャッピーに相談しよう

codexに依頼する文章をチャッピーに作成してもらう

自分の認知の限界を超えないことを意識する

今の段階では 「全データをいきなりタイムラインに出す」より、「CSVごとに取り込み → 共通形式に変換 → 日付があるものだけ時系列表示 → 日付がないものは未整理データとして保持」 がよさそうです。

依頼文の修正

今回のデザイン案②は 「既存ページに機能追加」ではなく、「My Portfolioの設計思想そのものをタイムライン型に再定義する」 内容なので、既存デザインに引っ張られると中途半端になりそうです。

はい。
既存デザインをリセットする前提で、**デザイン案②の「軌跡を証明するUI」「現在地の可視化」「迷わないUX」「効率的な運用」**を反映した、Codexへの依頼文全体です。

そのまま貼って使えます。

これでかなり良いです。
特に今回は、「既存に追加」ではなく「思想から作り直す」 が明確に入っているので、Codexが中途半端に既存UIへ継ぎ足すリスクをかなり減らせます。

codexに送る依頼文

My Portfolioの「軌跡を証明する時系列ポートフォリオUI」を再設計・実装してください。

## 背景

私は、フリーランスリモートエンジニアとして活動するためのポートフォリオサイトを作っています。

このサイトの目的は、クライアントに対して「私に発注するかどうか」を判断してもらうための営業資料にすることです。

重要なのは、実績を盛ることではありません。
これまで積み上げてきた制作物・技術記事・職務経歴・学習記録を、ありのままのデータとして時系列で見せることです。

このポートフォリオは、単なる作品集ではなく、「軌跡を証明するUI」です。

訪問者が見たときに、

- この人はいつから何を積み上げてきたのか
- どの時期に何をしていたのか
- 制作物・職務経歴・技術ブログ・学習記録がどうつながっているのか
- 発注する判断材料として信頼できるか

を直感的に判断できる状態にしたいです。

## 今回の大方針

今回は、既存のデザインやページ構成に無理に合わせる必要はありません。

現在のMy Portfolioは、今回の「軌跡を証明する時系列ポートフォリオUI」へ再設計する前提で進めてください。

既存ページや既存デザインは、一度リセットして構いません。

ただし、以下は可能な限り保持してください。

- 既存のデータソース
- CSVファイル
- 既存のルーティングやデータ取得処理のうち、再利用できるもの
- ビルド設定
- デプロイ設定
- 環境変数
- package.json などのプロジェクト設定

一方で、以下は必要に応じて整理・削除・作り直して構いません。

- 既存のページレイアウト
- 既存のCSS
- 既存のコンポーネント構成
- 既存の一覧ページ
- 既存の詳細ページ
- 今回の設計思想に合わない装飾やUI

目的は、既存デザインの延長ではなく、デザイン案②にあるような「証拠」「記録」「軌跡」「現在地の可視化」を中心にしたUIへ作り直すことです。

既存ページを壊さないことよりも、以下を優先してください。

- 時系列で積み上げが伝わること
- 訪問者が迷わないこと
- 現在地が常に分かること
- CSVデータを共通の TimelineItem に正規化できること
- PCでは左タイムライン・右コンテンツになること
- スマホでは上タイムライン・下コンテンツになること
- クライアントが発注判断しやすいこと

ただし、リセットする場合でも、不要な破壊は避けてください。

作業前に既存構成を確認し、再利用できるものと作り直すものを切り分けてください。

## 絶対に外したくない設計思想

今回のUIで最も重要なのは、以下の3つです。

### 1. 圧倒的な時系列

軌跡そのものが最大の説得力になるようにしてください。

2017年から現在までの積み上げを、タイムラインとして表示します。

制作物・職務経歴・技術ブログ・学習記録をバラバラに見せるのではなく、同じ時系列上に並べることで、「自分が何を積み上げてきたか」を一目で伝えたいです。

### 2. 迷わないUX

訪問者が常に「今どの時点のデータを見ているのか」を把握できるUIにしてください。

タイムライン上の現在地をハイライトし、詳細ページを見ているときも、そのデータがタイムライン上のどの時点に属するのかが分かるようにしてください。

### 3. 効率的な運用

元データはCSV、将来的にはGoogleスプレッドシートで一元管理する想定です。

スプレッドシートで管理した未分類データを、制作物・職務経歴・技術ブログ・学習記録に分類し、Webサイト上では一覧ページや詳細ページへ展開できる構成を目指します。

管理の手間を最小化し、データを追加しやすい設計にしてください。

## 現状のデータソース

現在、元データは以下のCSVに分かれています。

- Euphoria.csv
- GitHub.csv
- paiza.csv
- Progate.csv
- エックスサーバー.csv
- クラウドワークス.csv
- 職務経歴.csv

まだ完全に統一されたデータベースではありません。

各CSVの項目や粒度はバラバラです。

そのため、今回の実装では、いきなり全CSVを直接UIに表示するのではなく、まずCSVごとに取り込み処理・変換処理を分けて、共通のタイムラインデータへ正規化できる土台を作ってください。

## 各CSVの扱い

### Euphoria.csv

主にブログ記事のURL一覧です。

列は以下です。

- カテゴリー
- URL

カテゴリーには、技術ブログ・制作物・職務経歴などが入っています。

ただし、日付やタイトルはCSV内には存在しないため、今回のMVPでは以下の扱いにしてください。

- category はCSVのカテゴリーから推定
- sourceUrl はURL
- title はURLスラッグから仮生成、または未設定
- date が取得できない場合は timeline には出さず、未整理データとして扱う
- isPublished は false
- needsReview は true

将来的にWordPress側からタイトル・投稿日・更新日を取得できるように拡張しやすくしてください。

### GitHub.csv

GitHubリポジトリの一覧です。

実質的には以下のような列構成です。

- リポジトリ名
- URL
- 説明
- 公開状態
- 実績フラグ

ただし、CSVのヘッダーが整っていない可能性があります。

読み込み時に列名を補完してください。

例：

- name
- repositoryUrl
- description
- visibility
- achievementFlag

GitHubデータは制作物候補として扱ってください。

- category：work
- title：リポジトリ名
- sourceUrl：GitHub URL
- summary：説明
- metadata：visibility、achievementFlag

ただし、日付がないため、date が未設定のものは timeline には出さず、未整理データとして保持してください。

実績フラグがある場合、実績フラグが付いているものだけ公開候補にしてください。

### paiza.csv

paizaの提出履歴です。

列は以下です。

- 提出日
- 問題
- ランク
- 言語
- 解答時間
- 結果
- スコア
- URL

このCSVは日付があるため、学習記録として時系列表示しやすいです。

以下のように変換してください。

- date：提出日
- year：提出日の年
- category：learning
- title：問題
- summary：ランク、言語、結果、スコアをまとめる
- sourceUrl：URL
- metadata：ランク、言語、解答時間、結果、スコア
- isPublished：true
- needsReview：false

paizaは今回のMVPで、タイムライン表示対象にしてください。

### Progate.csv

Progateの支払い履歴です。

先頭に空行が多く、途中から以下のヘッダーが出てきます。

- 支払日
- プラン
- 契約期間開始
- 契約期間終了
- 金額

CSV読み込み時に空行を無視し、最初に見つかった有効なヘッダー行から読み込んでください。

Progateは学習記録として扱ってください。

- date：支払日
- period：契約期間開始〜契約期間終了
- year：支払日の年
- category：learning
- title：Progate プラス契約
- summary：プランと契約期間
- metadata：プラン、契約期間開始、契約期間終了、金額

ただし、これは学習成果そのものではなく「学習投資の記録」に近いため、初期状態では以下にしてください。

- isPublished：false
- needsReview：true

開発用・確認用の一覧には出して構いませんが、公開タイムラインには出さないでください。

### エックスサーバー.csv

サーバー上の制作物・検証環境の一覧です。

列は以下です。

- 第一階層
- 第二階層
- 第三階層
- 公開URL
- アクセス制限のログイン情報
- CMS
- 関連ブログ記事
- 実績

注意点として、「アクセス制限のログイン情報」は絶対に画面に表示しないでください。

metadata に入れる場合も、公開用データからは除外してください。

このデータは制作物候補として扱ってください。

- category：work
- title：階層情報または公開URLから生成
- sourceUrl：公開URL
- summary：CMS、関連ブログ記事、実績フラグ
- metadata：階層情報、CMS、関連ブログ記事、実績フラグ

ただし、日付がないため、date が未設定のものは timeline には出さず、未整理データとして保持してください。

実績フラグが「◯」のものだけ公開候補にしてください。

### クラウドワークス.csv

クラウドワークスの契約・案件履歴です。

列は以下です。

- クライアント
- タイトル
- URL

これは職務経歴または制作実績の候補として扱ってください。

- category：career または work
- title：タイトル
- sourceUrl：URL
- summary：クライアント名
- metadata：クライアント、契約URL

ただし、日付がないため、今回のMVPでは timeline には出さず、未整理データとして保持してください。

将来的に契約日・納品日・作業期間を追加できる構造にしてください。

### 職務経歴.csv

職務経歴に関連する外部サービスや資料へのリンクメモです。

例：

- paiza
- エン転職
- ブログ
- Google Drive

このCSVは、そのままタイムライン表示するのではなく、職務経歴データを補完するための参照データとして扱ってください。

## 重要なデータ設計方針

今回の最重要ポイントは、CSVのデータを直接UIに表示することではありません。

以下の流れを作ることです。

1. CSVを読み込む
2. CSVごとの形式を解釈する
3. 共通の TimelineItem 形式に変換する
4. date があるものだけ時系列タイムラインに表示する
5. date がないものは未整理データとして保持する
6. isPublished と needsReview によって公開対象を制御する

## 共通データ構造

制作物・職務経歴・技術ブログ・学習記録を、共通のタイムラインデータとして扱えるようにしてください。

最低限、以下の型または構造を用意してください。

- id
- sourceType
- sourceFile
- date
- period
- year
- category
- title
- summary
- detail
- sourceUrl
- tags
- isPublished
- needsReview
- metadata

category は以下を想定しています。

- work：制作物
- career：職務経歴
- article：技術ブログ
- learning：学習記録
- raw：未整理

sourceType は以下を想定しています。

- euphoria
- github
- paiza
- progate
- xserver
- crowdworks
- career

metadata は、カテゴリーごとの拡張項目を持たせるための自由項目です。

ただし、公開してはいけない情報は metadata に含める場合でも、UIには表示しないでください。

特に、エックスサーバー.csv の「アクセス制限のログイン情報」は公開画面に出さないでください。

## データ変換レイヤー

CSVごとに変換関数を分けてください。

例：

- normalizeEuphoriaRows()
- normalizeGitHubRows()
- normalizePaizaRows()
- normalizeProgateRows()
- normalizeXserverRows()
- normalizeCrowdWorksRows()
- normalizeCareerRows()

それぞれのCSVを読み込んだあと、共通の TimelineItem[] に変換してください。

また、以下のように分類できるようにしてください。

- publishedItems：公開対象
- timelineItems：date があり、時系列表示できるもの
- draftItems：date がない、または needsReview のもの
- rawItems：未整理データ

## MVPで表示する対象

今回のMVPでは、まず date が明確に存在するデータを優先して表示してください。

優先表示対象：

- paiza.csv

開発用・確認用として扱う対象：

- Progate.csv

日付がない以下のデータは、無理にタイムライン表示しないでください。

- Euphoria.csv
- GitHub.csv
- エックスサーバー.csv
- クラウドワークス.csv
- 職務経歴.csv

これらは「未整理データ」「公開候補」「詳細作成待ち」として管理できる土台だけ作ってください。

## 一覧ページの実装

すべての公開対象データを以下の共通フォーマットで一覧表示してください。

時期｜カテゴリー｜タイトル｜詳細

要件は以下です。

- date または period の降順で表示
- isPublished が false のものは公開一覧には表示しない
- needsReview が true のものは公開一覧には表示しない
- カテゴリーが分かるラベルを表示
- タイトルを表示
- summary または detail の冒頭を表示
- 詳細ページへのリンクを表示
- PCでもスマホでも読みやすいこと
- 過度な装飾は不要
- コントラストをはっきりさせる
- 「積み上げ感」が伝わる余白と罫線を使う

## 未整理データの扱い

今回、日付がないデータが多いため、必要であれば管理用・開発用として未整理データ一覧を作ってください。

未整理データ一覧では、以下を確認できるようにしてください。

- sourceFile
- category
- title
- sourceUrl
- needsReview
- date が未設定であること
- 公開候補かどうか

ただし、未整理データ一覧はクライアント向けの公開ページではなく、開発・整理用のページとして扱ってください。

公開URLに出す場合は、明確に非公開または開発用にしてください。

## タイムライン駆動型ナビゲーション

PC表示では、左側に固定タイムライン、右側にコンテンツを表示してください。

### PCレイアウト

- 左サイドバー：2017年から現在までの縦型タイムライン
- 右側：選択された年、または全期間の実績一覧
- タイムラインはドット形式
- 年ごとにドットを表示
- 選択中の年のドットを強調表示
- hover 時は対象の年が選択できることが分かる見た目にする
- click 時は右側のコンテンツがその年の実績に切り替わる
- 「すべて」も選択できるようにする

### タイムラインの状態

以下の状態を明確に分けてください。

- default：通常状態
- hover：マウスを乗せた状態
- active：現在選択中の年
- current item：詳細ページで閲覧中の実績が属する時点

特に重要なのは、詳細ページを見ているときも、左タイムライン上で「今どの時点のデータを見ているのか」が分かることです。

## 詳細ページ

今回は詳細ページを作り込みすぎなくて構いません。

ただし、一覧から詳細ページへ遷移できるようにしてください。

詳細ページでは、共通項目を表示してください。

- 時期
- カテゴリー
- タイトル
- 概要
- 詳細
- タグ
- 外部リンク
- metadata のうち公開可能な内容

また、詳細ページでもタイムラインの現在地が分かる構成にしてください。

PCでは左にタイムライン、右に詳細内容を表示してください。

スマホでは上にタイムライン、下に詳細内容を表示してください。

## 「現在地」の可視化

詳細ページを閲覧中も、訪問者が迷子にならないようにしてください。

以下を実装してください。

- 選択中の年をタイムライン上で強調
- 対象実績の date または period に対応するドットを強調
- 詳細ページ上部に「2026.07 / 学習記録」のような現在地ラベルを表示
- 一覧へ戻る導線を用意
- 年別一覧へ戻る導線を用意

目的は、常に「タイムラインのどこを見ているのか」を把握できることです。

## モバイル最適化

スマホでは、PCの左サイドバー形式をそのまま使わないでください。

スマホでは以下の構成にしてください。

- 上部：横スクロール可能な年別タイムライン
- 下部：コンテンツ一覧または詳細内容
- active な年を強調
- タイムラインが画面上部に残り、時系列ベースの体験を損なわないこと
- タップしやすい余白を確保すること

デバイスが変わっても、「時系列ベースで見る」という体験が一切損なわれないようにしてください。

## デザイン方針

デザインは、派手にしないでください。

方向性は以下です。

- 白背景ベース
- 黒・グレーを中心にした読みやすい配色
- アクセントカラーは赤・オレンジ系を最小限に使用
- 罫線、ドット、余白で構造を見せる
- 図面・設計書のような硬派な雰囲気
- 「証拠」「記録」「軌跡」が伝わるUI
- 信頼性を重視
- すごそうに見せるより、判断しやすくする

タイムラインのドット、選択中の状態、現在地の表示にはアクセントカラーを使ってください。

## 実装方針

まず既存のリポジトリ構成を確認してください。

その上で、現在の技術スタックに合わせて実装してください。

不要なライブラリ追加は避けてください。

ただし、今回の設計思想に合わない既存デザイン・既存ページ・既存コンポーネントは、整理・削除・作り直して構いません。

CSVの読み込み処理は、既存の構成に合わせて実装してください。

もしビルド時にCSVをJSON化する方が適切であれば、その方式で構いません。

ただし、将来的にGoogleスプレッドシート連携へ移行しやすいように、CSV読み込み処理とUI表示処理は分離してください。

## 進め方

以下の順番で進めてください。

1. 既存のディレクトリ構成、ルーティング、データ管理方法、CSS構成を確認
2. 既存ページ・既存コンポーネントのうち、再利用するものと作り直すものを判断
3. 今回のタイムライン型UIに合わない既存デザインやページ構成は整理・削除
4. 現在のCSVファイル構造を確認
5. 共通の TimelineItem 型またはデータ構造を作成
6. CSVごとの正規化関数を作成
7. paiza.csv を優先して timelineItems に変換
8. Progate.csv を開発用・確認用データとして読み込めるようにする
9. date があるデータだけを時系列一覧に表示
10. date がないデータは draftItems または rawItems として保持
11. 「時期｜カテゴリー｜タイトル｜詳細」の一覧ページを新しく設計・実装
12. PC向けの左固定タイムラインレイアウトを実装
13. 年別タイムラインによる絞り込みを実装
14. hover / active / current item の状態を実装
15. 詳細ページへのリンクと簡易詳細ページを実装
16. 詳細ページでも現在地が分かるようにする
17. スマホ向けに、上タイムライン・下コンテンツのレイアウトへ切り替える
18. 必要であれば未整理データ確認用の開発ページを作る
19. 不要になった旧UI・旧CSS・重複コードを整理
20. 動作確認方法を最後にまとめる

## 完了条件

以下を満たしたら完了です。

- 既存デザインに引っ張られず、タイムライン型ポートフォリオとして再設計されている
- CSVごとのデータ構造の違いを吸収する正規化レイヤーがある
- 制作物・職務経歴・技術ブログ・学習記録を同じ TimelineItem として扱える
- paiza.csv のデータを学習記録として時系列表示できる
- Progate.csv の有効データを読み込める
- date がないデータを無理に公開タイムラインに出していない
- 「時期｜カテゴリー｜タイトル｜詳細」の一覧が表示される
- date または period の降順で表示される
- isPublished が false または needsReview が true のデータは公開一覧に表示されない
- PCでは左タイムライン、右コンテンツになる
- スマホでは上タイムライン、下コンテンツになる
- 年別タイムラインで絞り込みできる
- hover 状態がある
- active 状態がある
- 詳細ページでも現在地が分かる
- 詳細ページへの導線がある
- 一覧へ戻る導線がある
- アクセス制限のログイン情報など、公開してはいけない情報が表示されていない
- 不要になった旧UIや旧CSSが整理されている
- データソースやビルド設定など、残すべきものは破壊されていない
- 削除したファイル、変更したファイル、新規追加したファイルが説明されている
- 実装後に確認すべきコマンドや確認手順が提示されている

## 注意点

最初から完成形を作り込みすぎないでください。

今回の目的は、まず「ありのままの軌跡」を時系列で表示できるMVPを作ることです。

ただし、現状のCSVには日付がないデータも多いため、すべてを無理やり時系列表示しないでください。

日付があるものはタイムラインへ。
日付がないものは未整理データへ。
この分離を大切にしてください。

既存サイトにタイムライン機能を足すのではなく、My Portfolioを「軌跡を証明する時系列UI」として作り直してください。

凝ったアニメーションや過度な装飾よりも、以下を優先してください。

- データ構造
- CSVごとの正規化
- 一覧性
- 時系列の分かりやすさ
- 現在地の可視化
- PC / スマホで破綻しないレイアウト
- 将来的なスプレッドシート連携のしやすさ

実装後は、以下を簡潔にまとめてください。

- 変更したファイル
- 削除したファイル
- 新規追加したファイル
- 実装内容
- CSVごとの取り込み仕様
- 公開対象にしたデータ
- 未整理扱いにしたデータ
- 確認方法
- 既知の課題
- 今後の拡張案