WordPressWeb制作の勉強をはじめてから3年くらい経過しました。ノウハウがたまってきたので、Web制作の勉強方法をまとめようと思います。Web制作勉強のロードマップぼくはWeb制作をすべて独学で勉強してきました。いま思えば、だれかに相談していればもっと効率良く勉強できたな...と思っています。『相談するのが申し訳ない...』と感じてしまうぼくの性格上、独学が自分に合っていると思っています。世の中にはぼくと似た性格の方がいると思うので、そういった方向けに記事を書きます。この記事がWeb制作勉強のロードマップとなれば幸いです。当記事のとおりに勉強することで、ランサーズ内で1~5万円程度の案件がこなせるようになります。̅)それでは、さっそくまとめていきます。最近はプログラミングスクールも増えており、最初の基礎ベースを身につけるならTechAcademyの方が早いかもです。TechAcademyは1週間の無料体験があるので、これを使ってWebアプリケーションの基礎を学ぶのもありですね。Tut+(海外のプログラミング学習サイト)【6】まとめ【1】Webサイトの仕組みと基礎を理解する【HTML/CSSの入門編】Web制作勉強の第一歩として、HTML/CSSがあります。すべてのWebサイトのベースとなる知識でこれを知っていないとなにも始まりません。いえ、HTML/CSSの基本を学ぶことはとても簡単です。実際にどういった流れで勉強していくべきかを見ていきましょう。プログラミングならドットインストールWeb界隈ではとても有名なドットインストールを使います。ドットインストールとはプログラミングを動画でわかりやすく解説しているサイトでして、ぼくもかなりお世話になっています。海外には動画でプログラミング勉強をするサイトがたくさんありますが、日本ではドットインストールくらいしかありません。(その他サイトもありますが情報量が少ないです。)ちなみに、動画でプログラミング勉強ができるサイトは記事の5-4でまとめています。楽天ブックスAmazonKindleHTML/CSSの勉強においては、この1冊で十分です。HTMLとCSSのうしろに数字(5と3)がついていますが、これはバージョンを表しているだけで、これから勉強を始める方はとくに気にしなくて大丈夫です。本書を使うにあたっての注意点としては、多分途中で飽きるということです。これは人にもよりますが、ぼくの場合は途中で飽きました。飽きないようにするコツとしては、ゆるく読むことが大切です笑。HTML/CSSは基礎だけど幅が広いです。1度で理解しようとすると時間がかかりすぎて飽きる原因になります。ディベロッパーツールの使い方ドットインストールとよくわかるHTML5+CSS3の教科書を読み終えた時点で、HTML/CSSはこんなもんか、くらいは理解できている状態かと思います。このタイミングでディベロッパーツールの使い方を理解しておくことが大切です。ぼくが独学で勉強していたときは結構後の段階でディベロッパーツールを知ったので、残念なことをしたな...と後悔しています。具体的な使い方は以下の記事によくまとまっています。人によっては、基礎をマスターしたあとに、フレームワークを使うべきだと言います。ぼくの考えは違っていまして、初心者でもばりばりフレームワークを使うべきだと思います。理由としては、フレームワークは楽しいからです。いうのも、基礎学習の本では10行以上で書かれていたコードが、フレームワークを使うことで、たった1行で実現できたりするからです。HTMLのフレームワークは数多くありますが、中でもBootstrapを利用することをオススメします。理由は単純で、1番広く使われているフレームワークだからです。ネットでググれば参考情報が数多くでてきます。勉強方法は、またかよ、と言われそうですが、ドットインストールがオススメです。以下の動画をサクっと見てしまいましょう。プログラミングならドットインストール【2】Webサイトにアクセスを集める【SEOの入門編】Webサイトをつくる目的は人それぞれですが、オンライン上に公開するからには、多くの人に見てもらいたいと思うのは人間の心理かと思います。そこで必要となってくるのがSEOの知識です。SEOとはサーチエンジンオプチマイゼーションのことであり、かんたんに言うと、あるキーワードで検索されたとき、上位表示を狙うために必要となる技術です。検索結果のトップ10に入ると、数多くのユーザーがサイトに訪れてきます。いった流れでSEOを勉強していくべきか見ていきましょう。2012-10-11AmazonKindle楽天ブックスSEOの基礎勉強にはこの1冊で十分です。早い人なら2~3時間で読み終えるかと思いますが、質の高い情報が凝縮されています。これからWebマーケティング会社に就職するって人も読んでおいて損はないかと思います。バズ部SEOの基礎が分かった時点でオススメするのがバズ部です。Webマーケティング業界ではかなり有名なメディアでして、記事の質がかなり高いです。できれば全記事を読んでもらいたいですが、今回はバズ部の中でもとくに必読記事を3つご紹介します。コピーライティング入門SEOがわかっただけでWebサイトにある程度の訪問者(トラフィック)を生むことが出来ます。SEOの最適化だけをしていても、実際の記事の質が低かったら読者は失望するだけです。そこで必要となってくるのがライティング技術です。最近のIT業界ではかなり重宝されるスキルでして、すばらしい文章が書ければメディア運営しているIT企業からは引っ張りダコです。文章力はどのように鍛えるか?それは、インプットとアウトプット量を増やすことです。そこで今回は、効率的にインプット量を増やすために必読な記事と書籍をご紹介します。キーワードの検索ボリュームの重要性ここまでで、SEOとコピーライティングに関してある程度の知識がついたと思います。次に学ぶべきことはなんでしょう。それは、検索ボリュームについてです。検索ボリュームとは、あるキーワードがどのくらいの回数で検索されているかという意味です。キーワードの検索ボリュームを測るためには、キーワードプランナーというツールを利用します。Googleが提供しているサービスで、キーワード別の検索ボリュームをかんたんに調べることができます。具体的なツールの使い方は以下の記事をご覧ください。【徹底図解】キーワードプランナー使い倒し術Web集客についてもっと深く知りたい方は下記をどうぞ。【超初心者向け】Web集客の基礎から応用までガッツリまとめました。【3】実用的なWebサイトを制作する【WordPressを使う】ここまででWebサイト制作とSEOの基礎がわかりました。ここからは実践的な話となります。Web制作初心者に最初にオススメしたいのがWordPressです。WordPressはCMSというシステムで、ざっくり説明すると、だれでも簡単にWebサイトがつくれるツールです。詳しく知りたい人は適意ググってみてください。WordPressを使って実際にWebサイトをつくっていきましょう。具体的な勉強方法を書いていきます。プログラミングならドットインストールやはり最初はドットインストールをオススメします。すべてを見る必要はありません。#01〜#06までを見ておけば問題ないです。それ以上の部分は、現時点だとすこし難しいです。ドットインストールは1つの動画が3分なので、6つの動画は約20分で閲覧可能です。いますぐ勉強しちゃいましょう。2015-02-21Amazonで探すKindleで探す楽天ブックスで探すWordPressの基本的な操作方法がわかった時点でオススメしたいのが、WordPressの教科書です。WordPressの基礎から応用までが解説されており、本を読みつつ実際に手を動かしてみることで、WordPressの全体像がわかるようになります。WordPressはとてもかんたんなので、この1冊を仕上げれば、その他の本は必要ないです。ググるだけで十分です。WordPressで個人ブログを作成するWordPressの教科書2を読むことで、WordPressの基礎知識は十分についたと思います。このタイミングで個人ブログをつくってみましょう。HTML/CSS/SEO/コピーライティング/WordPressの知識を実際に活用していくタイミングです。最初は既存のテンプレートをWordPressにインストールすることをオススメします。まとめ』などでググると、かっこいいテンプレートがまとめられた記事が数多くヒットします。お気に入りのテンプレートでインプットしてきた知識をアウトプットしていきましょう。自由度の高いテーマを使いたい場合は以下のテーマがオススメです。bootstrapfoundation1はHTMLフレームワークのBootstrapが組み込まれており、カスタマイズしやすいです。2は当ブログで使っているテーマですが、海外ではかなり有名なFoundationというフレームワークでつくられており、カスタマイズしやすいです。ブログに広告を掲載してみる世間的にはあまり知られていないことですが、Webサイト運営やブログでは収益を生むことが出来ます。このブログにもいくつか広告が貼られていますが、以下の条件を満たすことで、収益が発生します。訪問者がクリックした広告のリンク先で商品を購入する(購入額の数%)まずは基本として、上記2つを覚えておけば問題ないです。それらをサイト上に掲載するには、Googleアドセンス、Amazonアソシエイト、A8.netを使います。具体的な使い方は以下の記事を参考にしてください。ブログで稼ぐことは可能だと断言します。補足:このあたりで挫折しそうなら、プログラミングスクールもありできれば完全独学のほうが安上がりですが、挫折してしまう人はプログラミングスクールもありです。このあたりまで独学で学んだ人なら、TechAcademyのWordPressコースあたりがマッチしていると思います。20万円くらいかかるようですが、企業から制作依頼GETすれば20万円とか余裕で回収できます。【4】Webサイトに動きをつける【jQuery】ここまでくると基本的なWebサイト制作はマスターしている状態になります。次に興味が湧いてくるのは、サイトをもっと見やすくしたい、サイトに動きをつけてみたいといったことではないでしょうか?そこで必要となる知識がJavaScriptです。JavaScriptは難しいので、今回はjQueryを利用します。jQueryとはJavaScriptのフレームワークだと思ってもらえたら問題ないです。JavaScriptで実現することが難しいコードでも、jQueryを使うことでかんたんに実現することができます。実際にどういった流れで勉強していくべきかを見ていきましょう。プログラミングならドットインストールまずは定番のドットインストールです。全20回をしっかり閲覧してください。jQueryの全体像がつかめるようになります。2013-03-07AmazonKindle楽天ブックスドットインストールを終えた時点でオススメしたいのが、Web制作の現場で使うjQueryデザイン入門です。実務で使われるサンプルが数多く紹介されており、jQueryの便利さが実感できるかと思います。同時に、jQuery勉強におけるモチベーションアップにも繋がります。2013-11-27AmazonKindle楽天ブックスつぎにオススメしたいのが、jQuery最高の教科書です。Web制作の現場で使うjQueryデザイン入門とは異なり、サンプルコードがレベル別に紹介されており、解説もかなり詳しいです。いえ、本書の後半に進むに連れてコード自体は難しくなっていくため、すこし辛いかもしれません。この本を読む上で理解してほしいことは、サンプルコードを完全に理解する必要はないということです。現時点では「jQueryはこんなものかー」くらいの気持ちでOKかと思います。【5】もっと自由にWebサイトをつくる【PHP】ここまでくると、Webサイト制作にある程度満足する人も多いかと思います。勉強を進めることでより自由度の高いWebサイト/Webサービスをつくることができるようになります。当記事では、初心者にオススメなPHPをもとに勉強方法を解説していきます。2014-03-08KindleAmazon[書籍版]PHPの入門書です。書かれている内容はかなり基礎ですが、本書を読むことで、PHPを使うとどういったことが実現できるのかがイメージできるようになります。購入しなくても本屋での立ち読みでもOKかと思います。プログラミングならドットインストールお決まりのドットインストールを使います。ぶっちゃけPHPの基礎はつまらないですが、ここを知っていないとなにも始まらないので、我慢して見ましょう。応用編の方は見ておいたほうがいいですが、そこまで真剣に理解しなくても困らないです。いうのも、最近では素晴らしいフレームワークが数多くありますので、従来の長ったらしいコードを書く必要性がかなり低下しているためです。2011-01-07AmazonKindle楽天ブックスここから一気に実践に近い本になります。本書の前半部分は基礎知識ですが、後半からは具体的なWebサービスの構築方法が書かれています。このあたりからPHP勉強が楽しくなります。Tuts+最後にご紹介するのがTut+(海外のプログラミング勉強サイト)です。残念ながら日本語には対応していませんが、PHPやその他フレームワークの素晴らしい動画教材が揃っています。気になる料金としては、有料となっています。残念ですがお金を払う価値はあります。「どうしても無料で見たい!」って人はYoutubeでググってみてください笑。該当動画が無料で公開されています。【6】まとめ最後までご覧いただきありがとうございます。この記事はぼく自身がWeb制作を独学で学ぶ際に使った方法です。この方法が必ず正しいとは限りませんが、多少なりとも参考になれば幸いです。プログラミング勉強に行き詰まっている人などは、ブログのお問い合わせフォームからご連絡いただけたら、可能な限り回答します。効率的にプログラミング学習したいなら、TechAcademyはいかがでしょうか?※この項はTechAcademyさまからご連絡をいただき情報掲載をしております。記事冒頭にも書きましたが、僕がWeb制作を独学した理由は『誰かに相談するのが申し訳ない...』と感じてしまうためです。申し訳ないかというと、『時間はお金であり、スキルの高い人の時間単価は高い』と思っているからです。効率的にプログラミングを学ぶなら、分からないときは誰かに聞くべきしかし、ググっても分からないときは誰かに相談するのが早いです。いった問題解決をするサービスがTechAcademyだと思います。プログラミング学習を学びつつ、現役プロがメンタリングしてくれるとのこと。個人的にはWordPressコースをオススメします。僕がWeb業界にいて思いますが、WordPress需要は高い。それもそのはず、全世界のサイトの4分の1はWordPressで作られているからです。サイトを見ると受講生の声も多いので信頼できるかと思います。気になった方は下記より公式サイトをご覧ください。※動画を見るとサービスコンセプトが良くわかります。「基礎ができたら次はどうしたらいいですか?」って質問が多いので、回答を下記にまとめました。プログラミングで実践スキルを伸ばしたいなら、プログラミング学習を辞めるべき※関連記事の情報:2016年11月14日この記事をコンプリートしたら、ぜひ中級レベル向けの学習を始めてください。下記のその方法を書きました。:16記事で解説】SEOプログラミング・ブログの学習の有料ロードマップ【公開】プログラミング独立の完全ロードマップ【月20万を稼ぐ道】PROGRAMMINGブログ型アフィリエイトの完全講義【ブログ歴6年の僕の集大成です】BLOGお仕事の依頼はこちらからどうぞWebマーケティングコンサルティングの依頼ページSEO25万円:ビジネススタートにおけるWeb制作・運用設計をサポートしますPROGRAMMINGマナブブログ・アフィリエイト・プログラミングを愛しています。ブログを書きまくる→ブログ収益7桁達成。普段はバンコクを中心に南国にひきこもりつつ、生活費は5万円くらいで生きています。me!ブログ・アフィリエイト・プログラミングを愛しています。ブログを書きまくる→ブログ収益7桁達成。普段はバンコクを中心に南国にひきこもりつつ、生活費は5万円くらいで生きています。