＊2021年3月に大幅更新した最新版の内容となっています
今回の記事では『３年間で３度の挫折をした筆者』が、３ヶ月後には独学・完全初心者からWebデザイナーとしてWeb制作案件を獲得し、最低でも１０万円を稼げるようになるための手順をご紹介します。筆者がスキルなし、人脈なし、お金もない、なにもない中で実現できたロードマップなので『再現性の高い』内容となっています。費用面についてですが、基本的にはAdobeツールとUdemy教材への投資のみなので、たった１万円程度の投資で毎月10万円以上のリターンを得られるようになります。
この記事の信頼性（筆者はこんな人）
- 現役Webデザイナーが執筆
- 継続して月収80万円超のフリーランス
- 完全未経験から独学でWeb制作スキルを習得
- TwitterにてWeb制作のメンター経験多数（→@twinzvlog_yk）
- 認定ランサー（ランサーズ最高ランク）
こんな悩みや疑問を解消できる記事内容になっています。
ふたご
- Webデザイナーになってみたいとは思うけど具体的にどうすればいいのかわからない・・
- できれば時間もお金もあんまり使いたくない・・
- 仕事で忙しい中でもこなせるロードマップだといいな・・
- どの記事も同じようなこと書いてあるけど結局どの方法が正しいの・・
- Webデザイナーにはどんなスキルが必要なのかな・・
- 具体的なロードマップが知りたい・・
そんな疑問は全て払拭できます
突然ですが、Webデザイナーになるための学習で挫折したことはありませんか？
筆者は過去３年間で３度の挫折を味わいました。
ちなみに全て独学です。
正直、苦しくて何度も諦めそうになりました。
「これ以上は自分にはできない」
「自分には向いてない。」
「頭がよくてデザインセンスがないとWebデザイナーにはなれないのかな。」
と何度も何度も悩み、Web制作で稼げるようになる自分が想像できませんでした。
でも何度挫折を繰り返しても結局は「Webデザイナーとして稼ぎたい」という気持ちから学習を再開していました。
そして３度目の挫折をしてから半年後、「今回こそは稼ぐまで絶対にやめない！」と強く心に誓い新しい学習方法を取り入れてみました。
その甲斐あって、３ヶ月後には念願の初案件を獲得。その後も順調に案件が舞い込んできたことで今では月80万円を達成することができています。
Webデザイナーを本気で目指す「あなた」にも筆者自身が取り入れた学習方法で稼げるようになってもらいたいです。
学習段階で挫折を繰り返すなんてもったいない。３ヶ月あれば絶対に稼げる力がつきます。
この記事では『筆者が初心者のころに実際に歩んできて、この手順通りに行動すれば確実に稼げるな』と自信を持って言えるロードマップをご紹介します。加えて、本記事はGoogleからも高い評価を受けている記事なので安心していただければと思います。
正直、5,000円くらいの有料記事で公開する予定でしたが、Web制作を始めたばかりの自分のことを思い出すと『Udemy講座やAdobeツールにもお金がかかるのにロードマップに追加で払うお金はないよな』と思ったので無料公開することにしました。（反応や時期をみて有料公開する可能性もあるので早めに実践してもらえると嬉しいです）
既にAdobeツールやコーディングの学習が済んでいる方は『WordPressテーマをゼロから自作』してみましょう！執筆した本人が言うのもあれですが、
ググっても出てこない裏ワザ的な作り方なので確実に見て損はありません。
この記事を読んでいる時点であなたは相当な熱意と行動力をお持ちなので、確実にスキルを習得できると断言します。独学だろうが未経験だろうが関係ありません。あとはやるだけです。
前置きはここまでにして、早速ロードマップを見ていきましょう！
目次
Webデザイナー独学ロードマップ（Web制作で月収10万円稼ぐ）
不安な方も多いかと思いますが、これから５ステップで詳しく説明していくのでWebデザイナーとして稼いでいくためのはじめの一歩として読み進めてみてください。
ふたご
STEP1. Adobeツールの使い方を無料で学習（期間：１ヶ月）
超優秀なプロのWebデザイナーが未経験者向けにわかりやすく解説してくれるので筆者自身もかなり助けられました。あのAdobeの公式チュートリアルですし完全無料とは思えないほどのクオリティなのでどんどん知れ渡っていってほしいなと個人的に思っています。
- 『教材には極力お金をかけたくない』
- 『まずは無料で学んでみたい』
- 『初心者向けの教材で学び始めたい』
こんな人のための無料教材です。完全初心者の方が「Webデザイン」の基礎を身につけるには十分すぎる内容なので、Adobeをインストールしたらまずは下の記事を参考にして学習を開始しましょう！
まだAdobeのインストールが完了していない方は早速『コンプリートプラン』で自分の思うがままにデザインを作っていきましょう！（学生なら 5,680円/月▶︎▶︎1,980 円/月）
STEP2. Webデザインの『いろは（基本）』を習得（期間：１週間）
Adobeツールの使い方は『公式チュートリアル』でマスターできます。
しかし、肝心のWebデザインはどうでしょうか？Adobeツールが使えるだけではデザインの感覚は身に付きません。
それではどうすればいいのでしょうか？答えはシンプル。
【インプット + アウトプット】の繰り返しです。
具体的には良質なデザイン本（図解付き）で学習（インプット）し、
HPのまとめサイトに載っているHPを可能な限り模写（アウトプット）しましょう。
学習段階ではこれの繰り返しをひたすら熟していけば必ずWebデザインのベースが身に付きます。
ここまで読んでいただいた方は、
『どのデザイン本で学習すればいいの？』
『どのまとめサイトを参考にすればいいの？』
と頭に浮かんでいるかと思います。
もちろん、筆者が実際に使用してきた『デザイン本』と『HPまとめサイト』を全てご紹介しますのでご安心ください。
ちなみに今回ご紹介する『デザイン本』は筆者が今でも「作業場のいつでも手が届く場所」に置いているくらいゴリ推しの書籍となります。読み込みすぎて今では学生時代の単語帳くらいボロボロになっています。。
【筆者ゴリ押し】デザイン学習に必須のデザイン本２選
まずは一冊読み込んでみてください。
『こんなところにもデザインって関わってるんだ〜』
『デザインって意外と奥が深いんだな〜』
『あ、このデザイン法則ってあのサイトで見たことある！』
と、いろんな発見があってかなり楽しみながら学んでいけると思います。
筆者がデザインの世界にのめり込んだきっかけとも言える一冊が『なるほどデザイン 目で見て楽しむデザインの本。』なので、まずはこの本から始めてみることをおすすめします。
【もう悩まない】Webデザインの模写で使えるオススメ『HPまとめサイト』３選
Webデザインの模写とは「Adobeツールを使ってホームページのデザインをコピーすること」です。
つまり、「お好きなHPを見つけてきて、PhotoshopやIllustrator、XDを使ってデザインをそっくりそのまま写していきましょう」ということです。
そこで使えるHPのまとめサイトを今回ご紹介いたします。
筆者が実際に参考にしたサイトは基本的に下記サイトのみです。大量のHPが載っているので直感で「これ模写してみたい！」と思ったサイトを模写してみるといいですよ。学習段階での目安としては『2~3サイト』の模写を目指しましょう！
【Webデザイン模写で使える『まとめサイト』３選】
STEP3. UdemyでWeb制作スキルを網羅的に学習（期間：１ヶ月）
あまり声を大にしては言えないのですが、、個人的にはネット上に転がっている『個人が作成したプログラミング教材』の購入はおすすめできません。筆者は3つほど試しに購入したことがありますが、教材自体はどれも『初心者向け』に丁寧に書かれていてわかりやすかったのですが、内容は薄く価格がかなり高めでした。。
どうせ購入するなら『内容が濃くて安い』教材に越したことないですよね？
「本やネット教材で学習したけど全然身につかなかった。。」
「もう何を使って学習すればいいのかわからない。。」
「Webデザイナーになるために本当に必要な学習教材ってどれなのかな。。」
大丈夫です。今までうまくいかなかったのは出会ってきた教材が合わなかっただけの場合が多いです。本章はこれ以上時間を無駄にしたくない方にはドンピシャな内容となっていますので是非全ての講座に目を通してみてください。そして講座を最後までやり抜いてみてください。１ヶ月後には『Webデザイナーに必要な基礎』を全て身につけているはずです。
ご紹介するUdemy講座は『有料スクール30万円分の価値はある内容』です。それらをセール期間中ならどの講座も基本的には2,000円以下で購入できるので超オトクです。（Udemyを初めてご利用の方は登録後6時間限定で全講座がセール価格で購入できるのでこの機会をお見逃しなく！）
Web制作学習で絶対に外せないUdemy講座は下の記事で確認できます。
余談ですが、筆者が学習段階ですごく助けられた有益記事/ツールを厳選しました。
一生涯重宝するくらいには使えるので確実にどこかにメモしておくことを推奨します。
- Flexboxを習得するなら
日本語対応！CSS Flexboxのチートシートを作ったので配布します - Gridレイアウトを習得するなら
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する - HTML/CSSで困ったら
HTML&CSS入門 Webデザインをイチから学ぼう - Sass/Scss→CSSへの変換ツール
SassMeister - CSS→Sass/Scssへの変換ツール
CSS 2 SASS/SCSS CONVERTER
STEP4. 【意外とカンタン】ポートフォリオを作成（期間：３週間）
ポートフォリオってなに？
ポートフォリオは簡単にいうと実績を示すための作品集です
自分はこれだけのことができるんだぞ！とアピールする際に使います。
クライアントに自分のスキルを理解してもらうためには必須です。例えば、Web制作会社にメール営業する際にも優れたポートフォリオがあれば数倍も契約率が変わってきます。
更にいうと魅力的なポートフォリオさえあれば営業が苦手な方でもなんとかなっちゃいます
ふたご
ポートフォリオってなにを作ればいいの？
全てのWebデザイナーが作るべき自作ポートフォリオの作り方をかなり詳しくまとめてみました
執筆した本人がいうのもアレですが、正直ここまで再現性の高い『ポートフォリオの作り方』は他では見たことないです.. ！
ここまでくればあとはクライアントに売り込むだけ！あなただけの魅力溢れるポートフォリオをアピールしましょう。
ふたご
STEP5. 【営業は不要】案件を受注する
ここまでくればあとはクライアントに提案をするだけ。ただ注意してほしいことやオススメの受注方法があるから最後まで気を抜かずいきましょう！
ふたご
案件はどこから獲得すればいいの？
フリーランス初期のあなたにオススメの案件獲得方法はズバリ！未経験可の求人サイトを利用することです。
正直、クラウドソーシングで案件を提案していくのも一つの手なのですが、最近だと競合となるフリーランスが多すぎてあまり推奨はできません。なので現役Webデザイナーの筆者が実際に使ってみて『これなら大丈夫！』と判断した求人サイトを紹介します。
完全無料で使える求人サイトなのでまずは登録だけしてみて、どんな案件があるのかを見てみるといいですよ。
対象
Webデザイナー・エンジニア・グラフィックデザイナー・PM・マーケター・ライター
公式サイト
クラウドテック公式ページ
特徴
- クラウドソーシング企業大手のクラウドワークスが運営する求人サイト
- 実務未経験者でもOK
- 登録社数14万社
- フリーランス・個人事業主向け案件がケタ違いに多い
- 報酬額や勤務地・職種など希望が通りやすい
- Web制作・コーディングの高単価案件が多い
- リモートワーク案件数は業界トップクラス
- 最短3日で案件を獲得できる
現役Webデザイナーの筆者イチオシの求人サイト！フリーランス向けWeb制作案件なら確実に業界トップクラス。営業かけずに案件に困らなくなる一番の近道です。
ふたご
でもどんな案件に応募すればいいの？自分のスキルでできるのかな・・
応募する案件の目安としては８割がた自分のチカラで完成できそうかな？くらいのイメージで問題ないです。あとの２割は調べればだいたいクリアできますのでご安心を。クライアントも１００％完璧な結果は求めませんし少し無理するくらいの案件に挑戦してみましょう。
ふたご
クラウドソーシング
- 単価低め
- 参入障壁が低い(未経験でも案件を獲得しやすい)
- 競合が多い
- 比較的簡単な案件が多い
- 継続案件はほとんど期待できない
- 自分で提案営業からクライアント対応まで全てやる必要がある
求人サイト
- 単価高め
- 参入障壁がやや高め(未経験可の案件も割と多い)
- 競合が少ない
- 比較的規模の大きい案件が多い
- 継続案件は初回の仕事内容が良ければ期待できる
- 担当者が案件を紹介してくれるので営業の必要はナシ
見ていただいて分かるとおり慣れてしまえば求人サイトの方が継続的に稼げます。
ふたご
クラウドソーシングを使う場合に注意すること
クラウドソーシングを使う場合、フリーランス初期の方が見落としがちな、でもストレスフリーに稼いでいくためには大切なポイントがあるのでいくつかご紹介します。
ふたご
発注率の低いクライアントには提案しない
発注率の目安：６０％以上
発注率の低いクライアントにはどんなに質の高い提案をしても受注に至らない可能性が高いです
そのため発注率が６０％以上のクライアントのみに絞って提案をすることをオススメします
依頼文の日本語がおかしい案件には依頼しない
依頼文の日本語がおかしなクライアントとのやり取りほど非効率でストレスの溜まる仕事はありません
双方の認識にズレが生まれたり、メーセージに費やす時間がムダに増えてしまうためです
弊社運営の美容院でHPをリニューアルすることなりますた
いまのHPを10年経過したがオシャレじゃない
WordPress？Wix?よくわからないですけど相談してください
納期は急いでいないですが。早いのがいいです
参考URLは貼っておくので見てからの連絡ください
レス早い人おながいしまう
うーん・・まあ言いたいことはわかる。わかるけどこんな案件を取ったら苦労するのは目に見えてますよね
どれだけ切羽詰まっていても提案しないように気をつけてください
筆者もフリーランス初期の頃は焦って日本語がおかしな案件にも受注していましたが、急に連絡が取れなくなったり、メッセージの内容が解読不能で何度もやり取りを繰り返したりとストレスが溜まった経験があります。焦る気持ちはわかりますが、限りある時間を費やす価値のあるクライアントだけに絞って案件を獲得しましょう！
ひとこと言わせてください
ここまでやり切ったあなたは誰に何を言われようがプロのWebデザイナーです！未経験からのスタートで大変だったかと思いますが本当にお疲れ様でした。尊敬します。楽しいWebデザイナーライフを！
まとめ
最後まで読んでいただきありがとうございます。ちょっと長かったかとは思いますが、その分出し惜しみせずだれが実践しても確実に稼げるように書いたつもりです。
【この記事の要約】
- Webデザイナー独学ロードマップ（Web制作で月収10万円稼ぐ）
- まとめ
筆者が歩んできたロードマップを数十回もの修正と改善を重ねた『超決定版』なのでぜひ挑戦してみてください。この方法が唯一無二で他に方法はないとは言いませんが、ほんのちょっとでもあなたが初めの一歩を踏み出すきっかけになれたのなら幸いです。
Web制作の案件に慣れてきて『もっと高単価な案件をこなしたい』と感じている方は下の記事をご覧ください。きっと役に立ちます。
