未経験からUI/UXデザイナーになるには?仕事内容と始めの一歩を現役が解説

2026/06/19
📌 この記事のポイント
UI/UXデザイナーとは「使いやすさを設計する仕事」で、見た目より体験の設計が中心
仕事は情報設計→ワイヤーフレーム→ビジュアルコンセプト→デザインの4工程で進む
未経験者の始めの一歩は「メンターをつける」、経験者は「ポートフォリオの作り方を押さえる」
デザイン力は「いいデザインを分解して言語化する」習慣で伸びる
制作会社か事業会社か、UIかUXかで仕事内容は変わる|自分のやりたいことと照合する
2026年6月19日更新
UI/UXデザイナーは「使いやすさを設計する仕事」|未経験でも始めの一歩は踏める
UI/UXデザイナーとは、Webサービスやアプリの「使いやすさ」を設計する仕事です。見た目を美しくするだけでなく、ユーザーが迷わず目的を達成できるように、情報の並び順や画面の流れまで設計します。未経験からでも、正しい順番で始めれば一歩を踏み出せます。
この記事は、NOT DESIGN SCHOOLのUI・Webメンターのヒデさんが登壇したウェビナー「UI/UXデザイナーへの始めの一歩」の内容をベースに、仕事の全工程となり方を体系化したものです。鹿と人間が仲良くなるアプリという架空の例題を使って、情報設計からデザインまでの流れを実演形式で解説します。
UI/UXデザイナーとは?UIとUXの違いをやさしく解説
UI/UXデザイナーとは、UI(ユーザーインターフェース)とUX(ユーザーエクスペリエンス)の両方を扱うデザイナーのことです。一般的には、Webサービスやアプリといったデジタルプロダクトを担当します。
UIとUXは似た言葉ですが、指している範囲が違います。混同しやすいので、まず整理しておきます。
用語 | 正式名称 | 意味 |
|---|---|---|
UI | ユーザーインターフェース | 商品やサービスと利用者をつなぐ接点(ボタン、画面、文字など) |
UX | ユーザーエクスペリエンス | 利用者が商品やサービスを使ったときの体験全体 |
レストランに例えると分かりやすくなります。UIが「おしゃれな内装や料理の見た目」だとすれば、UXは「注文のしやすさ、提供の速さ、心地よいサービス」までを含んだ体験全体です。
Webデザインとの違いもよく聞かれます。Webデザインは「いかに魅力的に見せるか」というビジュアル表現に重点を置くデザイン、UI/UXデザインは「いかにユーザーに分かりやすく伝えるか」という設計に重点を置くデザイン、と整理するのが分かりやすいです。WebデザインもUI/UXの一部ではありますが、力点が違うと考えると理解しやすくなります。
UI/UXデザイナーの仕事内容|4つの工程で進む
UI/UXデザイナーの仕事は、大きく「情報設計→ワイヤーフレーム→ビジュアルコンセプト→デザイン」の4工程で進みます。ここでは「鹿と人間が仲良くなるアプリを作りたい」という架空の依頼を例に、各工程を見ていきます。
工程1|情報設計(ヒアリングと課題抽出)
情報設計とは、ワイヤーフレームを作る前の土台を固める作業です。事前インプット→ヒアリング→課題抽出→方向性の提示、という流れで進みます。
ヒアリングでは、次のような問いを投げかけます。
今回の依頼の背景はどういうところか
なぜアプリを作りたいと思ったのか
どんなことに困っていて、どんなゴールを持っているのか
鹿アプリの例では、「鹿が害獣のイメージで見られがちで、駆除されることもある。情報発信で偏見をなくし、愛着を持ってもらいたい」という背景が見えてきました。ここから「鹿を身近に感じるローカルメディア」というサービスコンセプトを立て、ターゲット(20〜50代・自然や動物が好きな層)まで言語化します。
実際のプロジェクトでは、情報設計でこれくらいの要素を扱います。
カテゴリ | 扱う内容 |
|---|---|
プロジェクト | 目的・ゴール・全体像の把握・想定KPI・スコープ(予算内でどこまでやるか) |
ユーザー | ペルソナ・ニーズ・利用目的・利用シチュエーション |
リサーチ | 競合のビジネス視点・デザインスタイリングの類似サービス調査 |
コンテンツ | 掲載要素の洗い出し・ユーザー動線の設計 |
ここで大事にしたいのは、最初から完璧に情報収集しようとしないことです。とっつきやすいものから集めて、少しずつ自分ごと化していくほうが進みます。
工程2|ワイヤーフレーム(画面の設計図)
ワイヤーフレームとは、Webサービスやアプリのコンテンツ配置を視覚的に表現した設計図です。ユーザーの行動フローを軸に、重要な体験から中心に広げていくように作ります。
鹿アプリの例なら「記事を見つける→読む→気に入ればブックマークする→他の記事も読む」という行動フローを置き、その下に必要な画面(記事一覧、記事詳細など)を掘り下げていきます。
ワイヤーフレームを作るときのポイントは2つです。
デザイン(見た目)はできるだけ考えず、情報の配置だけを考える
コンセプトを反映できているか、全体の動線が見えるかを確認する
全体像が見えると、新たな気づきや課題が出てきます。制作側とクライアントでサービスの解像度がそろうので、細かいところまで作り切ることに価値があります。
工程3|ビジュアルコンセプト(世界観の方針)
ビジュアルコンセプトとは、デザインの見た目の世界観や雰囲気の方針を定めたものです。サービスコンセプトと言葉が似ていますが、意味が違うので注意します。
コンセプトの種類 | 意味 |
|---|---|
サービスコンセプト | 誰に・何を・どんな価値で届けるのかの設計 |
ビジュアルコンセプト | 見た目の世界観・雰囲気の方針 |
実際の案件では複数案を出すことが多く、鹿アプリの例でも「親しみやすく柔らかいA案」と「リアルな鹿を伝えるドキュメンタリー調のB案」の2案を提示しています。パッと見で世界観が伝わること、キャッチコピーと象徴的なキーワードを添えること、そして文章までUXに基づいて作り込むことがポイントです。
工程4|デザイン(インターフェースの作り込み)
最後がデザイン工程です。ここでは、同じ機能でも複数のUIパターンを比較検討するのが核心になります。
たとえば記事一覧の見せ方ひとつでも、複数の選択肢があります。
UIパターン | メリット | デメリット |
|---|---|---|
カルーセル型 | 画像が大きく直感的に訴求しやすい | 視差が激しく一覧性が低い |
リスト型 | 情報をコンパクトに網羅的に見せられる | 画像が小さくなりがち |
カラム型 | カルーセルとリストのいいとこ取り | 要素設計の調整が必要 |
それぞれのメリット・デメリットを考え、最適なUIを提案するのがデザイナーの役割です。さらに、通信が失敗したときの画面(エラー表示)や、入力中・入力後といった状態(ステート)の表現、エンジニアが実装しやすいコンポーネント整理まで用意します。この工程ではエンジニアとの連携が欠かせず、画面遷移が整ってきたら最初から最後までレビューしてもらいながら、リリースに向けて仕上げていきます。
制作会社と事業会社|働き方で変わる2タイプのデザイナー
UI/UXデザイナーは、働く環境によって大きく2タイプに分かれます。制作会社(クライアントワーク)型と、事業会社(自社サービス)型です。仕事内容がかなり変わるので、最初に知っておくと進路を選びやすくなります。
タイプ | 特徴 | 向いている人 |
|---|---|---|
制作会社(クライアントワーク) | いろいろなプロジェクトにアサインされ、多様なデザインに関われる | 表現力を伸ばしたい・幅広い分野に関わりたい |
事業会社(自社サービス) | 1つのサービスを継続的に改善し、事業成長に貢献する | ビジネス視点で横断的にスキルを伸ばしたい |
制作会社は「作って納めて終わり」になりやすい一方、いろいろなデザインに触れられます。事業会社は1つのサービスをじっくり改善でき、リリース後のグロース(成長)フェーズにも関われます。最近はフルリモートで働ける環境も増えており、住む場所に縛られない働き方も現実的になっています。
【未経験者向け】始めの一歩はメンターをつけること
デザイン歴のない未経験者がUI/UXデザイナーを目指すなら、始めの一歩は「メンターをつけること」です。独学も大切ですが、1人でやり切るのはかなり大変だからです。
未経験者は、学ぶべきことが一度に押し寄せます。デザインの基礎知識、ツールの使い方、UI/UXの専門知識、OSのガイドライン。何から手をつければいいか分からなくなりがちです。だからこそ、最初は伴走者がいると遠回りを減らせます。メンターの役割は次の3つに整理できます。
学習の効率化(努力の方向を間違えないようにする)
デザインのクオリティアップ(フィードバックで質を上げる)
モチベーションの維持(相談相手がいる安心感)
メンターを使うべきタイミングは、ツールで分からない部分が出たとき、知見がなくヒントが欲しいとき、考えても沼にハマって時間が解けてしまうときです。メンターの探し方は主に3つあります。
探し方 | 特徴 |
|---|---|
デザインスクール | メンターが多数在籍・学習カリキュラムやサポート体制が整う・生徒同士の交流もある |
個人契約のスキルシェア。Web・UI/UX・ロゴなど分野で探せる。平均契約価格帯は約1.4万円(手数料あり) | |
継続のメンタリングより、単発のスポットレビュー寄り。制作物にプロのレビューをもらえる |
もち自身も、スクールやメンターを「努力の方向を補正する装置」として使うのは未経験者ほど有効だと感じています。
【経験者向け】始めの一歩はポートフォリオの作り方を押さえること
デザイン歴のある経験者がUI/UXに移るなら、始めの一歩は「過去の制作物をUI/UX向けに加工してポートフォリオに活かすこと」です。新しくアプリを作るチャレンジも良いですが、もったいないので手持ちの実績を使う発想から始めます。
UI/UXのポートフォリオで示すべき力は、次の3つ+αです。
ユーザー視点での思考力・設計力(誰が・何に困り・何を求め、その解決になっているか)
プロセスを説明する力(考えた筋道を分かりやすく伝える)
ビジュアル力(見た目を整える基礎力)
(+α)協業力(他職種と関わった経験のアピール)
ポートフォリオ自体もデザインする必要があります。文字だらけで背景をびっしり書くのではなく、適度な文章と差し絵で「読ませる」工夫をします。採用担当者は忙しいので、分かりやすさが評価に直結します。
協業力は、過去実績の伝え方を工夫するだけで示せます。たとえば「デザイン制作をしました」を、こう言い換えます。
マーケターと連携し、ユーザーインサイトに基づいたUI改善を実施。離脱率の高かった動線を見直し、LPのCVR(成約率)を改善しました
ディレクターと連携し、要件定義から関わることでユーザー体験を意識したプロダクト設計を実現しました
数字や連携相手を具体的に書くと、同じ実績でも伝わり方が変わります。
デザイン力を伸ばす「雰囲気の分解」スキル
デザイン力を伸ばす近道は、「いいデザインの雰囲気を分解して言語化する」習慣です。デザインの印象は、いくつかの要素の組み合わせで成り立っているからです。
雰囲気を構成する基本要素は、次の4つです。
要素 | 内容 |
|---|---|
タイポグラフィ(文字) | フォント・太さ・行の高さ・文字間 |
ビジュアル(画像) | 写真・イラストなど |
シェイプ(形) | 丸・三角・四角などの形 |
カラー(色) | 赤・青・黄などの配色 |
この4要素に、レイアウト(配置)・サイズ・インタラクション(動き)が掛け合わさって、全体の雰囲気が決まります。やり方はシンプルで、好きなデザインを集めて「なぜいいのか」を言語化する。これを繰り返すだけです。
ポイントは、「いけてる」で止めずに一段深く言語化することです。
洗練されていていけてるのか
親しみやすくていけてるのか
シンプルだからいけてるように見えるのか
形容詞を使って分解すると、後で自分のデザインに応用しやすくなります。脳内にパターンのストックがたまると、「高級感を出すなら余白を広めに」「ビジネス感ならゴシック体」のように、自分なりのデザインの引き出しが増えていきます。NOT DESIGN SCHOOLでも、この「分解→言語化」はセンスを後天的に鍛える基本として大事にしている考え方です。
もちが運営しているスクールの記事でも、この考え方を深掘りしています:デザインセンスは「磨ける」|分解と再現で鍛える練習法
UI/UXデザイナーの年収のリアルと求人の探し方
UI/UXデザイナーの年収は、グラフィックデザイナーやWebデザイナーよりやや高い傾向があります。デザイン力に加えて、ビジネスや情報設計といった上流の頭の使いどころが多いことが背景にあると考えられます。
ただし環境によって差があります。同じUI/UXデザイナーでも、制作会社は比較的控えめ、事業会社は資金力などの事情で高めの傾向が見られます。求人を探すときは、まず「自分のやりたいこと・できること」を明確化し、会社の働き方や求められることと照らし合わせる「マッチング」が大切です。仕事内容が変わる代表的な3つの違いを押さえておきます。
制作会社か事業会社か(多様な案件か、1サービスの改善か)
UIデザイナーかUXデザイナーか(ビジュアル中心か、リサーチ中心か)
会社の規模(分業されているか、1人で何でもやるか)
求人の探し方は、求人サイトが中心(体感で9割ほど)で、SNSやキュレーションメディアも使えます。
探し方 | 特徴 |
|---|---|
ミッションや価値観への共感でマッチング。ストーリー形式の求人が読みやすい。利用36,000社以上、利用者の約80%が30代以下でスタートアップ・ベンチャーが多い | |
IT/Web業界に強い一般的な求人フォーマット。会社規模の幅が広い | |
デザイン会社グッドパッチが運営。2018年5月開始で6,000デザイナー・600社が利用。求人サイトかつエージェントで、サポートが手厚い | |
信頼ベースのキャリアSNS。2026年2月時点で登録約45万人・1,800社導入、デザイナーは利用者の約10%。カジュアル面談から始めやすい | |
キュレーションメディア | Web Design Clip・参考などのまとめサイトで、デザインスタイリングのうまい制作会社を見つけて直接コンタクトする使い方もできる |
SNSで「デザイナー募集」と検索し、結果タブを最新に切り替えると、出たばかりの求人が見つかることもあります。
おすすめ勉強ツール・作業環境グッズ
UI/UXデザインの学習効率は、ツールと作業環境で大きく変わります。ウェビナーで紹介された実用的なものを、勉強ツールと作業環境グッズに分けて紹介します。
勉強ツール3選
ツール | 用途 | ポイント |
|---|---|---|
デザイン参考画像の収集・管理 | 買い切り34.95ドル(約5,000円・2024年10月改定)。1ライセンスで2台までOK。ブラウザ拡張でドラッグ&ドロップ保存、URLと色情報も一緒に保存できる | |
UIの基本パーツを覚える | ブログ内のクイズ形式。初級・中級・上級があり、パーツ名を遊びながら覚えられる | |
UIの実例集め | 30万スクリーン以上・1,000以上のアプリ・300以上の業種を収録。カードやボトムシートなどUI種別でフィルタリングできる |
実務寄りの教材としては、グッドパッチが2025年6月に公開した無償のデザインシステム「Sparkle Design」も参考になります。16プロジェクトでの導入で作業時間が約54%削減されたと報告されており、Figma Communityからダウンロードして、ファイルの作り方やコンポーネント整理を学べます。
作業環境グッズ
作業環境を整えると、集中の質が変わります。
昇降デスク:座り作業と立ち作業を切り替えてメリハリをつける。高さをメモリー登録できるタイプが便利
ながら運動グッズ:立ち作業中にバランスボードやEMSなどで運動不足を解消する
骨盤サポートクッション:長時間の同じ姿勢で姿勢が崩れるのを防ぐ
よくある質問(FAQ)
Q. 未経験からUI/UXデザイナーになるのは難しいですか?
デザイン経験が全くない完全未経験からは、ハードルが高めです。一方で、スタートアップのインターン募集など入口がないわけではありません。デザインの基礎を固めてから挑むか、メンターやスクールで方向を補正しながら進めると、現実的になります。
Q. UI/UXデザイナーになるには地方在住だと不利ですか?
以前より不利ではなくなっています。フルリモートで募集している企業も増えており、住む場所に縛られない働き方が現実的になっています。デザイナーの人数が多く教育体制が整い、ジュニアを募集している会社は比較的入りやすい傾向があります。
Q. WebデザインができるようになってからでないとUI/UXはできませんか?
その必要はありません。ビジュアルデザインを磨いてから移る道もありますが、エンジニアなどデザインのバックグラウンドなしで活躍している人もいます。ユーザー視点での思考力・設計力と、ある程度のビジュアル力があれば始められます。
Q. UI/UXデザインで使うツールは何ですか?
主にFigma(フィグマ)です。最近はClaude CodeやCodexなどのコーディングAIエージェントを利用も増えているので押さえておきたい所です。
Q. UI/UXデザイナーとして成長するには何をすればいいですか?
Webサービスやアプリを数多く見て、実際に触ることです。アプリストアの上位を片っ端からダウンロードして使い、特に「1回しか見られないオンボーディング画面」はスクリーンショットで保存しておくと、実務で役立ちます。最近ではAIを使ったバイブコーディングによる個人開発も勉強におすすめです。
Q. グラフィックデザイナーからのキャリアチェンジは可能ですか?
可能です。むしろビジュアルが得意なグラフィックデザイナーは、UI/UXの現場で強い武器になります。これまでの経験を活かしながら、ユーザー視点の設計力を足していく形で移行できます。
パーソナライズ型デザインカリキュラムでAIの学習も!
NOT DESIGN SCHOOLのパーソナルコースなら、あなた専用のオーダーメイドカリキュラムで、最短6ヶ月で実務レベルのデザイナーへ。AIの学習コンテンツや勉強会も充実!まずは無料相談から。

TOPに戻る
\Slackで個別相談受付中/

最短6ヶ月で「自分に必要なスキル」だけを集中して身につけるNOTのパーソナルコース。
🆕 新着記事

【生徒インタビュー】独学デザイナーの最大の壁は「言語化」だった|ことちゃんが6ヶ月で掴んだ4つの転機

【検証】ChatGPTバナーがAIっぽくなる5つの癖|15人以上で同じお題を作って見えた脱AI化テクニック

Studio スクロールエフェクト入門|パララックス・スクロール連動アニメの作り方を解説

「もう遅い」って誰が決めた?30代・40代デザイナーのキャリア戦略

作字のやり方5ステップ|Procreateで名前ロゴを作る実践ガイド【2026年6月最新】

イラレのアピアランス入門ガイド|基本操作・袋文字の作り方・NG例5つを紹介

Figma Design Agentの使い方解説|キャンバス上でAIがデザインを直接編集する新時代の使い方【2026年5月最新】

Framer×Figma×Studio徹底比較|デザイナーが案件別に選ぶ3ツールの正解【2026年5月最新】
🔥 短期講座 現在ウェイティングリスト受付中!

Figmaマスター動画講座
基礎から応用までFigmaの使い方をマスター
全50レッスン以上 / 動画 17時間以上

Studioマスター動画講座
基礎からCMSまでStudioの使い方をマスター
全40レッスン以上 / 練習課題 収録

Framerマスター動画講座
基礎から高度なアニメーションまでFramerの使い方をマスター
全25レッスン以上 / 完全日本語解説

作字マスター動画講座
iPadのProcreateをつかった作字のつくり方をマスター
全7レッスン / 7時間の動画

第一線で活躍するデザイナーたちの仕事観や価値観をディープに深堀りする対談ポッドキャスト
✍ 受講生の学習記録も更新中!











