はじめに
日々の生活の中で、
「これってなんでこうなっているんだろう？」
「このテーマについて、もう少し深く考えてみたい」
と思うことがあります。
しかし、思いついたことをそのままにしていると、いつの間にか忘れてしまいます。
また、いざ文章にしようとしても、
- 何から考えればいいのかわからない
- 頭の中ではわかっているのに、うまく言葉にできない
- 考えを整理して文章にするまでに時間がかかる
といったこともありました。
そこで、思いついたことをストックし、思考を整理・ブラッシュアップしながら、最終的にnote記事の下書きまで作れる環境を自分で作ることにしました。
それが今回開発した『ストックダッシュボード』です。
今回はコーディング・設計面には触れず、どういった意図があってこの『ストックダッシュボード』を作ったのかを明らかにしていきます。
なぜ開発したのか
今回の開発で一番やりたかったのは、単純に「AIで記事を書くこと」ではありません。
- 自分の思考を整理し、言葉にする習慣を作る
- その上で、自分の思考の記録を外部(データベース)に蓄積し、後々振り返りやすい仕組み化を図る
の2つが目的でした。
普段から何かを考えることはあっても、それを文章として残すところまで続けるのは意外と難しいものです。
そこで、
日常の疑問やモヤモヤとした思いが浮かぶ
↓
それをメモしてストックする
↓
思考を整理する
↓
ブラッシュアップする
↓
言葉にする
↓
記事としてアウトプットする
という流れを一つのシステムにまとめました。
また、「今日は何について考えよう？」と毎回テーマを決めること自体が負担にならないように、過去に登録したテーマからランダムに振り返る機能も作っています。
考えることを始めるまでのハードルをできるだけ下げて、少しずつでも思考を積み上げられるようにすることを意識しました。
使用した技術・開発環境
今回使用した主な技術は以下です。
| 技術・ツール | 用途 |
|---|---|
| Next.js(React) | フロントエンド開発(UI構築) |
| TypeScript | 型安全な開発 |
| Tailwind CSS | UIのスタイリング |
| Chrome拡張機能 | どこからでもダッシュボードを利用可能にするため |
| Google Apps Script（GAS） | バックエンド・API連携 |
| Googleスプレッドシート | データ保存 |
| Gemini API | 思考データから記事を生成 |
| Google Docs | 生成した記事の下書き保存 |
| Bun | パッケージ管理 |
| VSCode | 開発環境(普段から使い慣れているため) |
パッケージマネージャー：Bun
パッケージマネージャーにはBunを使用しました。
Bunを採用した理由は、パッケージのインストールが非常に高速であることに加えて、JavaScript/TypeScriptの開発に必要な機能をまとめて利用できる点に魅力を感じたためです。
個人開発では、環境構築やパッケージのインストールにかかる時間も徐々に積み重なっていくので、できるだけ開発そのものに集中できる環境を選びました。
工夫した点
1. Chrome拡張機能形式で使えるようにした
今回のシステムは、通常のWebアプリではなくChrome拡張機能として利用できるようにしました。
理由は、思いついた瞬間すぐ記録できるようにしたかったからです。
Chrome拡張機能にすることで、ブラウザを使っているときにショートカットからすぐにダッシュボードを開けるようにしました。
「色々思いついたけど、あとで記録しよう」
をできるだけ減らすことが狙いです。
2. Gemini APIと連携
思考を整理した後のアウトプットとして、Gemini APIと連携して記事の下書きを生成できるようにしました。
ただし、AIに最初からすべてを考えてもらうことは目的にしていません。
あくまで、
自分で考える → 整理する → その材料をAIに渡す → 文章としてまとめてもらう
という使い方を想定しています。
思考そのものをAIに丸投げするのではなく、自分の考えをアウトプットするための補助としてAIを使うことを意識しました。
生成した記事はGoogleドキュメントへの保存をできるようにしています。
3. 思考整理・ブラッシュアップのためのフレームワークを適用
今回のシステムで特にこだわったのが、思考を整理するためのフレームワークです。
単純に「テーマについて自由に考えてください」とするだけでは、自分の場合はまず何を考えるべきかを考え過ぎてしまいます。
そこで、
- 理解を深めるフレームワーク
- 言語化フレームワーク
- 思考を構造化するためのフレームワーク
- 自分の考えを深掘りするための特化型フレームワーク
などをシステムに取り入れています。
言語化
言語化については、荒木俊哉さんの
『頭の中がどんどん言葉になる 瞬間言語化トレーニング』
を参考にしました。
構造化
構造化については、荒木博行さんの
『構造化思考のレッスン』
を参考にしました。
書籍で紹介されている考え方をそのまま再現するというより、自分自身が実際に思考トレーニングを行うための形に落とし込むことを意識しています。
実際の画面
ここでは、実際に開発した画面を紹介します。
ダッシュボード
思考ストックの一覧を確認したり、過去のテーマを検索したりできます。
また、上記右部側にある「今日の振り返りテーマを引く」ボタンからこれまでに登録したテーマをランダムに振り返るテーマを選ぶこともできます。
思考整理画面
選択したテーマについて、思考フレームワークに沿って内容を整理します。
最初から完成した文章を書くのではなく、項目ごとに考えていくことで、頭の中にある曖昧な考えを少しずつ整理していきます。
なので、まだ項目が埋まっていなかったり、思考整理が理解フレームワークに集中していることが多々あります。
(特化フレームワークは志望動機を考える際によく使っている)
今後は、言語化・構造化フレームワークも実践していき、自分の思考をブラッシュアップしていきます。
AI記事生成・Googleドキュメント連携
思考整理が終わったら、蓄積したトレーニング内容をもとにGemini APIを利用して記事の下書きを生成します。
生成した文章はGoogleドキュメントへ保存できるため、そこから自分で修正・加筆して記事として仕上げていきます。
そして、最終的に投稿したnote記事のリンクも思考整理画面で管理出来るようにしています。
個人的に、note記事の下書きと本投稿のリンクをこの画面で管理できるようになったのが一番良いポイントで、前までは別々のシートに記載して管理していました。
今後やりたいこと
各思考整理フレームワークを継続して使う
現在は、各思考整理のトレーニングをやったりやらなかったりしています。
せっかく過去のテーマからランダムに選ぶ機能も作ったので、今後は毎日少しでもいいので継続することを目標にしたいです。
システムを作るだけで終わらせず、自分自身が実際に使い続けることを大切にしたいと思っています。
個人的に一番の課題は理解力とフィードバックの軽視だと感じているので、振り返りをすることでより理解を深めていきます。
より高度なAI機能を実装する
現在のAI機能は、Gemini APIと連携して記事を生成するところが中心です。
今後はAIモデルをより深く活用して、自分の思考整理そのものをサポートしてくれる機能を実装したいと考えています。
例えば、これまでに蓄積した大量の思考データをもとに、
- 自分の考えで不足している部分を問いかける
- もう一段深く考えるための質問をする
- あえて反対の視点を提示する
- より難しい問いを出して思考の負荷を上げる
といったことをAIにやってもらいたいです。
単に「考えを整理する」のではなく、
思考の瞬発力そのものを鍛える
ようなシステムにしていきたいと考えています。
各思考整理フレームワークを改良する
実際にトレーニングしてみると、ところどころ「この項目は必要ないかもしれない」と感じる部分がありました。
また、現在は基本的に項目を必要に応じて埋めていく形式なので、思考を整理する自由度が低いとも感じています。
そのため今後は、
- カンバンボードのような自由度の高いUI
- 項目名の変更
- 思考の追加・移動
などを取り入れて、より自分の思考に合った形へ改善していきたいです。
まとめ
今回、思考をストックして整理し、最終的にnote記事としてアウトプットするためのダッシュボードを個人開発しました。
技術的には、
Next.js × React × TypeScript × Chrome拡張機能 × GAS × Googleスプレッドシート × Gemini API
という構成になっています。
ただ、この開発で一番やりたかったことは、便利なツールを作ることだけではありません。
「考える → 整理する → 言葉にする → アウトプットする」という習慣を、自分自身の生活に組み込み、外部に蓄積して後々振り返りがしやすい仕組み化にすることです。
まだ作ったばかりなので、実際に使ってみることで不要な機能や改善したい部分も出てくると思います。
これからも実際に使いながら、思考整理の方法とシステムの両方を少しずつ改善していきます。