【本記事を読むことによる目標到達点】
- 「パソコン使い方がわからない」初心者の方でも（最短）3ヶ月の努力でWebデザイナーとして現場で働けるスキルが身に付く
- Webデザイン案件を受注して月収10万円以上の継続的な収入が手に入る
2022年1月22日に大幅な更新をかけた最新記事です。
- 本当に独学でもWebデザイナーになれるのかな・・
- いろんな方法を試したけど、全然稼げるようにならなかった・・
- Webデザイナーってどんな仕事をするのかな・・
- Webデザイナーに必要なスキルはなに？・・
- Webデザインで稼ぐための具体的な方法を知りたい・・
こんな悩みや疑問を10分で解消できる記事内容になっています。
この記事の信頼性（ゆうけんブログの筆者はこんな人）
- 現役Webデザイナーフリーランスが執筆
- Web制作の最高月収7桁
- 完全未経験から独学でWebデザインスキルを習得
- Twitter累計フォロワー数5,000人超（→@twinzvlog_yk）
- Web制作のメンター経験多数
この記事の内容
全てを無料で公開していますが、はっきり言ってnoteなどで売られている1万円ほどのWebデザイナーロードマップ記事よりも再現性の高さには自信があります。
目次
Webデザイナー監修。Webデザイン3ヶ月独学ロードマップ｜副業もOK
「何からやればいいの？」と不安な方も多いかと思いますが、これから６ステップで順番にWebデザインロードマップを解説していくので、未経験からWeb制作で稼いでいくための ”はじめの一歩” として読み進めてみてください。
ふたご
ロードマップの概要
以下Twitterでの本記事の評判（一部）
web制作で稼ぎたい”未経験者”は全員見てほしい。
あとは実行するだけ。こんなに詳細に教えてくれるゆうけんさんに感謝です😭
本当に稼げるのか、未経験の僕が今日から発信していきます！
まずAdobeCCの契約・Udemy教材購入は完了した！ https://t.co/d4Kx5bZdLs— マル│デザイン×マーケ (@tytmtytm) April 27, 2021
ゆうけんさんの記事すごく勉強になったし自信をもって伝えてくださっている感じが伝わってきて勇気もらえました～！私も成功体験をシェアーして人に勇気を与えられるようになりたい♩がんばるぞ～♩ https://t.co/BGlu2g676O
— miki…SHElikes (@MiiiShelikes) May 20, 2021
STEP1. Webデザイナーの仕事を実際に確認してみよう！
まず、目標を明確に設定するために自分がどんな仕事をこなしていくのかを確認してみましょう。
「いや、そんなステップ必要ないでしょ〜」と思うかもしれません。
しかし、残念ながら「目標設定ができていない」という理由により初心者の9割が挫折しています。
事実として、ぼくがメンターをしている方の中でも目標が曖昧な方は9割以上が2ヶ月以内に挫折している状況です。
つまり、実際の仕事を把握して、目標を明確にすることがWebデザイナーへの第一歩ということです。
例えば、前もって実際の求人を確認しておくことで
- 優先的に学習すべきスキル（大事！）
- 案件受注や採用において、評価される技術力
- 実際の案件金額や給与の相場
こういったことが見えてきます。
逆にいうと、こういった目標設定が曖昧なまま学習をスタートすると、なにをやっていいのかわからず、数ヶ月単位で余計な時間を浪費してしまうこともあります。
もっというと、高額なスクールやコンサルに騙されて、数十万円をドブに捨ててしまうことも普通にあり得ます。
というわけで、まずは「自分が将来どんな仕事をするのか」確認してみましょう！
▼ちなみに、ぼくが実際に使っている求人サイトは下の２つです。
【Webデザイン経験者におすすめ】
【フォスターフリーランス】
週１〜・土日だけのリモート案件などが多く、副業にはもってこい。CMでも話題の求人サイト◎
そして、平均単価74.5万円と他のサイトと比較してもダントツの高単価。
経験者の方は登録しておいて損ナシ！
【未経験Webデザイナーにおすすめ】
【クラウドテック】
初心者には嬉しい、実務未経験のWebデザイナー求人が多く掲載！
最短3日で案件獲得が実現でき、リモートワーク案件数が業界トップクラス。
初心者ならまずはこれ！といえる王道の求人サイト◎
特に、上の「クラウドテック」という求人サイトは未経験のWebデザイナー求人が多く掲載されており、学習中の方でも挑戦してみる価値ありです◎
無料登録後に全ての求人を確認できます（登録は60秒で完了）
STEP2. HTML / CSSを無料で学習しよう
まずはDig Skillというオンラインプログラミングスクールの『30日間の無料体験』に申し込んで、Webデザイナーの必須スキルである、HTML / CSSの学習をスタートしてみましょう。
Dig Skillの無料体験で学べるスキル
Java / SpringBoot / HTML / CSS / Docker / Gradle / Git / PostgreSQL / Tomcat / eclipse など
本記事を読んでいる方はWebデザイナーを目指しているはずなので、HTML / CSSだけを無料期間中に学習してみましょう！
え、ちょっと待って。Dig Skillってそもそもなに？
そう思う方が多数いると思いますので、カンタンに「Dig Skill」の説明をしていきます。
Dig Skillとは？
- 月額制のオンラインプログラミングスクール
- 30日間の無料体験あり（60,000円相当）
- 無料体験終了後も月額1,000円で教材を利用できる
- 知識・経験は一切なくてもOK
- 無料体験中は2回まで質問可能
- プロの講師とのマンツーマンオンライン授業（1回）
つまりは、月額制で完全オンラインのプログラミングスクールという認識で大丈夫です。
なにより、これだけのサービスを「30日間の無料体験」で使い倒せるのは驚きです。
しかも、翌月以降はすぐに退会可能。
はっきりいって、オンラインITスクールで「30日間の無料体験」を実施している企業は他には見たことがありません。
つまり、近いうちに無料体験自体がなくなってしまうかもしれないので、今すぐに申し込みだけでもしておくことを強くおすすめします◎
▼公式サイト
ちなみに、30日間の無料体験を終了後は、「月額1,000円のライトプラン」または「スタンダードプラン」に契約できます。（無料体験を終了後に、すぐ退会してもOK）
個人的には月額1,000円のライトプランに契約してみることをおすすめします。
それではSTEP３から、月額3,278円でWebデザイン・Web制作スキルを学び放題のオンライン学習サービス「サムライエンジニアプラス」をご紹介していきます。
STEP3. Webデザインと応用的なコーディングを学習しよう
Webデザインと応用的なコーディング技術は「サムライエンジニアプラス」という月額制のオンライン学習サービスを使って学習していきましょう◎（Web制作スキルを習得したい方は登録必須）
▼学習できるWebデザインスキル
Webデザインの基礎知識 / HTML / CSS / Photoshop / Adobe XD / バナー制作 / Webサイトデザイン
上記のスキルで「初級編」「中級編」「上級編」の教材が用意されており、全てを合計すると30種類以上にもなります。（Webデザイナーに必要なスキルは全て揃っています◎）
え、ちょっと待って。サムライエンジニアプラスってそもそもなに？
そう思う方もいると思いますので、カンタンに「サムライエンジニアプラス」の説明をしていきます。
サムライエンジニアプラスとは？
- サブスク型（月額制）Web制作・Webデザイン学習サービス
- 月額料金3,278円(税込)＋入会金0円＋退会金0円
- 通常10,780円(税込)相当のレッスンチケットが毎月無料でもらえる
- 30種類以上の豊富な教材
- 完全未経験でも基礎が身に付く
- Webデザイナーに質問し放題
- 挫折率はたった8%
つまりは、月額制で完全オンラインのWebデザイン学習サービスという認識で大丈夫です。
しかも、飲み会1回分の料金で利用できます。
ここでちょっとサービスの概要を見てみましょう。
▼サービス概要
| サービス名 | SAMURAI ENGINEER PLUS+ |
|---|---|
| 運営会社 | 株式会社SAMURAI |
| 月額料金 | 3,278円(税込) |
| 入会費 | 無料 |
| サービス開始 | 2021年3月 |
▼公式サイト
これ冷静に考えてみると本当に革命的なサービスなんです。
なぜなら、本来Webデザインスクールの相場は30〜50万円ほど。
しかし、サムライエンジニアプラスなら、
- Webデザイナーに質問し放題
- 毎月のレッスン1回無料（1万円相当）
- 豊富な学習教材
上記がすべて付いて、月額3,278円(税込)で受講できてしまうのです。
しかも、いつでも退会可能。
例えば、サムライエンジニアプラスを３ヶ月利用する場合
月額3,278円(税込) × 3ヶ月 ＝ 9,834円
つまり、３ヶ月かけてゆっくり学習したとしても、9,834円の自己投資で済むということです。
ぼくがWebデザインを学習していた頃にも欲しかったな〜と嫉妬してしまうほどに、コスパ最強なサービスです。
- 教材には極力お金をかけたくない
- 学習の段階で失敗したくない
- 初心者向けの教材で学び始めたい
こういった方は迷わず、サムライエンジニアプラスを受講してみるといいですよ。
月額3,278円(税込)なら飲み会一回分です。
飲み会一回分の自己投資で人生が変わると思って、惜しまずに出しましょう。
それでは、次に「STEP４. サイト模写に挑戦しよう」を見ていきましょう！
STEP4. サイト模写に挑戦しよう
Webデザインの基礎は「サムライエンジニアプラス」でマスターできます。
しかし、それだけではまだ足りません。
それではどうすればいいのか。答えはシンプル。
【インプット→アウトプット】の繰り返しをしていきましょう。
具体的には「サムライエンジニアプラス」で学習（インプット）し、HPのまとめサイトに載っているHPを可能な限り模写（アウトプット）しましょう。（目安：３サイト以上）
学習段階ではこれをひたすら繰り返していくことで、必ずWebデザインのベースが身に付きます。
ここまで読んでいただいた方は、
『どのまとめサイトを参考にすればいいの？』
と頭に浮かんでいるかと思います。
もちろん、筆者が実際に使用してきた『HPまとめサイト』を全てご紹介しますのでご安心ください。
【もう悩まない】Webデザインの模写で使えるオススメ『HPまとめサイト』３選
Webデザインの模写とは「Adobeツールを使ってホームページのデザインをコピーすること」です。
つまり、「お好きなHPを見つけてきて、PhotoshopやIllustrator、XDを使ってデザインをそっくりそのまま写していきましょう」ということです。
そこで使えるHPのまとめサイトを今回ご紹介いたします。
筆者が実際に参考にしたサイトは基本的に下記サイトのみです。大量のHPが載っているので直感で「これ模写してみたい！」と思ったサイトを模写してみるといいですよ。学習段階での目安としては『2~3サイト』の模写を目指しましょう！
【Webデザイン模写で使える『まとめサイト』３選】
STEP5. Webデザインスキルを活かして、ポートフォリオを作ろう
ポートフォリオってなに？
ポートフォリオは簡単にいうと実績を示すための作品集です
自分はこれだけのことができるんだぞ！とアピールする際に使います。
クライアントに自分のスキルを理解してもらうためには必須です。例えば、Web制作会社にメール営業する際にも優れたポートフォリオがあれば数倍も契約率が変わってきます。逆に、もしポートフォリオがない状態で案件を獲得しようとすると全く相手にされないので気をつけましょう。
更にいうと魅力的なポートフォリオさえあれば営業が苦手な方でもなんとかなっちゃいます
ふたご
ポートフォリオってなにを作ればいいの？
全てのWebデザイン学習者におすすめしたい自作ポートフォリオの作り方をかなり詳しくまとめてみました
執筆した本人がいうのもアレですが、正直ここまで再現性の高い『ポートフォリオの作り方』は他では見たことないです.. ！
実際、筆者自身もこの記事の通りにポートフォリオを作成し、公開することでクライアントの獲得や案件対応がかなりスムーズでした。
ここまでくればあとはクライアントに売り込むだけ！あなただけの魅力溢れるポートフォリオをアピールしましょう。
ふたご
STEP6. Webデザインの仕事（案件）を獲得しよう！
ここまでくればあとは実際に案件を受注するだけですね◎
ふたご
- でも本当に案件取れるのかな・・
- 初案件だし、ちゃんとできるか不安・・
- 今のスキルで大丈夫なのかな・・
そんな方でも大丈夫です。ここまでのロードマップをしっかりと歩んできた方は現場で働けるスキルが身についているはず。
あまり気負いせず、自信を持って挑戦してみましょう！
下で紹介している求人サイトは「実務は未経験だけど、まず仕事をしてみたい！」という方におすすめ◎
副業・フリーランス案件を多く扱っているサイトなので、わざわざ営業をかけなくても簡単に仕事が見つかりますよ。
【副業向け】クラウドテック（株式会社クラウドワークス）
対象
Webデザイナー・エンジニア・グラフィックデザイナー・PM・マーケター・ライター
公式サイト
クラウドテック公式ページ
特徴
- クラウドソーシング企業大手のクラウドワークスが運営する求人サイト
- 実務未経験者OK
- 登録社数14万社
- フリーランスや副業案件がケタ違いに多い
- 報酬額や勤務地・職種など希望が通りやすい
- Web制作・Webデザインの高単価案件が多い
- リモートワーク案件数は業界トップクラス
- 最短3日で案件獲得できる
現役Webデザイナーの筆者がイチオシの求人サイト！フリーランス向けWeb制作案件なら確実に業界トップクラス！営業かけずに案件を獲得するなら「これしかない！」と言えます。しかも、完全無料です。
（求人サイトの後ろ盾があることで、損害賠償◯万円などのリスクも軽減できるので初心者には安心）
ふたご
\ 実務未経験OK・リモート案件数トップクラスの求人サイト /
【60秒で完了】クラウドテックに無料登録 >>
もっと詳しく知りたい方は
>> クラウドテックの評判は？未経験OK？口コミ・メリット公開をご覧ください。
【フリーランス向け】フォスターフリーランス（株式会社フォスターネット）
対象
Webデザイナー・Webエンジニア・Webディレクター・PMなど
公式サイト
フォスターフリーランス
特徴
- クラウドソーシング企業大手の株式会社フォスターネットが運営する案件・求人サイト
- CMでも話題の有名フリーランス求人サイト
- 実務未経験者もOK
- 優良案件が常時5,000件以上
- フリーランス案件がケタ違いに多い
- フルリモートよりも、常駐型案件がメイン（※新型ウイルスにより、在宅勤務急増中）
- 報酬額や勤務地・職種など希望が通りやすい
- Webデザイナーの高単価案件が多い
- 最短3日で案件獲得できる
- 普段お目にかかれない非公開案件多数（全体の90％）
- 登録者の90％以上が高評価
フォスターフリーランスは現役フリーランスデザイナーの筆者がイチオシの案件・求人サイト！フリーランス向けWebデザイナー案件なら確実に業界トップクラス！初めてのフリーランスでもサポートが抜群に厚いので安心。しかも、完全無料です。
（フォスターフリーランスの後ろ盾があることで、損害賠償◯万円などのリスクも軽減できるので初心者には安心）
ふたご
＼初めてでも安心のサポート・高単価案件多数／
フォスターフリーランスに無料登録 >>
もっと詳しく知りたい方は
>> フォスターフリーランスの評判・口コミを徹底調査！をご覧ください。
在宅でWebデザイナーとして働きたいと思っている方は下の記事も合わせてご覧ください。
>> 【真実】在宅でWebデザイナーが難しいはウソです。稼げます。
おまけ｜【応用編】Skillshareでより高度な学習を始めよう
Skillshareとはアメリカ発祥の年額制の動画学習サービスです。よくUdemyと比較されるサービスですが、
- クリエイティブに特化している
- より応用的な講座が多い
- とにかく安い・・！！
- 日本語音声がない
これらが大きな特徴です。
つまり、実際の案件をこなしていく際にも『これやっておいてよかった。。』と思えるような講座が多く配信されています。
そして何よりも、安いです。。
年額99ドル（11,000円ほど）、つまり月々約900円の計算になります。
しかも、初回のみ2週間無料で利用できるので、気に入らなかった場合は即解約もOK！
特にWordPressの講座は山ほどあるので、中級レベルへの階段を上りたい方はぜひ受講してみてください。
ちなみに、筆者のおすすめ講座は『The Complete WordPress Theme Development Course』です！
筆者はこの講座を受講したことでWeb制作会社との案件対応も楽々こなせました。多分ですが、UdemyにもYouTubeにもこれ以上の講座は存在しません。
Webデザイナー初心者のよくある疑問
- 未経験からでもWebデザイナーになれるのか
- Webデザイナーにはどんなスキルが必要なのか
この2つの疑問についてサラッと解説していきます。
未経験からでもWebデザイナーになれるの？
結論を先にいうと、未経験からでもWebデザイナーになれます。全く問題なしです。
ちなみに、厚生労働省の公式ページによると
入職にあたって、特に学歴や資格は必要とされないが、デザインの基礎知識・技術は必要となる
ということなので、『なんの学習もせずに、完全素人として』Webデザイナーを名乗ることは難しいようですね。（まあ当たり前ですね…）
とはいえ、Webデザイナーとして現場で働く人の31.8%が入職の前の実務経験は「特に必要ない」と答えていることも事実。
つまり、未経験からでも、スキルさえ習得できればWebデザイナーになれるということですね。
余談ですが、ぼくも未経験からWebデザイナーになり、フリーランスとして活動しています。
Webデザインスキルの習得方法については、後述しているのでご心配なく◎
Webデザイナーにはどんなスキルが必要なの？
Webデザイナーに必要なスキルは大きく分けて以下の３つ。
- グラフィックデザインスキル
- デザインツール（Adobeソフトなど）を使いこなすスキル
- コーディングスキル（場合による）
特に「グラフィックデザインスキル」と「デザインツールを使いこなすスキル」は案件獲得でも、Webデザイナー転職でも必須のスキルなので、必ず習得するようにしましょう。
コーディングについては、「STEP1. Webデザイナーの仕事を確認してみよう！」で確認した仕事に合わせて、適宜学習してみるといいですよ◎（ぼくは習得済みです）
まとめ
最後まで読んでいただきありがとうございます。ちょっと長かったかとは思いますが、その分出し惜しみせずだれが実践しても高確率で稼げるように書いたつもりです。
この記事の内容をおさらい
最後になりますが、下の記事も併せて読んでみるといいかもです。
Webコーダー志望の方
Web制作の副業に興味のある方
>> 断言。「Web制作の副業が稼げない」は嘘です。稼げない人の特徴は？
絵が下手でもWebデザイナーになれるのかな？と不安な方
>> 現役フリーランス解説。絵が下手でもWebデザイナーになるための打開策
頭良くないけどWebデザイナーになれるのかな？と悩んでいる方
>> 「頭が悪いとWebデザイナーになれない」は嘘？その理由と解決策
模写コーディングが難しすぎて挫折しそうな方
>> エンジニア監修。模写コーディングが難しいと感じる時の対処法を解説。
プログラミングできない。辞めたいと思っている方
>> プログラミングできない辞めたい..と思ったら読んでほしい。｜体験談
未経験からエンジニアになれるのか不安な方
>> 結論。「未経験からエンジニアはきつい・やめとけ」は嘘です。｜現職が解説
実務未経験だけどWebデザインで副業したい方
筆者が歩んできたロードマップを数十回もの修正と改善を重ねた『超決定版』なのでぜひ挑戦してみてください。この方法が唯一無二で他に方法はないとは言いませんが、ほんのちょっとでもあなたが初めの一歩を踏み出すきっかけになれたのなら幸いです。
