※本ページは、アフィリエイト広告を利用しています。
はじめに
初めまして、未経験からWeb制作をしている主婦ちい(@tsurupiyooo)です！
主婦の方で在宅ワークをしたいと考える人は多いのではないでしょうか？
会社勤めもしているし、家に帰れば家事に育児‥とにかく時間がない！
できれば家にいながら、家事や育児の合間に自宅でできる仕事に転職したい‥
時間に縛られず、好きな場所・タイミングで働けるフリーランスになりたい！
今の会社では給与も上がらないので、子どもの教育資金や老後資金の蓄えを増やすために、何か副業をしたい！
このように考えてこのブログに辿り着いた人もいるかもしれません。
そこでおすすめなのが「プログラミング」を学習して「Webサイトを制作」するスキルをつけることです!
とはいえ‥
プログラミングって難しそう、高いお金払ってスクールに通わないと身につかないんじゃない？？
未経験の主婦がプログラミングで稼ぐのは可能なの？
そんな疑問をお持ちの読者様も多いかと思います。
なぜなら私も最初はそう思っていたからです！
「そもそもお金がないんだから‥高いスクールとか無理〜(⌒-⌒; )」
そこでこの記事では、プログラミング未経験だった主婦の私が、独学で在宅コーダーになり、Web制作副業で稼げる様になるまでの学習方法を公開しています！
\この記事はこんな人におすすめです/
- プログラミングで稼ぎたいけど学習方法がわからない
- なるべくお金をかけずに学習したい
- 案件の獲得方法など不安
- 未経験からWeb制作会社に転職したい
- 育児や会社員をしながらでも副業でWeb制作できるのか知りたい
1つでも当てはまる方はぜひこの先の記事を読んでみてください！
プログラミング未経験の主婦でも独学で稼ぐことは可能です。私の実体験です。
結論から言うと「プログラミング未経験の主婦でも独学でWeb制作スキルをつけて稼ぐことは可能」です！
現に私は子どもを出産して、育児休業中から独学でプログラミング学習を開始し現在以下の状態になりました
副業でのWeb制作の売り上げが7桁突破！
接客業からWeb制作会社の正社員として在宅ワークに！
1年前はパソコンすら持っていない状態からのスタートでしたし、
金銭的な理由でプログラミングスクールには通えなかったので学習はほぼ独学です。
会社員として働きつつ、育児をしながらの学習だったので、学習時間をガッツリ作ることも難しかったです。
そんな私でも案件受注から3ヶ月でトータル約120万円の売り上げを上げることができました。
Twitterでこちらについて発信したところ
多くの方からDMでご相談を頂いたり、知人にも学習について相談されることが多くなりました。
Web制作のお話ができる方が増えて大変嬉しい思いでいっぱいです！
私のようなごくごく普通な主婦でも‥
元々パソコンに詳しくなくても‥
育児と家事と仕事で時間がなくても‥
Web制作をお仕事にしたり、稼ぐことは可能です！
ですが私は独学で走り出し、ネット上に転がる様々な情報をあちこちから拾い
くねくね道を進んだので結構遠回りをしました（笑）
（なぜか途中でFP試験にチャレンジしようとして学習をやめたりしました）
そんな私が、今思うことは1つ
初めに学習のロードマップをしっかり立てれていれば、もっと早く目標を達成できただろうな‥！
そこで今回は
そんな過去の私のような思いを抱える人が1人でも多く、最短の道で目標を達成してもらうことを目的として
私の学習のロードマップを記事にしようと思いました！
読んでいただけた人のちょっとでもお役に立てることを願って書いたら結構長文になりました（笑）
ゆっくり読んでいってくれると嬉しいです♪
Web制作の最適な学習方法は時期によっても変わってきます！
本記事では、常に内容を見直し、私が考える最適な学習方法をご案内していきます！
プログラミング学習のコツと事前準備について
プログラミングを学習する流れとしては
「知る」→「慣れる」→「理解する」
こんな感じだと思います。
これから学習を始める方のほとんどは「プログラミング言語とはなんぞや？」状態だと思います。
なのでいきなり全てを理解しようとしたり、丸暗記しようとするとほとんどの人が挫折します！
まずは「知ること」が大切なので、焦らず手を動かしていきましょう！
プログラミング学習のコツ① 諦めず学習を継続する！
そしてプログラミング学習で1番大切であり、大変なこと‥
それは継続することです！
今在宅ワークの需要の高まりから、プログラミング学習を開始する人が非常に増えてきました！
SNSを見ればライバルが多く感じると思います。
ですが焦る必要はありません‥
なぜならほとんどの人が挫折していってしまうからです！
学習期間は先が見えなくて苦しい期間でもあり、
このまま学習しても無駄なんじゃないか？と途中でやめてしまう人が多いんです。
私も途中で違うことを勉強したり、私にはWeb制作を仕事にするのは無理だ‥
と何度も諦めかけました。
ただ私の場合はどうしても諦めきれず、1日に少ししかコード書けない日があってもとにかく続けました。
朝は早起きして、仕事の昼休みもコードを書いて少しずつでも前進しようと我ながら頑張りました。
当時の学習スケジュールはこんな感じです。
こんな感じでなんとか一日5〜6時間捻出していました！
こうした自分自身の経験から、成果を出すために本当に大切なのは継続することだと強く思っています！
プログラミング学習のコツ② 継続しやすい環境を作る
継続するためには実は根性だけではどうしようもない部分もあります。
なぜなら人は性質的に変化を嫌う生き物で、変わろうとすると「ホメオスタシス」という強烈な邪魔者が入るのです‥
ホメオスタシスとは？？
人間には、そもそもホメオスタシス（homeostasis）恒常性維持機能が備わっています。
ホメオスタシスとは体が変化から一定の状態を維持しようとする働きのことです。
例えば、周囲の気温が高くなっても、自律神経が機能し、汗をかいて体温を一定に調節しようとする機能です。
https://selfcom.net/2021/01/29/%E5%A4%89%E3%82%8F%E3%82%8A%E3%81%9F%E3%81%84%E3%81%91%E3%81%A9%E5%A4%89%E3%82%8F%E3%82%8C%E3%81%AA%E3%81%84%E3%81%AE%E3%81%AF%E3%83%9B%E3%83%A1%E3%82%AA%E3%82%B9%E3%82%BF%E3%82%B7%E3%82%B9%E3%81%AE/
「ホメオスタシス」は心理的にも働き、変化することを妨げようとします。
だから自分の「意思」や「根性」だけで変わるのが難しいのです。
そこで有効なのは勉強が続くような環境作りです！
わたしは継続できる環境つくりの為に以下のようなことをしていました。
- Twitterで学習記録の発信
- 家族に学習している事を宣言する
- 同じように学習している人とつながる
基本的に一人で決めてやろうとすると、やめてしまっても周囲に影響がないのであきらめるハードルが低いです。
なのでできるだけ周囲の人を巻き込んだりして、諦めるハードルを高くしておくと挫折しにくい環境になります！
あとTwitterなどのSNSで発信することで同じように学習をしている人とつながれたり、意識高く頑張る人を見ることで「自分もがんばろう！」という気持ちも強くなります。
私はTwitterの活用で学習・案件獲得・転職と全てに大きな影響を受けました！
ほとんどの人にとってプログラミング学習は「未知の世界」です。
学習中たくさんわからないことや壁にぶち当たります。
でも友達や職場の人、知人の中でプログラミンを学習している人っていますか？？
私の場合はいませんでした。
身近に質問できる人がいない、周りにこんなに勉強している人がいない
こんな状況だと高確率で挫折しそうになります‥
そこでTwitterアカウントを作成し、学習記録を毎日発信してみましょう！
同じように学習中の仲間ができたり、メンターになる人と出会えたり、優良な情報を得られます！
そして人間は不思議と「宣言」することで実行したくなります。
まずは「今日学習すること！」とか簡単な内容でいいので毎日発信してみましょう！
Twitterを通して案件を探したり、転職先を探したりすることもできるし、制作実績などを見えるようにしておけばそこからお問い合わせをいただいてお仕事を受注することも十分にあります
プログラミング学習のコツ➂ 調べる力をつけよう！
実はプログラミング学習中にわからない事があっても、その答えはインターネット上にあることが多いです。
なのでじぶんが求めている答えにたどり着くための調べる力が必要です。
ググるコツとしては
➀わからないことをそのまま検索
➁検索結果によりよいワードがあればそのキーワードで再検索
このように繰り返し検索して答えにちかづいていく感じです。
また実際の仕事の中でもこの調べる力はとても重要になります。
調べてわかったことは忘れないようにブックマークをしたり、notionなどのツールをつかってまた困ったときに見返せる様に情報をまとめておくのがお勧めです。
ググっても該当の記事が出てこない‥
そんなときはこちらのteratail(テラテイル)というサイトがおすすめです！
ITエンジニア特化型Q&Aサイトで、無料で質問ができます。（エンジニア版Yahoo!知恵袋みたいな感じです）
ここのやりとりを見ているだけでも勉強になるし、自分の問題解決のヒントが見つかったりします！
今回のロードマップについて
プログラミングと一口に入っても、言語も様々で習得する言語によってやる仕事も変わります。
私の場合はHTMLやCSSなどの「マークアップ言語」と呼ばれるものを学習して、Webサイトの見た目を作る「コーダー」になりました。
コーダーの仕事はデザイナーがデザインしたWebサイトの見た目を「マークアップ言語」を使て忠実に再現し、さらに「JavaScript」や「jQuery」を使って動きをつけたりするのが仕事です。
私はWeb開発とかをしてアプリを作れるようになりたいな〜
そんな方には今回の私のロードマップはお役に立たないかもしれません。
今回のロードマップは上記のような「コーダー」としてWeb制作のお仕事に携わる技術を学ぶための学習方法になります。
コーダーとしてのスキルがつけば正社員としてWeb制作会社へ転職や就職した場合でも在宅で仕事ができる可能性もあります。
またフリーランスとして個人で仕事をしたい場合も、Web制作会社などからコーディングのお仕事をもらう事で生計を立てることができます。
コーダーとしてのスキルは特に小さいお子様がいるママさんにはおすすめです！
まずは学習環境を整えよう！
学習に必要なものを揃えていきましょう♪１００均で手に入るものもありますよ〜
なにはともあれ、パソコンが要ります！
まずはパソコンを持っていないよ〜
って方はパソコンを必ず用意しましょう！（当たり前すぎですね^^;）
とはいえ、家にあるならそれを使えばいいし、初めから最新・高機能なパソコンでなくても大丈夫です。
職場のパソコンはWindowsで「hp」なんですがタッチパネル操作もできて使い勝手が良いです。
同じメーカーでググってみたら「Amazon限定」商品で6万円台、メモリ8GB、容量128GBとそこそこ良さげなものあったので参考までにチェックしてみてください。
ただ、個人的には「Mac」がおすすめです。
なぜかというとエンジニア界隈では「Mac」使っている人が多いんです。
なので、学習中や仕事で困った時に、ネットで色々ググるとき大体「Mac」前提！てなことが多いです。
パソコン選びに迷う方はよかったら下記記事を参考にしてみてください♪
学習環境を快適にして作業効率をアップしよう
作業効率アップにつながるグッズを簡単に紹介します
パソコンスタンド
＊メリット
- タイピングしやすくなる
- 目線が上がって姿勢が良くなる
- パソコンの放熱効果がアップして動作が安定する
パソコンスタンドは大きめのやつもあるんですけど、こちらが折り畳めるので外での作業にもおすすめです。
100円ショップにも550円くらいから売ってあったりするんでそれでもいいかも
ブルーライトカットメガネ
メリット
- 目の疲れを軽減
パソコンに向かっている時間はめちゃくちゃ長いので、目のことを考えてブルーライトカットメガネの使用をお勧めします。
とはいえ、デザイン性とかを求めないなら安いものでも全然OKだと思います。
私も300円ショップとかで買いました（笑）
下記商品は890円で安い割に評価高かったので参考として載せてます。
モニター
メリット
- パソコンとモニターと別々の画面を出して同時に操作できる
- 大画面で見やすい
モニターはもう初期から用意していた方が良いです！
作業効率が全然違います‥！
ノートパソコンとモニターを経由してマウスを動かせることに感動しました（笑）
BenQの商品は目に優しくてコスパも良いです、下の商品は13000円くらいです。
出力端子が何タイプ対応かは気をつけて購入しましょう！
私はMacBook使っているのでUSB-C対応で充電しながら出力もできるタイプにしました。
プログラミングで稼ぐまでの学習ステップ
おおまかに以下の流れで学習していきました！
これから具体的に各章で学習方法や使った教材についてお伝えしていきます！
STEP1「知る」ための学習方法
無料で始められるプログラミング教材を使って「知る」ところから始めましょう！
下記サイトがプログラミングの登竜門とも言えるサイトです。
個人的にはゲーム感覚でとっつきやすい「Progate」からのスタートがおすすめです！
「Progate」はスマホアプリでもできるので通勤中や、病院の待ち時間でもやってました
どちらのサイトも途中から有料（月額1100円）になるので、だらだらやらずサクッと進めていきましょう。
またここで完璧に理解することは難しいので、とりあえず理解してなくてもOKです。
ここでは「HTML」「CSS」「JavaScript」「 jQuery」「PHP」「Sass 」「メディアクエリ」あたりのコースを終わらせましょう。
また「ドットインストール」ではより実践的な環境でコードを書いていきます。
Webサイトを作るためにはコードを書くための「エディター」が必要です。
「ドットインストール」ではそれを実際にダウンロードして動画学習をします。
こんな学習方法には注意！
・コードをノートに書き写して覚えようとする→暗記するより、より多くのコードに触れて知識を増やしましょう！
・何周もして完璧に解ける状態を目指す！→プロゲートの完璧は目指さなくてOKです！
・レベル上げに夢中になる→これは本当に無意味なのでやめておきましょう(^-^;
2022/1/7追記
最近発売されたこちらの書籍は初学者の方にもおすすめです。
知人もこちらの本「かなり分かり易い！！」と絶賛していました(^^)
STEP2 プログラミングに「慣れる」ための学習方法・教材
コーディングに慣れるためにサイトを模写したり、カンプデザインからのコーディングをしてみましょう
既存サイトの「模写」をしてみよう！
模写は既存のサイトをそっくりそのまま真似して作ることを言います。
模写するときは綺麗なコードとかはさておき「完走」を目指しましょう！
模写ついては必要ないという意見もありますが、私としてはGoogle Chromeの検証ツールを使う練習になって、後の仕事でも生きてくるかなと思っています。
なので模写ばっかり何サイトもする必要はありませんが、1〜2サイトぐらい作って次に進んでみてください。
模写をするときはブラウザ環境を整えましょう。
検証ツールは学習期間だけではなく、実務でも結構使うので必須機能です！
詳しい使用方法はサルワカさんの記事を参考にしてみてください。
サイト模写するなら「LINE」のサイトはシンプルで作りやすいのでおすすめです。
（とりあえず動きはつけなくていいので構図だけ真似して作りましょう）
ヒロコードさんのYoutubeの模写してみたなどわかりやすくてオススメです！
カンプデザインからコーディングをしてみよう
模写ばかりしていても、実案件とのやり方とは異なってきます。
コーディングをする際はデザイナーが作成したデザインデータをもとにコーディングをすることになります。
デザインデータは主に以下のような種類があります（こちら以外もあります）
・Photoshop
・Illustrator
・Adobe XD
・Figma
PhotoshopやIllustratorはAdobeのソフトを有料で購入しないと扱えないので、ここではソフトがなくてもできるAdobe XDで作られた無料のデザインカンプからのコーディングができるサイトをいくつかご紹介します！
コーディング練習用のデザイン 〜お花屋さんのLP編〜
デザイナーさんがデザインされている架空のお花屋さんのLPをイメージしたサイトです。
ポートフォリオにも掲載OK。
PEGIN BLOGさんのサイト
PENGIN BLOGさんでもデザインカンプ配布サイトをまとめてくれています！
Codesstep 作って学ぶコーディング学習サイト
最初は簡単なデザインから徐々に難しいデザインを段階を踏んで学べます。
CompCamp
営業支援コミュニティcodolifeでメンターをしている現役デザイナー兼コーダーであるまさひろさんが運営しているサイトです。随時デザインカンプが増えいていくのでいつでも新しいデザインをコーディングできます！
またコード解説などもされる予定との事です！
ここまでXDのカンプデザインを紹介してきましたが、実務では「Photoshop」や「Illustrator」を使うことが割合としてはまだまだ多い印象です。
私は初案件までこれらのソフトを触ってこなかったので‥
インストールに時間がかかり操作も複雑で非常に苦労しました（笑）
なのでお財布に余裕がある方はソフトを購入してこういったカンプデザインにも対応できるようにしておくといいかなと思います。
通常コンプリートプランは60000円ぐらいするんですが、こちらのデジタルハリウッドが販売しているAdobeマスター講座
を購入すると、学生価格の39,980円（税込）で購入ができて、さらに以下の講座がついてきます！
Adobe Creative Cloudの基礎をマスター
全3ヶ月（動画閲覧 1ヶ月＋課題作成 2ヶ月）
Adobeソフトのコンプリートプランを購入するなら、一番お得な購入方法です！
JavaScript（jQuery）やCSSアニメーションを学ぶ
ここまでは動きをつけたり、アニメーションについてはあまり触れずに学習を進めていますが、実案件では定番のよく使う
「動き」があって、「JavaScript（jQuery）」や「CSS」でアニメーションを作っています。
あくまで「Webサイト制作」をするだけならそこまで高度な技術は不要ですが、
「JavaScript」の学習をして理解することでより難しい実装にも対応ができるようになるので仕事の幅も広がります。
私はこの辺りは動画や本で学習しました。
Udemyの動画講座
Udemy
は動画で色々なコンテンツを学習できるサイトで、プログラミング学習教材もたくさんあります
元々の講座代金は2万円と結構高いんですけど、セール時には80％OFFなど安くなります。
Udemyでは以下の講座を受講しました！↓
【学習内容】
- 本格的なWEBサイトを作成する方法について学びます。
- Sass（※以下CSSと記載）、JavaScriptの基礎について深く学びます。
- CSS、JavaScriptの実践的な記述について深く学びます。
- CSS、JavaScriptアニメーションの実装について学びます。
- 最新の実践的なWEB画面の作成方法について深く学びます。
- CSS、JavaScriptのコードの最適化、安定化について学びます。
- 維持管理、持続可能なコードの記述方法について学びます。
こちらの講座は19時間ほどで終わる内容で、コーディング作業を早くするための「Sass」についても取り扱っています。
さらに1つのWebサイトを作り上げてサーバーに公開するところまで学習できます！
さまざまな動きを学べる本「動くWebデザインアイディア帳」
これは学習期間中ではなく、最近購入したのですがWebサイトでよく使う動きが網羅されていて手元にあると辞書感覚で使えます。
こちらはWebサイトでもコード例とか基礎知識を公開してくれているので購入前にチェックしてみるといいかも。
その他おすすめ教材
しょーご（@samuraibrass）さんは有名な方なのでご存知かもしれません。
コスパの良い教材を色々出されているんですが、最近このPhotoshopからコーディングができて、サーバーにアップするという納品のところまでを体験できる教材をリリースしてくださいました！
添削もしてもらえて、最終的に営業で使うためのポートフォリオサイトにも掲載OKです！
価格も2480円（2021/6/29現在）とお手頃です。
私はPhotoshopからのコーディングもサーバーアップもぶっつけ本番ですごく困ったし、不安でした。
なので一度学習しておくと余裕を持って案件を受けられるし、良い仕事ができれば継続案件にもつながります。
じゅんぺい（@junpei_sugiyma）さんというWeb制作フリーランスさんが「実務で使った2年分のコーディング&WordPressメモまとめ集」というコーディングをまとめたものを発売されています！
これは実務で実際に使われるコードばかりのっていてコピペで使えたり、まとめ方など非常に勉強になります。
コーディングの仕事ってある程度パターン化してくるので、こういうものがあるとのちのち時給アップにも繋がります！
STEP3 WordPressを学ぶ
ここまででデザインデータからのコーディングまでできるようになっているので、
このスキルがあれば1〜5万円ぐらいの案件は受注して仕事としてやっていけると思います。
ですがそれだと小額の案件をたくさん受注しないとなかなか稼ぐことができないので、WordPressまでの学習を済ませた方がお仕事の幅も広がるし、10万円以上の高額案件も受注できるようになるので WordPressまでは理解しておきましょう！
WordPressって何？？簡単に解説
WordPressってなに？？
WordPressとはコンテンツマネジメントシステム（CMS）というものです。
私的な WordPress解説
Webサイトって作ったら終わりじゃなくてそれを実際に使う「お客様」がいますよね。
サイト制作して納品した後にお客様側で
「店舗をリフォームしたから店舗写真変えたいな」
「会社移転したから住所変えたいな」
こんなふうにちょっとした更新したいって場面が出てくるんですけど、
これまで学習したHTMLやCSSってプログラミング知識がない人が、いじって更新って難しいですよね？？
なのでそれをプログラミング知識がない人でも操作しやすく、管理がしやすい状態にしてくれるのが WordPressなんです！
なのでこれから学ぶことは、これまでHTMLで書いたコードを WordPressという仕組みに組み込んでいくやり方を学んでいくというイメージです！
WordPress構築のためにローカル環境構築しよう
WordPressで制作したサイトをネット上に公開するためには、「サーバー契約」してそこに WordPressをインストールして～
ファイルをアップして…といった手順になりますが、そうするとサーバー代が月々1000円ずつぐほどかかります。
なので初めは「ローカル環境」というインターネットにつながっていない環境に WordPressサイトを立ち上げて構築していきます。
色々な方法があるんですが私は「Local by Flywheel（ローカルバイフライホイール）」を使っています。
下記公式サイトからインストールできます！
インストール手順についてはこちらのサイトで画像付きで説明してくれています
【Mac】
【Windows】
また「サーバー契約」については別記事で説明予定ですのでそちらを参照してください。
WordPressの学数教材
私は以下の教材で学習しました！
- たにぐちまことさんとアキユキさんのYouTube
- 書籍「WordPressの教科書」
- Udemy動画教材
Youtube動画
Youtubeは無料なのに学習に役立つ情報が多いです。
WordPress学習では特に「たにぐちまこと」さんと「アキユキ」さんの動画に助けられました。
たにぐちまことさん WordPress開発講座
アキユキさんの WordPress連結講座
WordPressの教科書を1周する
Youtube動画と教科書はどちらからやっても大丈夫です。
こちらの WordPressの教科書は完成させたらポートフォリオとして掲載もできます。
正直最初は何がなんだかわからない状態かと思いますが、最後まで頑張って進めていきましょう！
電子書籍版もあります
Udemy動画教材
またまた出ました、Udemyです！
WordPressは2つです！
こちらは先ほど紹介したYouTube動画のたにぐちまことさんの講座です。
Youtubeは入門編でこちらが実践編です。
WordPressの裏側までしっかり理解してと実際のお仕事でするような「 WordPressテーマ」を開発をしていきます。
学習内容
- PHPを利用してオリジナルテーマファイルやプラグインの作成
- フックの知識やテンプレート階層の知識
- ショートコードやカスタム投稿タイプ・カスタム分類・カスタムフィールドについて
こちらはサーバサイドを学んでいく講座です。
WordPressってPHPという言語を使って作られているので、そこを理解していくための講座です。
コーディングのお仕事だけする場合はここまで触れることはあまりないのですが、WordPressを使った実装案件をする場合はこの仕組みや考え方がわかっていないと乗り越えられない様な事も出て来ます。
学習中はなかなか完全理解するのは難しいですが触れておきたい部分です。
学習内容
- PHPと MySQL（MariaDB）の基本をプログラミング言語の初心者でもわかりやすく学べる
- WordPressや EC-CUBEといった、ブログシステム、ECシステムカスタマイズの知識がつく
- 本格的なシステム開発を体験し、最後は Twitterに似た掲示板システムの開発を体験できる
- サーバーサイドプログラミングの世界を学べる
STEP4 制作実績を3つほど作る
ここまでくればコーディングスキルやWordPressのスキルもついていると思います。
そして実際営業するときは（転職の際も一緒です）ポートフォリオサイトという制作実績を集めたものが必要になります！
いくら履歴書や面談で「これこれができます！」と言っても説得力がないし、そもそも面談すらしてもらえません（ ; ; ）
転職活動で最初のうちは履歴書だけ送ってたけど、どこも門前払いでした‥
ただここまでの流れを一通りこなしていると、制作実績として提出できるサイトがもう3つ以上あるはずなのでそれを使って営業をしていきましょう！
Basic認証をつけよう
Basic認証とは？
特定のIDとパスワードを設定して、それを知っている人だけが対象のサイトを閲覧できるように鍵をかけておくようなことです。
ポートフォリオサイトに載せる制作実績は架空サイトなどが多いので、それを誰でも見れる状態があまり良くないのあります。
なのでBasic認証をつけてから掲載するようにしましょう！
下記サイトでBasic認証のつけ方を紹介しています。
STEP5 ポートフォリオサイトを作ろう
ポートフォリオサイトを作って営業準備をしましょう！
デザインや動きにこだわったサイトを自分で作るのもいいんですが
ポートフォリオ作りにこだわりすぎていつまでも営業にいけない‥
なんてことになるとお仕事がいつまでもできません（笑）
実際私も営業初期はポートフォリオは特に作らず、無料で実績を載せれるサイトを使ったりしました。
参考になりそうなサイトがあるのでこの中から作ってみてもいいと思います
私はこの中の「MATCHBOX(マッチボックス)」を使ってポートフォリオを作りました。
あとは「ペライチ」や「STUDIO」などのノーコードツールでサクッと作ってしまうという手もあります！
STEP6 いよいよ営業活動をしよう
お疲れ様でした！ここまでで営業前準備ができました！
代表的な営業先としては以下のようなところがあります！
・
それぞれの違いや特徴について簡単に説明していきます！
エンドクライアントとは？
TwitterやSNSで「エンド営業」！という言葉を聞いたことはありませんか？
エンド営業というのはホームページを必要としているクライアントに直接営業することです！
ホームページを必要とするクライアントというのは例えば企業だったり、飲食店、エステサロン、美容室、ジムなどの経営者です。
こうしたクライアントのことを「エンドクライアント」と言います。
対象となるお客様はホームページやWebについてあまり知らない場合が多いので、こちらがある程度リードしてお仕事を進めていく必要があります。
なのでコーディングのスキルだけではなく、Webサイト制作に関わる一連の流れを把握してディレクションする能力も必要になってきます。
＊メリット
- 直接クライアントと繋がれるのでお仕事は高単価になりやすい
- スキル感よりもクライアントの求めているものを作ることが重要なので、自分のスキル感に合わせて作りやすい
- 制作したサイトを実績として公開できる可能性が高い
- その後のWebサイトの運用や更新作業のお仕事をお任せ頂ける場合もある
＊デメリット
- 継続の案件に繋がりにくい
- コーディングスキル以外にもWebサイト制作全体のスキルが必要になるので全くの初心者には少し難しい
- クライアントはWebの知識があまりない場合が多いので噛み砕いてわかりやすく説明するスキルも必要。
Web制作会社へ営業とは？
Web制作会社に営業メールなどを送って、Web制作会社が抱える仕事の中からコーディング案件やデザイン案件などを下請けする方法です。
エンド営業と比較するとWebサイトの制作に関する全てを請け負う訳ではなく、部分的な作業を行うのでコーディングに集中してお仕事をすることができます！
＊メリット
- コーディングスキルだけでも受注ができる
- 技術的なことでわからないことは最終的に相談できる場合も（もちろん自分で調べ尽くした上です）
- きちんと納品、コミュニケーションが取れれば継続的にお仕事をもらえる可能性が高い
＊デメリット
- コーディングならデザインをしっかり再現するためにある一定以上のスキルは必須
- 制作会社の実績になるので自分の実績としては公開できないことが多い。
- 下請けの仕事になるのであまりエンドクライアントからの案件と比較すると単価が低くなる傾向がある
クラウドソーシングで営業とは？
クラウドソーシングとは仕事を依頼したい企業や個人と仕事を受注したいフリーランスがインターネットを介して取引ができるサービスです。
やりとりも基本的にはネットで完結します。
条件を検索してそれに該当するお仕事に応募して受注します。
手軽に営業ができる反面、競争率が高く価格競争が激しいといった側面もあります
ですがクラウドソーシングで実績を積めば評価が溜まっていくので仕事がどんどん受注できるようになったり、こうした評価を自身の実績としてアピールすることもできます！
代表的なクラウドソーシングサイトとしては
ランサーズやCrowdWorks 
があります。
また案件に応募するのではなく、Webサイトを作るスキルを出品してそれを購入してもらう、「待ちの営業」もあります。
それができるのはココナラ
です！
得意を売るならココナラ〜♪のCMで有名なスキル出品サービスです！
営業先はどこがおすすめ？
ここからどこに営業するかで営業方法も変わってくると思うのですが
私はWeb制作会社やTwitterで営業しました！
どちらもSTEP5で作成した営業文やポートフォリオを送って営業します。
この時お返事が返ってこないことは日常茶飯事なので、挫けず色んなところに営業の幅を広げていきましょう。
Web制作会社からお仕事をもらうメリット
Web制作会社さんは意外と「人手不足」だったりします！
なので営業メールをお送りするとお返事が返ってくることも多いです。
ただしこれはしっかりとしたポートフォリオや営業文が作れていることが大前提です。
いろんな会社さんと面談する中で、
「営業メールは山のように届くけれどポートフォリオがなくどこまで制作ができるのかスキルが不明だったり、営業文が適当な場合は中々お仕事を頼みづらい」というお話も聞きました。
また制作会社さんからいただくお仕事はサイト全体を1から構築して行くというよりは
デザインが決まっていて、それをコーディングする！など部分的なところが多いので取り組みやすいです。
どうしてもわからな時には質問して教えてもらうこともできます。
（とはいえ、大前提自分で調べ尽くしてわからない時だけ聞くようにしましょう）
そして最大のメリットはしっかり納品して、お仕事をきちんとこなせば継続的にお仕事を任せていただけることも多いです。
現在私も3社ほど業務提携をしていて、ガツガツ営業しなくてもお仕事を任せていただけています。
Twitterでお仕事を探す
私はTwitterでお仕事をもらったこともあります。
#コーダー募集 と検索すると、コーダーを募集している方が結構多かったりします。
また、Web制作会社さんが求人募集していることもあります。。
またTwitterの発信を日々していき実績をツイートしたり、自分が何をしている人なのかをわかる様なプロフィール作りや発信内容を心がけることでTwitterのDMでお仕事の依頼が来る事もあります！
なのでTwitterの発信はしっかりしていくことをお勧めしています。
営業前に見ておきたい、動画学習
案件獲得する前に、納品方法知っておくと営業中や面談でも自信を持ってクライアントとお話しできるので前提知識として知っておいた方がいいです！
私はよくわからずしどろもどろしました‥
個人的にはしょーごさんのYouTubeがわかりやすかったのでおすすめです！
Web制作の全体像を把握しておこう
Web制作についてコーディングやWordPress構築など技術的なことは学んだけど全体像がわからない‥
ここまでロードマップを進めていくと、コーディングやWordPressの構築は学べるのですが、Webサイトを制作する上でコーディングやWordPress構築って最終段階でその前の工程があります。
もしあなたがエンドクライアントへ営業を考えているなら最初のヒアリングや、要件定義、デザイン、コーディングなどを丸っと引き受ける必要があるので全体的な流れを掴んでいた方がいいです。
制作会社へ営業する場合もやはり前提知識としてWebサイト制作の流れは知っておいた方がいいでしょう。
以下の書籍や教材が役に立ちましたのでご紹介しておきます！
【書籍】
【Udemy教材】
学習内容
- 実務でのwebデザインの考え方
- 実践的なwebサイト制作の流れ
- 副業での案件獲得方法や仕事の流れ
- 失敗しないwebディレクション
- すぐに使えるヒアリングや戦略設計のコツ
コミュニティに入るのもおすすめです！
SNSを色々な「コミュニティ」がたくさんあります！
月額制のところもあれば、無料のところもさまざまです。
こういった「コミュニティ」に参加して繋がりを作っておくとお仕事の幅が広がります。
またデザイナーさんや、信頼できるコーダーさんと繋がったり、メンターと言えるような師匠と出会えたり
します！
私はお仕事をいただき出して途中から「codolife」というコミュニティに入りました。
そこでさらに仕事が安定して、幅も広がり結果的に収入アップにもつながりました。
気になる方は別記事にしているので読んでみて下さい！
コーディング・WordPress以外のサイト構築の学習
0からコーディングしてWordPress化まで一通り出来る人は仕事の幅を広げたり、いろんなお客様の希望に添えるようにその他のサイト制作方法についても知っておくと◎
ノーコードでWebサイトを制作
0からコードをバリバリかけなくても、Webサイトを制作できるツールがノーコードツールです。
ノーコードにも種類は色々ありますが「STUDIO」や「WIX」などが有名です。
コーディングしなくても良質なデザインのサイトを制作できるので、作業行程が減る分低単価で多くの仕事を受けられるメリットがあります。
ですが再現できる幅がコーディングよりは少なくなるので、デザイン性を重視するお客様や、大規模な企業のコーポレートサイトなどには不向きな傾向もあります。
個人で事業をしているお客様や、名刺代わりのサイトが欲しい、とにかくWebサイトの公開日が迫っていて早く納品してほしいといった方にぴったりです。
良質な WordPressテーマを購入してローコードで制作する
WordPressの有料テーマを購入してカスタマイズして納品するという方法もあります。
「Snow Monky」が有名です。
ただ私が一押ししたいのがこのブログでも使用している有料テーマ「SWELL」です！
ブログテーマのイメージが強いんですが、コーポレートサイトを作成することもできます！
おすすめするポイントは以下3つで
- カスタマイズが豊富でコーポレートサイトも作れる
- ライセンスが買い切りなので、1回購入すると使いまわせる
- 納品後、Web知識が少ないクライアントさんでも操作がしやすい
SWELLは購入価格が17600円なんですが、1回購入すれば何サイトも作れるので、1案件でも受注できればすぐに回収できて
コスパ抜群なテーマになっています。
SWELLのデモサイトを見てみる
まとめ
かなり長文な記事になってしまいましたが最後までお付き合いいただきありがとうございます！
内容は都度見直してグレードアップさせていこうと思いますので、また覗きに来ていただけると嬉しいです。
学習の流れをおさらいします！
こちらのロードマップ通りに学習を進めていただければ、Web制作でお仕事をもらってしっかり稼いでいくスキルがつくのでぜひ取り組んでいってほしいです。
またWeb制作は様々な「挫折ポイント」が現れますが、それらに打ち勝つには何より「継続」することです！
Web制作スキルは再現性が高いし、コツコツ積み上げていけば成果がでますので最後までやり遂げましょう！
ロードマップを終えてこれから営業するぞ！という方はこちらの記事も参考にしてみてください♪
最後まで読んでいただきありがとうございました！
