こんにちは。ゆうや(@yuya596)です。
Web制作を独学で勉強する際に必要なサイトは3つだけです。
本日は3つのサイトと効果的な使い方を説明します。
最後まで読むことで、効果的なWeb制作の勉強法が分かります。
Contents
Web制作で使う3つの勉強サイト
Web制作で使うべきサイトは以下の3つです。
- Progate
- ドットインストール
- Udemy
1つずつ説明します。
Progate

(引用元:Progate公式サイト)
講義スタイル | スライド/アウトプット |
環境構築 | 不要 |
難易度 | 易~難 |
無料プラン | あり |
有料プラン価格 | 月額1,078円(税込み) |
Progateはスライド形式でインプットする学習と、実際にコードをアウトプットする学習の、2つのセクションでプログラミングを学習します。
サイト内でコードをアウトプットできることがProgateで最も優れた点です。
他の学習サイトでコードを書こうとすると、環境構築が必要です。
一方で、Progateは初心者が挫折しやすい環境構築が無く、登録した瞬間にコードを書くことが出来ます。
また、インプットする際のスライドも非常に分かりやすく、個人的に最もプログラミング学習に適しているサイトだと思います。

ドットインストール

(引用元:ドットインストール公式サイト)
講義スタイル | 動画形式 |
環境構築 | 必要 |
難易度 | 易 |
無料プラン | あり |
有料プラン価格 | 月額1,080円(税込み) |
実際の案件では自分で環境を用意し、Webサイトを作ります。
Progateのように誰かが環境を用意してくれません。
そこで、ドットインストールを使って実際にWebサイトを作る流れを学びます。
環境構築の方法や、どのようにWebサイトを作るのかを丁寧に教えてくれるので、Progateの次のステップとして最適です。
なお知識のインプットはProgateで充分です。
ドットインストールは、Webサイトの作り方をイメージするためだけに使用するので、時間をかけ過ぎないで下さい。

Udemy

(引用元:Udemy公式サイト)
講義スタイル | 動画形式 |
環境構築 | 必要 |
難易度 | 中 |
無料プラン | 無し |
有料プラン価格 | 講義によって異なる |
Udemyは、Progateやドットインストールなどサブスク型ではなく、講座の買い切り型です。
1度購入した講座は永遠に視聴可能です。
ドットインストールやProgateではサイトのWordPress化を学ぶことが出来ないので、Udemyでカバーします。

なお、Udemyで講座を購入する際は2つ注意があります。
- 必要な講座のみ購入する
- セール時に購入する
Udemyはプログラミングに特化しているわけではなく、幅広いジャンルの動画学習サイトです。
そのため、色んな講座に手を出したくなりますが、色々手を出しても意味がありません。まずは自分が必要な講座を極めましょう。
また、通常1万円以上する講座も、セール時は1,000~2,000円で購入できます。
セールは月に1回程度頻繁に行っているので、定価で購入しないよう注意して下さい。
勉強サイトの使い方
続いて、これら勉強サイトの使い方を1つずつ説明します。
Progate
Progateでは以下の3つのコースを学習します。
- HTML&CSS
- JavaScript
- jQuery
有料プランに入る必要がありますが、長くても2ヶ月で学習は完了するので、2,000円程度です。ケチらず入りましょう。
ここでWeb制作に必要な知識をインプットします。
ドットインストール
続いてドットインストールで以下3つのコースを受講します。
どれも無料会員で受講できます。
- HTML/CSSの学習環境を整えよう
- はじめてのHTML
- はじめてのCSS
「HTML/CSSの学習環境を整えよう」はWondows・Mac版があるので、自分のPCに合わせて受講しましょう。
ドットインストールで実際のサイトの作り方を学びます。
先ほども申しましたが、インプットはProgateで充分なので、ドットインストールは時間をかけ過ぎず、イメージが湧けばOKです。
Udemy
最後にUdemyでWordPressの講座を学びます。定番は以下の3つですので、好きな講座を1つ受講して下さい。
- 『世界で30万人が受講』フルスタック・エンジニア講座
- WordPressカスタマイズ講座【テーマ作成編】
- 文系でも解る!WordPressの基礎の理解と、独自デザインをWordPress化する

繰り返しになりますが、Udemyで講座を購入する際は、必ずセール時に買うようにして下さい!
また、補足ですがWordPressはPHPで構成されています。
そのためWordPressの勉強を始める前に、Progateに再入会してPHPの基礎を学ぶと理解しやすくなります。
動画だけでは不安な方にオススメの書籍
補足として、動画だけでは不安な方向けにオススメの書籍を紹介します。
Web制作は分からないコードを調べながら書いていくので、ネットが発達している現在、書籍はそこまで重要ではありません。
とはいえ、辞書代わりに持っておくと便利ですので持っていてい損はしないでしょう。
HTML/CSS用の書籍
HTML/CSSで最も有名かつ分かりやすい入門書です。
必要な内容がしっかり書かれているため、勉強や実案件で困った時に助けになります。
デザインの知識も身につきますし、フルカラーで非常に分かりやすいので、迷ったら1冊買うことをオススメします。
JavaScript用の書籍
JavaScript用の書籍は購入不要です。
実案件ではjQueryというJavaScriptのライブラリを用いるため、深く勉強する必要は無いからです。
また、jQueryは使用する文法が限らており、ネット検索で充分に対応できるので、jQuery用の書籍を購入する必要もありません。
WordPress用の書籍
最後にWordPressの書籍を紹介します。
HTML/CSSを理解している人向けの参考書ですが、WebサイトをWordPress化する手順が分かりやすく記載されており、1冊持っておくと安心です。
Udemyの動画では、分からないときにすぐ確認出来ないので、辞書として持っておくことをオススメします。
まとめ
本日はWeb制作を学ぶ人にオススメなサイトを紹介しました。
現在は安価で質の高い勉強サイトが多く存在するので、独学でも十分スキルを身につけることは可能です。
勉強サイトでインプットが終わったら、実際に手を動かしてWebサイトを作ってみましょう!案件獲得に近づきます。