見出し画像

【AIの答えのかたち】仕様だけ書かれた答えが、実装を進める(動作仕様書)

📓 振り返り、続かない

月末に、今月のことを振り返ろうとしたことはありますか。

やったこと、うまくいったこと、来月やりたいこと。手帳やメモに書こうとして、毎回ちょっと止まります。

何をどこまで書けばいいのかが、決まっていない。

先月はやったことだけ箇条書きにして終わった。今月は「よかったこと」も書こうとしたけど、途中でめんどうになった。来月の目標は書いたけど、翌月見返さなかった。

フォーマットが毎回違うので、あとから並べて見返しても比較ができない。3ヶ月分を眺めて「成長したかな」と思いたいのに、形がバラバラで何も見えない。

振り返り自体は嫌いじゃないんです。ただ、「どう書くか」を毎回考えるのが重い。


📋 動作仕様書で頼んでみる

ここまでの記事では、AIに「完成形」を返してもらう話が続いていました。コードブロック、HTML、CSS+JS——どれも、受け取ったらそのまま使えるものです。

今回は少し違います。

「完成形」ではなく、「完成形の設計図」を返してもらいます。

動作仕様書というのは、「これはこう動いてほしい」を書いた文書です。画面に何が並ぶか、ボタンを押したらどうなるか、データはどこに保存されるか。コードではなくて、振る舞いを言葉で書いたもの。

💬 プロンプト例

毎月の振り返りノートを作りたいです。
完成したコードではなく、動作仕様書として返してください。

やりたいこと:
・月末に、今月の振り返りを記録するページがほしい
・毎月同じフォーマットで記録したい
・あとから月ごとに見返せるようにしたい
・スマホでも使いたい

🤖 AIの応答例

動作仕様書:月次振り返りノート

■ 概要
毎月の振り返りを、統一されたフォーマットで記録・蓄積し、
あとから月ごとに閲覧できるWebページ。

■ 画面構成

1. 入力画面
   表示される項目(すべてテキスト入力):
   - 対象月(例:2025年4月)
   - 今月やったこと(複数行)
   - うまくいったこと(複数行)
   - うまくいかなかったこと(複数行)
   - 来月やりたいこと(複数行)
   - ひとこと(1行、任意)

   画面下部に「保存」ボタン。

2. 一覧画面
   保存済みの振り返りが、新しい月から順に並ぶ。
   各月はカード形式で表示。
   カードには対象月と「ひとこと」だけ表示。
   カードをタップすると詳細が展開される。

3. 詳細表示
   選択した月の全項目が表示される。
   編集ボタンで入力画面に戻れる。
   削除ボタンで該当月のデータを削除できる。

■ データの扱い
   保存先:ブラウザのローカルストレージ。
   サーバー不要。ネット接続なしで動作する。
   データ形式:JSON。月ごとに1オブジェクト。

■ 表示の条件
   レスポンシブ対応(スマホ縦画面で快適に操作できること)。
   フォントは読みやすさ優先。装飾は最小限。

■ 操作の流れ
   1. ページを開くと一覧画面が表示される
   2. 「新しく書く」ボタンで入力画面に遷移
   3. 各項目を入力して「保存」を押す
   4. 一覧画面に戻り、新しいカードが追加されている
   5. カードをタップすると詳細が展開
   6. 詳細画面から編集・削除が可能

■ 想定していない機能(スコープ外)
   - ユーザー認証(ログイン)
   - 複数端末間の同期
   - PDF出力
   - カレンダー表示

返ってきたものを見て、最初に思ったのは、これ、動かないな、でした。

当たり前です。仕様書なので。ブラウザで開いても何も表示されない。

でも、読んでいて不思議と落ち着きました。自分の「こうしたい」が、ちゃんと画面の形で書き出されている。まだ存在しないページなのに、どこに何があるか見える。その感覚が安心に近かったのかもしれません。


✨ 何が変わったか

自分がやりたかったことは、ぼんやりしていました。「振り返りを記録したい」「同じ形式で」「あとから見返したい」。それくらいです。

返ってきた仕様書では、それが具体的な画面になっていました。

入力画面がある。項目は5つと「ひとこと」。一覧画面がある。カードが月ごとに並ぶ。詳細が見える。編集もできる。

自分では「5つの項目に分ける」とは考えていませんでした。でも読んでみると、「やったこと」と「うまくいったこと」が分かれているのは自然に感じる。AIが自分の曖昧な要望を、項目に翻訳してくれている。

「スコープ外」の欄も効いていました。ログインはいらない、同期もいらない、PDF出力もいらない——やらないことが書いてあると、やることの輪郭がはっきりする。


💡 完成形と設計図の違い

前回までの記事では、AIに頼むと「できあがったもの」が返ってきました。コピーして保存して開けば動く。

今回返ってきたのは「こう動くべきだ」という文書です。まだ何も動かない。

でも、「ひとこと欄はいらないな」と思ったら、その行を消すだけです。「カレンダー表示もほしいな」と思ったら、スコープ外から移動するだけ。コードだったら、どこを触ればいいのかわからなかったかもしれません。仕様書は日本語なので、直したいところがそのまま直せます。

この仕様書を持って、もう一度AIに「これをHTMLで作ってください」と頼めば、コードが返ってきます。設計図を挟んだぶん手間は増えますが、そのかわり「思ってたのと違った」が起きにくい。

完成形をいきなりもらうのが向いている場面もあるし、一度設計図で確認してから進めたい場面もある。自分の「こうしたい」がまだぼんやりしているときほど、設計図のほうが合うのかもしれません。


🌤️ こういう場面に合いそうです

作りたいものがぼんやりあるけれど、いきなりコードで返されると判断しづらい。そういうとき、仕様書という形がちょうどよかったです。

やりたいことがはっきりしていて、すぐ動くものがほしい場面なら、仕様書を挟まず完成形を頼んだほうが速い。

作る前に一枚の地図をもらう感じに近いかもしれません。地図があると、道を歩いているときに「いま自分がどこにいるか」がわかる。


🌙 おわりに

まだ動かない。でも、読むと画面が浮かぶ。

完成形をもらうことばかり考えていたので、この距離感は少し新鮮でした。

答えは、もらう前に眺めるくらいが、ちょうどいいこともあるようです。


あとがき

ここまで読んでくださり、ありがとうございます。

これすごくいいかもですね。
ツール作ったりするときに、動作仕様書をしっかり作っておくと開発中も楽だし、作り終わったあとのマニュアル作成でも使えそう。

今度作るとき試してみたくなりました!

よければご活用ください〜。

「フォロー」や「スキ」をしていただけると励みになります!
今後ともよろしくお願いします!



※シリーズ一覧用のマガジンです。よければ〜


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

緑どんぐり 気に入っていただけたら、チップで応援してもらえると嬉しいです。 いただいた応援は、今後の記事作りの励みになります!

この記事が参加している募集