【2022年最新】短期間で稼げるWeb制作者になる!プログラミング学習の独学ロードマップ

この記事では、Web制作を独学・最短期間で学習する方法について、初めての方にもわかりやすく解説します。

・会社に頼らず、自分自身の力で稼げるWeb制作スキルがほしい！
・仕事や育児をしながら、副業でWeb制作ができるようになりたい！
・スクールやセミナーに行くための時間や、お金の余裕がない！

そう思う方は多いのではないでしょうか。でもご安心ください。

Web制作スキルはスクールやセミナーに通わずとも、独学での習得は可能です。

この記事では、
学習開始３ヶ月で初案件獲得までの実体験をもとに、その過程を公開していきます。

ぼくは「Webサービス」「書籍」「動画」を中心に、独学でWeb制作スキルを習得しました。
スクールに通うことなく自宅でできるため、経済的にも負担が少なく、時間がない人にもおすすめできる学習方法です。

プログラミング言語やライブラリとしては
「HTML」「CSS」「Javascript」「jQuery」「PHP」「WordPress」の
学習過程をお伝えしていきます。ぜひ参考にしてみてください。

本ロードマップは、あくまで、最短で副業から稼ぐWeb制作スキル獲得を目的とした内容です。
コーダーとしてWeb制作会社との業務提携や、転職を目指す方はさらなる学習が必要です。その点ご理解ください。

「自分はスクールで学ぶことも検討したい！」という方は下記もご参照ください。
各スクールでは無料面談ができるので、そのうえでスクールか、独学か決めることもオススメです。

スクールで学習したい場合

無料面談あり・実績ありのプログラミングスクール

↑それぞれ特徴は違います。ご自身の目指したい未来にあわせてご検討ください。

実は、ぼく自身も最初はスクールに入学しました。
ですが「副業でなるべく早く自分のスキルで稼ぐ」という目標が履修項目に合わず、１ヶ月で退会しました。
今となっては、もっとしっかりスクールを選びをするべきだったな…と反省しています。
そのため、スクールを検討するようであれば、無料面談を複数受けてみることをオススメします。

無料面談なし・実績ありのプログラミングスクール

また、無料面談は用意されていませんが、実績あるおすすめスクールもご紹介します。

デイトラは私の周囲のフリーランス仲間の評判も良いですし、
学習後に私がこれまで営業サポートをした方の技術レベルも総じて高い印象です。
費用はかかりますが、一般的なオンラインスクールよりもリーズナブルでコスパも高いです。
必要な方はご検討ください。

ぼく自身は最終的にスクールは活用せず、
書籍や動画で独学でWEB制作の必要スキルを身につけ、学習３ヶ月で案件獲得の営業を始め、案件を獲得しました。

そのため、
あくまでこの記事では、
実際に独学をした経験を踏まえつつ、
「今の僕がゼロから学習する場合の手順」、「実際の案件で役に立った学習内容」をピックアップして
あなたは最短で、稼げるWEB制作者になれるよう、順番に記載していきます。


それでは、いってみましょう！！

以下から詳しい解説をしていきます。
それでは、いってみましょう！！

【はじめに】Web制作学習の全体像を把握しよう！

この学習ロードマップの学習の流れ

最初のProgate(プロゲート)以降は、下記の①〜③の流れです。

• ①それぞれの言語やライブラリの概要説明
• ②おすすめの教材（動画、書籍）を紹介
• ③手を動かしながらの実践学習

Web制作の案件対応に必要なものは「サーバー」「ドメイン（URL）」「Webサイト」

インターネット上において、

ドメイン(URL)はWebサイトがインターネット上のどこにあるかを判別する住所のような情報で、
サーバーはWebサイトをアップロードして保存しておく倉庫のような場所です。
Webサイトはプログラミング言語とCMSを使用して作成するコンテンツのことです。

学習が進行してきたらその制作物であるWebサイトをインターネット上にポートフォリオとして表示しておきましょう。

Web制作学習に必要なプログラミング言語の種類

プログラミング言語は現在、
一定のユーザー数がいるもので250種以上、 その派生言語を含めると1000種以上あるといわれています。

Web制作をするにあたり、全てを学ぶ必要はなく、特定の言語だけで大丈夫です。

また、前提の知識ですが、HTML,CSSは正式にはプログラミング言語ではありません。
プログミング言語の定義は簡単に説明すると「動作処理が行われるもの」です。

HTMLは文字情報を出力するもの。
CSSはHTMLを装飾するためのもの。

それぞれ、プログラミング言語とは違います。
※勘違いしやすいので注意！

HTML：マークアップ言語といい、文字情報を出力するもの。
CSS：HTMLを装飾してWebサイトの見た目を表し、レイアウトやデザインを決めるもの。
Javascript：HTMLとCSSに動きをつける言語。
jQuery：Javascriptを使いやすくしたもの。複雑な動きを少ないコードで実装が可能。
PHP：保存したデータを扱う言語で、WordPressを構成する。
WordPress：Web制作管理ツール。PHPだけでなく、HTML・CSSとJavascriptも使われている。

初心者でweb制作を学び始めるとき、まず最初に学ぶことはHTML・CSSからです。
では、右も左もわからない初心者がどのようにして学んだらよいでしょうか？

そこでおすすめなのがProgateです。

次からいよいよ、具体的な学習に入っていきます。頑張っていきましょう！

Progate (プロゲート)

まずやるべきことはWeb制作が自分の肌に合っているかどうかを確かめることです。
そこで少しでも「楽しい」「できそう」と思えることが一番大切です。

その確認のため、オススメはProgate(プロゲート)です。

アプリ版でHTML/CSS、JavaScriptを体験してみよう！

Progate(プロゲート)にはアプリ版(iOS,Android)とWeb版があります。
最初はアプリ版(iOS,Android)からのスタートがオススメです。ゲーム感覚でプログラミングを体験することができます。

アプリ版(iOS,Android)はWeb版と比べて体験できる講座に限りがあります。
しかし、それでもHTML/CSS基礎、JavaScript基礎を体験することができます。
ある程度やってみて「楽しい」「できそう」という感覚を身につけたら、Web版もチャレンジしてみましょう。

Web版でHTML/CSS,JavaScript,jQuery,PHP上級まで＋Sassを学習しよう！

Web版ではWeb制作で必要なHTML/CSS , JavaScript , jQuery , PHP を一通り学習することができます。

無料版ではそれぞれの言語の初級編までの学習となるため、
一周したら有料会員になることをお勧めします。

すると、
前述した言語（HTML/CSS , JavaScript , jQuery , PHP）が上級編までレッスンが開放され、Sassも学ぶことができるようになります。

有料会員は2022年4月現在では1,078円(税込)です。
書籍1冊と比べてもコストパフォーマンスが良すぎます。
ここは即課金しましょう。すぐ終えれば単月だけの契約でも大丈夫です。

Progateは遊べば遊ぶほどレベルが上がっていくので、楽しみながら進めることができます。

ただし、
レベル上げに夢中になりすぎると何回も周回してしまい時間の浪費にも繋がります。
Web版の周回は多くても1回までやれば十分です。


それと,
Rubyなど開発系の言語は触らないようにしましょう。
Web開発系に転職を目指しているなら話は別ですが、Web制作では活用する機会がないので時間がもったいないです。

慣れずに手が止まることも多いはずですが、
分からない場合は答えを見ながら、サクサク進めていきましょう！

Progateをする目的は、これから学ぶ言語のさわりに触れることです。
完璧に理解する必要はありません。スピード感を持ち進めていきましょう

次からは実際にWeb上にサイトを制作するための言語・フレームワークの学習に入っていきましょう

Web制作の言語・ライブラリ別おすすめ学習ロードマップ

① HTML&CSS

HTMLとは

HTMLはHyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略で、
Webサイトの土台を作る言語となります。
Webサイトは、HTMLでマークアップされ、見た目が決まってきます。

CSSとは

CSSはCascading Style Sheets(カスケーディングスタイルシーツ)の略でWebサイトのレイアウトを作る言語です。

HTMLだけで作られたサイトは読みにくいですが、
文字の色や背景の色など、CSSを加えることで美しい見た目に変えることができます。

今後学ぶ言語の「すべての言語の基本」となるのがHTMLとCSSです。

多くの人が1番最初に始めるのがHTML&CSSでもあり、Web制作をする上では、必ずクリアするべき言語と言えます。

HTMLは、まったくの初心者であっても繰り返し学習すれば理解できる内容なので、継続して学習してください。

書籍教材

HTML & CSSとWebデザインが基礎から一気に学べる本。
手を動かし、作りながら学び、Webサイトができあがる体験ができる書籍です。

この一冊の学習を終えると制作実績にもなるサイトを制作できます。
わからなければ答えを見ながらで良いので、手を動かしながら一通り学んでいきましょう！

「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」

この本の応用編にあたる書籍教材もありますが、実務で使用しないような内容も多く含まれているため購入せず大丈夫です。
この一冊で、普段からよく活用するHTML&CSSの基礎は完全網羅できます。

動画教材【YouTube】

学習で日々の隙間時間をうまく活用するには、YouTubeによる動画学習もおすすめです。
動画を観れない環境のときは、音声だけで聞きながするのも良いです。

学習を習慣化していきましょう。

HTMLとCSSの原理から学べ、復習にも役立てられます。

さらにCSSのレイアウトを学びたい場合には、下記のようなサービスからも学べます。
カエルを並べるだけでFlexboxを習得できますよ。

【実践】デザインガンプからの模写コーディング

ここまで学んだHTML & CSSを実践するために、模写コーディングを行います。

模写コーディングとは、モデルとなるサイトを自分でコーディングをして再現することです。
HTMLやCSSのコーディングの流れや、言語ルールの確認をすることができます

実務レベルの練習をする前の段階、HTML・CSSを覚えたて状態での練習には打ってつけの手法です。

学習始めはつまづくことも多いですが、
まずは分かるところからでも実際にコーディングしてみることをお勧めします。

僕は学習当時、実際のWebサイトで模写コーディングをしました。
現在なら、次にご紹介するデザインガンプからの模写コーディングをおすすめします。

デザインカンプからの模写コーディングおすすめ教材【クリスタデザイン】

2022年4月現在、独学無料で学ぶなら
クリスタデザインがおすすめです。
XDのデザインガンプからのコーディングを無料で実践できます。

◯初級編

◯中級編

デザインガンプは初級編・中級編・上級編まであります。

上級編まで完了できればなお良いですが、
HTML&CSSで最低限の実務をこなせるレベルまでということであれば初級編・中級編まででも大丈夫です。

お疲れ様でした！！

ここまででHTML&CSSの基礎は実践も含めて身に付けられたと思います！


次はJavaScriptの学習に移っていきましょう。

② JavaScript

JavaScriptとは

Webサイトは基本的にHTMLとCSSから構成されています。

JavaScriptは、
その中のインタラクティブな要素（サーバとの通信やグラフィックの描写、そしてユーザーアクションなどのこと）を担っており、Webサイトで使われるフロントエンドの言語のことを言います。

JavaScriptは動きのある画面を作る時に使用され、世界中で利用されています。

JavaScriptがなくてもWebサイトをみることはできますが、「文章」をそのまま読んだり「画像」を観るだけでは操作ができません。

JavaScriptを使えば、
メッセージを送れるようになったり、画像のサイズを大きくして見やすい仕様に変えることなどができます。

JavaScriptでできる主なことは以下の通りとなります。

1. ポップアップウインドウ
2. サイトの利便性アップ
3. Ajax(ページを移動せずともデータを取得できる）
4. カウントダウンタイマーが作れる
5. サイトの利便性を上げられる

Webサイトを制作するには、
HTMLとCSSに合わせてJavaScriptも必須言語であると言えます。

次からJavaScriptを習得する学習手順を解説します。

Youtube動画2本【合計90分】

合計わずか90分の動画ながら最小限の概要から実践までできる非常にコスパが高い動画です。

Udemy教材

ちゃんと学ぶ、HTML＋CSS & JavaScript入門講座

HTML/CSS学習の際にもご紹介した教材です。
教材後半のJavaScriptの部分を学習しましょう。

書籍 JavaScript 超入門

JavaScript学習の総仕上げです。
こちらの書籍で一冊学習すると、JavaScriptを体系的にしっかり理解できます。

JavaScript超入門

JavaScriptに関しては以上です。
実際の案件ではJavaScriptを丸暗記してスラスラ書くということはほぼありません。
JavaScriptを活用するときは、次の項目のjQueryなどライブラリで活用することがほとんどです。

ここまでの書籍や動画で概念を理解したうえで、次へ進んでいきましょう。

③ jQuery

jQueryとは

前項までに学んできたJavaScript。
JavaScriptを使用すればHTML/CSSに動きをつけられるる反面、コードの量は膨大になります。

しかし本項で学ぶjQueryを使用すれば、
JavaScriptのコード量を簡易的にでき、記述量を減らすことができます。

jQueryを使うことで、
少ないコードでHTMLとCSSを操作することができます。

どれくらい使いやすいか例えるならば、
JavaScriptで10行必要だったコードがjQueryでは1行で表現できてしまいます。

今では「jQueryなしではWeb開発は不可能」とまで言われるほど、世間に普及しています。

JavaScriptを使用する場合、ブラウザによっては作動しないこともあります。
ですがjQueryであれば、どのブラウザでも作動するため、どんなコードでも動かせます。

また、
プラグインを作れば独自の機能を追加することも可能です。
なのでオリジナル開発ができるライブラリである、と言えます。

jQueryを使うことで、
Webサイトに簡単にアニメーションの効果を付けることができます。

動画教材【Udemy】

ちゃんと学ぶ、HTML＋CSS & JavaScript入門講座

HTML/CSS学習の際にもご紹介した教材です。
教材後半のjQueryの部分を学習しましょう。

書籍教材

jQuery学習総仕上げの書籍はこちら。

jQuery最高の教科書

手順に沿って進めていけばjQueryでよく使われる動きを一通り実践で身につけることができます。

jQueryに関しては以上です。
コードのライブラリとしてjQueryを活用することにより、
JavaScriptの膨大なコード量を記述することなく簡単に動的なサイトを作成することができるようになります。

④ PHP

PHPとは

PHPはWebサイトに動きをつけることができる言語で、
ユーザーがアクセスしたときに表示内容が変わるページを作成できる言語です。

「掲示板」や「お問合せフォーム」など、
ユーザーが書き込みできるページなどがPHPで作成されていることが多く、
のちに紹介するWordPressの開発にも使われています。

PHPは他の言語と比べると、文法が簡単なので覚えやすい言語と言えます。

PHPの大きな特徴は、
HTMLに記述したファイルに埋め込めるのでHTMLと1つのファイルにまとめられることです。

WordPressはテーマやプラグインもPHPで作成されています。

そのためPHPをマスターすれば応用が効き、WordPressのカスタマイズがしやすくなります。

動画教材【Udemy】

PHPの概要と実際に掲示板サービスを作成することができます。

ちゃんと学ぶ、PHP+MySQL（MariaDB）入門講座

書籍教材

書籍はこちらがおすすめ。
PHPについて全体的に広く学べるうえにデータベースについても勉強できます。
痒いところまで満遍なく網羅しています。

よくわかるPHPの教科書 【PHP7対応版】

WordPressの特徴

WordPressはオープンソースとして提供されており、無料で使用できます。

他のブログサービスやホームページ制作サービスと比べると、
「記事が書きやすい」「操作が簡単」「管理画面が見やすい」などの特徴があります。

アクセス数の確認もしやすいので運用管理もしやすく、サイトの管理が負担になりません。

さらにプラグインを組み込むことで、より利便性の高いWebサイトの制作が可能になります。

プラグイン導入で実現できることの事例※一部

• SEO対策
• SNS連携機能
• サイトマップ自動生成
• アドセンスとサーチコンソールの管理
• サイトの表示速度高速化(画像ファイルの圧縮、キャッシュ化など)
• コメントスパムを防ぐ機能

プラグインを導入することによって、Webサイトの利便性が格段に向上します。

WordPressのテーマ選びとプラグインの使い方

WordPressはテーマ選びとプラグインの使い方によって、
ブログサイトやECサイト、企業のコーポレートサイトなど、どんなWebサイトでも作成できます。

テーマは無料、有料の2パターンがあります。
無料のテンプレートを使う場合には注意することがあります。

海外のWordPress無料テーマを選ぶ場合、
英語だとデザインが美しく見えていたものが、
日本語表記にした途端、イメージが大きく変わってしまうことがあります。

また、無料テーマによっては細かい作業や、カスタマイズが反映されないものもあります。
ある程度凝ったWebサイトを作成したい場合は、有料のテンプレートを使うのがお勧めです。

プラグインに関しては、手軽にWebサイトの機能を拡張するものが数多くあります。
「動画を埋め込む」「お買い物機能を付ける」「お問い合わせフォームを作る」など様々なことができます。

なかには日本語に対応していないプラグインもあるため、
導入前に「日本語対応になっているか否か」を必ず確認しましょう。

数多くあるプラグインですが、
ウイルスの感染を防ぐためにも、公式のプラグインを導入することをお勧めします。

動画教材【Udemy】

Udemy動画教材「ちゃんと学ぶ、WordPress テーマ開発講座」

CodeStep 【静的サイトWordPress化】

CodeStep「HTMLをWordPress化しよう！」を参照にこれまで作成した静的サイトをWordPress化しましょう！
コーディングからWordPress制作を行なう場合に必要となる作業経験です。

これまでの課題で作成したWebサイトを対象に、下記の記事を参考にWordPress化にチャレンジしてみましょう。
自分が作成したWebサイトがない場合でも、記事内の手順に沿えばワードプレス化を実装することができます。。

【余談】学習効率を最大化するためのTips

毎日、忙しい中でも学習効率を最大化させる方法の一例をご紹介します。

• YouTubeで学習後はコメントでアウトプット。記憶定着を促進する。
• 学習はインプットのあと、SNSでアウトプットをセットにして進める。
• 学習に集中できる環境を整える。例えば、スマホ画面は学習に必要なもののみTOP表示にする。

仕事や育児など日々の活動の合間でも効率的に学習できる環境を整えて、スピード感を持って学習を進めていきましょう！

学習を終えたら【案件獲得】

学習が完了したらいよいよ案件獲得するべく、営業のスタートです！

当ブログにも営業活動に役立つ記事をご用意していますので、URLリンクを貼っておきます。
ゼロイチ突破にご活用ください。

応援しております！

クラウドソーシングのプロフィールの作り方

クラウドソーシングの提案文・応募文の書き方

セールスコーチングのススメ

案件獲得&納品サポート【ご相談】

ここまで長文をお読みいただきありがとうございました！！

望んだ未来を実現できるように、引き続き行動していきましょう！

案件獲得の営業支援スクールを運営しています

2020年末からWebスキルを活かしてオンラインで場所に囚われず自由に稼げるようになれる、
営業支援スクール『CodeThrough』を運営しています。

これまで150名近くの方を支援してきました。

CodeThrough（コードスルー）10期は2022年5月12日（木）に募集開始予定です。

概要の確認は公式LINEにて行います。

興味がある方は、
公式LINEに登録して、募集をお待ちくださいね。

これからも有益なブログを書いていくので、日々の活動にぜひ活かしてください。

ここまで読了ありがとうございました！

引き続きよろしくお願いします！