シリーズ目次

UIUXデザイナーになる条件

7
1UI/UXデザイナーになるには
13:15
1UI/UXデザイナーになるには

1UI/UXデザイナーになるには

UIUXデザイナー転職で必要なスキルと要素は何?書類落ちしない条件をプロが解説
Text
UIUXデザイナー転職で必要なスキルと要素は何?書類落ちしない条件をプロが解説

UIUXデザイナー転職で必要なスキルと要素は何?書類落ちしない条件をプロが解説

【2025年版】未経験からUIUXデザイナーへ転職するロードマップ。プロが考えるスキル習得の流れ
Text
【2025年版】未経験からUIUXデザイナーへ転職するロードマップ。プロが考えるスキル習得の流れ

【2025年版】未経験からUIUXデザイナーへ転職するロードマップ。プロが考えるスキル習得の流れ

2. UI/UXデザイン学習ゴール
13:15
2. UI/UXデザイン学習ゴール

2. UI/UXデザイン学習ゴール

UIUXデザイン学習ゴール:スキルとポートフォリオの具体イメージ
10:19
UIUXデザイン学習ゴール:スキルとポートフォリオの具体イメージ

UIUXデザイン学習ゴール:スキルとポートフォリオの具体イメージ

未経験からUIUXデザイナーに転職するのに必要なスキルってどれぐらい?
05:01
未経験からUIUXデザイナーに転職するのに必要なスキルってどれぐらい?

未経験からUIUXデザイナーに転職するのに必要なスキルってどれぐらい?

3. UIUXデザイン学習の進め方
13:15
3. UIUXデザイン学習の進め方

3. UIUXデザイン学習の進め方

UIUXデザイナー転職学習ゴール:3つの基礎が必要な理由
03:47
UIUXデザイナー転職学習ゴール:3つの基礎が必要な理由

UIUXデザイナー転職学習ゴール:3つの基礎が必要な理由

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

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

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

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

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

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

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

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

3. UIUXデザイン学習の進め方
13:15
3. UIUXデザイン学習の進め方

3. UIUXデザイン学習の進め方

現場10年目が教える、未経験からUIUXデザインを勉強する7つのコツ
Text
現場10年目が教える、未経験からUIUXデザインを勉強する7つのコツ

現場10年目が教える、未経験からUIUXデザインを勉強する7つのコツ

デザイン学習の成功率UP「目標設定」のつくり方
13:15
デザイン学習の成功率UP「目標設定」のつくり方

デザイン学習の成功率UP「目標設定」のつくり方

トップ
/
UIUXデザイナーになる条件
/
【2025年版】未経験からUIUXデザイナーへ転職するロードマップ。プロが考えるスキル習得の流れ
デザイン上達法

【2025年版】未経験からUIUXデザイナーへ転職するロードマップ。プロが考えるスキル習得の流れ

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

UI/UXデザイナーになる道のり

こんにちはカイクンです、寒くてしもやけが大変です。
この記事では、現場経験10年以上の私が運営する、UIUXデザイナーへの転職実績が約50人あるBONO(ボノ)が考える、未経験からUI/UXデザイナーを目指す際の全体像を示します。

まず、ゴール地点として「クライアントや企業が求めるUI/UXを設計できる人材」になる姿をイメージし、そこに至るまでの学習プロセスを俯瞰します。

BONOではこのロードマップの考えを元に「UIUXデザインコース」を作成し、未経験からデザイナーを目指す人や、UIUXの現場経験が浅いプレイヤーが基礎力をつける機会を提供しています。
BONO - UIUXデザインコース
→ロードマップをカリキュラムに落とした、未経験からでもUIUXデザインの基礎が身につくコースです
https://www.bo-no.design/rdm/roadmap-uiuxdesigner

📕この記事の目次

  1. UI/UXデザイナーになるロードマップ全体像
  2. フェーズ1.デザインを始める:基本ツール習得とマインドセット
  3. フェーズ2. UIUXの3つの基礎を押さえる(ポイント重視)
  4. フェーズ3:ポートフォリオにまとめよう
  5. フェーズ4:UIUXデザイン転職活動へ
  6. まとめ:継続的な学習とスキルアップへ

UIUXデザインロードマップの全体像

BONOが考えるロードマップの全体像は以下のような流れと内容を考えています。これらを行いスキルを身につけることで、与えられた要件や課題に対して、UIの形を考え提案できる最低限のスキルが身につくと考えています。

ロードマップの全体と想定期間

この記事で紹介するロードマップの全体は以下のような流れです。
学習期間の目安は週12時間以上を最低デザイン学習の時間に当てれることを想定しています。

○ フェーズ1)デザインをはじめる

期間:1-2ヶ月目

  • デザインツール「Figma」の習得
  • デザインの基本知識
  • デザインをする基本スタンス

○ フェーズ2)UIUXの3つの基礎理解

期間: 6ヶ月

  • インターフェースの基本
  • 情報設計の基本
  • 顧客理解と課題解決の基本

○ フェーズ3)ポートフォリオ作成

期間:1ヶ月

  • 基礎理解で作成しているものを基本的にはベースにして、アピールするアウトプットを仕上げていきます。

○ フェーズ4)転職活動(応募・面接)

期間:1-2ヶ月

  • 応募してスムーズに採用まで行くのに1社大体1ヶ月ほどかかることを念頭におきましょう。複数の会社に応募したり途中でうまくいかないこともあると思うので1~2ヶ月を目処に書いています。

ロードマップで目指すデザイナー像とそのレベル

このロードマップで目指すスキル像はただ言われたものをUIにするようなデザイナーではありません。現場に入ると事業貢献を求められます。そこにUIデザインを通して貢献できる素養がある基礎レベルを目指します。また、未経験から現場に入る人も想定をしているため継続的に学習していける学習素養や、問題なく意思疎通を現場のメンバーと行うコミュニケーションスキルの習得も視野に入れています。

目指すレベルの6つの特徴

①顧客視点を持ち、課題解決を軸にデザインする素養がある

②必要最小限のデザインツール操作に習熟している

③顧客にとっての“使いやすさ”を設計する基礎的なUI情報設計スキルがある

④基礎的なUIパターンとガイドラインを理解している

⑤制作過程や意図を言語化・共有できる

⑥現場メンバーの考えを理解し意思疎通できるコミュニケーションスキルがある

⑥継続的な学習意欲と業界トレンドのインプットが欠かせない

現場に迎え入れても良いUIUXデザイナーとはどういうものなのか?についてはこちらの記事をご覧ください。

書類落ちしない、UIUXデザイナー転職で見られる要素と最低限のスキル
https://www.bo-no.design/contents/rdm-howtobeadesigner

フェーズ1. デザインを始める:基本ツール習得とマインドセット

このセクションでは、まずFigmaといった基本的なデザインツールの操作から始めます。未経験者が最初に覚えるべきは、画面作成の流れやパーツ配置、プロトタイプ設定など、最低限の機能理解です。UIをツールを使ってデザインする方法から始めてデザインツールに慣れることから始めましょう。

加えて、デザイン自体の基本スタンスも重要です。たとえば、グラフィックデザインの基本である色・余白・タイポグラフィといった基本要素や、上達するデザイン制作の基本の流れを1度通っておくと、デザイン学習に対するイメージを持ちやすいでしょう。

ここでの目標は、いきなり高度なUIUX理論に突入するのではなく、「手を動かしながら学べる環境」をつくること。ツール操作と基本的な視点を身につけることで、次の段階であるUIUXの3基礎を理解する土台ができます。

ロードマップのフェーズ1の全体像の画像

フェーズ1で目指す状態

○ FigmaでUIをデザインできるようにする

  • UIデザインツールの定番、Figmaの操作に慣れてUIを作れるようになりましょう

○ デザイン学習の基礎を抑える

  • UIUXの基礎スキルに入る前に、デザインの基本原則とデザインスキルを身につける上でのスタンスを習得してデザインスキルを身につける土台を固める

○ UIUX学習のゴールを持つ

  • UIUXデザイン学習のゴールは「ポートフォリオを作ること」です。基礎を身につける目的もまずはそこがゴールになるため、本格的なUIUXの学習に進む前にそのゴールをイメージを持ちましょう。

習得1.】Figmaの基本操作を習得

Figmaを使いこなして、UIデザインの下地を固めよう!

UIデザインの学習を始めるにあたって、ツールを使えることはとても大切です。UIやWebサイトのデザインに最適なFigmaの使い方に慣れるところからはじめましょう。

このパートのゴール:

  • **Figmaの使い方に慣れよう:**まずはFigmaの操作に慣れるところから始めましょう。UIをトレースしながらで良いのでUIの見た目をFigmaで再現しながら基本的な使い方を覚えて慣れていくのが効果的です。機能もオートレイアウトとプロトタイプ機能までは最初のうちに使えるようになっておきましょう
  • **UIを作れる実感を得る:**UIが完成した達成感と、将来の仕事にどうつながるかが少しずつ見えてくるようになり、モチベーションが高まります。これから本格的にデザイン、UIUXをやっていく上でもツールの操作ができているとスムーズに進むことができます。

Figmaの基本操作を身につけよう

  1. UIトレースで基本操作に慣れる
    • 他のサービスのUIを真似してみる「UIトレース」は、ボタンやレイアウトを模倣するうちに自然と機能を覚えられる定番の学習手法。
    • 色やテキストスタイルを何度も設定していくうちに、ショートカットキーなども体感的に身につけられます。
  2. オートレイアウト機能を覚える
    • Figmaのオートレイアウト機能の使い方を身につけましょう。オートレイアウトはブロックの作り方やその余白などをシステマチックに管理できる機能です。実際にコードを書いて画面レイアウトを組むときの仕様そのままの機能になります。オートレイアウトで全てを組める必要性はすぐにはありません。ただオートレイアウトの考え方でレイアウトを組めていることはそのままコードの形でも問題なく組めるレイアウトを行っているし、UI構造に乗っ取った見た目を構築することにつながります。早めに覚えて慣れておきましょう
  3. プロトタイプの扱いを覚えて、動きのあるUIを作る
    • Figmaにはクリックして画面を遷移を擬似的に表現して確認できる「プロトタイプ機能」があります。UIは絵ではなく操作して体験することが主な目的です。そのため、プロトタイプ機能で画面遷移を設定して“実際の使い心地”をテストすることがUIのクオリティにもつながります。

Figmaの基礎が学習できるコンテンツ

BONOの「UIUXデザインコース」ではこのパートのスキルは以下のコンテンツで身につけることを計画しています。またBONOのYouTubeでもFigmaに関するナレッジの紹介をしています。

これらは完全無料でYouTubeチャンネルを使って提供しています。ガンガン見て使ってください。

  • 『Figma入門』:完全無料です。Figmaをこれから始める人向けに、トレースを中心にしながらデザインしながら基本的な使い方を覚えられるチュートリアルです。最初の1歩にぜひどうぞ。
  • 『Figma初級』:完全無料です。オートレイアウトとコンポーネント機能の使い方をTwitterのデスクトップUIをトレースしながら紹介しています。実際のUIを作る時になぜ、どうこの機能を使うのか?を理解しながら使い方を身につけられます。
  • 『オートレイアウト解説動画』:オートレイアウトの仕組みについて解説した動画です。無料。
  • 『ショートカット解説動画』:Figmaの速度を上げるには慣れもありますがショートカットに慣れていくのがおすすめです。その解説をしています。無料。

【習得2】デザインの基本とスタンスを得る

デザインの4原則、上達方法、制作の基本、UIUX学習のゴールを抑えよう

UIデザインを始めたばかりの段階で、いきなり独創的な作品を目指すのはハードルが高いもの。実はプロのデザイナーも、定番の配置や色使いを活用して「見やすさ」「使いやすさ」を担保していることが多いのです。それをどう学ぶか?理論だけではなく世の中の”ふつう”のデザインを真似したり、制作を重ねることで学習しアウトプットのクオリティが上昇していきます。

このパートでは、基本となるデザイン原則を押さえつつ、いわゆる“ふつうのUI”を真似することや、UIに限らないデザイン制作の基本の流れを身につけることをを目標にします。

また、最終的なUIUX転職に必要なゴールを認識することでロードマップに必要なスキルの意味や最終目標を理解して効率をUPさせておきましょう。

このパートのゴール:

  • デザインの基本原則、盗み方、制作の流れ : 文字の読みやすさや余白の取り方など、基礎的な美的ルールを理解して“定番UI”を作り込めるようになる。また「ふつうのUI」を真似して世の中のデザインから盗んで学習する姿勢が大切です。最初から独創性を追いかけるよりも、成功事例を自分の中に落とし込むことで成長を早める。そして最後にデザインを作って検討する基本的な流れを知って自分で実践できるようになりましょう。
  • **UI/UX学習のゴール把握:**転職するならポートフォリオが必要、最終的にどんなことをアピールする必要があるのか?をUIUXの本格学習に進む前に把握しておこう

デザインの基本とスタンス「4つのポイント」を身につけよう

  1. デザイン基本原則をインプットしておく
    • デザインの4原則の習得: 表現デザインの基本であるデザインの4原則について学んで基礎的なデザイン表現の法則を学びましょう。
  2. 「ふつうのUI」を真似して上達するスタンスを持つ
    • 参考デザインから盗む方法: UIデザインは「構造」「機能」「見た目」の3要素に分解してデザインを参考にすると扱いやすいです。その盗む目の基本や、UIを普段から見ておくためのデザインの探し方を把握して、日頃からデザインを吸収できる土台を作りましょう
  3. デザイン制作の基本の流れを知っておく
    • 参孝リサーチ → ラフ設計 → パターン出し → 検討評価 → ブラッシュアップ: デザインを作る時は最初はアイデアを広げて徐々に収束する形で検討していくのが基本です。こうすることで適切なアイデアをまず模索し、正しい方向性の表現の質を高めて仕上げていく基本が身につきやすいです。また自分で自分のデザインを評価するスキルを磨くことはデザインを見る目の向上にもつながる大切な要素です。
  4. UI/UXデザイナー転職のゴールイメージを知っておく
    • ポートフォリオ: 実際に作ったUIやプロセスをまとめて公開することで、自分の強みをアピールできる。採用に応募する時に必須になるもの。デザインスキルは採用の足切り要素として機能します。
    • 会社や必要スキルの理解: 制作会社なのか、事業会社なのかなどの会社の特徴や、テック業界の会社を知る方法、またロードマップの元になっている、どういうスキルや内面が採用では評価されるのか、未経験者は特にどういう工夫があると受け入れやすいのかを理解しておくと、学習しながら採用で見せるスキルや素材を貯めながら計画的に学習できる確率が上がります。

“デザインの基本とスタンス”に役立つコンテンツ

BONOの「UIUXデザインコース」ではこのパートのスキルは以下のコンテンツで身につけることを計画しています。

次のステップ

ここで固めた「デザインの基本」「ふつうのUI」「ゴールイメージ」の3つは、今後の学習で何度も役立つ土台になります。

引き続き、UI/UXの3基礎(インターフェース、情報設計、課題解決)を身につけるフェーズへ進みましょう。定番の手法や考え方をベースに、自分のアレンジを効かせられるようになったとき、UIデザインの面白さがさらに広がっていきます。

フェーズ2.UIUXデザイン3つの基礎を習得

ここでは、UIUXを理解するうえで欠かせない3つの基礎要素をコンパクトに紹介します。1つ目は「インターフェース基礎」で、ユーザーが迷わず操作できる画面要素や一貫性・視認性の確保、基本的なUIパターン理解を示します。2つ目は「情報設計基礎」で、ユーザーが求める情報を適切に構造化し、流れを設計する考え方。3つ目は「課題解決基礎」で、ユーザーの課題を発見し、改善策を発想・検証する流れを学びます。ここでは詳細な理論で圧倒しないよう、キーポイントを示すに留めます。深い学習は別記事や学習リソースへつなげ、まずは「UIUXはこの3軸で考える」と理解できれば十分です。

ロードマップフェーズ2の全体像の画像

このフェーズで目指す状態

○ UIを使って顧客の課題解決をするための、最低限必要な「3つの基礎」を習得する

  • UIデザイナーの役割はただ言われたことをUIにするだけの作業的なデザイナーではありません。デザインを武器に、ユーザーが価値を感じるデジタル上の体験を設計するために仕事をすることになります。価値をUIを通して実現するために「3つの基礎」が必要だと考えています。
  • インターフェースの基礎:これはUIの見た目をつくるためのUIデザインの基本になります。UIの見た目を構築する「UIビジュアル基礎」と、UIを操作して基本的な体験を実現する「UI操作の基礎」の2つに分けて考えていきます。
  • 情報設計の基礎:ユーザーはこういうことをしたいからこういう操作や処理をする必要がある、のみがある状態からUIのアイデアを出して体験をデザインする基本を身につけます。実際の業務に最も近い内容です。ユーザーや現場の課題や要件、やりたいことをベースに、そのユーザーにとって使いやすいUIとその体験の形を具体化していくUIデザインの手法です。
  • UXデザインの基礎:顧客のことを理解して顧客の課題を解決するための体験をデザインする基礎を身に付けます。ただUIを作るのではなく”なんのために”、”誰のため”のUIなのかを考えるには、顧客そのものの理解をする経験が不可欠です。少し上流の考えでUI制作からは遠く感じるかもしれませんが、自分が作るUIが誰の何のためになっているのか?を身につける体験設計、課題解決の基本を学びます

【習得1】インターフェース基礎

インターフェース基礎を押さえて、使いやすいUIを実現できるようになろう!

UIデザインを学び始めたばかりの方にとって、最初の大きなハードルになるのが「インターフェース基礎」です。画面をどう構成するのか、ボタンやナビゲーションをどこに置けばユーザーが迷わず操作できるのか、そもそもUIの見た目をどう考えて構築するのか…そんな疑問を解決する土台となるのがこのパート。ここをしっかりと理解しておくと、後から出てくる高度な情報設計やUXデザインの学習もグッとラクになります。

インターフェースの基礎の全体像

このパートのゴール:

  • 理解を確認するためには実際にUIを作りデザインすることが必要です。これらの基礎を使って「SNSアプリ」や「Todoサービス」の基本機能をすべてデザインすることで基礎概念を使用したUIデザインを1度自分で実践できます。理解が深まるでしょう。
  • UIは絵ではなく操作してある体験を提供することで初めて意味を持ちます。なのでこのパートでは基本的な操作をするUIを自分で作れるようになること。そのための基礎知識を身につけて実践しアウトプットすることをテーマにします。

インターフェースの基礎「3要素」を身につけよう

以下の3つを身につけて、”ふつう”のUIの仕組みを学びつつ習得することがゴールです。

①UIを構成するビジュアルの基礎

  • UIの見た目の構成要素:フォントや色、要素の大きさ、余白の取り方など、ビジュアルデザインの仕組みをUIデザインのケースで、仕組み化してコントロールする基本を学びましょう。見た目を構成する要素を1つずつ習得することで、UI自体を見る目の解像度が高まります。
  • 要素の因数分解;タイポグラフィ / 配色 / 余白 / ディスプレイとスクリーンサイズ / 構造・ブロック / 階層 /

③UIの状態変化の基礎

  • 基礎状態変化:エラー表示やホバー時の反応など、ユーザーの行動や状況に応じてUIが変わる場面もあります。こうした”状態”で変化するUIの基本を習得しましょう
  • 「新規作成」「閲覧」「編集」「削除」:よくある操作パターンで変化するUI表現について学びましょう。
  • コンポーネント:また状態変化に合わせてUIの「コンポーネント」という概念の基本についても学びましょう。コンポーネントとはソフトウェア上でUIパーツを使い回す概念のことです。この利点や、違う画面でも同じ役割や状態を示すUIについて学びましょう

②UIの操作の基礎

  • UIの操作の基礎:UIは絵ではなく操作する体験を形作って初めて意味をなします。そのUI操作に必要な基礎概念について抑えましょう。
  • UIとモード:ソフトウェアの操作中に”ある状態に集中する”状態をユーザーに与える「モード」という基礎概念について理解しましょう。主に「作成↔︎閲覧」モード、「選択」モードなどを例にBONOでは理解して行きます。
  • UIとナビゲーション:ユーザーに現在地や前にいた場所、サービス内で可能な操作など、機能のヒントを与えるために重要な「ナビゲーション」について学びましょう。基本的な役割とナビゲーションパターンをBONOでは抑えて行きます。
  • UIとアクション:UIにおける”アクション”の概念について学びましょう。適切なアクションの配置や、操作する対象の”オブジェクト”と操作ボタンの位置関係など、基本的に使いやすいアクションについて学びましょう。

インターフェースの基礎を身につけられる解説&実践コンテンツ

BONOの「UIUXデザインコース」ではこのパートのスキルは以下のコンテンツで身につけることを計画しています。

  • 『ゼロからはじめるUIビジュアル』:UIの見た目を構築する基本と、基本アクションの参考の仕方デザイン方法を実践を通して身につけます。一部無料。
  • 『UIビジュアルの基礎』:UIの見た目を構成する基本要素をダメなUIをリデザインしながら身につけることができます。一部無料。
  • 『使いやすいUIの秘密』:UI操作の基本であるモード/アクション/ナビゲーションなどの基礎要素をNGデザインをリデザインして身につけられます。半分ぐらい無料。

【習得2】情報設計の基礎

情報設計の基礎を押さえて、顧客に寄り添ったUIを実現できるようになろう!

UIデザインで画面の見た目だけ作れるようになっても意味がないです。実際の業務では、「提供するサービス機能をどう画面に落とし込むか?」「ユーザーはどんな操作がイメージしやすいか?」を考えてUIのアイデアを操作の流れと一緒に考えて行きます。つまり、要件や課題をクリアにし、それをUIにきちんと反映させていく力がとても重要です。

このパートでは「要件 → UIのアイデア → ユーザー体験」という流れを筋道立てて考える方法を身につけます。ここをしっかり学べば、プロダクト開発の要望を“使いやすい画面”に落とし込む基礎ができあがり、より実践的なUIデザイン力が養われます。

情報設計の基礎の全体像

このパートのゴール:

  • 「要件をもとにUIアイデアを具体化する」フローを通じて、ユーザーにとって最適な操作や画面構成を導き出せるようになる。なぜそのUIが必要なのか?をユーザー・要件を軸に論理的に考えるデザインフローを習得することに繋がります。
  • 少し複雑なソフトウェアのアイデアを、機能アイデアだけの状態から、ゼロから自分で作成することで、ユーザーと要件を満たすUI作成の流れを身につけることができるでしょう。

情報設計の基礎を身につけよう

① UIモデリング

  • **UIの要件定義:要件を理解→分解しUIに落とす整理するやり方を身につけよう。**作るべき機能の内容だけを考えるのではなく、ユーザーを主語に「ユーザーが何をしたいのか」「何に困っているのか」「どういう操作が必要か」を整理し、それを叶えるために必要な、ユーザーの行動の流れや画面に必要な情報などを洗い出します。
  • **OOUI(オブジェクト指向UIデザイン):**画面を単に“ページ”として見るのではなく、“ユーザーが扱うオブジェクト”に着目して整理すると、機能や情報の優先度をより論理的に決められます。UIの情報設計の基本でオブジェクト中心のやり方を学びましょう

② UIプロトタイピング

  • **プロトタイピング概念の理解:**デザインの強みは完成・リリースする前に具体的な形を作って効果的かどうかを検討できる、点です。40%〜ぐらいの完成度で、達成するべき要素を満たせる具体的な形をパターンを作って検討することを「プロトタイピング」と呼びます。そのデザインフローを学びましょう。
  • **ユーザーの行動フローの可視化:**UIの要件定義で整理した必要な情報を、ユーザーが実際に操作する形に落としましょう。「A画面で入力 → B画面で確認 → C画面で完了」などの遷移や画面同士の関係を”具体的に”洗い出し、問題点があれば早めに修正します。
  • **UIプロトタイプの作成:**UIアイデアをラフにまず形にし、自分や他の人が触ってテストできる状態を作りましょう。要件を整理して得られた情報を元に、今の方向性で機能を満たせるのか?を具体的に検証しながらUIのクオリティ高めていくデザイン制作の流れを身につけましょう。

情報設計の基礎が身につけられるコンテンツ

BONOの「UIUXデザインコース」ではこのパートのスキルは以下のコンテンツで身につけることを計画しています。

  • 『ゼロからはじめる情報設計』:要件を元に、UIの要件定義を作成してUIアイデアに落とす流れを解説して実践できるコンテンツです。要件からユーザーのやりたいことを考えどういうUIにするべきかを考える手法を身につけられます。一部無料。
  • 『OOUI コンテンツ中心のUI設計』:UIの情報設計の基本であるオブジェクト指向を学んで実践できるコンテンツです。オブジェクト中心にUIを設計して操作しやすいUIをつくる考え方を習得します。一部無料。
  • 『UIデザインの基本』:ユーザーの行動に沿ってUIのパターンを作ってプロトタイピングする流れを実践しながら学ぶことができます。一部無料。

【習得3】顧客理解と課題解決の基礎

顧客に価値を提供するデザインの基本を身につけよう

UIデザインと聞くと、どうしても「画面づくり」や「操作性」に目が行きがちです。もちろん使いやすいUIは大切ですが、”使いやすい”はユーザーにとって価値のあるモノである前提のはずです。

ビジネスの現場では「顧客の課題を解決し、顧客にとって価値あるサービスを提供する」ことに向かってデザインを使ったりUIを作るという視点が何より重要です。

このパートでは、UIをただの“見た目”に終わらせないために、顧客のニーズや抱えている課題をしっかり捉え、それを解消する体験デザインへと落とし込む基礎を学んでいきます。非常に難易度の高いスキルで他のスキル同様に完璧に身につけることは求めません。

ただ“顧客が喜ぶサービス体験”を生み出すための顧客中心のデザインの考え方を1度体験することが重要です。
この基本を身につけて、顧客を理解して、課題解決をする素養を身につけることがこのパートのゴールになります。

顧客理解・課題解決の基礎の全体像

このパートのゴール:

  • **体験デザインの基本:**顧客の課題と価値の関係を理解し、UIを超えたサービス体験をデザインできるようになる。「なぜこのUIが必要なのか?」「そもそも顧客がなりたい状態は何か?」を整理し、自分のデザイン、UIが、”誰”の、”何のため”に存在するのかを理解しましょう。。
  • **顧客理解の基本:**インタビューやリサーチを通じて、課題を具体的に把握し、解決策を提案するプロセスを体験する。UIのデザインそのものより、一歩上流の“顧客を理解する”プロセスが大事だと気づけるようになる。
  • **顧客の課題を起点にしたサービスをデザインする:**体験デザインと顧客理解の基本を論理で理解することはとても抽象度が高く難しいです。そのため、その基礎知識と進め方を使って、1度自分で課題を解決するようなサービスや機能をデザインしてみるのが有効です。

体験デザインと顧客理解で、課題解決の基礎を身につけよう

  1. 体験デザインの基本
    • **UXデザインの基本:**UXデザイン=単なる使いやすさ、ではありません。UXデザインもかなり広くBONOでは3つに分解しています。「プロダクトのUX」、「顧客体験のUX」、「戦略のUX」この3つに分けています。単なる操作しやすいUXはプロダクトUXで情報設計までの基礎で考えるべきことです。ユーザーにとって良い体験を作るための「顧客体験のUX」についてこのパートでは学びます。
    • ゴールダイレクテッドデザインの考え方: AboutFaceに紹介されるゴールダイレクテッドのフレームワークをもとに、顧客の抱える課題→価値→体験の関係性を学びましょう。何でもかんでも課題ではなく、ユーザーがなりたい状態にとって邪魔している優先度が高いものが”課題”になります。それを解決する体験を提供していくのがUIデザインの目的です。この関係性を顧客を軸に、体験価値として認識する基礎を身につけましょう。
    • 実践形式で理解: 自分のサービス想定を作り、顧客インタビューなどを通して価値を形にしていくフローを身につけましょう。
  2. 顧客価値と理解の基本
    • 顧客を“知る”重要性: そもそもユーザー本人に質問をしなければ、本当の課題は見えてきません。基本的なインタビューの流れやヒアリングシートの作り方を学びましょう。
    • 課題とは何か?: 何を困りごとと捉えているのかを丁寧に引き出すことで、UIがどのように課題解決に寄与できるかを明確にします。
    • **ユーザーインタビューの基本:**アンケートではなく対面でユーザーのことを知る重要性と、対面インタビューのやり方の基本を学び実践してみましょう。インタビューするべき内容の立て方、インタビューのやり方、まとめ方などをBONOではテンプレートの型を使って学習と実践することが可能です。

顧客理解と課題解決の基礎が身につけられるコンテンツ

BONOの「UIUXデザインコース」ではこのパートのスキルは以下のコンテンツで身につけることを計画しています。

  • 『顧客体験デザインの基本』:ユーザー中心とは?ユーザーが価値を感じる課題解決とは?それを生み出す基本の考え方とは?を学ぶ内容です。About Faceという本に紹介されるゴールダイレクテッドデザインをベースに学んでいきます。
  • 『はじめてのUXデザイン』:ゼロからサービスを作る流れを実際に見ながら、どういうふうに顧客を理解して、課題にヒットする解決策をUIにしていくのかを学びます。実際にインタビューする様子も確認することができます。
  • 『はじめてのユーザーインタビュー』:ユーザーインタビューのやり方を、準備、実施、まとめの全フロー見ながら学ぶことができます。顧客の現状を理解して、課題を発見するインタビューのやり方を学びましょう。
  • 『UXデザインって何』:UXデザインってそもそもなんなのか?を理解する基礎コンテンツです。無料で閲覧することができます。

▼ 次のステップ

習得した3つの基礎は”基本的なUI制作の流れ”になっています。つまりデザインツールからはじめ、この3つの基礎を身につけた状態で、はじめてUIをまとめにデザインする力を得られたことになります。このスキルを使って、次にポートフォリオに乗せるアウトプットを作成して行きましょう。すでに基礎習得の中で作成したアウトプットがあるのであれば、時間がたった今見ると改善できる部分が見つかるでしょう。

今まで学んで身につけたスキルを使って採用でスキルを示すことができるポートフォリオ作成に移って行きましょう

フェーズ3:ポートフォリオをつくろう

基礎スキルが伝わるポートフォリオを作成しよう

基礎理解をアウトプットに落とし込んで、デザイナーとしての強みを可視化!

UIUXを学んできたら、次に待っているのは「実際に何ができるのか?」を示すためのポートフォリオ作成です。これはあなたが持つスキルや思考プロセスを、採用担当者やクライアントに分かりやすく伝えるための必須ツール。

本フェーズでは、インターフェース基礎・情報設計・課題解決の3つの基礎を活かしたアウトプットを具体的に形にしていきます。同時に、ただ作品を並べるのではなく、「なぜそうデザインしたのか」「どんな意図や改善策を考えたのか」を簡潔に言語化する力も身につけるのがポイントです。

このフェーズで目指す状態

最低3つのアウトプットを完成させる

  • UIUXの3つの基礎を示すアウトプット:アウトプットが少ないと再現性が分かりづらいため、最低3つのアウトプットを目指しましょう。複数の例があることで、あなたの思考パターンや強みがよりハッキリ見えます。また、その思考プロセスも言語化してデザインを説明する力やデザインの理解を示しましょう
  • **“どんな人物なのか”が伝わる:**スキルだけでなく、経歴・学習スタンス・チームで働くときの姿勢などもポートフォリオで表現しましょう。採用する側はスキルが高いだけではなく一緒に仕事ができるかなどの要素も評価の対象になります。

ポートフォリオに載せるべき必須項目

  1. アウトプット
    • インターフェース基礎スキルの作品: 配色やボタン配置など、基本的なUIの見せ方が分かるもの。
    • 情報設計基礎スキルの作品: ワイヤーフレームやサービス構造を視覚化した資料など。
    • 顧客理解&課題解決のスキルの作品: 課題を発見し、UIで改善したBefore/Afterの比較など。
  2. 自分自身の紹介
    • 経歴や学習の背景: どんな環境で、どのようにデザインを学んできたのか。今までのキャリアはどういう特徴があるのか
    • デザインへの考え方: 「なぜデザインが好きなのか」「どんな分野に興味があるのか」「どういうデザインをしていきたいのか」などをブログでもポートフォリオ上でも良いのでまとめましょう
    • 成長意欲が伝わるエピソード: 失敗や挫折をどう乗り越えたかなど、ポテンシャルを示すエピソードがあると印象的。

“UIUXポートフォリオ作成”に役立つコンテンツ

BONOの「UIUXデザインコース」ではこのパートのスキルは以下のコンテンツで身につけることを計画しています。

次のステップ

ポートフォリオの内容が固まったら採用応募のフェーズに進みましょう。ポートフォリオ自体はいつまででもクオリティを高めるために時間を使えますが、応募しないと採用されるものもされません。自分で締め切りを作りその範囲でクオリティUPにフォーカスして、次の採用応募のフェーズに進みましょう。

フェーズ4:UIUXデザイン転職活動へ

ポートフォリオが完成したら、いよいよ企業リサーチと応募開始!

ポートフォリオを仕上げたら、あとは実際に転職活動を進めるのみ。しかし、UI/UXデザイナーを募集している企業は思ったよりも多くはありません。特に未経験からの挑戦の場合、いくつかのハードルを越える必要があります。このフェーズでは、**「どれだけの企業に応募すべきか」「興味のある会社の見つけ方」**など、実践的なノウハウを紹介します。

最低30社以上への応募を視野に入れよう

  • 未経験可の企業は少ない「未経験歓迎」と明示している会社は実際はかなり限られています。企業側がデザイナーを採用できる枠も少ないため、そもそも募集枠そのものが少ないのが現状です。
  • 30~50社はトライするのが基本線企業ごとに求めるスキルや強みは異なるため、母数を増やすことで“タイミングや方向性”の合う企業に出会いやすくなります。とくに未経験の場合は“まず話を聞いてもらう”ハードルが高いため、数をこなすことでチャンスを見つけましょう。

なぜそこまでたくさんの会社を受ける必要があるのか?

  1. **未経験枠が公開されているのは少ない:**知名度の高い企業はスキルのある中途デザイナーが自然と集まるため、未経験枠を設ける必要性が薄い。デザイナー採用に苦戦している企業もわざわざ”未経験”を出すとレベルの高い人が応募しづらいので特別出すことは稀。そのため未経験を表で表示してない企業にも応募することで、実は募集している可動化を確認する必要があります。
  2. **会社の状況やタイミング次第:**デザイナー枠が埋まってしまうと募集を打ち切るケースも。内情は外からは見えづらく、こちらから探るのも難しい。
  3. マッチする企業は意外と少ない認知度の低い企業ほどデザイナーの採用に苦戦しがちで、未経験でも育てたいと思ってくれる確率が高い。しかし、そんな企業を自力で探し当てるにはある程度の件数に当たる必要があります。

入りたい会社を探して分析しよう

とりあえず応募数が必要とはいえ、「どんな会社でもいいので雇ってください…」というスタンスだと魅力は半減しますよね。恋愛にたとえるなら“誰でもいい”という人は、なかなか選ばれないのと同じです。なので自分で入りたい会社、自分の経験や興味と相性の良さそうな会社などを調べて、能動的にアプローチすることは必須です。

  • **企業”をリストアップ:**まずは自分が“興味を持てる会社をリストアップしましょう。「自分の好きな領域」「自分がやりたいサービス」「デザインに対して理解がある会社」など、興味のある企業を探す作業は大事。
  • **企業リサーチに役立つサービス:**以下のような企業などを使ってデジタルな会社でデザイナーを求めている会社を探しましょう。
    • Cocodaデザイン組織がある程度整備された企業の情報が公開されている。企業のデザイン思想や事例がまとまっていて、難易度はやや高めだが参考になる。
    • Wantedlyベンチャーやスタートアップの採用情報が多く集まり、UI/UXデザイナー枠で検索しやすい。企業のカルチャーやメンバーの雰囲気を知るのにも便利。
    • note企業の社員が発信していることも多く、現場のリアルな声が見つかる。会社名+デザイナーで検索してみると、新たな気づきがあるかもしれません。

応募する際のポイント

  • 企業がどんな強みを求めているかを把握サービス内容や社風を理解したうえで、「自分のデザイン観がどう役に立つか」を明確にアピールする。
  • 自分のやりたいことを明確にする「この会社で○○を学びたい」「このサービスに共感している」など、企業側に刺さる動機づけを伝えることで、採用の可能性が高まります。

会社選びや採用面接に役立つBONO関連のコンテンツ

メンバー限定の情報:

  • 会社の選び方
  • ZINさんインタビュー:興味のある会社の発見と対策**
  • *公開中:
    • 採用で見られるスキルポイント解説**

“UIUXデザイン転職活動への準備”に役立つコンテンツ

BONOで後悔している転職活動や会社選び関連のコンテンツです。

  • 『ZINさん転職成功インタビュー』:BONOメンバー限定です。ZINさんのインタビュー後半で、いきたい会社の調査と対策、何を考えていたか?を話していますが、全面的に同意する内容です。ここまで準備できたら120点です。
  • 『自分に合う会社の選び方』:当たり前の話ではありますが自分に合う会社を選び情報を集める方法を喋っています。BONOメンバー限定。
  • 『mosさんの転職成功インタビュー』:エージェントの使い方や希望する会社へ応募するコツなどを話しています。BONOメンバー限定。

次のステップ:実際の面接や応募準備へ

  • ポートフォリオと志望動機をしっかりリンクさせる「なぜこのUIを作ったのか?」など、ポートフォリオに込めた想いや学習プロセスを自信を持って説明できるようにしましょう。
  • 企業分析に時間をかけすぎない応募先が定まらないままダラダラとリサーチを続けるのはNG。ある程度のリストができたら、期限を区切って応募しはじめることも大切です。

まとめ:継続的な学習とスキルアップへ

この記事では「BONOボノ」での未経験からUIUXデザイナーに転職するためのロードマップを解説してきました。BONOでは「UIUXデザインコース」でこのロードマップの考えを元に、UIUXデザイナーを目指せる、また、現場経験の浅い人がUIUXデザインの土台を身につけるコンテンツコースを提供しています。

ぜひ興味のある方はコースを利用してスキルを身につけてみてください

『BONO - UIUXデザインコース』はこちら
https://www.bo-no.design/rdm/roadmap-uiuxdesigner

最後にこの記事のまとめを貼っておきます。

時間はかかりますがやれば確実にスキルは身につきます。才能は必要ありません。必要な基礎ロジックを知ってそれを真似してひたすら練習するのみです。ぜひトライしてみてください。

① 未経験からUI/UXデザイナーを目指す全体像を把握する

  • はじめに、UI/UXを学ぶ上でのゴールイメージを持ち、デザインの基礎から転職活動までの道のりを俯瞰しておきましょう。

② まずはFigmaなどデザインツールの操作を身につける

  • 手を動かしながらUIを実際に作る経験が、今後のUI/UX理論を学ぶ際の土台になります。

③ デザイン原則や“ふつうのUI”を真似して基礎を固める

  • 色や余白、タイポグラフィなどの基本や、既存のUIをトレースすることで、短期間でデザインの引き出しを増やしましょう。

④ UI/UXを理解する3つの基礎を押さえる

  • 「インターフェース基礎」「情報設計」「顧客理解と課題解決」の3点を順番に学び、実務に役立つ基礎体力をつけます。

⑤ インターフェース設計で“使いやすさ”を具体化する

  • ボタン配置や画面遷移、状態変化などを考慮し、人が迷わず操作できるUIを設計する力を養いましょう。

⑥ 要件をUIへ落とし込む“情報設計”を身につける

  • ユーザーがどんな流れで機能を利用するのか?を整理し、使いやすいUIに仕上げるための論理的なプロセスを学ぶのがポイントです。

⑦ “顧客理解”を起点にサービス価値を高める

  • どんな人が、何に困っているのか?を把握し、それをUIや体験設計に落とし込むことで“課題解決につながるデザイン”を目指します。

⑧ ポートフォリオ作成でアウトプットを形にする

  • 学んだスキルをまとめ、なぜそのデザインが必要なのかを説明できるように整理します。最低3つの事例を示して再現性をアピールしましょう。

⑨ 転職活動では複数社応募と企業リサーチが必須

  • 未経験からの採用枠は限られるため、数を打ちながら入りたい企業も入念に調べ、相性の良い会社を狙いましょう。

⑩ “箱の考え方”を活用して効率よく学習する

  • この記事で紹介したロードマップの詳細や、顧客理解のフレームワークは、わたしたちのサービスでも体系立てて学べます。ぜひ下記リンクからチェックしてみてください。

UI/UXデザイナーになる道のり

こんにちはカイクンです、寒くてしもやけが大変です。
この記事では、現場経験10年以上の私が運営する、UIUXデザイナーへの転職実績が約50人あるBONO(ボノ)が考える、未経験からUI/UXデザイナーを目指す際の全体像を示します。

まず、ゴール地点として「クライアントや企業が求めるUI/UXを設計できる人材」になる姿をイメージし、そこに至るまでの学習プロセスを俯瞰します。

BONOではこのロードマップの考えを元に「UIUXデザインコース」を作成し、未経験からデザイナーを目指す人や、UIUXの現場経験が浅いプレイヤーが基礎力をつける機会を提供しています。
BONO - UIUXデザインコース
→ロードマップをカリキュラムに落とした、未経験からでもUIUXデザインの基礎が身につくコースです
https://www.bo-no.design/rdm/roadmap-uiuxdesigner

📕この記事の目次

  1. UI/UXデザイナーになるロードマップ全体像
  2. フェーズ1.デザインを始める:基本ツール習得とマインドセット
  3. フェーズ2. UIUXの3つの基礎を押さえる(ポイント重視)
  4. フェーズ3:ポートフォリオにまとめよう
  5. フェーズ4:UIUXデザイン転職活動へ
  6. まとめ:継続的な学習とスキルアップへ

UIUXデザインロードマップの全体像

BONOが考えるロードマップの全体像は以下のような流れと内容を考えています。これらを行いスキルを身につけることで、与えられた要件や課題に対して、UIの形を考え提案できる最低限のスキルが身につくと考えています。

ロードマップの全体と想定期間

この記事で紹介するロードマップの全体は以下のような流れです。
学習期間の目安は週12時間以上を最低デザイン学習の時間に当てれることを想定しています。

○ フェーズ1)デザインをはじめる

期間:1-2ヶ月目

  • デザインツール「Figma」の習得
  • デザインの基本知識
  • デザインをする基本スタンス

○ フェーズ2)UIUXの3つの基礎理解

期間: 6ヶ月

  • インターフェースの基本
  • 情報設計の基本
  • 顧客理解と課題解決の基本

○ フェーズ3)ポートフォリオ作成

期間:1ヶ月

  • 基礎理解で作成しているものを基本的にはベースにして、アピールするアウトプットを仕上げていきます。

○ フェーズ4)転職活動(応募・面接)

期間:1-2ヶ月

  • 応募してスムーズに採用まで行くのに1社大体1ヶ月ほどかかることを念頭におきましょう。複数の会社に応募したり途中でうまくいかないこともあると思うので1~2ヶ月を目処に書いています。

ロードマップで目指すデザイナー像とそのレベル

このロードマップで目指すスキル像はただ言われたものをUIにするようなデザイナーではありません。現場に入ると事業貢献を求められます。そこにUIデザインを通して貢献できる素養がある基礎レベルを目指します。また、未経験から現場に入る人も想定をしているため継続的に学習していける学習素養や、問題なく意思疎通を現場のメンバーと行うコミュニケーションスキルの習得も視野に入れています。

目指すレベルの6つの特徴

①顧客視点を持ち、課題解決を軸にデザインする素養がある

②必要最小限のデザインツール操作に習熟している

③顧客にとっての“使いやすさ”を設計する基礎的なUI情報設計スキルがある

④基礎的なUIパターンとガイドラインを理解している

⑤制作過程や意図を言語化・共有できる

⑥現場メンバーの考えを理解し意思疎通できるコミュニケーションスキルがある

⑥継続的な学習意欲と業界トレンドのインプットが欠かせない

現場に迎え入れても良いUIUXデザイナーとはどういうものなのか?についてはこちらの記事をご覧ください。

書類落ちしない、UIUXデザイナー転職で見られる要素と最低限のスキル
https://www.bo-no.design/contents/rdm-howtobeadesigner

フェーズ1. デザインを始める:基本ツール習得とマインドセット

このセクションでは、まずFigmaといった基本的なデザインツールの操作から始めます。未経験者が最初に覚えるべきは、画面作成の流れやパーツ配置、プロトタイプ設定など、最低限の機能理解です。UIをツールを使ってデザインする方法から始めてデザインツールに慣れることから始めましょう。

加えて、デザイン自体の基本スタンスも重要です。たとえば、グラフィックデザインの基本である色・余白・タイポグラフィといった基本要素や、上達するデザイン制作の基本の流れを1度通っておくと、デザイン学習に対するイメージを持ちやすいでしょう。

ここでの目標は、いきなり高度なUIUX理論に突入するのではなく、「手を動かしながら学べる環境」をつくること。ツール操作と基本的な視点を身につけることで、次の段階であるUIUXの3基礎を理解する土台ができます。

ロードマップのフェーズ1の全体像の画像

フェーズ1で目指す状態

○ FigmaでUIをデザインできるようにする

  • UIデザインツールの定番、Figmaの操作に慣れてUIを作れるようになりましょう

○ デザイン学習の基礎を抑える

  • UIUXの基礎スキルに入る前に、デザインの基本原則とデザインスキルを身につける上でのスタンスを習得してデザインスキルを身につける土台を固める

○ UIUX学習のゴールを持つ

  • UIUXデザイン学習のゴールは「ポートフォリオを作ること」です。基礎を身につける目的もまずはそこがゴールになるため、本格的なUIUXの学習に進む前にそのゴールをイメージを持ちましょう。

習得1.】Figmaの基本操作を習得

Figmaを使いこなして、UIデザインの下地を固めよう!

UIデザインの学習を始めるにあたって、ツールを使えることはとても大切です。UIやWebサイトのデザインに最適なFigmaの使い方に慣れるところからはじめましょう。

このパートのゴール:

  • **Figmaの使い方に慣れよう:**まずはFigmaの操作に慣れるところから始めましょう。UIをトレースしながらで良いのでUIの見た目をFigmaで再現しながら基本的な使い方を覚えて慣れていくのが効果的です。機能もオートレイアウトとプロトタイプ機能までは最初のうちに使えるようになっておきましょう
  • **UIを作れる実感を得る:**UIが完成した達成感と、将来の仕事にどうつながるかが少しずつ見えてくるようになり、モチベーションが高まります。これから本格的にデザイン、UIUXをやっていく上でもツールの操作ができているとスムーズに進むことができます。

Figmaの基本操作を身につけよう

  1. UIトレースで基本操作に慣れる
    • 他のサービスのUIを真似してみる「UIトレース」は、ボタンやレイアウトを模倣するうちに自然と機能を覚えられる定番の学習手法。
    • 色やテキストスタイルを何度も設定していくうちに、ショートカットキーなども体感的に身につけられます。
  2. オートレイアウト機能を覚える
    • Figmaのオートレイアウト機能の使い方を身につけましょう。オートレイアウトはブロックの作り方やその余白などをシステマチックに管理できる機能です。実際にコードを書いて画面レイアウトを組むときの仕様そのままの機能になります。オートレイアウトで全てを組める必要性はすぐにはありません。ただオートレイアウトの考え方でレイアウトを組めていることはそのままコードの形でも問題なく組めるレイアウトを行っているし、UI構造に乗っ取った見た目を構築することにつながります。早めに覚えて慣れておきましょう
  3. プロトタイプの扱いを覚えて、動きのあるUIを作る
    • Figmaにはクリックして画面を遷移を擬似的に表現して確認できる「プロトタイプ機能」があります。UIは絵ではなく操作して体験することが主な目的です。そのため、プロトタイプ機能で画面遷移を設定して“実際の使い心地”をテストすることがUIのクオリティにもつながります。

Figmaの基礎が学習できるコンテンツ

BONOの「UIUXデザインコース」ではこのパートのスキルは以下のコンテンツで身につけることを計画しています。またBONOのYouTubeでもFigmaに関するナレッジの紹介をしています。

これらは完全無料でYouTubeチャンネルを使って提供しています。ガンガン見て使ってください。

  • 『Figma入門』:完全無料です。Figmaをこれから始める人向けに、トレースを中心にしながらデザインしながら基本的な使い方を覚えられるチュートリアルです。最初の1歩にぜひどうぞ。
  • 『Figma初級』:完全無料です。オートレイアウトとコンポーネント機能の使い方をTwitterのデスクトップUIをトレースしながら紹介しています。実際のUIを作る時になぜ、どうこの機能を使うのか?を理解しながら使い方を身につけられます。
  • 『オートレイアウト解説動画』:オートレイアウトの仕組みについて解説した動画です。無料。
  • 『ショートカット解説動画』:Figmaの速度を上げるには慣れもありますがショートカットに慣れていくのがおすすめです。その解説をしています。無料。

【習得2】デザインの基本とスタンスを得る

デザインの4原則、上達方法、制作の基本、UIUX学習のゴールを抑えよう

UIデザインを始めたばかりの段階で、いきなり独創的な作品を目指すのはハードルが高いもの。実はプロのデザイナーも、定番の配置や色使いを活用して「見やすさ」「使いやすさ」を担保していることが多いのです。それをどう学ぶか?理論だけではなく世の中の”ふつう”のデザインを真似したり、制作を重ねることで学習しアウトプットのクオリティが上昇していきます。

このパートでは、基本となるデザイン原則を押さえつつ、いわゆる“ふつうのUI”を真似することや、UIに限らないデザイン制作の基本の流れを身につけることをを目標にします。

また、最終的なUIUX転職に必要なゴールを認識することでロードマップに必要なスキルの意味や最終目標を理解して効率をUPさせておきましょう。

このパートのゴール:

  • デザインの基本原則、盗み方、制作の流れ : 文字の読みやすさや余白の取り方など、基礎的な美的ルールを理解して“定番UI”を作り込めるようになる。また「ふつうのUI」を真似して世の中のデザインから盗んで学習する姿勢が大切です。最初から独創性を追いかけるよりも、成功事例を自分の中に落とし込むことで成長を早める。そして最後にデザインを作って検討する基本的な流れを知って自分で実践できるようになりましょう。
  • **UI/UX学習のゴール把握:**転職するならポートフォリオが必要、最終的にどんなことをアピールする必要があるのか?をUIUXの本格学習に進む前に把握しておこう

デザインの基本とスタンス「4つのポイント」を身につけよう

  1. デザイン基本原則をインプットしておく
    • デザインの4原則の習得: 表現デザインの基本であるデザインの4原則について学んで基礎的なデザイン表現の法則を学びましょう。
  2. 「ふつうのUI」を真似して上達するスタンスを持つ
    • 参考デザインから盗む方法: UIデザインは「構造」「機能」「見た目」の3要素に分解してデザインを参考にすると扱いやすいです。その盗む目の基本や、UIを普段から見ておくためのデザインの探し方を把握して、日頃からデザインを吸収できる土台を作りましょう
  3. デザイン制作の基本の流れを知っておく
    • 参孝リサーチ → ラフ設計 → パターン出し → 検討評価 → ブラッシュアップ: デザインを作る時は最初はアイデアを広げて徐々に収束する形で検討していくのが基本です。こうすることで適切なアイデアをまず模索し、正しい方向性の表現の質を高めて仕上げていく基本が身につきやすいです。また自分で自分のデザインを評価するスキルを磨くことはデザインを見る目の向上にもつながる大切な要素です。
  4. UI/UXデザイナー転職のゴールイメージを知っておく
    • ポートフォリオ: 実際に作ったUIやプロセスをまとめて公開することで、自分の強みをアピールできる。採用に応募する時に必須になるもの。デザインスキルは採用の足切り要素として機能します。
    • 会社や必要スキルの理解: 制作会社なのか、事業会社なのかなどの会社の特徴や、テック業界の会社を知る方法、またロードマップの元になっている、どういうスキルや内面が採用では評価されるのか、未経験者は特にどういう工夫があると受け入れやすいのかを理解しておくと、学習しながら採用で見せるスキルや素材を貯めながら計画的に学習できる確率が上がります。

“デザインの基本とスタンス”に役立つコンテンツ

BONOの「UIUXデザインコース」ではこのパートのスキルは以下のコンテンツで身につけることを計画しています。

次のステップ

ここで固めた「デザインの基本」「ふつうのUI」「ゴールイメージ」の3つは、今後の学習で何度も役立つ土台になります。

引き続き、UI/UXの3基礎(インターフェース、情報設計、課題解決)を身につけるフェーズへ進みましょう。定番の手法や考え方をベースに、自分のアレンジを効かせられるようになったとき、UIデザインの面白さがさらに広がっていきます。

フェーズ2.UIUXデザイン3つの基礎を習得

ここでは、UIUXを理解するうえで欠かせない3つの基礎要素をコンパクトに紹介します。1つ目は「インターフェース基礎」で、ユーザーが迷わず操作できる画面要素や一貫性・視認性の確保、基本的なUIパターン理解を示します。2つ目は「情報設計基礎」で、ユーザーが求める情報を適切に構造化し、流れを設計する考え方。3つ目は「課題解決基礎」で、ユーザーの課題を発見し、改善策を発想・検証する流れを学びます。ここでは詳細な理論で圧倒しないよう、キーポイントを示すに留めます。深い学習は別記事や学習リソースへつなげ、まずは「UIUXはこの3軸で考える」と理解できれば十分です。

ロードマップフェーズ2の全体像の画像

このフェーズで目指す状態

○ UIを使って顧客の課題解決をするための、最低限必要な「3つの基礎」を習得する

  • UIデザイナーの役割はただ言われたことをUIにするだけの作業的なデザイナーではありません。デザインを武器に、ユーザーが価値を感じるデジタル上の体験を設計するために仕事をすることになります。価値をUIを通して実現するために「3つの基礎」が必要だと考えています。
  • インターフェースの基礎:これはUIの見た目をつくるためのUIデザインの基本になります。UIの見た目を構築する「UIビジュアル基礎」と、UIを操作して基本的な体験を実現する「UI操作の基礎」の2つに分けて考えていきます。
  • 情報設計の基礎:ユーザーはこういうことをしたいからこういう操作や処理をする必要がある、のみがある状態からUIのアイデアを出して体験をデザインする基本を身につけます。実際の業務に最も近い内容です。ユーザーや現場の課題や要件、やりたいことをベースに、そのユーザーにとって使いやすいUIとその体験の形を具体化していくUIデザインの手法です。
  • UXデザインの基礎:顧客のことを理解して顧客の課題を解決するための体験をデザインする基礎を身に付けます。ただUIを作るのではなく”なんのために”、”誰のため”のUIなのかを考えるには、顧客そのものの理解をする経験が不可欠です。少し上流の考えでUI制作からは遠く感じるかもしれませんが、自分が作るUIが誰の何のためになっているのか?を身につける体験設計、課題解決の基本を学びます

【習得1】インターフェース基礎

インターフェース基礎を押さえて、使いやすいUIを実現できるようになろう!

UIデザインを学び始めたばかりの方にとって、最初の大きなハードルになるのが「インターフェース基礎」です。画面をどう構成するのか、ボタンやナビゲーションをどこに置けばユーザーが迷わず操作できるのか、そもそもUIの見た目をどう考えて構築するのか…そんな疑問を解決する土台となるのがこのパート。ここをしっかりと理解しておくと、後から出てくる高度な情報設計やUXデザインの学習もグッとラクになります。

インターフェースの基礎の全体像

このパートのゴール:

  • 理解を確認するためには実際にUIを作りデザインすることが必要です。これらの基礎を使って「SNSアプリ」や「Todoサービス」の基本機能をすべてデザインすることで基礎概念を使用したUIデザインを1度自分で実践できます。理解が深まるでしょう。
  • UIは絵ではなく操作してある体験を提供することで初めて意味を持ちます。なのでこのパートでは基本的な操作をするUIを自分で作れるようになること。そのための基礎知識を身につけて実践しアウトプットすることをテーマにします。

インターフェースの基礎「3要素」を身につけよう

以下の3つを身につけて、”ふつう”のUIの仕組みを学びつつ習得することがゴールです。

①UIを構成するビジュアルの基礎

  • UIの見た目の構成要素:フォントや色、要素の大きさ、余白の取り方など、ビジュアルデザインの仕組みをUIデザインのケースで、仕組み化してコントロールする基本を学びましょう。見た目を構成する要素を1つずつ習得することで、UI自体を見る目の解像度が高まります。
  • 要素の因数分解;タイポグラフィ / 配色 / 余白 / ディスプレイとスクリーンサイズ / 構造・ブロック / 階層 /

③UIの状態変化の基礎

  • 基礎状態変化:エラー表示やホバー時の反応など、ユーザーの行動や状況に応じてUIが変わる場面もあります。こうした”状態”で変化するUIの基本を習得しましょう
  • 「新規作成」「閲覧」「編集」「削除」:よくある操作パターンで変化するUI表現について学びましょう。
  • コンポーネント:また状態変化に合わせてUIの「コンポーネント」という概念の基本についても学びましょう。コンポーネントとはソフトウェア上でUIパーツを使い回す概念のことです。この利点や、違う画面でも同じ役割や状態を示すUIについて学びましょう

②UIの操作の基礎

  • UIの操作の基礎:UIは絵ではなく操作する体験を形作って初めて意味をなします。そのUI操作に必要な基礎概念について抑えましょう。
  • UIとモード:ソフトウェアの操作中に”ある状態に集中する”状態をユーザーに与える「モード」という基礎概念について理解しましょう。主に「作成↔︎閲覧」モード、「選択」モードなどを例にBONOでは理解して行きます。
  • UIとナビゲーション:ユーザーに現在地や前にいた場所、サービス内で可能な操作など、機能のヒントを与えるために重要な「ナビゲーション」について学びましょう。基本的な役割とナビゲーションパターンをBONOでは抑えて行きます。
  • UIとアクション:UIにおける”アクション”の概念について学びましょう。適切なアクションの配置や、操作する対象の”オブジェクト”と操作ボタンの位置関係など、基本的に使いやすいアクションについて学びましょう。

インターフェースの基礎を身につけられる解説&実践コンテンツ

BONOの「UIUXデザインコース」ではこのパートのスキルは以下のコンテンツで身につけることを計画しています。

  • 『ゼロからはじめるUIビジュアル』:UIの見た目を構築する基本と、基本アクションの参考の仕方デザイン方法を実践を通して身につけます。一部無料。
  • 『UIビジュアルの基礎』:UIの見た目を構成する基本要素をダメなUIをリデザインしながら身につけることができます。一部無料。
  • 『使いやすいUIの秘密』:UI操作の基本であるモード/アクション/ナビゲーションなどの基礎要素をNGデザインをリデザインして身につけられます。半分ぐらい無料。

【習得2】情報設計の基礎

情報設計の基礎を押さえて、顧客に寄り添ったUIを実現できるようになろう!

UIデザインで画面の見た目だけ作れるようになっても意味がないです。実際の業務では、「提供するサービス機能をどう画面に落とし込むか?」「ユーザーはどんな操作がイメージしやすいか?」を考えてUIのアイデアを操作の流れと一緒に考えて行きます。つまり、要件や課題をクリアにし、それをUIにきちんと反映させていく力がとても重要です。

このパートでは「要件 → UIのアイデア → ユーザー体験」という流れを筋道立てて考える方法を身につけます。ここをしっかり学べば、プロダクト開発の要望を“使いやすい画面”に落とし込む基礎ができあがり、より実践的なUIデザイン力が養われます。

情報設計の基礎の全体像

このパートのゴール:

  • 「要件をもとにUIアイデアを具体化する」フローを通じて、ユーザーにとって最適な操作や画面構成を導き出せるようになる。なぜそのUIが必要なのか?をユーザー・要件を軸に論理的に考えるデザインフローを習得することに繋がります。
  • 少し複雑なソフトウェアのアイデアを、機能アイデアだけの状態から、ゼロから自分で作成することで、ユーザーと要件を満たすUI作成の流れを身につけることができるでしょう。

情報設計の基礎を身につけよう

① UIモデリング

  • **UIの要件定義:要件を理解→分解しUIに落とす整理するやり方を身につけよう。**作るべき機能の内容だけを考えるのではなく、ユーザーを主語に「ユーザーが何をしたいのか」「何に困っているのか」「どういう操作が必要か」を整理し、それを叶えるために必要な、ユーザーの行動の流れや画面に必要な情報などを洗い出します。
  • **OOUI(オブジェクト指向UIデザイン):**画面を単に“ページ”として見るのではなく、“ユーザーが扱うオブジェクト”に着目して整理すると、機能や情報の優先度をより論理的に決められます。UIの情報設計の基本でオブジェクト中心のやり方を学びましょう

② UIプロトタイピング

  • **プロトタイピング概念の理解:**デザインの強みは完成・リリースする前に具体的な形を作って効果的かどうかを検討できる、点です。40%〜ぐらいの完成度で、達成するべき要素を満たせる具体的な形をパターンを作って検討することを「プロトタイピング」と呼びます。そのデザインフローを学びましょう。
  • **ユーザーの行動フローの可視化:**UIの要件定義で整理した必要な情報を、ユーザーが実際に操作する形に落としましょう。「A画面で入力 → B画面で確認 → C画面で完了」などの遷移や画面同士の関係を”具体的に”洗い出し、問題点があれば早めに修正します。
  • **UIプロトタイプの作成:**UIアイデアをラフにまず形にし、自分や他の人が触ってテストできる状態を作りましょう。要件を整理して得られた情報を元に、今の方向性で機能を満たせるのか?を具体的に検証しながらUIのクオリティ高めていくデザイン制作の流れを身につけましょう。

情報設計の基礎が身につけられるコンテンツ

BONOの「UIUXデザインコース」ではこのパートのスキルは以下のコンテンツで身につけることを計画しています。

  • 『ゼロからはじめる情報設計』:要件を元に、UIの要件定義を作成してUIアイデアに落とす流れを解説して実践できるコンテンツです。要件からユーザーのやりたいことを考えどういうUIにするべきかを考える手法を身につけられます。一部無料。
  • 『OOUI コンテンツ中心のUI設計』:UIの情報設計の基本であるオブジェクト指向を学んで実践できるコンテンツです。オブジェクト中心にUIを設計して操作しやすいUIをつくる考え方を習得します。一部無料。
  • 『UIデザインの基本』:ユーザーの行動に沿ってUIのパターンを作ってプロトタイピングする流れを実践しながら学ぶことができます。一部無料。

【習得3】顧客理解と課題解決の基礎

顧客に価値を提供するデザインの基本を身につけよう

UIデザインと聞くと、どうしても「画面づくり」や「操作性」に目が行きがちです。もちろん使いやすいUIは大切ですが、”使いやすい”はユーザーにとって価値のあるモノである前提のはずです。

ビジネスの現場では「顧客の課題を解決し、顧客にとって価値あるサービスを提供する」ことに向かってデザインを使ったりUIを作るという視点が何より重要です。

このパートでは、UIをただの“見た目”に終わらせないために、顧客のニーズや抱えている課題をしっかり捉え、それを解消する体験デザインへと落とし込む基礎を学んでいきます。非常に難易度の高いスキルで他のスキル同様に完璧に身につけることは求めません。

ただ“顧客が喜ぶサービス体験”を生み出すための顧客中心のデザインの考え方を1度体験することが重要です。
この基本を身につけて、顧客を理解して、課題解決をする素養を身につけることがこのパートのゴールになります。

顧客理解・課題解決の基礎の全体像

このパートのゴール:

  • **体験デザインの基本:**顧客の課題と価値の関係を理解し、UIを超えたサービス体験をデザインできるようになる。「なぜこのUIが必要なのか?」「そもそも顧客がなりたい状態は何か?」を整理し、自分のデザイン、UIが、”誰”の、”何のため”に存在するのかを理解しましょう。。
  • **顧客理解の基本:**インタビューやリサーチを通じて、課題を具体的に把握し、解決策を提案するプロセスを体験する。UIのデザインそのものより、一歩上流の“顧客を理解する”プロセスが大事だと気づけるようになる。
  • **顧客の課題を起点にしたサービスをデザインする:**体験デザインと顧客理解の基本を論理で理解することはとても抽象度が高く難しいです。そのため、その基礎知識と進め方を使って、1度自分で課題を解決するようなサービスや機能をデザインしてみるのが有効です。

体験デザインと顧客理解で、課題解決の基礎を身につけよう

  1. 体験デザインの基本
    • **UXデザインの基本:**UXデザイン=単なる使いやすさ、ではありません。UXデザインもかなり広くBONOでは3つに分解しています。「プロダクトのUX」、「顧客体験のUX」、「戦略のUX」この3つに分けています。単なる操作しやすいUXはプロダクトUXで情報設計までの基礎で考えるべきことです。ユーザーにとって良い体験を作るための「顧客体験のUX」についてこのパートでは学びます。
    • ゴールダイレクテッドデザインの考え方: AboutFaceに紹介されるゴールダイレクテッドのフレームワークをもとに、顧客の抱える課題→価値→体験の関係性を学びましょう。何でもかんでも課題ではなく、ユーザーがなりたい状態にとって邪魔している優先度が高いものが”課題”になります。それを解決する体験を提供していくのがUIデザインの目的です。この関係性を顧客を軸に、体験価値として認識する基礎を身につけましょう。
    • 実践形式で理解: 自分のサービス想定を作り、顧客インタビューなどを通して価値を形にしていくフローを身につけましょう。
  2. 顧客価値と理解の基本
    • 顧客を“知る”重要性: そもそもユーザー本人に質問をしなければ、本当の課題は見えてきません。基本的なインタビューの流れやヒアリングシートの作り方を学びましょう。
    • 課題とは何か?: 何を困りごとと捉えているのかを丁寧に引き出すことで、UIがどのように課題解決に寄与できるかを明確にします。
    • **ユーザーインタビューの基本:**アンケートではなく対面でユーザーのことを知る重要性と、対面インタビューのやり方の基本を学び実践してみましょう。インタビューするべき内容の立て方、インタビューのやり方、まとめ方などをBONOではテンプレートの型を使って学習と実践することが可能です。

顧客理解と課題解決の基礎が身につけられるコンテンツ

BONOの「UIUXデザインコース」ではこのパートのスキルは以下のコンテンツで身につけることを計画しています。

  • 『顧客体験デザインの基本』:ユーザー中心とは?ユーザーが価値を感じる課題解決とは?それを生み出す基本の考え方とは?を学ぶ内容です。About Faceという本に紹介されるゴールダイレクテッドデザインをベースに学んでいきます。
  • 『はじめてのUXデザイン』:ゼロからサービスを作る流れを実際に見ながら、どういうふうに顧客を理解して、課題にヒットする解決策をUIにしていくのかを学びます。実際にインタビューする様子も確認することができます。
  • 『はじめてのユーザーインタビュー』:ユーザーインタビューのやり方を、準備、実施、まとめの全フロー見ながら学ぶことができます。顧客の現状を理解して、課題を発見するインタビューのやり方を学びましょう。
  • 『UXデザインって何』:UXデザインってそもそもなんなのか?を理解する基礎コンテンツです。無料で閲覧することができます。

▼ 次のステップ

習得した3つの基礎は”基本的なUI制作の流れ”になっています。つまりデザインツールからはじめ、この3つの基礎を身につけた状態で、はじめてUIをまとめにデザインする力を得られたことになります。このスキルを使って、次にポートフォリオに乗せるアウトプットを作成して行きましょう。すでに基礎習得の中で作成したアウトプットがあるのであれば、時間がたった今見ると改善できる部分が見つかるでしょう。

今まで学んで身につけたスキルを使って採用でスキルを示すことができるポートフォリオ作成に移って行きましょう

フェーズ3:ポートフォリオをつくろう

基礎スキルが伝わるポートフォリオを作成しよう

基礎理解をアウトプットに落とし込んで、デザイナーとしての強みを可視化!

UIUXを学んできたら、次に待っているのは「実際に何ができるのか?」を示すためのポートフォリオ作成です。これはあなたが持つスキルや思考プロセスを、採用担当者やクライアントに分かりやすく伝えるための必須ツール。

本フェーズでは、インターフェース基礎・情報設計・課題解決の3つの基礎を活かしたアウトプットを具体的に形にしていきます。同時に、ただ作品を並べるのではなく、「なぜそうデザインしたのか」「どんな意図や改善策を考えたのか」を簡潔に言語化する力も身につけるのがポイントです。

このフェーズで目指す状態

最低3つのアウトプットを完成させる

  • UIUXの3つの基礎を示すアウトプット:アウトプットが少ないと再現性が分かりづらいため、最低3つのアウトプットを目指しましょう。複数の例があることで、あなたの思考パターンや強みがよりハッキリ見えます。また、その思考プロセスも言語化してデザインを説明する力やデザインの理解を示しましょう
  • **“どんな人物なのか”が伝わる:**スキルだけでなく、経歴・学習スタンス・チームで働くときの姿勢などもポートフォリオで表現しましょう。採用する側はスキルが高いだけではなく一緒に仕事ができるかなどの要素も評価の対象になります。

ポートフォリオに載せるべき必須項目

  1. アウトプット
    • インターフェース基礎スキルの作品: 配色やボタン配置など、基本的なUIの見せ方が分かるもの。
    • 情報設計基礎スキルの作品: ワイヤーフレームやサービス構造を視覚化した資料など。
    • 顧客理解&課題解決のスキルの作品: 課題を発見し、UIで改善したBefore/Afterの比較など。
  2. 自分自身の紹介
    • 経歴や学習の背景: どんな環境で、どのようにデザインを学んできたのか。今までのキャリアはどういう特徴があるのか
    • デザインへの考え方: 「なぜデザインが好きなのか」「どんな分野に興味があるのか」「どういうデザインをしていきたいのか」などをブログでもポートフォリオ上でも良いのでまとめましょう
    • 成長意欲が伝わるエピソード: 失敗や挫折をどう乗り越えたかなど、ポテンシャルを示すエピソードがあると印象的。

“UIUXポートフォリオ作成”に役立つコンテンツ

BONOの「UIUXデザインコース」ではこのパートのスキルは以下のコンテンツで身につけることを計画しています。

次のステップ

ポートフォリオの内容が固まったら採用応募のフェーズに進みましょう。ポートフォリオ自体はいつまででもクオリティを高めるために時間を使えますが、応募しないと採用されるものもされません。自分で締め切りを作りその範囲でクオリティUPにフォーカスして、次の採用応募のフェーズに進みましょう。

フェーズ4:UIUXデザイン転職活動へ

ポートフォリオが完成したら、いよいよ企業リサーチと応募開始!

ポートフォリオを仕上げたら、あとは実際に転職活動を進めるのみ。しかし、UI/UXデザイナーを募集している企業は思ったよりも多くはありません。特に未経験からの挑戦の場合、いくつかのハードルを越える必要があります。このフェーズでは、**「どれだけの企業に応募すべきか」「興味のある会社の見つけ方」**など、実践的なノウハウを紹介します。

最低30社以上への応募を視野に入れよう

  • 未経験可の企業は少ない「未経験歓迎」と明示している会社は実際はかなり限られています。企業側がデザイナーを採用できる枠も少ないため、そもそも募集枠そのものが少ないのが現状です。
  • 30~50社はトライするのが基本線企業ごとに求めるスキルや強みは異なるため、母数を増やすことで“タイミングや方向性”の合う企業に出会いやすくなります。とくに未経験の場合は“まず話を聞いてもらう”ハードルが高いため、数をこなすことでチャンスを見つけましょう。

なぜそこまでたくさんの会社を受ける必要があるのか?

  1. **未経験枠が公開されているのは少ない:**知名度の高い企業はスキルのある中途デザイナーが自然と集まるため、未経験枠を設ける必要性が薄い。デザイナー採用に苦戦している企業もわざわざ”未経験”を出すとレベルの高い人が応募しづらいので特別出すことは稀。そのため未経験を表で表示してない企業にも応募することで、実は募集している可動化を確認する必要があります。
  2. **会社の状況やタイミング次第:**デザイナー枠が埋まってしまうと募集を打ち切るケースも。内情は外からは見えづらく、こちらから探るのも難しい。
  3. マッチする企業は意外と少ない認知度の低い企業ほどデザイナーの採用に苦戦しがちで、未経験でも育てたいと思ってくれる確率が高い。しかし、そんな企業を自力で探し当てるにはある程度の件数に当たる必要があります。

入りたい会社を探して分析しよう

とりあえず応募数が必要とはいえ、「どんな会社でもいいので雇ってください…」というスタンスだと魅力は半減しますよね。恋愛にたとえるなら“誰でもいい”という人は、なかなか選ばれないのと同じです。なので自分で入りたい会社、自分の経験や興味と相性の良さそうな会社などを調べて、能動的にアプローチすることは必須です。

  • **企業”をリストアップ:**まずは自分が“興味を持てる会社をリストアップしましょう。「自分の好きな領域」「自分がやりたいサービス」「デザインに対して理解がある会社」など、興味のある企業を探す作業は大事。
  • **企業リサーチに役立つサービス:**以下のような企業などを使ってデジタルな会社でデザイナーを求めている会社を探しましょう。
    • Cocodaデザイン組織がある程度整備された企業の情報が公開されている。企業のデザイン思想や事例がまとまっていて、難易度はやや高めだが参考になる。
    • Wantedlyベンチャーやスタートアップの採用情報が多く集まり、UI/UXデザイナー枠で検索しやすい。企業のカルチャーやメンバーの雰囲気を知るのにも便利。
    • note企業の社員が発信していることも多く、現場のリアルな声が見つかる。会社名+デザイナーで検索してみると、新たな気づきがあるかもしれません。

応募する際のポイント

  • 企業がどんな強みを求めているかを把握サービス内容や社風を理解したうえで、「自分のデザイン観がどう役に立つか」を明確にアピールする。
  • 自分のやりたいことを明確にする「この会社で○○を学びたい」「このサービスに共感している」など、企業側に刺さる動機づけを伝えることで、採用の可能性が高まります。

会社選びや採用面接に役立つBONO関連のコンテンツ

メンバー限定の情報:

  • 会社の選び方
  • ZINさんインタビュー:興味のある会社の発見と対策**
  • *公開中:
    • 採用で見られるスキルポイント解説**

“UIUXデザイン転職活動への準備”に役立つコンテンツ

BONOで後悔している転職活動や会社選び関連のコンテンツです。

  • 『ZINさん転職成功インタビュー』:BONOメンバー限定です。ZINさんのインタビュー後半で、いきたい会社の調査と対策、何を考えていたか?を話していますが、全面的に同意する内容です。ここまで準備できたら120点です。
  • 『自分に合う会社の選び方』:当たり前の話ではありますが自分に合う会社を選び情報を集める方法を喋っています。BONOメンバー限定。
  • 『mosさんの転職成功インタビュー』:エージェントの使い方や希望する会社へ応募するコツなどを話しています。BONOメンバー限定。

次のステップ:実際の面接や応募準備へ

  • ポートフォリオと志望動機をしっかりリンクさせる「なぜこのUIを作ったのか?」など、ポートフォリオに込めた想いや学習プロセスを自信を持って説明できるようにしましょう。
  • 企業分析に時間をかけすぎない応募先が定まらないままダラダラとリサーチを続けるのはNG。ある程度のリストができたら、期限を区切って応募しはじめることも大切です。

まとめ:継続的な学習とスキルアップへ

この記事では「BONOボノ」での未経験からUIUXデザイナーに転職するためのロードマップを解説してきました。BONOでは「UIUXデザインコース」でこのロードマップの考えを元に、UIUXデザイナーを目指せる、また、現場経験の浅い人がUIUXデザインの土台を身につけるコンテンツコースを提供しています。

ぜひ興味のある方はコースを利用してスキルを身につけてみてください

『BONO - UIUXデザインコース』はこちら
https://www.bo-no.design/rdm/roadmap-uiuxdesigner

最後にこの記事のまとめを貼っておきます。

時間はかかりますがやれば確実にスキルは身につきます。才能は必要ありません。必要な基礎ロジックを知ってそれを真似してひたすら練習するのみです。ぜひトライしてみてください。

① 未経験からUI/UXデザイナーを目指す全体像を把握する

  • はじめに、UI/UXを学ぶ上でのゴールイメージを持ち、デザインの基礎から転職活動までの道のりを俯瞰しておきましょう。

② まずはFigmaなどデザインツールの操作を身につける

  • 手を動かしながらUIを実際に作る経験が、今後のUI/UX理論を学ぶ際の土台になります。

③ デザイン原則や“ふつうのUI”を真似して基礎を固める

  • 色や余白、タイポグラフィなどの基本や、既存のUIをトレースすることで、短期間でデザインの引き出しを増やしましょう。

④ UI/UXを理解する3つの基礎を押さえる

  • 「インターフェース基礎」「情報設計」「顧客理解と課題解決」の3点を順番に学び、実務に役立つ基礎体力をつけます。

⑤ インターフェース設計で“使いやすさ”を具体化する

  • ボタン配置や画面遷移、状態変化などを考慮し、人が迷わず操作できるUIを設計する力を養いましょう。

⑥ 要件をUIへ落とし込む“情報設計”を身につける

  • ユーザーがどんな流れで機能を利用するのか?を整理し、使いやすいUIに仕上げるための論理的なプロセスを学ぶのがポイントです。

⑦ “顧客理解”を起点にサービス価値を高める

  • どんな人が、何に困っているのか?を把握し、それをUIや体験設計に落とし込むことで“課題解決につながるデザイン”を目指します。

⑧ ポートフォリオ作成でアウトプットを形にする

  • 学んだスキルをまとめ、なぜそのデザインが必要なのかを説明できるように整理します。最低3つの事例を示して再現性をアピールしましょう。

⑨ 転職活動では複数社応募と企業リサーチが必須

  • 未経験からの採用枠は限られるため、数を打ちながら入りたい企業も入念に調べ、相性の良い会社を狙いましょう。

⑩ “箱の考え方”を活用して効率よく学習する

  • この記事で紹介したロードマップの詳細や、顧客理解のフレームワークは、わたしたちのサービスでも体系立てて学べます。ぜひ下記リンクからチェックしてみてください。

UI/UXデザイナーになる道のり

こんにちはカイクンです、寒くてしもやけが大変です。
この記事では、現場経験10年以上の私が運営する、UIUXデザイナーへの転職実績が約50人あるBONO(ボノ)が考える、未経験からUI/UXデザイナーを目指す際の全体像を示します。

まず、ゴール地点として「クライアントや企業が求めるUI/UXを設計できる人材」になる姿をイメージし、そこに至るまでの学習プロセスを俯瞰します。

BONOではこのロードマップの考えを元に「UIUXデザインコース」を作成し、未経験からデザイナーを目指す人や、UIUXの現場経験が浅いプレイヤーが基礎力をつける機会を提供しています。
BONO - UIUXデザインコース
→ロードマップをカリキュラムに落とした、未経験からでもUIUXデザインの基礎が身につくコースです
https://www.bo-no.design/rdm/roadmap-uiuxdesigner

📕この記事の目次

  1. UI/UXデザイナーになるロードマップ全体像
  2. フェーズ1.デザインを始める:基本ツール習得とマインドセット
  3. フェーズ2. UIUXの3つの基礎を押さえる(ポイント重視)
  4. フェーズ3:ポートフォリオにまとめよう
  5. フェーズ4:UIUXデザイン転職活動へ
  6. まとめ:継続的な学習とスキルアップへ

UIUXデザインロードマップの全体像

BONOが考えるロードマップの全体像は以下のような流れと内容を考えています。これらを行いスキルを身につけることで、与えられた要件や課題に対して、UIの形を考え提案できる最低限のスキルが身につくと考えています。

ロードマップの全体と想定期間

この記事で紹介するロードマップの全体は以下のような流れです。
学習期間の目安は週12時間以上を最低デザイン学習の時間に当てれることを想定しています。

○ フェーズ1)デザインをはじめる

期間:1-2ヶ月目

  • デザインツール「Figma」の習得
  • デザインの基本知識
  • デザインをする基本スタンス

○ フェーズ2)UIUXの3つの基礎理解

期間: 6ヶ月

  • インターフェースの基本
  • 情報設計の基本
  • 顧客理解と課題解決の基本

○ フェーズ3)ポートフォリオ作成

期間:1ヶ月

  • 基礎理解で作成しているものを基本的にはベースにして、アピールするアウトプットを仕上げていきます。

○ フェーズ4)転職活動(応募・面接)

期間:1-2ヶ月

  • 応募してスムーズに採用まで行くのに1社大体1ヶ月ほどかかることを念頭におきましょう。複数の会社に応募したり途中でうまくいかないこともあると思うので1~2ヶ月を目処に書いています。

ロードマップで目指すデザイナー像とそのレベル

このロードマップで目指すスキル像はただ言われたものをUIにするようなデザイナーではありません。現場に入ると事業貢献を求められます。そこにUIデザインを通して貢献できる素養がある基礎レベルを目指します。また、未経験から現場に入る人も想定をしているため継続的に学習していける学習素養や、問題なく意思疎通を現場のメンバーと行うコミュニケーションスキルの習得も視野に入れています。

目指すレベルの6つの特徴

①顧客視点を持ち、課題解決を軸にデザインする素養がある

②必要最小限のデザインツール操作に習熟している

③顧客にとっての“使いやすさ”を設計する基礎的なUI情報設計スキルがある

④基礎的なUIパターンとガイドラインを理解している

⑤制作過程や意図を言語化・共有できる

⑥現場メンバーの考えを理解し意思疎通できるコミュニケーションスキルがある

⑥継続的な学習意欲と業界トレンドのインプットが欠かせない

現場に迎え入れても良いUIUXデザイナーとはどういうものなのか?についてはこちらの記事をご覧ください。

書類落ちしない、UIUXデザイナー転職で見られる要素と最低限のスキル
https://www.bo-no.design/contents/rdm-howtobeadesigner

フェーズ1. デザインを始める:基本ツール習得とマインドセット

このセクションでは、まずFigmaといった基本的なデザインツールの操作から始めます。未経験者が最初に覚えるべきは、画面作成の流れやパーツ配置、プロトタイプ設定など、最低限の機能理解です。UIをツールを使ってデザインする方法から始めてデザインツールに慣れることから始めましょう。

加えて、デザイン自体の基本スタンスも重要です。たとえば、グラフィックデザインの基本である色・余白・タイポグラフィといった基本要素や、上達するデザイン制作の基本の流れを1度通っておくと、デザイン学習に対するイメージを持ちやすいでしょう。

ここでの目標は、いきなり高度なUIUX理論に突入するのではなく、「手を動かしながら学べる環境」をつくること。ツール操作と基本的な視点を身につけることで、次の段階であるUIUXの3基礎を理解する土台ができます。

ロードマップのフェーズ1の全体像の画像

フェーズ1で目指す状態

○ FigmaでUIをデザインできるようにする

  • UIデザインツールの定番、Figmaの操作に慣れてUIを作れるようになりましょう

○ デザイン学習の基礎を抑える

  • UIUXの基礎スキルに入る前に、デザインの基本原則とデザインスキルを身につける上でのスタンスを習得してデザインスキルを身につける土台を固める

○ UIUX学習のゴールを持つ

  • UIUXデザイン学習のゴールは「ポートフォリオを作ること」です。基礎を身につける目的もまずはそこがゴールになるため、本格的なUIUXの学習に進む前にそのゴールをイメージを持ちましょう。

習得1.】Figmaの基本操作を習得

Figmaを使いこなして、UIデザインの下地を固めよう!

UIデザインの学習を始めるにあたって、ツールを使えることはとても大切です。UIやWebサイトのデザインに最適なFigmaの使い方に慣れるところからはじめましょう。

このパートのゴール:

  • **Figmaの使い方に慣れよう:**まずはFigmaの操作に慣れるところから始めましょう。UIをトレースしながらで良いのでUIの見た目をFigmaで再現しながら基本的な使い方を覚えて慣れていくのが効果的です。機能もオートレイアウトとプロトタイプ機能までは最初のうちに使えるようになっておきましょう
  • **UIを作れる実感を得る:**UIが完成した達成感と、将来の仕事にどうつながるかが少しずつ見えてくるようになり、モチベーションが高まります。これから本格的にデザイン、UIUXをやっていく上でもツールの操作ができているとスムーズに進むことができます。

Figmaの基本操作を身につけよう

  1. UIトレースで基本操作に慣れる
    • 他のサービスのUIを真似してみる「UIトレース」は、ボタンやレイアウトを模倣するうちに自然と機能を覚えられる定番の学習手法。
    • 色やテキストスタイルを何度も設定していくうちに、ショートカットキーなども体感的に身につけられます。
  2. オートレイアウト機能を覚える
    • Figmaのオートレイアウト機能の使い方を身につけましょう。オートレイアウトはブロックの作り方やその余白などをシステマチックに管理できる機能です。実際にコードを書いて画面レイアウトを組むときの仕様そのままの機能になります。オートレイアウトで全てを組める必要性はすぐにはありません。ただオートレイアウトの考え方でレイアウトを組めていることはそのままコードの形でも問題なく組めるレイアウトを行っているし、UI構造に乗っ取った見た目を構築することにつながります。早めに覚えて慣れておきましょう
  3. プロトタイプの扱いを覚えて、動きのあるUIを作る
    • Figmaにはクリックして画面を遷移を擬似的に表現して確認できる「プロトタイプ機能」があります。UIは絵ではなく操作して体験することが主な目的です。そのため、プロトタイプ機能で画面遷移を設定して“実際の使い心地”をテストすることがUIのクオリティにもつながります。

Figmaの基礎が学習できるコンテンツ

BONOの「UIUXデザインコース」ではこのパートのスキルは以下のコンテンツで身につけることを計画しています。またBONOのYouTubeでもFigmaに関するナレッジの紹介をしています。

これらは完全無料でYouTubeチャンネルを使って提供しています。ガンガン見て使ってください。

  • 『Figma入門』:完全無料です。Figmaをこれから始める人向けに、トレースを中心にしながらデザインしながら基本的な使い方を覚えられるチュートリアルです。最初の1歩にぜひどうぞ。
  • 『Figma初級』:完全無料です。オートレイアウトとコンポーネント機能の使い方をTwitterのデスクトップUIをトレースしながら紹介しています。実際のUIを作る時になぜ、どうこの機能を使うのか?を理解しながら使い方を身につけられます。
  • 『オートレイアウト解説動画』:オートレイアウトの仕組みについて解説した動画です。無料。
  • 『ショートカット解説動画』:Figmaの速度を上げるには慣れもありますがショートカットに慣れていくのがおすすめです。その解説をしています。無料。

【習得2】デザインの基本とスタンスを得る

デザインの4原則、上達方法、制作の基本、UIUX学習のゴールを抑えよう

UIデザインを始めたばかりの段階で、いきなり独創的な作品を目指すのはハードルが高いもの。実はプロのデザイナーも、定番の配置や色使いを活用して「見やすさ」「使いやすさ」を担保していることが多いのです。それをどう学ぶか?理論だけではなく世の中の”ふつう”のデザインを真似したり、制作を重ねることで学習しアウトプットのクオリティが上昇していきます。

このパートでは、基本となるデザイン原則を押さえつつ、いわゆる“ふつうのUI”を真似することや、UIに限らないデザイン制作の基本の流れを身につけることをを目標にします。

また、最終的なUIUX転職に必要なゴールを認識することでロードマップに必要なスキルの意味や最終目標を理解して効率をUPさせておきましょう。

このパートのゴール:

  • デザインの基本原則、盗み方、制作の流れ : 文字の読みやすさや余白の取り方など、基礎的な美的ルールを理解して“定番UI”を作り込めるようになる。また「ふつうのUI」を真似して世の中のデザインから盗んで学習する姿勢が大切です。最初から独創性を追いかけるよりも、成功事例を自分の中に落とし込むことで成長を早める。そして最後にデザインを作って検討する基本的な流れを知って自分で実践できるようになりましょう。
  • **UI/UX学習のゴール把握:**転職するならポートフォリオが必要、最終的にどんなことをアピールする必要があるのか?をUIUXの本格学習に進む前に把握しておこう

デザインの基本とスタンス「4つのポイント」を身につけよう

  1. デザイン基本原則をインプットしておく
    • デザインの4原則の習得: 表現デザインの基本であるデザインの4原則について学んで基礎的なデザイン表現の法則を学びましょう。
  2. 「ふつうのUI」を真似して上達するスタンスを持つ
    • 参考デザインから盗む方法: UIデザインは「構造」「機能」「見た目」の3要素に分解してデザインを参考にすると扱いやすいです。その盗む目の基本や、UIを普段から見ておくためのデザインの探し方を把握して、日頃からデザインを吸収できる土台を作りましょう
  3. デザイン制作の基本の流れを知っておく
    • 参孝リサーチ → ラフ設計 → パターン出し → 検討評価 → ブラッシュアップ: デザインを作る時は最初はアイデアを広げて徐々に収束する形で検討していくのが基本です。こうすることで適切なアイデアをまず模索し、正しい方向性の表現の質を高めて仕上げていく基本が身につきやすいです。また自分で自分のデザインを評価するスキルを磨くことはデザインを見る目の向上にもつながる大切な要素です。
  4. UI/UXデザイナー転職のゴールイメージを知っておく
    • ポートフォリオ: 実際に作ったUIやプロセスをまとめて公開することで、自分の強みをアピールできる。採用に応募する時に必須になるもの。デザインスキルは採用の足切り要素として機能します。
    • 会社や必要スキルの理解: 制作会社なのか、事業会社なのかなどの会社の特徴や、テック業界の会社を知る方法、またロードマップの元になっている、どういうスキルや内面が採用では評価されるのか、未経験者は特にどういう工夫があると受け入れやすいのかを理解しておくと、学習しながら採用で見せるスキルや素材を貯めながら計画的に学習できる確率が上がります。

“デザインの基本とスタンス”に役立つコンテンツ

BONOの「UIUXデザインコース」ではこのパートのスキルは以下のコンテンツで身につけることを計画しています。

次のステップ

ここで固めた「デザインの基本」「ふつうのUI」「ゴールイメージ」の3つは、今後の学習で何度も役立つ土台になります。

引き続き、UI/UXの3基礎(インターフェース、情報設計、課題解決)を身につけるフェーズへ進みましょう。定番の手法や考え方をベースに、自分のアレンジを効かせられるようになったとき、UIデザインの面白さがさらに広がっていきます。

フェーズ2.UIUXデザイン3つの基礎を習得

ここでは、UIUXを理解するうえで欠かせない3つの基礎要素をコンパクトに紹介します。1つ目は「インターフェース基礎」で、ユーザーが迷わず操作できる画面要素や一貫性・視認性の確保、基本的なUIパターン理解を示します。2つ目は「情報設計基礎」で、ユーザーが求める情報を適切に構造化し、流れを設計する考え方。3つ目は「課題解決基礎」で、ユーザーの課題を発見し、改善策を発想・検証する流れを学びます。ここでは詳細な理論で圧倒しないよう、キーポイントを示すに留めます。深い学習は別記事や学習リソースへつなげ、まずは「UIUXはこの3軸で考える」と理解できれば十分です。

ロードマップフェーズ2の全体像の画像

このフェーズで目指す状態

○ UIを使って顧客の課題解決をするための、最低限必要な「3つの基礎」を習得する

  • UIデザイナーの役割はただ言われたことをUIにするだけの作業的なデザイナーではありません。デザインを武器に、ユーザーが価値を感じるデジタル上の体験を設計するために仕事をすることになります。価値をUIを通して実現するために「3つの基礎」が必要だと考えています。
  • インターフェースの基礎:これはUIの見た目をつくるためのUIデザインの基本になります。UIの見た目を構築する「UIビジュアル基礎」と、UIを操作して基本的な体験を実現する「UI操作の基礎」の2つに分けて考えていきます。
  • 情報設計の基礎:ユーザーはこういうことをしたいからこういう操作や処理をする必要がある、のみがある状態からUIのアイデアを出して体験をデザインする基本を身につけます。実際の業務に最も近い内容です。ユーザーや現場の課題や要件、やりたいことをベースに、そのユーザーにとって使いやすいUIとその体験の形を具体化していくUIデザインの手法です。
  • UXデザインの基礎:顧客のことを理解して顧客の課題を解決するための体験をデザインする基礎を身に付けます。ただUIを作るのではなく”なんのために”、”誰のため”のUIなのかを考えるには、顧客そのものの理解をする経験が不可欠です。少し上流の考えでUI制作からは遠く感じるかもしれませんが、自分が作るUIが誰の何のためになっているのか?を身につける体験設計、課題解決の基本を学びます

【習得1】インターフェース基礎

インターフェース基礎を押さえて、使いやすいUIを実現できるようになろう!

UIデザインを学び始めたばかりの方にとって、最初の大きなハードルになるのが「インターフェース基礎」です。画面をどう構成するのか、ボタンやナビゲーションをどこに置けばユーザーが迷わず操作できるのか、そもそもUIの見た目をどう考えて構築するのか…そんな疑問を解決する土台となるのがこのパート。ここをしっかりと理解しておくと、後から出てくる高度な情報設計やUXデザインの学習もグッとラクになります。

インターフェースの基礎の全体像

このパートのゴール:

  • 理解を確認するためには実際にUIを作りデザインすることが必要です。これらの基礎を使って「SNSアプリ」や「Todoサービス」の基本機能をすべてデザインすることで基礎概念を使用したUIデザインを1度自分で実践できます。理解が深まるでしょう。
  • UIは絵ではなく操作してある体験を提供することで初めて意味を持ちます。なのでこのパートでは基本的な操作をするUIを自分で作れるようになること。そのための基礎知識を身につけて実践しアウトプットすることをテーマにします。

インターフェースの基礎「3要素」を身につけよう

以下の3つを身につけて、”ふつう”のUIの仕組みを学びつつ習得することがゴールです。

①UIを構成するビジュアルの基礎

  • UIの見た目の構成要素:フォントや色、要素の大きさ、余白の取り方など、ビジュアルデザインの仕組みをUIデザインのケースで、仕組み化してコントロールする基本を学びましょう。見た目を構成する要素を1つずつ習得することで、UI自体を見る目の解像度が高まります。
  • 要素の因数分解;タイポグラフィ / 配色 / 余白 / ディスプレイとスクリーンサイズ / 構造・ブロック / 階層 /

③UIの状態変化の基礎

  • 基礎状態変化:エラー表示やホバー時の反応など、ユーザーの行動や状況に応じてUIが変わる場面もあります。こうした”状態”で変化するUIの基本を習得しましょう
  • 「新規作成」「閲覧」「編集」「削除」:よくある操作パターンで変化するUI表現について学びましょう。
  • コンポーネント:また状態変化に合わせてUIの「コンポーネント」という概念の基本についても学びましょう。コンポーネントとはソフトウェア上でUIパーツを使い回す概念のことです。この利点や、違う画面でも同じ役割や状態を示すUIについて学びましょう

②UIの操作の基礎

  • UIの操作の基礎:UIは絵ではなく操作する体験を形作って初めて意味をなします。そのUI操作に必要な基礎概念について抑えましょう。
  • UIとモード:ソフトウェアの操作中に”ある状態に集中する”状態をユーザーに与える「モード」という基礎概念について理解しましょう。主に「作成↔︎閲覧」モード、「選択」モードなどを例にBONOでは理解して行きます。
  • UIとナビゲーション:ユーザーに現在地や前にいた場所、サービス内で可能な操作など、機能のヒントを与えるために重要な「ナビゲーション」について学びましょう。基本的な役割とナビゲーションパターンをBONOでは抑えて行きます。
  • UIとアクション:UIにおける”アクション”の概念について学びましょう。適切なアクションの配置や、操作する対象の”オブジェクト”と操作ボタンの位置関係など、基本的に使いやすいアクションについて学びましょう。

インターフェースの基礎を身につけられる解説&実践コンテンツ

BONOの「UIUXデザインコース」ではこのパートのスキルは以下のコンテンツで身につけることを計画しています。

  • 『ゼロからはじめるUIビジュアル』:UIの見た目を構築する基本と、基本アクションの参考の仕方デザイン方法を実践を通して身につけます。一部無料。
  • 『UIビジュアルの基礎』:UIの見た目を構成する基本要素をダメなUIをリデザインしながら身につけることができます。一部無料。
  • 『使いやすいUIの秘密』:UI操作の基本であるモード/アクション/ナビゲーションなどの基礎要素をNGデザインをリデザインして身につけられます。半分ぐらい無料。

【習得2】情報設計の基礎

情報設計の基礎を押さえて、顧客に寄り添ったUIを実現できるようになろう!

UIデザインで画面の見た目だけ作れるようになっても意味がないです。実際の業務では、「提供するサービス機能をどう画面に落とし込むか?」「ユーザーはどんな操作がイメージしやすいか?」を考えてUIのアイデアを操作の流れと一緒に考えて行きます。つまり、要件や課題をクリアにし、それをUIにきちんと反映させていく力がとても重要です。

このパートでは「要件 → UIのアイデア → ユーザー体験」という流れを筋道立てて考える方法を身につけます。ここをしっかり学べば、プロダクト開発の要望を“使いやすい画面”に落とし込む基礎ができあがり、より実践的なUIデザイン力が養われます。

情報設計の基礎の全体像

このパートのゴール:

  • 「要件をもとにUIアイデアを具体化する」フローを通じて、ユーザーにとって最適な操作や画面構成を導き出せるようになる。なぜそのUIが必要なのか?をユーザー・要件を軸に論理的に考えるデザインフローを習得することに繋がります。
  • 少し複雑なソフトウェアのアイデアを、機能アイデアだけの状態から、ゼロから自分で作成することで、ユーザーと要件を満たすUI作成の流れを身につけることができるでしょう。

情報設計の基礎を身につけよう

① UIモデリング

  • **UIの要件定義:要件を理解→分解しUIに落とす整理するやり方を身につけよう。**作るべき機能の内容だけを考えるのではなく、ユーザーを主語に「ユーザーが何をしたいのか」「何に困っているのか」「どういう操作が必要か」を整理し、それを叶えるために必要な、ユーザーの行動の流れや画面に必要な情報などを洗い出します。
  • **OOUI(オブジェクト指向UIデザイン):**画面を単に“ページ”として見るのではなく、“ユーザーが扱うオブジェクト”に着目して整理すると、機能や情報の優先度をより論理的に決められます。UIの情報設計の基本でオブジェクト中心のやり方を学びましょう

② UIプロトタイピング

  • **プロトタイピング概念の理解:**デザインの強みは完成・リリースする前に具体的な形を作って効果的かどうかを検討できる、点です。40%〜ぐらいの完成度で、達成するべき要素を満たせる具体的な形をパターンを作って検討することを「プロトタイピング」と呼びます。そのデザインフローを学びましょう。
  • **ユーザーの行動フローの可視化:**UIの要件定義で整理した必要な情報を、ユーザーが実際に操作する形に落としましょう。「A画面で入力 → B画面で確認 → C画面で完了」などの遷移や画面同士の関係を”具体的に”洗い出し、問題点があれば早めに修正します。
  • **UIプロトタイプの作成:**UIアイデアをラフにまず形にし、自分や他の人が触ってテストできる状態を作りましょう。要件を整理して得られた情報を元に、今の方向性で機能を満たせるのか?を具体的に検証しながらUIのクオリティ高めていくデザイン制作の流れを身につけましょう。

情報設計の基礎が身につけられるコンテンツ

BONOの「UIUXデザインコース」ではこのパートのスキルは以下のコンテンツで身につけることを計画しています。

  • 『ゼロからはじめる情報設計』:要件を元に、UIの要件定義を作成してUIアイデアに落とす流れを解説して実践できるコンテンツです。要件からユーザーのやりたいことを考えどういうUIにするべきかを考える手法を身につけられます。一部無料。
  • 『OOUI コンテンツ中心のUI設計』:UIの情報設計の基本であるオブジェクト指向を学んで実践できるコンテンツです。オブジェクト中心にUIを設計して操作しやすいUIをつくる考え方を習得します。一部無料。
  • 『UIデザインの基本』:ユーザーの行動に沿ってUIのパターンを作ってプロトタイピングする流れを実践しながら学ぶことができます。一部無料。

【習得3】顧客理解と課題解決の基礎

顧客に価値を提供するデザインの基本を身につけよう

UIデザインと聞くと、どうしても「画面づくり」や「操作性」に目が行きがちです。もちろん使いやすいUIは大切ですが、”使いやすい”はユーザーにとって価値のあるモノである前提のはずです。

ビジネスの現場では「顧客の課題を解決し、顧客にとって価値あるサービスを提供する」ことに向かってデザインを使ったりUIを作るという視点が何より重要です。

このパートでは、UIをただの“見た目”に終わらせないために、顧客のニーズや抱えている課題をしっかり捉え、それを解消する体験デザインへと落とし込む基礎を学んでいきます。非常に難易度の高いスキルで他のスキル同様に完璧に身につけることは求めません。

ただ“顧客が喜ぶサービス体験”を生み出すための顧客中心のデザインの考え方を1度体験することが重要です。
この基本を身につけて、顧客を理解して、課題解決をする素養を身につけることがこのパートのゴールになります。

顧客理解・課題解決の基礎の全体像

このパートのゴール:

  • **体験デザインの基本:**顧客の課題と価値の関係を理解し、UIを超えたサービス体験をデザインできるようになる。「なぜこのUIが必要なのか?」「そもそも顧客がなりたい状態は何か?」を整理し、自分のデザイン、UIが、”誰”の、”何のため”に存在するのかを理解しましょう。。
  • **顧客理解の基本:**インタビューやリサーチを通じて、課題を具体的に把握し、解決策を提案するプロセスを体験する。UIのデザインそのものより、一歩上流の“顧客を理解する”プロセスが大事だと気づけるようになる。
  • **顧客の課題を起点にしたサービスをデザインする:**体験デザインと顧客理解の基本を論理で理解することはとても抽象度が高く難しいです。そのため、その基礎知識と進め方を使って、1度自分で課題を解決するようなサービスや機能をデザインしてみるのが有効です。

体験デザインと顧客理解で、課題解決の基礎を身につけよう

  1. 体験デザインの基本
    • **UXデザインの基本:**UXデザイン=単なる使いやすさ、ではありません。UXデザインもかなり広くBONOでは3つに分解しています。「プロダクトのUX」、「顧客体験のUX」、「戦略のUX」この3つに分けています。単なる操作しやすいUXはプロダクトUXで情報設計までの基礎で考えるべきことです。ユーザーにとって良い体験を作るための「顧客体験のUX」についてこのパートでは学びます。
    • ゴールダイレクテッドデザインの考え方: AboutFaceに紹介されるゴールダイレクテッドのフレームワークをもとに、顧客の抱える課題→価値→体験の関係性を学びましょう。何でもかんでも課題ではなく、ユーザーがなりたい状態にとって邪魔している優先度が高いものが”課題”になります。それを解決する体験を提供していくのがUIデザインの目的です。この関係性を顧客を軸に、体験価値として認識する基礎を身につけましょう。
    • 実践形式で理解: 自分のサービス想定を作り、顧客インタビューなどを通して価値を形にしていくフローを身につけましょう。
  2. 顧客価値と理解の基本
    • 顧客を“知る”重要性: そもそもユーザー本人に質問をしなければ、本当の課題は見えてきません。基本的なインタビューの流れやヒアリングシートの作り方を学びましょう。
    • 課題とは何か?: 何を困りごとと捉えているのかを丁寧に引き出すことで、UIがどのように課題解決に寄与できるかを明確にします。
    • **ユーザーインタビューの基本:**アンケートではなく対面でユーザーのことを知る重要性と、対面インタビューのやり方の基本を学び実践してみましょう。インタビューするべき内容の立て方、インタビューのやり方、まとめ方などをBONOではテンプレートの型を使って学習と実践することが可能です。

顧客理解と課題解決の基礎が身につけられるコンテンツ

BONOの「UIUXデザインコース」ではこのパートのスキルは以下のコンテンツで身につけることを計画しています。

  • 『顧客体験デザインの基本』:ユーザー中心とは?ユーザーが価値を感じる課題解決とは?それを生み出す基本の考え方とは?を学ぶ内容です。About Faceという本に紹介されるゴールダイレクテッドデザインをベースに学んでいきます。
  • 『はじめてのUXデザイン』:ゼロからサービスを作る流れを実際に見ながら、どういうふうに顧客を理解して、課題にヒットする解決策をUIにしていくのかを学びます。実際にインタビューする様子も確認することができます。
  • 『はじめてのユーザーインタビュー』:ユーザーインタビューのやり方を、準備、実施、まとめの全フロー見ながら学ぶことができます。顧客の現状を理解して、課題を発見するインタビューのやり方を学びましょう。
  • 『UXデザインって何』:UXデザインってそもそもなんなのか?を理解する基礎コンテンツです。無料で閲覧することができます。

▼ 次のステップ

習得した3つの基礎は”基本的なUI制作の流れ”になっています。つまりデザインツールからはじめ、この3つの基礎を身につけた状態で、はじめてUIをまとめにデザインする力を得られたことになります。このスキルを使って、次にポートフォリオに乗せるアウトプットを作成して行きましょう。すでに基礎習得の中で作成したアウトプットがあるのであれば、時間がたった今見ると改善できる部分が見つかるでしょう。

今まで学んで身につけたスキルを使って採用でスキルを示すことができるポートフォリオ作成に移って行きましょう

フェーズ3:ポートフォリオをつくろう

基礎スキルが伝わるポートフォリオを作成しよう

基礎理解をアウトプットに落とし込んで、デザイナーとしての強みを可視化!

UIUXを学んできたら、次に待っているのは「実際に何ができるのか?」を示すためのポートフォリオ作成です。これはあなたが持つスキルや思考プロセスを、採用担当者やクライアントに分かりやすく伝えるための必須ツール。

本フェーズでは、インターフェース基礎・情報設計・課題解決の3つの基礎を活かしたアウトプットを具体的に形にしていきます。同時に、ただ作品を並べるのではなく、「なぜそうデザインしたのか」「どんな意図や改善策を考えたのか」を簡潔に言語化する力も身につけるのがポイントです。

このフェーズで目指す状態

最低3つのアウトプットを完成させる

  • UIUXの3つの基礎を示すアウトプット:アウトプットが少ないと再現性が分かりづらいため、最低3つのアウトプットを目指しましょう。複数の例があることで、あなたの思考パターンや強みがよりハッキリ見えます。また、その思考プロセスも言語化してデザインを説明する力やデザインの理解を示しましょう
  • **“どんな人物なのか”が伝わる:**スキルだけでなく、経歴・学習スタンス・チームで働くときの姿勢などもポートフォリオで表現しましょう。採用する側はスキルが高いだけではなく一緒に仕事ができるかなどの要素も評価の対象になります。

ポートフォリオに載せるべき必須項目

  1. アウトプット
    • インターフェース基礎スキルの作品: 配色やボタン配置など、基本的なUIの見せ方が分かるもの。
    • 情報設計基礎スキルの作品: ワイヤーフレームやサービス構造を視覚化した資料など。
    • 顧客理解&課題解決のスキルの作品: 課題を発見し、UIで改善したBefore/Afterの比較など。
  2. 自分自身の紹介
    • 経歴や学習の背景: どんな環境で、どのようにデザインを学んできたのか。今までのキャリアはどういう特徴があるのか
    • デザインへの考え方: 「なぜデザインが好きなのか」「どんな分野に興味があるのか」「どういうデザインをしていきたいのか」などをブログでもポートフォリオ上でも良いのでまとめましょう
    • 成長意欲が伝わるエピソード: 失敗や挫折をどう乗り越えたかなど、ポテンシャルを示すエピソードがあると印象的。

“UIUXポートフォリオ作成”に役立つコンテンツ

BONOの「UIUXデザインコース」ではこのパートのスキルは以下のコンテンツで身につけることを計画しています。

次のステップ

ポートフォリオの内容が固まったら採用応募のフェーズに進みましょう。ポートフォリオ自体はいつまででもクオリティを高めるために時間を使えますが、応募しないと採用されるものもされません。自分で締め切りを作りその範囲でクオリティUPにフォーカスして、次の採用応募のフェーズに進みましょう。

フェーズ4:UIUXデザイン転職活動へ

ポートフォリオが完成したら、いよいよ企業リサーチと応募開始!

ポートフォリオを仕上げたら、あとは実際に転職活動を進めるのみ。しかし、UI/UXデザイナーを募集している企業は思ったよりも多くはありません。特に未経験からの挑戦の場合、いくつかのハードルを越える必要があります。このフェーズでは、**「どれだけの企業に応募すべきか」「興味のある会社の見つけ方」**など、実践的なノウハウを紹介します。

最低30社以上への応募を視野に入れよう

  • 未経験可の企業は少ない「未経験歓迎」と明示している会社は実際はかなり限られています。企業側がデザイナーを採用できる枠も少ないため、そもそも募集枠そのものが少ないのが現状です。
  • 30~50社はトライするのが基本線企業ごとに求めるスキルや強みは異なるため、母数を増やすことで“タイミングや方向性”の合う企業に出会いやすくなります。とくに未経験の場合は“まず話を聞いてもらう”ハードルが高いため、数をこなすことでチャンスを見つけましょう。

なぜそこまでたくさんの会社を受ける必要があるのか?

  1. **未経験枠が公開されているのは少ない:**知名度の高い企業はスキルのある中途デザイナーが自然と集まるため、未経験枠を設ける必要性が薄い。デザイナー採用に苦戦している企業もわざわざ”未経験”を出すとレベルの高い人が応募しづらいので特別出すことは稀。そのため未経験を表で表示してない企業にも応募することで、実は募集している可動化を確認する必要があります。
  2. **会社の状況やタイミング次第:**デザイナー枠が埋まってしまうと募集を打ち切るケースも。内情は外からは見えづらく、こちらから探るのも難しい。
  3. マッチする企業は意外と少ない認知度の低い企業ほどデザイナーの採用に苦戦しがちで、未経験でも育てたいと思ってくれる確率が高い。しかし、そんな企業を自力で探し当てるにはある程度の件数に当たる必要があります。

入りたい会社を探して分析しよう

とりあえず応募数が必要とはいえ、「どんな会社でもいいので雇ってください…」というスタンスだと魅力は半減しますよね。恋愛にたとえるなら“誰でもいい”という人は、なかなか選ばれないのと同じです。なので自分で入りたい会社、自分の経験や興味と相性の良さそうな会社などを調べて、能動的にアプローチすることは必須です。

  • **企業”をリストアップ:**まずは自分が“興味を持てる会社をリストアップしましょう。「自分の好きな領域」「自分がやりたいサービス」「デザインに対して理解がある会社」など、興味のある企業を探す作業は大事。
  • **企業リサーチに役立つサービス:**以下のような企業などを使ってデジタルな会社でデザイナーを求めている会社を探しましょう。
    • Cocodaデザイン組織がある程度整備された企業の情報が公開されている。企業のデザイン思想や事例がまとまっていて、難易度はやや高めだが参考になる。
    • Wantedlyベンチャーやスタートアップの採用情報が多く集まり、UI/UXデザイナー枠で検索しやすい。企業のカルチャーやメンバーの雰囲気を知るのにも便利。
    • note企業の社員が発信していることも多く、現場のリアルな声が見つかる。会社名+デザイナーで検索してみると、新たな気づきがあるかもしれません。

応募する際のポイント

  • 企業がどんな強みを求めているかを把握サービス内容や社風を理解したうえで、「自分のデザイン観がどう役に立つか」を明確にアピールする。
  • 自分のやりたいことを明確にする「この会社で○○を学びたい」「このサービスに共感している」など、企業側に刺さる動機づけを伝えることで、採用の可能性が高まります。

会社選びや採用面接に役立つBONO関連のコンテンツ

メンバー限定の情報:

  • 会社の選び方
  • ZINさんインタビュー:興味のある会社の発見と対策**
  • *公開中:
    • 採用で見られるスキルポイント解説**

“UIUXデザイン転職活動への準備”に役立つコンテンツ

BONOで後悔している転職活動や会社選び関連のコンテンツです。

  • 『ZINさん転職成功インタビュー』:BONOメンバー限定です。ZINさんのインタビュー後半で、いきたい会社の調査と対策、何を考えていたか?を話していますが、全面的に同意する内容です。ここまで準備できたら120点です。
  • 『自分に合う会社の選び方』:当たり前の話ではありますが自分に合う会社を選び情報を集める方法を喋っています。BONOメンバー限定。
  • 『mosさんの転職成功インタビュー』:エージェントの使い方や希望する会社へ応募するコツなどを話しています。BONOメンバー限定。

次のステップ:実際の面接や応募準備へ

  • ポートフォリオと志望動機をしっかりリンクさせる「なぜこのUIを作ったのか?」など、ポートフォリオに込めた想いや学習プロセスを自信を持って説明できるようにしましょう。
  • 企業分析に時間をかけすぎない応募先が定まらないままダラダラとリサーチを続けるのはNG。ある程度のリストができたら、期限を区切って応募しはじめることも大切です。

まとめ:継続的な学習とスキルアップへ

この記事では「BONOボノ」での未経験からUIUXデザイナーに転職するためのロードマップを解説してきました。BONOでは「UIUXデザインコース」でこのロードマップの考えを元に、UIUXデザイナーを目指せる、また、現場経験の浅い人がUIUXデザインの土台を身につけるコンテンツコースを提供しています。

ぜひ興味のある方はコースを利用してスキルを身につけてみてください

『BONO - UIUXデザインコース』はこちら
https://www.bo-no.design/rdm/roadmap-uiuxdesigner

最後にこの記事のまとめを貼っておきます。

時間はかかりますがやれば確実にスキルは身につきます。才能は必要ありません。必要な基礎ロジックを知ってそれを真似してひたすら練習するのみです。ぜひトライしてみてください。

① 未経験からUI/UXデザイナーを目指す全体像を把握する

  • はじめに、UI/UXを学ぶ上でのゴールイメージを持ち、デザインの基礎から転職活動までの道のりを俯瞰しておきましょう。

② まずはFigmaなどデザインツールの操作を身につける

  • 手を動かしながらUIを実際に作る経験が、今後のUI/UX理論を学ぶ際の土台になります。

③ デザイン原則や“ふつうのUI”を真似して基礎を固める

  • 色や余白、タイポグラフィなどの基本や、既存のUIをトレースすることで、短期間でデザインの引き出しを増やしましょう。

④ UI/UXを理解する3つの基礎を押さえる

  • 「インターフェース基礎」「情報設計」「顧客理解と課題解決」の3点を順番に学び、実務に役立つ基礎体力をつけます。

⑤ インターフェース設計で“使いやすさ”を具体化する

  • ボタン配置や画面遷移、状態変化などを考慮し、人が迷わず操作できるUIを設計する力を養いましょう。

⑥ 要件をUIへ落とし込む“情報設計”を身につける

  • ユーザーがどんな流れで機能を利用するのか?を整理し、使いやすいUIに仕上げるための論理的なプロセスを学ぶのがポイントです。

⑦ “顧客理解”を起点にサービス価値を高める

  • どんな人が、何に困っているのか?を把握し、それをUIや体験設計に落とし込むことで“課題解決につながるデザイン”を目指します。

⑧ ポートフォリオ作成でアウトプットを形にする

  • 学んだスキルをまとめ、なぜそのデザインが必要なのかを説明できるように整理します。最低3つの事例を示して再現性をアピールしましょう。

⑨ 転職活動では複数社応募と企業リサーチが必須

  • 未経験からの採用枠は限られるため、数を打ちながら入りたい企業も入念に調べ、相性の良い会社を狙いましょう。

⑩ “箱の考え方”を活用して効率よく学習する

  • この記事で紹介したロードマップの詳細や、顧客理解のフレームワークは、わたしたちのサービスでも体系立てて学べます。ぜひ下記リンクからチェックしてみてください。

UIUXデザイナーになる条件

7
1UI/UXデザイナーになるには
13:15
1UI/UXデザイナーになるには

1UI/UXデザイナーになるには

UIUXデザイナー転職で必要なスキルと要素は何?書類落ちしない条件をプロが解説
Text
UIUXデザイナー転職で必要なスキルと要素は何?書類落ちしない条件をプロが解説

UIUXデザイナー転職で必要なスキルと要素は何?書類落ちしない条件をプロが解説

【2025年版】未経験からUIUXデザイナーへ転職するロードマップ。プロが考えるスキル習得の流れ
Text
【2025年版】未経験からUIUXデザイナーへ転職するロードマップ。プロが考えるスキル習得の流れ

【2025年版】未経験からUIUXデザイナーへ転職するロードマップ。プロが考えるスキル習得の流れ

2. UI/UXデザイン学習ゴール
13:15
2. UI/UXデザイン学習ゴール

2. UI/UXデザイン学習ゴール

UIUXデザイン学習ゴール:スキルとポートフォリオの具体イメージ
10:19
UIUXデザイン学習ゴール:スキルとポートフォリオの具体イメージ

UIUXデザイン学習ゴール:スキルとポートフォリオの具体イメージ

未経験からUIUXデザイナーに転職するのに必要なスキルってどれぐらい?
05:01
未経験からUIUXデザイナーに転職するのに必要なスキルってどれぐらい?

未経験からUIUXデザイナーに転職するのに必要なスキルってどれぐらい?

3. UIUXデザイン学習の進め方
13:15
3. UIUXデザイン学習の進め方

3. UIUXデザイン学習の進め方

UIUXデザイナー転職学習ゴール:3つの基礎が必要な理由
03:47
UIUXデザイナー転職学習ゴール:3つの基礎が必要な理由

UIUXデザイナー転職学習ゴール:3つの基礎が必要な理由

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

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

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

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

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

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

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

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

3. UIUXデザイン学習の進め方
13:15
3. UIUXデザイン学習の進め方

3. UIUXデザイン学習の進め方

現場10年目が教える、未経験からUIUXデザインを勉強する7つのコツ
Text
現場10年目が教える、未経験からUIUXデザインを勉強する7つのコツ

現場10年目が教える、未経験からUIUXデザインを勉強する7つのコツ

デザイン学習の成功率UP「目標設定」のつくり方
13:15
デザイン学習の成功率UP「目標設定」のつくり方

デザイン学習の成功率UP「目標設定」のつくり方

閉じる

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