ZERONOVA Journal
開発の舞台裏、AIとの共創、学びの記録。
6プロダクトを1人で回すAIネイティブ開発の実践を発信します。
ブラウザでデモ動画ツールを作った設計判断 — Canvas + MediaRecorder + FFmpeg WASMの3層アーキテクチャ
ブラウザだけで動作するデモ動画作成ツールを開発する際に直面した設計判断を記録。FFmpegフィルターグラフの複雑さを回避し、Canvas API + MediaRecorder + FFmpeg WASMの3層に分離したアーキテクチャの経緯と実装を解説する。
自分で作ったデモ動画ツールを使ってUI/UXを改善した話 — ズーム3フェーズ設計とイージング関数の体感速度
自作のデモ動画作成ツールを自分で使い、ズームの違和感、動画配置の不自由さ、MP4エクスポートエラーの3つの問題を発見・改善した。ドッグフーディングで見えるUI/UXの細部と、easeOutCubicが体感速度を変える発見を記録する。
MCP Serverを5バージョンリリースして見えた設計原則 — v0.1.0→v0.5.0の進化と後悔
ZERONOVA LAB MCP Serverをv0.1.0からv0.5.0まで5バージョンリリースする過程で見えた設計原則を記録。薄いラッパーから始めるTier分類、Workflow as a Tool設計、情報パリティの重要性、段階的リリースの実践を振り返る。
89ツール×59記事のSEOコンテンツクラスターを構築した方法 — ツールページ×記事の双方向リンク戦略
89個の無料ツールと59本のFocus Blog記事を双方向リンクで結ぶSEOコンテンツクラスターの構築方法を解説。tools.tsによるrelatedArticles一元管理、content-mapによるカバレッジ追跡、記事リライトによるクラスター拡張の実践を記録する。
個人開発サイト公開5週間のアクセス解析 — 検索流入76%とChatGPT流入の実データ
ZERONOVA LABを公開してから5週間のVercel Analyticsデータを公開。72UU・93PV、検索流入76%（Google 38%+Bing 31%）、Qiita経由15%、ChatGPT経由3%の実データから見えた個人開発サイトの流入構造と次の一手を記録する。
API先行・Web UI後追いの開発パターン — MCP Serverと無料ツールの統合設計
MCP Server開発で発見した「API first, Web UI later」パターンの実践記録。API仕様がMCP開発で固まっているため、Web UI実装がスムーズになる逆転の開発フローと設計判断を解説。
自作MCP Serverで自サイトを診断して即日改善した話 — ドッグフーディングで見えた5つの問題
MCP Serverのrun_web_launch_auditで自サイトを診断し、セキュリティヘッダー追加・カラーコントラスト677箇所修正・next/font移行を即日実施。64点から88点への改善プロセスを記録。
npm公開前チェックリストで3つのドキュメント不整合を発見した話 — コードは通ってもドキュメントは嘘をつく
MCP Server v0.5.0のnpm公開時に体系的なチェックリストがCHANGELOG/READMEの数値不整合を3件発見。コードの品質とドキュメントの品質は別の軸であるという学びを、複数フェーズの実例で振り返る。
Qiita・Zenn初投稿で学んだプラットフォーム戦略 — PMはどこで勝負すべきか
Qiita初投稿415ビュー、Zennはほぼ無風。2つのプラットフォームで全く異なる結果が出た理由を分析し、PM×AIの独自ポジションで技術記事を届ける戦略に辿り着いた記録。
Web検査ツールを8個から12個に増やした設計判断 — 「もう十分」から「プロレベル」へ
MCP Server v0.5.0でSEO検査ツールを8個から12個に拡張した設計判断の記録。ギャップ分析から実装順序の最適化、SSRF対策、構造化データ18スキーマ対応まで全過程を解説。
X投稿でAI自慢を避けるべき理由 — 実データで見る投稿パターン別の反応差
Xのエンゲージメントデータを分析した結果、実体験ストーリーはAI自慢投稿の3〜6倍のリーチを獲得していた。投稿戦略の方向転換と、ストーリーログの導入に至った経緯を振り返ります。
個人開発で「著者ペルソナ」をドキュメント化した理由 — Single Source of Truthの実践
6つのコンテンツチャネルに散らばった著者ペルソナ情報を1ファイルに集約しSingle Source of Truthを実現した記録。AI協業の2段階表現レベル設計、PM≠エンジニアの一貫性、創作禁止ガイドライン。
SEO監査の手動チェック項目をゼロにした話 — MCP Serverによる段階的自動化
MCP ServerのSEO監査ワークフローで手動チェック項目を16項目中0にした段階的自動化の記録。OGPチェッカーの「メタ情報ハブ」化、robots.txt/サイトマップ検証ツール新設、SSRF対策のredirect: manual実装。
Claude Codeで10日間に82個の無料ツールを量産した開発プロセス
PMがClaude Codeと協業し、10日間で82個の無料オンラインツールを開発・公開した全プロセス。並列エージェントによる同時開発、5段階品質保証、SSRF脆弱性発見とセキュリティチェックリストの実践記録。
MCP Server開発記 — 82ツールのWeb検査を16コマンドに凝縮した設計判断
82個の無料ツールからMCP Server用に16ツールを厳選し、npmパッケージとして公開するまでの設計判断。B2A戦略、Workflow as a Toolパターン、情報パリティ問題、TypeScript型との格闘を開発日記から振り返る。
個人開発者がnpmパッケージを公開するまでの全手順 — zeronova-lab-mcp v0.1.0〜v0.2.2
個人開発のMCP Serverをnpmパッケージとして公開した実体験。クラウドIDEからの公開制約、ZIPダウンロード経由の6ステップフロー、Granular Access Tokenによるセキュリティ、バージョン被りの失敗と学び。
AIと2週間で60本の技術記事を書いた方法 — PM×Claude Codeのコンテンツ量産術
PMがClaude Codeと協業し、2週間で60本以上の技術記事を公開した方法。開発日記を素材とするdevlogパイプライン、AI協業の表現レベル設計、創作禁止ルール、品質チェックリストの実践記録。
個人開発でも必要なライセンス監査 — 601パッケージを調査して分かったこと
IdeaSPoolの601パッケージとWakulierの260パッケージを監査し、LGPL・MPL・Apache-2.0の実務判断、FFmpeg GPL問題の是正、SaaS特有のグレーゾーンへの対応を記録します。
作って、壊して、やめた — MapLibre マップジェネレーターで撤退を決めた話
簡易マップジェネレーターに徒歩ルート表示を追加しようとして、OSRMとOpenFreeMapの座標ズレ問題に直面。4回のスタイル修正で根本原因を特定し、313行を削除して撤退を決断した過程を記録。
ブラウザでMarkdownからEPUBを生成する — 正規表現の限界とステートマシン設計
電子書籍作成ツールで正規表現ベースのMarkdownパーサーがGFMテーブルやネストリストで破綻。ステートマシン方式に移行した設計判断と、FileReaderレースコンディション・XHTML妥当性の実装課題を解説。
Next.js APIルートのSSRF対策 — redirect: manual とホップ毎検証の実装
リンク切れチェッカーやOGPチェッカーなど外部URLフェッチ系ツールで直面したSSRF脆弱性と、redirect: manualとホップ毎検証で対策した実装記録。ドッグフーディングで発見した実バグの修正も解説。
Markdownの対話セクションをチャット風UIに自動変換する実装
Journal記事のZeronova×Claude Code対話セクションをreact-markdownのカスタムコンポーネントでSlack風チャットUIに自動描画する仕組みの設計と実装。スピーカー検出・後方互換・著者情報統一も解説。
Wakulier 開発記 — RLS first 設計と OAuth 苦労話を添えて
フリーランス向け依頼管理ツール Wakulier を RLS first 設計で2日間MVP構築。カレンダーUI自作、タイムゾーン3回ハマり、LINE内ブラウザOAuth問題を乗り越えた2週間の開発記録。
BandBridge 開発記 — ミュージシャン向けマッチングサービスの設計判断
ミュージシャン同士をつなぐマッチングサービス BandBridge の開発で直面した、RLS設計、リアルタイムチャット、セキュリティ監査の舞台裏を振り返ります。
CancelNavi の開発記 — サブスク解約ガイドを1ヶ月で作ってリリースした話
サブスク解約の方法を案内するサービス CancelNavi を企画からリリースまで1ヶ月で開発した過程を、情報鮮度問題、セキュリティ監査、機能削除の判断を交えて振り返ります。
自治会DXで学んだシニア向けWebアプリ開発の設計判断
自治会の業務をデジタル化するWebアプリを開発した際に直面した、シニアユーザー向けUI設計の試行錯誤と設計判断の舞台裏を振り返ります。
E-E-A-T × SEO改善を個人開発サイトに実装した全記録
ZERONOVA LABでE-E-A-T（経験・専門性・権威性・信頼性）を強化するために実施した24の施策と、トップページSEO最適化の具体的な実装内容を解説します。
個人開発サイトに74個の無料ツールを作ってSEO流入を増やした話
ZERONOVA LABで74個の無料オンラインツールを開発しSEO流入の導線にした戦略、品質保証フロー、セキュリティ対策の舞台裏を開発日記から振り返ります。
個人開発者の「名前」をどう決めるか — Zeronova が生まれるまで
個人開発者にとってブランド名・活動名は避けて通れない問題です。Zeronovaという名前が決まるまでの試行錯誤と、ブランド体系の設計判断を振り返ります。
IdeaSpool の進化 — AIタグ付けの試行錯誤から Supabase 移行まで
IdeaSpool の開発で直面したAIタグ付けの一貫性問題、GitHub から Supabase への移行判断、そして1日で10機能を実装した舞台裏を振り返ります。
X 風オンボーディングチェックリストの実装 — 初回体験で離脱を防ぐ UX パターン
Wakulier で実装したオンボーディングチェックリストの設計と実装。X（Twitter）のプログレスバー型UIを参考に、ステップ設計と中間状態の可視化で初回離脱を防ぐ方法を解説します。
PWA beforeinstallprompt の早期キャプチャパターン — React ライフサイクルとの不整合を解決する
PWA の beforeinstallprompt イベントが React マウント前に発火する問題に直面し、グローバル変数パターンで解決した経緯と、インストール促進UIの実装方法を解説します。
PWA に Pull-to-Refresh を実装する — ネイティブ風ジェスチャーの実現
IdeaSpool の PWA 対応で実装した Pull-to-Refresh の閾値設計、減衰係数の調整、React コンポーネントでの状態管理を実例ベースで解説します。
Supabase Storage でアバター画像を管理する — バケット設計と RLS の実践
Wakulier のプロフィール機能で実装した Supabase Storage によるアバター画像管理の設計パターン。バケット構成、RLS ポリシー、表示名の優先順位ロジックを実例で解説します。
カレンダー UI を自作した話 — ライブラリを使わない判断と flexbox 実装
Wakulier のスケジュールビューで、FullCalendar や react-big-calendar を検討した末に自作を選んだ経緯と、flexbox で週間カレンダーを実装した方法を紹介します。
機能・コンテンツマップで記事企画を効率化する — プロダクト機能から逆引きする方法
プロダクトの機能一覧からブログ記事を逆引きする「機能・コンテンツマップ」を考案し、IdeaSpool と Wakulier で実践。記事企画の効率化と SEO・CVR の両立を実現した方法を解説します。
JavaScript で月額課金の更新日を計算する — 月末日とタイムゾーンの罠
サブスクリプションの次回更新日を JavaScript で計算する際に遭遇した月末日問題とタイムゾーン問題。Date オブジェクトの自動調整の挙動と、安全な日付計算のパターンを解説します。
Next.js App Router の error.tsx と not-found.tsx でエラーハンドリングを実装する
BandBridge の開発中にエラー画面がない問題に気づき、error.tsx と not-found.tsx を実装。use server 制約との組み合わせで遭遇した落とし穴と、実践的なエラーハンドリングパターンを解説します。
OAuth リダイレクトで状態を保持する方法の比較 — Cookie・Query Parameter・localStorage
OAuth 認証フローでログイン後のリダイレクト先を保持する3つの方法を比較。Cookie、Query Parameter、localStorage それぞれの落とし穴と、実プロダクトでの試行錯誤を共有します。
分散環境対応のレート制限を Supabase で実装する — Redis なしのアプローチ
Vercel のサーバーレス環境でインメモリのレート制限が機能しない問題に直面し、Supabase テーブルで永続化する方法を採用。Redis を使わずにレート制限を実現した設計と実装を解説します。
開発中に毎日使う無料ツール — データ変換・コード支援編
JSON整形、Base64変換、正規表現テスト、JWT解析、curl変換、chmod計算、コード差分比較など、開発者が日常的に使うデータ変換・コード支援ツール14種を自作した経緯と、クライアントサイド完結で実現した設計判断を解説します。
Web開発のモックアップを効率化するツール活用術
ダミー画像生成、ダミーテキスト、Markdownプレビュー、HTMLテーブル生成の4ツールを自作した経緯と、Canvas API・自前パーサーなどの設計判断、モックアップ作成の効率化ワークフローを解説します。
開発記事でAIとの協業をちゃんと書くことにした理由
PMがClaude Codeと協業して開発する過程を記事で明確に表現する方針に転換した経緯と、AIネイティブ実験スタジオとしてのブランド一貫性について。
datetime-local のタイムゾーン罠（決定版）
datetime-local 入力値の二重タイムゾーン変換で納期が8時間ズレる問題に2度遭遇。原因の解説と、Supabase の timestamptz と組み合わせたときの確実な解決パターンを紹介します。
Gemini API を使った AI 支援機能の実装
フリーランス向け依頼管理ツールに Gemini API で確認リクエスト自動生成機能を実装。プロンプト設計の3段階の試行錯誤と、フォールバック処理・Zod バリデーションの実践パターンを紹介します。
Next.js ブログに構造化データ（JSON-LD）を実装する方法
Next.js App Router のブログに BlogPosting・BreadcrumbList などの JSON-LD 構造化データを実装した手順と、検索結果でのリッチスニペット表示を狙うための設計判断を解説します。
React.memo でリスト表示のパフォーマンスを改善する
2つのプロダクトで遭遇したリスト表示のパフォーマンス問題。React.memo の適用判断基準と、animate-pulse やメモリリークなど見落としがちな原因への対処法を実体験ベースで解説します。
個人開発でもやるべきセキュリティ監査チェックリスト
2つのプロダクトで計75件の問題を発見したセキュリティ監査の実践方法。RLSポリシー、環境変数、認証フロー、未使用コードなど、個人開発で見落としがちな観点をチェックリスト形式で紹介します。
Supabase で N+1 クエリを防ぐパターン集
マッチングサービスの開発中に遭遇した N+1 クエリ問題と、Supabase の .in() や Promise.all を活用した解決パターンを実例ベースで紹介します。
AI でアイデア分析フレームワーク（SCAMPER）を実装する
SCAMPER やオズボーンのチェックリストなど、アイデア発散フレームワークを AI で自動化。プロンプト設計と JSON 出力の工夫を解説します。
情報系サービスの「鮮度」問題にどう向き合うか
サブスク解約ガイドのような情報系サービスでは、情報の古さが致命的になる。鮮度を担保する仕組みと、個人開発での運用の現実を語ります。
Next.js で Markdown ブログを構築する方法
Next.js App Router と gray-matter を使って、CMS なしで Markdown ブログを構築。SSG、OGP、sitemap まで対応する実装を解説します。
プロフィール完成度インジケーターでユーザーの入力率を上げる
プロフィールの入力率を上げるには、進捗バーが効果的。完成度インジケーターの設計と、項目ごとのウェイト設定の考え方を解説します。
react-force-graph-2d でアイデアの関連性を可視化する
蓄積したアイデアをネットワークグラフで可視化。react-force-graph-2d の使い方と、タグベースの関連度計算（Jaccard 係数）を解説します。
Web プッシュ通知の実装手順（VAPID + Service Worker）
Next.js で Web プッシュ通知を実装する方法を解説。VAPID キーの生成から Service Worker の設定、通知送信 API まで、実装の全体像を紹介します。
機能を減らす勇気 — プロダクトから機能を削除した話
CancelNavi からバグ報告機能を削除し、別プロダクトに移行した判断の背景と学びを共有します。機能を「減らす」ことで、プロダクトの価値が上がることもあります。
モバイルファーストなモーダル設計 — フルスクリーンシートの実装
モバイルでのモーダル表示には、従来の中央配置より「フルスクリーンシート」が適しています。IdeaSpool での実装経験をもとに、設計のポイントを解説します。
Next.js App Router で SEO 最適化する完全ガイド
Next.js App Router でメタデータ、構造化データ、sitemap、robots.txt を設定する方法を、実際のプロダクト開発経験をもとに解説します。
Supabase Realtime でチャット機能を実装する
Supabase Realtime を使ってリアルタイムチャット機能を実装する方法を、BandBridge の開発経験をもとに解説します。接続管理、既読機能、RLS 設計のポイントも紹介。
Vercel AI SDK + Google Gemini で日本語要約 API を作る
Vercel AI SDK と Google Gemini を組み合わせて、日本語テキストを要約する API を実装する方法を解説します。自治会 DX での実装経験をもとに、モデル選定からストリーミング実装まで紹介。
Cloudflare Turnstile で認証なしフォームをボットから守る
認証不要の公開フォームをボットから保護するため、Cloudflare Turnstile を導入した経緯と実装方法を解説します。reCAPTCHA より軽量でユーザー体験を損なわない選択肢です。
1日でMVPを作る — Supabase フル活用の高速開発術
BandBridge と Wakulier を1日でMVPまで作り上げた経験から、個人開発で高速に動くものを作るための技術選定と設計パターンを解説します。
個人開発で「完璧主義」をやめた話 — CancelNavi リリースの決断
情報が揃っていない状態でリリースするべきか悩んだ末に「完璧を目指すより、まずリリースして改善していく」方針を選んだ経緯と、その後に得た学びを共有します。
Supabase で pg_trgm を使った日本語全文検索を実装する
PostgreSQL の pg_trgm 拡張を使って、Supabase で日本語の部分一致検索を高速化する方法を解説します。LIKE クエリの遅延問題を解決した実践的なアプローチを共有します。
@dnd-kit/sortable でドラッグ&ドロップ並び替えを実装する
Reactでリスト並び替え機能を実装する際の@dnd-kit/sortableの使い方。ドラッグハンドルの設計、他のインタラクションとの競合回避、汎用コンポーネント化のパターンを解説。
iOS の PWA でハマるポイントまとめ
iOS で PWA を開発する際に遭遇しやすい問題と対処法。favicon キャッシュ、apple-touch-icon、ホーム画面追加時の挙動など、実践で得た知見を整理。
LINE 内ブラウザで OAuth 認証が動かない問題への対処
LINE アプリ内ブラウザでは Google OAuth が正常に動作しないことがある。User-Agent 検出による事前警告と外部ブラウザ誘導で解決した実践記録。
Next.js App Router で Supabase 認証を使う — middleware.ts がカギ
Next.js App Router と Supabase Auth の組み合わせで、middleware.ts を使った認証ガードの実装パターン。ログアウト処理の落とし穴も解説。
Next.js で PWA オフラインキューを実装する
PWAでオフライン時の操作をキューに貯めて、オンライン復帰時に自動同期する仕組みの実装方法。IndexedDB、制限設計（100件・7日・3回リトライ）の実践知見。
Next.js の "use server" 制約と回避策
Server Actions のファイルから定数をエクスポートするとエラーになる問題。型・定数を別ファイルに分離するパターンと、error.tsx / not-found.tsx によるエラーハンドリングを解説。
シニア向け UI で避けるべきパターン
高齢者向け Web アプリを開発する際に避けるべき UI パターン。スワイプ操作、小さいタップターゲット、キーボード入力など、実際の設計判断と代替案を解説。
Vercel（UTC）で JST 日時処理にハマった話
Vercel はサーバーが UTC で動作するため、JavaScript の Date メソッドが想定外の挙動をする。明示的なタイムゾーン指定で解決した実践記録。
AI タグ付けで一貫性を保つプロンプト設計
AIに自由にタグを生成させると「React」「リアクト」「react.js」が混在する問題。既存タグを参照させ、禁止より推奨で指示するプロンプト設計を解説します。
開発日記を書く習慣で記事ネタが尽きなくなった話
毎日の開発日記が技術ブログのネタ元になる。実際の開発日記から記事ネタを抽出した経験をもとに、書き方とパイプライン設計を解説。
GitHub Actionsで複数リポジトリの開発日記を自動集約する方法
個人開発で複数プロダクトを運用する際、各リポジトリの開発日記を1箇所に自動集約するGitHub Actionsワークフローの実装方法を解説します。
個人開発で6プロダクトを同時に運用する方法
6つのプロダクトを1人で並行開発するための仕組みづくり。開発日記の自動集約、完璧主義をやめる判断、技術スタックの統一を実践ベースで解説。
Supabase Auth + Next.js App Router で認証が切れる問題と解決策
Server Component で getUser() を使うとトークンリフレッシュ時に認証が切れる問題。getSession() を使った解決策と、チーム全体で統一するための仕組みを解説します。
Supabase RLS の設計パターン — デフォルト拒否で安全に
2つのプロダクト開発で学んだ Supabase Row Level Security の設計パターン。「デフォルト拒否」の原則と、初期ユーザー問題の解決策を解説します。