Web制作を独学するうえで最も大切なのは、正しい学習方法と教材選びになります。最近では良質な教材が増えてきたため、独学の環境自体は揃ってきています。
私はこれまで100人程度、業務未経験者のフリーランスとしての独立をサポートしてきた経験があり、スクール講師も数年行っています。
この記事ではその知見を活かして「Web制作の独学勉強法」についてまとめており、Progateレベルから実案件受注レベルまで上げる方法を知ることができます。今回の方法で
スカウトされて実案件を獲得できました！
制作会社からはかなり高評価で、そのまま採用になりました！
こういった多数の例も掲載しているので、かなり自信のある内容です。この記事をベースに様々な関連記事をまとめているので、全部見ていただければWeb制作独学の全体像が分かるようになっています。
最終的に「月収30万円のスキルレベル」を目指せる内容になっているので、ぜひ最後までご覧ください。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
Web制作独学のゴールはここだ！
私が数年間Web制作者として仕事をしていて、独学を終了し仕事を獲得できるフェーズは以下のレベルだと考えています。
- HTML.CSS(Sass)を使用して、デザインカンプからのコーディングができる
- ピクセルパーフェクトを習慣化できている
- JavaScriptとjQueryで「モーダル、タブ、ハンバーガーメニュー、ページトップに戻るボタン、ローディング画面、スライド」などを実装できる
- WordPressで複数ページ構築やお問い合わせ機能、カスタム投稿、カスタムフィールド、カスタムタクソノミーを使用できる
- バックアップや保守業務などを理解している
- サーバー・ドメインを取得し連携させたり、FTPでデータの出し入れができる
- LPなら20時間以内でコーディングできるスピード感
これができたら、一人前といっていいでしょう。
この記事の内容をこなせれば全部大丈夫です！
独学はめちゃくちゃ評価される事実
最近はデイトラ
などの有料なスクールが多く、独学は難しくなっていると言われます。
しかし！！現在スクール生が多く就職転職市場に多いからこそ、
独学でここまでできるのは凄いねぇ！！
と企業に言われるチャンスも増えています。
この記事で紹介している方は、独学をやりきった結果、面接官にめちゃくちゃ褒められて、即「一緒に仕事がしたい！」となったそうです。
独学の成功例をまずは頭に入れておいてください👇
まずはWeb制作の準備から
Web制作を始める前に、どれぐらい費用がかかるのか、何を準備したらいいのかを知っておくことは大事です。
Web制作・デザインのおすすめPC紹介！
私はかなりギリギリのスペックのMacBookを買ってしまい、結局耐えきれず買い直すことになりました。
Windows,MacBook関わらず、この記事にある「最低スペック」をご自身のPCが超えているかをぜひ確認してみてください。
Web制作（フリーランス独立）でかかる全費用を解説！
Web制作を仕事にしようとすると、意外に多くの費用がかかることに驚きます。
特に直近のキャッシュフローが安定していない・お金がカツカツの人は危機に陥るので、何にどれぐらいかかるのか予め確認しておきましょう！
この記事ではWeb制作にかかるほとんどの費用を解説しています。
Web制作学習開始！！
全てはProgateから始まる
プログラミング学習はやはりProgateから始まります。
ただし学習の仕方を間違えると延々とProgateから抜けられなくなるため、
正しい学習方法に関しては記事に書いておりますのでご参照ください。
Web制作であれば、Flexbox編まで行いたいですが、道場編は難しい割に微妙なので行わなくていいと思います（私はしませんでした）
VSCodeの設定を行う
私が今メインに使っているエディターはCursorですが、VSCodeの設定がベースになっているので、どちらにせよVSCodeの導入・設定をProgate後は行っておくのがおすすめです。
HTML,CSSの基礎を固める
Progateが終わったら、HTML.CSSを本か動画で学習していきます。
おすすめは以下二点のどちらかでOKです。
ちゃんと学ぶ、HTML/CSS + JavaScriptに関しては頻繁にセールがあるので、セール時に購入してください。
また、取り組む箇所は以下で大丈夫です。
この段階でJavaScriptを学ぶ必要はないので、飛ばします。
さらなる詳細は以下の記事にまとめています。
模写コーディングで準備運動
HTML,CSSの基礎学習を終えたら、演習に入ります。
まずは模写コーディングに挑戦しましょう。
いきなりデザインカンプからのコーディングに挑むと挫折すると思うので、模写から始めるとハードルが低く感じるかと思います。
基礎学習と平行してAIを導入する
基礎学習が終わった段階で、開発環境にAIを導入します。
え！！この段階で！早すぎない！？
こう思われるかもですが、もはやWeb制作の現場ではAIは欠かせません。私もめちゃくちゃ使っています。
導入のハードルが低いものはまずChatGPTがあるかと思います。
Web制作での具体的な活用シーンを以下の記事で紹介しています。
また、もっと本格的にAIを活用されたい場合は、AI搭載エディター「Cursor」を使うのがおすすめです。
私がメインに使っているエディターになります。VSCodeとほぼ同じ機能で、設定を引き継げるので、移行も一瞬で終わります。
コーディングが爆速になるので、ぜひ導入しちゃってください！両方無料でも使えますので！！
デザインカンプからのコーディングを練習しまくる【ロードマップ公開】
ここからは、実務と同じ様な「デザインカンプからのコーディング」に挑戦していきます。
デザインカンプからのコーディングが模写よりいいらしいけど、どういうルートで進めればいいんだろう
実践で戦えるレベルになりたいです！
このロードマップを終えると、もうWeb制作の実案件に挑戦できるようになります！！
＼デザインカンプからのコーディングのやり方はこちら／
そして、こちらがWeb制作独学ロードマップになります↓
＼Web制作独学ロードマップはこちら／
独学で、Web制作を一から学んで実務まで一直線にいける独学ルートになっています。
「私が今からWeb制作を独学するならこのルートで進む」
というものになっており、実務で困らないレベルまで育ちます。
また、「実案件レベルの課題」が多数組み込まれているため、完走と同時に「案件応募できるだけのポートフォリオ」が自然と揃っています。
なので、他の人のロードマップに比べて「量が多め」かもしれません。
しかし、このルートに沿っていただければ、スクールに通わずとも実案件レベルまでたどり着くことができます。
基本ルートはこの記事で大丈夫です。
Web制作学習ロードマップの内容
一応ここでも学習ロードマップを簡単に載せておきます。
| 前半 | 一般的な目安期間 | フルコミットできる人の目安期間 (課題レビュー待ち時間1日含む) |
| 1冊で全て身につくHTML&CSSとwebデザイン入門講座 | 7日間 | 3日 |
| 初級&初級その2 | 30日以内 | 10~14日間 |
| 中間課題：【初級Ex】 XDデザインからのコーディング練習 | 8日間 | 5日間 |
| 中盤 | ||
| jQueryの学習 | 14日間 | 7日間 |
| Sassの学習 | 7日間 | 2日間 |
| CSS設計 | 4日間 | 2日間 |
| コーディング教材中級編2つ | 24日程度 | 12日間 |
| ポートフォリオとして公開 | 1日間 | 1日間 |
| 閑話休題 | ||
| WordPressに慣れる | 5日間 | 3日間 |
| 後半 | ||
| ProgateでPHP1 | 1週間 | 2日間 |
| WordPress本かudemy | 7日間～14日間 | 5日間 |
| WordPressの教科書 | 14日間～21日間 | 5日間 |
| 【上級】XDデザインからのコーディング実践演習 | 14日間 | 10日間 |
| エクストラ課題【取り組みは任意】 | ||
| 【即戦力編】Photoshopデザインからのコーディング演習 | 7日間 | 5日間 |
| 合計期間 | 5~6ヶ月程度 | 3ヶ月程度 |
前半は静的サイトコーディング、後半はWordPress制作を身につけていきます。
またこの学習期間は基本的に「平日3h/休日6h」で達成できる期間です。
個人的には短時間で一気に身に付けるのがいいと考えますが、
本業のある方は「平日3h/休日6h」を目安に頑張ってみてください。
詳細は以下の記事でご確認下さいませ。
＼Web制作完全独学ロードマップはこちら／
Web制作学習で詰まってしまった、メンターが欲しい！という場合
MENTAを活用してほしい
MENTAをご存知でしょうか。
「MENTA」はエンジニア、デザイナーなどのメンターに月額数千円から相談・質問ができるスキルシェアサービスです。
「MENTA」では、プログラミング学習、ポートフォリオ、エラー解決方法などを学べます。登録しているメンターは4000人程度です。
こういった「スポット利用」とかなり相性の良いサービスです。
＼悩みをメンターに相談してみよう／
Web制作コミュニティの強力バックアップを活用
- 仲間と共に切磋琢磨したい！！
- 案件獲得から技術サポートまで、ガッツリ支援してほしい
この場合には、Web制作コミュニティを活用するのがおすすめです。
私が観測している感じだと、
独学で案件獲得できました！！
と言っている方の半分は、どこかしらのコミュニティに所属している印象です。
それぐらいライバルも強くなってきているので、是非以下の記事を見ておいてください。
Web制作独学後の案件獲得について
学習が終わったら、営業をしよう！！
ここまでで実案件に挑めるスキルは身につきました。
ここからは案件獲得を行っていきます。
案件獲得については全てを「Web制作フリーランスの営業方法大全」にまとめています。
＼案件獲得経路の全てがここに／
また、最新の初案件獲得方法も「Web制作の初案件の具体的な受注方法を全部まとめました」にまとめています。
＼初案件の獲得方法を網羅！！／
これらの記事の中から、ここでは特に実践して欲しい案件獲得活動を抜粋して紹介します。
❶制作会社への営業
まず制作会社への営業はマストで行いたいです。
なぜなら、私自身もそうですが、制作会社という案件が集まるハブとつながれば、上手く行けば毎月安定して月50万を狙えるからです。
基本的に下請けコーディングになるので最初は単価も納期も厳しいことがありますが、制作会社流の仕事の仕方はとても勉強になります。
私が出しているWeb制作会社に特化した最強の営業法の解説と実践課題では、制作会社への営業方法はもちろん、営業文とポートフォリオを徹底添削しています。
以下は添削を受けた人の声です。
これまでも制作会社への営業は行ったことがあるのですが、新たにクリニック向けのサイト制作を始めたので、営業メールを一新し、添削していただくことにしました。
細かい部分まで添削いただけたので、改善点が明確になりました！「まだまだできることがあるんだ〜」とワクワクしております。
特に、メールを受け取る側の立場になって営業文を作成することの大切さに気付かされたのがよかったです。自分ではできているつもりでも、添削していただくことでまだ足りない点や、より良くできる点が分かりました。今後はそこを重点的に改善していきます。
率直なアドバイスをいただけるので、ぜひ添削してもらうのをおすすめします！
これから営業する人だけではなく、すでに営業を行っている人にも役立ちますよ！
とても自信のあるコンテンツになっているので、是非営業の自信をつけてもらえればと思います！！
＼営業方法を学んで実践し添削を受けられる／
❷エンド直営業を実践する
エンド直営業は先程の制作会社営業と違って、お客さんと直接つながる直請けになります。
- ライバルが極端に少ない
- 納期に余裕がある
- マージンが引かれないので、高単価である
ただその代わり、制作をまるっと引き受けるので、要件定義やデザイン、コーディング、アップロード、その後の運用もまるっと担当する必要があります。
いや、ほぼ初見のものばかりで、できませんよ…
そんな方には、「WSSクラス」をおすすめしたいです。
「WSSクラス」ではWeb制作営業を学び、実践しつつ、最終的には「お客さんのWebコンサル」のようになります。
Web周りをまるっと引き受けてるので、単発制作で終わらず、サブスク収入を作ることができるようになります。
月100万を超える人というのは、コーディングだけでなく、こういったポジションにいることが多いです。
詳細は「受講生が語る：WSSクラスの内容と評判・口コミを徹底検証」で内容を徹底レビューしていますので、参考にしてみてください！！
＼WSSクラスの詳細はこちらから／
＼Web営業を本気で学ぶなら／
Web制作独学後に就職・転職する場合について
就職をする場合も、案件獲得方法をあまり変わりません。
まず「Web制作会社に未経験から就職・転職をするおすすめの方法」を見てください。
ここで就職までの流れや対策を解説しています。
また、独学から転職を成功された方のインタビュー記事も参考になるかと思います。
Web制作学習でよくある質問
私は挫折率や効率性の面から、「デイトラ」がプロのWeb制作者になれる最善策だと考えていますが、独学で案件獲得や転職された方もいて、その方のコメントは以下の記事に乗せています。デザインカンプからのコーディング課題をこなされた方の感想とこれから始める方へのメッセージ
ただ、スクールにいこうが、独学だろうが、プロとしてお金をもらって働く以上、どこかで厳しい経験をすることは避けられません。決して稼ぐのが楽ではないことを認識しておけば、挫折率は下げられると思い、お伝えしておきます！
私の失敗談はこちら
まずはコーディングに集中したほうがいいです。
まずは戦えるポートフォリオを揃えて、案件獲得してコーディングの経験と信頼値を積みましょう。
Web制作で同じような量産型ポートフォリオだらけで見飽きた件について、どうすればよいのか
そうすれば、おのずとコーディング以外もまかされるようになったりします。以下の記事をみればイメージしやすいかと↓
【発注者視点】どのようなweb制作フリーランスに案件を振るのか【5つの具体例を解説】
Web制作オワコンについての私の見解は以前に熱弁しているので、そちらをご覧ください。今コーディングを始めても、十分に変えの効かない人材にはなれます！↓
Web制作オワコン説は半分当たっている
私のロードマップの上級編まで来たら、とりあえず大丈夫かと（余裕あればPhotoshop編までしてほしいですが）
ロードマップ→Progateから実務までにやるべきことと具体的手順【Web制作完全独学ロードマップ】
早い人だと初案件まで3ヶ月程度の人もいますが、一般的には半年とかだと思います。これはロードマップ記事の「一日に何時間確保できるか」という「進行ペース」に依存します。
結局Web制作って何から勉強すればいいの？
で、結局何からすればいいのだろう…?
色々言ってきましたが、基本的に以下の記事「Web制作独学ロードマップ」に沿って学習していただければ大丈夫です！
この記事でまず全体を把握したら、あとはロードマップに沿ってWeb制作学習を進めていただければ、「月収30万レベルのスキルレベル」は身につきます。
他のまとめ記事一覧↓
Web制作関連の有益記事を以下にまとめています。
これらの内容を確認しておくだけでも、強みになります。
Web制作案件獲得方法【完全まとめ】
こちらではWeb制作案件の獲得方法を全網羅しています。
Web制作実案件の進め方・流れ【完全解説】
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
