※こちらの記事はCULUMU公式noteからの転載です（2023年5月2日掲載）

【イベントテーマ】：使いやすさ、アクセスしやすさを実現するB2Bサービスのデザインとは？
【開催日】：3月8日（水）18:30～
【登壇者】：保坂 浩紀氏（AI inside 株式会社）、伊原 力也氏（freee株式会社）、大村 健太（CULUMU）、川合 俊輔（CULUMU）

大村：本日は「クライアントワークにおけるわかりやすさ、使いやすさとは」という内容でお話します。クライアントワークは多種多様ありますが、今回は主にCULUMUでの取り組みをご紹介します。

自己紹介

大村：CULUMUでは主にUXデザインを担当しています。以前は5、6年ほどデザイン会社で働いていました。主に新規の事業開発や業務系システムUI設計、コーポレートサイトの構築などかなり幅広い分野のクライアントワークを行っておりました。
現在は、企業で使われるような業務システムの設計、UIの構築からアプリケーション設計、デザインワークショップの開発など幅広い部分でデザインの仕事をしています。

事例紹介①：SaaSサービス

大村：最近の事例のご紹介させていただきます。

事例紹介：「patternstorage」

大村：1つ目は「patternstorage」というBtoBサービスです。サービス内容はアパレル業界で使用される生産管理や縫製仕様書読み取りを提供しているSaaSのサービスです。このプロダクトのUIデザインを行いました。

「patternstorage」のデザイン工程

検討していくにあたり、どんな情報を扱っているのかを整理したり、どんな使い方をされているのか、フローとして整理し、クライアントと一緒に議論をしながら、整理を行いました。

「patternstorage」のデザイン工程

そこから、実際に操作をする画面のデザインを行っていきました。業務をおこなっていくにあたり、多くの情報が必要になるため、いかにわかりやすく使いやすいものにしていくか、情報設計や画面レイアウトを行いました。

「patternstorage」のデザイン工程

またこのpatternstorageの案件では、画面を作るだけではなくて、実際にその中で使われるパーツの定義（コンポーネント）、カラーやフォントスタイルなどのデザインのルールの策定など行いました。

事例紹介②：ワークショップ

大村：またインクルーシブデザインのワークショップの設計も行っています。

インクルーシブデザインワークショップ ツールキット

どのようなワークショップとするかのプログラムの設計から、ワークで使うツールキットの開発、当日のファシリテーションまで幅広く行っています。

本日、お話したいこと

大村：クライアントワークにおいてどのようにして「BtoBサービスのわかりやすさ、使いやすさのデザインをしているのか」についてです。
まずはじめに、そもそも「アクセシビリティ」と「ユーザビリティ」とは何かから、紹介していきます。

アクセシビリティ・ユーザビリティとは

大村：アクセシビリティはどういうものなのかについて、今話題のChatGPTに聞いてみました。

chatGPTに質問「アクセシビリティとは？」

このような回答が返ってきましたが、一般的なアクセシビリティとは何かという認識であると思います。

chatGPTに質問「ユーザビリティとはなんですか？」

一方でユーザビリティに関してはこのような回答が返ってきました。
先ほどと同様に一般的なユーザビリティの定義と言えると思います。

ユーザーとアプリ・サービスの間をUIがつなぐ

これらの定義をアプリ・サービスを例にとってまとめると、上の画像のように左側にユーザーがいて、右側にアプリ・サービスがあって、その間をUI（ユーザーインターフェース）が繋いでいるという関係性といえます。

「アクセシビリティ」はユーザーとアプリ・サービスの間にある

上の図の中で、「アクセシビリティ」はどこに当たるのかというとユーザーとアプリの真ん中であると思います。「ユーザーとアプリ・サービスのやりとりがうまくできるかどうか？」というのが、アクセシビリティと言えるかと思います。この矢印がうまく繋がっていない、そもそも矢印が存在しないようになると、実際にユーザーがサービスを使えない、見ることができなくなってしまい「アクセシブルじゃない」と言われるのではないかと思います。

「アクセシビリティ」はユーザーの中にある

一方で、「ユーザビリティ」はどこにあたるのかというと、左側のユーザーの中にあると考えています。「ユーザーが実際にアプリやサービスとして使ったうえで、それが理解できるのか？使いやすいのか？」ということがユーザビリティに当たると思います。使うことができたとしても使い心地が良くない、ないしは使いづらい、わかりづらいとそれはユーザビリティが低いと言われてしまうかと思います。

以上のことから、アクセシビリティとユーザビリティは、お互いに影響しあうものであると考えています。
アクセシビリティは、「そもそも高めないと使うことができない。触ることができない」ものと言えます。
一方でユーザービリティは「仮に使えたとしても、ユーザビリティが良くないと長く使い続けられない」という関係性になっていると思います。
つまり、「どちらかだけではなくて、アクセシビリティもユーザビリティもどちらも重要で大切にしていくことが必要である」と言えます。

クライアントワークにおける「BtoBサービスのデザイン」

大村：ではこのような関係を踏まえて、クライアントワークにおいて実際にどのようにBtoBのサービスデザインをしているかについてお話させていただきます。

クライアントワークにおけるBtoBサービスの進め方

クライアントワークにおけるBtoBサービスは上の画像のような流れで作っていくことが多いと思います。
まずは「現状理解・分析」の段階で、実際にどんな業務を行っているのか、どんな使い方をしているのかということを様々な人にヒアリングするところから始めていきます。
次に「基本設計」という段階で、どんな体験をすると良いのか、どんな情報を見ているのかという定義や設計、そこから実際どのような画面になるのかのワイヤーフレームを作っていきます。
ある程度基本設計ができたら、「詳細設計」の段階でより具体的な使い方、デザインの精度をあげていき、実際の目に見える画面のデザインに取りかかります。
このような工程で実際の画面デザインや仕様が決まったら、「開発・実装」の段階に入っていきます。開発が完了することで、世の中にリリースされ、実際に使ってもらうことができます。
またリリースして終わりではなく、そのあとに「運用・評価・改善」を行っていきます。具体的には新しい機能を追加したり、様々なフィードバックを受けて改善をするサイクルを回していきます。このような流れが、大まかなクライアントワークにおけるBtoBサービスの流れと言えます。

BtoBサービスをデザインする
「5つのポイント」

大村：今回は一つづつのステップについて話していくとかなり時間がかかってしまうので、5つのポイントに絞ってお話します。

BtoBサービスをデザインする「5つのポイント」

【ポイント1】実際に利用しているユーザーの声を聞く

大村：1つ目は、実際に利用しているユーザーの声を聞くということです。BtoBサービスは基本的に既存の業務や既存のシステムがあることがほとんどなため、実際に今どんな使い方をしているのか、どんな業務を行っているのかを知るところから始めていくことが多いです。また外の人として入り、一緒につくることになるため、第三者の目線に立ってヒアリングを行うことで、今までは当たり前だと思っていたことが実はそうでなかったり、自分たち独自のものであることに気づけます。

実際に利用しているユーザーの声を聞く様子

実際にヒアリングをしていく中で様々な課題や、新たな気づきが得られるというのが大きなポイントです。
過去の事例の体験をご紹介させていただきます。
以前、半導体工場で使うシステムのUI設計をしていたことがありましたその時のヒアリングで、実はこんな環境で使ってるという新発見がありました。

この画像のように、実際は黄色い照明の中でそのシステムは使われていました。
ヒアリングをするまではまさかこんな環境で使われているシステムであるという想定はしていなかったので、実際に現場で働いてる人からお話を聞くことで、普通のデザインではダメなことに気がつけました。この黄色い光の中なので、暖色系の色を使うと背景と混ざってしまって見えなくなってしまうと考えられたので、寒色系をできるだけ使ってデザインをすることで、使いやすいものを作ることができました。
このように、実際に使っている人や働いている人にお話を伺うことで、使われている状況やどんなことを気にしてるのかといったことを知ることが大切です。

【ポイント2】ユーザーの行動と、扱う情報を明らかにする

【ポイント2】ユーザーの行動と、扱う情報を明らかにする

大村：上の画像は、先ほどのポイント1でやっていたようなどんな使い方しているのかなど、ヒアリングでの様々な情報を使って、どのような体験となっているか、ユーザーフローを書くことで、整理を行います。実際にどんなステップで業務をしているのか、どんな情報を見てるのかを画像のような図にまとめながら整理しています。

ユーザーの行動と、扱う情報を明らかにする

また、BtoBのサービスにおいては多くの情報があり、複雑な関係性を持っている場合が多いです。「OOUI（オブジェクト指向UIデザイン）」の考え方を使って、情報の整理を行っています。
このように情報の関係性を整理した上で、それを表すUIを作っていくことがBtoBのサービスのデザインをしていくうえで大切であると思っています。ここで、目に見える形に整理することでいろんな方を巻き込み議論することができるということが1つの大きなポイントです。
図などを用いていろいろな方々と一緒に見ながら、情報の足りなさや個々のユーザーのアクションに何が足りないかということに気づき議論することができるため、絵に起こすことは重要であると考えています。

【ポイント3】モックアップを作成し、実際に触ってみてもらうことで検証する

大村：ポイント1、2で整理した情報の関係性を使って、実際に触って体験できるモックアップを作ります。実際に触ってみてもらうことでそれが業務に耐えうるものなのかどうなのかを検証してもらうことができます。また、モックアップにすることのメリットの1つは、様々な人に見てもらうことができることです。このプロジェクトに関わっていない人や他の部署の人にも少し触ってもらう、見てもらうことでより幅広い人に検証してもらうことが可能になります。

モックアップを作成し、実際に触ってみてもらうことで検証する

特にBtoBのサービスにおいては、実際に画面を触ってみてもらうことで得られる気づきは多いと思っています。よくある例ですが、リストは世の中の一般的な作り方をすると、画像の左側のように、余白を多く作り、押せる部分がわかりやすいことが求められていたり、ベストプラクティスと言われることが多いと思います。
しかし業務システムの場合は、画像の右側のように、ギュッと詰まっていることが求められることがあります。これは実際にプロトタイプを使って検証していくと言われることが多いです。何故かというと、BtoBのサービスでは、業務をいかに効率化させるか、自分のタスクをいかに素早く終わらせられるかに重点を置いたものでもあると言えます。したがって一覧性を高めたり、一つの画面内に多くの情報を載せられることがよく求められます。実際に作って、見てもらうことで初めて気づくことができたり、求められていることがわかるものであると思います。
このように実際にモックアップを触ってもらうことで、ただデザインを作るだけではわからないフィードバックを得ることができます。

【ポイント4】業務での使いやすさを考慮した設計・開発

大村：ある程度画面のデザイン設計の方針が決まったら実際に開発をしていきます。BtoBサービスは効率を求められることが多いので、例えばキーボードでの操作や小画面の拡大縮小の対応を考慮した開発が求められることも多いです。
特に業務系ですと、間違った操作がビジネスに大きく影響してしまう可能性もあるので、文字の読みやすさや色の識別のしやすさを十分に考慮したものを作っていく必要があります。つまり、業務で使われるサービスは、一般的な日常の生活とは異なる、特殊な環境で使われていると言えます。
タブのフォーカスや画面の拡大縮小などは日常生活では使うことが少ない事もあると思いますが、業務という少し特殊な環境の中では有効に使える、もしくはこの機能がなければ業務が成り立たないということもあります。

業務での使いやすさを考慮した設計・開発

【ポイント5】リリース後からの継続的な改善

大村：クライアントワークにおいて、BtoBデザインや開発をして手離れをしてしまうことはよくあります。ただ、サービスやアプリはその後もずっと使われていき、改善が続けられていくものなので、できるだけ同じ状況でずっと使い続けてもらえる、開発し続けてもらえるようなルール化が大切であると思っています。
特にアクセシブルに使い続けられるようなルール、例えば色の組み合わせをどうするのか、サイズをいくつにするのかなどはルール化しておかないとどんどん崩れていってしまいます。そういう部分はできるだけを言語化して資料として残していくということを意識して行っています。
サービスをどんどん改善していくと良くなることもありますが、劣化してしまうこともあるので、劣化していかない仕組み作りが必要であると思っています。

継続的な開発や改善ができるためのドキュメントやルール化を行う

5つのポイントまとめ

今回の5つのポイントは、アクセシビリティとユーザビリティのどちらに当てはまるものでしょうか。最初の2つがいかに使いやすくなるかという「ユーザビリティ」に関わる部分であると思います。一方で後半2つは「アクセシビリティ」に関わるような内容であると言えます。3つ目のモックアップを使った検証は、おそらくどちらにも影響があると考えられます。モックアップを作ってみて、使えないという判断になるとアクセシビリティがないということになりますし、使えたとしても使いづらいとなると、それはユーザビリティの問題になると言えます。したがってどちらも活かせるものであると思います。
ユーザビリティもアクセシビリティも、検討のプロセスの中で一連で行うことが必要であると思います。どこかを切り抜いてやることも可能ではありますが、一連の流れの中で行うことが一番効果的な方法であると考えています。

BtoBサービスをデザインする5つのポイント

まとめ

本日の内容のまとめです。

• アクセシビリティ、ユーザビリティはどちらかだけでは実現せず、どちらも行っていくことが大切
• 特にクライアントワークにおいては、各プロセスやステップで行えることがあるので、少しづつでもできるところから進めていくことが必要

ではどこから行えばいいのか分からないこともあると思います。
まずできることととして、

• モックアップを使って、様々な人たちにヒアリングを行ってみる
• 自分たちのサービス、作ってみているものでアクセシビリティテストをやってみる
• アクセシビリティに配慮した色使いや文字の使い方を行ってみる

ぜひ実践してみていただければと思います。
ご清聴ありがとうございました。

登壇者プロフィール：

大村 健太（おおむら けんた）：株式会社STYZ インクルーシブデザインスタジオCULUMU Lead UX Designer

大手デザイン会社に就職し、新規事業開発や業務系システムのUI設計、コーポレートサイト構築など、幅広い領域・分野を経験。現在は、サービス（業務）設計からUX/UI設計、開発に向けての画面設計・仕様策定まで一貫して業務に携わる。
STYZでは、生産現場で使われる業務システムの情報設計、UI構築からアプリケーションの設計、デザインからワークショップツールの開発まで幅広く行っている。

関連記事