【Web制作】独学でコーディングを身につけるための具体的な勉強法

2021 11/08

2020年7月12日 2021年11月8日

こんにちはTERUです。
フリーランスでWEB制作をしています。

プログラミング初学者Aさん

「コーディングって独学で習得できるの？」
「効率的な勉強方法が知りたい」

本記事では、こういった疑問に答えます。

そもそもコーディングって何？どんな働き方や学習方法があるの？という事が気になる方は「コーディングとは？働き方や学習方法を解説する【初心者向け】」の記事をご覧ください。

独学でもコーディング（Web制作）の勉強は可能です！【具体的な勉強方法】

結論として、独学でもコーディングを習得することは可能です。
個人差は有りますが、頑張れば２〜３ヶ月である程度サイト制作に必要なスキルは習得できます。
※僕の場合、平日４時間、休日２時間程度の学習で約２ヶ月ぐらいでした。

なぜなら、最近はインターネット上に無料・有料含めて、コーディングを独学で勉強できる環境が整っているからです。
以下のようなサービスが有名です。

ここでは、僕が実際にどのような流れでコーディングの勉強を行ったのかを解説します。
※コーディングを無料で勉強できるWebサービスについては、以下の記事でまとめています。

Progateはオンラインでプログラミング学習ができるサービスです。

コードの記述や結果の確認も全て、ブラウザ上で学習が完結します。
環境構築など初心者がつまずきやすいポイントがないので、ゲーム感覚で学習を進めていけます。

おすすめは「HTML & CSS」コースの初級、中級、上級コースを２周ぐらいすれば、なんとなくHTMLとCSSの使い方に慣れると思います。
中級、上級コースについては有料プラン（980円/月額）ですが、そんなに高くないので僕は１ヶ月間だけ有料プランにして、やり込みました。

おまけ

Progateはアプリのサービスも提供されています。
アプリの場合、コードを打つというよりは、選択肢の中から回答を選ぶスタイルですが
通勤中などの移動時間にサクッと出来るので、一度試してみて下さい。

Progateの次にドットインストールを利用しました。
1回約3分ほどの動画をみながら、学習を進めていくサービスです。

Progateとは違い、ブラウザ上で完結せずに環境構築からサイト制作までを一通り行うのでHTML/CSSの理解が深まります。

ここまで勉強すると、あとは手を動かして、ひたすら経験を積むだけです。
経験値を上げる方法としては、大きく２点あります。

自分が好きなサイトがある方は、そのサイトの模写をしてみるのが一番早く成長できます。

僕の場合は、ここで予定外のいきなり実案件を経験することになったので苦労しました。。
模写または、実践に近い形でサイトを１から作っておく経験は早めに積んでおいた方がいいと思います。

何から模写したらいいか分からない方には
以下のサイトがオススメです。

一般的なLPですが、コーディングでよく使うコンテンツの並べ方や装飾については勉強できます。

おまけ

Pinterestから探すこともできます。

Pinterestはデザイナーさんがよく使うサービスで、HP含めた様々なデザインが見れるサイトです。そこで「lp デザイン」で検索してもらうとオシャレなLPデザインが出てくるので、そこから模写するサイトを探すのもいいと思います。

模写以外の練習方法としては、練習用のデザインデータをもとにコーディングする方法です。

模写コーディングよりも実案件の流れに近いので、僕自身は模写よりこちらの方法がオススメです。

おすすめのコーディング練習用デザインを紹介します。

実作業でコーディングを行う場合、デザインデータを基に作業を行います。
デザインデータの中でも多いのが下記の２つです。

各デザインデータのコーディング方法については、こちらを参考にしてください。

PSDデータの場合