Webデザイン独学ロードマップ｜未経験から案件獲得まで
Webデザイン完全未経験から独学で案件獲得した筆者が、最短ルートで稼げるWebデザイナーになる方法を徹底解説。学ぶべきツール、ポートフォリオ制作、案件獲得まで全てわかります。
「Webデザイナーになりたいけど、独学でも本当になれるの？」
この疑問、めちゃくちゃよくわかります。
僕も2年前は、デザインなんて全くの素人でした。Photoshopも触ったことない。Illustratorって何？みたいなレベル。
でも、独学で勉強を始めて、8ヶ月後には初案件を獲得。今では月20万円以上をWebデザインの仕事で稼げるようになりました。
この記事では、Webデザイン完全未経験から、独学で案件を獲得するまでの完全ロードマップを公開します。
「何を学べばいいのか」「どんなツールが必要なのか」「どうやって案件を取るのか」——このリアルな部分を、包み隠さず全部話します。
美大卒じゃなくても大丈夫。センスがなくても大丈夫。正しいステップで学べば、未経験でも6〜12ヶ月で案件獲得レベルに到達できるというのが僕の実感です。
最後まで読めば、「よし、自分もWebデザイナーになれるかも」と思えるはずです。
Webデザイナーとは？具体的な仕事内容を理解しよう
まず、「Webデザイナーって何をする仕事？」という基本から整理しておきます。
Webデザイナーの仕事内容
Webデザイナーの仕事は、大きく分けて3つ。
1. Webサイトのデザイン制作
企業サイト、LP（ランディングページ）、ECサイトなどの見た目のデザインを作ります。
具体的には、
- レイアウト設計（どこに何を配置するか）
- 色の選定（ブランドカラーに合わせた配色）
- フォント選び（読みやすく、雰囲気に合ったフォント）
- 画像の加工（写真の切り抜き、補正など）
こういった作業を、FigmaやAdobe XD、Photoshopなどのツールを使って行います。
2. UIデザイン（ユーザーインターフェース）
WebサイトやWebアプリのボタン、メニュー、フォームなどのデザインを作ります。
「使いやすさ」「わかりやすさ」を重視して、ユーザーがストレスなく操作できるようにデザインします。
3. コーディング（HTML/CSS）
デザインを作るだけじゃなく、実際に動くWebサイトにする作業（コーディング）もWebデザイナーの仕事です。
HTML/CSSを使って、デザインを再現します。
ただし、企業によっては、「デザインだけやる人」と「コーディングだけやる人」が分かれていることもあります。
Webデザイナーとグラフィックデザイナーの違い
よく混同されますが、Webデザイナーとグラフィックデザイナーは違います。
| 項目 | Webデザイナー | グラフィックデザイナー |
|---|---|---|
| 制作物 | Webサイト、Webアプリ | ポスター、チラシ、パンフレット |
| 媒体 | デジタル（Web） | 紙媒体（印刷物） |
| 使うツール | Figma、Adobe XD、Photoshop、Illustrator | Photoshop、Illustrator、InDesign |
| スキル | HTML/CSSの知識も必要 | 印刷知識が必要 |
もちろん、両方できる人もいますが、Webデザイナーのほうが案件数が多く、稼ぎやすいというのが現実です。
Webデザインを体系的に学びたい方へ
独学だと「何から学べばいいかわからない」と迷いがち。プロのデザイナーから直接学べるスクールなら、最短3ヶ月で案件獲得レベルに到達できます。
Webデザインスクールを見る →Webデザイン独学ロードマップ｜未経験から案件獲得まで
「よし、Webデザイナーになろう！」と思っても、何から始めればいいのかがわからないと動けないですよね。
ここでは、未経験から案件を獲得するまでのロードマップを、ステップごとに解説します。
STEP1：デザインの基礎知識を学ぶ（2週間）
いきなりツールを触る前に、まずデザインの基礎理論を学びましょう。
センスがなくても大丈夫。デザインには「ルール」があるんです。このルールを知れば、誰でもそれなりのデザインが作れるようになります。
学ぶべき基礎知識：
- 4大原則（近接、整列、反復、対比）
- 色彩理論（配色の基本、色相環、トーン）
- タイポグラフィ（フォントの選び方、文字間隔）
- レイアウト（グリッドシステム、余白の使い方）
おすすめ教材：
- 書籍『ノンデザイナーズ・デザインブック』（Robin Williams著）
- 書籍『なるほどデザイン』（筒井美希著）
- YouTube『DesignCourse』（英語だけど字幕あり）
この段階では、手を動かす必要はありません。まずは「デザインの見方」を学ぶことが大事。
STEP2：Figmaの使い方を学ぶ（2週間）
次に、デザインツールを学びます。
Webデザインツールは、主に以下の4つ。
- Figma（無料、ブラウザで動く、チーム共有が簡単）
- Adobe XD（無料プランあり、Adobeユーザーなら使いやすい）
- Photoshop（有料、画像加工に強い）
- Illustrator（有料、ロゴ・アイコン制作に強い）
初心者に一番おすすめなのは、Figmaです。
理由は、
- 無料で使える（有料プランもあるけど、個人利用なら無料で十分）
- ブラウザで動く（インストール不要）
- 日本語の情報が多い（学習しやすい）
- 業界標準（企業でもよく使われている）
Photoshopも便利ですが、月額3,000円くらいかかるので、まずはFigmaから始めるのがおすすめ。
学習内容：
- 基本操作（図形ツール、テキストツール、レイヤー操作）
- コンポーネント（再利用できるパーツ）
- プロトタイプ（クリックしたら画面遷移するデモ）
- 画像の書き出し（PNG、JPG、SVG形式で保存）
おすすめ教材：
- Figma公式チュートリアル（日本語対応）
- YouTube『Figma入門講座』
- Udemy『Figma完全攻略』
この段階で、簡単なWebページのデザインなら作れるレベルになります。
STEP3：優れたデザインを模写する（3週間）
デザインの上達に一番効果的なのは、模写です。
「え、パクリじゃん」と思うかもしれませんが、模写は学習目的ならOK。むしろ、プロのデザインを模写することで、デザインの引き出しが増えます。
模写するサイトの選び方：
- Pinterest、Dribble、Behanceで「Web Design」を検索
- 自分が「かっこいい！」と思ったデザインを選ぶ
- LPやコーポレートサイトなど、実案件に近いものを選ぶ
模写のやり方：
- 模写したいサイトのスクリーンショットを撮る
- Figmaで、そのデザインを完全再現する
- 色、フォント、余白、画像の配置まで、全て同じにする
最初は時間がかかります。1つのデザインを模写するのに、3〜5時間かかることもある。でも、これを5〜10個やると、デザインの感覚が身につきます。
僕も最初は、3つくらい模写しました。これだけでも、デザインの見方が変わりました。
独学で挫折しそうな方へ
模写だけだと「これで合ってるのかな？」と不安になりがち。プロのデザイナーからフィードバックをもらえる環境なら、成長スピードが3倍以上になります。
フィードバック付きスクールを見る →STEP4：HTML/CSSを学ぶ（3週間）
Webデザイナーとして案件を取るなら、HTML/CSSは必須です。
「え、デザインだけじゃダメなの？」と思うかもしれませんが、デザインだけの案件は少ないです。ほとんどの案件は、「デザイン + コーディング」がセット。
HTML/CSSができると、案件の単価も上がります。
学習内容：
- HTMLの基本タグ（h1, p, div, a, imgなど）
- CSSの基本プロパティ（color, font-size, margin, paddingなど）
- Flexbox、Gridを使ったレイアウト
- レスポンシブデザイン（スマホ対応）
おすすめ教材：
- Progate（HTML/CSS初級・中級・上級）
- ドットインストール（HTML/CSS入門）
- 書籍『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』
学習のコツ：
- 毎日1〜2時間は手を動かす
- 教材を読むだけじゃなく、実際にコードを書く
- わからないところはGoogle検索で調べる
この段階で、デザインをコーディングして、Webサイトとして公開できるレベルになります。
STEP5：オリジナルデザインを3つ作る（4週間）
模写だけだと、「自分でデザインを作る力」が身につきません。
なので、次はオリジナルデザインを作りましょう。
作るべきデザイン：
- 自分のポートフォリオサイト（プロフィール、作品一覧、お問い合わせ）
- 架空のカフェのLP（店舗紹介、メニュー、アクセス）
- 架空のコーポレートサイト（会社概要、サービス紹介、お問い合わせ）
「架空でいいの？」と思うかもしれませんが、全然OKです。
クライアントが見たいのは、「このデザインが作れるか」「このレベルのサイトが作れるか」であって、実案件かどうかは関係ありません。
オリジナルデザイン作成のコツ：
- 既存のサイトを参考にする（パクリはダメだけど、参考にするのはOK）
- 配色はAdobe Colorなどのツールで決める
- フォントはGoogle Fontsから選ぶ（無料で使える）
- 画像は無料素材サイト（Unsplash、Pixabayなど）を使う
この段階で、ポートフォリオが完成します。これがあれば、案件営業ができる。
STEP6：クラウドソーシングで初案件を取る（2〜4週間）
ポートフォリオができたら、いよいよ案件営業です。
初心者が案件を取るなら、クラウドソーシングが一番やりやすい。
おすすめのクラウドソーシングサイト：
- ランサーズ：国内最大級。案件数が多い。
- クラウドワークス：ランサーズと同じく大手。
- ココナラ：「サービスを出品する」形式。待ちの営業ができる。
初案件を取るコツ：
- 低単価の案件から始める：最初は3万円以下の案件を狙う
- 提案文を丁寧に書く：テンプレではなく、相手の課題を理解した提案をする
- 実績がないことを正直に伝える：「初心者ですが、全力で対応します」と誠実に伝える
- ポートフォリオを見せる：URLを提案文に貼る
最初は10件提案して1件通ればいいほう。でも、諦めずに提案し続ければ、必ず案件は取れます。
僕も最初は15件くらい提案して、ようやく1件取れました。
まとめ：独学で案件獲得までの期間
| ステップ | 期間 | やること |
|---|---|---|
| STEP1 | 2週間 | デザインの基礎知識を学ぶ |
| STEP2 | 2週間 | Figmaの使い方を学ぶ |
| STEP3 | 3週間 | 優れたデザインを模写する |
| STEP4 | 3週間 | HTML/CSSを学ぶ |
| STEP5 | 4週間 | オリジナルデザインを3つ作る |
| STEP6 | 2〜4週間 | 初案件獲得 |
合計：約4〜6ヶ月（1日1〜2時間の学習が前提）
Webデザイン案件の種類と相場
「Webデザインで稼ぐって、具体的にどんな案件があるの？」
ここでは、初心者でも取りやすい案件ジャンルと相場を紹介します。
1. LP（ランディングページ）デザイン
相場：5万〜20万円 難易度：★★☆☆☆ 必要スキル：Figma、Photoshop、HTML/CSS
LPは、1ページ完結の縦長サイトです。
商品やサービスの紹介ページとして使われることが多く、企業からの需要がめちゃくちゃ高い。
1ページだけなので、コーポレートサイトよりも工数が少なく、初心者でも取り組みやすい。
僕も最初はLP制作から始めました。
2. バナー制作
相場：1枚3,000円〜1万円 難易度：★☆☆☆☆ 必要スキル：Figma、Photoshop、Illustrator
バナーは、広告用の画像です。
サイズは様々ですが、よくあるのは300×250px、728×90pxなど。
単価は低いですが、数をこなせば稼げます。初心者が最初に実績を作るのに最適。
3. コーポレートサイトデザイン
相場：10万〜50万円 難易度：★★★☆☆ 必要スキル：Figma、Photoshop、HTML/CSS、WordPress（場合によって）
企業の公式サイト（会社概要、サービス紹介、お問い合わせなど）を作る案件。
ページ数が多い分、LPよりも難易度は上がりますが、報酬も高くなります。
実績が2〜3件できたら、コーポレートサイト案件にも挑戦してみましょう。
4. UIデザイン（Webアプリ）
相場：20万〜100万円 難易度：★★★★☆ 必要スキル：Figma、Adobe XD、UIデザインの知識
WebアプリやSaaSのUI（ユーザーインターフェース）をデザインする案件。
「使いやすさ」が重視されるので、デザインだけでなく、UXの知識も必要。
難易度は高いですが、単価も高いです。
5. ノーコードツール（STUDIO、Webflow）
相場：5万〜30万円 難易度：★★☆☆☆ 必要スキル：STUDIO、Webflowなどのツール操作
最近増えてるのが、ノーコードツールを使った案件。
STUDIO、Webflowなどのツールを使えば、コードを書かずにWebサイトが作れます。
デザインが得意だけどコーディングが苦手な人には、こっちのほうが向いてるかもしれません。
最短で案件獲得したい方へ
独学だと遠回りしがちですが、プロの指導を受けることで最短3ヶ月で案件獲得レベルまで到達できます。案件紹介サポートがあるスクールなら、卒業後すぐに稼げます。
案件紹介付きスクールを見る →Webデザイン独学で挫折しないための5つのコツ
ここまで読んで、「よし、やってみよう！」と思った人も多いと思います。
でも、正直に言うと、**独学の挫折率は約90%**と言われています。
僕自身、何度も挫折しかけました。その経験から、「これだけは守ってほしい」というコツを5つ挙げます。
1. 完璧主義にならない（60点でOK）
デザイン学習で挫折する人の多くは、完璧主義が原因です。
「完璧なデザインができるまで、次に進めない」と思ってると、いつまで経っても前に進めない。
重要なのは、60点でいいから前に進むこと。
最初から100点のデザインなんて作れません。まずは60点のデザインを作って、徐々に改善していく。これが成長の近道。
2. 毎日少しでもいいから手を動かす
プログラミングと同じで、デザインも毎日続けることが大事。
1日3時間を週1回やるより、1日30分を毎日やるほうが、圧倒的に身につきます。
「今日は疲れたから休もう」と思うと、そのまま3日、1週間、1ヶ月…と休んでしまって、結局やめてしまう。
最低でも1日30分は、デザインに触れる時間を作りましょう。
3. 既存のデザインを参考にする（ゼロから作らない）
初心者がやりがちなミスが、ゼロからデザインを作ろうとすること。
これ、めちゃくちゃ難しいです。プロでも、ゼロからデザインを作ることは少ない。
プロは、既存のデザインを参考にして、アレンジするんです。
なので、最初は既存のデザインを参考にしましょう。
- Pinterest、Dribble、Behanceで「Web Design」を検索
- 自分が「かっこいい！」と思ったデザインをブックマーク
- そのデザインを参考にして、オリジナルを作る
これが、デザイン上達の王道です。
4. フィードバックをもらう
独学の最大の弱点は、フィードバックがもらえないこと。
自分では「いいデザインができた！」と思っても、プロから見たら「ここがダメ」というポイントがあるかもしれない。
フィードバックをもらう方法は、
- SNS（Twitter、Instagram）で #デザイン添削 をつけて投稿
- オンラインコミュニティ（デザイナーのSlackグループなど）で意見をもらう
- ココナラで「デザイン添削サービス」を利用する
- プログラミングスクールのメンターに見てもらう
特に、プロのデザイナーからフィードバックをもらえる環境があると、成長スピードが段違いに速くなります。
5. トレンドを追いかけすぎない
Webデザインには、トレンドがあります。
今流行ってるデザインは、グラスモーフィズム、ニューモーフィズム、ダークモードなど。
でも、初心者がトレンドを追いかけすぎると、基礎がおろそかになります。
まずは、基礎をしっかり固めること。トレンドは、基礎ができてから追いかければOK。
Webデザイナーに必要なツール一覧
「Webデザインって、どんなツールが必要なの？」
ここでは、Webデザイナーが使う代表的なツールを紹介します。
1. デザインツール
Figma（★★★★★ 超おすすめ）
- 料金：無料（個人利用なら十分）
- 特徴：ブラウザで動く、チーム共有が簡単、日本語対応
- 用途：Webサイトのデザイン、UIデザイン、プロトタイプ
一番おすすめ。無料で使えるし、業界標準になりつつある。
Adobe XD
- 料金：無料プランあり（機能制限あり）
- 特徴：Adobeユーザーなら使いやすい、動作が軽い
- 用途：Webサイトのデザイン、UIデザイン、プロトタイプ
Figmaと似た機能。どっちを使ってもOKだけど、最近はFigmaのほうが人気。
Photoshop
- 料金：月額2,728円（フォトプラン）
- 特徴：画像加工に強い、業界標準
- 用途：写真の切り抜き、色調補正、バナー制作
画像加工をするなら、Photoshopが一番便利。でも有料なので、予算がないなら後回しでOK。
Illustrator
- 料金：月額2,728円（単体プラン）
- 特徴：ロゴ・アイコン制作に強い
- 用途：ロゴ制作、アイコン制作、イラスト制作
ロゴやアイコンを作るなら必須。でも初心者がすぐに使うことは少ない。
2. コーディングツール
Visual Studio Code（VSCode）
- 料金：無料
- 特徴：軽い、拡張機能が豊富、日本語対応
- 用途：HTML/CSSのコーディング
コーディングするなら、これ一択。無料で使えるし、機能も充分。
3. その他の便利ツール
Adobe Color
- 料金：無料
- 用途：配色の決定
色の組み合わせを自動で提案してくれるツール。センスがなくても、良い配色が作れる。
Google Fonts
- 料金：無料
- 用途：フォント選び
無料で使える日本語フォント・英語フォントが揃ってる。商用利用もOK。
Unsplash、Pixabay
- 料金：無料
- 用途：画像素材
無料で使える高品質な写真素材サイト。商用利用もOK。
最初に揃えるべきツール（予算別）
予算0円の場合：
- Figma（無料）
- VSCode（無料）
- Adobe Color（無料）
- Google Fonts（無料）
- Unsplash（無料）
予算5,000円/月の場合：
- 上記 + Adobe Creative Cloud（月額6,480円）
予算がないなら、無料ツールだけでも十分です。僕も最初は無料ツールだけでやってました。
Webデザインで稼ぐには？副業・転職・フリーランスの道
「Webデザインを学んだら、どうやって稼げるの？」
ここでは、Webデザインで稼ぐ3つの道を紹介します。
1. 副業で月5〜20万円
一番現実的なのが、Web制作の副業です。
具体的には、
- LP（ランディングページ）制作：1件5万〜20万円
- バナー制作：1枚3,000円〜1万円
- コーポレートサイト制作：1件10万〜50万円
こういった案件を、クラウドソーシング（ランサーズ、クラウドワークスなど）で受注します。
Webデザインができれば、月5万円くらいは十分稼げます。
詳しくは、プログラミング副業の始め方の記事を参考にしてみてください。
2. Webデザイナーとして転職
Webデザインを極めれば、Webデザイナーとして転職できます。
Webデザイナーの平均年収は、350万〜500万円（経験3年程度）。
フリーランスになれば、年収600万円以上も狙えます。
3. フリーランスWebデザイナーとして独立
実務経験を2〜3年積んだら、フリーランスWebデザイナーとして独立する道もあります。
フリーランスのWebデザイナーの相場は、月額40万〜60万円（週5日稼働）。
年収換算で480万〜720万円です。
スキル次第では、月額80万円超えも可能。
最短でスキルを身につけて稼ぎたい方へ
独学だと遠回りしがちですが、プロの指導を受けることで最短3ヶ月で案件受注レベルに到達できます。スクール選びで迷ったら、無料カウンセリングで相談してみましょう。
最短ルートで稼ぐ方法を見る →Webデザインとプログラミング、どっちを学ぶべき？
「Webデザインとプログラミング、どっちを学べばいいの？」
これ、初心者からよく聞かれる質問です。僕の答えは、「やりたいこと」で決めろ。
Webデザインを選ぶべき人
- 見た目を作るのが好きな人
- 色やレイアウトにこだわりがある人
- センスを活かしたい人
- デザイナーになりたい人
Webデザインは、視覚的な創造が好きな人に向いてます。
プログラミングを選ぶべき人
- 論理的に考えるのが好きな人
- 仕組みを作るのが好きな人
- エンジニアになりたい人
- 高収入を狙いたい人（エンジニアのほうが平均年収が高い）
プログラミングは、論理的思考が得意な人に向いてます。
結論：どっちも学べばいい（順番を決めるだけ）
正直、Web制作を本気でやるなら、どっちも学ぶことになります。
順番の話をしているだけで、どちらか片方しか学べないわけじゃない。
もし迷ったら、
- デザインが好き → Webデザイン先
- プログラミングが好き → プログラミング先
この基準で決めてOKです。
独学ロードマップの記事も参考にしてみてください。
よくある質問（FAQ）
Q1. センスがなくてもWebデザイナーになれる？
A. はい、なれます。
デザインは「センス」じゃなくて、「ルール」を知ってるかどうかです。
4大原則（近接、整列、反復、対比）、色彩理論、タイポグラフィを学べば、センスがなくてもそれなりのデザインが作れます。
Q2. 美大卒じゃないとダメ？
A. 全然ダメじゃありません。
僕も美大出身じゃないし、周りのWebデザイナーも、ほとんどが独学か専門学校出身です。
美大卒である必要は、まったくありません。
Q3. 何歳からでも始められる？
A. 何歳でも始められます。
僕は30代で始めましたし、40代、50代で始める人もいます。
年齢は関係ありません。
Q4. Macじゃないとダメ？Windowsでもできる？
A. Windowsでも全然できます。
Figma、VSCodeは、WindowsでもMacでも動きます。
ただし、Adobe製品（Photoshop、Illustrator）は、Macのほうが動作が安定してる印象があります。
Q5. どれくらいの期間で稼げるようになる？
A. 学習時間の目安は以下の通り。
- 基礎スキルの習得：2〜3ヶ月（1日1〜2時間）
- ポートフォリオ制作：1〜2ヶ月
- 初案件獲得：4〜6ヶ月
- 月5万円達成：6〜12ヶ月
ただし、これは「毎日コツコツ学習した場合」の話。週末だけだと、もっと時間がかかります。
Q6. プログラミングスクールに通うべき？
A. 独学で挫折しそうなら、スクールはアリです。
特に、
- 質問できる環境がほしい
- 最短で実務レベルになりたい
- 案件紹介サポートがほしい
という人には、スクールがおすすめ。
ただし、スクールは高額（30万〜80万円）なので、まずは独学で1〜2ヶ月やってみて、「これは無理だ」と思ったらスクールを検討するのが良いと思います。
詳しくは、プログラミングスクール比較記事を参考にしてください。
まとめ：Webデザインは独学でも稼げる
長くなりましたが、ここまで読んでくれてありがとうございます。
最後にもう一度、重要なポイントをまとめておきます。
Webデザイン独学ロードマップ
- デザインの基礎知識を学ぶ（2週間）
- Figmaの使い方を学ぶ（2週間）
- 優れたデザインを模写する（3週間）
- HTML/CSSを学ぶ（3週間）
- オリジナルデザインを3つ作る（4週間）
- クラウドソーシングで初案件を取る（2〜4週間）
合計：約4〜6ヶ月（1日1〜2時間の学習が前提）
独学で挫折しないための5つのコツ
- 完璧主義にならない（60点でOK）
- 毎日少しでもいいから手を動かす
- 既存のデザインを参考にする（ゼロから作らない）
- フィードバックをもらう
- トレンドを追いかけすぎない
稼ぎ方
- 副業：月5〜20万円
- 転職：年収350〜500万円
- フリーランス：年収480〜720万円
Webデザインを学ぶことで、人生の選択肢が確実に増えます。
副業で稼げるようになるし、転職の幅も広がるし、フリーランスとして独立することもできる。
僕自身、Webデザインを学んだことで、人生が大きく変わりました。
あなたも、今日からWebデザインの学習を始めてみませんか？
