個人ポートフォリオサイト
自分の仕事の進め方そのものを証明するポートフォリオサイト。
このサイト自体がケーススタディです。AIエージェントを使ってゼロから作り、プロダクト・フロントエンド・ビジュアル・インタラクションの一つひとつの判断で、「AI生成らしさ」が消えるまで仕上げました。
課題
たいていのポートフォリオは、静的なテンプレートやPDF、ちょっといじっただけのサイトビルダーで終わりがちです。でもこのサイトは、完成した作品を見せるだけじゃなく、「エージェントに指示して、完成度の高いインタラクティブなプロダクトを作り上げる力」そのものを示す必要がありました。
Role: オーナー · フロントエンド構築 · ビジュアルディレクター · エージェント統括
Live proof
このページ自体が成果物。
スクロールして見た見出しはすべて、一文字ずつ解読されて表示されたもの。サイトの言語を切り替えると、ページ全体が新しい文字体系で再びスクランブルされる — テンプレートではなく、実際に作られたものだから。
Built, not templated
いずれかの言語をタップ — サイト全ての見出しと同じエフェクトです。
リアルタイムの状態 — スクリーンショットではない
- モーション削減
- 無効
- テーマ
- light
- ブレークポイント
- md (768px+)
- 言語
- ja
OSのモーション設定に従います — オンだと下のバーが止まります
保存したライト／ダークの設定に従います
いまの横幅で効いている版組みの段階
いま読んでいる言語を、その文字体系で解読したもの
ウィンドウのサイズを変えてみて テーマを切り替え — 右上
AI／プロダクトビルダーとしての強みを軸に、ポジショニングを決めました。
ビジュアル言語・グリッド・ダークモード・プロジェクトカード・インタラクションの仕上げを指揮しました。
ノーコードのテンプレートやPDFではなく、エージェントとの協働でゼロからサイトを作りました。
このページ自体を、エージェント主導でプロダクトを動かすメタなケーススタディとして位置づけました。
AI協働ガバナンス
このサイトが優れているのはAIが賢いからではなく、私がそれを「治める」術を知っているから——このページは、私がAIの認知の盲点を突き、二度と繰り返させないプロセスに変えた記録です。
ガバナンス事例
一次証拠を開く
AIの染みついた癖
ある面を最適化するとき、AIは隣接する文脈への推し量りを欠きます：中国語版を直すと英語の折り返しを見落とし、モバイルのクラスを変えても私がデスクトップでは違いを見られないことに気づかない。触った面しか検証せず、「この変更の隣は壊れないか」を問いません。
私が築いたガバナンスの仕組み
ルールを設けました：どんなフロント改修の前も、Viewport Scope & Language Targetを強制宣言する——どの断点、どのロケールを触るか先に言えば、検証に明確な標的ができます。
協働で解けた価値
AIの手探りの局所最適化を、宣言的な検証境界に収束させました。一度きりのレイアウトバグが、二度と起きない協働ルールになりました。
AIの染みついた癖
文脈の一貫性を保とうと、AIは反証を見ても以前の結論に従い続け、前の判断が誤りだったと認めたがりません——多ターンの協働では誤りを増幅させる防衛的幻覚です。
私が築いたガバナンスの仕組み
「反証優先（Evidence-over-Consistency）」の反復ルールを導入：いまの一次エラーログを最高の裁定基準とし、新しい証拠が過去の判断と食い違えば必ず証拠を優先——一貫性のために無理押ししません。
協働で解けた価値
当事者（私＋OpenClawエージェント＋Claude Code）の意見が割れたとき、協働に明確な裁定基準を与えます。誤った判断はその場で覆され、皆で一つの誤った結論について行くことがありません。
AIの染みついた癖
AIは無数の選択肢を生成できますが、「私が思い描く効果」は分かりません——heroのインタラクション動画がしっくり来るか、その機能を作る価値があるのか。こうした視覚と価値の判断は答えられません。
私が築いたガバナンスの仕組み
人間とAIの分担を明確に引きました：大きなアーキテクチャ、断点戦略、選択肢の生成はAIへ。審美の裁定と最終判断は人間に残す——AIは選択肢を出すだけで、決めはしません。
協働で解けた価値
AIの産出を人間の趣味に奉仕させ、AIの平均値の美感に薄められないようにします——成果物は最終的に「人が指揮した」ように見え、「AIに手伝われた」ようには見えません。
成果
ポートフォリオ自体が証明
サイトは能力を説明するだけじゃなく、インタラクティブなフロントエンドとエージェントの統括力を、そのまま見せています。
「AIっぽさ」が出ていない
デザインの狙いは、AI生成サイトにありがちなビジュアルやコピーのクセを残さずに、エージェントを使いこなすことでした。
ゼロから成果物まで
真っ白な状態から、公開できるパーソナルブランドのシステムまで、ひと続きの道のりをまるごと見せています。