自分専用アプリの
つくり方キット

あなたは、私専用のアプリを一緒に考える相棒です。
私はプログラミングを知りません。カタカナの専門用語は使わず、普通の日本語で話してください。

これから私に面談をして、「私が作るべきアプリ」を1つ決めてください。
あなたのゴールは、私の代わりにアプリを企画できるくらい、私の毎日を分かることです。

【必ず聞き出すこと】※全部そろうまで面談を終えないでください
1. 場面 … 困った（またはこうなったら嬉しいと思った）直近の、実際の1回
          いつ・どこで・何をしていて・何が嫌だったか
2. いまのしのぎ方 … 今それを、どうやって済ませているか
3. 頻度 … それは週に何回、月に何回くらい起きるか
4. 解決の形 … アプリが何をしてくれたら「助かった」と言えるか
5. 使う場所 … パソコンか、スマホか、両方か。どこで開くか
6. 優先順位 … 絶対に外せないこと1つと、あったら嬉しい程度のこと

【聞き方のルール】
- 質問は必ず1問ずつ。2問まとめて聞かない
- 毎回、答えの候補を「1.」「2.」「3.」と番号で3つ出す。
  私が番号だけで答えられるようにする。当てはまらなければ私が自分で書く
- 私の答えが曖昧なとき（「なんとなく」「いろいろ」「たまに」など）は先に進まず、
  「その中で一番最近あった1回」を必ず話させる
- 1つ聞き出すごとに「つまり◯◯ということですね」と自分の言葉で言い換えて確認する。
  私が「そう」と言うまで、その情報を確定にしない
- 「どんなアプリが欲しいですか」と私に聞くのは禁止。
  アプリの形を考えるのはあなたの仕事。私は自分のことだけ話す
- 質問の数に上限はない。ただし6つ埋まったら、すぐ次へ進む（だらだら聞かない）

【面談が終わったら】
1. 集めた内容を「面談メモ」として、6項目で私に見せる
2. 抜けや思い込みがないか自分で点検し、怪しければあと1〜2問だけ聞く
3. 私に合うアプリ案を3つ出す。それぞれ次を書く
   ・名前（仮）
   ・何をしてくれるか（2行）
   ・さっきの「場面」がどう変わるか（1行）
   ・作りやすさ（★1〜3）
4. あなたのおすすめを1つと、その理由を1行
5. 私が選んだら、デスクトップに、アプリの名前でフォルダを作る。
   面談メモごと、その中に「01_アプリ案.md」として保存する
   ※これから作るファイルは、すべてこのフォルダに入れていく
   ※いま開いている場所がデスクトップでなければ、作る前に私に知らせてください

では、1問目をどうぞ。

デスクトップにある「アプリのフォルダ」の中の「01_アプリ案.md」を読んでください。
（デスクトップにアプリのフォルダが2つ以上あれば、どれの続きか私に聞いてください）
これから作るファイルも、すべて同じフォルダに保存してください。

私はプログラミングを知りません。専門用語なしで、このアプリの「設計図」を作ってください。

【設計図に書くこと】
1. このアプリは何をするものか（3行以内）
2. 画面に何があるか（開いたときに見えるもの・ボタン・入力欄）
3. 使う流れ（開く → 何をする → 何が起きる、を順番に）
4. 覚えておくこと（何を記録するか。消えたら困るのはどれか）
5. ★機能ごとの「できたと言える条件」
   目で見て○×が付けられる形で書くこと
   例：「記録ボタンを押すと、下の一覧が1行増える」
       「閉じてもう一度開いても、さっきの記録が残っている」
   ※STEP4で、あなた自身がこれを使って完成チェックをします
6. このアプリの型を、あなたが判定する
   A「1枚アプリ型」＝ブラウザで開く1つのファイルで完結する（あとでスマホでも使える）
   B「道具型」＝パソコンの中で動かす（動画・音声・大量のファイルをまとめて扱う場合）
   どちらか＋理由を1行

【ルール】
- 01_アプリ案.mdに書いてあることを、もう一度私に聞かない（二度聞き禁止）
- 読み取れないこと・迷うことは、勝手に決めずに私に聞く。
  質問は1問ずつ、番号で答えられる選択肢を付けて
- 機能を盛らない。「まず毎日使える最小限」で設計する。
  それ以外は「あとで足せること」として、設計図の一番下に別枠でメモする
- 設計図ができたら、まず私に分かる言葉で説明する。
  私が「OK」と言ってから「02_設計図.md」に保存する

デスクトップにある「アプリのフォルダ」の中の「02_設計図.md」を読んでください。
これから作るファイルも、同じフォルダに保存してください。

このアプリのメイン画面を、デザイン違いで3つ作って、実物で見せてください。

【やること】
1. 中身は同じで、見た目だけ変えた3案を作る
   案A：白ベースで、静かで見やすい
   案B：暗い背景で、集中しやすい
   案C：明るくて、開くのが楽しくなる
   （このアプリにもっと合う方向があれば入れ替えてOK。ただし必ず3案）
2. 3案を縦に並べて1つのファイルにまとめ、「03_デザイン見本.html」として保存する
3. 保存したら、私がそれをどう開けばいいかを1行で教える
   （私のパソコンがWindowsかMacかを確認して、正しい開き方を書くこと）
4. 私が「A」「B」「C」で答えたら、選んだデザインの特徴
   （色・文字の大きさ・余白・全体の雰囲気）を「03_デザイン.md」にメモする

【ルール】
- 見本は見た目の確認用。ボタンはまだ動かなくていい
- 文字は大きめに。スマホの画面幅でも読める前提で作る
- 3案とも、このアプリの実際の画面として作る（意味のないサンプル文字で埋めない）

デスクトップにある「アプリのフォルダ」の中の「02_設計図.md」と「03_デザイン.md」を読んで、
アプリを完成させてください。できたファイルも、同じフォルダに保存してください。

【作り方のルール】
- 「1枚アプリ型」なら：「app.html」という1つのファイルだけで完結させる
  ・会員登録、ログイン、外部への通信が必要な作りにはしない
  ・入れた記録は、閉じてもう一度開いても残るようにする
- 「道具型」なら：動かすのに必要なものは、あなたが全部そろえる
  最後に「これを打てば動く」という1行を私に教える
- 画面に出る文字は全部日本語。専門用語は使わない

【完成の条件】★ここが一番大事です
「できました」と言う前に、次を自分で確かめて、結果を表にして報告してください。
1. 02_設計図.mdの「できたと言える条件」を1つずつ実際に試して、○か×を付ける
2. 実際に開いて（動かして）、エラーが出ないか見る
3. 記録を入れて、いったん閉じて、もう一度開いても残っているか（1枚アプリ型のみ）

×が1つでもあれば、自分で直してから、もう一度確かめ直す。
全部○になるまで、私に「できました」と言わないでください。

最後に、私が次にやることを1行だけ教えてください。

デスクトップにある「アプリのフォルダ」の中の app.html を、スマホでも使いやすくしてください。

- 指で押しやすいボタンの大きさにする（小さい文字リンクで操作させない）
- 画面が狭くても、横にはみ出したり、重なったりしないようにする
- 文字が小さくなりすぎないようにする
- 画面の上下に余白を残す（スマホは端が押しにくいため）

【確認】
終わったら、パソコンの画面幅とスマホの画面幅の両方で表示を確かめて、
崩れていないか結果を報告してください。
機能と、今ある記録は変えないでください。

デスクトップにある「アプリのフォルダ」の中に「公開」という名前のフォルダを作って、
app.html を「index.html」という名前に変えて、その中にコピーしてください。
（元の app.html は、そのまま残してください）

できたら、「公開」フォルダの場所を教えてください。