独学でWeb制作学ぶ!動画で始める挫折しない勉強法

独学でWeb制作を学びたい!という人はとても多いです。

しかし、Web制作の勉強は挫折する人も多いです。

今回は私が考える挫折しにくい学習ステップから、
実践的なHTML+CSSコーディングのトレーニングを紹介します。

本から勉強に入ると挫折する

Web制作を勉強する方法は大きく分けると3つあります。

  • スクールに通う
  • 動画講座
  • オンラインスクール

これを学習難易度にすると。

学習難易度(高 → 低)
本 > 動画講座 > オンラインスクール > スクールに通う

そう、本で勉強するのはもっとも難易度が高い方法なんです。

未経験者が本で挫折する理由

プログラミングの勉強は「新しい言語を覚えるようなもの」と言われることがあります。

初めて英語を勉強する時に、
文法の細かい説明はスルーして、まずは簡単な発音から入ると思いますが、

それと同じくWeb制作やプログラミングの勉強も、
初めは細かいところはスルーして進めるのが習得へのカギとなります。

他にも初心者が本の勉強で問題なる事があります。

本で勉強することの問題点

・最初はスルーしても良い部分も、順序立てて説明している事が多い
・文字を読むというのは音声を聞くよりも疲れる
・コードが途中をスキップして進んでしまい理解できなくなる

本でWeb制作を勉強するときは、ほとんどが未知の知識になるため、
よくわからない説明を読み進めていく事になります。

本の勉強で一番多い挫折パターンが、理解出来す先に進めなくなるパターンです。

また本は、ゆっくりと進んでいたのに、
いきなり大量のコードの登場で理解できなくなるパターンもあります。

書籍は全体のページ数は決まっているのか、

プログラム系だと急に難易度が上がったり、
あとはコード自体に誤りがあり先に進めなくなることがあります。

私も本で勉強して挫折しました

私はフリーランスのフロントエンドエンジニアになり2年ほど経ちました。

それまでは10年、4社のWeb制作会社で働いて来ています。

この業界で働き始めてから、常に勉強はつづけていて、
働いていてストレスもないので、私自身も自分に向いている仕事だと思っています。

しかし、そんな私でも22歳の時、初めてHTMLの本で勉強して数日で挫折しました。

今なら原因がわかります。
真面目すぎて順番通り進めて、理解できない部分も必死に理解しようとしたためです。

理解出来ない内容を、何度も理解しようと繰り返し読むという行為は非常に疲れます。

そして理解できない自分に苛立って情けなくなっていました。

しかし、Web制作・プログラミングというのは、

知識をつけることが目標ではなく物を作ることが目標です。

手を動かしていくうちに少しづつ自分の作ったもの、自分の書いたコードが出来ていくことで、
学びながらも楽しさが出てきます。

当時、俗に言うブラック企業で営業の仕事をしていた私は、
「どうしても今の環境から抜け出したい」
「営業などではなく専門職に付きたい」
と思っていたため、

諦めきれずに、スクールに通うことにしました。

それからはWebの勉強に挫折することもなく、無事にWeb制作会社に転職する事ができました。

あのまま本で勉強を続けていたら・・・、
きっとフリーランスで自由に暮らしている今は無かったです。

今はスクールに通う以外にも動画など勉強できる時代なので、
おすすめの勉強法を書いていきます!

私の考えるWeb制作をもっとも学びやすい方法

私がおすすめするWeb制作の勉強法は、
動画講座をメインにするのがおすすめです。

最初は本を買わなくて良いです。
動画講座が一通り終わってから、次のステップで購入します。

動画で勉強するメリットを紹介します

  • 動画は勝手に進むので難しい話は、頭が勝手にスルーしている
  • コードを書く時は、動画と一緒に進めていくので理解しやすい
  • ネット環境があれば気軽に初められる

人間は調子の良いもので、難しい話とかは勝手に頭がスルーしていきます。

Webの勉強の場合は、後々必要と思ったら見返すなりすれば良いです。

そもそも動画講座はあまり難しい話はせず、
実際のコードを書きながら進めていくものが多いです。

HTML+CSSの勉強ステップ

Web制作の基本となるHTML+CSSの勉強方法。

動画講座から始まり、
HTMLコーディングの実践トレーニングまでを説明します。

  • 勉強1:ドットインストールの動画講座で勉強
  • 勉強2:Progate(プロゲート)の学習サービスで勉強
  • 勉強3:本を購入して知識を補足
  • 勉強4:実践トレーニグ(サイトをキャプチャしてコーディング練習)

勉強1:ドットインストールの動画講座で勉強

ドットインストールはプログラミング全般の講座が幅広くあります。

無料と有料(プレミアム会員/月980円)の動画があります。
HTML+CSSについては無料版講座だけで十分です。

会員登録しなくても動画視聴はできますが、
動画講座で必要な素材は、無料会員登録が必要なので登録しておきましょう。

「ホームページを作れるようになろう」の無料講座で勉強

レッスン一覧の「ホームページを作れるようになろう」の無料講座を一から進めます。
ドットインストール レッスン一覧

ドットインストール「ホームページを作れるようになろう」無料講座
HTML/CSSの学習環境を整えよう [Windows編] (全4回)
HTML/CSSの学習環境を整えよう [macOS編] (全4回)
HTML入門 (全15回)
CSS入門 (全17回)
HTML基礎文法入門 (全30回)
CSS基礎文法入門 (全37回)
CSSレイアウト入門 (全15回)
実践!ウェブサイトを作ろう (全16回)
CSSで吹き出しを作ろう (全8回)

おそらくこれだけでも結構時間がかかると思います。

ドットインストールでは実務で使うようなエディタの準備も動画にあるため、
とても勉強になります。

勉強2:Progate(プロゲート)の学習サービスで勉強

Progateは、動画講座ではなく、
ブラウザに打ち込む形で学習するサイトです。

Progateも無料と有料(有料プラン/月980円)の講座があります。
ほぼ有料講座のため、月980円払って会員登録が必要になります。

勉強が終わったら解約すれば良いので、1〜2ヶ月で済むかと思います。

ドットインストールも同じくですが、Progateも必要な時に契約して、
しばらく使わない時は解約したほうがお得です。

Progateは穴埋め問題のような形式の講座

Progate HTML&CSS講座

Progateの講座は自分のPCにファイルを作るのではなく、
学習サービスのブラウザにコードを打ち込んでいきます。

ドットインストールの動画をそのまま写していく学習とは違い、

Progateでは、テストの穴埋め問題に近い形になっており、
提示された問題や課題に対して、自分で考えてコードを書いていきます。

ドットインストールを勉強した後であればサクサク進みますが、
徐々に本格的なサイト制作になってきます。

「道場コース」という課題も有り

「道場コース」という見本と全く同じデザインを、
一から作っていく講座もあります。

とても実践的なので、基礎を学んだらチャレンジしてみてください!

勉強3:本を購入して知識を補足

やっと出てきました書籍です。

ドットインストールやProgateでは、
Web制作をするにあたり、必要な説明は一通りしてあります。

しかし、Webの技術はとても幅が広いため、
情報の網羅性が高い本を購入して読んでいきます。

すでに知っている部分は飛ばしつつ、
ドットインストールやProgateで学ばなかった部分をピックアップして読んでください。

基礎がわかっている状態であれば、
本のコードを書き写すなどしなくても、目を通すだけでも理解できるようになっています。

勉強4:実践トレーニグ(サイトをキャプチャしてコーディング練習)

ここまでで、Web制作の基礎はマスターしています。

最後にHTML+CSSの実践トレーニングとして、
実際のサイトをスクリーンショットを撮り、コーディングしていく勉強方法をやっていきます。

実際の仕事ではデザイナーからpsdのデザインデータをもらいますが、
その代わりにスクリーンショットを使う、実践に近いコーディングが勉強できます。

この勉強にはPhotoshopが必要になります。
PhotoshopはWeb制作をするのであれば必須ですので、ライセンス契約しておきたいです。

30日であれば体験版もあります。

Adobe Photoshop 980円/月〜

サイトをキャプチャしてコーディング練習

  • アニメーションの無い企業サイトをスクリーンショットで保存
  • 作るのはTOPページ・カテゴリーページ・記事ページの3つ
  • コーディングが終わったら、Photoshopで重ねてみてチェック

コーディングの練習は、デザインデータが無いとできません。

デザイナー志望であれば自分で作るのもよいですが、
そうでない場合は、適当な企業のサイトを使うのが良いです。

もちろん、作ったデータなどはWebには公開してはいけません。

もし就職のため面接を受けるのであれば、
こういった実践に近いトレーニングは面接でアピールするポイントになります。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。