見出し画像

自作ツール「思考の庭」を作る①

数日前からClaudeでバイブコーディングを行い、自作のメモツールを作っています。

UIが薄くて見づらい

Cosenseというメモツールがありますが、見た目はCosenseをイメージしています。メモがカード型の表示で並ぶのが見やすいと感じていますので、真似てみました。

まだ8回ほどプロンプトを回しただけなので、完成度は高くありません。

個人的に気に入っているのは、カードの入力欄が常時表示になっているところです。私はメモを素早く取らないと、取ろうとしたメモの内容を忘れてしまうのでこのUIは嬉しいです。

というのも、このメモ作成フォームを常時表示にしたのはClaudeの提案なので、私はとりあえず実装をお願いしただけでした。

コンセプトも決めずにとりあえずまず作ってみましたが、Claudeとやり取りを重ねるうちに自分が作りたいツールの形が見えてきました。

思考の庭というコンセプト

私が「思考の庭」を作り始めたときには、思考の庭というコンセプトはありませんでした。これは偶然から生まれました。

最初はただただ、メインビューがカード型のメモツールを作り、そのUI全体を緑で統一していました。やり取りしている中で、ClaudeがUIの色や、私のツールの仕様の意見をまとめて「思考の庭」というこのツールの骨子を作り、実装しました。

メカニズムの導入

ただただメモをするツールであれば、他のツールを使えばいいので、何か面白いメカニズム(ゲームにおけるゲームメカニズム的な)を導入したいと考えました。

庭の容量バー

このツールには普通では10件しかメモを作成できません。メモにはメモの成熟度によってステータスが割り当てられるようになっていて、の4つの段階があります。

実のステータスになると収穫されたという判定になり、その分の庭の容量が空いて、種・芽・花のいずれかのメモを作成できるようになります。

水やり

庭に植えた作物の成長には水が欠かせませんよね。水やり機能も入れてみました。

メモの中で最も放置されている(更新されていない)メモが、庭の容量バーの下の表示されるようになっています。最後に更新したのが何日前なのかも表示されます。メモを見返すためのリマインド機能として実装してみました。

ちょっとゲームっぽいなと感じた

Claudeへのプロンプトに用いた「メカニズム」という言い回しは、他の適切な用語が思いつかなくて使い始めましたが、意外としっくりきています。

私はゲームが大好きで、ゲームデザイン論にも興味があるので、ゲームメカニズム的な用法で使うメカニズムが気に入っています。

またゲーミフィケーションにも興味があるので、ゲームのように楽しみながらメモを育てられるツールが作れたら良いなと思います。

いいなと思ったら応援しよう!