収益の目安：月５万〜１０万円
作業時間　：１日１０分
難易度　　：★★★★★
即金性　　：★★★☆☆
継続性　　：★★★★☆
読了時間　：8分

月額０円！副業サロンへようこそ！

今回は、

「Web制作、HP制作」

についてお話しします。

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

具体的な業務内容は、
プロジェクトや求人に
よって異なりすでに決定された
デザインを元に、

コーディングのみを行うケース、
企画やマーケティングなどから
携わるケースもあります。

Web制作の流れとは？

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

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

1.コンサルティングフェーズ：
ヒアリング、要件定義、リサーチ、プランニングなど

2.実装（制作）フェーズ：
サイト設計、デザイン、開発、テストなど

3.運用フェーズ：
コンテンツの更新、システム保守など

4.評価フェーズ：
アンケート分析、アクセス解析など

Web制作で必要なスキル

Webサイト制作は、

企画や統括はディレクター、
デザインはWebデザイナー、
開発はエンジニアなど、

それぞれの分野に特化した人
が集まって共同で
プロジェクトを進めて行きます。

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

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

・HTML
・CSS
・JavaScript
・jquery

個人で趣味として
Web制作を行いたい場合も、

これらのスキルを身につけることで
ブログやWebサイトを
作れるようになります。

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

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

その手軽さもWeb制作を
学ぼうとする人が多い
背景にありますが、

安易に始めてしまうのは
挫折の元になります。

スムーズに学習が
始められるように、
まずは準備をしましょう。

必要なもの

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

・パソコン
（Windows,Macどちらでも）

・エディタ

・タイピングスキル
（ある程度あればOK）

・プログラミングに関する基礎知識
（そもそもプログラミングとは？を理解する）

・インターネットがあり、
学習に集中できる環境

・わからないことはすぐに調べる姿勢

プログラムを書くためには、
専用のテキストエディタが
必要になります。

主なエディタはこちら。
いくつか試してみて、
使いやすいものを選ぶと良いでしょう。

・Atom
・Sublime Text
・Bracket
・VS Code（Visual Studio Code）

目標の設定

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

「できなかったらやめればいい」
と気軽に始めるのも良いですが、

せっかく時間を
割いてやるのだから、
一通りの学習は終えたいものです。

三日坊主や挫折を避けるためにも、
次のようなポイントで目標設定をしましょう。

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

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

準備が整ったら、
早速学習を始めましょう！

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

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制作のスキルがあっても、
すぐに仕事が受注できるとは
限りませんよね。

ここからは副業、フリーランスとして
稼ぐために行うべきことを解説します。

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

ポートフォリオとは、
デザイナーやエンジニアに
とっての履歴書のようなものです。

ポートフォリオを通して、
自分のスキルや実績を
発注者にアピールします。

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

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

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

知人や知り合いを
通じて仕事を受注する
方法もありますが、

そういったコネがない場合には
クラウドソーシングサイトの
活用がおすすめです。

有名なサービスには、
クラウドワークスとランサーズが
あります。

これらは案件数も多いので、
あなたのスキルを求めている
発注者にも出会えるはず。

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

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

IT系の職種・業務に特化した
求人サイトを通じて、
仕事を受注する方法も。

主なサービスには
次のようなものがあります。

・レバテックフリーランス：
登録者数18万人を超える有名サービス。
業界最大級の求人数を誇る。

・アットエンジニア：
登録すると一人ずつ専任の営業担当がつく。
受注サポートの他、勉強会・交流会なども開催。

・フォスターフリーランス：
職種や言語など細かい条件で
求人を探せる。業界20年以上のノウハウも魅力。

・Workship：お祝い金、
賠償責任保険付帯などの
資金面のサポートが特徴。

・midworks：首都圏、
大阪エリア特化の
フリーランスエージェント。

・ポテパンフリーランス：
キャリアカウンセラーなどに
よるサポートが充実。

スクールに通う

独学である程度のスキルが
身につけられるとは言え、

web制作だけで生活を
していくためにはより
高度なスキルと経験が求められます。

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

例えば、HTMLやJavaScriptなどの
基本的なスキルに加えて、

Webデザイン、PHP、Pythonなどの
プラスアルファの
スキルを身につけることで、

企業の大型案件、
長期案件の受注も可能になってきます。

スクールでは専門の
カウンセラーによる独立サポートや
転職サポートも受けられるため、

初心者でIT業界への転職を
目指す人にとって強力な味方になるはずです。

っと詳しくWEB制作について
知りたい、聞きたい人は、
しゅん公式LINEまで

「WEB制作、詳細希望」

と一言送って下さい。
クリックしたらLINEに飛びます↓

公式ラインアカウントリンク

送って頂いた人には、
個別にコチラからご連絡
させて頂き、

詳しいWEB制作について
個別レクチャーします。