Written by Takanori Aoki

【Web制作 独学】勉強ガイドマップ【初心者向け】

CSS JavaScript PHP PROGRAMMING WordPress

Web制作の勉強で悩んでる方に「Web制作の勉強ガイドマップ」をまとめてみました。

もともと独学でWeb制作の勉強はプログラミンを始める前から軽くしておりました。5年以上の経験はあります。だいぶんノウハウ・経験がたまってきましたのでそれを記事にしようと思います。

まずはこちらのツイートをご覧ください。

Web制作の独学勉強ガイドマッップ

ぼくのWeb制作の勉強方法はすべて独学で勉強してきました。いまふっと感じるのですが、だれかに教えてもらえていればもっと効率よく早く勉強ができたんだろうなぁ〜と感じております。

むかしから「人に教えてもらうのが苦手な」ぼくは独学のほうが自分に合っていると感じました。たぶん世間にはぼくと同じような性格のかたがいらしゃると思うので、「人に教えてもらうのが苦手」そんな人向けに記事を書きます。この記事がWeb制作の勉強のガイドマップになれば幸いです。

読んでほしい人

Web制作を今勉強してる人/これから勉強したいと思ってる方

記事のガイドマップとおりに勉強することで、ランサーズないで5万円程度の案件ができるようになります。独学はたまに面白くないし、辛くもありますけど、濃密な時間を与えてくれるのも独学しかないのでがんばりましょうV(^_^)V

それでは、さっそく勉強のガイドマップをはじめていきます。

※なんと0円のプログラミングスクールという近道
最近ではプログラミングスクールもかなり増えてきております。、そこで最初の基礎のベースを身につけるならTechAcademyの方が早いかもです。TechAcademyは1週間の無料体験があるので、これを使ってWebアプリケーションの基礎を試して見て自分に合うか合わないかを判断するのも良いかなと。
»TechAcademyの無料体験はこちら

もくじ

【第1章】Webサイトの基礎と仕組みを理解する「入門編:HTML/CSS」

【第2章】Webサイトにアクセスを集める方法「入門編:SEO」

【第3章】Webサイトの制作【WordPress編】

【第4章】Webサイトの動き【jQuery】

【第5章】より自由近いWebサイトをつくる【PHP】

【第6章】まとめ

【第1章】Webサイトの基礎と仕組みを理解する「入門編:HTML/CSS」

Web制作勉強の第一歩として、HTML/CSSがあります。すべてのWebサイトのベースとなる知識でこれを知っておかないとなにも始まりません。

正直、HTML/CSSの基本を学ぶことはとても簡単です。では、実際にどういった流れで勉強していくべきかを解説していきましょう。

その1-1:ドットインストールの入門編(HTML/CSS)

» HTML入門 (全24回) – プログラミングならドットインストール

» CSS入門 (全23回) – プログラミングならドットインストール

Web界隈ではかなり有名なドットインストールを使っておこないます。
ドットインストールとはプログラミングを動画でわかりやすく解説しているサイトです。ぼくも昔はかなりお世話になりました。

海外には動画でプログラミング勉強をするサイトがたくさん存在します、日本ではドットインストールか世界最大級のオンライン学習サイトUdemyくらいしかおもいあたりません。(その他サイトもありますが情報量が少ないです。)ちなみに、動画でプログラミング勉強ができるサイトは記事の5-4でまとめています。

その1-2:スラスラわかるHTML&CSSのきほん教科書

HTML/CSSの勉強においては、この1冊で十分です。これからHTMLとCSSを覚える人が“楽しみながら学ぶ”ための入門書としてはかなり活用できる勉強方法です。もっと早くこの本に出会っていれば覚えるスピードは違ってたのかもしれません。そのぐらいスラスラ分かってしまう教科書です。

本書を使うにあたっての注意点としては、途中で飽きます基本的にわかりやすく、説明も丁寧でいいです。しかし、あまりにもスラスラ読めてしまい理解する努力を怠ると、最後の方には何も残りません 笑。 困ったたびに見るようにすると良いです。入門書としては完璧ですが1週間ちょっとで1周は読めるので、覚えた気持ちになってしまうので気をつけましょう。

その1-3:ディベロッパーツール使い方

ドットインストールとスラスラわかるHTML&CSSのきほん教科書を読み終えた時点で、HTML/CSSはこんなもんかくらいは理解できている状態かと思います。このタイミングでディベロッパーツールの使い方を理解しておくことが重要です。ぼくが独学で勉強していたときは後になってディベロッパーツールを知ったので、そのため無駄な時間を使ってしまいました。アホなことをしたな…と今では後悔しています。具体的な使い方は以下の記事によくまとめております。
» Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 – Build Insider

1-4. フレームワークの使い方(Bootstrap)

これは人によってさまざまですが、基礎をマスターしたあとに、フレームワークを使うべきだと言います。しかし、ぼくの考えは少し違っていまして、初心者でもばりばりフレームワークを使うべきだと思っております。理由しましては、フレームワークは楽しいからです。

HTMLのフレームワークは数多くありますが、中でもBootstrapを利用することをオススメします。理由は単純で、1番広く使われているフレームワークだからです。ネットでググれば参考情報が数多くでてきます。

勉強方法は、何度もしつこいと言われそうですが、ドットインストールがオススメです。以下の動画を軽く見てしまいましょう。
» Bootstrap 3.0入門 【全18回】 – プログラミングならドットインストール

【第2章】Webサイトにアクセスを集める方法「入門編:SEO」

Webサイトをつくる目的は人それぞれですが、オンライン上に公開するからには、何より大切なのが多くの人に見てもらいたいと思うのは人間の心理かと思います。

そこで必要となってくるのがSEOという知識です。SEOとは「サーチエンジンオプチマイゼーション」のことであり、かんたんに言うと、あるキーワードで検索されたとき、上位表示を狙うために必要となる技術です。特に検索結果のトップ10に入ると、数多くのユーザーがサイトに訪れてきます。逆に上位トップ10に入らないとだれもユーザーは見てくれません。では、どういった方法でSEOを勉強していくべきかまとめていきましょう。

その2-1:これからはじめる SEO内部対策の教科書

SEO初心者に最適な本ですし、この一冊で十分です。早い人なら3時間で読み終えるかと思いますが、質の高い情報が凝縮されています。また、これからWebマーケティング会社に就職する人にも読んでおいて損はないかと思います。

その2-2:Web業界で有名メディア【バズ部の紹介】


» バズ部

SEOの基礎がだいぶん理解できた時点でオススメするのが「バズ部」です。Webマーケティング業界ではかなり有名なメディアでして、記事の質がかなり高いです。できれば全記事を読んでもらうのが一番いいのですが、今回はバズ部の中でもとくに必読記事を3つご紹介します。

» SEO内部対策で行うべき20の事
» SEO対策|検索上位を独占するために弊社が行っている36の手順
» ロングテールSEOで検索アクセスを倍増させるための基礎知識と具体策

その2-3:キーワードの検索ボリュームの大切さ

ここまでで、SEOとコピーライティングに関してある程度の知識がついたかなと思われます。では、次に学ぶべきことはなんでしょう。それは、検索ボリュームについてです。検索ボリュームとは、かんたんに説明しますと、あるキーワードがどのくらいの回数で検索されているかという意味です。

キーワードの検索ボリュームを測るためには、「キーワードプランナー」というツールを利用します。Googleが提供しているサービスで、キーワード別の検索ボリュームをかんたんに調べることができます。具体的なツールの使い方は以下の記事をご覧ください。
» 【徹底図解】キーワードプランナー使い倒し術

その2-4:コピーライティング【入門編】

SEOがわかっただけでWebサイトにある程度の訪問者(トラフィック)を生むことが出来ます。しかし、SEOの最適化だけをしていても、実際の記事の質が低かったら読者は失望するだけです。そこで必要となってくるのがライティング技術です。最近のIT業界ではかなり重宝されるスキルでして、すばらしい文章が書ければメディア運営しているIT企業からは引っ張りダコ間違いなしです。

文章力はどのように鍛えるか?それは、インプットとアウトプット量を増やすことです。そこで今回は、効率的にインプット量を増やすために必読な記事と書籍をご紹介します。
» コンテンツマーケティングの進め方|弊社が広告費ゼロで10倍の売上を達成した手法
» たった1記事で8万人に読まれる文章を書けるようになるライティング術

【第3章】Webサイトの制作【WordPress編】

ここまででWebサイト制作とSEOの基礎がわかりました。ここからは実践的なお話をしていこうと思います。

Web制作初心者に最初にオススメしたいのが「WordPress」です。WordPressはCMSというシステムで、簡単に解説すると、だれでも簡単にWebサイトがつくれるツールです。もっと詳しく知りたい人はググってみてください。

それでは、WordPressを使って実際にWebサイトをつくっていきましょう。具体的な勉強方法を書いていきます。

その3-1:ドットインストール「入門編:WordPress」

» プログラミングならドットインストール–WordPress入門 【全23回】

しつこいですが、やはり最初はドットインストールをオススメします。でも、すべてを見る必要はありません。とりあえずは#01〜#06までを見ておけば問題ないです。それ以上の部分は、現時点だとすこし難しいです。ドットインストールは1つの動画が3分前後なので、6つの動画は約20分で閲覧可能です。いますぐ勉強しましょう。

その3-2:ビジネスサイトを作って学ぶWordPressの教科書

WordPressの基本的な操作方法がわかった時点で欠かせないのが、WordPressの教科書になります。初心者の方でもWordPressの基礎から応用までが分かりやすく、丁寧に解説されており、本を読みつつ実際に手を動かしてみることで、WordPressの全体像がわかるようになります。WordPressはとてもかんたんなので、この1冊を仕上げれば、その他の本は必要ないかなと思います。あとはググれば十分です。

その3-3:個人でWordPress使ってブログを作成する

WordPressの教科書(3-2)を読むことで、WordPressの基礎知識は十分についたと思います。そこで、このタイミングで個人ブログをつくってみましょう。HTML/CSS/SEO/コピーライティング/WordPressの知識を実際に活用していくタイミングです。

最初は既存のテンプレートをWordPressにインストールすることをオススメします。ちなみに『WordPress 無料 テーマ まとめ』などでググると、かっこいいテンプレートがまとめられた記事が数多くヒットします。お気に入りのテンプレートでインプットしてきた知識をアウトプットしていきましょう。

自由度の高いテーマを使いたい場合は以下のテーマがオススメです。

1はHTMLフレームワークのBootstrapが組み込まれており、カスタマイズしやすいです。2は当ブログで使っているテーマですが、海外ではかなり有名なFoundationというフレームワークでつくられており、カスタマイズしやすいです。

その3-4:ブログに広告を掲載する

世間的にはあまり知られていないことですが、Webサイト運営やブログでは収益を生むことが出来ます。このブログにもいくつか広告が貼られていますが、以下の条件を満たすことで、収益が発生します。

1. 訪問者が広告をクリックする(1クリックで20〜40円程度)
2. 訪問者がクリックした広告のリンク先で商品を購入する(購入額の数%ぐらいです)

まずは基本として、上記2つを覚えておけば問題ないです。それらをサイト上に掲載するには、GoogleアドセンスAmazonアソシエイトA8.netを使います。


【第4章】Webサイトの動き【jQuery】

この段階までくると基本的なWebサイト制作はマスターしている状態になります。次に興味が湧いてくるのは、サイトをもっと見やすくしたい、サイトに動きをつけてみたいといった気持ちが湧いてこないでしょうか?

そこで必要となる知識がJavaScriptです。しかし、JavaScriptは難しいので、今回はjQueryを利用します。jQueryとはJavaScriptのフレームワークだと思ってもらえたら問題ないです。JavaScriptで実現することが難しいコードでも、jQueryを使うことでかんたんに実現することができます。では、実際にどういった方法で勉強していくか見ていきましょう。

その4-1:ドットインストール「入門編;jQuery」

»プログラミングならドットインストール – jQuery入門 【全20回】

定番のドットインストールです。全20回をしっかり閲覧してください。jQueryの全体像がつかめるようになります。

その4-2:jQuery標準デザイン講座

ドットインストールを終えた時点でオススメしたいのが、Web制作の現場で使う jQuery標準デザイン講座です。JavaScriptやjQueryには触れたことがない初心者を対象にした、Web制作向けのjQuery学習書です。全30LESSONを通して、jQueryの基礎知識と基本文法の学習から始めて、実際に動作サンプルを作りながら、jQueryのしくみと使い方を学んでいけます。

その4-3:jQuery【最高の教科書】

つぎにオススメしたいのが、jQuery最高の教科書です。Web制作の現場で使うjQueryデザイン入門とは異なり、サンプルコードがレベル別に紹介されており、解説もかなり詳しいです。とはいえ、本書の後半に進むに連れてコード自体は難しくなっていくため、すこし辛いかもしれません。この本を読む上で理解してほしいことは、サンプルコードを完全に理解する必要はないということです。現時点では「jQueryはこんなものかー」くらいの気持ちでOKかと思います。

【第5章】より自由近いWebサイトをつくる【PHP】

ここまでくると、Webサイト制作にある程度満足する人も多いかと思います。ですが、さらに勉強を進めることでより自由度の高いWebサイト/Webサービスをつくることができるようになります。当記事では、初心者にオススメなPHPをもとに勉強方法を解説していきたいとおもいます。

その5-1:PHPフレームワークLaravel入門第2版

PHPの入門書です。書かれている内容はかなり基礎で初心者の方にもわかりやすいです、本書を読むことで、PHPをどのように使うとどういったことが実現できるのかがイメージできるようになります。購入しなくても本屋での立ち読みでもOKかと思います。

5-2. ドットインストール(PHP入門基礎編)

»プログラミングならドットインストール – PHP入門 【全30回】

もうお馴染みのドットインストールを使います。ぶっちゃけPHPの基礎はつまらない、退屈ですが、ここを知っていないとなにも始まらないので、辛抱して見ましょう。応用編の方は見ておいたほうがいいですが、そこまで真剣に理解しなくても大丈夫です。というのも、最近では素晴らしいフレームワークが数多くあります

その5-3:気づけばプロ並みPHP 改訂版ーゼロから作れる人になる!

ここから一気に実践に近い本になります。本書の前半部分は基礎知識ですが、後半からは具体的なWebサービスの構築方法が書かれています。このあたりからPHP勉強が楽しくなります。ぼくはこの本の勉強でだいたい163ページあたりで既に相当のスキルが付いたと実感しました。

Tut+(海外のプログラミング勉強サイト)

» How-To Tutorials & Free Online Courses by Envato Tuts+

最後にご紹介するのがTut+(海外のプログラミング勉強サイト)です。残念ながら日本語には対応していませんが、PHPやその他フレームワークの素晴らしい動画教材が揃っています。気になる料金としては、有料となっています。すこし残念ですがお金を払う価値はあります。

ですが、どうしても日本語と料金を安くで学びたいというそんな方は「Udemy」がオススメです。
無料でも学べるのもあるのですが、月に数回、有料でも最大割引93%OFFとお得なクーポンキャンペーンがあります。

【第6章】まとめ

最後までご覧いただきありがとうございます。この記事はぼく自身がWeb制作を独学で学ぶ際に使った方法です。この方法が必ず正解とは限りませんが、多少なりとも参考になれば幸いです。

また、プログラミング勉強に行き詰まっている人などは、ブログのお問い合わせフォームからご連絡いただけましたら、可能な限り回答します。さっく今日からプログラミング勉強がんばりましょう( ^∀^)