予約する前の不安がなくなる、スマホ用サロンサイトを作ろう
今日手元に残るもの
スマホで開ける予約導線つきサロンサイトの試作(メニュー・料金・時間・スタッフ・空き枠見本・キャンセル条件・行き方入り)と、仮受付の確認画面
時間の目安
最初の完成まで 30〜40分
終わりの合図
開けた・使えた・保存できた
この課題の10ステップを見る
01
今日はこれを作る
最初に、今日手元に何が残れば終わりかだけ見ます。全部を覚える必要はありません。
今日できあがるもの
スマホで開ける予約導線つきサロンサイトの試作(メニュー・料金・時間・スタッフ・空き枠見本・キャンセル条件・行き方入り)と、仮受付の確認画面
02
材料をAIに渡す
下の材料を用意して、ChatGPTに入れます。
今回使う材料
SAL-01の「メニュー表.xlsx」と、SAL-02の「ブランド」一式を添付して、料金と見た目をそろえます。
必要なファイルは、下からダウンロードできます。
この課題で使うファイル
ひだまり美容室の架空データから、必要なものだけ用意しました。
06HP.txt
材料の入れ方前の完成物を使う ／ TXTはコピー
- 1上に書かれた方法で、前の完成物を用意する
- 2TXTはこのページで中身をコピーし、入力欄へ貼る
- 3材料がそろったら、下のプロンプトを送る
Workが表示されるならそこで続けます。なければChatへ同じ内容を送って進めます。
コピーしにくい時は、TXTをファイルのまま添付しても構いません。
AIが資料を読めない時は、必要部分を貼るか添付し直します。読めない内容を推測させません。
ChatGPTの設定と詳しい使い方ChatGPTの無料版で始めやすい課題です。上限に達したら、時間を置いて続けます。
03
ChatGPTに送るプロンプト
プロンプトは、ChatGPTにそのまま貼る指示文です。前の完成物と今回の材料をそろえてから、下の文を送ります。
このHPの希望メモと、渡したメニュー表とブランドボードで、スマホで見るうちの店のサイトつくって。メニューと税込料金と時間、担当スタッフ、空き枠の見本、キャンセルのルール、店までの行き方まで。予約ボタンは「仮受付」の画面まででいい。本当の予約にはしないで、公開もまだしないで。
04
AIの答えを確認して試す
最初から完璧でなくて大丈夫。まず一度、自分で動かしてみます。
1AIから出てくるもの
スマホで開ける予約導線つきサロンサイトの試作(メニュー・料金・時間・スタッフ・空き枠見本・キャンセル条件・行き方入り)と、仮受付の確認画面
まず自分で試す
ブラウザをスマホの幅にして、トップから予約ボタンまで指で押して進む
仮受付の画面に「予約確定」と書かれていないか読む
サイトの料金を1つ選び、メニュー表.xlsxと同じ金額か照合する
キャンセル条件のページを開き、自分の店のルールと合うか読む
追加のプロンプト
当てはまるものだけ、上から順に送ります。
スマホ幅で一通り見られたら
仮受付のあとに、申込内容をお客さんが見直す確認画面を足して。「スタッフが確認してから返事します」って文言と、店からの返事が来るまで予約は確定じゃないことをはっきり書いて。
05
仕上がりをよくするコツ
気になるものを一つ選んで、ChatGPTに伝えます。
写真と色が浮いてる
「ブランドボードの色と画像だけ使って、ほかの飾りは減らして」
どこを押せばいいか迷う
「どの画面にも予約ボタンを1個だけ、押しやすい下の方に置いて」
文字が小さい
「スマホで老眼でも読める字の大きさにして、料金は特に大きく」
06
やりがちなミス
見つけた数：0 / 5
当てはまる所を見つけたら、上のコツを使って直します。
これは合格・不合格を決めるものではありません。保存状態を確認しています。
07
ここまでできたら完成
AIの「できました」で終わらせません。実物を開いて使い、この課題の完成条件を確かめます。
スマホ幅でトップから仮受付→確認画面まで自分の指で進めた
料金2件をメニュー表と照合して一致していた
確認画面で「スタッフの返事までは確定ではない」の表示を読めた
Workで作った物を保存するプロンプト
このサイト一式を完成フォルダの「サロンサイト」へ保存して。予約は仮受付までで本当の予約機能はないこと、未公開なことをメモに残して。
共通の保存メモChatでできた物は、自分で保存
Chatの返答欄にファイルができたらダウンロードして「完成」フォルダへ移します。文章だけなら、全文をコピーしてテキストやWordへ貼って保存します。保存した物をもう一度開けた時に「残せた」とします。
できたことを手元に残す
作ったものや気づいたことを、自分のメモに残しておきましょう。
08
自分の仕事なら
今作ったものを、明日の仕事で使える形に変えます。
いまの店の紙メニューやSNSプロフィールのリンク先を、まずこの構成の1ページに置き換える想定で作り直します。公開は、店のドメインと予約の受け方を決めてからにします。
本物の顧客名、個人情報、社外秘の資料へ置き換える前に、会社のルールと閲覧権限を確かめます。
09
つまずいたところを整理する
どこまでできて、どこで止まったか。短い言葉で大丈夫です。
うまくいかなかった点をメモする
「やりたかったこと」「試したこと」「実際の結果」を並べると、次に試すことが見つけやすくなります。
メモは自分の端末へ。サイトへの質問の受付は終了しています。
10 / 任意
次に進みたい方へ
ここで完成です。続ける方だけ、下の文を送ります。
次にすること
このサイトの向こう側に、スタッフ用の画面を足そう
続けるための追加プロンプト
追加のプロンプト
仮受付で届いた内容を、スタッフが一覧で見られる画面もつくって。返事したかどうかの印を付けられるようにして。
進め方は3つだけ
- 1今使っているChatまたはWorkを、そのまま続ける
- 2下の追加プロンプトをコピーして送る
- 3出てきた物を見て、必要な所だけ一つ直す
今作った物の、ここを使います
今作ったサイトの仮受付の内容(名前・希望メニュー・希望日時)を、そのまま受け取って使います。
できるようになること
仮受付の内容を、スタッフが確認して返事するまでの流れがつながります。
この内容を詳しく学ぶ教材
SAL-05「お客様の希望から、料金と時間が分かる施術候補を出してみよう」