入力すると受付メールが届く、問い合わせフォームを動かそう
今日手元に残るもの
同じ受付IDでつながる問い合わせ入力・確認・完了画面、受付メール・担当通知の見本、資料PDF、未接続表示
時間の目安
最初の完成まで 10〜20分
終わりの合図
開けた・使えた・保存できた
この課題の10ステップを見る
01
今日はこれを作る
最初に、今日手元に何が残れば終わりかだけ見ます。全部を覚える必要はありません。
今日できあがるもの
同じ受付IDでつながる問い合わせ入力・確認・完了画面、受付メール・担当通知の見本、資料PDF、未接続表示
02
材料をAIに渡す
下の材料を用意して、ChatGPTに入れます。
今回使う材料
WEB-06の問い合わせページへ制作モックとして追加します。
必要なファイルは、下からダウンロードできます。
この課題で使うファイル
ひだまり美容室の架空データから、必要なものだけ用意しました。
材料の入れ方前の完成物を使う ／ 資料はこのページから取得
- 1上に書かれた方法で、前の完成物を用意する
- 2上の一覧から指定された資料だけを取得し、入力欄へ添付する
- 3材料がそろったら、下のプロンプトを送る
Workが表示されるならそこで続けます。なければChatへ同じ内容を送って進めます。
ドラッグできない時は、入力欄のクリップまたはファイル選択を使います。スマホは「ファイル」から共有できます。
AIが資料を読めない時は、必要部分を貼るか添付し直します。読めない内容を推測させません。
ChatGPTの設定と詳しい使い方ファイル変更を何度も行うため、有料版がおすすめです。使える量はプラン画面で確認してください。
実際のファイルやコードを扱うなら、Codexがおすすめです。
03
ChatGPTに送るプロンプト
プロンプトは、ChatGPTにそのまま貼る指示文です。前の完成物と今回の材料をそろえてから、下の文を送ります。
問い合わせフォームをちゃんと押せるようにしたい。入力して確認して完了、受付メールと担当への通知の見本、資料PDFまで同じ受付IDで見せて。名前と連絡先は架空、必要な項目だけ。まだメールや会社システムにはつながず「未接続・送信なし」を目立たせて。
04
AIの答えを確認して試す
最初から完璧でなくて大丈夫。まず一度、自分で動かしてみます。
1AIから出てくるもの
同じ受付IDでつながる問い合わせ入力・確認・完了画面、受付メール・担当通知の見本、資料PDF、未接続表示
自分で試すのは、これだけ
架空入力から確認・完了まで進む
戻って一項目を直し同じ受付IDか見る
空欄・不正な連絡先・長文を試す
メール二種とPDFの受付IDを照合する
通信なしを開発画面でも確認する
05
仕上がりをよくするコツ
気になるものを一つ選んで、ChatGPTに伝えます。
入力が多い
「相談に答えるため本当に必要な欄だけ残し、任意と必須を分けて」
送ったか不安
「完了画面へ「教材モック・外部送信なし」を大きく出して」
06
やりがちなミス
見つけた数：0 / 5
当てはまる所を見つけたら、上のコツを使って直します。
これは合格・不合格を決めるものではありません。保存状態を確認しています。
07
ここまでできたら完成
AIの「できました」で終わらせません。実物を開いて使い、この課題の完成条件を確かめます。
入力・確認・修正・完了を同じ受付IDで通した
空欄・不正値・長文が適切に止まった
メール二種・PDF・未接続表示を確認し外部送信がなかった
Workで作った物を保存するプロンプト
フォーム、確認・完了、メール二種、PDF、未接続表示と試験結果を「07_問い合わせ導線モック」に保存して。
共通の保存メモChatでできた物は、自分で保存
Chatの返答欄にファイルができたらダウンロードして「完成」フォルダへ移します。文章だけなら、全文をコピーしてテキストやWordへ貼って保存します。保存した物をもう一度開けた時に「残せた」とします。
できたことを手元に残す
作ったものや気づいたことを、自分のメモに残しておきましょう。
08
自分の仕事なら
今作ったものを、明日の仕事で使える形に変えます。
実接続は共通受付コースへ渡し、送信先・保存期間・同意文を担当者が承認するまでモックのままにします。
本物の顧客名、個人情報、社外秘の資料へ置き換える前に、会社のルールと閲覧権限を確かめます。
09
つまずいたところを整理する
どこまでできて、どこで止まったか。短い言葉で大丈夫です。
うまくいかなかった点をメモする
「やりたかったこと」「試したこと」「実際の結果」を並べると、次に試すことが見つけやすくなります。
メモは自分の端末へ。サイトへの質問の受付は終了しています。
10 / 任意
次に進みたい方へ
ここで完成です。続ける方だけ、下の文を送ります。
次にすること
新しいサービスやFAQをすぐ足せるひな形を残そう
続けるための追加プロンプト
追加のプロンプト
サービス、FAQ、事例、告知を同じ入力票から足せるひな形にして。事実、画像、公開期限、承認する人が空なら止めて。
進め方は3つだけ
- 1今使っているChatまたはWorkを、そのまま続ける
- 2下の追加プロンプトをコピーして送る
- 3出てきた物を見て、必要な所だけ一つ直す
今作った物の、ここを使います
7ページの繰返し部分、事実台帳、画像、公開条件を使います。
できるようになること
コードを毎回直さず、確認済み入力からページ候補を増やせます。
この内容を詳しく学ぶ教材
WEB-08「新しいサービスや質問をすぐ足せる、ページのひな形を残そう」