最近はプログラミング学習を始める人が急増しているのに伴って、学習情報が氾濫してきたように思います。現在プログラミングを勉強する人はとても増えていて学生の中でも勉強してる人は多いです。
2021年は特に、「Web制作のロードマップ」をいろんな人が出しておりかぶる部分ではありますが今回は記事にしてみました。
①HTMLとCSS
まず初めにWeb制作の入り口として、HTMLとCSSを学ぶ事を強くオススメします！この2つはWebサイトを作る上で、必須の言語で
初心者がプログラミングを学ぶ時に最初に学ぶ事が多い言語です！
HTMLとは
『Hyper Text Markup Language』の略で
Web制作では、ホームページ上に表示をしたい文章や写真などの情報に対し、HTMLという言葉で、コンピュータに文章構成を指示することから始まります。
次に、CSSです。
CSSとは
『Cascading Style Sheets』の略で
ウェブページがスクリーンに表示される際の色・サイズ・レイアウトなどの表示スタイルを指定する事ができます。
皆さんが普段、目にしているホームページやWebサイトはHTMLとCSSで作られているのです！（一部例外あり）
HTML・CSSだけでもコーディングの案件など受ける事ができます。
HTML/CSSを勉強する時にオススメのサイト
プロゲートは聞いたことある人も多いのではないでしょうか？独学で勉強を始める人の多くが最初にたどりつく場所で初心者に人気のあるサイトです。基本無料で使えますがプラス会員（月額1078円）になると「応用」と「実践」で、プラスαの力を身につける事ができてオススメです。
HTMLの基礎をがっつり勉強できるサイトです。CSSの数はまで少ないんですが、HTMLの教材は23個あり一通り終わらせる頃には基礎が身についてると思います！
ドットインストールは様々なプログラミング言語の教材動画を配信している動画サイトです。HTMLやCSSだけでなく、JavaScriptやPHPなども学ぶことができ独学の強い味方です！学びたい言語の項目を3分程度にコンパクトにまとめてあり隙間時間で勉強する事が可能です！
②レスポンシブデザイン
HTMLとCSSの基礎がある程度身についたら次は。
レスポンシブデザインの勉強です！ここからはCSSがとても複雑になりプログラミング初心者がつまずきやすいところでもあります。
レスポンシブが何か分からない人のために少し説明しておくと
レスポンシブとはデスクトップ版のウェブページを閲覧者の画面サイズまたはウェブブラウザに応じて表示できるようにする事です。
例えば、パソコンとスマホでは当然ですが画面の大きさや長さが違います。そのため、スマホで見た時の画面のデザインとパソコンのデザインを変える必要があります。
レスポンシブ対策は現在のWeb制作では必須です。
理由は、日本人の７５%はデスクトップから検索するのではなくスマホから検索するのです！日本のモバイル検索率は世界でも高い方で比較的に多くの人がスマホから検索します。レスポンシブ設定がされているかはSEOに大きく関わってくるのです！
SEOとは何かわからない人はこちらから！書籍はこちらがオススメです！
レスポンシブを勉強する時にオススメのサイト
このサイトは、日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトです。
スマホアプリのLPサイトです！
divタグの設定や横（縦）並びの配置に苦手意識がある方にすごく向いています！ページの情報量も初心者に程よい感じなのでとても練習になるサイトです。
③サイト模写
サイト模写とは実際に公開されているWebサイトなどを見て
ソースコードや参考書を見ずに似たようにサイトを作る事です。
実際に公開されているサイトなので、実践力を身につけるには最適な方法で勉強する事ができます。HTMLとCSSをある程度勉強したらサイト模写で実践的な練習をおこないます。
サイト模写をはじめてやるときは、最初はとりあえずやってみるしかないのでやってみるけど必ず時間がかかります。つまづいた箇所があったりすると、さらに時間がかかり、時間を消費します。ここまでは、はじめてなので誰でも経験し得ることで想定内です。
ここで、多くの人がつまずき挫折するのです。
逆を言えばここを乗り切る事ができればそれだけでライバルが減るし
自分への自信にも繋がり、より勉強を頑張ろうと思えます！
ですので、絶対に諦めてはいけません！！！
サイト模写の勉強をする時のオススメのサイト紹介！
「模写コーディング」や「デザインカンプからのコーディング」を通してコーディング練習を行うことで、より実践的なWebサイト制作のスキルを身につけるための学習サイト。
とてもシンプルな形で作られているサイトで、HTMLとCSSをある程度理解していれば、十分に対応できると思います！
上記2つ以外にも良い模写サイトはあるので自分に合ったサイトを見つけて見て下さい！
④JavaScript
まず初めに、初心者向けにJavaScriptとは何ができるのかをなるべく簡単にわかりやすく解説します。
JavaScript（ジャバスクリプト）とはブラウザ上でWebページをダイナミックに動かすための簡単なプログラムです。
華やかなアニメーション演出や、ボタンにカーソルを合わせると色やデザインを変更させて別ページに飛ぶのが分かるなどの挙動をし、ユーザーのサイト閲覧を助ける役割を担うなど、Webサイト制作に欠かせない存在です。
CSSでもアニメーションはつけることはできますが、ブラウザのスクロール取得、クリックの検知などアニメーションの「きっかけ」には、やはりJavaScriptが必須になってきます。
JavaScriptは学習動画を見て一通り基礎を学んだら、あとは制作の数をこなしましょう。いきなりピュアのJavaScriptを使用してWebサイト制作を始めると難しいので簡単な動作から触れていくのがオススメです！
JavaScriptを勉強する時のオススメのサイト紹介！
code.9leapはゲームエンジンであるenchant.jsを使用しています。ゲーム感覚でプログラミングを勉強する事のできる学習サイトです。
『JavaScript』について検索すると、必ず検索上位に表示されるのが『とほほのJavaScriptリファレンス』です。
2001年から存在しているサイトですが、今でも更新がされています。一つ一つの解説もていねいです。また、とほほのJavaScriptリファレンスはサンプルコードが豊富です！サンプルコードを使い、最初は真似して動かしてみることもできます。
1日10分ずつ勉強していく事も可能で、それに質問できる環境も整ってます！
『CODEPREP』は穴埋め形式から学習していく事ができるので隙間時間で、問題を解くように学習したい方にはオススメです！
⑤jQuery
jQueryとはJavaScriptでできることを、より簡単な記法で実現できように設計されたJavaScriptライブラリです。
※ライブラリとは汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもの
ここで、最近よく言われる『jQueryオワコン説』は本当なのか？という点に触れたいと思います！
答えは『まだオワコンではない！』という事です！
そもそも、なぜWebのフロントエンドでjQueryが15年近く使われていたかと言うと、Javascriptの各ブラウザの挙動がバラバラだった事がいちばんの要因です！
何か処理を書いた時に、Chromeでは動くけど、Safariでは動かない。みたいな事が当たり前にある時代だったんです！
その各ブラウザの挙動の違いを、エンジニアが一つ一つ直していくと
とても大変なのでjQueryを使う、という流れです。
ただ、今は各ブラウザの仕様が整ってきて、正直jQueryを使うメリットが薄れています！あとはJavascript自体もバージョンアップしてきたことで、脱jQueryというのが現実的になっているのが現状です！
ですが現在のWeb制作の現場ではまだ使われる事が多いのも事実です！
//文章修正
ですのでjQueryの勉強にそこまで時間をかける必要はないと思っています！
jQueryの勉強時にオススメの勉強法
とりあえず鉄板のプロゲートで学習します。
実際に作る完成物よりも、
「プログラミングの基礎的な考え」と「主要なメソッドの使い方」を頭に入れておく方が大事です。
②書籍(jQuery最高の教科書)
プロゲートで基礎を習得したら
次は書籍で勉強する事を強くオススメします。
理由は、書籍には様々なテンプレートが豊富で色々な場面で使う事のできるコードがたくさんあるからです。
この、jQuery最高の教科書は【とことん丁寧】&【ステップアップ解説】だから、知識ゼロからでも理解ができます！
⑥PHP
PHPとは動的にWebページを生成することができるサーバーサイドのスクリプト言語です。またMySQLなどのデータベースとの連携が容易なことなどから、WordPressを含めたWebアプリケーションの開発にもよく使われます。
次に、『PHPがなぜWeb制作に必要か』を解説します。
Web制作ではHTMLとCSSが必要であることをお伝えしましたが、
Web制作で、この2つだけではどうしても実現できないことがあります。
それは、ホームページからコメントを送信したり、ショッピングサイトでカートに商品を入れたりするような、ユーザーの操作を受け取って変化する部分です。
また、Webページを制作する代表的なソフトウェアにWordPressがありますが、このWordPressもPHPで開発されています。
基本的な機能を使うだけであれば、プログラミングの知識がなくても、WordPressでWebページを制作することは可能です。しかし、少し凝ったWebページを作りたい場合は、HTMLやPHPで書かれたソースコードを編集するスキルが必要になってきます。
phpオススメの勉強サイト
通常PHPを学ぶ際には環境構築をする必要がありますが、Progateではブラウザ上だけで学習を進めることができることも特徴の一つです。基礎編の最後には、お問い合わせフォームの作成課題が出されるため、実践的な感覚をつかむことができます。
PHPの基礎的な知識を全10回の記事に分けて解説してくれているため、自分のペースで理解を深めながら読み進めることができます。
PHP公式マニュアルは、学習サイトではなくPHPの公式リファレンスになります。PHPの導入方法から始まり、基本的な構文や関数の一覧、バージョンごとの違いなどPHPに関するあらゆる情報がまとまっているサイトです。
⑦WordPress
WordPressとはいわゆるコンテンツマネジメントシステム（CMS）というものです。簡単にいうと、「ホームページの制作ができない人でも、簡単にコンテンツを管理できる仕組み」ということです。
通常、ホームページに新たに記事を追加しようとすると、HTMLという言語を勉強して、自分でコードと記事の文章を書いていかなくてはなりません。それがWordPressの場合は、HTMLのコードがわからなくても、マイクロソフトのワードに文章を書いたり写真を挿入したりする感覚で、記事やニュースを更新していくことができます。
WordPressは世界中のCMSのうち60%を超えており、世界中のWebサイトのうち41%以上のシェアを誇っています。
ワードプレスがなぜ世界中で人気なのか？？その理由は、
『一般ユーザーも、制作会社も、無料でWordPressサイトを作ったり、サービスとして販売できる』という事です。
このことが、WordPressのシェアを高めた大きな要因の一つであると考えています。
ワードプレスは書籍や動画を見ながら勉強した方が効率が良いです。
理由は、WordPressの細かい設定やサーバーの事などこれまで体験した事ない事が複数同時に起こり、つまずきやすいからです。YouTubeは実際に作成のプロがパソコン画面を見せながら教えているので初心者で右も左も分からない状態なら必ず一通りは見て勉強した方が良いです
WordPressオススメの勉強法
①書籍
⑧ポートフォリオ作成
ここまで学習が終わったら次は営業用のポートフォリオを作成していきます。
（自分の能力をアピールするため！）
ポートフォリオとは、自分の履歴や能力を相手に伝えるための作品です。
就職の面接やクライアントへの売り込みの時に自分に何ができるのかどのような仕事を受けた事があるのかをアピールする大切なツールになります。
仕事を受注する上で、ポートフォリオは必須となるので必ず営業前に用意しておきましょう！自分のスキルや実績をのせておきましょう！
ポートフォリオは、一から自分でサイトをデザインするのもありですが、難易度高めです。参考サイトをもとに、自分なりにアレンジして作成して見ましょう！
まとめ
いかがだったでしょうか？今回はWeb制作ロードマップというかたちで解説していきました。Web制作はとても人気のある職種で現在も勉強している人が増えています。
少しでも興味があるのならこちらの記事もご参考に！
最後まで読んでいただきありがとうございます。
ロードマップに対しての質問は気軽にインスタかTwitterのDMからご連絡ください！
それではまた！次回の記事でお会いしましょう！
熊本ホームページ制作-Rapid Grow 
「『2021年版』Web制作で収入を得るまでのロードマップと勉強方法」への1件のフィードバック