この記事では、現役のフリーランスWEBエンジニアの私が考えに考え抜いた、独学で完全未経験から最速で稼ぐ事を目的とした独学ロードマップを紹介していきます。
これからWEB業界に就職や転職をしたい方、フリーランスで稼いでいきたいという方は必見です！
今だからわかることですが、私が駆け出しの時に勉強していた教材や書籍などは、初学にはあまり必要ない無駄な内容が入っていたり、たまに目にするロードマップ記事は、完走までに時間がかかりそうなものがとても多いイメージでした。
なので、今回は無駄なインプット（勉強）をできるだけ省いて、目的別（就職転職orフリーランス）に沿って一番効率が良いだろうと思った学習方法をお伝えしていきます。
- この記事を読むことで解決すること
- WEB制作で学習するべきスキル（目的別に解説）
- 最初は学習しなくてもいいスキル（最終的には覚えよう）
- WEB制作学習にかかる費用
- WEB制作学習にかかる期間
- 効率よく学習を進めるためのコツ
- WEB制作学習を始める前に
- WEB制作独学ロードマップ「HTML&CSS編」
- WEB制作独学ロードマップ「jQuery（JavaScript）編」
- WEB制作独学ロードマップ「WordPress編」
- WEB制作独学ロードマップ「デザイン編」
- WEB制作独学ロードマップ「ポートフォリ編」
- 就職や転職をするためのアドバイス
- フリーランスで案件を獲得するためのアドバイス
- WEB制作と並行してやっておこう
- 実務でも使える便利な書籍を紹介
- まとめ
この記事を読むことで解決すること
この記事を読んでいる方は、以下のようなことを思っているはずです。
- ・フリーランスとしてしっかりと稼げるWEB制作スキルがすぐに欲しい
- ・WEB制作を効率よく独学したいけど、やり方が全然わからない
- ・完全未経験でもWEB業界に就職や転職がしたい
- ・効率よくWEB制作スキルを身につけて副業で稼ぎたい
安心してください、全て可能です。
このロードマップは筆者の私が独学2ヶ月で就職や案件獲得を達成した経験に加え、現役のエンジニアという立場からリアルな現場を見ている上で考えた、効率の良い学習方法になります。
これをこなせば、WEB業界への就職や転職、フリーランスで案件を獲得することが可能ですので、しっかりと最後まで読んで、参考にしてみてください。
WEB制作で学習するべきスキル（目的別に解説）
まずはWEB制作で学習するべきスキルの一覧を目的別に確認してみましょう。
就職や転職を目指す場合
就職や転職を最速で目指す場合の必須習得スキルは以下です。
- ・HTML
- ・CSS
- ・JavaScript
- ・jQuery
- ・デザインスキル
フリーランスを目指す場合
フリーランスで案件獲得を最速で目指す場合の必須習得スキルは以下です。
- ・HTML
- ・CSS
- ・JavaScript
- ・jQuery
- ・PHP
- ・WordPress
- ・デザインスキル
見てわかる通り、フリーランスの方が覚える事が多いので時間がかかります。
最初は学習しなくてもいいスキル（最終的には覚えよう）
こちらは最終的には覚えていただきたいですが、一旦、覚えなくても問題ないスキルになります。
- ・Sass(SCSS)
- ・Git
- ・SEO
以下、理由を解説します。
Sass(SCSS)
Sass(SCSS)はCSSを効率的に描けるようにしたものですが、SassファイルにそのままCSSを書いても普通に反映されるので、CSSさえ覚えていればまず問題ないです。作業効率を上げたくなったら「Dart Sass」を覚えてみましょう。
Git
Gitはチーム制作の現場でない限り使うことはあまりないので、覚える必要はないです。もし、就職先や転職先がチーム制作だった場合はおそらく使うので、ProgateのGitのレッスンで基礎知識をつけておけば問題ありません。
SEO
SEOに関しては知識があった方が良いかもしれませんが、初心者はSEOを意識しながらの構築は難しい（時間がかかる）ので、一旦覚えなくて良いです。まずは目標物の制作スピードを上げることを意識しましょう。
WEB制作学習にかかる費用
次に学習にかかる費用がこちらになります。
- ・Progate有料プラン（税込1,078円/月）
- ・Adobeコンプリートプラン（税込6,480円/月※正規購入の場合）
- ・WordPress学習教材（税込17,800円※おすすめの教材の場合）
- ・サーバー、ドメイン代（1000円〜2000円程度※契約するサイトによる）
まず、Progateは言語習得（HTML、CSS、JavaScript、jQuery）に必要な学習サイトの費用です。
しっかりと基礎が学べるので、必ず無料プランではなく有料プランで学習しましょう。
次にAdobeコンプリートプランはデザインを学ぶ際に必要になります。
使用するソフトはPhotshop、Illustrator、XDです。それ以外にもWEB制作に使えるソフトが全て入ったプランになるので、できればコンプリートプランの契約をお奨めします。
こちらは、割引セールでたまに安くなってるので、その時に購入するのが良いです。学生の場合はさらに安くなります。
WordPressの学習教材に関しては、私が一番おすすめする教材の料金になります。詳しくは学習項目の「WordPress編」で紹介しますが、もっとコストを抑えたい方向けにおすすめの書籍もありますので、そちらでも学習可能です。
サーバーとドメインに関しては必須ではありませんが、ご自身のサイトをネットに公開したい場合は必要になってきます。就職や転職、案件獲得の際にスキルシートとしてポートフォリオサイトを見せた方が良いので、契約しておく事を推奨します。おすすめのレンタルサーバーは「ポートフォリオ編」で紹介します。
WEB制作学習にかかる期間
実際に学習を終えるまでの期間ですが、目的別で変わってきます。
就職や転職を目的とした学習の場合は、目安として2〜4ヶ月程度で可能です。
フリーランスとして案件を獲得する場合は、目安として4〜6ヶ月程度で可能です。
ちなみに学習時間は1日平均3〜4時間程度を想定しています。
PHPとWordPressの学習がある分フリーランスの方が少し時間がかかると思いますが、あくまで目安なので、個人のペースで学習していけば問題ありません。
効率よく学習を進めるためのコツ
では、効率よく学習を進めるためのコツをお伝えしていきます。
暗記は不要！概念を理解しよう
初心者にありがちなのが「コードの暗記」です。これは無駄なのでやめましょう。
学習を進める上で大切なのは「基礎概念」を理解することです。この言語はどういう仕組みでどういう事ができるのかという概念を理解しておかないと、いざ実践に入った際に、そもそも何をすればいいのかがわからなくなります。
コードはググればいくらでも答えが出てきますので、学習中は暗記ではなく概念理解を意識しましょう。
学習毎にアウトプット（模写）をしよう
インプット（学習）ばかりでは満足するだけで、スキルは身につきません。インプット（学習）をした後は必ずアウトプット（実践）を挟むようにしましょう。そうする事で、予習や復習が自然とできて、より体感的にスキルが身についていきます。
Google検索を活用しよう
正直、これが一番大事です。何かわからない事があればとにかくググりましょう。学習を進めていると、必ず詰まります。特に模写サイト制作の時はわからない事だらけになると思いますので、Google検索で答えを見つけ出す練習をしておきましょう。
これは実務でもかなり役立つスキルになりますので、必ずやってください。
困ったときは質問サイトやメンターを利用しよう
どうしても解決できない事が出てきたら、質問サイトやメンターを利用してみましょう。
おすすめの質問サイトは以下です。
メンターを探すのはMENTAというサイトがおすすめです。
※メンター料が別途かかります。
ただし、質問サイトもMENTAも答えが返ってくるまでに結構時間がかかったりする場合があるので、効率はあまりよくありません。どうしても解決できない時にだけ利用しましょう。
WEB制作学習を始める前に
学習毎に必要なソフトを知ろう
必要なソフトとしては以下です。
- ・VScode（ソースコードエディタ）
- ・Photoshop（Adobe）
- ・Illustrator（Adobe）
- ・XD（Adobe）
VScodeはサイトを制作していく際に使用するおすすめのソースコードエディタです。無料エディターの中では、VScodeが一番使いやすくGoogleに情報が落ちているので、こちらにしましょう。
ちなみに、Adobeのコンプリートプランを購入すれば「Dreamweaver」というエディターが使用できるので、そちらでも良いです！VScodeより少し重いですが、機能が優れてて、とても使いやすいエディターになります。
あとの3つはデザインで使用するAdobeのソフトになります。それぞれの用途は「デザイン編」で解説します。
Progate(有料プラン)へ登録しよう
学習を始める前にProgateの有料プランへ登録しましょう。月額1,078円でProgateにある全てのレッスンが受けれるようになりますので、コスパ最強の学習サイトになります。
ちなみに動画で学習したい場合は「ドットインストール」というサイトもおすすめです。そちらも有料プランは同じくらいの値段ですが、Progateは手を動かして体感的に学べるので、今回のロードマップではProgateで学習することを前提に進めていきます。
WEB制作独学ロードマップ「HTML&CSS編」
では、早速学習を始めていきましょう！最初はHTMLとCSSを以下のステップで学んでいきましょう。
1、ProgateのHTML&CSSレッスンをやろう
まずはProgateのHTML&CSSレッスンを「HTML&CSS Flexbox編 」まで学習しましょう。
学習時間の目安は20時間くらいです。
2、上級編で制作したサイトをローカルで模写してみよう
次に上級編で制作したサイトをスクリーンショットを撮って、ローカルで模写をしてみましょう。
ローカルでページ制作を行う方法はProgateの「HTML & CSS の開発環境を用意しよう！（macOS用）」に記載がるので、その通りに進めれば問題ありません。Windowsの場合でも同じような方法でできるはずなので、参考にしてみましょう。
3、iSaraを模写してみよう(jQuery実装はしない)
次にiSaraというサイトを模写してみましょう。iSaraはWEB制作学習中の模写サイトとして一番有名なサイトになります。
おそらくですが、皆さんここが最初の難関です。必ずどこかで詰まりますので、しっかりとGoogle検索を活用して8割〜9割程度似せたサイトを制作してみましょう。
ちなみに、iSaraはjQueryの実装がいくつかあります。ただ、そこはまだ学習していないので、一旦HTMLとCSSでレイアウトだけ制作して、動的実装は飛ばしてOKです。
4、デベロッパーツール（検証）でコードを見比べよう
最後に答え合わせではないですが、デベロッパーツールの検証を使ってiSaraのコードと自分のコードを見比べてみましょう。そうする事で、「あ、ここはこういう構築でもできたのか」とか、「ここはこういうCSSを当てればよかったのか」など、気付けることはいっぱいあると思いますので、見比べてみましょう。
検証ツールの使い方は、Progateのこちらの記事を参考にしてください。
WEB制作独学ロードマップ「jQuery（JavaScript）編」
次のステップとしてJavaScriptとjQueryを学んでいきましょう。
ProgateのJavaScript（ES6）レッスンをやろう
まずはProgateのJavaScriptのES6のレッスンを「JavaScript VII 」まで、一通り学びましょう。おそらくWEB制作学習で一番最初に挫折を感じる言語がJavaScriptです。HTMLやCSSのマークアップ言語と違って、プログラミング言語なので難しく感じるかもしれませんが、概念理解だけ理解しておけば一旦は問題ないので、レッスン通りに進めましょう。
ちなみにES6とES5というのはJavaScriptのバージョンで、ES6が最新の記述になるので基本はこちらだけ学習していれば問題ありませんが、次のステップのjQueryレッスンで使われる記述がES5なのと、実務で入った現場のJavaScriptの記述がES5だったりすることはよくあるので、ES5も軽く違いを確認する程度で学んでおくと良いです。
ProgateのjQueryレッスンをやろう
次にProgateのjQueryレッスンを「jQuery 上級編 」まで学んでいきましょう。jQueryはWEBサイトでよく使用する動的実装を簡単に行うことができるJavaScriptのライブラリになります。
近年、jQueryはオワコンと言われていますが、全然そんなことは無く、おそらく現存するサイトのほとんどは、まだまだjQueryを使用してるので、実務をこなしていくなら学習すべき必須のライブラリになります。
iSaraの動的実装（jQuery実装）部分をやってみよう
jQueryまで学習したら「HTML&CSS編」で模写したiSaraページの動的実装をjQueryで実装してみましょう。実装難易度はそんなに高くないので、もし色々な実装を試してみたいという場合は、CodestepのこちらのデモサイトがjQuery実装の練習になりますので、模写してみましょう。
WEB制作独学ロードマップ「WordPress編」
フリーランスで案件獲得を目指している方は、こちらも学んでいきましょう。就職や転職が目標の方は飛ばしてOKですが、就業先の幅は広がりますので学びたい場合は学習しても問題ありません。
WordPress学習におすすめの教材で学んでみよう
WordPress学習教材は色々ありますが、私のイチオシはアキユキさんという方が運営している「unazuki」というオンライン学習教材です。
お勧めする理由はレッスンの多さと、概念理解からきちんと学べること、さらにWordPress制作で使えるPHPを学べるのでWordPressで使用しないPHPの無駄なスキルを学ばなくて済みます。しかもかなりの優良教材なのに税込17,800円は正直安すぎます。
スクールや同じような学習教材でも同じくらいのボリュームなのに値段だと数十万はします。それを考えると購入する価値は大いにあると思います。
こちらの学習教材を終える事ができれば、普通に実務レベルのWordPressスキルが身に付くと思います。
「それでも17,800円はちょっと・・・」という方は以下の書籍が基礎からオリジナルテンプレート作成までの方法がわかりやすく記載されているので、こちらに沿って学習してみるのも良いと思います。
WordPress学習の目標は、オリジナルテーマを作成できるまでです。ここまでできたら終了して問題ないでしょう。
WEB制作独学ロードマップ「デザイン編」
どんな現場でも、コーディングをする前はデザインをします。そのデザインデータを編集したり、画像をリサイズしたり、簡単なサムネイルを作ったりと、意外とデザインスキルが要求される場面は多いです。なので、最低限のデザインスキルは身につけておきましょう。
最低限のデザインスキルを学ぼう
デザインで使用される事が多いソフトが以下の3つです。
- ・Photoshop（Adobe）
- ・Illustrator（Adobe）
- ・XD（Adobe）
それぞれの使用用途は大体こんな感じです。
- ・Photoshopは画像加工に使用される事が多い
- ・Illustratorはイラスト制作に使用される事が多い
- ・XDはデザインカンプとして利用される場面が多い
学習方法はAdobeの公式チュートリアルで、ツールの使い方を理解する程度で最初は問題ありません。ツールの使い方がわかったら、あとは既存サイトのデザインや、バナーなどを模写してみましょう。バナー制作はYouTubeのサムネが勉強になるので、好きなYouTuberさんのサムネ模写をいくつかやってみると良いです。
ちなみに、XDはチュートリアルを見なくても大体わかるくらい体感的に理解できる仕様になっています。
WEBデザインをもっと学びたいという方は、chot.designという学習サイトがあるので、こちらで学習を進めていくのがおすすめです。
WEB制作独学ロードマップ「ポートフォリ編」
ついに最後のステップです。ご自身のポートフォリサイトを制作していきましょう！
ポートフォリオページを自作してみよう
最初に言っておきますが、ポートフォリオサイトは絶対に自作しましょう。理由は以下の3つです。
- ・就職や転職先、案件先のクライアントに自分のソースコードを見てもらう事ができる
- ・ポートフォリオサイトの構造や実装について質問があった際に返答しやすい
- ・自分のスキルをしっかりと見て判断してもらえるため、現在のスキルに見合った現場が見つかりやすい
たまに、ネットに落ちているポートフォリオサイトのテンプレートを使用している方を見かけますが、意味がないので絶対にやめましょう。
Googleで「WEB制作 ポートフォリオ」とかで検索すれば色々出てきますが、制作難易度が高いサイトが多いので、あくまで参考にする程度で確認してみてください。
制作方法はローカル制作と大体同じなので、模写サイトを制作した時と同じ手順で、ページを構築していきましょう。
ポートフォリオに記載するべき内容
最低限ポートフォリオに記載したい項目は以下です。それぞれ解説します。
- ・プロフィール
- ・スキル一覧
- ・制作物一覧
- ・お問い合せ
プロフィールではご自身の経歴も簡単に載せておくと履歴書代わりにもなるので記載しておきましょう。
一番大事なのはスキル一覧で、次のような内容を載せると良いです。
- ・習得した言語やソフト
- ・どんなスキルを持っていて何ができるのか
- ・一番の強みは何か（例：コーディングが得意で、このくらいのボリュームだと〇〇時間で実装できます。）
- ・自分のポートフォリオサイトで意識したこと
この辺りがあれば問題ないと思います。
制作物一覧ですが、皆さんはまだ実績がないと思いますので、模写したサイトを載せておきましょう。できればスクリーンショットの画像だけでは無く、実際にクリックしたらサイトに飛べるようになっていると完璧です。
お問合せは、制作しておくとそこから連絡がきたりするのでなるべく入れておきましょう。LINEやSNSへの流入でも良いですが、できればメールのコンタクトフォームを制作するのが無難です。
自作したポートフォリオサイトをネットに公開しよう
最後に制作したポートフォリオサイトをネットで公開して、先方がサイトをURLアクセスで見れるようにしておきましょう。
サイトを公開するにはレンタルサーバーの契約とドメインの取得が必要になります。簡単にサーバーとドメインついて解説しておきます。
- ・サーバー（データを収める箱のようなもので、ここにサイトデータを格納します）
- ・ドメイン（サイトの住所を表すものです。例：.com、.jp、.co.jpなど）
おすすめのレンタルサーバーはXserverです。理由は、ドメインもXserver内で取得でき、最低プランでも回線が優秀なのでサイトが重くなりにくいからです。また、WordPressも簡単インストールができて、ネットにも一番情報が落ちているレンタルサーバーなので、こちらを選んでいれば間違いはないです。
それ以外では以下のようなレンタルサーバーもおすすめなので、好みがあればお好きなレンタルサーバーで契約しましょう。
サーバー契約とドメイン取得に関してはGoogleで調べれば簡単にできると思いますので、参考の記事を探してやってみましょう。
そちらが終わったらサーバーにデータを格納して、自分のポートフォリオサイトがきちんとURLでアクセスできるか確認して、表示されれば全ての学習ステップ完了です！！お疲れ様でした。
就職や転職をするためのアドバイス
在宅勤務が多い求人サイト一覧
WEB制作スキルが身についたらやはり在宅でお仕事をしたくなりますよね。以下の求人サイトは在宅勤務の募集が多い求人サイトなのでおすすめです。
オススメの雇用形態
基本は正社員で良いと思いますが、最終的に独立したいと考えている場合はアルバイトや派遣という形でも良いと思います。実績さえついてしまえばフリーランス案件は取りやすくなるので、雇用形態はあまり関係ないです。
書類選考や面接で落ちないようにするコツ
書類選考に関しては、求人情報をしっかりみましょう。自分のスキル以上のことを求められるような企業だと落とされやすいです。しっかりと業務内容や必要スキルを確認して応募するようにしてみましょう。
面接に関しては、多少のハッタリをかましていきましょう。例えば、「〇〇のような実装は可能ですか？」と聞かれた場合、「できない」と答えるのでは無く、「調べながらであれば対応可能です。」という感じで、Google検索をして実装できそうなことであれば、可能と答えてしまいましょう。
実際、WEB制作に限らず私もやったことのない仕事をお願いされた事が何度もありますが、ほとんどがググって解決できました。
ちなみに、筆者の私は面接で落ちたことが実は一度もありませんので、常にこのハッタリ理論で面接選考で合格をいただいていたのでお勧めです。
フリーランスで案件を獲得するためのアドバイス
フリーランスで案件獲得をするためには、最初はクラウドソーシングサイトで営業をするか、フリーランスエージェントに登録して案件を紹介してもらうのが一般的です。
以下の記事では、WEB制作の案件獲得におすすめのサイトを記載していますので、是非、読んでみてください。
案件を獲得するためのコツ
最初はとにかく営業しましょう。実績がないので、自分のポートフォリオをうまく活用して、クライアントが喜びそうな提案を交えて案件に応募してみると良いと思います。SNSなどで営業してみるのも一つの手なので、幅広く営業して案件獲得をしていきましょう。
就職や転職を挟むという道もある
実はこれが意外と稼げるフリーランスへの近道だったりします。実際、フリーランスで実績がないと高単価の案件獲得は正直言ってかなり難しいです。最初から「ガッツリ稼いでいきたい！」と思ってもなかなか良い案件が見つかりません。
まずは、アルバイトや派遣でもいいので、一度就職や転職をして現場経験の実績を半年〜1年ほど積むとかなり有利になります。高単価を狙えるフリーランスエージェントも実績がないと案件を紹介してもらえなかったりするので、この方法が一番無難で、稼げるフリーランスへの一番の近道ではないかなと思っています。筆者の私も、このステップで独立（フリーランス）しています。
WEB制作と並行してやっておこう
ブログを運営しよう
ブログはWEB制作とかなり相性が良いので並行してやっておくと良いでしょう。ブログを運営する事で得られるメリットは以下です。
- ・SEOの知識がつく
- ・WEBマーケティングが学べる
- ・セールスライティングができるようになる
それぞれ簡単に解説していきます。
SEOは「Search Engine Optimization」の略で「検索エンジン最適化」といってサイトが検索上位表示されるようにする技術です。これはWEB制作を極めていく上で大変重要なスキルになります。ブログを運営していると自然とSEO対策を意識していくので、実際のWEB制作案件のSEO対策などにも非常に役立ち、成果の出るWEBサイトを制作できるようになります。
WEBマーケティングは特定のWEBサイトへの集客を促し、商品やサービスなどの購入へつなげるマーケティング技術で、先ほどのSEOもWEBマーケティング技術の一つになります。
こちらもWEB活用には必須の重要なスキルで、WEBマーケティングが身につけばECサイトやサービスサイトの売上に大きく貢献できるため、クライアントへマーケティングも視野に入れた運用を提案できるWEB制作者は、かなり貴重な人材として、どの現場でも活躍できるようになります。
また、ご自身で事業をやっていく上でも売上げを伸ばす事ができるようになるので、ブログを運用しながら是非学んでみましょう。
セールスライティングは商品やサービスを購入してもらうように行動してもらうための文章を書くスキルです。
ブログでセールスライティングを意識して記事を書いていると、自然とそういった文章や構成が身に付いてきます。これはWEB制作にも応用できて、特にLPを制作する際に大いに役立ってくれます。LPの文章をセールスライティングの構成で制作すると成約率（CVR）が上がり、売り上げに大きく貢献できるため、できるようになっておくと便利です。
SNSで発信をしよう
SNS発信を並行してやる事で得られるメリットは以下です。
- ・フォロワーで権威性を高められる（インフルエンサー）
- ・集客ツールとして活用できる
SNSで有益な情報発信をおこなっていると、自然とフォロワーが増えてきます。
そうなってくると自分自身の権威性を高める事ができ、今まで案件を獲得するために営業をしていたのが、営業をしなくても仕事を依頼されるようになってきます。これはWEB制作で稼いでいくためには大きな利益に繋がるので、どんどん有益な情報を発信をしていきましょう。
また、集客ツールとしても利用できるため、自分自身で事業を立ち上げた際の広告ツールとしても非常に便利です。
他にもSNSはメリットが色々ありますので、是非、うまく活用をしてみましょう。
実務でも使える便利な書籍を紹介
現役エンジニアの私が、実務で活用していた便利な書籍がいくつかありますので、紹介しておきます。どれも初心者というよりは実務で活用するレベルの書籍になりますので、実際の現場や案件でスキルを伸ばしていきたい方は是非購入してみてください。
まとめ
最後までご覧いただきありがとうございます。
4年前までは私も完全な業界未経験者でしたが、WEB制作を独学して就職し、1年の実務を経て独立しました。
今では最高月収80万、平均月収50万以上を稼ぐフリーランスエンジニアとして仕事ができており、本当にWEB制作を学んで良かったと心から思っています。皆さんも是非WEB制作を学んで人生を変えていきましょう！！
ちなみに当時私が行った学習方法は全て以下の記事で解説していますので、気になった方は読んでみてください。
