こんにちはTERUです。
フリーランスでWEB制作をしています。
読者の悩み
- コーディングって独学で習得できるの？
- コーディングの効率的な勉強方法が知りたい？
コーディングスキルを独学で身につけることは可能です。
基本的なコーポレートサイトを制作できるレベルを想定
なぜなら、僕自身が30代未経験から、独学である程度コーディングのスキルを身につけた上で転職した経験があるからです。
さらに最近では、独学でコーディングを学べる教材やサービスが充実しているため、僕が勉強し始めた当時よりもはるかに良い環境が整っています。
本記事では、僕自信が今から独学でコーディングを身につけるなら、どのようなステップで勉強するのか詳しく解説します。
TERU学習仲間が欲しい方や、ある程度費用をかけてでも効率的に学習したい方には、オンラインスクールの利用がおすすめです。
本記事は、副業やフリーランスでWEB制作（主にコーディング）を仕事にしたい方を対象にしています。
独学でコーディングを身につける勉強方法
もし僕が今から独学でコーディングを身につけるなら、以下の３ステップで学習していきます。
学習ステップは、基礎から段階的にスキルを身につけた後に、ひたすら手を動かして身につける流れになっています。
TERU個人差はありますが、1日1時間勉強に確保できれば半年から1年で基本的なサイト制作のスキルは身につけれると思います。
各ステップ毎に詳細を説明します。
STEP1：HTML/CSS/JSの基礎を身につける
コーディングを身につけるためには、HTML/CSSのマークアップ言語とJavaScriptのプログラミング言語を学習する必要があります。
基本的にマークアップ言語（HTML/CSS）でサイトの見た目を作り、プログラミング言語（JavaScript）でサイトに動きをつけます。
まずは各言語の基礎を身につけるために、プログラミング学習サービスを利用します。
有名なのは、Progateとドットインストールです。 どちらも基本的に有料ですが、初歩的なレッスンについては一部無料で利用可能です。
Progate
オンラインでプログラミング学習ができるサービスです。
コードの記述や結果の確認も全て、ブラウザ上で完結するため、初心者でも環境構築などつまずきやすいポイントがありません。
TERUゲーム感覚で学習を進めることができます。
以下のコースがあるので、頑張って2周ほどやりこめばHTMLとCSSの使い方については慣れると思います。
- HTML & CSS
- JavaScript
- jQuery
- Sass
各コースともに最初のレッスン以外は有料プランへの登録が必要になります。 1,490円/月ですが、6ヶ月プランで1,290円/円になります。
TERU僕も数ヶ月間だけ有料プランでやり込みました！
また、Progateではアプリのサービスも提供されています。
アプリの場合、学習できるコースは限定されていますが、コードを打つのではなく、選択肢の中から回答を選ぶスタイルなので、通勤中などの移動時間に手軽に利用できます。
ドットインストール
1回約3分程の動画をみながら、プログラミング学習を進めていくサービスです。
Progateとの一番違いは、学習環境です。
Progateはブラウザ上で全て完結しますが、ドットインストールはプログラミングを行う環境を自分のPC上で構築する必要があります。
実際の案件では、環境構築から全て一人で行うのでこの機会に身につけておきましょう。
目的別にレッスンがまとめられており、動画なので分かりです。
- 「Webサイトを作れるようになろう」の各レッスン
- 「Webサイトに動きをつけてみよう」の各レッスン
有料プランは1,080円/月で、動画視聴だけでなく、動画内のソースコード閲覧や先生への質問など、複数のオプションがあるので、迷わず利用しましょう。
TERUこちらも学習期間内だけ有料プランを利用する感じです。
その他にもコーディングを学習できるWEBサービスについて下記の記事でまとめています。
STEP2：専門家の知見から理解を深める
「Progate」と「ドットインストール」でコーディングの基礎が理解できたら、次は専門家の知見から、より実践に近いノウハウを吸収していきます。
専門家の知見を吸収するために、以下の２つの方法を使用します。
- 本からの学習
- 動画による学習
本からの学習
本は、特定のテーマやトピックを集中的に掘り下げた内容が学習できるので、これまで身につけたスキルをより深く理解することができます。
ここでは、WEB制作を学習する上でおすすめの書籍4つを紹介します。
WEB制作に関する情報を発信している人気メディア「Webクリエイターボックス」の管理人であるManaさんが執筆された本です。
WEBサイトを制作する上での考え方から、HTMLとCSSの基本的な使い方について丁寧に解説してくれています。
さらに、よくあるWEBページの制作手順を順番に解説しており、実際のサイト制作の流れを体験することができます。
TERUサンプルコードが用意されているので、自分で手を動かすことで理解が深まります。
- TOPページ（フルスクリーン型）
- NEWSページ（２カラム型）
- MENUページ（タイル型）
- CONTACTページ
HTML・CSSだけの静的ページであれば、この本で作り方を一通り理解できます。
「動くWebデザインアイデア帳」のサイトを運営されている方の本になります。
本を読むことで、WEBサイトにおける動きの役割や動かす仕組みを理解することができます。
さらに、一般的なサイトによくある動きを事例集として網羅してくれています。
コードの内容を理解するのは絶対必要ですが、紹介されている専用サイトからコードをコピー＆ペーストするだけで簡単に実装することも可能です。
TERU実際の現場で使える実践的なサンプルばかりです。
制作案件で対応する基本的なサイトの動きについては、この一冊で全てカバーできます。
CSS設計は、コーディングがある程度できるようになると、みんな悩むポイントです。
サイトの規模が大きくなっていくとCSSを記載する量も増えて、どんどん複雑になっていきます。
本書では、「修正しやすいCSS」を実現するための設計手法について解説してくれています。
- 予測しやすい
- 保守しやすい
- 再利用しやすい
- 拡張しやすい
著者が提唱されているFLOCSS（フロックス）と呼ばれるCSS設計手法は、制作現場で最もよく使われているので、身につけておくと実案件で役に立ちます。
著者のGitHubにもFLOCSSについて詳しく解説されています。
Webクリエイター向けオンラインサロン「Shibajuku」を運営されている方の本になります。
HTMLとCSSを一緒に学ぶことが一般的ですが、本書ではHTMLのみにフォーカスされています。
HTMLはWEBサイトの骨格に当たる部分なので、各要素について深く理解して使えるようになることで、誰にとっても使いやすいサイトを制作できることに繋がります。
内容はHTMLだけですが、かなりのボリュームがあるので勉強し始めの方がいきなり読む本としてはハードルが高いかもしれません。
TERU個人的にはある程度、基礎的な学習を終えた後で読むのがおすすめです。
動画による学習
動画による学習には、Udemyがおすすめです。
Udemy（ユーデミー）は、オンライン教育プラットフォームです。
個人や専門家が自分の専門知識やスキルを共有し、さまざまなトピックやスキルに関する動画講座が提供されています。
HTML/CSS/JSの学習におすすめなのは、「ちゃんと学ぶ、HTML/CSS + JavaScript」講座になります。
プログラミング学習コミュニティ「ともすた」を運営されている「たにぐち まこと」さんの人気講座です。
TERUUdemyはよくセールを行なっているので、セール時期に購入しましょう。
STEP3：実案件に近い形で経験を積む
ここまで勉強すれば、あとは実際の案件作業に近い形で、ひたすらコーディングの経験を積むだけです。
案件作業に近い形とは、デザインデータを基にコーディングを行うことです。
これまでの学習で、コーディング案件をこなすために必要な基礎スキルは身についています。
デザインデータを基に実際の案件に近い形でコーディングを行うことで、「知っている」から「できる」へとコーディングのスキルを向上させる必要があります。
TERU「知っている」から「できる」の差は大きいです。
デザインデータで多いのは下記の3パターンです。
- PSDデータ（Photoshop）からのコーディング
- XDデータ（Adobe XD）からのコーディング
- FIGデータ（Figma）からのコーディング
IllustratorやPhotoshop、XDなどWEB制作では、普段からAdobe製品を使用します。
複数のAdobeソフトを利用する場合、Adobe CCを契約することで費用を節約できます。
さらに、Adobe CCを通常価格よりもお得に購入したい場合は、「デジハリ経由でAdobe CCコンプリートプランを安く購入する方法」の記事をご覧ください。
既にAdobe CCを契約しており、毎月の支払いが少し高いなと思ってる方にお得な情報です。
デジハリ版Adobe CC（学生教職員版）に乗り換えることで、年間4万円以上お得になります。
各デザインデータのコーディング方法については、こちらを参考にしてください。
デザインデータからのコーディングは、なかなか独学では学習できない（そもそもデザインデータがない）ので僕も実案件で四苦八苦しながら覚えていきました。。
TERU僕が初心者の頃は、練習できる教材がありませんでしたが、今は学習環境が充実しています。
デザインデータを基にしたコーディングの練習ができるおすすめの教材を紹介します。
Codejump（コードジャンプ）
Codejump（コードジャンプ）は、コーディングの基礎学習が終わった人向けに、模写コーディングやデザインデータを基にしたコーディングの練習をサポートしてくれるサイトです。
「入門編」から「上級編」まで難易度別にコーディング練習できる教材を提供してくれています。
基本的に、各課題ごとにデザインデータ（XD）とサイト仕様、実際の案件を想定した単価設定がされているため、実際の仕事をイメージしやすいと思います。
TERU実践編以外は全て無料で提供されています。
模写修行
模写修行は、デザインデータ（Figma/XD）と仕様書を基に、自分でコーディングに挑戦する実践的な練習教材を提供しているサービスです。
基本的に練習教材を有料（1,000円~3,000円）で購入しますが、いくつか無料で提供されている教材もあります。
現役エンジニアの方が作られたサービスで、サンプルコードやWEB上での解説など初心者の方にとって手厚いサポートがされています。
TERU個人的には、実案件に一番近い形でコーディングが練習できる教材だと思っています。
勉強がある程度できたら案件を取りに行こう！
コーディングがある程度できるようになったら、実際に案件作業に挑戦しましょう。
自分はまだまだ勉強しないと仕事はできないと思いがちですが、案件の種類は多岐に渡るので自分のスキルで対応できる案件も探せば見つかります。
TERU単価は安いですが、模写コーディングができるレベルであれば仕事はあります。
実際に仕事をする一番のメリットは、案件作業を経験することで飛躍的に成長できることです。
仕事には責任が伴うので、勉強の時以上に真剣にコーディングを行うので成長スピードも全然違います。
おすすめは、自分のできる範囲から少し背伸びをして案件取りに行くことです。
なぜなら自分で調べて解決する力（自走力）が身につくし、自走力はWEB制作をやる上でなくてはならないスキルだからです。
TERU目安としては案件内容を確認して、8割できそうなら挑戦してみましょう。
WEB制作の勉強後にやるべきことと初めての仕事を獲得するための具体的な営業方法について、下記の記事で詳しく解説しています。
コーディングを身につけた後もスキルアップして市場価値を上げよう！
コーディングスキルを身につけた後も＋αのスキルを身に付けて市場価値を上げていきましょう。
具体的には、WordPressなどのCMS構築やデザイン、マーケティング、ディレクションなど、コーディング以外のスキルを身につけることで、自分自身で対応できる範囲が広がり、単価アップやキャリアアップに繋がります。
コーディングだけできる人は沢山いますが、コーディング＋ディレクションができる人は少なくて市場の中で希少性が高いです。
また最近では、副業やフリーランスでWeb制作を始める人が増えており、市場もレッドオーシャン（競争の激しい市場）になっているため、「WEB制作は稼げない」「Web制作はオワコンだ」という話も聞こえていると思います。
TERU僕自身は4年間のフリーランス経験から、WEB制作は今後も需要があると思っています。
これからWEB制作で仕事を始める前に、以下の記事も参考にしてみてください。
コーディングの独学に限界を感じたらどうすればいいの？
メンタリングサービスの活用がおすすめです。
メンタリングサービスとは、業界の先輩がキャリアや現場の課題について１対１で対話しながらサポートしてもらえるサービスです。
いくつかのメンタリングサービスがありますが、僕のおすすめは現役エンジニアがサポートしてくれるHello Mentor（ハローメンター）です。
- 独学に限界を感じている
- 自分のやり方が正しいか不安
- 身近に相談できる人がいない
模写修行を運営されている会社が提供するサービスで、現在もコードを書いている先輩エンジニアがサポートしてくれるのが特徴です。
TERUあなた専用のメンターが１対１で対応してくれます！
- 独立・転職支援
- 学習計画（ロードマップ）作成
- コードレビュー
- 無制限で質問対応
- 実務向け課題提供
- ポートフォリオ制作サポート
現場で既に活躍している先輩から技術/精神面/キャリアの3つをサポートしてもらえることで独学よりも効率よくステップアップすることが出来ます。
TERU受け入れ人数に制限があるみたいなので、募集してるかはサイトで確認してください！
＼ メンターは全員現役エンジニア！ ／
独学してから利用される方が半数以上！
独学には自信がない方向けの学習方法【オンラインスクール】
独学に自信がない方には、オンラインスクールでの学習がおすすめです。
こんな人が対象
- 一人だと多分サボってしまう、継続する自信がない。
- 学習中に相談できるエンジニアの人が欲しい。
- 独学してたけど挫折してしまった。
オンラインスクールは、独学よりも費用はかかりますが、効率的にスキルを取得することができます。
おすすめのオンラインスクールは下記の３つです。
おすすめ①：デイトラ
デイトラは、現場で必要なスキルの学習に特化した業界最安値のオンラインスクールです。
- 全てのコースが１０万円以下で利用できる。
- 教材は、閲覧無制限で随時アップデートされる。
- 定期的に開催される勉強会が無料で参加できる。
- 各コース毎にコミュニティーが用意されており、受講生同士で交流ができる。
- SNSでの評判が高い。
おすすめ②：テックアカデミー
テックアカデミー
は、現役エンジニアから学べるオンラインに特化したスクールです。
- メンターの質がいい。
- 実務経験ありの現役エンジニアが相談に乗ってくれる。
- 通過率10%の選考から選ばれている。
- 相談できる機会が多く用意されている。
- 週2回のマンツーマンメンタリング
- 毎日15時〜23時のチャットサポート
- 回数無制限の課題レビュー
- 受講生や卒業生向けに副業・転職支援サービスも充実している。
おすすめ③：侍テラコヤ
侍テラコヤは、月額2980円〜から利用できるサブスク型オンラインスクールです。
- 入会金・解約金は無料
- 実践型の教材が４０種類以上あり、どれでも学習できる。
- 教材とそれに紐づく課題があり、自分でトライアンドエラーを繰り返しながら
エンジニアに必要な「自走力」を鍛えることができる
記事のまとめ
今回はコーディングを独学で身につけるための具体的な勉強法について解説しました。
記事内でも解説しましたが、独学だと継続する自信がない方は、オンラインスクールを利用する選択肢も全然ありです。
TERU特に本業が忙しい人は、独学で勉強するのは難しいと思います。
正直、僕も今からWEB制作を勉強するなら、効率的に学習するためにオンラインスクールへ迷わず入ります。
本記事がこれからコーディングを勉強してみようという方の参考になれば嬉しいです。
以上です。