なぜやろうと思ったか
UI と UX はよく並列で語られていて、なにが違うのかという説明も多くなされているとは思いますが、実際に UI・UX を良くしようという段になると結局やることは UI の改善による UX の改善でしかない ということが多いんじゃないかと思いました。 これはやっぱり UI と UX の違いを腹落ちできてないのも原因のひとつではと思いました。
そんなことを思っていたときに、ちょうどデータベーススペシャリスト試験の勉強として身の回りにあるものを DB 化することにハマっていたので UI・UX も DB 化してみるかとなり今回の内容を思いつきました。
DB 化というか概念データモデル化してそれぞれの関係をわかりやすくしてみようというものになります。
概念データモデルとは？
上図のような概念と概念間の関係を整理したものです。 あるスーパーの売上を管理するシステムの DB を構築するとして、まずはこのように商品や得意先などの登場人物の関係を整理します。
商品と売上の関係は、ある商品が何個も買われることもあれば、全く買われないこともあるので 1 対多（0 以上）という関係になります。 得意先と売上の関係は、ある得意先が何回も売上に貢献することもあれば、全く貢献しないこともあるので、これも 1 対多（0 以上）という関係になります。
実務ではわざわざ概念モデルから DB の構築をすることは稀だと思いますが、こういった考え方を知っておくと役に立つと思いますし、ちゃんと DB を構築するときには頭の中か無意識にこういった関係を思い描いているものだと思います。
早速 UI・UX を概念データモデル化してみる
あらためて UX ってなに？ということで手っ取り早くググってみました。
UX とは、 ユーザーエクスペリエンス（User Experience）の略で、 ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、 UI（ ユーザーインターフェイス、User Interface）がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。 UX とは - Web マーケティング用語｜ ferret [フェレット]
ざっくり登場人物は「ユーザー」「サービス（製品）」「体験」であるように思えます。 さらに UI と UX の違いもググってみたところ次のようなページも見つかりました。
例えばホームページの場合、 ・ デザインがキレイ ・ フォントが読みやすい ・ お問い合せ フォームや購入 ページまでの導線がわかりやすい といった表層的な部分から、 ・ 商品を注文したらすぐに届いた ・ 対応が丁寧だった ・ 商品のクオリティが高い というようなサービスの質に関わる部分も「UX」です。 UI とは？UX とは？違いを理解しよう！｜ ferret [フェレット]
これによれば体験というのは 1 種類ではなさそうです。 そして、ここまでを概念モデルにすると次のような形になりそうです。
ひとつのサービスには多数の UX（体験）があるし、ひとりのユーザーも多数の UX（体験）をする。 そして、UX とはあるひとつのものを指しているのではなく、複数のユーザーそれぞれにまた複数の UX というものがあるという形になりそうです。
また、DB 構築時の考えとして、登場人物をマスタ系とトランザクション系に分けるというものがあります。 マスタ系とは商品や得意先など リソースが決定されてるもので、トランザクション系はマスタ系同士が関わりあうことで記録されるログのようなイメージです。 その考えでいくと、ユーザーやサービス自体はマスタ系ですが、UX はトランザクション系ということも言えそうです。
ユーザーはサービスのなにに対して UX を獲得するか？
・ デザインがキレイ ・ フォントが読みやすい ・ お問い合せ フォームや購入 ページまでの導線がわかりやすい といった 表層的な部分 から、 ・ 商品を注文したらすぐに届いた ・ 対応が丁寧だった ・ 商品のクオリティが高いというような サービスの質に関わる部分 > UI とは？UX とは？違いを理解しよう！｜ ferret [フェレット]
先ほどの UI と UX の違いの例ですが、「表層的な部分」「サービスの質に関わる部分」それぞれから異なる種類の UX を獲得することができるとあります。 つまり、サービスそのものに対してというより、サービスの様々な「部分」に対して UX を獲得するようです。 ここでは、そのような「部分」をサービスの「機能」と呼んでみます。
それを図で表すとこのような感じになるのではないでしょうか。
ひとつのサービスには複数の機能があり、ひとつの機能から得られる UX（体験）もユーザーによって違う。
サービスの「機能」にはどんな種類があるか？
- コンテンツ（サービスが提供するもの自体）
- UI（サービスが提供するコンテンツとユーザーの接触面。デザイン、導線、使いやすさ）
- パフォーマンス（スピードなど）
- その他（上記 3 つに属さないもの。ストーリーなど？）
先ほどの例では、「表層的な部分」「サービスの質に関わる部分」がそれぞれ別のものとして挙げられていました。 これらは大別して、UI とコンテンツと言ってよいかと思います。 自分は他にパフォーマンスやそれらのいずれにも属さないものがあるかと思いました。
現実のサービスでも、コンテンツ、UI、パフォーマンスが一緒でもその他の部分で UX が変わることは考えられます。 例えばサービスができた経緯などのストーリーは、知っていてもコンテンツにも UI にもパフォーマンスにも影響しませんが、愛着が湧いて使いたくなる（UX が高まる）などはあるのではないかというものです。
まとめ
上記は最終的な概念モデル図です。 機能には複数種類あるということを追加しています。
こうしてみると UI と UX の位置は明確に違っています。 UI はあくまでサービスの一機能ですが、UX は UI も含めた複数の機能からユーザーが得た結果です。 UI はマスタ系ですが、UX はトランザクション系ということも言えそうです。
まとめると下記のようになります。
・ひとつのサービスに対してひとつの UX があるわけではなく、多数のユーザーそれぞれに対して多数の UX がある ・UX をよくするときは、どのユーザーのどの機能に対する UX をよくしたいかを考えた方がよさそう ・UI はサービスの機能のひとつだが、UX はユーザーとのやり取りの結果
UI は「見た目」で UX は「体験」という単語だけだとこういった理解はできなかったと思うので、またわかりづらい概念があればこうして図にしてみるのもいいなと思いました。
