プログラミングで人生を豊かに楽しく

WEB制作のロードマップを公開します【初心者から始める6ステップ】

みやしも WEB制作
WEB制作ってどういう風に学べばいいの?おすすめの学習順序や教材があれば教えてください!
この記事では『WEB制作の学習ロードマップ』を公開してゆきます!初めての方でも迷わずに学習を進めることが出来ますよ!

▼この記事を書いた人

Twitter|miyashimo_eng

フリーランスのみやしもです。WEB制作・システム開発などの経験を活かして、初心者に役立つIT知識を発信してゆきます。

WEB制作の学習ロードマップを公開します

さっそくですが、WEB制作の学習ロードマップは次の様になります。



▼WEB制作の学習ロードマップ【6ステップ】

  1. HTML&CSSを学習する
  2. JavaScript(jQuery)を学習する
  3. 模写コーディングでトレーニングを積む
  4. Sassを使ってコーディングを効率化する
  5. PHP・MySQLの基礎を学習する
  6. WordPressのオリジナルテーマを制作する
記事の後半では、ロードマップ攻略のポイントも詳しく解説してゆきます。

また、ロードマップの過程で使用する『ツール・ソフト』のことが知りたい方には次の記事がおススメです。

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

【STEP1.】HTML&CSSを学習する

HTML&CSSを学習する



WEB制作の学習は『HTML&CSS』の習得からはじめましょう!HTML&CSSとは、それぞれ次のような役割を持ったスキルです。



▼HTML&CSSについて

  • HTML ・・・ WEBページの『文章構造』を表現する 【ここで学習】
  • CSS ・・・ WEBページの『見ため』を表現する 【ここで学習】
  • JavaScript ・・・ WEBページに『動き』を加える
  • PHP ・・・ WEBページに『機能性』を加える



普段からブラウザで見ている「WEBサイト」とは、これらHTML&CSCによる「文章構造+見た目」の組み合わせから表現されています。このためにもHTML&CSSは、WEB制作でもっとも使われる基礎的なスキルとなっています。

まずはここからスタートしましょう!少し覚えるだけでも「かんたんなWEBサイト」が作れる様になりますよ!
そんな『HTML&CSS』を理解するなら実際にコードを書いてみるのが一番の近道です。『Progate(プロゲート)』使えば無料から簡単なレッスンを受ける事ができます。

Progate(プロゲート)のイメージ

HTML&CSSのことが学べるProgate(プロゲート)



▼HTML&CSSが無料で学べる

Progate(プロゲート) - HTML&CSS

HTML&CSSをはじめ、様々なプログラミング言語が体験できるサービスです。パソコンさえあれば誰でもできますよ!

【STEP2.】JavaScript(jQuery)を学習する

JavaScript(jQuery)を学習する



HTML&CSSのつぎに学びたいのが『JavaScript』というプログラミング言語です。これまでに学習した『HTML&CSS』とは次のような違いがあります。



▼JavaScriptについて

  • HTML ・・・ WEBページの『文章構造』を表現する
  • CSS ・・・ WEBページの『見ため』を表現する
  • JavaScript ・・・ WEBページに『動き』を加える 【ここで学習】
  • PHP ・・・ WEBページに『機能性』を加える
JavaScriptを習得すれば、WEBページに「アニメーション効果」や「ナビゲーションメニュー」が追加できるようになります。
HTML&CSSと同じように『Progate』で体験することが出来ますよ!

▼JavaScriptが無料で学べる

Progate(プロゲート) - JavaScript


▼Jqueryが無料で学べる

Progate(プロゲート) - jQuery

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

【STEP3.】模写コーディングでトレーニングを積もう

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



これまでに獲得したスキルを活かして挑戦してほしいのが「模写コーディング」です。

模写コーディングとは、既存のWEBサイトの見ためを自分で書いたコードで再現することです。

なぜこのタイミングで行うのかというと、模写コーディングには次のような目的があるからです。



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

  • 実際のサイトを再現することで、スキルを実務レベルまで高めるため
  • もっとも扱う機会の多い言語のコーディングスピードを上げるため


初めは苦戦することも多いと思いますが、確実にスキルアップできるトレーニングです!

模写コーディングの対象としては基本的に何でもOKですが、次のものが効率的に学習しやすくおススメです。



▼初めての模写コーディングにおススメ①

Codestep - 【HTML/CSS コーディング練習】入門編:プロフィールサイト/LP


▼初めての模写コーディングにおススメ②

Codestep - 【HTML/CSS コーディング練習】入門編:フォトサイト/LP


▼練習素材と分かりやすい解説つきで学習できる

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


▼WEBサイトの多くの要素が詰まっている【上級者向け】

バンコクのノマドエンジニア育成講座 - iSara[イサラ]

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

【STEP4.】Sassを使ってコーディングを効率化する

Sassを学んでコーディングを効率化しよう



いくつかの模写コーディングが終わったら段階で『Sass(サース)』を学んでゆきましょう!

Sass(サース)とは『Syntactically Awesome Stylesheets(構文的にすごいスタイルシート)』の頭文字をとったCSSのメタ言語というもので、習得することで再利用・保守性の高いCSSを効率的に書けるようになります。

▼Sass学習のポイント

  • コードの書き方には”SASS記法”、”SCSS記法”の2つがありますが、主流の『SCSS記法』を学んでゆきましょう
  • 再利用性・保守性の高いSCSSにできる『BEM設計』にしたがったコーディング方法を覚えるとより実践的です



WordPressのオリジナルテーマを作るために絶対必要!という物ではありませんが、現在のWEB制作ではほぼ必ず使用するといって良いほど標準的なツールです。



このためにもHTML&CSSの延長として『Sass』の習得も確実に進めてゆきましょう。

上記のとおり『SCSS+BEM設計』をひとつのキーワードにして学習を進めてゆくのがSass学習のベストプラクティスとなります。
自分がつくるコードの品質・作業効率が大幅にUPできるので、習得のメリットも大きいですよ!

Sassには実行環境を導入する必要がありますが、初めての方にはVSCodeのプラグインを利用した方法がおススメです。

Sassのスキル習得には次のサービス・学習教材が役に立ちます。



▼Sassが無料から学べる

Progate(プロゲート) - Sass I


▼【短期集中】メンターに質問しながら学べる

TechAcademy(テックアカデミー) - Webデザインコース



実際のSass(SCSS)+BEM記法で書かれたコードから学びたい!という方には、次のHTMLテンプレートの利用もおススメです。



▼Sass(SCSS)+BEMの参考になる

LAND SCAPE - HTMLテンプレート

【STEP5.】PHPの基礎知識を学ぼう

PHPの基礎知識を学ぼう



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



▼PHPについて

  1. HTML ・・・ WEBページの『文章構造』を表現する
  2. CSS ・・・ WEBページの『見ため』を表現する
  3. JavaScript ・・・ WEBページに『動き』を加える
  4. PHP ・・・ WEBページに『機能性』を加える 【ここで学習】



PHPを使えば、例えばWEBサイトに次のような機能を追加することが出来ます。



▼プログラミング言語『PHP』の活用例

  • WEBサイトを更新するための管理画面
  • WEBフォームの情報をデータベースに保存する
  • お問い合わせフォームの自動返信メールを送信する



PHPの必要性のほとんどは『WordPress(ワードプレス)』の仕組みを利用してオリジナルテーマを作成するためです。上記のことも実際はWordPressを通して行われます。このためにもPHPは、最初は基礎的なスキルさえ身に付けることが出来れば十分だと言えます。

初歩的なポイントはおさえつつも、実際はWordPressのテーマ制作を通しながら学んだ方が効率的です。時間のかけ過ぎには注意しましょう。

PHPの学習教材にはつぎのものがおススメです。



▼PHPが無料から学べる

Progate - PHP 学習編Ⅰ


▼【短期集中】メンターに質問しながら学べる

TechAcademy - Wordpressコース

WordPressのオリジナルテーマを制作するために『PHP』のスキルが必要。初めのうちは基礎的なPHPのスキルさえ身に付けられればOK!

【STEP6.】WordPressのオリジナルテーマを制作する

WordPressのオリジナルテーマを制作する



ここまできたら最終ステップ、いままでのスキルを組み合わせてWordPressの『オリジナルテーマ』を制作してゆきましょう!



オリジナルテーマを制作するためには、あらかじめ次の準備が必要になります。



▼オリジナルテーマ制作に必要なもの

  • WordPressを動作させるための『ローカル開発環境』
  • オリジナルテーマの下地となる『HTML&CSS』
  • サイトの公開先となる『レンタルサーバー』



WordPressのオリジナルテーマ制作では、つぎの学習教材がおススメです。



▼【人気講座】動画を見ながら自分のペースで学べる

Udemy - WordPress開発マスター講座


▼【短期集中】メンターに質問しながら学べる

TechAcademy - Wordpressコース



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


WordPressの記事を探す

みやしもブログのコンテンツはすべて無料!ぜひ利用して行ってくださいね!

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

ロードマップ学習のポイントを解説する



ここからは、ロードマップをこなす上での学習のポイントを掘り下げて解説してゆきます。



▼この章の解説内容

  • ゴール地点は「WordPressのオリジナルテーマ」を制作すること
  • 学習期間の目安は「3カ月」から【短期集中がおススメ】
  • ブログ運営を通してWordPressの使い方を学ぼう【収益化可能】
  • プログラミングスクールの使いどころは挫折しないため
  • ロードマップを通して自分の適性や得意分野を知ろう

ゴール地点は「WordPressのオリジナルテーマ」を制作すること

ゴール地点は「WordPressのオリジナルテーマ」を制作すること



このロードマップの最終目標は、すばり『WordPressのオリジナルテーマ』が制作できる様になることです。

なぜかというと『WordPressのオリジナルテーマ』を制作できるスキルが、そのまま企業や店舗のWEBサイトを作るために必要なスキルになるからです。
多くの方の目標達成に必要になる『お仕事で必要になるスキル』という事になります!
このためにロードマップの内容も『WordPressのオリジナルテーマ』を作成するためのスキルから逆算して作成されています。

学習期間の目安は「3カ月」から【短期集中がおススメ】

学習期間の目安はおよそ「3カ月」から



WEB制作ロードマップの攻略には、およそ3カ月程度の学習期間を設ける様にしてゆきましょう。また1日の学習時間には3時間(休みの日は6時間)程度を目安としましょう。

社会人・学生・専業主婦(主夫)など、人によって時間のとり方は大きく変わると思います。しかし、いずれの方にも言えるのが短期間集中的に学習するのが効果的でおススメということです。

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

  • 自分の適性や得意分野をいち早く見極めるため
  • モチベーションのあるうちに密度の高い学習を行うため
  • 時間をかけ過ぎた結果、挫折しない様にするため
人によっては短期集中が苦手なかたも多いと思います。スピード感をもって学習を継続するためにも、プログラミングスクールの併用もおススメです。

ブログ運営を通してWordPressの使い方を学ぼう【収益化可能】

ブログ運営を通してWordPressの使い方を学ぼう【収益化可能】



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



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

  • ライティングやSEO対策などのマーケティングスキルが身に付く
  • アフィリエイトなどの副業収入を得ることができる
  • 学習記録やスキルを情報発信することで企業へのアピールができる



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

実際にぼくは『WEB制作×ブログ運営』でフリーランスとしての生計をたてています!

ちなみにレンタルサーバーには『XSERVER(エックスサーバー)』や『 ConoHa WING(コノハウィング)』がおススメ。いずれも利用者が多いので、将来的には業務でもふれる機会もあると思います。また、WEBサイト運営で必要になるサーバー・ドメインの知識も身に付けられるので、何かと利用するメリットの多いツールです。



ブログって実際にどうなの?お金を稼ぐことができる?と気になる方には次の記事がおすすめです。

WordPressブログの開設方法には、つぎの記事が参考になります。

プログラミングスクールの使いどころは挫折しないため

プログラミングスクールの使いどころは?



WEB制作の学習にあたり、次のような不安や悩みを抱えている方には「プログラミングスクール」の利用がおススメです。



▼プログラミングスクールはこんな方におススメ

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


WEB制作に必要な各種プログラミングスキルは、書籍・WEBの充実もあり、独学でも学べるスキルとなってきています。


とはいえプログラミング学習には挫折ポイントも多く、離脱者が多いのも実情です。メンター・講師のいるスクールに身を置けば、いざという時にもヘルプを出すことが出来ます。また、お金をかける事で期間内でしっかり学ぶぞ!という姿勢を保つことができ、結果として学習を継続することができます。
プログラミングスクールは必ずしも目標達成を保証してくれるものではありませんが、前に進もうとする自分の後押しをしてもらう存在として活用できるサービスです。
ロードマップの解説でも登場しましたが、WEB制作ではつぎのプログラミングスクール・コースの利用がおススメです。


▼デザインを重点的に学ぶなら

▼WordPressのテーマ制作方法を学ぶなら

▼WEB制作スキルを全面的に学ぶなら
WEB制作者になりたいけど、色々不安要素もある。『リスクをつぶして、ブレずに確実に前に進みたい!』そんな意思をもつ方にこそ、プログラミングスクールはおススメです。

ロードマップを通して自分の適性や得意分野を知ろう

ロードマップを通して自分の適性や得意分野を知ろう



ロードマップに取りくんでみると、作業に対する「向き不向き」や「得意分野」など、実際にやってみないと分からない数多くのことが分かると思います。



▼ロードマップを通してわかること

  • HTML&CSSなどデザインに関連したスキルが得意だ。
  • コードを書く事が好きだ。PHPなどのプログラミング技術が好きだ。
  • WEBサイトの必要性や、WordPressのことを説明をするのが得意だ。
そういった発見やヒントは、自分のアピールポイントとして利用することで”案件獲得”や”企業への就職”など、ロードマップの先につづく『目標達成』に大いに活かす事ができます。
SNS・WEBサイト・プロフィールに反映して、自分のアピールポイントを打ち出してゆきましょう!
適性や得意分野を発見するためにもロードマップの短期攻略がポイントです。自分の強みを見つけて、いち早く行動に反映させてゆきましょう!

この記事のまとめ

今回は現役フリーランス「みやしも」が作成した【WEB制作の学習ロードマップ】を公開。学習ステップごとの内容について、詳しく解説してゆきました。



▼WEB制作の学習ロードマップ【6ステップ】

  1. HTML&CSSを学習する
  2. JavaScript(jQuery)を学習する
  3. 模写コーディングでトレーニングを積む
  4. Sassを使ってコーディングを効率化する
  5. PHP・MySQLの基礎を学習する
  6. WordPressのオリジナルテーマを制作する



WEB制作の学習のために、ぜひ参考にして頂きたい情報です。このほか当ブログでは、WEB制作の情報を多く掲載しています。あわせてご活用くださいませ。



WEB制作の記事一覧

今回は以上となります。最後までお読みいただき、ありがとうございました!

関連記事

最新記事