UIデザイナーとは？〜私たちが考えるUIデザイナー（前編）
セカンドファクトリー(以下、2FC)で、UI/UXデザイナーとして活動している鈴木です。
私たちのデザインチームでは、おかげさまで案件の打診など、引き続きお声がけをいただいている状況なのですが、チームメンバーがたくさんいるかというと、そうでもありません。
各メンバーはお客様に中長期で伴走していることも多く、せっかくお声がけをいただいていても、リソースの問題から、結果お断りをしなければならないケースがまだまだあります。
当然ながら、チームメンバーを増やしてチーム力やリソースのキャパシティをアップしていきたいと考えています。
最近、採用サイトにメンバー募集を掲載するために、UIデザイナーの募集要項を再整理していました。
ふと「そもそも私たちが一緒に働きたいと思っているUIデザイナーってどんな人？」と思ったことから、
今回UIデザイナーとしてイメージしやすい「UIを形にする部分」を前編として、次回の中編では、「UIを形にした後」、後編では「UIを形にする前」の3回に分けてまとめてみようと思います。
UIデザイナーとは？UXデザイナーとの違い
採用の募集要項をまとめる際に悩むのが「UIデザイナー」と「UXデザイナー」との違いです。
これに関して私たちは一定の解釈を持っていますが、この違いを明確に線引きすることは難しいと思っています。
難しいということは、「解釈を断言しにくい」ということなので、採用する側とされる側の双方で「それぞれ違った解釈」になっていることも多いですし、個々の採用企業（採用する側）の解釈も違っていることもありそうです。
UIデザイナーとUXデザイナーとは明確には分けられない。
明確に分ける言及がないか、少し調べてみました。
UX（ユーザーエクスペリエンス）はデジタルサービスをユーザーがどのように使用するか、ユーザーの体験としても快適になるよう設計し、デザインする。UI（ユーザーインターフェース）はデジタルサービスの開発においてより利用しやすいよう画面等を設計し、デザインする。
UXは体験、UIは具体の画面等のように、対象が違うと言及されています。
一方で、以下のような言及をしているところもありました。
UIやUXはユーザーが存在する全てのものにあてはまる概念
仕事として考えた場合、これらは重なり合う部分が多くあります。ここまではどの役割、ときれいに線引きできるわけではありません。つまり結論としては、それぞれがひとつのスキルであるということです。
一般的には、UXとUIの関係性は同じ階層に並行にあるものではなく、あくまでもUXという体験全体をさすものの中に、それらの一部を担う、具体的な対象としてのUIというものが内包されているのではないでしょうか？
ここで述べられているように「違いを明確に言うことは難しい」のと、デザイナー一人一人が持っているスキルの領域であると考えているので、私たちではここを「職種としては」あえて明確に区別をしていません。
なので、採用サイトに情報を掲載する場合には、「どんな価値を発揮してもらいたいのか？」を補足で提示することになります。
私たちのUIデザイナーは顧客のために何をするか？
「どんな価値？」の前提として、私たちのUIデザイナーは何をしているのかを考えてみます。
私たちは、顧客の目指す「事業の成功」や、「組織の成長」に「自身のできること」を極力発揮して、伴走したいと常に考えています。
なので、大事なのは「素晴らしいUIを形にする」はあくまでも手段の中の1つであるということです。
手段の中の1つではあるのですが、「デザイン」という強みを活かすとなると、「新規事業」だったり「サービス」だったり、それらを具体的にユーザーに届けてコミュニケーションを行う「プロダクト」や「それらを構成するUI」だったりが、現状は具体的な対象になっているというだけです。
サービスやプロダクトに価値が発揮されるのは「UIを形にする」だけではない
一般的に「UIを形にする」を考えると、FigmaなどのUIデザインツールを用いて、画面のレイアウトやUIコンポーネントの配置を検討し、チームの共通認識が取れた画面デザインを完成させることを想像することが多いかと思います。
また、それらを進める際には「ユーザーが使いやすいUI」など、ユーザビリティの観点などにも気を配らないといけないという認識も当たり前になってきています。
しかし、実際にサービス/プロダクトデザインに伴走してみると、今述べた領域はある一部分であることに気がつきます。
「UIを形にする」を含む、プロダクトデザインなど進行されるプロセスについて、大まかに一連の流れを整理してみました。
流れの各部分について、デザイナーが発揮できたら良さそうな価値を、一番基本の「UIを形にする」ところから始めて、少しずつ範囲を広げながらまとめてみたいと思います。
UIを形にする
一番の基本の「UIを形にする」部分だけでもさらにいろいろな要素があります。
UIデザインツールを使いこなせる
ここ最近で言えば、ほぼFigma1択でしょうか。以前はAdobe XDやSketchという選択肢もありました。
デザイナーの思考を素早く可視化したり、チームで共通認識の取れるきちんとしたアウトプットをしていくために、これらのツールを難なく使えることは必須になります。
例えば、同じ仕様のデザインをかたちに起こすとして、作業スピードが2倍違うと、その分の時間でさらにデザインのブラッシュアップができたり、検討に思考を巡らすこともできます。
また、結果的にどういう画面仕様に落ちたか？残論点は？をチームで具体的なイメージとして共通認識を持つという側面でも、これらのデザインファイルをハブとしたエンジニアとのコミュニケーションに役立てることもできるでしょう。
ただ、UIデザインツールが使える＝良いUIデザインができるではないことには注意です。
使いやすいUIを考えられる
先ほども述べた、所謂ユーザービリティについては、これまでたくさん語られており、既に当たり前の概念になっています。
有名なところでは、ヤコブ・ニールセン博士の提唱する
学習しやすさ:システムは、ユーザーがそれをすぐ使い始められるよう、簡単に学習できるようにしなければならない。
効率性:システムは、一度学習すれば、あとは高い生産性を上げられるよう、効率的に使用できなければならない。
記憶しやすさ:システムは、ユーザーがしばらく使わなくても、再び使うときにすぐ使えるよう、覚えやすくしなければならない。
エラーの少なさ:システムはエラー発生率を低くし、もしエラーが発生しても簡単に回復できるようにしなければならない。また、致命的なエラーが起こってはならない。
主観的満足度:システムは、ユーザーが個人的に満足できるよう、また好きになるよう、楽しく利用できなければならない。
といったような、いくつかの観点を考慮したUIデザインにきちんと落とし込んでいくことが必要です。
一般的なUIコンポーネントを幅広く知っている
上記の「学習のしやすさ」にも関連しますが、最近でよく話題に上がるようになった「デザインシステム」の文脈からしても、「一般的なUIコンポーネント」が上げられます。
よくあるボタン。よくあるドロップダウン。よくある切り替えメニューなど、ユーザーは「よくあるパターン」でUIと相対することで新たに学習をしなくてもサービスやプロダクトを利用することができます。
こういうふうに動くはずだという「期待」と違う動きをする独自のUIは、ユーザーの混乱を引き起こしたりするため、「よくあるパターン」を見極めた上で、そこに準拠するのか、また独自のUIを提供するのかの判断が必要です。
UIのさまざまな状態を想定できる
UIデザインをする上で、陥りがちなのが「初期表示される正常な状態の画面デザインを作る」で終わってしまうことです。
実際には、画面が表示される前のデータを読み込んでいる状態は？こういうデータ条件の場合にはこの要素はどう変化している？ユーザーがこれを選択したら、このボタンはどうなる？エラーが起こったらどうなる？データそのものが存在しないときは？などなど、いくつかの条件によってUIは都度変化します。
Ideal State(理想ステート)
Empty State(エンプティステート)
Error State(エラーステート)
Partial State(パーシャルステート)
Loading State(ローディングステート)
そういった状態も含めて想定ができることで、サービスやデータの現在の状態によって、適切にユーザーとインタラクションができるUIが実現されます。
また実装中に「あれ？この場合にはUIってどうなるんでしたっけ？」みたいな会話をすることが少なくなり、エンジニアが実装のしやすいUIデザインを初期のタイミングで提示することもできます。
サービスが、ユーザーとより気持ちよく対話するためのマイクロインタラクションを考慮できる
よく、SNSアプリなどで、「いいね！」ボタンを押した時に、ボタンのアイコン形状やカラーが気持ちよくアニメーションして、「いいねをつける」という行為を表現するUIなどがあります。
単純に一瞬で表現を切り替えて、データ的なステータスを表現できていれば、UI自体の責務は果たせます。
ただ、ユーザーに「操作したアクションに対してのフィードバック」つまり、「いいねをした感覚」を演出するための動きは、ユーザーがサービスを気持ちよく利用してもらうために大事なアプローチです。
アニメーションなどを含んだこれらのUIの展開についても、UIデザインで考慮したいポイントです。
UIが構成する画面全体としての世界観を考えることができる
例えば、わかりやすい・使いやすいUIを考慮して画面全体をデザインしたとして、画面全体がワイヤーフレームに見えてしまうような、白黒グレーの無味乾燥な画面だったらどうでしょうか？さらに、このサービスが、一般の消費者に買い物をしてもらい、実際に消費をしてもらうサービスだったらどうでしょう？わかりやすい、使いやすいだけで消費行動を後押しできるでしょうか？
サービス/プロダクトのブランドやコンセプトという、大きな範囲に関連しますが、UIデザインではそこから設計し直す場合もあります。その世界観に沿ったビジュアルデザイン面での表現というところにもデザイナーとしての知見や理解が必要です。
これだけではない、前後のプロセスを含めたUIデザインの観点
「UIを形にする」という部分において、今回UIデザイナーの求められるところをまとめてみました。次回はその後のプロセスに範囲を広げて、知っておかなければいけないこと、考慮する必要があることなどを続けてまとめてみようと思います。
2FCデザインチームは範囲を広げて活躍できるUIデザイナーを募集しています。
クライアントの期待に応え続け、デザイナーとしての価値を高めていきたいと考える、UIデザイナーを絶賛大募集しています。
以下応募要項から、2FCデザインチームの方向性や価値観に共感いただいた方、ぜひご応募ください。
ViViViTでまずはメッセージのやり取りからでも〜と考えていらっしゃる方はこちらも。
【メンバークラス】UI/UXデザインをもっと深く、次のステップを目指すデザイナー募集