
Web制作って、独学だとどのくらい時間かかるの?
いちおう独学でやってるけど、人一倍時間がかってる気がする。
みんなどのくらいのペース感でやってるんだろう?
やっぱりスクールとか使ったほうが早いのかな。
このようなお悩みを持った方へ向けた記事になります。
先日のツイートです。
Web制作にかかる期間
— モリ|Web系フリーランス (@MockRoll) June 8, 2022
ニートの場合→3~6ヶ月
会社員の場合→5~10ヶ月
おおよそこれくらい
もちろんその人の能力とか状況でも異なる
とはいえ、かかる期間とか気にしてもあんまり意味ない
他人や平均なんて気にせず、過去の自分と比較することが大事✊#駆け出しエンジニアとつながりたい
Web制作にかかる期間
ニートの場合→3~6ヶ月
会社員の場合→5~10ヶ月おおよそこれくらい
もちろんその人の能力とか状況でも異なるとはいえ、かかる期間とか気にしてもあんまり意味ない
他人や平均なんて気にせず、過去の自分と比較することが大事
- Web制作の独学にかかる平均の期間がわかります。
- 独学の期間を短縮するための具体的な対策がわかります。
- 習得スピードを周りと比較しなくなるので、稼げるWeb制作エンジニアになれます。
Web制作の独学にかかる期間はどれくらい?【←3~6ヶ月】効率化のためには?


タイトルにもありますが、Web制作の独学にかかる期間は、一般的に3~6ヶ月です。
僕はニートの状態で0からWeb制作を独学しましたが、それでも5ヶ月かかりました。
かといって、6ヶ月以上かかれば遅いというわけではありません。
あくまで「一般的に3~6ヶ月」という話です。
人それぞれに事情があり、自分なりのペースがあります。
会社員なら5ヶ月~10ヶ月。しかし焦らなくてOK。
Web制作の独学にかかる期間は、一般的に3~6ヶ月と前述しました。
しかし、会社員として毎日忙しく働いている方であれば、5~10ヶ月ほどかかると見込んでいいと思います。
朝早くから出社し夜遅くに帰宅、それからご飯やお風呂を済ませ、余った体力でやる勉強はかなり大変だからです。
よほど効率よく勉強するか、よほど強い精神力でストイックにやらないと、5、6ヶ月での習得はまず不可能です。
とはいえ、焦らなくてOKです。
焦って習得を急いでも、知識が定着せず、出戻りすることになるからです。
そうなると結果的に「習得スピードは変わらない」状態になってしまいます。
誰もが同じペースで、同じ速度で習得はできません。
SNSにどんな猛者がいても、他人と比較するのは絶対NGです。
自分のペースを大切に焦らずじっくり、学習をすすめましょう。
Web制作の独学から営業までの7ステップ


Web制作を仕事にするには、「勉強してスキルを身に着けてから、営業する」というステップを踏みます。
この章では、独学開始から営業までのステップを以下の7つに分けてご紹介します。
- ステップ①:
Progateにて、HTML/CSSを学ぶ(5~10日間) - ステップ②:
Progateにて、JavaScript(Jquery)を学ぶ(5~10日間) - ステップ③:
コーディング実績を作る(15~20日間) - ステップ④:
Progateにて、PHPを学ぶ(5~10日間) - ステップ⑤:
書籍や動画で、WordPressを学ぶ(15~20日間) - ステップ⑥:
WordPressの実績を作る(15~20日間) - ステップ⑦:
ポートフォリオを用意し、営業する
ステップ①:Progateにて、HTML/CSSを学ぶ(5~10日間)


これから始める初心者であれば、まずはプログラミング学習サイト「Progate」にて、HTML/CSSを学びましょう。
Web制作を仕事にするなら、HTML/CSSでコーディングできるスキルは必須だからです。
書籍で学習するのもオススメですが、僕個人的にはProgateで理解できた点の方が多かったです。
そのため、できる限り最初からProgateで学習するのがおすすめです。
Progateには課金しましょう。
無料で学べる範囲だけでは、勉強になりません。
日数としては、できるだけ5~10日間で終わらせましょう。



なるほど、HTML/CSSってこういうものなんだな。
くらいの理解で、次のステップに進みましょう。
プログラミング学習は、「短期集中」での習得が基本です。
ステップ②:Progateにて、JavaScript(Jquery)を学ぶ(5~10日間)


HTML/CSSをひととおり学習したら、次にJavaScript(Jquery)の学習です。
JavaScript(Jquery)は、サイトに動きをつけるために必須の技術だからです。
こちらもHTML/CSS同様、Progateで学習する方が効率がいいでしょう。



「JavaScript(Jquery)」と書いてるけど、どっちをやればいいの?
と思う方もいると思いますが、どっちもやりましょう。
近年のWeb制作では、JavaScriptが主流となっています。
処理速度の観点から、Jqueryを禁止している企業もあります。
しかしJqueryの方が、よりシンプルで短いコードでサイトに動きをつけられます。
そのため、Jqueryの利用が認められた案件を行う場合、時短になります。
HTML/CSSと比較すると難易度は高いです。
とはいえ、全て完璧に覚えたり理解する必要はありません。



なるほど、JavaScript(Jquery)ってこういうものなんだな。
このくらいの理解ができたら、テンポよく次に進みましょう。
ステップ③:コーディング実績を作る(15~20日間)


ステップ①と②で学習した内容を踏まえて、コーディングの実績を作りましょう。
これまでの学習内容のアウトプットなので、初心者にとって大変なフェーズとなります。
すでにあるサイトをまるっとコーディングする「模写」を行うのもいいでしょう。
しかし要素同士の幅の間隔が分かりづらく、著作権の問題から実績として使えない、といったデメリットがあります。
そこで現代では「コーディング用のデザインカンプ(無料)」がネット上で配布されています。
「コーディング用のデザインカンプ(無料)」を使えば、作ったサイトは自分の実績として使用できます。
また、要素の間隔もピクセル単位でわかります。
とはいえ大体のケースにおいて、いちばん最初のヘッダーの段階でつまづき、手が止まります。
しかしここで、



おれ、たぶん才能ないな。
と思ってはいけません。
最初のうちはまったく手が動かないのは当たり前です。
とにかく調べつつ、とことん時間をかけてじっくりコーディングを進めましょう。
ステップ④:Progateにて、PHPを学ぶ(5~10日間)


ステップ③を経てコーディングの実績ができたら、次に学習するのは「PHP」です。
Web制作の仕事に携わるには、WordPressの知識が必要不可欠になります。
そのWordPressはPHPで作られています。
そのためWordPressのカスタマイズには、PHPの知識が必要です。
ステップ①②同様、Progateでの学習がおすすめです。
ただ注意点があります。
ProgateでのPHP学習には、レッスンⅠ~Ⅳまであります。
レッスンⅠのみ学習したら、次のステップに進みましょう。
レッスンⅡ~Ⅳには「オブジェクト指向」や「コンストラクタ」などの難しい概念が登場します。
難しい内容のわりに、Web制作ではあまり使わないからです。
WordPressは独自の関数を使うため、使うのはレッスンⅠの基礎的な内容のみです。
そのため、5~10日間くらいの短期間でさらっと学習を終わらせましょう。
レッスンⅡ~Ⅳは興味のある方はやってみてもいいでしょう。
ちなみに僕自身はしっかりレッスンⅣまでやりました。
しかしその知識は使うこともなく、すでに忘れてしまい、ムダだったなと思ってます。
ステップ⑤:書籍や動画で、WordPressを学ぶ(20~30日間)


ステップ⑤では、WordPressを学習します。
これまで使った学習サイト「Progate」にはWordPressのレッスンはありません(2022年6月現在)。
そのため、書籍や動画で学習する必要があります。
まずは「WordPressとは何か?」という概念を触りながら学んでいくことになります。
そのため期間は20日~30日、もしくはそれ以上かかることもあります。
WordPressはサーバー契約が必要で、座敷が高く感じる人もいるでしょう。
しかしWordPressは、サーバーと契約しなくても、無料で触ることができます。
その方法は、【サーバー契約の前に】WordPressは、お金をかけずに練習出来ますで紹介してます。
ぜひ参考にしてください。
また、「WordPressの学習におすすめの書籍と動画」を、それぞれ以下のとおり紹介します。
おすすめ書籍
まず紹介するのは、「仕事の現場でサッと使える!デザイン教科書」です。
これ一冊で、WordPressの簡単なカスタマイズから、応用的な使い方までマスターできます。
しかし、WordPressを始めるための環境構築の部分は端折られているのが難点です。
次に紹介するのが、WordPressの教科書」です。
こちらの書籍ではWordPress環境に「KUSANAGI for Vagrant」を用いています。
より本格的な現場さながらの環境で学習できる一方で、難易度は高くこの環境構築でつまづく人も多いでしょう。
環境構築を除けばやってることは同じです。
そのため上記の「サッと使える」の方が個人的にはおすすめです。
おすすめ動画
以下、たにぐちまことさんの「WordPress開発講座」というYouTube動画の再生リストです。
WordPress開発講座|たにぐち まことのプログラミング学習チャンネル
この再生リストでは11本の動画に分け、WordPressのカスタマイズ方法について解説しています。
内容としては、有料の動画商材に匹敵するクオリティとなっています。
この動画をマネして学習するだけで、書籍1冊分の学習ができるといっても過言ではありません。
僕自身は書籍でWordPress学習をした後、この動画の存在を知りました。
8~9割が書籍でやっていることと同じだったので、「最初から動画で学習すればよかった」と思いました。
ステップ⑥:WordPressの実績を作る(15~20日間)


WordPressの概念やカスタマイズについて学習できたら、その実績を作りましょう。
ステップ③で作成したコーディング実績を、実際にWordPress化してみるのがいいでしょう。
もしくは、すでにコーディングが済んでいるサイトをWordPress化してもいいかもしれません。
WordPressの実績を作ることの本質としては、



WordPressのカスタマイズはできますよ!
これが証拠です!
と自信をもってアピールできるようになることです。
仕事を取るための営業では、何かしらの制作実績が求められます。
実績を見せてと言われても、臆することなくドヤ顔で見せられる状態を作りましょう。
ステップ⑦:ポートフォリオを用意し、営業する


ポートフォリオとは、「入れ物」のことです。
これまで作成した実績をひとまとめにしたポートフォリオを作成しましょう。
WordPressの既存テーマの機能を使うもよし、0から完全オリジナルのサイトを構築してもよし、です。
ただ注意点として、ポートフォリオはあくまで「入れ物」です。
仕事を獲得するためには当然、入れ物より「中身」の方が大切になります。
きれいでかっこいいポートフォリオを作りたくなる気持ちは、とてもわかります。
たしかにある程度の見た目は大切ですが、あまり時間をかけないことがポイントです。
そこで、以下の無料ポートフォリオサービスを利用することがおすすめです。
ポートフォリオにこれらのものを使っているからといって、評価が下がることは特にありません。
どちらかというと、発注者が気にしているのは「中身」です。
ポートフォリオが完成したら、ポートフォリオのURLを実績とし、営業を行いましょう。
最初のうちはとにかく数を打つことです。
僕は最初の頃、1日30~50件ほどの営業をしていました。
これを1週間繰り返した結果、返事が来たのは2~3件ほどでした。
そのため最初のうちは「無視されて当然」くらいの精神で、複数の企業に営業しましょう。
独学のメリット・デメリット


Web制作の独学にはメリットもありますが、デメリットもあります。
それぞれご紹介します。
メリット


メリットは以下のとおりです。
- お金がかからない
- 自分で調べて解決する力が身に付く
まず最大のメリットとして挙げられるのが、お金がかからないことです。
まったくかからないわけではありませんが、スクールに通うことと比較すれば、その差は歴然です。
また、自分で調べて解決する力が身に付くこともメリットです。
Web制作の仕事をしていると、ググって解決しなければならない場面が出てきます。
「わからないことは聞く」ことしかできないのは、他人の時間を奪うことにもなります。
それに、苦労して自分の力でググって解決した方が、しっかり知識も定着するでしょう。
デメリット


一方でデメリットは以下のとおりです。
- 時間がかかる
- 知識に偏りが生じる
独学はお金がかからない分、時間がかかります。
スクールを利用した場合、独学の半分以下の時間で「稼ぐフェーズ」に入れるとも言われます。
それもそのはず、講師がいるため、わからなくてストップしてる時間を大幅に短縮できるためです。
加えて独学の場合、知識に偏りが生まれがちです。
かなり大切な技術であっても、大切な知識と気付かずにスルー。
実際に案件を受注してから、わからなくて焦る。
といったことも、ないとはいえません。
Web制作の独学の期間を短縮するためには?


Web制作の独学の期間を短縮するためには、いくつかのコツや考え方があります。
以下のとおり、3つご紹介します。
- その①:目的やゴールを明確にする
- その②:基礎学習を繰り返さない
- その③:お金をかけてスクールを利用する
その①:目的やゴールを明確にする


独学の時間を短縮するためには、目的やゴールを明確にすることです。
Web制作に限った話ではありませんが、勉強や行動はすべて、何かしらの目的があって成り立つものです。



フルリモートで働けるフリーランスのになりたい!
Web制作で月5万円稼げるようになりたい!
まずは上記のような、明確な目的を決めましょう。
そうすることで、それに必要な勉強量や、行動の方向性も変わってきます。
目的を決めないと、ムダな学習を何度も繰り返すことになります。
「目的があるから、弾丸は速く飛ぶ」という言葉もあります。
まずは目的を明確に決めましょう。
その②:基礎学習を繰り返さない


前述でも少し触れましたが、基礎学習を繰り返さないことが大切です。
たまにSNSで、Progateを何周もしている人を見かけます。
しかし、それは時間のムダといえます。
Progateの内容を完璧にしたところで、実際の業務で手が止まり、ググることになるからです。
そのため、「インプット2割、アウトプット8割」を意識しましょう。
わからなくてもインプットを終え、アウトプットしてみる。
わからない部分のみインプットする。
このような姿勢が理想です。
その③:お金をかけてスクールを利用する


お金はかかりますが、独学の時間を短縮するならスクールを利用するのも一つです。
独学ではわからないところに直面した時、進捗がストップします。
それも相まって、モチベーションの維持も大変だからです。
スクールに投資することで、損はできない気分になり、挫折対策にもなります。
またバランスよく学習できる点もメリットです。
まとめ


以上、Web制作の独学にかかる期間をはじめ、営業までのステップ、独学の期間短縮の方法についてご紹介してきました。
Web制作の独学にかかる時間は、人それぞれです。
早い遅いはあまり気にせずに、自分のペースを大切に、学習に励むのがいいと思います。
SNSで他人と比較すると、自己肯定感が下がって挫折に繋がります。
なので、過去の自分と比較しながらがんばりましょう。










1992年生まれ|2020年10月フリーランスとして独立|Web制作、SEOライティングを軸に活動中|接客→生産管理→システム開発会社→現在|モリブログ運営。Web制作、フリーランスジャンルを中心に更新中。PV数は年間14万人以上||温泉、旅行、甘いものが好き。