ユイ
みなさん、こんにちは。WEBデザイナーのユイ（@mndgn_y）です。
今回は、未経験からWEB制作で月５万稼ぐ学習ロードマップをまとめました。
この記事は以下のような人におすすめ！
- WEB制作で稼ぎたい
- デザインを仕事にしたい
- プログラミングを仕事にしたい
- 今の学習方法で本当に稼げるのか不安
- 副業を始めたい
- 育児しながら在宅で働きたい
- 月５万稼ぎたい
この記事を読めば、WEB制作のイメージが掴めると思います♪
そしてWEB制作を仕事にしたい、会社員・育児・学業をしながら副収入を得たい方のお役に立てたら嬉しいです！
それではどうぞ〜♪
目次
準備編
まず、学習を始めるための準備をします。既に準備が済んでる方は飛ばしてOK
WEB制作を始めるために必要なもの
- パソコン（CPU：Intel core i5〜 メモリ：16GB〜）
- Adobe Photoshop（デザインソフト）
- Visual Studio Code（エディタ）
WEB制作の流れは、デザインソフトでデザインカンプ （サイトの完成図）作成→コードを書いてブラウザに反映させるです。
ではパソコンからご紹介します♪
WEB制作に必要なパソコンのスペック
- CPUは Intel core i5 以上
- メモリは16GB以上
- ストレージはSSD
- ストレージの容量は256GB以上
最上位スペックである必要はないですが、ある程度のスペックは必要です。（動作が遅いとストレスなります…）
ちなみに私は諸事情で２台持ちです。
- iMac 21.5インチ / 後付けで16GB、SSDに
- MacBook Pro / 8GB
メイン機がiMac、外出時や子供の横で作業するときはMacBookです。データはiCloudで共有します。
MacBookが2015年のものなので、そろそろ買い替え時です。
Photoshopを契約（月額1,000円〜）
次に、デザインソフトの王道Photoshopを契約しましょう！
Adobe公式サイト
Photoshopでできること
- バナー・アイキャッチ作成
- デザインカンプ 制作
- ワイヤーフレーム制作
- 写真加工
基本的にPhotoshop１つで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
駆け出しからベテラン、フリーランスから経営者まで、業界の方が大勢利用しています。使わない手はないですね！
同業者から依頼があったり、パートナー契約を結んだり夢があります。
活用方法はこちら↓
- コードのポートフォリオに
- 最新情報をゲット
- 学習内容を発信
- 人柄がわかる内容を混ぜる
- わからない箇所を聞く→先輩が教えてくれる
- 目指したい発信者を決める→真似する
- もくもく会に参加
- オンラインサロンに参加
全てに共通して言えることは真似することです。どんどんフォローして繋がりましょう！
案件を獲る
ここまで来たら、次は案件を獲って月収５万を目指しましょう！
WEB制作の受注方法
- クラウドソーシングを利用する
- 制作会社にポートフォリオを送る
- 企業に営業をかける
- SNSで集客する
- 広告を打って集客する
ちなみに私は、クラウドソーシングはココナラとクラウドワークスを利用してます。この2サイトで30万は稼げました♪
実績を0→1にする方法はこちらの記事を参考にどうぞ！
【初心者向け】WEB制作で案件獲得するコツ5つ
まとめ
この記事では未経験からWEB制作で月５万稼ぐ学習ロードマップについて解説しました。
情報やツールがあふれる中での学習は大変だと思います。そんな方達のお役に立てたら嬉しいです！
TwitterやインスタでもWEB制作に関する情報を発信してるので、そちらもチェックしてみてください♪
プロフィールアイコン
@Peach_Pikarin
イラスト素材
shigureni free illust
freepik.com
