未経験から始めるWeb制作の勉強方法

article-thumbnail

こんにちは、お読みいただきありがとうございます。 ケン(@gootablog)です。

今はエンジニアとして働いていますが、最初の入口はWeb制作でした。

Web制作やプログラミングを学び始めたときはどう学ぶか、効率的に学ぶ方法はあるのかなど全く知りませんでした。でも試行錯誤して勉強してきたことを振り返ると、今自分が初めて勉強していくならこうしていくなぁというのがあります。

なので今回は未経験だった昔の自分に向けて今から勉強するならこうやったほうがいいよ。っていうのを書いきます。

  • HTML&CSSやWordPressに興味がある
  • 勉強したいけどどうやるのがいいのかわからない

って思っている人は参考にしてみてください。

(この記事はweb制作を仕事としてやっていくための最初のステップとしてのポートフォリオを作成するというところをゴールに書いています)

未経験から始めるWeb制作の勉強方法

まずこの記事でいうWeb制作の範囲は

  • HTML&CSS
  • jQuery
  • PHP(WordPressを使うため)
  • WordPress

これらのことを指しています。広義な意味だとプログラミングとも言えそうですが、今回はWeb制作と呼ぶことにします。

基本的な勉強の流れとしては

  1. ドットインストール流し見
  2. Progateで手を動かしてみる
  3. 本で知識を補填
  4. 実際に自分で作る

です。自分で作るということに重点を置いて進めてください。自分で作るというフェーズに行くまでは基本的に流しましょう。わからなくてもこういうもんなんだなと思ってください。

今新しい言語やフレームワークを学ぶときも実際に手を動かして自分で作るということに勝るものはないと思っています。なので素早くそのフェーズまでいきましょう。

HTML&CSS

まずはHTML&CSSです。Webサイトを作る上では欠かせないものです。

ドットインストール見る

はじめてのHTML (全14回) – プログラミングならドットインストール
はじめてのCSS (全15回) – プログラミングならドットインストール

Progateで手を動かす

HTML & CSS | プログラミングの入門なら基礎から学べるProgate[プロゲート]

なんとなくわかってきたら、本を読みつつコーディングしていきましょう。おすすめはこの本です。

これは最近のコーディングはこうやっているよっていう事例があり、実際に自分で書いて学んでいくタイプなので良かったです。レスポンシブの方法も載っているので参考になりました。

そしてこの本も持っておくといいです。これは手を動かすというよりは全体的な説明が書かれていて辞書的に使ったりできるのでわからない箇所をピンポイントで学べます。

これで基礎はOKです。

ここまで来たら1度自分の自己紹介サイトでもなんでもいいので作りましょう。クオリティとか見た目とかはひとまず置いておいて作ることにフォーカスするべし。

Sassはやらなくていいの?

って思った方もいるかもしれません。もちろんやるに越したことはないんですが、導入の方法だったりコンパイルの方法だったりターミナル(黒い画面)を使ったりと最初だと難しい部分があるので今ではないです。慣れてきたらで大丈夫です。

Bootstrapは?

CSSを簡単に表現できるフレームワークですが、これは自分で作るというフェーズになったら試しに使ってみてみいいかもしれません。

ただ経験上、簡単なものを作る場合とかにしか使用した経験がないので使うメリットはこれだ!っていうのを一概に言えないです・・・。

jQuery

HTML&CSSに動きを加えるJavaScriptのライブラリです。JavaScriptより簡単に要素を消したり表示させたりアニメーションさせたりできるめちゃくちゃすごいやつです。初めて使ったときは「こんなんできるのか!」と感動しました。

これもドットインストールを流して

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

Progateをやりましょう。

jQuery | プログラミングの入門なら基礎から学べるProgate[プロゲート]

終わったら次は本ですが僕はこれを使用して勉強しました。

いろんなアニメーションが載っているので、実際に手を動かしながら覚えられます。

本をやり終わったら自分で作ったHTML&CSSのサイトにメニューを付けてみたりして動きを足しましょう。

PHP

PHPはWordPressを使うために勉強するのでとりあえずはサクッとくらいでいいと思います。四則演算、条件分岐、繰り返しの処理は最低限覚えましょう。

ドットインストール

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

Progate

PHP | プログラミングの入門なら基礎から学べるProgate[プロゲート]

PHPで本を買うとしたら優しいやつを1冊。ここらへんがおすすめです。

WordPress

ここまで来たらやっとWordPressです。

これも仕組みなどを理解するためにドットインストールを流しましょう。

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

Progateにドットインストールはないので本をやっていきましょう。

おすすめはこれです。

僕はこれを使って勉強しました。こちらの本はバージョンが4.x対応となっていて最新のWordPressのバージョンには対応していませんが、学習ならバージョンが違っても大丈夫です。

これは自分で実際に作っていくので構造とかもわかるようなります。この本が終わったら今まで勉強したものを使って自分のブログを作ってみましょう。

0から作ってみてもいいし、無料テーマをいじって好きなようにカスタマイズをするのもよし。完成したらレンタルサーバーにアップして更新していくのをおすすめします。

途中で飽きたらどうすればいいの?

これ途中で飽きるって思った方いますか?もし飽きてきたら自分で作りたいものを考えてそれを作っていきましょう。自分で作っていくうちに確実に勉強が必要なタイミングが来るのでそれがきたら勉強していきましょう。必要なタイミングで必要な分を勉強する「遅延評価勉強法」というのがあるのでそのやり方でやっていきましょう。

勉強が苦手な人向けの「遅延評価勉強法」 : けんすう日記

愚直にやっていける人はどんどんやっていきましょう。自分飽きる割って人は適度に刺激を加えつつ勉強を進めてやっていきましょう。

本じゃなくて動画教材は?

動画教材でもいいと思います。ゴールはWeb制作できるようになることなのでインプットの方法は自分にあった方法があるならそれでやるのが一番です。

ちなみに動画教材サイトのUdemyだと

HTML&CSSは「未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース」のHTML&CSS部分。


未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース | Udemy

PHPなら「PHP+MySQL(MariaDB) Webサーバーサイドプログラミング入門」のPHPの基本を学ぼうというところがいいですかね。


PHP+MySQL(MariaDB) Webサーバーサイドプログラミング入門 | Udemy

WordPressは良さげのが無かったので掲載するのはやめておきます・・・。

まとめ

ここまでやりきると最低限の知識は付いていると思います。

これを踏まえて架空の会社・お店などのサイトを作ってみましょう。いくつかポートフォリオがあると実際に手を動かしているという証明になるので、何もしていないよりかは仕事を得る上でプラスに働くと思います。

勉強法を書きましたが、基本を勉強して実際に作ってという感じで進めていくのが一番ですかね。近道はないのでコツコツとやっていきましょう。

こちらの記事もよかったら読んでみてください。

Web制作・プログラミングを身につけるためには【ひたすら手を動かす、調べる、メンターを付ける】 – Goota

Tech
web制作

関連記事