Web制作を独学で学ぶために参考にした本・サイトまとめ【言語別に紹介】
ども、づみです。
Web制作の勉強、はかどってますか？
** 独学でWeb制作を勉強しようと思うと、本や色々なサイトがありどこでどのように勉強したらいいか迷うことないですか？**
自分も未経験で独学をしている際に「勉強はしているものの、いまいち実力がついているかわからない。どこでどのように勉強したらいいんだ！」と思うことがよくありました。
というわけで本記事では、僕がWEB制作を独学で学んだ際に読んだ本や利用したサイトをまとめました。
勉強方法に悩んでいる方の参考になれば嬉しいです。
本記事の内容
-
Web制作で独学のために読んだ本やサイトの紹介
-
各本・ツールの特徴や効果的な使い方を解説
本記事の信頼性
-
Web制作を独学で学び、Web制作会社に入社
-
Webディレクター
-
副業でWeb制作事業。年間売り上げは250万円越え
HTML/CSS（SCSS）編
ドットインストール
出典：ドットインストール
プロゲートと並んでプログラミング学習サイトとして有名なサービスです。すでに利用している人も多いはず。ぼくはWebのことを何もわからなかったときにドットインストールでお世話になりました。
実際にエディタなどの環境構築を自分でする必要があるので実務に近い形で勉強できます。
プログラミングのレッスン一覧 - プログラミングならドットインストール
ポイント
-
1番初めの学習に最も良い
-
実際にエディタを使ってやるので実戦に近い
-
作りながら学べる
プロゲート
出典：プロゲート公式
言わずもがな有名な学習サービス。
プロゲートの特徴は、ゲーム感覚でプログラミングを学習できることですね。「WEB制作にちょっとだけ興味あるかも…」ぐらいのときに利用するのがおすすめ。
Progate(プロゲート) | Learn to code, learn to be creative.Progate
ポイント
-
ゲーム的な感じ
-
最初に触れるくらいの使い方でOK
-
実践的じゃないのでドットインストールの方がおすすめ
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
WebクリエイターManaさんによる著書。「WEB制作を本格的に勉強しよう！」と思ったときに購入した1冊です。
内容は1つのカフェサイトを作りながら実践的に学べるものになっています。
めちゃくちゃボリューミーでもなく、挫折しない。ほどよい感じでして、なんというかデザインがいいのか、、すらすらと読み進めやすかったですね。
ドットインストールで学習を終えた後にもうちょっと本格的なサイトを作りたくなると思うので、ドットインストールを終えてから実践するのがおすすめです。
ポイント
-
ドットインストールでざっくり理解の次に読むべき本
-
実際のサイトを作りながら学べる
-
本を追っかけながらなのでじっくり深く理解できる
テックアカデミー Youtube
ドットインストールと本で勉強したんですけどちょっと不安が大きかったので、さらに勉強しました。実際はそこまでやらなくても良いと思います。
下記2講座を1周して理解を深めるのに役立ったと思います。なにより説明がわかりやすかったですね。
はじめてのHTML入門講座
https://youtube.com/playlist?list=PLjw-30bsJNVU87F5iCPAW9kB4QDUGQxUG
はじめてのCSS入門講座
https://youtube.com/playlist?list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041
ポイント
-
説明がわかりやすい
-
ドットインストールの無料範囲に物足りなかったらこれがおすすめ
CSS設計完全ガイド ～詳細解説＋実践的モジュール集
ある程度サイトが作れるようになると、「最適なCSS設計」を求められるようになります。
これは中級者レベルの話なので、今は無視しておっけい。
CSS設計の勉強には本を利用しました。ネットで調べても良いのですが、具体的な例はなかなか少ないので本で学習しました。
今でもたまに見る良本です。
-
ある程度サイトが作れるようになってから読むべき本
-
複数人で担当するプロジェクトには必須の知識
-
何度も見返す用です
Javascript/JQuery編
デイトラ
出典：デイトラ公式サイト
JSの勉強にはデイトラのカリキュラムが役立ったと思います。(実は一時期プログラミングスクールで勉強してました。（笑）)
当時の詳細はこちら
やることは他の学習サイトと変わらないです。ただ、当時はデイトラで学習していたので1つに入れさせていただきました。
まあ高いお金を払うのが嫌って人はやめといたほうがいいです。下記の記事にも書きましたが、すべて独学で習得可能。
-
カリキュラム方式で学べるオンラインスクール
-
メンターに質問し放題
-
実践しながらガッツリ学べる
ドットインストール
再度登場、ドットインストール。基礎を理解するのに利用しました。現状はPREMIUM会員じゃないとあまり動画を見れないみたいですね。
とはいえ、JSにちょっと触れる程度には十分に役立つと思います。下記2本の実践がおすすめ
参考はじめてのJavaScript (全8回) - プログラミングならドットインストールドットインストール
参考JavaScriptでおみくじを作ろう (全12回) - プログラミングならドットインストールドットインストール
ポイント
-
JSの基礎を理解するのにおすすめ
-
あんまり見れる動画が多くない
動くWebデザインアイデア帳
動くWebデザインアイデア帳は、Web制作の現場でよく使うアニメーションなどをまとめたサイトです。
学習サイトではないですが、実装方法の参考によく見させていただいてます。
参考動くWebデザインアイデア帳 | 動くWebデザインアイディア帳動くWebデザインアイデア帳
ポイント
-
コードをまるっとコピペできる
-
いろんなアニメーションパターンを見れる
-
実装例を見れるので、自分のと比べてどうなのかを確認できる
個人でツール作成
別記事でも書きましたが、JSは自分でツールを一から作ることが1番勉強になったと思います。
例えば、見積もりツールなどフォーム部分のフロント制御があるツールを作ればいいと思います。
- 1番しんどいが、1番身につく
PHP（Wordpress）編
GRAYCODE
出典：GRAYCODE
PHPを学ぶうえでGRAYCODEさんにはとてもお世話になりました。
最も勉強になったのは、「ひとこと掲示板をつくる」の記事です。簡易的な掲示板を作る手順を丁寧に一から解説してくれています。
掲示板を作ることで、PHPの基礎はかなり深まると思います。
ポイント
-
神サイト
-
掲示板の作り方を1から学べます
-
掲示板1週で「PHPなんとなくわかる」になれる
ビジネスサイトを作って学ぶ WordPressの教科書
WordPressの学習にはこちらの本を利用しました。値段は少しお高めですが、WordPressでオリジナルテーマを作るのが初めての人にとてもおすすめ。
形式は1つのビジネスサイトを作りながら学んでいくものです。
ポイント
-
WordPressの勉強初期におすすめ
-
サイトを作りながら学べる
まとめ
というわけで、ぼくがWeb制作の勉強で読んだ本や利用してきたサイトを紹介しました。あまり目新しいものはなかったかもですが、学習の参考になれば幸いです。
独学頑張りましょ！
それではっ！
