一人前のUIデザイナーになるための成長計画テンプレート(β)

一人前のUIデザイナーになるための成長計画テンプレート(β)

✍ 概要

はじめに

この計画はデザイナーの 広野 萌 が自らのデザイン会社においてインターンを育てるために2021年3月から試験的に始めたもの。

未完成のものであり、これからも更新していく。

デザイナーという言葉の意味は幅広いが、この計画においては特にWebやアプリなどのデジタルプロダクトにおけるUIデザイン領域を司る職業として捉えてもらいたい。

何のための計画

デザイン初心者が、デザイナーとして一人前になるための計画。

デザイン初心者とは

最低限デザインツールを使って何かをつくれるが実践経験がない、もしくは豊富でない者。

一人前とは

IT企業において、プロジェクトやサービスにチーム内の唯一のデザイナーとしてアサインしてもよいとマネージャーに判断してもらうほど、もしくは自らその自信をもってアサインを望めるほどスキルを持っている状態。

いつまでに

だいたい1年間。

どう使う

業務をこなし実践を積みながら、同時にこの計画の「ロードマップ」に沿ってインプットとアウトプットを繰り返す。

業務アサインもなるべくロードマップに沿ったかたちでおこなう。

山の登り方

下図でいうところの「デザイナー」にまずなる。(ここを一人前としているためハードルは低い)

その後時間があれば「リードデザイナー」として必要な要素を学びたい。

いずれは実践型デザインスクール「Designship Do」の受講(手前味噌)も検討してほしい。

image

✅ スキルチェックリスト

一人前のUIデザイナーになるために学ぶべき要素一覧。

自分がどこのカテゴリーのスキル・ナレッジを学ぶことが必要なのかを俯瞰してみる。

メンターと1on1するときの成長チェックリストとして活用するなどがよし。

UIデザイン

  • モバイルアプリ
  • モバイルアプリの歴史を知っている(知識)
    HIGとMDGなどデザインガイドラインを読み込んでおりインターフェースの名称を一通りおさえている(知識)
    モダンなモバイルアプリのUIを効率的につくれる(意匠)
    OOUIアプローチで一通りアプリがつくれる(設計)
  • Webサービス
  • Webデザインの歴史を知っている(知識)
    アクセシビリティを意識した設計ができる(知識)
    モダンなWebデザインをつくれる(意匠)
    OOUIアプローチで一通りダッシュボードがつくれる(設計)

UXデザイン

いくつかのフレームワークのアプローチを知っていて実践できる(知識)
UXデザインとは何で、なぜ大事なのか説明できる(知識)

ライティング

伝えたい人に伝えたいことを明確かつ簡潔に伝えることができる
定期的に学びを発信してフィードバックをもらえる
言葉のリズムと語感を意識して、心を揺さぶるコピーが提案できる

コラボレーション

デザイナーとしてビジュアルを武器にファシリテーションできる

テクノロジー

  • モバイル
  • iOSアプリかAndroidアプリのどちらかでアプリがかんたんなものでもつくれる
    ディープリンクなどモダンなモバイルアプリの技術用語をひととおり説明できる
  • Web
  • 自ら契約したサーバーに自身で書いたHTML/CSS/JSのファイルをアップして、静的なWebサイトを運用できる
    SEOなどWebの技術用語をひととおり説明できる

すべて終わったら ↓ に進むがおそらく1年では難しい

デザイン哲学

  • デザインアプローチ
  • デザインと倫理

ビジネス

  • 事業戦略・マーケティング
  • プロジェクトマネジメント

📕 最低限読んでおくべき書籍・記事

基本的にロードマップに沿って必然的に読まざるをえないものに絞った。

抽象的な内容の書籍は、名著だとしてもなるべく避けた。

書籍・記事リスト

カテゴリーレベルタイトルリンク読了
デザイン
基礎
ノンデザイナーズ・デザインブック
デザイン
基礎
Sociomedia ヒューマンインターフェース ガイドライン
UI
実践
はじめてのUIデザイン
UI
実践
UI GRAPHICS
UI
実践
オブジェクト指向UIデザイン
UI
実践
Design Systems
UI
理論
インタフェースデザインの心理学
UI
理論
インタフェースデザインのお約束
UI
理論
誰のためのデザイン?
UX
基礎
UXデザインの教科書
UX
理論
融けるデザイン
UX
理論
デザインリサーチの教科書
テクノロジー
基礎
Web技術の基本
テクノロジー
基礎
いちばんやさしいGit&GitHubの教本
テクノロジー
基礎
HTML5/CSS3モダンコーディング
テクノロジー
理論
Webを支える技術
ビジネス
基礎
ビジネスモデルジェネレーション
クリエイティブ
基礎
伝え方が9割
クリエイティブ
実践
ここらで広告コピーの本当の話をします。
組織
基礎
ピクサー流 創造するちから
プロダクト
基礎
ゼロから始めるプロダクトマネジメント
プロダクト
理論
プロダクトマネジメントのすべて
行動経済学
基礎
ヘンテコノミクス
行動経済学
理論
行動経済学入門
行動経済学
理論
予想どおりに不合理

🚩 ロードマップ

ひとりひとりの特性、得意不得意、スキルによって順番や項目を変えるべき。

インターンSさんの例

デザインの素養はあるがITに疎く、加えて言語化が苦手そうだったので、UI/UXデザインに関してnoteで発信することに重きをおきつつ、UIデザイナーとは開発者であると自覚することを目指したロードマップ。

3月

発信の土台を整える

SNSのプロフィールをまともにする
ポートフォリオサイトの仕組みをしってドメインを設定する
noteを開設する
習慣づけのため発信のルールを決める(「本を読み終わるたびに発信」など)

3月〜4月

モバイルアプリの歴史をおさえる

「はじめてのUIデザイン」を読んで内容をまとめて文章に起こす
「UI GRAPHICS」を読んで内容をまとめて文章に起こす
「インターフェースデザインの心理学」を読んで内容をまとめて文章に起こす
「インタフェースデザインのお約束」を読んで内容をまとめて文章に起こす
モバイルアプリのUIの歴史を調べながらまとめて文章に起こす

4月〜5月

HIGとMDGなどデザインガイドラインを読み込んでおりインターフェースの名称を一通りおさえている(知識)

Human Interface Guidelineを読んで気になったところを文章に起こす
Material Design Guidelineを読んで気になったところを文章に起こす
iOSとAndroidで同じ役割なのに異なる名称のUI(逆に同じ名称のUI)をまとめる

モダンなモバイルアプリのUIを効率的につくれる(意匠)

FigmaでSymbol・AutoLayout・Variantsを使いこなしてUIをつくる
公開されているFigmaのデザインシステムをみてパーツの名称やつくりかたを学ぶ

6月

OOUIアプローチで一通りアプリがつくれる(設計)

オブジェクト指向UIデザインを読んで内容をまとめて文章に起こす
OOUIアプローチでひとつ仮想お題をつくってみる

6〜7月

デザイン対象のテクノロジーを理解する

「Web技術の基本」を読んで内容をまとめて文章に起こす
なんでもいいのでアプリ開発入門書を読んでつくる
自分で企画してアプリをつくってリリースする

8月

UXデザインの基礎をおさえる

「UXデザインの教科書」を読んで内容をまとめて文章に起こす
「融けるデザイン」を読んで内容をまとめて文章に起こす
「デザインリサーチ」を読んで内容をまとめて文章に起こす

インタラクションデザインの基礎をおさえる

「誰のためのデザイン」を読んで内容をまとめて文章に起こす

9月〜10月

Web開発ができるようになる

「Webを支える技術」を読んで内容をまとめて文章に起こす
「いちばんやさしいGit&GitHubの教本」を読んで内容をまとめて文章に起こす
「HTML5/CSS3モダンコーディング」を読んで内容をまとめて文章に起こす
HTML/CSS をつかって静的なWebサイトをつくる
GitHubで共有してフィードバックをもらう
JavaScriptで動くWebサイトをつくる
サーバーを借りてアップする

11月

周辺知識をおさえる

行動経済学の本を読んで内容をまとめて文章に起こす

(夏が終わったあたりで続きを策定)

🙏 終わりに

  • 本当はインターン育成がちゃんとうまくいったと感じた後に拡充して公開するべきと思っていたが、ツイートの反響 が大きかったので、これからデザイナーを育てる人や、デザイナーとして自立したい人のために未完成のまま公開した
  • Duplicateなど自由だが、あくまで参考までに捉え、カスタマイズしながら使ってほしい
  • 有識者の皆さま方からのフィードバックや、「オレならこうする成長計画」の公開など大歓迎(むしろそれをこれに反映したい)
  • 使う場合は全然必須ではないが使ってます報告をツイッターで @hajipion 宛にもらうと作者が喜ぶ
  • 日本にUIデザイナーがたくさん生まれますように