【初心者必見】Web制作おすすめの独学法【僕はこれで100万円稼いだ】
Web制作の学習に悩んでいる人「Web制作学習の方法がわかない。独学を考えているんだけど、稼げた人の勉強法を真似したい。」
こういった疑問に答えます。今回僕が紹介するこの記事では、効率よくWeb制作で稼ぐ方法について書いています。つまり、
・一流企業のWebサイトのようなかっこいいものを作れるようになりたい
・Web制作で稼ぐつもりはない
とお考えの人は読む必要はありません。
本記事でわかること
- Web制作で稼ぐコツ【超重要】
- 狙う案件の種類を決める
- Web制作独学の具体的なステップ
本記事の信憑性
先日Twitterで以下のツイートをしました。
【総受注額が4ヶ月で７桁を超えました】
昨日、ランサーズでペライチ案件を受注しました！
そして！ついに『受注額７桁』を達成しました😭✨
Progateを始めて4ヶ月も経っていません。
努力で変われました🔥お祝いの、いいね&リプお待ちしております🙌#Web制作#駆け出しエンジニアと繋がりたい
— めてお@Web制作4ヶ月で7桁 (@meteo_web) June 17, 2021
とその後すぐに80万の案件を受注しました！
【ひっさびさの案件獲得報告】
えぐいです。80万円弱の案件受注。
最近は案件獲得報告やめてたのですが、やばすぎたのでご報告🙇♂️✨
やっぱり #codolife 神ですね😎
引き続き結果出していきます！
はらさん（@haraponta1496 ）サポートお願いします🙇♂️#Web制作#駆け出しエンジニアと繋がりたい
— めてお｜Web制作チーム化の人 (@meteo_webteam) August 13, 2021
こんな感じで順調に案件を受注している僕ですが、web制作の学習を始めたのは2021年2月。こんな僕がしっかりと稼げる人からのアドバイスがほしいということでこの記事を書いています。
ちなみに僕の現在のITスキルは以下の通りです。
・道場編は途中で挫折
・JavaScriptは文法が分かる程度
・サーバー、ドメインの契約はちょくちょく調べながら
・SEO対策はそこそこできる
ちなみに僕が実際に作ったデモサイトは以下になります。
上記のとおりです。つまりこのくらいのスキルを身につけることで稼げるようになります。
本記事ではその具体的な方法を解説していきます。
Web制作で稼ぐコツ【超重要】
僕はクラウドソーシングで30万円を受注しました。このとき感じたのは月30万円が稼ぎの限界だということです。理由が以下になります。
・Webサイトの制作は、コーディング＋クライアントとのやり取りで時間がかかる
・たくさん提案しないと受注につながらない
そして上記の解決策を考えてみると以下のとおりです。
・Webサイトの制作は、コーディング＋クライアントとのやり取りで時間がかかる→コーディングは外注し営業のみやる
・たくさん提案しないと受注につながらない→実績を積み、受注しやすいアカウントに育てる
これらに共通するのは、営業（提案）に比重を置く必要があるということです。Web制作のコーディングを極めていては稼ぎの天井が来ることを悟りました。なので、結果論なのですが、基礎学習はこれから紹介する独学くらいで十分です。
なのでここまでの内容から、自然と基礎学習中のマインドはこんな感じが適切だということになります。
Web制作の基礎学習に必要なマインド
- 暗記しない
- 同じ教材を何周もしない
- 7割くらいの理解ですすめる
上記を意識しながら基礎学習を進めてください。ちなみに僕の場合はこんな感じです。
・その後は営業と同時並行で基礎学習
とにかく基礎学習はスピードを意識していきましょう。
狙う案件の種類を決める
基礎学習を行う際には、どんな案件の種類があり何を学ぶ必要があるのかを把握しましょう。そうすることで効率的に学習をすすめることが出来ます。
Web制作には以下の過程があります。
- 戦略立案
- 設計
- 製作
- 保守・運用
この中でどのフェーズの強みを身に着けたいかによって、当然学習法なども変わってきます。結論、完全初心者から始めるのであれば以下の通り。
理由は学習の容易さと案件の取りやすさです。
ちなみにWeb制作の各過程についてより詳しく知りたい方は以下の記事を参考にしてください。
Web制作案件に多いのはどのフェーズ？【結論：設計と制作】
上記で説明したWeb制作の過程のうち、クラウドソーシング案件で多いのが設計＋制作のパターンです。
また他のフェーズについても案件はありますので、それぞれの特徴をまとめると以下のとおりです（あくまで個人的な見解です）。
設計と制作
・最も多い
・単価は発注者が企業か個人でかなり異なる（50,000円〜400,000円）
・競争率が高いが、競合はそこまで強くないことも多い
戦略立案〜保守・運用や、設計〜保守・運用
・単価がかなり高い（300,000円〜）
・企業が発注している場合が多い
・実績がないと提案しても受注できない
設計のみ
・デザイン性を求められる
・Webデザイナーの仕事
制作のみ
・安価な案件が多い（20,000円〜100,000円）
・納期が短い
・競争率が高い
制作のみ
・安価な案件が多い（20,000円〜100,000円）
・納期が短い
・競争率が高い
保守・運用のみ
・Webマーケティングが多い
・時々バグの修正案件もある（※個人的にはおすすめできない案件）
・単価はWebマーケティングの割高（100,000円〜）
・競合が少ない
上記のとおりです。Web制作初心者の方は設計＋制作(または制作のみ）の領域を狙うのが吉かと思います。
Web制作に必要なスキルを身につける具体的な方法
ここまでの説明を踏まえて、狙うべき案件ははじめの頃は以下だと思います。
- 設計＋制作の案件
- 制作のみの案件
ちなみにはじめのうちは低い単価でも受けるべきです。
こんなイメージですので、最初は安くても実績を積むことを意識しましょう。
上記の案件をこなすためには以下のスキルが必要になります。
・CSS
・(JavaScript)
・(Webデザイン)
カッコ内のスキルはあれば望ましい程度なので、できなくても全く問題なしです。
ですのでここからはHTML＆CSSを実際のWeb制作で使えるレベルにする具体的な方法を解説します。
環境を整える
Progateからではなく、学習方法のサイト模写から使うことなるものもありますが、以下の3つを早めに揃えておきましょう。
・Google chrome
・Twitterアカウントの開設
それぞれ、以下にて簡単に解説します。。
VScode
こちらはコードエディタです。つまり、このソフトウェアを使ってコーディングを行うことになります。
Google Chrome
自分の作ったWebサイトがブラウザ上でどう見えるかを把握するために必要です。以下よりどうぞ。
Twitterアカウントの開設
Twitterアカウントの開設はかなり重要です。以下の目的があります。
- 学習状況をツイートすることで学習モチベの継続
- Web制作者と繋がることができる
- Web制作の有益な情報が流れてくる
SNS媒体としてツイッターを選択する理由は、同じWeb制作をしている人のアカウントが多いことと、投稿の手軽さですね。
あくまでも最初はWeb制作がメインなので、投稿に時間を取られすぎるのは良くないです（Instagramの投稿などは時間がかかります）。
Twitterアカウント開設の際は以下を意識して運用してください。
- プロフィール、アイコン、ヘッダーはしっかり作り込む【せっかくならフォロワーを伸ばしたい方向け】
- Web制作の学習で忙しいうちは1日1~2投稿
- 投稿内容は、Web制作を通して学んだ内容
- 有益情報を流す人をフォローしておく
ちなみに僕のTwitterアカウントのプロフィール、アイコン、ヘッダーは以下のとおりです。
また以下の人をフォローしておくといいです。Web制作に関する有益なツイートをしてくれています。
基礎学習過程
クラウドソーシング提案過程
これでSNSの準備は完了です。
HTML＆CSSの学習方法
以下の手順で学習を行うと良いです。
最初のHTML&CSSを学ぶのはここではProgateを紹介していますが、本も結構お勧めです。
- ProgateでHTML＆CSSを学習
- サイト模写を行う
- デモサイトを3つ作る
上記のとおりです。1つずつ解説していきます。
ProgateでHTML＆CSSを学習【目安：1週間】
HTML＆CSSを学習する際には、Progateを使うのがおすすめです。
- 月額980円（無料でも利用できますが、有料版での学習を強くおすすめします）
- 手を動かしながら学ぶことができる
- レベルアップ機能で努力を可視化できる
上記のとおりなので、Progateを使ってHTML＆CSSの学習を行うことをおすすめします。次のリンクより登録が可能です。
また学習をすすめる際には以下の点を意識すると効率よく学習できます。
・暗記はする必要なし
・できなくても落ち込まない
・分からないときは答えをカンニング
具体的に以下のコースをやればいいと思います。
僕は他にもJavaScriptやReact、PHPなどの学習コースも行いましたが、現在の案件対応ではほぼ使っていません（JavaScript、PHPはたまに使いますので余裕があれば学習をおすすめします）。
・HTML＆CSS中級編
・道場コース HTML＆CSS初級編
・HTML＆CSS上級編
・道場コース HTML＆CSS上級編（余裕があれば）
・HTML＆CSS Flexbox編
繰り返しますが重要なのはスピードです。サクッと終わらせて次のサイト模写に移りましょう、サイト模写はかなりのスピードで成長することができます。
Progateは効率的に学習を進めて、その後不要であればサクッと解約してしまいましょう。解約方法は以下のリンクからどうぞ。
>>Progate有料会員プランの解約方法とタイミング｜保持データの注意点あり
これで、HTML＆CSSの基礎は概ね大丈夫です。
サイト模写を行う【目安：1〜2週間】
サイト模写ではデザインカンプからコーディングを行う方法がおすすめです、鬼スピードで成長できます。
※Webサイトを直接真似する方法もありますが、実務に近いのはデザインカンプからコーディングなのでできる限りデザインカンプを使うといいです。
デザインカンプからコーディングするというのは、デザインを見て、コーディングで忠実に再現しながらWebサイトを作成していくことです。デザインは以下のサイトより配布されています。この２つをひとまずやっておきましょう。
上記のデザインカンプを用いて、Webサイトをきれいに作成してみましょう。意識すべき点は以下です。
・特にCSSは自力でやるべき
サイト模写はほぼ100％挫折します。
そのときは以下のように解決するといいです。
- Progateに立ち返る
- 休憩する
- 答えをチラ見する
一番もったいないのはWeb制作学習から完全撤退してしまうことなので、上記の解決策で乗り切りましょう。
またもう少しサイト模写を練習をしたい方は、以下の方法でデザインカンプからコーディングを色々なサイトで行いましょう。
具体的にはFigmaというツールを使います。以下のnoteに綺麗にまとめられていますので参考にしてください。
こちらで好きなWebサイトのデザインカンプを取得し、コーディングを行ってみてください。ちなみに以下のWebサイトとかは難しいですが、かなり成長できます。
ちなみに上記のWebサイトの模写コーディングは以下の動画で解説されています。もしコーディングに詰まったら以下を参考に進めていきましょう。
>>【超入門】実践！「iSara」模写コーディングをやってみた① ソースコード配布【HTML・CSS コーディング】
是非挑戦してみてください。
デモサイトを3つ作る【目安：2〜4週間】
ここまできたら後はクラウドソーシング用にデモサイトを作成していきましょう。以下を実装したデモサイトを作成しておきましょう。ちなみに模写コーディングをデモサイトに使うことも可能で、デモサイトはそちらを含めて3つで大丈夫です。
その３つで以下を実装できるといいです。
- レスポンシブ対応
- お問合せフォーム
オリジナルデザインのデモサイト作成方法は以下の手順で可能です。
- 好きなWebサイトを集める
- 各サイトのパーツごとを組み合わせる＆アレンジする
- コーディングを行いデモサイトを作成する
少し詳しく解説します。
好きなWebサイトを複数選ぶ（見た目がかっこいいとか、綺麗とかでオッケイ）
ちなみにWebサイト選びに困ったら以下のサイトより質の高いWebサイト一覧を見ることができます。
それらWebサイトの各ブロックを組み合わせて、デモサイトのデザインを作成する
簡単か難しいかでブロックを選ぶのではなく、自分が好きなデザインとなるように選びましょう。
コーディングする
後はデザインカンプからのコーディングと同じ流れですね。コーディングしてデモサイトを作成しましょう。
最後に作ったデモサイトをサーバーにアップロード（みんなが見れる状態にする）必要があります。こちらについては以下の記事を参考にしながら、進めてください。
ちなみに僕が作成したデモサイト（一部）を以下に再度載せておきます。
上記のレベルを参考に作成してみてください。
最後に最強のサイトをお教えします
ここまでできれば、案件をこなすスキルは身についています。
※案件の内容をスラスラできるという意味ではありません、「調べながら、なんとかこなす」くらいの実力がついています。
後はWeb制作をするに当たり便利な情報を提供してくれているWebサイトを紹介します。
実践でかなり使えるサイト一覧
- 動くWebデザインアイディア帳【CSSだけでアニメーション実現も可能】
- 【JavaScript,jQuery特訓編】web制作でよくあるパーツを実装しよう【解答付き】
- Webカラー配色パターン
- Unsplash Source
簡単に解説します。
動くWebデザインアイディア帳
特徴は以下があります。
- CSSやJavaScriptのアニメーションが実装可能
- CSSやJavaScriptのアニメーションが実装可能
- 豊富すぎる動きパターン
- コードの簡単な解説がついている
上記の特徴があります。CSSのみで実装可能なアニメーションもあるので、JavaScriptを学習していなくても利用できます。
こちらのWebサイトはブックマーク必須です。
JavaScriptでアニメーションを付ける【解答コード付き】
またJavascriptまで学んだ方は以下がおすすめです【※有料です】
>>【JavaScript,jQuery特訓編】web制作でよくあるパーツを実装しよう【解答付き】
Webカラー配色パターン
こちらのサイトは組み合わせの良い色を教えてくれます。
このサイトが有れば、Webデザイン未経験でもある程度綺麗なデザインでWebサイトを作ることができます。
Webカラー配色パターン
Unsplash Source
こちらのサイトは、ランダムで画像を出力してくれます。
デモサイトの制作過程で、ダミー画像（仮の画像）を入れる際に役立てることができます。画像は一定時間ごとに自動更新されるので、サイトに合った画像の雰囲気を掴むことにも役立ちます。
上記のサイトを活用して、Web制作案件をこなしていきましょう。
そしてこの不完全な状態で、早めにクラウドソーシング提案を始めたほうが良いです。理由は以下の通りです。
- 完璧にできる日は来ない
- 案件をこなしたほうが成長できる
- 不完全でもやってみるというマインドがこの後も重要
ですのでここからはクラウドソーシング提案の具体的なやりかたを解説していきます。こちらに関しては別記事になりますので、以下よりどうぞ。
まとめ
本記事ではWeb制作学習を始めた初学者に向けて解説を行いました。本記事での重要な点を以下に挙げておきます。
Web制作の基礎学習に必要なマインド
- 暗記しない
- 同じ教材を何周もしない
- 7割くらいの理解ですすめる
Web制作の流れ
- 戦略立案
- 設計
- 製作
- 保守・運用
Web制作で事前に準備しておくこと
・Google chrome
・Twitterアカウントの開設
Web制作の学習方法
- ProgateでHTML＆CSSを学習
- サイト模写を行う
- デモサイトを3つ作る
本記事は以上になります。なお、TwitterもやっていましてWeb制作案件を受注するためのノウハウを発信していますので、以下よりフォローお願い致します。
また本記事の画像は以下のサイトより使用しています。
Illustration by Freepik Storyset
最後になりますが、以下のLstepでは営業術・チーム化・自動化を発信しております。フォローすると時給が大幅に上がります！