はじめに

現在Webに関わる仕事をしている人や、なにかしらのデバイスを使用したアプリケーションを開発している人であれば、日常的にUI（User Interface／ユーザーインターフェース）という言葉を使っていると思います。そして、そのような人たちはUIに触れない日はないと思います。

最近ではスマートフォンやタブレットが広く普及しています。それらの端末に搭載されているOSや一般に公開されているアプリケーション、さまざまな情報を提供するWebサイトでは、1画面には到底収まらないナビゲーションや数々の情報がUIという形になっています。ですから、UIという言葉を知らない、コンピューターを使い慣れない人たちも、開発者と同様に日常的にコンピューターとの接点を持っています。

専門的な知識を持っていない人たちも、日常的にコンピューターとの接点を持つ機会が増え、ときには強制的に持たされ、コンピューターに慣れている人たちは以前に増してUIに触れる頻度が高くなっている現在、コンピューターとユーザーの間に立つUIの重要性は、より一層増していると感じます。

このシリーズでは人間の操作を前提としたUIを作成する際の、視覚を利用したUIとデザインの融合の重要性を考えます。また実際にそれらを作るときに注意したい点など、UIの実際の良い例・悪い例を交えながら書いていきたいと思います。

このシリーズでは書かないこと

一口に人間が操作するUIといっても、その伝達方法はさまざまですが、今回は視覚を利用したUIを作成することを前提とし、次のような手段については考慮していません。

• 視覚以外を利用したUI
• ディスプレイを使用しないUI
• 人間以外が操作するUI

また、視覚を利用したUIを作成する場合は、色覚異常を持ったユーザーへの配慮が重要になる場合もありますが、今回のシリーズではそれについても考慮していません。

UIとデザインの融合とは

「UIとデザインの融合がとても重要です。」と文字で書いても、なかなかピンとこないと思います。そこで、実際の例を見ながら解説します。次のデモは、タブとリストというシンプルな構成になっています。このUIを実際に操作して、Dateタブから「No.20」を探してクリックしてみてください。項目をクリックすると、正しい項目を選択できたかどうかわかります。

デザインがUIの邪魔をする

サンプルUIを触ってみて、率直な感想はどうでしょうか？　使いづらいでしょうか？　それとも使いやすい？　このサンプルは、あえてユーザーが使いづらくなるように作成したものなので、「使いづらい」と思ってもらえたら目的は達成されたことになります。

このサンプルは次の点を意図的にデザインして、使いづらくなるように調整していました。

• タブの選択状態を混乱させる
• タブのマウスホバーに対するコンピューターからのレスポンスをしない
• 番号と見出しの関係性を混乱させる
• 探す対象をクリックさせない（このサンプル場合はNo.の部分）
• ユーザーが認識している現在位置を失わせる

そして、その使いづらさを生み出している原因はちゃんとあります。それは、UIとデザインの融合が十分になされていないからです。

この場合は、意図的に使いづらいものを作っていますが、意図せずこのような状態になってしまっているUIはよくあります。

もしかするとそれは、制作者が特に意図したわけではなく、なんとなくUIを配置してしまったからかもしれません。あるいは過度に奇抜なものを求めすぎたせいかもしれません。過程がどうであれ、そのデザインがあるせいでスムーズなUI操作の妨げになってしまうのです。

もし仮に、それがネット上で買い物をしようとして辿り着いたサイトだったらどうでしょう。私なら買いたいものにたどり着く前に、諦めてしまうと思います。そのUIが仕事などでどうしても使わなければならないWebアプリだったら、想像しただけでストレスがたまってしまいそうです。

制作者が、それと意識しないで配置したデザインでも、ユーザーには何か意味を持った情報として伝わってしまうことがあります。「UIとデザインの融合」を意識し、デザインがユーザーとのスムーズなやりとりの邪魔にならないようにする必要があります。

なぜUIにデザインが必要なのか

具体的なデザインの話に入る前に、なぜUIを作るときにデザインが重要になるのか、改めて考えてみたいと思います。

UIの役割

UIとは、ユーザーの入力を受け付けたり、逆に、ユーザーへコンピューター側からの通知やフィードバックを行う機能を指します。基本的にコンピューターというのは人間（機械の場合もありますが……）の意思に基づいた入力があってから動作するものです。ですから、GUI／CUIの違いはあれども、そこにコンピューターが存在すれば、必ずどこかの段階でコンピューターとユーザーの接点が必要になってきます。

コンピューターと人間の間にあるUIは、それを使用するユーザーの目的をコンピューターに伝え、そしてユーザーの希望を受け取ったコンピューターからのフィードバックを行います。ただし単にユーザーからの入力を受け付たり、コンピューターからの結果を表示するだけの目的ではありません。

UIがスムーズな対話のつなぎ役となるために

UIが単にユーザーからの入力を受け付けたり、結果を返すだけの役割しか持たなかったとしたら、ユーザーがコンピューターを使うのに、多大な労力が必要になってしまうこともあります。例えば、エラーが起きたからといって単にエラーコードを表示するだけのUIがあったらどうでしょう。

ユーザー側がコンピューターに歩み寄り、コンピューターからの一方的な通知や無言のフィードバックを、その意図を考えながら、長い時間をかけて理解しなくてはなりません。

そのアプリケーションを使う必然性がない場合は、真っ先に使用するのを止めるでしょうし、強制的に使わされている場合は、目的を達成するまでに相当なストレスを受けることとなります。

複雑な作業を簡単にしたり、業務効率を上げるために処理時間を短縮するアプリケーションが、複雑な印象を与えてしまったり、時間を浪費させてしまうことになれば、まったく意味がありません。

そうならないためにも、コンピューター側からのユーザーへの歩み寄りが大事になってきます。これは制作サイドの重要な課題だと思います。もちろん、専門的なUI担当者がいない場合も同様です。

UI担当者がいなかったとしても、ユーザーからすれば、そんなことは関係ありません。目の前にあるUIを使うのに、制作サイドの体制についてあれこれ想像を巡らすことはないでしょう。

制作サイドがどんな状況や体制であれ、なるべくユーザーにストレスを与えないことや、時間を浪費させないことは、備えるべき機能のひとつなのです。UIはコンピューターとユーザーの「スムーズな対話のつなぎ役」となる必要があります。

デザインの役割

つなぎ役になるための重要な手段として「デザイン」があります。一般的にデザインというと美術やアート、ファッションデザインのような美的な要素を想像することが多いと思いますが、デザインの役割のなかには美的な要素を取り除いたあとにも、さまざまな役割があります。

それらの役割ついては次回以降で解説しますが、おおよそ、それは、対象となる人々へ複雑な情報をいかにスムーズに伝達するかということです。大量な情報をそれと感じさせずに、重要な情報から伝達するのです。それはUIが目指す、コンピューターとユーザーのスムーズなやりとりのつなぎ役という目的と一致します。

デザインの重要性

コンピューター側から見た場合、人間との対話をするためのすべての接点になるのがUIです。現在、人間向けに作られているコンピューター用UI（かなり遠回しな言い方をしていますが、簡単に言ってしまえばOSやWebアプリケーションなどです）が採用しているコミュニケーション手段のメインは視覚を使ったものです。

視覚に絞った話で言えば、コンピューターが情報を画面上に表示した瞬間、または、情報がユーザーの目に入った瞬間から対話が始まります。

ここで重要なのは、コンピューター側が伝えたい情報やUIは、いったん単なる光の情報に置き換わってしまうということです。それらの光の情報を認識して、情報の配置を読み取り、文字の内容を理解して、最終的に意味のある情報として再構築しているのは、すべて使用する人間です。

そこで、単なる光の情報となってしまった情報に、人間が改めて認識するのに最適な秩序と順番を与えるために、デザインという作業が必要になってくるのです。

まとめ

今回は、デザインが原因で使いづらくなっている実際の例を踏まえて、UIがコンピューターとユーザーをつなぐ重要な機能であること、視覚を利用した場合、そのUIの意図を正確に伝えようとするためには、デザインという工程が重要になってくることを解説しました。

視覚を利用したUIがテーマだというわりに、文字ばかりの内容でスタートしてしまいましたが、UI作成時のデザインの重要性を感じてもらい、興味を持ってもらえたらうれしいです。

次回は「デザインの役割」部分で少し触れた、UIとデザインのそれぞれの役割について、実例を交えながら詳しく見ていきたいと思います。