最終更新日:2020/09/19
女性A
未経験からフリーランスのWebデザイナーになるにはどうすればいいの?
男性A
独学でもからでもWebデザイナーになれる?
今回は、未経験からWebデザイナーになって在宅で稼ぐために必要な知識を解説していきます。

  • 未経験だけどWebデザインに興味のある人
  • Webデザインを学んで手に職をつけ、在宅でも仕事ができるようになりたい人
  • Webデザイナーとしてフリーランスで稼ぎたい人

以上のような人々は必見です。

【はじめに】Webデザイナーになるにはどんなスキルが必要?

まず、Webデザイナーとして仕事を得るために必要なスキルを改めて紹介しておきます。

Webデザイナーとして案件を受注している人たちは、以下のような技術を使って「Webデザイン」していきます。

  • Photoshop(フォトショップ、通称:フォトショ)
  • Illustrator(イラストレーター、通称:イラレ)
  • Adobe XD

また、それぞれのデザインを、以下のようなコードに落として、実装していきます。

コード一覧 HTML,CSS,JavaScript,jQuery,Bootstrap,PHP

Webデザイナーにとって、AdobeのPhotoshop、Illustratorは必須

PhotoshopやIllustratorといった言葉は、初心者の人でも聞いたことがあるのではないでしょうか。

Adobe社の「Photoshop」「Illustrator」「XD」は、Webデザイナーになるならまずマスターすべき基本的なスキルです。

DAI
それぞれのツールでできることは微妙に異なります。

Photoshop

Photoshop(フォトショップ)では、写真や画像など、Webサイトやアプリ内で使用するクリエイティブの編集を行います。

 

Illustrator

Illustrator(イラストレーター)では、チラシやフライヤー、アイキャッチ画像、アイコン、ファビコンなど、あらゆる画像系のクリエイティブを美しく製作します。

 

Adobe XD

XD(エックスディー)では、アプリやWebサイト内のビジュアルをデザインし、実際のサイトのようにボタンの動きなどをつけて構成を表現します。XDは、いわゆる「プロトタイプ」を作る「プロトタイピング」ツールです。

WebデザイナーはHTML、CSS、JavaScriptで「コーディング」する

Webデザイナーの仕事は、図形や文字配置を調整しながらデザインを考えるだけにとどまりません。

作ったデザインを実際に「動く」ものにする技術があると、在宅でもしっかり稼げるようになります。

デザインを「動かす」作業を一般的に「コーディング」と呼びます。コーディングとは、もっと具体的に言えば、HTMLCSSJavaScriptなどのコンピュータ言語を記述し、プログラムします。

DAI
Webデザインの工程は以下の通りです。
  1. HTMLを使って文字や画像を配置
  2. CSSを使ってそれらの配置・構成を決め、画面上に整理
  3. JavaScriptでポップアップウィンドウや検索・ソート機能をつける
  4. 立派なWebサイトやアプリのフロント部分が完成

在宅で仕事を受注できるWebデザイナーは、HTML・CSS・JavaScriptといった基本的なデザイン系プログラミングテクニックを身につけ、フロントコーディング工程まで請け負います。

DAI
在宅でも確実に仕事を得るには、是非会得しておきたいWebデザインスキルです。
  • コーディングスキルから派生して、jQueryBootstrapを知っていると、より効率的に美しいWebサイト・アプリが作れるようになります。
DAI
プログラミング言語のひとつ「PHP」も、Webサイト・アプリの機能拡張には欠かせない主要言語のひとつ。網羅的に学んでおきたいですね。

「WordPress」を知っていることもWebデザイナーの大切な条件

WordPress(ワードプレス)はCMS(コンテンツ管理システム)の一つで、Webサイトの内容を管理するのに使用します。このブログのコンテンツ管理にもWordPressを使っています。

WordPressを覚えるのは、初心者でも簡単です。

DAI
WordPressのUIを理解しておくだけで、HTMLやCSSなどのコードが書けなくても、ブログのコンテンツ管理や記事作成などを簡単にできます。

Webデザイナーとして色々な案件に関わると、WordPressでコンテンツを編集することもあるはず。

DAI
まずは練習でブログを開設したりすると、実際に触ってみることができますよ。

Webデザイナーのスキルについてもっと詳しく知る

それぞれのスキルについて、もう少し詳しく知りたいという人は、こちらの関連記事も合わせて見てみてください。

【2020年】Webデザインが学べるおすすめのスクール厳選4社を紹介!

Webデザインのスキルがあれば在宅で●●円稼げる!

男性A
Webデザイナーってぶっちゃけどのくらいお金になるの?
女性A
とくに在宅なんて条件では、実際のところ稼げるか心配……
DAI
そんな方のために一度相場を確認しておきましょう。
在宅でWebデザイナーと一口に言っても、収入相場を分けるパターンがいくつかあります。

  • 一攫千金タイプ:コンペで勝てば報酬をもらえるタイプ。一般的には法人向け。1案件で500-1000万ぐらいが相場。
  • 安定就職タイプ:在宅Webデザイナーとして採用されて安定的に仕事をするタイプ。月20-40万円。
  • フリーランスタイプ:フリーのWebデザイナーとして案件を受注するタイプ。1案件20-30万
DAI
それぞれ、同じ在宅のWebデザイナーでも状況が異なり、もちろん収入相場も違います。
一攫千金タイプ
コンペに勝てば報酬を得られるWebデザイナーは、勝てば一度で数百万円程度もらえますが、負ければゼロ円の世界。

DAI
調子が良い時なら、収入を跳ね上げることもできるかもしれませんが、とにかく安定性に欠けます。
安定就職タイプ
在宅でも企業と契約するタイプのWebデザイナーは、スキルや経験によりけりですが、月収20万円程度もらえる場合が多いです。在宅でありながら、一般的な会社員程度の収入を安定的に得られる働き方かもしれません。
DAI
もちろん、一歩進んだテクニックがあればもっと多くの収入も見込めます。
フリーランスタイプ
たくさん経験を積んで、魅力的なポートフォリオを用意できるようになると、フリーランスのWebデザイナーとして月収50万規模の案件を受注することも夢ではありません。もちろん、初心者や駆け出しのWebデザイナーがすぐにフリーランスで成功するのは難しいですが、コツコツ経験を積んで行けば大丈夫。
DAI
実力さえあれば一番儲かるのではないでしょうか。

このように、在宅でWebデザイナーとして働くにしても年収相場は経験によりけりです。

Webデザインスキルを勉強したての初心者は、まずは色々な案件をこなして経験を積むことを優先に考えたいところですね。

クラウドワークスランサーズなどのクラウドソーシングサービスを使うと、色々な案件を受注してスキルを磨くことはできるかもしれません。

DAI
低単価の案件も多いですが、少しでも多く数をこなしたいという人はとりあえず登録してみてもいいと思います。
未経験からWebデザイナーとして在宅で副業する方法【初心者向け】

未経験からフリーランスのWebデザイナーになるために必要なことは?独学でもできる?

男性A
未経験でも在宅で稼げるWebデザイナーになれるの?
DAI
結論から言うと、なることができます!

未経験からWebデザイナーになって在宅で収入を得るために必要なのは、確実なスキル・技術を身につけること。

そのためにまず、デザイン学習を計画立てて実行してみましょう。

デザイン学習を計画立てて実行するために:目標と期限を設定する

未経験者がWebデザイナーになるためには、上で紹介したようなスキルを学ばなければなりません。

まずは、「いつまでに何ができるようになるのか」を明確に設定しましょう。

男性A
冬のボーナスが出たら会社を辞めたいから、それまでにAdobe製品を使えるようになる!
女性A
HTMLやCSSなどのコーディングスキルを身につけて、1年後までに自分でWebサイトを作ってみる!

このように目標と期限を設定してみてください。

DAI
締め切りと内容がわかれば、あとは毎日のTO DOレベルにブレイクダウンしていけば、自ずと学習計画は見えてきます。

独学でもWebデザインを学ぶことはできる?

DAI
独学でも学ぶことはできます!ですが、相当なやる気と覚悟が必要になります。

重要なことなので、一番大事なことを繰り返しますね。

Webデザイナーとして働くためには、オリジナルサイト公開が一番重要です。

男性A
オリジナルサイトを作るのってなんだか難しそう…
男性A
独学で作れる自信ないよ!

そうです、独学でゼロからやろうとすると、相当時間がかかりますし、9割がた挫折します。

DAI
僕自身も、学生のころ独学で途中までやっていたので、かなり時間がかかりました。

独学でやってみて、つらかったこととしては、こんな感じです。

  • エラーの解決方法が全く分からず、3日間悩んでしまう
  • 目標を達成するために、何を勉強すべきか全くわからなくなる
  • いくら調べて勉強しても、具体的なサイト・アプリが作れる気がしない…

僕の場合は、プログラミングスクールを経営している友達がいたので、彼に途中からメンターに入ってもらったのですが、かなり学習効率が上がりました。

  • 3日間悩んでいたことが、30秒で解決できるようになった
  • Webサイトを作るところから逆算して何を学べばいいかわかるから、やる気が上がった
  • エラーも自己解決できるような、学習方法が学べたので、学習効率が上がった

一気に効率的に学習できるようになり上達しました。

なので、今独学で躓いていたり、効率的に学びたい人は、最初からプログラミングスクールを利用してみてもいいかもしれません。

スクールに課金する目的を明確にしてから評判のよいプログラミングスクールを探す

プログラミングスクールに通うことで完全に独学では得られないメリットが色々あります。

  • 客観的な評価・レビューを受けながらスキルを学べる
  • 実際にエンジニアとして働いている人から生の話が聞ける
  • モチベーション管理や、学習リズムの管理がしやすい

とはいえ、なんとなくプログラミングスクールに課金して惰性で通うことには、ほとんど意味がありません。

女性A
スクールでプロからの指導を受けるぞ!
男性A
3ヶ月で確実にモノにするぞ!

このように、プログラミングスクールを利用する明確な目標があって初めて、スクールでの学びが意味あるものになります。

Webデザインを学べるプログラミングスクールも、正直のところ玉石混交です。

DAI
安いだけあって講師の質が低かったり、学習サポートが不十分だったりします。

在宅でも稼げるような確実なスキルを身につけたければ、質の高いメンター・講師のもとで、万全のバックアップを受けながら勉強できるプログラミングスクールを選んでください。

プログラミングスクールの選び方として、以下のことをやってみてください。

  • スクール名で評判を検索する
  • TwitterなどのSNSで口コミを調べてみる

客観的なスクールの評価を見ることができます。気になるスクールがあればまず調べてみるといいでしょう。

失敗しないプログラミングスクール選びについては、以下の記事にまとめています。興味のある人はぜひこちらも参考にしてください。

転職・就職に失敗しないと評判のおすすめプログラミングスクール5選

在宅Webデザイナーになるためのおすすめプログラミングスクール【3選】

初心者・未経験者でも在宅Webデザイナーを目指せる、おすすめのプログラミングスクールを紹介しましょう。

DAI
「在宅」Webデザイナーを目指す、という条件にこだわって、ここなら間違いないという3つにフォーカスしました。

在宅Webデザイナーを目指せるプログラミングスクール①:CodeCamp

【CodeCamp】完全オンラインのプログラミング個人レッスン
わずか¥148,000+入会金¥30,000で学べるスクール。学校や仕事と両立しながらオンラインで学習可能!自分に合ったメンターを選んで仕事の相談もしたい方必見!

CodeCampとは、オンライン完結型プログラミングスクールです。

CodeCampの概要

パソコン一台あれば通学の必要がなく、プログラミング初心者でも効率的にWebデザインやプログラミングを学習できます。

  • 受講者数:20,000人以上
  • 導入企業数:300社以上
  • 導入企業例:LINE株式会社、ガンホー・オンライン・エンターテイメント株式会社、株式会社インタースペース、株式会社レコチョクなど
  • レッスン満足度:94.6%
  • 在籍講師数:200人以上
  • 受講可能時間帯:7:00〜23:40 年中無休
  • レッスン時間:40分/1レッスン
  • レッスン形態:マンツーマン・オリジナルカリキュラム

仕事や学校と両立しながら自分のペースで学習できるのが、CodeCampの魅力。

未経験から始めて、エンジニアとして就職したり副業で稼いだり、実用的なスキルを身に付けることが可能です。

Webデザインを学びたい初心者向けの「デザインマスターコース」では、

  • HTML
  • CSS
  • JavaScript
  • jQuery
  • Photoshop
  • Illustrator
  • Boostrap
  • Webデザイン

に必要なスキルを網羅的に学習できます。

価格

デザインマスターコースだと、2ヶ月で148,000から。Webデザイン系のスクールの中では、かなりお手軽な価格で受講できます。

実際の体験談

実際に僕がCodeCampでプログラミングを学んだときの体験記事があるので、合わせてチェックしてみてください。CodeCampのカリキュラムや学習スタイル、最終的に提出した成果物などについて細かく書き留めてあります。

関連記事:【体験記】CodeCamp(コードキャンプ)の評判を確かめに、実際に2カ月受講してみた感想【PR】

実際にやってみてよかったのが、メンターをこちら側から選べる点ですね。例えば、女性の場合、在宅勤務でフリーランスをされている方を選んでキャリアの相談をしたり、案件の取り方について相談できたりします。

実際にサービスを体験できる、無料体験に申し込むと、カリキュラムの一部が解放されるので、気になった人はまず無料で試してみてください。

CodeCampで無料カウンセリングを受けてみる

【CodeCamp】完全オンラインのプログラミング個人レッスン
わずか¥148,000+入会金¥30,000で学べるスクール。学校や仕事と両立しながらオンラインで学習可能!自分に合ったメンターを選んで仕事の相談もしたい方必見!

在宅Webデザイナーを目指せるプログラミングスクール②:TechAcademy

【TechAcademy】Webデザインをゼロから学びたいならここ!
お手頃価格でWebデザインを基礎から学習!最短4週間から、自分のペースに合わせて学習可能。複数コース受講で最大60,000円もお得に!

TechAcademyは、最短4週間で未経験からプロを育てるオンライン完結のスクールです。どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。

特にGoodなポイントは

  • 自宅にいながらオンライン完結で勉強できる
  • 受講生に1人ずつ現役のプロのパーソナルメンターがつく
  • チャットで質問すればすぐに回答が返ってくる

でしょう。

TechAcademyには、Webデザインコースがあります。

さきほどの5万円ほどの案件を獲得するのに必要なスキルがすべて学べるコースですね。

料金も、一番短い期間でしたら、14万円ほどなので、業界最安値かと思います。副業で3件くらい案件が取れるようになれれば、2~3カ月くらいで回収できる値段ですね。

TechAcademyのインタビュー記事も以前に書いたことがあるので、見てみてください。

また、TechAcademyでは、無料体験ができるようです。まずは無料体験に申し込んだうえで、レッスンを受けてみるのがよいかと思います。

※更新情報 2019年8月3日
TechAcademyのコースは、1コース申し込むと、もう1コースが割引になるセット割があります。
複数コースをセットを申し込むと、普通に学ぶ場合よりも60,000円もお得になるようです。

【TechAcademy】Webデザインをゼロから学びたいならここ!
お手頃価格でWebデザインを基礎から学習!最短4週間から、自分のペースに合わせて学習可能。複数コース受講で最大60,000円もお得に!

在宅Webデザイナーを目指せるプログラミングスクール③:RaiseTech

RaiseTechは、現場で使える最新技術を落とし込んだカリキュラムを提供しているプログラミングスクールです。

特徴としては、以下3点があります。

  • 現場でフロントエンジニアをしている、月単価80万以上の講師のみ採用している点
  • 実際にフリーランスで働いている人から、案件の取り方をしっかりとレクチャーしてもらえる点
  • 社内で案件をもらえる人脈があり、しっかりとしたスキルがある人であれば、営業の仕方までがっつりと案件を獲れる点

Web制作で、副業を始めたい!という方にはおすすめのプログラミングスクールです。

このスクールは、Webデザインに特化している訳ではないのですが、Web制作のコーディングについては学べます。

実際に仕事を取るところまで、がっつりとサポートがあるので、とにかく「稼げるようになりたい!」という方にはおすすめのスクールです。

参考)RaiseTech(レイズテック)を実際に受講してみた感想

RaiseTechをみてみる

【まとめ】在宅Webデザイナーになるなら「急がば回れ」

Webデザイナーとして在宅で働くならば、まずは確実なスキルをつけることが必要。

DAI
未経験・初心者であれば、評判のよいプログラミングスクール・Webデザインスクールを利用するのが一番早いと思います。

Webデザイナーを目指す場合は、ぜひ検討してください!

この記事でおすすめしたプログラミングスクール

【CodeCamp】完全オンラインのプログラミング個人レッスン
わずか¥148,000+入会金¥30,000で学べるスクール。学校や仕事と両立しながらオンラインで学習可能!自分に合ったメンターを選んで仕事の相談もしたい方必見!

【TechAcademy】Webデザインをゼロから学びたいならここ!
お手頃価格でWebデザインを基礎から学習!最短4週間から、自分のペースに合わせて学習可能。複数コース受講で最大60,000円もお得に!

【RaiseTech】副業に特化したWordPress副業コースがある!
実は副業で案件獲得するためのコースを開いているのはほぼRaiseTechのここだけ。プログラミングを学ぶだけではなく、副業での営業方法を学んだり、実際にスクールを受講しながら仕事をやってみたい方にはおすすめ。

関連記事

Webデザイナーに未経験からなるためには?転職方法・就職準備について詳しく解説
【失敗しない】本気でおすすめできるプログラミングスクール厳選6社徹底比較
ITで副業したい人必見!案件獲得するための方法とおすすめIT副業サイトを解説してみた【リモートワークあり】