羊と惑星SHEEP AND PLANETS

SHEEP AND PLANETS / PROTOTYPE 03

AX体験ラボ · サービス業

予約前案内アプリ

人数や日程から、参考料金とスタッフへの確認事項をまとめる。架空の企業を題材にした試作です。

状態
試作版（2026年10月）
作り方
Codexと対話しながら作成
形式
HTMLファイル1つ。ブラウザ内で動作
公開版の動き
料金計算・条件分岐。回答の生成・判定に生成AIは使っていません。
このページで試す ↓アプリを全画面で開く ↗

DEMO

試してみる

まず「2名で参加」を押して結果を見ます。次に「8名の団体」を押して、料金と確認事項の違いを見てください。人数や日付も自分で変更できます。

入力に応じて計算・分岐します。回答や入力内容を外部へ送信する機能はありません。

大きな画面で試す ↗

WHY

なぜ作ったか

架空の企業「こもれび工房」は、スタッフ3人で、布小物やリースの体験教室を運営する小さな工房。

「制作中に「いくら？」「何人まで？」「明日行ける？」という電話が重なります。説明したあとも、人数や希望日を聞き直すことがあるんです。」

お客様が条件を整理し、スタッフが必要な確認に集中できる状態をつくる。

予約前の条件整理を扱います。空席の照会や予約の確定は、スタッフが行います。

HOW

どうやって作ったか

  1. 01

    困りごとを1つの仕事に絞る

    料金や所要時間の説明を、その都度スタッフが繰り返す。人数・日程がそろわず、何度も確認の連絡が必要。通常予約と団体・直前の相談が混ざってしまう。

  2. 02

    入力・判断・出力を決める

    コース・人数・希望日・時刻・個別の相談を入力し、コース料金 × 人数を計算、定休日・案内期間・人数の条件を確認、通常案内か、スタッフへの相談かを分ける。参考料金と所要時間・確認が必要な理由・申込み・相談メモを表示します。

  3. 03

    人に引き継ぐ条件を決める

    予約前の条件整理を扱います。空席の照会や予約の確定は、スタッフが行います。

  4. 04

    HTML・CSS・JavaScriptで画面を作る

    AIに要件を伝え、画面の土台・見た目・入力に応じた動作を実装しました。メモのコピーと保存も付けました。

  5. 05

    条件を変えて確かめる

    2名と8名、直前・定休日・過去の日付、不正な人数で、料金と案内が変わるかを確認します。

この公開版の仕組み

この完成品は、計算とあらかじめ決めた条件分岐で動きます。生成AIは使っていません。

AIを加えるなら、自由記述の相談を短く整理する用途が考えられます。料金・予約可否の判断は、正式なデータとルールに基づいて行います。

POINTS

工夫したこと

EXPAND

ほかの仕事に展開するなら

同じ仕組みでも、情報と判断のルールは仕事ごとに変わります。次の5つは展開の例です。

  1. 01

    美容室のメニュー相談

    施術内容と料金の質問が多い

    入力
    希望メニュー・髪の長さ・追加希望
    出力
    参考料金と美容師への確認事項

    変えるところ：料金表、所要時間、個別相談に回す条件を変える。施術可否は担当者が判断。

  2. 02

    貸会議室の利用案内

    人数・設備・料金の確認に時間がかかる

    入力
    人数・利用時間・必要設備
    出力
    条件に合う部屋の候補と参考料金

    変えるところ：部屋ごとの定員と料金に差し替える。空き状況は予約台帳と確認。

  3. 03

    家事代行の依頼前案内

    依頼範囲が曖昧で、現地で認識がずれる

    入力
    依頼する場所・作業内容・希望時間
    出力
    対応範囲と見積もり前の確認事項

    変えるところ：対応できる作業、対応地域、見積もりが必要な条件を設定。

  4. 04

    研修コースの案内

    どの講座を選べばよいか分からない

    入力
    経験・学びたいこと・参加可能な時間
    出力
    候補のコースと事前準備

    変えるところ：前提知識、日程、受講条件を講座ごとに設定。

  5. 05

    介護施設の見学案内

    見学前の質問と準備の案内が重複する

    入力
    見学の目的・人数・希望日時
    出力
    見学前の準備と日程相談メモ

    変えるところ：施設の見学ルールに置き換える。医療情報や入居可否の判定は扱わず、担当窓口につなぐ。

CODE

コード

HTML・CSS・JavaScriptを1つのファイルにまとめています。HTMLは画面の土台、CSSは見た目、JavaScriptは計算や条件分岐を担当します。この公開版は、ブラウザ内で動きます。

courses
コース名・1名の料金・所要時間
serviceResult
人数・日付・希望条件から料金と案内を決める処理
serviceSample
2名・8名・直前など、試すための入力例
memo
条件と確認事項をまとめる処理
ファイルをダウンロード

AIに渡して作り替える

保存したHTMLをAIに添付し、変えたい業務ルールを伝えるときの例です。会社の情報を外部に渡す前に、利用ルールを確認します。

添付のHTMLは予約前案内アプリです。料金表、人数の上限、営業日、スタッフに確認する条件を、次に示す当社のルールに合わせてください。空席と予約成立は断定せず、変更したルールと確認用の入力例も説明してください。

TRY WITH A COMPANY

企業で試す前に、確認すること

この試作を担当者と一緒に見て、実際の仕事に合わせるためのメモを作ります。

  1. 誰の、どの仕事で使うか

    使う人と場面を1つに絞り、いま困っていることを確認します。

  2. 元の情報と、更新する人

    正式な料金・営業日・予約条件を確認し、変更時の更新担当を決めます。

  3. 人に相談する場面

    情報が足りないとき、条件に合わないとき、判断に迷うときの引き継ぎ先を決めます。

  4. 少人数で試して、効果を確かめる

    指導者・企業の担当者と試す人や期間を決め、案内にかかる時間・確認の往復回数・申込み時の記入漏れを見ます。

この体験で説明できるようになりたいこと

企業のどの課題に役立つか。何を入力し、どう処理して、何が出るか。実務で使うために何を直し、どう試すか。

NEXT

ほかのアプリを体験

AX体験ラボに戻る