こんにちは、現在Webフリーランスエンジニアとして5年ほど活動しているしょーごと申します。
私はこれまで100人程度、業務未経験者のフリーランスとしての独立をサポートしてきた経験があります。
この記事では「Web制作の勉強法」についてまとめており、Progateレベルから実案件受注レベルまで上げる方法を知ることができます。今回の方法で
スカウトされて実案件を獲得できました！
制作会社からはかなり高評価で、そのまま採用になりました！
こういった多数の例も掲載しているので、かなり自信のある内容です。
この記事を書いたのは
しょーご（@samurabrass）
このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
コーディングを学習中の方はぜひご活用ください。
＼無料の入門編から本格企業サイトまで／
まずはWeb制作の準備から
Web制作を始める前に、どれぐらい費用がかかるのか、何を準備したらいいのかを知っておくことは大事です。
Web制作・デザインのおすすめPC紹介！
私はかなりギリギリのスペックのMacBookを買ってしまい、結局耐えきれず買い直すことになりました。
Windows,MacBook関わらず、この記事にある「最低スペック」をご自身のPCが超えているかをぜひ確認してみてください。
Web制作（フリーランス独立）でかかる全費用を解説！
Web制作を仕事にしようとすると、意外に多くの費用がかかることに驚きます。
特に直近のキャッシュフローが安定していない・お金がカツカツの人は危機に陥るので、何にどれぐらいかかるのか予め確認しておきましょう！
この記事ではWeb制作にかかるほとんどの費用を解説しています。
プロに学習のコツを聞く[テックアカデミー無料メンター相談]
「独学で学ぼう！」と強い意志を持ったものの、以下のような悩みを持っている人はいないでしょうか。
プログラミングを今始めても稼げるのか正直不安だし、あと今の目標や学習プランが現実的かどうかもプロに聞いてみたい…
こんな要望に答えるサービスをテックアカデミーが出しています。
それが、無料メンター相談。これはなんと「無料」です！
＼無料でプロのエンジニアに相談する／
プログラミング学習関連の質問はもちろん、仕事のことについても色々と聞くことができます。
なおスクールへの無理な勧誘は無いということです。スクール側もそのあたりは徹底しているのだと思います。
正直学習ロードマップに関してはこのブログで揃うので、現在の業界の話や効率の良い学習の仕方などを聞くと良いかなと思います。無料で現場のプロに相談できる機会は貴重です。
学習しようと決めたけど、今ひとつ不安です。背中を押してほしい…
無料メンター相談はこういったニーズを解決してくれるサービスだと思うので、積極的に活用していきましょう！
＼無料でプロのエンジニアに相談する／
なお無料メンター相談に申し込むと、テックアカデミーの無料体験もついてくるようです。二度美味しいですね(≧▽≦)
学習開始 全てはProgateから始まる
プログラミング学習はやはりProgateから始まります。
ただし学習の仕方を間違えると延々とProgateから抜けられなくなるため、
正しい学習方法に関しては記事に書いておりますのでご参照ください。
Web制作であれば、Flexbox編まで行いたいですが、道場編は難しい割に微妙なので行わなくていいと思います（私はしませんでした）
Web制作を効率よくスクールで学ぶ
スクール？独学希望なんですけど
正直な話をします。
私はスキル面を「メンターのいるスクールで学ぶ」ことをおすすめしています。
全く知らない分野を自分一人で学習するのはめちゃくちゃきつく、多くの挫折者を見てきたからです。
その上で、私も実際に受講した上で、真剣におすすめできるスクールを一つ上げます。
これ一本で「初学者から実案件レベル＋ポートフォリオ」まで準備することが可能で、今も頻繁にアップデートしています。
怪しい微妙なスクールが乱立するなか、デイトラは私も完走した上で本気でおすすめできると思い、勧めています。
＼無料体験動画も複数あり／
副業Web制作を成功させたデイトラ受講生へのインタビュー記事
現役の看護師として働きつつ「Web制作コース」で学んで、副業でWeb制作を行うさたかさんにインタビューをしてきました。
デイトラがどう実務に役立ったかはもちろん、本業と副業としてのWeb制作の両立の仕方も深堀りしてきました。
Web制作を独学で行う【ロードマップ公開】
スクールを紹介しましたが、しかし人によって状況は違うと思います。
スクールにいくお金はないです！でも独学力に自信ありです！
まずは独学して、それからできるかどうかを判断したいです！
そんな方にはWeb制作独学ロードマップがおすすめです！
独学で、Web制作を一から学んで実務まで一直線にいける独学ルートを無料公開しています。
「私が今からWeb制作を独学するならこのルートで進む」というものになっており、実務で困らないレベルまで育ちます。
また、「実案件レベルの課題」が多数組み込まれているため、完走と同時に「案件応募できるだけのポートフォリオ」が自然と揃っています。
なので、他の人のロードマップに比べて「量が多め」かもしれません。
このルートに沿っていただければ、スクールに通わずとも実案件レベルまでたどり着くことができます。
基本ルートはこの記事で大丈夫です。
ロードマップを走り抜けて案件獲得・スカウト・転職した方多数
このロードマップを過去にこなされた方のコメントを多数掲載しています。
- 各課題の合格者の感想
- Web制作会社にスカウトされた人
- 転職に成功した人
- WordPress案件を獲得した人
など、様々なコメントを閲覧することができます。
その他多数のコメントは以下の記事に掲載しています。かなり勇気がもらえるものばかりです。
Web制作学習を本格的に始める前の準備編！！
ロードマップを基本にしていただきながら、その他細かいポイントを解説していきます。
検証ツールの使い方
Web制作を行う上で「検証ツール」は最低限使いこなす必要があります。使い方を復習しておきましょう！
Chromeのいれておくべき拡張機能
Web制作学習を始める前に、Chrome拡張機能をあらかた入れておきましょう！
学習効率も上がりますし、実案件でも使います。
VSCodeのおすすめプラグイン
VSCodeはWeb制作でもプログラミングでも広く使える神エディターです。
使い始める前に、必要なプラグインはあらかた入れておきましょう！
JavaScript学習方法[HTML/CSSの基礎が終わったら]
Web制作においてjQueryやJavaScriptは避けては通れないところです。
Web制作に特化したJavaScriptの学習方法や教材を出しています。
個人的にはWeb制作のjQueryやJSは実際によくあるパーツを実装する練習を積みつつ学ぶのがいいかなと思います。その意味で私の出している課題はかなり良い練習になるかと思います。
ちなみにjQueryは結構古いし重いと言われますが、現場ではまあまあ使われているので、学習しておいたほうがいいです。
便利なライブラリも多いので、複雑な動きが簡単に実装できたりします。
PHP・WordPress学習方法
WordPressはもちろん、Web制作の実務ではよく「PHPの実力不足」を痛感することになります。
その際に自分が「これはよかった！」というような学習方法や教材を紹介しています。
WordPress学習方法
PHP学習方法
WordPressを理解するには、PHPでの超簡単なシステムを作る経験（CRUD実装）を通して、仕組みを理解するのが近道です。
WordPress・PHPを動画で学ぶ
テキスト学習よりも動画学習の方が難しい分野ほど効果的です。
おすすものWordPress・PHPのUdemy講座をまとめており、これまで独学で挫折してしまった人はこちらを参考にしてみてください！
Webサイト公開練習・おすすめサーバー
実際の案件ではサイトの公開まで行うことが非常に多いです。
HTMLサイトの納品でもFTPを使っていきなり実案件でファイルをやり取りするのは怖いので、
自分のサーバーでHTML、WordPressサイトを公開する手順をぜひ練習しておいてほしいです！
以下のサイトに沿うだけで、サイトを公開するところまでいけます。
Web制作おすすめ本まとめ
これまでWeb制作関連で使ってきておすすめの本をまとめました。
Web制作がコーディング以外に多様な領域と隣接しています。
- プログラミング
- webマーケティング
- webデザイン
の分野の本をまとめています。
HTML.CSSの中級者におすすめの本
基本的なHTML.CSSはわかってきました、基礎本じゃものたりない…
そんな方におすすめなのが「プロの「引き出し」を増やす HTML+CSSコーディングの強化書」になります。
制作現場で行われている、正しい実装方を学ぶことができます。
実際のデザインカンプを見つつ実践の中で学んでいく
Web制作のコーディング実務はデザインカンプ（デザインデータ）の表示をブラウザで再現することにあります。
そのためには実際のデザインカンプからのコーディングの練習が実案件前には絶対に必要になります。
私が出している「コーディング演習課題」では
- HTML初学者からWordPressでの企業サイト構築までをこなせるようになる
こういったかなり実践寄りの課題を出しています。ポートフォリオとしての利用もOKです。
コーディングしていただいたものを提出していただき、実際に私が厳しくレビューしていきます。
この課題も私のロードマップ記事にすべて織り込まれていますが、別のロードマップやスクールなどですでに学ばれている方は、実案件前に取り組まれておくことをおすすめします。
実際の案件での事故率を下げる練習にもなります。
コーディング課題については、以下の記事に詳しくまとめました。
＼実務レベルのコーディング課題が多数／
[注意喚起]模写はしなくて良いです！
Web制作を学ぶ上で、「模写」という言葉を聞く機会が多いと思いますが、個人的に模写はいらないと思っています。
模写≠デザインからのコーディング
私のロードマップにも「模写」は採用しておりませんが、
「どういうこと？」と思われた方は、以下の記事で確認しておいたほうがいいです。
Web制作と掛け合わせられる技術を学ぶ
ここからは、少し発展的な内容になってきます。末永くWebの世界で生き残るために必要な話になります。
Web制作を始める人は多いです。そのうえで
- Shopify
- Webデザイン
- Webマーケティング
これらの知見やスキルがあれば、更に付加価値の高い制作者になることができます。
色々見てきた中で、いずれも「案件として受けられるレベルに効率よく達する」手段がデイトラだったため、紹介していきます。
Shopify
「何か一つ、Web制作と一緒に身につけると強いスキルは何か」と聞かれたら、
Shopifyでしょ!!
と答えると思います。それほど激アツな分野です。全然人が足りません。
特に「コード編集」が行える人がかなり足りないので、今がチャンスだと思います。
あと、個人的にデイトラで一番コスパ最強なのは「ShopifyEC構築コース」だと思っています。ここだけの話ですが…
＼業界最安のShopifyスクール／
Webデザイン
デザイン＋コーディングで一貫して対応できる人材を目指す
デイトラの「Webデザインコース」がかなり凄いです。最近もこんな口コミを見つけました。
Webデザインコースも実際にカリキュラムを隅々まで見て、徹底レビューをしています。
＼業界最安のWebデザインスクール／
公務員からフリーランスデザイナーになったコウダイさんにインタビュー
Webデザインコースを卒業していきなりフリーランス&フルリモートデザイナーになったコウダイさんにインタビューをしました。
コウダイさんは山形在住なので、地方に住みつつということで、夢があると思います。
Webマーケティング
制作するだけでなく、その後の運用まで面倒をみれる人材に
やはりデイトラの「Webマーケティングコース」が良いです。とにかく凄腕のメンター陣に絞られまくります笑
本気でマーケターになりたい方におすすめです。
最近はマーケティング独立サポートも行っているようです。
＼業界最安のWebマーケスクール／
Web制作学習でよくある質問
私は挫折率や効率性の面から、「デイトラ」がプロのWeb制作者になれる最善策だと考えていますが、独学で案件獲得や転職された方もいて、その方のコメントは以下の記事に乗せています。https://shogo-log.com/brave-messages/
ただ、スクールにいこうが、独学だろうが、プロとしてお金をもらって働く以上、どこかで厳しい経験をすることは避けられません。決して稼ぐのが楽ではないことを認識しておけば、挫折率は下げられると思い、お伝えしておきます！
私の失敗談はこちら→https://shogo-log.com/miss-recovery/
まずはコーディングに集中したほうがいいです。
まずは戦えるポートフォリオを揃えて、案件獲得してコーディングの経験と信頼値を積みましょう。
https://shogo-log.com/good-portfolio/
そうすれば、おのずとコーディング以外もまかされるようになったりします。以下の記事をみればイメージしやすいかと↓
https://shogo-log.com/good-example-webworker/
Web制作オワコンについての私の見解は以前に熱弁しているので、そちらをご覧ください。今コーディングを始めても、十分に変えの効かない人材にはなれます！↓
https://shogo-log.com/web-no-owakon/
私のロードマップの上級編まで来たら、とりあえず大丈夫かと（余裕あればPhotoshop編までしてほしいですが）
ロードマップ→https://shogo-log.com/after-progate/
上級編→https://note.com/samuraibrass/n/n9faac1c35977
Photoshop編→https://note.com/samuraibrass/n/n779ccd15e0ae
早い人だと初案件まで3ヶ月程度の人もいますが、一般的には半年とかだと思います。これはロードマップ記事の「一日に何時間確保できるか」という「進行ペース」に依存します。
他のまとめ記事一覧↓
Web制作関連の有益記事を以下にまとめています。
これらの内容を確認しておくだけでも、強みになります。
Web制作案件獲得方法【完全まとめ】
Web制作実案件の進め方・流れ【完全解説】
Web系の仕事で役立つ便利ガジェット・サービス
HTML初心者からWordPress実案件レベルまでのコーディング演習課題をnoteで公開しています。
- デザインカンプからのコーディング
- プロによる2回の表示確認特典
- ポートフォリオとして使用OK
初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります！
基本的にまとめて購入していただくとかなりお得になります。
コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください！！
＼課題の購入はこちらから／
＼課題の詳細はこちらから／
独学方法についても後述しているのでご安心ください。