【2022年版】web制作学習ロードマップ

web制作

(こちらの記事は2022年1月に更新)

 ・ web制作の学習手順てどうなってるの？
 ・ 教材が多すぎて、どれから手をつければよいのかわからない
 ・ 商材が高額なので学べない

この記事はそんな悩みがある方に向けて書いています。
そしてあれこれと手を出してしまうと、かなりの費用がかかってしまいます。

今回はTwitterでも大きな反響を頂いた、『web制作学習ロードマップ』について徹底解説します。

 

✔︎ 本日のテーマ

web制作学習ロードマップ

✔︎ web制作学習ロードマップ

・① HTML&CSS学習
・② 静的サイトの模写
・③ JavaScript(jQuery)の学習
・④ WordPressの学習



① HTML&CSS学習

まずはプログラミング言語の最も基礎なる「HTML&CSS」学習です。
web制作および開発のどちらでも必須項目ですし、現場では100%近く実装で使われます。

学べま学ぶほど深い知識が必要になるのですが、今回は「②の静的サイトの模写をやるまでに必要なレベル」になる学習法を解説します。

学習法

(1) progateの初級と中級で基礎を学ぶ
(2) progateの道場コースをやる(完璧にしなくてOK)
(3) progateの上級でレスポンシブ(スマホ・タブレット)対応を学ぶ

(1) progateの初級と中級で基礎を学ぶ

まず最初にHTMKとCSSの基礎を一通り学びます、教材は以下のProgateをやれば大丈夫です。

Progateの画像

初めに以下の初級コースと中級コースを進めていきます。
大切なことは『周回はしすぎないこと』。

プログラミング学習において基礎学習を周回しても、技術力は一向に高まりません。

『基礎力を応用させる力』を身につけることが大切なので、多くてもこの部分は『2周程度』に留めておきましょう。

最初は『marginとpaddingの違いってなんだろう』『positonって何？』みたいな理解できないことに多々直面しますが、最初から完璧に理解はしなくてもOKです。
使っていく過程で理解できます。

(2) progateの道場コースをやる(完璧にしなくてOK)

次に(1)で学んだ知識を活かして、0から自分でコードを書いていきます。

自信をもって挑戦すると、コテンパンにやられてしまいます。

でも安心してください 『最初は全くできないです』。
この部分に関してはProgate側の採点が、かなり厳しいのでそう簡単にはクリアできないです

そのため、ほとんど回答と同じような表示がされていたら終わらせてしまって大丈夫です。

ここで完璧を目指してしまうと、プログラミング学習の挫折にも繋がってしまうので、深入りはしなくても現段階では大丈夫です。『8割完成』を目指してみてください。

Progate

(3) progateの上級でレスポンシブ(スマホ・タブレット)対応を学ぶ

最後にレスポンシブ対応(スマホ・タブレット対応)を学んでいきます。

ここまではPC版での実装でしたが、上級コースではスマホ対応にさせる方法を学んでいきます。

現在多くのサイトは「モバイルファースト」で作成されているので、この部分は飛ばさずにしっかりやることが必須です。

上級と書いてありますが、初級と中級と比較するとそれほど難しい内容ではないので、安心してください。
この章では『どんなコードを付け足せばスマホ対応になるのか』を理解する程度で大丈夫です。

ここまで学習すれば、『②の模写をするのに必要な基礎』は習得できています。

この段階では100%の理解は不要なので、Progateはなるべく早い段階で終わらせて、②の模写に移行しましょう。


② 静的サイトの模写

次に静的サイトの模写を行います。
静的サイトとは、今回は「HTMLとCSSで作成されたアニメーション(動き)がないサイト」と定義をします。

また模写とは、0からコードを打ち込んで、参考サイトと同じようなデザインを実装することです。

①で学んだ知識を存分に活かして、アウトプットをしていきます。
この過程を通すことで、①で学んだ基礎の理解を深めます。静的サイトの模写は以下の流れで進めていきます。

学習法

(1) VsCodeをセットアップする(環境構築)
(2) 模写サイトを探す(iSaraでOK)
(3) 写経してみる
(4) 模写に挑戦する(完璧じゃなくてOK)
(5) CSSの実装パターンを深める

(1) VsCodeをセットアップする(環境構築)

今まではProgate上にコードを記述して、実際に動きを確かめていましたが、ここから先は『自分のPC上で書いたコードを動くようにする』ように準備していきます。

やり方に関しては、この記事が非常にわかりやすいので、手順通りに進めてください。

(2) 模写サイトを探す(iSaraでOK)

次に模写サイトを探していきます。結論「iSara」のサイトを模写すればOKです。

こちらのサイトはProgateで学んだ基礎をフルで使うことがきます。

他にも模写サイトはたくさんあるので、iSara以外のサイトに挑戦してみたい人は、こちらの記事を参考にしてみてください。


(3) 写経してみる

次に(2)で見つけたサイトを「写経」していきます。「写経」とは「答えのコードを見ながらコードを書き写すこと」。

模写との違いは答えをカンニングしているという点です。

最初から0からコードを書いてwebサイトを実装するのはかなり難しいので、初めは答えを見てもOKです。とゆうよりも見てください。

ここで大切なことは「このコードを書けば、こんな感じに表示されるんか」という程度の理解を持つことです。

おすすめなのはこちらの動画です。
動画でIsaraのサイトを解説しながら実装しています。

(4) 模写に挑戦する(完璧じゃなくてOK)

(3)の写経が終わったら、模写に入ります。htmlとcssのファイルを(1)で作成した環境で作って、実際に実装を進めていきます。

最初は全く手が動かないと思いますが、それは普通なのでご安心を。

そんな時は(3)のように答えを見て実装を進めて大丈夫です。
ここで大切なのは、わからない事が出てきたらググることです。

例えば、要素を横並びにする方法を忘れてしまったのであれば、『CSS 要素　横並び』などと検索をかけ、理解を深めながら進めていきます。

重要なことは『書いたコードがなぜこの動きをしているのか』を理解することです。

これでサイトを模写して基礎力を応用させる力を見つけることができるかと思います。

(5) CSSの実装パターンを知る

最後に、HTMLとCSSの実力をより深く力を身につけ、応用力をつけるために、書籍『CSS設計完全ガイド　～詳細解説＋実践的モジュール集』を利用して、パターンを網羅します。

実装パターンを網羅することで、使い回すことができ、「この実装はこのようの書くのが一番」と瞬時に思いつくことができます。

CSS設計完全ガイド
CSSのさまざまな設計手法を紹介しつつ、基礎から実践のポイントまで解説します
Amazon
楽天

具体的な書籍の学習方法については、「おすすめのweb制作の書籍4選(2021年最新)」にて詳しく解説しているので、ぜひ参考にしてみてください。

【エンジニア必見】おすすめのweb制作の書籍4選(2022年最新)

 

③ JavaScript(jQuery)の学習

次にJavaScript(jQuery)について学習について解説します。

JavaScriptはを利用することでサイトに動き(アニメーション)をつけることができます。
学習手順は以下の通りです。

学習法

(1) JavaScriptの基礎学習(ドットインストール)
(2) JavaScriptの応用(飛ばしてもOK)
(3) jQuery(Progate)
(4) jQueryのパターン理解

具体的に解説をしていきます。

(1) JavaScriptの基礎学習(ドットインストール)

まずJavaScriptはどんなことができるのかを学んでいきます。

ここでは『ドットインストール 』という学習教材がおすすめです。

JavaScriptに関してはProgateよりもドットインストールの方が、動的な操作を具体的な開発を通して学べるのでおすすめです。
進めていく内容としては以下の順で講座を進めていきます。

・はじめてのJavaScript
・もっと詳しくJavaScriptを学んでみる
・ミニアプリを作ってみよう

この手順で進めていくことで、JavaScriptの基礎を網羅的に理解することができます。

(2) JavaScriptの応用(飛ばしてもOK)

次にJavaScriptの応用的なものを学んでいきます。

この箇所に関しては『将来web開発にも携わってみたい』『モダンフロント(Reactなど)』も学びたいと思っている方のみだけで大丈夫です。
今後は『web制作だけ』と絞っている方は、一旦ここには飛ばしてもらって大丈夫です。

結論を言うと、udemyの【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)で学ぶことができます。

udemyの講座

こちらの講座ではフロントエンジニアとして必須の基礎である以下を学ぶことができます、

・SCSSの基礎および応用
・純正JavaScriptでアニメーションの実装
・モジュールの作成
・JavaScript×CSSで作成するweb制作の手順(ポートフォリオにもなる)

かなりボリュームが大きい講座ですが、この部分をしっかりやっておけば、後の学習をかなり楽に進めることができます。
根本的な箇所から掘り下げて、わかりやすい解説をしてくれるのでおすすめの講座です。

そしてwebサイトを実際に作成しながら学べるので、完成後はポートフォリオとしても利用することができます。

この講座を勉強している過程で、わからない箇所が出ていた時に、辞書代わりとして「Progate」を使うことがおすすめです。アロー関数や配列操作など応用的な箇所を、わかりやすく学ぶことができます。

(3) jQuery(Progate)

JavaScriptの基礎が終わったら、jQueryを学んでいきます。jQueryは簡単に言うと、『JavaScriptの記述をより書きやすくしたもの』だと、現地点の理解では思っておいていください。
JavaScript本体で10行近く書かないといけないコードも、jQueryを利用すれば1行程度で済んでしまうことが多々あります。

まず初めに『Progate』のjQueryコースの初級, 中級, 上級を終わらせてください。
道場コースは難しいので飛ばしても大丈夫です。

この学習を通して、jQueryの基礎を学ぶことができます。

(4) jQueryのパターン理解

次にjQueryの実装パターンを学びます。
web制作におけるjQueryの実装はある程度は型が決まっているので、その型を網羅的に学んでいきます。

学習法としては、書籍『jQuery標準デザイン講座』にある、jQueryの実装パータン30種類を学べば十分です。

jQuery標準デザイン講座
全30LESSONを通して、jQueryの基礎知識と基本文法の学習から始めて、実際に動作サンプルを作りながら、jQueryのしくみと使い方を学んでいきます。
Amazon
楽天

こちらも、具体的な学習手順については、【エンジニア必見】おすすめのweb制作の書籍3選の記事にて解説しているので、参考にしてみてください。

【エンジニア必見】おすすめのweb制作の書籍4選(2022年最新)

 

④ WordPressの学習

最後にWordPressの学習に入っていきます。

WordPressの実装に関しては、今までの「HTML, CSS, JavaScript」をフルに活用し、そこにPHPが加わってきます。WordPressの学習手順は以下の順で進めていきます。

・① Progate(PHPのI)
・② WordPress開発講座(Youtube)
・③ 仕事現場でサッと使える！デザイン教科書(書籍)
・④ ③のサイトを参考にHTMLをWordPress化させる

こちらの学習方法に関しては、かなり量が多くなったので、【図解で解説】WordPress学習ロードマップ(2021年)記事に切り分けて、徹底解説しています。

【図解で解説】WordPress学習ロードマップ(2022年最新)

いかがだったでしょうか。

最後にもう一度学習ロードマップをまとめます。

・① HTML&CSS学習
・② 静的サイトの模写
・③ JavaScript(jQuery)の学習
・④ WordPressの学習

必ずしもこの手順で学習するのが正というわけではありませんが、web制作で成果を上げている人の大半がこの手順で、学習を進めています。

自分自身もこの手順で学習を進め、案件実装にも対応できたので、再現性はあるかと思います。

ぜひみなさんの今後の学習にも役立ててください。



ピックアップ記事