こんにちはTERUです。
フリーランスでWEB制作をしています。
読者の悩み
- コーディングって独学で習得できるの？
- コーディングの効率的な勉強方法が知りたい？
コーディングは、独学である程度身につけることは可能です。
なぜなら、私自身が30代未経験から、独学である程度コーディングのスキルを身につけた上で転職した経験があります。
最近は無料も含めて数多くの学習サービスが充実しているので、どれから勉強していくのか迷われる方も多いと思います。
本記事では、私が実際に行ったコーディングの勉強方法を紹介します。
| オンラインスクール | 特徴 |
|---|---|
デイトラ | 現場で必要なスキルの学習に特化した業界最安値のオンラインスクール |
テックアカデミー
 | 現役エンジニアから学べるオンラインに特化したスクール |
| 侍テラコヤ | 月額2980円〜から利用できるサブスク型オンラインスクール |
本記事は、副業やフリーランスでWEB制作（主にコーディング）を仕事にしたい方を対象にしています。
コーディングが身につく勉強方法【独学でも可能】
コーディングを身につけるには、下記３つステップで勉強していくのがオススメです。
個人差は有りますが、独学でも２〜３ヶ月でサイト制作に必要な基礎スキルは習得できます。
TERU僕の場合、平日４時間、休日２時間程度の学習で約２ヶ月ぐらいでした。
なぜなら、最近はインターネット上に無料・有料含めて、コーディングを独学で勉強できる環境が整っているからです。
以下のようなサービスが有名です。
- Progate
- ドットインストール
- デイトラ
ここでは、僕が実際にどのような流れでコーディングの勉強を行ったのかを解説します。
※コーディングを無料で勉強できるWebサービスについては、以下の記事でまとめています。
ProgateでHTML/CSSに慣れる
Progateの特徴や使い方については、「Progate(プロゲート)だけで仕事できる？現役フリーランスがよくある疑問に回答してみた」にもまとめています。
Progateはオンラインでプログラミング学習ができるサービスです。
コードの記述や結果の確認も全て、ブラウザ上で学習が完結します。
環境構築など初心者がつまずきやすいポイントがないので、ゲーム感覚で学習を進めていけます。
おすすめは「HTML & CSS」コースの初級、中級、上級コースを２周ぐらいすれば、なんとなくHTMLとCSSの使い方に慣れると思います。
中級、上級コースについては有料プラン（980円/月額）ですが、そんなに高くないので僕は１ヶ月間だけ有料プランにして、やり込みました。
Progateはアプリのサービスも提供されています。
アプリの場合、コードを打つというよりは、選択肢の中から回答を選ぶスタイルですが
通勤中などの移動時間にサクッと出来るので、一度試してみて下さい。
ドットインストールでHTML/CSSの理解を深める
Progateの次にドットインストールを利用しました。
1回約3分ほどの動画をみながら、学習を進めていくサービスです。
Progateとは違い、ブラウザ上で完結せずに環境構築からサイト制作までを一通り行うのでHTML/CSSの理解が深まります。
ひたすら手を動かして経験値をあげる
ここまで勉強すると、あとは手を動かして、ひたすら経験を積むだけです。
経験値を上げる方法としては、大きく２点あります。
- 自分の好きなサイトを模写コーディング
- 練習用のデザインデータをもとにコーディング
自分の好きなサイトを模写コーディング
自分が好きなサイトがある方は、そのサイトの模写をしてみるのが一番早く成長できます。
僕の場合は、ここで予定外のいきなり実案件を経験することになったので苦労しました。。
模写または、実践に近い形でサイトを１から作っておく経験は早めに積んでおいた方がいいと思います。
何から模写したらいいか分からない方には
以下のサイトがオススメです。
一般的なLPですが、コーディングでよく使うコンテンツの並べ方や装飾については勉強できます。
Pinterestはデザイナーさんがよく使うサービスで、HP含めた様々なデザインが見れるサイトです。そこで「lp デザイン」で検索してもらうとオシャレなLPデザインが出てくるので、そこから模写するサイトを探すのもいいと思います。
練習用のデザインデータをもとにコーディング
模写以外の練習方法としては、練習用のデザインデータをもとにコーディングする方法です。
模写コーディングよりも実案件の流れに近いので、僕自身は模写よりこちらの方法がオススメです。
補足：独学には自信がない方向けの学習方法【オンラインスクール】
独学に自信がない方には、オンラインスクールでの学習がおすすめです。
こんな人が対象
- 一人だと多分サボってしまう、継続する自信がない。
- 学習中に相談できるエンジニアの人が欲しい。
- 独学してたけど挫折してしまった。
オンラインスクールは、独学よりも費用はかかりますが、効率的にスキルを取得することができます。
おすすめのオンラインスクールは下記の３つです。
おすすめ①：デイトラ
デイトラは、現場で必要なスキルの学習に特化した業界最安値のオンラインスクールです。
- 全てのコースが１０万円以下で利用できる。
- 教材は、閲覧無制限で随時アップデートされる。
- 定期的に開催される勉強会が無料で参加できる。
- 各コース毎にコミュニティーが用意されており、受講生同士で交流ができる。
- SNSでの評判が高い。
おすすめ②：テックアカデミー
テックアカデミー
は、現役エンジニアから学べるオンラインに特化したスクールです。
- メンターの質がいい。
- 実務経験ありの現役エンジニアが相談に乗ってくれる。
- 通過率10%の選考から選ばれている。
- 相談できる機会が多く用意されている。
- 週2回のマンツーマンメンタリング
- 毎日15時〜23時のチャットサポート
- 回数無制限の課題レビュー
- 受講生や卒業生向けに副業・転職支援サービスも充実している。
おすすめ③：侍テラコヤ
侍テラコヤは、月額2980円〜から利用できるサブスク型オンラインスクールです。
- 入会金・解約金は無料
- 実践型の教材が４０種類以上あり、どれでも学習できる。
- 教材とそれに紐づく課題があり、自分でトライアンドエラーを繰り返しながら
エンジニアに必要な「自走力」を鍛えることができる
【Web制作初心者におすすめ】コーディング練習用デザインデータ
おすすめのコーディング練習用デザインを紹介します。
実作業でコーディングを行う場合、デザインデータを基に作業を行います。
デザインデータの中でも多いのが下記の3つです。
- Photoshopのデザインデータ（PSD）
- Adobe XDのデザインデータ（XD）
- Figmaのデザインデータ（fig）
IllustratorやPhotoshop、XDなどWEB制作では、普段からAdobe製品を使用します。
複数のAdobeを使用する場合、Adobe CC コンプリートプランの契約がオススメです。
既にAdobe CCを契約しており、毎月の支払いが少し高いなと思ってる方にお得な情報です。
デジハリ版Adobe CC（学生教職員版）に乗り換えることで、年間4万円以上お得になります。
各デザインデータのコーディング方法については、こちらを参考にしてください。
デザインデータからのコーディングは、なかなか独学では学習できない（そもそもデザインデータがない）ので僕も実案件で四苦八苦しながら覚えていきました。。
今回、WEBデザイナーの【いぐちようこ】さんが、コーディング練習用に架空サイトのデザインデータ（PSDとXD）を無償で提供してくれているので、是非ダウンロードして実際に、デザインデータからのコーディング作業を経験してみてください。
【PSDデータのコーディング練習用架空サイト（コーヒーショップ）】
以上がWeb制作のコーディングを独学で身につけるための具体的な勉強法になります。
これからコーディングを勉強してみようという方の参考になれば嬉しいです。
以上です。