ワークフロー効率化のためのBlockKitデザイン
ワークフローを効率化するには、ユーザーが直感的に操作できるインターフェースを提供することが重要です。
Slack アプリでは Block Kit を活用することで、メッセージやモーダルをカスタマイズしたり、ボタンやフォームを見やすく整理したりできます。
そこで今回は Block Kit を活用して、 Slack アプリのモジュールをデザインする方法をご紹介します！
Block Kitについて
Block Kit は Slack アプリの UI を構築するための Slack 公式のフレームワークです。
Block Kit Builder ではそれぞれの実装イメージを確認できるので便利です。
以下にいくつかのブロックの種類と役割を紹介します。
| ブロックの種類 | 役割 |
|---|---|
| header | メッセージやモーダルの見出しを設定する |
| divider | コンテンツを区切るための線を挿入する |
| section | テキストや画像を表示する |
| input | ユーザーがテキストや選択肢を入力できるフォームを作成する |
| actions | ボタンやセレクトメニューを配置し、ユーザーの操作を受け付ける |
デザインイメージ
今回は Block Kit を使用して「参加申請フォーム」を作成します。
このフォームでは、参加者情報の入力や、参加形式の選択などを行えるようにシンプルなデザインを実装します。
実装方法
上記のデザインを実現するために、以下のように Block Kit のブロックを配置します。
- タイトルを設定する
- 説明文を追加する
- 仕切り線を追加する
- 入力欄（日付）を設定する
- 入力欄（一行テキスト）を設定する
- ラジオボタンを設定する
- 選択欄（単一選択可能）を設定する
- 選択欄（複数選択可能）を設定する
- 入力欄（複数行テキスト）を設定する
1. タイトルを設定する
まずはタイトルを設定するため、header タイプのブロックを使用します。
「参加申請フォーム」と表示されるように設定します。
{
"blocks": [
{
"type": "header",
"text": {
"type": "plain_text",
"text": "参加申請フォーム",
"emoji": true
}
},
]
}
2. 説明文を追加する
説明文を追加するため、section タイプのブロックを使用します。
「以下のフォームに記入して、交流会に参加申し込みをしてください。」と表示されるように設定します。
{
"blocks": [
// 以下のブロックを追加
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "以下のフォームに記入して、交流会に参加申し込みをしてください。"
}
},
]
}
3. 仕切り線を追加する
仕切り線には divider タイプのブロックを使用します。
{
"blocks": [
// 以下のブロックを追加
{
"type": "divider"
},
]
}
4. 入力欄（日付）を設定する
参加予定日のカラムを設定します。
日付の入力欄には input タイプの datepicker を使用します。
initial_date には初期設定する日付を設定できます。設定しない場合は「日付を選択」が表示されます。
{
"blocks": [
// 以下のブロックを追加
{
"type": "input",
"element": {
"type": "datepicker",
"initial_date": "2025-01-23",
"placeholder": {
"type": "plain_text",
"text": "日付を選択",
"emoji": true
},
"action_id": "datepicker-action"
},
"label": {
"type": "plain_text",
"text": "参加予定日",
"emoji": true
}
},
]
}
5. 入力欄（一行テキスト）を設定する
参加者氏名のカラムを設定します。
テキストの入力欄には input タイプの plain_text_input を使用します。
こちらは一行のテキストを入力するためのブロックになります。
{
"blocks": [
// 以下のブロックを追加
{
"type": "input",
"element": {
"type": "plain_text_input",
"action_id": "plain_text_input-action"
},
"label": {
"type": "plain_text",
"text": "参加者氏名",
"emoji": true
}
},
]
}
6. ラジオボタンを設定する
同伴者有無のカラムを設定します。
Block Kit のラジオボタンには以下の 3 つの種類があります。
✅ section ブロック：説明文とセットでラジオボタンを置く。
✅ actions ブロック：任意の複数の選択肢を並べる。
✅ input ブロック：必須の複数の選択肢を並べる。（バリデーションが必要な場合はこちらを使用する。）
今回は必須のラジオボタンを設定したいので input を使用します。
{
"blocks": [
// 以下のブロックを追加
{
"type": "input",
"element": {
"type": "radio_buttons",
"options": [
{
"text": {
"type": "plain_text",
"text": "同伴者あり",
"emoji": true
},
"value": "withCompanions"
},
{
"text": {
"type": "plain_text",
"text": "同伴者なし",
"emoji": true
},
"value": "withoutCompanions"
}
],
"action_id": "radio_buttons-action"
},
"label": {
"type": "plain_text",
"text": "同伴者有無",
"emoji": true
}
},
]
}
7. 選択欄（単一選択可能）を設定する
参加種別のカラムを設定します。
単一選択可能の入力欄には input タイプの static_select を使用します。
options に選択肢を設定します。今回は「現地で参加」「オンラインで参加」「考え中」を設定します。
{
"blocks": [
// 以下のブロックを追加
{
"type": "input",
"element": {
"type": "static_select",
"placeholder": {
"type": "plain_text",
"text": "種別を選択",
"emoji": true
},
"options": [
{
"text": {
"type": "plain_text",
"text": "現地で参加",
"emoji": true
},
"value": "value-0"
},
{
"text": {
"type": "plain_text",
"text": "オンラインで参加",
"emoji": true
},
"value": "value-1"
},
{
"text": {
"type": "plain_text",
"text": "考え中",
"emoji": true
},
"value": "value-2"
}
],
"action_id": "static_select-action"
},
"label": {
"type": "plain_text",
"text": "参加種別",
"emoji": true
}
},
]
}
8. 選択欄（複数選択可能）を設定する
参加する時間帯のカラムを設定します。
複数選択可能の入力欄には input タイプの multi_static_select を使用します。
options には「午前の部」「午後の部」を設定します。
{
"blocks": [
// 以下のブロックを追加
{
"type": "input",
"element": {
"type": "multi_static_select",
"placeholder": {
"type": "plain_text",
"text": "時間帯を指定",
"emoji": true
},
"options": [
{
"text": {
"type": "plain_text",
"text": "午前の部",
"emoji": true
},
"value": "value-0"
},
{
"text": {
"type": "plain_text",
"text": "午後の部",
"emoji": true
},
"value": "value-1"
}
],
"action_id": "multi_static_select-action"
},
"label": {
"type": "plain_text",
"text": "参加する時間帯（複数選択可能）",
"emoji": true
}
},
]
}
9. 入力欄（複数行テキスト）を設定する
最後に備考のカラムを設定します。
複数行のテキストの入力欄には input タイプの plain_text_input を使用し、 multiline を true にします。
また、備考は任意としたいので optional を true にします。
{
"blocks": [
// 以下のブロックを追加
{
"type": "input",
"optional": true,
"element": {
"type": "plain_text_input",
"multiline": true,
"action_id": "plain_text_input-action"
},
"label": {
"type": "plain_text",
"text": "備考",
"emoji": true
}
}
]
}
まとめ
今回は、 Block Kit を活用して Slack アプリの UI をデザインする方法を紹介しました。
ブロックを適切に組み合わせることで、柔軟なフォームを作成できます。
また、Block Kit Builder 使えば、視覚的にレイアウトを確認しながら設計できるのでとても便利です。
Block Kit を活用して、Slack アプリの UI をもっと便利に、効率的なワークフローの実現に役立てていきましょう！
Discussion