【2022年最新】Web制作のおすすめ学習ロードマップ！独学、最短で稼げるスキルを習得する方法

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

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

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

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

この記事では、
筆者が学習開始３ヶ月で初案件獲得と初月30万円売上を達成した実体験に加えて、
これまで150名以上のWeb制作収益化を支援してわかった効率的な学習方法を共有します。

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

Web制作に必要な
「HTML」「CSS」「Javascript」「jQuery」「PHP」「WordPress」の
学習方法をお伝えしていきます。ぜひ参考にしてみてください。

本ロードマップは最短で副業から稼げるWeb制作スキル獲得を目的とした内容です。
顧客との直接取引や、コーダーとしてWeb制作会社との業務提携にも対応可能なスキルが身に付きます。
ただし転職希望やエンジニアスキルを突き詰めたい方はさらに学習が必要です。その点はご理解ください。

あなたが最短で、稼げるWEB制作者になれるよう、順番に記載していきます。

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

以下から詳しい解説をしていきます。

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

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からです。
では、右も左もわからない初心者がどのようにして学んだらよいでしょうか？

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

Web制作のおすすめ学習ロードマップ

①基礎を「Progate (プロゲート)」で学ぶ

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

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

加えてWeb制作に必要なスキルの概要を幅広く学ぶことができます。

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

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

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

Progate Web版でHTML,CSS,JavaScript,jQuery,Sassを学習しよう！

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

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

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

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

Progateは遊べば遊ぶほどレベルが上がっていくので、楽しみながら進めることができます。
ただし、
レベル上げに夢中になりすぎると何回も周回してしまい時間の浪費にも繋がります。
Web版の周回は多くても1回で十分です。

また、Web制作で活用するPHPに関してはこの段階では触らずで大丈夫です。
ここで学んでも実際に活用するまで期間が空いてしまうため、まずは静的サイトを制作するために必要な言語のみを学ぶのが得策です。

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

つまり、
この段階でProgateで学習するのはHTML,CSS,JavaScript,jQuery,Sassのみで大丈夫です。

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

Progateをする目的は、これから学ぶ言語をなんとなくでも理解することです。
スピード感を持ち進めていきましょう。

次からは実際に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の原理から学べ、復習にも役立てられます。

③ 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分の動画ながら最小限の概要から実践まで網羅した非常にコスパが高い動画です。

書籍教材 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サイトに簡単にアニメーションの効果を付けることができます。

書籍教材

jQuery学習の書籍はこちら。

jQuery標準デザイン講座

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

jQueryに関しては以上です。

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

⑥PHPを学ぶ

PHPの学習に関しては時間をかけすぎずで1-2日の学習で構いません。
Web制作のWordPress案件をこなすレベル感では、PHPの大枠の基礎知識さえあれば問題ありません。

具体的な学習項目としては、ProgateのPHPⅠのみで大丈夫です。

以下に簡単なPHPの概要も解説しておきます。

PHPとは

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

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

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

PHPの大きな特徴は、HTMLと1つのファイルにまとめられることです。
その特徴を活用して、WordPressのテーマやプラグインはPHPで作成されています。

PHPを知ることでWordPressのカスタマイズに活かすことができます。

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

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

プラグインを導入するでWebサイトの利便性が格段に向上します。

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

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

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

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

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

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

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

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

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

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

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

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

応援しております！

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

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

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

Web制作の学習支援コミュニティを運営してます

2022年8月からWeb制作を実務レベルまで習得できる
Web制作の学習支援コミュニティ『コードスルーラーニング』を運営しています。
参加される方が目指したい未来に向けて適切なロードマップやオリジナルデザインカンプを提供し、
伴走型のコーチングで支援しています。

学習後は、2020年末から運営しているWeb制作の営業支援コミュニティ『コードスルー』へ
ステップアップ制度も用意。
学習で迷走していても、参加後に学習を完了させ案件獲得へ進んでいる方も多くいます。

コミュニティは人数限定で定期的に公式LINEで募集しています。

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

＼ LINE登録はこちら ／

これからも有益なブログを書いていくので、日々の活動にぜひ活かしてください。
ここまで読了ありがとうございました！
引き続きよろしくお願いします！