CONTENT
ここから
いきなりコードを書かない
アプリを作るとき、すぐにコードを書きたくなります。でも、少しだけ待ちます。先に、
画面に何を置くか
を決めます。これを画面設計と呼びます。
画面設計とは何か
画面設計とは、
このアプリの画面に何を表示するか
を決める作業です。たとえば、SNS投稿メーカーなら必要なのはこれです。
タイトル
説明文
入力欄
ボタン
結果表示エリア
これだけで、アプリの形が見えてきます。
今日作るアプリは1画面でOK
今日は大きなアプリを作りません。1画面で完結するアプリを作ります。基本の形はこれです。
アプリ名
短い説明
入力欄
ボタン
結果表示
これで十分です。
例：SNS投稿メーカー
画面に置くもの
| 場所 | 内容 |
|---|---|
| 上 | SNS投稿メーカー |
| その下 | テーマを入れると投稿文を作ります |
| 中央 | 投稿テーマの入力欄 |
| その下 | 投稿文を作るボタン |
| 下 | 生成された投稿文 |
画面の流れはこうです。
投稿テーマを入力
↓
ボタンを押す
↓
投稿文が表示される
例：課題優先順位診断アプリ
画面に置くもの
| 場所 | 内容 |
|---|---|
| 上 | 課題優先順位診断 |
| その下 | 今やるべき課題を整理します |
| 中央 | 課題名、締切、難しさ |
| その下 | 優先順位を決めるボタン |
| 下 | 今日やるべき順番 |
画面の流れはこうです。
課題情報を入力
↓
ボタンを押す
↓
優先順位が表示される
画面設計の基本パーツ
初心者は、次の5つだけ覚えればOKです。
| パーツ | 役割 |
|---|---|
| タイトル | 何のアプリか伝える |
| 説明文 | 何ができるか伝える |
| 入力欄 | ユーザーが文字を入れる |
| ボタン | 処理を始める |
| 結果表示 | 答えを見せる |
今日はこの5つで作ります。
Geminiに画面設計を相談する
Geminiに次のように聞きます。
私は初心者です。
次のアプリの画面設計を考えてください。
アプリ名：
SNS投稿メーカー
目的：
投稿テーマを入力すると、SNS投稿文を作る
今日中にHTML、CSS、JavaScriptで作れるように、
1画面だけで完成する構成にしてください。
必要な画面パーツを
タイトル、説明文、入力欄、ボタン、結果表示
に分けて整理してください。
Geminiの回答をそのまま使わない
Geminiはたくさん提案してくれます。でも、全部使わなくて大丈夫です。今日は、増やしすぎないことが大事です。
削ってよいもの
ログイン
会員登録
画像アップロード
データベース
ランキング
通知
まずは1画面。まずは完成です。
画面設計シート
次の表を埋めてください。
| 項目 | 内容 |
|---|---|
| アプリ名 | |
| 画面の説明文 | |
| 入力欄1 | |
| 入力欄2 | |
| ボタン名 | |
| 結果表示に出すもの |
記入例
| 項目 | 内容 |
|---|---|
| アプリ名 | SNS投稿メーカー |
| 画面の説明文 | テーマを入れるとSNS投稿文を作ります |
| 入力欄1 | 投稿テーマ |
| 入力欄2 | 投稿の雰囲気 |
| ボタン名 | 投稿文を作る |
| 結果表示に出すもの | SNS投稿文 |
完了条件
次の5つが決まればOKです。
- アプリ名
- 説明文
- 入力欄
- ボタン名
- 結果表示
次のページでは、この画面設計をもとに、HTML CSS JavaScriptで土台を作るに進みます。