Haruto Miyakawa
知名度を広げるために note での発信を始めたものの、一本書くたびに数時間が溶けていくのが苦痛でした。特に二つの工程が重荷だった。ひとつは、リポジトリや手元の素材を「読みやすい記事の形」に整える整形作業。もうひとつは、書き上げた後に毎回 AI へ添削を投げ、表現を直していた往復です。これを毎回手作業でやる代わりに、整形と推敲を執筆フローへ最初から組み込んだツールが欲しい——つまり私自身が、つむぐの最初のユーザーでした。
既存の AI ライティングツールの多くは「テーマを渡すと丸ごと書いてくれる」方向に振れています。つむぐはその逆を狙いました。主導権は常に書き手に残す。AI は変えたい箇所だけを受け取って書き換え、構成については批評ではなく観察を返す。マスコット「つむぎ」は派手なエフェクトを持たず、AI の状態（待機・思考・執筆・完了）を mood として静かに可視化するだけの黒子に徹します。「AIを魔法のように振る舞わせると、ユーザーがツールに振り回される」——この一点を避けることが、設計全体の背骨になっています。
個人開発です。企画と設計の草稿は自分、その草稿を読みやすい形に整えるのを Claude、実装を Claude Code、デザインモックを自分と ChatGPT で作り Claude Design で仕上げる、という分担で進めました。AI を道具として使い分けつつ、「何を作るか・どこで妥協しないか」の判断はすべて自分が下しています。
正直に言えば、着手時点で Tiptap の存在すら知りませんでした。自分で深く習熟したわけでもありません。それでも採用できたのは、実装が多少重くても Claude Code が書き切ってくれるという前提があったからです。だからこそ私は「自分が書きやすいか」ではなく、土台として正しいかだけで選べました。ProseMirror の構造化 DOM を保ちながら Headless で Tailwind と干渉しない——この性質は、将来 Phase 7 以降で画像挿入や続編生成を足すときに効きます。汎用性の低い土台を選んでいたら作り直しになる。実装の労力を AI が肩代わりしてくれる時代だからこそ、人間の判断は「目先の書きやすさ」から「長期の拡張耐性」へ寄せられる——その判断をした選定でした。
Gemini API の方が安く、ローカルモデルを動かせば費用はゼロにできることは分かっていました。それでも Claude を選んだのは、つむぐの目玉が「文章作成」だからです。エッセイ調の日本語を生成させたとき、語の選び方が最も落ち着いていたのが Claude でした。コア機能の品質を価格で妥協したら、ツールそのものの存在意義が薄れる。加えて、tool_use でスタイル解析や記事生成のレスポンスを JSON Schema に縛れること、SSE ストリーミングが安定していることも、手作業のパースを消すうえで効きました。
AI つむぎは、選択した段落だけを受け取って書き換えます。ここで素朴に実装すると、H2 見出しに相談したのに普通の段落になって返ってくる、といった崩れが起きる。これを防ぐため、ProseMirror の depth で doc 直下のブロックタイプを検出し、置換 HTML を組み立てる際に親要素（blockquote・list・heading）を壊さないよう分岐させました。「見出しに相談したら見出しのまま戻る」という、ユーザーから見れば当然の体験を、構造を理解した実装で裏から支えています。
開発途中で CSS Modules への移行を検討しました。けれど Tailwind v4 の @theme 機能だけで「トークンの一元定義」と「型のように縛られたユーティリティ」の両方が成立すると判断し、移行を見送りました。色を #XXXXXX で直書きする逃げ道を塞ぐと、デザインの一貫性は自然に保たれる。「移行するのが定石だから」ではなく「この機能で意図が達成できるか」で決めた選択です。
——これら四つの判断は、すべて同じ一本の軸で貫かれています。目先の楽・安・定石よりも、長期の正しさを取る。これは作品に掲げた「妥協なき創作のために、技術を磨く」というモットーを、実装の現場で守った結果です。
v2.0 まで完成し、Phase 1 から 10 までのロードマップを構造化しています。デザインは v2.0 で全面刷新し、独自カラートークン・Noto Serif JP を基調にした組版・オリジナルマスコットを実装しました。現時点では商用化や一般公開は狙わず、ポートフォリオであり自分専用の執筆ツールとして設計しています。利用者数を競う作品ではなく、自分の課題を起点に、技術選定の判断を一つずつ言語化して積み上げた「設計の作品」です。
ご質問やご依頼など、お気軽にご連絡ください。
GitHub で見る