こんにちは😊
株式会社プロドウガの@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制作を依頼したい」という方は、お気軽にご相談ください。一緒にビジネスの成長を目指しましょう！

👉 ポートフォリオ

🌳 らくらくサイト