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

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

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

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

Web制作とは

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

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

以下で、Web制作の簡単な概要について解説しましょう。

• Web制作の流れ
• 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）
• エディタ
• タイピングスキル（ある程度あればOK）
• プログラミングに関する基礎知識（そもそもプログラミングとは？を理解する）
• インターネットがあり、学習に集中できる環境
• わからないことはすぐに調べる姿勢

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

• VS Code（Visual Studio Code）
• サクラエディタ
• 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：ゲーム感覚で学習できるので、超初心者でもスムーズに学習を始められる

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

ドットインストールとProgateについては、以下の関連記事で紹介しています。

• ドットインストールとは？評判・Progateとの違いを初心者向けに解説
• Progate（プロゲート）とは？評判・無料と有料の違い・使い方や「意味ない」と言われる理由を解説

JavaScriptを勉強する

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

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

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

jQueryを勉強する

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

jQueryとは、JavaScriptでできることを、より簡単に実現できるライブラリ。より簡単かつスムーズにWebサイトに動きをつけられます。

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

アウトプットしてみる

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

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

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

WordPressを学習する

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

WordPressとは、オープンソースのポピュラーなブログ作成ツール。

クラウドソーシングサイトにもWordPressを使ったWeb制作の案件が多数あるため、WordPressのスキルを身につけることで、仕事が受注しやすくなるでしょう。

WordPressはドットインストール・Udemy・YouTubeなどで学べます。オリジナルのテーマ作成を目標に学習すると良いでしょう。

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

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

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

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

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

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

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

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

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

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

有名なサービスには、クラウドワークスとランサーズがあります。これらは案件数も多いので、あなたのスキルを求めている発注者にも出会えるはず。

ただし、利用者が多い分競争率も高いので、新規参入者は小さな案件から始めて実績を積み上げていくことになるでしょう。

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

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

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

スクールに通う

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

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

例えば、HTML/CSS/JavaScriptなどの基本スキルに加えて、WebデザインやPHP/Pythonなどのスキルをがあると、大型案件や長期案件の受注も可能になってきます。

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

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

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

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

• 1冊ですべて身につくHTML & CSSとWebデザイン入門講座
• 作って学ぶ HTML＆CSSモダンコーディング
• デザイン入門教室

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

全国の書店員がおすすめする「CPU大賞」で第1位を獲得した実績のある本書。

ブログ「Webクリエイターボックス」の管理人が、HTMLとCSSの基本を優しく解説。基本的なWebサイトの仕組みから実際のコーディング過程まで、1冊で学べます。

作って学ぶ HTML＆CSSモダンコーディング

 

モバイルファースト＆レスポンシブなWebサイトの作成方法を、サンプルサイトを実際に作りながら学べるようになっている一冊。

HTML＆CSSコーディングに関する最新技法についても学べるので、初心者はもちろん学び直しがしたい方にもおすすめです。

デザイン入門教室

デザインも含めたWeb制作スキルを習得したい人におすすめの1冊。

レイアウトや配色などのデザインの基本ルールを学ぶことで、センスや経験が一切関係のない「デザインスキル」を身につけることができます。

企画書、プレゼン資料、ポートフォリオ制作にも役立つはずです。

Web制作の独学が厳しいならスクールも検討しよう

Web制作は、パソコンやテキストエディタを準備すれば、初期コストも最低限に誰でも簡単に学習が始められます。

一方で、Web制作で十分に稼ぐレベルに到達するには、実績を含めた一定のWebデザイン・プログラミングのスキルが必須。

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

おすすめのスクールは「【2024年版】人気プログラミングスクール14校を比較！費用や学べる言語を解説」でも紹介しているので、ぜひご参考ください。

↑目次へ戻る