私が思うUI/UX

はじめまして、マツガナイトです。

この記事ではUI/UXについて書いていこうと思います。

UI/UXとは

UIとは、User Interface（ユーザーインターフェース）の略で、直訳すると、「ユーザーの接点」になり、意味としてはユーザが見ているものに対して得られる情報を指す。「見ているもの」と曖昧な表現にしましたが、皆さんが見てるもの、例えば今日見た風景や携帯で見たサイト、その見ているものから自分が得た情報すべてがUIと言ってもいいだろう。

一方UXとは、User Experienceの略だ。直訳すると「ユーザーの体験」になり、これは先ほどのUIと絡めて具体例を挙げると、風景や携帯で見ている画面に対して、何かしら思うことがある。

「このサイトのアニメーションすき」「この風景は朝より夕方のほうが映えるかも」などなど。このような感想は全てUXにあたる。

ここで軽くまとめると下記になる。

UIとはユーザーの見ているものに対して得られる情報のこと
UXとはそのUIを実際に触れて感じたこと​​

良いUIとは

UIとUXは強い結びつきがあり、良いUIが出来上がれば、良いUXが得られるはず。

では良いUIとは何か？

ここからWebサイトを例に説明していきたいと思います。あなたはとあるサイトの「登録画面」を訪れました。例えば以下のような画面だ。

この画面を見てどう思いましたか？

そう、「登録する」というボタンのみの画面です。まあ、登録画面だからこの「登録する」というボタンがあるのはおかしくはないが、これだけだとまず、「大丈夫か？このサイト」って思ってしまうこともあるでしょう。

一つ言えることがあるなら、この画面のUIは「悪い」と言えるだろう。

サイトに信頼性があるか

上記、画面は極端すぎたが、そもそもこの画面、いやこのWebサイト自体に信頼性があるか。

ドメイン名、タイトル、フッターの情報、その他記載してる情報全てを見て、「あ、このサイトなら大丈夫だな」と思い会員登録だったり、オンラインでショッピングする。

もしくはユーザ数が圧倒的な規模であり、周りがほぼ使っているから自分もそれを使おうといって、そのサイトを利用する。この例は有名だからこそあり得るWebサイトだ。

「登録する」というボタンだけ配置しても、ユーザはどのようなアクションを起こして登録まで紐づいていくのか、また登録時にどのような注意が必要かというようなユーザが疑うような目を持てばこの画面は終わりに近い。その感情から画面から離れていく。つまり信頼性は限りなく0だ。

次に下記のように変えてみた。

ここで得られる情報はおそらくTwitterのアカウントを用いて登録するんだろうなあということがわかる。色合いも変えてみた。先ほどの画面に比べたら登録しようかなという気持ちが湧いたのではなかろうか。色やデザインによって大きく人の印象を変える。そして情報を与えてくれる。こういう一つのボタンでも有益な情報をくれればくれるほどいいデザインと呼べるかもしれない。

またこんな風に変えてみた。

多分ユーザはこう思うだろう。

「素麺食べ放題のTwitterキャンペーンで概要があって、登録したらこのキャンペーンに参加できるんだな、あと注意事項はこれだな。」

この登録画面の責務は果たしたはず。それぞれの画面で役割があり、その役割ごとに情報が割り振られていく。「登録画面」でユーザがしてほしいアクションは言葉通り、登録するというボタンを押して、キャンペーンに登録してもらうこと。まだこの画面でやるべきことはもちろんある。

フォントの種類、背景の色、文言と文言との余白の調整、ボタンにカーソルが行った時のアニメーション、などなど。また、文言調整や注意事項の記載によって、ユーザにさらなる情報を与える。

大きいデザイン調整からものすごく細かいデザイン調整までを踏まえて、多くのユーザが「登録したい」と思える最適解を探していく。

まとめ

そして、世の中にある「デザイン」は無限にいっていいほど多種多様である。そしてWebサイトに訪れると必ず一番最初に見るのはデザインだ。デザインはたくさんの情報を与えてくれる。色一つでも与える情報は全然違う。細かいところにまでこだわって完成するサイト作成はなかなか面白い（と個人的に思う）。

Webサイトにはどういう人に来て欲しいかというターゲットを設定して企画やデザイン当てにとりかかる。私も企画側に参加させてもらうことがあったが、とにかく時間がかかる。一つのデザインでも「そんな細かいところどうでもよくね？」って思う部分もあった、最初の頃は。やはりデザイナーの目は鋭い。こういう小さい発見こそが企画を助けてくれたり、またユーザのアクションを助けてくれるであろう。