【初心者向け】独学でWeb制作を習得する勉強方法

スポンサーリンク
この記事は約11分で読めます。

【初心者向け】独学でWeb制作を習得する勉強方法

スポンサーリンク
目次
  1. Web制作を勉強する目的を確認
  2. 独学でWeb制作の学習を始めるための準備
    1. パソコン(WindowsでもMacでもOK)
    2. ブラウザ(Chrome)
    3. テキストエディタ(VScodeがオススメ)
  3. Web制作スキルを独学で身につけるまでのロードマップ
  4. ①Webサイトの仕組みを理解する【HTML・CSS】
    1. Web担当者Forum(今さら人に聞けないWebの仕組みシリーズ)
    2. Progate(HTML&CSS 初級編・中級編・上級編、Flexbox編)
    3. ドットインストール(HTML入門・CSS入門)
    4. 検証ツール・デベロッパーツール
    5. フレームワークを覚える(Bootstrap)
  5. ②Webデザインスキル【Photoshop・Illustrator】
    1. サルワカ(Photoshop)
    2. Adobe(Illustratorチュートリアル)
  6. ③Webサイト制作の主流の方法を学ぶ【WordPress】
    1. ドットインストール(WordPress入門)
    2. WordPressデザインブック
  7. ④Webサイトに動きをつける【jQuery】
    1. Progate(jQuery 初級編・中級編・上級編)
    2. ドットインストール(jQuery入門)
  8. ⑤Webサイトの集客方法を学ぶ【SEO】
    1. バズ部
    2. 沈黙のWebマーケティング
    3. 沈黙のWebライティング
  9. ⑥アクセス解析してサイト改善する【Googleアナリティクス・サーチコンソール】
    1. Googleアナリティクス(アクセス解析)
    2. Google Search Console(検索順位チェック)
  10. Web制作をスキルアップするために
    1. 自分の好きなサイトを真似て独自サイトを作る
    2. WordPressで個人ブログを作りながら学ぶ
    3. その他
  11. まとめ:Web制作を独学するときのポイントはアウトプット重視で!

Web制作を勉強する目的を確認

はじめに重要な質問です。

あなたは何のためにWeb制作を勉強しますか?

「転職のため」「スキルアップのため」「副業でお金を稼ぎたい」など、理由は何でも構いません。

Web制作は比較的ハードルが低く勉強できますが、覚えることが多く、それなりの学習期間が必要なので(3か月、半年くらい~)、中途半端な気持ちだと途中で辞めてしまうのがオチだからです。

僕も未経験でWeb業界に転職してから脱落者を数多く見てきました。

また、単にWebサイトを作るだけならWeb制作はオワコンなので、Web開発やWebマーケなども併せて勉強する必要があります。

なので、「何となくWeb制作を覚えたいと思った」という生半可なモチベーションなら始めから勉強しないほうがいいです。

Web制作が少しできたくらいでは転職にもスキルアップにも副業にもならない、単なる時間の無駄です。

ここから先は、本気でWeb制作を身につけたい人のためのコンテンツです。

スポンサーリンク

独学でWeb制作の学習を始めるための準備

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

と言っても、物理的にパソコンとネット環境があれば良いです。

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

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

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

これから買いたい人は、持ち運びしやすい13型のノートパソコンが良いと思います。

カフェやラウンジなどの外での利用率が多そうなら見た目も重視してMacBookとか良いんじゃないでしょうか。

僕はWeb業界に転職してからMacデビューしました。
今もMacBookProを使っています。

ブラウザ(Chrome)

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

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

テキストエディタ(VScodeがオススメ)

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

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

スポンサーリンク

Web制作スキルを独学で身につけるまでのロードマップ

Web制作を独学で身につけるまでのロードマップは以下の通りです。

  • ①Webサイトの仕組みを理解する【HTML・CSS】
  • ②Webデザインスキル【Photoshop・Illustrator】
  • ③Webサイト制作の主流の方法を学ぶ【WordPress】
  • ④Webサイトに動きをつける【jQuery】
  • ⑤Webサイトの集客方法を学ぶ【SEO】
  • ⑥アクセス解析してサイト改善する【Googleアナリティクス・サーチコンソール】

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

スポンサーリンク

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

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

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

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

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

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

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

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

※2021年7月31日現在、14話まで公開されています。

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の基本的な使い方はドットインストールで勉強しておきましょう。

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

スポンサーリンク

②Webデザインスキル【Photoshop・Illustrator】

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

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

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

サルワカ(Photoshop)

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

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

Adobe(Illustratorチュートリアル)

IllustratorはAdobeのチュートリアルを利用するといいです。

スポンサーリンク

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

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

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

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

WordPressは以下で学べます。

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

WordPressデザインブック

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

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

スポンサーリンク

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

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

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

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

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

スポンサーリンク

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

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

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

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

バズ部

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

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

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

沈黙のWebマーケティング

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

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

続編の沈黙のWebライティングも一読の価値あり。

沈黙のWebライティング

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

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

スポンサーリンク

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

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

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

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

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

Google公式。

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

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

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

Google公式。

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

スポンサーリンク

Web制作をスキルアップするために

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

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

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

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

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

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

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

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

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

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

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

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

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

その他

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

Sass

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

PHP

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

Git

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

スポンサーリンク

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

いかがでしたか?

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

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

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

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

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

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

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

アウトプット重視、忘れずに。

以下にあわせて読んでほしい記事を用意しました。