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

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

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

そう思う方は多いのではないでしょうか？
でもご安心ください。Web制作スキルはスクールに通わずとも、独学で習得は可能です。

ただ、最短で効率良く環境の力を活かしてでも、早くWEB制作実務スキルを習得したい！という方は下記をご覧ください。
独学と比較すると選択肢も広がります。

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

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

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

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

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

【補足】さらにWordPressスキルを高めたい場合の推奨教材

前述の教材まででWEBサイト制作実務レベルのスキル習得でき案件対応も可能です。
さらにWordPressの対応力を向上させたいなら下記の2つの教材がおすすめです。

1. Brain｜コーディング&WordPressメモまとめ集
2. Brain｜実践型WordPress教材

上記教材は補足紹介ではあるものの、
ここまで学習すれば、実務案件で困ることはまず無くなるでしょう。詳しくは後述します。

それでは、教材の紹介は以上です。
以下から流れに沿って、詳しい解説をしていきます。

【はじめに】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も学ぶことができるようになります。

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

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

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

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

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

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

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

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

④jQuery・JavaScriptを学ぶ

実はHTML,CSSの基礎を抑えた後は、次はJavaScriptの学習に移るのが一般的です。
ですが、このロードマップで先にjQueryから入るのは、そのほうが理解しやすく、挫折しづらいからです。

jQueryとは

jQueryとはJavaScriptのライブラリです。
JavaScriptを使用すればHTML/CSSに動きをつけられる反面、コードの量は膨大になります。

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

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

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

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

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

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

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

JavaScriptとは

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

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

JavaScriptは動きのある画面を作る時に使用され、世界中で利用されています。
JavaScriptがなくてもWebサイトをみることはできますが、「文章」をそのまま読んだり「画像」を観るだけでは操作ができません。
JavaScriptを使えば、
メッセージを送れるようになったり、画像のサイズを大きくして見やすい仕様に変えることなどができます。

実際のWEB制作の案件では主に使うJavaScriptのコードは決まっています。
学習ではjQueryとセットで実案件に活かせる教材で学んでいきましょう。

blog教材

おすすめの教材はこちらのフリーランスコーダーShogoさんのblog、
『jQuery、JavaScript特訓編』です。
よく使うjQueryやJavaScriptのコードがまとめられており、実務でも即活用できます。
※しょーごさんの教材はセットがお得ななため「全部盛り」「中級以上」で掲載しています

書籍教材

jQuery学習の書籍はこちら。

jQuery標準デザイン講座

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

jQuery・JavaScriptに関しては以上です。

コードのライブラリとして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サイトの機能を拡張するものが数多くあります。
「動画を埋め込む」「お買い物機能を付ける」「お問い合わせフォームを作る」など様々なことができます。

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

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

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

WordPress(ワードプレス)学習の手順【補足教材】

前述したとおり⑧までで実務レベルのスキルは習得でき、営業もできる状態です。
ただ、さらにスキルアップを目指して安心したい方もいると思います。
その場合の教材を２つご紹介します。

それぞれの教材の著者であるお二人の簡単なプロフィールとブログのURLもあわせてご覧ください。

コーディング&WordPressメモまとめ集 の著者のじゅんぺいさんは、30代後半でWEB制作を始め、すぐ月収50万円を突破。実務をこなして約1年でタイのバンコクへ海外移住を果たしました。毎月数多くの案件を同時に対応するなかで蓄積した、実用的なコードのストックを教材で公開されています。→じゅんぺいさんのブログ

実践型WordPress教材 の著者のまさたさんは、 若干21歳ながら社会人3年の経験を持ち、会社員で多忙を極めるなか副業でWEB制作を始め、数々の制作会社から案件を受注し本業以上の収入を達成。現在は独立して月収7桁を突破。僕のコーチングも1年以上継続して活用されてます。豊富な実務経験をわかりやすく学べる教材を販売しています。→まさたさんのブログ

お二人とも当然ながらコーディングのスキルが素晴らしく、そのノウハウが詰まった技術系のブログは参考になること間違いなしです。教材とあわせて、ぜひチェックしてみてください。

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

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

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

応援しております！

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

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

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

Web制作学習から営業後の収益化まで支援するコミュニティを運営してます

Web制作を学習から実務レベルまで習得して案件獲得の収益化まで一気通貫でコーチング支援する
Web制作収益化スクール『コードスルー』を運営しています。

コードスルー内の”コードスルーラーニング“というWEB制作講座では
参加される方が目指したい未来に向けて適切なロードマップを定め、
オリジナルデザインカンプを提供し学習支援をしています。

学習後は、2020年末から運営しているWeb制作収益化の営業支援スクール『コードスルー』へ
ステップアップとなり、スキル習得後の案件獲得まで一気通貫で伴走型のコーチングで支援しています。

学習で迷走していても、参加後に学習を完了させ案件獲得へ進んでいる方も多くいます。

人数限定で定期的に公式LINEで募集しています。

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

＼ LINE登録はこちら ／

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