



私は37歳になる手前からWeb制作の勉強を始め、現在ではWeb制作のみで生活出来るようになりました。
それまでの経緯については以下の記事に書いてあります。
30代後半未経験でもプログラミング独学で稼げるようになるまで!
しかしこの記事は自分の実体験であり、
「今からやるならこうやって勉強するだろうなぁ🤔」
という思いもあります。
なので今回は、
「今から効率よく勉強して稼ぐならこうする🏃♂️」
といった内容を書いていきたいと思います。
効率よくコーディングしたい人はこちら
ちなみにこの記事、
- コーディング ロードマップ
- WordPress 学習 ロードマップ
で検索1位となっています🙇♂️
Web制作、コーディング、WordPressの学習ロードマップの概要
この記事では学習のロードマップ以外にも、仕事を獲る為の行動についても挟んでいきます。
まずは1つ目
仕事を獲る為の行動①
勉強を始めようと思ったと同時にTwitterを始めましょう。
情報収集だけでなく積極的に発信したり、自分と同種のアカウントをフォローして色々真似したり、活気のあるサロンに入ったりと色々やってみましょう。Twitterはやって損はないですし、上手く活用出来れば仕事に繋がるので早い段階で始めましょう。
まずはじめに、Web制作と言っても色んな種類の仕事があります。
- コーディング
- デザイン
- マーケティング
- ディレクション
他にもいろいろありますが、周りにいるのはこの4つが多いです。
そしてこの記事はコーディングで稼ぎたい人向けの記事となっています。
Web制作に限った話ではありませんが、何事も逆算して行動した方が効率的です。
そしてコーディングで稼ぐのに必要なスキルは、
- HTML / CSS
- jQuery / JavaScript
- WordPress
ざっくり書けばこのようになります。
学習する順番は上記の通りで、下に行くほど稼げるようになります。
HTML / CSS(簡単な修正案件、jQuery未使用のLPなど)
正直HTML / CSSだけでは出来る仕事はほとんどなく、仕事が取れても小遣い程度だと思います。
ただこれはコーディングで稼ぐ為の必須スキルとなります。
必須スキルと言っても極める必要はなく、とりあえずは仕事をこなせるレベルになればOKです(簡単と思われがちですが、非常に奥が深いです)
あとは仕事をしながら常にスキルアップしていきましょう。
jQuery / JavaScript(LP、コーポレートサイト)
jQuery / JavaScriptが多少出来るようになれば、LPやWordPressと言ったCMSを使用しないコーポレートサイトであれば出来ます。
具体的に何が出来るようになるのかというと、サイトに動きをつけられます。
CSSでも出来るアニメーションもありますが、jQuery / JavaScriptはもっと複雑な動きを付ける事が出来ます。
これもHTML / CSS同様極める必要はなく、仕事をこなせるレベルになったら少しずつスキルアップしていけばOKです。
これが出来るようになると月5万円とか狙えるようになりますが、コーポレートサイトでWordPressなどのCMSを使わないサイトは滅多になく、LPや修正などの案件がメインになるかと思います。
あとはクライアントが自社のCMSを利用している場合は「コーディングのみで10ページ」という案件もあります。
WordPress
WordPressが出来るようになると一気に仕事の幅が広がり、収入も増えます。
ここまで出来ればコーディングだけで生活出来るレベルになります。
WordPress案件であればコーディングとWordPressだけでも15万円くらいの案件は普通にあるので、これを月2本やれば30万円達成です。
これもまた極めようとする必要はない、というか無理なので、オリジナルテーマの制作まで出来るようになれば一旦OKです。
勉強方法の種類
勉強方法にはいくつか種類があります。
勉強方法の種類
- オンラインサービス(Progate、ドットインストール、chot.design
)
- 参考書
- オンライン教材(noteなどから購入)
- 動画(youtube、Udemy
など)
- スクール
- メンターを雇う(MENTAなど)
これだけある時点で迷いますよね(^^;
結論から言えば最初はProgateがおすすめです。
ただそれぞれの勉強方法にどういった特徴があるか説明していきたいと思います。
オンラインサービス(Progate、ドットインストール、chot.design)
まず最初に始めるなら間違いなくProgateです。
自分もそうでしたが、もし今からやるとしてもProgateからやるのが正解だと思います。
Progateを使った勉強方法については後で解説します。
あとはドットインストール、chot.designなどもおすすめで、いずれも月額1000円程度から始められます。
それぞれの違いについては以下の記事を参照下さい。
徹底比較!プログラミング学習のおすすめオンラインサービス3選
chot.designについては以下の記事で詳しく解説しています。
無料でも使えるデザイン学習サイト chot.designの評判は?【有料プランあり】
参考書
個人的にはいくつかデメリットがあります。
参考書のデメリット
- コードをコピペ出来ない
- 不要な情報も多い
- 買って満足する事多し
まぁ単に自分が本を読むのが極端に苦手なだけですが。。。
そんな自分でも一番最初に買って完走出来た本がこちら
ちょっと古いですが、Progateやドットインストールが終わった後にやるのがおすすめです。
使い方としては
step
1全部理解して進めようとしない
step
2参考書通りにコードを書く(良く言われる「写経」)
step
3参考書通りに表示されればOK
という感じです。
この参考書を使う目的は理解する事ではなく、1からコードを書いてちゃんと画面に表示される体験をする事だと思っています。
ただ参考書で勉強したいという方もいると思いますし、実際いい本も沢山あるのでそういった方はこちらの記事を参考にしてみて下さい。
【Web制作初心者向け】コーディングやデザインの勉強でおすすめしたい本まとめ
本が苦手な自分でも読めた本や、有名な本だけご紹介しています。
オンライン教材
これは個人の方がnoteなどで販売しているもので、自分が勉強中の時はこちらの教材を購入しました。
この頃はあまりオンラインで販売されている教材はなかったんですが、今はたくさん出回っているのでぜひ有効活用しましょう。
このオンライン教材については後で解説します。
動画
動画での勉強はおすすめです。
youtubeであれば無料で見れますし、Udemyは有料ですが良い教材がたくさんあります。
動画の良いところは実際にコードを書いている動きが見れる所ですね。
ただ動画での勉強の場合、見るだけでなく自分でコードを書かないと効果は半減です。
動画と同じように手を動かしながら進めていくと効果的です。
Udemyで勉強している人は非常に多く学べるジャンルや教材がたくさんあるので、ぜひどんなコースがあるか見てみて下さい。
Udemyのコースはすべて30日間返金保証付きなので安心ですね。
またUdemyは頻繁にセールを行なっているので、購入するときはセール中を狙いましょう。
スクール
スクールは基本的に高額なので、まずは無料体験を受けてみるのがいいと思います。
テックアカデミーの無料体験はオンラインで体験可能で、とりあえずやってみて損はないかと思います。
またデイトラというオンラインスクールはTwitter上でも絶大な人気を誇っており、無料で公開されていた時期にWordPressのオリジナルテーマ制作の勉強で使わせて頂きました。
コースも色々あります。
- Web制作コース
- Webアプリ開発コース
- Webデザインコース
- Shopifyコース
- 動画制作コース
- Pythonコース
- Webマーケティングコース
- ドローンコース
- ECクリエイティブコース
もし自分がこれからWeb制作を始めるならデイトラのWeb制作コース一択かと思います。
開校1年で受講生が7000人を突破したオンラインスクールで、クチコミの評判も非常に良く悪い評判は全く聞いた事がありません。
カリキュラムの質が高いのはもちろん、他のスクールと比べて圧倒的なコスパかつ買い切りとなっています。
私も購入したWeb制作コースは、Web制作の基礎であるHTML / CSSからWordPressまで学ぶ事が出来ます。
オンラインスクールですがメンターの方がしっかりサポートしてくれるので安心です。
ちゃんと現場で通用するレベルのスキルを身につける事が出来るので、これからWeb制作で仕事をしたいと思っている方におすすめです。
レッスン動画は無料で見れるので、気になる方は一度見てみましょう。
メンターを雇う
これはMENTAなどのサービスでメンター(家庭教師)を雇うという事です。
自分もMENTAを使いましたが、ちょっと自分の方向性と違う方を選んでしまったので失敗しました。
コーディングで稼ぎたい場合はコードレビューをしてくれる方を探すと思うので、もし利用する場合はちゃんと自分の方向性に合った人を選びましょう。
ググる
正直これが一番良く使います。
良く使うというより常に使うと思います。
ググって勉強する時のコツは、
ググるコツ
- なるべく新しい情報を参考にする
- 1つのページだけ見て信用しない
- 解決したらコードなどの情報をまとめる(ブログなどでもOK)
この辺かと思います。
これは案件を受け始めてからも良く使うので、ググり力を鍛えるのは必須です。
コードのまとめ方はこちらの記事を参照下さい。
今は使っていませんが、Boostnoteというツールもコード管理に使えます。
HTML / CSSの勉強方法
まずコーディングを勉強する順番として最初はHTML / CSSが基本になります。
そして恐らくほとんどの人が利用していると思われるのが、Progateというオンラインサービスです。
自分もProgateから始めましたが、これは間違いないです。
最初はProgateの活用方法を中心に解説しますが、ドットインストールやchot.designでも考え方は同じです。
それぞれの違いについては先ほどもご紹介しましたが以下の記事に詳しく書いているので、ぜひ参照下さい。
徹底比較!プログラミング学習のおすすめオンラインサービス3選
無料会員と有料会員
Progateには無料会員と有料会員がありますが、ここは迷わず有料会員になっておきましょう。
有料といっても月額980円(税別)です。
勉強に投資する習慣がないと「有料」と聞くだけでちょっと気が引けるかも知れませんが、勉強に対して投資する習慣を付けておかないとこの先苦労すると思います。
勉強に対する投資は時間を買う事と同じ、つまり早く稼ぎたいと思うなら投資するべきです。
とは言え、Progateは大した金額ではないのでサクッと有料会員になっておきましょう。
月額制なのでダラダラ勉強していると毎月お金がかかるので、早く勉強を進めようという気持ちになれるというメリットもありますw
どのコースを受講するか
Progateにはいくつかのコースがあり、有料会員になると全部受講出来るようになりますが、ここでやりがちな失敗例の1つは、
色んなコースに手を出してしまう
という事です。
これはドラクエで船を入手した途端、行動範囲が広がってどこに行っていいか分からなくなる状態と似ています。
有料会員になると全部のコースが受講出来るようになりますが、大人しくHTML / CSSだけを受講しましょう。
ちなみに自分が勉強してた頃にはHTML / CSSコースに中にあるFlexbox編はありませんでしたが、Flexboxは死ぬほど使うので忘れずに受講しておきましょう。
Flexboxについては良く使う物をこちらの記事に書いたので参照下さい。
横並びレイアウトの定番 Flexboxでよく使うものをご紹介!
どのくらい勉強するか
これも良く言われている失敗例です。
Progate失敗あるある
- レベル上げに夢中になる
- 何週も繰り返す
Progateは初心者向きの教材ではありますが、ここで全てを理解しようとすると沼にハマります。
Web制作の勉強の入り口としては最適なProgateですが、個人的に思うProgateの役割は、
Progateの役割
- HTML / CSSがどのような物か知る
- コーディングがどのような物か知る
- コーディングを続けられそうか確かめる
この辺だと思います。
まずProgateの内容を全て理解する必要は全くなく、むしろ全て理解してもコーディングは出来ないと思います。
なのでおすすめの進め方としてはこのようになります。
step
1とりあえず指示通りに進める
step
2分からなかったら遠慮なく答えを見る
step
32~3周して何となく雰囲気を掴めたら終了
このくらいでProgateは終了して次に進みましょう。
「全然理解出来てない気がするけど大丈夫?」と思うかも知れませんが大丈夫です。
学習の初期段階では、完璧に理解するよりとにかく進むことが重要です。
学習期間の目安
- Progateは集中して1週間くらいで駆け抜けましょう
- ただここでテンションが上がらないと1ヶ月かかる可能性もあり
Progate以外のドットインストールやchot.designは?
Progate以外のオンラインサービスであるドットインストールやchot.designもおすすめで、先ほどご紹介した比較記事を参照して頂ければと思いますが、chot.designは他の2つにはないWordPressのカリキュラムもあるので、Web制作であればchot.designの方がおすすめです(以下の画像からアクセス出来ます)
こちらも月額料金はProgate、ドットインストールなどと同じくらいですが、ちょっとお得になる年間プランもあります。
WordPress以外にも他の2つのサービスにはないデザインや画像加工のカリキュラムもあります。
デザインにも興味がある人にもおすすめですし、画像加工はInstagramやブログのサムネにも使える汎用性の高いスキルなのでおすすめです。
VSCodeをインストール
ここで環境構築するためにVSCodeというテキストエディタをインストールするのですが、このVSCodeはプラグインという拡張機能を追加することでどんどん使いやすくなっていきます。
VSCodeのインストールと日本語化についてはこちらの記事を参照下さい。
またおすすめのプラグインについてはこちらの記事を参照下さい。
ドットインストールやchot.designはこの環境構築を自分でやる点がProgateより少し難しいので、やはり最初は雰囲気を掴むためにProgateがおすすめです。
またVSCodeでは標準搭載されているEmmetという機能があります。
Emmetとは簡単に説明すると、少ないタイピングでコードを入力出来る機能です。
例えば、mt10と入力するとmargin-top: 10px;となります。
jcsbと入力するとjustify-content: space-between;となります。
CSSについてはこの2つを見れば他も何となく分かると思いますが、HTMLはちょっと違うので何となくでは出来ません。
ただここで間違ってはいけないのは、Emmet全部を覚える必要はないという事です。
Emmetについては以下の記事を参照下さい。
「はじめて」でも簡単!Emmetの使い方とよく使うパターン集
そしてドットインストールやchot.designが終わっても続けられそうであれば、第一の壁は乗り越えたと言っていいでしょう。
学習期間の目安
- ドットインストールも1週間でクリア出来たら上々!
- Progate同様、短期間でとにかく進む事が大切
- chot.designのWordPressはまだやらなくてOK
仕事を獲る為の行動②
ここまで来てやっていけそうだと思ったら、ブログを始める事をおすすめします。
その理由についてはこちらの記事を参照下さい。
Web制作始める人がWordPressブログを始めた方がいい6つの理由
自分はすぐ行動出来る人間だぜ!という人は、サクッとブログを開設しちゃいましょう。


ブログ開設の方法は以下の記事で詳しく解説しています。
初心者でも10分で出来る!WordPressブログの始め方【丁寧に解説】
たとえブログをやらないとしても、ポートフォリオを公開したりテストサーバーを扱う為には自分のサーバーが必須です。
なのである程度勉強が進んで「仕事としてやっていけそう!」という感覚が掴めたらサーバーの契約をして、WordPressもインストールして扱いに慣れておくことをおすすめします。
初めてのコーディング教材に挑戦!
各オンラインサービスを3周ずつくらい終えたら、一度簡単なコーディング教材に挑戦してみましょう。
この時点でのおすすめ教材はこちらです。
おすすめ教材
私はその1の存在を知らずにその2からやりましたが、なんとかクリア出来ました。
とは言えすんなりとはいかず、恐らく死ぬほど苦戦すると思います。
具体的には何から始めていいか分からないくらい進まないと思います。
しかし、苦戦すると分かっていれば「そういうもの」と割り切って頑張れると思います。
自分の場合はここで先ほども紹介したこちらの参考書をやりました。
またこちらの本も有名で私も持っています。
あとはyoutubeなどの動画を見たり、ググったりと色々な方法で勉強しました。
この「色々な勉強方法を試す」というのが結構重要で、自分に向いてる勉強方法を探したり、気分転換にもなるのでおすすめです。
それならコーディング教材やる前に参考書や動画で勉強した方がいいんじゃないかと思うかも知れませんが、コーディング教材から始めた方が分からない箇所が分かるから効率的です。
何が分からないかが分からない状態で参考書や動画で勉強するのは非効率です。
そしてここが最初のデカい壁です。
ここでちょっと心折れる人が続出するくらいだと覚悟しておきましょう。
初めてのコーディング教材をやる際にはこちらの記事が参考になると思います。
【初めてHTMLを書く人向け】使い回せるHTMLの最初の書き方
初心者が躓きやすいファイルパスの絶対パスと相対パスの違いとは?
おすすめの参考書はこちらになります。
デベロッパーツールを使う
コーディング教材を始めたらデベロッパーツール(検証ツール)を使ってみましょう。
これは実務でも必須で使わない人はいないと思います。
使い方についてはこちらの記事を参照下さい。
初心者向け!Chromeの検証機能(デベロッパーツール)の使い方
動画ではこちらがおすすめです。
学習期間の目安
- 初めてのコーディング教材は余裕を持って2週間
- ここが最初の挫折ポイントだと覚悟してふんばる
Sass(SCSS)を習得する
ここで今まで出てこなかったSassが出てきました。
Sassとは、簡単に言えば「CSSを書きやすくしたもの」と思っておけば大丈夫です。
Sassを習得するとこの後グッと楽になるので、これも必須だと思って下さい。
Progate、ドットインストール、chot.designにもSassのカリキュラムはあるのでコーディング教材に挑戦する前にやっても構いませんが、個人的にはSassを習得前に先ほどの教材をやり、その後Sassを習得することでSassの便利さが分かるかなと思っています。
Sassに関する記事はこちらを参照下さい。
Sassも良く使う機能だけ覚えておけばとりあえずOKです。
また、Sassに関する参考書を買うならこの本一択かと思います。
学習期間の目安
- 3日でOK(Sassのコンパイルで躓くかも知れません)
- コンパイルとパーシャルが出来れば後はやりながら慣れていけばOK
コーディング教材をこなす
ここまででコーディング教材を2つご紹介しましたが、実務をこなすにはまだ色々と足りません。
コーディングの勉強というと模写が良く知られていますが、模写にはデメリットがあります。
模写のデメリット
- 実務で模写はしない
- ポートフォリオの実績として使えない
模写とは実在するサイトを真似する事ですが、実務では実在するサイトを参考にコーディングなんてしません。
また、コーディング教材の場合はポートフォリオの実績として掲載OKの物がありますが、模写の場合は原則NGです(※勝手に使用したら訴えれらる可能性もあり)
なぜこんなに模写が浸透したかというと、以前はコーディング教材というものがほとんどなかったからだと思います。
ただ今は多くのコーディング教材が出回っているので、模写をする必要は基本的にありません。
強いて言えば自分のコードと参考サイトのコードを見比べて勉強出来るという事くらいでしょうか。
この時点でのおすすめのコーディング教材については、しめじ先生のブログ【4. HTML/CSSを使ったサイト制作を学習する → デザインカンプからのサイト制作を学習する】が参考になります。
デザインカンプについて
コーディングをする時にはデザインを元にコーディングしますが、このデザインをデザインカンプと言います(単にカンプとも言います)
また、カンプは主に4種類あります。
カンプの種類
- Photoshop
- Illustrator
- XD
- Figma
一番最初にご紹介した教材はXDで作られており、XDの見方については軽く動画の解説も教材の中にあります。
実務ではカンプの種類をこちらから指定することは出来ないので、どのカンプで来ても対応出来るようにしておかなくてはいけません。
かといってPhotoshopやIllustratorを1から勉強する必要はなく、あくまでもコーディングのカンプとして見方を知っていればOKです。
見方というのは、
- 要素、余白、フォントのサイズ
- 色、影、書体
- 画像の書き出し
などになります。
各デザインカンプからのコーディング方法については以下の記事を参照下さい。
【Adobe Photoshop編】デザインカンプからコーディングする方法
【Adobe Illustrator編】デザインカンプからコーディングする方法
【Adobe XD編】デザインカンプからコーディングする方法
学習期間の目安
- ここは1ヶ月以上かかってOK
- ここもかなりしんどい時期ですがふんばりましょう
また、ここまで進んだらこちらのnoteを購入することをおすすめします。
僕がCSSを書く際に必ず意識している CSSのコーディングルール30条
恐らくこの時点で読んでも分からないことが多いと思いますが、案件をこなしつつ時々見返すと段々分かるようになってきます。
コーダーを目指すのであればこちらの著者であるTAKさんはTwitterでフォロー推奨です。
ピクセルパーフェクトを目指す
ピクセルパーフェクトとは、デザインと1pxもズレないようにコーディングする事です。
初心者にはハードルが高いかも知れませんが、これが出来るだけで制作会社やクライアントからの信用は確実にアップします。
正直出来て当たり前と言う人もいると思いますが、出来ない人が多いのも事実です。
必ずしもピクセルパーフェクトである必要はなく、クライアントからも数px程度であればズレていても指摘される事は少ないと思いますが、ピクセルパーフェクトを目指してコーディングした方が実は簡単です。
それにピクセルパーフェクトにした方が修正回数も少なくなります。
どうすればいいかと言うと、Chromeの拡張機能を使います。
詳しくは以下の記事を参照下さい。
【Chrome拡張機能】ピクセルパーフェクトでコーディングするのに必須なPerfectPixelの使い方
jQuery / JavaScriptの勉強方法
ここまでで簡単なLPや修正案件くらいはこなせるスキルが身に付いてきたかと思いますが、ハンバーガーメニューやスライダーといった動きを付ける為にはjQueryとJavaScriptが必須となります。
この勉強方法もまずはお馴染みProgateでOKです。
まずJavaScriptコースはⅦまでありますが、ここはⅢくらいまででOKです。
そしてjQueryコースは初級・中級・上級とありますが、中級まででOKです(気になる方は上級やっても構いません)
そんな適当で大丈夫?と思うかも知れませんが、Progateでは実践的な事は学べないので「jQuery使うとそんな事が出来るんだぁ」程度にしておきましょう。
jQueryの使い方についてはこちらの記事を参照下さい。
あとは実装したい物を決めてググって実装するのが一番効率的だと思います。
例えば、
「ハンバーガーメニュー jQuery」
「アコーディオンメニュー jQuery」
「モーダルウィンドウ jQuery」
という感じでググれば沢山ヒットします。
ここでも本を買って1から勉強するのは非常に非効率なので、個人的にはおすすめしません。
step
1実装したい物をググる
step
2実装する
step
3気になったコードを調べる
step
4コードをいじって動きを変えてみる
この繰り返しで段々分かってくると思います。
jQuery / JavaScriptのおすすめ教材について
おすすめの教材に関しては先ほども登場したしめじ先生のブログが参考になります。
jQuery / JavaScriptのおすすめ教材について
ここまで終わればLPやWordPressなどCMSを使わないコーポレートサイトが出来るようになり、月5万円は稼げるようになります。
営業が得意ならもっと稼げると思いますが、やはりWordPressが扱えないと選べる案件がかなり限られてしまいます。
学習期間の目安
- ここも1ヶ月以上かかってOK
- ここが案件獲得最低ラインなのでふんばりましょう
ポートフォリオ制作
ここまで来たら一旦ポートフォリオ制作に取り掛かりましょう。
ポートフォリオとは自分の制作実績やスキルをまとめたページの事で、そこにプロフィールや料金表を記載することもあります。
ポートフォリオの作成手順としては、
- デザイン
- コーディング
- 公開
簡単に書けばこれだけですが、今までと違ってデザインからやるのでどうしていいか分からないと思います。
まずは色んな人のポートフォリオを見てみましょう。
TwitterでWeb制作をやっている人のプロフィールを見ればポートフォリオのURLが載っている事があります。
いくつか見ればポートフォリオの構成などが分かると思います。
ただしこの後書きますが、ポートフォリオ自体はポートフォリオ作成サービスを利用するのもおすすめです。
ポートフォリオには時間をかけない
1つ重要なのが、ここであまり時間をかけない方が良いという事。
というのもポートフォリオ自体より制作実績の方が重要なので、ポートフォリオ自体はポートフォリオ作成サービスを利用するのもアリです。
それはポートフォリオ自体はデザイン、コーディング、サーバーにアップなどは不要で、制作実績やスキル、プロフィールなどを載せるだけでOKです。
詳しくは以下の記事を参照下さい。
Web制作営業で役立つポートフォリオ作成サービスSalon.ioの使い方
Web制作営業で役立つポートフォリオ作成サービスRESUMEの使い方
もしポートフォリオ自体もオリジナルで作りたい場合は、色んな人のポートフォリオやサイトから良さげなパーツを真似して組み合わせる感じでサクッと作ってしまいましょう(凝ったデザインである必要は全くなし)
多くのサイトも色んな他のサイトを参考にして作られています。
もちろん最初から最後まで丸パクリはダメですが、参考サイトを元にしてアレンジすればいいかと思います。
ただ自分で1から作るよりポートフォリオ作成サービスを使った方が見栄えが良く、崩れたりしないので個人的にはおすすめです。
また実績については先ほどご紹介したコーディング教材で実績使用OKの物や、架空サイトを載せておきましょう(※模写サイトは基本的にNGです)
もちろん既に実績があればそちらを載せます。
実績が増えてきたらコーディング教材や架空サイトは削除して、実績として掲載OKな実案件のサイトを載せましょう。
ポートフォリオをサーバーにアップ
ポートフォリオを作成したらサーバーにアップしてインターネット上で見れるようにしておきましょう。
もし先ほど解説したポートフォリオ作成サービスを利用する場合はポートフォリオ自体はサーバーにアップする必要はありませんが、制作実績はサーバーにアップする必要があります。
サーバーにアップしないと自分のパソコン上でしか見れないので、営業する時に相手に見せる事が出来ません(対面であれば自分のパソコン上で見せる事も出来ますが)
サーバーにアップしてないと「サーバーにアップ出来ない人」と思われてしまうかもしれません。
なのでサーバーにアップしてようやくポートフォリオは完成と言えます。
サーバーはレンタルサーバーを契約する必要がありますが、おすすめはエックスサーバーで、私はこのブログ、ポートフォリオ、テストサーバー全てエックスサーバーを使用しています。
契約方法については以下の記事を参照下さい。
初心者でも10分で出来る!WordPressブログの始め方【丁寧に解説】
またポートフォリオの公開方法(サーバーにアップする方法)については以下の記事を参照下さい。
【初心者向け】Web制作案件での納品を意識したポートフォリオの公開方法
制作期間の目安
- 1週間~1ヶ月(こだわり具合で大きく変わります)
- ポートフォリオ作成サービスを使えば1日で出来ます(制作実績がある場合)
仕事を獲る為の行動③
ポートフォリオ作成まで来たらオフラインでの交流会に参加するのがおすすめです。
Twitter上での繋がりより、オフラインで直接人と会う方が仕事に繋がる可能性は断然高いです。
Progate始めた段階で交流会に参加してもあまり話に入っていけないと思うので、個人的には早くてもこのくらいのタイミングかなと思います。
逆にProgate始めた段階で参加して、どうやって学習序盤を乗り越えたかなど話を聞いてみるのもありなので、タイミングはお任せします。
クラウドソーシングに登録
この辺で一度クラウドソーシングに登録してみましょう。
この3つが有名処となります。
まずはどんな仕事があるか見てみましょう。
今の時点で出来そうな案件は少ないかと思います。
なので個人的にはWordPressまで学習を終えてから案件獲得を始めるのがおすすめですが、もちろんこの時点で出来そうな案件に挑戦するのもありです。
クラウドワークスの攻略法についてはこちらのブログに色々書いてあるので、参考にしてみて下さい。
こちらの記事もおすすめです。
【実証済】クラウドソーシングでスカウトが来るプロフィール文を公開
クラウドソーシングは駆け出しが集まるレッドオーシャンだと思われていますが、スキル以前の問題の人が多く、しっかり準備して挑めば十分稼ぐことは可能です。
また、後ほどもご紹介しますがこちらの教材もおすすめです。
1ヶ月で売上7桁を達成した提案のノウハウを大公開【クラウドソーシング提案文の教科書】
ココナラ0→1スタートで1ヶ月で77万円。2ヶ月で165万円納品した全てを公開します
【新スキル出品領域!”脱”営業ノウハウを公開】ランサーズ スキルパッケージ大全
WordPressの勉強方法
いよいよWordPressの勉強に入ります。
WordPressはこれまでとちょっと毛色が違うので戸惑うかも知れませんが、出来るようになると一気に月20万以上が見えてくるので、頑張りましょう!
WordPress案件の種類
WordPress案件は主に2種類あります。
- オリジナルテーマ制作
- 既存テーマ、有料テーマで制作(ノーコード)
それぞれの特長を見てみます。
オリジナルテーマ制作
- コーディング必須
- 制作会社からの案件はほぼこっち
既存テーマ、有料テーマ制作
- コーディング不要(多少は出来た方がいい)
- クラウドソーシングやエンド営業ではこっちでもいける
コーディングが必要なオリジナルテーマ制作の方が稼げるように見るかも知れませんが、そうとは限りません。
既存テーマを使った制作はコードをほとんど書かなくても大丈夫なので、回せる案件数を増やせます。
また、既存テーマを使った制作だからと言って単価が極端に安い訳ではありません。
既存テーマを使った制作でガッツリ稼いでいる仲間のnoteはこちらになります。
何も持っていなかった大学生の僕がWEB制作で半年で250万円稼いだ方法(前編 クラウドソーシング活用方法)
何も持っていなかった大学生の僕がWEB制作で半年で250万円稼いだ方法(後編 Wordpresの既存テーマ活用方法)
オリジナルテーマとノーコード両方出来ればいいとは思いますが、周りを見る限りどちらかに偏っている気がします。
私の場合は100%オリジナルテーマです。
ノーコードで稼ぎたいと思う方もオリジナルテーマで制作出来るようにしておくとWordPressをより深く理解出来るので、一通りやっておくといいと思います。
PHPの勉強は必要?
WordPressはPHPというプログラミング言語で出来ているため、PHPの勉強をしましょうという方もいますが、個人的にはPHPの勉強は後回しでいいと思っています。
なぜならWordPressで使われているPHPはWordPress独自の関数などを使っているため、PHPを勉強するよりWordPressを勉強した方が断然効率的です。
ProgateにもPHPコースはありますが、これはやらなくても大丈夫です。
習得しておきたい項目
WordPress案件をやるなら習得しておきたい項目はこちらです。
- オリジナルテーマ
- お問い合わせフォーム
- カスタム投稿
- カスタムフィールド
お問い合わせフォームに関してはほぼ100%ありますが、ちょっと癖があるので初案件前に出来るようにしておきましょう。
おすすめはContact Form7というプラグインを使う方法で、こちらの記事を参照下さい。
お問い合わせフォームの定番プラグイン Contact Form 7の使い方
また、カスタム投稿やカスタムフィールドも必須ではありませんが、結構な確率で含まれているので出来るようにしておくと安心です。
WordPressの勉強ですが、カスタム投稿は間違いなく出来るようになっておいた方がいいです
人によって違うと思うけど、自分の場合30%~40%くらいはカスタム投稿あり
カスタムフィールドはカスタム投稿よりは少ないけど20%~30%くらいだろうか
カスタムフィールドも出来るようになっておくと吉
— じゅんぺい🐶コーダー💻×フォトグラファー📸 (@junpei_sugiyama) March 13, 2021
勉強方法
WordPressの勉強方法は色々ありますが、今回はオリジナルテーマ制作の勉強という事で、前提としてHTMLで制作したサイトを用意します。
このHTMLサイトをWordPressにするのをWordPress化とも言います。
ここまでで作成したポートフォリオをWordPress化してもいいんですが、WordPressのメリットはブログなどの投稿機能を実装できることなので、投稿ページがある架空サイトを作ってそれをWordPress化するのがベストです(ポートフォリオに投稿ページはないと思うので)
ただ投稿ページがある架空サイトを作るのも一苦労だと思うので、動画で勉強したい方はUdemyのWordPress開発マスター講座がおすすめです。
Udemyは他にもたくさんの講座があり、有料ですが頻繁にセールをしているのでセールの時を狙って購入しましょう。
またyoutubeでもWordPressと検索すればたくさん動画が見つかるので、最初はyoutubeで勉強してもいいかも知れません。
書籍であればこちらの本がおすすめです(電子書籍で購入しました)
あとはこのブログでもオリジナルテーマについてや、その他の実装についてもご紹介しています。
もし1人ではしんどいと感じたらプログラミングスクールのテックアカデミーでWordPressコースなどをやってみるのもありかと思います。
またこちらのWPHackは自宅で学べるWordPressの動画講座で、7日間の無料モニターに参加出来るので興味があればぜひ。
30代からはじめるWordPressプログラミング無料モニターはコチラ
勉強の注意点
WordPressには勉強の注意点がいくつかあります。
ココに注意
- ググって見つかった情報が古い事がある
- 人によってやり方が違う
WordPress化についてはこのブログでも詳しく書いていますが、先ほどご紹介したWordPress開発マスター講座とは異なる点もあります。
ちょっと何言ってるか分からないという時は教材や勉強方法を変えてみたり、見比べてみるのがおすすめです。
自分も何かを実装する時、ググって見つかったページを5~6サイト開いた状態で見比べながら実装しています。
特にWordPressはブログや動画に限らず分かりにくい物はいくら見ても分からないので、たくさんググって色んな方向から情報をかき集めましょう。
どこかに分かりやすい情報があるはずですw
学習期間の目安
- 1ヶ月以上かかってOK
- ここをクリアしたら後は案件獲得するだけなのでもうひとふんばり!
コーディング速度を上げる方法
ここまでで一通りの学習は完了しました。
あとは案件をこなしていけば少しずつコーディング速度も上がっていくと思いますが、ここでいくつかその方法をご紹介します。
VSCodeでスニペットを自作
これは先ほど出てきたEmmetと似てますが、良く使うコードを少ないキーで表示出来るようにコードを自作する事です。
この方法については以下の記事を参照下さい。
コード管理
これは今まで使ってきたコードをまとめておくことですね。
方法としてはBoostnoteやNotionなどありますが、自分は最初Boostnoteを使っていましたが今はNotionを使っています。
これについては先ほどもご紹介しましたが、こちらの記事を参照下さい。
最初は面倒に感じるかも知れませんが、この積み重ねが自分を楽にしてくれます。
【Notionでコード管理する時の項目】
✅タイトル
✅画像
✅コード
✅参考サイトURL左上を見ると分かりますが、この場合は複数ある見出しの中の1つになります
今回URLはありませんが、必要に応じて追記
コードは言語を分けて言語の種類を選択可能
コードはコピー出来るので、コピペ無双出来ます⚔️ pic.twitter.com/EZbBMzEZQ5— じゅんぺい🐶コーダー💻×フォトグラファー📸 (@junpei_sugiyama) March 14, 2021
Bootstrapって良く聞くけど何?
色んな人のブログとか見ているとBootstrapという言葉を見た事があるかも知れません。
これは簡単にレスポンシブデザインでサイトが作れちゃうという便利なフレームワークなのですが、Web制作においては滅多に使う機会はありません。
というか自分はこの1年で一度も使っていません。
ここで再び登場しめじ先生のツイート
Web制作フリーランス6ヶ月目の今振り返ってみて、なんだかんだ使わなかったスキル5選
✅Bootstrap
✅Bootstrap
✅Bootstrap
✅PHP
✅PHPBootstrap結局実務で一度も使ってないので、うまく扱える自信がないw
PHPはループや条件分岐とかの基礎さえ分かれば十分です
WordPress自体の勉強の方が大事— しめじ@WEB制作フリーランス (@simeji_pro) December 5, 2020
このツイートの「なんだかんだ」という言葉を見ても分かる通り、世間で言われている割に使う機会はありません。
なので個人的には勉強しなくてもいいと思いますし、もし使う機会がきたら勉強すればいいと思っています。
ただ「他の人はやりましょうって言ってるし、全くやらないのは気持ち悪い」という事であれば、Udemyのこの講座をおすすめします。
WordPress Theme Development with Bootstrap in 2021
全部英語ですが見た通りに手を動かせばOKです(全く英語が出来ない自分でも大丈夫だったので)
自分が買った時は2019年でしたが、2021という事はバージョンアップしてるみたいですね。
12時間の動画なので、1日4時間やれば3日で終了です。
Web制作の営業方法
ここまでクリアしたら後は案件獲得に向けて営業するだけです。
ここは「初めてのコーディング教材」「WordPressオリジナルテーマ」に続く三大挫折ポイントの1つとなります。
ここまで来て仕事を獲れないというのは非常に勿体ないですが、実際にそういう人もいます。
案件獲得の方法については色々あります。
営業先
- クラウドソーシング
- 制作会社
- 知り合い
- 営業パートナー
- エンド営業
ぱっと思いつくのはこのくらいですが、他にも色々あるでしょう。
また、どれがいいとは一概には言えません。
自分に向いていると思う方法を見つけましょう、というか出来れば一通りやってみる事をおすすめします(自分も大体やりました)
以下の記事では営業歴16年のプロに聞いた営業方法についての解説が載っているので、こちらも参考になると思います。
【営業のプロが解説】Web制作フリーランスが未経験から案件獲得する為の営業方法6選!
それでは1つずつ解説してきますが、その前にフリーランスの身を守る契約書と保険について少し書きます。
契約書について
契約書とはクライアントと自分の間で交わす取り決めで、これがあると損害賠償のリスクを軽減できたり、双方安心して仕事をすることが出来ます。
しかし、これを1から作ろうとすると何から初めていいか分かりません。
そこで「これさえあればOK」と言うのがこちら。
【初心者向け】Web業務委託契約のひな形セット(制作、保守、SNS運用代行)
これから案件をこなしていくのに必須とも言えるので、購入して手元に置いておくことをおすすめします。
損害賠償保険や即日払いについて
フリーランスは会社に属していないので、万が一クライアントに損害を与えてしまった場合は損害賠償を請求される可能性があります。
そしてそれが数百万円〜数千万円となったら・・・
しかし、フリーナンスというサービスでは損害賠償保険に無料で加入することが出来ます。
また、フリーランスはキャッシュフローに悩まされる事も多いです。
例えば作業開始から遅くとも2ヶ月後には入金されると思っていた案件の入金が4ヶ月後になったり・・・
これは入金が遅いというより、デザインが遅れたりクライアントの確認待ちが理由で案件の進行が遅れ、結果入金が何ヶ月も先になるという事です。
もちろん先払いであれば問題ありませんが、そうでない場合も多いと思います。
しかしフリーナンスでは手数料はかかりますが即日払いも可能です。
詳しくは以下の記事を参照下さい。
入って損なし!フリーナンスの即日払いの評判やフリーランスを守る保険を徹底解説!
フリーナンス公式HPはこちら
それでは本題に入っていきます。
クラウドソーシング
恐らくクラウドソーシングから案件獲得を始める人が多いと思います。
クラウドソーシングは稼げる人とそうでない人がハッキリ分かれる印象です。
メリット
- どんなスキルが求められているか分かる
- どんな仕事があるか分かる
- スキル出品をすれば放置しててもスカウトされる事もある
デメリット
- 駆け出しが集中するから頻繁にチェックして速攻で提案する必要あり
- 発注者のリテラシーが低いと地雷
- スキル出品をしないと毎回提案する必要がある
またいくつか注意点があります。
ココに注意
- 短納期は避ける
- 低評価は避ける
- 極端な安価は避ける
短納期は誰かが途中でトンズラした地雷案件の可能性があり、そうでなくても慣れないうちから短納期は避けるべきです。
また極端な安価は避けるべきです。
最初は実績作りの為と思って無料でもいいからと思いがちですが、安いだけじゃなくとんでもない作業量という地雷もあります。
最初は適正価格が分からないと思うので、この辺は人に聞いてみるのもいいと思います。

1ヶ月で売上7桁を達成した提案のノウハウを大公開【クラウドソーシング提案文の教科書】
ココナラ0→1スタートで1ヶ月で77万円。2ヶ月で165万円納品した全てを公開します
【新スキル出品領域!”脱”営業ノウハウを公開】ランサーズ スキルパッケージ大全
制作会社
個人的にはこれが一番おすすめです。
複数の制作会社から継続案件を貰えるようになれば、営業しなくて済むようになります。
常駐の場合は周りにいる経験者の方にコードレビューして貰ったり、色々と教えて貰えるので非常にスキルアップしやすいと思います。
知り合い
実務未経験の場合は知人に「ホームページ作らない?」と聞いてみるのも1つの手です。
知人であれば色々と融通が利くこともあると思うので、一番気は楽かも知れません。
しかし注意点があります。それは、
本気で欲している人でないと頓挫する可能性大
という事です。
実際自分も3人ほど声をかけて1人に関してはほぼ完成までいったんですが、連絡が途絶えてしまいました。
しかも実績作りの為に無料でやっていたのですが、頓挫しました。
結局無料でも本気で欲しいと思ってない人だと話が一向に進まないので、そこは注意が必要です。
もしやるなら本気でホームページやLPを欲しいと思っている人を探しましょう。
営業パートナー
これは営業パートナーに営業を全部まかせるので、営業が苦手という人におすすめです。
営業パートナーの探し方は色々ありますが、自分の場合は営業が得意な人と親しくなって営業をお願いするという形です。
現在2年近くほぼ営業せずに仕事を受け続けていますが、 最初の1年はほぼ営業パートナー経由の仕事となります。
自分がどうやって営業パートナーを見つけたり、営業せずに仕事を受け続けられているかについてはこちらの記事を参照下さい。
営業力0でもコーディングとWordPressのみで月収50万に到達するまで
ちなみに実績が増えて行けば、営業しなくても色んな所から依頼が来るようになります。
これは意外と知らない人がいるようですが、Twitterで「コーダー 募集」など検索すると結構ツイートが見つかるので、そこからDMするという方法です。
自分の初案件獲得はこの方法でした。
ここで日々発信しているかどうかで受注率も変わってくると思うので、積極的に発信していきましょう。
また、逆にDMでスカウトされる事もあります。
なのでTwitterは積極的に使っていきましょう。
エンド営業
これは直接ホームページを作る相手に営業する方法です。
つまり営業パートナーや制作会社を挟まないので最も高単価で受注出来ますが、その分難易度は一番高いと思います。
しかも継続案件には繋がりにくいので、延々と営業を続ける必要があります。
これは世間がイメージする営業マンそのものに近いので、営業に少しでも苦手意識がある人にはおすすめしません。
ただこれが出来るようになればWeb制作以外にも通用する無敵のスキルとなります。
営業力を身に付ける方法
Webスキルを収益化する『本質の営業力』
営業経験が「まったく無い」「自信がない」という人は、営業力はあって損はないです。
なぜなら、案件の進行にも顧客やり取りが必要だからです。
メッセージやzoomでの面談など、顧客と気持ちよくやり取りできると新規の案件はもちろん、継続の案件も受注でき、収入の安定化に繋がります。

でも、
- 顧客も自分も満足感高く、楽しく仕事したい方
- Web営業で、自宅、もしくはリモートで稼ぎたい方
- 時間が無いなか、効率的に稼ぎたい方
- 自分に合う営業方法を見つけたい方
- メール前提で消耗しない営業手法に興味がある方
こんなことを考えている人にオススメできる、営業を学べてサポートもある環境があります。
コードスルー ( CodeThrough )代表のトシさんとは個人的にも仲良くさせてもらっており、タイで旅行をご一緒したりもしました。
会社員として営業経験が16年以上あり、コーチングの資格もお持ちの方で、 自分でWeb収益化でも実績を出しながら、150名以上に案件獲得の秘訣を伝えてきています。
一人一人の個性に合わせて、確実に目標達成まで伴走してくれると評判です。
コードスルーの募集はLINE公式からおこなわれています。
毎回、期間限定・選別式ですが、無料の営業コンテンツも提供されているので、LINEの登録だけはしておくことをオススメします。
お客さん対応も営業です。
いざという時に困らないためにも、 本質の営業力学んでいきましょう!
まとめ
ここまでHTML / CSSから始まり営業の方法まで書いてきました。
Twitterをしていると「3ヶ月で初案件獲得しました!」とか「半年で月収100万円達成!」というツイートを見る事があると思いますが、それはごく一部、100人に1人いるかどうかぐらいだと思っていいと思います。
最も重要なのは辞めない事です。
これもTwitterをやっていると分かりますが、学習初期に一緒に勉強していた仲間はどんどんいなくなります。
つまり続けているだけで勝ち残れます。
自分は初案件まで10か月かかり、10万円達成するまで1年以上かかっています。
少なくとも1年は継続しましょう。
1年続ければ間違いなく稼げるようになるはずです。
それでも稼げなければ、一歩を踏み出す為に背中を押してくれる仲間を見つければ大丈夫です。
このロードマップも1人の考えであり、正確無比で最短最速に進めるという訳ではありませんが、参考になれば嬉しいです。
長々と読んで頂きありがとうございましたm(__)m
Brainランキング1位獲得 & 3日で500部突破 クチコミ約300件 今だけ!5つの無料特典あり🎁 👇画像をクリック
コーディング案件の単価と作業効率を上げる!
(平均スコア)