プログラミング、気楽な生き方を中心に発信しています。
  • twitter
  • instagram
  • facebook

【初心者向け】WEB制作を独学する全手順【最短で3ヶ月で可能】

こんにちは、たつきです。
フリーランスのWEBエンジニアとして活動しています。

本記事では「WEB制作を独学する全手順」という事で、知識0の状態からWEB制作の案件をできるレベルまでの独学の全手順を解説していきます。

本記事で使う教材

「WEB制作学習の教科書」は自作の教材です。
本記事と同じ流れで解説しているので暇な時などに適当に読んでみてください。

それではいきましょう。

WEB制作を独学する全手順【最短で3ヶ月で可能】

WEB制作を独学する全手順【最短で3ヶ月で可能】

僕は半年間の独学経験と3ヶ月のプログラミングスクールの経験があり、その経験を元に最適な学習手順を考えました。

独学の手順

  • 手順①:WEB系言語のインプット
  • 手順②:WEB系言語のアウトプット
  • 手順③:WordPressの基礎を学ぶ

早い人で3ヶ月ほどで学習可能だと思います。
とはいえ、継続する事が大事なので燃え尽きないように自分のペースでやるのが良きです。

手順①:WEB系言語のインプット

手順①:WEB系言語のインプット

まずは知識のアウトプットをしていきます。
順序は下記の通りです。

  • ①:HTML/CSS
  • ②:JavaScript
  • ③:jQuery

プロゲートとドットインストールを使っていきますが、時間のない方はどちらか1つでも問題なしです。時間が余裕のある方or知識が定着していない方はどちもやってみましょう。

①:HTML/CSS

WEBページの見た目を作る言語です。
ここができるようになると、WEB制作の全体がイメージできるようになると思います。

プロゲート

プロゲートで学習する場合は、上記のコースをやっておけばOKです。道場コースというレッスンもありますが、結構なボリュームなので無理にやる必要はないかなと思います。道場コースは余裕のある方向けです。

ドットインストール

ドットインストールは動画方のレッスンになります。HTML/CSSはこれ以外にもレッスンがありますが、あまり使わないものが多いので今はやらなくて大丈夫です。一通り学習が終わって、必要になった時にサクッと学びましょう。上記のレッスンだけでWEB制作は可能です。

デベロッパーツールの使い方

HTMLとCSSの基礎インプットが終わったら、GoogleChromeの機能である「デベロッパーツール」を使い方を覚えましょう。

デベロッパーツールを使う事で、ブラウザ上で直接HTMLやCSSなどをテスト的に編集する事ができます。WEB制作をする上で必須のツールとなりますので、ザックリと使い方を覚えましょう。

とはいえ、「デベロッパーツール」は機能が沢山あり全てを使いこなすのは難しいです。実際に使用するのは限られた機能だけなので、必要なものをまずはサクッと覚えてしまい、他の機能は必要になった時に覚えていきましょう。

下記の記事でコーダー向けのデベロッパーツールの使い方を解説していますのでどうぞ。

②:JavaScript

HTML/CSSで作ったWEBページに動きをつけるためのプログラミング言語になります。とはいえ、次で解説するjQueryを使う事が多いと思いますので、JavaScriptは基礎だけ軽く学習しておけば、とりあえずはOKです。

プロゲート

全部で7コースまでありますが、3つまでやれば大丈夫です。WEB制作で使うのは3までの知識で十分かなと思います。将来的にJavaScriptをもっと極めたい方はWEB制作学習が一通り終わってからやりましょう。いきなり深く学んでもあんまり意味がないかなと思います。

ドットインストール

プロゲートとほとんど同じ内容です。基本の書き方から「演算子」「変数」「条件分岐」「関数」などを学んでいきます。ここら辺の考え方は他の言語とも共通な事が多いのでしっかりと学びましょう。jQueryでも必要になる知識です。

③:jQuery

JavaScriptをより簡単に使えるようにした、ライブラリです。親言語がJavaScriptだとしたら子言語のようなイメージです。簡単なページの動きなどはjQueryの方が得意だったりするので、まずはjQueryをしっかりと使えるようになるのが良きです。

プロゲート

道場コースは不要ですので、上記の3コースをサクッと学習しましょう。

ドットインストール

サポートは終了していますが、内容は問題なしですのでこちらもサクッと学習していきましょう。

手順②:WEB系言語のアウトプット

手順②:WEB系言語のアウトプット

プロゲート、ドットインストールでインプットした知識をアウトプットしていきます。ここが一番大変だと思います。

アウトプット方法は下記です。

  • ①:模写コーディング
  • ②:ポートフォリオ作り

順番に解説していきます。

①:模写コーディング

何でも良いので、自分の好きなサイトなどをそっくりそのままコーディングしていく勉強方法です。実際のWEBサイトを作るのでアウトプットに最適です。

模写コーディングで意識する事は下記です。

  • 完璧を目指さない
  • 大体同じならOK
  • 3つくらい作る

全く同じに作るのは大変ですし、あまり意味がないので大体同じなら問題なしです。スマホ対応まで頑張りましょう。シンドいと思いますが、一気に成長できると思います。

模写コーディングのやり方は下記の記事で解説していますのでどうぞ。

②:ポートフォリオ作り

自己紹介、スキル、実績などをまとめたポートフォリオサイトを制作していきます。

就活や案件を獲得する際には実績などをまとめたポートフォリオが必要になりますので、最終アウトプットという感じで作ってしまいましょう。

模写コーディングで作ったサイトを実績として載せますので、実績がなくても大丈夫です。実際に案件などを獲得できて実績が増えたら差し替えましょう。

ポートフォリオの作り方は下記のサイトで解説しています。

手順③:WordPressの基礎を学ぶ

手順③:WordPressの基礎を学ぶ

少しレベルアップしてWordPress学習をして終了です。

WordPressはCMSと呼ばれる、ブログ機能などの更新機能を使えるようにするシステムです。現在はWordPressでホームページを作るのが主流になっておりますので、是非覚えましょう。このブログもWordPressで作られています。

WordPressまで扱えるようになれば安定して月5以上稼げるようになりますし、就活にも有利になります。

ドットインストール:WordPress入門で学ぶ

下記のドットインストールの教材で勉強します。

上記を学べば、大体のWordPressの構造を理解できるようになります。最後のレッスン「ショートコード使ってみよう」は、今はそんなに重要ではないので分からなくてもOKです。

自作テーマをコピペで作ってみる

最後に今までの知識を使ってWordPressの自作テーマを作って、WEB制作の基礎学習は完了です。

実は、WordPressの自作テーマはあまり理解していなくてもコピペで作れちゃいます。いきなり完璧に理解するのは大変だと思いますので、まずはコピペで作れるようになって慣れてから理解していくのが良いと思います。

下記の記事を参考にすれば、コピペで自分のポートフォリオをWordPress化できると思いますので挑戦してみましょう。そのままブログテーマとして使うことも可能です。