見出し画像

独学・未経験でUI/UXデザイナーになるためにやったこと

こんにちは。

私は今年、前職のWebディレクターからUI/UXデザイナーに転職しました。
現在、事業会社のUI/UXデザイナーとして働いております。

転職するために何をしたのかよく聞かれるので、どこかにまとめておいた方がいいかなと思いこちらに書いていきたいと思います。
そもそもディレクターからデザイナーになる人はレアケースだと思うので特殊すぎて参考にならないかもしれませんが、何かしら役に立つことがあれば嬉しいです。

転職前の私の状況

前提として、転職前の私の状況は以下のような形でした。

・30代前半

・Webディレクターを4年ほど経験
 ∟制作会社&事業会社でコーポレートサイト・LPなどの制作ディレクション・分析やA/Bテストもちょこっと。アプリやサービスのディレクションに携わった経験はありませんでした。

・Photoshop・Illustrator・HTML・CSSは、Webディレクターになる前にスクールで学んだので知識はある状態。仕事でも、バナーやコーディングの簡単な修正とかは自分で行っていました。

・Webディレクターの仕事を辞めてから、デザインの勉強を始めました(業務多忙なのと色々ストレスが重なったため)

Web業界の経験はあるものの、デザイナーとしては業務未経験の状態からのスタートでした。

1・2ヶ月目:インプットと小出しアウトプット

前職を退職してから1・2ヶ月目は、デザインのリハビリをしたり知識をインプットする期間としました。
具体的に行った勉強は下記です。

・Cocodaの入門編でUIデザインの基礎を学ぶ
https://training.cocoda.design/

・DailyUIのお題を週一くらいで作り、Webデザイナーの友達とフィードバックし合う
https://www.dailyui.co/

・クラウドソーシングのバナーコンペに作品提出

・本を読んで知識をインプット
∟特に参考になった本は、「はじめてのUIデザイン」「UXデザインをはじめる本」「なるほどデザイン」です。

この時は、まだUIデザイナーを目指すかWebデザイナーを目指すか決めきれておらず、どっちに転んでもいいような勉強をしていました。UIデザイナーの方が気になっていたものの、手を動かしてみないとどちらが向いているかわからないので、それぞれ作ってみて方向性を探っていました。

3ヶ月目:サイトデザインとプロからのフィードバック

デザインにも慣れてきて、そろそろポートフォリオに載せられるような大きめの作品を作らねばと焦り出します。。
この時に行ったことは以下です。

・実在の企業サイトを勝手にリニューアル(デザイン・コーディング)
 ∟自分でデザインしたものを自分でコーディングしました。コーディングしやすいデータを作るとか、レスポンシブデザインを考える勉強になりました。また、この経験を通して"私はあまりコーディングが好きではない"ということが再確認できました(笑)

・DailyUIのお題を時間ある時に作り、Webデザイナーの友達とフィードバックし合う

・今まで作ったものを簡易的なポートフォリオにまとめる
 ∟まずはRESUMEというポートフォリオ作成サービスを使い、簡単に作品をまとめました。

・簡易ポートフォリオを様々なデザイナーの方に見ていただき、フィードバックをもらう
 ∟MENTAやmeetyなどのサービスを使い、企業で採用活動なども行っているようなデザイナーさんにポートフォリオ添削をして頂きました。

ポートフォリオはまだ制作途中の段階でしたが、方向性が間違っていないかや自分に足りない点を知りたいと思い、一度添削に出しました。
人によって意見は様々でしたが、共通して以下のような指摘をいただきました。
🙅‍♂️DailyUIで単一ページのデザインをアウトプットしているが、複数にわたる画面遷移を見ないとUIデザインとしての評価ができない
🙅‍♂️ビジュアルだけで説明が少ないので、もっと制作のプロセスを書いた方がいい(UIデザインは、根拠やユーザー視点があるかどうかが重要なのでビジュアルだけで良し悪しの判断ができない)

このフィードバックを踏まえて、もっと評価につながるような作品を増やすことにしました。

また、この頃にはWebデザインよりもUIデザインが楽しくなっていたので、UIデザイナーを目指す方向で転職を考え始めました。

4ヶ月目:プロからのご指南&アプリ制作

UIデザインをやっていきたいという気持ちが定まってから、知り合いのUI/UXデザイナーさんにポートフォリオ添削や相談をさせていただきました(ありがたさの極み)
そして、教えていただいたことを踏まえて以下のことを行いました。

・Cocodaの「実践デザイン」にある企業コラボのお題から1つ選んで、自作アプリのデザイン
 ∟市場調査やユーザーインタビューから行なって、UIに落とし込むところまで1人で行いました。
  CocodaのURL
  https://training.cocoda.design/?category_id=18

・上記をFigmaを使って制作し、AutoLayout・Variantsなどを使いこなせるように練習した
    ∟今までデザイン制作をXDで行なっていたのですが、UIデザインの現場ではFigmaが主流になっていると聞いたためFigmaを使えるよう練習しました。

1人前のUIデザイナーになるためのロードマップとして、以下の記事を参考にすべしと教わったので、この記事を読んで足りない部分を補うような勉強を行いました。(ちなみにまだまだできていないとこいっぱい)


5ヶ月目:ポートフォリオ作成・書類作成

いよいよ、制作したものを本格的にポートフォリオにまとめていきました。
それまでRESUMEを使って簡易的なポートフォリオを作っていたのですが、色々とやりたいカスタマイズができず、限界を感じたため…新しくWordPressを使ってポートフォリオを作成しました。

ポートフォリオの箱を作る

ポートフォリオのガワ作成に多くの時間を費やしたくない・・

そんな時に、個人的におすすめのWordPressテーマは「SWELL」です。
ブロックエディタ対応しているので、プログラミングに詳しくなくても直感的にカスタマイズしやすいなと思いました。
https://swell-theme.com/

他、最近ではSTUDIOの無料版がグレードアップされたようなので、STUDIOで作ってみるのもいいかなと思います。

参考にしたポートフォリオ

知り合いのUI/UXデザイナーさんの受け売りですが、下記の「お手本になる!」と言われたポートフォリオを参考にして作成しました。
UIのアウトプットに至るまでの前段のプロセスがしっかりと書き込まれているのが特徴です。
①リサーチ→②ペルソナ設定→③課題抽出→④課題の解決方法案→⑤カスタマージャーニーマップを作成して必要な機能の洗い出し→⑥デザインシステムの作成→⑦各UIデザインの画面を掲載(プロトタイプや操作動画を載せる)
という流れを参考にしました。

灰色ハイジさんのポートフォリオ
https://haiji.co/

ひらおほのかさんのポートフォリオ
https://pirapopi.studio.site/

ポートフォリオに載せた内容

・架空アプリ(Cocodaの企業コラボお題)のUIデザイン×1
 ∟時間があるならもっとたくさんこれを作りたかった
・自主制作メディア×1
 ∟以前からプライベートで運用していたサイトをさらにブラッシュアップして載せました。実際に運用しているサイトのため、面接でのウケがよかったです!
・既存サイトを勝手にリニューアルしたもの×1

 ∟私は実務実績がない代わりに架空サイトを作ることが必要でしたが、
企画から全て架空だとただ自分の好きなものを作っただけみたいになってしまうので、より実務に近い案件にするために、既存のサイトリニューアルという形にしました。
・クラウドソーシングのコンペ提出したバナー×2
 ∟実際に採用されたわけではないのですが、お客さんありきの制作物なので完全に架空の作品より良いかと
・DailyUI×3
 ∟実際は20作品程度作っていたのですが、抜粋して特によくできたと思うもののみ載せました。

履歴書・職務経歴書を作成して転職活動開始

ポートフォリオを作ったあと、履歴書・職務経歴書を作成しました。
これも、自分で作ったものを転職エージェントの方に見てもらってブラッシュアップしました。(誰かに見てもらうこと大事!)
他、Wantedlyの経歴を整理して転職活動を始めました!

使った媒体
・転職エージェント(doda・マイナビクリエイター)
・Green
・Wantedly

未経験だからかエージェント経由の書類が通りにくく、最終的にはWantedlyで内定が決まりました○
面接などの転職活動にかかった時間は2ヶ月くらいです。

まとめ

30代だし未経験だしどうなることやらと思いましたが、自分を信じて勉強を続けていけばなんとかなるものだなと思いました。
もちろん入社することがゴールではないので、私はまだまだ修行を続けます・・(入社するのも大変だが、入社してからがもっと大変。マジで今追い詰められていてやばい)

また、私のやり方よりもっと効率的な良い勉強方法もあるかと思うので一つの参考ということに留めてください。間違っている部分あればご指摘を!

転職後に知ったのですが、BONOというUI/UXデザインのコミュニティが大変有益だったので
これから勉強を始めるよという方は、使ってみると良いかと思います!


この記事が気に入ったらサポートをしてみませんか?