Block Kit で経費承認アプリをデザインする
By Shay DeWael
Published: 2020-03-03, Updated: 2022-01-31
このガイドでは、Block Kit UI フレームワークを使用した、Slack 向け経費承認アプリのデザインについて説明します。
デザイナー、開発者、Slack アプリ愛好者のいずれの方にも、次のプロセスを説明します: アプリの利用者の定義、Slack アプリからアクセスできるサーフェスエリアの検討、Block Kit ビルダーなどのファーストパーティデザインツールを使った経費承認アプリのレイアウト。
デザインの内容
Slack アプリのユースケースを特定する
Slack アプリのプロトタイプに着手する前に、アプリのデザインの対象ユーザーと目的を理解しておく必要があります。API のサイトで Slack アプリのユースケースのまとめ方 (英語)について詳しく説明していますが、ユースケースを特定するシンプルな方法は、ユーザーがアプリで頻繁に行うアクション (Slack 専用アプリの場合は、最も頻繁に行われると思われるアクション) をよく考察することです。
たとえば、経費を申請するアプリをデザインしているなら、次のような2つの主要ユーザーが想定されます。
- 経費を申請するユーザー。アプリを使って経費精算書を簡単に入力できることを希望しています。経費の金額、種類、経費精算書の提出に必要な追加情報 (領収書の添付など) を入力できることを希望しています。
- 経費を管理するユーザー。部下から新たな経費精算書が提出されたときにアプリで通知を受信することを希望しています。経費をすぐに確認できること、そして Slack から経費の承認と却下を実行できることを求めています。また、精算書の詳細を確認するために、Slack から離れて各自が使っている経費管理アプリに移動できることも希望しています。
この例をもとに、この2種類のユーザーの主なユースケースに対応する経費精算アプリを Slack でデザインする方法を説明します。
Slack アプリのサーフェスエリア
アプリには、デザインの対象となる3種類のキャンバス (メッセージ、ホームタブ、モーダル) があります。各サーフェスはそれぞれ固有の目的があります。アプリの主なユースケースに照らして、目的を検討してください。
メッセージ
メッセージは、チャンネルとダイレクトメッセージのコンテキストに置かれます。チャンネルまたは個人ユーザーのいずれを対象とする場合でも、アプリはメッセージを使用して情報を拡散したり、ユーザーに入力を促したりできます。
メッセージのデザインに関するヒント:
- メッセージの内容が一目で分かるようにする。 1つのメッセージに情報を詰め込み過ぎないようにしてください。代わりに、モーダルまたはサードパーティのサイトで詳細情報を確認できるオプションをユーザーに提供してください。
- コールトゥアクション (CTA) を組み込む。 このメッセージを見たユーザーは何をするべきでしょうか?どのようなアクションを行う必要があるのでしょうか?ユーザーが特にアクションを行う必要がない場合、ユーザーが理解しておくべき追加情報がありますか?
API ドキュメントのメッセージのデザインに関するその他のヒント (英語)をご覧ください。
被承認者が (Slack アプリまたはサードパーティアプリから) 経費精算書を提出するときに、メッセージを経費承認担当者に送信できるようにします。承認者のユースケースに対応するため、受け取る経費精算書に承認ボタンと却下ボタンを組み込み、承認者がレポートの詳細情報を確認できるオプションを付けたいと思います。
ホームタブ
ホームタブは、一貫してかつ動的なインターフェイスであり、ユーザーに応じて表示される内容が異なります。アプリの主な機能を組み込み、個々のユーザーに対して最も関連性の高いデータや情報を表示できる優れたスペースです。
ホームタブのデザインに関するヒント:
- アプリの使い方に関する情報を組み込む。ホームタブの上部に、アプリの内容と使い方に関する情報を組み込みます。アプリに多くの機能がある場合は、モーダルを開いてアプリのすべての機能を表示するヘルプボタンを追加することを検討してください (これによりホームタブに表示される情報が多過ぎることがなくなります)。
- アプリの主なアクションを組み込む。ホームタブの上部付近に、ボタンまたはその他のインタラクティブコンポーネント (英語)を使用して、ユーザーが使用する主なコールトゥアクションを表示します。外部の select 要素を使用してサードパーティサービスを検索する機能を実装することもできます。
- 階層構造で情報を維持する。他のアプリサーフェスと同様、情報が一目で分かり、すぐにアクションを実行できるようにする必要があります。ホームタブの大きな領域の情報の編成方法も検討します。情報量が多いなら、どのようなページ編成にするか、またはどのように解析しやすくできるかを考えます。
- ホームタブやアプリをカスタマイズする機能を追加する。ユーザーへの通知送信頻度の設定や、切り替え可能な機能がアプリに含まれている場合には、ユーザーがアプリの最適な動作をカスタマイズできるモーダルを開く設定ボタンを追加します。ホームタブに表示される情報をユーザーがどのようにフィルタリングまたは変更したいと思うかを考慮することもできます。
次に、作成する経費承認アプリにこのサーフェスを当てはめてみましょう。
経費精算書を提出するユーザーには、ホームタブで、経費精算書の作成、保留中の精算書の表示、過去のすべての精算書の一覧表示ができるようにします。
経費精算書の管理と承認を担当するユーザーには、ホームタブに、保留中のすべての承認の一覧、すべての精算書の一覧、精算書の承認/却下の状況が表示されます。この場合の特別なケースとして、承認者も自身の経費を申請することがあるので、さまざまなユーザー権限と役割に対応できる動的なホームタブを作成する必要があります。
標準的なユーザーに対して表示されるホームタブは次のようになります。
承認者に表示されるホームタブは次のようになります。
モーダル
モーダルとは、アプリがユーザーからの入力を収集し、特定のスペースに動的な情報を表示できる、専用ウィンドウです。ユーザーが (ボタン、スラッシュコマンド、その他の呼び出しアクションなどの機能を使って) モーダルを開始する必要があります。
モーダルのデザインに関するヒント:
- モーダルの目的を常に意識する。モーダルは、ユーザー入力を収集したり、メッセージやホームタブでプレビューした内容の詳細情報を表示したりするために使用できます。モーダルをデザインするときには、モーダルの目的と、ユーザーがモーダルを開いて行う操作を意識してください。モーダルは特定の目的に特化したサーフェスエリアであるため、ユーザーは目的を達成したら速やかに Slack のコンテキストに戻ることを希望します。
- 必要なユーザー入力だけを収集する。モーダルはユーザーが少量の情報を入力するときには便利ですが、(ユースケースによっては) フォームのすべてのフィールドやカスタマイズ可能なオプションを組み込むと煩雑になるかもしれません。収集する情報を最小限に抑え、必要に応じてボタンを使ったページ操作を採用してください。
- デフォルトの select 要素を使用する。静的な外部の select 要素を使用する代わりに、
users_select、conversations_select、datepicker、およびchannels_select要素を使うと便利です。これにより直感的な UI が実現し、作業が容易になります。
では、作成する経費承認アプリにこれを当てはめてみましょう。
このアプリに2つのモーダルを組み込みます。ユーザーが経費精算書を提出するときにユーザーの入力を収集するモーダルと、経費承認者に経費精算書の詳細情報を表示するモーダルです。
経費精算書を提出する:
経費精算書に関する情報を表示する:
次のステップ
実際の経費承認アプリを基礎的な例として利用し、各種 Slack サーフェスエリアを扱うことに自信がついたことと思います。自分の Slack アプリのデザインを始める際に役立ついくつかのリソースを次に示します。
- Block Kit ビルダー (英語): Slack アプリの一般的なユースケースのデザインを開始するためのテンプレートが含まれています。自分の Slack アプリを作成開始する際に利用できる優れたリソースです。
- スタートハブ (英語): アプリのスタイルやトーンの定義、オンボーディングエクスペリエンスの設計など、Slack アプリの計画とデザインに関する総合的なガイドラインを提供しています。
- Figma テンプレート (英語): Figma でシンプルにアプリのプロトタイピングができる UI サーフェイスとコンポーネントが含まれている Figma ファイルです。
- Bolt 🇯🇵: 最新のプラットフォーム機能やサーフェスエリアをすべて利用して Slack アプリの開発を簡単に始められる軽量なアプリ開発フレームワークです。 JavaScript (Node.js)、Python、Java で利用することができます。
本ガイドは、Slack アプリの各サーフェスエリアのデザインに関する基本のみを扱っています。今後さらにブロックをリリースしていけば、アプリのデザインを繰り返していくことになるでしょう。その際には常にアプリのユーザーを念頭に置き、それに合わせたブロックにしましょう。
ご質問やコメントがありましたら、開発者サポート (@SlackAPI または support@slack.com) までご連絡ください。