僕自身Web制作をゼロから独学で勉強してきたのですが、現在フリーランスとして生活ができるまでになり、それなりにWeb制作の知識・スキルがたまってきたので、以前の自分と同じく、Web制作を独学で勉強しようと思っている人向けに、Web制作の勉強方法を紹介します。
主に次のような流れで解説していきます。
- デザインスキルを身につける
- HTMLとCSSを学ぶ
- JavaScript（jQuery）を学ぶ
- WordPressでサイトを構築できるようにする
- PHPの理解を深める
- Web集客を学ぶ
デザインスキルを身につける
まずはWebサイトの見た目をつくるデザインの勉強ですね。
自分でデザインから作るなら、基本的なデザインスキルを磨き、デザインソフトを使いこなせるようになる必要があります。
デザインスキルを磨く
僕はデザインの基本的なことも全然知らなかったので、「ノンデザイナーズ・デザインブック」という本でデザインの基礎を学びました。
デザインの定番書で、デザイナーじゃない人にも役立つデザインの基本原則がわかりやすく解説されています。
あと、Webデザインのスキルを高めるなら、とにかく多くのサイトを見ることです。
調べたらWebデザインのギャラリーサイトはたくさん出てくると思うのでどれでもいいのですが、僕がよく見ているのはMUUUUU.ORGというサイト。
クオリティの高い綺麗なサイトがたくさんあるので参考になると思います。
自分がいいなと思ったサイトを模写してみて、フォントサイズはいくらか、どれぐらいの余白を取っているのか参考にすることで、Webデザインのスキルは向上します。
デザインソフトを使いこなせるようになる
Webデザインはソフトで作るのが一般的で、主に以下のソフトを使えるようになるといいと思います。
- Adobe XD
- Illustrator
- Photoshop
全部「Adobe」という有名なクリエイティブソフトで、有料なのですが、Web制作においては必須のソフトです。
個人的におすすめなのは「Adobe XD」。自分でデザインするときはこのソフトを使っています。
ただ、案件によっては色々なWebデザイナーと仕事をする機会があるので、「Illustrator」や「Photoshop」も使える方がいいと思います。
全部完璧に使いこなせる必要はなく、チュートリアルで基本的なことを理解して、あとは実際に使いながら必要な機能を少しずつ学んでいけば大丈夫です。
Adobe XD チュートリアル
Illustorator チュートリアル
Photoshop チュートリアル
HTMLとCSSを学ぶ
デザインを元にWebサイトとして表示するためのコーディングを学ぶ必要があります。
コーディングで使われるのがHTMLやCSSといったマークアップ言語とよばれるものです。
簡単に説明するとHTMLはサイトの構造を作っていくもので、CSSは色をつけたりサイズを変えたりする装飾するのに使います。
僕は当時ドットインストールというサイトで勉強しました。
はじめてのHTML (全14回) – ドットインストール
はじめてのCSS (全15回) – ドットインストール
ドットインストールはかなり有名なサイトで、プログラミングが動画で解説されています。一つ一つの動画が短いので見やすいのと、解説もわかりやすかったので何回も見て勉強しました。
最近ではprogateという学習サイトも有名で、実際に手を動かしながら勉強できるので、こちらもおすすめです。
HTMLとCSSはWebページを作る基礎ですが、幅は広いので全部覚えようと思うとこの段階で挫折しちゃいます。
実際にサイトを作りながら覚えていけばいいので、本を買うとしても1冊で十分だと思います。
おすすめの本は下記です
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
この本はWebクリエイターボックスという有名なブログを書いている方の本です。
僕がWebデザインの勉強を始めてすぐの時は、この方のブログをけっこう参考にさせていただきました。
エディタについて
コーディングするときはエディタというソフトを使います。
人によって好みがありますし、実際に使ってみないと使い勝手がいいかわからないので、最初はどれでもいいと思います。
僕は最初になんとなく「Atom」を使い始めて、いまだに使っていますが、他だと「Sublime text」や「Visual studio Code」など色々あるので、どれかを選んで使ってみましょう。
Bootstrap
効率よくコーディングするフレームワークとして、「Bootstrap」があります。
実際に今仕事ではあまり使っていないのですが、Bootstrapを使いこなせるようになれば、サイトのレイアウトを組んだりするのがかなり早くできます。
勉強するのはどちらでもいいのですが、他に覚えることもまだまだあるので、ちょっと使ってみてこういう感じなんだなと思う程度でいいかなと思います。
安いLP案件が受注できるレベル
ここまででLP（ランディングページ）を作る案件が受けられるようになります。
単価としては1〜3万円ほどなので、副業としてはやりやすいのですが、その分競争相手が多いので、受注できるかどうかが難しかったりします。
JavaScript（jQuery）を学ぶ
HTMLとCSSでコーディングの基礎がわかったら、次はJavaScriptの勉強に取り組みましょう。
JavaScriptはWebサイトに動きをつけたりするのに使われているプログラミング言語で、ほとんどのWebサイトで使われています。
Web制作だとハンバーガーメニュー、アコーディオン、タブの切り替え、表示アニメーションなどで使います。
HTMLとCSSの時とは学習ハードルが上がるので難しく感じるかもしれませんが、JavaScriptが使えるかどうかで、できることの幅がかなり違うので、なんとか身につけたいスキルです。
僕もまだまだ勉強中で、他のサイトのソースコード見ながら真似て、少しずつできることを増やしています。
JavaScriptもドットインストールやprogateで勉強できます。
はじめてのJavaScript (全11回) – ドットインストール
JavaScript – progate
おすすめの本は下記です
改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
本を買うならこの本が初心者向けで比較的わかりやすいと思います。
jQuery
「jQuery」はJavaScriptのライブラリで、JavaScriptよりも記述が簡単になっています。
jQueryはオワコンという話も出ますが、Web制作ではまだまだ現役ですし、JavaScriptのとっかかりとしては学びやすいので、jQueryを使うところから始めてもいいと思います。
おすすめの本は下記です
jQuery最高の教科書
少し高めのLP案件が受注できるレベル
JavaScriptやjQueryでサイトに動きをつけられるようになったら、少しクオリティも単価も高いLP案件が受けられるようになります。
単価的には3〜5万ぐらいですかね。スキル次第ではもっと高単価でも受けられるかと思います。
HTMLとCSSだけでもLP制作はできなくはないですが、正直案件を取るのは難しいので、できればJavaScriptやjQueryで簡単な動きをつけられるぐらいのレベルはほしいところ。
副業でLP制作するならランサーズやココナラがいいと思います。
WordPressでサイトを構築できるようにする
Webサイトは作って終わりではなく、定期的に更新したい場合がありますが、その時に使えるのがCMS（コンテンツマネジメントシステム）というWebサイトを更新できるようにするシステムです。
有名なCMSで「WordPress」があり、Web制作においては高頻度で使われています。
僕は普段制作の8〜9割はWordPressでサイトを作っています。
WordPressの知識
まずはWordPressのインストールや基本的な使い方を学ぶといいと思います。
テーマとよばれるテンプレートがたくさんあるので、テーマをカスタマイズする形でサイトを作るというのもありですが、スキル的には独自テーマを作れるようになるのが理想です。
実は慣れるとそんなに難しくないので、コーディングしたサイトにWordPressを導入できるようになることを目指しましょう。
僕は独自テーマを作ることでWordPressの仕組みが理解できるようになりました。
おすすめの本は下記です
ビジネスサイトを作って学ぶWordPressの教科書 Ver. 5.x対応版
PHPの基礎知識
WordPressはPHPというプログラミング言語で開発されているので、WordPressを使うとなるとPHPの基礎知識ぐらいは学んでおく必要があります。
WordPress特有の書き方を覚える必要もありますが、PHPがわかっているとそれも覚えやすいと思います。
はじめてのPHP (全12回) – ドットインストール
progate
おすすめの本は下記です
PHPの絵本
内容のボリュームとしては多くないので、初心者にはちょうどいいと思います。
MySQLの基礎知識
WordPressではMySQLというデータベースを使用します。
SQLというデータベースを操作するプログラミングを学ぶ必要はありませんが、サーバーの管理画面でデータベースを作成したり、データベースの仕組みや基礎知識は理解しておく必要があります。
おすすめの本は下記です
基礎からのMySQL 第3版 (基礎からシリーズ)
サイト公開の基礎知識
サイトを作ったら公開する必要があるので、ドメインやサーバーの知識が必要です。
これはWordPressに限ったことではないですが、実際にWordPressでサイト構築する際にサーバー内で作業することが増えるので、ドメインやサーバーの仕組みはちゃんと理解しておきましょう。
他の会社の案件を受ける場合、LP制作だとコーディングデータを納品して終わりということもありますが、WordPress使う場合はサイト公開まで行うのが一般的です。
ドメインとかサーバーに関しては他の方のブログとかを参考にすることが多かった記憶があります。
企業サイト案件が受注できるレベル
WordPressでサイトが作れるようになると、企業サイトや店舗サイトなどの制作案件を受注できるようになります。
単価はページ数やどういう仕様にするかで全然違うのですが、10万円〜100万円ぐらいで受けられるので、仕事を継続して取れるのであれば、十分独立できるレベルです。
制作会社によっても料金設定は様々なので、提案次第かなと思います。
PHPの理解を深める
PHPの基礎さえわかっていればWordPressでサイトは作れますが、もう一段階レベルアップしたいならPHPの理解を深めることが重要です。
PHPを習得すればWordPressのカスタマイズの幅が広がるので、より自由にWeb制作ができるようになります。
Web集客を学ぶ
Web制作に必須ではありませんが、SEO対策やアクセス解析、広告運用などWeb集客についても知っておくといいと思います。
SEO対策とは、検索結果で上位表示するためにする対策のことです。
クライアントのリテラシーも高くなってきていて、打ち合わせの時にSEO対策という言葉が出てくることもよくあります。
言葉を知っている程度ですが、Web集客の話もできた方がいいので、フリーランスでクライアントと話す機会があるならWeb集客の知識を身につけておくと役立ちます。
また、サイトの管理やコンサルができると、月額料金で契約できたりするので、安定した収益が見込めます。
おすすめの本は下記です
10年つかえるSEOの基本
本で学ぶだけではなかなか身につかないので、自分でブログをしてアクセス解析を入れてSEO対策をしてみるのが、一番いい方法かなと思います。
Webマーケティングで有名なバズ部というサイトがあるのですが、SEO対策やコンテンツマーケティングについて詳しく書かれているのでとても参考になります。
一つ一つのボリュームも多いので読み応えがありますが、質が本当に高い記事ばかりなので、かなり理解度が増します。
まとめ
僕はこういった流れでWeb制作の勉強をしてきて、すべて独学だったので手探りでやってきましたが、それなりにWeb制作の仕事ができるようになりました。
もちろん働き方によって必要な知識やスキルは違うので、全部学ぶ必要はないかもしれませんが、一人でWeb制作をマスターするとなると、この記事で紹介した知識・スキルはほとんど必要だと思います。
短期間でWeb制作スキルを身につけるならプログラミングスクール
自身の経験から、Web制作は独学でも可能だと思っていますが、Web制作は学ぶことがとても多いです。
独学でやっているとわからないことがあったときにすぐ聞ける人がいないので、何回もつまづきましたし、モチベーションを保つのが難しい時期もあります。
なので独学でやっていこうと思っている人は長期的な視点で気長に勉強していく必要があります。
もし短期間でWeb制作をマスターしたいなら独学はおすすめしません。プログラミングスクールで実務レベルを短期間で身につけ、仕事をしながらスキルを高めていくのが近道です。
Web制作ではWordPressでサイトを作れるようになっておいたほうがいいので、WordPressが学べるプログラミングスクールを選ぶといいかもです。
Leave a Comment