メインコンテンツへスキップ
レッスン一覧に戻る

atom.nocode-builder.build-first-ai-flow

最初のAIフローを作る

最初のAIフローを作る 料理で考えてみましょう。レシピには「材料を切る → 煮込む → 味を調える」という流れがありますよね。AIフロー(=AIが行う作業の流れ)もこれと同じです。「あなたが言葉を入力する → AI...

build-simple-chatbotbuild-simple-chatbot「build simple chatbot」に関するスキルがこのレッスンで身につきます。
想定時間未設定公開状態: draft
学習メモ

成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: markdown_doc検証: basic_manual_check_v1

証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。

screenshot

メディアメディアレッスン内に出てくる図や動画のスロットです。実際の画面やイメージで理解を補助します。

diagramscreen_capture

レッスン本文

最初のAIフローを作る

料理で考えてみましょう。レシピには「材料を切る → 煮込む → 味を調える」という流れがありますよね。AIフロー(=AIが行う作業の流れ)もこれと同じです。「あなたが言葉を入力する → AIが考える → 結果が返ってくる」。この一連の流れを、プログラミングなしで組み立てるのが今回の目標です。

このレッスンでは、Dify(ディファイ=ブラウザ上でAIアプリを作れる無料サービス)を使って、あなた自身の手で最初のAIチャットボット(=自動で会話してくれるしくみ)を作ります。所要時間はおよそ15分です。

AIフローの全体図

前提を確認する

このレッスンを始める前に、次の2つだけ用意してください。

  • インターネットにつながるパソコン: スマホでも開けますが、画面が広いパソコンがおすすめです
  • メールアドレス: Difyへの登録に使います。Googleアカウントがあれば、ボタン1つで登録できます

プログラミングの経験は一切不要です。マウス操作と文字入力ができれば大丈夫です。

Difyに登録する

  1. ブラウザで Dify のサイト(cloud.dify.ai)を開きます
  2. 画面右上の「Sign up」(=新規登録)ボタンを押します
  3. 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 など)で同じプロンプトを試して、違いを比べてみる
成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: markdown_doc

検証: basic_manual_check_v1

証跡とメディア

証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。

screenshot

メディア

diagramscreen_capture
前提 atom

必須

なし

あると楽

なし

学習完了