【VibeCodingChallenge#11】マンダラチャート自動生成

はじめに

このVibeCodingChallengeでは、AIだけでコードを生成し、AIに何ができて、何ができないのか？ を検証していくことを目的にしたチャレンジです。
前回、大谷翔平選手のインタビュー映像を使ったアプリ環境を以下でしていました。

https://zenn.dev/acntechjp/articles/1475a0482bd6cc

そのときに「そういえば、大谷選手って高校のときにマンダラチャート作ってたなぁ」と思い出しました。
あの9×9のマスで目標を分解していくやつです。
で、ふとこう思いました。

これ、AIで自動で作れたら（自分で書くことに意味がある気もするが）便利じゃない？

そんな軽いノリから、マンダラチャートを自動生成するツールを作ってみました。

マンダラチャートとは？

マンダラチャートは、中心に目標を置き、その周囲に8つの要素、さらにそれぞれに8つの具体的行動やアイデアを展開していく、9×9マスの思考整理ツールです。

有名なのは、大谷翔平選手が高校時代に作っていた「目標達成シート」です。

• 中央：最終目標（例：「ドラ18球団」）
• 周囲：必要な要素（例：「メンタル」「体づくり」「人間性」など）
• 外周：具体的な行動（例：「体のケア」「思いやり」など）

目標達成に向けてやるべきことが視覚的に整理できるのが特徴です。

最終成果物:AIマンダラチャート自動生成ツール

いつものように最終成果物です。
https://youtu.be/ubMwD58Ymig

こんな感じのチャートができました

今回使った技術

• Gemini（入力されたテーマから8×8要素を生成）
• ClaudeCode（コード生成）
• HTML/CSS

今回の実装

• 中央の目標を入力すると、周囲の8要素＋その下層64個の具体策をAIが自動生成
• カテゴリ別に色分けされ、進捗状況も色で可視化
• 再生成や修正はGeminiにプロンプトで指示するだけで可能

使ってみた:「早起きしたいです」

実際に「早起きしたいです」と入力してみると、以下のようなチャートが自動で生成されました。

1. 中央の「早起きしたいです」を軸に、「生活リズム改善」「夜の過ごし方」「健康管理」「ツール活用」などの周囲カテゴリが自動展開される。
2. それぞれに対して「軽い運動をする」「寝る前にルーティンを作る」「目覚ましアプリを使う」などの具体的な行動が表示。
3. 進捗状況もクリックひとつで更新できるので、ちょっとした習慣改善や目標管理も。
4. 進捗状況によって色が変わり、直感的に進捗が分かるUI。
5. 変更をしたい場合には、修正指示も可能。
6. 途中まで書いたものを保存することも可能。

おわりに

生成AIは、テキスト生成だけじゃなくて、思考の整理や行動の可視化にも活かせるんだなと改めて感じました。こうした本来人で考えて頑張って書くようなものも、まずはざっくりAIで作って、人で修正する。そんなAIと人の共創が色々なところで起きるといいですね。
今後もAIだけでツールを作っていくチャレンジをしていこうと思いますので、引き続きよろしくお願いします。