Web制作完全ロードマップ【初心者】
Webを制作するには、HTML, CSS, JavaScript, PHPなどなど、馴染みのない言語がずらーと並びます。
この時点で、初心者はヘトヘト…
このサイトを2，3回読んで、順番通りに勉強してもらえれば、やがて、ランサーズなどで、月に1~3万稼げるようになります。
少し長いですが、見ていきましょう！
もくじ
Webサイト作成の基礎【HTML／CSS】
いきなりですが、Web制作の勉強は、HTML（エイチ・ティー・エム・エル）とCSS（シー・エス・エス）の学習から始まります。
この2つの言語が使われていないサイトはありません。
まずは、この2つを勉強しましょう。
HTMLとCSSを学ぶ【ドットインストール】
プログラミングの勉強する時、低価格で一番に良いのは、ドットインストールです。
ここしかありません。
さっさとプレミアム会員になった方がいいです。
月1,080円ですべてのコンテンツが見れますから。
これでも年間約12,000円、普通のプログラミングスクールなら、年間約40万というところでしょう。
ちなみに、どのスクールに入っても、結局やるのは「自分」ですから。
ちなみに、初めの1ヶ月は無料です。
まずは、HTMLとCSSの基礎を学びましょう。
» 詳解HTML 基礎文法編（全22回）
» 詳解CSS 基礎文法編（全33回）
ドットインストールでは、1レッスン3分以内の動画で解説してくれます。
私も、ほぼ毎日これで勉強しています。
海外には動画でプログラミング勉強をするサイトがたくさんありますが、日本ではドットインストールくらいしかありません。
間違いないです。
『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』【本から学ぶ】
HTML/CSSの教科書は、これで間違いないです。
私は、この教科書を読みながら、ドットインストールで学習しました。
ぜひ、オススメです。
ディベロッパーツールの使い方
『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』と、ドットインストールの基礎文法編を終えた人は、かなりHTML / CSSへの拒絶反応がなくなってきています。
このタイミングでディベロッパーツールの使い方を学びましょう！
『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』の著者Manaさんのサイトが分かりやすいです。
次は、英語のサイトです。
クオリティーめちゃ高いです。英語が苦手な人はちょとっとキツいかも。
» Google Chrome Developer Tools Crash Course（動画）
この動画は分かりやすいです（オススメ）。
» 今更聞けない！ ブラウザデベロッパーツールの使い方（動画）
フレームワーク（Bootstrap）の使い方【ドットインストール】
基礎学習が終われば、フレームワークを学びましょう。
HTMLのフレームワークは数多くありますが、中でもBootstrapを利用することをオススメします。
理由は単純で、1番広く使われているフレームワークだからです。ネットでググれば参考情報が数多くでてきます。
これを学ぶのも、ドットインストールがオススメです。
つまり、ドットインストールは、かなり便利です。
Webサイトの集客【SEO対策】
Webサイトを作ったところで、多くの人に見てもらわないと意味がありません。
そこで必要となってくるのがSEOの知識です。
SEOとは、サーチ・エンジン・オプチマイゼーション（Search Engine Optimization）のことであり、簡単に言うと、あるキーワードで検索されたとき、上位表示を狙うために必要となる技術です。
特に検索結果のトップ10に入ると、訪問者の数は桁違いです。
それを狙うための技術ですね。
では、どういった流れでSEOを勉強していくべきか見ていきましょう。
『これからはじめる SEO内部対策の教科書』【これ1冊で十分】
SEOの基礎勉強は、この1冊で十分です。
早い人なら2~3時間で読み終えれます。
また、質の高い情報が凝縮されています。
バズ部【必見サイト】
SEOの基礎が分かった時点でオススメするのが、バズ部です。
Webマーケティング業界ではかなり有名なメディアで、記事の質がかなり高いです。
できれば全記事を読んでもらいたいですが、バズ部の中でも、SEOに関する必読記事を3つご紹介します。
» SEO内部対策で行うべき２０の事
» SEO対策とは｜検索上位を独占する36の対策手順
» ロングテールSEOで検索アクセスを倍増させるための基礎知識と具体策
Webライティングスキルを身につける
SEOがわかってくると、Webサイトにある程度の訪問者を生み出せるようになります。
しかし、訪問者が多く訪れるようになっても、実際の記事の質が低かったら、それが購買に繋がりません。
そこで必要となってくるのがライティングスキルです。
Webライティングスキルといわれるものです。
このスキルがあれば、IT企業から多くのオファーが来るでしょう。
文章力は、「書くこと」（アウトプット）でしか鍛えられません。
そのためには、インプットの量を増やすことも重要です。
効率的にインプット量を増やすために必読な記事と書籍をご紹介します。
» たった1記事で8万人に読まれる文章を書けるようになるライティング術
» コンテンツマーケティングとは？｜広告費ゼロで10倍の売上を達成した手法
キーワードの検索ボリュームの重要性
ここまでで、SEOとコピーライティングに関してある程度の知識がついたと思います。
では、次に学ぶべきことはなんでしょう。
それは、検索ボリュームについてです。
検索ボリュームとは、あるキーワードがどのくらいの回数で検索されているかという意味です。
キーワードの検索ボリュームを測るためには、キーワードプランナーというツールを利用します。
Googleが提供しているサービスで、キーワード別の検索ボリュームを簡単に調べることができます。
具体的なツールの使い方は以下の記事をご覧ください。
【徹底図解】お宝ワードが見つかる！キーワードプランナー使い倒し術
Webサイトの作成【WordPress】
ここまでで、Webサイト制作とSEOの基礎がわかりました。
ここからは、実際サイトを作って運営していく方法です。
Web制作では、WordPressを使うのが一番です。
これ以外のものは無いと思って下さい。
では、WordPressを使って実際にWebサイトをつくっていきましょう。
WordPress入門【ドットインストール】
またもや、ドットインストールです。
ドットインストールは、便利ですね。
『本格ビジネスサイトを作りながら学ぶ WordPressの教科書』
WordPressの基礎から応用までが解説されており、本を読みつつ実際に手を動かすと、WordPressの全体像がわかるようになります。
WordPressはとても簡単なので、この1冊を仕上げれば他の本は必要ないです。
WordPressで、ブログを作成する
いよいよ、ブログの作成です。
今まで学んだHTML／CSS／SEO／コピーライティング／WordPressの知識を実際に活用しましょう！
最初は既存のテンプレートをWordPressにインストールすることをオススメします。
WordPressには、いろいろなテーマ（雛形）が用意されています。
当然ですが、有料のものは、それだけクオリティーが高いです。
私がオススメするのは、断然、有名ブロガーマナブさんが作成したものです。
通常テーマは、1万~2万しますが、マナブさんのテーマは、6,980円です。
見やすさや、SEO対策が完璧に分析されています。
私のこのブログもマナブさんのテーマを使っています。
» 【発表】WordPressテーマの「Manablog Copy」を販売します
ブログに広告を掲載してみる【アドセンス・アフィリエイト】
ブログが育ってくると、ブログに広告を貼り、収益化を目指しましょう。
方法は、2つです。
- Googleアドセンス：訪問者が広告をクリックする（1クリックで20〜40円程度）
- アフィリエイト広告：訪問者がクリックした広告のリンク先で商品を購入する（購入額の数%）
これについては、別の機会に紹介します。
Webサイトに動きをつける【jQuery】
ここまで来れば、基本的なWebサイト制作はマスターしている状態です。
次に興味が湧いてくるのは、サイトをもっと見やすくしたい、サイトに動きをつけてみたいといったことではないでしょうか？
そこで必要となる知識がJavaScriptです。
しかし、JavaScriptは難しいので、今回はjQueryを利用します。
jQueryとは、JavaScriptのフレームワークだと思って下さい。
JavaScriptでは、実現することが難しいコードでも、jQueryを使うことで簡単に実現することができます。
jQuery入門【ドットインストール】
まずは定番のドットインストールで学びましょう。
『Web制作の現場で使うjQueryデザイン入門』【本で学ぶ】
ドットインストールを終えた時点でオススメしたいのが、Web制作の現場で使うjQueryデザイン入門です。
実務で使われるサンプルが数多く紹介されており、jQueryの便利さが実感でます。
『jQuery最高の教科書』
サンプルコードが、レベル別に紹介されており、解説もかなり詳しいです。
とはいえ、本書の後半に進むに連れてコード自体は難しくなっています。
しかし、サンプルコードを完全に理解する必要はありません。
現時点では「jQueryはこんなものかー」くらいの気持ちで読んでください。
Webサイトの幅を広げる【PHP】
ここまでくると、Webサイト制作にある程度満足する人も多いかと思います。
しかし、さらに勉強を進めることでより自由度の高いWebサイト／Webサービスをつくることができるようになります。
『よくわかるPHPの教科書』
PHPの入門書です。
購入しなくても本屋での立ち読みでもOKです。
PHP基礎文法編【ドットインストール】
ここまで来たら、もうドットインストールの会員登録した人もいるでしょう（笑）
ぶっちゃけPHPの基礎はつまらないです。
まあ、どれも基礎はつまらないものです。
グッとこらえてください。
必ず楽しくなってきますから。
『Webサイト制作者のための PHP入門講座』【現在古本のみ】
ここから一気に実践に近い本になります。
本書の前半部分は基礎知識ですが、後半からは具体的なWebサービスの構築方法が書かれています。このあたりからPHP勉強が楽しくなります。
Tuts+（海外のプログラミング勉強サイト）
最後にご紹介するのがTut+（海外のプログラミング勉強サイト）です。
残念ながら日本語には対応していませんが、PHPやその他フレームワークの素晴らしい動画教材が揃っています。
有料ですが、お金を払う価値はあります。
» Tuts+
また、Envato Elements（エンバトエレメンツ）に入れば、Twenty20（写真素材サイト）とTuts+（オンライン学習サイト）が追加料金なしで使い放題です。
下のサイトが詳しいので、参考にして下さい、
» Envato Elementsとは？現役ユーザーが料金・ライセンス・著作権などを徹底解説！
まとめ
おつかれさまでした。
多くのことを書きましたが、これらを1年ほどでじっくりやって下さい。
1年ではなく3年かけてもいいです。
大事なのは継続です。
では、楽しいプログラミングLIFEを！