無料座学 2 / 4
作りたいアプリを
日本語で整理する
AIにいきなり「アプリを作って」と頼むと、かなりの確率で期待と違うものが出ます。
まずは、目的・利用者・入力・出力・画面を日本語で整理します。
企画テンプレート
まず下の項目を埋めます。難しい言葉は不要です。
ただし、曖昧なままだとAIの回答も曖昧になります。ここが最初の勝負です。
【作りたいアプリの企画メモ】
1. アプリ名：
例）防災チェックリスト
2. 目的：
例）家庭や地域で防災準備の確認をしやすくする
3. 利用者：
例）スマホを使う一般利用者、講座参加者
4. 入力する内容：
例）水、食料、ライト、モバイルバッテリー、避難場所の確認状況
5. 出力する内容：
例）準備できている項目数、足りない項目、次にやること
6. 画面：
例）説明画面、チェックリスト画面、結果画面
7. 入力させない情報：
例）氏名、住所、電話番号、メールアドレスなどの個人情報
8. スマホ対応：
例）スマホで縦向きに見やすく表示する
個人情報を取らない方針：
無料講座のサンプルでは、氏名・住所・電話番号・メールアドレスなどを入力項目にしません。
まずは安全な題材で、AIへの頼み方を学びます。
AIに仕様を渡す基本形
企画メモができたら、AIに「何を作るか」をまとめて渡します。
ここでは、いきなり高機能にせず、HTMLだけで動く簡単な画面から始めるのが安全です。
最初のプロンプト例
あなたは初心者向けのWebアプリ作成を支援する先生です。
以下の条件で、HTMLだけで動く簡単なWebアプリのサンプルを作ってください。
【作りたいもの】
防災チェックリストアプリ
【目的】
家庭や地域で、防災準備の確認をしやすくする
【利用者】
スマホを使う一般利用者
【必要な画面】
・使い方説明
・チェックリスト
・結果表示
【チェック項目】
・水を準備している
・食料を準備している
・ライトを準備している
・モバイルバッテリーを準備している
・避難場所を確認している
【条件】
・氏名、住所、電話番号、メールアドレスは入力させない
・スマホで見やすくする
・HTML、CSS、JavaScriptを1つのHTMLにまとめる
・初心者にも分かるようにコメントを入れる
注意：
最初からログイン、データベース、決済、外部公開まで頼むと危険です。
入門では「1つのHTMLで動く小さな試作品」から始めます。
プロンプト集：困ったときの聞き方
画面を見やすくしたい
このHTMLを、スマホで見やすいデザインに直してください。
文字を大きめにして、ボタンを押しやすくしてください。
項目を追加したい
チェック項目に「常備薬を確認した」を追加してください。
既存の動作は壊さないでください。
説明を追加したい
最初に、このアプリの目的を説明する文章を追加してください。
初心者にも分かるやさしい表現にしてください。
安全確認をしたい
このアプリに、個人情報やセキュリティ上の問題がないか確認してください。
初心者向けに危険な点を説明してください。
次へ：画面・ボタン・入力欄を考える
次のページでは、AIが作った画面に対して、ボタンや入力欄をどう追加し、スマホでどう確認するかを説明します。
プライバシーポリシー