terutika.com

totop

progateを終えた方へ。WEB制作で稼ぐために今やるべきこと

progateを終えた方へ。WEB制作で稼ぐために今やるべきこと

2020-09-16

WEB制作で稼ぎたいと思い、とりあえずprogateで基礎的な勉強を終えたが次になにをやっていいかわからない!!

  今回はそんな人向けに、とりあえず今すぐやっておくべきことについて解説します。  

僕自身大学、部活、バイトで忙しい日々の中、3か月で初収益をだせたのは、無駄なことはできるだけせず必要な知識を必要な分だけ拾い集めて一心不乱に努力したからです。
その過程を皆さんに共有し、1日でも早く初収益を出してもらいたいと思っています!

 

やってはいけないこと

まずはじめにやってはいけない(あまり意味がない)ことから伝えます。
それはズバリprogate2周目です。 昔やったこと忘れちゃってるだろうし、 確かに繰り返すことで定着する知識もあるでしょう。ですがインプットばかりしていてはいつまでたっても使えるようになりません!
最短で0→1を作り出したいのであれば使わない知識まで必死に拾ってる時間はありません。ここからはアウトプットを大切に、忘れてることはやりながら思い出しましょう。

環境構築

簡単に説明すると 自分のパソコンでプログラミングを書いていく準備です。
progateはコードを書き、表示する一連の流れがアプリ内で完結しますが、実際ご自身のパソコンでプログラミングをするとなるとそうはいきません。 今回はWindowsの方向けの解説になりますのでMacを使っている方は画像と違う箇所があります。

必要なもの 

  • ブラウザ(制作物を表示するもの)
  • エディタ(コードを書くもの)

まずはブラウザ
一般的にWebサイトを閲覧するためのソフトを指します。 代表的なものでいうと

  • Internet Explorer
  • Google Chrome
  • Microsoft Edge

などがあります。 ですが正直に言うとブラウザは何でもいいです! Windows10以降では標準ブラウザがMicrosoft Edgeになっています。

 

注意

最新のcssがブラウザによっては非対応だったりするので、WEB制作を仕事にするうえでユーザーの使用しているブラウザが違ってもレイアウト崩れが起きないようにしっかりブラウザの最新対応状況を確認する癖をつけておきましょう。

 

僕はGoogle Chromeを使っているので今後はGoogle Chromeでの画面になります。
動作も立ち上がりも早く、拡張性(追加機能のようなもの)も豊富なので特にこだわりがないのであればGoogle Chromeを使っておきましょう。

Google Chromeのインストール

こちらのサイトからダウンロードします。

「 Chrome をダウンロード」をクリックし、ダウンロードしたファイルを実行すれば準備完了です。

 

お次はエディター

コードを書いていくソフトのことです。

代表的なものでいうと

  • Visual Studio Code
  • Sublime Text
  • Atom

などがあります。

僕はVisual Studio Codeを強くおすすめします。
何といっても軽い!それだけでなく拡張機能も豊富です!
特に悪いところは見つからないぐらいですので困ったらVisual Studio Codeでいいでしょう。
今後はすべてVisual Studio Codeでの画面になります。

Visual Studio Codeのインストール

こちらのサイトでダウンロードできます。

インストーラーをダウンロードしたら実行します。

使用許諾契約書を確認し、同意して次へ

インストールディレクトリ(フォルダ)の設定とプログラムグループの指定と追加タスクの選択は特に変更しなくてOKです。
(画像は追加タスクの選択のみ添付)

「インストール」をクリックするとインストールが始まる。

この画面が表示されたら完了です。簡単でしょう?

Visual Studio Codeに入れとくべきおすすめプラグインはまた別記事で紹介するのでお楽しみに!

 

これでご自身のパソコンでコードを書く準備は整いました!

サイト模写

コードを書く準備はできたけどいったい何を書けば、、?

次のステップはサイトの模写をやりましょう。
既存のサイトを参考にして全く同じものを作ってみる作業です。
今までの総復習って感じですね。

正直に言いますが

ここが一番の挫折ポイントです。。

これでいきなり難しいサイトを模写し始めて志半ばで諦めていった同士を何人も見ています。

大切なのはあなたのレベルにあったサイト選びです。

初心者におすすめなサイトは

の二つです。

どうしても難しいようでしたら模写用の教材を買うのもいいかもしれません。

模写の後は?

模写コーディングでコーディングの復習とサイト制作の概要を学ぶことができたら次のステップは自分でデザインからコーディングまで、サイトを1から作ってみましょう。

最終的には「ポートフォリオサイトを作成すること」を当分の目標にしましょう。
ポートフォリオサイトとは自己紹介サイトのようなもので実績や自己紹介などを掲載します。
フリーランスとして働くためには必須といっても過言ではありません。後のクラウドソーシングサービスで営業をかけていく際にポートフォリオサイトがあるかないかで返信率が大きく変わります。

ポートフォリオサイトが作成できたらあとは仕事をもらうだけです。

知人の紹介などで案件をもらっている人もいますが僕にはそんな知人居なかったのでクラウドソーシングサービスでバリバリ営業しました。

実はここも大きな挫折ポイントですが、、、
まあ当分は気にすることはないでしょう!先の心配ばかりせずとりあえず手を動かすことをおすすめします。


おすすめのクラウドソーシングサービスはランサーズクラウドワークスココナラあたりです。とりあえず入れておきましょう!

最後に

WEB制作で稼ぎたいと思っていてもProgateなどの基礎学習で挫折してします人もたくさんいます。その中で基礎学習を終え、これを読んでいる皆さんはきっと継続的に学習できる優秀な方でしょう。

ですがここからは便利な学習サービスの手厚いサポートはありません。

よりいっそう自分で進んでいく力が試されます。

でもこそがフリーランスとして、時給労働から解放され1人で働くということです。

 

ここからが正念場です。頑張りましょう。応援しています!