UIデザイナーって何をする人なのか。Webデザイナーと何が違うのか。UXとは何なのか。デザインの仕事を調べ始めると、横文字で止まるんよ。
先に言う。UIデザイナーは、アプリやサービスの画面を、迷わず使える形にする人だ。Webデザイナーは、サイトを見て伝わる形にする人だ。意味、UIとUXの違い、Webデザイナーとの違い、仕事内容、道具、要る力、未経験からなる順番を書く。私はWebデザインの会社から、大手系の会社のUIデザイナーに転職した。
先に一文で。UIデザイナーはアプリやWebサービスの画面と操作を使う人が迷わず使える形にする仕事で、会社やお店のサイトを見て伝わる形にするWebデザイナーとは作る物と作った後の関わり方が違い、UIは体験全体のUXの一部なので、見た目より使われ方を見て直し続けられる人が向く。
この記事の要点
- アプリやサービスの画面を使いやすくする仕事
- UIは触れる部分、UXは体験全体
- Webデザイナーはサイト、UIデザイナーはサービスの画面
- 作って終わりではなく、直し続ける
UIとUXの違い
| 言葉 | 中身 | 例 |
|---|---|---|
| UI | 使う人が触れる部分 | ボタン、文字、画面の並び |
| UX | 使い始めから終わりまでの体験 | 登録のしやすさ、待ち時間、迷わなさ |
UIはUXの一部だ。画面がきれいでも、登録で5回止まるサービスは使われない。
Webデザイナーとの違い
| 項目 | Webデザイナー | UIデザイナー |
|---|---|---|
| 作る物 | 会社やお店のWebサイト | アプリやWebサービスの画面 |
| 目的 | 見て伝わる | 迷わず使える |
| 作った後 | 納めて終わりが多い | 使われ方を見て直し続ける |
| 一緒に働く人 | ディレクター、コーダー | エンジニア、企画 |
未経験からWebデザイナーになる順番は未経験からWebデザイナーになる順番に書いた。
仕事内容
- 使う人と、使う場面を知る
- 画面の流れを決める
- 画面の形を作る
- エンジニアに渡して、形どおりに作られたか確かめる
- 公開後に使われ方を見て直す
使う道具
| 道具 | 使い道 |
|---|---|
| Figma | 画面の形を作り、チームで共有する |
| Photoshop・Illustrator | 画像やアイコンを作る |
| HTML・CSSの知識 | エンジニアと話が通じる |
私はWebスクールでHTML、CSS、Photoshopを学んでから業界に入った。道具は入ってから覚えるものが大半だ。
要る力
- 使う人の迷いに気づく力
- なぜこの形にしたかを言葉で説明する力
- エンジニアや企画と話を合わせる力
- 数字を見て直す所を決める力
見た目の好みで決める人より、理由を説明できる人が選ばれる。
未経験からなる順番
- Webデザインの基本（HTML・CSS・画像の作り方）を学ぶ
- Webサイトの制作や運営の仕事に入る
- 画面を直した理由と結果をポートフォリオにまとめる
- サービスを持っている会社のUIデザイナーに応募する
私は未経験でWeb業界に入り、ECサイトの運営とWebデザインの会社を経て、UIデザイナーになった。その後ディレクターになった流れはWebディレクターとはに、ポートフォリオの作り方はポートフォリオとはに書いた。
よくある質問
Q. UIデザイナーとは
アプリやサービスの画面を使いやすくする仕事。
Q. Webデザイナーとの違いは
作る物が、サイトかサービスの画面か。
Q. UIとUXの違いは
UIは触れる部分、UXは体験全体。
一人で働く人の単価・収入源・法人化・AIでの自動化は、私が運営しているメンバーシップTHINK LESS CLUBで続きを出している。何が読めるかは募集ページに書いてある。中身と向かない人はTHINK LESS CLUBとはに書いた。
