【本記事を読むことによる目標到達点】
- 今は未経験の方でも（最短）3ヶ月の努力でWebデザイナーとして現場で働けるスキルが身に付く
- Web制作案件を受注して月収10万円以上の継続的な収入が手に入る
- 独学でも大丈夫かな・・
- Webデザイナーに必要なスキルはなに？・・
- Web制作で稼ぐための具体的な方法を知りたい・・
- できるだけ節約したい・・
- いろんな方法を試したけど、全然稼げるようにならなかった・・
- 毎日努力しているのに全然スキルが上達しない・・
- 案件の受注方法を知りたい・・
こんな悩みや疑問を５分で解消できる記事内容になっています。
筆者がスキルなし・人脈なし・お金もない、なにもない中で実現できたロードマップをご紹介。そして6ヶ月以上も改善し続けた集大成であり、なにより『再現性の高い』内容です。
全てを無料で公開していますが、はっきり言ってnoteなどで売られている1万円ほどのロードマップ記事よりも再現性の高さには自信があります。
この記事の信頼性（ゆうけんブログの筆者はこんな人）
- 現役Web制作フリーランスが執筆
- Web制作の最高月収7桁
- 完全未経験から独学でWeb制作スキルを習得
- Twitterフォロワー数2,000人超（→@twinzvlog_yk）
- Web制作のメンター経験多数
- 認定ランサー（ランサーズ最高ランク）
以下Twitterでの本記事の評判（一部）
web制作で稼ぎたい”未経験者”は全員見てほしい。
あとは実行するだけ。こんなに詳細に教えてくれるゆうけんさんに感謝です😭
本当に稼げるのか、未経験の僕が今日から発信していきます！
まずAdobeCCの契約・Udemy教材購入は完了した！ https://t.co/d4Kx5bZdLs— マル│デザイン×マーケ (@tytmtytm) April 27, 2021
ゆうけんさんの記事すごく勉強になったし自信をもって伝えてくださっている感じが伝わってきて勇気もらえました～！私も成功体験をシェアーして人に勇気を与えられるようになりたい♩がんばるぞ～♩ https://t.co/BGlu2g676O
— miki…SHElikes (@MiiiShelikes) May 20, 2021
前置きはここまでにして、早速ロードマップを見ていきましょう！
目次
【Webデザイナー監修】未経験からのWeb制作3ヶ月独学ロードマップ｜フリーランスになるまで【副業OK】
何からやればいいの？と不安な方も多いかと思いますが、これから７ステップで順番に手順を解説していくので、未経験からWeb制作で稼いでいくための ”はじめの一歩” として読み進めてみてください。
ふたご
コーダー志望の方は>>Webエンジニア・コーダー独学ロードマップをご覧ください！
STEP1. 目標設定｜どんな案件があるのか確認
まず、自分の目標を明確に設定するために自分がどんな案件をこなしていくのかを確認してみましょう。「いや、そんなステップ必要ないでしょ〜」と思うかもしれませんが、1番大事なことなので、実践してみてほしいです。
ここをおろそかにしてしまうと、当然ですが、目標が曖昧なので、ゴールに辿り着けません。しかも、必ず「あれ、なんのために学習してるんだっけ」となります。時間を無駄にしたくない方は、まず目標を明確に設定しましょう。
クラウドテックは現役Webデザイナーの筆者がイチオシの求人サイトです。フリーランス向けWeb制作案件なら確実に業界トップクラス！営業かけずに案件に困らなくなる近道と言えます。しかも、完全無料です。
（求人サイトの後ろ盾があることで、損害賠償◯万円などのリスクも軽減できるので初心者には安心）
ふたご
\ エンジニア・Webデザイナーの実務未経験OK・リモート案件数トップクラスの求人サイト /無料登録をして案件を見てみる >>
もっと詳しく知りたい方は
>> クラウドテックの評判は？未経験OK？口コミ・メリット公開をご覧ください。
目標を設定できた方は次のステップに進みましょう！
STEP2. Adobe『コンプリートプラン』をインストール
次にWebサイトのデザインを作っていく上で必要となってくるAdobeソフトをインストールしていきます。
Adobeソフトは使ってみたいけど、どのプランを選べばいいのかわからない…
そんな疑問がお持ちの方もいるかもしれません。
現役Webデザイナーの筆者としては『結論、コンプリートプラン一択でOK』だと考えています。
根拠は下の説明をご覧ください。
コンプリートプラン
【料金】
本体価格5,680 円 / 月
【プラン内容】
Adobeツールをほぼ全て（20以上）利用できます。特にWebデザイナーなら確実に使うことになる『Photoshop / Illustrator / Adobe XD /Dreamweaver』を格安で使えるので迷わずコンプリートプランをインストールすることを推奨します。（下記参照）
※『Photoshop / Illustrator / Adobe XD / Dreamweaver』を単体で購入した場合
- 2,480 円/月：Photoshop – 単体プラン
- 2,480 円/月：Illustrator – 単体プラン
- 1,180 円/月：Adobe XD – 単体プラン
- 2,480 円/月：Dreamweaver – 単体プラン
合計：8,620 円/月
つまり、コンプリートプランなら3,000円近くお得に使える計算になります。
ちなみに現役Webデザイナーはほとんどの方がこのプランを使っているのでご安心を。
\ Adobeのプランは14日間の返金保証あり /
コンプリートプランのインストール方法がわからない方は【失敗しない】Adobeコンプリートプランのインストール手順をご覧ください。
STEP3. Adobeソフトの使い方を学習（期間：最短２週間〜１ヶ月）
それでは早速、Webデザインの基礎となるAdobeツールの学習を始めていきましょう。今回はUdemyというサービスを使ってAdobeソフトのPhotoshop・Illustrator・XD・Dreamweaverを学習する方法をご紹介します。今回ご紹介するAdobe学習講座はWebデザイナーの現場で即戦力としても働けるように厳選しています。これらの講座を全て受講しておけば、実際のWebデザイン案件でも失敗しません。
Webデザイナーに必要な全てのAdobeスキルが身につくので普段Twitterでコンサルしている方々にも４講座全てを受講しておくことを推奨しています。（学習開始から2ヶ月で初案件を獲得した方もいます）
- 教材には極力お金をかけたくない
- 学習の段階で失敗したくない
- 初心者向けの教材で学び始めたい
こんな方のための講座です。完全初心者の方が独学で「Adobeツールの使い方」をマスターするには十分すぎる内容なので、Adobeコンプリートプランをインストールできた方は下の記事を参考に学習を開始しましょう！
Webデザイナーに必要な講座をまとめて知りたい方は下記記事をご覧ください。
STEP4. Webデザインの『基本』を習得（期間：最短２週間〜１ヶ月）
Adobeツールの使い方は『Udemy』でマスターできます。
しかし、肝心のWebデザインはどうでしょうか？Adobeツールが使えるだけではデザインの感覚は身に付きません。
それではどうすればいいのか。答えはシンプル。
【インプット→アウトプット】の繰り返しです。
具体的には良質なデザイン本（図解付き）で学習（インプット）し、HPのまとめサイトに載っているHPを可能な限り模写（アウトプット）しましょう。（目安：３サイト以上）
学習段階ではこれをひたすら繰り返していくことで、必ずWebデザインのベースが身に付きます。
ここまで読んでいただいた方は、
『どのデザイン本で学習すればいいの？』
『どのまとめサイトを参考にすればいいの？』
と頭に浮かんでいるかと思います。
もちろん、筆者が実際に使用してきた『デザイン本』と『HPまとめサイト』を全てご紹介しますのでご安心ください。
【絶対持っていてほしい】Webデザイン習得に必須のデザイン本４選
まずは一冊からでいいので読み込んでみてください。
『こんなところにもデザインって関わってるんだ〜』
『デザインって意外と奥が深いんだな〜』
『あ、このデザイン法則ってあのサイトで見たことある！』
と、いろんな発見があってかなり楽しみながら学んでいけると思います。
今回ご紹介している本は制作の現場でも読まれている良書なので、必ず押さえておくようにしましょう！
【ゆうけんブログがおすすめするデザイン本】
ノンデザイナ-ズ・デザインブック 第４版/マイナビ出版/ロビン・ウィリアムズ
なるほどデザイン 目で見て楽しむデザインの本。 /エムディエヌコ-ポレ-ション/筒井美希
ノンデザイナーズ・ブックは『絶対的な入門書』、なるほどデザインは『デザインを楽しく学べる参考書』のような本です。ページをぱらぱらめくるだけでも楽しさに溢れていて『これこれ。こういうのが作りたい』と好奇心がくすぐられること間違いなしです。Webデザインを楽しく学びたい方はぜひ手にとってみてください！
ほんとに、フォント。は『ベテランのデザイナーが新米デザイナーの作ったデザインをフィードバックする』というレビュー形式で書かれています。なので、読んでいて『うっ。これ自分だ。。』と思ってしまうツッコミも多々あり勉強になります。筆者は、いまいちなフォントデザインでも言語化することで、思わず『これ！』と声に出てしまうようなデザインに変貌するんだな、と感心しながら読んでいました。
けっきょく、よはく。 余白を活かしたデザインレイアウトの本 /ソシム/ｉｎｇｅｃｔａｒ-ｅ
けっきょく、よはく。は見開きで『OK / NG例』が解説されていて見やすい。そしてわかりやすい。あまり意識していなかった、余白の使い方でここまでデザインの幅が広がるんだなと終始目を光らせながら読んでしまいました。実例が豊富なので案件のデザインで困った時でも参考にできます。
【もう悩まない】Webデザインの模写で使えるオススメ『HPまとめサイト』３選
Webデザインの模写とは「Adobeツールを使ってホームページのデザインをコピーすること」です。
つまり、「お好きなHPを見つけてきて、PhotoshopやIllustrator、XDを使ってデザインをそっくりそのまま写していきましょう」ということです。
そこで使えるHPのまとめサイトを今回ご紹介いたします。
筆者が実際に参考にしたサイトは基本的に下記サイトのみです。大量のHPが載っているので直感で「これ模写してみたい！」と思ったサイトを模写してみるといいですよ。学習段階での目安としては『2~3サイト』の模写を目指しましょう！
【Webデザイン模写で使える『まとめサイト』３選】
STEP5. UdemyでWeb制作（コーディング）を独学で学習（期間：１〜２ヶ月）
「本やネット教材で学習したけど全然身につかなかった。。」
「もう何を使って学習すればいいのかわからない。。」
「Web制作で本当に必要な学習教材ってどれなのかな。。」
上記のような悩みは全て解決できます。下の記事で紹介しているUdemy講座は、これ以上時間を無駄にしたくない方にはドンピシャな内容となっています。最短で１~２ヶ月後には『Web制作に必要なコーディングスキル』をほぼ身につけられるように厳選しています。
余談ですが、筆者が学習段階ですごく助けられた有益記事/ツールを厳選しました。
一生涯重宝するくらいには使えるので確実にどこかにメモしておくことを推奨します。
- 解説付き。コーディング練習なら
Codestep - Flexboxを習得するなら
日本語対応！CSS Flexboxのチートシートを作ったので配布します - Gridレイアウトを習得するなら
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する - HTML/CSSで困ったら
HTML&CSS入門 Webデザインをイチから学ぼう - Sass/Scss→CSSへの変換ツール
SassMeister - CSS→Sass/Scssへの変換ツール
CSS 2 SASS/SCSS CONVERTER
「中級者向け」CSS設計を学ぶなら
STEP6. Web制作スキルを活かして、ポートフォリオを作ろう（期間：３〜４週間）
ポートフォリオってなに？
ポートフォリオは簡単にいうと実績を示すための作品集です
自分はこれだけのことができるんだぞ！とアピールする際に使います。
クライアントに自分のスキルを理解してもらうためには必須です。例えば、Web制作会社にメール営業する際にも優れたポートフォリオがあれば数倍も契約率が変わってきます。逆に、もしポートフォリオがない状態で案件を獲得しようとすると全く相手にされないので気をつけましょう。
更にいうと魅力的なポートフォリオさえあれば営業が苦手な方でもなんとかなっちゃいます
ふたご
ポートフォリオってなにを作ればいいの？
全てのWebデザイン学習者におすすめしたい自作ポートフォリオの作り方をかなり詳しくまとめてみました
執筆した本人がいうのもアレですが、正直ここまで再現性の高い『ポートフォリオの作り方』は他では見たことないです.. ！実際、筆者自身もこの記事の通りにポートフォリオを作成し、公開することでクライアントの獲得や案件対応がかなりスムーズでした。
ここまでくればあとはクライアントに売り込むだけ！あなただけの魅力溢れるポートフォリオをアピールしましょう。
ふたご
STEP7. Web制作案件を受注する｜２パターン紹介
ここまでくればあとは実際に案件を受注して稼いでみましょう。ただ注意してほしいことやオススメの受注方法があるので最後まで気を抜かずいきましょう！
ふたご
でも本当に案件取れるのかな・・
初案件だし、ちゃんとできるか不安・・
そんな方でも大丈夫です。筆者の体験をベースに『初心者におすすめの案件獲得方法』をご紹介するので安心して最後までご覧ください。
これからご紹介する案件獲得方法は下の２つ
- 【難易度：易】未経験可の求人サイトを利用する
- 【難易度：中】メール営業でWeb制作会社と契約する
新卒・転職希望者の方はこちら
>> Webエンジニア転職・新卒・フリーランス｜おすすめ求人サイト・評判あり
【難易度：易】未経験可の求人サイトを利用する
フリーランス初期のあなたにオススメの案件獲得方法はズバリ！未経験可の求人サイトを利用することです。いきなり「Web制作会社と契約する」とか「エンド営業」は不安だな。。という方には特におすすめ◎（求人サイトの後ろ盾があることで、損害賠償◯万円などのリスクも軽減できるので初心者には安心）
正直、クラウドソーシングで案件を提案していくのも一つの手なのですが、最近だと競合となるフリーランスが多すぎてあまり推奨はできません。なので現役Webデザイナーの筆者が実際に使ってみて『これなら大丈夫！』と判断した求人サイトを紹介します。
完全無料で使える求人サイトなのでまずは登録だけしてみて、どんな案件があるのかを見てみるといいですよ。サポートも手厚いので初心者の方でも大丈夫です。
対象
Webデザイナー・エンジニア・グラフィックデザイナー・PM・マーケター・ライター
公式サイト
クラウドテック公式ページ
特徴
- クラウドソーシング企業大手のクラウドワークスが運営する求人サイト
- 実務未経験者OK
- 登録社数14万社
- フリーランスや副業案件がケタ違いに多い
- 報酬額や勤務地・職種など希望が通りやすい
- Web制作・コーディングの高単価案件が多い
- リモートワーク案件数は業界トップクラス
- 最短3日で案件獲得できる
現役Webデザイナーの筆者がイチオシの求人サイト！フリーランス向けWeb制作案件なら確実に業界トップクラス！営業かけずに案件に困らなくなる近道と言えます。しかも、完全無料です。
ふたご
\ エンジニア・Webデザイナーの実務未経験OK・リモート案件数トップクラスの求人サイト /無料登録をして案件を見てみる >>
もっと詳しく知りたい方は
>> クラウドテックの評判は？未経験OK？口コミ・メリット公開をご覧ください。
高単価案件を狙いたい方はフォスターフリーランスの評判が必見です◎
でもどんな案件に応募すればいいの？自分のスキルでできるのかな・・
応募する案件の目安としては８割がた自分のチカラでなんとかできそうかな？くらいのイメージがいいかなと。あとの２割は調べればだいたいクリアできるのでご安心を。
ふたご
【難易度：中】メール営業でWeb制作会社と契約する
何件か実績のある方はもちろんですが、実務は未経験だけど『WordPressでオリジナルテーマを作れる』などの強みがある方はメール営業でWeb制作会社と契約した方が安定的に収入を得るには近道です。加えて、メール営業は直接取引となるので手数料などが発生しない分、高単価を狙えます。
とは言っても「メール営業なんてやったことないし・・」と不安に感じる方もいると思います。しかし、筆者もメール営業なんて経験はありませんでしたが、営業開始の初月からWeb制作会社3件の契約を獲得できたのでご安心ください。
ご報告です。
ぼくが無料メンターをしている、みそしるさん（@nishinoya_eng ）がWeb制作会社さんとの契約を獲得しました👏
なんと、営業開始から1週間での達成。これはさすがに驚きです….
案件も無事いただけそうとのこと。こんなに嬉しいことってありますか🥲
— ゆうけん@Web制作×ブロガー (@twinzvlog_yk) June 18, 2021
- 「クラウドソーシングでの提案には疲れた」
- 「継続案件で安定的に稼ぎたい」
- 「自分でメールを作るはめんどくさい」
こういったお悩みを抱えている方のために現在記事を執筆中です。
しばしお時間をいただけますと幸いです。
おまけ｜【応用編】Skillshareでより高度な学習を始めよう
Skillshareとはアメリカ発祥の年額制の動画学習サービスです。よくUdemyと比較されるサービスですが、
- Udemyよりもクリエイティブに特化している
- より応用的な講座が多い
- とにかく安い・・！！
- 日本語音声がない
これらが大きな特徴です。
つまり、実際の案件をこなしていく際にも『これやっておいてよかった。。』と思えるような講座が多く配信されています。
そして何よりも、安いです。。
年額99ドル（11,000円ほど）、つまり月々約900円の計算になります。
しかも、初回のみ2週間無料で利用できるので、気に入らなかった場合は即解約もOK！
特にWordPressの講座は山ほどあるので、中級レベルへの階段を上りたい方はぜひ受講してみてください。
ちなみに、筆者のおすすめ講座は『The Complete WordPress Theme Development Course』です！
筆者はこの講座を受講したことでWeb制作会社との案件対応も楽々こなせました。多分ですが、UdemyにもYouTubeにもこれ以上の講座は存在しません。
ひとこと言わせてください
ここまでやり切ったあなたは誰に何を言われようがプロのWebデザイナーです！未経験からのスタートで大変だったかと思いますが本当にお疲れ様でした。尊敬します。楽しいWebデザイナーライフを！
まとめ
最後まで読んでいただきありがとうございます。ちょっと長かったかとは思いますが、その分出し惜しみせずだれが実践しても確実に稼げるように書いたつもりです。
【この記事の要約】
- Webデザイナー独学ロードマップ（Web制作で月収10万円稼ぐ）
- まとめ
筆者が歩んできたロードマップを数十回もの修正と改善を重ねた『超決定版』なのでぜひ挑戦してみてください。この方法が唯一無二で他に方法はないとは言いませんが、ほんのちょっとでもあなたが初めの一歩を踏み出すきっかけになれたのなら幸いです。
