最近、Webデザイン界やアプリ制作などの界隈でよく耳にするのが「UI/UX」という言葉。
なんとなくわかるけど、細かくはわからないというのが実情であり、勉強して知ったか程度には理解する必要があった。
むしろ、最近はWebデザインの仕事なんかでも「UI/UXは経験ある?」「UIわかるよね?」とか、これまた知ったかの人たちが聞いてくる場合があるので、対抗するためにもWebデザイナーも知ったか程度の知識は必要なのだ。
対象読者
筆者と似たような状況にある人。
・WebデザインなどUI/UXデザイン以外のデザイン経験者
・UI/UXが何の略かはとりあえずわかる
・とりあえず知ったか程度の知識を身に付けたい
UI/UXとはなにか
二つ並べられてセットにされがちだけど、それぞれ別物。
UXという幅広い概念の中に、UIという限られた世界がある。知ったかとして振る舞うには、UXの中の一部がUIだと知ってればOKだ。日本(UX)の中に東京(UI)があるので、対等なものでもないし、逆は有り得ない。
それでもUIはUXに影響を与える重要なものである。それぞれ細かく解説していく。
UIとはなにか
UIはユーザーインターフェースの略。
「UIがどうの～」とか言われたら、とりあえず「ユーザーインターフェースのことですね?」とドヤ顔で返せば知ったかできる。困ったときのオウム返し手法の発展版だ。
Webサイトとかアプリとかのクリックやタップできる部分だとか、ユーザーがコンテンツを操作するための接点となる部分がUIだ。
UXとはなにか
UXはユーザーエクスペリエンスの略。
エクスペリエンスなんて単語は普段は使わないと思うが、体験や経験を意味する言葉だ。ちなみに、Windows XPのXPはエクスペリエンスの略。
その対象物を知ってから、対象物が物理的に消滅したり、あなたの記憶から完全に抹消されるまでの体験全てがUXだ。
つまり、UXとは極めてユーザーの主観に基づいたものである。体験をデザインするなんて言われると、UI/UXデザイナーが格好いい仕事に思えてしまう。
UI/UXデザインが向上するには競合が必要
あなたも経験があると思うが、自治体のWebサイトとか、公共施設の予約システムだとか、JRの「えきねっと」とかの予約システムとかは非常に使いにくいし、デザインが洗練されていない。
それはUI/UXデザインが向上するためには、競合と争いながら付加価値として改善していくプロセスが必要だからである。
自治体やJRの予約システムが使いづらくても、代わりの手段がな存在しないのだからユーザーは我慢して使わなければならない。そこにUI/UXが改善する余地はないのである。
対して、競合が存在するサービスではUI/UXは日々磨かれていく。
例えば、筆者の身近なところだと、楽天が運営する「楽天トラベル」と、リクルートが運営する「じゃらん」は旅行予約サイトとして競合関係にある。記憶に新しい所では、GoToトラベルの醜いドタバタ劇では、楽天がGoTo割引に対応するや否や、じゃらんも対応させたりと、それぞれがUX/UIを向上させるために日々改修しているのだ。
ちなみに、この界隈ではデザインとは「設計」を意味するのであって、芸術性とか視覚的な美しさではない。もちろん、芸術性や資格的な美しさを兼ね備えているのが理想的だが、画面構造だとか予約手順とかの「設計」がデザインの両悪の判定基準になる。
デバイスごとの操作性の特長
デバイスが持つ特長を理解しつつUIを考えることが大事。
PCの特長
大きいモニターと、キーボード、マウスやトラックパッドを備えているのが特徴。
マウスやトラックパッドで細かい操作ができ、「ホバー」が使えるのでクリックできるか微妙な対象物もクリックできることをやんわり伝えることができる。
縦スクロールには強い一方で、一般的に横スクロールは非常にやりにくい。
スマホ、タブレットの特長
タッチパネルで指を使って操作するのが特徴。
指で操作するため、リンクやボタンはある程度の大きさが必要。指で細かい入力をするのは大変なので、ゆったりしたボタン間隔などゆとりあるデザインが好まれる。
文字入力は基本的にソフトウェアキーボードなので大量に素早く入力するのはPCより向かない。閲覧用に適したデバイス。
PCと違って「ホバー」が使えないので、一目見てクリックできるとわかる必要がある。
テレビの特長
最近のテレビはインターネット機能があったりするのが当たり前で、これもUI/UXデザイナーの仕事の範囲だという。
ゲーム機とかクロームキャスト的なデバイスも同じだろう。
このデバイスの特長は、「十字キー」「決定」「戻る」の3つで操作するのが基本ということ。PCやスマホのように画面の好きな場所をいつでも選択することはできず、カーソルを移動させていくため、要素の連続性が重要になる。
フォーカスの移動を縦方向のみや横方向のみなどにすると入力の負担が減る。PS3とかPS4のホーム画面なんかが良い例だろう。
音声で操作できるのも一般的。PCやスマホとは違ったUI/UXの世界があるのだと思っておけば、知ったかクンとしては修羅場を切り抜けられるのではないだろうか。
Webサイトとアプリの違い
UI/UX界隈で主戦場となるであろう、Webサイトとスマホなどのアプリの違いについて知ったかぶる知識を述べる。
Webサイトの特長
・PCやスマホに入っているブラウザで、とりあえずサクっと使って貰える
・マルチデバイス展開が比較的容易で、レスポンシブによってWebデザイナー的知識で十分対応可能
・ハードウェアに合わせたインタラクティブな作りに限界がある
・良くも悪くもURLによって管理されている
アプリの特長
・個別にインストールしたりと手間がかかる
・ハードウェアの合わせたインタラクティブな作りが可能
・通信量を抑えたり、Webサイトより軽快な動作が可能
インタラクションコストとは
ユーザーが受ける負担のことをインタラクションコストと呼ぶ。
インタラクションコストが小さいと、ユーザービリティ(サービスの使いやすさ)が良いということになる。
インタラクションコストが高い例
・どこをクリックしたらいいかわからない
・パッと見で判断が付かない
・スクロール、移動が大変
・スマホで指が届かない
・持ち換えないとならない
・同じことを何度もしないとならない
・アタマを使わせるデザイン全般(精神面)
UI/UXがわかるデザイナーとして知ったかぶるには、これらを最小にさせる必要がある。
最後の「アタマを使わせるデザイン全般(精神面)」はインタラクションコストの代表的なものでもある。
例えば、虫メガネアイコンは検索という暗黙の了解があるし、フロッピーみたいなアイコンは保存だ。暗黙の了解を理解してデザインすることによって、アタマを使わせる率を減らせることになる。
個人的に最近インタラクションコストが高いなと思ったのは、キヤノンの某画像ストレージサービスだ。一般的なアイコンで使われている意味と違う動作をするし、画像ストレージで大量の画像をアップロードすることが多いにも関わらず、100枚単位でしか選択できなくてストレスフルだった。
UI/UXはあらゆるWebサービスにおいて重要だということだ。
UI/UXデザイナーが主に使うツール
平均的なWebデザイナーの仕事に比べて、画面遷移やボタンのタップ感覚などの操作性のテストや共同作業も多くなるので下記のような専用ツールを使うのが一般的。
Adobe XD
Adobe Creative Cloudに含まれていてWebデザイナーにも敷居は低い。Adobe製品の使い勝手に慣れていれば、勉強しないでも何となく使えるのが魅力。
Sketch
2014頃のFireworks開発終了アナウンスくらいからジワジワと代替ツールとして人気が出てきたらしい。99ドルだから1万円弱で買い切り(アップデート1年間)で、Mac専用かつ英語のみ(?)、プラグインで機能拡張するのが特徴。ガチなUI/UXデザイナーが使っているイメージ。
Figma
秋葉原界隈では萌えフィギュアのブランドだけど、UI/UX界隈ではWebブラウザで動作するUIデザインツール。個人用で限定的な機能だけど、アカウント登録だけで無料で手軽に使える。Adobe CCを契約していなくて、UIデザインの雰囲気を学んでしっかり知ったかぶるにはオススメだろう。英語のみなのとブラウザで動作するタイプなので、作り込んでいったら動作安定性などが未知数。
prott
画面遷移などスマホ実機で動くプロトタイプ作成ツール。XDとかでも実機で動かせるけど、よりプレゼン向きな気がする。Webディレクター向けの本に紹介されていたので、ディレクター系の職種でも使われているはず。料金プランは無料プランありでサブスク形式。Webブラウザで使うタイプ。
Justinmind Prototyper
Windows、Macのインストール型。Prototyperがアプリ名だと思うけど、同名の別物の似たサービスが日本企業からもリリースされていてるのでJustinmind社のPrototyperということにする。パッと見、インストール型だしXDみたいな感じ。フリープランもあるが、有料版で機能がプロっぽくなるものの、全部英語で日本語での最近の解説は少な目な印象。日本でのシェアは少ないんではないかしら。
「赤信号、みんなで渡れば怖くない」派の人は、XD、Sketch、Figmaあたりを触っておくとツールについても知ったかぶれるはず。
より深くUI/UXを学ぶためには
とりあえず、ここで述べたくらいのことを知っていたり意識していれば、UI/UXについて知ったかぶることはできるはず。
しかし、UI/UXはWebデザイナーだったり、アプリのエンジニアだったりが、基本スキルの延長線上に身に付ける学問的な匂いがする。最近は急速にUI/UX専門のデザイナーが求められている気もするが、そういった仕事に就いていない場合は独学で学びにくいのも事実である。
今回の記事作成に当たって参考にした書籍は下記。書籍名の通りだが、教科書的に必要な知識が網羅されているので、知ったかぶるだけでなく、ちゃんとした知識を学びたい人にはオススメだ。
