4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

シアトルコンサルティング株式会社Advent Calendar 2021

Day 21

UIデザイナー1年目のお悩み別ハンドブック

Last updated at Posted at 2021-12-20

この記事は、シアトルコンサルティング株式会社 Advent Calendar 2021の21日目の記事です。

はじめに

こんにちは!
シアトルでUIデザイナーとして、ネイティブアプリの開発に携わっている藤原です!

本格的にUIデザイナーになって、1年が経ちました。

今回は、もともとWEBデザイナーだった私が、
この1年UIデザインに関わってきてインプットしたものや、
仕事で困ったときに参考にしたものを、逆引きでまとめてみました。

アイデアに行き詰まった

デザインを作成していて、うまくアイデアをまとめられず手が止まる、、といったことありますよね。
そんな時は意識的にインプットとアウトプットの量を増やすようにしています。

### 1.参考サイトを漁る
SignUpなどユーザーのアクションから、Buttonなどのパーツ単位まで、
UIデザインが150以上にカテゴリ分けされているサイト。

機能は決まっているけど、どんなデザインにすればいいか悩むときに使っています。

アクション別にいろんなアプリの導線がまとめられているサイト。
画面ごとのキャプチャがあり、いちいち携帯でアプリを見なくても、
導線を知ることができるので便利です。

オンボーディングとか、実際のアプリで何度も見ることができないものが、
こうしてまとめられていると使いやすいですね。

### 2.とにかく紙に描き出す
調べたものをただ眺めるだけでなく、良いなと思ったパーツを紙に描き出すようにしています。
それを元に簡易的なラフを描いてみると、UX観点の抜け漏れが見つかることもよくあります。

デザインの意図の説明がうまくできない

デザイナーは作ったものをディレクターやエンジニアに向けて説明することもありますが、
デザインの意図をうまく伝えるのって難しいですよね。
意図を説明するための根拠を、どこから引用するかが重要になってくると思います。

### 1.「UXデザインの法則」を読む
意図がうまく説明できないときは、デザインを論理的に理解できていないことが多いです。

「UXデザインの法則」は心理学に基づいた法則がまとめられており、
事例も多く載っているので、理解しやすい内容になっています。

実際のデザインの説明をする際にも、この事例を紹介しながら、
なぜこのデザインにしたのか?を説明しやすくなります。

### 2.ユーザビリティテストをしてみる
どうしてもプロダクトチームだけでアプリを作り上げてしまいがちですが、
実際のユーザーの声を聞くと、1つの判断軸が生まれます。

「ユーザビリティテストでこんな結果が出たので、
こちらのデザインの方がユーザーにとって良い体験を作れる」といった説明もできます。

また、実際ユーザビリティテストをしてみると
想定外のところでユーザーが操作につまづいたり、
こちらが考えていたフローで操作をしてくれなかったりするので、検証の重要性を感じます。

### 3.Google UX Designプロフェッショナル認定を受ける
GoogleがUXデザイン初学者向けに出している講座です。
カスタマージャーニーマップなどのフレームワークから、
Googleの考えるUXデザインまで、UXデザインのプロセスを学ぶことができます。

私は一人では続かないタイプなので、
知り合いのテックリードの方と一緒に朝活で勉強しています。

その場で講義の感想を共有できたり、
自分のプロジェクトの取り組みについて話ができるのでおすすめです!

コンポーネントへの理解が浅い

大きなサービスのデザインになると、デザインシステムが導入され、
作ったパーツをコンポーネントでまとめておくことも必要になるかと思います。

### 1.Figmaを使いこなす
プロジェクトによってはXDでデザインを作っているところも多いと思いますが、
Figmaを1から触ってみるのはすごくおすすめです。

コンポーネント管理がしやすいということで
各企業もXDからFigmaに乗り換えることが多く、今が学びのチャンスともいえます。

こちらの講座では、Figmaの使用方法からファイルの整理の仕方まで、
丁寧に教えてくれるので、実際にものを作りながら理解することができます。
セールだと2000円ほどなので、お得に勉強できます。

### 2.他社のデザインシステムを見まくる
最近、Figmaのコミュニティ上でデザインシステムを公開する企業が増えています。

これまでデザインシステムといえば、HIGやGoogle Materialデザインでしたが、
Figmaでは実際のデザインデータが見れるので、非常に勉強になります。

まとめ

いかがだったでしょうか?
少しでもUIデザイナーとして行き詰まった時の参考になると嬉しいです。

私自身もまだまだ課題が多くあり、プロジェクトをうまく進めることは難しいなと感じているので、
「こんな風に工夫しているよ!」というノウハウもお待ちしています。
デザイナーみんなで成長できる環境を作っていけたらいいなと思います!

参考

https://monstar-lab.com/dx/solution/uiuxdesign-reference/
https://note.com/fladdict/n/n97d74e754bc4
https://goodpatch.com/blog/i-love-design-systems

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?