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

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

• HTML・CSS
• JavaScript
• WordPress
• デザイン

web制作に必要なスキルの定義は人によって違いますが、この記事では上の4つとします。

勉強や調べごとをする際の注意点

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

• 高額なスクールやサロンは必須ではない
• 検索上位のサイトが良い情報とは限らな

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

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

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

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

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

これらの方は検討しても良いと思いますが、この仕事は好き嫌いもあるので、まずは独学で勉強してみることがおすすめです。

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

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

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

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

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

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

web制作の勉強の順番と必要な時間の目安

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

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

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

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

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

Twitterでは上のような情報も多いですが、全くそんなことはありません。一人前になるには数年単位で勉強が必要だと思った方が良いです。

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

前置きが長くなってしまいましたが、ここからweb制作の勉強をする際におすすめな書籍やサイトを紹介します。まずはHTML・CSSを勉強する際におすすめの書籍やサイトです。

書籍

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

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

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

【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

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

ドットインストール

HTML・CSSに限らず、多くの言語を扱っているので、プログラミングを勉強したい人にもおすすめです。プレミアム会員は、月に1000円程度かかりますが、払う価値はあります。

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

Progate

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

プログラミングに触れてみる目的で使うには良いですが、本格的に勉強するのにはあまり向かないと個人的には思います。

サルワカ

Zennを作った方が運営しているサイトです。

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

webliker

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

模写修行

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

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

• 基礎学習を終えて実践的な経験を積みたい
• 破綻しない書き方を学びたい(= CSS設計を意識したコーディングを学びたい)
• 実務と同じようにXDのデータを見ながらコーディングの練習をしたい
• 現役で制作をやっている人のコードを見たい

こんな方にはおすすめです。

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

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

ドットインストール

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

• JavaScriptで始めるお手軽プログラミング
• JavaScriptでミニアプリを作ってみよう

この2つを繰り返しやると良いです。

ともすたチャンネル

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

運営者の谷口さんは書籍やUdemyも出している方で、解説もとてもわかりやすいです。※ 解説のわかりやすさは無料動画を見て感じたことで、この記事で紹介しているJavaScriptの動画は見ていません。

JavaScript Primer

JavaScript Primerという書籍のweb版です。無料にも関わらず書籍の内容が全て記載されていて、メンテナンスもされています。

メンテナンスされて、新しい機能や仕様にも対応されていることはとても凄いことです。

ただ内容は少し難しめなので、先にドットインストールなどで学習してからのほうが良いかもしれません。

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

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

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

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

ともすたチャンネル

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

こちらも内容は見ていませんが、Twitterで凄く評判が良いです。

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

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

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

chot.design

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

LIGさんのメディア

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

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

knowledge / baigie

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

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

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

@tak_dcxiさんのnote

とても実務的で、かつこれから勉強しようと思っている方は勉強しなければいけないことも、しっかり把握できると思います。

Adobe XD Trail

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

サルワカ

Photoshopの使い方を丁寧に紹介しています。

最終更新が2017/07/12なので、少し情報が古かったり、今の画面と変わっている可能性はあります。