こんにちは、現在Webフリーランスエンジニアとして4年ほど活動しているしょーごと申します。
私はこれまで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学習方法
Web制作においてJavaScriptは避けては通れないところです。
Web制作に特化したJavaScriptの学習方法や教材を出しています。
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制作を学ぶ上で、「模写」という言葉を聞く機会が多いと思いますが、個人的に模写はいらないと思っています。
模写≠デザインからのコーディング
私のロードマップにも「模写」は採用しておりませんが、
「どういうこと？」と思われた方は、以下の記事で確認しておいたほうがいいです。
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/
デザインとかShopifyとか、マーケティングって、すぐ必要ですか？それともまずはコーディングに集中したほうがいいですかね？
まずはコーディングに集中したほうがいいです。
まずは戦えるポートフォリオを揃えて、案件獲得してコーディングの経験と信頼値を積みましょう。
https://shogo-log.com/good-portfolio/
そうすれば、おのずとコーディング以外にもまかされるようになったりします。以下の記事をみればイメージしやすいかと↓
https://shogo-log.com/good-example-webworker/
Web制作を勉強していると、オワコンみたいな話を聞いたりして、実際NoCodeやAIでコーディングがいらなくなるみたいな話を聞いて、学習していて不安になります。
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系の仕事で役立つ便利ガジェット・サービス
HTML初心者からWordPress実案件レベルまでのコーディング演習課題をnoteで公開しています。
- デザインカンプからのコーディング
- プロによる2回の表示確認特典
- ポートフォリオとして使用OK
初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります！
基本的にまとめて購入していただくとかなりお得になります。
コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください！！
＼課題の購入はこちらから／
＼課題の詳細はこちらから／
独学方法についても後述しているのでご安心ください。