独学でWeb制作を学びたい！という人はとても多いです。
しかし、Web制作の勉強は挫折する人も多いです。
今回は私が考える挫折しにくい学習ステップから、
実践的なHTML+CSSコーディングのトレーニングを紹介します。
本から勉強に入ると挫折しやすい
Web制作を勉強する方法は大きく分けると4つあります。
- 本
- 動画講座
- オンラインスクール
- スクールに通う
これを学習難易度にすると。
学習難易度（高 → 低）
本 ＞ 動画講座 ＞ オンラインスクール ＞ スクールに通う
この通りで、本で勉強するのはもっとも難易度が高い方法となります。
未経験者が本で挫折する理由
プログラミングの勉強は「新しい言語を覚えるようなもの」と言われることがあります。
初めて英語を勉強する時に、文法の細かい説明はスルーして、まずは簡単な発音から入ると思いますが、
それと同じくWeb制作やプログラミングの勉強も、
初めは細かいところはスルーして進めるのが習得へのカギとなります。
他にも初心者が本の勉強で問題なる事があります。
本で勉強することの問題点
- 最初はスルーしても良い部分も、きっちり順序立てて説明している
- 文章を読むというのは音声を聞くよりも疲れる
- 本のコードが途中をスキップして進んでしまい理解できなくなる
本でWeb制作を勉強するときは、ほとんどが未知の知識になるため、よくわからない説明を読み進めていく事になります。
本の勉強で一番多い挫折パターンが、理解出来す先に進めなくなるパターンです。
また最初はゆっくりと進んでいたのに、いきなり大量のコードの登場で理解できなくなるパターンもあります。
書籍は全体のページ数は決まっているのかと急に難易度が上がったり、コード自体に誤りがあり先に進めなくなることが割と良くあります。
Web制作を動画で学ぶ
私がおすすめするWeb制作の勉強法は、動画講座をメインにするのがおすすめです。
最初は本を買わず、動画講座が一通り終わってから次のステップで購入します。
動画で勉強するメリット
- 動画は勝手に進むので難しい話は、頭が勝手にスルーしている
- コードを書く時は、動画と一緒に進めていくので理解しやすい
- ネット環境があれば気軽に初められる
人間は調子の良いもので、難しい話とかは勝手に頭がスルーしていきます。
Webの勉強の場合は、後々必要と思ったら見返すなりすれば良いです。
そもそも動画講座はあまり難しい話はせず、実際のコードを書きながら進めていくものが多いです。
HTML+CSSの勉強ステップ
Web制作の基本となるHTML+CSSの勉強方法。
この勉強はハードルの低い動画講座から始まり、最後はネットに上がっているサイトをキャプチャしてコーディングする、実践トレーニングまでを説明します。
サイトをキャプチャしてのコーディング訓練は就職・転職をしたいのであれば面接でアピール出来ますのでおすすめです。
- 勉強1：HTMLのタグなどの基礎を学ぶ（Progateで学ぶ）
- 勉強2：自分のPCで実際に作りながら学ぶ（ドットインストールで学ぶ）
- 勉強3：本を購入して知識を補足
- 勉強4：実践トレーニグ（サイトをキャプチャしてコーディング練習）
勉強1：HTMLのタグなどの基礎を学ぶ（Progateで学ぶ）
まずはProgateでHTML基本のタグなどを勉強していきます。
ここでは基礎のHTMLタグを覚えながらHTMLコードを書いていく練習となります。
Progate | プログラミングの入門なら基礎から学べるプロゲート
Progateの良いところはブラウザに打ち込んてで勉強する方式のため、ブラウザだけあれば進められます。
初心者が勉強に入りやすい学習サービスです。
無料と有料（プレミアム会員/月980円）の動画がありますが、HTML+CSSについては無料版講座だけで十分です。
動画講座で必要な素材は、無料会員登録が必要なので登録しておきましょう。
勉強2：自分のPCで実際に作りながら学ぶ（ドットインストールで学ぶ）
次にドットインストールで自分のPCに.htmlファイルなどを作りながら勉強していきます。
Progateは初心者にもわかりやすくサービスですが、自分のPC上で作っていないため実務とは程遠いです。
ドットインストールでは、より実際の作業に近い形での勉強となります。
ここでは自分のPCで上にhtmlファイルなどをつくり、ブラウザで閲覧できる状態にしていきます。
ドットインストール | 3分動画でマスターするプログラミング動画サイト
ドットインストールの講座
レッスン一覧の「ホームページを作れるようになろう」の無料講座を一から進めます。
ドットインストール レッスン一覧
ドットインストール「ホームページを作れるようになろう」無料講座
HTML/CSSの学習環境を整えよう [Windows編] (全4回)
HTML/CSSの学習環境を整えよう [macOS編] (全4回)
HTML入門 (全15回)
CSS入門 (全17回)
HTML基礎文法入門 (全30回)
CSS基礎文法入門 (全37回)
CSSレイアウト入門 (全15回)
実践！ウェブサイトを作ろう (全16回)
CSSで吹き出しを作ろう (全8回)
おそらくこれだけでも結構時間がかかると思います。
ドットインストールでは実務で使うようなエディタの準備も動画にあるため、
とても勉強になります。
勉強3：本を購入して知識を補足
一通りHTMLの知識がついたら書籍を購入します。
動画だと情報が偏っているため、そこを補強するために情報が網羅されているものがおすすめです。
基礎がわかっている状態であれば、本のコードを書き写すなどしなくても、目を通すだけでも理解できるようになっています。
その中で実際にコードにしてみたものがあったら実際にコードとして書いてみる、という流れで進めます。
勉強4：実践トレーニグ（サイトをキャプチャしてコーディング練習）
最後にHTMLとCSSの実践トレーニングとして、
実際のサイトをスクリーンショットを撮り、コーディングしていく勉強方法をやっていきます。
実務ではデザイナーからpsdのデザインデータをもらいますが、
その代わりにスクリーンショットを使うと、実践的なコーディングが勉強できます。
この勉強にはPhotoshopが必要になります。
PhotoshopはWeb制作をするのであれば必須ですので、ライセンス契約しておきたいです。
30日であれば体験版もあります。
サイトをキャプチャしてコーディング練習する流れ
- アニメーションの無い企業サイトをスクリーンショットで保存
- 作るのはTOPページ・カテゴリーページ・記事ページの3つ
- コーディングが終わったら、元のスクリーンショットと比較してうまくコーディング出来ているかチェック
就職のため面接を受けるのであれば、このキャプチャコーディングは実践に近いトレーニングなので、面接でアピールするポイントにしても良いと思います。
その場合は、レンタルサーバーでベーシック認証かけて一般公開しないように注意してください。
プログラミングの勉強方法
HTMLとCSSを勉強したらプログラミングの勉強として、JavaScriptかPHPを学ぶのも良いです。
基本は、Progateとドットインストールで学ぶ流れは同じですが、プログラミングの場合はHTMLよりは習得が難しいです。
そのあたりも含めて、プログラミング学習方法の記事に書いています。
人気記事
