こんにちは😊
株式会社プロドウガの@YushiYamamotoです！
らくらくサイトの開発・運営を担当しながら、React.js・Next.js専門のフリーランスエンジニアとしても活動しています❗️
SlackのBot、作っていますか？
「通知を送るだけ」なら簡単ですが、ボタンや画像、セレクトボックスを使った 「リッチなUI（Block Kit）」 を作ろうとすると、途端に面倒になりますよね。
- 「Block Kit Builderでポチポチするのが手間…」
- 「JSONの構造が複雑すぎて、手書きだと括弧の数が合わない…」
- 「結局、面倒だからテキストだけの通知で妥協する」
今回は、そんな悩みを 「n8n × 生成AI」 で解決します。
「どんなUIにしたいか」をAIに日本語で伝えるだけで、SlackのBlock Kit用JSONを自動生成し、そのまま送信するワークフロー を構築しましょう。
🏗️ 完成イメージとアーキテクチャ
目指すのは、以下のようなフローです。
- n8nが何らかのトリガー（Webhookやスケジュール）を受け取る。
- AI（GPT-4oなど）が、内容に合わせて 「最適なSlack UI（JSON）」 を生成する。
- Slackに送信され、リッチなメッセージが表示される。
🧩 課題：Block Kit の JSON は人間が書くものじゃない
Slackのメッセージをリッチにするには「Block Kit」という仕組みを使いますが、その実体は以下のようなJSONの塊です。
Block Kit JSONの例（長いので折りたたみ）
{
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "Hello, Assistant to the Regional Manager Dwight! *Michael Scott* wants to know where you'd like to take the Paper Company investors to dinner tonight.\n\n *Please select a restaurant:*"
}
},
{
"type": "divider"
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "*Farmhouse Thai Cuisine*\n:star::star::star::star: 1528 reviews\n They do have some vegan options, like the roti and curry, plus they have a ton of salad stuff and noodles can be ordered without meat!! They have something for everyone here"
},
"accessory": {
"type": "image",
"image_url": "https://s3-media3.fl.yelpcdn.com/bphoto/c7ed05m9lC2EmA3aF5nv_Q/o.jpg",
"alt_text": "alt text for image"
}
},
// ...これが延々と続く
]
}
これを動的に、しかも手動で組み立てるのは苦行です。
しかし、生成AIはこのJSONを書くのがめちゃくちゃ得意なのです。
🛠️ 実装：n8nワークフローの構築
今回はシンプルに、「ニュースや通知内容を入力すると、それをカッコいいカード形式のUIにしてSlackに投げる」フローを作ります。
1. AIへのプロンプト（ここが肝！）
n8nの「OpenAIノード（Chat Model）」に設定するシステムプロンプトです。
AIに 「あなたは優秀なSlack UIデザイナーです」 と役割を与えます。
ポイント
blocks 配列の中身だけを出力させるのではなく、Slack APIが受け取れる完全なJSONオブジェクトとして出力させると、後続の処理が楽になります。
System Prompt（コピペ用）
あなたはSlackの「Block Kit」を熟知したUI/UXデザイナーです。
ユーザーから渡されたテキスト情報を元に、視認性が高く、アクションしやすいSlackメッセージのJSONを構築してください。
【制約事項】
1. 出力はSlack Web APIの `chat.postMessage` の `blocks` パラメータに渡すJSON配列のみとしてください。
2. Markdown記法（mrkdwn）を適切に使用し、重要な部分は太字にするなどメリハリをつけてください。
3. 内容に応じて、適切な絵文字を使用してください。
4. 長文になる場合は `section` ブロックを分割し、間に `divider` を挟んで読みやすくしてください。
5. 最後に「確認しました」という `button` 要素を持つ `actions` ブロックを必ず配置してください。
【出力フォーマット】
JSON形式（blocks配列）のみを出力してください。余計な解説は不要です。
2. n8nの設定（Slackノード）
AIが生成したJSONを受け取り、Slackノードで送信します。
- Resource: Message
- Operation: Post
- JSON Parameters: ON にする
- Blocks: AIの出力（JSON）をバインドする
注意点
AIが返すJSONが文字列型になっている場合は、n8nの JSON Parse ノードや Code ノードでオブジェクト型に変換してからSlackノードに渡してください。
📱 実行結果：AIが作ったUIを見てみよう
例えば、AIに以下のテキストを渡してみます。
入力テキスト:
「サーバーのCPU使用率が95%を超えました。至急確認が必要です。担当者はインフラチームの佐藤さんです。発生時刻は10:00です。」
すると、AIは以下のようなリッチな通知を生成してくれます。
(実際のSlack画面のイメージ)
🚨 緊急アラート：サーバー高負荷検知
ステータス: 🔥 危険 (CPU > 95%)
発生時刻: 10:00
詳細情報
サーバーのCPU使用率が閾値を超過しました。サービスの応答遅延が発生する可能性があります。👉 担当者: @佐藤 (インフラチーム)
[ 🟢 確認しました (ボタン) ] [ 🔗 ダッシュボードを見る (ボタン) ]
テキストだけで送るよりも、圧倒的に 「緊急度」 が伝わりますし、ボタンがあることで 「ネクストアクション」 が明確になります。
🚀 応用：インタラクティブなBotへ
今回は「送信」までですが、Slack Appの Interactivity を有効にし、n8nでWebhookを受け取る設定をすれば、ボタンを押した後の動作も自動化できます。
- Slackで「確認しました」ボタンを押す
- n8nにWebhookが飛ぶ
- n8nが「佐藤さんが対応を開始しました」とスレッドに自動投稿する
ここまでやれば、立派な 「運用自動化Bot」 の完成です。
まとめ
- Slackの Block Kit はリッチだが、手書きJSONは辛い。
- n8n × AI を使えば、テキストを投げるだけで勝手にリッチなUIに変換してくれる。
- 「見た目」が良いと、チームの反応速度やモチベーションも上がる（これ重要！）。
「通知は見やすく、作る手間は最小限に」。
ぜひ、あなたのSlack通知もAIにデザインさせてみてください！
最後に：業務委託のご相談を承ります
私は業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用したレスポンシブなWebサイト制作、インタラクティブなアプリケーション開発、API連携など幅広いご要望に対応可能です。
「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、お気軽にご相談ください。一緒にビジネスの成長を目指しましょう！
👉 ポートフォリオ
🌳 らくらくサイト