大学生が全くの初心者からweb制作で月8万稼いだ5つの秘訣【完全ロードマップ】

WEB制作初心者

  • 「Web制作ってなんの勉強をすればいいかわからない」
  • 「 初心者でもできる勉強のロードマップが欲しい」
  • 「案件を取れるレベルがどれくらいか具体的に知りたい」
  • 「スクールではなく独学で勉強したい」

この記事はWEB制作を仕事にしたいけど…と、疑問や悩みを持っている、全くスキルがない初心者のために書きました。

私のことをお伝えすると、20歳ピチピチの世間知らずの学生でした。大学も理系でゴリゴリ数学ができてプログラミング余裕で組めるという状態では全くなく、なんなら人よりも数学が苦手というところからのスタートでした。

そんな初心者である私でも、WEB制作の案件がゼロから取れるようになり、月数万〜10万弱稼げるようになりました!

大学の講義と部活とバイト、多忙を極めていた僕でも隙間時間を使って案件を取れるようになったのです。

この記事では、私が実際に取り組んだ勉強法をまとめました!

私が1ヶ月かけて試行錯誤してやっていたものをお伝えするので、この記事を読めばあなたが無駄に遠回り必要がなくなりますし、スクールや教材などにお金を使わなくて済みます。

「案件を取る」ことだけにフォーカスしているので、無駄な要素を削りまくった最短コースをご紹介します。

独学でフリーランスへの一歩として案件を取れるようになりたい!という方にはぴったりの記事でしょう。

安藤弘人

安藤弘人

僕は全くの初心者から2ヶ月半で8万円の案件を獲得しました!

大野和真

大野和真

WEB制作の案件の中には30万円を超えるコーディング案件も存在します!

この記事を読むとわかること
  • どんな勉強を、どんなサイトで、どれくらいの比重でするべきか
  • 独学だからこそできる勉強法
  • 案件を獲得できる具体的なレベル感
  • 初心者がWeb制作を勉強する上での心構え(挫折防止)
  • 実際にどんな案件があるのか
  • webデザインの勉強方法

執筆者:安藤弘人 ツイッター(@hiroto_prog

0.初心者からWeb制作を勉強する大まかな流れ(案件獲得まで)

STEP.1
まずはお勉強

HTML・CSSを無料サイトで勉強

STEP.2
テンプレで作ってみる

無料のHTMLテンプレートを使って自分だけのサイトを作る

STEP.3
JavaScript(jQuery)を習得

JavaScript(jQuery)を無料サービスで勉強

STEP.4
模写コーディングをする

模写コーディングをしてサイト制作の形式を掴む

STEP.5
ワードプレスを勉強する

WordPressの仕組みを勉強する(基本コピペでOK)

大きく分けると5ステップです。

①〜③までは1日1時間勉強を継続できれば、1ヶ月以内で終わります!

そして⑤「ワードプレスを勉強」まで終わると、WordPressを使った企業サイトやLPの作成案件を受注することができるレベルになっています。

④「模写コーディング」まででも案件を取ることは不可能ではないですが、強力なライバルが多いので間違いなく茨の道です。

案件が取れなくて消耗するくらいなら、その時間でWordPressの勉強をする方が効率的です。

安藤弘人

安藤弘人

クラウドソーシングはWordPressの案件が比較的多いです!2020年1月現在においてワードプレスの勉強はまだコスパ良いです。

1.HTML・CSSを無料サービスで勉強する

HTMLとCSSはWeb制作のコーディングをするうえで避けては通れません。

とても重要な部分ではありますが、マスターしてしまえばWeb制作の勉強の7割は完了です!

では、そんな重要なHTMLとCSSはどうやって学ぶのが効率的か?

 1-1.Progateで勉強する

Progateはプログラミングを「楽しくゲーム感覚で」勉強できるサイト。

一部有料のコンテンツもありますが、無料でも十分に学ぶことができます。

Progateをオススメする5つの理由
  1. HTML・CSSの書き方〜実際にWeb上に公開する所まで一貫して学べる
  2. 他サービスより頻繁にアップデートしてくれるから最新の技術が学べる(Web制作は技術の進化が早い)
  3. とにかく解説が丁寧でわかりやすい
  4. 自分のレベルがあり、ゲーム感覚で進められる(注意あり)
  5. スマホアプリと連動しているから通勤通学で勉強出来る

スマホアプリもあるので、普段忙しい人でも通勤通学、休憩時間、(授業中)、でも勉強できるのもProgateのメリットです!

最速でProgateを終わらせるためには・・・

  1. レベル上げに注力しないこと(もはや忘れてもいい、一心不乱に)
  2. 10分考えてもわからないなら答えを見る
安藤弘人

安藤弘人

あくまでも「イメージを掴むこと」が目的。多くても2周したら次に進みましょう!

完了までの目安:8〜10時間

 1-2.ドットインストールで勉強する

ドットインストールは動画でプログラミングを勉強できるサイトです。

もちろん、Progateと同じく無料で始めることができます。

Pドットインストールをオススメする3つの理由
  1. コードを書く映像と解説が同時進行でわかりやすい
  2. 現役エンジニアからも評価が高い充実したコンテンツ量
  3. テキストエディタの導入から解説してくれる
安藤弘人

安藤弘人

Progateで学んだ基礎を復習し、新しい知識をドットインストールで補完していくイメージです!

ドットインストールで効率的に勉強するためには・・・
  1. Progateと同じく、多くても2周までに留める
  2. 動画をみるだけではなく、必ず自分でコードを書く
  3. 全て覚えようとしない(あとでググればよし)
  4. テキストエディタはVScodeを利用する

特に4の「テキストエディタはVScodeを利用する」が重要です。

Windows Visual Studio Code 導入方法 VSCode ダウンロードから日本語化対応まで~画像付き導入解説

わざわざVScodeを使うことの3つのメリット

 

  1. ドットインストールが推奨するテキストエディタよりも動きが軽い
  2. 多くのエンジニアが使用しており、解説記事が豊富
  3. 機能が充実しており、作業時間が大幅に削減できる
安藤弘人

安藤弘人

他の記事には載っていない裏技的なテクニックです!

完了までの目安:8〜10時間

1-3.ドットインストールで挫折したらUdemyがオススメ(有料)

Udemyはドットインストールと同じく講義型の動画サイトです。

しかしドットインストールと違い、買切り制の有料コンテンツなので多少お金がかかります。

基本的には1万〜2万を超えるコースばかりですが、キャンペーン中は1500円ほどで買うことができます!

安藤弘人

安藤弘人

見るたびにキャンペーンをやっている気がするのは内緒です。笑

Udemyをオススメする5つの理由

  1. 教えることに特化したプロのエンジニアの講義
  2. 目指すゴールがわかりやすく迷いが生まれない
  3. 講義の質と比較すると圧倒的にコスパがいい
  4. 特典がついている時がある
  5. スマホにダウンロードでき、通勤通学で視聴可能

個人的には、「HTML5+CSS3 手を動かしてマスターするWebデザイン/プログラミング動画講義」がオススメです。

案件を取れたら100%講義代は回収できます。

安藤弘人

安藤弘人

僕はドットインストールから途中でUdemyに切り替えました!

完了までの目安:8〜10時間

2.HTMLテンプレートでポートフォリオサイトを作る

ポートフォリオサイトは自分の制作作品や経歴を証明するものです。

安藤弘人

安藤弘人

クラウドソーシングでの提案で必須なので必ず作りましょう!

HTMLテンプレートを使う5つのメリット
  1. 爆速でサイトを作ることができる
  2. カスタマイズ・修正案件の仮練習になる
  3. 今後の制作の参考資料になる(コードが綺麗)
  4. id・クラス名の正しい付け方がわかる
  5. ポートフォリオサイトに特化したデザイン

僕のオススメHTMLテンプレート【SAMPLE COMPANY】

2-1.一からポートフォリオを作る時との比較

1からポートフォリオサイトを作る6つの工程
  1. サイトのデザインを考える
  2. サイト構造を考える
  3. HTMLを書いていく
  4. CSSを書いて装飾
  5. JQuery(後に解説)でアニメーションをつける
  6. 完成
HTMLテンプレートを使った時の3つの工程
  1. HTMLテンプレートの構造を確認する
  2. プロフィールなど必要事項を埋めていく
  3. 完成

どっちが早いかは一目瞭然ですね。

高額スクールや職業訓練校では1から作らされます。

でもこういう無駄を省けるのが独学のメリットだと僕は思っています!

安藤弘人

安藤弘人

ポートフォリオサイトより制作物を作る時間の方が優先です!

2-2.クライアントからしたら1から作ったかどうかは関係ない

いくらポートフォリオサイトを頑張って1から作っても、クライアントが見るのは制作物だけです。

あなたが仮にクライアントだったとして、どっちを採用する?
  • ポートフォリオが凝っていて、制作物(実績)が3個
  • HTMLテンプレを使っているけど、制作物(実績)が5個

僕なら後者を採用しますし、クライアントも実績を何より重視します。

「名前・実績・連絡先」の3つがあれば十分です!

僕のポートフォリオの構成
  1. ヘッダー
  2. メッセージ(画像と言葉)
  3. 自己紹介(名前・経歴)
  4. 実績(過去の制作物)
  5. 連絡先(Googleフォーム)
  6. フッター

見る側からしたら簡潔にまとまっている方が探す手間が省けます。

リッチなデザインやかっこいいアニメーションは必要ありません!

安藤弘人

安藤弘人

今でも僕はHTMLテンプレートで作ったポートフォリオを使っています!

完了までの目安:2時間

3.jQueryを勉強する(覚えなくてOK)

jQueryはJavaScriptというプログラミング言語のフレームワークの1つ。

簡単に動きのあるリッチなサイトを作ることができるのが特徴です。

フレームワークとは・・・
プログラミング言語を簡易的で使いやすい形を変えたもの。

生のJavaScriptで書くと5行かかるコードがjQueryだと1行で済むこともある。

安藤弘人

安藤弘人

生のJavaScriptよりも形が決まっていて覚えやすいです!

jQueryを優先する4つの理由
  1. Web制作はjQueryができれば十分すぎるくらい
  2. 初心者に生のJavaScriptはハードルが高い
  3. 実際の案件もjQueryで書く指示が多い
  4. 両方勉強していたら10倍は時間がかかる
安藤弘人

安藤弘人

最短で案件を取りたいならjQueryだけで十分です!

3-1.jQueryの勉強方法(コピペOK)

基本的にはHTML・CSSと勉強方法は同じです。

ProgateでjQueryのレッスンを受講

普通ならドットインストールやUdemyを次に使いますが、僕はProgateだけです。

jQueryはどんな形で構成されているか大まかに勉強すれば大丈夫です。

最速で案件獲得レベルになるには無駄はどんどん省いていきましょう!

安藤弘人

安藤弘人

今でも僕は1からjQueryは書けないですがググれば余裕です!

完了までの目安:4〜5時間

4.模写コーディングをする

ここからはついに自分で一からWebサイトをコーディングしていきます!

模写コーディングに特化したおすすめの記事を紹介します。

4-1.模写コーディングの流れとツールを把握しよう

Webサイトをコーディング模写するやり方と使用するツール | HPcode

「Webサイトをコーディング模写するやり方と使用するツール」の記事でわかること
  1. 基本的な流れ
  2. デザインカンプから数値を取り出す方法
  3. 初心者が陥りがちな注意点
  4. 模写コーディングに必要なツール
安藤弘人

安藤弘人

僕もこのサイトは何回も参考にしました!

4-2.模写すべきサイトをレベル別で把握しよう

このページが超、参考になります。

【レベル別】模写コーディングにおすすめのサイトまとめ9選

「【レベル別】模写コーディングにおすすめのサイトまとめ9選」記事でわかること3点
  • どんなサイトを模写すればいいか(レベル別)
  • LP・コーポレート・ブログ型のオススメサイト
  • サイトごとで注意するべきポイント

初級者〜上級者までの段階ごとで、参考にするべきサイトを紹介してくれています。

だんだん自分のレベルUPを感じられるので、HTMLとCSSの練習には最適です!

安藤弘人

安藤弘人

僕は中級編までの6つのサイトだけを模写しました!

4-3.模写コーディングはわからなかったら答えを見てもいい

はっきり言って、模写コーディングは難易度は高めです!

今まではスラスラ進んできたとしても、実装できない部分は必ず出てきます。

でも何十分、何時間も考えているのは時間に無駄です。

模写コーディングでわからない箇所が出てきたときは・・・
  1. 誤字がないか確認してみる
  2. 10分調べてみる(ググる)
  3. 元サイトのソースコードをみる(検証ツール)
  4. 誰かに質問する(知り合い or teratail
  5. 諦める

まず自分で考えることは必須事項です!

安藤弘人

安藤弘人

なるべく調べる時間を削減して手を動かし続けましょう!

安藤弘人

安藤弘人

今でも僕はHTMLテンプレートで作ったポートフォリオを使っています!

4-3.クライアントからの評価を高める模写の仕方(経験談)

ただ模写をしているだけでは技術しか身につきません。

せっかくなら案件獲得を意識した模写コーディングを心がけましょう!

実際にクライアントから特に評価された点2つ
  1. 「苦労した実装箇所」「そのサイトを模写して成長した所」「そのサイトの改善すべき箇所」をポートフォリオに記載する
  2. 元サイトのURLも記載していて、著作権を考慮できている

特に1つ目は色んな方から評価を受けるし、他のライバルでやっている人はほとんどいません。

安藤弘人

安藤弘人

ただ作れるだけ」ではなく「価値のあるサイトを作れる」ことをアピールしましょう!

完了までの目安:2週間

5.WordPressの勉強(ほぼコピペでOK)

安藤弘人

安藤弘人

ここまでよく頑張りましたね!あと少しです!

最後にWordPressの勉強をします!

WordPressとは・・・
コードをかけない人でも、サイトのコンテンツ(記事等)を管理できる仕組み。

管理画面からサイトの表示を簡易的に変更できたり、豊富なプラグインが存在し拡張性が高いことがメリット。

5-1.WordPressの勉強の流れ

WordPress勉強方法
  1. ドットインストールで勉強
  2. (難しかったらUdemyを利用する)
  3. 模写したサイトをWordPress化する

ProgateにはWordPressの講義はありません。

ドットインストールかUdemyで勉強することをオススメします。

注意
ドットインストールのWordPress講座は情報が少し古いです。お金に余裕がある方はUdemyでの受講をオススメします。

5-2.模写したサイトをWordPress化する

5で模写コーディングしたサイトをWordPress化しながら実践的に勉強していきます。

WordPress化とは・・・
HTMLとCSSだけで作成したサイトをWordPress内で管理できるようにカスタマイズすること

以下のサイト通り、静的なHTMLサイトをWordPress化しましょう!

静的HTMLサイトをWordPress化するときの具体的な移行手順

安藤弘人

安藤弘人

ほぼコピペで何とかなるのでご安心を!

完了までの目安:1週間

6.webデザインも勉強して案件の単価を上げたい方へ

先ほどのWordPressの勉強が終われば、確実に案件が取れるレベルになっています。

しかし、webデザインもできれば単価は1.5倍〜2倍に上げることができます!

今回おまけに初心者が最速でwebデザインの勉強をする方法を簡単に紹介します。

安藤弘人

安藤弘人

もちろん独学での勉強法です!

6-1.Udemyでデザインツールの使い方を勉強する

残念ながら、webデザインにはProgateなどの無料で学べるサービスはありません。

多少お金はかかってしまいますが、Udemyで1500円のコースを購入することをオススメします。

個人的にオススメのコース

WEBデザイナーになりたい人のためのオンライン講座【最新版】どの様な仕事?必要なスキルとは?等、知りたいことがわかる!

  • adobeXD、Photoshopといった主流のデザインツールの使い方がわかる
  • ドメイン取得・レンタルサーバー・FTPソフトなどの他にはない講義がある
  • 特典が豪華

6-2.webデザインの基礎知識を本で勉強する

動画だと見返すのに不便なので、知識は本での勉強をオススメします。

今までとは違い手を動かす必要はないですが、しっかり読み込むことが大切です!

安藤弘人

安藤弘人

僕もいまだにこれらの本は辞書代わりにして何度も使っています!

6-3.模写コーディングしたサイトをデザイン模写

先ほど5で勉強した模写コーディングを今度はデザインを1から模写してみましょう。

案件を獲得しやすいデザイン模写の勉強法
  1. ユーザーのためにどんな導線が張られているか推測して書き出す
  2. 本で勉強した内容の範囲でいいから改善点を自分なりにまとめる
  3. 余裕があれば改善したデザインを作ってみる
  4. ポートフォリオにアウトプットしていることをアピール

だらだらとサイトの真似をしているだけでは時間の無駄です。

安藤弘人

安藤弘人

模写コーディングの時と同じでとにかくアウトプットしましょう!

7.本記事のまとめ

おさらい
  • HTML・CSSは各種学習サービスで2周以内で終わらせる(8〜10時間)
  • HTMLテンプレートを使って最低限の実装をする(2時間)
  • jQueryは1周だけする!概要を掴めればOK(4〜5時間)
  • アウトプットを意識して6つの模写コーディングをする(2週間)
  • 模写サイトをWordPress化する。コピペでいけます(1週間)
  • 単価を上げたいならwebデザインも勉強しよう

今回の記事はあくまで「最短で案件を獲得すること」にフォーカスしています。

しかし就職・転職希望者でも役に立つ情報は多いはずです。

採用担当もクライアントと同じで実績を評価します。

何時間勉強したかよりもいかに「思考しながらアウトプット」したかを見ています。

安藤弘人

安藤弘人

あなたが採用側ならProgateレベルMAXの人よりも制作物が1つある方を選びますよね!

情報を取捨選択して無駄を省くことも立派な能力なので、自信を持って案件獲得まで突っ走ってください。

一緒に頑張りましょう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です