【独学でWeb制作マスター】勉強方法まとめ【初心者向け】

Programming

Web制作勉強のロードマップ

 

Web制作をすべて独学で勉強したい方向けです。

たぶん、だれかに相談しながらのほうが効率良く勉強できできるはずです、、、が、『相談する相手がいない』または『相談するのが申し訳ない…』と考えてしまう方は、独学が合っていると思います。

そういった気を使ってしまう性格の方はたくさんいると思うので、そういった方向けに記事を書きます。

この記事がWeb制作勉強のロードマップとなれば幸いです。

 

 

読んでほしい方

 

Web制作を勉強している/これから勉強しようと思う方

 

当記事のとおりに勉強することで、ランサーズ内で1~5万円程度の案件がこなせるようになります。独学はたまにつらいけど、がんばりましょう( ◜◡‾)

それでは、さっそくまとめていきます。

 

※0円のプログラミングスクールという近道
最近はプログラミングスクールも増えており、最初の基礎ベースを身につけるならTechAcademyの方が早いかもです。TechAcademyは1週間の無料体験があるので、これを使ってWebアプリケーションの基礎を学ぶのもありですね。

» TechAcademyの無料体験はこちら

 

 

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

 

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

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

 

ドットインストール(HTML入門/CSS入門)

 

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

 

Web界隈ではとても有名なドットインストールを使います。

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

海外には動画でプログラミング勉強をするサイトがたくさんありますが、日本ではドットインストールくらいしかありません。(その他サイトもありますが情報量が少ないです。)

 

よくわかるHTML5+CSS3の教科書

 

 

HTML/CSSの勉強においては、この1冊で十分です。HTMLとCSSのうしろに数字(5と3)がついていますが、これはバージョンを表しているだけで、これから勉強を始める方はとくに気にしなくて大丈夫です。

 

本書を使うにあたっての注意点としては、多分途中で飽きるということです。これは人にもよりますが、ぼくの場合は途中で飽きました。飽きないようにするコツとしては、ゆるく読むことが大切です笑。HTML/CSSは基礎だけど幅が広いです。なので、1度で理解しようとすると時間がかかりすぎて飽きる原因になります。

 

ディベロッパーツールの使い方

 

ドットインストールとよくわかるHTML5+CSS3の教科書を読み終えた時点で、HTML/CSSはこんなもんか、くらいは理解できている状態かと思います。このタイミングでディベロッパーツールの使い方を理解しておくことが大切です。ぼくが独学で勉強していたときは結構後の段階でディベロッパーツールを知ったので、残念なことをしたな…と後悔しています。具体的な使い方は以下の記事によくまとまっています。

 
» Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 – Build Insider

 

フレームワーク(Bootstrap)の使い方

 

人によっては、基礎をマスターしたあとに、フレームワークを使うべきだと言います。

しかし、ぼくの考えは違っていまして、初心者でもばりばりフレームワークを使うべきだと思います。理由としては、フレームワークは楽しいからです。

というのも、基礎学習の本では10行以上で書かれていたコードが、フレームワークを使うことで、たった1行で実現できたりするからです。

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

勉強方法は、またかよ、と言われそうですが、ドットインストールがオススメです。以下の動画をサクっと見てしまいましょう。

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

 

 

Webサイトにアクセスを集める【SEOの入門編】

 

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

そこで必要となってくるのがSEOの知識です。

SEOとはサーチエンジンオプチマイゼーションのことであり、かんたんに言うと、あるキーワードで検索されたとき、上位表示を狙うために必要となる技術です。特に検索結果のトップ10に入ると、数多くのユーザーがサイトに訪れてきます。

では、どういった流れでSEOを勉強していくべきか見ていきましょう。

 

これからはじめる SEO内部対策の教科書

 

 SEOの基礎勉強にはこの1冊で十分です。早い人なら2~3時間で読み終えるかと思いますが、質の高い情報が凝縮されています。また、これからWebマーケティング会社に就職するって人も読んでおいて損はないかと思います。

 

コピーライティング入門

 

SEOがわかっただけでWebサイトにある程度の訪問者(トラフィック)を生むことが出来ます。

しかし、SEOの最適化だけをしていても、実際の記事の質が低かったら読者は失望するだけです。

そこで必要となってくるのがライティング技術です。最近のIT業界ではかなり重宝されるスキルでして、すばらしい文章が書ければメディア運営しているIT企業からは引っ張りダコです。

文章力はどのように鍛えるか?それは、インプットとアウトプット量を増やすことです。そこで今回は、効率的にインプット量を増やすために必読な記事と書籍をご紹介します。

» たった1記事で8万人に読まれる文章を書けるようになるライティング術
» コンテンツマーケティングの進め方|弊社が広告費ゼロで10倍の売上を達成した手法

 

 

キーワードの検索ボリュームの重要性

 

ここまでで、SEOとコピーライティングに関してある程度の知識がついたと思います。では、次に学ぶべきことはなんでしょう。

それは、検索ボリュームについてです。検索ボリュームとは、あるキーワードがどのくらいの回数で検索されているかという意味です。

 

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

 

 ✅ Web集客についてもっと深く知りたい方は下記をどうぞ

 

» 【超初心者向け】Web集客の基礎から応用までガッツリまとめました。

 

実用的なWebサイトを制作する【WordPressを使う】

 

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

 

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

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

 

ドットインストール(WordPress入門)

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

やはり最初はドットインストールをオススメします。

でも、すべてを見る必要はありません。

とりあえずは#01〜#06までを見ておけば問題ないです。

それ以上の部分は、現時点だとすこし難しいです。ドットインストールは1つの動画が3分なので、6つの動画は約20分で閲覧可能です。いますぐ勉強しちゃいましょう。

 

本格ビジネスサイトを作りながら学ぶ WordPressの教科書

 

WordPressの基本的な操作方法がわかった時点でオススメしたいのが、WordPressの教科書です。

WordPressの基礎から応用までが解説されており、本を読みつつ実際に手を動かしてみることで、WordPressの全体像がわかるようになります。

WordPressはとてもかんたんなので、この1冊を仕上げれば、その他の本は必要ないです。ググるだけで十分です。

 

WordPressで個人ブログを作成する

 

WordPressの教科書2を読むことで、WordPressの基礎知識は十分についたと思います。

では、このタイミングで個人ブログをつくってみましょう。HTML/CSS/SEO/コピーライティング/WordPressの知識を実際に活用していくタイミングです。

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

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

 

 

1はHTMLフレームワークのBootstrapが組み込まれており、カスタマイズしやすいです。

海外ではかなり有名なFoundationというフレームワークでつくられており、カスタマイズしやすいです。

 

ブログに広告を掲載してみる

 

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

 

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

 

まずは基本として、上記2つを覚えておけば問題ないです。それらをサイト上に掲載するには、GoogleアドセンスAmazonアソシエイトA8.netを使います。具体的な使い方は以下の記事を参考にしてください。


» ブログで稼ぐことは可能だと断言します。理由+方法をセットで解説

 

 

Webサイトに動きをつける【jQuery】

 

ここまでくると基本的なWebサイト制作はマスターしている状態になります。

次に興味が湧いてくるのは、サイトをもっと見やすくしたい、サイトに動きをつけてみたいといったことではないでしょうか?

そこで必要となる知識がJavaScriptです。

しかし、JavaScriptは難しいので、今回はjQueryを利用します。jQueryとはJavaScriptのフレームワークだと思ってもらえたら問題ないです。

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を使うとどういったことが実現できるのかがイメージできるようになります。

購入しなくても本屋での立ち読みでもOKかと思います。

 

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

 

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

 

お決まりのドットインストールを使います。ぶっちゃけPHPの基礎はつまらないですが、ここを知っていないとなにも始まらないので、我慢して見ましょう。応用編の方は見ておいたほうがいいですが、そこまで真剣に理解しなくても困らないです。というのも、最近では素晴らしいフレームワークが数多くありますので、従来の長ったらしいコードを書く必要性がかなり低下しているためです。

 

Webサイト制作者のための PHP入門講座

 

 

ここから一気に実践に近い本になります。

本書の前半部分は基礎知識ですが、後半からは具体的なWebサービスの構築方法が書かれています。このあたりからPHP勉強が楽しくなります。

 

» 関連:PHP初級者から中級者になる必殺技は、Youtubeにあり【便利で泣ける】

 

まとめ

 

最後までご覧いただきありがとうございます。

独学は孤独との闘いですが、独学でムリだと思ったら基礎だけ無料プログラミングスクールで学習したりなど、あきらめずに頑張りましょう!

また、独学で学習した方のほうがスキルレベルが高い傾向にもあります。

 

独学を乗り換えた際には、あなたの世界が全く別物になるなずです。 

この方法が必ず正しいとは限りませんが、多少なりとも参考になれば幸いです。

 

コメント

タイトルとURLをコピーしました