こんな人に役立ちます
メモやURLを保存しても、後から見返さず行動につなげられない人
この記事を読むと、情報整理ツールを作る前に、保存項目だけでなく「次に何をするか」を設計する必要があると分かります。
はじめに
AIライフラボの実験ログ No.006 では、AIエージェント（Codex）と一緒に、保存機能のある小さなWebアプリを作りました。
今回作ったのは、メモやURLを保存し、カテゴリ、重要度、次の行動で整理できる「情報整理ダッシュボード」です。
今回の目的は、完璧な情報管理ツールを作ることではありません。
「AIエージェントと一緒なら、ブラウザ内に保存できる小さなWebアプリを作れるのか」
これを検証することです。
今回作ったもの
今回の成果物は、ブラウザで動く情報整理ツールです。
イメージとしては、普通のメモ帳よりも入力項目が整理されているメモ帳です。
ただ自由にメモを書くのではなく、タイトル、URL、カテゴリ、重要度、次にやることを分けて保存できるようにしました。
入力できる内容は以下です。
- タイトル
- URL
- メモ
- カテゴリ
- 重要度
- 次にやること
できることは以下です。
- 情報を保存する
- 保存した情報を一覧で見る
- カテゴリで絞り込む
- 個別に削除する
- 全削除する
- 保存した情報を整理するためのAIプロンプトを作る
なぜこのテーマにしたのか
実験4と実験5では、入力した内容をもとに、目標や旅行プランのたたき台を出すツールを作りました。
どちらもブラウザで動くツールとしては成立しましたが、基本的には「入力して出力する」タイプでした。
そこで実験6では、少しアプリらしさを増やすために、保存機能に挑戦しました。
普段、AI活用やツール制作を続けていると、
- あとで読みたい記事
- 思いついたツール案
- noteやサイトの記事ネタ
- 試したいAI活用
- 仕事や生活の改善メモ
が増えていきます。
それらを一か所に置き、次の行動につなげるための小さなダッシュボードとして作りました。
普通のメモ帳でも情報は残せます。
ただ、自由に書けるぶん、あとで見返したときに「これは何のメモだったのか」「次に何をするつもりだったのか」がわからなくなることがあります。
そこで今回は、保存するときに自然と整理されるように、入力欄をあらかじめ分けることにしました。
今回の設計
今回のMVPでは、ログイン機能やクラウド同期は作りません。
データベースも使いません。
その代わり、ブラウザのlocalStorageを使って、保存した情報を同じブラウザ内に残せるようにしました。
今回作る範囲は以下に絞りました。
- 情報を登録できる
- ブラウザ内に保存できる
- 一覧で見返せる
- カテゴリで絞り込める
- AIに整理してもらうためのプロンプトを出せる
「本格的な情報管理サービス」ではなく、「保存機能のある小さなWebアプリ」を作る実験として設計しています。
このツールの役割は、メモを永久に管理することではありません。
どちらかというと、あとでAIに整理してもらうためのメモ箱です。
気になった情報を一度ここに入れておき、たまったらAI整理プロンプトをコピーして、ChatGPTなどに渡す流れを想定しています。
AIエージェントに任せたこと
今回、Codexには以下を任せました。
- ツールの仕様整理
- HTML/CSS/JavaScriptの作成
- localStorageを使った保存機能の実装
- 一覧表示と削除機能の作成
- カテゴリ絞り込みの作成
- AI整理プロンプトの生成
- READMEの作成
- ローカルでの動作確認
- Gitの初期化と初回コミット
一方で、人間側で判断したこともあります。
- 保存機能に挑戦すること
- クラウド同期までは作らないこと
- 情報整理と次の行動に役割を絞ること
- スクリーンショットで見たときに前回と違う配色にすること
実際にできたこと
今回は、入力した情報をブラウザ内に保存し、一覧で見られる状態まで作れました。
カテゴリによる絞り込み、個別削除、全削除もできます。
さらに、保存した情報をAIに渡して整理するためのプロンプトも自動で作れるようにしました。
実験4・5よりも、少し「アプリらしい」ものに近づいたと感じます。
また、保存した情報をもとにAI整理プロンプトを作れるので、ただのメモで終わらず、次の行動へつなげやすくなりました。
使ってみた感想
実際に使ってみると、メモやURLを一時的に置いておく場所としては使えそうだと感じました。
特に、ただ保存するだけでなく「次にやること」まで一緒に残せる点は便利です。
普通のメモ帳だと、あとから見返したときに「これは読むだけなのか、試すのか、記事にするのか」が曖昧になりがちです。
今回のツールでは、カテゴリや重要度、次にやることを分けて入力するので、保存する時点で情報が少し整理されます。
また、保存した情報をAI整理プロンプトにまとめられるので、あとからChatGPTなどに渡して整理する流れも作れます。
その意味では、普通のメモ帳というより、「あとでAIに整理してもらうためのメモ箱」に近いと感じました。
一方で、現時点ではブラウザ内に保存しているだけなので、別の端末では見られません。
ブラウザのデータを消すと、保存した内容も消える可能性があります。
そのため、現時点では「本格的な情報管理ツール」ではなく、「個人で試すための軽いメモダッシュボード」に近いです。
わかったこと
AIエージェントと一緒に、保存機能のある小さなWebアプリを作ることはできました。
localStorageを使えば、データベースを使わなくても、ブラウザ内に情報を残すことができます。
これは、個人で小さな試作品を作るうえではかなり便利だと感じました。
また、情報整理ツールの価値は、保存できることだけではないとわかりました。
大事なのは、保存するときにどんな項目で入力するかです。
入力欄を分けるだけでも、あとで見返しやすくなり、次の行動につなげやすくなります。
ただし、保存機能が入ると、入力、表示、削除、データの扱いなど、考えることが増えます。
「動くもの」は作れますが、安心して長く使えるツールにするには、バックアップや同期、データの消えにくさも考える必要があります。
次に改善したいこと
今後改善するなら、以下を試したいです。
- 検索機能を追加する
- カテゴリを自由に追加できるようにする
- 編集機能を追加する
- CSVやMarkdownでエクスポートできるようにする
- 重要度や日付で並び替えできるようにする
- AI APIと連携して自動で要約・分類できるようにする
- スマホでさらに見やすくする
今回の結論
AIエージェントだけで、保存機能のある小さなWebアプリは作れました。
ただし、今回作れたのはブラウザ内保存のMVPであり、クラウド同期や長期的なデータ管理まではできていません。
今回の成果物は完成版の情報管理サービスではなく、AIと一緒に保存機能のあるWebアプリを作れるかを検証するためのMVPとして公開します。
実験データ
- 実験番号：No.006
- テーマ：AIエージェントだけで「情報整理ダッシュボード」は作れるか？
- ステータス：制作・公開準備
- 使用AI：Codex
- 成果物：ブラウザで動くWebアプリ
- 使用技術：HTML / CSS / JavaScript / localStorage
- GitHubリポジトリ：公開後に追記
- 公開URL：公開後に追記
- 今回の結論：AIエージェントだけで、保存機能のある小さなWebアプリは作れた
コメント