atom.nocode-builder.build-first-ai-flow
最初のAIフローを作る
最初のAIフローを作る 料理で考えてみましょう。レシピには「材料を切る → 煮込む → 味を調える」という流れがありますよね。AIフロー(=AIが行う作業の流れ)もこれと同じです。「あなたが言葉を入力する → AI...
成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。
証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。
メディアメディアレッスン内に出てくる図や動画のスロットです。実際の画面やイメージで理解を補助します。
レッスン本文
最初のAIフローを作る
料理で考えてみましょう。レシピには「材料を切る → 煮込む → 味を調える」という流れがありますよね。AIフロー(=AIが行う作業の流れ)もこれと同じです。「あなたが言葉を入力する → AIが考える → 結果が返ってくる」。この一連の流れを、プログラミングなしで組み立てるのが今回の目標です。
このレッスンでは、Dify(ディファイ=ブラウザ上でAIアプリを作れる無料サービス)を使って、あなた自身の手で最初のAIチャットボット(=自動で会話してくれるしくみ)を作ります。所要時間はおよそ15分です。

前提を確認する
このレッスンを始める前に、次の2つだけ用意してください。
- インターネットにつながるパソコン: スマホでも開けますが、画面が広いパソコンがおすすめです
- メールアドレス: Difyへの登録に使います。Googleアカウントがあれば、ボタン1つで登録できます
プログラミングの経験は一切不要です。マウス操作と文字入力ができれば大丈夫です。
Difyに登録する
- ブラウザで Dify のサイト(cloud.dify.ai)を開きます
- 画面右上の「Sign up」(=新規登録)ボタンを押します
- Googleアカウントでログインするか、メールアドレスとパスワードを入力して登録します
登録が終わると、ダッシュボード(=操作画面のホーム)が表示されます。ここがあなたの「AIアプリ工房」の入り口です。
💡 ヒント: 画面が英語で表示されても大丈夫です。この後の手順では、ボタンの位置を図で示すので迷いません。
アプリの種類を選ぶ
ダッシュボード左上の「アプリを作成」(Create App)ボタンを押すと、いくつか選択肢が表示されます。
今回は 「チャットボット」(Chatbot)を選んでください。名前は何でもOKです。たとえば「旅行アドバイザー」と入力しましょう。
良い例・悪い例
- ✅ 良い例: 「チャットボット」を選ぶ → 今回の目標に一番シンプルで最適
- ❌ 悪い例: 「チャットフロー」や「ワークフロー」を選ぶ → 設定項目が多く、最初の学習には難しすぎる
プロンプト(=AIへの指示文)を書く
アプリを作ると設定画面が開きます。画面左側に「プロンプト」と書かれた大きな入力欄があります。ここにAIへの「お願いごと」を書きます。
たとえ話をすると、プロンプトは「お店の店員さんへのメモ」のようなものです。「あなたは旅行の相談員です。お客さんが行き先を言ったら、その場所の魅力を3つ教えてください」と書けば、AIはそのメモ通りに振る舞います。
以下のテキストをそのままコピーして、プロンプト欄に貼り付けてみましょう。
あなたは親しみやすい旅行アドバイザーです。
ユーザーが行き先を告げたら、以下の3点を返してください。
1. その場所の魅力を3つ
2. おすすめの季節
3. 初めて行く人へのひとことアドバイス
必ず日本語で答えてください。
良い例・悪い例
- ✅ 良い例: 「あなたは〇〇です。△△してください。」と役割とやってほしいことをセットで書く
- ❌ 悪い例: 「旅行について教えて」とだけ書く → AIが何をどう答えればいいか分からず、ぼんやりした回答になる
💡 プロンプトのコツ: 「必ず日本語で答えてください」を入れておくと、英語で返ってくる問題を防げます。これだけで体験が大きく変わります。
動かして確認する
プロンプトを書いたら、右上の「公開する」(Publish)ボタンを押します。確認ダイアログが出たら「公開」を押してください。
次に、同じ画面の右側に表示されるプレビュー欄(またはPublish後の「アプリを実行」リンク)で、実際にAIに話しかけてみましょう。
入力例: 「京都に行きたいです」
AIが京都の魅力を3つ・おすすめの季節・ひとことアドバイスを日本語で返してくれれば成功です!
もう1つ試してみましょう。
入力例: 「沖縄はどうですか?」
別の行き先でも同じフォーマットで答えてくれることを確認してください。これが「フロー(=決まった流れ)」として動いている証拠です。

成果物を保存する
AIが正しく返事をしてくれた画面で、スクリーンショット(=画面の写真)を撮ります。
- Windows:
Windowsキー + Shift + Sを同時に押して、チャット部分を範囲選択する - Mac:
Command + Shift + 4を同時に押して、チャット部分を範囲選択する
撮ったスクリーンショットが、このレッスンの完了証明になります。
確認チェックリスト
スクリーンショットに以下の3つが写っていればOKです。
- あなたが入力した質問文が見える
- AIが日本語で回答している
- 回答にプロンプトで指定した「3つの魅力」「おすすめの季節」「ひとことアドバイス」が含まれている
つまずきやすいポイントを解決する
| つまずき | 原因 | 解決方法 |
|---|---|---|
| AIが日本語で返さない | プロンプトに言語指定がない | プロンプトの末尾に「必ず日本語で答えてください」を追加する |
| 回答が短すぎる・的はずれ | プロンプトが漠然としている | 「3つ紹介して」「おすすめの季節も教えて」のように具体的な指示を追加する |
| 「公開する」ボタンが灰色で押せない | プロンプト欄が空のまま | 何か1文でも入力してから押す |
| 画面が英語で読めない | ブラウザの言語設定が英語 | ボタンの位置は同じなので、この手順の図を参考に進めてOK |
| ログイン後にダッシュボードが出ない | メール認証が未完了 | 登録時に届いたメールの認証リンクを押してから再度ログインする |
次にやれること
おめでとうございます! あなたは今、プログラミングなしで「AIに役割を与えて、決まったフォーマットで返答させる」というフローを自分の手で作りました。
この「プロンプトで指示を書く → AIが指示通りに動く」という考え方は、今後どんなAIツールを使うときにも役立つ基本スキルです。
次のステップとして試せることの例:
- プロンプトを書き換えて「商品紹介ボット」や「FAQ回答ボット」に変えてみる
- 回答のフォーマットを変えてみる(箇条書き→表形式 など)
- 別のAIツール(ChatGPT、Claude など)で同じプロンプトを試して、違いを比べてみる
種類: markdown_doc
検証: basic_manual_check_v1
証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。
メディア
必須
なし
あると楽
なし