業務ツールでの「おもてなし」をデザインする話

本稿はJCB Advent Calendar 2024の12月16日の記事です。

こんにちは。デザインチームの関です。

今回はJCB Digital Enablement Platform (JDEP)におけるプロダクトデザインでの試行錯誤をお話しします。デザインチームでは、複数のプロダクトで汎用的に使えるUIパーツやガイドラインを定義したデザインシステムを構築しました。私はこのシステムを広めるべく、クレジットカードの業務ツールの画面から順次適用しています。
デザインシステム構築の取り組み記事もぜひご覧ください。 JCBがゼロから始めたデザインシステム構築

JCBにおける業務ツールとは、例えば企業様がカード発行や各種手続きなどを行えるプロダクトを指します。デザインシステムは高速かつ高品質に画面を設計できるメリットがあるものの「どのように設計するか」はデザイナーの力量次第です。

大切にしていること

私が画面設計で大切にしているのは、JCBのブランドコンセプトである「世界にひとつ。あなたにひとつ。」です。このメッセージには「おもてなしの心」という意味も含まれています。

では、業務ツールにおけるおもてなしとは？　それは「このデザインスゴい！」ではなく「普通に使えた」「やりたいことがシンプルにできた」これこそがおもてなしだと考えています。お客様にこのように実感していただくには、設計思想やUIの組み立て方といった大枠から、細かなパーツの使い方や文言選定まで、しっかり熟慮する必要があります。以降では重要なポイントをいくつかご紹介します。

設計思想について：「ポカヨケ」を最優先

「ポカヨケ」という言葉をご存知でしょうか。ポカ＝失敗、ヨケ＝避ける、で操作ミスを防止する仕組みを意味します。もともとは製造業で工場での作業ミス防止として考えられた言葉だそうです。

クレジットカードは至ってシンプルに決済が完了する便利なツールですが、その裏側は複雑な仕組みによって支えられています。脳みそからケムリが噴き出すほど難解です（笑）。そしてクレジットカードはお金に関わるもの、ミスが許されないサービスでもあります。このような背景から、利用されるお客様のミスを未然に防ぐ設計を最優先にしています。

UIについて：オブジェクト指向UIか、タスク指向UIか

近年さまざまなUIの考え方が提唱されています。これらは適切に組み込まないとトレンディーなUIだが使いづらい、ということになります。

例えば、とあるプロダクトでは「ドキュメントを新規作成して申請する」「申請されたドキュメントの承認、編集などを行う」という業務要件があったとします。ある程度決まった申請手順であれば、タスク指向の方が単刀直入ですし、ミスは少なくなります。銀行のATM画面などが該当します。一方で承認や編集作業はドキュメント一覧を見て何をするかを判断するので、オブジェクト指向の方が各種作業をシンプルなUIで表現できるので効率的です。スマホのアルバムアプリなどが該当します。

デザインのフレームワークはあくまで手段であり、お客様に最適な画面を提供するという本来の目的を忘れないようにします。

Tips：選択肢のないダイアログは不要か

何かを実行したことを伝えるUIをどのようにするか、意外と迷ったりしませんか。ダイアログでしっかり伝えるか、クリック数を削減できるノーティフィケーションで済ませるか。ましてや選択肢のないダイアログなんて必要？　とも思われがちです。
UIに迷ったらペルソナやユーザーシナリオ、画面設計のコンセプトなどに立ち返ります。ポカヨケの観点では、例え選択肢は無くともクリックさせて認知させるダイアログが良いケースもあります。一方で作業効率が重要だったり、そもそもカジュアルな目的のツールであればこのようなダイアログはむしろ悪UIになります。このようにTPOに合わせてUIを吟味することも大切です。

Tips：UIに人格を乗せる

ポカヨケを優先すると、どうしてもトゲトゲしくカタい表現になりがちです。そこへ「おもてなし」人格をしっかり乗せる必要があります。さりげない表現の工夫で印象が変わります。
お客様の印象
左：やっと面倒な登録が終わって早々に、まだ使えないって注意されたよ（怒）。
右：やっと登録が終わった。明日から使えるのが待ち遠しいな（期待）。