こんにちは。アシアル広報チームです。Webサイトやアプリケーションを作る上でも重視されているUX（ユーザーエクスペリエンス）。昨年8月にもプロダクトデザイナー・Webディレクターの鴨田が一度触れていますが、今回は再びアシアルにおけるUXについてお話しします。

UIとUXの違いとは？

UI（ユーザーインターフェイス）とセットで語られがちなUX。たしかに、優れたUXを提供するために優れたUIは必須です。でも、UIをよくしたからといって、必ずしもよいUXにはなりません。なぜなら、UXはUIからのみ成り立っているわけではないからです。

ここで改めてUIとUXの違いをおさらいしておきましょう。

UIとは、パソコンやスマホ、タブレットの画面上でユーザーが触れる情報すべてのことで、ビジュアルデザインやフォントの選択、操作の分かりやすさなどがUIの良し悪しを大きく左右します。一方、UXは、ユーザーが製品やサービスに触れて得られる体験のこと。

例えば、ショッピングサイトを訪れたユーザーが、わかりやすい商品説明と魅力的な写真を見て「なるほどこんな商品なんだ」「これが欲しい！」と感じたとすれば、“商品を理解する”“欲しいと思う”は体験であり、これがUXです。

これらの体験（＝UX）を提供するためには、商品説明や写真の配置、大きさなど（＝UI）が最適でなければなりません。それによって、ユーザーは“商品を理解する”“欲しいと思う”という、ポジティブな感情を体験します。

しかし、商品説明やレイアウトが最適であっても、購入ボタンをクリックしたのに画面がなかなか遷移しなかったら？　購入ボタンをクリックしたあとに、やたらいろいろ入力しなければならなかったら？　“遅い”“面倒”というマイナスの感情を抱くでしょう。

アシアルが考える２方向のUXとお客様

狭義におけるUIデザイン（設計）は、ユーザーとの接点を美しく、使いやすく整えることです。ただ、それだけではよいUXは提供できません。見える部分だけではなく、誰がどんな状況下で何を目的として使うのか、それらを把握し、目的を快適に果たすためにはどんな見た目が必要なのかを考えた上でデザインすることが必要です。

つまり、UIとUXは一体であり、UX／UIデザインとは解決策の設計。これがアシアルの考え方です。

たとえば、受託開発プロジェクトにおいては、営業がクライアントと初めて顔を合わせるときからアシアルのUXデザインは始まっています。

エンドユーザーによりよいUXを提供するためには、クライアントのビジネスや課題、それを改善していくための戦略を深く理解することが欠かせないからです。そのため、アシアルにおいてUXデザインはデザイナーだけの仕事ではありません。エンジニアも営業も、プロジェクトメンバー全員がUXに関わります。

また、これまでもこのnoteで多くのメンバーが語ってきたように、アシアルはクライアントとともに、ワンチームとなってプロジェクトを推進します。

アシアルが直接相対するのはクライアントですが、エンドユーザーもプロジェクトチームの一員として考え、よりよいUXを追求。プロジェクトが円滑に進み、成果物がエンドユーザーによいUXを提供できれば、クライアント自身にとっても成功体験＝よいUXとなります。結果的にアシアルは、クライアントとエンドユーザーという２方向のお客様にUXを提供しているのです。

プロジェクトを通じて、クライアントにもプロジェクト進行、プロダクト改善の知見は蓄積されます。クライアントがその知見を活用してエンドユーザーのUXを改善し続けられる、改善を歓迎したエンドユーザーからのフィードバックが、クライアントの新たな成功体験となる。そんなポジティブなサイクルを作っていきたいというのが、アシアルの思いです。

UXの５階層をアシアルが実践すると……

さて、昨年８月に鴨田は「アシアルでは以前から当たり前にしていたことに、UXという言葉がついた感じ」と話していました。

UXを構築する5つの要素を示した「UXの５階層（５段階）」というモデルがありますが、これもUXという概念同様、アシアルでは以前から取り入れられていた考え方です。鴨田の記事で紹介したアシアルのUX／IA／UIデザインフローも、UXの５階層と対応させられます。

UXの５階層とは
　表層：ビジュアルデザインなど
　骨格：表示される情報の優先度や表示順、配置の設計
　構造：Webサイトやアプリの全体構造設計
　要件：目的を果たすために必要な機能やコンテンツ
　戦略：目的、ユーザーのニーズ

この5階層をベースに、プロジェクトの戦略から考えます。各階層におけるアシアルの実践例は上図のとおり。

例えば、戦略フェーズでは、営業やプロジェクトマネージャーがクライアントのビジョンや業務フローを理解し、戦略を共有します。さらに、徹底的なヒアリングや調査・分析を経て、本質的な課題を見い出し、必要に応じてレポートとして提供することもあります。

実はここで、それまで気づかなかった課題を認識されるクライアントもいらっしゃいます。それほど深掘りするのです。先月、社内随一の深掘り名人がnoteに登場しましたが、彼のみならずメンバーは皆、クライアントと深くコミュニケーションを取っています。

要件フェーズ、構造フェーズからは、デザイナーやエンジニアなどほかのプロジェクトメンバーも関わり始めます。ここでは主にプロジェクトマネージャーが各フェーズの橋渡し役を担い、情報を共有。リリースまで、齟齬なく進めます。

三方良しのUXを実現したプロジェクトの例

最後に、アシアルが考えるUXをさらにわかりやすくお伝えする具体的な事例をご紹介します。昨年6月にプロジェクトマネージャーの笹亀がお話しした保険会社様の事例です。

プロジェクトの目的
・災害時の損害調査に用いられてきた、紙、筆記具、傾斜計、カメラ、地図など、多くの機材・機能をアプリに集約。調査から見積もりまでタブレット１台で完結させる
・現地で入力したデータを速やかに本部へ送る
・入力したデータにより自動的に保険金額が算出される

５階層の戦略にあたるフェーズでは、調査項目や業務フローを聞くことはもちろん、既存の調査用紙をすべて確認しました。また、実際にアプリを使う調査員についても属性をヒアリングし、タブレット操作に慣れていない50〜60代が多いとわかったのです。

そこで、入力の負担を軽減するUIを採用。選択式にすることやペンを使って平面図を描くことでソフトウェアキーボードでの入力を不要にしました。

とはいっても、調査員の方にとって、紙からアプリになるのは大きな変化。５階層の骨格・表面フェーズでは、紙とアプリのギャップを埋めるために、かなり細かい設計図とモックを用意して説明したり、サンプルアプリを準備したり。また、テストは調査員の方にも協力していただいています。その結果、大きな不具合や混乱もなくリリースできました。

生まれたのはポジティブなUXのサイクル

このプロジェクトがもたらしたUX
　企業：コストダウン
　調査員：調査効率アップ
　保険加入者：保険金支払いのスピードアップ

このアプリ導入は、調査効率アップとそれにともなう業務コストダウンといった、クライアントへのよいUXを提供できただけでなく、その先の保険加入者にも迅速な保険金支払いというUX改善をもたらしました。この成功を受けて、アプリには改修や機能追加が重ねられています。

クライアント、エンドユーザー双方によいUXをもたらし、さらなる改善につながる。アシアルが思い描く、ポジティブなUXのサイクルができた事例です。

図解／さい｜図解クリエイター

▼いい仕事をするための環境を整えたり、働きやすい仕組みづくりを日常的に行っていることも、アシアルの強みのひとつです。