プログラミング/仕事

Web制作の独学勉強法【現役エンジニアが語る準備から案件受注レベルまで】

Web制作の勉強法【完全まとめ】
本ページにはプロモーションが含まれています。

こんにちは、現在Webフリーランスエンジニアとして6年ほど活動しているしょーごと申します。

私はこれまで100人程度、業務未経験者のフリーランスとしての独立をサポートしてきた経験があります。

この記事では「Web制作の勉強法」についてまとめており、Progateレベルから実案件受注レベルまで上げる方法を知ることができます。今回の方法で

まさひろくん

スカウトされて実案件を獲得できました!

アイコン名を入力

制作会社からはかなり高評価で、そのまま採用になりました!

こういった多数の例も掲載しているので、かなり自信のある内容です。

この記事の内容を実践できれば

月収30万円を稼げるぐらいのスキルレベルに到達できる

転職活動用のポートフォリオに関しては、 ”独学でこのレベル感のポートフォリオを作成した姿勢に熱意を感じる” との評価を頂けました。 未経験から異業種へ転職する場合、ポテンシャルに比重が置かれると思いますので、全力で制作することをおすすめします!
しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

コーディング課題 超実践編

超実践編をとりあえず見てみる

Web制作独学のゴールはここだ!

私ならこのプログラミングスクール2つをおすすめする【現役エンジニアが語る】

私が数年間Web制作者として仕事をしていて、独学を終了し仕事を獲得できるフェーズは以下のレベルだと考えています。

Web制作独学のゴール地点
  1. HTML.CSS(Sass)を使用して、デザインカンプから複数ページサイトのコーディングができる
  2. ピクセルパーフェクトを習慣化できている
  3. JavaScriptとjQueryで「モーダル、タブ、ハンバーガーメニュー、ページトップに戻るボタン、ローディング画面、スライド」などを実装できる
  4. WordPressで複数ページ構築やお問い合わせ機能、カスタム投稿、カスタムフィールド、カスタムタクソノミーを使用できる
  5. バックアップや保守業務などを理解している
  6. サーバー・ドメインを取得し連携させたり、FTPでデータの出し入れができる
  7. 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に関しては頻繁にセールがあるので、セール時に購入してください。

また、取り組む箇所は以下で大丈夫です。

Web制作の独学勉強法【現役エンジニアが語る準備から案件受注レベルまで】

この段階でJavaScriptを学ぶ必要はないので、飛ばします。

模写コーディングで準備運動

HTML,CSSの基礎学習を終えたら、演習に入ります。

まずは模写コーディングに挑戦しましょう。

しょーご

いきなりデザインカンプからのコーディングに挑むと挫折すると思うので、模写から始めるとハードルが低く感じるかと思います。

基礎学習と平行してAIを導入する

基礎学習が終わった段階で、開発環境にAIを導入します。

ありさちゃん

え!!この段階で!早すぎない!?

こう思われるかもですが、もはやWeb制作の現場ではAIは欠かせません。私もめちゃくちゃ使っています。

導入のハードルが低いものはまずChatGPTがあるかと思います。

Web制作での具体的な活用シーンを以下の記事で紹介しています。

また、もっと本格的にAIを活用されたい場合は、AI搭載エディター「Cursor」を使うのがおすすめです。

私がメインに使っているエディターになります。VSCodeとほぼ同じ機能で、設定を引き継げるので、移行も一瞬で終わります。

しょーご

コーディングが爆速になるので、ぜひ導入しちゃってください!両方無料でも使えますので!!

デザインカンプからのコーディングを練習しまくる【ロードマップ公開】

【2023年版】Progateから実務までにやるべきことと具体的手順【Web制作完全独学ロードマップ】

ここからは、実務と同じ様な「デザインカンプからのコーディング」に挑戦していきます。

まさひろくん

デザインカンプからのコーディングが模写よりいいらしいけど、どういうルートで進めればいいんだろう

読者さん

実践で戦えるレベルになりたいです!

しょーご

そんな方にはWeb制作独学ロードマップがおすすめです!

web制作独学ロードマップ2024最新版
https://shogo-log.com/after-progate/

このロードマップを終えると、もうWeb制作の実案件に挑戦できるようになります!!

補足:そもそもデザインカンプって?

仕事をする上で超重要なワード・概念なので、デザインカンプを知らない人は、必ず以下の記事で意味を押さえて下さい。

\デザインカンプからのコーディングのやり方はこちら/

そして、こちらがWeb制作独学ロードマップになります↓

\Web制作独学ロードマップはこちら/

独学で、Web制作を一から学んで実務まで一直線にいける独学ルートになっています。

私が今からWeb制作を独学するならこのルートで進む

というものになっており、実務で困らないレベルまで育ちます。

また、「実案件レベルの課題」が多数組み込まれているため、完走と同時に「案件応募できるだけのポートフォリオ」が自然と揃っています。

なので、他の人のロードマップに比べて「量が多め」かもしれません。

しかし、このルートに沿っていただければ、スクールに通わずとも実案件レベルまでたどり着くことができます。

基本ルートはこの記事で大丈夫です。

Web制作学習ロードマップの内容

一応ここでも学習ロードマップを簡単に載せておきます。

前半一般的な目安期間フルコミットできる人の目安期間
(課題レビュー待ち時間1日含む)
1冊で全て身につくHTML&CSSとwebデザイン入門講座7日間3日
初級&初級その230日以内10~14日間
中間課題:【初級Ex】 XDデザインからのコーディング練習8日間5日間
中盤
jQueryの学習14日間7日間
Sassの学習7日間2日間
CSS設計4日間2日間
コーディング教材中級編2つ24日程度12日間
ポートフォリオとして公開1日間1日間
閑話休題
WordPressに慣れる5日間3日間
後半
ProgateでPHP11週間2日間
WordPress本かudemy7日間~14日間5日間
WordPressの教科書14日間~21日間5日間
【上級】XDデザインからのコーディング実践演習14日間10日間
エクストラ課題【取り組みは任意】
【即戦力編】Photoshopデザインからのコーディング演習7日間5日間
合計期間5~6ヶ月程度3ヶ月程度

前半は静的サイトコーディング、後半はWordPress制作を身につけていきます。

またこの学習期間は基本的に「平日3h/休日6h」で達成できる期間です。

フルコミットできる人は毎日12h程度を想定しています。私が駆け出し期の最初の2ヶ月間で実務レベルまで身につけた進度がこれぐらいでした。

個人的には短時間で一気に身に付けるのがいいと考えますが、

本業のある方は「平日3h/休日6h」を目安に頑張ってみてください。

しょーご

詳細は以下の記事でご確認下さいませ。

\Web制作完全独学ロードマップはこちら/

Web制作学習で詰まってしまった、メンターが欲しい!という場合

zoom

MENTAを活用してほしい

MENTAをご存知でしょうか。

MENTA」はエンジニア、デザイナーなどのメンターに月額数千円から相談・質問ができるスキルシェアサービスです。

MENTA」では、プログラミング学習、ポートフォリオ、エラー解決方法などを学べます。登録しているメンターは4000人程度です。

ありさちゃん
ありさちゃん
どうしてもWordPressで理解できない部分がある、スクールは高いから論外で、安くzoomとかで現役エンジニアにサポートしてほしい!
まさひろくん
まさひろくん
プロに今の学習の方向性が合っているのか確認したい!転職・就職のレベル感とかも知りたい!

こういった「スポット利用」とかなり相性の良いサービスです。

しょーご

実際の利用方法や、Web制作関連のおすすめメンターも紹介しているので、「MENTA」を独学が詰まったときのサポートにお使いください!

\悩みをメンターに相談してみよう/

Web制作独学後の案件獲得について

学習が終わったら、営業をしよう!!

ここまでで実案件に挑めるスキルは身につきました。

ここからは案件獲得を行っていきます。

案件獲得については全てを「Web制作フリーランスの営業方法大全」にまとめています。

\案件獲得経路の全てがここに/

また、最新の初案件獲得方法も「Web制作の初案件の具体的な受注方法を全部まとめました」にまとめています。

\初案件の獲得方法を網羅!!/

これらの記事の中から、ここでは特に実践して欲しい案件獲得活動を抜粋して紹介します。

❶制作会社への営業

まず制作会社への営業はマストで行いたいです。

なぜなら、私自身もそうですが、制作会社という案件が集まるハブとつながれば、上手く行けば毎月安定して月50万を狙えるからです。

基本的に下請けコーディングになるので最初は単価も納期も厳しいことがありますが、制作会社流の仕事の仕方はとても勉強になります。

私が出しているWeb制作会社に特化した最強の営業法の解説と実践課題では、制作会社への営業方法はもちろん、営業文とポートフォリオを徹底添削しています。

以下は添削を受けた人の声です。

嶋田耕太郎さま

これまでも制作会社への営業は行ったことがあるのですが、新たにクリニック向けのサイト制作を始めたので、営業メールを一新し、添削していただくことにしました。

細かい部分まで添削いただけたので、改善点が明確になりました!「まだまだできることがあるんだ〜」とワクワクしております。

特に、メールを受け取る側の立場になって営業文を作成することの大切さに気付かされたのがよかったです。自分ではできているつもりでも、添削していただくことでまだ足りない点や、より良くできる点が分かりました。今後はそこを重点的に改善していきます。

率直なアドバイスをいただけるので、ぜひ添削してもらうのをおすすめします!

これから営業する人だけではなく、すでに営業を行っている人にも役立ちますよ!

とても自信のあるコンテンツになっているので、是非営業の自信をつけてもらえればと思います!!

\営業方法を学んで実践し添削を受けられる/

❷エンド直営業を実践する

エンド直営業は先程の制作会社営業と違って、お客さんと直接つながる直請けになります。

エンド直請けのメリット
  1. ライバルが極端に少ない
  2. 納期に余裕がある
  3. マージンが引かれないので、高単価である

ただその代わり、制作をまるっと引き受けるので、要件定義やデザイン、コーディング、アップロード、その後の運用もまるっと担当する必要があります。

まさひろくん

いや、ほぼ初見のものばかりで、できませんよ…

そんな方には、「WSSクラス」をおすすめしたいです。

WSSクラス」ではWeb制作営業を学び、実践しつつ、最終的には「お客さんのWebコンサル」のようになります。

Web周りをまるっと引き受けてるので、単発制作で終わらず、サブスク収入を作ることができるようになります。

月100万を超える人というのは、コーディングだけでなく、こういったポジションにいることが多いです。

詳細は「受講生が語る:WSSクラスの内容と評判・口コミを徹底検証」で内容を徹底レビューしていますので、参考にしてみてください!!

しょーご

WSSクラスは結構覚悟が求められるスクールですが、本気で取り組めばかなりの成果が得られます。

現在は月一しか募集していないので、気になる方はお早めに!

\WSSクラスの詳細はこちらから/

\Web営業を本気で学ぶなら/

Web制作独学後に就職・転職する場合について

就職をする場合も、案件獲得方法をあまり変わりません。

まず「Web制作会社に未経験から就職・転職をするおすすめの方法」を見てください。

ここで就職までの流れや対策を解説しています。

また、独学から転職を成功された方のインタビュー記事も参考になるかと思います。

Web制作学習でよくある質問

やっぱりスクールにいったほうがいいのでしょうか。独学でやりきった人とかいるのですかね?

私は挫折率や効率性の面から、「デイトラ」がプロのWeb制作者になれる最善策だと考えていますが、独学で案件獲得や転職された方もいて、その方のコメントは以下の記事に乗せています。デザインカンプからのコーディング課題をこなされた方の感想とこれから始める方へのメッセージ

ただ、スクールにいこうが、独学だろうが、プロとしてお金をもらって働く以上、どこかで厳しい経験をすることは避けられません。決して稼ぐのが楽ではないことを認識しておけば、挫折率は下げられると思い、お伝えしておきます!

私の失敗談はこちら

デザインとかShopifyとか、マーケティングって、すぐ必要ですか?それともまずはコーディングに集中したほうがいいですかね?

まずはコーディングに集中したほうがいいです。
まずは戦えるポートフォリオを揃えて、案件獲得してコーディングの経験と信頼値を積みましょう。
Web制作で同じような量産型ポートフォリオだらけで見飽きた件について、どうすればよいのか
そうすれば、おのずとコーディング以外もまかされるようになったりします。以下の記事をみればイメージしやすいかと↓
【発注者視点】どのようなweb制作フリーランスに案件を振るのか【5つの具体例を解説】

Web制作を勉強していると、オワコンみたいな話を聞いたりして、実際NoCodeやAIでコーディングがいらなくなるみたいな話を聞いて、学習していて不安になります。

Web制作オワコンについての私の見解は以前に熱弁しているので、そちらをご覧ください。今コーディングを始めても、十分に変えの効かない人材にはなれます!↓
Web制作オワコン説は半分当たっている

案件って、どのレベルから受けられますか?

私のロードマップの上級編まで来たら、とりあえず大丈夫かと(余裕あればPhotoshop編までしてほしいですが)
ロードマップ→Progateから実務までにやるべきことと具体的手順【Web制作完全独学ロードマップ】

最速でフリーランスになりたいです。どれぐらいでなれますか?

早い人だと初案件まで3ヶ月程度の人もいますが、一般的には半年とかだと思います。これはロードマップ記事の「一日に何時間確保できるか」という「進行ペース」に依存します。

結局Web制作って何から勉強すればいいの?

Web制作 ロードマップ
まさひろくん

で、結局何からすればいいのだろう…?

しょーご

色々言ってきましたが、基本的に以下の記事「Web制作独学ロードマップ」に沿って学習していただければ大丈夫です!

しょーご

この記事でまず全体を把握したら、あとはロードマップに沿ってWeb制作学習を進めていただければ、「月収30万レベルのスキルレベル」は身につきます。

他のまとめ記事一覧↓

Web制作関連の有益記事を以下にまとめています。

これらの内容を確認しておくだけでも、強みになります。

Web制作案件獲得方法【完全まとめ】

こちらではWeb制作案件の獲得方法を全網羅しています。

Web制作実案件の進め方・流れ【完全解説】

Web系の仕事で役立つ便利ガジェット・サービス

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

応援して頂ける方へ

ご寄付を頂けると今後の更新の励みになります!

🍺 ビールをプレゼントする

あなたに是非読んでほしい記事です!
});