web制作の勉強にどんな教材を使うか迷われる方は多くいます。今は情報が多すぎて、良い情報かどうかを判断するのが難しいと思います。特にwebの記事は、検索上位でも間違っているものもあります。

この記事ではweb制作の勉強中の方やこれから勉強したい方に、おすすめの学習サイトを紹介します。

必要なスキルの定義は、↑このようにしました。

web制作のプロになるための、学習ロードマップは下記の記事をご覧ください。

模写修行を運営している+教育事業に関わっているので、学習サービスに詳しいです！👍

プロに質問し放題&web制作が学べる学習サイト2選

web制作の勉強をはじめると、最初のうちはわからないことだらけで、何時間も初歩的なミスで時間を使うことになります。

はっきり言って、30分以上悩むのは時間の無駄です。30分頑張っても解決しなければ、聞いてしまった方が良いです。

まずは質問し放題が付いている学習サイトを2つ紹介します。

特に学習初期は質問できる環境があると良いです！必須ではありませんが、低価格サービスであれば試してみる価値があります！

対応言語多数！月額2,980円から使える【学び放題&質問し放題】の侍テラコヤ！

侍テラコヤは月額2,980円から使える、プログラミング / コーディング / デザインの学び放題&質問し放題サービスです。

こんな方におすすめ！

• 本格的にプログラミングの勉強がしたい方
• わからないことをチャットやZoomで質問したい方
• 少額の投資で学習の効率化したい方

サブスクサービスで入会金や解約料など他にかかる費用もありません。いつでも辞めれて、初月の1ヶ月間は全額返金保証も付いています。

よくある『入学金〇〇万円は別でかかります！』みたいなトラップはありません。

僕の知り限り、1番コスパが良い学習サービスです。

侍テラコヤの特徴

• 質問し放題(回答率100%)
• 毎月現役エンジニアとZoomレッスン可
• 40種類以上の教材で学習し放題
• かかる費用は月額2,980円~だけ

口コミ・評判や対応言語に関しては、下記の記事をご覧ください。

侍テラコヤの口コミ・評判を調査！現役エンジニアが評価！

1ヶ月返金保証もあるからリスクなし！🚀

侍テラコヤ 公式サイト

現役エンジニアのサポートでもう無駄に悩まない！

当サイト限定の50%OFFクーポンを使えば
1ヶ月目1,490円~でお試しできます！クーポンコード 👉 MOSYAクーポンの使い方

【完全無料】動画でweb制作が学べるZeroPlus Gate！

ZeroPlus Gateは30日間無料でweb制作が学べるサービスです。31日目からお金がかかるわけではなく、30日で完結するサービスです。

こんな方におすすめ！

• これからweb制作の勉強をしたい方
• 学習期間1年未満の初学者の方

リスク0なのでweb制作を学びたい方は挑戦してみると良いです。中級者やweb制作ではなくプログラミングを勉強をしたい方には向いていません。(web制作ではなく、プログラミングを勉強したい場合は前述した↑侍テラコヤの方が向いています。)

ZeroPlus Gateの特徴

• 60本の動画教材でweb制作が学べる
• 面談で学習サポートしてもらえる
• プロに何回でも質問し放題
• 30日以降お金がかかるわけではなく完全無料

無料の理由や30日でどんなサイトを作るかは、下記の記事で詳しく紹介しています。

【無料】ZeroPlus Gateの口コミ・評判を調査！web制作志望は必見？

無料期間は終了する可能性あり&毎月人数制限あり！

ZeroPlus Gate 公式サイト

リスク0！完全無料で学べる！

HTML・CSSを勉強するのにおすすめの学習サイト5選

HTML・CSSを勉強する際におすすめの学習サイトを5つ紹介します。

ドットインストール

ドットインストールでは、HTML・CSSに限らず、多くの言語を扱っています。プレミアム会員は、月に1000円程度かかりますが、払う価値は十分あります。

初学者を対象とした有料サービスはいくつかありますが、コンテンツの質と量的にドットインストールはかなりおすすめです。

Progate

1番有名な学習サービスです。有料会員プランは月に1000円程度かかります。

プログラミングに触れてみる目的で使うには良いですが、本格的に勉強するのにはあまり向かないです。超初学者向けのサービスだと思うと良いです。

サルワカ

catnoseさんが作ったサイトです。catnoseさんはサルワカ以外にも、ZennやRESUMEも作っています。

サルワカでは、コーディングに関する記事がとてもわかりやすくまとまっています。テキストで勉強したい方にはおすすめです。

webliker

サルワカと同じくweblikerもとても見やすく、内容も充実しています。全記事見ればHTML・CSSは、理解が深まると思います。

模写修行

宣伝になってしまいますが、自分たちが運営している模写修行です。

他のサイトや書籍との違いは、基礎学習ではなく、基礎学習後のコーディングの練習に特化している点です。

• 基礎学習中の方
• 基礎学習を終えて実践的な経験を積みたい方
• 良い書き方を学びたい方
• 実務と同じようにXDのデータを見ながらコーディングの練習をしたい方
• プロのコードを見たい方

こんな方にはおすすめです。無料の教材もあるので、ぜひ覗いてみてください。

JavaScriptを勉強するのにおすすめの学習サイト3選

JavaScriptを勉強する際におすすめの学習サイトを3つ紹介します。

ドットインストール

ドットインストールはJavaScriptに関する動画がとても多いのでおすすめです。

JavaScriptの基礎を勉強するのには良いですが、web制作でよくやるようなアニメーションを学ぶには不十分だと思います。

ともすたチャンネル

YouTubeの有料メンバーシップ（月額 990円）専用のプレミアム動画です。メンバーになると後述するWordPressの動画も見れるはずです。

運営者の谷口さんは書籍やUdemyも出している方で、わかりやすい解説が魅力です。

JavaScript Primer

JavaScript Primerという書籍のweb版です。無料にも関わらず書籍の内容が全て記載されていて、メンテナンスもされています。メンテナンスされていて、新しい機能や仕様にも対応されていることは、とても凄いことです。

ただ、内容は少し難しいので、先にドットインストール / ともすたチャンネル / 初学者向けの書籍などで学習してからのほうが良いかもしれません。

WordPressを勉強するのにおすすめの学習サイト2選

WordPressを勉強する際におすすめの学習サイトを2つ紹介します。

WordPressを無料で1から勉強できる良い学習サイトはありません。無料で勉強することは諦めて、Udemy / YouTube有料メンバーシップ / 書籍などで勉強することをおすすめします。ここで紹介するものも有料のサービスになります。

無料サイトでおすすめはありませんが、WordPressは有名なCMSなので、わからないことがあってもググればだいたい解決します。

ともすたチャンネル

JavaScriptで紹介した谷口さんの有料メンバーシップ（月額 990円）専用のプレミアム動画です。

Twitterで凄く評判が良いです。

unazuki | Web制作のためのオンライン動画学習サービス

• YouTubeで発信している
• web制作会社を経営している

上記のような実績がある、アキユキさんが運営しているサービスです。

YouTubeの発信内容も質が高いので、教材にも期待ができそうです。値段が高いのが少し難点です。

デザインを勉強するのにおすすめの学習サイト5選

デザインを勉強する際におすすめの学習サイトを5つ紹介します。

デザインはFigma / XD / Photoshop / Illustratorなどを使って制作することが多いので、デザイン理論に加えて、デザインツールの使い方も学ばないといけません。

chot.design

0からデザインを勉強する方にはかなりおすすめのサイトです。

元々有料サービスでしたが、事業譲渡で全て無料化されました。

LIGさんのメディア

LIGさんは、東京のweb制作会社です。数々の賞を受賞している、有名な実力のある会社です。

メディアでは様々な内容を取り扱っています。webデザイナーを目指す方向けのコンテンツもたくさんあります。

knowledge / baigie

baigieさんも東京の有名なweb制作会社です。

このメディア自体はwebデザインを勉強中の方向けではないのですが、ここで紹介する記事はとてもためになります。ある程度基礎を学んだ後に見るとなお良いです。

デザインのセクションに入れましたが、サイト設計やコーディングなどの内容も含んでいます。

@tak_dcxiさんのnote

これから勉強しようと思っている方にとてもおすすめのnoteです。執筆者のTAKさんは、デザインだけでなく、コーディングも詳しい方です。

Adobe XD Trail

XDの使い方を学ぶには、公式が出している、動画で学べるサイトがとてもわかりやすくて良いです。

超需要！勉強や調べごとをする際の注意点

多くの方がweb制作を学ぶための情報を発信していますが、間違った情報もたくさんあります。何を使って勉強するかはとても重要です。まずは勉強する際の注意点を紹介します。

• 高額なスクールやサロンは必須ではない
• 検索上位のサイトが良い情報とは限らな
• 有名な学習サービスや書籍が正しいとは限らない

この3点について紹介します。

高額なスクールやサロンは必須ではない

web制作もデザインもプログラミングも、独学で勉強することは可能です。何十万円もするスクールやサロンは必須ではありません。

今は高額なのに質の低いスクールやサロンも多く存在するので、注意が必要です。

• 数十万の出費が気にならない方
• お金をかけてでもなるべく早く習得したい方
• 独学で挫折してしまった方

これらの方は検討しても良いと思いますが、この仕事は好き嫌いもあるので、まずはこの記事で紹介している無料や低価格サービスを使って勉強してみることがおすすめです。

web制作が好きかどうか確かめるために、まずは少額の投資から始めよう！👍

検索上位のサイトが良い情報とは限らない

勉強しているととにかくたくさんググることになります。web制作の勉強であれば、基礎的な内容はググればほぼ確実にその答えがあります。

しかし、検索上位のサイトだから、正しい情報だとは限りません。

例えば、スマホとPCで画像を切り替えたい時があります。その方法がわからなくて『html css sp pc 画像切り替え』と調べた際の検索結果1ページ目は2021年8月現在、10件中4件はあまり良くない方法を紹介しています。

• 運営者が本当に実務経験と実績があるか
• 情報が新しいか(公開や更新が2年以内だと好ましい)
• 検索結果上位の1記事だけではなくなるべく数記事見る

調べごとをする際は、上の3点に注意した方が良いです。

有名な学習サービスや書籍が正しいとは限らない

web業界は流れが速いので、学習サービスや書籍の情報が古いこともあります。

例えば...
web制作ではありませんが、ProgateのReactコースは今は使わない古い書き方で解説しています。

AmazonでReactと検索した際に1番に出てくる、『React.js＆Next.js超入門』は書籍内で使っているFirebaseというサービスのバーションのせいで、サンプルコードが全く動かないはずです。

これに最初から気づける人はほとんどいないと思います。したがって、少しお金はかかりますが、プロに質問できる環境を作る方が良いです。

おすすめのweb制作の勉強の順番

1. HTML・CSS
2. JavaScript
3. WordPress
4. デザイン

web制作の勉強をする際には、上の順番で勉強することをおすすめします。

デザインだけや実装だけを仕事にしている方も多いので、自分に必要ない技術は少し触れるか全くやらないでも良いです。

コーディングを先に学ぶ理由は、web上で再現出来ることを知ってからデザインの勉強をした方が良いからです。

コーディングだけやっていきたい方

デザインは、全くやらないか少し触れる程度で大丈夫です。ただし、デザインツールの使い方はわかっている必要があります。

• Adobe XD
• figma
• Adobe Photoshop
• Adobe Illustrator

これら4つは環境によってですが、使う機会があると思います。（使う可能性が多い順に書きました）

デザインだけやっていきたい方

コーディングは、全くやらないか少し触れる程度で大丈夫です。

デザイナーの中には、webやコーディングのことを一切考慮していない、実装不可能なデザインをする方もいます。そういった方はコーダーから好かれないので、出来れば少しくらいは触れてみると良いと思います。

プログラミングに少し触れるくらいが目的であれば、Progateがおすすめです。

web制作の勉強に必要な期間

Twitterでは、下記のような情報もありますが、全くそんなことはありません。

• 数ヶ月で〇〇万円稼いだ
• web制作は簡単

一人前になるには数年単位で勉強が必要だと思った方が良いです。

今は歴1,2年の人がサロンや教材の販売をしているケースも見ます。発信者の実績がどれくらいあるのかは、チェックしたほうが良いです。

ペースは人それぞれですが、一応目安を書いておきます。

※ 平均4h/日勉強した想定

かなり短く見積もっても、これくらいは勉強だけに専念できればベストです。

すぐに案件を取りに行きたがる方が多いですが、長い目で見たらある程度しっかり勉強してからの方が良いです。

質問をできる環境があれば2倍速で成長できる！

• 何を使って勉強すれば良いかわからない
• 今の勉強方法があっているかわからない
• 初歩的なミスに気づかず何時間も無駄にしたことがある
• 周りに相談できる人がいない

学習初期は特に、↑このような悩みを抱えることになります。

手取り足取りサポートしてもらわなくても、質問できる環境があると効率的に学習ができます。

独学の補助に使えるサービスとしては、この記事の前半で紹介したZeroPlus Gateと侍テラコヤがおすすめです。

どちらも教材だけでなく、質問し放題なので、無駄に何時間も悩むようなことがなくなります。

1ヶ月返金保証もあるからリスクなし！🚀

侍テラコヤ 公式サイト

書籍より安い価格で教材&質問し放題&Zoomレッスン可能！

リスク0！完全無料で学べる！👀

ZeroPlus Gate 公式サイト