Web制作独学開始から半年で月34万円！稼ぐまでの全過程を大公開！

どうもこんにちはゆーが（@yuga_th119）です。

僕は2020年1月からWeb制作を始めて半年が経ち、先月（6月）1ヶ月間の受注金額が34万円に到達しました。

いやあ長かったです。ここまで。

近年、空前のプログラミングブームの影響で「Web系のスキルを身に着けて自由な働き方がしたい！」と勉強し始める方が増えてきましたよね。

TwitterのタイムラインでWeb制作初学者の方を見ていると「#今日の積み上げ」と毎日一生懸命にツイート更新している方を見かけます。

しかし2~3ヶ月すると、すぐに全く更新しなくってしまう方もちらほら。

挫折してしまう人も多い中で、僕は地道に頑張って半年かけて全くの未経験からきっちり30万円分の案件を取れるまでにこぎつけました。

Web制作を志す方の全体数から考えると、30万円以上稼げるようになった人ってそんなに多くないんじゃないかと思っています。

そこで「僕が30万円分受注するまでのロードマップを書いたら需要あるかなー？」と思い、Twitterで聞いてみました。

すると、僕の少ないフォロワーさんのなんと8割近くが興味を示してくれたんです。

ある程度需要がありそうだなと感じたので、僕は筆を取ることにしました。

僕は去年の1月に「自分の仕事の幅を広げたい！」という思いで、全く未経験の状態からWeb制作の勉強を開始。

誰に教えてもらった訳でもなく、学習方法も営業方法も独学です。

今回の記事は、僕の経験を伝えることで、今Web制作を頑張っている初学者の方の励みになるような記事にすることを目指しています。

有料noteで書こうかとも思ったんですが、

  • 僕と同じように今現在Web制作を学習している初学者の方
  • これからWeb制作を勉強しようか考えている初学者の方

にできるだけ多く届くといいなと思い、無料で公開することに。

この記事を読み終えれば、Web制作完全未経験だった僕が、

  • Web制作をどのように学習したのか
  • Web制作の案件をどのように獲得したのか

について、全て知ることができます。

初学者の方に向けたロードマップという形で執筆しているので、100%真似しても再現性はあるかと。

「これからWebサイト制作でお金を稼いでみたい！」という方は、記事の内容を読んで、ぜひ参考にしてみてください！

1.プロローグ：自己紹介

1-1.大学卒業→新卒フリーランス（Webライター）

まずは簡単に僕自身の自己紹介から。

僕は1997年生まれの23歳で、今年の3月に法政大学文学部英文学科を卒業してフリーランスになりました。

元々は大学3年生の時に、田舎フリーランス養成講座（現：ワークキャリア）を受講した際にWebライターとして活動をスタート。

そのまま業務を続けていき、結果的に新卒でフリーランスとして独立して今に至ります。

現在は千葉県富津市から引越して、大阪府泉佐野市を拠点として活動中。

2020年の1月に開業してから、独立して半年くらい経過し、段々と面白い仕事も取れるようになってきた今日この頃です。

1-2.「このままじゃまずいな・・・」がきっかけ

僕は今年の１月にWeb制作の学習を始めるまでは、Webライティングしか出来ない、ごく普通のWebライター。

当時は、なんとなく「もっと違うスキルをつけて仕事の幅を広げられたらいいな・・・」と考えていました。

そんな時にNewsPicksを読んでいたら、ある記事が目に飛び込んできたのです。

＞＞Bussiness Insider：口コミからバズ記事生むAIライター。取材も人件費も不要で約300倍成長

記事の内容は、大手グルメサイト『Retty』がAIライターを運用したところ、300倍も成長したというもの。

この記事を読んで、僕は「Webライティングって職業は近い将来、本当に無くなっちゃうんだろうな」と痛切に感じました。

また当時は、フリーランスのWebライターとして、もっと仕事が欲しかったので、日々営業をしていました。

しかし、その時が丁度Googleのアップデートのタイミングで、メディア運営者達が大打撃を受け、SEOライティングの仕事が前より取りにくくなってしまったんです。

「このままWebライティングだけやっていては流石にやばいのでは・・・」と危機感を持った僕が目をつけたのがWebサイト制作。

目をつけた理由は「Webライティングよりも単価が高く、より大きい範囲で仕事が出来るようになりそう！」という単純な動機。

その日から思い立って「よし！Web制作やろう！」と学習を始めました。

1-3.稼げるようになる自信だけはあった

僕がなぜWeb制作にしたかというと、絶対にある程度は稼げるようになる自信があったからです。

もともと僕はWebライターになる前の大学3年生の時に、Swiftという言語を使ってiOSのアプリ開発を行っていました。

完全独学から勉強を始めて、３ヶ月で簡単なSNSを作れるようになるまで成長しました。

その時の学習体験については、下記の記事で詳しく解説しています。

＞＞関連記事：Swiftを3ヶ月間本気で独学したらアプリは開発できる？【体験談】

この時の経験から、言語は全く違えど、コーディングに関して自分は適性があるのではないかと考えていました。

また僕は当時からフリーランスとして活動していたため、Web制作でお金を稼いでいる人に会う機会も多かったです。

何をどこまでやれば稼げるようになるのか、イメージできたのも自信があった理由の１つかもしれません。

2.プロローグ：Web制作で34万円受注した時の内訳

2-1.直請け30万円+制作会社4万円

記事を読んでいる方の中には、

記事読者

34万円って具体的にどんな仕事をしたら、その金額になるの？

と気になる方も多いでしょう。

ということで、今回案件を受注できた月の金額内訳をグラフにして提示してみました。

  • 制作会社からのコーディング案件・・・40,000円
  • 直請けの事業会社からのWebサイトリニューアル案件・・・300,000円

という内訳になっています。

直請けでWebサイトリニューアルの案件を頂けたのが大きいですね。

ちなみにこれらの案件は友人や知り合いからもらった訳ではなく、全て自分で営業して受注したものです。

コネなし実績なしからどのように案件を取ったのかについても、後で詳しく解説しています。

「学習方法より、営業の方が気になる！」という方方は飛ばして読んでみてくださいね。

＞＞営業編までスキップ

3.学習編：Web制作は完全独学！学習コストは1万円

3-1.学習教材をどのように決めたか

Web制作初心者の方がまず最初に抱える疑問が「どうやって勉強すれば良いのか」ということ。

全くプログラミング学習をした経験が無い方は、一体何から始めればいいのか分からない方も多いですよね。

僕もプログラミング自体は若干経験があったものの、Web制作に関しては完全に素人。

どこから始めたらいいのか全く分かりませんでした。

しかし僕は1度独学でプログラミングを学んだ経験があったので、プログラミング学習に関する、ある基本原理を知っていました。

それは「プログラミング学習に必要な情報の9割はネット＆書籍で集められる」ということ。

今回もまずはGoogleとTwitterを駆使して、Web制作をやられている方がどのように学んで、仕事を獲得していったのかを徹底リサーチ。

すると、当時まだ無料で公開されていた「デイトラ」というロードマップ教材を勉強したら、最短でお金が稼げるスキルをつけることが出来そうだと分かりました。

（※「デイトラ」は現在有料化されています。）

実は僕自身、1月当時に全財産が15万円くらいしかなかったので、学習教材を購入する余裕もなかったんですよね。

そう思って学習教材は『デイトラ』にお世話になると決めました。

3-2.学習教材に使ったお金は1万円

以下の表は、実際に僕がWeb制作で稼げるようになるまでに、学習教材に対して使ったお金を計算したものです。

金額
Progate×3ヶ月分3,234円
HTMLテンプレート×2個4,024円
WordPressの書籍×1冊2,905円
合計10,163円

Web制作を学ぶために使ったお金は、冗談抜きでこれだけです。

1万円で34万円を稼いだとなると、純粋に34倍のリターン笑

ただ時間という観点で見ると、学習時間にWebライティングすれば、もっとお金を稼げていた計算になるので、ちょっと微妙かなと思います。

本業を終えた後の夜2~3時間くらい使って1月〜5月まで毎日コツコツ学習し続けていたので、単純計算すると

  • 30日×3時間×5ヶ月＝450時間

という計算になります。

忙しくて出来ない日もあれば、もっと長時間学習した日もあったので、正確ではないものの、平均的に3時間くらいは学習に費やしました。

僕の時給単価が平均で約2,500円なので、この時間を業務に置き換えると、

  • 450時間×2,500円＝約112.5万円

という計算に。

僕も今初めて計算しましたが、まだまだ時間分のお金は回収できてませんね。精進します。

3-3.高い学習教材を買わなくても学べる

Web制作の教材は本当に様々なものが出回っていますが、金額の差こそあれど、学習する内容にそこまで違いはありません。

よく「高い教材」＝「良い教材」と思っている方を見かけますが、全くそんなことはありません。

「安かろう悪かろう」ではなく、自分のお財布と相談して「良い教材はなにか」きちんと情報収集して見極めることが重要です。

僕はWeb制作の学習教材を「デイトラ+書籍」で学んだと先述しました。

この記事を読んでいる方の中には、

『デイトラ』が無料だった時期に勉強したから安く済んだだけでしょ。今は有料化されてるし、あんまり参考にならないなあ・・・

と思っている方も多いかもしれません。

しかし、もし仮に当時デイトラが今の値段（7~8万円）でリリースされていたとしても、僕はおそらく購入しなかったでしょう。

当時の予算感だったら、下記のような学習ロードマップ記事をそのまま実行に移していたと思います。

＞＞HikoPiro Blog ：【独学でWeb制作】月5万稼ぐための学習マップ【0円！未経験でもOK】

＞＞フリーランスで稼ぐ方法まとめ：Web制作で稼ぐ勉強方法！無駄な勉強をやめて速く稼ごう！

Web制作のフリーランスとして活動されている方の中には、なんと親切にも無料でロードマップを作ってくれている方が沢山いらっしゃいます。

特にふるさん（@guutenx）はYouTubeでも動画をアップされていて、デイトラでちょっと足りないなってところ（デザインなど）はよく見て勉強していました。ありがたすぎる。

（ふるさんまで届くといいな・・・）

HikoPiroさん（@Hiko_Piro）の記事はWordPressまで網羅してない（LPコーディング案件用）ので、30万円以上の案件は難しいかもしれません。

ただ、ふるさんのロードマップ記事はWordPressまで網羅してあるので、初学者のロードマップとしては十分であるように思います。

他にも探せば、無料で学べる教材をアップしてくれている方は本当に多数います。

近頃はインフルエンサーが、ほぼ無料で学べるような教材を高額な値段で販売するケースも増えていますよね。

しかし僕は、学習するに当たって、高額な教材を購入する必要はないのではと思っています。

もちろん有料教材の方が、

  • 質問サポートが充実
  • 学習速度を上げられる
  • 実力派メンターから学べる
  • 挫折しにくい

などの利点は沢山あります。

現にデイトラやTechAcademyなどもそういった面をアピールしていますよね。

＞＞『デイトラ』｜１日90題で身につくWEBスキル

＞＞TechAcademy｜Webデザイン+WordPressコースを見てみる

「挫折が心配」「独学じゃ不安」という方は、むしろ教材を買った方が学習効率が上がって、速く稼げるようになるかもしれません。

ただ僕が言いたいのは「高いお金を出さないと学べないことはない」ということです。

比較検討して自分がメリットを感じたのであれば、有料商材でもオッケーですが、まずはしっかりとリサーチしてから判断しましょう。

では次の章からは実際に僕がWeb制作を学習したロードマップを大公開していきます。

僕自身、本業のWebライティングを１日8時間くらい行いながら学習を続けていました。

今会社員で学習を続けている方も「どのくらいの期間でどのレベルまでいけるのか」参考になるのではないかと考えています。

4.学習編：実際に僕がWeb制作を学習したロードマップ！学習教材も大公開！

4-1.Web制作全般の基礎固め&模写コーディング（1~2月）

まず１ヶ月目はWeb制作の基礎を固め、2ヶ月目から模写でWebサイトのコーディングを始めました。

この時期は「初速が大事だ！」と思って、土日をフルに使って学習していたので、かなりスピード感を持って学習できましたね。

具体的な学習の流れは以下の通りです。

ProgateでHMTL&CSS を1周

まずはProgateでHTML&CSSを1周しました。

やりすぎは良くないので、Progateでの理解度は30%くらいに留めて次に進みます。

LP模写コーディング（デイトラ1）

基礎が終わったらコーディング模写です。

デイトラで用意されているコーディング動画を見て、模写を２ページほど行います。

実際に基礎で学んだ技術を応用してどのように使っていくかを学びました。

ちなみにこの課題では「Bootstrap」というCSSフレームワークを使ってコーディングしなければなりませんでした。

実際にデイトラでも「Bootstrap」の基礎から学ぶステップが用意されていました。

しかし僕は、このステップを完全に無視しました。

なぜなら「実務でBootstrap使ったことが無い」と言っている方が多く、ほぼ不必要なものだと分かっていたからです。

要らないところはなるべく学習せずに、スピード感を意識して学習を進めていきました。

ポートフォリオサイト作成

模写が終わったら一旦、HTMLのテンプレートを使って、ポートフォリオサイトを作成。

HTMLテンプレートを使えば、すぐにお洒落なポートフォリオサイトを作ることができるようになります。

自分で行う作業は画像とテキスト、色の変更などのみですが、「どうやってお洒落なサイトを作るのか」イメージが湧きましたね。

実際のサイトを参考に架空HPのコーディング

次に行ったのが、実際にあるサイトを参考にしながら、架空HPのコーディング。

僕は大手航空会社のJ◯Lさんの公式HPを参考に、架空航空会社のHPのコーディングを行いました。

今までは常に正解のコードが用意されていて、それをひたすら模写していくタイプのコーディングでした。

しかし架空HPのコーディングは、見本がない状態から自分でコーディングしなくてはならないため、かなり頭を使います。

これまでとは比にならないくらい難易度が高かったですね・・・

ProgateでJavaScript・JQueryを1周

Webサイトに動きをつける動作は全てJavaScriptを使って行われています。

僕は上記の架空HPコーディングもHTMLとCSSだけで作成したので、まだJS周りの知識はありませんでした。

そのため再度Progateを使って基礎知識をインプット。

JavaScriptはプログラミング言語なので難しかったなあと覚えています。

初案件でLPデザイン~コーディングまでを1枚

作った成果物をTwitterにアップしてから１週間ほど経ったころ。

本当にたまたまなんですが「LPを作りたい！」という個人の方から声をかけて頂いて、3万円で仕事をもらうことができました。

LPを作るのも初めてでしたが、今までの経験をフル活用して、なんとか1枚を納品！

PhotoshopでLPのデザインからコーディングまで経験できたのはいい経験になりましたね。

ここまでで、だいたい２ヶ月。

２ヶ月目の丁度ひと通りコーディングの知識がついたタイミングで、仕事が貰えたのは、とても運が良かったと自分でも思います。

基本的に「Progateで基礎を知る」→「実践体当たり」みたいな感じで覚えていきましたが、アウトプットを意識していった方がプログラミングは身につきます。

基礎の理解はほどほどにして、実践で色々覚えていく方が効率的だと経験から学びました。

この期間に作った制作実績

4-2.WordPressでのWeb制作を学習（3~4月）

3月からWordPressでのWeb制作を始めました。

世界中のWebサイトの30%はWordPressで出来ていると言われており、WordPressが出来ると一気に仕事の幅が広がります。

ただ３月後半〜4月前半は僕の仕事の都合で全く時間を取ることができなかったので、4月後半に入ってから本腰を入れて学習し始めました。

ProgateでPHPを1周

まずはいつも通り基礎学習です。

これまで「基礎」と「応用」を繰り返してきており「また基礎か」という気持ちもありましたが、こればかりは止むを得ません。

WordPressはPHPを使って構築されているため、PHPの文法はある程度知っておく必要があります。

PHPもサーバーサイド言語として、Webサービスにも使われている言語なので難易度は高め。

時間はかかったものの、なんとか最後まで終えることができました。

WordPressのコーディング模写（デイトラ3）

PHP基礎が終わった後は、デイトラで用意されている教材を使ってサイト模写です。

よく「WebサイトをWordPress化する」という言い方をしますが、コーディング未経験者のうちは、よく意味が分かりませんよね。

僕もそのうちの1人でした。

HTML/CSSだけで構築されているWebサイトをWordPress化していく過程を学べるため、1からWordPressサイトを制作するイメージが明確になりました。

この工程を行ってから「WordPress化すると何が変わるのか」などをより理解しやすくなり、実務に対する自信がつきましたね。

クラウドソーシングで少し営業

前回の学習から仕事の都合でだいぶ間が空いてしまい、4月の半ば。

営業を始めようとした時に、僕はデイトラの教材が「個人ブログのデザイン」を採用していたことに気が付きました。

実際にクラウドソーシング上で案件を見てみると、そのほとんどが「コーポレートサイト」の制作依頼。

WordPress化の経験はあったものの、コーポレートサイト型のWordPressサイト構築は経験がありません。

このまま営業するか悩んでいたところ、Webサイト制作をやっていた方に、

「遅かれ早かれ学習することになるから、やっといた方がいいよ。俺が勉強した本ひと通りやって、自分で１からサイト作ってみたら？」

と言われました。

本当に勉強すべきか自分でも迷いましたが、このまま業務に入ることに対して不安があったのは事実。

「もう少し勉強してからでも遅くないか」と思い、教えてもらった書籍で学習することを決めました。

WordPressのコーディング模写（書籍）

今振り返っても、実際教えてもらった書籍をやって良かったなと思っています。

書籍については後で紹介していますが、WordPressを勉強したい全ての人に学んでほしいくらい良い本でした。

「WordPressの教科書」と言っても過言ではないほどの教材で「WordPressだけデイトラの教材じゃなくてこっちをやれば良かったなあ」と少し後悔したほど。

模写をしてみて、WPテンプレートタグの使い方や、タクソノミーカテゴリまでしっかり頭に叩き込むことができました。

少し時間がかかってしまったものの、ここまでで合計4ヶ月が終わりました。

もう少し上手に使えたような気もしていまいますが、約１ヶ月ほど手がつけられない期間があった割には、まあまあかなと思っています。

WordPressはちょっと今までよりも複雑なので苦戦を強いられました。辛かった。

ただこれでようやく自分で1からサイト作れるようになったな感を噛みしめることができ「ここまで来たか」感を感じることができましたね。

ちなみに「WordPressの書籍」として紹介しているのは、下記の本です。


［改訂版］WordPress　仕事の現場でサッと使える！ デザイン教科書［WordPress 5.x対応版］ Webデザイナー養成講座

　

タイトル通り、WordPressが一体どのようなものか、包括的に理解することができる「教科書」。

WordPressとは何かといった基本的なことから、発展的な技術まで幅広くカバーしている名著でもあります。

WordPressの教材何を使おうかな？と迷ったら、まず最初にやって欲しい書籍なので、ぜひ参考にしてみてください。

4-3.WordPressを用いて架空Webサイト作り（5月）

最後に自分がやってきたことの総復習として、WordPressを用いて自分で１から架空のサイトを構築しました。

0からサイトを作るためには、

  1. サイト設計・要件定義
  2. デザイン
  3. HTML/CSS/JSでのコーディング
  4. WordPress化

という順序を踏んでいきます。

制作過程を全て自分でこなすのは初めてでしたが、かなりやりがいを感じることができました。

そして完成したWebサイトが以下のサイト。

デザインからコーディングまでしっかり自分で考えられたので、めちゃくちゃ達成感がありました。

「今までやってきたことがちゃんと身になってる！」と深く感じることができたため、とっても嬉しかったです。

4-4.営業開始（6月）

そして実績作りがひと通り終わった僕は、Web制作の案件を取るべく営業を開始。

営業に関しては、次の章からもっと詳しく解説していきます。

ただ結論からいうと、営業を開始してから2週間で、34万円分の案件が取れてしまいました。

正直かなり運が良かったなとは思いますが、これも僕なりに試行錯誤を繰り返した結果。

どう営業したらいいか分からない方は、ぜひとも参考にしてみてください。

5.学習編：これからWeb制作を学習したい初心者におすすめの完全独学ロードマップ

学習編の最後に、これからWeb制作の学習を始めたい方に向けて、どのように学習していくべきなのかについてのロードマップを作成しました。

僕が半年間の学習した上で「これなら最短で身につけられる！」というロードマップを作ったので、ぜひ参考にしてみてください。

5-1.Progate HTML&CSSを1周

全てのはじまりはここからです。ポケモンでいうとマサラタウン。

よくエンジニアの方の中には「Progate不要論」を唱える方もいますが、僕的には一応必要だと思います。

ただ２周以上は本当に意味がないと思うので、あくまでも「概念」を理解する場として使えると良いですね。

＞＞Progateの教材を覗いてみる

5-2.ProgateのJQueryを1周

HTMLが終わったら、ここで1度JQueryに触れておいてください。

無料時代のデイトラのロードマップでは、JavaScriptも入っていましたが、あまり使わない割に長く、無駄が多いように感じました。

確かにJQueryはJavaScriptで書かれているので、記述する際にはJavaScriptの公式が分かっていた方がいいかもしれません。

しかし実際にJQueryで動きをつける時には、JavaScriptのコードが全てを分かっていなくてもコードは書けます。

なので個人的にJQueryだけをやった方が、逆に効率的なのではないかと考えて、JQueryのみを1周することをおすすめします。

5-3.コーディング環境を整える

Progateを学んだ程度では、自分でどのようにサイトを立ち上げてコーディングするのかイメージしにくいですよね。

Webサイトを作っていくためには、まず「テキストエディタ」をPCにインストールする必要があります。

テキストエディタを使うことで、HTML/CSSを書いてコーディングができるようになるのです。

整え方は、以下のProgateの記事で問題なく設定できるはずなので、まずは動作確認をしてみてください。

＞＞関連記事：HTML & CSS の開発環境を用意しよう！

テキストエディタには何種類かあって、

  • Sublime text
  • Atom
  • VS Code

の３種類は特に有名です。

記事中では「Atom」が紹介されていますが、僕は機能性面を考慮して「VS Code」を使って書いています。

「VS Code」の方が機能面で評価が高いので、記事中の「Atom」を「VS Code」に変換して動作確認してみてください。

LP2枚の模写コーディング

基礎のProgateが1周できたら、早速模写コーディングの方に移っていきましょう。

僕がおすすめするLPの模写コーディングは、以下の2つ。

＞＞【LP1枚目】ねこぽんブログ：コーポレートサイトのデザインテンプレート①

＞＞【LP2枚目】ねこぽんブログ：コーポレートサイトのデザインテンプレート②

まずWebデザイナーのねこぽんさんのブログに添付されているデザインテンプレートからPhotoshopのデータをインストールしてコーディング。

ねこぽんさんの課題は、Webサイト全体をコーディングする訳ではないので、早い人なら数時間でできてしまうはず。

PhotoshopのデータからWebデザインのコーディングをするのは、実際の案件でもめちゃくちゃ依頼されるので、この時点で覚えておくと良きです。

Photoshop→Webサイト制作の方法については、ふるさんの動画が参考になるので、動画を見てから取り組んでみてください。

また、模写コーディングのやり方についても、以下の動画で解説しているので、分からない時は参考にすると良いでしょう。

5-4.自分でLP（WebサイトのTOPページでも可）を選んで架空HPサイトを制作

次は模写から少しだけ発展させて、実在する企業のWebサイト・LPを真似て架空のHPサイトを制作します。

Web制作界隈で有名なのが、iSaraの公式ホームページ。

＞＞iSaraの公式ホームページ

このページは商用利用可能なので、そのままポートフォリオとしてアップすることができます。

また技術力的にも、初心者コーダーが身につけるべき技術をひと通り使うため、非常に便利です。

ただ僕はこのサイトをコーディング課題として採用しませんでした。

iSaraのサイトはコーディング初心者の大多数がコーディング課題として取り組む教材。

営業して実績を見せた時に「うわこいつもiSaraのHPコーディングしてるよ・・」と思われたくないですからね。笑

なので僕は大手航空会社のWebサイトを真似て、コーディングしました。

基本的にどんなLPでWebサイトでも問題ないので、自分で1枚選んで、それっぽい架空サイトを作って実績にしてしまいましょう。

5-5.ポートフォリオサイトを制作

次に営業用のポートフォリオサイトを制作します。

ポートフォリオサイトはHTMLテンプレートを使って、ちゃちゃっと作ってしまうのが１番いいですね。

HTMLテンプレートを使えば、少し設定をいじるだけで、簡単におしゃれなWebサイトを制作することができます。

1から自分でポートフォリオサイト作りたい！という方も中にはいるかもしれません。

しかし、これまでコーディングの技術力は若干身につきましたが、「おしゃれな」サイトを作るデザイン力はないですよね。

ポートフォリオサイトはいわば自分自身の顔。

ポートフォリオがダサかったら、その人に「仕事をお願いしたい！」とは思わないはずです。

この時点では、仮のポートフォリオでもいいので、まずはポートフォリオを「作る」ことが重要です。

僕がおすすめしたいHTMLテンプレートは、以下2つです。

  1. Kerri
  2. Canvas

僕が実際に利用したHTMLテンプレートでしたが、とってもデザインをアレンジしやすかったので、おすすめしておきます。

また上記の２つは有料のテンプレートですが、無料のHTMLテンプレートも存在します。

＞＞関連記事：レベル高っ！商用可能な無料HTMLテンプレート200+種類を配布しているサイト Colorlib

無料のテンプレートの方が機能は少ないですが、逆にシンプルで使いやすいこともあるため、ぜひ自分で気になるHTMLテンプレートを探してみましょう。

5-6.周りの人に営業する

この時点で、あなたはひと通り自分でWebサイトが作れるようになっています。

もはや素人ではなく、仕事が取れる状態になっているということ。

ここまで出来たら、いったん周りの人に営業してみてください。

Webサイト制作をやっていて思うんですが、やっぱりWebサイトを欲してる人って意外と近くにいるんですよね。

また僕の経験上、クラウドソーシングで営業するよりも初心者のうちは身近な人から仕事を取ったほうが確度が高いです。

まずは、

  • Facebookで声をかけてみる
  • Webサイト作りたそうな人に連絡する

など興味を持ってくれそうな人に片っ端から連絡してみてください。

僕もたまたまこの段階で仕事が取れたおかげで、良いアウトプットができたので、その後もモチベーションを保ちながら仕事を獲得できました。

人は頑張った成果に対して、報酬が少ないとモチベが下がってしまう生き物。

なるべく早い段階で営業して、仕事を獲得し自分自身のモチベーションをアップさせてくださいね。

5-7.ProgateでPHPを1周

HTML/CSSでサイトが作れるようにあったら、次は本格的にWordPressでのWebサイト制作に入っていきます。

WordPressはPHPという言語によって構築されているので、まずはPHPの基礎をProgateで学びましょう。

5-8.「WordPressの教科書」を1周（コーディング）

次に学習して欲しいのが、先述した「WordPressの教科書」。

HTML/CSSだけしか出来ないうちは、LPのコーディング案件しか受注できません。

WordPressの案件ができるだけで、報酬額は倍以上になることも十分にあります。

  • LPコーディング・・・3~5万円
  • WordPressでのサイト制作・・・20~50万円

本の内容を理解できるようになるだけで、グッと高単価案件が取れる可能性が高くなるため、ぜひ学習しておきましょう。

5-9.自分で１からWordPressのWebサイトを制作してみる

最後にこれまでの集大成として、自分で１からWordPressでWebサイトを制作します。

１番難しいですが、Webサイトを１つを作る労力がどのれくらいなのか、どんな技術が必要なのかなど、理解度が圧倒的に高まります。

僕自身も「自分で１からサイトを作れるようになる技術力がついた！」と大きな自信に繋がりました。

サイトを１から作り上げた経験は、実際の業務に入っても必ず活きてくるため、ぜひ参考にしてみてください。

5-10.営業スタート

上記の過程が全てが終わったら、いよいよ営業スタートです。

ここまでで模写含め、見せられるポートフォリオは、複数用意できていますよね。

最低限のスキルは身についているため、自信をもって営業するフェーズに移行すべきですね。

6.営業編：Web制作で稼ぐには仕事を獲得する段階が１番難しい

6-1.「実績」も「人脈」もない人に仕事は来ない

あなたは学習をひと通り終えて、ほぼ仕事ができる段階になりました。

ここまで学習すると誰しもが未経験からこの段階まで来れた達成感感じることが出来るはず。

しかし実は個人でWeb制作で稼ぎたいと考えている方にとって、１番大変なのはここからです。

どれだけスキルがあったとしても、仕事が取れなければ何の意味もありません。

大半の方は、最初「Web制作で稼ぐ」が目的だったにも関わらず、学習の過程で「学習し終えること」が目的になってしまいがち。

ひと通り学習し終わったら「どうやって仕事を取るか」ということを考えなければなりません。

学習し終えた時点では、大半の方が「実績」も「人脈」もない状態です。

待っていても仕事は来ないので、自分から「営業」して仕事を取りに行くにはどうすればいいかを考えましょう。

6-2.実績をいくつ作ったところで「未経験」

覚えておいて欲しいのが、先程の学習ロードマップを終えた時点でも、あなたのスキルはまだ「未経験レベル」であるということ。

少し営業して上手くいかないと「自分の技術力不足なのでは・・・」と勘違いして、LaravelやVue.jsなどの学習を始めてしまう方もいます。

しかし残念ながら企業での実務経験が無い限り、どこまで勉強してもあなたは素人なのです。

もちろん「Web制作会社やシステム系の会社に転職も視野に入れたい！」というのであれば話は別です。

むしろ営業して案件を取るより、技術力を磨いて、もっとポートフォリオを充実させ、転職したい会社を探すべきでしょう。

しかし「個人で独立してやっていきたい！」というのであれば、しっかり営業活動に目を向けるべきです。

僕は「Web制作で稼ぐ」ことが目的だったので、スキルアップよりも営業が重要であることを理解していました。

自分が何を目標としているのかをはっきりさせることで、どう努力すべきかも見えてきます。

もしこれからWeb制作を勉強したいと考えているのであれば「自分はなぜWeb制作を勉強するのか」考えておくようにしましょう。

7.営業編：「実績なし」「コネなし」からどうやって仕事を獲ったのか？

7-1.マインドセットはDDPCA

営業をする覚悟が決まった段階でも、

営業って言われても具体的に何をしたらいいのかさっぱりだなあ・・・

と思う方が大半ですよね。

実際に僕も「さあここからだ！」と気合いを入れてみたものの、具体的に何をしたらいいのかな？って感じでした。笑

でも何も分からないからと言って、何もしない訳にもいきません。

そこで僕が出した結論が「まずやってみる」ということ。

これはWeb制作に限らず仕事をする際に、常に意識していることです。

僕は新卒でフリーランスになったので、上司もいませんし、誰かに仕事の仕方を教えてもらうこともできません。

常にやってみて、経験や知見からそれを分析して、学んでいく体当たりな方法で学ぶしかないのです。

Web制作初心者の方も、おそらく大半の方が「営業する」ということに対して、不安や恐さを感じるはず。

しかし何も分からないからこそ、やってみるしか選択肢はないのではないでしょうか。

ビジネスの世界では、問題に対する継続的な改善方法として「PDCA（Plan・Do・Check・Action）」という型が利用されますよね。

ただ僕的には「DDPCA」くらいで丁度良いんじゃないかと考えています。

営業をする時も分からないことに挑戦する恐さを感じるかもしれません。

しかしやってみないことには何も始まらないので、まずは「やる」という意識を強く持って営業に臨むべきでしょう。

7-2.経験者に聞いても営業手法はバラバラだった

幸運にも僕は現在コーワーキングコミニュティに住んでいるため、Web制作で生計を立てている方と知り合う機会が多いです。

営業手法に関して、ほぼ無知だった僕は、とりあえず営業手法を経験者に聞いてみることにしました。

しかし実際に聞いてみると、経験者の方でも営業手法は本当に人それぞれだったのです。

ワイ

〇〇さんはどんな感じで営業してるんですか？

Aさん

最初はクラウドソーシングで案件取ったけど、その後は知り合いからもらったり、制作会社に営業したかな

Bさん

私は制作会社とは絶対に仕事しないって決めてて。だから企業に直接営業して取ることが多かったな

Cさん

クラウドソーシングで最初に取ったトコとずっと仲良くさせてもらってるなあ

Dさん

俺は大きい案件取りにいきたかったから、イベントで顔だして話して・・・受注！って感じやな笑

Eさん

営業かあ…うーん..まあホントに人によるんすよねー。

いや、Web制作の案件取りたいなら、Web制作の営業しちゃダメですね。

とまあ本当に色々出てくるわ出てくるわ。

いやこれ結局何が正解か全く分かんねえよ！！！

となりましたね。はい。

本当に人それぞれで意見が違ったので、質問したせいで何が正解か全く分からなくなりました。

しかし質問して逆に分かったことは「営業手法に正解はない」ということ。

Webサイト制作は業種・法人・個人問わず需要があるため、営業手法もターゲットも様々であることが分かりました。

7-3.営業にかけた期間は２週間

先述した通り、営業に関しては手探り状態でのスタート。

しかし実際にはじめてみると、営業を始めてから２週間ほどで案件が取れてしまったのです。

まさか僕もこんなに早くこんなに受注できるなんて思ってもみませんでした。

始めた時は、ドキドキで「これで仕事取れなかったら今までの努力が無駄になる・・」と本当に不安な気持ちでいっぱいでした。

でもしっかりアプローチする方法を考えて行動していけば、間違いなく仕事は貰えるということは分かりましたね。

8.営業編：僕が実際に行った仕事を獲るための営業方法３つ

8-1.クラウドソーシングで提案

僕がまず最初に始めたのは、クラウドソーシングでひたすら提案文を送るという営業方法です。

クラウドソーシング（以降「CS」と記載）は、

  • 競合が多いから不利
  • 単価が激的に低い

など戦うべきではない！という意見が多数ありますよね。

確かにその通りですが、初心者の方にとっては、

  • 世の中のWeb制作案件にはどんなものがあるのか知れる
  • 「営業力」「提案力」を磨くのに最適

などの大きな利点がいくつも存在します。

また僕はライターとしてランサーズで仕事を獲得しており、CS内の評価が高いため「Web制作案件でも依頼者の信用も得やすいのではないか」と考えました。

しかし初週で１日5~6件ほど毎日提案を続けていましたが、結果は惨敗。

メッセージが返ってきた案件も2~3件ありましたが、成約につながることはありませんでした。

CSは競合の提案者が猛者たち揃いなので、初心者にとって「これはいけそう！」というような案件は基本的に全て猛者に提案負けしてしまいます。

その中で、提案の手数と質を上げながら、案件を獲得していくのは至難の業。

もちろんこの後も数を打って提案していけば先につながることもあったかもしれませんが、少し効率が悪いように感じたので、すぐに撤退しました。

ゆーが

余談ですが、いなフリやiSaraなどの講座で未経験から普通にCSで仕事取る人すごいなって思いました。。よほど「過去に制作会社で働いた実績のある人」「提案力+数打つが徹底できてる人」ではないと厳しい気がします。

8-2.地域のWeb制作会社にメール営業

次に試したのが、地域のWeb制作会社にメールで営業する手法です。

地域のWeb制作会社に営業する手法に切り替えたのは、営業方法に悩んでいた時に1本のnoteを読んだことがきっかけでした。

＞＞ショーヘーさん：Web制作の仕事のとり方が分からない人に捧ぐ『直営業』の教科書

フリーランスのWeb制作者が営業方法をこれだけ詳しく解説しているnoteはなかなか少なく、初めて有料noteを購入して「めっちゃためになったな」と思える記事でした。

ステマではなくマジでいい記事だったので、営業方法がさっぱり分からない人はお金出してでも読むべきだと思います。

地域を狙う理由は、記事に書いてある有料の内容なので、ここでは控えますが、なるほどなって感じでした。

僕が住んでいる地域はド田舎なので、Web制作会社なるものは流石に存在しません。（夜はたまにイノシシが公道を歩いているレベルです。）

ただ少しエリアを広げると木更津市~千葉市の辺りはWeb制作会社があることが分かりました。

どの制作会社も「Web制作会社なのに公式HP終わってんなあ・・」みたいな感じのところが多かったですが笑、思い切って営業をかけてみました。

全部で10件をリストアップして、営業メールを送ってみたところ、数日後には3件ほど反応が。

そのうち１件は「すぐにでも案件紹介させてください！」ということになり、すぐに46,000円分を受注。

「ショーヘーさんのnoteすげー」って思いました。

読んでいる方が気になるのは「どんな提案文を書いたのか」というところですよね。

僕が送った提案文はnoteの内容を一部参考にしていますが、全く丸パクリではないので、今回特別に提案文を公開しておきます。

実際に反応のあった提案文は以下です。

はじめまして。

現在千葉県富津市を拠点に、フリーランスとしてWebサイト制作を行っている岡本優河と申します。

「Web制作を通して地域に貢献できる仕事がしたい」と周辺地域の制作会社様を探していたところ、〇〇様のホームページを拝見し、ぜひパートナーとして制作のお手伝いをさせていただきたくご連絡いたしました。

以下に私のプロフィールを記載いたします。

お忙しいところ誠に恐れ入りますが、ぜひご一読のほどよろしくお願いいたします。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

■経歴

高校まで群馬県で過ごし、東京の法政大学へ進学。在学中からITベンチャーで企画・営業・マーケなどを担当し、会社内でビジネスについて学ぶ。就活を考えた時に「自分も早く独立したい」と感じるようになり、独学でWebスキルを学んで、そのまま田舎に移住。卒業後はそのまま独立し、千葉県富津市金谷にあるフリーランスコミュニティ「まるも」にてフリーランスとして活動中。

■スキル

 HTML / CSS / Sass / Bootstrap / JavaScript / jQuery / PHP / WordPress / Adobe XD

■以下のような業務が可能です

・LP（ランディングページ）制作

・Bootstrap等のCSSフレームワークを用いたサイト制作

・Wordpressを用いたWebサイト制作

・JavaScript/jQueryを用いたアニメーション実装

※上記は全てレスポンシブ対応込みです

■ポートフォリオ

（※ポートフォリオ一覧を掲載する）

■制作費の目安

・コーディング1P（レスポンシブ対応込）　8000円～

—以下デザイン込み—

・LP制作　3万円～　

・コーポレートサイト制作（10ページ以下）　8万円～

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

私ごとですが、千葉県に移住してきて1年半ほどが経過いたしました。

今までは都内の企業とお仕事をさせて頂く機会が多くありましたが、より地元に貢献できるような仕事がしたいと考え、Webを通じてお手伝いさせて頂けることがあるのではないかと考えております。

上記内容をご覧いただき、もしご興味をお持ちいただけましたらメールにてご連絡いただけますと幸いです。

ご検討のほどよろしくお願いいたします。

　

とまあこんな感じで提案文を作って送ってみました。

真似するだけで割と反応は貰えるはずなので、ぜひ積極的にマネしてみてくださいね。

8-3.地域の事業会社にメール営業

制作会社への営業とほぼ同時並行で行っていたのが、地域の事業会社にメールで営業する方法です。

僕の住んでいる南房総は、もうハチャメチャな田舎なので、地域の企業を検索すると、めちゃくちゃ古いホームページが沢山ヒットします。

しかし地域に制作会社もなければ、Webができるフリーランスも少ないので、そのまま放置せざるを得ない状況に。

以前から「地域の中小企業には、めちゃくちゃ需要があるぞ！」と感じていました。

また僕がずっとベンチマークさせて頂いているWeb制作者の1人、浅見さん（@azamixx821）のnoteを読んだのもきっかけの１つ。

＞＞note：「田舎には仕事がないは幻想だった」 田舎フリーランスの生存戦略

記事の中で浅見さんは「田舎にはクリエイティブの仕事が溢れている」とおっしゃっていて、僕も田舎に住んでいる以上はチャンスがあるなと思っていました。

誰かがHPをリニューアルしなければ、古いHPはそのまま放置され続けるので、出来るスキルがある人が改善した方がいいはず。

「とりあえずやってみる」精神で「30件くらい送ったら1件くらいはヒットするっしょ！」と、愚直に公式ページの問い合わせフォームに提案文を送り続けました。

そして1週間ほど経った頃、ついに1つの企業から「興味があるので、話を聞かせて欲しい」との返信が！

僕は発狂するほど嬉しくて、実際に会いに行って、圧倒的な熱量でプレゼンした結果、

「実績は無くとも、若さと気概にぜひ任せてみようと思いました」

とまさかの受注。

本当に取れてしまった・・・と驚いたのとともに、愚直に営業して良かったなという気持ちが本当に強かったです。

今実際にお仕事させて頂いていますが、１からサイトリニューアルをする責任感とやりがいは、今まで味わったことのない楽しさがあります。

皆さんのお住まいの地域がどこであれ、必ず「HPなんとかしたいなあ」とぼんやり考えている企業の方は少なくないはず。

あなたの技術が大きく役に立つはずなので、勇気を出して積極的に企業にアプローチしてみてください。

9.これからWeb制作で稼ぎたい人へのアドバイス６つ

9-1.学習：Progateは絶対1周以上するな

僕が声を大にして未経験者の方に言いたいのは「Progateは絶対に1周以上する意味はない」ということです。

Progateはローカルで開発環境を整えてサイトを作っていく訳ではなく、あくまでWeb上で制作の簡単なシミュレーションが出来る程度。

全くプログラミングを経験したことの無い方にとっては、

  • プログラミングってそもそもどんな感じなのか
  • どの言語で何ができるのか

などの全体像を把握する上で非常に役に立ちます。

ただProgateを何周もして基礎知識を定着させる行為自体には全く意味がありません。

なぜならプログラミング基礎知識を日本史のテストのように暗記しても、実践で使えなければ全く意味がないからです。

初心者の方は「プログラミングをなるべく理解したい！」と思って、基礎知識に時間をかけ過ぎてしまいます。

ゆーが

僕も大学生の時にiOSのアプリ開発に挑戦した時に、基礎を叩き込もう！と躍起になって勉強しました。しかし、いざ開発段階になると「え？全然覚えたやつ出てこないじゃん・・」となり何のためだったの感がエグかったですね。

僕は前回の経験を活かして、不用意に基礎知識を叩き込むのをやめ、なるべく実践を意識するように心がけました。

Progateの段階では30%くらいの理解でいいので、なるべく早く実践に移るべきだと感じています。

9-2.学習：JavaScriptよりJQuery

Web制作をやってみてびっくりしたことの１つがJavaScriptとjQueryの学習コスト問題です。

基本的にはどの書籍にも「Webサイトの見た目を動かす技術はJavaScriptが使われているから学ぶべき」みたいなことが書いてあります。

でも実際制作を実践してみると分かるのですが、ほぼJavaScriptの技術は使いません。

手っ取り早く動きのあるサイトを作るなら、JQueryを使った方が早いですし、使いやすいです。

もちろん「JQueryはJavaScriptで出来ているから知っておくべき」論も正しいのですが、学習コストを考えるとちょっと多すぎでは？と思います。

僕はProgateでJavaScriptの全レッスン1周しましたが、実際の実務で使った技術は今のところ全体の10%に満たないですね。

JavaScriptよりもJQueryの使い方を積極的に覚えたほうが、結果的に制作スピードも上がっていくはず。

初学者の方はサイトに動きをつけるのはJQueryであるということを念頭に置いてみてください。

9-3.学習：WordPressは沼

大きな案件を取るために絶対に学ぶことになるであろうWordPress。

しかしWordPressの技術は本当に複雑で多様なので、追求していけばいくほど深みにはまっていきます。

実際に学習していくと分かるかもしれませんが、正直初心者的には結構難しいんですよね。

技術を突き詰めようと思えば思うほど、色々な技術を身につけられてしまうため「どこまで学習するのか」の線引きは重要な気がします。

僕の主観では、この記事で何度も紹介している『WordPressの教科書』の内容のChapter1~5（テーマの作成）まで出来れば、とりあえず問題ないのではないでしょうか。


［改訂版］WordPress　仕事の現場でサッと使える！ デザイン教科書［WordPress 5.x対応版］ Webデザイナー養成講座

技術の沼にハマって営業に集中できないと、どんどん稼げるフェーズまでいく時間が長くなってしまいます。

自分で見切りをつけて「どこまでをやるか」をしっかり考えておくように心がけましょう。

9-4.学習：全体的に習うよりも慣れろ

全体を通して、初心者の方へのアドバイスとしては「習う」ことよりも「慣れる」意識が重要であると考えています。

学習面でも営業面でも言えることですが「まだ自分は技術が足りないから・・・」と習う意識が強くなってしまうと、スピード感がなくなります。

それよりもまずは「経験して慣れること」を念頭に置いて、アクションを起こすことで、よりスピード感のある制作ができるように。

「習う」感覚ではなく「慣れる」感覚を身につけられるように常に意識するようにすべきです。

9-5.営業：フリーランスとして仕事を取りたいなら「学習」より「営業」

営業面のアドバイスとしては、とにかく「学習」することよりも「営業」することに重きを置くべきです。

未経験からWeb系のフリーランスになっている方で、お金を稼げている方を見ていると、技術があるというよりも営業力がある方の方が仕事が回ってきている印象です。

会社員としてであれば、ひたすらに技術力をつけて、生産性の高いエンジニアになることは最優先事項かもしれません。

しかしフリーランスの場合は、仕事が取れなければ、学習すること自体に全く意味がありません。

とにかく最初の仕事が取れるまでが大事なので、

  • 学習しながら並行して営業をする
  • 常に「早く営業しなくては！」という意識を持つ

などのアクションを取るように心がけましょう。

9-6.営業：身近な人の方が成功率は高い

最後のアドバイスとしては、営業を開始する際にぜひ身近な人から声をかけてみて欲しいということ。

僕もそうでしたが、スキルも人脈もない状態で、全く関係がない企業や個人から仕事を獲得するのは至難の業です。

クラウドソーシングならなおさら経験が浅い人に仕事が回ってくる可能性は少ないでしょう。

全く見ず知らずの人にアプローチするよりも、身近な人にアプローチした方が圧倒的に成功率は高くなります。

「Webサイトを１から作れる」という人材は、あなたの知り合い何人ほどいるでしょうか。

Web業界で働いている！など特殊な人を除けば、多くて1~2人くらいの知り合いしか思い浮かばないはず。

あなたはWebサイト制作が出来るというだけで、他の人よりも希少性が高い存在でもあるのです。

知り合いに営業するのが恥ずかしいという方もいるかもしれませんが、現実的に考えて１番成約しやすいため、ぜひ覚えておくことをおすすめします。

10.エピローグ：今後の展望

今回は僕がWeb制作を始めて半年間で34万円を受注するまでの全てを大公開しました。

僕自身も記事を書きながら、

  • あの時期は先が見えなくて辛かったなあ
  • もっとあそこ効率的にできたよなあ
  • あれはそもそも必要なかったなあ

などここ半年間を振り返ることができました。

気づいたら2万字以上にもなっていて、自分でも驚くくらい時間もかかってしまいました。笑

でもこの記事を読んで、今Web制作頑張ってる人が少しでも頑張ろうと思ってくれたら僕はそれで良いかなと思っています。

今後の僕の展望としては、今までやってきたこと（Web制作・Webライティング）にもっと深みをもたせていこうと考えています。

上半期はWeb制作スキルを高めることに割と時間を使って、仕事の幅を「横」に広げてきました。

これからは今のスキルを「縦」に深掘っていき、もっと仕事の規模感を大きくしたり、単価感を上げていけたらと思っています。

今考えているのは、中小・ベンチャー企業の社外Web担当者みたいなポジションですかね。

Webコンテンツの制作だけじゃなくて、マーケティング領域で深く関われたら、もっと面白くなりそうな気がします。

僕の話はこれくらいにして、皆さんはWeb制作でお金を稼げたとして「こうなりたい！」などのビジョンはありますか？

  • Web制作をしながら海外をビュンビュン飛び回る系フリーランスになりたい！
  • 今の仕事を辞めて独立して、今以上の給与を稼ぎたい！

など目的は様々かと思います。

そのビジョンが明確であればあるほど、きっと自分の望むような仕事が取れていくはず。

とかここまで偉そうにベラベラと話してきましたが、僕もまだまだひよっこ中のひよっこです。

まだまだ全然経験は浅いので、もっとクライアントの方に価値を提供できるように、初心を忘れずに日々精進していきます。

最後まで記事を読んでくれてありがとうございました！！

結構本気で書いた記事なので、思ったことがあれば、ぜひTwitterで何かコメント頂けると嬉しいです。

ではまた。