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

カフェで勉強する様子

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

読者の悩み

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

コーディングは、独学である程度身につけることは可能です。

なぜなら、私自身が30代未経験から、独学である程度コーディングのスキルを身につけた上で転職した経験があります。

最近は無料も含めて数多くの学習サービスが充実しているので、どれから勉強していくのか迷われる方も多いと思います。
本記事では、私が実際に行ったコーディングの勉強方法を紹介します。

一人で勉強するのはしんどいという方にはオンラインスクールでの学習もおすすめです。

オンラインスクール特徴
デイトラ現場で必要なスキルの学習に特化した業界最安値のオンラインスクール
テックアカデミー 現役エンジニアから学べるオンラインに特化したスクール
侍テラコヤ月額2980円〜から利用できるサブスク型オンラインスクール
おすすめのオンラインスクール一覧

本記事は、副業やフリーランスでWEB制作(主にコーディング)を仕事にしたい方を対象にしています。

目次

コーディングが身につく勉強方法【独学でも可能】

コーディングを身につけるには、下記3つステップで勉強していくのがオススメです。
個人差は有りますが、独学でも2〜3ヶ月でサイト制作に必要な基礎スキルは習得できます。

TERU

僕の場合、平日4時間、休日2時間程度の学習で約2ヶ月ぐらいでした。

ここでのスキルは、一般的なコーポレートサイトを制作するスキルを指しています!

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

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

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

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での評判が高い。

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

おすすめ②:テックアカデミー

TeckAcademyのTOPページ

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

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

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

おすすめ③:侍テラコヤ

侍テラコヤ

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

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

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

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

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

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

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

IllustratorやPhotoshop、XDなどWEB制作では、普段からAdobe製品を使用します。
複数のAdobeを使用する場合、Adobe CC コンプリートプランの契約がオススメです。

Adobe CC コンプリートプラン契約済みの方へ

既にAdobe CCを契約しており、毎月の支払いが少し高いなと思ってる方にお得な情報です。
デジハリ版Adobe CC学生教職員版)に乗り換えることで、年間4万円以上お得になります。

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

PSDデータの場合

XDデータの場合

figデータの場合

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

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

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

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

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

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

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