【Design Ops】Gamma PDFからWebポートフォリオを再構築した話——社名はGitに載せず、ローカルだけ覚える仕組み

以前、文美（文芸美術国民健康保険組合）用にポートフォリオを作り直した話で書いた通り、提出用の Gamma PDF を先に整えていました。

その続きとして、このブログ（star-moti）の /portfolio も同じPDFを正本にして作り直した 話です(^^)

「PDFはある。でもWebにも載せたい。ただし社名は出したくない。あと案件名、だんだん忘れてきた……」

この3つが同時に来たので、公開用と自分用をきれいに分ける設計になりました。

なぜWeb側も作り直したか

文美用PDFと、ブログ常時公開用ポートフォリオは 役割が違う んですよね。

系統	置き場所	役割
文美用PDF	Gamma → 印刷提出	審査向けに詳しい情報を載せる
常時公開用	このサイトの `/portfolio`	NDAに配慮した範囲で外向きに見せる

PDFを作っただけでは、URLで誰でも見られるポートフォリオページ は更新されません。以前は WordPress でポートフォリオを作っていた のですが、今回のGamma PDF版とは中身も更新タイミングもバラバラになっていたので、Markdown + Next.js の仕組みに載せ替える作業を Cursor と一緒に進めました。

やったこと：PDF 16ページぶんから9案件をWeb化

正本PDFをページ対応表付きで読み込み、主に次の案件を /portfolio/[slug] として追加・更新しました。

デザイン組織・DSガバナンス（P4〜5）
SaaSのデザインシステム構築・刷新（P6）
記事執筆・技術発信（P7）
飲食系・管理画面UX（P8〜9）
POS連携オーダーのマルチデバイスUI/UX（P10〜11）
カメラアプリのコーディング・デザイン（P12〜13）
直近のフロントエンド2件（P14左右）
Archiveピックアップ（P15）

あわせて About ページもPDFのプロフィール部分（P2〜3）をベースにブラッシュアップ。ポートフォリオTOPからAboutへリンクする導線も追加しました。

一覧の並び順は、ブログと同じ lastmod ではなく periodEnd（案件終了月）の新しい順 に変更。案件の「いつ頃の仕事か」が一目でわかるようにしています。

一番悩んだところ：詳細は残したいが、社名はGitに載せたくない

ポートフォリオを書いていると、こういうジレンマが出てきます。

Gamma / Cursor に PDF相当の詳細 を渡したい（省略すると後から困る）
でも 社名・正式案件名 は GitHub 公開リポジトリに載せたくない
時間が経つと 「あの案件、正式名なんだっけ？」 も忘れる（#^ω^）

最初は %% メモに全部書く案もありましたが、社名まで md に残るのは不安。逆に全部削ると、自分もAIも参照情報が足りなくなる。

そこで 三層構造 に落ち着きました。

① 公開本文（Web・Gitに載る）

社名・プロダクト固有名は 抽象化
「B2B SaaS（利用社数1,000社超・社名非公開）」のような書き方
本番ビルドではこの部分だけが見える

② `%%` メモ（Gitに載るが本番では非表示）

PDFから写した 詳細テキスト（Problem / Approach / Impact など）
社名は書かない ルール
next dev では琥珀色の「個人用メモ」として表示
Gamma 再編集や Cursor へのコンテキスト渡し用

③ `private/portfolio-meta.json`（Gitに載せない）

社名・正式案件名・プロダクト名 だけを slug ごとに記録
.gitignore 対象。portfolio-meta.example.json は書式見本としてコミット
next dev のときだけ、案件ページ上部の琥珀色ブロック（PrivateNote）に正式名が出る
本番ビルドでは読み込まない（NODE_ENV !== "development" なら null）

公開本文     → 匿名で誰でも見られる
%% メモ      → 詳細は残すが社名なし（devで見える）
private JSON → 社名だけ手元で思い出す（devのみ）

Git に載せないものは Google Drive でフォルダ同期

secret-images と private/ はどちらも gitignore なので、GitHub には載りません。代わりに Google Drive for desktop の 「マイ Mac」→「フォルダを追加」 で、プロジェクト内のフォルダを 単体指定して同期 しています（Obsidian×Next.js の執筆フロー記事でも secret-images 側は書いたやつ）。

同期フォルダ	中身	Git	Drive
`public/secret-images/`	ポートフォリオのスクショなど	❌	✅ フォルダ同期
`private/`	`portfolio-meta.json`（社名・正式名）ほか	JSONのみ ❌ / README等は ✅	✅ フォルダ同期

画像を追加したり JSON を編集して保存すれば、勝手に Drive 側にもバックアップされる ので、日付フォルダへ手動コピーする必要はありません（別の重要ファイルは従来どおり日付フォルダ＋スターで整理、という使い分け）。

private/ 丸ごと同期すると README.md や portfolio-meta.example.json も Drive に載りますが、これらは GitHub にもあるので 二重バックアップになるだけ で問題なし。気になるのは portfolio-meta.json だけ——ここが自動で守られるのがラクポイントです。

別 PC でいじる予定がなければ、「Git 版と Drive 版、どっちが新しい？」みたいな心配も基本ありません。編集しているのはいつも同じ Mac 上のローカルファイルで、Drive はそれをミラーしているだけ、という理解でOKです(^^)

スクショは `secret-images` へ

画面キャプチャは public/secret-images/portfolio/... に置きます。

リポジトリには載らない（gitignore）
上記の Drive フォルダ同期で自動バックアップ
公開ページから参照するパスは書いてあるが、画像本体は clone しただけでは来ない

「載せたいけど、全部GitHubに上げたくない」ものの定番パターンですね(^^)

本番確認：社名、ちゃんと消えてた

実装後、わざわざ 本番URL を見に行って確認しました。

公開本文に社名は出ていない
琥珀色の PrivateNote（正式名）も 本番には出ない
%% メモも本番HTMLからは除去される

「100点！！！本番もしっかり消えてたわ！！」——安心しました（#^ω^）

社名と案件名、だんだん忘れてきちゃうタイプなので、ローカルでだけ思い出せる 仕組みは地味に助かります。

Cursor との進め方（ざっくり）

PDF（Gamma出力）を正本として、案件ごとに Markdown を起こす
公開用に匿名化しつつ、%% にPDF詳細を残す
社名は private/portfolio-meta.json に逃がす
スクショは secret-images に配置
next dev で PrivateNote と %% を見ながら推敲
問題なければ push（JSON本体は絶対にコミットしない）

「PDF完全体は手元と %%、社名は JSON、外向きは匿名」——この分担が決まってから、作業速度が一気に上がりました。

まとめ

文美用Gamma PDF を正本に、Webポートフォリオ9案件 を再構築
公開本文は NDA配慮で匿名化
詳細は %% メモ（社名なし）、正式名は private/portfolio-meta.json（gitignore・devのみ表示）
secret-images / private は Google Drive「マイ Mac」でフォルダ単体同期（自動バックアップ）
スクショは secret-images（gitignore）
一覧は periodEnd 新しい順
本番で社名が漏れないことを確認済み

同じように「ポートフォリオをWeb化したいけど、社名はリポジトリに載せたくない」人の参考になればうれしいです(^^)

/portfolio はこちら。案件名を思い出したくなったら、ローカルで next dev して琥珀色メモを覗いてください。