WEB制作

独学でWeb制作マスター「初心者向け」



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

この記事はWeb制作を独学でどう勉強していくかを解説いたします

 こんな人に読んでほしいです

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

この記事のとおりに勉強することで、ランサーズ内で1~5万円程度の案件がこなせるようになります

独学はつらいけど、何かをできるようになるとテンション上がるので頑張っていきましょう

それでは、さっそく行きましょう

  👇 👇 👇

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

   

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

とはいえ、HTML/CSSの基本を学ぶことはとても簡単です。

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

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

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

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

ちなみに、動画でプログラミング勉強ができるサイトは記事の下の記事でまとめています

1-2. よくわかるHTML5+CSS3の教科書

よくわかるHTML5+CSS3の教科書【第3版】

大藤幹 マイナビ出版 2018年12月03日

HTML/CSSの勉強においては、この1冊でOKです。

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

本書を使うにあたっての注意点としては、多分途中で飽きるということです。

これは人にもよりますが、ぼくの場合は途中で飽きました。飽きないようにするコツとしては、ゆるく読むことが大切です

HTML/CSSは基礎だけど幅が広いです。なので、1度で理解しようとすると時間がかかりすぎて飽きる原因になります

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

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

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

基礎を覚えてからフレームワークを使うべきという考え方があるのですが!!!

初心者の方はフレームワークを使うべきだと思います

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

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

勉強方法は、またかよ、と言われそうですが、ドットインストールがオススメです。以下の動画をサクっと見てしまいましょう。
» Bootstrap 3.0入門 (全18回) – プログラミングならドットインストール

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

Webサイトをつくる目的は人それぞれですが、オンライン上に公開するからには、多くの人に見てもらいたいですよね

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

2-1.これから始めるSEO内部対策の教科書

これからはじめるSEO 顧客思考の教科書 ~ユーザー重視のWebサイトを5つの視点で実現する

瀧内賢 技術評論社 2015年07月

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

2-2.バズ部のご紹介

バズ部

» バズ部

SEOの基礎が分かった時点でオススメするのがバズ部です。

Webマーケティング業界ではかなり有名なメディアで、記事の質がかなり高いです。できれば全記事を読んでもらいたいですが、今回はバズ部の中でもとくに必読記事を3つご紹介します。

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

2-3.コピーライティング入門

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

ですが、SEOの最適化だけをしていても、実際の記事の質が低かったら読者は失望するだけです。そこで必要となってくるのがライティング技術です。最近のIT業界ではかなり重宝されるスキルでして、すばらしい文章が書ければメディア運営しているIT企業からは引っ張りダコです。

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

      👇  👇  👇

文章は型が9割

高橋フミアキ 高橋書店 2013年10月

2-4. キーワードの検索ボリュームの重要性

ここまでで、SEOとコピーライティングに関してある程度の知識がついたと思います。

では、次に学ぶべきことはなんでしょう

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

こちらはキーワードプランナーの使い方です

     👇👇

キーワードプランナーの使い方


【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の教科書

プライム・ストラテジー株式会社 SBクリエイティブ 2015-02-21

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

3-3. WordPressで個人ブログを作成す

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

では、このタイミングで個人ブログをつくってみましょう

HTML/CSS/SEO/コピーライティング/WordPressの知識を実際に活用していくタイミングです。

最初は既存のテンプレートをWordPressにインストールすることをオススメします。

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

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. Web制作の現場で使うjQueryデザイン入門

Web制作の現場で使う jQueryデザイン入門[改訂新版]

西畑一馬 アスキー・メディアワークス 2013年03月

ドットインストールを終えた時点でオススメしたいのが、Web制作の現場で使うjQueryデザイン入門です。実務で使われるサンプルが数多く紹介されており、jQueryの便利さが実感できるかと思います。同時に、jQuery勉強におけるモチベーションアップにも繋がります。

4-3. jQuery最高の教科書

jQuery最高の教科書

シフトブレイン SBクリエイティブ 2013年11月27日頃

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

【5】もっと自由にWebサイトをつくる【PHP】


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

5-1. よくわかるPHPの教科書

よくわかるPHPの教科書

たにぐちまこと マイナビ出版 2018年04月26日頃

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

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

» 詳解PHP 基礎文法編 (全34回) – プログラミングならドットインストール

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

5-3. Webサイト制作者のための PHP入門講座

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

鈴木憲治/安藤建一 技術評論社 2011年02月

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

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

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


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

最後にご紹介するのがTut+(海外のプログラミング勉強サイト)です。

残念ながら日本語には対応していませんが、PHPやその他フレームワークの素晴らしい動画教材が揃っています

気になる料金としては、有料となっています。すこし残念ですがお金を払う価値はあります。「どうしても無料で見たい!」って人はYoutubeでググってみてください笑

【6】まとめ


少し長い文になりましたが、やはり少しでもいいのでコツコツと学ぶのがいいですね

飽きる時もあると思うのですが、、、、

まぁ~~~のんびりと行きましょうか

持続は力なり!!!!ですね(笑い)

以下は最新の投稿です👇

-WEB制作

HTML Snippets Powered By : XYZScripts.com