【裏ワザ】Webデザイナー独学ロードマップ(Web制作で稼ぐ)

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

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

ふたご

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

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

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

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

ふたご

この記事を読んでいる時点であなたは相当な熱意と行動力をお持ちなので、確実にスキルを習得できると断言します。独学だろうが未経験だろうが関係ありません。あとはやるだけです。

目次

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

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

ふたご

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

想像してみてください。

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

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

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

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

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

ふたご

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

たった3ヶ月。

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

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

つらい現職から抜け出して転職したい・・

休日を増やしたい・・

海外旅行に行きたい・・

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

親孝行がしたい・・

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

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

叶えましょう!

もちろんそのためには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ヶ月で月20~30万円稼ぐこともぜんぜん可能です

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

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

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

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

詳しくは次の章でご説明します。

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 or IllustratorでWebサイトのデザインを作成

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

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

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

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

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

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

 

Adobe公式サイトを確認

 

Photoshopの習得はそこまで難しくはないので『未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース』を受講すればマスターできます。

ふたご

Udemyのセール期間に購入すればPhotoshopの料金と合わせても飲み会1回分で周りと差がつくなら安いもんですよね。

 

【中級】Photoshopで作成したデザインをもとにコーディング!

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

Photoshop(Illustrator可)で作成したサイトデザインをもとにHTML / CSSでコーディングをしていきます

ランサーズやWeb制作会社の案件を見ていても『コーディング案件』は非常に多いので、ここまでのスキルを習得してしまえば月に5~10万円どころか、20万円以上稼ぐことも可能かと思っています。(筆者の経験から)

ここまでくれば月に5~10万円は確実に稼げるレベルになっているはずです

ふたご

 

【上級】中級レベルで作成したコーディングファイルをWordPress化する

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

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

具体的には

Adobe XDでサイトのワイヤーフレーム(ひな形)を作成 ▶︎ Photoshopにてサイトデザインを作成 ▶︎ コーディングファイル作成 ▶︎ WordPress構築 ▶︎ 納品

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

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

WordPressでのWeb制作案件の相場はだいたい1件につき20~30万円(企業に直接営業をする場合は40万円以上も可能)なので、月に1件でも案件を獲得すれば生活できる計算になります

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

それでは早速Webデザイナーとして稼ぐための具体的な手順を紹介していきます。次の章でご紹介するロードマップを着実に実行していただければ、月収20万円以上を稼ぐことも可能なのでじっくり読み進めてもらえると嬉しいです。

ふたご

 

Webデザイナー独学ロードマップ(Web制作で月収20万円稼ぐ)

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

ふたご

 

受講前にAdobe『Photoshop』をインストール

なんでAdobe『Photoshop』が必要なの?

簡単にいうとAdobeが提供するPhotoshop / Illustrator / XDを使うことによって初めてWebデザインの基盤となるサイトデザインの作成ができるからです

つまり、AdobeツールはWebデザインをおこなうための『画材(絵の具や画用紙)』の役割を担ってくれるというわけです。絵を描きたいのに画材がないのは困りますよね。その代わり、WebデザインではAdobeツールが必要となってくるわけです。

 

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

実際に案件を受注する際には『Photoshop / Illustrator / XD』全てを使用するので『コンプリートプラン』以外の選択肢はないのですが、『通常価格5,680円 / 月』と、正直いって少々お高いので悩んでしまうかと思います。ただ、『Photoshop』をマスターすれば他のツールは1週間ほどで習得できてしまうので、今回はひとまず『Photoshop月々プラン』のみをインストールしましょう。月々プランならスキルを習得して実際に案件を獲得してからの『プラン変更』もしやすいのでおすすめです。

『Photoshop – 単体プラン』であれば飲み会1回分で周りと差がつくなら安いもんですよね。

 

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

 

Adobe料金プランを確認

 

Adobe『Photoshop』の購入方法

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

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

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

ふたご

 

2. Udemyで学習(1~2ヶ月)←重要です

この記事内でUdemyの講座を使った学習方法を紹介するとちょっと長くなりすぎてしまうので下記記事にまとめました。Webデザイナーとして『稼ぐ』ことに特化した学習講座を厳選してあります。

ふたご

ちなみにご紹介しているUdemy講座は『通学スクール100万円の価値はある内容』です。それらをセール期間中ならどの講座も基本的には2,000円以下で購入できるので超オトクです。

 

【もう失敗しない】Udemy『Webデザイン』おすすめ講座6選|独学向け

 

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%完璧な結果は求めませんし少し無理するくらいの案件に挑戦してみましょう。

ふたご

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

クラウドソーシング

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

法人営業(Web制作会社へメール営業)

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

ふたご

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

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

ふたご

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

発注率の目安: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デザインスクールは最強ということです。独学ムリ・転職したいという方は是非話だけでも聞いてみると世界が広がると思いますよ。

ふたご

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

 

まとめ

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

最後に、Webデザイン学習と両立して『副業ブログで月5万円くらいを稼ぎたい方』におすすめの記事を紹介して終わりにします。

【副業ブログはこれだけ読めば安心!
  • 副業ブログで月収5万円稼ぎたい・・
  • ブログアフィリエイトを始めたい・・
  • ブログ開設ってめんどくさそう・・
  • どうせそれなりにお金かかるんでしょ・・
  • 凡人の私が本当に稼げるの?・・

こんな悩みを全て払拭できます。

最後まで読んでいただければ『初月から10万円稼げる裏技』もわかっちゃいます!(ウソではありません)