未経験からWebデザイナーになるロードマップ｜学習手順・必要期間・案件獲得まで

「Webデザイナーになりたいけど、未経験からでもなれるの？」。結論から言うと、なれます。ただし、正しい順番で学ばなければ遠回りになります。このロードマップでは、ゼロからWebデザイナーとして案件を獲得するまでの道筋を、具体的なステップで解説します。

Webデザイナーに必要なスキル一覧

まず、Webデザイナーに求められるスキルを全体像として把握しましょう。すべてを一度に覚える必要はありません。優先度の高いものから順に学んでいきます。

スキル	優先度	習得目安	用途
デザインツール（Figma）	必須	2〜4週間	デザインカンプの作成
HTML/CSS	必須	4〜6週間	Webページのコーディング
デザインの基礎知識	必須	2〜4週間	配色・レイアウト・タイポグラフィ
レスポンシブデザイン	重要	2〜3週間	スマホ対応
JavaScript（基礎）	重要	4〜6週間	動きのあるサイト制作
WordPress	重要	2〜4週間	CMS構築
UI/UXの考え方	あると強い	継続学習	ユーザー体験の設計

学習ロードマップ｜6ヶ月で案件獲得を目指す

全体スケジュール

期間	フェーズ	学習内容	目標
1ヶ月目	基礎固め	デザインの基礎+Figma	ツールを使えるようになる
2〜3ヶ月目	コーディング	HTML/CSS+レスポンシブ	簡単なWebページが作れる
4ヶ月目	実践	LPデザイン+模写	ポートフォリオに載せる作品を作る
5ヶ月目	応用	JavaScript基礎+WordPress	対応できる案件の幅を広げる
6ヶ月目	案件獲得	ポートフォリオ完成+営業	初案件の受注

Phase 1: デザインの基礎とFigma（1ヶ月目）

最初に学ぶべきは、コーディングではなくデザインの基礎です。

学ぶべき4つの原則：

1. 近接（関連する要素をまとめる）
2. 整列（要素を揃えて配置する）
3. 反復（一貫したルールを繰り返す）
4. コントラスト（重要な要素を目立たせる）

おすすめ教材：

教材	形式	費用	特徴
『ノンデザイナーズ・デザインブック』	書籍	約2,600円	デザイン4原則を学べるバイブル
Figma公式チュートリアル	動画	無料	ツールの基本操作
chot.design	Webサイト	無料	デザインの基礎知識
Udemy（Figma講座）	動画	セール時1,500円〜	体系的に学べる

Phase 2: HTML/CSSとレスポンシブデザイン（2〜3ヶ月目）

デザインカンプをWebページに変換するスキルが求められます。

学習の進め方：

1. HTML/CSSの基本構文を学ぶ（1〜2週間）
2. 簡単なWebページを模写する（2〜3週間）
3. レスポンシブデザインを学ぶ（2〜3週間）
4. 実際のLPを模写してみる（2〜3週間）

おすすめ教材	形式	費用
Progate	Web演習	無料〜月1,078円
ドットインストール	動画	無料〜月1,080円
MDN Web Docs	リファレンス	無料

Phase 3: LP制作と模写（4ヶ月目）

ここからは実践です。実在するWebサイトを模写（デザイン+コーディング）して、スキルを磨きます。

模写のやり方：

1. 参考サイトを1つ選ぶ
2. Figmaでデザインを再現する
3. HTML/CSSでコーディングする
4. レスポンシブ対応する
5. 元サイトと見比べて修正する

模写で作った作品は、ポートフォリオに「模写作品」として掲載できます。

Phase 4: JavaScript基礎+WordPress（5ヶ月目）

案件の幅を広げるために、JavaScriptの基礎とWordPressの扱い方を学びます。

スキル	学ぶ内容	案件への効果
JavaScript	ハンバーガーメニュー、スライダー、モーダル	動きのあるサイトを作れる
WordPress	テーマのカスタマイズ、固定ページの作成	WordPress案件に対応できる

Phase 5: ポートフォリオ完成+案件獲得（6ヶ月目）

ポートフォリオサイトを作り、案件獲得に動きます。

ポートフォリオに載せるべき作品

作品の種類	最低数	ポイント
オリジナルLPデザイン	2〜3点	自分でテーマを決めて制作
模写作品	1〜2点	元サイトのURLも記載
バナー制作	3〜5点	様々なテイストで
架空のコーポレートサイト	1点	トップ+下層ページ

ポートフォリオサイト自体がスキルの証明になるので、サイトのデザイン・コーディングにも力を入れましょう。

初案件の獲得方法

ポートフォリオができたら、いよいよ営業です。

案件獲得チャネルの比較

チャネル	難易度	単価	初心者おすすめ度
クラウドソーシング	低	やや低〜中	おすすめ
知人・友人の紹介	低	中	おすすめ
SNS営業	中	中〜高	慣れてから
直接営業	高	高	実績ができてから

初心者はクラウドソーシングからスタートするのが最も確実です。@SOHOは手数料無料なので、受注した報酬がそのまま手元に残ります。初案件の利益を最大化できる環境です。手数料の詳細比較

最初に狙うべき案件

案件タイプ	報酬の目安	難易度
バナー制作	3,000〜10,000円/枚	易
LP（ランディングページ）	50,000〜100,000円	中
WordPressテーマカスタマイズ	30,000〜80,000円	中
コーポレートサイト	100,000〜300,000円	高

まずはバナー制作で実績を作り、LP制作にステップアップしていく流れがおすすめです。

Xでの反応

未経験からWebデザイナーを目指す人へ、Xでもリアルなアドバイスが共有されている。 「デザインはWebサイトという商品の一部」。見た目だけでなく、マーケティングやユーザー導線まで意識できるデザイナーが求められている。

1案件あたり30〜40人の応募。競争は激しい。だからこそ、ポートフォリオの質と提案文の差別化が重要になる。

未経験からWebデザイナーになるには、最低でも6ヶ月の学習期間が必要です。Figmaの習得→HTML/CSSの基礎→ポートフォリオ制作の順番で進めるのが効率的です。

— 出典: WEBデザイン初心者向けのクラウドソーシング6選（日本デザイン）

未経験者が陥りやすい3つの罠

罠1: 学習期間が長すぎる

「もっと勉強してから」と学習を続けてしまい、いつまでも案件に挑戦しないパターンです。完璧を目指す必要はありません。基礎が身についたら、実案件を通じて成長するのが最速です。

罠2: ツールに固執する

Photoshop、Illustrator、Figma、XD……ツールは手段であって目的ではありません。2026年現在、Figmaを使えれば問題ありません。無料プランがあるので、費用面でも初心者に最適です。

罠3: 安い案件を受け続ける

実績づくりのために安い案件を受けるのは最初だけにしましょう。5件ほど実績ができたら、適正単価の案件に切り替える決断が必要です。

まとめ｜6ヶ月後の自分を変える第一歩

未経験からWebデザイナーになるロードマップをおさらいします。

1. デザインの基礎とFigmaを学ぶ（1ヶ月）
2. HTML/CSSをマスターする（2ヶ月）
3. LP制作で実践力をつける（1ヶ月）
4. JavaScript・WordPressで幅を広げる（1ヶ月）
5. ポートフォリオを作って案件を獲得する（1ヶ月）

スキルが身についたら、手数料無料の@SOHOでWebデザイン案件を探してみてください。20年以上の運営実績があり、会員30万人超のプラットフォームです。

よくある質問

Q. ポートフォリオに載せる作品数はいくつが適切ですか？

一般的には4〜6点程度が最も適切とされています。数を競う必要はありません。作品数が多すぎると、採用担当者やクライアントがすべてを詳しく見きれなくなります。自信のある最高の作品を厳選し、それぞれの制作意図やプロセスを深く解説することにリソースを注いでください。

Q. 実務経験がないため、架空のサイト（架空案件）しか掲載できませんが評価されますか？

はい、未経験者の場合は架空案件でも十分に評価の対象となります。既存サイトの課題を分析した上でのリデザイン案や、ターゲットを細かく設定したコンセプトサイトを制作してください。重要なのは「どのようなビジネス上の課題を設定し、デザインという手段を用いてどう解決に導いたか」という論理的なプロセスです。

Q. デザイナー未経験からフリーランスになるには何年かかりますか？

一般的には実務経験2〜3年が目安です。ただし、スクールやオンライン学習で基礎を身につけ、個人の制作実績を積むことで、1年半程度で独立するデザイナーもいます。ポートフォリオの質が案件獲得の鍵となります。

Q. 実績が全くない未経験者でも、ポートフォリオは作れますか？

はい、作れます。実際の仕事としての実績がなくても「自主制作」や「架空のクライアントへの提案」という形で、あなたのスキルを証明することは可能です。大切なのは「何を作ったか」ではなく「どんな課題をどう解決しようとしたか」という思考プロセスを見せることです。

Q. 案件獲得のために準備すべきポートフォリオは？

Iを活用して制作したことを明記した上で、制作プロセスの解説を含めるのが効果的です。「AIで何を効率化し、自分の手でどこに価値を付け加えたか」を論理的に説明できるポートフォリオは、クライアントからの信頼を得やすいです。

@SOHOでスキルアップと案件獲得を両立する

学んだスキルを実案件で試すことで、市場価値はさらに高まります。@SOHOなら対象講座の検索から案件獲得まで一気通貫で支援します。

• 教育訓練給付金の対象講座を探す
• 資格ガイドから学習計画を立てる
• 案件を探す
• @SOHOに無料会員登録する

@SOHOで関連情報をチェック

お仕事ガイド

• Webデザイナーのお仕事
• AI・マーケティング・セキュリティのお仕事
• 作曲・編曲・効果音・ジングルのお仕事

年収データベース

• ソフトウェア作成者の年収・単価相場
• 著述家，記者，編集者の年収・単価相場

資格ガイド

• ビジネス文書検定
• CCNA（シスコ技術者認定）