【独学】Web制作の学習方法のおすすめ【初心者の方も出来ます！】

こんにちは、しまみさです

本記事は、こんな方に向けて書いています。

私自身、Web制作の勉強を1年以上続けています。
私の場合、プログラミングスクールに通ったり、情報商材を購入したりせず、独学でやっています。
そんな私でも、お仕事を受注し、サイト制作をすることが出来ています。

しかし、振り返ってみると、もっと短期間で効率的に学習することが出来たはず•••と悔やむ点はあるので、私が考えるWeb制作の勉強の流れをお伝えします。
少しでも参考になれば幸いです！

こちらが大まかな学習内容です。

基本的に、勉強したらアウトプットをするの繰り返しを行っていきます。
自分で考えながら、実際に手を動かすことが大切です。

学習期間は、3ヶ月〜半年を目安にすると良いと思います。
長過ぎると、飽きたりモチベーションが続かなかったりするので！

私はフルタイムで他の仕事をしながら勉強していた上、意欲が沸かない期間もあったので、ダラダラと1年弱もかかりました。長期間の勉強はあまりオススメしません•••

では、学習内容をひとつずつみていきましょう。

Webに関してさくっと学ぶ

Webに関して知識がない場合は、さらっと勉強した方が良いと思います。
勉強といっても暗記する必要はなく、本を読んだりネットで調べたりする程度でOKです。

私はPC含め機械が苦手で、 HPがどんな風に作られているかなんぞ考えたこともなかった人間なので、まずは基礎中の基礎から始めました。

こちらの記事が大変わかりやすかったです！

【基本のき】ホームページの仕組みをイラスト付きでまるっと解説！

HTML&CSSの学習

はじめに、HTMLとCSSを勉強しましょう。その前に、HTMLとCSSとは何かをざっくりと！

HTMLとは

HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webサイトに文字などを表示させるための言語です

CSSとは

CSSとは、「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略で、HTMLで作った文字などを修飾する言語です。例えば、文字の色や大きさなど自由に変えることが出来ます。
＊正式には、HTMLとCSSマークアップ言語です！

学習方法

いきなりスクールに通ったり、有料のコンテンツを買ったりせずに、まずは無料でやってみましょう。それから継続できそうか見極めましょう。無理に継続することはないと思います！

プロゲート

オススメはプロゲートです

イラストと色合いが可愛らしく、ゲーム感覚でプログラミングを学べる学習サービスです。
HTML&CSS初級編は、無料で出来ますし、1日あれば終わると思います。

しかも、必要なものはインターネットとPCだけなので、試すハードルが低いのも良いですね！
スマホアプリ版もありますが、PCの方がやりやすいと思います。

ドットインストール

プロゲート初級編が終わったら、有料会員になり他のコースに挑戦するのもアリですが、私はもう少し試してみたかったので、ドットインストールも使いました。

ドットインストールは、3分動画でプログラミングを学べる学習サービスです。
現在、HTMLとCSSの概要コースがそれぞれ無料公開されているようです。

1回目は動画を見て、2回目は動画と同じようにコードを入力してみると、より実践的でオススメです。

以上２つの学習サービスでHTML&CSSを学ぶと、何となく理解できようになります！
更に理解を深めるために、有料コースに挑戦したり、HTMLとCSSに関する本を読んだりしましょう。

＊YouTubeにも有益な動画が沢山あるので、気になったものは試してみてください。

個人的には、7〜8割理解できていればOKかと思います。
コーディング中に、都度調べれば大丈夫ですし、繰り返し使うものは自然に覚えます。

HTML&CSSだけでサイトを作ってみる

HTMLとCSSだけでもサイトを作ることは出来ます！
勉強ばかりでは飽きてしまうと思うので、ぜひ何か作ってみましょう！

いざ一から作るとなると、何から始めれば良いか分からなくなると思います（多分皆さん通ってきた道なので大丈夫です！）。
そんな時はプロゲートとドットインストールで復習したり、ググったりしましょう。

試行錯誤しながら自分で作ってみることで、自走力と自信がつき、さらに創作意欲が湧くと思います！

Chromeの検証機能を使いこなそう

検証機能は、コーディングをする際に絶対に覚えておきたい機能の一つです。
使いこなせると、作業効率がアップするので、この段階で覚えてしまいましょう。
使い方は、「検証機能 chrome」でググると色々出てくるので、いくつか読みながら実践してみてください。

jQueryの勉強

次に、jQueryを勉強しましょう。
上記の段階で作ったサイトは、動きのない、ほぼ静的なサイトになっていると思います。
jQueryを使用すると、画像やテキストに動きを付けたり、ハンバーガーメニューを作ったり出来るので、グッとサイトがかっこ良くなります。

jQueryとは

jQueryは、JavaScriptのライブラリの内の一つです。
JavaScriptを使うよりも、短く簡単にコードを書くことが出来ます。
JavaScriptを先にすべきと言う方もいると思いますが、私には難しく•••先にjQueryを勉強しました(><)

長いコードを見ると、気持ちがざわつく方はjQueryから始めるのが良いと思います！
そうでない方は、JavaScriptから始めてください！

学習方法

今回も学習方法は、プロゲートとドットインストールがおすすめです。
まずは無料で出来るコースに挑戦してみましょう。
その後は、HTMLとCSSの時と同様に、有料コースに挑戦したり、本を読んだりしましょう。

HTML&CSS&jQueryでサイトを作ってみる

以前HTMLとCSSで作ったサイトに、jQueryで動きを付けてみるのも良いですし、新たにサイトを作ってみましょう。
コードをカンニングしながらで良いので、復習しつつアウトプットしましょう！

JavaScriptの勉強

次に、JavaScriptを勉強しましょう。
今回も学習方法は、プロゲートとドットインストールがおすすめです。

私の場合、実務ではjQueryを使うことの方が多いですが、脱jQueryの動きがあったり、JavaScriptの使用を推奨されることがたまにあったりしたので、勉強して損はないと思います。

使わないと忘れてしまうのですが•••
復習する時にゼロからのスタートじゃないので、理解が早くなります(^^)!

Webサイトを作ってみる

ここまでの総まとめとして、Webサイトを作ってみましょう。
好きなものを作っていただいて構いませんが、下記を参考にしてみてください。

実際に私も全部やってみました。
最初はとっても時間がかかり、上手くいかないことだらけで辛いと思いますが、徐々に慣れます！
練習なので、ぜひ楽しみましょう！！

基本学習は終わり

以上で、基本的なWebサイト制作の学習は終わりです。
勉強しようと思えば、他にもたくさんたくさんあります！
気になる言語やフレームワークなどあれば、挑戦してみてください。

ここまでの段階で、コーディングスキルはある程度身に付いていると思います。
お仕事に挑戦するのも可能なのですが、コーディングのみのお仕事はあまり無いのが現実。
そこで、WordPressも勉強しましょう。

WordPressの勉強

WordPressが使用できると、実用的なサイトを作れたり、お仕事の単価が上がったりします。
今後お金を稼いでいきたいと考えている場合は、勉強しておくべき内容です。

学習方法は、ドットインストールがおすすめです。
他に、YouTube動画をみたり、有料動画や本で補充した方が良いと思います。

WordPressでサイトを作ってみる

理解を深めるために、実際に手を動かしてみましょう。
以下は私が実際に行った勉強方法です。

一からテーマを作るのが一番大変です。
ネット情報だけだと苦労しました（早く本を買えばよかったと後悔）。

なので、作り方全てを網羅した本を購入し、本に沿って進めるのがオススメです。
私は、[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書を使っています。

ポートフォリオサイトを制作

ここまでお疲れ様でした！！
学習のまとめとして、今まで制作してきたものをまとめた、ポートフォリオサイトを制作しましょう。
転職活動やお仕事の営業にも使用できるので、名刺代わりになります。

作り方は色々あるので、自分に合った方法でOKです！

転職活動orお仕事に挑戦

転職活動をする場合

転職エージェントやハローワーク、SNSなどを利用して転職活動。
応募条件に「実務未経験可」とある企業に応募するのがベターです。
ポートフォリオサイトがアピールポイントになると思いますので、頑張ってください！

お仕事に挑戦

クラウドソーシングサービスや営業、知人の紹介などでお仕事に挑戦。

実務経験がないと、お仕事を受注するのは結構なハードルがあるかと思います。
なので一番最初は、自分のことを知っている人や、繋がりがある人からのお仕事を頂ければ良いと思います。
もちろん、クラウドソーシングサービスや営業で受注するのも可能ですが！
色々な方法に挑戦してみてください。

まとめ

本記事は、【独学】Web制作の学習方法のおすすめ【初心者の方も出来ます！】について書いてきました。

学習方法の流れをまとめると、以下の通りです。

独学は可能ですが、スクールに通ったりコミュニティに所属したりするのが合っている方もいると思います。学習方法の一つとして考えて頂ければと思います。
Web制作の勉強は、やればやるほど成長が感じられると思うので、一緒に頑張りましょう！

ではでは(^^)