🍀️

どうやったらUIデザイナーになれるの?

2024/02/22に公開

イントロ

皆さんこんにちは。デザインチーム和田です。

私が現在のソーシャルデータバンクに転職したのが2023年の2月になるのですが、1人目のUIデザイナーとして採用していただきました。

1人目ということで珍しいのか、社内の方から「どうやったらUIデザイナーになれるんですか?」という事をたまに聞かれたりします。

この質問に端的に答えるのは意外と難しく、仕事や実践を通して少しずつできるようになっていった、というのが正直なところです。ですがもう少し内容を深掘りし、UIデザイナーになるのに「これは必要だったな...」という要素を紹介したいと思います。

簡単なキャリア紹介

私は元々エンジニア歴が長く、プロダクト開発をきっかけにUIデザイナーにジョブチェンジしました。UIデザインはフロント実装の傍らやっていただけだったのですが、徐々にUIデザインを専業に近づけていった感じです。

バックエンド -> フロントエンド -> フロント + 企画 + UIデザイン + リサーチャー -> UIデザイナー

振り返ってみると、最初から「UIデザイナーを目指す!」という感じじゃなかったです。

UIデザイナーになるために何から始めたら良い?

UIデザイナーをこれから目指す、もしくは専業にせずともUIデザインに興味があり、もっと上手くなりたいという方は以下2点を意識すると良いと思います。

  1. "本番デザイン"をたくさんこなす
  2. 業界標準を知る

1."本番デザイン"をたくさんこなす

ここで言う本番デザインとは、以下の2つの条件を満たすものです。

誰のために作るのかが、明確になっている状態
成果物に対して説明責任がある状態

なぜ成長に本番が必要なのか?

UIデザインが上手くいくか失敗するかは、依頼者やステークホルダーとのコミュニケーションにあると考えるからです。特にUIデザインはデザイナーが一人で作り上げるものではなく、周囲との関係性で成り立つものです。そのため、自分のスキルや経験に関わらず、その本番を数多くこなせる環境に身を置くことが大事だと思います。

UIデザインは綺麗な1つの画面を作ることではなく、滑らかな導線を作ること。価値ある導線を提供するには、デザイナーだけが頑張ってもダメなんです。

誰のためのデザインか?が重要

デザイン対象となる相手の解像度は、20代男性、といった抽象度の高い架空のペルソナよりも、実在する「同じ部署の〇〇さん」くらいの具体性が欲しいです。実在の人の方がFBをもらえる可能性もあるのでおすすめです。そしてその人のために知恵を絞ってデザインしましょう。その結果、思いっきり空振りしたり、失敗したりすると大きく成長します。

「何でこの色なんですか?」事件

私の失敗談を一つ紹介します。担当しているサービスで分析機能を実装することになり、顧客が求めるカッコいい棒グラフはどんなものだろう?と調査していました。顧客は営業資料にも映えるような、かっこいいグラフ画面を期待していたのです。

実際に顧客から「こんなイメージが良い」というようなグラフ画面が送られてきたので、それを参考にし、「なるほど、顧客が求めているのはピンクのような目立つ色を求めているのだな」と考え、それに近い色を選んでトンマナを調整し、顧客にどうでしょうかとぶつけました。その時に言われたのが
「何でこの色なんですか? 世界観と合わない気が...」
心の中で「あんたが言ったんじゃないか!」と叫びましたが、「参考資料通りに作ったんですが」とも言い返せません。
なぜこの色を選んだのか、そのことによって相手がどう感じるのか、自分の中で十分に言語化できていないことを痛感し、二度と同じ失敗はすまいと誓いました。(なお、作り直した画面は好評で、そこから大きく方針が変わることはなかったです)

そもそも相手がいなければ、こういった失敗や経験は積めないという事例を紹介しました。

本番経験を増やすには

そんな大それたプロジェクトやデザインの仕事は周りにないよ!という方へのアドバイスです。

私がデザインします宣言

周囲に「デザイン勉強中なんで、仕事あったら私に振ってください」と宣言しましょう。デザインの需要は意外と周りに溢れており、デザインに自信がないのに、必要に迫られてデザインしている方は多いです。細かい仕事をどんどん拾ってこなしていくと、デザインができるという風に認識され、いつのまにか相談がくるようになります。

勝手にデザインしちゃう活動

もっとフットワーク軽くして、デザインを勝手に作って「こんなの作ってみたんですけどどうですか?」と相手にぶつけちゃうというのもありです。デザインが得意でない人も、批評することにかけては上手だったりします。日常はプロのデザインで溢れている為、目が肥えているんです。ボコボコにしてもらいましょう。ただし、何度も言いますが、ぶつける相手と目的はきちんと明確にしましょう。

小さな範囲から本番を始める

ボタンや入力フォームを一つ置くだけでも立派なUIデザインです。なぜ、この位置に置いたのか?ブラウザの横幅が縮んだ時、エラーが起きた時にどのように見た目が変化するか?すでに周囲がそうなっているからそれに合わせて...という根拠が多いですが、それでも顧客に説明するつもりできちんと言語化するのはとても良い練習になります。上手く説明できそうにない、ということに気づいたらUIについて勉強するきっかけにもなります。

ポートフォリオを作る

どんな小さなデザインであったとしても、デザイン前と後の画像キャプチャをとっておきましょう。それらを眺めると自分の成長を再確認できますし、ポートフォリオをレベルアップさせていくのはゲーム感覚で成長を楽しめます。質の良いポートフォリオは転職活動にもそのまま使えますし、自分を面接官にアピールするという本番デザインになります。

2.業界標準を知る

デザインの依頼を受けるにあたっての準備で必要になことになります。

Componentを知る

デザインは厳密にいうと正解はありませんが、よく使う標準の部品群というものは存在します。それがまとまっているのがMaterialDesign、Human Interface Guidelinesです。

ボタンだったら、「大体はこの大きさで」「こんな見た目」という共通認識があると思いますが、それらを仕込んでおくことは必須です。ラジオ、チェックボックスの違い、ボタンはどのような大きさで、挙動、ステータスを標準で持つのか。いわゆる入力フォーム、いわゆるログイン画面、いわゆるテーブル…色んな「いわゆる亅を作れるように準備をしておきましょう。

ツールを知る

とりあえずFigmaを触ってみましょう。Youtubeに短めの公式チュートリアル群があるので、ざっと流し見するとどんなことができるのか全体像が掴めます。まずはAutoLayoutや、Variantが使えれば十分だと思います。ツールは効率化の手段でしかないので、初期段階から学習時間をかけ過ぎない方が良いと思います。デザインの業務が無いうちからショートカットとかを頑張って覚えても忘れちゃいますしね。

言葉の力を磨く

相手にどうやったら自分の考えやロジックが伝わるか?言葉を磨きましょう。デザイナーが好きな言葉に「言語化」がありますが、本番デザインをすると「自分の考えってこんなに伝わらないものなの!?」とビックリすることがあります。もし自信がなくなってきたらロジカルシンキングやプレゼン、コミュニケーションの本なども軽くかじっておくと良いです。UXライティングにも活きてきます。

プロダクト開発を知る

プロダクトマネージャーやプロダクトオーナーの視点を掴んでおくと、コミュニケーションする時に楽になります。プロダクト開発って、次にどんな機能作ろうか?という企画からリリース、テストまで一連の流れがあります。その中でデザイナーはどこから参画し、どのようなアウトプットを出していくのか、本は色々出ているので興味があれば読んでみると良いです。

プロダクト開発の概要を知るのにおすすめの2冊

正しいものを正しく作る
ジョブ理論

おわりに

UIデザイナーとして大事なものを色々と挙げてみましたが、デザインのテクニックや知識を学ぼう!という結論に至らなかったのが意外でした。もちろんそれも大事ではあるんですが、デザインの本質は異なる性質を持つもの同士を綺麗に繋いで価値を出すことだと思っているので、ぜひ本番デザインを通してその世界に触れてみて欲しいです。

ソーシャルデータバンク テックブログ

Discussion