[小ネタ]Slackボットの体験をデザインするBlock Kit Builder

2019.04.02

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、中村です。

Slack APIを利用したメッセージ送信はテキストだけでなくリッチでインタラクティブなメッセージを送信することができます。しかしドキュメントを読みながら実装していくと結構コストが高くなります。 Block Kit Builderを使うことで実際に送信するJSONをGUIにて生成できます。これにより高速にプロトタイプの作成が可能になると思います。

Block Kit Builder

2019年4月2日現在では、下記のブロックが利用できます。

項目名 説明
Section テキストやマークダウンを表示する領域。画像やボタン要素も対応している。
Image 画像とその説明を表示する領域。
Context 説明やメタデータを表示する領域
Actions 5つのアクションを表示する領域
Divider 複数のコンテンツ表示を分ける場合に利用する
Section with Image 画像が表示されているSection
Section with Button ボタンが表示されているSection
Section with Select セレクトリストが表示されているSection
Section with Overflow オーバフローメニューが表示されているSection
Section with Datepicker 日付選択が表示されているSection
Section with Fields フィールド分けされているSection

Start with a Templateをクリックすると既に大枠が作成されているものを利用することもできます。Templateを確認してみて要件に合うものがないか確認してみるといいかもしれません。

ブロックもしくはテンプレートを選択すると、Desktop/Mobileでのビジュアル(タブで切り替え)とJSONデータが表示されます。もし選択したものにボタンなどのUIがある場合はそれをクリックした時のJSON情報も確認することができます。またJSONを編集することでビジュアルへも反映されます。

また作成したデータは、任意のワークスペースのチャネルに送信できます。これによりデザインしたものを保存しておけますが、メッセージを編集してJSONを取得する等はできないのでBuilder右上にあるCopy機能を使って保存してください。

まとめ

小ネタですがBlock Kit Builderの説明でした。ボットを構築する上でペルソナやフローの確定後に文言やUIの検討が必要になります。ここの設計がボットのUXに大きな影響を与えるためBuilderを使ってプロトタイプの作成を高速化しつつ、お客様との体験設計に利用できると考えると非常に有用なツールです。

チャットボット開発は弊社にご相談ください。

またAmazon Connectのキャンペーンを行なっております。こちらもご相談お待ちしております。