ノーコード画面とAIフローを接続する

あなたが作ったノーコードの画面（＝ボタンや入力欄のあるWebページ）と、AIの処理を「つなぐ」方法を学びます。このレッスンを終えると、画面のボタンを押すだけでAIが返事をしてくれる仕組みを、自分の手で作れるようになります。

---

レストランを想像してみてください。

1. あなたがメニューを選んで注文用紙に書く（＝画面の操作）
2. ウェイターがその注文を厨房に届ける（＝接続）
3. シェフが料理を作る（＝AIの処理）
4. 完成した料理がテーブルに届く（＝結果が画面に表示される）

このレッスンで作るのは、ウェイターの役割の部分です。画面とAIの間をつなぐ「橋渡し」を設定していきます。

---

このレッスンを進める前に、以下の2つが準備できているか確認してください。

まだ画面を作っていない場合は、先にノーコードツールで「テキスト入力欄＋送信ボタン」だけのシンプルな画面を作ってから戻ってきてください。

AIに聞いてみよう: 画面の作り方がわからないときは、ChatGPTやClaudeに「Softrでテキスト入力欄と送信ボタンだけのシンプルなページを作る手順を教えて」と聞いてみましょう。

---

画面とAIの間を仲介する「自動化ツール」を1つ選びます。代表的な2つを紹介します。

選ぶときのポイント

• 良い例: まずは Make の無料プランで試してみる。画面が見やすく、流れを図で確認しやすい
• 良い例: すでに Zapier を使っているなら Zapier で統一する。使い慣れた道具の方が迷わない
• 悪い例: 複数の自動化ツールを同時に使い始める → 最初は1つに絞る方がスムーズです

このレッスンでは Make を例に進めます。

AIに聞いてみよう: どちらを選ぶか迷ったときは、ChatGPTやClaudeに「MakeとZapierのどちらが初心者向きか、メリット・デメリットを3つずつ教えて」と聞いてみましょう。

---

シナリオ（＝一連の処理の流れ）を新しく作ります。

1. Make にログインする
2. 画面右上の 「Create a new scenario」（＝新しいシナリオを作る）をクリックする
3. 空白のキャンバス（＝作業画面）が表示されたら準備完了

---

トリガー（＝きっかけ）を設定します。「画面でボタンが押されたら、処理を開始する」という合図の受け口を作ります。

1. キャンバスの中央にある ＋ボタン をクリックする
2. 検索欄に「Webhook」と入力し、「Webhooks」を選ぶ
3. 「Custom webhook」（＝カスタム受信口）を選ぶ
4. 「Add」をクリックし、名前を付ける（例：「画面からの受信」）
5. 表示された Webhook URL（＝合図を受け取るための住所）をコピーする

1. あなたのノーコード画面のボタンまたはフォームの送信先に、コピーしたURLを貼り付ける

設定のコツ

• 良い例: URLはコピー＆ペーストで貼り付ける。1文字でも間違うと動かない
• 悪い例: URLを見ながら手で打ち込む → コピペすれば入力ミスを防げます

AIに聞いてみよう: ノーコード画面でWebhook URLの貼り付け先がわからないときは、ChatGPTに「Softr（またはあなたが使っているツール名）でフォームの送信先にWebhook URLを設定する方法を教えて」と聞いてみましょう。

---

受け取ったデータをAIに渡して、処理してもらうブロックを追加します。

1. Webhookブロックの右側に表示される ＋ボタン をクリックする
2. 検索欄に「OpenAI」と入力し、「OpenAI (ChatGPT, DALL-E, Whisper)」を選ぶ
3. 「Create a Completion」（＝テキスト生成）を選ぶ
4. 「Connection」の「Add」をクリックし、OpenAI の APIキー（＝AIサービスを使うための合言葉）を入力する
5. 以下の設定をする：
   • Model（モデル）: gpt-4o-mini（軽くて速い。まずはこれで十分）
   • Messages の Content（内容）に、AIへの指示文を書く

プロンプト（＝AIへの指示文）の書き方

指示文の例：

次の文章を3文以内で要約してください：{{1.body.text}}

{{1.body.text}} は、前のブロック（Webhook）で受け取ったテキストのことです。数字の「1」は「1番目のブロック」という意味です。

• 良い例: 「次の文章を3文以内で要約してください」 → 具体的でAIが何をすべきかわかる
• 良い例: 「以下の文章を敬語に変換してください」 → やることが明確
• 悪い例: 「いい感じにして」 → AIが何をすべきか判断できません

AIに聞いてみよう: プロンプトの書き方に自信がないときは、ChatGPTやClaudeに「Makeの中でOpenAIブロックを使うとき、要約用のプロンプトの良い書き方を3パターン教えて」と聞いてみましょう。

---

AIの回答を、あなたの画面に表示できる形で返します。

1. OpenAIブロックの右側の ＋ボタン をクリックする
2. 検索欄に「Webhook」と入力し、「Webhook response」（＝Webhookの返答）を選ぶ
3. Body（＝返答の中身）に、OpenAIブロックの出力（AIの回答テキスト）を設定する
4. ノーコード画面側で、返ってきたデータを表示するテキスト表示エリアを用意する

---

すべての設定が終わったら、実際に動かしてテストしましょう。

1. Makeの画面で 「Run once」（＝1回だけ実行）ボタンをクリックする
2. あなたのノーコード画面を開く
3. 入力欄にテキストを入れて送信ボタンを押す
4. 数秒待つ
5. AIの回答が画面に表示されるか確認する

表示されれば成功です！ これであなたは、ノーコード画面とAIフローを自分の手でつなぐことができました。

確認チェックリスト

• 画面でボタンを押したら、Makeのシナリオが反応した
• AIの回答が画面に表示された
• 違うテキストを入れても、それに合った回答が返ってきた

---

AIに聞いてみよう: エラーメッセージが表示されたときは、そのメッセージをそのままコピーして、ChatGPTやClaudeに「Makeで以下のエラーが出ました。原因と対処法を教えてください：（エラーメッセージ）」と聞いてみましょう。

---

このレッスンでは、以下のことを学びました。

• ノーコード画面からAIへデータを送る仕組み（Webhook）
• AIに処理させて結果を受け取る設定（OpenAIブロック）
• 結果を画面に戻す方法（Webhook response）

この「画面 → 接続 → AI → 画面」の流れは、今後いろいろな場面で応用できます。たとえば、問い合わせフォームの自動返信や、入力された文章の翻訳など、アイデア次第で広がります。