「Web制作を独学で習得したい。どうやって勉強していけばいいんだろう？」
「そもそも独学でWeb制作は習得できるのかな…？」
あなたはこのような悩みをお持ちではないでしょうか？
「個人で稼げるようになりたい」、そう考え、Web制作を始める人はたくさんいます。いまの時代、会社員として仕事をしても、給料は上がらず、逆に税金や社会保険の支払いは増えるため、手取りはどんどん減っていきます。
その上残業ばかりの日々で、毎日仕事でストレスを抱えることにもなる。
そんな生活をしていれば「個人の力でお金を稼いで、自由に生きたい！」と思うのは、至って普通のことだと思います。
その点Web制作は、個人でも稼ぎやすいです。一度スキルを身につけてしまえば、PC1台で仕事ができるため、時間や場所に縛られることなく、ストレスを感じずに働くこともできます。
とはいえ、Web制作は果たして「独学」でも習得できるのか、気になりますよね。
そこで本記事では、Web制作の独学に必要な情報を全て詰め込みました。
本記事を読めば、Web制作を始める上で必要な情報は全て把握できますよ。
目次
Web制作は独学でも習得できるのか？【可能です】
結論、Web制作は独学でも習得は可能です。
あなたがいま完全未経験でも、Web制作を学び、Web制作を仕事にすることも可能です。
とはいえ、簡単ではない
とはいえ最初にお伝えしておくと、独学は簡単ではありません。
なぜなら独学の場合、挫折率が高いからです。
事実、私がこれまで多くの学習者を見てきた中では、Web制作を独学で勉強するも、挫折してしまった方の方が圧倒的に多かったです。割合でいうと、だいたい80〜90%くらいは挫折していると思います。
なので、「誰でも楽に習得できますよ！」なんてことは言えないですし、むしろかなり大変だと思います。なので、まずはその現実を知ることが大事です。
正しい方法やツールを使い、覚悟を持って臨むべき
それでも、正しい方法やツールを使って取り組んでいけば、独学でもスキル習得できます。
だからこそ、正しい方法やツールが何かを知り、覚悟を持って臨むことが必要です。
その方法を、本記事で紹介します。
「10人中9人くらい挫折するのかぁ。やっぱり独学だと厳しいかも…」
と不安になった場合は、もっと手軽に学べる方法も記事後半で書いていますので、参考にしてみてください。
「こちらから」記事後半の該当箇所に飛べます。
Web制作の独学でおすすめな学習サービス
それではここから、Web制作の独学の詳細に入ります。
まずはWeb制作の独学で役立つ「学習サービス」をまとめて紹介しておきます。
結論、以下のサービスが、独学でWeb制作で学ぶ際におすすめです。
上記の通りです。
3つとも基本有料だが、基礎部分は「無料」で利用できる
これらのサイトは基本有料ですが、基礎部分であれば「無料」で利用できます。
なのでまずはこういったサイトを使いながら、Web制作の基本に触れてみると良いですね。
その他おすすめのサイトは「【無料あり】Webデザイン独学で使えるおすすめ勉強サイト7選【現役Webデザイナーが厳選】」でも紹介しています。
Web制作を独学で勉強するロードマップ
ここからはWeb制作を独学で勉強するロードマップを紹介します。
Web制作で必要なスキル
まず初めにWeb制作で必要なスキルを整理しておきましょう。
結論、Web制作をする際には、以下スキルがあればOKです。
✔︎ HTML/CSS
✔︎ JavaScript/jQuery
✔︎ WordPress
これらに加えて、Webデザインの基本原則（デザインの原則や、PhotoShopなど）がわかれば、Web制作の仕事は一旦できます。
以上を踏まえて、今後取るべきステップは次の通りです。
Web制作のロードマップ
それぞれ解説しますね！
1. HTML/CSSを勉強する
まず最初は「HTML/CSS」を勉強します。
HTML/CSSって？
Webサイトを作るベースとなるものです。Web制作をする際に必ず必要なスキルです。
HTML/CSSでできることは以下の通りです。
- HTML：Webサイトのテキストや画像、リンクを記述することができる
- CSS：HTMLで作ったWebサイトの骨格に、配色やサイズ変更をすることができる
まず、Webサイトのテキストや画像、リンクを記述するものがHTMLです。一方、HTMLで作ったものに色を付けたり、サイズを変更するものがCSSです。
HTML/CSSの勉強方法
勉強方法は前述した独学サイトの「Progate」や「ドットインストール」で学習できます。内容が重なっていることが多いので、どちらか一つを選んで学習すればOKです。
また独学サイトではなく「本」で学ぶこともできます。本も1冊を購入し、それを徹底的にやり込んで自分のスキルにしていくと良いです。
なお本で勉強する場合は、以下の本がおすすめです。
1冊ですべて身につくHTML & CSS とWebデザイン入門講座
HTML/CSSの基本から応用まで、一通り学べる本です。HTML/CSSを体系的に学べるだけでなく、1つのWebサイトを作りながら、Web制作の流れを一通り理解することができます。
HTML5&CSS3デザインブック
こちらはHTML/CSSの基本だけでなく、実践まで学べる本です。1冊でHTML/CSSを学べるので、この本を買って勉強してもOKです。
2. JavaScript/jQueryを勉強する
次に「JavaScript/jQuery」を勉強していきましょう。
JavaScriptとjQueryはそれぞれ次の通りです。
- JavaScript：Webサイトに動的な動きをつけることができる言語。HTMLとCSSで作ったWebサイトを、よりリッチなデザインにする際に使える
- jQuery：JavaScriptのフレームワーク。JavaScriptは少し難易度が高いので、もっと手軽にサイトの動きを出したいならjQueryでもできる
こんなイメージです。一言で言えばWebサイトに動きをつけるものがJavaScriptやjQueryです。
基本学ぶものは「JavaScript」で良いと思いますが、もっと簡単に、手軽にサイトに動きをつけたい場合は、jQueryを学んでみると良いです。
JavaScript/jQueryの勉強方法
JavaScript、jQueryともに「Progate」や「ドットインストール」で学べます。
またこちらも「おすすめ本」を挙げておきますね。
確かな力が身につくJavaScript「超」入門
JavaScriptの基本が学べる本です。初心者だとわかりづらいポイントも、丁寧に説明されていたことが印象的でした。初心者の入門にぴったりです。
作りながら学ぶjQueryデザインの教科書
こちらはjQueryの基本が学べるおすすめ本です。実用的なサンプルを作りながら学んでいくため、手を動かしながらjQueryを習得することができます。
3. Webデザインの基本を勉強する
Web制作の仕事をする場合は「Webデザインの基本」を理解しておく必要があります。
なぜなら、世の中で求められる良いWebサイトは、ユーザー目線に立った「デザイン面」も優れているからです。
Webデザインの原則は本で学ぼう
の基本原則などは「本」で学ぶと良いです。良著があるので、紹介しておきますね。
ノンデザイナーズ・デザインブック
ノンデザイナーズ・デザインブックはデザインの原理原則が学べる良著です。初心者でもデザインの原則をわかりやすく学べるため、私もWeb制作・デザインを始めた頃にとても役立ちました。これからWeb制作を始める全ての初心者におすすめです。
なるほどデザイン
こちらはノンデザイナーズ・デザインブックで学んだデザインの原則を、具体的に日常のデザインへと落とし込む際に役立った本です。内容としては「目で見て楽しめる形で」、デザインの原則や基本を学ぶことができます。
デザインはWebサイトをトレースしながら勉強がおすすめ
さて、Webサイトのデザインは、WebサイトのデザインをPhotoShopなどのデザインツールでトレースしながら学ぶことがおすすめです。
PhotoShopの使い方は初心者向けのものがたくさんありますが、迷ったら以下の本がおすすめです。
PhotoShopしっかり入門
上記本はPhotoShopの入門編なので、PhotoShopをまだ使ったことがない完全初心者におすすめです。この1冊でPhotoShopの使い方を学び、次に紹介するトレースを行っていきましょう。
ここまでPhotoShopについて説明しましたが、Web制作に必ずしもPhotoShopは必要ありません。なぜならPhotoShopはWebサイトの画像部分を作成することがメインだからです。使わなくてもサイトを作ることはできます。
とはいえ、現場ではWebサイト制作に関わる大半の人が使っています。そのためここで学習しておくと良いです。
トレースのやり方
実際のWebサイトのトレースの進め方は下記の通りです。
- プロのWebデザインに多く触れてみる
- そのサイトをトレースして作ってみる
やるべきことは上記2つです。
まずはプロのデザインに多く触れていきましょう。
この際にただぼーっとみるのではなく、ヘッダーや見出しデザイン、フォント、フッターなどがどのように作られているか、一つ一つの構成を見ながら、その意図を考えていくことがおすすめです。
そうやって質の高いサイトに触れていくと、あなた自身の「デザインの引き出し」が増えていきます。この引き出しの多さがあると、良いデザインをどんどん生み出せるようになっていきますよ。
さらに詳しいやり方は上記引用先記事でも書いているので、参考にしつつトライなさってください。
トレースで役立つプロのWebサイト集
実際にトレース対象とする「プロのWebサイト」は以下にあげておきますね。
I/O 3000
I/O 3000は国内外問わず、様々なWebサイトが掲載されているサイトです。
良質なデザインのWebサイトがたくさんあり、プロのWebデザインに多く触れるにはぴったりです。
Awwwards
Awwwardsは海外のWebサイトです。センスの良いWebサイトが多数掲載されており、世界で注目されているWebデザインを学べます。
現代デザイン
現代デザインも様々なWebデザインが掲載されているサイトです。
特に最新のWebデザインを学べるサイトなので、最近の流行やトレンドを掴む際にも役立ちます。
以上のサイトから気になるWebサイトを選び、前述した方法でトレースしてみましょう。
4. WordPressを勉強する
世の中の大半のサイトはWordPressで作られています。
そのためWordPressのスキルも学んでおくと、Web制作案件の多くに対応できるようになりますり。なので、Web制作であればWordpressも学ぶことをおすすめしています。
WordPressの学習方法
こちらは「Udemy
」にWordPressサイト構築の教材があるので、購入して利用してみると良いです。
また「本」をベースに学習することができます。おすすめ本は以下です。
本当によくわかるWordPressの教科書
こちらはWordPressの基本が学べる本です。こちらを1冊やり込めばOKです。
5. 実際にWebサイトを作ってみる
学んだことを生かし、Webサイトを作ってみましょう。
作るならWordpressのサイトがおすすめです。案件数が多いため、できるようになれば仕事につながりやすいからです。
もちろん最初は大変ですが、購入した本を参考にしつつ、1つのサイトを頑張って作ってみましょう。
実際に一つやり遂げれば、2回目以降はグッと楽になります。最初の坂が一番厳しいからこそ、頑張って乗り切ることが必要ですね。
以上がWeb制作の独学のロードマップです。
これらの項目をこなしていけば、あなたもWeb制作のスキルを習得できますよ！
【独学だとやっぱり不安な方へ】Web制作をもっと手軽に、最短で習得する方法とは？【スクールの有効活用】
ここまで読んできて、
うーん、結構大変そうだなぁ…。ちゃんとできるか不安…。
そう感じたかもしれません。
特に実際のWebサイトを作るのは、いまの段階だとなかなかできるイメージがないと思います。確かに一人でイチからサイトを作ることは大変だからです。
ですから、もしどうしても不安、一人でやれる気がしない場合は、独学ではなく、スクールで学習することもおすすめです。
最近は未経験からでも受講し、スキルが身につく良質なスクールも多く出てきました。
こういったスクールを利用すれば、初心者でも最短でスキル習得できます。
各学習方法のメリット・デメリット
- 本で勉強
- 学習サイトで勉強
- スクールで勉強
この3つのメリット・デメリットを比較すると以下の通りです。
| 学習方法 | メリット | デメリット |
| 1. 本で勉強する | ✔︎ 情報量が多い | ✔︎ 習得まで時間がかかる（6ヶ月〜1年程度） ✔︎ 挫折しやすい ✔︎ わからないことを聞く相手がいない ✔︎ 無駄な情報も多く、本来やる必要のないことにも労力を消費しがち |
| 2. 学習サイトで勉強する | ✔︎ 費用が安い（一部コンテンツは無料） | ✔︎ 習得まで時間がかかる（6ヶ月〜1年程度） ✔︎ 挫折しやすい ✔︎ わからないことを聞く相手がいない ✔︎ 無料で学べるのは一部コンテンツのみ |
| 3. スクールで勉強する | ✔︎ 習得まで時間がかからない（2〜3ヶ月） ✔︎ 最短でWeb制作を仕事にできる（3〜6ヶ月） ✔︎ 講師にいつでも質問し放題のため、未経験でも挫折しにくい ✔︎ 学習だけでなく案件獲得サポートも受けられる | ✔︎ お金がかかる（10万円〜50万円以上） |
それぞれメリット・デメリットがありますが、特にスクールを利用するメリットは上記黄色にした部分です。
ポイントを解説しますね。
スクールなら、Web制作習得までの時間を大幅短縮できる
まずスクールであれば、Web制作習得までの時間を大幅に短縮できます。
ざっとですが、Web制作習得までの時間は、独学（本・学習サイト）とスクールでは以下のような違いがあります。
1. 独学で学ぶ場合：6ヶ月〜1年程度
2. Webデザインスクールで学ぶ場合：2ヶ月〜3ヶ月程度
このように、スクールであれば約1/3まで、学習時間を短縮できるんですよね。
スクールなら在宅案件獲得のサポートも付いている
もう一つ、スクールを利用するメリットは、スクールによっては在宅案件獲得サポートも付いていることです。
はじめてのWeb制作だと「仕事を獲得できるだろうか…」と不安を感じますよね。
そんなときにスクールであれば、案件獲得のサポートを受けることができるため、未経験でも安心して仕事を獲得し、実績を積んでいくことができます。
おすすめのWeb制作が学べるスクール
とはいえ、スクールには質の良いスクールもあれば、残念ながら質の低いスクールもあります。
だからこそ、質の高いスクールを選ぶことが大事です。
なので参考までに、私が使ってよかったWeb制作が学べるデザインスクールは「現役WebデザイナーがおすすめするWebデザインスクール7社比較【評判がいい】」でご紹介しています。
もしスクール選びで迷ったら、この5つの中から選ぶと間違いありません。
中でもおすすめはTechAcademy【卒業後、Web制作の案件獲得サポートあり】
上記5つの中でもおすすめを紹介しておくと「TechAcademy」です。
一番の理由は、在宅ワークの案件獲得サポートがあるからです。
TechAcademyはクラウドソーシングサイト大手「クラウドワークス」と連携しており、卒業生に仕事を紹介するサービスをやっています。そのため、Web制作のカリキュラムを受けた後は、仕事を得るところまで徹底サポートを受けることができます。
このようなサポート体制が整ったTechAcademyであれば、あなたも安心してWeb制作を習得し、フリーランスや副業、在宅ワークで稼ぐことができると思いますよ！
Web制作の独学で初心者からよくある質問
Web制作の独学について、初心者からよくもらった質問に、Q&A形式で答えます。
Web制作におすすめのPCはある？
主流はMacbookですね。
WindowsのPCでもできますが、機能面などを考えると、Macbookの方が効率的です。
Macbook proの方が性能は良いですが、持ち運びが楽なMacbook Airでも良いと思います。
Web制作を独学で学んだら就職・転職できる？
結論、可能です。
ただし、その場合も「実績」が必要です。実際にWebサイトを作り、実績をまとめた「ポートフォリオ」を充実させることが必要です。
ポートフォリオを作れるか不安な場合は、前述したWebデザインスクールであれば、カリキュラムの中で実績作りもできるので、スクールで学習した方が安心ですね。
ポートフォリオの作成方法や、転職に向けた準備は「Webデザイナー転職で本当におすすめな転職エージェント9選【徹底比較】」の記事で紹介しています。
Web制作を独学で学んでフリーランスになれる？
こちらも可能です。
ただこちらも就職・転職と同様、実績を作り、実績をもとにアピールしていく必要があります。
まとめ
今回ご紹介したWeb制作独学の勉強法に沿って学習していけば、Web制作で仕事をするスキルは習得できます。
ただ文中でも述べた通り、独学は挫折する人も多いので、独学でやる場合は覚悟を持って臨むことは必要です。
もし自信がない場合は、Web制作の案件獲得や、就職サポートも付いている「TechAcademy」を検討してみると良いですよ。
以上、あなたがWeb制作で良い人生を実現できるよう、応援しています！
人気記事現役WebデザイナーがおすすめするWebデザインスクール7社比較【評判がいい】
