電話・地図・問い合わせへ、迷わず進めるようにしよう
今日手元に残るもの
電話ボタン、地図、問い合わせボタンが並ぶ連絡のかたまり。まだつながっていないものは押すとデモだと分かる表示が出る
時間の目安
最初の完成まで 25〜35分
終わりの合図
開けた・使えた・保存できた
この課題の10ステップを見る
01
今日はこれを作る
最初に、今日手元に何が残れば終わりかだけ見ます。全部を覚える必要はありません。
今日できあがるもの
電話ボタン、地図、問い合わせボタンが並ぶ連絡のかたまり。まだつながっていないものは押すとデモだと分かる表示が出る
02
材料をAIに渡す
下の材料を用意して、ChatGPTに入れます。
今回使う材料
Lv.77のスマホ対応版と、Lv.72の設計カードの「場所」「営業時間」「連絡方法」の欄を使います。
材料の入れ方前の完成物を使う
- 1上に書かれた方法で、前の完成物を用意する
- 2材料がそろったら、下のプロンプトを送る
Workが表示されるならそこで続けます。なければChatへ同じ内容を送って進めます。
ChatGPTの設定と詳しい使い方ファイル変更を何度も行うため、有料版がおすすめです。使える量はプラン画面で確認してください。
実際のファイルやコードを扱うなら、Codexがおすすめです。
03
ChatGPTに送るプロンプト
プロンプトは、ChatGPTにそのまま貼る指示文です。上に書かれた前の完成物を用意してから、下の文を送ります。
ページの下に連絡のかたまりを作って。スマホで押したら電話へ進む形のボタンと、場所の地図と、問い合わせへ進むボタン。電話は本当にかかる手前で止めて。住所も電話番号も練習用の架空のやつでいい。実際にはつながらないものは、押したときに「これはデモです」ってはっきり出して。問い合わせの中身は次の章で作るから、今は入口のボタンだけ。営業時間も横に出しといて。
04
AIの答えを確認して試す
最初から完璧でなくて大丈夫。まず一度、自分で動かしてみます。
1AIから出てくるもの
電話ボタン、地図、問い合わせボタンが並ぶ連絡のかたまり。まだつながっていないものは押すとデモだと分かる表示が出る
まず自分で試す
電話ボタンをスマホ幅で押し、デモの表示が出て発信まで進まないことを確かめる
地図の部分を押し、練習用だと分かる表示になっているか見る
問い合わせボタンを押し、次の章で作る受付ページへの入口だと分かる表示が出るか見る
営業時間と連絡方法が、設計カードの欄と同じか見比べる
追加のプロンプト
当てはまるものだけ、上から順に送ります。
3つのボタンが並んだら
架空の電話番号だってその場で分かるようにして。番号の下に、練習用で実際にはつながらないって小さく書いといて。
送った後に試す
電話ボタンを押し、発信画面に進む前に止まるか確かめる
地図が本物の場所を指していたら
地図が実在の住所になってる。練習用の架空の場所だと分かる見せ方に変えて、本物の地図アプリへは飛ばさないで。
05
仕上がりをよくするコツ
気になるものを一つ選んで、ChatGPTに伝えます。
連絡先が下すぎて見つからない
「連絡のかたまりを、よくある質問のすぐ下まで上げて」
どれを押せばいいか迷う
「3つのうち一番使ってほしいものだけ色を付けて、あとは細い線の枠にして」
デモの表示が目立たない
「デモの表示を、押したあとの画面の真ん中に出して」
06
やりがちなミス
見つけた数：0 / 5
当てはまる所を見つけたら、上のコツを使って直します。
これは合格・不合格を決めるものではありません。保存状態を確認しています。
07
ここまでできたら完成
AIの「できました」で終わらせません。実物を開いて使い、この課題の完成条件を確かめます。
電話・地図・問い合わせの3つを、スマホ幅で自分で押せた
まだつながらないものは、押したときにデモだと分かる表示が出た
住所と電話番号が練習用の架空のものだと、画面を見て分かった
Workで作った物を保存するプロンプト
この連絡のかたまりを足したページを、完成フォルダの「会社サイト」へ保存して。どのボタンがまだデモ止まりかの一覧と、住所と電話番号が架空だということも残して。
共通の保存メモChatでできた物は、自分で保存
Chatの返答欄にファイルができたらダウンロードして「完成」フォルダへ移します。文章だけなら、全文をコピーしてテキストやWordへ貼って保存します。保存した物をもう一度開けた時に「残せた」とします。
できたことを手元に残す
作ったものや気づいたことを、自分のメモに残しておきましょう。
08
自分の仕事なら
今作ったものを、明日の仕事で使える形に変えます。
まず今お客様から一番多い連絡手段を1つ選び、それを一番上のボタンにします。実在の番号や住所へ変えるのは、公開の準備が終わってからにします。
本物の顧客名、個人情報、社外秘の資料へ置き換える前に、会社のルールと閲覧権限を確かめます。
09
つまずいたところを整理する
どこまでできて、どこで止まったか。短い言葉で大丈夫です。
うまくいかなかった点をメモする
「やりたかったこと」「試したこと」「実際の結果」を並べると、次に試すことが見つけやすくなります。
メモは自分の端末へ。サイトへの質問の受付は終了しています。
10 / 任意
次に進みたい方へ
ここで完成です。続ける方だけ、下の文を送ります。
次にすること
URLを送る前に、まずいところを探そう
続けるための追加プロンプト
追加のプロンプト
このページ、今このまま誰かに送ったら何が一番まずい?まずい順に並べて。まだ直さなくていい。
進め方は3つだけ
- 1今使っているChatまたはWorkを、そのまま続ける
- 2下の追加プロンプトをコピーして送る
- 3出てきた物を見て、必要な所だけ一つ直す
今作った物の、ここを使います
導線まで動くようになったページ一式を、そのまま点検する対象にします。
できるようになること
誤字やリンク切れ、言い過ぎの表現が、送る前に見つかります。
この内容を詳しく学ぶ教材
Lv.79「誰かにURLを送る前に、やりがちなミスを見つけよう」