nzw

PRODUCT NOTE / PLATFORM PRD

nzw.jp

個人開発者 nzw のポートフォリオ兼 AI プラットフォーム。
この文書は、このサイトそのものをなぜ・誰のために・どんな思想で作っているかから記録した開発ノートです。

ステータス	Active（継続運用・開発中）
ドメイン	nzw.jp（姉妹サイト zerohalf.jp と別ドメインで共存）
運営	nzw（Hidekazu Nozawa） — PM × 作家 × バイブコーダー
載せているもの	技術書 / モバイルアプリ / Web ゲーム / AI ツール / 開発ノート / グッズ
最終更新	2026-08-15
技術構成	FastAPI ・ Tailwind ・ Canvas ・ Flutter Web ・ Nginx ・ EC2 / Docker
関連リンク	トップ・ About（運営者）・グッズ・開発ノート一覧

TL;DR

ひとことで

nzw.jp は、1 人の開発者がつくるアプリ・ゲーム・AI ツール・技術書・開発ノートを一元公開する場です。単なる作品展示場ではなく、「AI に任せる」ではなく「AI を使うことで、あなた自身が強くなる」という設計思想（zerohalf ミッション）を体現するプラットフォームを目指しています。

Problem / Mission

背景・なぜ作るか

土台にあるのは zerohalf のミッション「AI が全てできる時代に、人間としての価値を育てる」。

「AI に任せればいい」への違和感 — 生成 AI の普及で、人間の記憶力・思考力・言語力が使われなくなっていく。
代替する AI ではなく、育てる AI — nzw.jp のプロダクトは「AI に任せること」を促進しない。「AI を使うことで、あなた自身が強くなること」を設計する。
作品が散らばる問題 — アプリ・ゲーム・書籍・ツールがストアや外部に分散し、思想と一緒に語れる場がなかった。

そこで、理論（本）・実証（プロダクト）・記録（開発ノート）をひとつの場で束ねて見せるプラットフォームとして nzw.jp を運営している。

Who

ターゲット

見せる相手

アプリ・ゲームのエンドユーザー
AI エージェント設計に関心のあるエンジニア・PM
設計支援を検討する相手（B2B 導線）

nzw の立ち位置

「PM × 作家 × バイブコーダー」を 1 人で横断する交差点そのものが参入障壁。汎用 AI が持てない「偏愛」と「積み重ねた文脈」で勝負する。

Scope

載せるもの・載せないもの

スコープ（In scope）

技術書『チームに溶け込む AI エージェント開発』
モバイルアプリ（Engly / DayGrid / LangBridge）
Web ゲーム（Synapse Link / BOM ほか 30+ 作品）
AI ツール（AI Workspace / グループチャット）
開発ノート（本ドキュメント群）
グッズ（/goods/：アクリルキーホルダーほか）
zerohalf ブランドへの導線

やらないこと（Non-goals）

Big Tech の土俵（汎用パーソナル OS）での正面勝負
「AI に任せて終わり」を促す体験
思想を語らない、ただの作品リスト化

Success Metrics

成功指標（KPI）

「思想とプロダクトが結びついて届く」状態かを見る。指標は仮置き

本 → 相談

書籍からの設計支援問い合わせ
（B2B 導線が回るか）

回遊

アプリ ⇄ 開発ノートの回遊
（裏側まで読まれるか）

継続

各プロダクトの継続利用
（"育てる AI" が刺さるか）

Front-end Craft

トップページのブラックホール

トップページには、ときどきブラックホールが現れて画面上をゆっくり横切る。Synapse Link の敵役をそのまま連れてきたもので、タップするとそのゲームが開く。絵の中身（6 層の重ね方・配色・脈動）は Synapse Link の開発ノートに書いたので、ここではサイトに載せるためにやったことを残す。

Flutter の描画を Canvas 2D に置き換える

原典は Flutter の BlackHoleRenderer.draw()。層の順番・係数・色は一切変えず、API だけ差し替えた。数値を触らないと決めたので、見比べても違いが分からない状態を保てている。

Flutter	Canvas 2D	注意した点
ui.Gradient.radial	`ctx.createRadialGradient()`	停止位置の配列をそのまま `addColorStop` に写す
MaskFilter.blur	`ctx.filter = 'blur(7px)'`	未対応環境があるので起動時に一度だけ判定し、駄目なら素の輪郭で描く
BlendMode.plus	`globalCompositeOperation = 'lighter'`	降着円盤だけに掛け、`save/restore` で確実に戻す
HSLColor.fromAHSL	`hsla(...)` 文字列	色相は 0〜360 に丸めてから渡す
Color.lerp	自前の `lerpColor()`	危険度による紫 → 赤 → 金の補間で使う
1 フレーム = 60fps 前提	`step = dt ÷ (1/60)`	原典の `+= 0.02` にこの係数を掛け、高リフレッシュレートでも速くならないようにした

徘徊のさせ方

ゲーム内では重力計算で動くが、サイトには引き合う相手がいない。そこで移動だけを別に書いた。まっすぐ飛ばすと単なるスクリーンセーバーになるので、気まぐれさを足している。

角速度をランダムウォークさせる — 進行方向ではなく「曲がる速さ」に乱数を足し、指数減衰と上限で抑える。向きが滑らかに変わり、カクつかない。
画面端では中央へ向き直る — 跳ね返りではなく、最短方向へ角度を補間して旋回させる。壁で弾んだ瞬間に「壁がある」と分かってしまうため。
歩調をゆらす — 47 秒周期のサインを速度に掛け、ときどき歩みが遅くなる。
上端だけ 64px 立入禁止 — 固定ヘッダーの下に潜るとタップできなくなる。

出るかどうかは抽選にした

当初は夜だけ必ず出していたが、必ず居るものは背景の一部になってしまう。朝・昼・夕は 3 回に 1 回、夜は 2 回に 1 回の抽選に変えた。大きさも blackHoleSizes の tiny / small / medium から等確率で引くので、出会えた日と、出会えた大きさが毎回違う。速度は原典の表どおり大きいほど遅く、tiny は 36px/秒、medium は 12px/秒。

コンテンツの前と後ろを行き来する

ずっと手前にいると邪魔になり、ずっと奥だとほぼ見えない。そこで z-index を往復させている。

負の z-index は body の背景より上・コンテンツより下に入る。だから奥に回しても消えず、半透明のカード越しにぼんやり透ける。

入れ替わりの瞬間だけ薄くする — z-index は補間できないので、0.45 秒かけて不透明度 0.08 まで落とし、いちばん薄いところで層を差し替えてから戻す。層が飛ぶ瞬間が見えない。
当たり判定も一緒に沈める — 奥にいる間はカードの上からは押せず、隙間からなら押せる。見た目と操作感が食い違わない。
周期は天気で変える — 晴れは手前が長くよく見え、曇りは奥が長く隠れがち、雨はせわしなく出入りし、雪はゆっくり沈んでゆっくり浮く。毎回 0.6〜1.4 倍のばらつきも足している。

効いている小技

キャンバス全面はクリックさせない — pointer-events: none にし、本体に追従する丸いボタンだけを transform: translate3d() で毎フレーム動かす。全面を当たり判定にするとページ全体が操作不能になる。
devicePixelRatio は 2 で頭打ち — setTransform(dpr, 0, 0, dpr, 0, 0) で高精細に描きつつ、3 倍以上の端末で無駄に重くしない。
裏に回ったら止める — visibilitychange でループを止め、戻ったときは前回時刻をリセットする。これを忘れると復帰の 1 フレームで大きく瞬間移動する（dt にも 0.05 秒の上限を置いた）。
テーマは body の class を見張る — 設定関数を直接呼ばず MutationObserver で監視するので、AUTO・手動・ランダムのどれでテーマが変わっても追従する。
動きを減らす設定を尊重する — prefers-reduced-motion のときはキャンバスを非表示にし、スクリプト自体を起動しない。

踏んだ罠 classList.remove() は消す対象が無くても class 属性を書き直す。後片付けを毎回無条件に呼んだ結果、MutationObserver → 後片付け → 属性の書き換え → MutationObserver …… とマイクロタスクが循環し、ページが完全に固まった。動作中かどうかのフラグを見て、必要なときだけ片付けるようにして解決。

Decision Log

主要な意思決定ログ

サイトを支える判断を、決定・仮説・結果の 3 点で残す。

motion ブラックホールは「必ず居る装飾」ではなく「たまに出会うもの」にする

DECISION: 夜は必ず出していたのをやめ、時間帯ごとの抽選にした。朝・昼・夕は 1/3、夜は 1/2。大きさも原典の blackHoleSizes から tiny / small / medium を等確率で引き、速度は表どおり大きいほど遅くする。さらに z-index を 30 と -1 で往復させ、コンテンツの前後を行き来させた。
WHY / 仮説: 毎晩かならず同じ大きさで同じように横切るものは、2 回目には目に入らなくなる。実際、実装直後に見たときの「何か動いている」という驚きが、翌日にはもう無かった。出るかどうか・どの大きさか・手前か奥かが毎回変わるなら、見つけたときにだけ嬉しいものになると考えた。ずっと手前にいると読む邪魔になる問題も、同じ仕組みで解ける。
RESULT: 確率・サイズ・速度・奥行きの入れ替わりをヘッドレスブラウザで実測して検証した（抽選 2000 回で 0.32〜0.36 と 0.52、速度は表と 1% 以内で一致）。副産物として、classList.remove() が属性を無条件に書き直すことに起因する MutationObserver の無限ループを検出でき、公開前に潰せた。

goods グッズは「商品」ではなく「作った記録」として独立ページに置く

DECISION: アクリルキーホルダーを作ったタイミングで /goods/ を新設し、トップのヒーローと Labs & Prototypes の両方から導線を張った。EC・カート・価格表示は一切作らず、ステータスは「試作 / 構想」の 2 段階だけを持たせている。配布・販売の可能性は残すが、決まるまでは「未定」と明記する。
WHY / 仮説: キーホルダーは 1 個しか手元になく、売る算段も配る算段も無い状態で出来上がった。この段階で「SHOP」を名乗ると、買えないものを並べた店になって信頼を落とす。一方で置き場所を作らないと、アプリや書籍の副産物として生まれたキャラクターがどこにも残らない。「作ったものの延長線上にある記録」という枠なら、売れる前でも嘘にならないと判断した。
RESULT: グッズ 1 点でもページとして成立し、2 点目以降はカード（.goods-card）を複製するだけで追加できる形に落ち着いた。販売を始める場合も、ステータスを差し替えて導線を足すだけで移行できる。

arch 静的 HTML + FastAPI + DB カードのハイブリッド構成にする

DECISION: ページは静的 HTML（本番は nginx が直接配信）で高速に見せつつ、トップのカードは /v1/content-cards API から公開中のものを動的注入。API 停止時は静かにスキップして静的閲覧を維持する。
WHY / 仮説: 個人運営では「速く・壊れにくく・更新しやすい」の両立が要る。表示は静的で堅牢に、告知やカードだけ DB で運用できれば、重い CMS なしに更新性を得られると考えた。
RESULT: 公開/非公開・予約投稿を管理画面から制御しつつ、バックエンドが落ちてもサイトは閲覧可能な構成に。

design デザインシステム（design-system.css）を単一の基準にする

DECISION: 配色・タイポ・余白・コンポーネントを --nzw-* トークンに集約し、フレームワーク非依存の CSS で全ページ共通化した。
WHY / 仮説: プロダクトごとに世界観を作り込むほど、サイト全体のトーンがばらつく。単一の基準があれば、個性を出しつつ一体感を保てると考えた（この開発ノート群も同トークンで構築）。
RESULT: 各プロダクト LP・開発ノートが同じ土台で作られ、増やしても崩れない基盤を確保。

vision 「代替する AI」ではなく「育てる AI」を全プロダクトの軸にする

DECISION: 各プロダクト（英語学習・習慣・単語・チャットの AI）を、ユーザーの能力を肩代わりするのではなく、伸ばす方向で設計する。
WHY / 仮説: 「あなたが私を必要としなくなる日が、私の成功」。AI が人間の力を奪う流れに対し、逆張りの一貫した思想が差別化になると考えた。
RESULT: Engly のオフライン学習、DayGrid の継続可視化などに思想が反映され、サイト全体の一貫した価値観になっている。

Milestones

これまでの歩み

ブラックホール2026-08-15

Synapse Link の描画をトップページへ移植し徘徊させる／出現を時間帯ごとの抽選に変更／コンテンツの前後を天気に応じて往復

グッズ2026-08-11

/goods/ を新設／第1弾「いくぞ！アクリルキーホルダー」を掲載／配布・販売は未定のまま「作った記録」として公開

開発ノート2026-07

各プロダクトの Product Note（PRD / 設計ノート）を整備・公開

Design System2026

design-system.css で配色・トーンを標準化

書籍発売2026-06-23

『チームに溶け込む AI エージェント開発』を公開

アプリ群2026

Engly / DayGrid / LangBridge / Synapse Link を順次リリース、Flutter Web を同一オリジンに統合

プラットフォーム-

FastAPI + 静的 HTML + DB コンテンツカードのハイブリッドとして運用開始

Roadmap / Open Questions

これから

開発ノートの拡充と、アプリ ⇄ ノートの相互導線の強化。
「育てる AI」の思想を測る指標づくりと、プロダクトへの反映。
zerohalf ブランドとの役割分担の明確化。

未決事項：MISSION（zerohalf 名義）と VISION（nzw.jp 名義）の主語の整理、B2B 導線の設計。