独学でWeb制作を極めるための学習ロードマップ【初心者OK】

プログラミング

こんにちは。kenjyamanです。

今日はWeb制作の学習手順を網羅的に解説していきます。

ちょっと長めになるのでさっさといきましょう!!

始めに

今回の内容は商品として販売しようか迷うレベルまでWeb制作の学習方法を突き詰めて解説しています。なので一つだけお願いがあります。この記事をSNSで拡散してください。

と言ってもいきなりだと全く信用ならないと思うのでこの記事の質を見てから判断いただければと思います。

さて、Web制作の独学方法を見ていくわけですが、それ以外にもプログラミングスクールの1週間の無料体験期間を使ってWebアプリの基礎を学ぶのもありです。

▶︎TechAcademyの無料体験はこちら

本記事は結構長めになるかもしれないので自分の中で段階を区切って読んでいただけたらと思います。

ではまとめていきます。

目次

  • まずは環境を整えよう
  • HTML&CSSでWebサイトの仕組み&基礎理解
  • SEOの基礎を理解してアクセスを集める
  • 実際にWebサイトを作成【WordPressが最強】
  • ブログの収益の仕組み
  • おまけ

まずは環境を整えよう

学習を始める前にプログラミングをするための環境を整えていきます。

Mac版とWindows版両方対応しています。

するべきことは次の通り。

  • Chromeを導入
  • VS codeを用意
  • VS codeの詳細設定

Chromeを導入

まずChromeを導入していきましょう。下のリンクからダウンロードすることができます。

Chromeのダウンロードはこちらから

ダウンロードできたら一度デスクトップに移してタブは閉じてしまいましょう。

ファイルを開いてあげたら後はChromeのアイコンをしたのアプリケーションフォルダにドラック&ドロップするだけです。

VS codeを用意

次に実際にコードを書いていくための場所を用意してあげましょう。

色々なツールがありますがここではVS codeの用意をしていきましょう。

まずVS codeをダウンロードしてください。

VS codeのダウンロードはこちらから

ダウンロードが完了したらファイルを解凍してアプリケーションフォルダに移してあげてください。

そうしたらLaunchpadからVScodeを立ち上げましょう。

ここまででVScodeの導入は完了です。後は細かい設定をしていきましょう。

VS codeの詳細設定

設定画面を開くときはMacの方は⌘、、Windowsの方はCtrl、で開くことができます。

VS codeでしておくべき設定は次の5つです。

  • AutoSaveをoff→AfterDelayに変更
  • Font-Sizeを14に変更
  • Font-familyをRicty Diminishedに変更
  • Tab-sizeを4→2に変更
  • Word-Wrapをonにする
AutoSaveをoff→AfterDelayに変更

これは絶対にしておくべきです。

初心者にありがちなことで保存し忘れるということがあります。

それを防ぐためにもしておく方が良いでしょう。

Font-Sizeを14に変更

文字の大きさに関する項目ですがこれは好みで良いでしょう。

12だと流石に醜いので自分が見やすいと思う大きさに変えておきましょう。

Font-familyをRicty Diminishedに変更

次にプログラミングフォントというものを導入していきます。

ここではRicty Diminishedというフォントを導入していきましょう。

ChromeでRicty Diminishedと検索してあげましょう。

サイトを開いてあげるといろいろ出てきますが今回はレギュラー版をダウンロードしてください。

ダウンロードが完了したらファイルを開いて”フォントをインストール”をクリックすればOKです。

後はVS codeの設定画面のFontーfamilyにRicty Diminishedと入力しておくだけです。

※文字を打ち間違えると反映されないので上のテキストをコピペしていただくのが早いかと思います。

Tab-sizeを4→2に変更

もう少しで完了です。

設定画面にTabーsizeという項目があります。そこの数字を4→2にしておいてください。

この項目はタブを押したときにどれだけ文字が開くのかについてなんですが4だと横に広がり過ぎてしまいます。

ここは若干の差ですが違和感をなくすなら2で良いかと思います。

Word-Wrapをonにする

これが最後ですがやることは簡単。設定にあるWordーWrapのこうもくをonにしておくだけです。

この項目は改行をして横に広がり過ぎないようにしてくれる項目ですのでonにしておきましょう。

これで設定は完了です。

学習環境が整ったところで学習方法について見ていきましょう。

HTML&CSSでWebサイトの仕組み&基礎理解

Web制作を始める第一歩となるのがHTML&CSSです。

これを知らないとWeb制作なんて全くできないんですが学習することはとても簡単です。

勉強方法は次の2種類です。

  • ドットインストール
  • よくわかるHTML5+CSS3の教科書

ドットインストール

HTML入門〜ここから始めるHTML〜
CSS入門〜ここから始めるCSS〜

日本だと結構有名なドットインストールです。

プログラミングを動画で解説していて一回3分ぐらいで終わるので隙間時間にみるのがいいのかと思います。

私自身結構お世話になったサイトです。というか日本語でまともに勉強しようと思うとドットインストールしかないんですが、、

英語ができるよという方はedxなどで学んでいただくのも良いかと思います。

edixの学習はこちらから

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

HTML&CSSの学習を本でする場合はこれで十分です。

しかし懸念点として多分飽きるということです。どうしてもテキストだけだと途中で飽きることが多いです。

なので本で勉強する場合は自分のペースでゆるーくやっていくことをお勧めします。

フレームワークは初心者でも勉強するべし

人によっては基礎学習を終えた後の方が良いという方もいるかもしれませんが私はそうは思いません。

何故ならフレームワークを使えると爽快感がハンパないから、

本来10行ぐらい必要なコードをたった1行で実行することが可能になったりします。HTMLのフレームワークは数多くありますが一番使われているBootstrapがお勧めです。

勉強方法は何回も出てきてまたかと言われそうですがドットインストールの動画をご覧ください。

bootstrap入門

SEOの基礎を理解してアクセスを集める

Webサイトを作ったからには誰かに見てもらいたいという思いは強いでしょう。

しかしただオンライン上に置いておくだけでは誰も見てくれません。

自分で集客をしていかなければならないのです。

そんなときに必要になるのがSEOという知識です。

難しく聞こえるかもしれませんが簡単にいうと特定のキーワードで検索されたときに上位表示を狙うための技術です。

SEOの勉強方法は次の通り。

  • これから始めるSEO内部対策の教科書
  • バズ部の記事

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

この本は情報の密度がとても高い本です。

これ1冊でSEOの基礎学習は十分です。

しかしやはり本だと途中で飽きます。なのでリラックスして読んでいただけたらと思います。

バズ部の記事

Webマーケ業界ではかなり有名なメディアです。

しかし記事数が多いのでこれだけは読んでほしいという記事を3記事ほど紹介しておきます。

SEO内部対策で行うべき20の事

SEO対策|検索上位を独占するために弊社が行っている36の手順

ロングテールSEOで検索アクセスを倍増させるための基礎知識と具体策

+αでライティング術も学ぶべし

いくらSEO最適化をして上位表示されても記事を読みにきた読者たちが記事の内容の薄さのせいでサイトを閉じてしまったらそこまでです。

そこでライティング技術を身につけておくことを強くお勧めします。

ライティング術の学習方法はいろいろありますがここでは本一冊とバズ部の記事1記事を紹介しておきます。

たった1記事で8万人に読まれる文章を書けるようになるライティング術

実際にWebサイトを作成【WordPressが最強】

ここまででWeb制作とSEOの基礎を学び終えました。

なのでここからは実践的な話に落とし込んでいこうと思います。

Web制作をする際、様々なサービスがあります。

しかし私が激推ししたいのはWordPressです。理由は簡単で自由度が圧倒的に高いから、

ではWordPressを使ってWebサイトを構築していくための学習方法を書いていきます。

方法は次の2つ。

  • ドットインストール
  • 本格ビジネスサイトを作りながら学ぶWorPressの教科書

ドットインストール

もう何回目の登場になるか、ドットインストール、、、

しかし繰り返しですが日本にはこれぐらいしかないのでさくっと見ちゃいましょう。

23回分あって合計1時間ほどかかりますがスタート脱臭としては第一回〜第6回まで見ておけば問題ないです。

WordPress入門

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

この本はWordPressの基本操作を覚えた後にお勧めしたい本です。

本を全て読んでからやるというよりも実際に作業しながら読み進めていくことで効率的な定着につながります。

この一冊を完璧にできればその他の本は必要ないので読んでみてはいかがでしょうか?

WordPressで個人ブログを作成

ここからは学んできた知識を生かしていくわけですが私が最初にお勧めしたいのは既存のテンプレートをインストールするということです。

私の一押しはCocoonというテーマです。

おすすめの理由は簡単でテンプレートの種類が豊富だから、

また自由度の高いテーマを使いたい場合はbootstrapfoundationがおすすめです。

カスタマイズがしやすく特にfoundationは海外ではかなり有名なフレームワークで使っている人も多いです。

ではブログの作成ができたところです少しだけブログの収益の生み出し方をみていこうと思います。

ブログの収益の仕組み

ブログ収益の仕組みですがブログはいわゆる広告ビジネスとして成り立っています。

ブログで広告を掲載してお金を稼げます。お金を稼げる場合は大体次の2パターンです。

  • 広告がクリックされる(20〜40円)
  • 広告がクリックされそこから商品の購入・成約が発生(購入の数%、案件ごとの定額)

広告をサイトに掲載するにはA8.net、GoogleAdsense、Amazonアソシエイトなどがあります。

A8.net

Google Adsense

Amazonアソシエイト

せっかく作った個人ブログなどで収益化しちゃいましょう。

おまけ

これで内容としては以上ですが最後にもっとサイトに動きをつけたい方や自由に作っていきたい方向けの話をしたいと思います。

サイトに動きをつける(jQuery)

サイトに動きをつけるにはJavaScriptを使います。

もちろんそれを勉強してもらってもいいのですが少し難しいので今回はjQueryを利用しましょう。

jQueryは簡単に言えばJavaScriptのフレームワークです。

学習方法はドットインストールの他にWeb制作の現場で使うjQueryデザイン入門という本があります。

余裕が出てきたらやって見てはいかがでしょうか、

自由にWebサイトを作る(PHP)

ここまででWeb制作の基礎・応用の半分ができました。

ここで満足、でもいいのですがさらに上へいきましょう。

PHPという言語を勉強することでもっと高度なWebサイト・Webサービスが作れるようになります。

勉強方法はもう聞き飽きたかもですがドットインストール、後はWebサイト制作者のためのPHP入門講座という本なんかもお勧めです。

最後に

これで以上です。

今日の話は私が実際に勉強したときに使った方法です。

これがあっているとは限りませんが多少でも参考になればと思います。

プログラミング頑張っていきましょう。

ちょこっと振り返り  /  17

結構時間をかけてこの記事を書き上げました。

約2週間のハードワークです。これからは作業量の配分にも注意してブログを書いていこうと思います。

コメント

  1. […] らご覧ください。 ▶︎独学でWeb制作を極めるための学習ロードマップ【初心者OK】 […]

  2. […] 独学でWeb制作を極めるための学習ロードマップ【初心者OK】こんにちは。kenjyamanです。この記事では独学でWeb制作を勉強していく手順を解説しています。実際に私はこの方法でやって見 […]

  3. […] 独学でWeb制作を極めるための学習ロードマップ【初心者OK】こんにちは。kenjyamanです。この記事では独学でWeb制作を勉強していく手順を解説しています。実際に私はこの方法でやって見 […]

  4. […] 独学でWeb制作を極めるための学習ロードマップ【初心者OK】こんにちは。kenjyamanです。この記事では独学でWeb制作を勉強していく手順を解説しています。実際に私はこの方法でやって見 […]