Web制作

【独学1年】業界未経験者がWeb制作で月収50万円を達成するまでにやってきたこと

2020/10/25

 

こんにちは！みさです。

埼玉県を拠点にWeb制作のフリーランスとして活動しています。

 

2019年の11月よりプログラミングの勉強をはじめ、1年が経ちました。

幸運にもフリーランスとして生活できるくらいになりましたので、今回はこの1年にやってきたことを記録に残していこうと思います。

 

これまでの実績は以下の通りです。

 

ひとつ前提として、私はエンドクライアントさん（個人や中小企業の経営者さん）から直接お仕事を受注し、進行管理から制作まで基本的にはまるっと対応することが多いです。

 

世の中にはたくさんのロードマップ、稼ぎ方、働き方がありますが、無料で読めますので１つの事例としてお楽しみください！

 

それでは、早速本題に入っていきます。

 

 

2021/7/28追記

こちらの記事が、リモートワーカーのための求人メディア【テレラボ】さんの記事でご紹介いただけました！！

フリーランスとしてリモートワークで新しくビジネスを始めてみたい方必見！注目ブログ「misablog」を徹底紹介！

 

 

Web制作独学：基礎学習編【2019年11月〜2020年3月】

基礎学習としてやったこと【2019年11月〜2020年3月】

 

基礎学習は、マナブさんのロードマップを軸に進めました！

 

【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】

【公開】プログラミング独立の完全ロードマップ【月20万を稼ぐ道】

 

 

初案件を獲得するまでのステップを３つに分けると、以下の通りです。

  • HTML、CSS、Bootstrapを学習して模写
  • JavaScriptを学習しつつ模写に動きをつける
  • PHPの基礎学習とWordPress独自テーマ制作

 

このとき私が大事にしていた事はこちら。

ポイント

・ とにかく学習習慣をつける
・ ハードルを下げつつ楽しく継続
・ Twitterで情報収集しつつ学習過程を発信

 

最初はとにかく楽しく「習慣化」と「継続」することを大事にしました。

私の場合は会社員しつつだったので、平日2時間、休日8時間程度を目安に学習していたかなと思います。

 

それでは、初案件を獲得するまでのステップを３つに分けて解説します。

 

HTML、CSS、Bootstrapを学習して模写

 

HTMLとCSSはみなさんご存知のProgateとドットインストールを利用しました。

その後は、CSSのフレームワークであるBootstrapを学習しました。

 

使用した教材はこちらです。

 

・たにぐちまことさんのYouTube動画

・しもむらともきさんのYouTube動画

 

 

どちらもYouTubeで「Bootstrap」と検索すると上位に出てくる動画です。

個人的には動画を見ながら一緒に手を動かす学習方法が一番しっくりきていたので、ぜひお試しください。

 

模写をする際に参考になった記事

こちらの、はにわまんさんの記事がとっても参考になりました。

 

Webサイトをコーディング模写するやり方と使用するツール

 

 

模写は誰しもが苦戦すると思います。

むしろ、一発ですんなりできる人なんていないのでは？と思うくらいなので、安心してください。

 

私の場合、12月にAirbnbの模写をした時にはもれなく苦戦しまくりでした。

ですが、脱サラした2月にまた再チャレンジして、ググればなんとか模写できる！と自信がつくところまでになりました。

 

諦めずに継続することが大事でした。

 

模写で手が止まってしまう場合は

「学習の角度を変えてみる」といいと思います。

Progateとドットインストール以外にも、こんな学習方法があります。

  • YouTubeやUdemyで動画を見ながら手を動かしてみる
  • 動画学習で理解しきれない場合は、本でも学習してみる

 

動画学習については、こちらがおすすめです。

 

・ [HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

 

 

私が基礎学習で何度もお世話になった、たにぐちまことさんの動画です。

声が心地よくて、説明がわかりやすくて、本当に神様のような存在です。

 

Udemyは頻繁にキャンペーンやセールをやっているので、実質2000円以内で買えると思います！

 

本での学習に関しては、こちらがおすすめです。

 

・ 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

・ ほんの一手間で劇的に変わるHTML&CSSとWebデザイン実践講座 →NEW!

 

 

私自身も動画学習の後に、書籍も活用しました。

書籍学習のいいところは、体系的に書かれているため、頭の中の整理と周辺知識の補完ができるというところです。

 

「Progateやドットインストールをやっても、模写で手が動かない…」という場合には、上記の本を手にとってみてはいかがでしょうか。

 

JavaScriptを学習しつつ模写に動きをつける

 

学習の目的が「Web制作」だったので、このあたりはあまり深掘りしてません。

JavaScriptの基礎をざっと把握して、jQueryのフレームワークを使いこなせるように練習しました。

 

使用した教材はこちらです。

 

・Progate（JavaScript / jQuery）

・たにぐちまことさんのjQuery入門

 

 

ここもインプット→アウトプットしつつ学習しました。

学んだ知識は模写したサイトに実装してみると、理解が深まります！

 

やっぱり模写がしんどい…という方へ

実は、ちょっとした朗報があります。

ここまでの基礎学習（HTML/CSS/JavaScript）をサポートしてくれる、０円のプログラミングスクールがあります。

 

・ TechAcademyの無料体験

 

 

ビデオチャットでのカウンセリング、オンライン教材を進めながらチャットで質問し放題、カリキュラムの最後には課題レビューまでしてくれます。

無料でここまでサポートしてくれるなんて、使わなかった私はちょっと後悔です。

 

「独学がしんどくなってきた…」という方だけでなく「最初から無料体験を利用して、効率よく基礎学習したい！」という方にもおすすめです。

 

PHPの基礎学習とWordPress独自テーマ制作

 

PHPとWordPressには何度も苦戦した記憶があります・・・。

 

模写ができれば案件獲得に進む方もいますが、私はこのときまだ会社員で、案件獲得にチャレンジする余裕がありませんでした。

退職する意思も固まっていたので、在職中は学習を続けることにしました。

 

使用した教材はこちらです。

 

・Progate（PHP/SQL）

・たにぐちまことさんのPHP/SQL講座

・たにぐちまことさんのWordPress開発講座

・しもむらともきさんのWordPress開発動画

・WordPressの教科書

 

 

たにぐちさんとしもむらさんには動画学習でお世話になりっぱなしでした＞＜

 

私はWordPressの学習に結構苦戦したので、動画学習や書籍など、角度を変えて学習しました。

１つの教材を一通り学習してみてもなかなかしっくりこない場合、別の教材を使ってみるのもありかと思います！

 

Web制作独学：初案件獲得編【2020年3月】

クラウドソーシングで初案件獲得のためにやったこと【2020年3月】

 

基礎学習を終えたら、いよいよ実践です！

私の場合はクラウドソーシングを営業の場所として選びましたが、これもあくまでたくさんの選択肢の中の１つです。

 

案件獲得までは以下の通りにすすめました。

  • クラウドソーシングに登録する
  • プロフィールやポートフォリオなど登録情報を充実させる
  • 提案の量×質×スピードを意識してとにかく提案と改善を繰り返す

 

クラウドソーシングはこちらすべて登録しました。

 

意外と穴場なのが、「ココナラ」です。

ココナラはサービスを出品してお仕事を獲得する場所のイメージが強いかと思いますが、実は公開募集に提案することもできます。

 

「仕事・相談を探す」というメニューがあるので、ここからお仕事を探して提案できます。

他２つのクラウドソーシングより1つの案件に対する提案数が少ないので、かなり狙い目です！

 

その他、クラウドソーシング営業のノウハウは過去の記事をご覧いただけたら嬉しいです。

２本の記事で、クラウドソーソングにおける攻めと守りについて、経験をもとにまとめています。

【保存版】クラウドソーシング営業で案件獲得するポイント10選

続きを見る
【実証済】クラウドソーシングでスカウトが来るプロフィール文を公開

続きを見る

 

初案件獲得の壁は高いですが、実現すると感慨深いです！

学習のペースは人それぞれなので、周りの進捗を気にせず、自分のペースで継続して初案件獲得を目指していくと良いと思います◎

 

Web制作独学：月収20万円達成編【2020年4月〜6月】

月収20万円達成までにやったこと【2020年4月〜2020年6月】

 

このあたりからは、どのスキルを深め、どのスキルを掛け合わせるかなど、本当に人それぞれだと思います。

 

私の場合は将来的にディレクション寄りのお仕事がしたいと思っていたので、コーディングのスキルだけを深めるのではなく、もっと視野を広げていこうと思っていました。

 

具体的に私がやったことは以下の通りです。

  • デザインの基礎知識を習得
  • SEOの基礎知識を習得
  • WordPressのテンプレートカスタマイズを習得

 

このときに私が大事にしていたことは以下の通りです。

ポイント

・ 目の前のお客様へ最大限の価値提供をする
・ 自分はどこに付加価値をつけるか考えつつ勉強をする
・ 勉強会や交流会にも参加して人との繋がりと視野を広げる

 

クラウドソーシングでの初案件獲得後、合計4件のお仕事をいただき、そのうち3件は継続してお仕事をいただけていました。

目の前のお仕事を必死でこなしつつ、足りないスキルを補っていく形で勉強も続けていました。

 

私が実務経験を積みつつ、勉強や行動してきたことを以下にご紹介します。

 

デザインの基礎知識を習得

クラウドソーシングで案件を眺めてみると、「コーディングのみ」の案件は少なく、競争率も高いです。

一方で「デザインとコーディング」の案件の方が多く単価も高いので、デザイナーさんと組むか、自分で勉強するかのどちらかになると思います。

 

私はデザインの知識もある程度は身に付けたいなと思ったので、とりあえず勉強してみることにしました。

ここでも、デザイナーを目指すための勉強ではなく、Web制作の仕事を受けるための最低限のスキルを身に着けることを意識しました。

 

実際に学習した内容は以下の通りです。

  • デザイン全般の基礎知識を本で学ぶ
  • 良質なWebデザインの見本を探せる参考サイトをブックマークする
  • AdobeXDの操作を学び、デザインカンプを作ってみる

 

このくらいであれば、2週間程度でも習得可能です。

ここでもインプットしたらすぐ実践を意識し、あとは仕事を取りながら実践でスキルアップする方針でした。

 

実際に読んだデザイン本

 

・ ノンデザイナーズ・デザインブック

・ なるほどデザイン

・ Webデザイン良質見本帳

 

 

どれも良本でしたので、いつでも読み返せるよう手元に置いています。

特に、「なるほどデザイン」と「Webデザイン良質見本帳」はイラストや写真が多く、感覚的に楽しく学べるので、デザイン学習初心者さんにはおすすめです。

 

デザイン全般の本と、Webデザインに特化した本の両方に目を通すといいと思います。

 

おすすめ参考サイト

 

・ Pinterest

・ 81-web.com

 

 

いろんな参考サイト集をブックマークしましたが、私はこちらの２つに落ち着きました！

 

デザインの基礎を学んだら、あとはひたすら良質なデザインを真似るのがいいそうです。

私もレイアウトや配色など、参考サイトからよくお借りしています。

 

XD操作を学ぶには

 

・ ふるさんのYouTube動画

・ たにぐちまことさんのYoutube動画

 

 

私が学習した当時はふるさんの動画にお世話になりました。

ですが、先ほどYouTubeで検索していたら、尊敬するたにぐちさんもXDの動画を出されていたため、こちらも有益なはず。

 

制作会社さんとお仕事するにはフォトショかイラレでカンプを作れるようになる必要があるかと思いますが、エンド案件ではそこまでのスキルは求められていない気がします。

 

XDは圧倒的に使いやすく半日もあれば操作をマスターできたので、デザインツールの１つ目にはおすすめです。

 

基本操作を学んだら、次は自分で手を動かしてデザインカンプを作ってみると、スムーズに実務に入れます。

 

SEOの基礎知識を習得

クラウドソーシングでお仕事をみていると、業務範囲のなかに「SEO対策」と書かれている案件もよくあると思います。

 

私がSEOを学んだ教材はこちら。

 

・ manablogのSEO対策の完全マップ

・ バズ部のSEO関連記事

 

 

本も何冊か手に取りましたが、上記サイトで十分勉強できました。

SEOの基礎をmanablogで学習し、さらに理解を深めたい場合はバズ部さんの記事をどうぞ。

 

無料の情報で勉強できる時代、本当にありがたいです。

 

さらに付加価値をつけるために

そもそもSEOとは「Webマーケティング」手法のひとつです。

この「Webマーケティング」はWeb制作と相性が良く、理解すればするほど付加価値になります。

 

私もまだまだ日々勉強中ですが、Webマーケティング初心者でも手に取りやすい書籍をこちらの記事にまとめました。

【初心者向け】Web制作の付加価値になるおすすめマーケティング本７選

続きを見る

 

特にお客様から直接お仕事を受注するスタイルの場合、Webマーケティングの知識は必須です。

Web制作とWebマーケティングのスキルを掛け合わせて、「サイトを作るだけのWeb制作者」から「売上アップに貢献できるWeb制作者」にレベルアップしていきましょう！

 

WordPressのテンプレートカスタマイズを習得

ここが、私の時給が上がったきっかけだと思います。

それまでWordPress案件は「デザインカンプ→コーディング→WordPress化」という手順がマストであるという先入観を持っていましたが、必ずしもそうではないことに気づきました。

 

私に気づきを与えてくださったのが、ちづみさんが運営されているゼロイチラボのWordPress講座です。

 

こちらの講座で「SnowMonkey」というWordPressのブロックエディタを使って制作するテンプレートカスタマイズを学びました。

加えて、このスキルでお役に立てる案件も数多くあることを知りました。

 

SnowMonkeyを使ってみたい！という方にはこちらの動画がおすすめです。

 

・ちづみさんのYouTube動画

・たっくんさんのYouTube動画

 

 

最近は「NoCode」や「ローコード」という言葉もよく聞くようになり、ゼロからコードを書いて制作するだけではなく、既存のテンプレートをカスタマイズして制作する人も多いと感じています。

 

こういった制作手法も身に付けておくと案件に合わせて使い分けができるので、特にエンド案件でお仕事したい人には習得をおすすめします！

 

Web制作独学：月収50万円達成編【2020年7月〜9月】

月収50万円達成までにやったこと【2020年7月〜2020年9月】

 

6月に月収20万円を達成し、少し安心感が芽生えました。

とりあえず最低限の生活を送れるくらいはお仕事ができたのですが、やはり年始に宣言した目標を達成したい気持ちもあったので、次のフェーズにチャレンジしました。

 

具体的に私がやったことは以下の通りです。

  • 小規模事業者持続化補助金を理解
  • 開業届を出して屋号で事業用サイト制作
  • 営業パートナーと提携し案件受注を仕組み化

 

このとき大事にしていたことがこちら。

ポイント

・ 単価を上げるための行動をする
・ 信頼を高めるための行動をする
・ 安定してお仕事を得られる仕組みをつくる

 

自分の収入をどう上げていくかを考えたとき、自分がWeb制作を始めた目的と年齢を考慮すると、作業量を増やして収入を上げるのはやめようと思いました。

 

そうすると、いかに「単価」や「時給」を上げて「安定的」にお仕事をするかが大事だと思ったので、そこから逆算してやるべきことを考えました。

 

加えて「エンドクライアントさんとお仕事したい」という理念もあったので、そこを考慮して実施した取組を以下にご紹介します。

 

小規模事業者持続化補助金を理解

 

補助金については、別の記事にて詳しく解説しています。

渾身の記事なので、本気で補助金をマスターしたい方のお役に立てると嬉しいです。

フリーランスWeb制作者が知っておくべき補助金は？【結論：小規模事業者持続化補助金】

続きを見る

 

開業届を出して屋号で事業用サイト制作

 

フリーランスとしての基盤を固めました。

個人名で仕事をするより、「屋号」と「代表」という肩書きがあった方がお客様からの信頼獲得に繋がるかなと考えました。

 

わたしの場合は以下の手順で準備をしました。

  • 屋号を考える
  • デザイナーさんにロゴを作ってもらう
  • 事業用サイト（LP）を作る
  • 事業用の口座とクレカを作る
  • 税務署に開業届を出しに行く

 

開業届け？確定申告？何が経費になるの？という場合には、税理士の大河内先生の本がおすすめです！

私も理解しきれていない部分もありますが、あとは確定申告を一回経験してみて来年から改善していこうと思います。

 

上３つの対応は必須ではないですが、下２つの対応はフリーランスとして独立するにあたってはマストだと思います。

私自身このあたりを整えるのが遅すぎたので、ぜひ反面教師にしていただきたく、こちらの記事を書きました。

【脱サラ応援】会社員→フリーランス独立時にやるべきことを３ステップで解説

続きを見る

 

脱サラ予定があったり、副業で年20万円以上の一時所得になりそうな方は、ご参考までにどうぞ。

 

営業パートナーと提携し案件受注を仕組み化

 

現在はWeb幹事さんとお仕事をさせていただいています。

 

自分が提供できるスキル（パッケージ）を持って、お仕事がある程度自動的に入ってくる「仕組み」を作ると比較的収入が安定しやすいと思います。

 

必ずしも「営業パートナー」でなくても、「Web制作者以外のコミュニティでの繋がり」や「既存のクライアントさんから紹介をもらう仕組み」などでも良いと思います。

 

仕組み化の重要性については、こちらの動画が参考になります。

 

・お金を稼ぐには「仕組み作りが」必須な話【エンジニアでの失敗談】

・【中上級者向け】月100万円を稼ぐ方法【論理的なビジネス講座です】

 

 

有料級の情報に感謝です...！

今の自分にはちょっとレベルが高いかな？という情報も、ブックマークをしておいて後から見返すようにしています。

 

今後も自分のペースでコツコツ前進です。

 

まとめ

まとめ

 

ここまでは、あっという間の1年でした。

とはいえまだまだ未熟者なので、今後もコツコツ積み上げしていきます。

 

最近は、奇跡のような対談が実現したり、1年前の自分が全く想像できなかったことが現実になりつつあります。

 

今の人生が送れているのはいろんな方々との出会いや支えがあってこそなので、その気持ちを忘れずに今後も精進したいと思います。

 

最後に、今まで自分が大事にしてきた理念を再確認して終わりにしたいと思います。

 

最後までご覧いただき、ありがとうございました！

 

-Web制作

Copyright© misablog , 2024 All Rights Reserved.