【2024年版】web制作の独学に使える学習サイト15選！

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

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

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

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

【2024年版】web制作でプロになるための独学ロードマップ！

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

👆 メンターやってます 👆

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

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

模写修行

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

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

• 基礎学習中の方で力試ししたい方
• 基礎学習を終えて実践的な経験を積みたい方
• プロの書き方を学びたい方
• Figma/XDを見ながらコーディングの練習をしたい方

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

また、独学デメリットを解消して、効率よく学習するために、Hello Mentorという現役エンジニアによるメンタリングサービスもやっています。

メンターは模写修行を作ったメンバーが中心です。

ドットインストール

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

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

Progate

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

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

サルワカ

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

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

webliker

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

【駆け出しの方へ】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターは全員現役エンジニア 👆

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

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

書籍も含めて、下記の記事でも詳しく紹介しています。

JavaScriptの勉強ができるおすすめの本やサイト紹介！

ドットインストール

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

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

ともすたチャンネル

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

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

JavaScript Primer

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

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

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

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

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

ともすたチャンネル

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

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

unazuki

• 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さんは、デザインだけでなく、コーディングも詳しい方です。

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

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

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

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

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

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

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

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

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

私たちが運営しているHello Mentorは、契約期限なしのサブスクなので、リスクを抑えて学習を効率化できます。

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

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

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

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

• 運営者が本当に実務経験と実績があるか
• 情報が新しいか(公開や更新が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上で再現出来ることを知ってからデザインの勉強をした方が良いからです。

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

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

• Figma
• Adobe XD
• Adobe Photoshop
• Adobe Illustrator

これら4つは使う機会があると思います。

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

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

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

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

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

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

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

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

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

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

※ 2~4h/日勉強した想定

これくらいは勉強だけに専念できればベストです。

独学に限界を感じていませんか？