BtoBに必要なのは、シンプルさより「予測可能性」《村田俊英の『事業をドライブさせるデザイナーの越境思考』｜Vol.9》

BtoBプロダクトのデザインをしていると、次のようなフィードバックを受けることがあります。

「統一感があって先進的だけれど、少しわかりづらい」
「もっとボタンを大きくしてほしい」
「アイコンだけでは、押した後に何が起きるのかわからない」
「操作するたびに、案内があった方が迷わない」
etc.

デザイナーとしては、少し複雑な気持ちになります。

余白を整え、色のルールを決め、コンポーネントを統一し、情報量を抑えた。また、古く見えないように細部までつくり込んだ。それでも、「もっと大きく」「もっと説明してほしい」と言われてしまう。言われた通りにすべてを大きくし、文言を追加していけば、せっかく整理した画面が野暮ったくなってしまうかもしれません。

一方で、「ボタンをもっと大きくして」というフィードバックは、必ずしもボタンの物理的な大きさを問題にしているわけではありません。多くの場合、ユーザーが伝えようとしているのは……、

次に何をすればよいのかが、わからない
押した後に何が起きるのか、予測できない
間違えたときに、戻れるのかわからず、不安

こうした、操作への自信のなさ、なのではないでしょうか。

BtoBプロダクトは、積極的に使いたくて使うものではない

BtoCのサービスでは、ユーザー自身が興味を持ってアプリをインストールし、何度も操作しながら使い方を覚えてくれることがあります。

しかし、BtoBプロダクトは少し事情が違います。

会社から指定されて、使い始める。
月に数回しか触らない。
前回の操作から期間が空く。
担当業務によって使う機能が違う。
操作を間違えると、業務やデータに影響する。
etc.

BtoBプロダクトのユーザーは、プロダクトの使い方を積極的に学んでくれるとは限りません。新しい操作方法を発見する楽しさよりも、できるだけ早く、安全に業務を終わらせたいという気持ちの方が強いからです。そのため、BtoBプロダクトでは、洗練された見た目だけでなく、操作する前から結果を予測できることが重要になります。

「ボタンを大きくして」に隠れている問題

ユーザーからのフィードバックは、必ずしも問題の原因を正確に表しているとは限りません。たとえば、「ボタンを大きくしてほしい」という言葉の裏には、さまざまな問題が隠れています。

①「どれが押せるのか」がわからない

テキスト、カード、アイコン、ボタンの見た目が似ていると、ユーザーは操作できる場所を判断できません。これは大きさよりも、コントラストや形、余白、配置によるアフォーダンスの問題です。

②「どれを最初に押せばよいのか」がわからない

画面内に同じ強さのボタンが並んでいると、主要な操作が見つかりません。つまり、ボタン自体が小さいのではなく、画面内の優先順位が弱い可能性があります。

③「アイコンの意味」がわからない

デザイナーやITツールに慣れた人には一般的に見えるアイコンでも、すべてのユーザーが同じ意味を読み取れるとは限りません。さらに、アイコンの意味はわかっても、押した結果まで予測できないことがあります。

④「現在地」がわからない

何階層も移動するプロダクトでは、「今どこにいて、どこから来たのか」がわからなくなります。この場合、必要なのは大きなボタンではなく「パンくず」「ステップ表示」「選択状態」「戻る導線」などになります。つまり、「ボタンを大きくして」は解決策ではなく、ユーザーが画面の中で十分な手がかりを得られていないことを知らせるサインとして、伝えているのです。

統一感があっても、使いやすいとは限らない

デザインシステムを整備すると、プロダクト全体の見た目や挙動を統一できます。同じボタン、同じ余白、同じ色、同じコンポーネントを使うことで、開発効率も品質も上がります。ただし、「統一されていること」と「わかりやすいこと」は同じではありません。

たとえば、わかりづらいアイコンボタンを全画面で統一すれば、ユーザーはどの画面でも同じように迷うだけです。情報量を抑えるルールを徹底しすぎれば、どの画面でも説明が不足します。控えめなボタンを一貫して使えば、主要な操作をどの画面でも発見しにくくなります。

デザインシステムは、一貫した体験をつくる強力な仕組みです。だからこそ、ルールを間違えると、迷いまで一貫して再生産してしまいます。

必要なのは、コンポーネントの見た目だけではありません。

アイコンだけで操作させてよい条件
文言を併記すべき操作
主要なボタンを強調する方法
階層移動に使うナビゲーション
操作後の結果を伝えるフィードバック
初回利用者に説明が必要な概念
etc.

こうした「使い方のルール」まで、デザインシステムに含める必要があります。

「直感的」とは、説明が少ないことではない

デザイナーは、要素を減らしてシンプルにすることを「直感的」と捉えがちです。しかし、ユーザーにとっての直感性は、見た目のシンプルさだけでは決まりません。

直感的に使える状態とは、

押す前に、何が起きるか予測できる
押した後に、何が変わったか理解できる
操作中に、自分の現在地がわかる
間違えても、元に戻れるとわかる

という状態です。

要素が少なくても、意味が伝わらなければ直感的ではありません。反対に、文言やナビゲーションが多少増えても、迷わず業務を完了できるなら、その方がユーザーにとってはシンプルです。画面がシンプルであることと、操作がシンプルであることは違うのです。

初心者も熟練者も使いやすくするには？

ここで難しいのが、初心者と熟練者の両立です。すべてのボタンを大きくして、操作ごとに説明を表示すれば、初めて使う人にはわかりやすくなるかもしれません。一方で、毎日使う人にとっては、画面の情報量が増え、操作のたびに余計なステップが発生します。

だから、どちらか一方に合わせるのではなく、2つの体験を分けて設計します。

初めて使う人には「文言」「説明」「現在地」「次の操作」を明示する。慣れた人には「検索」「ショートカット」「一括操作」「最近使った項目」など、目的へ素早く到達する方法を提供する。目指すべきは、誰にとっても単純なUIではなく、初見でも怖くなく、慣れるほど速くなるUIです。

フィードバックを、そのまま実装しない

BtoBユーザーから「ボタンを大きくして」と言われたとき、そのままボタンを大きくする前に、実際の操作を見せてもらう必要があります。

何をしようとしていたのか？
最初にどこを押そうとしたのか？
押したら何が起きると思ったのか？
どの時点で迷ったのか？
目的へ到達するまで、何度戻ったのか？
etc.

聞くべきなのは、好き嫌いではなく具体的な行動です。そして、改善前と改善後で次のような変化を確認します。

タスクを完了できたか？
完了まで何分かかったか？
何回クリックしたか？
どこで戻ったり、やり直したりしたか？
操作に自信を持てたか？
etc.

ユーザーの言葉をそのまま形にするのではありません。その言葉の裏にある問題を見つけることが、プロダクトデザイナーの役割です。

BtoBプロダクトにおけるデザインの3条件

「先進的だけれど、わかりづらい」という評価を受けたとき、先進性を捨てる必要はありません。だからといって、ユーザーのリテラシーの問題として片づけるべきでもありません。デザイナーが確認すべきことは、次の3つです。

押す前（クリック前）に、何が起きるかわかるか。
押した後（クリック後）に、現在地がわかるか。
目的まで、迷わず到達できるか。

これら3つを満たしたうえで、視覚的な統一感やブランドらしさをつくる。それがBtoBプロダクトにおけるデザインの順番です。

本当に先進的なUIとは、新しい見た目をしているUIではありません。複雑な業務を扱っているのに、ユーザーがその複雑さを意識せず、迷わず仕事を終えられるUIです。「ボタンをもっと大きくして」という言葉は、デザインを後退させる要求ではありません。いまのUIから、ユーザーに必要な手がかりが抜け落ちていることを教えてくれる大切なフィードバックなのだと思います。

プロフィール

文：村田俊英（Resilire）