Web制作を独学で勉強するための完全ロードマップ【現役デザイナー監修】

Web制作を独学で勉強するロードマップ

「Web制作を独学で習得したい。どうやって勉強していけばいいんだろう?」

「そもそも独学でWeb制作は習得できるのかな…?」

 

あなたはこのような悩みをお持ちではないでしょうか?

 

「個人で稼げるようになりたい」、そう考え、Web制作を始める人はたくさんいます。いまの時代、会社員として仕事をしても、給料は上がらず、逆に税金や社会保険の支払いは増えるため、手取りはどんどん減っていきます。

 

その上残業ばかりの日々で、毎日仕事でストレスを抱えることにもなる。

 

そんな生活をしていれば「個人の力でお金を稼いで、自由に生きたい!」と思うのは、至って普通のことだと思います。

 

その点Web制作は、個人でも稼ぎやすいです。一度スキルを身につけてしまえば、PC1台で仕事ができるため、時間や場所に縛られることなく、ストレスを感じずに働くこともできます。

 

とはいえ、Web制作は果たして「独学」でも習得できるのか、気になりますよね。

 

そこで本記事では、Web制作の独学に必要な情報を全て詰め込みました。

 

本記事を読めば、Web制作を始める上で必要な情報は全て把握できますよ。

 

Web制作は独学でも習得できるのか?【可能です】

Web制作は独学でもできるのか?【可能です】

 

結論、Web制作は独学でも習得は可能です。

 

あなたがいま完全未経験でも、Web制作を学び、Web制作を仕事にすることも可能です。

 

とはいえ、簡単ではない

とはいえ最初にお伝えしておくと、独学は簡単ではありません。

 

なぜなら独学の場合、挫折率が高いからです。

 

事実、私がこれまで多くの学習者を見てきた中では、Web制作を独学で勉強するも、挫折してしまった方の方が圧倒的に多かったです。割合でいうと、だいたい80〜90%くらいは挫折していると思います。

 

なので、「誰でも楽に習得できますよ!」なんてことは言えないですし、むしろかなり大変だと思います。なので、まずはその現実を知ることが大事です。

 

正しい方法やツールを使い、覚悟を持って臨むべき

それでも、正しい方法やツールを使って取り組んでいけば、独学でもスキル習得できます。

 

だからこそ、正しい方法やツールが何かを知り、覚悟を持って臨むことが必要です。

 

その方法を、本記事で紹介します。

 

MEMO

「10人中9人くらい挫折するのかぁ。やっぱり独学だと厳しいかも…」

と不安になった場合は、もっと手軽に学べる方法も記事後半で書いていますので、参考にしてみてください。

こちらから」記事後半の該当箇所に飛べます。

 

Web制作の独学でおすすめな学習サービス

Web制作の独学でおすすめな学習サービス・サイト

 

それではここから、Web制作の独学の詳細に入ります。

 

まずはWeb制作の独学で役立つ「学習サービス」をまとめて紹介しておきます。

 

結論、以下のサービスが、独学でWeb制作で学ぶ際におすすめです。

 

Web制作の独学で役立ったサイト3選

1. Progate【スライド形式でコーディングが学べる定番サイト】

2. ドットインストール【1回3分の動画でコーディングやWebデザインが学べる定番サイト】

3. Udemy【世界最大級のオンライン学習サイト。良質なWebデザインオンライン講座多数】

 

上記の通りです。

 

3つとも基本有料だが、基礎部分は「無料」で利用できる

これらのサイトは基本有料ですが、基礎部分であれば「無料」で利用できます。

 

なのでまずはこういったサイトを使いながら、Web制作の基本に触れてみると良いですね。

 

その他おすすめのサイトは「【無料あり】Webデザイン独学で使えるおすすめ勉強サイト7選【現役Webデザイナーが厳選】」でも紹介しています。

 

Web制作を独学で勉強するロードマップ

Web制作を独学で勉強するロードマップ

 

ここからはWeb制作を独学で勉強するロードマップを紹介します。

 

Web制作で必要なスキル

まず初めにWeb制作で必要なスキルを整理しておきましょう。

 

結論、Web制作をする際には、以下スキルがあればOKです。

 

Web制作に必要なスキル

✔︎ HTML/CSS

✔︎ JavaScript/jQuery

✔︎ WordPress

 

これらに加えて、Webデザインの基本原則(デザインの原則や、PhotoShopなど)がわかれば、Web制作の仕事は一旦できます。

 

以上を踏まえて、今後取るべきステップは次の通りです。

 

Web制作のロードマップ

手順1
HTML/CSSを勉強する
本や学習サイトを使って勉強する
手順2
JavaScript/jQueryを勉強する
本や学習サイトを使って勉強する
手順3
Webデザインの基本を勉強する
本でデザインの基本原則を学び、良いデザインWebサイトトレースを行い勉強する。
手順4
WordPressを勉強する
本で勉強する
手順5
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の使い方を学び、次に紹介するトレースを行っていきましょう。

 

MEMO

ここまでPhotoShopについて説明しましたが、Web制作に必ずしもPhotoShopは必要ありません。なぜならPhotoShopはWebサイトの画像部分を作成することがメインだからです。使わなくてもサイトを作ることはできます。

 

とはいえ、現場ではWebサイト制作に関わる大半の人が使っています。そのためここで学習しておくと良いです。

 

トレースのやり方

実際のWebサイトのトレースの進め方は下記の通りです。

 

  1. プロのWebデザインに多く触れてみる
  2. そのサイトをトレースして作ってみる

 

やるべきことは上記2つです。

 

まずはプロのデザインに多く触れていきましょう。

 

この際にただぼーっとみるのではなく、ヘッダーや見出しデザイン、フォント、フッターなどがどのように作られているか、一つ一つの構成を見ながら、その意図を考えていくことがおすすめです。

 

そうやって質の高いサイトに触れていくと、あなた自身の「デザインの引き出し」が増えていきます。この引き出しの多さがあると、良いデザインをどんどん生み出せるようになっていきますよ。

引用:Webデザインの独学勉強法はこれで決まり!【現役Webデザイナーが徹底解説】

 

さらに詳しいやり方は上記引用先記事でも書いているので、参考にしつつトライなさってください。

 

トレースで役立つプロのWebサイト集

実際にトレース対象とする「プロのWebサイト」は以下にあげておきますね。

 

I/O 3000

Webデザイン独学勉強法

 

I/O 3000は国内外問わず、様々なWebサイトが掲載されているサイトです。

 

良質なデザインのWebサイトがたくさんあり、プロのWebデザインに多く触れるにはぴったりです。

 

AwwwardsWebデザイン独学勉強法

Webデザイン独学勉強法

 

Awwwardsは海外のWebサイトです。センスの良い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制作をもっと手軽に、最短で習得する方法とは?【スクールの有効活用】

 

ここまで読んできて、

 

うーん、結構大変そうだなぁ…。ちゃんとできるか不安…。

 

そう感じたかもしれません。

 

特に実際のWebサイトを作るのは、いまの段階だとなかなかできるイメージがないと思います。確かに一人でイチからサイトを作ることは大変だからです。

 

ですから、もしどうしても不安、一人でやれる気がしない場合は、独学ではなく、スクールで学習することもおすすめです。

 

最近は未経験からでも受講し、スキルが身につく良質なスクールも多く出てきました。

 

こういったスクールを利用すれば、初心者でも最短でスキル習得できます。

 

各学習方法のメリット・デメリット

  1. 本で勉強
  2. 学習サイトで勉強
  3. スクールで勉強

 

この3つのメリット・デメリットを比較すると以下の通りです。

 

学習方法 メリット デメリット
1. 本で勉強する ✔︎ 情報量が多い ✔︎ 習得まで時間がかかる(6ヶ月〜1年程度)
✔︎ 挫折しやすい
✔︎ わからないことを聞く相手がいない
✔︎ 無駄な情報も多く、本来やる必要のないことにも労力を消費しがち
2. 学習サイトで勉強する ✔︎ 費用が安い(一部コンテンツは無料) ✔︎ 習得まで時間がかかる(6ヶ月〜1年程度)
✔︎ 挫折しやすい
✔︎ わからないことを聞く相手がいない
✔︎ 無料で学べるのは一部コンテンツのみ
3. スクールで勉強する ✔︎ 習得まで時間がかからない(2〜3ヶ月)
✔︎ 最短でWeb制作を仕事にできる(3〜6ヶ月)
✔︎ 講師にいつでも質問し放題のため、未経験でも挫折しにくい
✔︎ 学習だけでなく案件獲得サポートも受けられる
✔︎ お金がかかる(10万円〜50万円以上)

 

それぞれメリット・デメリットがありますが、特にスクールを利用するメリットは上記黄色にした部分です。

 

ポイントを解説しますね。

 

スクールなら、Web制作習得までの時間を大幅短縮できる

まずスクールであれば、Web制作習得までの時間を大幅に短縮できます。

 

ざっとですが、Web制作習得までの時間は、独学(本・学習サイト)とスクールでは以下のような違いがあります。

 

Web制作習得に必要な勉強時間

1. 独学で学ぶ場合:6ヶ月〜1年程度

2. Webデザインスクールで学ぶ場合:2ヶ月〜3ヶ月程度

 

このように、スクールであれば約1/3まで、学習時間を短縮できるんですよね。

 

スクールなら在宅案件獲得のサポートも付いている

もう一つ、スクールを利用するメリットは、スクールによっては在宅案件獲得サポートも付いていることです。

 

はじめてのWeb制作だと「仕事を獲得できるだろうか…」と不安を感じますよね。

 

そんなときにスクールであれば、案件獲得のサポートを受けることができるため、未経験でも安心して仕事を獲得し、実績を積んでいくことができます。

 

おすすめのWeb制作が学べるスクール

とはいえ、スクールには質の良いスクールもあれば、残念ながら質の低いスクールもあります。

 

だからこそ、質の高いスクールを選ぶことが大事です。

 

なので参考までに、私が使ってよかったWeb制作が学べるデザインスクールは「現役WebデザイナーがおすすめするWebデザインスクール5選【徹底比較】」でご紹介しています。

 

現役WebデザイナーがおすすめするWebデザインスクール5選【徹底比較】現役WebデザイナーがおすすめするWebデザインスクール5選【徹底比較】

 

もしスクール選びで迷ったら、この5つの中から選ぶと間違いありません。

 

中でもおすすめはTechAcademy【卒業後、Web制作の案件獲得サポートあり】

上記5つの中でもおすすめを紹介しておくと「TechAcademy」です。

 

一番の理由は、在宅ワークの案件獲得サポートがあるからです。

 

TechAcademyはクラウドソーシングサイト最大手「クラウドワークス」と連携しており、卒業生に仕事を紹介するサービスをやっています。そのため、Web制作のカリキュラムを受けた後は、仕事を得るところまで徹底サポートを受けることができます。

 

このようなサポート体制が整ったTechAcademyであれば、あなたも安心してWeb制作を習得し、フリーランスや副業、在宅ワークで稼ぐことができると思いますよ!

 

TechAcademy(テックアカデミー)Webデザインコースの評判や感想TechAcademy(テックアカデミー)Webデザインコースを受講した率直な感想や評判

 

Web制作の独学で初心者からよくある質問

Web制作の独学で初心者からよくある質問

 

Web制作の独学について、初心者からよくもらった質問に、Q&A形式で答えます。

 

Web制作におすすめのPCはある?

主流はMacbookですね。

 

WindowsのPCでもできますが、機能面などを考えると、Macbookの方が効率的です。

 

Macbook proの方が性能は良いですが、持ち運びが楽なMacbook Airでも良いと思います。

 

Web制作を独学で学んだら就職・転職できる?

結論、可能です。

 

ただし、その場合も「実績」が必要です。実際にWebサイトを作り、実績をまとめた「ポートフォリオ」を充実させることが必要です。

 

ポートフォリオを作れるか不安な場合は、前述したWebデザインスクールであれば、カリキュラムの中で実績作りもできるので、スクールで学習した方が安心ですね。

 

ポートフォリオの作成方法や、転職に向けた準備は「Webデザイナー転職で本当におすすめな転職エージェント9選【徹底比較】」の記事で紹介しています。

 

Web制作を独学で学んでフリーランスになれる?

こちらも可能です。

 

ただこちらも就職・転職と同様、実績を作り、実績をもとにアピールしていく必要があります。

 

まとめ

Web制作を独学で勉強するロードマップ

 

今回ご紹介したWeb制作独学の勉強法に沿って学習していけば、Web制作で仕事をするスキルは習得できます。

 

ただ文中でも述べた通り、独学は挫折する人も多いので、独学でやる場合は覚悟を持って臨むことは必要です。

 

もし自信がない場合は、Web制作の案件獲得や、就職サポートも付いている「TechAcademy」を検討してみると良いですよ。

 

以上、あなたがWeb制作で良い人生を実現できるよう、応援しています!

 

人気記事現役WebデザイナーがおすすめするWebデザインスクール5選【徹底比較】

 

TechAcademy(テックアカデミー)Webデザインコースの評判や感想TechAcademy(テックアカデミー)Webデザインコースを受講した率直な感想や評判

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です