【ロードマップ】Web制作を独学で身につける勉強方法

Web制作を身につけたいと思っている人の中には、何から始めたら良いか分からなかったり、どこをゴールにすれば良いのかわからない人も多いかと思います。

実は僕も5年前に未経験からWeb業界に転職してWebディレクターを始めたときはWeb制作のことはチンプンカンプン。
Webディレクターをやりながら興味が湧いてWeb制作を独学して身につけました。
その後はWebディレクター兼コーダーと1年現場を経験してからWebマーケターに転職して現在に至ります。

今回は当時、僕が独学でWeb制作を見につけた方法を紹介します。

ロードマップで手順を解説しますのでぜひやってみてください。

独学でWeb制作を身につけるためのロードマップ

Web制作を独学で身につけるロードマップがこちらです。

  1. 準備
  2. Webサイトの仕組みを理解する【HTML・CSS】
  3. Webデザインスキル【Photoshop・Illustrator】
  4. Webサイト制作の主流の方法を学ぶ【WordPress】
  5. Webサイトに動きをつける【jQuery】

順番に取り組めば無理なく学習を進められるはずです。

1. 準備

まずは必要なものを準備しましょう。

パソコンとネット環境、ブラウザ、ツールを準備しておきましょう。

パソコン(WindowsでもMacでもOK)

パソコンは今持っているものを使えば問題ないです。

WindowsとMacもどちらでもいいです。

これから買いたい人は、持ち運びしやすい13インチくらいのノートパソコンが良いです。
パソコンのスペックは、CPUはCorei5以上、メモリは16GB、ストレージは500GBを推奨します。

こちらの記事も参考にしてください。

Webマーケティングにおすすめのパソコンの選び方
Webマーケティングにおすすめのパソコンの選び方を紹介。MacかWindowsか、Webマーケティングに必要なPCスペック、迷ったときの選び方など徹底解説。

ブラウザ(Chrome)

ブラウザは開発ツールとしても優秀なGoogle Chromeを使いましょう。

Google Chrome

検証モードでレスポンシブデザインの確認やCSSの更新をしていきます。

テキストエディタ

テキストエディタはソースコードを書くための高機能メモ帳です。

アドオンの充実度、使いやすさの面でVScodeがオススメです。

Visual Studio Code

2. Webサイトの仕組みを理解する【HTML・CSS】

まずはWebサイトの仕組みを知らないと何も始まりません。

「今さら人に聞けないWebの仕組みシリーズ」を一読するところから始めましょう。

それが終わったら、Web制作の基本のキであるHTML・CSSから取り掛かります。

Web担当者Forum(今さら人に聞けないWebの仕組みシリーズ)

「今さら人に聞けないWebの仕組みシリーズ」でWebの仕組み、HTML、CSS、JavaScript、FTPなど、Web制作に必須の知識をインプットします。

まずはWebのことを簡単にイメージ、仕組みを理解するフェーズになります。

第1回から順番に読み進めましょう。

※2022年11月15日現在、16話まで公開されています。

Progate(HTML&CSS 初級編・中級編・上級編、Flexbox編)

続いて手を動かしてコーディングの雰囲気を掴みます。

ProgateのHTML&CSSコースでHTMLとCSSの基本、レスポンシブデザインを学習するといいです。

Progateのサイト上でエディタ入力、プレビューができるので簡単に学習できます。

※一部有料(1,078/月)になりますがはっきり言って安いです。

※コーディングの感覚をつけるため最低2周、できれば3周しておくといいです

ドットインストール(HTML入門・CSS入門)

ドットインストールを使ってHTML・CSSの基本を学びましょう。

Progateと被る部分も多いですが、こちらは自分でエディタを用意して作っていくのでより実践的です。

以下の基礎コースを学習しましょう。

HTMLの基本タグや、CSSの基本プロパティについて学べます。

※有料(月額1,080円)ですが十分価値ありです。

※こちらも最低2周はしておくと、Web制作の感覚が掴めます

検証ツール・デベロッパーツール

Web制作においてデバックの仕方はマストスキル。

コーディング時やレスポンシブデザインの表示確認など、多用します。

以下のサイトで基本的なデベロッパーツールの使い方を学習しておきましょう。

フレームワークを覚える(Bootstrap)

フレームワークはWeb制作を効率化できる便利なパッケージ商品みたいなもの。

Twitter社発のBootstrapが超有名で、実務で使うことも多いです。

Bootstrapの基本的な使い方はドットインストールで勉強しておきましょう。

Bootstrap 5入門(ドットインストール)

一度覚えてしまえば公式ドキュメントを見ながら作れます。

3. Webデザインスキル【Photoshop】

Webデザインスキルを身に付けましょう。

Web制作ではPhotoshopをよく使います。

基本操作ができるようになるのが目的です。

サルワカ(Photoshop)

サルワカはWeb制作を分かりやすく解説してくれるWebメディア。

Photoshopは以下のページで覚えるといいです。

ゼロからのPhotoshopの使い方

Adobe(Illustratorチュートリアル)

Illustratorはロゴデザインに使います。
Photoshopよりは使用頻度は下がりますが、余力があればAdobeのチュートリアルで操作方法を掴んでおくいいです。

Illustratorチュートリアル

4. Webサイト制作の主流の方法を学ぶ【WordPress】

現場ではHTML、CSSを一からコーディングするのは実は少ないです。

実践ではBootstrapなどのフレームワークを使ったり、WordPress(CMS)で構築することが多いです。

とくにWordPressはプロ仕様で企業で使われることも多いので使いこなせるようにしておきましょう。

WordPressは以下で学べます。

ドットインストール(WordPress入門)

WordPress入門

WordPressデザインブック

WordPressのテーマ作成について1から学べる良書。

HTML、CSSを学習後に勉強するといいです。

WordPressデザインブック HTML5&CSS3準拠

5. Webサイトに動きをつける【jQuery】

jQueryはWebページに効果やアニメーションなどの動きを実装できるJavaScriptライブラリです。

Progateとドットインストールで学習できます。

Progate(jQuery 初級編・中級編・上級編)

ドットインストール(jQuery入門)

スキルを磨いていく

Web制作の基礎を学んだら、そこから先は自分のなりたい姿に向かって取り組んでください。
ここでは、Web制作の基礎を身につけた後のスキルアップ方法について紹介します。

自分の好きなサイトを真似て独自サイトを作る

自分の好きなサイト、良いと思うサイトをマネして独自サイトを作ってみましょう。

ここまで学習してきたことの集大成です。

HTML、CSS(Bootstrap)、jQueryなどでゼロから構築することで実践スキルを身につけることを目的としています。

  • 画像・テキストはオリジナル
  • レスポンシブル
  • スライダー、アコーディオン、タブ切り替え、ハンバーガーメニューなど、Webの基本パーツ

これらを意識して作って見るとスキルアップできます。

難しいようなら、まずはProgateやドットインストールでサンプル制作したものをアレンジするところから始めてみてください。

WordPressで個人ブログを作りながら学ぶ

実務に直結する非常に実践的な内容です。

実際にドメインとレンタルサーバーを契約してWordPressで個人ブログを作ってみましょう。

デザインのカスタマイズ、テンプレートの編集などを試してみるといいです。

必要なプラグインを調べて導入したり、SEOを意識してブログ運営をすることで非常にスキルアップできます。

成果物としても非常に有利になるのでオススメです。

その他

その他、よりスキルアップするために勉強すると良いことのまとめです。

Sass

SassはCSSをより便利に効率的にするための言語です。

PHP

PHPはフォーム、会員サイト、ECサイトなどでも使われるWeb開発のサーバーサイド言語です。

Git

Gitはソースコードのバージョン管理や共同開発を可能にするツールです。

Webサイトの集客方法を学ぶ【SEO】

Webサイトの集客方法として、SEO対策について勉強しておくといいです。

SEO対策は内部対策と呼ばれるサイトパフォーマンスの最適化もあるのでWeb制作にも密接に絡みます。

以下のサイトや本で学習するといいです。

バズ部

バズ部はSEO関連の情報が非常に充実しています。

どの記事もボリューミーで内容盛りだくさん。
空いた時間に読むと良いです。

まずはこちらの記事をしっかり読んで実践してみましょう。

SEOとは?最短で成果を出すために必要な知識と実践方法の全て

沈黙のWebマーケティング

Webデザイン、Webマーケティングなどを漫画で学べる良書。

漫画なので内容がスッと入ってくる。

沈黙のWebマーケティング

沈黙のWebライティング

沈黙のWebマーケティングの続編。

SEOに強いライティング技術について漫画で学べる良書。

沈黙のWebライティング

アクセス解析してサイト改善する【Googleアナリティクス・サーチコンソール】

ホームページは作って終わりではなく、アクセス解析して改善していくものです。

有名どころの以下2つを使っておけば間違いないです。

Googleアナリティクス(アクセス解析)

Googleアナリティクスはサイト内のユーザー行動を分析できる無料アクセス解析ツール。

Google公式。

PV、UU、滞在時間、直帰率などの基本指標を定期的にチェックしてサイト改善に活かします。

Googleアナリティクス

Google Search Console(検索順位チェック)

Google Search Consoleはサイトに来るまでのユーザーの検索ワード、自社サイトで上位表示しているページ、Webサイトのインデックス状況やエラー状況などを確認できる無料ツール。

Google公式。

狙ったキーワードで上位表示できているか?表示順位に対してクリック率は低くないか?などのチェックに活用します。

Google Search Console

まとめ:Web制作を独学するときのポイントはアウトプット重視で!

いかがでしたか?

ここで紹介した内容は実際に僕も実践していた方法です。

かなり濃い内容なので、じっくり取り組んでみてください。

基本的に上から順に取り組めば無理なくWeb制作スキルが身につくと思います。

内容が難しいと感じたら、一つ前のステップに戻って復習するか、60%の理解でも構わないので前に進むといいです。

さいごに、Web制作はアウトプットが重要です。

いくらインプットしたところで実践で使えるスキルにならなければ役に立ちません。

なので、できるだけ手を動かしてモノ作りしながら学習しましょう。

タイトルとURLをコピーしました