最近人気が出てきているUXデザイナーに必要なスキルについて元UX部門の自分が解説します。
UXデザイナーに必要なスキルを知る最も手っとり早い手段は、UXデザイナーの求人の応募要件から「何を行うのか」「どんなスキルが求められるのか」を見ることです。
そこから逆算して必要なスキルをつけましょう。
目次
UXデザイナーに必要なスキルを知るためにまず、仕事内容を知ろう
UXデザイン単体でポジションの募集をしている企業は少ないので、UIUX両方の仕事を行う前提で解説します。
簡単にまとめると、以下を行います。
UXデザイナーの必要スキルを知るために、仕事内容を知る
- ユーザー（ペルソナ）の設定、ユーザーは何に困っているか特定
- サービスを使うことでユーザーにどんな体験をしてほしいか、それを実現するために何が必要か特定
- それを実現するために具体的にどんな画面にするのが良いか決める
UIデザイナー、UXデザイナーそれぞれの仕事内容から必要スキルを知る
UXデザイナーはヒアリング調査から必要な要件を決める
・ ユーザーテストの執行
・ 対面インタビュー
・ フィールド・リサーチ
・ 徹底的なアナリティクス分析
・ プロトタイピング
・ レイアウト
UIデザイナーはUXデザインされたものを具体化する
• インターフェイスのレイアウト
• インターフェイスのデザイン
• ビジュアル・デザイン
• インタラクション・デザイン
• ビジュアルのガイドラン作成
UXデザイナーに必要なスキル・経験
UXデザイナーに必要なスキル・経験
企業の募集内容によって異なりますが、大きく分けると以下が必要なスキル・経験です。UIデザインとコーディングの経験は、illustrator, photoshop,sketchや˙HTML/CSS/jQueryのスキル習得に時間がかかるから明示されているのかと思います。
- ユーザーリサーチスキル
- UI設計・デザインスキル(illustrator, photoshop,sketchなど使用)
- モックアップ作成スキル
- UIデザイン経験(プライベート含む)
- HTML/CSSコーディング経験(＋α)
UXデザイナーの求人募集例から必要スキルを知ろう
UIUXデザイナーという職種名に惑わされないようにしましょう。必要な経験に、デザインだけでなくコーディングがあったり、UXデザイナー募集とありながらUIデザインが挙げられる可能性があります。
例1.フロントエンドコーディング経験も必要な例
■仕事内容
・BUYMA(日本語版もしくは英語版)に関するデザイン・UI設計
・BUYMA内の新機能/サービスに関するデザイン・UI設計
・HTML/CSSコーディング
・マルチプラットフォームへのコンテンツ展開
・新機能開発や既存コンテンツの改善
■応募資格
・Webデザイナー/マークアップエンジニア/フロントエンドエンジニアなどの実務経験
・UI設計・Webデザイン経験
・HTML/CSSコーディング経験
・JS or CSSを用いたUI作成スキル (例：使いやすい入力フォームなど)
・マルチプラットフォーム対応スキル
例2. 未来のUXデザイナー募集とありながら、バリバリUIデザイン経験が必要な例(freee)
■仕事内容
・web / タブレット / モバイルアプリの UX 開発
・インフォメーションアーキテクチャ
・インターフェースのデザイン
・プロトタイプ/モックの作成
・ユーザーリサーチ
■応募資格
(下記のいずれか必須)
・コミュニケーションデザイン、情報デザイン、インターフェースデザイン、インタラクションデザイン、ユーザーエクスペリエンス等の分野について興味を持って学んでいる
・Web アプリまたはモバイルアプリのUIのデザイン経験（プライベートを含む）
UXデザイナーに必要なスキル・経験をつけるには
UIUXのスキルも経験もなくとも、自分でつけて企業にPRすることができます。具体的に手順を解説します。
- デザイン理論をインプットする
- 実際に自分で作成する（模写・自作）
- クラウドワークスなどで稼いでみる
UXデザイナーが知っておくべき知識をインプットしてスキルをつける
無料でUXデザインを勉強する方法
UXデザインカテゴリの記事に、UXデザイン原則や手法をまとめているので、ぜひ読んでみてください。全て無料で1記事5~10分程度で読むことができます。
無料でwebデザインを勉強する方法
コーディング知識のインプットをする
以下の記事に最短でコーディングをマスターする方法を書いているので参考にしてみてください。ただデザイン知識をつける方が優先ということは覚えておきましょう。
2.自分で作成してUXデザイナーのスキル・経験をつける
模写デザイン、コーディングをする
模写デザイン
ウェブサイトやアプリの模写を行う。photoshop、illustrator、sketchなど、行きたい企業が使っているツールに合わせて行いましょう。
Adobe XDやfigmaであれば無料で、動作も軽く、簡単に使うことが出来ます。
- Adobe xdを利用する場合「【5分】初心者向けAdobe XDの効率化。プラグインなし」
- figmaを利用する場合「【5分】デザインツールfigmaの使い方を初心者向けに1番わかりやすく解説」
模写コーディング
ウェブサイトの模写を行う。具体的な方法は以下の記事を参考にしてください。
自作する
・デザインを自作する
インプットした内容を元に、ユーザーを想定してUXUIに沿ったアプリやウェブサイトのデザインをしてみましょう。
・コーディングしてサイトを自作する
インプットをした内容を元にサイトを自作してみましょう。上記で作ったデザインを元にやってみると、コーディングしやすいデザインか否かがわかって良いでしょう。チーム全体の効率を上げるためにコーディングしやすいデザインをすることも重要です。
