この記事は、未経験からWEB制作(コーディング)で、月5万円以上を稼ぐため手順について書いてます。
がっつり稼ぐというよりは、副業やフリーランスになるための準備レベルまでの内容だと思ってください。
ポイントは以下の通りです。
- 私の体験を元にしている
- スクールや高額なサロンに入らなくでも大丈夫
- 他ではあまり解説されていない内容あり
フリーランスを目指している人も、副業で稼ぎを増やしたいという人も、実際に稼げるようになるまでの道筋がわからないと不安かと思います。
ネット上にはたくさんの人が情報を発信してくれていますが、人それぞれ、やり方が合う合わないがあると思うので、僕も書いてみることにしました。
参考になると嬉しいです。
Contents
未経験からWEB制作で月5万円以上稼ぐための手順
それではさっそくWEB制作で月5万円以上稼ぐため手順を見ていきましょう。
- コーディングに必要な準備をす
- 初心者向けの学習サービスを利用する
- 模写やカンプからコーディングする
- 案件を獲得する
という感じです。
まったくの未経験から、実際にコーディングがでいるようになって、案件を獲得できるようになるまでを書いてます。
コーディングに必要な準備をする
まずはコーディングに必要なツールを準備しましょう。
- パソコン
- ブラウザ（GoogleChrome）
- テキストエディター（Visual Studio Code）
必要なツーツは上の３つです。
パソコン
現在、使用しているPCがあれば、新しいPCを買う必要はありません。
大規模なプログラミングや動画編集をするとかであれば、ある程度スペックを意識しなければいけませんが、初心者向けの学習サイトでコーディングの勉強をする程度であれば問題なく動作すると思います。
新しくPCを買う場合は、「動画編集もやりたい」とか、目的が明確になってきてから、電気屋さんで”やりたいこと”を伝えてそれに見合うスペックのPCを組んでもらうのがよいです。
ちなみにWEB制作者にはMacを使っている人が多いですが、僕はWindowsで全然困ってません。
ブラウザ（Google Chrome）
WindowsならInternet ExplorerとMicrosoft Edgeというブラウザが、MacならSafariというブラウザが最初から入ってますが、 Google Chrome をインストールしましょう。
理由は、Google Chromeのシェア率が70%以上と、他のブラウザよりもダントツで多いからです。
また、ブラウザも、サイトの情報を調べる”検証ツール”がありますが、Google Chromeが圧倒的に使いやすいです。
Google Chromeのインストールはこちらからどうぞ。
テキストエディター（Visual Studio Code）
テキストエディターとは、テキストファイルを作成するためのソフトウェアです。
windowsの「メモ帳」とかもテキストエディターですが、ここではVisual Studio Codeを紹介します。
Visual Studio Codeは通称VSCodeいって、WEB制作者に人気のエディターです。
初心者向けの学習サイトや動画教材でもVSCodeを使っているので、最初に入れるならVSCodeで問題ないと思います。
Visual Studio Codeについては、以下の記事で詳しく解説しています。（インストール方法もあり）
→Visual Studio Codeの基本的な使い方【初心者向け】
初心者向けの学習サービスを利用する
コーディングをする準備ができたら、次は学習です。
ここではまったくの未経験から始める人におすすめの学習サービスを紹介します。
- ドットインストール
- Progate（プロゲート）
- Udemy
ドットインストール
まったくの未経験であれば、まずドットインストールがおすすめです。
最初は理解できなくても、動画に合わせて手を動かすことで理解を深めていけるからです。
「はじめてのHTML」や「はじめてのCSS」など初心者向けのところが無料で利用できるので、試してみてください。
Progate（プロゲート）
プロゲートも一部無料で利用できます。
スライドがわかりやすいのですが、コーディングの練習が虫食いみたいな感じで、全体像が把握しにくかった印象です。
僕は「ドットインストールで手を動かす→プロゲートのスライドで理解を深める」みたいな使い方をしました。
Udemy
体系的に一気に学びたいというのであればUdemyで教材を購入するのが効率的です。
といっても、Udemy内で教材を探すと、似たような内容が多いので悩むことでしょう。
そこで、絶対に外さない１本を紹介します。
→[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門
作成者は、たにぐちまことさんという方で、解説がとてもわかりやすいです。
上記のリンクからいくつか動画を視聴できるので、興味のある方は一度見てみてください。
模写やカンプからコーディングする
知識がついて簡単なコーディングができるようになっても、仕事を受けるとなると不安ですよね。
そこで、実在するWEBサイトを模写したり、デザインカンプからコーディングしてみてください。
模写
初心者向けには、iSara[イサラ]さんのLPがおすすめです。
※現在サイトが表示が表示されていないようなので、一度リンクを消去しました。
これ、僕もやったんですが、各セクションごとに要素が違うのでかなり勉強になりました。
しかも、模写したものをポートフォリオに掲載することができます。
※掲載するには、以下３点を守ってください。
・画像キャプチャとして掲載すること
・画像キャプチャのタイトルは「isara.life模写制作LP」として読み手、クライアントに模写制作とわかるように併記すること
・isara.lifeが元ページとわかるように記載＆リンクを添付すること(no followタグ禁止)
と、注意点はありますが、実績がない人からするととてもありがたいですね。
あとは、正直、模写は飽きるので、自分が模写したいと思ったサイトでよいと思います。
カンプからコーディング
案件を受けると、アドビのXD・Photoshop・Illustratorといったソフトで作成されたカンプファイルからコーディングすることになります。
しかし、カンプファイルは、クライアントからもらうものなのでネット上にいくつも出回っていません。
そこでおすすめなのが、以下の2冊です。
どちらもカンプファイルからWEBサイトを作成する手順が詳しく書かれているので、進め方がわからない人は読んでおくことをお勧めします。
上記の本はKindle Unlimitedで読み放題なので、30日間の無料体験期間を利用してサクッと読んでしまうのがよいです。
また、余裕があれば、アドビソフトの使い方にも慣れておくとよいでしょう。
Adebe XDは無料で使えるのですが、PhotoshopとIllustratorは有料です。
公式で購入する場合、それぞれ月額2,480円、その他の様々なソフトも利用できるコンプリートプランは5,680 円/月（税別）と高額なので、模写レベルになってから検討するでよいと思います。
ちなみにAdobeのコンプリートプランを格安で購入する方法を以下で紹介しています。
→【最安値】Adobe Creative Cloudを安く買う方法
案件を獲得する
案件を受けられるだけの力がついたら、実際に案件獲得に向けて動きましょう。
大きくは以下の２つです。
- クラウドソーシングを利用する
- 紹介してもらえる関係性をつくる
クラウドソーシングを利用する
よく利用されているサービスがこちらです。
自分でプロフィールを書いて依頼を待つこともできますが、実績がないうちは、こちらから募集されている案件にアプローチしていかなければなりません。
それぞれ上がっている案件は違うので、各サービスに登録してプロフィールを書いておくとよいでしょう。
各サイトへは上記のサービス名からリンクしています。
紹介してもらえる関係性をつくる
上記のクラウドソーシングサービスは、単価が安かったり、相手の顔がわからない状況で作業を進める場合があったりと、デメリットもあります。
なので、connpassなどでイベントを調べて参加して人脈を増やしておくとよいでしょう。（現在はオンラインが多いですが…）
案件獲得については、以下の記事で詳しく解説しているので、よかったら参考にしてください。
メインのお話はここまでです。
この後に、WEB制作に役立つ情報をのせておくので、興味のある方はぜひ見ていってください。
WEB制作に役立つ情報集
それではWEB制作に役立つ情報をいくつか紹介します。
- PCのスペックに注意する
- 外部モニターは31.5インチがおすすめ
- 念には念を無料で入れる保険に入ろう
PCのスペックに注意する
PCを新しく購入する場合は、PCのスペックに注意しましょう。
WEB制作をやる場合はブラウザやエディターなど色々ひらくのでメモリが少ないと動作が重くなります。
特に、中盤で紹介したアドビのソフトは立ち上げるとめちゃくちゃ容量を食うので注意してください。
以下からアドビのソフトを使用するのに適したスペックを調べられます。
よくわからないという人は電気屋さんに行って相談しましょう。
外部モニターは31.5インチがおすすめ
ノートPCの画面だけではブラウザ、エディターなど開いていくと重なってしまい作業がしにくくなります。
なので、外部モニターは必須ではないかと思うのですが、僕は31.5インチをお勧めします。
小さいと外部モニターを付けても物足りないし、大きすぎても端っこまで使いきれない。そのちょうどいい間が31.5インチかなと。
良かったら下記の記事で31.5インチを使った感想とその画像を載せているので参考にしてください。
→コーディング用にBrilliance328P(31.5インチ)を買った感想
念には念を無料で入れる保険に入ろう
案件を獲得したら契約を交わすことになりますが、契約違反をしたり、クライアントに不利益が生じた場合に責任を負わなければならないことがあります。
たとえば、情報漏洩や納品物の瑕疵など気をつけていても防げないこともあるかもしれません。
そこで、無料で加入できるFREENANCE(フリーナンス)
などのフリーランス向けの保険に入っておくことをお勧めします。
フリーランス保険については以下の記事で詳しく解説しています。
→【FREENANCE】無料で利用できるフリーランスの損害賠償保険サービス
以上です。
これからWEB制作を始めてみようと考えている方の参考になるとよいです。
