副業やフリーランスの仕事に興味がある人に人気のスキルが「Web制作」です。

パソコンとインターネットがあれば仕事ができ、働く場所や時間にとらわれないといった魅力があるので、独学やスクールでWeb制作を学ぶ人が増えています。

この記事では、Web制作を独学で習得し、実際に稼げるようになるまでの具体的な学習手順やロードマップについて紹介します。

※本記事は、現役エンジニアが監修した記事です（2021年9月）

Web制作とは

Web制作とは、企業HP、通販サイト、ブログなどのWebサイトの新規制作やリニューアル、コンテンツ追加などを行う仕事です。

具体的な業務内容はプロジェクトや求人によって異なり、すでに決定されたデザインを元にコーディングのみを行うケース、企画やマーケティングなどから携わるケースもあります。

Web制作の流れ

普段何気なく目にする企業のHPや商品・サービスの通販サイトも、実は入念な準備を経て公開されているもの。

Web制作は、一般的に次の流れで行われます。

1. コンサルティングフェーズ：ヒアリング、要件定義、リサーチ、プランニングなど
2. 実装（制作）フェーズ：サイト設計、デザイン、開発、テストなど
3. 運用フェーズ：コンテンツの更新、システム保守など
4. 評価フェーズ：アンケート分析、アクセス解析など

Web制作で必要なスキル

Webサイト制作は、企画や統括はディレクター、デザインはWebデザイナー、開発はエンジニアなど、それぞれの分野に特化した人が集まって共同でプロジェクトを進めて行きます。

そのため、Web制作のどのフェーズの業務に携わりたいかによって必要なスキルが異なります。

今回は、実装（制作）フェーズの開発に必要な、以下のスキルの習得方法について解説していきましょう。

• HTML
• CSS
• JavaScript
• jQuery

個人で趣味としてWeb制作を行いたい場合も、これらのスキルを身につけることでブログやWebサイトを作れるようになります。

独学でWeb制作を身につけて稼ぐまでにかかる期間

Web制作を独学でマスターするまでにかかる期間は、学習のゴール（目標）として何を設定するかによって変わってきます。

例えば、個人でブログを作りたい、趣味でHPを作りたいといったものであれば、3ヶ月程度の学習で、ある程度やりたいことはできるようになっているでしょう。

また、身につけたスキルを活かして副業やフリーランスで稼ぎたい場合には、コツコツと1年ほど学習を積み重ねると、クラウドソーシングサイトなどでWeb制作の仕事を受注できるレベルになるでしょう。

かかる時間は当然学習のペースにもよるので、集中的に学習して、3ヶ月ほどで簡単な仕事を受注し始める人もいます。

「なるべく早く習得したい」「時間はあるから集中的に学習したい」という場合は、スクールを利用するのも選択肢の1つ。分からないことを都度解消しながら学習を進められるため、挫折してしまうことも防げます。

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

Web制作学習のよいところは、「学びたい！」と思った時に、パソコンやテキストエディタなどを用意するだけですぐに始められること。

その手軽さもWeb制作を学ぼうとする人が多い背景にありますが、安易に始めてしまうのは挫折の元。スムーズに学習が始められるように、まずは準備をしましょう。

必要なもの

まず、次のものを準備しましょう。

• パソコン（Windows,Macどちらでも）
• エディタ
• タイピングスキル（ある程度あればOK）
• プログラミングに関する基礎知識（そもそもプログラミングとは？を理解する）
• インターネットがあり、学習に集中できる環境
• わからないことはすぐに調べる姿勢

プログラムを書くためには、専用のテキストエディタが必要になります。主なエディタはこちら。いくつか試してみて、使いやすいものを選ぶと良いでしょう。

• VS Code（Visual Studio Code）
• Atom
• Sublime Text

目標の設定

Web制作・プログラミングは「やればできる」ものではあるものの、そう簡単に習得できるものではありません。

「できなかったらやめればいい」と気軽に始めるのも良いですが、せっかく時間を割いてやるのだから、一通りの学習は終えたいものです。三日坊主や挫折を避けるためにも、次のようなポイントで目標設定をしましょう。

• なぜWeb制作を学びたいのか
• どれくらいの期間を勉強にあてるのか（1日、1週間に割ける時間から考えよう）
• 将来、Web制作でどのくらいの収入を得たいのか

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

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

1. Webサイトの仕組みを理解する
2. HTML/CSSを勉強する
3. JavaScriptを勉強する
4. jQueryを勉強する
5. アウトプットしてみる
6. WordPressを学習する

具体的な学習手順をステップごとに解説していきます。

Webサイトの仕組みを理解する

ステップ1は、Webサイトの仕組みを理解すること。

ホームページがどのような仕組みで成り立っているのか、インターネットはなぜ繋がるのか、Webサイトが表示される裏でどのような処理が行われているのかを理解しましょう。

もちろん、これらのことは覚える必要はありません。学習を通して「なるほど」と理解することができれば、次のステップに進みましょう。

HTML/CSSを勉強する

ステップ1でWebサイトの仕組みについて学ぶと、同時に様々な専門用語の理解もできます。ステップ2からは、Webサイトを構築している技術について実際に学んでいきましょう。

まず勉強すべきなのが、HTMLとCSS。マークアップ言語と呼ばれるこれらで、Webサイトの見た目が構築されています。

勉強方法

HTML、CSSは参考書などで学ぶこともできますが、オンライン教材を使うのがおすすめ。有名、かつ人気の教材は以下の2つです。

• ドットインストール：短い動画で少しずつ学べるので、自分のペースで学習ができる
• Progate：ゲーム感覚で学習できるので、超初心者でもスムーズに学習を始められる

どちらも無料で始められるので、まずは両方やってみるのがおすすめ。

JavaScriptを勉強する

HTML、CSSについて学んだ後は、JavaScriptです。JavaScriptはWebサイトに動きをつけることができるプログラミング言語。

例えばWebサイトでカーソルを合わせると文字の色が変わったり、メニューがふわっと出てきたりするのは、JavaScriptによるものです。

勉強方法はステップ2と同じで、オンライン教材で学ぶことができます。

jQueryを勉強する

次に勉強しておきたいのが、jQuery。

jQueryとは、JavaScriptでできることを、より簡単に実現するために作られたJavaScriptライブラリです。jQueryを習得することで、より簡単に、スムーズにWebサイトに動きをつけることが可能になります。

こちらも、ステップ2と同じくオンライン教材を活用しましょう。

アウトプットしてみる

一通りの学習が終わったら、実際に手を動かしてアウトプットをしながら知識を自分のものにしていきましょう。

学んでいる間は理解したつもりでも、いざ自分でやろうとすると何から始めたらよいか分からないもの。そこで、まずは無料のテンプレートなどをアレンジしながらWebサイトを作ってみるのがおすすめ。

慣れてきたら「こんなのを作りたい」と思うものを模倣しながら、イメージを形にする練習を行い、最後は全てオリジナルで制作することにチャレンジしましょう。

WordPressを学習する

副業やフリーランスでWeb制作の仕事をしたい場合、WordPressについても学習しておくことをおすすめします。

WordPressとは、オープンソースのブログソフトウェアで、世界のHPの3割がWordPressを使っているとされています。実際、クラウドソーシングサイトにもWordPressを使ったWeb制作の案件が多数あるため、WordPressのスキルを身につけることで、仕事が受注しやすくなるでしょう。

WordPressはドットインストールで学ぶことができます。オリジナルのテーマ作成を目標に学習すると良いでしょう。

副業・フリーランスのWeb制作で稼ぐためには

Web制作のスキルがあっても、すぐに仕事が受注できるとは限りませんよね。

副業・フリーランスとしてWeb制作で稼ぐために行うべきことを解説します。

• ポートフォリオを作成する
• クラウドソーシングサイトを活用
• エンジニア向けの求人サイトを活用
• スクールに通う

ポートフォリオを作成する

ポートフォリオとは、デザイナーやエンジニアにとっての履歴書のようなもの。ポートフォリオを通して、自分のスキルや実績を発注者にアピールします。

以下のポイントに注意しながら、自身の名刺代わりにもなるポートフォリオを作成しましょう。

• トップ画面で印象付けをする
• 信頼してもらうためプロフィールは詳細に書く
• スキル、実績、できることは具体的に書く
• サービスの詳細と料金
• その他（得意分野、仕事への思いなど）
• 問い合わせ窓口

クラウドソーシングサイトを活用

知人や知り合いを通じて仕事を受注する方法もありますが、そういったコネがない場合にはクラウドソーシングサイトの活用がおすすめです。

有名なサービスには、クラウドワークスとランサーズがあります。これらは案件数も多いので、あなたのスキルを求めている発注者にも出会えるはず。ただし、利用者が多い分競争率も高いので、新規参入者は小さな案件から始めて実績を積み上げていくことになるでしょう。

エンジニア向けの求人サイトを活用

IT系の職種・業務に特化した求人サイトを通じて、仕事を受注する方法も。主なサービスには次のようなものがあります。

• レバテックフリーランス：登録者数18万人を超える有名サービス。業界最大級の求人数を誇る。
• アットエンジニア：登録すると一人ずつ専任の営業担当がつく。受注サポートの他、勉強会・交流会なども開催。
• フォスターフリーランス：職種や言語など細かい条件で求人を探せる。業界20年以上のノウハウも魅力。
• Workship：お祝い金、賠償責任保険付帯などの資金面のサポートが特徴。
• Midworks：首都圏・大阪エリア特化のフリーランスエージェント。
• ポテパンフリーランス：キャリアカウンセラーなどによるサポートが充実。

スクールに通う

独学である程度のスキルが身につけられるとは言え、Web制作だけで生活をしていくためにはより高度なスキルと経験が求められます。

本格的なキャリアチェンジを考えている人は、スクールに通ってより実践的なスキルを身につける必要があるでしょう。

例えば、HTML/CSSやJavaScriptなどの基本的なスキルに加えて、Webデザイン、PHP、Pythonなどのプラスアルファのスキルを身につけることで、企業の大型案件、長期案件の受注も可能になってきます。

スクールの中には専門のカウンセラーによる独立サポートや転職サポートが受けられるところもあるため、初心者でIT業界への転職を目指す人にとって強力な味方になるはずです。

Web制作学習におすすめの本

オンライン教材と合わせて参考書も用意しておくと、分からないことや足りない知識を本で補いながら学習を進められます。

Web制作学習におすすめの本と3冊紹介しましょう。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

Web業界の人に大人気！全国の書店員さんがおすすめする本「CPU大賞」で第1位を獲得した本書。ブログ「Webクリエイターボックス」の管理人が、HTMLとCSSの基本を優しく、わかりやすく解説しています。基本的なWebサイトの仕組みから実際のコーディング過程まで、1冊で学ぶことができます。

６ステップでマスターする「最新標準」HTML＋CSSデザイン

マルチデバイスに対応したWebサイトの作成方法がステップごとに詳しく解説されています。サンプルサイトの制作工程を6ステップに分け、基本（下準備）からアレンジまでを効率的に学べます。初心者向けのHTML、CSSの解説はあまりないため、基礎知識を身に着けてから読むと良いでしょう。

デザイン入門教室[特別講義]確かな力を身に付けられる ~学び、考え、作る授業~

デザインも含めたWeb制作スキルを習得したい人におすすめの1冊。レイアウトや配色などのデザインの基本ルールを学ぶことで、センスや経験が一切関係のない「デザインスキル」を身につけることができます。企画書、プレゼン資料、ポートフォリオ制作にも役立つはず。

独学でWeb制作を習得して稼ぐためのロードマップ まとめ

Web制作は、パソコンやテキストエディタなどの設備を揃えるだけで誰でも簡単に学習が始められるスキルです。

一方で、Web制作で稼ぐためにはWebデザインやプログラミングなどのスキルも求められます。

「最速、効率的にスキルを身に着けて転職したい」という場合には、スクールの利用を検討するのがよいでしょう。

↑目次へ戻る