概要
AIツールを利用してジャネの法則の主観的時間を計算するサイトを手軽に作成したので、この記事ではその流れを詳しく紹介する。
開発フロー
下記の手順で開発を行った。
- Stitchにデザインをオーダー
- Stitchで作成したデザインをFigmaにインポート
- Claude CodeからFigma上のデザインを参照し、足場を固める
- Claude Codeで微調整
Stitchにデザインをオーダー
Stitchは自然言語で会話しながらデザインを作ることができる。
Google I/O 2025で話題になっていたので使ってみた次第で、v0（Vercel製のAIデザインツール）と同じような製品である認識である。
下記のように日本語でデザインをオーダーすると、それに応じてAIがデザインを作成してくれる。
出力されたデザインが想定と異なる場合でも、対話してフィードバックを行うことで修正ができる。
Stitchで作成したデザインをFigmaにインポート
Stitchが生成したデザインはFigmaに容易にインポートすることができる。
生成されたデザインの上部にFigmaボタンがあるが、こちらを押下するとクリップボードにFigmaの形式でデザインがコピーされ、Figma上でCmd+VorCtrl+VすればFigmaにデザインを貼り付けることができる。
Claude CodeからFigma上のデザインを参照し、足場を固める
Claude CodeにFigmaと連携するための設定をするために下記を行う。
- Figmaにてpersonal access tokenを生成する
- こちらを参考に
- ※Figmaのpersonal access tokenは作成後の再表示はできないことに注意
- Claude CodeにFigmaのMCP serverと連携するための設定を入れる。下記のコードを実行する
claude mcp add FramelinkFigmaMCP -s local -- npx -y figma-developer-mcp --figma-api-key=${figma PAT} --stdio
上記の設定を行った上で、Claude CodeにFigmaのデザインを有しているurlを貼り付けて命令する。
私は下記のようなプロンプトを実行した。
https://www.figma.com/design/~~~~~~~~~~~~/~~~~~~~~~~~ │
こちらのデザインを実装することは可能ですか？まず実装はせず、可否を答えてください
こうすると、下記のように応答してくれて、正しくFigmaが読み取れていることが確認できる。
⏺ はい、このデザインの実装は可能です。
主な要素は以下の通りです：
- タイトル「時間認識を計算する」
- 説明文
- 生年月日入力フォーム
- 計算ボタン
- 結果表示（累積日、グラフ表示）
- 詳細説明
~~~~
Claude Codeで微調整
デザインを渡して最初の一発目でほぼ完成系のコードを作ってくれたが、表上で動的に行いたかった動作は流石に意図通りではなかったので、微調整した。
具体的には、ある年をhoverしたら、その時の年齢と累積日をtooltipとして表示するとか、それ以前の累積分を緑色に塗るとか、
ある年の上でclickしたら期間の累積日を計算するモードに移行させるとか、
はClaude Codeに指示しながら実装した。
感想・学び
およそ2〜3時間で完成した。正直もう少しかかるかと思ったが、Claude Codeが一発目に出してきた実装がジャネの法則をちゃんと理解した上で実装してきたのでだいぶ短縮できたと思う。
表部分の実装には初めて触れるRechartsを用いたが、Claude Codeの力を借りて短時間で形にすることができた。また、Claude Codeが生成したコードを見て、「なるほど、こうやって書くことができるのね」と学びを得ることもできた。
今回のサイトはデザイン的に凝った部分は皆無なので、Stitchの真価は問えなかった気がするが、デザインに自信がないものにとっては最初のデザインを作ってくれるだけも大変ありがたかった。
まとめ
AIツールを組み合わせることで、短時間でサイトを構築できることを実感した。Stitch、Figma、Claude Codeという最新のツールを使った開発は非常に効率的で、学びも多かった。ぜひ皆さんも試してみてほしい。