web制作の勉強をする際に、何を使って学ぶか迷われる方は多いのではないでしょうか。今は情報が多すぎて、初学者の方は、どれが良い情報かを判断するのが難しいと思います。

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

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

この記事は初心者向けの記事です。プロになるための、学習ロードマップは下記の記事をご覧ください。

💡 独学の補助に使えるサービス

独学の補助に使えるサービスとして、月2980円で質問し放題の侍テラコヤがおすすめです。

↓レビューした記事もあります。

人数制限があるのでお早めに！👀

侍テラコヤ 公式サイト

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

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

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

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

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

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

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

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

これらの方は検討しても良いと思いますが、この仕事は好き嫌いもあるので、まずは月数万円以下のサービスを使って勉強してみることがおすすめです。

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

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

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

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

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

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

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

流れが速いような技術であれば、学習サービスや書籍の情報が古いこともあります。

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

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

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

月2980円で質問し放題！💡

侍テラコヤ 公式サイト

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/日勉強した想定

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

HTML・CSSを勉強するのにおすすめの書籍やサイト

web制作の勉強をする際におすすめな書籍やサイトを紹介します。まずはHTML・CSSを勉強する際におすすめの書籍やサイトです。

書籍

Webクリエイターボックスを運営するManaさんの書籍です。

『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』は基礎学習向けの書籍で、『ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座』は比較的新しめのプロパティなども使い、実際にいくつかサイトを作ってみる構成になっています。

2冊とも初学者向けなので、書籍で勉強したい方にはおすすめです。

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML CSSとWebデザイン実践講座 (DL特典: CSS クラス名 チートシート)

ドットインストール

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

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

Progate

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

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

サルワカ

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

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

webliker

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

模写修行

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

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

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

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

JavaScriptを勉強するのにおすすめの書籍やサイト

JavaScriptを勉強するのにおすすめのサイトを紹介します。

ドットインストール

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

ともすたチャンネル

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

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

JavaScript Primer

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

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

WordPressを勉強するのにおすすめの書籍やサイト

WordPressを勉強するのにおすすめのサイトを紹介します。

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

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

ともすたチャンネル

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

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

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

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

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

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

デザインを勉強するのにおすすめの書籍やサイト

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

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

chot.design

0からデザインを勉強する方にはかなりおすすめのサイトです。月額1100円かかりますが、十分払う価値はあると思います。

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

chot.design

LIGさんのメディア

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

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

knowledge / baigie

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

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

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

@tak_dcxiさんのnote

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

Adobe XD Trail

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

書籍で学びたい方は、下記がおすすめです。

Adobe XDではじめるWebデザイン プロトタイピング 一歩先行く現場のスキル

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

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

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

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

独学の補助に使えるサービスとして、月2980円で質問し放題の侍テラコヤがおすすめです。加えて、40種類以上の教材で学習し放題なので、まずはこれだけで基礎を固めてから、書籍や他のサービスを使う流れでも良いかもしれません。

↓レビュー記事

人数制限があるのでお早めに！👀

侍テラコヤ 公式サイト