はいどうも、たっくん(@wakutakublog)です。
Web制作やってみたいけど、どうやって勉強したらいいんだろう。
初心者でもWeb制作で稼げるのかな…。
そんな悩みを持っている人も少なくないかと思います。
そこで今回は「Web制作初心者が初めて案件を獲得するまでのステップ」を解説していきます。
かくいう僕は下のツイートにあるように、つい先日、初案件を獲得できました。
なので、この経験を鮮度が落ちる前に、記事にしてお伝えしようかと。
【目標達成】わっしょい😮
最終日を目前にして、ついに、案件獲得できましたとさ。(滑り込みセーフ)
ただ、すぐに始まる案件ではないので、実際に取りかかるのは2〜3週間ほどあとになりそう。 pic.twitter.com/a8TDG3Ua0w
— たっくん / タクローグ (@wakutakublog) December 30, 2019
この記事は以下のような人の参考になるはずです。
当てはまる人は最後まで読んでいただければ…!
※ 前半は体験談なので、参考にして欲しいのは後半です。
【体験談】Web制作初心者がクラウドソーシングで稼ぐまでの3ヶ月

まずは 「僕がWeb制作で初めて案件を獲得するまでの体験談」を紹介します。
その期間はだいたい3ヶ月。
ただ、ちょっと寄り道をしたので6月、11月、12月といった感じです。(空白期間についてはあとでサラッと書きます)
1ヶ月目:HTML・CSSの基礎学習
まずは「HTML・CSSの基礎学習」からスタートしました。
ここは誰しもが通る道ですね。
学習ツールは “Progate” と “ドットインストール” です。
どちらも2周ほど。
学習内容は以下の通りです↓
- Progateは道場コース含め「上級編」まで
- ドットインストールは「はじめてのHTML」「はじめてのCSS」
この段階で、HTMLとCSSの超基礎は理解できたかな…という感じです。
【寄り道】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トライアルとは “プログラミング独学の学習プログラム” です。
僕が学習したのは以下の箇所↓
この段階で、静的なWebサイトを作って公開できるレベル。
1st-3rdで作ったポートフォリオサイトがこちら↓
2ヶ月目(後半)〜3ヶ月目(1週目):架空のLPを2つ作成

公開できるようになったので、ポートフォリオになるLPを作っていました。
2ヶ月目前半までは、コードを真似て書いたり、テンプレを使ったりだったので1から作る練習ですね。
実際に作ったのが以下の2つ↓
- 架空のコーヒーサイト:COFFEE
- 架空の旅館サイト:京都老舗旅館『炉』について
この段階で「あ、自分の力だけでWebサイト作れる!」と少し成長を実感しました。
3ヶ月目(2~3週目):30DAYSトライアル2nd
次は「30DAYSトライアル2nd」です。
ここでの学習内容は以下の通り↓
この段階で、動きのあるWebサイトを作って公開できるレベル。
3ヶ月目(4週目前半):ポートフォリオ作成
「30DAYSトライアル2nd」でインプット学習は終わりにして、ポートフォリオを作っていきました。
スキルの証明をするためにも、必須ですからね。
実際に作ったポートフォリオがこちら↓
作りたいデザインを決めて、学んだアニメーションを詰め込んで “いい感じのサイト” を作ってみました。
3ヶ月目(4週目後半):クラウドソーシングで提案&獲得
ポートフォリオが完成してスキルを証明ができるので、案件獲得に向けて動きはじめました。
どちらも、有名な仕事版マッチングサイト。
実際にやったことは以下の通り↓
- 10件ほど提案
- 2件の案件獲得
【4ステップ】Web制作初心者がクラウドソーシングで1~5万円を稼ぐ最短距離

ここまでは「僕が実際に行ってきたWeb制作の案件獲得まで」を紹介してきました。
ですが、今になって思うことは「かなり遠回りしたな…」ということ。
もちろん最終的に案件獲得できましたが、効率よく勉強したい人には僕と同じやり方はオススメしません。
そこで「今、ゼロから学習を始めるならこうする!」といった “最短距離の3ステップ” を紹介していきます。
30DAYSトライアル1st〜2nd
Web制作のインプット学習は「30DAYSトライアル1st・2nd」だけで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円で受けさせていただきます。今回の件をお任せいただければ、ご期待に添えれるよう誠心誠意努めさせていただく所存です。
何卒よろしくお願い致します。
Web制作初心者でも「稼ぐ」と決めたら宣言しよう

今回は「初心者がWeb制作で稼ぐまで」を体験談をもとに解説してきました。
ここまで読んでいただいた人には、最後に一つだけ、今すぐやって欲しいことがあります。
それが「宣言する」です。
僕は12月はじめに「今月中に案件を取る!」と決めたので下記のツイートをしました。
【宣言】
12月中にどちらかを達成します。
✔︎web制作でインターンorバイト
or
✔︎web制作の案件を受注#ハッタリ発信
過程は続きのツイートにて🔽— たっくん / タクローグ (@wakutakublog) December 2, 2019
そしてこれを固定ツイートにすれば、逃げられない状況の完成です。
ここだけの話、宣言をしてなければ、3ヶ月で案件獲得はできてなかったと思います。
続きのツイートを見れば分かりますが、ポートフォリオが完成したのが12/29日。
正直、もう間に合わないだろうなと思っていました。
宣言してなかったら「年末だし1月から頑張ろう」となっていたはず…。
そんな僕みたいに、意志が強くない人こそ【宣言】で逃げられない状況を作りましょう。
「2ヶ月以内に案件獲得する」「今月中に30DAYSトライアルやりきる」など何でもいいので。
宣言してしまえば、あとはなるようになります。