未経験からデザイナーへ！一年間私が取り組んだこと

# はじめに

はじめまして！
リンクアンドモチベーションでデザイナーをしている細貝と申します。

私は2023年に新卒でリンクアンドモチベーションに入社し、思いがけずデザイナーとしてのキャリアを歩むことになりました。
今回は、新卒未経験のデザイナーとして過ごしたこの一年間についてご紹介します。
特に、デザイナーとして何をしたらいいのか悩んでいる方の参考になれば嬉しいです。


# テクニカルスキルを伸ばすための3つの取り組み

デザイナーに配属されてから取り組んだことは大きく以下の３つです。
1. Figmaを使いこなせるようになる
2. 標準UIを理解する
3. テーマに沿ってUIを作る

 UIスキル向上のためのトレーニングプログラムの一環として、デザインチームとして取り組んだものも含みますが、一つずつ具体的にご紹介します！


### 1. Figmaを使いこなせるようになる

まずは、Figmaの操作に慣れるため、徹底的に練習をしました。
未経験からのスタートだったため、[Udemyの講座](https://www.udemy.com/course/figma-app-design/)を活用し、自分で手を動かしながら学習をしました。ショートカットキーや操作方法をメモし、繰り返し見返して意識的に使うことで定着を図りました。


ある程度、Figmaの使い方がわかってきたところで、実際に自社のプロダクトの画面をトレースしました。
既に用意されているコンポーネントは使わずに一から画面を組み立てていきました。
最初は構造もぐちゃぐちゃでしたが、レビューを通して少しずつ理解していくことができました。

そして、このトレースが終わる頃にはFigmaにもだいぶ慣れてきたので、タイムアタック形式で一般的なログイン画面を5分以内で作成するものにも挑戦しました。
最初は10分以上かかってしまっていましたが、ショートカットを駆使したり、先輩の組み立て方を真似したりしていくことで、8回目でようやく5分を切ることができました。
スピード感を持って組み立てるコツも学んだので、簡単な画面のトレースであれば先輩方と同じくらいの時間で完成させられるくらいにはFigmaの操作もマスターできました！

ここまでで約2ヶ月。デザイン以外のオンボーディングタスクをメインで取り組んでいたので少し時間はかかりましたが、ようやくデザイナーとしてのスタートラインに立つことができました。


### 2. 標準UIを理解する
次に、標準UI（一般的なコンポーネントやデザイン原則）を理解するため、他社のデザインシステムやプロダクトの考察やトレースを実施しました。
ここまで私は無思考でトレースしたことしかなかったのですが、なぜそのUIが選択されているのかを仮説立てることで、デザインの背景にある意図や目的を考えられるようになりました。その結果として、自分の中でのデザインの引き出しも増えていったような気がします。

考察を通してユーザー体験への感度が上がってきたタイミングで、アウトプットも作ってみることになりました。実際に新しいページをデザインする中で、構造を意識しながら全体の流れを考える訓練ができました。
その後さらに、ベンチマークプロダクトを調査し、それらに共通するデザインを模倣することで、標準UIの理解を深めました。

これらはデザイン課題として先輩方も一緒に取り組んだものだったので、考察やアウトプットを毎回照らし合わせてみて、新たな視点を学ぶこともできました。

また、この標準UIのトレースと並行して『[縁の下のUIデザイン](https://www.amazon.co.jp/%E7%B8%81%E3%81%AE%E4%B8%8B%E3%81%AEUI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E2%94%80%E2%94%80%E5%B0%8F%E3%81%95%E3%81%AA%E5%B7%A5%E5%A4%AB%E3%81%A7%E5%A4%A7%E3%81%8D%E3%81%AA%E5%8A%B9%E6%9E%9C%E3%82%92%E3%82%82%E3%81%9F%E3%82%89%E3%81%99%E5%AE%9F%E8%B7%B5TIPS%EF%BC%86%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-WEB-DB-PRESS-plus-ebook/dp/B0C1MZ8NLB/ref=sr_1_1?adgrpid=148352797099&dib=eyJ2IjoiMSJ9.Mw9128MKpowFPxCA9khGaTHtNz4DbIQ_teHj_EbZKhk-HT0S4XvP9AnP5dgD7D8h-jQjaV4rJW4JkGl7P6MYgmwXlmwewnPsZP12XU0ekhkwHbD4AeD9PevLoPd9BkpJSYwWw-SPP5uit0CByYuUtQ.iLtJjypjr4zrKTWeZOx2_8S9asb0pQocCuw9ZigKX1I&dib_tag=se&hvadid=655307054092&hvdev=c&hvlocphy=9198378&hvnetw=g&hvqmt=e&hvrand=15176497148419268429&hvtargid=kwd-2010945401275&hydadcr=21975_13457451&jp-ad-ap=0&keywords=%E7%B8%81%E3%81%AE%E4%B8%8B%E3%81%AEui%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3&qid=1733872471&sr=8-1)』という本を読んでいたので、実際にどの画面でどのように使われれているのか、その使い分け方はどうなっているのかという事例も合わせて意識してインプットするようにしました。

### 3. テーマに沿ってUIを作る

標準UIの理解が深まった段階で、「日程調整ツール」や「勤怠管理ツール」などのテーマを設定し、リファレンスを集めながらリデザインに取り組みました。これにより、UIだけでなくUXの観点からもプロダクト価値を考えるようになりました。
リファレンスを活用して複数案を検討する中で、他社のデザイン手法を学び、「こういう表現の仕方いいなあ」「この要素はこのために置いてあったのか！」という学びも得ることができました。

こちらは私が勤怠管理ツールのリデザインをしたときのものです。
![勤怠管理ツールのリデザイン例.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3636501/6146f0a9-df87-1c3e-389d-6882c98148a7.png)

このデザイン課題はテーマを変えながら3ヶ月間毎週アウトプットし続けました！
サービスのインサイトを見抜くためにユースケースを洗い出してUI/UXを改善していくことができたので、とても実践的にスキルを磨くことができたと思います。

今はより実業務にも活かせるよう、自社プロダクトのリデザインを中心に行なっています。


# ポータブルスキルも重要

このように、未経験からデザイナーとしての専門スキルを伸ばすことを最優先にしてきましたが、実業務を通じてポータブルスキルの重要性にも気付きました。

特に以下のスキルは、進捗管理やチームでの協働において重要です。
- 進捗を適宜共有する（✖️完成するまで共有しない）
- 細かい単位のタスクに砕いてスケジュールを管理する
- 要点をわかりやすく整理する
- 端的に自分の意見を伝える

私もこれまで何度も指摘をいただいていますが、これらを意識的に磨くことで、デザインの質だけでなく、その価値を正確に伝えられるようになり、業務全体がスムーズに進むようになります。

まだ経験値の少ないうちは特に一人で素早くいいデザインを作ることは難しいので、デザインのスキルを伸ばすことはもちろん、ポータブルスキルもあわせて磨いていきましょう！


# おわりに

新卒未経験デザイナーとして過ごした一年間を振り返り、取り組みや学びを共有しました。
配属当初は不安も多かったですが、今では少しずつ自信を持つことができています。実業務と並行して手を動かしながら標準UIやUX観点を身につけられたこと、挑戦的に様々なプロジェクトに関わらせていただけたことがその要因かなと思います。

これからもインプットとアウトプットを繰り返し、デザインスキルや知識を磨き続け、「未経験でも3年目にはここまで成長できる！」と言ってもらえる存在を目指します。

ここまでお読みいただき、ありがとうございました！
メリークリスマス！