ホームページに「1分で送信前まで試せる相談フォーム」を足そう
今日手元に残るもの
Lv.80のホームページの相談ボタンから開く相談フォーム初版(名前・連絡方法・相談内容を入れて確認画面まで進み、送信ボタンは「まだ送りません」で止まる)
時間の目安
最初の完成まで 20〜30分
終わりの合図
開けた・使えた・保存できた
この課題の10ステップを見る
01
今日はこれを作る
最初に、今日手元に何が残れば終わりかだけ見ます。全部を覚える必要はありません。
今日できあがるもの
Lv.80のホームページの相談ボタンから開く相談フォーム初版(名前・連絡方法・相談内容を入れて確認画面まで進み、送信ボタンは「まだ送りません」で止まる)
02
材料をAIに渡す
下の材料を用意して、ChatGPTに入れます。
今回使う材料
Lv.80で完成フォルダの「HP」へ保存した未公開のホームページ一式を同じWorkで開き、その問い合わせボタンの先に足します。
材料の入れ方前の完成物を使う
- 1上に書かれた方法で、前の完成物を用意する
- 2材料がそろったら、下のプロンプトを送る
Workが表示されるならそこで続けます。なければChatへ同じ内容を送って進めます。
ChatGPTの設定と詳しい使い方ファイル変更を何度も行うため、有料版がおすすめです。使える量はプラン画面で確認してください。
実際のファイルやコードを扱うなら、Codexがおすすめです。
03
ChatGPTに送るプロンプト
プロンプトは、ChatGPTにそのまま貼る指示文です。上に書かれた前の完成物を用意してから、下の文を送ります。
前に作ったこのHP、問い合わせボタン押しても何も起きないんだよね。相談したい人が名前と連絡先と相談内容だけ書いて、次の画面で書いた内容を見返せるところまで足して。うちで受けるのは一般の相談だけな、資料請求とか社内の依頼はまだいらん。送信ボタンは押しても本当には送らないで、練習中って画面に出しといて。
04
AIの答えを確認して試す
最初から完璧でなくて大丈夫。まず一度、自分で動かしてみます。
1AIから出てくるもの
Lv.80のホームページの相談ボタンから開く相談フォーム初版(名前・連絡方法・相談内容を入れて確認画面まで進み、送信ボタンは「まだ送りません」で止まる)
まず自分で試す
ブラウザでトップを開き、相談ボタンから相談フォームまで自分の指で進む
架空の名前と相談内容を打ち込み、確認画面に同じ文字が出ているか見比べる
送信ボタンを実際に押して、「まだ送りません」の表示で止まるのを確かめる
「未確認」の印が付いた項目がいくつあるか数える
追加のプロンプト
当てはまるものだけ、上から順に送ります。
確認画面まで進めたら
確認画面に、この先どうなるかを一行足して。いまは誰にも届かないこと、本当に受け付けるにはあとで機能を足すことを、練習中の帯として画面の上に出して。まだ決めてない項目には「未確認」って印を付けといて。
送った後に試す
練習中の帯が、画面を下へ動かしても見えているか確かめる
05
仕上がりをよくするコツ
気になるものを一つ選んで、ChatGPTに伝えます。
頼んでいない入力欄が増えている
「最初の画面の欄は名前と連絡先と相談内容の3つだけにして、勝手に足した欄は消して」
練習中だと分からない
「練習中の帯を画面の一番上に固定して、下へ動かしても消えないようにして」
確認画面が味気ない
「確認画面は書いた内容を大きく出して、直すボタンをその真上に置いて」
06
やりがちなミス
見つけた数：0 / 5
当てはまる所を見つけたら、上のコツを使って直します。
これは合格・不合格を決めるものではありません。保存状態を確認しています。
07
ここまでできたら完成
AIの「できました」で終わらせません。実物を開いて使い、この課題の完成条件を確かめます。
トップの相談ボタンから相談フォーム、確認画面まで自分の指で進めた
入力した架空の名前と相談内容が、確認画面に同じまま出ていた
送信ボタンを押しても送られず、練習中の表示で止まった
Workで作った物を保存するプロンプト
この相談フォーム初版を、完成フォルダに「受付サイト」を作ってそこへ保存して。いまどこまで動くか(入力と確認画面まで)、本当には送っていないこと、「未確認」のまま残った項目の一覧も一緒に残して。
共通の保存メモChatでできた物は、自分で保存
Chatの返答欄にファイルができたらダウンロードして「完成」フォルダへ移します。文章だけなら、全文をコピーしてテキストやWordへ貼って保存します。保存した物をもう一度開けた時に「残せた」とします。
できたことを手元に残す
作ったものや気づいたことを、自分のメモに残しておきましょう。
08
自分の仕事なら
今作ったものを、明日の仕事で使える形に変えます。
いまホームページに載せている電話番号だけの問い合わせ案内を、この3項目の相談フォームへ置き換える想定で読み直します。
本物の顧客名、個人情報、社外秘の資料へ置き換える前に、会社のルールと閲覧権限を確かめます。
09
つまずいたところを整理する
どこまでできて、どこで止まったか。短い言葉で大丈夫です。
うまくいかなかった点をメモする
「やりたかったこと」「試したこと」「実際の結果」を並べると、次に試すことが見つけやすくなります。
メモは自分の端末へ。サイトへの質問の受付は終了しています。
10 / 任意
次に進みたい方へ
ここで完成です。続ける方だけ、下の文を送ります。
次にすること
相談フォームの聞く項目を、1分で書ける数まで絞ろう
続けるための追加プロンプト
追加のプロンプト
この相談フォーム、聞いてる項目のうち本当に無いと困るのはどれ?残す理由と外す理由を、項目ごとに一言ずつ書いて。
進め方は3つだけ
- 1今使っているChatまたはWorkを、そのまま続ける
- 2下の追加プロンプトをコピーして送る
- 3出てきた物を見て、必要な所だけ一つ直す
今作った物の、ここを使います
今足した相談フォーム初版の入力欄と確認画面を、そのまま作り替えの土台にします。
できるようになること
何を聞いて何を聞かないかが決まり、お客様の入力時間が短くなります。
この内容を詳しく学ぶ教材
Lv.82「お客様が1分で送れる問い合わせ欄を作ろう」