Webデザイナー3ヶ月ロードマップ【独学で月10万稼ぐ】

今回の記事では独学・未経験からWebデザイナーとして3ヶ月で稼げるようになるための手順をご紹介します。筆者自身、完全未経験から3ヶ月独学のみでWebデザイナーとして月に20万円稼げるようになったロードマップなので是非試してみてください。

こんな悩みや疑問を解消できる記事内容になっています。

ふたご

  • Webデザイナーになってみたいとは思うけど具体的にどうすればなれるのかわからない。
  • できれば時間もお金もあんまり使いたくないな。
  • どこのサイトも同じようなこと書いてあるけど結局どの方法が正しいのかな。
  • Webデザイナーにはどんなスキルが必要なの?

そんな疑問は全て払拭できます

まずはさらっとでもいいので読み進めてみてください

3ヶ月で独学・未経験からWebデザイナーとして月収20万円稼げるようになった筆者が解説していきます。あなたがWebデザイナーになるための方法論を検索する作業はこの記事で最後になることでしょう。

ふたご

目次

2020年にWebデザイナーへの転向がオススメな5つの理由

Webデザイナーに興味はあるけど、難しそうだし本当に稼げるようになるのか不安。。
そしたらまずWebデザイナーになるメリットを読んであなたに向いているのかを確認してみましょう!

ふたご

1. パソコンひとつあればどこにいても稼げる

想像してみてください。

時間にとらわれずパソコンを片手に仕事をしている自分の姿を

行きたいと思い立ったその翌日には南の島に向かう飛行機の中でワクワクしている自分の姿を

実績を積み上げていくことでWebデザイナーがあなたの本業になり、どこにいてもパソコン一台さえあれば稼げる状態になります

これからは朝一の臭くて不快な満員電車に乗ることも、尊敬のできない上司に愛想笑いして疲れることもなくなるのです

3ヶ月くらいなら頑張れそうじゃないですか?

ふたご

2. 3ヶ月全力で学習すれば月3万~5万円なら確実に稼げる

たった3ヶ月。

あなたの人生のうちほんの400分の1の時間を費やせば副業で月に3~5万円稼げるようになるのです

今よりも月に3~5万円も余分に収入が入ってくるとしたらあなたはなににお金を使いたいですか?

海外旅行に行きたい・・

新しいパソコンが買いたい・・

親孝行がしたい・・

知識欲を満たすために本に囲まれた生活がしたい・・

健康的な生活がしたい・・

これは筆者が当時思っていたことです

あなたも副収入を得たりフリーランスとして働くことで叶えたいなにかがあるはずです

叶えましょう!

もちろんそのためには3ヶ月という期間は仕事でヘトヘトでも朝眠くても無理やりにでも時間を捻出してもらいます

平日の学習スケジュール(社会人の場合の指標)
  • 8:00 – 9:00 出勤前に職場近くのカフェで学習『1時間』
  • 10:00 出勤
  • 12:00 – 13:00 休憩時間に食事をしながら動画学習『1時間』
  • 20:00 退勤
  • 21:00 – 23:00 帰宅後、自宅にて学習『2時間』
スケジュールをみる限りだと1日に3~4時間くらいなら学習できそうな気がしませんか?残業が多くて難しい場合は休日の学習時間を増やして調整してみてください。(目安:週20時間)

ふたご

注意
学生などで時間のある方は倍の時間を学習に費やして3ヶ月で月10万円稼ぐことも可能です

3. コーディングも同時に学習すれば案件が多く仕事に困らない

次の章で詳細は話していきますが、Webデザイナーの仕事にはPhotoshopやIllustrator(Adobeが提供しているデザインツール)を使ってデザイン素材を作成することに加え、実際にそのデザインをブラウザで反映できるようにするコーディングという作業があります。

コーディングと言ってもエンジニアが使うようなハイレベルな言語ではなく、HTML, CSSという1ヶ月ほど学習すれば身に付くレベルの言語なのでご安心を。はっきり言って簡単です

これは最悪できなくてもなんとかなるのですが、学んでおくことでWebサイトの制作案件などコーディング込みの案件が取れるため仕事の幅が広がります。つまり稼げる額が跳ね上がります。

おすすめは断然WordPressです!

4. 高度なコーディングスキルが不要(HTML,CSSだけでOK)

前述でも少し触れましたがWebデザイナーにはハイレベルなコーディングが不要です

HTML, CSS(仕事の幅をさらに広げたい方はJavaScriptも)だけ後々やっていけばOK!

まずはWebサイトやLPのデザインを作成できるレベルを目指しましょう

Webデザインをやっている中で自分はデザインよりもコーディングが好きかもと感じたらフロントエンドエンジニアを目指してみるのもいいですよ。収入も市場価値も上がります

ふたご

5. フロントエンドエンジニアへの転向がしやすい(月収50万以上も狙える)

コーディング(HTML, CSS)もできるWebデザイナーの場合、フロントエンドエンジニアに転向するのもアリです

案件も収入も増えるのでフロントエンドのコーディング(Vue.jsなど)が好きな方には非常に向いています

特に企業で契約社員として働く場合には収入が爆上がりの可能性大(目安:50万以上)

ただし、コーディングが苦手or嫌いな方はWebデザイナーとして実績を積んだ方がいいです

とは言っても、フリーランスで案件を受注をしていくならそこまでの差はないのでコーディング(HTML, CSS)もできるWebデザイナーを目指すのがおすすめです

ふたご

未経験からWebデザインで稼ぐ方法3選

そもそもどうやって稼げばいいのかわからないんだけど?
それでは初心者からでもWebデザイナーとして稼ぎやすい方法を3つ『初級〜上級の段階に分けて』ご紹介していきます

ふたご

【初級】PhotoshopでWebサイトやLP(ランディングページ)のデザインを作成

【期間の目安:1ヶ月~2ヶ月】副業にオススメのレベル『〜月5万円』

このレベルに到達できれば月に3万円ほどは稼げるので副業レベルは達成です

まずはWebサイトやLPのデザインを作るためにAdobeが提供しているPhotoshopやIllustratorをインストールします

注意
中級レベルを目指す方は『Photoshop – 単体プラン』・上級レベルを目指す方は『コンプリートプラン』を購入しておけば間違いないです◀︎学生は格安なので迷わず『コンプリートプラン』にしましょう

インストールしてから1ヶ月半ほど学習すればデザイン案件を獲得できるレベルのスキルが身につきます

学習の手順は後ほどロードマップの章で紹介しますのでご安心ください

Adobe公式サイトを確認

そんなに難しくないので手順通りに学習すればどなたでも習得できます

ふたご

【中級】Photoshopで作成したデザインを元にJimdoまたはWix.com(ノーコードサービス)でWebサイトやLPを作成

【期間の目安:2ヶ月~3ヶ月】もう少しで本業を目指せるレベル『月5万円〜10万円』

Photoshop(Illustrator可)で作成したサイトデザインを元にJimdoまたはWix.comにて実際にWebページを作ります

JimdoまたはWix.comを使えばWebページを作成するのにコーディングは一切不要です

加えてブラウザ上に公開までできてしまうのも非常に便利です

JimdoまたはWix.comを使ってのWeb制作は2週間も練習すれば身につくので学習コストが少なく稼ぎやすいのも魅力の1つです

ここまでやれば月に5~10万円を稼ぐことが可能なレベルになっているはずです

ふたご

【上級】PhotoshopでWebサイトやLPのデザインを作成し、それを元にコーディングでブラウザに反映できる状態する(WordPressがオススメ!)

【期間の目安:3ヶ月~】本業としても挑戦できるレベル『月10万円〜』

このレベルになればより単価の高い案件を獲得可能になります

具体的には

Photoshopにてサイトデザインを作成 ▶︎ WordPressにてコーディング ▶︎ 納品

このような流れが一般的です

注意
クライアントによってはドメイン・サーバーの設定もお願いされる場合がありますが、簡単なのでご安心を

WordPressでのWeb制作案件の相場は大体1件につき5~10万円(企業に直接営業をする場合は20万円以上も可能)なので、月に2~3件ほど案件を獲得すれば10万円を超える計算ですね

ここまでのレベルに到達すれば問題なくフリーランスになれるかと思います

それでは早速Webデザイナーとして稼ぐための具体的な手順を紹介していきます。今回は月収5万円の副業レベルを目指す記事なので【初級】【中級】に絞って詳しく説明します。ちなみに今回は紹介しませんが、ブログで稼ぐことに興味のある方はブログの解説方法をご覧ください。IT系のブログは需要が高まっているのでWebデザインの学習と並行して始めると今なら副収入を得やすいです。

ふたご

未経験から3ヶ月でWebデザイナーとして稼ぐためのロードマップ(5ステップ)

不安な方も多いかと思いますが、これから5ステップで詳しく説明していくので理想の自分に近づくためのはじめの一歩として読み進めてみてください。

ふたご

1. Adobeをインストール

なんでAdobeが必要なの?

ここまで読んでもらえた方にはAdobeの必要性がわかっていただけたかと思います

簡単にいうとAdobeが提供するPhotoshopを使ってWebデザインの基礎となるサイトデザインの作成ができるからですね

作成したファイルを画像データとしてコードに埋め込んで使用できるのもありがたい点です

Adobeのどのプランを選べばいいの?

社会人の場合

中級レベルを目指す方は『Photoshop – 単体プラン』・上級レベルを目指す方は『コンプリートプラン』を購入しておけば間違いないです

注意
フォトプラン(980円でLightroom ClassicとPhotoshopが利用できる)もありますが、容量・使える素材・フォントが少ないため趣味で使いたい方向けです。またフォトプランは年間払いに限定されているのでまずは月額制で試してみたいという方にはおすすめできません

 

Adobe公式サイトを確認

学生の場合

学生は格安なので迷わず『コンプリートプラン』にしましょう

いろんなことに挑戦してみたい!という学生さんとかはより多くのAdobeツールで遊んでみることをおすすめします

 

Adobe公式サイトを確認

Adobeの購入方法

まずはCreative Cloudのプランと価格からお好みのプランを選び『購入する』を選択します

すると下の画像のような画面に遷移するので手順通りに記入し『注文する』を選択すれば完了です

ついにWebデザイナーとして一歩踏み出しましたね。次は具体的な学習方法について見ていきましょう!

ふたご

2. Udemyで学習(1~2ヶ月)

この記事内でUdemyの講座を紹介するとちょっと長くなりすぎてしまうので下記記事にまとめました。Webデザイナーとして『稼ぐ』ことに特化した講座を厳選してあります。Udemyユーザーならだれもが知っている『講座をお得に受講するための情報』も記載したのでぜひご覧ください

ふたご

『もう失敗しない』Udemyおすすめ講座をまとめて紹介【Webデザイン初心者編】

3. ポートフォリオを作成(1ヶ月)

ポートフォリオってなに?

ポートフォリオは簡単にいうと実績を示すための作品集です

自分はこれだけのことができるんだぞ!とアピールする際に使います

クライアントに自分のスキルを理解してもらうためには必須です

更にいうと魅力的なポートフォリオさえあれば営業が苦手な方でもなんとかなっちゃいます

ふたご

ポートフォリオってなにを作ればいいの?

Webデザイナーの場合、具体的に何を作るのかというと

  1. Adobeツール(Photoshopなど)を使ってサイトに入れ込むバナーの作成
  2. Adobeツール(Photoshopなど)を使って仮想店舗などのサイトデザインの作成
  3. 作成したデザインを参考にWordPressでコーディングをしてサイトを公開する

1のバナー作成はサイトのデザインを作る中で自然と触れることなので2の仮想店舗などのサイトデザインの作成を優先的に始めましょう

MEMO
ここで言う仮想店舗というのはなんでも大丈夫です。カフェでも小売店でも企業HPでも好きなデザインを作ってみてください。ただ、一つ注意してほしいことがあります。作成する際には必ずデザイン性の高いWebサイトを参考にしてください。現役Webデザイナーとしてはイケサイがオススメです。
ここまでくればあとはクライアントに売り込むだけ!あなただけの魅力溢れるポートフォリオをアピールしましょう。

ふたご

4. 営業資料・提案文章作成(1~2週間)

あなたの努力を集約したポートフォリオサイトが完成したら、あとは売り込むための良質な営業資料や提案文を作成しそれを案件獲得のために淡々とクライアントに送り続けるだけです

ここでこんな疑問を持つ方がいるかもしれません

営業資料や提案文はなんで必要なの?なくても取れそうだけど・・
良質な営業資料や提案文が必要な3つの理由
  1. 案件の受注量=営業での接触数×案件獲得率であり、そのうちの案件獲得率を上げるため
  2. 前もって資料や提案文を用意することで効率よくクライアントへの接触数を増やすことができる
  3. だれも営業資料や提案文が疎かな人間からはモノを買わない。フリーランスや副業といえど、クライアントからすれば関係のない話。

言ってしまえば、商品のパンフレッドもなければメール内容もお粗末であるなんて営業される側としては商品を購入する以前の問題でNGですよね

と厳しいことを言っていますが、筆者も独立直後は営業資料なんてもちろんナシ、提案文もネットで拾ったようなテンプレで散々でした。もちろん案件受注率は1%未満と最悪な結果。世のフリーランスの8割は同じような状況だと思います。だからこそ営業資料や提案文にはこだわってほしいのです。ここを入念にやるだけで案件受注率は飛躍的に伸びます。

ふたご

ではさっそく営業資料と提案文をどのように作るのかみていきましょう!

これから解説する作成方法を参考にすれば案件の獲得率はアップします(たぶん)

営業資料の作成方法

基本的には同じような業態の企業にいくつか資料請求をして価格相場やパンフレッドの書き方を参考にします

MEMO
Googleで『Web制作会社 東京』などで検索すればいくらでも出てくると思うので片っ端から資料請求しましょう。”Webサイトを開設したいのでパンフレッドや見積もりを出していただけますか”と言えばもらえます。

資料の構成はほとんどパクってしまってもいいと思います(内容は変更してください)

価格については個人なので相場よりも安く記載するといいです(だいたい半額など)

あまり時間はかけずにパワポやKeynoteなどでサクッと作りましょう

ふたご

提案文の作り方

提案文の書き方

ステップ1 自己紹介

ステップ2 クライアントのニーズ×あなたに仕事を依頼するベネフィット(得する情報)

ステップ3 見積もりは具体的かつ詳細に

ちょっと具体的に解説していきますね

ステップ1 自己紹介

下の例を参考に作成してみてください

テンプレ(例)

はじめまして。

Webデザイナーの○○と申します。

貴社のサイトを拝見させていただき、アクセス数の増加や商品の購買促進のお役に立てると思いご連絡させていただきました。

私の経歴としましては

・・・

以前に作成した作品は△△△からご確認いただけますと幸いです。

ステップ2 クライアントのニーズ×あなたに仕事を依頼するベネフィット(得する情報)

提案文ではクライアントのニーズを把握しそれを自分なら解決できる、しかもお得ですよ。ということを強調しなければなりません

クライアントがこんな悩みを抱えていた場合

アクセス数や購買率が全然上がらない・・

アクセス数アップのためのSEO対策

購買率アップのためのユーザビリティの強化

こちらは無料でお受けいたします

悩みを抱えているクライアントからしてみたら、ここまで無料でやってくれるのか!そしたら任せてみようかな。という気持ちが芽生えます。ここまで書けたらすばらしいです!

ふたご

ステップ3 見積もりは具体的かつ詳細に

下の例を参考に作成してみてください

テンプレ(例)

【お見積もり】

  • トップページ制作費:3万円
  • 下層ページ制作費:1万円 × 5ページ
  • WordPressインストール費用:3万円
  • WordPressの初期設定費用:2万円
  • SEO対策:無料
  • ユーザビリティの強化:無料
  • 合計:13万円

このように具体的に書いていきます

人間は抽象的でなんかよくわからないモノには警戒してしまうので、可能な限り詳細に書きましょう

クライアントからしてみれば具体的な見積もりが記載されている方が、これだけやってくれるんだからお金を払う価値があるなという気持ちになります。ステップ1~3通りに提案文を作成できたらあとは提案をしまくるのみです。いよいよ次はロードマップ最後のステップです!

ふたご

5. 案件受注(2週間ほど)

ここまでくればあとはクライアントに提案をするだけ。ただ注意してほしいことやオススメの受注方法があるから最後まで気を抜かずいきましょう!

ふたご

案件はどこから獲得すればいいの?

フリーランス初期のあなたにオススメの案件獲得方法はズバリ!クラウドソーシングサービスを利用することです

知っている方も多いかもしれませんが、クラウドソーシングサービスとは仕事を依頼したいクライアントと仕事が欲しいワーカーをマッチングさせるサービスです

つまり、自分でクライアントリストを作成して営業をしなくても仕事がゴロゴロと転がっている場所ということです

なので前述の営業資料と提案文を作成したらどんどん案件に提案をしていきましょう

オススメのクラウドソーシングサービスはランサーズです

いくつか試してみた結論として、ランサーズ一択で問題ナシです!

でもどんな案件に応募すればいいの?自分のスキルでできるのかな・・

応募する案件の目安としては8割がた自分のチカラで完成できそうかな?くらいのイメージで問題ないです。あとの2割は調べればだいたいクリアできますのでご安心を。クライアントも100%完璧な結果は求めませんし少し無理するくらいの案件に挑戦してみましょう。

ふたご

案件受注におけるクラウドソーシングと法人営業の比較

クラウドソーシング

  • 単価低め
  • 参入障壁が低い(未経験でも案件を獲得しやすい)
  • 競合が多い
  • 比較的簡単な案件が多い
  • 継続案件はほとんど期待できない

法人営業

  • 単価高め
  • 参入障壁が高い(実績ナシで案件を取るのは至難の業)
  • 競合が少ない
  • 比較的ハイレベルな案件が多い
  • 継続案件は初回の仕事内容が良ければ期待できる
見ていただいて分かるとおり慣れてしまえば法人営業の方が継続的に稼げます。なのでクラウドソーシングで実績を積んだあとは法人営業に挑戦してみることをオススメします!

ふたご

案件を受注する上で注意すること

フリーランス初期の方が見落としがちな、でもストレスフリーに稼いでいくためには大切なポイントがあるのでいくつかご紹介します。

ふたご

発注率の低いクライアントには提案しない【ランサーズのみ】

発注率の目安:60%以上

発注率の低いクライアントにはどんなに質の高い提案をしても受注に至らない可能性が高いです

そのため発注率が60%以上のクライアントのみに絞って提案をすることをオススメします

依頼文の日本語がおかしい案件には依頼しない【ランサーズのみ】

依頼文の日本語がおかしなクライアントとのやり取りほど非効率でストレスの溜まる仕事はありません

双方の認識にズレが生まれたり、メーセージに費やす時間がムダに増えてしまうためです

日本語がおかしい依頼文の例(普通に見かけます)

弊社運営の美容院でHPをリニューアルすることなりますた

いまのHPを10年経過したがオシャレじゃない

WordPress?Wix?よくわからないですけど相談してください

納期は急いでいないですが。早いのがいいです

参考URLは貼っておくので見てからの連絡ください

レス早い人おながいしまう

うーん・・まあ言いたいことはわかる。わかるけどこんな案件を取ったら苦労するのは目に見えてますよね

どれだけ切羽詰まっていても提案しないように気をつけてください

筆者もフリーランス初期の頃は焦って日本語がおかしな案件にも受注していましたが、急に連絡が取れなくなったり、メッセージの内容が解読不能で何度もやり取りを繰り返したりとストレスが溜まった経験があります。焦る気持ちはわかりますが、限りある時間を費やす価値のあるクライアントだけに絞って案件を獲得しましょう!

ふたご

ひとこと言わせてください

ここまでやり切ったあなたは誰に何を言われようがプロのWebデザイナーです!未経験からのスタートで大変だったかと思いますが本当にお疲れ様でした。尊敬します。楽しいWebデザイナーライフを!

ふたご

独学だと不安な方におすすめのWebデザインスクール徹底解説

ここまで読んでみてやっぱり独学とスクールで迷ってるんだけど、どっちの方がいいかな?
一概にどちらがいいとは言えないけど、お金と時間に余裕があるならスクールも全然あり!ただし、独学だとサボってしまうから100%ムリ!管理してもらいながら確実にスキルを身に付けたい!という方のみ推奨です。とりあえず担当者に話だけでも聞いてみれば迷わないと思います。それではネット住人として誰よりもWeb系スクールに詳しい(たぶん)筆者のオススメWebデザインスクールを紹介していきます。

ふたご

『デジタルハリウッドSTUDIO by LIG』

Webデザイナーなら誰もが知っているウェブ制作会社▶︎株式会社LIGが運営するWebデザインスクール『デジタルハリウッドSTUDIO by LIG

特徴

最大の特徴は「Web制作会社が運営」していること。

Web制作会社であるLIGがスクールを運営することでのメリット
  • 豊富なWeb制作ノウハウをもとに教材が作られている
  • Web制作会社が運営していることもあり、言葉だけでなく、本質的にフリーランスレベルの即戦力スキルが身に付く
  • 運営もとがIT企業なのでWebデザイナー転職のサポートが段違いに手厚い
  • 獲得できるスキルレベルや受講期間の長さやサポート、講師陣の質の高さなどを踏まえると腰抜かすレベルで価格が安い
  • LIG運営のコワーキングスペース使い放題
  • 現役クリエイターによる直接指導

他にはない魅力が多いのでお金と時間に多少の余裕がある方はデジタルハリウッドSTUDIO by LIG一択で間違いないと思います

費用

プランは下の4つから選べますが、Webデザイナーになりたいあなたにオススメのプランは『Webデザイナー専攻』もしくは『Webデザイナー専攻+WordPress講座』です

もっと詳しく知りたい方はこちらから確認してみてください

評価

このスクールの評価
学習環境
(4.0)
学習効率
(5.0)
雰囲気
(5.0)
値段
(4.0)
費用対効果
(5.0)
転職サポート
(5.0)
総合評価
(5.0)
他にもスクールを紹介しようと思っていたのですが、筆者個人としては『デジタルハリウッドSTUDIO by LIG』に値するWebデザインスクールが存在しないという結論に至り断念しました。つまりLIGさんが運営するWebデザインスクールは最強ということです。独学ムリ・転職したいという方は是非話だけでも聞いてみると世界が広がると思いますよ。

ふたご

 このスクールの詳細ページ 

まとめ

最後まで読んでいただきありがとうございます。ちょっと長かったかとは思いますが、その分出し惜しみせずだれが実践しても確実に稼げるように書いたつもりです。この方法が唯一無二で他に方法はないとは言いませんが、ほんのちょっとでもあなたが初めの一歩を踏み出すきっかけになれたのなら幸いです。

今回のようなHOW TO記事の他にもCSSだけで作るアニメーションの記事などもありますので興味のある方は是非ご一読ください。