【未経験OK】WEB制作で月5万稼ぐための学習ロードマップ

ユイ

みなさん、こんにちは。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コード)がプラグインが豊富で使いやすくおすすめです。

Visual Studio Code(無料)

設定はドットインストールの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個選んで、デザインカンプを作成。

おすすめデザイン参考サイト
SANKOU
MUUUUU

おすすめ素材サイト
写真AC
ぱくたそ

次にコーディング。ここが一番大変です。真っ白なエディタに手が止まります。
ただし、ここで基礎学習に戻るのは×

ググってググって書いてみましょう。ぐちゃぐちゃでもいいです。

私が最初の模写でつまずいたのは、謎の余白。
これはブラウザのデフォルトCSSが当たってしまうためです。
CSSの一番上にリセットCSSを貼り付けましょう。これだけでコーディングしやすくなります。

2021年、モダンブラウザに適したCSSリセットのまとめ

とりあえずなんでもいいのでコピペしときましょうw

サイトが完成したら、サーバーにアップしましょう!

安さ・使いやすさ重視ならロリポップのハイスピード
速さ・安定性重視ならエックスサーバーのエックスサーバーX10がおすすめ!

ドメインはお名前ドットコムにお世話になってます♪

応用編

SNS発信をする

学習と並行して、SNSを育てましょう!
理由はこちら↓

  • 学習仲間ができる
  • 先輩デザイナー・プログラマーと繋がれる
  • ポートフォリオになる
  • 仕事の依頼が来るようになる
  • チームを作れる

デザインとプログラミングで向いてるSNSは変わります。

デザインならInstagram

みなさん大好きInstagram。
投稿のサムネ作りがデザインの練習になりおすすめです!

活用方法はこちら↓

  • デザインのポートフォリオに
  • トンマナを決める
  • “人に見せる”意識で作成する
  • 目指したい発信者を決める→真似する
  • 完璧を求めない
  • 投稿しつつ改善していく

プログラミングならTwitter

駆け出しからベテラン、フリーランスから経営者まで、業界の方が大勢利用しています。使わない手はないですね!
同業者から依頼があったり、パートナー契約を結んだり夢があります。

活用方法はこちら↓

  • コードのポートフォリオに
  • 最新情報をゲット
  • 学習内容を発信
  • 人柄がわかる内容を混ぜる
  • わからない箇所を聞く→先輩が教えてくれる
  • 目指したい発信者を決める→真似する
  • もくもく会に参加
  • オンラインサロンに参加

全てに共通して言えることは真似することです。どんどんフォローして繋がりましょう!

案件を獲る

ここまで来たら、次は案件を獲って月収5万を目指しましょう!

WEB制作の受注方法

  • クラウドソーシングを利用する
  • 制作会社にポートフォリオを送る
  • 企業に営業をかける
  • SNSで集客する
  • 広告を打って集客する

ちなみに私は、クラウドソーシングはココナラクラウドワークスを利用してます。この2サイトで30万は稼げました♪

実績を0→1にする方法はこちらの記事を参考にどうぞ!

【初心者向け】WEB制作で案件獲得するコツ5つ

まとめ

この記事では未経験からWEB制作で月5万稼ぐ学習ロードマップについて解説しました。
情報やツールがあふれる中での学習は大変だと思います。そんな方達のお役に立てたら嬉しいです!

TwitterやインスタでもWEB制作に関する情報を発信してるので、そちらもチェックしてみてください♪

プロフィールアイコン
@Peach_Pikarin

イラスト素材
shigureni free illust
freepik.com

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA