By Shay DeWael
Published: 2020-03-03, Updated: 2022-01-31
このガイドでは、Block Kit UI フレームワークを使用した、Slack 向け経費承認アプリのデザインについて説明します。
デザイナー、開発者、Slack アプリ愛好者のいずれの方にも、次のプロセスを説明します: アプリの利用者の定義、Slack アプリからアクセスできるサーフェスエリアの検討、Block Kit ビルダーなどのファーストパーティデザインツールを使った経費承認アプリのレイアウト。
Slack アプリのプロトタイプに着手する前に、アプリのデザインの対象ユーザーと目的を理解しておく必要があります。API のサイトで Slack アプリのユースケースのまとめ方 (英語)について詳しく説明していますが、ユースケースを特定するシンプルな方法は、ユーザーがアプリで頻繁に行うアクション (Slack 専用アプリの場合は、最も頻繁に行われると思われるアクション) をよく考察することです。
たとえば、経費を申請するアプリをデザインしているなら、次のような2つの主要ユーザーが想定されます。
この例をもとに、この2種類のユーザーの主なユースケースに対応する経費精算アプリを Slack でデザインする方法を説明します。
アプリには、デザインの対象となる3種類のキャンバス (メッセージ、ホームタブ、モーダル) があります。各サーフェスはそれぞれ固有の目的があります。アプリの主なユースケースに照らして、目的を検討してください。
メッセージは、チャンネルとダイレクトメッセージのコンテキストに置かれます。チャンネルまたは個人ユーザーのいずれを対象とする場合でも、アプリはメッセージを使用して情報を拡散したり、ユーザーに入力を促したりできます。
メッセージのデザインに関するヒント:
API ドキュメントのメッセージのデザインに関するその他のヒント (英語)をご覧ください。
被承認者が (Slack アプリまたはサードパーティアプリから) 経費精算書を提出するときに、メッセージを経費承認担当者に送信できるようにします。承認者のユースケースに対応するため、受け取る経費精算書に承認ボタンと却下ボタンを組み込み、承認者がレポートの詳細情報を確認できるオプションを付けたいと思います。
ホームタブは、一貫してかつ動的なインターフェイスであり、ユーザーに応じて表示される内容が異なります。アプリの主な機能を組み込み、個々のユーザーに対して最も関連性の高いデータや情報を表示できる優れたスペースです。
次に、作成する経費承認アプリにこのサーフェスを当てはめてみましょう。
経費精算書を提出するユーザーには、ホームタブで、経費精算書の作成、保留中の精算書の表示、過去のすべての精算書の一覧表示ができるようにします。
経費精算書の管理と承認を担当するユーザーには、ホームタブに、保留中のすべての承認の一覧、すべての精算書の一覧、精算書の承認/却下の状況が表示されます。この場合の特別なケースとして、承認者も自身の経費を申請することがあるので、さまざまなユーザー権限と役割に対応できる動的なホームタブを作成する必要があります。
標準的なユーザーに対して表示されるホームタブは次のようになります。
承認者に表示されるホームタブは次のようになります。
モーダルとは、アプリがユーザーからの入力を収集し、特定のスペースに動的な情報を表示できる、専用ウィンドウです。ユーザーが (ボタン、スラッシュコマンド、その他の呼び出しアクションなどの機能を使って) モーダルを開始する必要があります。
users_select
、conversations_select
、datepicker
、および channels_select
要素を使うと便利です。これにより直感的な UI が実現し、作業が容易になります。では、作成する経費承認アプリにこれを当てはめてみましょう。
このアプリに2つのモーダルを組み込みます。ユーザーが経費精算書を提出するときにユーザーの入力を収集するモーダルと、経費承認者に経費精算書の詳細情報を表示するモーダルです。
経費精算書を提出する:
経費精算書に関する情報を表示する:
実際の経費承認アプリを基礎的な例として利用し、各種 Slack サーフェスエリアを扱うことに自信がついたことと思います。自分の Slack アプリのデザインを始める際に役立ついくつかのリソースを次に示します。
本ガイドは、Slack アプリの各サーフェスエリアのデザインに関する基本のみを扱っています。今後さらにブロックをリリースしていけば、アプリのデザインを繰り返していくことになるでしょう。その際には常にアプリのユーザーを念頭に置き、それに合わせたブロックにしましょう。
ご質問やコメントがありましたら、開発者サポート (@SlackAPI または support@slack.com) までご連絡ください。