Web制作の学習ロードマップを公開します【ゼロから始める6ステップを解説】

PR
WEB制作
2024.6.21
2024.8.20

Web制作スキルを身に付けたいです！何をどの順番で学べばいいの？誰か詳しく教えてください！

この記事で【Web制作の学習ロードマップ】を公開しています！ロードマップを見れば、初めての方でも迷わずに学習を進めることが出来ますよ！

上記の通り今回は、Web制作スキルの習得で役立つ【学習ロードマップ】を全6ステップで公開、このほかロードマップの攻略で役立つ学習のポイントも解説します。

▼この記事はこんな方向け

Webサイト制作者になりたい
スキルを身に付けて副業やフリーランスで稼ぎたい
効率的な学習順序や、おススメの教材があれば知りたい

今回紹介するロードマップの全体としては以下の様になります。

▼Web制作の学習ロードマップ(6ステップ)

HTML＆CSSを学習する
JavaScript(jQuery)を学習する
模写コーディングでトレーニングを積む
Sassを使ってコーディング作業を効率化する
PHPの基礎スキルを学習する
WordPressを使ってWebサイトを作る

記事内では引き続き、学習ロードマップにおける攻略のポイントを各ステップに分けて解説してゆきます。

Web制作の学習準備をしっかり進めてゆきましょう！

▼この記事を書いたひと

フリーランスみやしも（@miyashimo_blog）です。プログラミングやWebサイト制作に関するITの情報を幅広くお届けしていきます。

1Web制作学習ロードマップ【全6ステップ】
- 1.1STEP.1 HTML＆CSSを学習する
- 1.2STEP.2 JavaScript(jQuery)を学習する
- 1.3STEP.3 模写コーディングでトレーニングを積む
- 1.4STEP.4 Sassを覚えてコーディングを効率化する
- 1.5STEP.5 PHPの基礎スキルを学習する
- 1.6STEP.6 WordPressを使ってWebサイトを作る

2ロードマップ攻略5つのポイントを解説
- 2.1ポイント①：Web制作の目標設定を定める
- 2.2ポイント②：学習期間は3カ月から【短期集中】で進める
- 2.3ポイント③：オンラインスクールを活用する
- 2.4ポイント④：Web制作と並行してブログ運営をする
- 2.5ポイント⑤：自分の適性や得意分野を知ろう

3この記事のまとめ

Web制作学習ロードマップ【全6ステップ】

Web制作における学習ロードマップの内容を、各ステップに分けて詳しく解説してゆきます。

STEP.1 HTML＆CSSを学習する

Web制作の学習は【HTML＆CSS】の習得からはじめましょう。HTML＆CSSとはそれぞれ次のような役割を持ったスキルです。

▼HTML＆CSSはこんな言語

HTML・・・Webページの【文章構造】を表現する
CSS・・・Webページの【見ため】を表現する
JavaScript・・・Webページに【動き】を加える
PHP・・・Webページに【機能性】を持たせる

何故HTML&CSSの学習から始めるのかというと、世の中の全てのWebサイトに使われている最も基礎的な技術だからです。例えばこのブログ記事も文章はHTMLで、カラフルな装飾はCSSで、それぞれ表現されています。

よってWeb制作のスキルをゼロから身につけようと思ったら、最も基礎的な技術であるHTML&CSSから覚えるのが学習の第一歩になります。

まずはHTML&CSSを覚える所からスタートしましょう。少し覚えるだけでも、簡単なWebサイトが作れる様になりますよ。

HTML&CSSの体験や学習では、無料の「Progate(プロゲート)」を利用するのもおススメです。

▼公式サイト

Progate(プロゲート)

HTML&CSSは、実際に書きながら覚えるのが上達への一番の近道です。パソコンさえ持っていれば今すぐ利用できますよ！

STEP.2 JavaScript(jQuery)を学習する

HTML&CSSの次に学びたいのがプログラミング言語のJavaScriptです。ステップ①で登場したHTML＆CSSとは、次のような役割の違いがあります。

▼JavaScriptはこんな言語

HTML・・・Webページの【文章構造】を表現する
CSS・・・Webページの【見ため】を表現する
JavaScript・・・Webページに【動き】を加える
PHP・・・Webページに【機能性】を持たせる

JavaScriptを習得すれば、例えばアニメーション効果を付けたり、ボタンを押したらメニューが開閉する、といったWebページの【動き】を加えられる様になります。

そんなJavaScriptも、HTML＆CSSと同じ様に「Progate(プロゲート)」で体験することが出来ます。

▼公式サイト

Progate(プロゲート)

JavaScriptには現在『①JavaScript』と『②jQuery』の２つ実装方法があり、将来的には『②jQuery』は利用されなくなることも予想されます。今後の技術の移り変わりをふまえるなら、『①JavaScript』を優先的に学習しつつ『②jQuery』もある程度抑えておくといったスタンスでの学習が推奨されます。

STEP.3 模写コーディングでトレーニングを積む

模写コーディングでトレーニングを積もう — 模写コーディングでトレーニングを積む

HTML&CSSや、JavaScriptのスキル獲得後に挑戦してほしいのが「模写コーディング」です。

模写コーディングとは、実際にあるWebサイトを自分で書いたコードで再現するトレーニング方法のことです。

模写コーディングには次のような目的があります。

▼模写コーディングを行う目的

Web制作で最も扱う機会の多い、HTML&CSSのコーディングのスピードを上げる
実際のWebサイトを再現することで、コーディングスキルを実務レベルまで高める

先述にもある通り、HTML&CSSは書きながら覚えるのが一番です。初めは苦戦することも多いと思いますが、回数をこなすことで確実にスキルアップできるトレーニング方法になります。

また模写コーディングの対象は基本的にはどのWebサイトでもOKですが、初めての方には次の教材を利用するのがおススメです。

▼おススメ教材

Note - 【無料練習素材】あなたはできる？模写コーディング腕試し！

できるだけ練習量をつんだ方がスキルアップにつながりますが、時間をかけ過ぎにも注意が必要です。模写トレーニングは後から重点的に行う様にしてもOKです。初めの数件をこなした段階でつぎの学習に進む様にしましょう。

STEP.4 Sassを覚えてコーディングを効率化する

Sassを学んでコーディングを効率化しよう — Sassを覚えてコーディングを効率化する

いくつかの模写コーディングが終わった段階では【Sass】を学んでゆきましょう。

Sass(サース)とは「Syntactically Awesome Stylesheets(構文的にすごいスタイルシート)」の頭文字をとったCSSのメタ言語です。Sassを上手に活用すすれば、再利用性・保守性の高いCSSを効率的に作成できる様になります。

これまでに登場した言語と違ってイメージがしづらいとも思いますが、はじめはCSSを効率的に作成できる上位互換のツールといった風に理解しておけば問題ありません。そんなSassの学習におけるポイントとしては以下の様になります。

▼Sass学習のポイント

Sassを使ったコードの書き方には「SASS記法」と「SCSS記法」の2つがあり、現在ではSCSSが主流になっています。
再利用性・保守性の高いSCSSにできる「BEM設計」に従ったコーディング方法を覚えるとより実践的です。

上記の通りSassは「SCSS＋BEM設計」をセットで学習すると覚えておきましょう。

SassはWebサイトの制作おいて絶対必要になるツールではありません。しかし現在のWeb制作現場ではほぼ必須とも言える標準的なツールとなっています。

稼げるWeb制作スキルを身につけるためにも、Sassの学習は確実に進めてゆきましょう。またSassには実行環境を導入する必要がありますが、初めての方にはVSCodeのプラグインを利用した方法がおススメです。

おススメ記事

VSCodeでSASS・SCSSをコンパイルする方法【初心者向き】人気のテキストエディターVisual Studio Codeで【SASS・SCSS】をコンパイルする方法を解説します。プ...

Sassを覚えればコードの品質とともに、自分の人材価値も大きく向上します。習得するメリットの大きいスキルです！

STEP.5 PHPの基礎スキルを学習する

HTML＆CSSやJavaScriptのつぎに学びたいのがプログラミング言語の「PHP」です。

▼PHPはこんな言語

HTML・・・Webページの【文章構造】を表現する
CSS・・・Webページの【見ため】を表現する
JavaScript・・・Webページに【動き】を加える
PHP・・・Webページに【機能性】を持たせる

これまでに登場したHTML&CSSやJavaScriptは、Webブラウザ上で動く【フロントエンド言語】であるのに対し、PHPには【サーバーサイド言語】という大きな違いがあります。サーバーサイド言語とはすなわち、サーバー側で動くプログラミング言語のことです。

そんなPHPは、例えば次のような仕組みを作るための言語として、Webサイトの制作のみならず、Web系システム開発の分野でも広く利用されています。

▼プログラミング言語「PHP」の活用例

SNSやECサイトなどのWebサービスの開発
社内管理システムや、業務システムの開発
お問い合わせフォームや予約システムの実装
データ処理や様々なAPIとの連携

そんなPHPですが、とはいえWeb制作ではゴリゴリ書いてプログラム開発するといった使われ方がされている訳でもありません。実際は後述する「WordPress(ワードプレス)」のカスタマイズ作業を中心に使ってゆきます。

このためにもWeb制作におけるPHPのスキル習得は、はじめは最低限、基礎的な内容だけ身に付けておけば良いと言えます。決して学習を無視する事は出来ませんが、ほとんどはWordPressを使ってゆく過程で覚えてゆけば大丈夫ですよ。

PHPの学習では、これまでにも登場した「Progate(プロゲート)」が利用できます。

▼公式サイト

Progate(プロゲート)

Web制作におけるPHPの役割は、WordPressのカスタマイズにあります。基礎スキルを身につけた方がいいですが、時間のかけすぎにも注意しましょう！

STEP.6 WordPressを使ってWebサイトを作る

WordPressのオリジナルテーマを制作する — WordPressを使ってWebサイトを作る

最後のステップでは、WordPressを使ったWebサイトの制作方法を覚えてゆきましょう。

WordPress(ワードプレス)はブログやWebサイトの構築のために開発された無料のソフトウェアです。高機能かつカスタマイズ性に優れている事から、現在のWeb制作の手法として広く普及しています。

実際に全ウェブサイトの40%以上がWordPressで出来ているとも言われています。

そんなWordPressは、例えば副業やフリーランスとして稼ぐうえでも習得必須とも言えるスキルになります。

実際に多くのWeb制作会社等にも求められているスキルになっています。

WordPressで習得すべきは以下の様なスキルになります。

▼習得すべきWordPressスキル

WordPressのインストール方法や基本的な使い方
テーマやプラグインを使ったカスタマイズ方法
オリジナルWordPressテーマの作り方

WordPressを学習するなら、冒頭でも登場した「デイトラ」や、Udemyの「WordPress開発マスター講座」などの教材がおススメです。

▼公式サイト

デイトラ

▼公式サイト

Udemy(WordPress開発マスター講座)

また、当ブログでもオリジナルテーマ制作で役立つ記事をたくさん用意しています。

おススメ記事

WordPressテーマを「HTML」から自作する方法【初心者向き】作成したHTMLファイルを「WordPressテーマ」にする方法について画像付きで解説します。この記事を読めば具体的な作...

WordPressの記事を探す

みやしもブログのコンテンツはもちろん全て無料です。ぜひ利用して行ってくださいね！

ロードマップ攻略5つのポイントを解説

引き続き、ロードマップの攻略における学習のポイントを解説してゆきます。

ポイント①：Web制作の目標設定を定める

Web制作の学習を始めるにあたって、まずは【目標設定】を明確に設定してゆきましょう。

何故ならスキル習得のために選択する学習内容や学習に充てる日々の作業時間は、いずれも目標設定によって大きく変わってゆくからです。まずは目標設定を明確に定めてから、ゴール地点から逆算してやる事を決めてゆくと、ブレずに学習を進めることが出来ます。

実際にこのロードマップも、Web制作スキルを通して月5万円以上を稼ぐことを目標設定にして、学習内容や順序を考えています。

副業で稼ぎたいのか、フリラーンスで稼ぎたいのか。もしくはいくら稼ぎたいのかなど。Web制作を学習をするための目標設定を明確に定めてゆきましょう。

ポイント②：学習期間は3カ月から【短期集中】で進める

Web制作ロードマップの攻略には少なくとも3カ月以上の学習期間を設けてゆきましょう。また1日の学習時間には、およそ2～3時間（休みの日は4～6時間）程度の時間を取ることをおススメします。

社会人・学生・専業主婦(主夫)など、人によって取れる時間も大きく違うと思いますが、合わせて短期間集中的に学習する事をおススメします。

▼短期間での学習をおススメする理由

自分の適性や得意分野をいち早く見極めるため
モチベーションのあるうちに密度の高い学習を行うため
稼ぐまでの時間をかけ過ぎて挫折しない様にするため

人によっては短期集中が苦手なかたも多いと思います。スピード感をもって学習を継続する意味でも、プログラミングスクールの利用がおススメ出来ます。

ポイント③：オンラインスクールを活用する

Web制作の学習にあたって次のような不安や悩みを抱えている方にはオンラインスクールの利用もおススメできます。

▼オンラインスクールはこんな方におススメ

自分で学習ペースを作るのが大変そう、途中でが失速してしまいそう。。
質問できる環境に身をおけないと、問題解決ができずに挫折しそう。。

Web制作に必要になるスキルの多くは、書籍やWeb上の情報の充実もあり、現在では独学でも十分に学べる様になってきています。

しかしプログラミングなどの学習では挫折ポイントが多く離脱者が多いのも実情です。メンター・講師のいるスクールに身を置けば、いざという時にもヘルプを出すことが出来ます。

また、お金をかける事で期間内でしっかり学ぶぞ！という姿勢を保つことができ、結果として学習を継続することができます。

プログラミングスクールは必ずしも目標達成を保証してくれるものではありませんが、前に進もうとする自分の後押しをしてもらう存在として活用できるサービスです。

ポイント④：Web制作と並行してブログ運営をする

ロードマップの学習過程ではWordPressを使ったブログ運営もおススメです。おススメする理由には次のことが挙がります。

▼ブログをおススメする理由

ブログ運営を通してWordPressの使い方が覚えられる
ライティングやSEO対策などのスキルが身に付く
アフィリエイトなどの副業収入を得ることができる
学習記録やスキルを発信することで企業へのアピールに繋がる

ロードマップにも登場した「WordPress」のことを理解するなら実際に使ってみるのが一番の近道です。このためにもライティング・SEOの学習がしやすく、収益化もできるなどのメリットの多いブログ運用がおススメとなります。ちなみにレンタルサーバーを利用するならConoHa WINGを利用するのがおススメです。

▼公式サイト

ConoHa WING(コノハウィング)

いずれも利用者が多いため将来的にはお仕事で触れる機会も出てくると思います。またWebサイト運営で必要になるサーバー・ドメインの知識も身に付けられるので、何かと利用するメリットの多いツールです。

WordPressを使ったブログの開設方法については次の記事が参考になります。

おススメ記事

ブログの始め方・開設後にすることを徹底解説！おすすめも紹介する【初心者向け】ブログの始め方や開設後にすることを徹底解説します。ブログが開設できる有料・無料の違いや、目的別のオススメ、このほかブログ...

このほか「ブログって実際にお金を稼ぐことができるの？」という事が気になる方には、次の記事がおすすめです。

おススメ記事

ブログ2年目の収益やアクセス数は？リアルな数字を公開するブログ運営を【2年間】継続した当ブログの実績データを、記事数・収益・PV数ごとにグラフ形式でお届けしてゆきます。ブログ運...