書き間違いを、その場でやさしく教える問い合わせ欄にしよう
今日手元に残るもの
必須・文字数・メールの形・希望日の4種類の条件が付き、間違えた欄の下に直し方が出る入力確認付きフォームと、欄ごとの条件を並べた「入力チェック表.md」
時間の目安
最初の完成まで 25〜35分
終わりの合図
開けた・使えた・保存できた
この課題の10ステップを見る
01
今日はこれを作る
最初に、今日手元に何が残れば終わりかだけ見ます。全部を覚える必要はありません。
今日できあがるもの
必須・文字数・メールの形・希望日の4種類の条件が付き、間違えた欄の下に直し方が出る入力確認付きフォームと、欄ごとの条件を並べた「入力チェック表.md」
02
材料をAIに渡す
下の材料を用意して、ChatGPTに入れます。
今回使う材料
Lv.82で保存した6項目の入力フォームと「項目メモ.md」を同じWorkで開き、欄ごとに条件を足します。
材料の入れ方前の完成物を使う
- 1上に書かれた方法で、前の完成物を用意する
- 2材料がそろったら、下のプロンプトを送る
Workが表示されるならそこで続けます。なければChatへ同じ内容を送って進めます。
ChatGPTの設定と詳しい使い方ファイル変更を何度も行うため、有料版がおすすめです。使える量はプラン画面で確認してください。
実際のファイルやコードを扱うなら、Codexがおすすめです。
03
ChatGPTに送るプロンプト
プロンプトは、ChatGPTにそのまま貼る指示文です。上に書かれた前の完成物を用意してから、下の文を送ります。
空欄のまま進まれるのと、メールアドレスが打ち間違ってて折り返せないのが一番困る。欄ごとに、入れてなきゃ駄目なやつ、長さの上限、メールの形、希望日は明日から先だけ、を付けて。怒ってる感じの赤い警告じゃなくて、どう直せばいいかを欄の下に書いて。全部まとめて画面の上に出すのはやめて。
04
AIの答えを確認して試す
最初から完璧でなくて大丈夫。まず一度、自分で動かしてみます。
1AIから出てくるもの
必須・文字数・メールの形・希望日の4種類の条件が付き、間違えた欄の下に直し方が出る入力確認付きフォームと、欄ごとの条件を並べた「入力チェック表.md」
まず自分で試す
メールの欄に@なしの文字を打ち、欄の下に出る文を読む
希望日に昨日の日付を入れ、そこから先へ進めなくなることを確かめる
相談内容に長い文をわざと貼り、残り何文字かの表示が動くのを見る
全部正しく直してから、確認画面まで進めることを確かめる
追加のプロンプト
当てはまるものだけ、上から順に送ります。
条件を付け終わったら
わざと間違えて試すから、5パターン用意して。全部空欄、名前だけ、メールに@が無い、相談内容が長すぎ、希望日が昨日。それぞれ何が出るか、直す前に見せて。
送った後に試す
5パターンを自分で打ち込み、出た文がそのまま直し方になっているか読む
直し方の文が素っ気なく感じたら
「入力してください」だけじゃ分からん。どこをどう直すかまで書いて。あと、間違いのある欄まで画面が自分で動くようにして。
05
仕上がりをよくするコツ
気になるものを一つ選んで、ChatGPTに伝えます。
警告が多くて怖い
「間違ってる欄だけに印を付けて、まだ触っていない欄には何も出さないで」
何文字までか分からない
「長さの上限がある欄は、残り何文字かを打ちながら出して」
希望日が選びにくい
「希望日はカレンダーから選ぶ形にして、今日より前の日だけ押せなくして」
06
やりがちなミス
見つけた数：0 / 5
当てはまる所を見つけたら、上のコツを使って直します。
これは合格・不合格を決めるものではありません。保存状態を確認しています。
07
ここまでできたら完成
AIの「できました」で終わらせません。実物を開いて使い、この課題の完成条件を確かめます。
わざと間違えた5パターンを自分で打ち、5つとも欄の下に直し方が出た
正しく直したあと、確認画面まで進めた
決めた条件が「入力チェック表.md」に欄ごとに並んでいる
Workで作った物を保存するプロンプト
条件を付けたフォームと、欄ごとの条件を並べた「入力チェック表.md」を「受付サイト」へ保存して。わざと間違えた5パターンと、その時に画面へ出た文もそのまま残して。
共通の保存メモChatでできた物は、自分で保存
Chatの返答欄にファイルができたらダウンロードして「完成」フォルダへ移します。文章だけなら、全文をコピーしてテキストやWordへ貼って保存します。保存した物をもう一度開けた時に「残せた」とします。
できたことを手元に残す
作ったものや気づいたことを、自分のメモに残しておきましょう。
08
自分の仕事なら
今作ったものを、明日の仕事で使える形に変えます。
折り返しに一番困る連絡先の打ち間違いだけを先に条件にして、社内の申請フォーム1つで試します。
本物の顧客名、個人情報、社外秘の資料へ置き換える前に、会社のルールと閲覧権限を確かめます。
09
つまずいたところを整理する
どこまでできて、どこで止まったか。短い言葉で大丈夫です。
うまくいかなかった点をメモする
「やりたかったこと」「試したこと」「実際の結果」を並べると、次に試すことが見つけやすくなります。
メモは自分の端末へ。サイトへの質問の受付は終了しています。
10 / 任意
次に進みたい方へ
ここで完成です。続ける方だけ、下の文を送ります。
次にすること
「この内容で送ります」を見せる画面を作ろう
続けるための追加プロンプト
追加のプロンプト
この条件を全部通ったあとに出す画面って、何が載ってると安心する?載せるものを箇条書きで挙げて。
進め方は3つだけ
- 1今使っているChatまたはWorkを、そのまま続ける
- 2下の追加プロンプトをコピーして送る
- 3出てきた物を見て、必要な所だけ一つ直す
今作った物の、ここを使います
今付けた欄ごとの条件と、直し方の文をそのまま次の画面へ持ち込みます。
できるようになること
送る直前に本人が読み返して、その場で直せる場所ができます。
この内容を詳しく学ぶ教材
Lv.84「「この内容で送ります」が見えるページを作ろう」