質問しよう
シリーズ目次

UIUXデザイナーになる条件

7
UI/UXデザインの基礎スキルを身につけるロードマップの進め方
Text
UI/UXデザインの基礎スキルを身につけるロードマップの進め方

UI/UXデザインの基礎スキルを身につけるロードマップの進め方

未経験からUI/UXデザイナーになるには?3つの基礎の習得とポートフォリオ作成が必須
47:27
未経験からUI/UXデザイナーになるには?3つの基礎の習得とポートフォリオ作成が必須

未経験からUI/UXデザイナーになるには?3つの基礎の習得とポートフォリオ作成が必須

デザインスキルを独学で身につける勉強法7つのコツ
Text
デザインスキルを独学で身につける勉強法7つのコツ

デザインスキルを独学で身につける勉強法7つのコツ

独学を成功させる「目標瀬亭/計画」の立て方
13:15
独学を成功させる「目標瀬亭/計画」の立て方

独学を成功させる「目標瀬亭/計画」の立て方

ゴール:どうやったらUI/UXデザイナーになれる?
10:19
ゴール:どうやったらUI/UXデザイナーになれる?

ゴール:どうやったらUI/UXデザイナーになれる?

ゴール:3つのアウトプットが必要な理由=採用したい人がこうだから!
03:47
ゴール:3つのアウトプットが必要な理由=採用したい人がこうだから!

ゴール:3つのアウトプットが必要な理由=採用したい人がこうだから!

道のり:未経験からUI/UXデザイナーになるまでの勉強内容
https://vimeo.com/755390900
道のり:未経験からUI/UXデザイナーになるまでの勉強内容

道のり:未経験からUI/UXデザイナーになるまでの勉強内容

道のり①:ツールとUIに慣れる
03:39
道のり①:ツールとUIに慣れる

道のり①:ツールとUIに慣れる

道のり②:3つの基礎を体験する
12:12
道のり②:3つの基礎を体験する

道のり②:3つの基礎を体験する

道のり③:実践とポートフォリオと面接
03:46
道のり③:実践とポートフォリオと面接

道のり③:実践とポートフォリオと面接

スキル:未経験からUIデザイナーになるスキルってどれぐらい?
05:01
スキル:未経験からUIデザイナーになるスキルってどれぐらい?

スキル:未経験からUIデザイナーになるスキルってどれぐらい?

トップ
/
UIUXデザイナーになる条件
/
UI/UXデザインの基礎スキルを身につけるロードマップの進め方
デザイン上達法

UI/UXデザインの基礎スキルを身につけるロードマップの進め方

2023
11
27
スキルを上げて、創造のための武器を手に入れよう
すべての動画閲覧には、メンバーシップ加入が必要です
メンバー登録について

UI/UXデザイナーになるロードマップとは

📕コンテンツ目次

  1. UI/UXデザイナーになるロードマップとは
  2. ロードマップ全体の流れ
  3. 各フェーズの進め方
  4. 学習スケジュールと勉強時間
  5. ロードマップを取り組むコツ

デザイナー0-2年目向けにUI/UXの基礎を身につける旅を体系化しました

UI/UXデザイナーとして未経験から現場で活躍できる、採用されるデザイナーに必要なスキルを定義しそれを身につけるための4つのコースで構成されたロードマップです。完了までにデザイン未経験者は10ヶ月ほどを想定したものです。残りの2ヶ月で転職活動をしてちょうど1年ぐらいでの未経験転職を想定した内容になっています。また未経験者を想定していますが、現場に入った1-2年目のデザイナーで基礎が備わってない人にも有効なロードマップになっています。

ロードマップの開始点は、UI/UXデザイナーとしての基礎スキルを身につけること。デザインツールの習得から始まり、3つの基礎領域を学び抜き、最終的には自分だけのオリジナルのデザインアウトプットを生み出すことで、自分の能力を示すポートフォリオを作成します。

現場経験と未経験転職者を逆算して設計しました

BONOのロードマップは以下の2つを参考にして作成しています!

  • 10年目の現場経験
  • 実際に転職した人のポートフォリオを研究

結果として、ロードマップをしっかりやって自分のポートフォリオを作成した人はちゃんと未経験から転職できているのを確認しています。年齢も今までの経歴も関係ないと考えています。

未経験で現場に入るために必要なのはシンプルに「この人はうちの会社に入ってもデザイナーとして動き始められそう」と思えてもらえられるかどうかです。

10年の現場経験

大手のメガベンチャー(旧 mixi)に新卒で入社して、黎明期のNewsPicks社に最初のプロダクトデザイナーとして入って上場を経験したり、鳴かず飛ばずのスタートアップ立ち上げ、フリーランスを経験して来ました。その中で、若手でも良いデザイナーというのは”自分で考えてアイデアを出して、デザインで現場を動かし良いサービスを作るのに貢献できる”人でした。

もちろん完璧にできている人ばかりじゃないといけないわけではないです。ただ、デザインを作るだけと考えていたり、作成したデザインアイデアに幅がなくチームに示唆を与えられなかったり、なぜこのデザインか?を伝えられないと、メンバーに貢献できず良いサービスづくりにつながるデザインがやりづらいです。

未経験のレベルでもこのポテンシャルがある。と思ってもらえるようなスキル開発が必要だと考えました。

実際に転職した人のポートフォリオを研究して作成

自分の現場経験からだと主観になってしまうので、実際に未経験で転職した人をnoteで検索したり、Vivivitのポートフォリオから探しました。そこで見えてきた共通項、つまり身につけるべきデザインスキル、ポートフォリオに掲載するアウトプットのクオリティをロードマップ作成に活かしています。

そこで見えた来たのは

  1. ユーザーヒアリングをしてデザインした、UXの基本スキルをやってみた経験がある
  2. 機能やサービスの主要画面のUIを全て自分でデザインした経験
  3. 基本的なビジュアルのスキル

この3つが見えて来ました。そしてこれらのスキルは現場に必要な”自分で考えてアイデアを出して、デザインで現場を動かし良いサービスを作るのに貢献できる”というものにも合致している考えました。

この3つはロードマップで身につけるべき基礎スキルになっていて、各コースに取り組むことで一通り経験することができます。

これらの考え方をベースに逆算してストレートに必要なスキルが身につけられるようなロードマップを構築しています。

3つのフェーズ旅をします

ロードマップは大きく3つのフェーズに分けられます。まずはデザインツールに慣れ、次に3つの基礎領域を体得し、最後にはポートフォリオを作成して採用活動を行います。

重要なのは、全てを一度で完璧に理解・習得することを目指すのではなく、何度も繰り返し学ぶことによって基礎を身につけることです。

3つの基礎を習得。ボスを倒して力を得よう

3つの基礎コースでは、各領域の基本的な知識やスキルを学びます。各コースを進むごとに、困難な課題(これをボスと呼びます)を解決し、新たな能力を身につけていきます。この基礎を体得することで、初めて真の意味でのUI/UXデザインの世界に足を踏み入れることができます。

このロードマップを進むことで、デザインに対する理解が深まり、具体的なスキルが身につきます。そして、それぞれのフェーズで学んだことを活かして、自分だけのデザインを創造し、それをポートフォリオとして形にすることで、UI/UXデザイナーとしての自身の価値を示すことができます。

未経験から始めるUI/UXデザイナーへの道のりは、決して平易ではありません。しかし、このロードマップがあれば、道筋が明確になり、必要なスキルを確実に身につけることができます。スキルを磨き、挑戦を続けることで、あなたもきっと素晴らしいUI/UXデザイナーになれるでしょう。

ロードマップ全体の流れ

▽フェーズ1:デザインツール習得

フェーズ1ではデザインの世界に足を踏み入れるためにデザインツールを学びます。

UI/UXではFigmaというデジタル上のデザインに強いツールが重要です。そのためこのFigmaの操作に慣れることをフェーズ1では目標にしています。

Figmaの基本的な使い方を習得する

具体的には、既存のUIをトレースしてデザインしながらFigmaの使い方を習得します。実際に作ることになるUIを題材にFigmaを学んでいくので同時にUIの勉強もできるのがポイントです。

→学べるシリーズ : Figmaの使い方入門 / Figmaの使い方初級

ゴール:1画面ゼロベースでUIをデザインしてみる

自分の力で初めてのUIデザインを作り上げるのをフェーズ1のゴールにしています。といっても全くゼロから生み出すことはまだやりません。デザインの基本は模倣です。既存のUIを調べて観察して自分でデザインすることを行います。

⏩ BONOでこのデザインを学べるコース:

はじめてのUIデザイン
https://www.bo-no.design/corse/uistarter

新しい環境やツールに慣れることは難しいかもしれませんが、新しいことを学ぶ楽しさを感じてみましょう。

▽フェーズ2:3つの基礎の習得

フェーズ2では本格的にUI/UXデザインを学びます。3つの基礎である「ビジュアル」「UX」「インタラクション」をコースに沿ってデザインしながら身につけていきます。

それぞれ関係はしているが新しい考え方のスキルになります。この3つが揃った状態ではじめてデザインを見る目が養われ、UI/UXデザインを正しく行うことができます。そのため3つの基礎を完璧に抑えるというよりかはまずは視点を得るためにとにかく量をこなして進めていくことを強く推奨しています。

以下の3つの基礎をマスターすることが目標に3つのコースに沿ってデザインしていきます。

  1. 基礎A:UIのビジュアルの基礎 - UIの見た目を構成する基本要素を学びます。サイズ、レイアウト、フォントなど、デザインの視覚的な側面を制御する方法を身につけます。このスキルを用いて、音声SNSアプリの主要UIを自分でデザインすることが最終的な目標です。
  2. 基礎B:UXデザインの基礎 - 顧客の課題やニーズに基づいたUIを設計する方法を学びます。ヒアリングからインサイトの抽出、そしてそれを基にしたアイデアの生成と具体化までの流れを経験します。このフェーズでは、特定の顧客の課題やニーズに対応するサービスをプロトタイプまでデザインすることが目標です。
  3. 基礎C:インタラクションの基礎 - このフェーズでは、特定の要件や目的に合わせた最適なUIをデザインする方法を学びます。出張申請サービスのデザインを通じて、このスキルを身につけることが目標です。

⏩ BONOでこのデザインを学べるコース:

基礎A : UIビジュアル基礎コース
https://www.bo-no.design/corse/uivisualstarter
基礎B : UX入門コース
https://www.bo-no.design/corse/uxbeginnercourse
基礎C : 情報設計入門コース
https://www.bo-no.design/corse/infomationarchitecturebignner

▽フェーズ3 : ポートフォリオ

フェーズ3は、これまでに学んだことを活用し、自分自身のスキルを具体的に示す作品を作り上げるステージです。ここでは、自分だけのオリジナルのアウトプットをデザインし、それを通じて、自分のデザインスキルを明確に示すポートフォリオを完成させます。これは、あなたがこれまでに身につけたデザインスキルを全て用いて自分のアイデンティティを表現する場所です。

そして、ポートフォリオの作り方については、特別に用意した動画があります。ここでは、ポートフォリオの役割、目指すべきレベル感、そして具体的なポートフォリオの内容のイメージなどを詳しく説明しています。

以上がUI/UXデザイナーへの道のりを照らすロードマップ全体の流れです。このロードマップを通じて、UI/UXデザインの世界を経験し、磨き上げられたスキルと自信を身につけることができます。新たな挑戦が始まりますが、このロードマップがあなたの成功に向けた確かな指針となることを願っています。

実物見せます!!未経験からUI/UXデザイナーになるポートフォリオのつくり方。ポートフォリオの作り方はこちらの解説動画を観よう。********https://www.bo-no.design/contents/portfolio-01

各フェーズの進め方

フェーズ1】デザインツールに慣れ、UIデザインをトレースから始める

「はじめてのUIデザイン」コース

  • ⛰目標:Figmaに慣れる/トレースと真似でアプリの主要画面を1度作る
  • 🔥ボス:「はじめてのUIデザイン」で連絡先追加UIをデザインする

まずはFigmaの使い方を身につけよう

デザインを扱う人になるためにはデザインツールの習得は必須になります。単純に作るためのツールだけではなく、自分の思考を具現化する”手の拡張”となります。(ハンター×ハンターでいうクラピカの鎖みたいなものです)デザインを始める際はまずここからスタートします。BONOではデジタル領域を対象にしているのでFigmaというツールを推奨しています。

まずはFigmaのシリーズを通して扱い方に慣れていきましょう。ツールは理解するというより使って慣れて行く方が100倍効率が良いと思います。とにかく動画の内容を真似して扱えるようになりましょう。

UIを真似して作ろう

Figmaに慣れてきたらUIのトレースをいくつかやってみましょう。普段見ているだけだったUIを自分自身で作る体験をいくつかやるとUIをデータに起こすという感覚に触れていけると思います。最初はなんか変な感じがしますが、デザインをはじめているという感覚です。

最後は「はじめてのUIデザイン」シリーズに取り組み、UIの仕組みを知りつつ連絡帳のアプリをマネしてデザインしていきましょう。最後にあるページUIを自分自身でゼロから作ろう!というボスが登場します。既存のアプリUIを自分で真似して完成させましょう。

マネすることまずは慣れていくのがとてもデザイン上達にとって有効です。その基礎をここで実践していきましょう。

ここまでを1-2ヶ月で行うのをお勧めします。

【フェーズ2】3つの基礎

UI/UXデザインを本格開始。3つの基礎を3つのコースで体得する

  • ⛰目標:3つの基礎を通る。マスターするのではなく、通る、体験する
  • 🔥ボス:3体の基礎課題を倒す - 音声SNSアプリ / 出張申請機能 / ヒアリングを通してサービスプロトタイプ をデザイン

基礎として通るべき3つの基礎スキルを通りましょう。UI/UXデザイン初心者にとって必須の基礎スキルです。これらの3つが揃うことで初めてUI/UXデザインを行う視点を得ることができスタートラインに立つことができます。

→ 3つの基礎スキルについてはこちらの記事をお読み下さい

基礎コースA : ビジュアル基礎コース

UIの見た目をデザインする基礎を学びます。見た目のデザインに関する基礎知識をつけながら実践して身につけます。コースの最後は「音声SNSアプリ」をデザインすることで、UIのビジュアルスキルの定着を行います。グラフィックデザインと被る部分もあるのでそこも一部やります

▼ 学べること

  • ゼロベースでUIの見た目をデザインする順番や考え方
  • UIビジュアル基本のスキル項目(簡易システム、サイズの決め方、配色など
  • UIに必須の3つの基本構造 - ナビゲーション/アクション/コンテンツ
  • UI特有の概念 - モードとモーダル、階層など

基礎A : UIビジュアル基礎コース
https://www.bo-no.design/corse/uivisualstarter

基礎コースB : UX入門コース

プロダクトの基本は顧客を主語にデザインしていきます。顧客が定まるからこそ、UIがどうあるべきかがデザインできるという”プロダクトUXデザイン”の基本を学んでいきます。習得の難しい分野ですが、実際に1人をヒアリングをしてその人のゴールや感情を理解してゼロからサービスのプロトタイプを作るお題を通してUXスキルの基本を習得します。

▼ UXデザインの超基本的なスキルを実践を通して学習します

  • 価値定義
  • 課題定義
  • 顧客定義
  • ヒアリング
  • プロトタイプ

基礎B : UX入門コース
https://www.bo-no.design/corse/uxbeginnercourse

基礎コースC : 情報設計基礎コース

“要件” : 定められたユーザー、ユースケース(サービスを扱うシーン)、内容に合致した具体的な形をUIに落とすことがUI/UXデザイナーとしてまず最も求められる能力です。要件からそれに合致するUIをデザインするやり方をこのコースでは学びます。コースで学んだことを使ってコースの最後には「出張申請ソフト」の業務系のアプリケーションをデザインします。

▼ このコースで学ぶことは以下のような内容になります

  • インタラクションデザインの基本
  • OOUI-オブジェクト指向UIデザインの基本
  • UIモデルの基本 - どういう情報がUIに必要かを整理する
  • UIのページ構成を考える基本

基礎C : 情報設計入門コース
https://www.bo-no.design/corse/infomationarchitecturebignner

【フェーズ3】ポートフォリオ作成→採用面接

  • ⛰目標:3つの基礎を使った3つのアウトプットをポートフォリオ用にデザインする
  • 🔥ラスボス:採用面接

採用面接を受ける際、相手に「私にはデザインスキルがあります!」を示す必要があります。デザイナーは専門職なので”どういうものをデザインしてくれるか”が伝わることで、相手もはじめて興味を持ち話をしようという気になります。そのため自分がデザインしてきたものをまとめた『ポートフォリオ』を作成する必要があります。

BONOロードマップでは3つの基礎をメインで通ります。この3つの基礎が現場で示すべきデザインスキルと同義です。なので3つの基礎で身につけたそれぞれのスキルをポートフォリオに載せるアウトプットで使い、自分のデザインをまとめる必要があります。

ポートフォリオの準備ができたら面接に挑む準備は完了です。ポートフォリオを共有しつつ、採用面接に挑みましょう。

学習スケジュールと勉強時間

ここでは、デザイン学習を効果的に進めるためのスケジュールの一例を紹介します。人それぞれ学習のペースは異なりますが、このロードマップがあなたの学習の目安となることを願っています。

全体の計画

このロードマップは、スキルを身につけて内定を得るまでの約1年間を想定しています。もしもあなたが仕事をしながら学習する場合は、平日は1日最低1時間、平均で2時間の学習時間を確保しましょう。また、休日の半分をデザイン学習に充てることをお勧めします。詳しくは**学習のコツ**もご参照ください。

フェーズ1:2ヶ月

最初の1ヶ月は、Figmaの使い方に慣れ、デザイン学習の環境を整えることに専念します。その後の1ヶ月では、UIトレースをベースに「はじめてのUIデザインシリーズ」を完了し、UIの作り方を学びます。

フェーズ2:8-9ヶ月

このフェーズでは、UI/UXデザインの3つの基礎を身につけることに焦点を当てます。ここが最も大変なステージとなるでしょう。各コースを約2ヶ月で完了する目安にし、最終アウトプットをデザインすることをゴールに設定します。ここでは完璧を目指すよりも、全てを終えることを重視しましょう。

フェーズ3:1-2ヶ月

最後に、あなたが身につけたスキルを活かしてポートフォリオを作成し、転職・就職活動を始めます。また、企業によっては未経験者の採用に対するスタンスが異なるため、多数の企業に応募することをお勧めします。

早くデザイナーになりたい方へ

もし1年間の学習時間を確保するのが難しい場合は、まずはポートフォリオ作成に集中しましょう。あなたのスキルを示す最善の方法は、質の高いアウトプットを作り上げることです。そのため、ポートフォリオ作成を重視したスケジュールを立てることをお勧めします。

面接やカジュアル面談を早めに受けてみるのもアリ

デザインの現場感を理解するには、直接経験するのが最善です。ポートフォリオがまだ完成していなくても、途中のアウトプットを元に面接やカジュアル面談を受けてみると良いでしょう。それによって、現場が何を求めているのか、また、どのような質問がされるのかを体験できます。これはあなたのやる気やモチベーションにもつながるはずです。

最後に、このスケジュールは一例に過ぎません。あなた自身の学習スタイルやペースに合わせてカスタマイズし、自分にとって最適な学習スケジュールを作成してください。

ロードマップを取り組むコツ

完璧を目指さない

デザインは細部にまでこだわれる分野です。しかし、そのこだわりが深まるほど、完成までの時間は無限に広がります。初めてのデザイン学習で完璧を求めるのは、難易度が高すぎます。そこで大切なのが、「3つの基礎スキルを早めに身につける」という考え方です。

基礎的な要素を理解することが大切です。3つの基礎要素が揃ってはじめて、より良い形でUI/UXデザインができるようになります。まずは、これらの基礎を理解し、手を動かすことから始めましょう。

期限を決めて進める

デザインは無限にこだわることができる分野ですが、それが良い結果をもたらすとは限りません。デザインスキルの向上は時間とのバランスが重要です。時間をかければかけるほど良いものができるわけではありません。

自分自身をデザインするように、学習の期間やスケジュールを計画しましょう。これにより、自分のリソースを最適に活用し、効率的に学習を進めることができます。

また現場でもタイムリミットは存在します。自分でデザインのスケジュールを組んで限られた中で最大限のデザインをするための方法を毎回決めることになります。その練習も兼ねて今のうちから自分で自分のデザイン作業を設計する癖をつけておきましょう。

ボス戦後に学びを文章でまとめるのはおすすめです

BONOでは文章で学習の記録を取りセーブデータを残して行くことをお勧めしています。
理由としては以下です。

  • デザイナーは現場で思ったより説明を求められます。言語化し、思考を整理して構造化するトレーニングを文章作成で積むことは、自分のデザイン力の向上に寄与します。
  • ポートフォリオとして機能します。最終的なアウトプットにはならなくとも、”過去にこういう学習をした”、”こういうふうに考えながらデザインしてきた”というパーソナリティや努力値は採用面接ではプラスに働きます。

無理に文章にする必要はありませんが、自分の振り返りも兼ねて文章を残しておくと、それが後々自分の財産/資産になり自分を助けてくれる時があるでしょう。

取り組む順番は守るべき?

  • 守らなくてOK。難易度順に並べているだけ
  • 興味のがあるものからやってしまって良い
  • 自分の状況を加味して道のりを設計しなおそう

以上です。楽しんでデザインを学んでいきましょう〜!

ロードマップのはじめ方コンテンツ

この記事はBONOロードマップを始めるために読むべきコンテンツです。
コンテンツの一覧はこちら。

  1. ロードマップの進め方
  2. UI/UXデザイナーに未経験からなる条件とは
  3. デザインスキルを身につける勉強法7つのコツ

UI/UXデザイナーになるロードマップとは

📕コンテンツ目次

  1. UI/UXデザイナーになるロードマップとは
  2. ロードマップ全体の流れ
  3. 各フェーズの進め方
  4. 学習スケジュールと勉強時間
  5. ロードマップを取り組むコツ

デザイナー0-2年目向けにUI/UXの基礎を身につける旅を体系化しました

UI/UXデザイナーとして未経験から現場で活躍できる、採用されるデザイナーに必要なスキルを定義しそれを身につけるための4つのコースで構成されたロードマップです。完了までにデザイン未経験者は10ヶ月ほどを想定したものです。残りの2ヶ月で転職活動をしてちょうど1年ぐらいでの未経験転職を想定した内容になっています。また未経験者を想定していますが、現場に入った1-2年目のデザイナーで基礎が備わってない人にも有効なロードマップになっています。

ロードマップの開始点は、UI/UXデザイナーとしての基礎スキルを身につけること。デザインツールの習得から始まり、3つの基礎領域を学び抜き、最終的には自分だけのオリジナルのデザインアウトプットを生み出すことで、自分の能力を示すポートフォリオを作成します。

現場経験と未経験転職者を逆算して設計しました

BONOのロードマップは以下の2つを参考にして作成しています!

  • 10年目の現場経験
  • 実際に転職した人のポートフォリオを研究

結果として、ロードマップをしっかりやって自分のポートフォリオを作成した人はちゃんと未経験から転職できているのを確認しています。年齢も今までの経歴も関係ないと考えています。

未経験で現場に入るために必要なのはシンプルに「この人はうちの会社に入ってもデザイナーとして動き始められそう」と思えてもらえられるかどうかです。

10年の現場経験

大手のメガベンチャー(旧 mixi)に新卒で入社して、黎明期のNewsPicks社に最初のプロダクトデザイナーとして入って上場を経験したり、鳴かず飛ばずのスタートアップ立ち上げ、フリーランスを経験して来ました。その中で、若手でも良いデザイナーというのは”自分で考えてアイデアを出して、デザインで現場を動かし良いサービスを作るのに貢献できる”人でした。

もちろん完璧にできている人ばかりじゃないといけないわけではないです。ただ、デザインを作るだけと考えていたり、作成したデザインアイデアに幅がなくチームに示唆を与えられなかったり、なぜこのデザインか?を伝えられないと、メンバーに貢献できず良いサービスづくりにつながるデザインがやりづらいです。

未経験のレベルでもこのポテンシャルがある。と思ってもらえるようなスキル開発が必要だと考えました。

実際に転職した人のポートフォリオを研究して作成

自分の現場経験からだと主観になってしまうので、実際に未経験で転職した人をnoteで検索したり、Vivivitのポートフォリオから探しました。そこで見えてきた共通項、つまり身につけるべきデザインスキル、ポートフォリオに掲載するアウトプットのクオリティをロードマップ作成に活かしています。

そこで見えた来たのは

  1. ユーザーヒアリングをしてデザインした、UXの基本スキルをやってみた経験がある
  2. 機能やサービスの主要画面のUIを全て自分でデザインした経験
  3. 基本的なビジュアルのスキル

この3つが見えて来ました。そしてこれらのスキルは現場に必要な”自分で考えてアイデアを出して、デザインで現場を動かし良いサービスを作るのに貢献できる”というものにも合致している考えました。

この3つはロードマップで身につけるべき基礎スキルになっていて、各コースに取り組むことで一通り経験することができます。

これらの考え方をベースに逆算してストレートに必要なスキルが身につけられるようなロードマップを構築しています。

3つのフェーズ旅をします

ロードマップは大きく3つのフェーズに分けられます。まずはデザインツールに慣れ、次に3つの基礎領域を体得し、最後にはポートフォリオを作成して採用活動を行います。

重要なのは、全てを一度で完璧に理解・習得することを目指すのではなく、何度も繰り返し学ぶことによって基礎を身につけることです。

3つの基礎を習得。ボスを倒して力を得よう

3つの基礎コースでは、各領域の基本的な知識やスキルを学びます。各コースを進むごとに、困難な課題(これをボスと呼びます)を解決し、新たな能力を身につけていきます。この基礎を体得することで、初めて真の意味でのUI/UXデザインの世界に足を踏み入れることができます。

このロードマップを進むことで、デザインに対する理解が深まり、具体的なスキルが身につきます。そして、それぞれのフェーズで学んだことを活かして、自分だけのデザインを創造し、それをポートフォリオとして形にすることで、UI/UXデザイナーとしての自身の価値を示すことができます。

未経験から始めるUI/UXデザイナーへの道のりは、決して平易ではありません。しかし、このロードマップがあれば、道筋が明確になり、必要なスキルを確実に身につけることができます。スキルを磨き、挑戦を続けることで、あなたもきっと素晴らしいUI/UXデザイナーになれるでしょう。

ロードマップ全体の流れ

▽フェーズ1:デザインツール習得

フェーズ1ではデザインの世界に足を踏み入れるためにデザインツールを学びます。

UI/UXではFigmaというデジタル上のデザインに強いツールが重要です。そのためこのFigmaの操作に慣れることをフェーズ1では目標にしています。

Figmaの基本的な使い方を習得する

具体的には、既存のUIをトレースしてデザインしながらFigmaの使い方を習得します。実際に作ることになるUIを題材にFigmaを学んでいくので同時にUIの勉強もできるのがポイントです。

→学べるシリーズ : Figmaの使い方入門 / Figmaの使い方初級

ゴール:1画面ゼロベースでUIをデザインしてみる

自分の力で初めてのUIデザインを作り上げるのをフェーズ1のゴールにしています。といっても全くゼロから生み出すことはまだやりません。デザインの基本は模倣です。既存のUIを調べて観察して自分でデザインすることを行います。

⏩ BONOでこのデザインを学べるコース:

はじめてのUIデザイン
https://www.bo-no.design/corse/uistarter

新しい環境やツールに慣れることは難しいかもしれませんが、新しいことを学ぶ楽しさを感じてみましょう。

▽フェーズ2:3つの基礎の習得

フェーズ2では本格的にUI/UXデザインを学びます。3つの基礎である「ビジュアル」「UX」「インタラクション」をコースに沿ってデザインしながら身につけていきます。

それぞれ関係はしているが新しい考え方のスキルになります。この3つが揃った状態ではじめてデザインを見る目が養われ、UI/UXデザインを正しく行うことができます。そのため3つの基礎を完璧に抑えるというよりかはまずは視点を得るためにとにかく量をこなして進めていくことを強く推奨しています。

以下の3つの基礎をマスターすることが目標に3つのコースに沿ってデザインしていきます。

  1. 基礎A:UIのビジュアルの基礎 - UIの見た目を構成する基本要素を学びます。サイズ、レイアウト、フォントなど、デザインの視覚的な側面を制御する方法を身につけます。このスキルを用いて、音声SNSアプリの主要UIを自分でデザインすることが最終的な目標です。
  2. 基礎B:UXデザインの基礎 - 顧客の課題やニーズに基づいたUIを設計する方法を学びます。ヒアリングからインサイトの抽出、そしてそれを基にしたアイデアの生成と具体化までの流れを経験します。このフェーズでは、特定の顧客の課題やニーズに対応するサービスをプロトタイプまでデザインすることが目標です。
  3. 基礎C:インタラクションの基礎 - このフェーズでは、特定の要件や目的に合わせた最適なUIをデザインする方法を学びます。出張申請サービスのデザインを通じて、このスキルを身につけることが目標です。

⏩ BONOでこのデザインを学べるコース:

基礎A : UIビジュアル基礎コース
https://www.bo-no.design/corse/uivisualstarter
基礎B : UX入門コース
https://www.bo-no.design/corse/uxbeginnercourse
基礎C : 情報設計入門コース
https://www.bo-no.design/corse/infomationarchitecturebignner

▽フェーズ3 : ポートフォリオ

フェーズ3は、これまでに学んだことを活用し、自分自身のスキルを具体的に示す作品を作り上げるステージです。ここでは、自分だけのオリジナルのアウトプットをデザインし、それを通じて、自分のデザインスキルを明確に示すポートフォリオを完成させます。これは、あなたがこれまでに身につけたデザインスキルを全て用いて自分のアイデンティティを表現する場所です。

そして、ポートフォリオの作り方については、特別に用意した動画があります。ここでは、ポートフォリオの役割、目指すべきレベル感、そして具体的なポートフォリオの内容のイメージなどを詳しく説明しています。

以上がUI/UXデザイナーへの道のりを照らすロードマップ全体の流れです。このロードマップを通じて、UI/UXデザインの世界を経験し、磨き上げられたスキルと自信を身につけることができます。新たな挑戦が始まりますが、このロードマップがあなたの成功に向けた確かな指針となることを願っています。

実物見せます!!未経験からUI/UXデザイナーになるポートフォリオのつくり方。ポートフォリオの作り方はこちらの解説動画を観よう。********https://www.bo-no.design/contents/portfolio-01

各フェーズの進め方

フェーズ1】デザインツールに慣れ、UIデザインをトレースから始める

「はじめてのUIデザイン」コース

  • ⛰目標:Figmaに慣れる/トレースと真似でアプリの主要画面を1度作る
  • 🔥ボス:「はじめてのUIデザイン」で連絡先追加UIをデザインする

まずはFigmaの使い方を身につけよう

デザインを扱う人になるためにはデザインツールの習得は必須になります。単純に作るためのツールだけではなく、自分の思考を具現化する”手の拡張”となります。(ハンター×ハンターでいうクラピカの鎖みたいなものです)デザインを始める際はまずここからスタートします。BONOではデジタル領域を対象にしているのでFigmaというツールを推奨しています。

まずはFigmaのシリーズを通して扱い方に慣れていきましょう。ツールは理解するというより使って慣れて行く方が100倍効率が良いと思います。とにかく動画の内容を真似して扱えるようになりましょう。

UIを真似して作ろう

Figmaに慣れてきたらUIのトレースをいくつかやってみましょう。普段見ているだけだったUIを自分自身で作る体験をいくつかやるとUIをデータに起こすという感覚に触れていけると思います。最初はなんか変な感じがしますが、デザインをはじめているという感覚です。

最後は「はじめてのUIデザイン」シリーズに取り組み、UIの仕組みを知りつつ連絡帳のアプリをマネしてデザインしていきましょう。最後にあるページUIを自分自身でゼロから作ろう!というボスが登場します。既存のアプリUIを自分で真似して完成させましょう。

マネすることまずは慣れていくのがとてもデザイン上達にとって有効です。その基礎をここで実践していきましょう。

ここまでを1-2ヶ月で行うのをお勧めします。

【フェーズ2】3つの基礎

UI/UXデザインを本格開始。3つの基礎を3つのコースで体得する

  • ⛰目標:3つの基礎を通る。マスターするのではなく、通る、体験する
  • 🔥ボス:3体の基礎課題を倒す - 音声SNSアプリ / 出張申請機能 / ヒアリングを通してサービスプロトタイプ をデザイン

基礎として通るべき3つの基礎スキルを通りましょう。UI/UXデザイン初心者にとって必須の基礎スキルです。これらの3つが揃うことで初めてUI/UXデザインを行う視点を得ることができスタートラインに立つことができます。

→ 3つの基礎スキルについてはこちらの記事をお読み下さい

基礎コースA : ビジュアル基礎コース

UIの見た目をデザインする基礎を学びます。見た目のデザインに関する基礎知識をつけながら実践して身につけます。コースの最後は「音声SNSアプリ」をデザインすることで、UIのビジュアルスキルの定着を行います。グラフィックデザインと被る部分もあるのでそこも一部やります

▼ 学べること

  • ゼロベースでUIの見た目をデザインする順番や考え方
  • UIビジュアル基本のスキル項目(簡易システム、サイズの決め方、配色など
  • UIに必須の3つの基本構造 - ナビゲーション/アクション/コンテンツ
  • UI特有の概念 - モードとモーダル、階層など

基礎A : UIビジュアル基礎コース
https://www.bo-no.design/corse/uivisualstarter

基礎コースB : UX入門コース

プロダクトの基本は顧客を主語にデザインしていきます。顧客が定まるからこそ、UIがどうあるべきかがデザインできるという”プロダクトUXデザイン”の基本を学んでいきます。習得の難しい分野ですが、実際に1人をヒアリングをしてその人のゴールや感情を理解してゼロからサービスのプロトタイプを作るお題を通してUXスキルの基本を習得します。

▼ UXデザインの超基本的なスキルを実践を通して学習します

  • 価値定義
  • 課題定義
  • 顧客定義
  • ヒアリング
  • プロトタイプ

基礎B : UX入門コース
https://www.bo-no.design/corse/uxbeginnercourse

基礎コースC : 情報設計基礎コース

“要件” : 定められたユーザー、ユースケース(サービスを扱うシーン)、内容に合致した具体的な形をUIに落とすことがUI/UXデザイナーとしてまず最も求められる能力です。要件からそれに合致するUIをデザインするやり方をこのコースでは学びます。コースで学んだことを使ってコースの最後には「出張申請ソフト」の業務系のアプリケーションをデザインします。

▼ このコースで学ぶことは以下のような内容になります

  • インタラクションデザインの基本
  • OOUI-オブジェクト指向UIデザインの基本
  • UIモデルの基本 - どういう情報がUIに必要かを整理する
  • UIのページ構成を考える基本

基礎C : 情報設計入門コース
https://www.bo-no.design/corse/infomationarchitecturebignner

【フェーズ3】ポートフォリオ作成→採用面接

  • ⛰目標:3つの基礎を使った3つのアウトプットをポートフォリオ用にデザインする
  • 🔥ラスボス:採用面接

採用面接を受ける際、相手に「私にはデザインスキルがあります!」を示す必要があります。デザイナーは専門職なので”どういうものをデザインしてくれるか”が伝わることで、相手もはじめて興味を持ち話をしようという気になります。そのため自分がデザインしてきたものをまとめた『ポートフォリオ』を作成する必要があります。

BONOロードマップでは3つの基礎をメインで通ります。この3つの基礎が現場で示すべきデザインスキルと同義です。なので3つの基礎で身につけたそれぞれのスキルをポートフォリオに載せるアウトプットで使い、自分のデザインをまとめる必要があります。

ポートフォリオの準備ができたら面接に挑む準備は完了です。ポートフォリオを共有しつつ、採用面接に挑みましょう。

学習スケジュールと勉強時間

ここでは、デザイン学習を効果的に進めるためのスケジュールの一例を紹介します。人それぞれ学習のペースは異なりますが、このロードマップがあなたの学習の目安となることを願っています。

全体の計画

このロードマップは、スキルを身につけて内定を得るまでの約1年間を想定しています。もしもあなたが仕事をしながら学習する場合は、平日は1日最低1時間、平均で2時間の学習時間を確保しましょう。また、休日の半分をデザイン学習に充てることをお勧めします。詳しくは**学習のコツ**もご参照ください。

フェーズ1:2ヶ月

最初の1ヶ月は、Figmaの使い方に慣れ、デザイン学習の環境を整えることに専念します。その後の1ヶ月では、UIトレースをベースに「はじめてのUIデザインシリーズ」を完了し、UIの作り方を学びます。

フェーズ2:8-9ヶ月

このフェーズでは、UI/UXデザインの3つの基礎を身につけることに焦点を当てます。ここが最も大変なステージとなるでしょう。各コースを約2ヶ月で完了する目安にし、最終アウトプットをデザインすることをゴールに設定します。ここでは完璧を目指すよりも、全てを終えることを重視しましょう。

フェーズ3:1-2ヶ月

最後に、あなたが身につけたスキルを活かしてポートフォリオを作成し、転職・就職活動を始めます。また、企業によっては未経験者の採用に対するスタンスが異なるため、多数の企業に応募することをお勧めします。

早くデザイナーになりたい方へ

もし1年間の学習時間を確保するのが難しい場合は、まずはポートフォリオ作成に集中しましょう。あなたのスキルを示す最善の方法は、質の高いアウトプットを作り上げることです。そのため、ポートフォリオ作成を重視したスケジュールを立てることをお勧めします。

面接やカジュアル面談を早めに受けてみるのもアリ

デザインの現場感を理解するには、直接経験するのが最善です。ポートフォリオがまだ完成していなくても、途中のアウトプットを元に面接やカジュアル面談を受けてみると良いでしょう。それによって、現場が何を求めているのか、また、どのような質問がされるのかを体験できます。これはあなたのやる気やモチベーションにもつながるはずです。

最後に、このスケジュールは一例に過ぎません。あなた自身の学習スタイルやペースに合わせてカスタマイズし、自分にとって最適な学習スケジュールを作成してください。

ロードマップを取り組むコツ

完璧を目指さない

デザインは細部にまでこだわれる分野です。しかし、そのこだわりが深まるほど、完成までの時間は無限に広がります。初めてのデザイン学習で完璧を求めるのは、難易度が高すぎます。そこで大切なのが、「3つの基礎スキルを早めに身につける」という考え方です。

基礎的な要素を理解することが大切です。3つの基礎要素が揃ってはじめて、より良い形でUI/UXデザインができるようになります。まずは、これらの基礎を理解し、手を動かすことから始めましょう。

期限を決めて進める

デザインは無限にこだわることができる分野ですが、それが良い結果をもたらすとは限りません。デザインスキルの向上は時間とのバランスが重要です。時間をかければかけるほど良いものができるわけではありません。

自分自身をデザインするように、学習の期間やスケジュールを計画しましょう。これにより、自分のリソースを最適に活用し、効率的に学習を進めることができます。

また現場でもタイムリミットは存在します。自分でデザインのスケジュールを組んで限られた中で最大限のデザインをするための方法を毎回決めることになります。その練習も兼ねて今のうちから自分で自分のデザイン作業を設計する癖をつけておきましょう。

ボス戦後に学びを文章でまとめるのはおすすめです

BONOでは文章で学習の記録を取りセーブデータを残して行くことをお勧めしています。
理由としては以下です。

  • デザイナーは現場で思ったより説明を求められます。言語化し、思考を整理して構造化するトレーニングを文章作成で積むことは、自分のデザイン力の向上に寄与します。
  • ポートフォリオとして機能します。最終的なアウトプットにはならなくとも、”過去にこういう学習をした”、”こういうふうに考えながらデザインしてきた”というパーソナリティや努力値は採用面接ではプラスに働きます。

無理に文章にする必要はありませんが、自分の振り返りも兼ねて文章を残しておくと、それが後々自分の財産/資産になり自分を助けてくれる時があるでしょう。

取り組む順番は守るべき?

  • 守らなくてOK。難易度順に並べているだけ
  • 興味のがあるものからやってしまって良い
  • 自分の状況を加味して道のりを設計しなおそう

以上です。楽しんでデザインを学んでいきましょう〜!

ロードマップのはじめ方コンテンツ

この記事はBONOロードマップを始めるために読むべきコンテンツです。
コンテンツの一覧はこちら。

  1. ロードマップの進め方
  2. UI/UXデザイナーに未経験からなる条件とは
  3. デザインスキルを身につける勉強法7つのコツ

UI/UXデザイナーになるロードマップとは

📕コンテンツ目次

  1. UI/UXデザイナーになるロードマップとは
  2. ロードマップ全体の流れ
  3. 各フェーズの進め方
  4. 学習スケジュールと勉強時間
  5. ロードマップを取り組むコツ

デザイナー0-2年目向けにUI/UXの基礎を身につける旅を体系化しました

UI/UXデザイナーとして未経験から現場で活躍できる、採用されるデザイナーに必要なスキルを定義しそれを身につけるための4つのコースで構成されたロードマップです。完了までにデザイン未経験者は10ヶ月ほどを想定したものです。残りの2ヶ月で転職活動をしてちょうど1年ぐらいでの未経験転職を想定した内容になっています。また未経験者を想定していますが、現場に入った1-2年目のデザイナーで基礎が備わってない人にも有効なロードマップになっています。

ロードマップの開始点は、UI/UXデザイナーとしての基礎スキルを身につけること。デザインツールの習得から始まり、3つの基礎領域を学び抜き、最終的には自分だけのオリジナルのデザインアウトプットを生み出すことで、自分の能力を示すポートフォリオを作成します。

現場経験と未経験転職者を逆算して設計しました

BONOのロードマップは以下の2つを参考にして作成しています!

  • 10年目の現場経験
  • 実際に転職した人のポートフォリオを研究

結果として、ロードマップをしっかりやって自分のポートフォリオを作成した人はちゃんと未経験から転職できているのを確認しています。年齢も今までの経歴も関係ないと考えています。

未経験で現場に入るために必要なのはシンプルに「この人はうちの会社に入ってもデザイナーとして動き始められそう」と思えてもらえられるかどうかです。

10年の現場経験

大手のメガベンチャー(旧 mixi)に新卒で入社して、黎明期のNewsPicks社に最初のプロダクトデザイナーとして入って上場を経験したり、鳴かず飛ばずのスタートアップ立ち上げ、フリーランスを経験して来ました。その中で、若手でも良いデザイナーというのは”自分で考えてアイデアを出して、デザインで現場を動かし良いサービスを作るのに貢献できる”人でした。

もちろん完璧にできている人ばかりじゃないといけないわけではないです。ただ、デザインを作るだけと考えていたり、作成したデザインアイデアに幅がなくチームに示唆を与えられなかったり、なぜこのデザインか?を伝えられないと、メンバーに貢献できず良いサービスづくりにつながるデザインがやりづらいです。

未経験のレベルでもこのポテンシャルがある。と思ってもらえるようなスキル開発が必要だと考えました。

実際に転職した人のポートフォリオを研究して作成

自分の現場経験からだと主観になってしまうので、実際に未経験で転職した人をnoteで検索したり、Vivivitのポートフォリオから探しました。そこで見えてきた共通項、つまり身につけるべきデザインスキル、ポートフォリオに掲載するアウトプットのクオリティをロードマップ作成に活かしています。

そこで見えた来たのは

  1. ユーザーヒアリングをしてデザインした、UXの基本スキルをやってみた経験がある
  2. 機能やサービスの主要画面のUIを全て自分でデザインした経験
  3. 基本的なビジュアルのスキル

この3つが見えて来ました。そしてこれらのスキルは現場に必要な”自分で考えてアイデアを出して、デザインで現場を動かし良いサービスを作るのに貢献できる”というものにも合致している考えました。

この3つはロードマップで身につけるべき基礎スキルになっていて、各コースに取り組むことで一通り経験することができます。

これらの考え方をベースに逆算してストレートに必要なスキルが身につけられるようなロードマップを構築しています。

3つのフェーズ旅をします

ロードマップは大きく3つのフェーズに分けられます。まずはデザインツールに慣れ、次に3つの基礎領域を体得し、最後にはポートフォリオを作成して採用活動を行います。

重要なのは、全てを一度で完璧に理解・習得することを目指すのではなく、何度も繰り返し学ぶことによって基礎を身につけることです。

3つの基礎を習得。ボスを倒して力を得よう

3つの基礎コースでは、各領域の基本的な知識やスキルを学びます。各コースを進むごとに、困難な課題(これをボスと呼びます)を解決し、新たな能力を身につけていきます。この基礎を体得することで、初めて真の意味でのUI/UXデザインの世界に足を踏み入れることができます。

このロードマップを進むことで、デザインに対する理解が深まり、具体的なスキルが身につきます。そして、それぞれのフェーズで学んだことを活かして、自分だけのデザインを創造し、それをポートフォリオとして形にすることで、UI/UXデザイナーとしての自身の価値を示すことができます。

未経験から始めるUI/UXデザイナーへの道のりは、決して平易ではありません。しかし、このロードマップがあれば、道筋が明確になり、必要なスキルを確実に身につけることができます。スキルを磨き、挑戦を続けることで、あなたもきっと素晴らしいUI/UXデザイナーになれるでしょう。

ロードマップ全体の流れ

▽フェーズ1:デザインツール習得

フェーズ1ではデザインの世界に足を踏み入れるためにデザインツールを学びます。

UI/UXではFigmaというデジタル上のデザインに強いツールが重要です。そのためこのFigmaの操作に慣れることをフェーズ1では目標にしています。

Figmaの基本的な使い方を習得する

具体的には、既存のUIをトレースしてデザインしながらFigmaの使い方を習得します。実際に作ることになるUIを題材にFigmaを学んでいくので同時にUIの勉強もできるのがポイントです。

→学べるシリーズ : Figmaの使い方入門 / Figmaの使い方初級

ゴール:1画面ゼロベースでUIをデザインしてみる

自分の力で初めてのUIデザインを作り上げるのをフェーズ1のゴールにしています。といっても全くゼロから生み出すことはまだやりません。デザインの基本は模倣です。既存のUIを調べて観察して自分でデザインすることを行います。

⏩ BONOでこのデザインを学べるコース:

はじめてのUIデザイン
https://www.bo-no.design/corse/uistarter

新しい環境やツールに慣れることは難しいかもしれませんが、新しいことを学ぶ楽しさを感じてみましょう。

▽フェーズ2:3つの基礎の習得

フェーズ2では本格的にUI/UXデザインを学びます。3つの基礎である「ビジュアル」「UX」「インタラクション」をコースに沿ってデザインしながら身につけていきます。

それぞれ関係はしているが新しい考え方のスキルになります。この3つが揃った状態ではじめてデザインを見る目が養われ、UI/UXデザインを正しく行うことができます。そのため3つの基礎を完璧に抑えるというよりかはまずは視点を得るためにとにかく量をこなして進めていくことを強く推奨しています。

以下の3つの基礎をマスターすることが目標に3つのコースに沿ってデザインしていきます。

  1. 基礎A:UIのビジュアルの基礎 - UIの見た目を構成する基本要素を学びます。サイズ、レイアウト、フォントなど、デザインの視覚的な側面を制御する方法を身につけます。このスキルを用いて、音声SNSアプリの主要UIを自分でデザインすることが最終的な目標です。
  2. 基礎B:UXデザインの基礎 - 顧客の課題やニーズに基づいたUIを設計する方法を学びます。ヒアリングからインサイトの抽出、そしてそれを基にしたアイデアの生成と具体化までの流れを経験します。このフェーズでは、特定の顧客の課題やニーズに対応するサービスをプロトタイプまでデザインすることが目標です。
  3. 基礎C:インタラクションの基礎 - このフェーズでは、特定の要件や目的に合わせた最適なUIをデザインする方法を学びます。出張申請サービスのデザインを通じて、このスキルを身につけることが目標です。

⏩ BONOでこのデザインを学べるコース:

基礎A : UIビジュアル基礎コース
https://www.bo-no.design/corse/uivisualstarter
基礎B : UX入門コース
https://www.bo-no.design/corse/uxbeginnercourse
基礎C : 情報設計入門コース
https://www.bo-no.design/corse/infomationarchitecturebignner

▽フェーズ3 : ポートフォリオ

フェーズ3は、これまでに学んだことを活用し、自分自身のスキルを具体的に示す作品を作り上げるステージです。ここでは、自分だけのオリジナルのアウトプットをデザインし、それを通じて、自分のデザインスキルを明確に示すポートフォリオを完成させます。これは、あなたがこれまでに身につけたデザインスキルを全て用いて自分のアイデンティティを表現する場所です。

そして、ポートフォリオの作り方については、特別に用意した動画があります。ここでは、ポートフォリオの役割、目指すべきレベル感、そして具体的なポートフォリオの内容のイメージなどを詳しく説明しています。

以上がUI/UXデザイナーへの道のりを照らすロードマップ全体の流れです。このロードマップを通じて、UI/UXデザインの世界を経験し、磨き上げられたスキルと自信を身につけることができます。新たな挑戦が始まりますが、このロードマップがあなたの成功に向けた確かな指針となることを願っています。

実物見せます!!未経験からUI/UXデザイナーになるポートフォリオのつくり方。ポートフォリオの作り方はこちらの解説動画を観よう。********https://www.bo-no.design/contents/portfolio-01

各フェーズの進め方

フェーズ1】デザインツールに慣れ、UIデザインをトレースから始める

「はじめてのUIデザイン」コース

  • ⛰目標:Figmaに慣れる/トレースと真似でアプリの主要画面を1度作る
  • 🔥ボス:「はじめてのUIデザイン」で連絡先追加UIをデザインする

まずはFigmaの使い方を身につけよう

デザインを扱う人になるためにはデザインツールの習得は必須になります。単純に作るためのツールだけではなく、自分の思考を具現化する”手の拡張”となります。(ハンター×ハンターでいうクラピカの鎖みたいなものです)デザインを始める際はまずここからスタートします。BONOではデジタル領域を対象にしているのでFigmaというツールを推奨しています。

まずはFigmaのシリーズを通して扱い方に慣れていきましょう。ツールは理解するというより使って慣れて行く方が100倍効率が良いと思います。とにかく動画の内容を真似して扱えるようになりましょう。

UIを真似して作ろう

Figmaに慣れてきたらUIのトレースをいくつかやってみましょう。普段見ているだけだったUIを自分自身で作る体験をいくつかやるとUIをデータに起こすという感覚に触れていけると思います。最初はなんか変な感じがしますが、デザインをはじめているという感覚です。

最後は「はじめてのUIデザイン」シリーズに取り組み、UIの仕組みを知りつつ連絡帳のアプリをマネしてデザインしていきましょう。最後にあるページUIを自分自身でゼロから作ろう!というボスが登場します。既存のアプリUIを自分で真似して完成させましょう。

マネすることまずは慣れていくのがとてもデザイン上達にとって有効です。その基礎をここで実践していきましょう。

ここまでを1-2ヶ月で行うのをお勧めします。

【フェーズ2】3つの基礎

UI/UXデザインを本格開始。3つの基礎を3つのコースで体得する

  • ⛰目標:3つの基礎を通る。マスターするのではなく、通る、体験する
  • 🔥ボス:3体の基礎課題を倒す - 音声SNSアプリ / 出張申請機能 / ヒアリングを通してサービスプロトタイプ をデザイン

基礎として通るべき3つの基礎スキルを通りましょう。UI/UXデザイン初心者にとって必須の基礎スキルです。これらの3つが揃うことで初めてUI/UXデザインを行う視点を得ることができスタートラインに立つことができます。

→ 3つの基礎スキルについてはこちらの記事をお読み下さい

基礎コースA : ビジュアル基礎コース

UIの見た目をデザインする基礎を学びます。見た目のデザインに関する基礎知識をつけながら実践して身につけます。コースの最後は「音声SNSアプリ」をデザインすることで、UIのビジュアルスキルの定着を行います。グラフィックデザインと被る部分もあるのでそこも一部やります

▼ 学べること

  • ゼロベースでUIの見た目をデザインする順番や考え方
  • UIビジュアル基本のスキル項目(簡易システム、サイズの決め方、配色など
  • UIに必須の3つの基本構造 - ナビゲーション/アクション/コンテンツ
  • UI特有の概念 - モードとモーダル、階層など

基礎A : UIビジュアル基礎コース
https://www.bo-no.design/corse/uivisualstarter

基礎コースB : UX入門コース

プロダクトの基本は顧客を主語にデザインしていきます。顧客が定まるからこそ、UIがどうあるべきかがデザインできるという”プロダクトUXデザイン”の基本を学んでいきます。習得の難しい分野ですが、実際に1人をヒアリングをしてその人のゴールや感情を理解してゼロからサービスのプロトタイプを作るお題を通してUXスキルの基本を習得します。

▼ UXデザインの超基本的なスキルを実践を通して学習します

  • 価値定義
  • 課題定義
  • 顧客定義
  • ヒアリング
  • プロトタイプ

基礎B : UX入門コース
https://www.bo-no.design/corse/uxbeginnercourse

基礎コースC : 情報設計基礎コース

“要件” : 定められたユーザー、ユースケース(サービスを扱うシーン)、内容に合致した具体的な形をUIに落とすことがUI/UXデザイナーとしてまず最も求められる能力です。要件からそれに合致するUIをデザインするやり方をこのコースでは学びます。コースで学んだことを使ってコースの最後には「出張申請ソフト」の業務系のアプリケーションをデザインします。

▼ このコースで学ぶことは以下のような内容になります

  • インタラクションデザインの基本
  • OOUI-オブジェクト指向UIデザインの基本
  • UIモデルの基本 - どういう情報がUIに必要かを整理する
  • UIのページ構成を考える基本

基礎C : 情報設計入門コース
https://www.bo-no.design/corse/infomationarchitecturebignner

【フェーズ3】ポートフォリオ作成→採用面接

  • ⛰目標:3つの基礎を使った3つのアウトプットをポートフォリオ用にデザインする
  • 🔥ラスボス:採用面接

採用面接を受ける際、相手に「私にはデザインスキルがあります!」を示す必要があります。デザイナーは専門職なので”どういうものをデザインしてくれるか”が伝わることで、相手もはじめて興味を持ち話をしようという気になります。そのため自分がデザインしてきたものをまとめた『ポートフォリオ』を作成する必要があります。

BONOロードマップでは3つの基礎をメインで通ります。この3つの基礎が現場で示すべきデザインスキルと同義です。なので3つの基礎で身につけたそれぞれのスキルをポートフォリオに載せるアウトプットで使い、自分のデザインをまとめる必要があります。

ポートフォリオの準備ができたら面接に挑む準備は完了です。ポートフォリオを共有しつつ、採用面接に挑みましょう。

学習スケジュールと勉強時間

ここでは、デザイン学習を効果的に進めるためのスケジュールの一例を紹介します。人それぞれ学習のペースは異なりますが、このロードマップがあなたの学習の目安となることを願っています。

全体の計画

このロードマップは、スキルを身につけて内定を得るまでの約1年間を想定しています。もしもあなたが仕事をしながら学習する場合は、平日は1日最低1時間、平均で2時間の学習時間を確保しましょう。また、休日の半分をデザイン学習に充てることをお勧めします。詳しくは**学習のコツ**もご参照ください。

フェーズ1:2ヶ月

最初の1ヶ月は、Figmaの使い方に慣れ、デザイン学習の環境を整えることに専念します。その後の1ヶ月では、UIトレースをベースに「はじめてのUIデザインシリーズ」を完了し、UIの作り方を学びます。

フェーズ2:8-9ヶ月

このフェーズでは、UI/UXデザインの3つの基礎を身につけることに焦点を当てます。ここが最も大変なステージとなるでしょう。各コースを約2ヶ月で完了する目安にし、最終アウトプットをデザインすることをゴールに設定します。ここでは完璧を目指すよりも、全てを終えることを重視しましょう。

フェーズ3:1-2ヶ月

最後に、あなたが身につけたスキルを活かしてポートフォリオを作成し、転職・就職活動を始めます。また、企業によっては未経験者の採用に対するスタンスが異なるため、多数の企業に応募することをお勧めします。

早くデザイナーになりたい方へ

もし1年間の学習時間を確保するのが難しい場合は、まずはポートフォリオ作成に集中しましょう。あなたのスキルを示す最善の方法は、質の高いアウトプットを作り上げることです。そのため、ポートフォリオ作成を重視したスケジュールを立てることをお勧めします。

面接やカジュアル面談を早めに受けてみるのもアリ

デザインの現場感を理解するには、直接経験するのが最善です。ポートフォリオがまだ完成していなくても、途中のアウトプットを元に面接やカジュアル面談を受けてみると良いでしょう。それによって、現場が何を求めているのか、また、どのような質問がされるのかを体験できます。これはあなたのやる気やモチベーションにもつながるはずです。

最後に、このスケジュールは一例に過ぎません。あなた自身の学習スタイルやペースに合わせてカスタマイズし、自分にとって最適な学習スケジュールを作成してください。

ロードマップを取り組むコツ

完璧を目指さない

デザインは細部にまでこだわれる分野です。しかし、そのこだわりが深まるほど、完成までの時間は無限に広がります。初めてのデザイン学習で完璧を求めるのは、難易度が高すぎます。そこで大切なのが、「3つの基礎スキルを早めに身につける」という考え方です。

基礎的な要素を理解することが大切です。3つの基礎要素が揃ってはじめて、より良い形でUI/UXデザインができるようになります。まずは、これらの基礎を理解し、手を動かすことから始めましょう。

期限を決めて進める

デザインは無限にこだわることができる分野ですが、それが良い結果をもたらすとは限りません。デザインスキルの向上は時間とのバランスが重要です。時間をかければかけるほど良いものができるわけではありません。

自分自身をデザインするように、学習の期間やスケジュールを計画しましょう。これにより、自分のリソースを最適に活用し、効率的に学習を進めることができます。

また現場でもタイムリミットは存在します。自分でデザインのスケジュールを組んで限られた中で最大限のデザインをするための方法を毎回決めることになります。その練習も兼ねて今のうちから自分で自分のデザイン作業を設計する癖をつけておきましょう。

ボス戦後に学びを文章でまとめるのはおすすめです

BONOでは文章で学習の記録を取りセーブデータを残して行くことをお勧めしています。
理由としては以下です。

  • デザイナーは現場で思ったより説明を求められます。言語化し、思考を整理して構造化するトレーニングを文章作成で積むことは、自分のデザイン力の向上に寄与します。
  • ポートフォリオとして機能します。最終的なアウトプットにはならなくとも、”過去にこういう学習をした”、”こういうふうに考えながらデザインしてきた”というパーソナリティや努力値は採用面接ではプラスに働きます。

無理に文章にする必要はありませんが、自分の振り返りも兼ねて文章を残しておくと、それが後々自分の財産/資産になり自分を助けてくれる時があるでしょう。

取り組む順番は守るべき?

  • 守らなくてOK。難易度順に並べているだけ
  • 興味のがあるものからやってしまって良い
  • 自分の状況を加味して道のりを設計しなおそう

以上です。楽しんでデザインを学んでいきましょう〜!

ロードマップのはじめ方コンテンツ

この記事はBONOロードマップを始めるために読むべきコンテンツです。
コンテンツの一覧はこちら。

  1. ロードマップの進め方
  2. UI/UXデザイナーに未経験からなる条件とは
  3. デザインスキルを身につける勉強法7つのコツ

UIUXデザイナーになる条件

7
UI/UXデザインの基礎スキルを身につけるロードマップの進め方
Text
UI/UXデザインの基礎スキルを身につけるロードマップの進め方

UI/UXデザインの基礎スキルを身につけるロードマップの進め方

未経験からUI/UXデザイナーになるには?3つの基礎の習得とポートフォリオ作成が必須
47:27
未経験からUI/UXデザイナーになるには?3つの基礎の習得とポートフォリオ作成が必須

未経験からUI/UXデザイナーになるには?3つの基礎の習得とポートフォリオ作成が必須

デザインスキルを独学で身につける勉強法7つのコツ
Text
デザインスキルを独学で身につける勉強法7つのコツ

デザインスキルを独学で身につける勉強法7つのコツ

独学を成功させる「目標瀬亭/計画」の立て方
13:15
独学を成功させる「目標瀬亭/計画」の立て方

独学を成功させる「目標瀬亭/計画」の立て方

ゴール:どうやったらUI/UXデザイナーになれる?
10:19
ゴール:どうやったらUI/UXデザイナーになれる?

ゴール:どうやったらUI/UXデザイナーになれる?

ゴール:3つのアウトプットが必要な理由=採用したい人がこうだから!
03:47
ゴール:3つのアウトプットが必要な理由=採用したい人がこうだから!

ゴール:3つのアウトプットが必要な理由=採用したい人がこうだから!

道のり:未経験からUI/UXデザイナーになるまでの勉強内容
https://vimeo.com/755390900
道のり:未経験からUI/UXデザイナーになるまでの勉強内容

道のり:未経験からUI/UXデザイナーになるまでの勉強内容

道のり①:ツールとUIに慣れる
03:39
道のり①:ツールとUIに慣れる

道のり①:ツールとUIに慣れる

道のり②:3つの基礎を体験する
12:12
道のり②:3つの基礎を体験する

道のり②:3つの基礎を体験する

道のり③:実践とポートフォリオと面接
03:46
道のり③:実践とポートフォリオと面接

道のり③:実践とポートフォリオと面接

スキル:未経験からUIデザイナーになるスキルってどれぐらい?
05:01
スキル:未経験からUIデザイナーになるスキルってどれぐらい?

スキル:未経験からUIデザイナーになるスキルってどれぐらい?

閉じる

0 Comments

Active Here: 0
Be the first to leave a comment.
Loading
Load Previous
Someone is typing...
No Name
Set
4 years ago
Moderator
(Edited)
This is the actual comment. It's can be long or short. And must contain only text information.
Your comment will appear once approved by a moderator.
Load Previous
No Name
Set
2 years ago
Moderator
(Edited)
This is the actual comment. It's can be long or short. And must contain only text information.
Your reply will appear once approved by a moderator.
Load More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Load More