【Web制作】独学でコーディングを身につけるための具体的な勉強法【副業・フリーランス向け】

カフェで勉強する様子

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

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

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

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

そもそもWEB制作って何?どんな働き方や学習方法があるの?という事が気になる方は【現役フリーランスが解説】WEB制作を仕事にする方法【副業・フリーランス向け】の記事をご覧ください。

目次

独学でもコーディング(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の理解を深める

あわせて読みたい
ドットインストール 3分動画で初心者や独学の方でも無理なく勉強が続くプログラミング学習サービスです。Web制作の基礎から子供向けのゲーム制作レッスン、さらにシステム開発に使われるPHP、R...


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での検索結果画面

模写したサイトを本番サイトに公開するのは絶対にやめましょう!
検索結果に表示されるとインターネットを利用される方の不便になります。
※もちろん模写したサイトの運営者にも迷惑をかけてしまいます。

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

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

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

補足:独学には自信がない方向けの学習方法【オンラインスクール】

独学に自信がない方には、オンラインスクールでの学習がおすすめです。

こんな人が対象

  • 一人だと多分サボってしまう、継続する自信がない。
  • 学習中に相談できるエンジニアの人が欲しい。
  • 独学してたけど挫折してしまった。

オンラインスクールは、独学よりも費用はかかりますが、効率的にスキルを取得することができます。

おすすめのオンラインスクールは下記の3つです。

おすすめ①:デイトラ

デイトラ

デイトラは、現場で必要なスキルの学習に特化した業界最安値のオンラインスクールです。

デイトラの特徴
  • 全てのコースが10万円以下で利用できる。
  • 教材は、閲覧無制限で随時アップデートされる。
  • 定期的に開催される勉強会が無料で参加できる。
  • 各コース毎にコミュニティーが用意されており、受講生同士で交流ができる。
  • SNSでの評判が高い。

短期間で実践的なスキルを学習したい方や、同じ目標を持った仲間と一緒に勉強したい方におすすめです。

おすすめ②:Tech Academy

TeckAcademyのTOPページ

Tech Academy は、現役エンジニアから学べるオンラインに特化したスクールです。

Tech Academyの特徴
  • メンターの質がいい。
    • 実務経験ありの現役エンジニアが相談に乗ってくれる。
    • 通過率10%の選考から選ばれている。
    • 相談できる機会が多く用意されている。
      • 週2回のマンツーマンメンタリング
      • 毎日15時〜23時のチャットサポート
      • 回数無制限の課題レビュー
  • 受講生や卒業生向けに副業・転職支援サービスも充実している。

現役エンジニアにマンツーマンで相談できる環境が欲しい方や案件獲得や転職支援までサポートしてほしい方におすすめです。

おすすめ③:侍テラコヤ

侍テラコヤ

侍テラコヤは、月額2980円〜から利用できるサブスク型オンラインスクールです。

侍テラコヤの特徴
  • 入会金・解約金は無料
  • 実践型の教材が40種類以上あり、どれでも学習できる。
  • 教材とそれに紐づく課題があり、自分でトライアンドエラーを繰り返しながら
    エンジニアに必要な「自走力」を鍛えることができる

入会金・解約金は無料で月額料金も安いので、初期費用をかけずに、いろんなスキルをお試しで勉強してみたい方にはおすすめです。

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

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

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

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

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

PSDデータの場合

XDデータの場合

figデータの場合

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

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

上記のデザインデータ(架空サイト)をコーディングして、本番サイトに公開するのはご遠慮ください。架空の店舗のため、検索結果に表示されるとインターネットを利用される方の不便になります。

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

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次