この記事でわかること
はじめに：雑多ボードってなに？
「雑多ボード」は、学校のプリント、薬のメモ、家事、買い物、やりたいこと……そういう頭の中のごちゃごちゃを、ごちゃごちゃのまま放り込んでおける生活記録アプリです。ブラウザで動く、サーバーに何も送らない、無料の小さなWebアプリです。
これを、プログラミング未経験の私（よりみち研究部の中の人）が、AIと会話しながら作っています。使ったのはClaudeというAI（この記事の時点ではFable 5というモデル）ですが、この記事に書く考え方は、どのAIと作るときでも使えるはずです。
「AIに『アプリ作って』と言えば一発で完成」……とはいきませんでした。でも、コードを1行も書けなくても、考えることと話すことができれば、ちゃんとアプリはできます。その「考えることと話すこと」の中身を、順番に紹介します。
1.目的を、ひとことで言えるまで削る
最初の構想は、正直、欲張りでした。「学校のお知らせも、薬も、家事も、買い物も、防災も、ぜんぶ1つのアプリで管理したい！ AIに相談もできて、通知も来て……」。書き出してみると、機能のリストがどんどん長くなっていきました。
こういうとき、AIは意外なことに「盛り上げ役」ではなく「削り役」として役に立ちます。私たちの壁打ち（後で説明します）では、AIからこんな指摘が返ってきました。
そこから何往復も話して、最終的に目的はここまで削れました。
この一文にたどり着くまでが、実は制作の半分くらいでした。逆に言うと、目的がひとことで言えるようになると、そのあとの判断ぜんぶが速くなります。「この機能いる？」と迷ったとき、目的の一文と照らせば答えが出るからです。
最初から完璧な一文は出ません。「なんのために作るんだっけ？」をAIに何度も聞き返してもらいながら、削っていくのがコツです。
2.機能を足す前の物差し「それは橋渡しの仕事か？」
目的が決まると、そこから「物差し」が作れます。雑多ボードの場合はこれでした。
実際にこの物差しで決まったことを、いくつか挙げます。
| やりたくなった機能 | 物差しで考えると | 結論 |
|---|---|---|
| アプリの中にAIを入れて自動で分類・相談したい | 整理はAIの仕事。アプリが賢くなる必要はない。しかもAPI（外部AIとの接続）を入れるとお金と事故のリスクが増える | 入れない。代わりに「記録をコピーして外のAIに貼る」ボタンを出口にする |
| アプリ内の整理機能をどんどん高機能に | アプリ内の整理は「今日を助ける最低限」でいい。本格的な分析は外のAIに渡せばいい | 最低限だけ。見え方の切り替え（カレンダー・人物・時間・メモの4つ）にとどめる |
| 入力のしやすさ・記録が続く仕掛け | 記録が続かないと橋渡しする材料がなくなる。これは橋渡しを支える仕事 | むしろ優先。入力は日付とメモだけでOKにする |
ポイントは、物差しがあると「機能を減らす」判断に罪悪感がなくなることです。「せっかくAIで作れるのにもったいない」という気持ちは必ず出ます。でも、目的に照らして「これは橋渡しの仕事じゃない」と言えれば、堂々と削れます。
※「AIを入れない」のは雑多ボードの目的に合わせた判断です。アプリによってはAIを入れるのが正解のこともあります。大事なのは物差しを持つことのほうです。
3.壁打ちのやりかた（雑多に話す→AIが整理する）
「壁打ち」というのは、テニスの壁打ちみたいに、AIを相手に考えを投げて返してもらう会話のことです。ここが未経験者にとっていちばん大事な工程だと思っています。
コツは、きれいに話そうとしないこと。人間はごちゃごちゃのまま話す。AIがそれを整理して返す。その往復を繰り返すだけです。実際の壁打ちは、だいたいこんな感じでした。
この往復から実際に生まれた要件を、3つ紹介します。
実例1：本体と子機モデル
上の会話のとおり。「古いスマホが余ってる」「子どもが出さない」というバラバラの悩みが、AIの整理で「本体・子機」という1つの設計になりました。人間側は例え話（電話の本体と子機）を出しただけです。
実例2：「消す」の2段階と、消す前のバックアップ
前に作った別のアプリで、データの読み込み操作でうっかり全部消えかけた失敗がありました。その体験を雑多に愚痴ったら、AIが「アーカイブ（表から消えるがデータは残る）と完全削除（確認つき）の2段階に分けましょう。一括削除の前には必ずバックアップへの案内を出しましょう」と要件に翻訳してくれました。失敗談も立派な材料になります。
実例3：「ニセモノのAI」の相棒
「なにか話しかけてくれる相棒がほしい。でも本物のAIをアプリに入れるのは怖い」という矛盾した希望を投げたら、返ってきたのは「決められた条件で決められた文を返す、ルールベースの相棒」という案でした。誤作動もお金の心配もない、ニセモノだけど安心な相棒。本体には今、その控えめ版（保存したときにひとこと返してくれる）が入っています。
おもしろかったのは公開後です。当初は「この相棒は本物のAIではありません」という注意書きを画面に入れていましたが、あとで外しました。理由は「アプリのどこにもAIと名乗っていないのだから、否定する相手がいない」。正直さは大事。でも、聞かれてもいないことまで説明するのはノイズになる——このバランスも作りながら学んだことです。
・AIの整理が違ったら「そうじゃなくて」と言えばいい。往復が本体
・「いい案だね」で即作らせない。要件がそろうまでは会話に徹する
4.リサーチで裏をとる（似たアプリの失敗から学ぶ）
要件が固まってきたら、作る前に一度、似たアプリを調べてもらうのをおすすめします。雑多ボードでは、AIに「学校プリント管理アプリの市場」を調べてもらいました。すると、衝撃の事実がわかりました。
この結果を見て、雑多ボードの保存方式は迷いなく決まりました。データは端末（ブラウザ）の中だけに保存。サーバーには何も送らない。バックアップは自分の手元にファイルとして書き出す。個人制作のアプリはいつか更新が止まるかもしれません。でもこの方式なら、仮にそうなっても、データはずっとあなたの手元にあります。
リサーチのいいところは、「自分の思いつき」が「根拠のある判断」に変わることです。端末内保存はもともと「お金がかからないから」くらいの理由でしたが、調べたあとは「先輩アプリたちの失敗を避ける設計」として自信を持って選べました。
※AIに調べものを頼むときは「出典のURLも一緒に出して」と頼むのがコツです。AIは時々もっともらしい間違いを言うので、元の記事をたどれる形にしておくと安心です。
5.安全の基本（これだけは守る3つ）
インターネットに公開するものを作るとき、未経験者でも最初から守ってほしいことが3つあります。雑多ボードもこの3つを守って作っています。
その1：APIキー（AIの合鍵）をコードに書かない
外部のAIサービスを使うには「APIキー」という合鍵のような文字列が要ります。これをアプリのコードに直接書いてしまうと、ページを見た人全員に合鍵を配っているのと同じことになり、他人にあなたの財布でAIを使われます。雑多ボードはそもそもAPIを使わない設計にしたので、この心配ごと自体をなくせました。使う場合は、必ず「サーバー側の見えない場所に置く」方法をAIに相談してください。
その2：個人情報の扱いを決めておく
家族の記録アプリは、本名・学校名・住所が入り込みやすい場所です。雑多ボードのデータは端末の外に出ないので、本名を書くかどうかは使う人の判断に任せる形にしました。そのうえで、記録を外のAIに貼って相談するときのために、「上の子」「たろう（仮名）」のような呼び名を使うのがおすすめ、と免責事項で案内しています。アプリの性質に合わせて「どこまで守り、どこから任せるか」を決めておくのが大事です。
その3：データの置き場所を自分で説明できるようにする
「このアプリ、データはどこに保存されるの？」に自分で答えられない状態で公開するのは危険です。雑多ボードなら「端末のブラウザの中だけ。外には送らない」と一文で答えられます。AIに作ってもらったアプリでも、ここだけは必ず「データはどこに保存される？ 外部に送信される通信はある？」とAIに確認して、自分の言葉で説明できるようにしておきましょう。
※このほか、公開ページを検索結果に出さない設定（noindex）や、ユーザーが入力した文字を画面に出すときの安全な扱い方（エスケープ処理）なども、AIに「安全にして」と頼めば入れてくれます。「セキュリティで気をつけることを先に教えて」と最初に聞いておくのがいちばん確実です。
6.小さく作って、育てる
要件を出しきると、作りたいものは20個以上になっていました。全部いっぺんに作ると、完成しないか、バグだらけになります。そこで「最初の版（MVPと呼びます）」と「後日フェーズ」に分けることにしました。
- 最初の版に入れたもの：記録カード（内容だけ書けばOK・日付は自動で今日）、写真の追加と自動圧縮、4つの見え方（カレンダー・人物・時間・メモ）、検索、「今やる」の点灯（いつも1個だけ）、バックアップと復元、相棒のひとこと
- 後日フェーズに回したもの：子機モード、ご褒美演出、音あそび……などなど（これらは「これからの話」です）
分ける基準はシンプルで、「それがないと記録が始められないか？」です。記録さえ始まれば、データは日々たまっていきます。データがたまるほど、外のAIに渡せる材料が増えて、アプリの価値が上がる。つまりこのアプリは、機能ではなくデータと一緒に育つ設計です。
AIと作るスタイルは、この「育てる」と特に相性がいいです。使ってみて不便だったところを、また雑多に話せば、次の版の要件になります。壁打ち→小さく作る→使う→また壁打ち。この輪っかが回りはじめたら、もう立派な「AIとつくる人」です。
7.公開してからが本番だった
この記事は最初、アプリの公開と同時に書き上げました。ところがその日のうちに、記事の中身が古くなりはじめました。スマホで実際に触ってみたら、直したいところが次々に見つかったからです。公開した当日だけで、フィードバック→修正→再公開の往復を10回以上まわしました。
たとえば、こんなことは全部、触って初めてわかりました。
- やさしくしたつもりの「ひらがなだらけのボタン」が、大人にはかえって読みにくい（漢字表記に総入れ替え）
- ていねいに書いたつもりの説明文が、ただのじゃま（「本文（これだけでOK）」→「内容」のように、ラベルは一言に）
- 「戻る」ボタンが押しても効かない（作った側の確認では見つからなかったバグ）
- 免責事項が長すぎて読まれない（大事な3点だけ太字で先頭に）
逆に、公開後の対話から生まれたものもあります。カードの大きさや形が「頭の中での存在感」で変わる遊び、初めて開いた人向けの記入例（WordPressの「Hello World」方式）、ヘッダーの水彩イラスト（これも画像生成AIに描いてもらいました）。どれも、使ってみたあとの雑談から出てきました。
・小さく直してすぐ反映できるのが、AIと作るいちばんの強み（1回の修正が数分〜数十分）
・迷ったら、作った側の理屈より「使う人の感覚」が正しい
8.アイコンをつくる（画像生成AI＋手仕上げ）
公開の翌工程として、ホーム画面に置いたときのアイコンも作りました。これも実話ベースで、流れは3ステップです。
ステップ1：画像生成AIでたたき台を作る
今回はGoogleのGemini（画像生成）を使いましたが、画像が作れるAIなら何でも大丈夫です。頼み方にいくつかコツがあります。
- 正方形でと指定する（アイコンは正方形が基本）
- 文字を入れないと明記する（AIの文字はくずれやすく、あとで自分で入れるほうがきれい）
- 余白を残してと頼む（まわりに余白があると、あとの手直し・トリミングがしやすい）
- 小さく縮んでも見分けられるシンプルな構図にする（要素は少なく、シルエットがはっきり）
- アプリのテーマ色を伝える（雑多ボードならクリーム地に緑とサンゴ色、のように）
ステップ2：Canvaなどで手動仕上げ
AIの出力はあくまでたたき台です。位置の微調整や背景の処理は、人間が手を動かしたほうが速いこともあります。今回もAIの絵をCanvaに持ち込んで、手で整えてから完成にしました。「AIで一発完成」にこだわらないほうが、結果的にきれいで速いです。
ステップ3：ホーム画面で使えるようにする
できたアイコン画像をアプリと同じ場所に置いて、HTMLのhead内に2行足すだけです。
画像は1024×1024の原寸のままでOKです。スマホ側が勝手にちょうどいい大きさに縮小してくれるので、サイズ違いを何枚も用意する必要はありません。これでスマホの「共有 → ホーム画面に追加」をすると、自分のアイコンが並びます。
9.今回使った仕組み（どのAIでも再現できる形で）
最後に、この制作で回していた仕組みを、特定のAIに依存しない形でまとめます。この記事をシェアされた人が、手元のAIが何であってもそのまま真似できることを目指した章です。
基本ループ：これがすべて
「別の目でレビュー」の正体
特別な道具は要りません。同じAIに対して、役割を分けて別々にチェックさせるだけです。「あなたはバグチェック係。この見落としを探して」「あなたはスマホの使いやすさチェック係。ボタンの大きさと文字の読みやすさを見て」のように、係を変えて何回か頼む。1回でぜんぶ書かせるより、はっきり穴が見つかります。雑多ボードでは、この方法で公開前に20件の指摘が出て、公開後にも「操作の組み合わせ次第でデータが消える穴」を1件見つけて塞ぎました。
公開前の安全チェック
公開ボタンを押す前に、APIキー・本名・パスワードのような秘密がファイルに紛れていないかを毎回確認します。自作のチェックスクリプトを用意してもいいし、なければAIに「このファイルに秘密情報が残っていないか確認して」と頼むだけでも効果があります。大事なのは「毎回・公開の直前に」やることです。
動作確認の基本
公開したら、そのURLを自分で開いて表示されるか確認する。地味ですが、これだけでも事故の多くは防げます。余裕があればスマホでも開く。実機で触ると、机上では見えなかった問題が必ず見つかります（7章のとおりです）。
コピペで使える「最初の頼み方」
これからAIとアプリを作る人向けに、最初のメッセージのテンプレを置いておきます。どのAIモデルにもそのまま貼れます。
ポイントは最後の2行です。いきなり作らせず、まず指示書を挟む。指示書を読めば、AIが何を作ろうとしているかが実装前にわかるので、手戻りが激減します。
・実機で触るまで分からないことが、必ずあります
・だから「一発で完成させる」ではなく「小さく作って直し続ける」前提で始めるのがコツです
おわりに
まとめると、AIとアプリを作るのに必要だったのは、コードの知識ではなく、この7つでした。
- 目的をひとことで言えるまで削る
- 迷ったら物差し（うちの場合は「それは橋渡しの仕事か？」）で判断する
- きれいに話さず、雑多に壁打ちする
- 作る前にリサーチで裏をとる
- 安全の基本3つ（合鍵を書かない・個人情報の扱いを決める・データの置き場所を説明できる）を守る
- 小さく作って、育てる
- 公開してからも、使う人の感覚で小さく直し続ける
雑多ボードは公開されたばかりで、ここから育っていく途中のアプリです。うまく育ったら、また続きの記事を書きます。「育たなかった話」になったとしても、それはそれで正直に書きます。それがよりみち研究部のやり方なので。