「Web制作を独学で習得したい。どうやって勉強していけばいいんだろう？」
「そもそも独学でWeb制作は習得できるのかな…？」
あなたはこのような悩みをお持ちではないでしょうか？
「個人で稼げるようになりたい」、そう考え、Web制作を始める人はたくさんいます。
Web制作は、個人でも稼ぎやすいです。一度スキルを身につけてしまえば、パソコン1台で仕事ができるため、時間や場所に縛られることなく、ストレスを感じずに働くこともできます。
とはいえ、Web制作は果たして「独学」でも習得できるのか、気になりますよね。
そこで本記事では、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、Illustrator）
これらのスキルを身につければ、Web制作の仕事はできるようになります。
以上を踏まえて、今後取るべきステップは次の通りです。
Web制作のロードマップ
それぞれ解説しますね！
[/ysa]
1. HTML/CSSを勉強する
まず最初は「HTML/CSS」を勉強します。
HTML/CSSって？
Webサイトを作るベースとなるものです。Web制作をする際に必ず必要なスキルです。
[say img="https://desacari.net/wp-content/uploads/2021/05/admin-ajax.php_.jpeg" name="KEI"]
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サイトのデザインは、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の教科書
こちらはWordPressの基本が学べる本です。
こちらを1冊やり込めばOKです。
5. 実際にWebサイトを作ってみる
学んだことを生かし、Webサイトを作ってみましょう。
作るならWordpressのサイトがおすすめです。
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制作習得までの時間は、独学（本・学習サイト）とスクールでは以下のような違いがあります。
- 独学で学ぶ場合：6ヶ月〜1年程度
- Webデザインスクールで学ぶ場合：2ヶ月〜3ヶ月程度
このように、スクールであれば約1/3まで、学習時間を短縮できます。
スクールなら在宅案件獲得のサポートも付いている
もう一つ、スクールを利用するメリットは、スクールによっては在宅案件獲得サポートも付いていることです。
はじめてのWeb制作だと「仕事を獲得できるだろうか…」と不安を感じますよね。
そんなときにスクールであれば、案件獲得のサポートを受けることができるため、未経験でも安心して仕事を獲得し、実績を積んでいくことができます。
おすすめのWeb制作が学べるスクール
とはいえ、スクールには質の良いスクールもあれば、残念ながら質の低いスクールもあります。
だからこそ、質の高いスクールを選ぶことが大事です。
なので参考までに、私が使ってよかったWeb制作が学べるデザインスクールは「現役WebデザイナーがおすすめするWebデザインスクール7社比較【評判がいい】」でご紹介しています。
もしスクール選びで迷ったら、この5つの中から選ぶと間違いありません。
中でもおすすめはDMM WEBCAMP Webデザインコース【手厚い副業サポートあり】
上記5つの中でもおすすめを紹介しておくと「DMM WEBCAMP Webデザインコース」です。
一番の理由は、Webデザイン＋Web制作を学べるカリキュラムと、手厚い副業サポートがあるからです。
DMM WEBCAMPは、WebデザインとWeb制作をセットで学べる、質の高いカリキュラムがあります。DMM認定の現役デザイナーが手厚くサポートしてくれるので、未経験でも安心してスキルを身につけていけますよ。
加えてDMM WEBCAMPでは、副業サポートも充実しており、未経験からWeb制作・Webデザインの副業にチャレンジできます。
そのため、Web制作のカリキュラムを受けた後は、仕事を得るところまで徹底サポートを受けることができます。
このようなサポート体制が整ったDMM WEBCAMPであれば、あなたも安心してWeb制作を習得し、フリーランスや副業、在宅ワークで稼ぐことができるでしょう。
Web制作の独学で初心者からよくある質問
Web制作の独学について、初心者からよくもらった質問に、Q&A形式で答えます。
Web制作におすすめのPCはある？
主流はMacbookですね。
WindowsのPCでもできますが、機能面などを考えると、Macbookの方が効率的です。
Macbook proの方が性能は良いですが、持ち運びが楽なMacbook Airでも良いと思います。
Web制作を独学で学んだら就職・転職できる？
結論、可能です。
ただし、その場合も「実績」が必要です。実際にWebサイトを作り、実績をまとめた「ポートフォリオ」を充実させることが必要です。
ポートフォリオを作れるか不安な場合は、前述したWebデザインスクールであれば、カリキュラムの中で実績作りもできるので、スクールで学習した方が安心ですね。
ポートフォリオの作成方法や、転職に向けた準備は「Webデザイナー転職で本当におすすめな転職エージェント9選【徹底比較】」の記事で紹介しています。
Web制作を独学で学んでフリーランスになれる？
こちらも可能です。
ただこちらも就職・転職と同様、実績を作り、実績をもとにアピールしていく必要があります。
まとめ
今回ご紹介したWeb制作独学の勉強法に沿って学習していけば、Web制作で仕事をするスキルは習得できます。
ただ文中でも述べた通り、独学は挫折する人も多いので、独学でやる場合は覚悟を持って臨むことは必要です。
もし自信がない場合は、Web制作の副業サポートや、就職サポートも付いている「DMM WEBCAMP Webデザインコース」を検討してみると良いですよ。
以上、あなたがWeb制作で良い人生を実現できるよう、応援しています！
人気記事現役WebデザイナーがおすすめするWebデザインスクール7社比較【評判がいい】
