UXとUIが混同されるワケ

最近 UXUI を混同して表記されているのを見かけるようになりました。私もウケやすいということで、混同させたことがあります。しかし実際のところ UX と UI は同義語ではありません。良い UI デザインをすれば、UX が向上する可能性はありますが、必ずしもそうではありません。逆もしかりです。最近も UX と UIの違いを分かりやすく表現しようと、シリアルとボールの写真を使った例が登場しましたが、「そうでもない」という意見も多数ありました。

それでは、なぜ混同されやすいのかというと、今のスマートフォン向けのデザインを見るとヒントが隠されています。例えば Twitter クライアントの中で人気のある Tweetbot を見てみましょう。このアプリの中で装飾と呼べるデザインはどれだけあるでしょうか。ほぼ皆無だと思います。

スマートフォンという小さなスクリーンには、UI しか存在しません。

昨年の Swapskills のセミナーで、情報そのものを UI にするデザインが必要とされていると提唱しましたが、アプリの多くが今まさにそうなっています。モバイル向けに関していえば、UIデザインがデザインそのものとなっています。

Twitterクライアントのメインコンテンツは、ツイートひとつひとつが UI と化しています。タップすると関連アクションを表示されたり、詳細ページへ移動することが可能です。このようにメインコンテンツそのものを UI にしているケースは従来のパソコン向け Webサイトでは見られなかった傾向です。今まではコンテンツエリアとその他のエリアを明確に分けるだけの空間の余裕があったわけですが、小さなスクリーンを対象とする場合、コンテンツそのものを UI にすることで少しでも多くの情報を利用者に届けることが可能になります。

コンテンツが UI になった、もうひとつの理由として、スクリーンに直接触れるという行為がインタラクションの中心になったからだと思います。コンテンツに触ることが操作に繋がるということが、マルチタッチやジェスチャーの導入により分かりやすくなりました。今まで矢印アイコンやボタンが必要だった部分が、タッチインターフェイスのおかげで必要なくなっている場合があります。Clear.app のようにボタンを完全否定したアプリが受け入れられるようになったのも、コンテンツそのものを UI として扱った設計ができるようになったからでしょう。

UIを設計するという工程が、アプリそのものを設計しているのと変わらないわけですから、利用者体験という名の UX を設計しているのと変わらないと考えるのも無理はないかもしれません。原理主義者のように「定義が違うのに混同するのは気持ち悪い」と捉えることはできますが、今のモバイル機器向けのデザイン傾向をみると混同するのは、ある意味当然なのかもしれません。

しかしながら、Photoshop や Firewoks を開いて、ひたすらディテールに拘ったインターフェイスを作ることが UI デザインとは言えないと思います。UIデザインがデザインそのものになっている理由のひとつは、コンテンツに直接触ることが可能になったからです。つまり、デザイン時に触ったときの感覚・感触も含めてデザインする必要がでてきます。

「それはインタラクションデザイナーの仕事」といった具合に意味合いの話をしてしまうとキリがありませんが、UI と UX を混同するのであれば、そこまで踏み切った UI デザインをするのは当然だと思います。全体的なスキン(見た目)を決める前から、触ったときの感覚の設計は初めるべきですし、早い段階から開発メンバーと触ったときにどうなるかを共有できることがベストです。見た目の絵ではなく、触れる何かを作ることを優先することで、スクリーン全体に広がる UI がより活かされるでしょう。


追記

今回の記事は、文脈が掴み難いところが多々あるので、どういう意図で書いたのかを追記しておきます。

  • 今回はあえて UI/UX を混同させているのは、混同させた記事やプレゼン資料をみたことがあったことから始まりです。それをあえて否定ではなく、混同させる要因は何かを考えるのが今回の記事の目的です。
  • 私の考える UX 観は、体験について考えるとはという記事が参考になるはずです。
  • 個人的に JJ Garrett が 10年前に提唱したユーザーエクスペリエンスの五階層は改訂しても良いのではないかと考えています。それについてはUXの奥にあるもうひとつのレイヤーに書かれています。
  • 私も私なりに強い UX 観を持っています。正直言うと「UX」と「UI」が同じように語られるのは気持ち悪いときもあります。しかし、だからといって違うと否定をするべきではないと思います。同列で語られることの要因を探すのもコミュニケーションの役に立つことだと思います。
  • あえて(自分にとって)正しい見解から外してみてみることで、読んでもらえる、見てもらえる、考えてもらえるキッカケになると思います。
  • もちろん、今回私が挙げた要因は一説に過ぎず、他の方は別の考えがあるはずです。納得いく見解も幾つか見かけました。
Yasuhisa Hasegawa

Yasuhisa Hasegawa

Web やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。