WEB制作の勉強についてノウハウをご紹介しながら、WEB制作の勉強方法をまとめてみましたので、是非参考にしてくださいね！
WEB制作！勉強のロードマップはこれ！
WEB制作はすべて独学で勉強できるって知っていましたか？
この記事を読んでいただけると、もっと効率良く勉強できますよ！
独学で学べるならお金もかからないし、時間も自由になるので、『自分に合っているかも』と思っている人も多いかもしれませんね。
たぶん世の中には、こんな性格の方がいると思いますので、そういった方に向けて記事を書いてみました。
この記事があなたのWEB制作勉強のロードマップとなってくれたら嬉しいです！
《この記事を読んでほしい人》
★WEB制作を勉強しているorこれから勉強しようと思っている人
この記事のとおりに勉強していただければ、ランサーズ内で1~5万円程度の案件がこなせるようになりますよ！
独学は一人ぼっちで辛い時もたまにありますが、頑張っていきましょう！
それでは、さっそく始めていきますね！
１．WEBサイトの仕組みと基礎を理解しよう！【HTML／CSS入門】
WEB制作の勉強の第一歩として、『HTML／CSS』があります。
これは、すべてのWEBサイトのベースとなる知識です！
これを知っていないと何も始まらないと行っても過言ではないので、しっかり見ていきましょう！
そうは言っても、HTML／CSSの基本を学ぶのは、けっこう簡単なので安心してくださいね。
では、実際にどういった流れで勉強していくのか、ご紹介していきます。
① ドットインストール【HTML／CSS入門】
WEB界隈ではとても有名な『ドットインストール』を使っていきましょう。
『ドットインストール』とは、プログラミングを動画でわかりやすく解説しているサイトのことです。
WEBを勉強している人は、かなりお世話になっていると思います。
実は海外では動画でプログラミング勉強をするサイトがたくさんあるんですよ！
しかし、日本ではドットインストールくらいしかないんですよね！
その他サイトもありますが、情報量が少ないのであまりオススメできません・・・。
②『よくわかるHTML5+CSS3の教科書』
HTML／CSSの勉強においては、『よくわかるHTML5＋CSS3の教科書』という本1冊だけで十分です！
HTMLとCSSのうしろに『5』と『3』がついていますが、これはバージョンを表しているだけ。
これから勉強を始める方は特に気にしなくても大丈夫ですよ。
この本を使うにあたって注意点があります。
多分途中で飽きる・・・ということ( ;∀;)
これは人にもよりますが・・・。
多くの人は途中で飽きてしまうかもしれません。
飽きないようにするコツとしては、ゆる〜く読むことです（笑）
HTML／CSSは基礎だけど幅が広い！
なので、1度で理解しようとすると時間がかかりすぎてしまって、飽きてしまう原因になります。
③ディベロッパーツールの使い方は？
ドットインストールとよくわかるHTML5+CSS3の教科書を読み終えたら、HTML／CSSはだいたいこんなもんなんだなぁって理解できる状態になると思います。
このタイミングでディベロッパーツールの使い方を理解しておくことをオススメします。
結構後の段階でディベロッパーツールを知ってしまうと、残念なことになります・・・
後悔しないためにも、具体的な使い方を知っておきましょう！
④フレームワーク【Bootstrap】の使い方は？
人によっては、『基礎をマスターしたあとにフレームワークを使うべきだ！』と言いますが、『初心者でもばりばりフレームワークを使うべき！』だと思っています。
どうしてかというと、フレームワークは楽しいから！
というのも、基礎学習の本では10行以上で書かれていたコードも、フレームワークだと、たった1行で実現できてしまうんですよね！
HTMLのフレームワークは数多くあります。
その中でも【Bootstrap】を利用するといいですよ！
理由は単純です。
1番広く使われているフレームワークだから！
ネットでググれば参考情報がメチャクチャ多く出てきますよ！
勉強方法としては、もちろんドットインストールがオススメです！
こちらの動画をサクッとみてみましょう♪
⇒Bootstrap 3.0入門 (全18回) – プログラミングならドットインストール
２．WEBサイトにアクセスを集めよう！【SEO入門】
WEBサイトをつくる目的は人それぞれですよね。
でも、オンライン上に公開するからには、多くの人に見てもらいたいと思いませんか？
そこで必要となってくるのが『SEOの知識』なんです。
『SEO』とは、サーチエンジンオプチマイゼーションのこと！
簡単に言うと、あるキーワードで検索されたときに、上位表示を狙うために必要となる技術です！
特に検索結果のトップ10に入ると、数多くのユーザーさんがサイトに訪れてくれますよ。
では、どういった流れでSEOを勉強すればいいのでしょうか？
早速ご紹介していきますね。
①『これからはじめる SEO内部対策の教科書』
SEOの基礎勉強には、これからはじめるSEO内部対策の教科書という本1冊で十分ですよ！
早い人なら2~3時間で読み終える事ができるくらい、サクサク読めちゃいます。
質の高い情報が凝縮されているので、一冊で十分なくらい重宝します。
また、これからWEBマーケティング会社に就職するって人にも超オススメですよ。
読んでおいて損はないと思います！
②『バズ部』を紹介！
SEOの基礎が分かったら次にオススメするのがバズ部です。
WEBマーケティング業界ではかなり有名なメディアなんですよ！
記事の質がかなり高くてオススメです。
その中でもオススメの記事はこちらになります♪
⇒ロングテールSEOで検索アクセスを倍増させるための基礎知識と具体策
③コピーライティングを学ぼう！
SEOがわかっただけでも、WEBサイトにある程度の訪問者（トラフィック）を生むことは可能です。
しかし、SEOの最適化だけでは物足りません！
実際の記事の質が低かったら読者は失望するからです・・・。
そこで必要となってくるのがライティング技術！
これ、最近のIT業界ではかなり重宝されるスキルなんですよ！
すばらしい文章が書ければ、メディア運営しているIT企業から引っ張りダコ間違いなしです！
では、文章力はどのように鍛えればいいんでしょうか？
それは、インプットの量とアウトプットの量を増やすだけ！
そこで今回は、効率的にインプット量を増やすために必読な記事と書籍をご紹介しましょう！
⇒たった1記事で8万人に読まれる文章を書けるようになるライティング術
⇒コンテンツマーケティングの進め方|弊社が広告費ゼロで10倍の売上を達成した手法
是非、読んでみてくださいね！
④キーワードの検索ボリュームはどれくらい重要？
『SEO』と『コピーライティング』に関して、知識がつきましたよね！
では、次に学ぶべきことは何だと思いますか？
それは、『検索ボリューム』について！
『検索ボリューム』とは、あるキーワードがどのくらいの回数で検索されているかという意味。
キーワードの検索ボリュームを測るために、『キーワードプランナー』というツールを利用しましょう。
具体的な使い方は下記の記事を見てみてください！
⇒【徹底図解】お宝ワードが見つかる！キーワードプランナー使い倒し術
Googleが提供しているサービスなので、キーワード別の検索ボリュームを簡単に調べられますよ！
３．実用的なWEBサイトを制作しよう！【WordPress】
WEBサイト制作とSEOの基礎がわかりましたね！
では、ここからは実践的な話をしていきたいと思います。
WEB制作初心者に、最初にオススメしたいのが『WordPress』です！
WordPressは『CMS』というシステム。
ざっくり説明すると、『誰でも簡単にWEBサイトがつくれるツール』なんですよ。
WordPressの始め方は下記の記事で分かりやすくまとめているので、よかったら見てみてください♪
ここからはWordPressを使って、実際にWEBサイトを作っていきたいと思います。
具体的な勉強方法をご紹介していきますね。
①ドットインストール【WordPress】
やはり最初はドットインストールがオススメです。
⇒WordPress入門 (全23回) – プログラミングならドットインストール
でも、全てを見る必要はありませんよ！
とりあえずは#01〜#06までを見ておけばOKです！
それ以上の部分は、この時点だとちょっと難しいかもしれません。
ドットインストールは1つの動画が3分！
なので、6つの動画を全部見ても、約20分で閲覧可能！
今すぐ勉強を開始しましょう！
②『本格ビジネスサイトを作りながら学ぶ WordPressの教科書』
WordPressの基本的な操作方法がわかったと思います。
この時点でオススメしたいのが、『本格ビジネスサイトを作りながら学ぶWordPressの教科書』です。
⇒本格ビジネスサイトを作りながら学ぶWordPressの教科書はこちらから
WordPressの基礎から応用までが解説されていて超オススメですよ！
本を読みつつ実際に手を動かしてみましょう。
WordPressの全体像がわかるようになりますよ！
WordPressはとても簡単なので、この1冊を仕上げればOK！
その他の本は必要ないです！
ちょっと分からないところをググるだけで十分です！
③WordPressで個人ブログを作ろう！
先程オススメした『本格ビジネスサイトを作りながら学ぶWordPressの教科書』を読めば、WordPressの基礎知識は十分だと思います！
では、このタイミングで個人ブログを実際に作ってみましょう！
★HTML／CSS
★SEO
★コピーライティング
★WordPress
上記の知識を実際に活用していくタイミングです！
最初は、既存のテンプレートをWordPressにインストールするのがオススメですよ！
ちなみに『WordPress 無料 テーマ まとめ』などでググってみてください。
かっこいいテンプレートが沢山載っている記事が数多くヒットするのでオススメです。
お気に入りのテンプレートでインプットしてきた知識をアウトプットして下さいね！
④ブログに広告を掲載してみよう！
世間的にはあまり知られていないかもですが・・・
WEBサイト運営やブログで、収益を生むことができます！
いくつか広告を貼ることができるので、収益が発生するんです。
《条件は以下のとおり》
★訪問者が広告をクリック
⇒1クリックで20〜40円
★訪問者がクリックした広告のリンク先で商品を購入
⇒購入額の数%
まずは基本として、上記2つを覚えておいてくださいね。
それらをサイト上に掲載するには、以下を使いましょう。
これらの情報もググるとたくさん出てくるので、まずはサクッと登録だけ先に済ませておくことをオススメします♪
４．WEBサイトに動きをつけよう！【jQuery】
ここまで書いたことをやった人は、基本的なWEBサイト制作はマスターしている状態になっていると思います。
次に興味が湧いてくるのは、こんなことではありませんか？
★サイトをもっと見やすくしたい
★サイトに動きをつけてみたい
そこで必要となる知識が『JavaScript』です。
でも、JavaScriptは難しいんですよね・・・。
なので、今回は『jQuery』を利用しましょう。
『jQuery』とは、JavaScriptのフレームワークだと思ってOK！
JavaScriptで実現することが難しいコードでも、jQueryを使えば簡単に実現できますよ！
では、実際の流れで勉強していきましょう！
①ドットインストール【jQuery】
まずは、定番のドットインストールです！
⇒jQuery入門 (全20回) – プログラミングならドットインストール
全20回をしっかり閲覧しましょうね！
jQueryの全体像がつかめるようになりますよ。
②『Web制作の現場で使うjQueryデザイン入門』
ドットインストールを終えたらオススメしたい一冊があります。
⇒Web制作の現場で使うjQueryデザイン入門はこちらから
実務で使われるサンプルが数多く紹介されているんですよ。
jQueryの便利さが実感できると思います。
同時にjQueryの勉強のモチベーションのアップにも繋がりますね！
③『 jQuery最高の教科書』
次にオススメなのが、『jQuery最高の教科書』です！
『Web制作の現場で使うjQueryデザイン入門』とは違い、サンプルコードがレベル別に紹介されています。
解説もかなり詳しいのでオススメですよ！
とはいえ、後半に進むと、コード自体が難しくなっていきます。
ちょっと辛いかもしれませんね・・・。
でも、サンプルコードを完全に理解する必要はないので安心して下さい！
この時点では、jQueryはこんな感じなんだなぁ〜って気持ちでOKですよ！
５．もっと自由にWEBサイトをつくろう！【PHP】
ここまでくると、WEBサイト制作に満足してしまう人も多いかもしれませんね。
しかし、さらに勉強を進めると、より自由度の高いWEBサイトやWEBサービスを作れるようになりますよ！
ここでは、初心者にオススメなPHPをベースに勉強方法を解説していきたいと思います。
①『よくわかるPHPの教科書』
『よくわかるPHPの教科書』はPHPの入門書ですね。
書かれている内容は、かなり基礎です！
ですがが、これを読むとPHPを使うとどういったことが実現できるのかイメージしやすくなりますよ。
購入しなくても、本屋で立読みでもOK！
②ドットインストール【PHP入門基礎】
ここでもまた、ドットインストールを使いましょう！
⇒詳解PHP 基礎文法編 (全34回) – プログラミングならドットインストール
ぶっちゃけ、PHPの基礎はつまらないです・・・。
が、ここを知っていないと何も始まらない！
我慢して見ましょうね☆
応用編の方は見ておいて損はないですよ！
でも、そこまで真剣に理解しなくても困らないので、大丈夫です。
というのも、最近では素晴らしいフレームワークが数多くあります！
従来の長ったらしいコードを書く必要性は、かなり難易度は低下しているので心配ないですね。
③『Webサイト制作者のための PHP入門講座』
ここから一気に実践に近い本をご紹介します！
オススメはWebサイト制作者のための PHP入門講座になります！
この本の前半部分は、基礎知識です。
後半からは具体的なWEBサービスの構築方法が書かれていますので、オススメですよ。
ここまで来ると、PHPの勉強が楽しく感じるようになるはず！
④Tut+【海外のプログラミング勉強サイト】
最後にご紹介するのは、『How-To Tutorials & Free Online Courses by Envato Tuts+』です。
これは、海外のプログラミング勉強サイトなんですよ。
ただ残念ながら日本語には対応していません・・・。
PHPやその他フレームワークの素晴らしい動画教材が揃っているので、超オススメです。
料金は有料となっています。
すこし残念・・・。
でも、お金を払う価値アリ！
『どうしても無料で見たいよ・・・』って人はYoutubeで探してみてくださいね。
たまに該当動画が無料で公開されていますよ（笑）。
６．まとめ
最後まで読んでいただき、ありがとうございました！
この記事では、WEB制作を独学で学ぶ際にオススメの方法をご紹介しています。
この方法が必ず正しいというわけではありませんが、多少でも参考にしていただけたら嬉しいです！
