ユイ
みなさん、こんにちは。WEBデザイナーのユイ(@mndgn_y)です。
今回は、未経験からWEB制作で月5万稼ぐ学習ロードマップをまとめました。
この記事は以下のような人におすすめ!
- WEB制作で稼ぎたい
- デザインを仕事にしたい
- プログラミングを仕事にしたい
- 今の学習方法で本当に稼げるのか不安
- 副業を始めたい
- 育児しながら在宅で働きたい
- 月5万稼ぎたい
この記事を読めば、WEB制作のイメージが掴めると思います♪
そしてWEB制作を仕事にしたい、会社員・育児・学業をしながら副収入を得たい方のお役に立てたら嬉しいです!
それではどうぞ〜♪
目次
準備編

まず、学習を始めるための準備をします。既に準備が済んでる方は飛ばしてOK
WEB制作を始めるために必要なもの
- パソコン(CPU:Intel core i5〜 メモリ:16GB〜)
- Adobe Photoshop(デザインソフト)
- Visual Studio Code(エディタ)
WEB制作の流れは、デザインソフトでデザインカンプ (サイトの完成図)作成→コードを書いてブラウザに反映させるです。
ではパソコンからご紹介します♪
WEB制作に必要なパソコンのスペック
- CPUは Intel core i5 以上
- メモリは16GB以上
- ストレージはSSD
- ストレージの容量は256GB以上
最上位スペックである必要はないですが、ある程度のスペックは必要です。(動作が遅いとストレスなります…)
ちなみに私は諸事情で2台持ちです。
- iMac 21.5インチ / 後付けで16GB、SSDに
- MacBook Pro / 8GB
メイン機がiMac、外出時や子供の横で作業するときはMacBookです。データはiCloudで共有します。
MacBookが2015年のものなので、そろそろ買い替え時です。
Photoshopを契約(月額1,000円〜)
次に、デザインソフトの王道Photoshopを契約しましょう!
Adobe公式サイト
Photoshopでできること
- バナー・アイキャッチ作成
- デザインカンプ 制作
- ワイヤーフレーム制作
- 写真加工
基本的にPhotoshop1つでWEBデザインは完結します。
Photoshopを採用している制作会社も多いので契約必須です。
フォトプランが月額1,078円なのでおすすめ!(ストレージ容量少なめなのが難点)
セール時ならコンプリートプランがいいです。全てのソフトが3,000円くらいで使い放題です。

ちなみに契約済でも安くなる方法があります。
Photoshopがインストールできたら、デザインの準備はOKです。
Visual Studio Codeをインストール
次に、プログラミングをするための準備をします。
プログラミングはエディタに書いていきます。
Visual Studio Code(通称VSコード)がプラグインが豊富で使いやすくおすすめです。
設定はドットインストールのHTML/CSSの学習環境を整えようを参考にどうぞ!
学習編

WEB制作の準備ができたら、次に学習編です。
順番に解説していきます。
デザイン学習
まずはデザイン学習の解説から!
WEBデザインを習得するために必要な学習はこちら。
- デザイン四原則
- Photoshop基本操作習得
- 好きなバナーやデザインカンプ を真似して練習
デザイン四原則
デザインはセンスではなく、知識と経験で上達します。
知識の基本となるのがデザイン四原則です。
- 「近接」:関連する要素を近づけてグループにする
- 「整列」:要素にルールを持たせてレイアウトする
- 「反復」:要素ごとにデザインルールを繰り返す
- 「対比」:要素の優先度を明快にデザインで示す
詳しくはFare.さんの記事が参考になります♪
書籍で学びたい方はこちらがおすすめ!
なるほどデザインはベストセラー作品で私の周りのデザイナーはみんな持ってます。イラスト多めの内容なので文章が苦手な方にもおすすめです!
3色だけでセンスのいい色は、読むだけでも楽しいデザインの本です!デザインに迷った時に読むとヒントがもらえます♪
Photoshop基本操作の習得
Photoshopで覚えるべき操作は、移動ツール、レイヤー、マスク、選択、長方形ツール、ブラシツール、ペンツールです。
全てのツールはマスターする必要ありません!あれもこれも手を出して遠回りしないようにしましょう。
↓のYouTubeで基本操作がわかります。
わからない操作は都度検索するのが大切!私も慣れてない操作は常に検索してます。
プログラミング学習
さて、次はプログラミング学習について解説します。
WEB制作に必要な言語はこちら!
- HTML、CSS(デザインの見た目を作る)
- JavaScript、jQuery(アニメーションを付ける)
WEB制作で一番重要なのがHTML、CSS
これがないとデザインが再現できません。
JavaScript、jQueryについては基本的な概念を理解してればOK
おすすめオンライン教材
Progate
プログラミング学習の定番!プロゲート
プログラミングがゲーム感覚で学べます。スマホアプリもあるのでながら学習ができます♪
無料〜1,000円で利用できるので、手軽に始めれるのがいいですね。
おすすめのレッスンは、
- HTML & CSS 初級編 2周
- HTML & CSS 中級編 2周
これだけ!
あくまで基礎学習のために利用しましょう。複数の言語を何周もする必要ないです。
ドットインストール(動画学習)
プロゲートでプログラミングに慣れたら、お次はドットインストール
実践的な内容が動画で学べます。こちらも無料〜1,000円で利用できます。
おすすめのレッスンは
- はじめてのHTML (全14回)
- はじめてのCSS (全15回)
- はじめてのJavaScript (全11回)
jQueryのレッスンはサポート終了してるので、↓こちらのサイトをおすすめしておきます。
jQuery入門~導入から基本の使い方まで~
Udemy
動画学習のプラットフォーム。プログラミング、デザイン、自己啓発などなんでもあります。
セール時は90%OFFになるので、時期を待って購入するのもあり!
おすすめ教材
実践WEBサイトコーディング講座

サンプルサイト作成
コーディングを覚えたら、次は実際にサイトを作成してみましょう。
- デザインカンプ 作成
- コーディング
とりあえずモチベ保つために好きなジャンルで作成しましょう!
参考サイトを1〜3個選んで、デザインカンプを作成。
次にコーディング。ここが一番大変です。真っ白なエディタに手が止まります。
ただし、ここで基礎学習に戻るのは×
ググってググって書いてみましょう。ぐちゃぐちゃでもいいです。
私が最初の模写でつまずいたのは、謎の余白。
これはブラウザのデフォルトCSSが当たってしまうためです。
CSSの一番上にリセットCSSを貼り付けましょう。これだけでコーディングしやすくなります。
とりあえずなんでもいいのでコピペしときましょうw
サイトが完成したら、サーバーにアップしましょう!
安さ・使いやすさ重視ならロリポップのハイスピード
速さ・安定性重視ならエックスサーバーのエックスサーバーX10がおすすめ!
ドメインはお名前ドットコムにお世話になってます♪
応用編

SNS発信をする
学習と並行して、SNSを育てましょう!
理由はこちら↓
- 学習仲間ができる
- 先輩デザイナー・プログラマーと繋がれる
- ポートフォリオになる
- 仕事の依頼が来るようになる
- チームを作れる
デザインとプログラミングで向いてるSNSは変わります。
デザインならInstagram
みなさん大好きInstagram。
投稿のサムネ作りがデザインの練習になりおすすめです!
活用方法はこちら↓
- デザインのポートフォリオに
- トンマナを決める
- “人に見せる”意識で作成する
- 目指したい発信者を決める→真似する
- 完璧を求めない
- 投稿しつつ改善していく
プログラミングならTwitter
駆け出しからベテラン、フリーランスから経営者まで、業界の方が大勢利用しています。使わない手はないですね!
同業者から依頼があったり、パートナー契約を結んだり夢があります。
活用方法はこちら↓
- コードのポートフォリオに
- 最新情報をゲット
- 学習内容を発信
- 人柄がわかる内容を混ぜる
- わからない箇所を聞く→先輩が教えてくれる
- 目指したい発信者を決める→真似する
- もくもく会に参加
- オンラインサロンに参加
全てに共通して言えることは真似することです。どんどんフォローして繋がりましょう!
案件を獲る
ここまで来たら、次は案件を獲って月収5万を目指しましょう!
WEB制作の受注方法
- クラウドソーシングを利用する
- 制作会社にポートフォリオを送る
- 企業に営業をかける
- SNSで集客する
- 広告を打って集客する
ちなみに私は、クラウドソーシングはココナラとクラウドワークスを利用してます。この2サイトで30万は稼げました♪
実績を0→1にする方法はこちらの記事を参考にどうぞ!

まとめ
この記事では未経験からWEB制作で月5万稼ぐ学習ロードマップについて解説しました。
情報やツールがあふれる中での学習は大変だと思います。そんな方達のお役に立てたら嬉しいです!
TwitterやインスタでもWEB制作に関する情報を発信してるので、そちらもチェックしてみてください♪
プロフィールアイコン
@Peach_Pikarin
イラスト素材
shigureni free illust
freepik.com

