Web

Web制作副業の学習ロードマップ【プログラミング完全初心者OK】

Web制作副業の始め方
Web制作副業に興味がある人
Web制作副業に興味がある人

Web制作副業に興味があるのですが、何を勉強すればいいでしょうか?
独学すべきかプログラミングスクールに通うべきかについても悩んでいます。

 

こんな疑問に答えます。

 

僕はプログラミング完全初心者からWeb制作の勉強を始めて、今では Web制作副業をバリバリやっています。

ココナラで最高のプラチナランクを獲得することもできました。

ココナラプラチナランク

 

今、働き方改革によってサラリーマンの副業が解禁されつつあり、副業人口はどんどん増えています。

その中でもWeb制作は人気の副業です。

そんなWeb制作副業の人気の秘密が「在宅でできること」

以下では、これからWeb制作を始めようとしている人に向けて、プログラミング完全初心者から効率的にWeb制作副業を始めるまでの学習ロードマップについて解説していきます。

それでは、どーぞ!

Web制作副業に必要なスキルと案件例

Web制作副業とは

 

Web制作副業とはクライアントからWeb制作の依頼を受けてWebサイトを制作して、その対価としてお金をもらう副業です。

副業として始めるなら、

  • ココナラ
  • ランサーズ

のようなクラウドソーシングサイトを通して仕事を受注するのがメインになると思います。

以下ではWeb制作副業がどういったものかについて解説していきます。

Web制作副業に必要なスキル

Web制作副業を始めるために最低限必要になるスキルが、

  • HTML
  • CSS
  • JavaScript

といったWeb制作に使われる言語を使ってWebサイトを制作するスキルです。

Webサイトの仕組み

Webサイトを表示するときに活躍するのが「Webサーバー」です。

サーバーの役割
Webサイトが表示される仕組み

Webサイトの制作者は、Webサイトを見るのに必要なファイルをWebサーバーにアップロードしてWebサーバーに保存しておきます。

WebサイトのユーザーはWebサーバーにアクセスして、見たいWebサイトのファイルをダウンロードして、個人のパソコンにWebサイトを表示しています。

HTML/CSS/JavaScriptとは?

HTML/CSS/JavaScriptとはWebサイトを作るための言語です。

さきほど説明したWebサーバーを介してやりとりされるファイルは、HTML/CSS/JavaScriptで作られています。

HTML/CSS/JavaScriptの役割分担のイメージが以下。

Webサイトが表示される仕組み

HTMLでWebサイトに必要なパーツを並べて、CSSでWebサイトのパーツを配置・装飾ます。

そして、最後にJavaScriptでWebサイトのにパーツに動きを付けるといったイメージです。

Web制作の案件例

では、実際にどんな仕事があるのかココナラの公開依頼の案件からいくつか紹介します。

公開依頼とは発注者が受注者を募集する案件のこと

Webサイト制作案件

こちらはWebサイトのデザインとコーディング(+WordPress化)をこなす案件です。

WebデザインからWordPress化まですべてをこなす案件のため、30万〜50万高単価になっています。

Webサイト制作案件例
Web制作副業案件(デザイン)

Webサイトのコーディング案件

こちらはPhotoshopなどで作成したデザインデータをクライアントからもらって、コーディングしてWeb上に公開できる形にする案件です。

ボリュームにもよりますが、コーディングだけをこなす案件であれば数万円が相場です。

Webサイトのコーディング案件例
Web制作副業案件(コーディング)

Webサイトの修正案件

こちらはすでにあるWebサイトを修正する案件です。

修正だけであれば、数千円が相場といったところです。

Webサイトのコーディング案件例
Web制作副業案件(修正)

Web制作副業の特徴とメリット

Web制作副業はスキル型の副業に分類されて、以下のような特徴があります。

スキル型副業の特徴
  • 副業を始めるために数ヶ月程度かけてスキルを身につける必要がある
  • ストック型の副業に比べて、稼げるようになるまでの期間が短く再現性が高い

例えば、ブログのようなストック型の副業で稼ごうと思うと収益ゼロの期間が長く、忍耐力が必要になるので大半の人が挫折します。

実際に僕も2回ブログを挫折した経験があります。

一方、Web制作副業の場合は数ヶ月で数万円単位の副収入を稼ぐことができるので、特にこれから副業を始める人にはおすすめの副業です。

Web制作副業のメリットとデメリットはこちらで詳しく解説しています。

Web制作副業のメリットとデメリット
Web制作副業の意外なメリットとデメリットとは?副業を始めようと思ってるけど、Web制作ってどうなんだろう?Web制作副業のメリットとデメリットを教えて!こんな疑問にお答えします。この記事では僕の経験を踏まえて、Web制作副業の良いところと悪いところを紹介します。...

Web制作副業を始めるための学習ロードマップ

Web制作副業を始めるまでのロードマップ

 

Web制作副業がどういったものなのかイメージをつかんでもらえたと思います。

ここからはWeb制作副業を効率的に始めるまでのロードマップを解説していきます。

Web制作副業開始までのロードマップ
  1. Web制作の基礎を知る
  2. HTML/CSS/JavaScriptを本格的に勉強する
  3. 実在するWebサイトをマネして作ってみる(写経)
  4. ポートフォリオサイトを作る
  5. クラウドソーシングサイトに登録する
  6. 最初の案件をこなす

順番に解説していきます。

Step1:Web制作の基礎を学ぶ

まずはWebサイトが表示される仕組みとHTMLとCSSの基礎について勉強してみて、実際に自分の手でWebサイトを作ってみることが第一歩です。

そのために僕が最適だと思う教材がこちらです。まさにこれからWeb制作を始める人のための本です。

 

こちらの本はWebサイトの仕組みからHTML/CSSの基礎について解説した後に、本の手順に沿ってサンプルのWebサイトを作るといった構成になっています。

Web制作に慣れてきた後も見返すことがあるため、持っておいて損はない一冊といえます。

実際にWebサイトを制作する楽しさを身をもって体験してみて、もっと勉強したいと思えた人は次のステップに進みましょう。

Step2:HTML/CSS/JavaScriptを本格的に学ぶ

Web制作の楽しさを体験したら、Web制作副業を始めるために最低限必要なHTML、CSS、JavaScriptを本格的に学んでいきます。

HTMLとCSSだけなら先ほど紹介した「HTML & CSSとWebデザイン入門講座」でひとまずは十分です。あとはWebサイトを作る中で徐々に使い方などを覚えていくといいです。

JavaScriptを勉強するなら、以下の「jQuery最高の教科書」がとてもわかりやすいです。

 

jQueryとはJavaScriptのライブラリのひとつなのですが、jQueryを使うとJavaScriptで書くよりもコードをシンプルに書くことができます。

この本ではjQueryの基礎知識から実際にWebサイトで使うパーツの作り方を解説してくれています。

Step3:実在するWebサイトをマネして作ってみる(写経)

①と②のステップでHTML、CSS、JavaScriptの使い方を完全にマスターするのは不可能です。

なので、それぞれの言語についてある程度理解ができたら、自分の好きなWebサイトをマネして作ってみて、それぞれの言語の使い方を少しずつ定着させていくのが効率的です。

始めのうちはひとつのWebサイトを写経する中で必ず学ぶことがたくさんあります。

例えば、

  • パーツを中央にレイアウトする方法
  • マウスを乗せたときの少し複雑なアクション
  • サブメニューの作り方

といった感じ。

上記のような普段Webサイトでよく見るパーツも最初はどのように作ったらいいのかわからないはずです。

でも、写経を繰り返していくうちに徐々に難なく作れるようになります。

Webサイトを写経するときに役に立つのが「GoogleChromeのデベロッパーツール」です。

GoogleChromeデベロッパーツール

 

Macの場合だと「Command+Option+I」、Windowsの場合は「F12キー」で使えます。

デベロッパーツールを使うと、Webサイトのパーツがどのようにできているのかなどの情報を見ることができます。

最初は使い方がわからず苦手意識を覚えるかもしれませんが、実際のWeb制作でもめちゃくちゃ役に立つのでぜひ使えるようにしてください。

Step4:ポートフォリオサイトを作る

ポートフォリオサイトとは、自分で制作したWebサイトを掲載して自分のスキルをクライアントにアピールするためのWebサイトです。

Web制作の世界では名刺代わりですね。

ちなみに、僕のポートフォリオサイトはこんな感じです。

Webサイトには以下のような種類があるので、自分が受注したいWebサイトから作ってみるのがいいと思います。

代表的なWebサイトの種類
  • コーポレートサイト
  • プロモーションサイト
  • ポートフォリオサイト
  • ショッピングサイト
  • メディアサイト

クラウドソーシングサイトで仕事を受注するにしてもポートフォリオサイトはよく見られたりするので、しっかり整えておく必要があります。

また、ポートフォリオサイトを実際に公開することで、サーバーへのアップロード方法も学べます。

Step5: クラウドソーシングサイトに登録する

ここまでできれば、いよいよ副業開始です。

仕事を受注するためのクラウドソーシングサイトに登録しましょう。代表的なクラウドソーシングサイトは以下です。

代表的なクラウドソーシングサイト

注意点がひとつ。それはプロフィール項目をしっかり埋めること。

クライアントにアピールするのが一番の目的ですが、実はクラウドソーシングサイトのアルゴリズムの対象にもなっています。

埋まっていない項目があると表示順位が下になってクライアントの目に止まる機会が減ってしまうので、それぞれの項目を詳しく書いて少しでも上位表示を狙いましょう。

ココナラで依頼が増えるプロフィールの書き方をこちらの記事で解説しています。

依頼を増やすココナラの魅力的なプロフィールの書き方 こんな疑問に答えます。 僕はプログラミング完全初心者からWeb制作の勉強を始めて、今では現役でWeb制作副業をバリ...

Step6:最初の案件をこなす

クラウドソーシングサイトに登録すればすぐに仕事がもらえるかというと、残念ながらそんなことはないです。

実績がない始めのうちは、まったく仕事が来ないし提案しても購入してもらえないという場合がほとんどです。

何もしなければ、実績がないから仕事が来ない、仕事が来ないから実績ができないという実績ゼロから抜け出せない状態です。

では、どうすれば実績ゼロから抜け出せるのかというと、一番簡単な方法が、

知り合いにお願いして発注してもらうこと

です。

Webサイトを作りたい人が周りにいれば、無料のような値段でいいので発注してもらいましょう。

こうして、1件でも実績が付けば発注してもらえる可能性は上がるので、

  • 始めのうちは格安の値段設定にする
  • ライバルよりも魅力的な付加価値をつける

などで発注してもらって実績を積み重ねていきましょう。

最初のうちは割に合わない仕事のように感じますが、それでも可能な限り質の高いサービスを提供するように努めます。

そうやって実績を積み重ねていくことで、いずれ値段をある程度上げても継続的に発注してもらえるようになります。

ぜひそこまでがんばりましょう!!!

参考:副業開始後にすること

Web制作副業を開始した後は、さらに以下のスキルを広げておくと色々な仕事に対応できるようになります。

拡充すべきスキル
  1. PHP基礎を学ぶ
  2. WordPressを学ぶ
  3. SEOを学ぶ

順番に解説します。

PHP基礎を学ぶ

これまでに学んだフロントエンドのスキルだけでは、お問い合わせフォームで入力された内容をメールで送信するなどの機能を実装することができません。

そのため、PHPの基礎を学んで、お問い合わせフォームを作れることを目標にしましょう。

Webサイトにはお問い合わせフォームが必ずといっていいほど設置されるので、お問い合わせフォームの実装には需要がたくさんあります。

PHPの基礎を学んでお問い合わせフォームを実装できるようにしておくと案件の受注につながる可能性があります。

また、WordPressはPHPでできているので、次で紹介するWordPressの勉強にも役立ちます。

WordPressを学ぶ

HTML、CSS、JavaScriptで作ったWebサイトをWordPressのテーマにできることを目標にしましょう。

WordPressとはCMS(コンテンツ管理システム)のひとつで、世界のWebサイトの4分の1はWordPressで作られていると言われています。

その大きなメリットはHTML、CSS、JavaScriptといった知識がなくても、ブログなどの記事を投稿できること。

そのため、HTML、CSS、JavaScriptでできたWebサイトをWordPress化して記事投稿をできるようにしてほしいといった要望が多くあります。

WordPressの知識を習得することで新たな案件の受注につながる可能性があります。

SEOを学ぶ

SEOを理解して、SEO対策を意識したWebサイトを作れることを目標にしましょう。

これができると新たな案件を受注できるといったことはないですが、SEOに強いWebサイトを作ってほしいという要望は多くあります。

SEOを理解しておくことで質の高いWebサイトを作れるようになります。

また、SEOに関心があるクライアントからは相談を受けたりするので、相談に乗れると継続的な受注につながる可能性はあります。

独学すべきか?プログラミングスクールに通うべきか?

独学すべきか?プログラミングスクールに通うべきか?

 

Web制作を勉強してみようと思ったときに、出てくる疑問がコチラ。

結論から言うと、

独学でも習得可能だが、プログラミングスクールなら効率的に勉強できる。

です。

僕の場合はTechAcademyのフロントエンドコースを受講しました。

以下でプログラミングスクールのメリットを解説します。

最短で副業開始できる

プログラミングスクールならWeb制作に必要な知識をすべて学べるので、副業開始まで最短で進むことができます。

先ほど説明したステップ①〜④までを一気に終わらせられます。

プログラミングスクールで効率化できるところ
  1. Web制作の基礎を知る
  2. HTML/CSS/JavaScriptを本格的に勉強する
  3. 実在するWebサイトをマネして作ってみる(写経)
  4. ポートフォリオサイトを作る

副業開始後にスキルを広げられる

TechAcademyのフロントエンドコースを修了すれば、

  • PHP/Laravelコース
  • WordPressコース
  • Webデザインコース

などを含む15コースを格安で受講できる「ウケ放題特別プラン」というプランに招待されれることがあります。

こちら僕がWeb制作を勉強するのにTechAcademyをおすすめする理由のひとつなのですが、上記を含むコースを普通に受講するよりも格安で受講することができます。

詳細はこちらの記事で紹介しているので参考にしてください。

TechAcademy
TechAcademyで副業を目指すならフロントエンドコース一択プログラミング未経験の方がTechAcademyで副業を始めるなら「フロントエンドコース」がおすすめです。この記事ではフロントエンドコースがおすすめな理由、効率的に受講する方法などを解説します。...

まとめ:HTML/CSS/JavaScriptを学んでWeb制作副業を始めよう

  • Web制作副業を始めるための学習ロードマップは以下
  1. Web制作の基礎を知る
  2. HTML/CSS/JavaScriptを本格的に勉強する
  3. 実在するWebサイトをマネして作ってみる(写経)
  4. ポートフォリオサイトを作る
  5. クラウドソーシングサイトに登録する
  6. 最初の案件をこなす
  • Web制作副業を始めるためのスキルはTechAcademyのフロントエンドコースで勉強するのが最短

 

以上、僕がWeb制作副業を始めた経験を踏まえて、プログラミング完全初心者から効率的にWeb制作副業を始めるまでのロードマップについて解説しました。

せっかくWeb制作副業について興味を持ったのなら、まずはお試しでもいいので勉強から始めてみましょう。

挑戦なくして、人生は変わりませんよ!

 

では今回はこの辺で〜!

ABOUT ME
トモヤ
副業が趣味になってしまったサラリーマンが趣味を語るブログ。 『Web制作』と『ブログ運営』に取り組んでいます。 【経歴】大阪大学大学院工学研究科卒業→某インフラ会社勤務→会社依存の生活を変えるため副業開始