これからWeb制作の勉強を始めてフリーランスになりたい人や、副業でWeb制作を始めてお小遣い稼ぎがしたいという人は「どれくらい勉強すれば案件を受注できるレベルになれるんだろう？」と気になりますよね
また既に未経験から独学でWeb制作の勉強を初めているが「自分にはまだまだ勉強が足りないのでは…？」と、案件の受注タイミングを計りかねている人も居るのではないでしょうか。
ということで、今回は僕が未経験からWeb制作（コーディング）の案件を初受注した時点での勉強時間と出来たこと（スキル）をご紹介したいと思います。
この記事を書いた人
DoGgy（2級ウェブデザイン技能士）
30歳で大手メーカーの営業マンを辞めて未経験からWeb制作を独学。現在は在宅フリーランスとして月平均50万円稼いでいます。
当ブログでは「在宅ワークの初め方」や「Web制作」について発信中！
Web制作案件を受注するために必要な勉強時間
僕は未経験からWeb制作の勉強を始めて約2ヶ月に初案件を受注しました。
プログラミングスクール等には通わず、ProgateやWebデザイン入門用の書籍での独学です。
そのうち1ヶ月間は会社員を続けながら平日1時間、休日3時間ほど。
会社を辞めてからの一ヶ月間は土日関係なく毎日8時間ほどWeb制作の勉強に充てました。
これらを単純計算すると、僕が初案件を受注するまでに勉強した時間は約300時間ほどです。
2ヶ月勉強しただけで案件を受注するのって、かなり不安じゃない？
確かにGoogleで検索をすると「独学の人は半年〜1年間ほど勉強期間が必要」といった情報も出てきくるので、ギャップを感じるかもしれませんね。
でもWebサイトのコーディングって結構奥が深いので、極めようとしてたら何時まで経っても案件が受注できないんですよ。
基礎を勉強できたら、あとは案件を受注しながらスキルアップしていく、という取り組み方で全然オーケーです。
基礎を勉強できたら、迷わず案件を受注するべき！
僕はWeb制作の勉強を初めて2ヶ月で初案件を受注しましたが、決して早すぎたとは思っていません。
受注してから「やばい…知識不足で対応できない」ってならなかったの？
えぇ、なりました。が、そんな時は奥義「Google検索」を駆使します。
Web制作のコーディングに関する記事はネット上で情報が多く、レイアウトに困った際にも検索すれば大体は解決策が載っているものです。
なんかGoogleで調べるのって負けた気がする…
そう思っていた時期が僕にもありましたが、一般的なエンジニアさんも普通にググりまくってるのを知ってから全然気にしなくなりました。
クライアント目線でみても、依頼したWebサイトが納品されれば無問題なので、制作過程でこちらがググった事なんて一切気にしません。
大切なのは、ググッた情報をただコピペするのでなくしっかりと自分の知識として落とし込み、次回以降のコーディングに活かすことです。
やばい…ググったけど一向に解決できなさそう
内容が専門的になればなるほどネット上での情報が少なくなり、その時点の自分のレベルでは解決できない問題に出くわすかもしれません。
そんな時はクラウドソーシング等で外注するという手もあります。
依頼したワーカーに報酬を支払うことになるので自分の取り分は減りますが、作業後にワーカーに作業内容を教えて貰うなど、自分のスキルとして吸収できれば成長にも繋がります。
このあたりはクラウドソーシングで仕事を依頼するという選択肢の記事で解説していますので、気になる方は読んでみてください。
「案件を受注する」に勝る勉強方法は無い
僕も日々コーディングのお仕事をしていますが、仕事で活用している知識の大半は案件対応をしながら学んだものです。
もちろん独学で基礎を固めるのも大切ですが、案件を受注してみなきゃ学べない（学ぶべきポイントが見えない）ことってい〜っぱいあります。
ある程度自力でWebサイトが作れるようになったら、勇気を出して案件を受注してみてください。
案件受注前に習得しておきたいスキル
前項で「ある程度自力でWebサイトが作れるようになったら受注しましょう」と述べましたが、具体的には以下が出来るレベルになったら案件受注を目指して良いでしょう。
- HTML、CSSで一般的なサイトの模写コーディングができる
- どの画面サイズで見ても違和感のないレイアウトで作れる（レスポンシブ）
- デザインデータに忠実にコーディングができる
- Javascript(jQuery)でWebサイトに動きを付けられる
どうやって勉強すればスキルは身につくの？
次の項でこれらのスキルを習得するために、僕がどのような手順で勉強を進めていったのかをご紹介していきます。
Web制作の勉強方法
僕はWeb制作案件を初受注する前に以下の手順で独学を行いました。
- Progateの「HTML & CSSコース」
- Webデザイン入門用の書籍
- Progateの「jQueryコース」
- 模写コーディング
① Progateの「HTML & CSSコース」
一番はじめはProgateの「HTML & CSSコース」でコーディングの基礎を勉強しました。
この記事をご覧の方には説明不要かもしれませんが、ProgateはWebブラウザ上でプログラミンの基礎を学ぶことが出来るWebサービスです。
自分のPCにテキストエディタ等のソフトをインストールせずにコーディングの学習が初められ、初級編までは無料で始められるので「取り敢えずWeb制作がどんなものなのか学びたい」という段階でお世話になりました。
② Webデザイン入門書
続いてWebデザイン入門書での勉強に移行。
「ネットで調べれば良いや」と思う気持ちもありましたが、一冊の本に情報が集約されているので情報の取りこぼしが無く、安心して勉強が進められると思い購入しました。
ちなみに僕が購入した入門書は以下です。
こちらは本に書かれた手順に沿って、お手本サイトをコーディングしながら勉強する内容でした。
その他に自分のPCにWeb制作環境を作る方法や、コーディングにオススメのソフトウェアも紹介されていたりと、コーディング以外に役立つ情報も記載されています。
Progateだとコーディングの基礎は勉強できるものの、自分のPC環境でイチからWebサイトを制作する方法は学べないので、入門書での勉強は2ステップ目として最適だったと思います。
③ Progateの「jQueryコース」
②まで勉強したら一旦HTML・CSSは終了し、Javascript(jQuery)の勉強をしました。
Javascriptを習得すれば、サイトにHTML・CSSでは表現できない特殊な動き(スムーススクロールなど)を与えられるようになるので、一気に今どきのイケてるサイトを作れるようになります。
うわぁ…また別の言語をイチから勉強するのか
そう思う気持ちもわかりますが、気落ちする必要はありません。
何故なら、初心者でもJavascriptを使いやすいように作られた「jQuery」というライブラリが存在するからです。
「ライブラリとは何ぞや？」については割愛しますが、jQueryを勉強すれば手っ取り早くJavascriptの機能が使えるようになるという認識でOKです。
そしてjQueryって簡単なので、Progateの「jQuery」コース初級〜上級編を一通り受講すれば実践で使えるレベルになります。
Progateの講座は月額会員（1078円／月）に登録すれば中級編以上を受講できるので、jQueryの勉強のために一ヶ月だけ月額会員に登録して利用するのがオススメですよ！
④ 模写コーディング
「模写コーディング」とは、参考にするサイトを決めて自分でイチからコピーサイトをコーディングすることです。
Google Chromeのデベロッパーツールなどを使用して、参考サイトの画像サイズや余白の大きさなどを取得し作成していきます。
入門書のお手本サイトには出てこなかったレイアウトにも挑戦することになるので、初めのうちは苦戦しましたが、自分で悩みながらコーディングを進めるうちにグングン上達します。
またどうしてもコーディング方法がわからない部分はデベロッパーツールでコードの内容を確認して真似するだけでもかなり勉強になります。
デベロッパーツールの使い方についてはデベロッパーツールの使い方（特に必要な３つを厳選）の記事でご紹介していますので参考にしてみてください。
どういうサイトの模写コーディングをするのが良いの？
基本的にはどんなサイトでも構いませんが、決められない場合は適当に企業サイトを検索して、「こういうレイアウトは良くみるな」と思うようなサイトをターゲットにしましょう。
あとはiPhoneのサイトのように特殊なレイアウトは模写しなくても構いません。
複雑なサイトの模写に時間を使うより、一般的な企業サイトでよく使われるレイアウトのコーディングに慣れる方が実用的です。
模写コーディングは何ページくらいやれば良いかな？
僕はレイアウトの違う企業サイトを2ページ模写した段階で「そろそろ受注してみようかな？」と思い、ポートフォリオの作成に着手しました。
ポートフォリオのコーディングを行う過程でもスキルアップしますし、何よりWeb制作案件の受注にポートフォリオは必須なので、早い段階でポートフォリオ作成に着手したかったからです。
ポートフォリオの作り方については実績が無い人のポートフォリオ作りの記事でご紹介していますので、参考にしてみてください。
まとめ
今回は未経験からWeb制作案件で初受注までの勉強時間について解説してきました。
たまにTwitterなどで熱心にWeb制作の独学を続けている方をお見かけしますが、独学だけで学べる範囲って狭いので、「ここまで出来るなら思い切って案件に応募してみればいいのに…」と思う次第です。
もちろん考え方は人それぞれなので、絶対にこの方法が良い！という物ではありませんが、あなたのWeb制作ライフに少しでも参考にしていただければ幸いです。
それでは、今回はこの辺で失礼します！
