初心者が独学でweb制作を学習する方法を解説
Web制作は独学でも効率よく学習すれば3か月程(300～500時間)でベーススキルを身に着けることができます。
僕は実際に3か月程の独学を経てからWeb制作会社へ就職していますので、その経験も踏まえて独学方法を解説します。
本記事の通り勉強することで以下のことが実現できます。
- 個人で5万円程度のWeb制作案件を受注できる
- Web制作会社へ就職できる
- 個人でブログやアフィリエイトサイトを制作できる
目次
HTML、CSS
インターネット上に公開されているウェブページのほんとんどは、HTMLで作成されており、最も基本となるマークアップ言語です。また、HTMLで作成したページをCSSでスタイル調整することになりますので、セットで学習しましょう。
基礎学習
学習の手段として、おすすめはProgateという学習サイトです。まずは無料登録でHTML & CSS初級編に挑戦してみましょう。学習の入り口としては、どの教材よりも親切でわかりやすく解説されているので、とにかく一度試してみると良いです。
中級編からは月額980円ですが、様々な言語を効率よく学習できるので、コスパは十分にいいです。
ただ、初心者の段階ではやはり難しく感じるものでして、、、
1時間くらいで眠気に襲われたりするかもです（笑）
一気に覚えようとするのではなく、1週目は何となく雰囲気を掴むだけでいいと思います。
2～3週もすれば徐々に慣れていき、感覚が掴めてくるはずなの何とかやり抜きましょう！
Progateの他にはドットインストールがおすすめですね。こちらは、動画で解説しているので、実際にコーディングしている様子を確認しながら自分でも同じように手を動かすことで、体で覚えていきます。Progateに少し慣れてからやると丁度良いと思います。
実践学習
ここから実践に入っていくわけですが、まずは教本の通りにサンプルサイトを作成してみるのが、おすすめです。
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方
HTML/CSSの基礎を理解したところで、実際にWebサイトのコーディングをしてみましょう！ この本は3種類のサンプルサイトについて解説を見ながらコーディングしていくことができるので、より実践的なスキルを身に着けることができます。
次に、実際に存在するサイトのソースコードをなるべく見ずに、模写コーディングしてみましょう。下記のサイトでは、良質なデザインのサイトが数多く紹介されているので、気に入ったものを自分で再現してみると面白いと思います。ただ、ほとんどサイトには、「ボタンをクリックするとメニューが開く」といった動きがついていたりします。そういった動きは下章で紹介するjQueryの知識が必要なります。
jQuery
jQueryはJavaScriptというプログラミング言語を使いやすくしたライブラリです。このライブラリを用いることで、本来はJavaScriptで長いコードが書かなければいけないところを、簡単なコードを記述するだけで済むわけです。
jQueryでは、下記のような動きを実現することができます。
- ボタンをクリックしてメニューが開く
- マウスオーバーで色やテキストの表示の変える
- クリックしたら任意の場所へスクロールさせる
学習方法としては、やはりProgateとドットインストールがおすすめです。
そして基礎が理解できれば、あとは検索しまくることで解決できるようになっていきます。
また、網羅的に学習したい場合は技術書を購入するも有りだと思います。
PHP
PHPを使用することで、Webページを動的に生成することができるようになります。
例えば、本サイトでも使用しているWordpressというCMS（コンテンツ・マネジメント・システム）はPHPで作られており、管理画面で投稿記事を書くだけで、自動的にHTMLファイルが生成されて簡単にページを増やしていくことができます。
また、お問い合わせフォームで名前やメールアドレスを入力した後、入力したテキストが確認画面で表示されるわけですが、入力された内容を読み取って動的にページを生成することでこれを実現できています。
従ってWeb制作する上で、PHPの知識を使用する場面は多く、全世界のWebサイトの30%以上で使用さているWordpressをカスタマイズする上でもPHPを理解しておくメリットは大きいです。
学習方法は、お決まりのProgateとドットインストールでやっていきましょう。
FTPソフト
作成したWebサイトを他人も閲覧できるようにするためには、データをサーバーに転送する必要があります。そこで、FTPソフトを使用した、サーバーへのデータ転送について知っておく必要があります。
よく使用されるのは、FFFTPというソフトですね。無料でダウンロードしてインストールすればすぐに使用できますので、契約しているレンタルサーバーがあれば、データをアップロードしてみましょう。
サーバーは、xserverを使用することが多く、こちらは月額1000円程度は必要ですが、安全にWebサイトを運用するためには、必要な投資ですね。
ちなみに無料のサーバーは、データを保存できる容量が少ない、広告が入ってしまう、安定していないなどの、デメリットがあります。
WordPress
PHPの基礎が何となく理解できたところで、Wordpressに手を出してみましょう。
WordPressそのものは無料でダウンロードすることができ、無料のテーマ（サイトのデザインテンプレート）を用いることで、初心者でもサイトを作成することができます。
ただ、無料のテンプレートテーマだと汎用的なサイトしか作成できませんから、Web制作を受注する場合は、テーマを自作したりカスタマイズする必要が出てきます。
そのためには、Wordpressの仕組みや管理画面での設定方法、PHPを用いたWordpress関数などに慣れていく必要があります。
そこで、Wordpressの技術書を一冊やっておくと良いと思います。
［改訂版］WordPress 仕事の現場でサッと使える！ デザイン教科書［WordPress 5.x対応版］ Webデザイナー養成講座
この本は新しめで、かなり丁寧に解説されており、Wordpress初心者におすすめであり、尚且つ実務で通用するレベルのスキルは身につく内容になっていると思います。
デザイン
Web制作する上で、デザインツールは扱えるようにした方が良いですね。デザインカンプから画像を書き出ししたり、フォント情報の読み取りやサイズの計測とかは、最低限できるようにしないとコーディングすることができません。
Photoshop
Photoshopは写真の加工等に優れており、多機能なので使いこなせば何でも出来てしまい、定番のツールとなっています。
Illustrator
Illustratorはロゴとか、図形とかの素材を自作する場合に強力なツールですね。Webデザイン全体をIllustratorでやるケースはそこまで多くない印象なので、優先度は低くても良いかもしれません。
XD
最近はXDでデザインを行なうケースが増えている印象です。このツールはとにかく動作が軽く、直感的に操作が可能で、効率的にデザインしたい場合におすすめです。その反面Photoshopのように細かい加工はできませんので、使い分けは必要かもしれません。
デザインの理論
デザインする上では、基本となる理論を理解しておくことは非常に重要であると思います。そこで、おすすめなのが下記に紹介する本です。
ノンデザイナーズ・デザインブック ［第4版］
この本はWebだけに限らず、デザイン全般における考え方や理論を学ぶことができます。簡単に解説すると、デザインには4つの原則があり、良質なデザインはそれがきちんと守られているということです。
SEO対策
SEO対策とは、Googleなどの検索エンジンで自分のサイトが上位に表示されるように対策することです。どれだけ良いサイトを作成したとしても、検索で見つからなければ、誰にも見てもらえません。
そこで、SEO対策の方法について知っておく必要があります。これは、下記の本がおすすめすね。
これからはじめる SEO内部対策の教科書
簡単に解説すると、ユーザーやサイトを評価する検索エンジンの巡回ロボットにとって見やすくわかりやすい構造にしなければならないということです。
まとめ
ここまでに解説した内容をやり抜けば、Web制作のベーススキルが身についているはずです。
とはいえ独学は本当に大変で、僕は何度も挫折しかけました、、、
なので、必ずどこかでつまずくものと思った方がいいかもしれません( ;∀;)
まずは、無料で学習できる範囲からはじめてみましょう。その時に「面白いかも！」と思えて、継続ができれば最高です！
これから独学する際に少しでも参考になれば嬉しいです。