【工場勤務におすすめの副業】Web制作の始め方と学習方法を解説します【基礎編】

今回はこのように考えている人向けの内容になります。

こんにちは、工場勤務をしながら副業でWeb制作やブログ運営をしているなおや（@naoyatakagi85）です。僕は副業を始める際、Web制作を選択しました。

本記事では、Web制作で実際に稼いだ経験を基に、Web制作をこれから始めたい方にWeb制作の始め方や学習手順をお伝えしていきます。

Web制作を副業にするメリット

Web制作を副業にするメリットはこちらです。

在宅ワークが可能

Web制作は在宅ワークが可能な副業です。本業をしながら学習を進め、さらには仕事を受注してからも在宅で作業ができる点がメリットになります。

初心者でもスキルを身につけることが比較的簡単

比較的早い段階で稼ぐ挑戦ができる点がメリットになります。

Web制作とはホームページを作ることです。必要最低限のスキルで言えば、HTML/CSSと基本的なjQuery(JavaScript)を習得すれば形をしてのホームページは完成させることができます（習得期間の目安は1日２〜3時間の学習で３ヶ月前後）。

Web開発のためのプログラミング言語（RubyやPHP）に比べたら、学習コストは低くなります。

１件当たりの単価は比較的高い

サイト制作の一件ごとの単価は、比較的高く設定されている傾向にあります。

クラウドソーシング系のサイトでの単価を見ると、安いものでは1万程度のものから10万〜30万というものまでさまざまです。

スキルの横展開がしやすい

Web制作はスキルの横展開がしやすいというメリットがあります。

まず、Web制作の基本的な取り組みに、以下の２つがあります。

• コーディング案件を受注するためにHTML/CSSと基本的なjQuery(JavaScript)学習する
• ホームページ制作案件を受注するためにWordPressまで学習する

その他にも、

• デザインカンプ（デザインやレイアウトを含めた仕上がりを具体的に示すために作られる完成見本）からのコーディングをするためにデザインソフト（Adobe XDなど）の使い方を学習する
• WordPressを学習したらブログを立ち上げることができる
• 受注したホームページのデザインも自分で制作できるように学習してみる
• ホームページ制作を依頼されたクライアントの事業のWeb集客のお手伝いまで巻き取る（Webマーケティング）

このようにWeb制作の学習に取り組んでいたらさまざまな展開が可能になるケースが出てきます。

Web制作を副業にするデメリット

Web制作を副業にするデメリットはこちらです。

まとまった学習時間が必要（300~1000時間）

Web制作は初心者でも比較的早くスキルを習得することができます。ただし、それでも学習期間は最短で３ヶ月〜半年を要します。

本業の合間に学習を継続するのは副業駆け出しの人にとっては最初の試練になるので、効率的な学習を行なってください。

案件が取りにくい

サイト制作の案件を初心者が受注する難易度がやや高い点がデメリットとして挙げられます。模写やスクールの課題をポートフォリオとして提示しても簡単に受注には至らないでしょう。

そこで、いろいろ試行錯誤をする必要があります。

仕事を安定的に取れるまでには少々時間がかかることは頭に入れておいてください。

案件１つに対して時間がかかる

サイト制作の仕事は案件の単価が高い傾向がある反面で、１つの案件に消費する時間が多いという点がデメリットになります。時間のやりくりに失敗すると、本業や家事育児などとあわせてこなしていくのに大変さを感じることも少なくありません。

副業としてサイト制作の仕事を受注する際には、自分が副業に避ける時間を考慮したうえで、受注する案件の規模を考えていく必要があります。

Web制作を始めるために必要なもの

Web制作を始めるために必要なものは以下になります。

パソコン

Web制作に必要なパソコンの性能について説明します。ちなみにMacでもWindowsでもどちらでもかまいません。

最初は手持ちのパソコンでも学習を進めることはできます。

ただし、案件をこなしていく中でデザインソフトを使用したり、たくさんの画像を使用したりすることもあります。Web制作の場合はそこまで高スペックなパソコンは必要ありませんが、低価格モデルだとのちのち作業に支障が出る可能性があるのでおすすめはできません。

エディタ

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

ネット環境

当たり前ですが、ネット環境が必要になります。

教材

そして、最後にWeb制作を学習するための教材が必要になります。まずはYouTubeや安価なオンラインサービス、書籍などで学習を始めることができ流のがWeb制作のいいところです。

必要な教材の詳細は次のWeb制作独学ロードマップで解説します

Web制作独学ロードマップ

独学でWeb制作スキルを身につけるロードマップを解説します。本記事でお伝えする内容は最低限の仕事をこなすことができるレベルを目指すものです。

HTML/CSSを学習する

基礎学習

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

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

Progateはこちらの【HTML&CSSコース】を受講しましょう。ここではHTMLとCSSの概要を知るための学習になります。

ここで時間をかけてもスキルは定着しないので、気にせず進めるくらいがいいでしょう。

ドットインストールはこちらの【Webサイトを作れるようになろう】のコースを受講しましょう。ここからは実際にテキストエディタを使用した学習になります。

【④Webサイトをゼロから制作してみよう】まで進めることができればサイト模写も可能なレベル感になります。

詳解CSS アニメーション編、詳解CSS 変数編は応用篇ですので、すぐには必要ありません。時間があれば取り組みましょう。

Emmetの使い方を学ぼう

Emmetは、少ないタイピング数でコードを書けるようになる機能です。

ディベロッパーツールの使い方を知ろう

こちらはヤフー出身のエンジニアしまぶーさんのYouTubeです。模写や実際の案件でこのディベロッパーツールは必ず使うので頭に入れておきましょう。

• こちらの記事も有益です

新米Webデザイナーがこれだけは抑えておきたいデベロッパーツールの使い方 | Webクリエイターボックス

おおすすめの書籍

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

基本的なWebサイトの仕組みから実際のコーディング過程まで、1冊で学ぶことができます。上記のオンラインサービスで学習を進めながら、知識の補完として書籍を活用していきましょう。

jQuery（JavaScript）を学習する

jQueryとはJavaScriptでできることをより簡単に実現するために作られたJavaScriptライブラリです。Webサイトに動きをつけるために必要になります。

基礎学習

Progateの

• JavaScriptコース（I〜Ⅲまで）
• jQueryコース

先にJavaScriptコースを学習してからjQueryコースに入ると理解が進みやすくなります。

サイト制作でよく出てくるパーツの実装方法を学習しよう

次に、サイト制作でよく出てくるパーツの実装方法を学習していきましょう。

• ハンバーガーメニュー

ハンバーガーメニューとはサイト内の三本線のナビゲーションメニューで、クリックすると隠れている情報が表示される仕組みのことです。スマートフォンのＵＩデザインとして用いられています。

この実装も必須になってきますので、ぜひ一度トライしてみてください。

• 無料で学ぶならHPcodeさんのサイトが超有益です

• 【JavaScript,jQuery特訓編】web制作でよくあるパーツを実装しよう【解答付き】

こちらはしょーごさんの有料noteです。有料といっても800円と格安です。

おすすめの書籍

• jQuery最高の教科書

文法やコードの解説が特に丁寧に記載されているので、JQueryを学習するための最初の一冊にぴったりです。

実際に手を動かしてコードを書いてみる→どう反映されるのかを確認しながら学習を進めることで、知識を定着させながら読み進めることができます。

デザインカンプからのコーディング

ここでは、デザインカンプからのコーディングを行い、実務でコーディングを行う流れを経験します。

まずはAdobe XDで作られたデザインカンプからのコーディングに取り組む準備として次の記事にを読んでおきましょう。

すべてを行う必要はありませんが最低限レベル感の異なるサイト３つ程度はトライしてみることをおすすめします。

まとめ

本記事ではこれから副業でWeb制作を始める方向けにWeb制作の始め方や学習の進め方を解説しました。上述した内容まで進めることができれば、まずはコーディング案件をもらえるところ（必要最低限をクリア）まで手が届きます。

また、効率的に学習を進めたい方はこちらも一読ください。

ちなみにですが、金銭的に余裕のある方はデイトラのWeb制作コースをおすすめします。デイトラは“未経験でも・迷わず・楽しく”学べるオンラインスクールです。

>>デイトラはこちら