「未経験からUIデザイナーになりたいけれど、何から手をつけたらいいかわからない」
UIデザイナーになって5年近く経ち、上のような相談を受けることが多くなった。私はスクールに通わず、独学で未経験からUIデザイナーになったので、自分の経験が参考になることが多いようだ。
この記事は、実際に大学生の時に文系学部からUIデザイナーに新卒で就職するまでにやったことを書いているため、特にUIデザイナーを志望している大学生にとって役立つ記事になっている。
しかし、未経験からUIデザイナーを目指す社会人にも役立つ構成にしている。
ちなみに、社会人から相談される時は「これから始めても遅くないのか」と枕詞がつくことが非常に多いが、その時は私はいつもこうやって答える。
「何かを始めるのに、遅すぎることはない」
閑話休題。
最後まで読んでいただければ、UIデザイナーになるための具体的なステップがわかるようになるだろう。
そもそもUIデザイナーとは
そもそもUIデザイナーとは、User Interface：ユーザーインターフェースを作る職業である。アプリやWebサービスなどの画面を、ユーザーにとって「使いやすく」「親しみやすく」「わかりやすく」する仕事と言っても良いだろう。
求人ボックスによると、平均年収は594万円のようだ。
UIデザイナーとWebデザイナーの違い
UIデザイナーとWebデザイナーの違いは、デザインする目的の違いである。
UIデザイナーはアプリやWebサービスなど、ユーザーが「使う」ことに重きを置く。そのため「また使いたい」と思わせることが目的となることが多い。
一方でWebデザイナーは、コーポレートサイトやランディングページなど、ユーザーが「好意的に思う」ためのブランディングや「購入する」ためのCVRの最適化などを行う。そのため「見た時にどう思わせるか」を目的とすることが多い。
しかし実際は、WebデザイナーがアプリやWebサービスなどのUIデザインを行ったり、反対にUIデザイナーがサイトのWebデザインを行うこともある。
求人ボックスによると、平均年収は340万円のようだ。
UIデザイナーとUXデザイナーの違い
UXデザイナーとはUser Experience：ユーザーエクスペリエンス、つまり体験をデザインする職種である。
UIデザイナーと比べて、UXデザイナーはより上流過程を担当することが多い。
例えば、サービスを通して「どのような感情」を感じて欲しいのかや「良い体験」とはどのようなものか、を設計することが多い。
求人ボックスによると、平均年収は649万円で、UIデザイナーよりも50万近く高い。
UIデザイナーに必要な能力
UIデザイナーに必要な能力は多岐にわたる。indeedではUIデザイナーに必須のスキルとして8つ挙げているし、LinkedInでは12個も挙げられている。
ただし、未経験からUIデザイナーを目指す上では、まず最低限を備えることが大切だ。就職してからIndeedやLinkedInの記事を参考にすると良い。ここでは最低限備えておくべき5つのスキルを紹介する。
- グラフィック力
- 情報設計力
- 言語化力
- コミュニケーション力
- ユーザー視点
グラフィック力
グラフィック力とは、その名の通りグラフィカルな表現ができる能力だ。
私の経験上、Webデザインと比べるとUIデザインで独創的でグラフィカルな表現を求められることは少なかった。しかし、デザインの基礎的な能力によって「そのサービスらしさ」を実現できる力は必要である。
例えば、Amazonと楽天では同じ通販サイトだが見た目や使い勝手は全く異なる。デザインによって「サービスらしさ」を表現していたり、利用ユーザーによっても適切なデザインが変わることがわかるだろう。
デザインの基礎的な能力を学ぶために、おすすめの本を2冊後述する。
情報設計力
情報設計力とは、ユーザーに適切な情報を届ける力だ。
UIデザインをする際、情報設計はかなり慎重に行う。
- どの情報を
- どの画面に
- どのくらい目立たせるか
どれだけきれいな見た目を作っても、上記の設計ができていないと台無しになる。
また、利用ユーザー毎に伝わりやすいコトバも変わる。例えば、リンクの文字もユーザーに伝わって初めて情報の意味を持つ。
- 「詳しくはこちら」
- 「詳しくはこちらをクリック」
多くの人は「詳しくはこちら」で伝わるだろうが、「詳しくはこちらをクリック」まで書かないと伝わらない人がいる。これは年齢の違いかもしれないし、ITリテラシーの高さによっても変わる。
情報設計とは、UIデザインがユーザーインターフェースとして機能するため土台であると言っても良いだろう。
言語化力
言語化力とは、「感じたこと」「思ったこと」「考えたこと」などを正確に言語化する力である。
デザインを作る時、「なんとなくかっこいい赤にしよう」はゼロ点だ。
「ブランドカラーが赤だから赤にしよう」は30点。
「ブランドカラーは赤だから赤の色相にしつつ、情報の優先度としては高くないから彩度を下げて薄くしよう。しかし薄すぎてコントラスト比が4.5:1を下回わらない程度の視認性は担保するためこの赤にしよう」と考えれると合格点だ。
このように、デザインは細部までこだわり、かつ言葉にできることが求められる。「なんとなく」ではユーザーのためのデザインを作ることはできないし、他の職種とコミュニケーションする上でも問題となる。
言語化力を鍛えるための力についても後述をする。
コミュニケーションスキル
よくデザイナーは、「他の職種とコミュニケーションを取らなくても良い」と勘違いされていることが、あらゆる職業の中でも最もコミュニケーションが重要となる職業の一つである。
さまざまな他職種からのさまざま要望を受けながらも、ユーザー視点に立ってデザインを作り、その意図を納得のいく形で伝えないといけない。
例えば「ボタンを目立たせた方がクリック率が上がると思うから、青から赤色に変えて欲しい」とマーケターから言われた時に、それ通りに作ってしまってはいけない。
ボタンを目立たせるのではなく他を目立たなくした方が良いのではないか、赤色だとブランドとのズレが起きるのではないか、そもそもこのボタンのクリック率を上げることがビジネスの成長に直結するのか、と言った議論をできるためには、コミュニケーション能力がないと成立しない。
ちなみに私は、上記の議論ができるという目的もあって、職場関係を良好に保つことを意識している。リモートワークでも働けるのだが、定期的に職場に行ってランチに行ったり休憩中にふらっと話をしたりすることで、私の意見に聞く耳を持ってもらう土壌を作っている。
往々にして、意見というのは人間関係があってこそ成り立つことが多い。ある意味根回し的だが、根回しをおろそかにしているデザイナーは苦労している印象がある。
ユーザー視点
ユーザー視点が重要だというのは、言わずもがなだ。というより、ユーザー視点を持てるというのは、他のスキルに何よりも優越する力である。
ただ、「ユーザー視点を持つ」は少し抽象的であると、いつも思う。便宜上タイトルを「ユーザー視点」としたが、私は「ユーザーに憑依する」といつも言い換えている。
例えば40代女性向けのアプリを作る時は、必ず同じ属性のユーザーにインタビューを行い、可能であれば一緒に1日のスケジュールを聞き出し、同じ1日を過ごしてみる。
そうすることで、ユーザーに憑依をすることができる。普段何を考え、何に不満を感じているのかを追体験することで、ある意味「そのユーザーがデザインを作る」状況を擬似的に作り出している。
「ユーザー視点」というのは、理解力、共感力ともつながるところがある。普段から友人と話している時も、友人になりきって物事を考えてみる訓練を行うと良いだろう。
UIデザインを独習したステップ
さて、前置きが多くなったが、ここから私が実際に未経験からUIデザインを独学で習得したステップを紹介する。
UIデザインを独学するステップ
- デザインの基本を学ぶ
- デザインツールに触れる
- 好きなアプリやサービスをトレースする
- いいデザインをインプットし言語化する
順番に見ていこう
デザインの基本を学ぶ
何よりもまず、デザインの基礎をインプットしなければならない。
実はデザインには守るべき型がある。「守破離」という言葉があるが、まさにデザインも同じく守るべき型を知ることが大切だ。
守るべき型とは、
- 近接
- 強調
- 反復
- 整列
この4つである。詳しい内容は以下に上げる書籍に譲るが、上記の4つを守ればデザインの土台を作ることができる。
私は上記のふたつをボロボロになるまで読み込んだ。
ノンデザイナー・デザインブックは、デザイン基本書の名著と呼ばれるもので、20年以上改訂され続けている。私はかれこれ10回以上は読み直している。
先ほど述べた「近接」「強調」「反復」「整列」はこの本に書かれており、この本を記憶するくらいにに読み込めば、ダサいデザインを作ることは無くなるだろう。
デザイン入門教室は、前述のノンデザイナー・デザインブックより、具体的なデザインの手法が書かれてある。デザイン要素の配置だけでなく、写真の使い方（例えば被写体の視線を意識すること）や色彩に関する情報も丁寧にわかりやすく書かれている。
世の中にはデザイン入門を謳った書籍が数多く出版されているが、何冊も読むのではなくまずはこの2冊をボロボロになるまで読み込むことをおすすめする。
デザインツールに触れる
デザインの基礎を学んだら、次は手を動かすフェーズに入ろう。
2024年現在、UIデザインを作るためのデザインツールは、Figma一択と言って異論はないだろう。Yahooやリクルート、楽天といった名だたる大企業がFigmaを導入している。
基本的な使い方は各自検索をされたい。
他のブログではUdemy講座などをオススメしているが、はっきりいって講座を受ける必要のないほど使いやすい。安易なアフィリエイトに乗せられるのではなく、無料で使えるので、まずはインストールして触ってみると良いだろう。
好きなアプリやサービスをトレースする
次は、Figmaを使って好きなアプリをトレースしよう。
トレースとは、すでにあるデザインをFigmaを使って丸パクリして再現することだ。学ぶの語源は真似ぶ、つまり「真似」から派生していることからわかるように、まずは完成度の高いデザインを手を動かして真似しよう。
具体的にはアプリのスクリーンショットをスマホで撮影し、Figmaにアップロードして、その横に作る。
ただ単にトレースするのではなく、手を動かしながら考え言語化することが大切だ。
また、大体同じではなく「完璧に」トレースすることも注意点である。完璧にとは、フォントの大きさや色（スポイトツールで抜き出す）、配置されている画像（スクリーンショットで良い）も全て完璧に再現する。
冒頭で「好きなアプリ」と言ったが、できるだけ有名なアプリのトレースすると良い。LINEやUber、Instagramなど誰でも知っているものが良い。
トレースをすることは例えば以下のメリットがある
- デザインの意図を考えることができる
- 各要素の大きさを知ることができる
- 観察力がつく
私はトレースを通して、フォントサイズに16pxが多いことを知ったし、マージンに8の倍数が設定されることが多いことを学んだ。
また、一度トレースを経験すると、他のアプリを利用しているときの視野が高まる。消費者としてコンテンツを消費する目線から、デザインの意図を考える脳が動くようになる。
大体1つにつき1日かかるとして、5日間で5つトレースすれば、かなり力がつくだろう。
いいデザインをインプットし言語化する
最後に、良いデザインをインプットし言語化する訓練も行っていた。
デザインギャラリーやPinterestといった良いデザインが集まるサイトを普段から眺めよう。そして、好きや良いと感じたデザインは「なぜそう感じたか」を言葉にして考える。逆に嫌いと感じたデザインについても「なぜそう感じたか」を言語化する癖をつけよう。
また、UIやWebだけのギャラリーを見るのではなくチラシ、スライド、ロゴなど幅広く見ることがおすすめだ。
- bookma (国内の良質なwebデザインギャラリー)
- pinterest (画像を中心にしたSNS。デザインを保存するのに役立つ）
- スライドデザイン (国内の良質なスライド資料を集めたデザインギャラリー。著者運営)
- ロゴストック (ロゴを集めたデザインギャラリー)
- Webframe (世界のUIデザインを集めたデザインギャラリー)
まとめ
未経験から独学でUIデザイナーになった私が、振り返りを兼ねて「未経験から独学でUIデザイナーになるステップ」を書いた。
自己紹介ページに問い合わせフォームがあるので、もっと相談したい方は連絡をいただければと思う。