プログラミング

【3ヶ月の体験談】Web制作初心者がクラウドソーシングで稼ぐまで道のり

はいどうも、たっくん(@wakutakublog)です。

 

 

Web制作やってみたいけど、どうやって勉強したらいいんだろう。

初心者でもWeb制作で稼げるのかな…。

 

そんな悩みを持っている人も少なくないかと思います。

 

そこで今回は「Web制作初心者が初めて案件を獲得するまでのステップ」を解説していきます。

 

 

かくいう僕は下のツイートにあるように、つい先日、初案件を獲得できました。

なので、この経験を鮮度が落ちる前に、記事にしてお伝えしようかと。

 

 

この記事は以下のような人の参考になるはずです。

  • 初心者からWeb制作で稼ぐまでの過程をすべて知りたい
  • Web制作を効率的に勉強して、早く稼げるようになりたい

当てはまる人は最後まで読んでいただければ…!

 

たっくん
たっくん
では、さっそく体験談から解説していきますね

 

 

※ 前半は体験談なので、参考にして欲しいのは後半です。

【体験談】Web制作初心者がクラウドソーシングで稼ぐまでの3ヶ月

まずは 「僕がWeb制作で初めて案件を獲得するまでの体験談」を紹介します。

 

その期間はだいたい3ヶ月。

ただ、ちょっと寄り道をしたので6月、11月、12月といった感じです。(空白期間についてはあとでサラッと書きます)

 

たっくん
たっくん
ここは体験談なので(ムダも多いので)サラッと目を通していただければ…と

 

 

1ヶ月目:HTML・CSSの基礎学習

まずは「HTML・CSSの基礎学習」からスタートしました。

ここは誰しもが通る道ですね。

 

学習ツールは “Progate” と “ドットインストール” です。

どちらも2周ほど。

 

学習内容は以下の通りです↓

  • Progateは道場コース含め「上級編」まで
  • ドットインストールは「はじめてのHTML」「はじめてのCSS」

この段階で、HTMLとCSSの超基礎は理解できたかな…という感じです。

 

たっくん
たっくん
超しょぼいWebサイトなら作れる”かも”レベル

 

 

【寄り道】Skill Hacks「コーポレートサイト制作」

空白期間(7〜10月)は「Skill Hacks」で Ruby や Rails を勉強していました。

これはWeb制作とは関係ないので、今回は【寄り道】とします。

 

ただ、少しだけWeb制作にも関係があり、以下を学習しました。

  • Bootstrapを学習
  • コーポレートサイト(企業風のサイト)をHTML・CSS・Bootstrapで作成

この段階で、静的なWebサイトなら頑張れば作れる”かも”レベル。

 

Skill Hacksで「Web制作楽しいぞ」と思い、翌月からWeb制作を再開しました。

 

2ヶ月目(前半):30DAYSトライアル1st

2ヶ月目からは「30DAYSトライアル1st」をスタート。

30DAYSトライアルとは “プログラミング独学の学習プログラム” です。

 

僕が学習したのは以下の箇所↓

  • 1st-1st:DAY8〜10(環境構築)
  • 1st-2nd:DAY11〜17(Bootstrap&LP制作)
  • 1st-3rd:DAY18〜20(ポートフォリオサイト作成&公開)

この段階で、静的なWebサイトを作って公開できるレベル。

 

1st-3rdで作ったポートフォリオサイトがこちら↓

 

たっくん
たっくん
公開できるようになったので、ドンドン楽しくなっていました

 

 

2ヶ月目(後半)〜3ヶ月目(1週目):架空のLPを2つ作成

公開できるようになったので、ポートフォリオになるLPを作っていました。

2ヶ月目前半までは、コードを真似て書いたり、テンプレを使ったりだったので1から作る練習ですね。

 

実際に作ったのが以下の2つ↓

 

この段階で「あ、自分の力だけでWebサイト作れる!」と少し成長を実感しました。

 

 

3ヶ月目(2~3週目):30DAYSトライアル2nd

次は「30DAYSトライアル2nd」です。

 

ここでの学習内容は以下の通り↓

  • 2nd-4th:jQuery・Javascript・Sass を学習
  • 2nd-5th:頻出デザインのコーディング練習
  • 2nd-6th:jQueryを使って動きをつける & 最終課題

この段階で、動きのあるWebサイトを作って公開できるレベル。

 

たっくん
たっくん
サイトに動きを付けられるので、もっと楽しくなっていました

 

 

3ヶ月目(4週目前半):ポートフォリオ作成

「30DAYSトライアル2nd」でインプット学習は終わりにして、ポートフォリオを作っていきました。

スキルの証明をするためにも、必須ですからね。

 

実際に作ったポートフォリオがこちら↓

作りたいデザインを決めて、学んだアニメーションを詰め込んで “いい感じのサイト” を作ってみました。

 

たっくん
たっくん
思った通りに作れて、達成感ハンパなかった…

 

 

3ヶ月目(4週目後半):クラウドソーシングで提案&獲得

ポートフォリオが完成してスキルを証明ができるので、案件獲得に向けて動きはじめました。

 

使ったのは「クラウドワークス」と「ランサーズ」です。

どちらも、有名な仕事版マッチングサイト。

 

実際にやったことは以下の通り↓

  • 10件ほど提案
  • 2件の案件獲得

 

たっくん
たっくん
3ヶ月目でようやく、案件獲得です

 

 

【4ステップ】Web制作初心者がクラウドソーシングで1~5万円を稼ぐ最短距離

ここまでは「僕が実際に行ってきたWeb制作の案件獲得まで」を紹介してきました。

 

ですが、今になって思うことは「かなり遠回りしたな…」ということ。

もちろん最終的に案件獲得できましたが、効率よく勉強したい人には僕と同じやり方はオススメしません。

 

そこで「今、ゼロから学習を始めるならこうする!」といった “最短距離の3ステップ” を紹介していきます。

 

たっくん
たっくん
効率的にWeb制作を学習して、サクッと案件獲得したい人は参考にしてね

 

 

30DAYSトライアル1st〜2nd

Web制作のインプット学習は「30DAYSトライアル1st2nd」だけでOKです。

 

別の教材を使ってみたり、途中で模写コーディングをしてみたりは必要ないかと。

 

とにかく「30DAYSトライアル1st・2nd」だけを、ただ愚直に進めていきましょう。

期間としては長くて2ヶ月、早ければ1ヶ月ちょい。

 

そしてインプットはこれで終わりです。

 

たっくん
たっくん
インプットばかりしても成長は遅いからね

 

 

デザインカンプからのコーディングに慣れる(PSD,AI,XD)

実は、コーディングができるだけでWeb制作はできません。

 

Web制作の受注から納品までの流れがこちら↓

  • 受注(デザインカンプ、指示書が送られてくる)
  • デザインカンプから画像を書き出し&値を取得
  • コーディング
  • 納品

 

というように、コーディングを始める前にデザインカンプを扱う必要があります。

デザインカンプはPhotoshop, Illustrator, XDのどれかの形式。

 

「Photoshopとか使ったことない。Illustrator? XDってなに?」という段階で案件を取るのは少し危険です。(経験者は語る)

 

とはいえ、デザインカンプからのコーディングも神教材があるのでご安心を。

それがこちら↓

 

見るとわかるように、psd, ai, xdすべての形式でデザインカンプがダウンロードできます。

これでデザインカンプから画像を書き出したり、いろんな値(widthとかfontsizeとか)を取得できるようになれば完璧。

 

もう技術面で心配する必要はないかと。

 

たっくん
たっくん
僕はこれをやってなくて初案件で超苦労した…

 

 

全知識を注ぎ込んだポートフォリオを作る

 

インプットが終われば、ポートフォリオを作っていきましょう。

僕が最後に作った「コーポレートサイト」的なもの。

 

そして重要ポイントが「これに全知識を詰め込むこと」です。

スライドショー、スクロール、入力フォーム、カードなど、学んだことはすべて注ぎ込む勢いで。

 

 

これを使って営業していくので、とにかく全力を注ぎましょう。

 

相手が「コレを作れるなら、今回はこの人に頼もうかな」と思ってくれるようなサイトが理想ですね。

そのためにも、学んだ知識はすべて1枚のLPに注ぎ込むのがベストかと。

 

 

ちなみにデザインに関しては「イケてるLP集めてみました」を参考にするといいです。

ここでイイ感じLPをいくつか探して、イイ感じの要素をピックアップして取り入れる感じ。

 

僕もイイ感じLPを6つ探して、使いたい箇所をピックアップして作りました。

ヘッダーはこのLPから、カードはこのLPから、、みたいに。

 

たっくん
たっくん
ここは超本気で作り込みましょう

 

 

営業方法&提案文の書き方を学ぶ『直営業の教科書』

スキルの証明になるポートフォリオが完成したら、それを使ってクラウドソーシングで営業です。

 

とはいっても「提案文ってどう書けばいいのか分からない…」という人も多いですよね。

 

そんな人には『直営業の教科書』がおすすめです。

『直営業の教科書』とは:
30DAYSトライアル作成者の「ショーへーさん(@showheyohtaki)」が書いた有料note。
営業のコツ、営業文のテンプレ公開、1回の無料添削付き。

※タイトルにある通り、クラウドソーシングでの提案を対象にした記事ではありません。
ですが、クラウドソーシングでも使える内容だなと感じたので紹介しました。

 

他にも「クラウドソーシングで案件がとれたプロフィール文と提案文の書き方を紹介するよ」も参考になるかと思います。

 

これらを参考にして、実際に僕が送った提案文がこちら↓(参考になるか分かりませんが…)

はじめまして。福田拓真と申します。
現在は京都府を中心にWeb制作のフリーランスとして活動しています。

ご依頼内容、貴社HPを拝見し、ぜひ私に制作のお手伝いをさせていただきたくご連絡いたしました。

以下に私の「スキル、作業可能時間、制作費の目安」を記載いたします。ぜひご一読のほどよろしくお願いいたします。

【スキル】
・HTML
・CSS
・JavaScript(jQuery)
・Bootstrap

【ポートフォリオ】
コーポレートサイト:
https://takuma-portfolio.com/corporate.html
コーディング:
https://takuma-portfolio.com/kyoto.html

【作業時間】
平日は午前9時から午後6時まで行っております。また土日も対応可能です。納期はもちろん厳守します。また、迅速なコミュニケーションも心がけています。

【制作費の目安】
ご予算の最低金額、15,000円で受けさせていただきます。

今回の件をお任せいただければ、ご期待に添えれるよう誠心誠意努めさせていただく所存です。
何卒よろしくお願い致します。

 

 

たっくん
たっくん
まずは10件ほど提案文を送ってみましょう

 

Web制作初心者でも「稼ぐ」と決めたら宣言しよう

今回は「初心者がWeb制作で稼ぐまで」を体験談をもとに解説してきました。

 

ここまで読んでいただいた人には、最後に一つだけ、今すぐやって欲しいことがあります。

それが「宣言する」です。

 

僕は12月はじめに「今月中に案件を取る!」と決めたので下記のツイートをしました。

 

そしてこれを固定ツイートにすれば、逃げられない状況の完成です。

 

 

ここだけの話、宣言をしてなければ、3ヶ月で案件獲得はできてなかったと思います。

 

続きのツイートを見れば分かりますが、ポートフォリオが完成したのが12/29日。

正直、もう間に合わないだろうなと思っていました。

 

宣言してなかったら「年末だし1月から頑張ろう」となっていたはず…。

 

 

そんな僕みたいに、意志が強くない人こそ【宣言】で逃げられない状況を作りましょう。

 

「2ヶ月以内に案件獲得する」「今月中に30DAYSトライアルやりきる」など何でもいいので。

宣言してしまえば、あとはなるようになります。

 

たっくん
たっくん
宣言は今すぐできるからね!