- 「Web制作ってなんの勉強をすればいいかわからない」
- 「 初心者でもできる勉強のロードマップが欲しい」
- 「案件を取れるレベルがどれくらいか具体的に知りたい」
- 「スクールではなく独学で勉強したい」
この記事はWEB制作を仕事にしたいけど…と、疑問や悩みを持っている、全くスキルがない初心者のために書きました。
私のことをお伝えすると、20歳ピチピチの世間知らずの学生でした。大学も理系でゴリゴリ数学ができてプログラミング余裕で組めるという状態では全くなく、なんなら人よりも数学が苦手というところからのスタートでした。
そんな初心者である私でも、WEB制作の案件がゼロから取れるようになり、月数万〜10万弱稼げるようになりました！
大学の講義と部活とバイト、多忙を極めていた僕でも隙間時間を使って案件を取れるようになったのです。
この記事では、私が実際に取り組んだ勉強法をまとめました！
私が1ヶ月かけて試行錯誤してやっていたものをお伝えするので、この記事を読めばあなたが無駄に遠回り必要がなくなりますし、スクールや教材などにお金を使わなくて済みます。
「案件を取る」ことだけにフォーカスしているので、無駄な要素を削りまくった最短コースをご紹介します。
独学でフリーランスへの一歩として案件を取れるようになりたい！という方にはぴったりの記事でしょう。
僕は全くの初心者から２ヶ月半で8万円の案件を獲得しました！
大野和真
WEB制作の案件の中には30万円を超えるコーディング案件も存在します！
- どんな勉強を、どんなサイトで、どれくらいの比重でするべきか
- 独学だからこそできる勉強法
- 案件を獲得できる具体的なレベル感
- 初心者がWeb制作を勉強する上での心構え（挫折防止）
- 実際にどんな案件があるのか
- webデザインの勉強方法
もくじ
0.初心者からWeb制作を勉強する大まかな流れ（案件獲得まで）
HTML・CSSを無料サイトで勉強
無料のHTMLテンプレートを使って自分だけのサイトを作る
JavaScript（jQuery）を無料サービスで勉強
模写コーディングをしてサイト制作の形式を掴む
WordPressの仕組みを勉強する（基本コピペでOK）
大きく分けると５ステップです。
①〜③までは1日1時間勉強を継続できれば、1ヶ月以内で終わります！
そして⑤「ワードプレスを勉強」まで終わると、WordPressを使った企業サイトやLPの作成案件を受注することができるレベルになっています。
④「模写コーディング」まででも案件を取ることは不可能ではないですが、強力なライバルが多いので間違いなく茨の道です。
案件が取れなくて消耗するくらいなら、その時間でWordPressの勉強をする方が効率的です。
クラウドソーシングはWordPressの案件が比較的多いです！2020年1月現在においてワードプレスの勉強はまだコスパ良いです。
1.HTML・CSSを無料サービスで勉強する
HTMLとCSSはWeb制作のコーディングをするうえで避けては通れません。
とても重要な部分ではありますが、マスターしてしまえばWeb制作の勉強の7割は完了です！
では、そんな重要なHTMLとCSSはどうやって学ぶのが効率的か？
1-1.Progateで勉強する
Progateはプログラミングを「楽しくゲーム感覚で」勉強できるサイト。
一部有料のコンテンツもありますが、無料でも十分に学ぶことができます。
- HTML・CSSの書き方〜実際にWeb上に公開する所まで一貫して学べる
- 他サービスより頻繁にアップデートしてくれるから最新の技術が学べる（Web制作は技術の進化が早い）
- とにかく解説が丁寧でわかりやすい
- 自分のレベルがあり、ゲーム感覚で進められる（注意あり）
- スマホアプリと連動しているから通勤通学で勉強出来る
スマホアプリもあるので、普段忙しい人でも通勤通学、休憩時間、（授業中）、でも勉強できるのもProgateのメリットです！
最速でProgateを終わらせるためには・・・
- レベル上げに注力しないこと（もはや忘れてもいい、一心不乱に）
- 10分考えてもわからないなら答えを見る
あくまでも「イメージを掴むこと」が目的。多くても2周したら次に進みましょう！
完了までの目安：8〜10時間
1-2.ドットインストールで勉強する
ドットインストールは動画でプログラミングを勉強できるサイトです。
もちろん、Progateと同じく無料で始めることができます。
- コードを書く映像と解説が同時進行でわかりやすい
- 現役エンジニアからも評価が高い充実したコンテンツ量
- テキストエディタの導入から解説してくれる
Progateで学んだ基礎を復習し、新しい知識をドットインストールで補完していくイメージです！
- Progateと同じく、多くても2周までに留める
- 動画をみるだけではなく、必ず自分でコードを書く
- 全て覚えようとしない（あとでググればよし）
- テキストエディタはVScodeを利用する
特に4の「テキストエディタはVScodeを利用する」が重要です。
Windows Visual Studio Code 導入方法 VSCode ダウンロードから日本語化対応まで～画像付き導入解説
- ドットインストールが推奨するテキストエディタよりも動きが軽い
- 多くのエンジニアが使用しており、解説記事が豊富
- 機能が充実しており、作業時間が大幅に削減できる
他の記事には載っていない裏技的なテクニックです！
完了までの目安：8〜10時間
1-3.ドットインストールで挫折したらUdemyがオススメ（有料）
Udemyはドットインストールと同じく講義型の動画サイトです。
しかしドットインストールと違い、買切り制の有料コンテンツなので多少お金がかかります。
基本的には1万〜2万を超えるコースばかりですが、キャンペーン中は1500円ほどで買うことができます！
見るたびにキャンペーンをやっている気がするのは内緒です。笑
- 教えることに特化したプロのエンジニアの講義
- 目指すゴールがわかりやすく迷いが生まれない
- 講義の質と比較すると圧倒的にコスパがいい
- 特典がついている時がある
- スマホにダウンロードでき、通勤通学で視聴可能
個人的には、「HTML5+CSS3 手を動かしてマスターするWebデザイン/プログラミング動画講義」がオススメです。
案件を取れたら100%講義代は回収できます。
僕はドットインストールから途中でUdemyに切り替えました！
完了までの目安：8〜10時間
2.HTMLテンプレートでポートフォリオサイトを作る
ポートフォリオサイトは自分の制作作品や経歴を証明するものです。
クラウドソーシングでの提案で必須なので必ず作りましょう！
- 爆速でサイトを作ることができる
- カスタマイズ・修正案件の仮練習になる
- 今後の制作の参考資料になる（コードが綺麗）
- id・クラス名の正しい付け方がわかる
- ポートフォリオサイトに特化したデザイン
僕のオススメHTMLテンプレート【SAMPLE COMPANY】
2-1.一からポートフォリオを作る時との比較
- サイトのデザインを考える
- サイト構造を考える
- HTMLを書いていく
- CSSを書いて装飾
- JQuery（後に解説）でアニメーションをつける
- 完成
- HTMLテンプレートの構造を確認する
- プロフィールなど必要事項を埋めていく
- 完成
どっちが早いかは一目瞭然ですね。
高額スクールや職業訓練校では1から作らされます。
でもこういう無駄を省けるのが独学のメリットだと僕は思っています！
ポートフォリオサイトより制作物を作る時間の方が優先です！
2-2.クライアントからしたら1から作ったかどうかは関係ない
いくらポートフォリオサイトを頑張って1から作っても、クライアントが見るのは制作物だけです。
- ポートフォリオが凝っていて、制作物（実績）が３個
- HTMLテンプレを使っているけど、制作物（実績）が５個
僕なら後者を採用しますし、クライアントも実績を何より重視します。
「名前・実績・連絡先」の３つがあれば十分です！
- ヘッダー
- メッセージ（画像と言葉）
- 自己紹介（名前・経歴）
- 実績（過去の制作物）
- 連絡先（Googleフォーム）
- フッター
見る側からしたら簡潔にまとまっている方が探す手間が省けます。
リッチなデザインやかっこいいアニメーションは必要ありません！
今でも僕はHTMLテンプレートで作ったポートフォリオを使っています！
完了までの目安：２時間
3.jQueryを勉強する（覚えなくてOK）
jQueryはJavaScriptというプログラミング言語のフレームワークの1つ。
簡単に動きのあるリッチなサイトを作ることができるのが特徴です。
生のJavaScriptで書くと５行かかるコードがjQueryだと１行で済むこともある。
JavaScriptよりも形が決まっていて覚えやすいです！
- Web制作はjQueryができれば十分すぎるくらい
- 初心者に生のJavaScriptはハードルが高い
- 実際の案件もjQueryで書く指示が多い
- 両方勉強していたら10倍は時間がかかる
最短で案件を取りたいならjQueryだけで十分です！
3-1.jQueryの勉強方法（コピペOK）
基本的にはHTML・CSSと勉強方法は同じです。
普通ならドットインストールやUdemyを次に使いますが、僕はProgateだけです。
jQueryはどんな形で構成されているか大まかに勉強すれば大丈夫です。
最速で案件獲得レベルになるには無駄はどんどん省いていきましょう！
今でも僕は1からjQueryは書けないですがググれば余裕です！
完了までの目安：４〜５時間
4.模写コーディングをする
ここからはついに自分で一からWebサイトをコーディングしていきます！
模写コーディングに特化したおすすめの記事を紹介します。
4-1.模写コーディングの流れとツールを把握しよう
Webサイトをコーディング模写するやり方と使用するツール | HPcode
- 基本的な流れ
- デザインカンプから数値を取り出す方法
- 初心者が陥りがちな注意点
- 模写コーディングに必要なツール
僕もこのサイトは何回も参考にしました！
4-2.模写すべきサイトをレベル別で把握しよう
このページが超、参考になります。
- どんなサイトを模写すればいいか（レベル別）
- LP・コーポレート・ブログ型のオススメサイト
- サイトごとで注意するべきポイント
初級者〜上級者までの段階ごとで、参考にするべきサイトを紹介してくれています。
だんだん自分のレベルUPを感じられるので、HTMLとCSSの練習には最適です！
僕は中級編までの６つのサイトだけを模写しました！
4-3.模写コーディングはわからなかったら答えを見てもいい
はっきり言って、模写コーディングは難易度は高めです！
今まではスラスラ進んできたとしても、実装できない部分は必ず出てきます。
でも何十分、何時間も考えているのは時間に無駄です。
- 誤字がないか確認してみる
- 10分調べてみる（ググる）
- 元サイトのソースコードをみる（検証ツール）
- 誰かに質問する（知り合い or teratail）
- 諦める
まず自分で考えることは必須事項です！
なるべく調べる時間を削減して手を動かし続けましょう！
今でも僕はHTMLテンプレートで作ったポートフォリオを使っています！4-3.クライアントからの評価を高める模写の仕方（経験談）
ただ模写をしているだけでは技術しか身につきません。
せっかくなら案件獲得を意識した模写コーディングを心がけましょう！
- 「苦労した実装箇所」「そのサイトを模写して成長した所」「そのサイトの改善すべき箇所」をポートフォリオに記載する
- 元サイトのURLも記載していて、著作権を考慮できている
特に１つ目は色んな方から評価を受けるし、他のライバルでやっている人はほとんどいません。
ただ作れるだけ」ではなく「価値のあるサイトを作れる」ことをアピールしましょう！
完了までの目安：２週間
5.WordPressの勉強（ほぼコピペでOK）
ここまでよく頑張りましたね！あと少しです！
最後にWordPressの勉強をします！
管理画面からサイトの表示を簡易的に変更できたり、豊富なプラグインが存在し拡張性が高いことがメリット。
5-1.WordPressの勉強の流れ
- ドットインストールで勉強
- （難しかったらUdemyを利用する）
- 模写したサイトをWordPress化する
ProgateにはWordPressの講義はありません。
ドットインストールかUdemyで勉強することをオススメします。
5-2.模写したサイトをWordPress化する
５で模写コーディングしたサイトをWordPress化しながら実践的に勉強していきます。
以下のサイト通り、静的なHTMLサイトをWordPress化しましょう！
静的HTMLサイトをWordPress化するときの具体的な移行手順
ほぼコピペで何とかなるのでご安心を！
完了までの目安：１週間
6.webデザインも勉強して案件の単価を上げたい方へ
先ほどのWordPressの勉強が終われば、確実に案件が取れるレベルになっています。
しかし、webデザインもできれば単価は1.5倍〜2倍に上げることができます！
今回おまけに初心者が最速でwebデザインの勉強をする方法を簡単に紹介します。
もちろん独学での勉強法です！
6-1.Udemyでデザインツールの使い方を勉強する
残念ながら、webデザインにはProgateなどの無料で学べるサービスはありません。
多少お金はかかってしまいますが、Udemyで1500円のコースを購入することをオススメします。
個人的にオススメのコース
WEBデザイナーになりたい人のためのオンライン講座【最新版】どの様な仕事？必要なスキルとは？等、知りたいことがわかる！
- adobeXD、Photoshopといった主流のデザインツールの使い方がわかる
- ドメイン取得・レンタルサーバー・FTPソフトなどの他にはない講義がある
- 特典が豪華
6-2.webデザインの基礎知識を本で勉強する
動画だと見返すのに不便なので、知識は本での勉強をオススメします。
今までとは違い手を動かす必要はないですが、しっかり読み込むことが大切です！
僕もいまだにこれらの本は辞書代わりにして何度も使っています！
6-3.模写コーディングしたサイトをデザイン模写
先ほど５で勉強した模写コーディングを今度はデザインを1から模写してみましょう。
- ユーザーのためにどんな導線が張られているか推測して書き出す
- 本で勉強した内容の範囲でいいから改善点を自分なりにまとめる
- 余裕があれば改善したデザインを作ってみる
- ポートフォリオにアウトプットしていることをアピール
だらだらとサイトの真似をしているだけでは時間の無駄です。
模写コーディングの時と同じでとにかくアウトプットしましょう！
7.本記事のまとめ
- HTML・CSSは各種学習サービスで２周以内で終わらせる（8〜10時間）
- HTMLテンプレートを使って最低限の実装をする（2時間）
- jQueryは1周だけする！概要を掴めればOK（4〜5時間）
- アウトプットを意識して６つの模写コーディングをする（2週間）
- 模写サイトをWordPress化する。コピペでいけます（1週間）
- 単価を上げたいならwebデザインも勉強しよう
今回の記事はあくまで「最短で案件を獲得すること」にフォーカスしています。
しかし就職・転職希望者でも役に立つ情報は多いはずです。
採用担当もクライアントと同じで実績を評価します。
何時間勉強したかよりもいかに「思考しながらアウトプット」したかを見ています。
あなたが採用側ならProgateレベルMAXの人よりも制作物が１つある方を選びますよね
情報を取捨選択して無駄を省くことも立派な能力なので、自信を持って案件獲得まで突っ走ってください。
一緒に頑張りましょう！
