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

カフェで勉強する様子

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

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

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

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

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

目次

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

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

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

  • Progate
  • ドットインストール
  • デイトラ

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

勉強の流れ

  1. ProgateでHTML/CSSに慣れる
  2. ドットインストールでHTML/CSSの理解を深める
  3. 模写または実践で経験値をあげる

1つずつ順番に解説いたします。

ProgateでHTML/CSSに慣れる

Progate
Progate(プロゲート) | Learn to code, learn to be creative. Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

Progateの特徴や使い方については、「Progate(プロゲート)だけで仕事できる?現役フリーランスがよくある疑問に回答してみた」にもまとめています。


Progateはオンラインでプログラミング学習ができるサービスです。
プロゲートのサービス利用画面
コードの記述や結果の確認も全て、ブラウザ上で学習が完結します。
環境構築など初心者がつまずきやすいポイントがないので、ゲーム感覚で学習を進めていけます。

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

おまけ

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

ドットインストールでHTML/CSSの理解を深める

あわせて読みたい
ドットインストール HTML, CSS, JavaScript, PHP, Rubyをはじめ、iPhoneやAndroidアプリの作り方も学べます。豊富な3分動画を見ることで、はじめての人でも無理なくスキルを身につけていくこと...


Progateの次にドットインストールを利用しました。
1回約3分ほどの動画をみながら、学習を進めていくサービスです。
ドットインストールの学習目次
Progateとは違い、ブラウザ上で完結せずに環境構築からサイト制作までを一通り行うのでHTML/CSSの理解が深まります。

ひたすら手を動かして経験値をあげる

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

  • 自分の好きなサイトを模写コーディング
  • 練習用のデザインデータをもとにコーディング

自分の好きなサイトを模写コーディング

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

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

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

iSara[イサラ]|バンコクのノマド...
iSara[イサラ]|バンコクのノマドエンジニア育成講座 iSaraとは「稼ぐこと」にフォーカスしたエンジニア育成講座です。なお、iSaraで「基本的なプログラミングスキル」は教えません。基礎的なプログラミングスキルは無料で学べ...


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

おまけ

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

Pinterest
Pinterest Discover recipes, home ideas, style inspiration and other ideas to try.


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

練習用のデザインデータをもとにコーディング

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

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

【Web制作初心者におすすめ】コーディング練習用デザインデータ

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

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

  • Photoshopのデザインデータ(PSD)
  • Adobe XDのデザインデータ(XD)

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

PSDデータの場合

XDデータの場合

デザインデータからのコーディングは、なかなか独学では学習できない(そもそもデザインデータがない)ので僕も実案件で四苦八苦しながら覚えていきました。。

今回、WEBデザイナーの【いぐちようこ】さんが、コーディング練習用に架空サイトのデザインデータ(PSDとXD)を無償で提供してくれているので、是非ダウンロードして実際に、デザインデータからのコーディング作業を経験してみてください。

【PSDデータのコーディング練習用架空サイト(コーヒーショップ)】
コーディング練習用の架空サイトイメージ

以上がWeb制作のコーディングを独学で身につけるための具体的な勉強法になります。

これからコーディングを勉強してみようという方の参考になれば嬉しいです。
以上です。

サイト制作のご依頼について

フリーランスチームにて、ホームページ・ECサイトの制作も行っております。
計画立案から制作、納品、運用までトータルでサポートいたしますのでお気軽にご相談ください。
※初回相談無料

よかったらシェアしてね!
目次
目次
閉じる