Product Stories
Product Stories
開発の軌跡を、ストーリーに。AIエージェントから直接記録。
自分のプロダクトの歩みを、きちんと残したい。そう思っても、SNSに書けば埋もれ、メモを分散させれば追えなくなる。Product Storiesは、その悩みから生まれた個人開発者のためのダッシュボードです。
プロダクトごとに開発ストーリーを積み上げ、メトリクスと一緒にタイムラインとして残せます。自分だけの記録にも、公開してBuild in Publicにも使えます。AIエージェントとMCP連携することで、開発しながら自然に記録が溜まっていく体験を目指しています。
誕生ストーリー
なぜ作ろうと思ったか
個人開発を続けていると、ふと気づくことがあります。自分のプロダクトの歩みを、きちんと残せている場所がないということに。
Xに書けば翌日にはタイムラインの彼方へ流れていきます。Notionにメモすれば、ページが増えるばかりで振り返る気が起きません。Google Analyticsの数字はダッシュボードの中で静かに眠っています。記録するためのツールはたくさんあるのに、「このプロダクトはなぜ生まれて、どう育ってきたのか」を一本の線として辿れる場所が、どこにもありませんでした。
欲しかったのは、日々の開発の断片を積み上げていくと、いつの間にかプロダクトの物語になっている——そんな場所です。誰かに見せるためでも、バズらせるためでもなく、自分自身がプロダクトと向き合い続けるための場所。それがProduct Storiesの出発点です。
解決しようとしている問題
個人開発者にとって、「作ること」と「伝えること」の両立は想像以上に大変です。コードを書く時間は限られているのに、SNSでの発信、進捗の記録、メトリクスの管理——やるべきことが多すぎて、記録はいつも後回しになります。そして気づいたときには、なぜあの判断をしたのか、何がターニングポイントだったのか、自分でも思い出せなくなっています。
Product Storiesは、開発ストーリー・メトリクス・意思決定の記録をひとつのタイムラインに集約します。日々の小さな記録が積み重なると、それ自体がプロダクトの歴史になります。自分だけの振り返りとして使うこともできますし、公開すれば開発の軌跡がそのままポートフォリオになります。
さらに、AIエージェントとのMCP連携により、開発の手を止めずに記録を残せます。Claude Codeで開発しながら、その日の作業内容をそのままストーリーとして投稿できる。記録することが負担ではなく、開発フローの一部になる——それがProduct Storiesの目指す体験です。
作り始める前の自分の状況
個人開発を数年続けてきましたが、正直なところ限界を感じていました。アイデアは浮かんでも、完成までに半年以上かかり、その間にモチベーションが落ちていく——その繰り返しでした。作りかけのリポジトリだけが増えていく日々は、なかなか堪えるものがあります。
AIの波が来たとき、Claude Codeを触ってみました。すごいツールだとは感じましたが、「これで何を作ればいいのか」がわかりません。MCPという仕組みも気になりましたが、どこから手をつければいいのか見えない。結局、情報を眺めるだけで手が動かない状態が続いていました。
そんなとき、ShiftBさん主催の「Vibe Coding個人開発ハッカソン」の存在を知りました。深く考えるより先に、とにかく飛び込んでみました。そこで、ずっと頭の片隅にあった「開発の記録をちゃんとまとめたい」というアイデアが、初めて形になり始めたのです。
最初はシンプルな進捗管理ダッシュボードとして開発を始めましたが、機能を一通り実装してみるとどこか無機質な仕上がりになっていました。数字と記録が並んでいるだけで、そこに「物語」がない。そこで方向転換し、「なぜ作ったか」「転換点」「何を学んだか」を書ける場所へとピボットしました。この判断が、Product Storiesを単なるツールから開発者の想いが宿る場所へと変えた転換点だったと思っています。
これからのビジョン
目指しているのは、「開発していたら、いつの間にか記録が残っている」という体験です。
今はMCP経由でClaude Codeから投稿できる段階ですが、ゆくゆくはGitHubやCI、アナリティクスなど開発者が日常的に触れるツールと繋がり、意識しなくても開発の軌跡が蓄積されていく世界を作りたい。記録することが「もうひとつのタスク」ではなく、開発そのものの一部になる状態です。
もうひとつ大切にしたいのは、数字だけでは見えないものを残すこと。なぜピボットしたのか、どこで手が止まったのか、何に背中を押されたのか——そういう判断の文脈や感情の記録は、後から振り返ったときに一番価値があるものだと思っています。
Product Storiesが、個人開発者にとって「自分のプロダクトの歩みを辿れる唯一の場所」になること。それが今の目標です。
開発の足あと
翻訳バックフィルスクリプトに1200行超のユニットテストを追加した。Supabaseクライアントのモックヘルパーを自前で書き起こし、PostgRESTのクエリチェーン挙動を再現してある。バックフィルは本番のテーブル全件に対して走るので、間違えるとデータが汚れる。手で実行する系のスクリプトほど、守りを固めておいたほうがいい。
プロフィール（display_name / bio）が翻訳パイプラインの対象外で、英語圏で見ると日本語のまま、というのを直した。マイグレーション、翻訳テーブル設計、公開ページとクリエイターカードの表示と、通すべき経路はそれなりに長い。翻訳対象を1つ追加するたびに、既存パイプラインの完成度が試される感覚がある。後から足しやすい設計にしておいてよかった。
翻訳バックフィルスクリプトを --entity=all で実行するとタグ処理でPostgRESTエラーを起こす、という不具合を修正。あわせて localeDetection を切った副作用で恒常的に落ちていたE2Eも書き直した。バックフィルや回帰テストはユーザーには見えない部分だが、ここがブレると後で必ず痛い目を見るので、面倒でもひとつずつ直していく。
i18n実装の積み残しを夜の時間で順番に片付けた。LPの言語切替がdefault locale固定で動かない、ダッシュボード詳細でStoryCardがasync Clientエラーを吐く、翻訳準備中バッジの撤去、プロダクト作成時に原言語を選べるUIの追加、公開ページの欠落メッセージ、middlewareがrewriteを捨てている問題。大物の実装が一段落したあとは、見えていなかった割れ目が次々と表面化してくる。
i18n対応の途中で踏んだ落とし穴を順番に潰した。app/[locale]/... 配下に再配置したとき、OAuthコールバックURLだけ古いパスのままになっていて、ローカル環境でGitHubログインが回らなくなっていた。あわせて Server Action のビルドエラーも修正し、GitHub Actions に build ジョブを追加。CIで早めに気づける状態にしておきたかった。
日英バイリンガル化の実装が一段落したので、アーキテクチャ・ガイドライン・設計書まで一通り見直した。i18nを前提にした書き方を、後から流れ込んでくる開発のルールに織り込んでおきたい。Product Storiesは最初から国境のないプラットフォームにしたかったので、ここはどうしても自分で土台を作っておきたかった。マージに向けた最後の磨き込みに入る。
OGP画像の生成にロケール対応を入れた。SNSで共有されたとき、見る人の言語に合わせた画像が出てくるようにしたい。ImageResponse API はサーバー側で動くので、locale をクエリで受け取って文字を差し替えるだけで済む。英語圏の人がリンクを開いた瞬間に日本語のOG画像が出ていたら、それだけで興味が一段落ちてしまう気がする。地味だが大事な仕込み。
i18nの第2〜4フェーズを一気に進めた。全画面の文言キー化、Google Translate APIを呼ぶ動的翻訳パイプライン、公開ページの言語切替UI。本来なら数日かける範囲を一日でゴリ押しした形。翻訳結果のキャッシュテーブル、バックフィル用スクリプト、リトライ処理まで仕込んでいる。投稿のたびに非同期で翻訳が裏で走る設計にすることで、書く側の体験は今までと変わらないようにした。
日英バイリンガル対応に着手。next-intl を入れて、app/(dashboard)/... を app/[locale]/(dashboard)/... 配下へ一気に移し替えた。30本超のファイル移動とDB側の翻訳テーブル追加が並行で走るので、git diff はほぼ全画面に及ぶ。第1フェーズの目標は、見た目を変えずに足回りだけを差し替えること。まずはlintとビルドが通って、これまで通り日本語UIが表示される状態まで持っていけた。
Build in Public のための導線を一日でガッと整えた。新規ユーザー向けには「ご利用ガイド」をダッシュボードに新設して最初の一歩を案内。公開側では /creators と /showcase の2ページを追加し、活発に動いているクリエイター・プロダクトを発見できる入口を用意した。さらに公開プロダクトページは無限スクロールを自動化、DEVELOPER/CREATOR表記の統一や末尾の「ここまで読みました」マーカーまで磨き込み。中に入る人と外を覗く人、両方の動線が一段なめらかになった。
サインアップ直後にダッシュボードの空状態しか見えていなかったオンボーディングを刷新した。LPで訴求している3つのストーリーレイヤー × MCP連携の価値が、プロダクト内で連続せず消えてしまうのが課題。4ステップのウェルカムモーダルと、基本情報→完了画面のプロダクト作成ウィザードを追加し、「最初のプロダクトを作って誕生ストーリーを書く」までの導線を一本にした。シンプルな構成だが、まずは新規ユーザーが迷わず最初の一歩を踏み出せる流れを作るところから。E2E でこの動線を保護しつつ、ここから少しずつ磨き込んでいく。
Claude Code から Product Stories の MCP サーバーに接続するための設定ガイドページをダッシュボードに追加した。サイドバーに「MCP設定方法」メニューを置き、.mcp.json のスニペットをワンクリックでコピーできる。Claude デスクトップアプリ向けの案内も併記した。これまで「MCP対応」と言いつつ接続方法はREADME頼みだったが、プロダクト内で完結して導線を案内できるようになり、機能として実際に使ってもらえる段階に近づいた。
投稿単位のOGP画像生成とシェア用URLコピー機能を実装した。ダッシュボードの各ストーリーに「URLをコピー」ボタンを追加し、そのURLをXやブログに貼ると投稿本文を載せたOGP画像付きリンクとして表示される。リンクから開くと該当投稿にスクロール＆ハイライトされる演出も用意。Build in Publicは**「書いたものをどう届けるか」まで含めて体験**。シェアの摩擦を減らすほど、記録が外に出ていきやすくなる。
ストーリーの文字数上限を280→500文字に拡張した。これまで「学びや背景まで書こうとすると収まらない」ケースが多く、短く削るのに時間を取られていた。同時に投稿日時の表示に時間・分も出すよう変更。同日に複数投稿したときの前後関係がわかるようになり、タイムラインとしての読みやすさも一段上がった。
ダッシュボードのストーリーカードにMarkdownレンダリングとターニングポイントバッジを追加し、プロダクトカードには公開ページで集まったリアクション数（❤️👏🚀🔥）も表示できるようにした。同時に公開ページにヘッダーを追加し、LPのCTAもサインアップモードで開くよう整えた。ダッシュボードと公開導線、どちらの体験も一段階引き上げた。