模写修行メディア

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

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

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

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

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

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

👇 メンターやってます 👇

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

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています!

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

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

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

入会金/解約料/契約期間の縛りなし

👆 メンターやってます 👆

この記事の目次

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

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

模写修行

模写修行

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

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

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

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

実務レベルを体験するためのコーディング練習教材

模写修行で実践的な練習を!

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

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

1対1でプロが学習サポート!

メンターを利用して3倍速成長する

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

ドットインストール

ドットインストール

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

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

3分動画でマスターできる学習サービス

ドットインストール

Progate

Progate

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

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

超初学者向けサービス

Progate

サルワカ

サルワカ

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

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

イチからWebデザインを習得する講座

サルワカでHTML&CSS入門

webliker

webliker

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

htmlとcssを勉強するための8ステップ

html&css入門講座

【初学者・中級者の方】独学に限界を感じてませんか?

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

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

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

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

初級者から中級者まで対応できる、数少ないサービスです。

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

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

入会金/解約料/契約期間の縛りなし

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

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

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

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

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

ドットインストール

ドットインストール

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

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

3分動画でマスターできる学習サービス

ドットインストール

ともすたチャンネル

ともすたチャンネル

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

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

YouTubeの有料メンバーシップ

JavaScript初級講座

JavaScript Primer

JavaScript Primer

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

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

無料なのにすごい質と量!

JavaScript Primer

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

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

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

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

gakuのアイコン

ともすたチャンネル

ともすたチャンネル

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

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

YouTubeの有料メンバーシップ

WordPressマスター講座

unazuki

unazuki | Web制作のためのオンライン動画学習サービス
  • YouTubeで発信している
  • web制作会社を経営している

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

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

Web制作のための動画学習サービス

unazuki

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

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

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

chot.design

chot.design

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

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

chot.designの口コミ・評判は?使ってみた感想も紹介!

500本以上の記事が見れる!

chot.designを見る

LIGさんのメディア

chot.design

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

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

有名web制作会社のメディア

WEBデザインをはじめよう

knowledge / baigie

1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開

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

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

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

有名web制作会社のメディア

webデザインドリル

@tak_dcxiさんのnote

個人的に実践しているWebデザインガイドラインまとめ

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

フロントエンドエンジニアTAKさんのnote!

Webデザインガイドライン

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

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

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

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

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

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

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

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

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

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

gakuのアイコン

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

合わなければ1ヶ月で辞めてもOK!!

詳しいサービス内容を見る

サブスク&契約期間に縛りがないサービスです!

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

勉強しているととにかくたくさんググることになります。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/日勉強した想定

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

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

gakuのアイコン

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

現役エンジニアによるメンタリングサービス作りました!

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

👇 こんな方のためのサービスです。

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

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク / 契約期間の縛りなし / 入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。無料相談もお気軽にお越しください。(無理な営業等一切ございません!)

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

入会金/解約料/契約期間の縛りなし

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます!webサービスを作るのが好き!

当メディア運営メンバーでメンターやってます!👉

詳しく見る

\Share/

模写修行のトップページのスクリーンショット
模写修行

実務レベルを体験するためのコーディング練習教材