こんにちはTERUです。
フリーランスでWEB制作をしています。
プログラミング初学者Aさん「コーディングって独学で習得できるの？」
「効率的な勉強方法が知りたい」
本記事では、こういった疑問に答えます。
独学でもコーディング（Web制作）の勉強は可能です！【具体的な勉強方法】
結論として、独学でもコーディングを習得することは可能です。
個人差は有りますが、頑張れば２〜３ヶ月である程度サイト制作に必要なスキルは習得できます。
※僕の場合、平日４時間、休日２時間程度の学習で約２ヶ月ぐらいでした。
なぜなら、最近はインターネット上に無料・有料含めて、コーディングを独学で勉強できる環境が整っているからです。
以下のようなサービスが有名です。
- Progate
- ドットインストール
- デイトラ
ここでは、僕が実際にどのような流れでコーディングの勉強を行ったのかを解説します。
※コーディングを無料で勉強できるWebサービスについては、以下の記事でまとめています。
- ProgateでHTML/CSSに慣れる
- ドットインストールでHTML/CSSの理解を深める
- 模写または実践で経験値をあげる
１つずつ順番に解説いたします。
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での評判が高い。
おすすめ②：Tech Academy
Tech Academy
は、現役エンジニアから学べるオンラインに特化したスクールです。
- メンターの質がいい。
- 実務経験ありの現役エンジニアが相談に乗ってくれる。
- 通過率10%の選考から選ばれている。
- 相談できる機会が多く用意されている。
- 週2回のマンツーマンメンタリング
- 毎日15時〜23時のチャットサポート
- 回数無制限の課題レビュー
- 受講生や卒業生向けに副業・転職支援サービスも充実している。
おすすめ③：侍テラコヤ
侍テラコヤは、月額2980円〜から利用できるサブスク型オンラインスクールです。
- 入会金・解約金は無料
- 実践型の教材が４０種類以上あり、どれでも学習できる。
- 教材とそれに紐づく課題があり、自分でトライアンドエラーを繰り返しながら
エンジニアに必要な「自走力」を鍛えることができる
【Web制作初心者におすすめ】コーディング練習用デザインデータ
おすすめのコーディング練習用デザインを紹介します。
実作業でコーディングを行う場合、デザインデータを基に作業を行います。
デザインデータの中でも多いのが下記の3つです。
- Photoshopのデザインデータ（PSD）
- Adobe XDのデザインデータ（XD）
- Figmaのデザインデータ（fig）
各デザインデータのコーディング方法については、こちらを参考にしてください。
デザインデータからのコーディングは、なかなか独学では学習できない（そもそもデザインデータがない）ので僕も実案件で四苦八苦しながら覚えていきました。。
今回、WEBデザイナーの【いぐちようこ】さんが、コーディング練習用に架空サイトのデザインデータ（PSDとXD）を無償で提供してくれているので、是非ダウンロードして実際に、デザインデータからのコーディング作業を経験してみてください。
【PSDデータのコーディング練習用架空サイト（コーヒーショップ）】
以上がWeb制作のコーディングを独学で身につけるための具体的な勉強法になります。
これからコーディングを勉強してみようという方の参考になれば嬉しいです。
以上です。