片手で30秒で使える、ホーム・入力・履歴の3画面を描こう
今日手元に残るもの
片手で使えるホーム・入力・履歴のスマホワイヤーフレーム、画面遷移、端末内データ表、権限ゼロ設計、削除・初期化方法
時間の目安
最初の完成まで 10〜20分
終わりの合図
開けた・使えた・保存できた
この課題の10ステップを見る
01
今日はこれを作る
最初に、今日手元に何が残れば終わりかだけ見ます。全部を覚える必要はありません。
今日できあがるもの
片手で使えるホーム・入力・履歴のスマホワイヤーフレーム、画面遷移、端末内データ表、権限ゼロ設計、削除・初期化方法
02
材料をAIに渡す
下の材料を用意して、ChatGPTに入れます。
今回使う材料
APP-01の企画カードを三画面の判断基準にします。
材料の入れ方前の完成物を使う
- 1上に書かれた方法で、前の完成物を用意する
- 2材料がそろったら、下のプロンプトを送る
Workが表示されるならそこで続けます。なければChatへ同じ内容を送って進めます。
ChatGPTの設定と詳しい使い方ChatGPTの無料版で始めやすい課題です。上限に達したら、時間を置いて続けます。
03
ChatGPTに送るプロンプト
プロンプトは、ChatGPTにそのまま貼る指示文です。上に書かれた前の完成物を用意してから、下の文を送ります。
このアプリ、ホーム、入力、履歴の三画面だけで一回描いて。片手で押せる大きさ、文字を大きくしても読める、戻れる、何もない時も分かる。消す時は確認を出して。位置情報とか連絡先とか顧客情報はまだ使わず、スマホの中だけに何を残すか表も欲しい。
04
AIの答えを確認して試す
最初から完璧でなくて大丈夫。まず一度、自分で動かしてみます。
1AIから出てくるもの
片手で使えるホーム・入力・履歴のスマホワイヤーフレーム、画面遷移、端末内データ表、権限ゼロ設計、削除・初期化方法
自分で試すのは、これだけ
親指一本で三画面の主操作を指でたどる
文字を大きくした想定で折返しを見る
データ0件と削除確認の画面を開く
全削除から戻れるかと初期化手順を確認する
05
仕上がりをよくするコツ
気になるものを一つ選んで、ChatGPTに伝えます。
ボタンが多い
「各画面で一番使う操作を一つだけ下の押しやすい所へ置いて」
履歴が見づらい
「日付、内容、完了の順で縦にし、横スクロールをなくして」
06
やりがちなミス
見つけた数：0 / 5
当てはまる所を見つけたら、上のコツを使って直します。
これは合格・不合格を決めるものではありません。保存状態を確認しています。
07
ここまでできたら完成
AIの「できました」で終わらせません。実物を開いて使い、この課題の完成条件を確かめます。
三画面の主操作と戻る順を指でたどれた
空状態・削除確認・初期化を確認できた
保存項目と権限ゼロから始める理由が一枚で読めた
Workで作った物を保存するプロンプト
三画面、遷移図、端末内データ表、権限ゼロ設計、削除・初期化方法を「02_三画面設計」に保存して。
共通の保存メモChatでできた物は、自分で保存
Chatの返答欄にファイルができたらダウンロードして「完成」フォルダへ移します。文章だけなら、全文をコピーしてテキストやWordへ貼って保存します。保存した物をもう一度開けた時に「残せた」とします。
できたことを手元に残す
作ったものや気づいたことを、自分のメモに残しておきましょう。
08
自分の仕事なら
今作ったものを、明日の仕事で使える形に変えます。
現場メモへ使うなら、写真なしの短文一項目で先に操作時間を確かめます。
本物の顧客名、個人情報、社外秘の資料へ置き換える前に、会社のルールと閲覧権限を確かめます。
09
つまずいたところを整理する
どこまでできて、どこで止まったか。短い言葉で大丈夫です。
うまくいかなかった点をメモする
「やりたかったこと」「試したこと」「実際の結果」を並べると、次に試すことが見つけやすくなります。
メモは自分の端末へ。サイトへの質問の受付は終了しています。
10 / 任意
次に進みたい方へ
ここで完成です。続ける方だけ、下の文を送ります。
次にすること
自分の名前と色で、最初の画面を動かそう
続けるための追加プロンプト
追加のプロンプト
教材スターターを開いて、アプリ名、見出し、色、アイコン、サンプルを自分用に変えて動かして。今はPWAなのかプレビューなのかも画面に出して。
進め方は3つだけ
- 1今使っているChatまたはWorkを、そのまま続ける
- 2下の追加プロンプトをコピーして送る
- 3出てきた物を見て、必要な所だけ一つ直す
今作った物の、ここを使います
三画面設計、データ項目、対象端末、開始パックを使います。
できるようになること
紙の設計が、現在の環境を正しく表示する起動画面になります。
この内容を詳しく学ぶ教材
APP-03「自分の名前・色・アイコンで、アプリの最初の画面を動かそう」