5つのデモの作り方
作り方ガイドWeb担当者Forum ミーティング 2026 秋(B2-1)配布資料
デモ1〜5の作り方

改造したい人・自分で作りたい人へ

5つのデモを、自分の仕事用に作る

デモはそのまま使えます。このガイドは、自社の書式・ルールに合わせて作り直したい人のためのものです。最初に送る指示のひな形、講師が実際に送った直しの言葉、うまくいかないときの対処をまとめました。ブラウザで開く claude.ai だけで進められます。

  1. 始める前に
  2. 最初の指示の型
  3. 5本のひな形
  4. 会話の続け方
  5. 伝わる直し方
  6. 改造の頼み方
  7. うまくいかないとき
  8. 社内確認メモ
  9. claude.ai と Claude Code

1始める前に(3分)

用意するものブラウザと claude.ai のアカウント

パソコンで作るのがおすすめです。スマートフォンのアプリでは共有の設定を変えられません。

作るだけなら無料プランでできます

設定の「機能」で、コードの実行とファイル作成をオンにしておきます。

リンクで人に渡すなら有料プラン(Pro)が必要です

月払いで月20ドル、年払いで月17ドル相当(税別・ドル建て)。無料プランの新しいページは、自分だけが見られます。

料金とプランの違いは、2026年9月25日に Anthropic の公式ヘルプと料金ページで確認しました。変わることがあるので、使う前に 料金ページ と 共有のヘルプ を見てください。

会社のデータは、作るときには渡さない。作る段階では架空の見本データで十分です。5本のデモも、会社名・数字・人物はすべて架空で作っています。

2最初の指示の型

最初の1通に、次の5つを全部書きます。見た目の注文は最後で十分です。5本のひな形は、どれもこの順番で書いています。

誰の、どんな悩みか

「セール価格の端数が毎回不安」のように、困っている場面を具体的に。ここが曖昧だと、ありきたりな道具が出てきます。

入れるもの

CSVの列、入力欄、選ぶ項目。自社のCSVの1行目(列名)を貼るのが一番早いです。

出すもの

画面に並べる順番と、コピーして使う文。「上司に出す文」「営業に渡す一覧」など、次に誰へ渡すかまで。

ルールと根拠

計算式・点数・法令。根拠の資料(通知や規約のPDF)は自分で添付し、「ここから取って」と書きます。

守ること

入れたデータを外に送らない。判断できないものは判断しない。見本は架空にする。

35本のひな形(コピーして使う)

claude.ai の新しいチャットに貼って送ります。【 】の中を自社のものに書き換えると、自社版になります。

デモを開く

      

4会話の続け方(講師が実際に送った文)

1回で完成はしません。デモ4(リードの仕分け)は、見本を増やしてから、3回の直しで今の形になりました。講師の文は原文のまま(誤字だけ直しています)、Claudeの返答は要約です。

Claude仕分けの道具ができました。法令と件数の確認結果はこちらです。
講師サンプルCSV3つくらい選ばせて入れる機能もほしいな見本が1種類だと、自社の問い合わせフォームの形で動くか分からないため。
Claude展示会・Webの問い合わせ・セミナー申込の3種類を選べるようにしました。列名もそれぞれ変えています。
講師AとBは定義あるけどCはどういう定義?画面に「A=90点以上」「B=40点以上」とあるのに、Cだけ書かれていなかった。
ClaudeCの定義があいまいなので、対象外の箱を別に作る案はどうでしょう。
講師(画面の「A(すぐ電話)= 90 点以上/B(資料を送る)= 40 点以上」を貼って)があるから、Cも同じく入れてよ質問だけだと、Claudeは新しい案に広げてしまった。画面を貼って「同じ形で」と言うと、1回で直った。
Claude「C(メルマガ)= 40 点未満」を同じ形で足しました。Bの数字を変えるとCも変わります。
コツ:直してほしい画面の文を、そのまま貼る。「どこを」が伝わると、1往復で済みます。

5本とも、講師は Claude Code(次の章の比較表を参照)で作りました。直しの言葉は claude.ai でも同じように使えます。

5伝わる直し方

左は、講師が最初に送って往復が増えた言い方です。右は、1回で伝わった言い方です。

伝わりにくいCはどういう定義?質問だけだと、Claudeは作り直す案まで広げてしまう。
伝わるA・Bと同じ形で、Cの行も入れてお手本になる既存の部分を指すと、形がそろう。
伝わりにくい動かないどこで何が起きたかが分からない。
伝わる「専門家の回答が足りず、先に進めませんでした」と出て進めない。これを解消して画面に出た文をそのまま貼る。原因の特定が速い。
伝わりにくいもっと例がほしい何を、いくつ、どの粒度で、が決まらない。
伝わるこの区分けはよい。パターンが欲しいので、これらのカテゴリの下に各々3パターンくらい作って。具体的な架空の商品名で良い点を先に言い、数と粒度まで指定している。一番手本にしやすい形。
伝わりにくいこれは意味がない否定だけだと、Claudeは選択肢を並べて質問を返してくる。
伝わる数字が出る。その数字の見方を、多くの専門家の意見を聞く。仮説を立てる。仮説をシミュレーションする。どの仮説が正しそうかを確率で出す。打ち手ごとの勝率を出す。上司にレポートするあってほしい作業の流れを順番に書くと、そのまま画面の構成になる(デモ1)。
伝わりにくい分かりにくいところを直してどこが分かりにくいかは、読んだ人にしか分からない。
伝わる(画面の「台所ノート/株式会社サンプル青葉(架空)」を貼って)これ意味わかんないから、なんとかして場所を貼り、「分からなかった」という感想をそのまま伝える。直し方は任せてよい。
伝わりにくい(ほかのページも一つずつ同じ説明をする)手間が増え、ページごとに直し方がばらつく。
伝わるうん、デモ2〜5も同じように直して1本で直し方が決まったら、横に広げるのは一言で足りる。

6改造の頼み方(作り直さずに一部だけ直す)

できあがった道具を自社用に直すときは、必ず「ほかは変えないで」と添えます。書かないと、全体が作り直されて、動いていた部分が変わることがあります。各デモの右上の「差し替える場所を表示」を押すと、直す場所が色で出ます。

ロゴ・会社名・色を変える

左上の会社名を【自社名】に、ロゴの文字を【社名の頭文字】に、基調の色を【#1F6FB2】に変えてください。計算・判定・文章はいっさい変えないでください。

ルールの数字を変える

点数のルールを次のとおりに変えてください。ほかの部分は変えないでください。
・役職が【部長以上】なら【+30点】
・導入時期が【3か月以内】なら【+40点】
・Aは【80】点以上、Bは【40】点以上
変えたあと、見本の3種類で、A・B・Cの件数がそれぞれ何件になったかを教えてください。

自社のCSVの形に合わせる

うちのCSVは、1行目(列名)が次のとおりです。この列名で読めるように直してください。ほかの部分は変えないでください。
【受付日,会社名,部署,役職,社員数,検討時期,ご要望】
読めない列があれば、どの列かを教えてください。
列名だけ渡す。自社のCSVを合わせるときも、中身(氏名や連絡先の入った行)は渡さず、1行目の列名だけを貼ります。

7うまくいかないときの対処3つ

ボタンを押しても動かない・表示が崩れた画面に出た文を、そのまま貼る

「○○と出て進めない。これを解消して」。どこを押したか、何が出たかを添えます。画像を貼っても伝わります。

頼むたびに違うものが出てくる数字と見本を最初の指示に入れる

「3つの箱」「90点以上」「見本は30件」のように数で書き、CSVの1行目と、できれば完成に近い画面の例を添えます。

直しを重ねて、前に動いていた所が壊れた新しいチャットで、完成版から始め直す

一番よかった版のコードをコピーし、新しいチャットに「これを土台に、ここだけ直して」と貼ります。長い会話ほど、前の指示が薄れます。

8社内で使ってよいか確認するメモ(ひな形)

上司や情報システム部門に渡す1枚です。支援会社の方は、クライアントへの説明にも使えます。【 】を書き換えてください。

確認のお願い

件名:業務用の小さな道具を claude.ai で作って使うことの確認

【部署・氏名】です。次の道具を作って、チーム内で使いたいと考えています。問題がないか確認をお願いします。

1. 作るもの
【展示会リストを、決めた点数のルールで3つに仕分ける道具】。ブラウザで開く1枚のページです。

2. 使うサービスと費用
Anthropic の claude.ai(【無料プラン/Pro:月20ドル・1人分】)。

3. データの扱い
・作るときは、架空の見本データだけを使います。実際の顧客情報は Claude に渡しません。
・自社のCSVに合わせるときも、渡すのは1行目の列名だけです。
・【氏名・メール・電話の列は、読み込んだ時点で捨てる作りにします。】
・できあがったページは、最初は自分だけが見られる設定です。共有する範囲は【チーム内のみ】にします。

4. 確認していただきたいこと
・claude.ai を業務で使ってよいか
・できあがったページに実データを入れて使ってよいか
・共有してよい範囲

5. 止め方
不要になったら、ページを削除すれば見られなくなります。

「3. データの扱い」は、できあがったページの作りで変わります。実データを入れる前に、ページが外部へ送信しない作りになっているか、社内の担当者と確認してください。

9claude.ai と Claude Code の違い

まずは claude.ai で十分です。毎週決まった時間に動かしたい、社内のデータとつなぎたい、複数の道具を一式で作り込みたいときに、Claude Code を使います。

やりたいことclaude.ai(ブラウザ)Claude Code
動く画面(道具)を作る○無料プランから○
リンクで人に渡す△有料プランから。無料プランは自分だけ○有料プランが前提
CSVを読ませて作る○1回の会話に20ファイルまで○フォルダごと、大量のファイルも
毎週決まった時間に動かす△有料プランで予約の実行ができる○クラウドでも自分のパソコンでも
Googleドライブ・Gmailなどとつなぐ△用意された連携の範囲。道具につなぐのは有料プラン○広くつなげる
自社の書式・ルールを覚えさせる△プロジェクトに指示とファイルを置く(無料は5つまで)○手順ごと保存して呼び出せる
複数の道具を一式で作り込む△1枚ずつ○部品を共通にして、まとめて直せる
必要なものブラウザだけ。無料からインストール(またはデスクトップアプリ)と有料プラン
向いている人現場で今日から使いたい人作り込んで付加価値を出したい人・支援会社

確認日:2026年9月25日(Anthropic の公式ヘルプ・料金ページ)。デモ1〜5は、共通の見た目と部品を1か所で直せるよう、Claude Code で作りました。