副業・案件獲得 Web制作

コーディングとWordPressで月収30万円目指すWeb制作ロードマップ【独学のプログラミング学習方法から営業まで】

※ 当サイトではアフィリエイト広告を利用しています

プログラミングで稼げるようになりたいけどどうすればいい?
なるべく最短で無駄のない勉強をしたい
コーディングってどこまで勉強すればいいか分からない
未経験からコーディングだけで生活出来るようになったから、その経験からロードマップ作ってみたよ!

私は37歳になる手前からWeb制作の勉強を始め、現在ではWeb制作のみで生活出来るようになりました。

それまでの経緯については以下の記事に書いてあります。

あわせて読みたい
30代後半未経験でもプログラミング独学で稼げるようになるまで!
30代後半未経験でもプログラミング独学で稼げるようになるまで!

続きを見る

しかしこの記事は自分の実体験であり、

『今からやるならこうやって勉強するだろうなぁ🤔』

という思いもあります。

なので今回は、

『今から効率よく勉強して稼ぐならこうする🏃‍♂️』

といった内容を書いていきたいと思います。

ちなみにこの記事、

  • 『Web制作 ロードマップ』
  • 『コーディング ロードマップ』
  • 『WordPress 学習 ロードマップ』

検索1位となっています🙇‍♂️

検索ワードランキング

検索ワードランキング

検索ワードランキング

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

Web制作(コーディング・WordPress)の学習ロードマップに必要なスキル

この記事では学習のロードマップ以外にも、仕事を獲る為の行動についても挟んでいきます。

早速1つ目がこちら。

仕事を獲る為の行動①

勉強を始めようと思ったと同時にTwitterを始めましょう。
情報収集だけでなく積極的に発信したり、自分と同種のアカウントをフォローして色々真似したり、活気のあるコミュニティに入ったり色々やってみましょう。Twitterはやって損はないですし、上手く活用出来れば仕事に繋がるので早い段階で始めましょう。
私もTwitterを始めて間もない頃に繋がった方と2年以上お仕事をさせて頂いています。

Twitterは始めるのは簡単ですが続けるのは難しく、ほとんどの人が続きません。

そこで私なりにまとめたTwitterの運用術がこちらのnoteになります。

真っ当にノンストレスでフォロワーを増やし続ける『ゆるゆるTwitter運用術』

 

Web制作とは?

まずWeb制作とはどんな仕事があるかですが、

  1. コーディング
  2. デザイン
  3. マーケティング
  4. ディレクション
  5. WordPress

他にもいろいろありますが、周りにいるのはこの4つが多いです。

そしてこの記事はコーディングとWordPressで稼ぎたい人向けの記事となっています。

Web制作に限った話ではありませんが、何事も逆算して行動した方が効率的です。

そして必要なスキルはざっくり書くと以下になります。

Web制作で稼ぐのに必要なスキル

  • HTML / CSS
  • jQuery / JavaScript
  • WordPress

学習する順番は上記の通りで、下に行くほど稼げるようになります。

 

HTML / CSS(簡単な修正案件、jQuery未使用のLPなど)

正直HTML / CSSだけでは出来る仕事はほとんどなく、仕事が取れても小遣い程度だと思います。

ただこれはコーディングで稼ぐ為の必須スキルとなります。

必須スキルと言っても極める必要はなく、とりあえずは仕事をこなせるレベルになればOKです(簡単と思われがちですが、非常に奥が深いです)

あとは仕事をしながら常にスキルアップしていきましょう。

関連記事HTML関連記事
関連記事CSS関連記事

 

jQuery / JavaScript(LP、コーポレートサイト)

jQuery / JavaScriptが多少出来るようになれば、LPやWordPressと言ったCMSを使用しないコーポレートサイトであれば出来ます。

具体的に何が出来るようになるのかというと、サイトに動きをつけられます。

CSSでも出来るアニメーションもありますが、jQuery / JavaScriptはもっと複雑な動きを付ける事が出来ます。

これもHTML / CSS同様極める必要はなく、仕事をこなせるレベルになったら少しずつスキルアップしていけばOKです。

これが出来るようになると月5万円とか狙えるようになりますが、コーポレートサイトでWordPressなどのCMSを使わないサイトは滅多になく、LPや修正などの案件がメインになるかと思います。

あとはクライアントが自社のCMSを利用している場合は『コーディングのみで10ページ』という案件もあります。

関連記事jQuery関連記事
関連記事JavaScript関連記事

 

WordPress

WordPressが出来るようになると一気に仕事の幅が広がり、収入も増えます。

ここまで出来ればWeb制作だけで生活出来るレベルになります。

WordPress案件であればコーディングとWordPressだけでも15万円くらいの案件は普通にあるので、これを月2本やれば30万円達成です。

これもまた極めようとする必要はない、というか無理なので、オリジナルテーマの制作まで出来るようになれば一旦OKです。

関連記事WordPress関連記事

いろんなタイプのWeb制作者にインタビュー

ここでいきなりロードマップとは関係ない話ですが・・・当ブログではいろんなタイプのWeb制作者にインタビューをしています。

例えば、

  • 副業でWeb制作
  • 小さい子供がいるママさんフリーランス
  • 出産直前から営業を開始した新米ママさん
  • コーディングとデザインを一人で巻き取っている方
  • Webディレクター
  • 20年間の会社勤務からWeb制作フリーランスに転向
  • コミュニティとWantedlyを活用して案件獲得
  • 海外ノマドワーカー
  • クラウドソーシングのプロ
  • ココナラのプロ

などなど。

学習方法や営業方法だけでなく、自分の境遇に近い人がいたら参考になるかも知れないので、どんな人がインタビューされているか以下の記事を参考にしてみて下さい。

あわせて読みたい
Web制作フリーランスや副業で稼ぎたい人に読んで欲しいインタビュー記事まとめ
Web制作フリーランスや副業で稼ぎたい人に読んで欲しいインタビュー記事まとめ

続きを見る



Web制作の勉強方法

勉強方法にはいくつか種類があります。

Web制作の勉強方法

これだけある時点で迷いますよね(^^;

結論から言えば最初はProgateがおすすめです。

ただそれぞれの勉強方法にどういった特徴があるか説明していきたいと思います。

 

オンラインサービス(Progate、ドットインストール、chot.design)

まず最初に始めるなら、間違いなくProgateです。

自分もそうでしたが、もし今からやるとしてもProgateからやるのが正解だと思います。

Progateを使った勉強方法については後で解説します。

あとはドットインストールchot.designなどもおすすめで、いずれも月額1000円程度から始められます(※ chot.designは完全無料になりました)

それぞれの違いについては以下の記事を参照下さい。

あわせて読みたい
徹底比較!無料でも使えるプログラミング学習のおすすめオンラインサービス3選
徹底比較!無料でも使えるプログラミング学習のおすすめオンラインサービス3選

続きを見る

Progateについては以下の記事を参照下さい。

あわせて読みたい
Progateは意味ない?評判・使い方・注意点など徹底解説【プログラミング初心者の勉強に最適】
Progateは意味ない?評判・使い方・注意点など徹底解説【プログラミング初心者の勉強に最適】

続きを見る

chot.designについては以下の記事を参照下さい。

あわせて読みたい
無料で使えるデザイン学習サイト chot.designの評判は?
無料で使えるデザイン学習サイト chot.designの評判は?

続きを見る

 

本・参考書

個人的にはいくつかデメリットがあります。

参考書のデメリット

  • コードをコピペ出来ない
  • 不要な情報も多い
  • 買って満足する事多し

まぁ単に自分が本を読むのが極端に苦手なだけですが。。。

そんな自分でも一番最初に買って完走出来た本がこちら

ちょっと古いですが、Progateやドットインストールが終わった後にやるのがおすすめです。

ただしコードの書き方もちょっと古いので、使い方は理解しようとするのではなく以下のように『写経』として使いましょう。

使い方としては、

step
1
全部理解して進めようとしない

step
2
参考書通りにコードを書く(良く言われる『写経』)

step
3
参考書通りに表示されればOK

という感じです。

この参考書を使う目的は理解する事ではなく、1からコードを書いてちゃんと画面に表示される成功体験をする事だと思っています。

ただ参考書で勉強したいという方もいると思いますし、実際いい本も沢山あるのでそういった方はこちらにおすすめしたい本をまとめているので参考にしてみて下さい。

あわせて読みたい
【Web制作初心者向け】コーディングやデザインの勉強でおすすめしたい本まとめ
【Web制作初心者向け】コーディングやデザインの勉強でおすすめしたい本まとめ

続きを見る

本が苦手な自分でも読めた本や、有名な本だけご紹介しています。

 

オンライン教材(noteやBrainなどから購入)

これは個人の方がnoteやBrainなどで販売しているもので、自分が勉強中の時はこちらの教材を購入しました。

コーディングの練習をしよう〜その2〜(現在は販売していません)

この頃はあまりオンラインで販売されている教材はなかったんですが、今はたくさん出回っているのでぜひ有効活用しましょう。

このオンライン教材については後で解説しますが、以下の記事におすすめの教材をまとめて紹介しています。

あわせて読みたい
【独学・未経験者向け】Web制作で稼ぎたい人におすすめの教材をジャンル別に厳選紹介!
【独学・未経験者向け】Web制作で稼ぎたい人におすすめの教材をジャンル別に厳選紹介!

続きを見る

 

動画

動画での勉強はおすすめです。

動画の良いところは実際にコードを書いている動きが見れる所ですね。

ただ動画での勉強の場合、見るだけでなく自分でコードを書かないと効果は半減です。

動画と同じように手を動かしながら進めていくと効果的です。

YouTubeであれば無料で見れます。

 

Udemy

Udemyは有料ですが学べるジャンルや教材がたくさんあるので、ぜひどんなコースがあるか見てみて下さい。

コースはすべて30日間返金保証付きなので安心ですね。

また頻繁にセールを行なっているので、購入するときはセール中を狙いましょう。

Udemyはこちら

コーディングとWordPressの教材なら、こちらがおすすめです。

ちゃんと学ぶ、HTML/CSS + JavaScript

ちゃんと学ぶ、WordPress テーマ開発講座

 

Schoo

Schooは月額980円のプレミアム会員なら8,000本以上の動画が見放題です。

Udemyは講座ごとの買い切りですがSchoo月額制で見放題なので、見たい動画がたくさんあるならSchooがおすすめです。

無料会員でも毎日配信される生放送が無料で視聴可能で、登録後1時間は受け放題・最大2授業が無料となっています。

プレミアム会員も7日間の無料体験があるので、まずは無料会員登録をして気になる動画を見てみるといいと思います。

Schooはこちら

 

プログラミングスクール(Web制作ならデイトラ一択)

当ブログでもいくつかプログラミングスクールのご紹介をしていますが『Web制作に特化したスクール』であればデイトラ一択かと思います。

オンラインスクールなので自宅で受講することが出来ます。

口コミが非常に良く、カリキュラムの質が高いのはもちろん他のスクールと比べて圧倒的なコスパかつ買い切りとなっています。

そしてカリキュラムはどんどん更新されるので『情報が古い』ということもなく、メンターに質問が出来る点も独学だと挫折しやすいWeb制作の勉強においてはおすすめです。

私の周りも『Web制作を始めるならまずデイトラを勧める』という人も多いです。

もし以下に該当するのであれば、デイトラを購入するのが一番近道だと思います。

  • 独学にはこだわらない
  • Progateをやってみて楽しそう・続けられそうと思った
  • 10万円台前半くらいなら一括で支払える

デイトラは無料レッスン動画を見れるので、気になる人は以下の記事を参照下さい。

あわせて読みたい
デイトラのサービス内容・コース料金・評判・口コミをまとめて紹介【Web制作におすすめのスクール】
デイトラのサービス内容・コース料金・評判・口コミをまとめて紹介【Web制作におすすめのスクール】

続きを見る

また、

10万円台でも厳しい・・・

という人は、完全無料で30日間Web制作を学べるZeroPlus Gateがおすすめです。

あわせて読みたい
ZeroPlus Gateの口コミや評判と特徴やメリットを徹底解説【無料のプログラミングスクール】
ZeroPlus Gateの口コミや評判と特徴やメリットを徹底解説【無料のプログラミングスクール】

続きを見る

 

メンターを雇う

これはMENTAなどのサービスでメンター(家庭教師)を雇うという事です。

自分もMENTAを使いましたが、ちょっと自分の方向性と違う方を選んでしまったので失敗しました。

コーディングで稼ぎたい場合はコードレビューをしてくれる方を探すと思うので、もし利用する場合はちゃんと自分の方向性に合った人を選びましょう。

 

ググる

正直これが一番良く使います。

良く使うというより常に使うと思います。

ググって勉強する時のコツは、

  • なるべく新しい情報を参考にする
  • 1つのページだけ見て信用しない
  • 解決したらコードなどの情報をまとめる(ブログなどでもOK)

この辺かと思います。

これは案件を受け始めてからも良く使うので、ググり力を鍛えるのは必須です。

コードのまとめ方はこちらの記事を参照下さい。

あわせて読みたい
Notionを使ってプログラミングのコード管理をする方法【日本語対応版】
Notionを使ってプログラミングのコード管理をする方法【日本語対応版】

続きを見る

今は使っていませんが、Boostnoteというツールもコード管理に使えます。



HTML / CSSの勉強方法(最初はProgate)

まずコーディングを勉強する順番として最初はHTML / CSSが基本になります。

そして恐らくほとんどの人が利用していると思われるのが、Progateというオンラインサービスです。

自分もProgateから始めましたが、これは間違いないです。

最初はProgateの活用方法を中心に解説しますが、ドットインストールchot.designでも考え方は同じです。

先ほどもご紹介しましたがそれぞれの違いについては以下の記事を参照下さい。

あわせて読みたい
徹底比較!無料でも使えるプログラミング学習のおすすめオンラインサービス3選
徹底比較!無料でも使えるプログラミング学習のおすすめオンラインサービス3選

続きを見る

Progateについては以下の記事を参照下さい。

あわせて読みたい
Progateは意味ない?評判・使い方・注意点など徹底解説【プログラミング初心者の勉強に最適】
Progateは意味ない?評判・使い方・注意点など徹底解説【プログラミング初心者の勉強に最適】

続きを見る

 

Progateは無料会員と有料会員どちらがいいか?

Progateには無料会員と有料会員がありますが、ここは迷わず有料会員になっておきましょう

有料といっても月額980円(税別)です。

勉強に投資する習慣がないと『有料』と聞くだけでちょっと気が引けるかも知れませんが、勉強に対して投資する習慣を付けておかないとこの先苦労すると思います。

勉強に対する投資は時間を買う事と同じ、つまり早く稼ぎたいと思うなら投資するべきです。

とは言え、Progateは大した金額ではないのでサクッと有料会員になっておきましょう。

月額制なのでダラダラ勉強していると毎月お金がかかるので、早く勉強を進めようという気持ちになれるというメリットもありますw

 

Progateはどのコースを受講するか

Progateにはいくつかのコースがあり有料会員になると全部受講出来るようになりますが、ここでやりがちな失敗例の1つは、

色んなコースに手を出してしまう

という事です。

これはドラクエで船を入手した途端、行動範囲が広がってどこに行っていいか分からなくなる状態と似ています。

有料会員になると全部のコースが受講出来るようになりますが、大人しくHTML / CSSだけを受講しましょう。

ちなみに自分が勉強してた頃にはHTML / CSSコースに中にあるFlexbox編はありませんでしたが、Flexboxは死ぬほど使うので忘れずに受講しておきましょう。

Flexboxについては良く使う物をこちらの記事に書いたので参照下さい。

あわせて読みたい
【CSS】横並びレイアウトの定番『Flexbox』の使い方を解説
【CSS】横並びレイアウトの定番『Flexbox』の使い方を解説

続きを見る

 

Progateは何周したらいいか?

これも良く言われている失敗例です。

Progate失敗あるある

  • レベル上げに夢中になる
  • 何週も繰り返す

Progateは初心者向きの教材ではありますが、ここで全てを理解しようとすると沼にハマります。

Web制作の勉強の入り口としては最適なProgateですが、個人的に思うProgateの役割は、

  • HTML / CSSがどのような物か知る
  • コーディングがどのような物か知る
  • コーディングを続けられそうか確かめる

この辺だと思います。

まずProgateの内容を全て理解する必要は全くなく、むしろ全て理解してもコーディングは出来ないと思います。

なのでおすすめの進め方としてはこのようになります。

step
1
とりあえず指示通りに進める

step
2
分からなかったら遠慮なく答えを見る

step
3
2~3周して何となく雰囲気を掴めたら終了

このくらいでProgateは終了して次に進みましょう。

全然理解出来てない気がするけど大丈夫?

と思うかも知れませんが大丈夫です。

学習の初期段階では、完璧に理解するよりとにかく進むことが重要です。

学習期間の目安

  • Progateは集中して1週間くらいで駆け抜けましょう
  • ただここでテンションが上がらないと1ヶ月かかる可能性もあり

 

Progate以外のドットインストールやchot.designは?

Progate以外のオンラインサービスであるドットインストールchot.designもおすすめです。

先ほどご紹介した比較記事を参照して頂ければと思いますが、chot.designは他の2つにはないWordPressのカリキュラムもあるので、Web制作であればchot.designの方がおすすめです。

WordPress以外にも他の2つのサービスにはないデザインや画像加工のカリキュラムもあります。

デザインにも興味がある人にもおすすめですし、画像加工はInstagramやブログのサムネにも使える汎用性の高いスキルなのでおすすめです。

chot.design公式サイトはこちら

 

VSCodeをインストール(テキストエディタの導入)

ここで環境構築するために『VSCode』というテキストエディタをインストールするのですが、このVSCodeはプラグインという拡張機能を追加することでどんどん使いやすくなっていきます。

VSCodeのインストールと日本語化についてはこちらの記事を参照下さい。

あわせて読みたい
【初心者向き】VSCodeのインストールと日本語化する方法を画像で解説
【初心者向き】VSCodeのインストールと日本語化する方法を画像で解説

続きを見る

またおすすめのプラグインについてはこちらの記事を参照下さい。

あわせて読みたい
【VSCode】Web制作におすすめのプラグイン・拡張機能14選【画像と動画で解説】
【VSCode】Web制作におすすめのプラグイン・拡張機能14選【画像と動画で解説】

続きを見る

ドットインストールやchot.designはこの環境構築を自分でやる点がProgateより少し難しいので、やはり最初は雰囲気を掴むためにProgateがおすすめです。

またVSCodeでは標準搭載されている『Emmet』という機能があります。

『Emmet』とは簡単に説明すると、少ないタイピングでコードを入力出来る機能です。

例えば『mt10』と入力するとmargin-top: 10px;となります。

『jcsb』と入力するとjustify-content: space-between;となります。

ただここで間違ってはいけないのは、Emmet全部を覚える必要はないという事です。

Emmetについては以下の記事を参照下さい。

あわせて読みたい
爆速コーディング!Emmetの使い方・書き方とVSCodeの設定を解説
爆速コーディング!Emmetの使い方・書き方とVSCodeの設定を解説

続きを見る

 

そしてドットインストールやchot.designが終わっても続けられそうであれば、第一の壁は乗り越えたと言っていいでしょう。

学習期間の目安

  • ドットインストールも1週間でクリア出来たら上々!
  • Progate同様、短期間でとにかく進む事が大切
  • chot.designのWordPressはまだやらなくてOK

 

やる気があればブログを始める(サーバーの契約をする)

仕事を獲る為の行動②

ここまで来てやっていけそうだと思ったら、ブログを始める事をおすすめします。
その理由についてはこちらの記事を参照下さい。
Web制作始める人がWordPressブログを始めた方がいい7つのメリット

燃える犬

自分はすぐ行動出来る人間だぜ!

という人は、サクッとブログを開設しちゃいましょう。

ブログを開設するにはサーバーの契約が必要なので、おすすめのサーバーは以下の記事を参照下さい。

あわせて読みたい
【徹底比較】ポートフォリオ用おすすめレンタルサーバー3選と選び方を解説
【徹底比較】ブログ・ポートフォリオにおすすめレンタルサーバー3選と選び方を解説

続きを見る

それぞれおすすめのサーバーでのブログ開設方法についても上記記事に載せています。

そしてブログをやらないとしても、

  • ポートフォリオを公開
  • テストサーバーでテスト

など、Web制作をやるなら自分で契約したサーバーは必須です。

なのである程度勉強が進んで、

仕事としてやっていけそう!

と思ったらサーバーの契約・WordPressのインストールをして、WordPressとサーバーの扱いに慣れておくことをおすすめします。

WordPressとサーバーに慣れておくと、実務で焦らなくて済むよ

 

初めてのコーディング教材に挑戦!

各オンラインサービスを3周ずつくらい終えたら、一度簡単なコーディング教材に挑戦してみましょう。

デザインカンプを無料で配布しているサイトがあり、中にはポートフォリオの実績として使える物もあるのでおすすめです。

あわせて読みたい
コーディング練習におすすめのデザインカンプ配布サイトまとめ【無料&実績OKあり!】
コーディング練習におすすめのデザインカンプ配布サイトまとめ【無料&実績OKあり!】

続きを見る

ポイント

この時点ではjQueryやJavaScriptを使わない部分だけでOKです(難易度が高いものもあります)

無料で出来るとは言えすんなりとはいかず、恐らく死ぬほど苦戦すると思います。

具体的には何から始めていいか分からないくらい進まないと思います。

しかし、苦戦すると分かっていれば『そういうもの』と割り切って頑張れると思います。

自分の場合は、ここで先ほども紹介したこちらの参考書をやりました

ただし、かなり古い本なので、この後ご紹介する参考書の方がおすすめです。

またこちらの本も有名で私も持っています。

その他のおすすめの書籍はこちらの記事でご紹介しています。

あわせて読みたい
【Web制作初心者向け】コーディングやデザインの勉強でおすすめしたい本まとめ
【Web制作初心者向け】コーディングやデザインの勉強でおすすめしたい本まとめ

続きを見る

あとはyoutubeなどの動画を見たり、ググったりと色々な方法で勉強しました。

この色々な勉強方法を試す』というのが結構重要で、自分に向いてる勉強方法を探したり気分転換にもなるのでおすすめです。

それならコーディング教材やる前に参考書や動画で勉強した方がいいんじゃない?

と思うかも知れませんが、コーディング教材から始めた方が分からない箇所が分かるから効率的です。

何が分からないかが分からない状態で参考書や動画で勉強するのは非効率です。

そしてここが最初のデカい壁です。

ここでちょっと心折れる人が続出するくらいだと覚悟しておきましょう。

初めてのコーディング教材をやる際にはこちらの記事が参考になると思います。

Web制作に最低限必要なファイルと作り方についてはこちらの記事を参照下さい。

あわせて読みたい
Web制作に最低限必要なファイルと作り方について解説
Web制作のコーディングに最低限必要なファイルと作り方について解説

続きを見る

HTMLのheadタグの書き方についてはこちらの記事を参照下さい。

あわせて読みたい
【コピペOK!】HTMLのheadタグの書き方を解説
【コピペOK!】HTMLのheadタグの書き方を解説

続きを見る

ヘッダーの書き方についてはこちらの記事を参照下さい。

あわせて読みたい
【初めてサイト模写する人向け】シンプルなヘッダーの書き方を解説
【初めてサイト模写する人向け】シンプルなヘッダーの書き方を解説

続きを見る

先ほどご紹介した本は、私が勉強時に使っていたものですが、少々古いので今なら以下の参考書をおすすめします。

また、Progateや参考書だけでなく、動画教材もおすすめです。

その場合は、Udemyちゃんと学ぶ、HTML/CSS + JavaScriptがおすすめです。

6万人以上が受講している確かな教材なので、コーディング教材に取り掛かる前に、こちらをやっておくといいでしょう。

ちゃんと学ぶ、HTML/CSS + JavaScript

 

デベロッパーツール(検証ツール)を使う

コーディング教材を始めたらデベロッパーツール(検証ツール)を使ってみましょう。

これは実務でも必須で使わない人はいないと思います。

デベロッパーツールの使い方についてはこちらの記事を参照下さい。

あわせて読みたい
Chromeのデベロッパーツールの使い方を徹底解説【コーディングに必須!】
Chromeのデベロッパーツールの使い方を徹底解説【コーディングに必須!】

続きを見る

動画ではこちらがおすすめです。

Chrome DevToolsの使い方を徹底解説!

学習期間の目安

  • 初めてのコーディング教材は余裕を持って2週間
  • ここが最初の挫折ポイントだと覚悟してふんばる



Sass(SCSS)を習得する

ここで今まで出てこなかった『Sass』が出てきました。

Sassとは、簡単に言えばCSSを書きやすくしたもの』と思っておけば大丈夫です。

Sassを習得するとこの後グッと楽になるので、これも必須だと思って下さい。

Progate、ドットインストール、chot.designにもSassのカリキュラムはあるのでコーディング教材に挑戦する前にやっても構いませんが、個人的にはSassを習得前に先ほどの教材をやり、その後Sassを習得することでSassの便利さが分かるかなと思っています。

Sassに関する記事はこちらを参照下さい。

あわせて読みたい
【VSCode】Dart Sassが使えるプラグイン『DartJS Sass Compiler and Sass Watcher』の使い方
【VSCode】Dart Sassが使えるプラグイン『DartJS Sass Compiler and Sass Watcher』の使い方

続きを見る

Sassでよく使う機能を5つ厳選して徹底解説!  →リライト中ですm(_ _)m

Sassも良く使う機能だけ覚えておけばとりあえずOKです。

また、Sassに関する参考書を買うならこの本一択かと思います。

学習期間の目安

  • 3日でOK(Sassのコンパイルで躓くかも知れません)
  • コンパイルとパーシャルが出来れば後はやりながら慣れていけばOK



コーディング教材をこなす

先ほどコーディング教材をご紹介しましたが、実務をこなすにはまだ色々と足りません。

 

模写は基本的に不要

コーディングの勉強というと模写が良く知られていますが、模写にはデメリットがあります。

模写のデメリット

  • 実務で模写はしない
  • ポートフォリオの実績として使えない

模写とは実在するサイトを真似する事ですが、実務では実在するサイトを参考にコーディングなんてしません。

また、コーディング教材の場合はポートフォリオの実績として掲載OKの物がありますが、模写の場合は原則NGです(※勝手に使用したら訴えれらる可能性もあり)

なぜこんなに模写が浸透したかというと、以前はコーディング教材というものがほとんどなかったからだと思います。

ただ今は多くのコーディング教材が出回っているので、模写をする必要は基本的にありません。

強いて言えば自分のコードと参考サイトのコードを見比べて勉強出来るという事くらいでしょうか。

それでも模写が気になるという方は、こちらの記事を参照下さい。

模写コーディングのやり方・手順とコツについてはこちらの記事を参照下さい。

あわせて読みたい
【初心者向け】今は不要?模写コーディングのやり方・手順とコツを徹底解説
【初心者向け】今は不要?模写コーディングのやり方・手順とコツを徹底解説

続きを見る

模写コーディングにおすすめのサイトについてはこちらの記事を参照下さい。

あわせて読みたい
【レベル別】模写コーディングにおすすめのサイト7選【初心者向け】
【レベル別】模写コーディングにおすすめのサイト7選【初心者向け】

続きを見る

 

デザインカンプを使ったコーディング

コーディングをする時にはデザインを元にコーディングしますが、このデザインをデザインカンプと言います(単にカンプとも言います)

また、カンプは主に4種類あります。

デザインカンプの種類

  • Photoshop
  • Illustrator
  • XD
  • Figma

一番最初にご紹介した教材はXDで作られており、XDの見方については軽く動画の解説も教材の中にあります。

実務ではカンプの種類をこちらから指定することは出来ないので、どのカンプで来ても対応出来るようにしておかなくてはいけません。

かといってPhotoshopやIllustratorを1から勉強する必要はなく、あくまでもコーディングのカンプとして見方を知っていればOKです。

見方というのは、

  • 要素、余白、フォントのサイズ
  • 色、影、書体
  • 画像の書き出し

などになります。

各デザインカンプからのコーディング方法については以下の記事を参照下さい。

あわせて読みたい
【Adobe Illustrator編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
【Adobe Illustrator編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】

続きを見る

あわせて読みたい
【Adobe Photoshop編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
【Adobe Photoshop編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】

続きを見る

あわせて読みたい
【Adobe XD編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
【Adobe XD編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】

続きを見る

あわせて読みたい
【Figma編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
【Figma編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】

続きを見る

学習期間の目安

  • ここは1ヶ月以上かかってOK
  • ここもかなりしんどい時期ですがふんばりましょう

また、ここまで進んだらこちらのnoteを購入することをおすすめします。

僕がCSSを書く際に必ず意識している CSSのコーディングルール30条

恐らくこの時点で読んでも分からないことが多いと思いますが、案件をこなしつつ時々見返すと段々分かるようになってきます。

 

ピクセルパーフェクトを目指す

ピクセルパーフェクトとは、デザインと1pxもズレないようにコーディングする事です。

初心者にはハードルが高いかも知れませんが、これが出来るだけで制作会社やクライアントからの信用は確実にアップします。

『出来て当たり前』と言う人もいると思いますが、出来ない人が多いのも事実です。

必ずしもピクセルパーフェクトである必要はなく、クライアントからも数px程度であればズレていても指摘される事は少ないと思いますが、ピクセルパーフェクトを目指してコーディングした方が実は簡単です。

それにピクセルパーフェクトにした方が修正回数も少なくなります。

どうすればいいかと言うと、Chromeの拡張機能を使います。

PerfectPixelの使い方については以下の記事を参照下さい。

あわせて読みたい
【Chrome拡張機能】ピクセルパーフェクトでコーディングするのに必須なPerfectPixelの使い方
【Chrome拡張機能】ピクセルパーフェクトでコーディングするのに必須なPerfectPixelの使い方

続きを見る

 

実務レベルのコーディング練習ができる教材

ここまで無料で配布されているデザインカンプなどを使い、荒削りながらコーディングが出来るようになってきたかと思います。

しかし、

これで実務レベルのスキルは身に付いているんだろうか・・・

と不安な方もいると思います。そしてその不安は的中しています。

というのも、無料の教材はレビューがありません。

つまり自分で書いたコードを人に見て貰えないので、間違いや改善点があっても気が付けません。

しかし実務では、

クライアント

表示が崩れているしデザイン通りではありません。修正点をまとめたのでお願いします、50個ほど。

ということがあります。

自分では完璧と思っていても、修正は予想以上、場合によっては信じられないほど発生します。

そこで実務レベルのコーディングができ、さらにレビューもして貰えるのがこちらの教材です(画像クリックでアクセス👇)

こちらはWeb制作スクールで有名なデイトラのメンターをやられているしょーごさんが販売している、コーディング初心者にとって鉄板の教材です。

レベル別に個別に販売もしていますがやり残した教材があると後悔するかも知れませんし、全部盛りの場合は個別で買うより25%も安くなるので、最初から全部盛りを購入するのがおすすめです。

正直説明が不要なくらい有名な教材なのですが、以下のような内容となっています。

教材の内容

  • ①初級:基礎的なHTML / CSS
  • ②初級その2:HTML / CSSのレスポンシブに慣れる
  • ③初級Ex:HTML / CSS基礎総復習
  • ④中級:jQuery・JavaScriptの導入
  • ⑤中級Ex:高度なCSSとJavaScriptライブラリの使用
  • ⑥上級:WordPressを活用したメディア型企業サイト
  • ⑦即戦力編:土木・製造業のトップページ
  • ⑧JavaScript,jQuery特訓編:jQuery・JSでよくある実装を学習
  • 以上、8つの教材が全部盛り
  • さらにレビューを受けられ、修正点があれば2回目のレビューも受けられる
  • オリジナルポートフォリオ化と、そのレビューを受けられる

教材のポイント

  • レベル別に段階を踏んでコーディングの練習が出来る
  • 初級〜実務レベルの上級まで網羅
  • 現役のエンジニアであるスクールのメンターからレビューを2回も受けられる
  • 他の人と被りがちなポートフォリオをオリジナル化できる

このように段階を踏んで実務レベルのコーディングを練習することができ、レビューも受けられ、さらに営業で必須なポートフォリオについても対応されています。

ポートフォリオはスクールの場合だと他の人と被ってしまうことが良くありますが、この教材では他の人と被らないようにオリジナルのポートフォリオを作れるようになっています。

正直、自分が学習中にこの教材があったらどれだけ心強かっただろうと悔やまれますw

当然実務レベル&即戦力を目指す教材なので、後半はかなり難易度が高く苦戦すると思いますが、自信を持って初案件に望みたい方はこの教材で完走を目指してみて下さい。

完走した頃には『実務レベルのスキル』と、営業で他の人と差別化できる『オリジナルポートフォリオ』が手に入るよ!

初心者コーダー必須の教材!

コーディング演習課題【全部盛り】はこちら

コードレビュー付き!

 

実務レベルのスキルを身に付けるのにおすすめの教材

もし先ほどの教材でつまづいて先に進めなくなってしまったり、もっとスキルアップしたいという人にはこちらの教材がおすすめです(画像クリックでアクセス👇)

【"最短2ヶ月"で実務レベルのコーディングスキルが身につく】実践型コーディング教材

教材の内容はこちらです。

教材の内容

  • 4種類のデザインカンプ(ポートフォリオに掲載可能)
  • 5時間以上のライブコーディング動画
  • 50本以上の動画講義
  • 特典①:コーディングテンプレートファイル
  • 特典②:制作着手前チェックシート
  • 特典③:納品前チェックシート
  • 特典④:個人開発Git講座
  • 特典⑤:CSS設計動画講義

学習初期段階では買わなくてもいいかと思いますが、無料部分の解説を読んで自分に必要だと感じたら迷わず購入していいと思います(今後コンテンツが更新されて値上げの可能性もあり)

LP1本のコーディングで費用は容易に回収できるので、迷うだけ時間とお金をロスするだけです。

販売ページに230件以上のレビューも掲載されているので、そちらも参考にしてみて下さい。

最短2ヶ月で実務レベルのスキルが身に付く!

実践型コーディング教材はこちら

5大特典付き!



jQuery / JavaScriptの勉強方法

ここまでで簡単なLPや修正案件くらいはこなせるスキルが身に付いてきたかと思いますが、ハンバーガーメニューやスライダーといった動きを付ける為にはjQueryとJavaScriptが必須となります。

この勉強方法もまずはお馴染み『Progate』でOKです。

まずJavaScriptコースはⅦまでありますが、ここはⅢくらいまででOKです。

そしてjQueryコースは初級・中級・上級とありますが、中級まででOKです(気になる方は上級やっても構いません)

そんな適当で大丈夫?

と思うかも知れませんが、Progateでは実践的な事は学べないので『jQuery使うとそんな事が出来るんだぁ』程度にしておきましょう。

jQueryの使い方についてはこちらの記事を参照下さい。

あわせて読みたい
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】jQueryとは?CDNを使った本体の読み込み方も分かりやすく解説

続きを見る

あとは実装したい物を決めてググって実装するのが一番効率的だと思います。

例えば、

「ハンバーガーメニュー jQuery」
「アコーディオンメニュー jQuery」
「モーダルウィンドウ jQuery」

という感じでググれば沢山ヒットします。

ここでも本を買って1から勉強するのは非常に非効率なので、個人的にはおすすめしません

step
1
実装したい物をググる

step
2
実装する

step
3
気になったコードを調べる

step
4
コードをいじって動きを変えてみる

この繰り返しで段々分かってくると思います。

関連記事jQuery関連記事
関連記事JavaScript関連記事

 

jQuery / JavaScriptのおすすめ教材について

おすすめの教材に関しては先ほどもご紹介したこちらの記事にある、Codestepの中級編以降が参考になります。

あわせて読みたい
コーディング練習におすすめのデザインカンプ配布サイトまとめ【無料&実績OKあり!】
コーディング練習におすすめのデザインカンプ配布サイトまとめ【無料&実績OKあり!】

続きを見る

ここまで終わればLPやWordPressなどCMSを使わないコーポレートサイトが出来るようになり、月5万円は稼げるようになります。

営業が得意ならもっと稼げると思いますが、やはりWordPressが扱えないと選べる案件がかなり限られてしまいます。

学習期間の目安

  • ここも1ヶ月以上かかってOK
  • ここが案件獲得最低ラインなのでふんばりましょう



ポートフォリオ制作

ここまで来たら一旦ポートフォリオ制作に取り掛かりましょう。

ポートフォリオとは自分の制作実績やスキルをまとめたページの事で、そこにプロフィールや料金表を記載することもあります。

ポートフォリオの作成手順としては、

  1. デザイン
  2. コーディング
  3. 公開

簡単に書けばこれだけですが、今までと違ってデザインからやるのでどうしていいか分からないと思います。

まずは色んな人のポートフォリオを見てみましょう。

TwitterでWeb制作をやっている人のプロフィールを見ればポートフォリオのURLが載っている事があります。

いくつか見ればポートフォリオの構成などが分かると思います。

ただしこの後書きますが、ポートフォリオ自体はポートフォリオ作成サービスを利用するのもおすすめです。

また、営業のプロに聞いたポートフォリオの作り方についてはこちらの記事を参照下さい。

あわせて読みたい
Web制作フリーランスが未経験から案件獲得に必要な営業用ポートフォリオの作り方とコツ
Web制作フリーランスが未経験から案件獲得に必要な営業用ポートフォリオの作り方とコツ

続きを見る

 

ポートフォリオには時間をかけない

1つ重要なのが、ここであまり時間をかけない方が良いという事。

というのもポートフォリオ自体より制作実績の方が重要なので、ポートフォリオ自体はポートフォリオ作成サービスを利用するのもアリです。

これはポートフォリオ自体はデザイン、コーディング、サーバーにアップなどは不要で、制作実績やスキル、プロフィールなどを載せるだけでOKです。

詳しくは以下の記事を参照下さい。

Salon.ioの使い方はこちら。

あわせて読みたい
Web制作営業で役立つポートフォリオ作成サービスSalon.ioの使い方
Web制作営業で役立つポートフォリオ作成サービスSalon.ioの使い方

続きを見る

RESUMEの使い方はこちら。

あわせて読みたい
Web制作営業で役立つポートフォリオ作成サービスRESUMEの使い方
Web制作営業で役立つポートフォリオ作成サービスRESUMEの使い方

続きを見る

もしポートフォリオ自体もオリジナルで作りたい場合は、色んな人のポートフォリオやサイトから良さげなパーツを真似して組み合わせる感じでサクッと作ってしまいましょう(凝ったデザインである必要は全くなし)

多くのサイトも色んな他のサイトを参考にして作られています。

もちろん最初から最後まで丸パクリはダメですが、参考サイトを元にしてアレンジすればいいかと思います。

ただ自分で1から作るよりポートフォリオ作成サービスを使った方が見栄えが良く、崩れたりしないので個人的にはおすすめです。

また実績については先ほどご紹介したコーディング教材で実績使用OKの物や、架空サイトを載せておきましょう(※模写サイトは基本的にNGです)

もちろん既に実績があればそちらを載せます。

実績が増えてきたらコーディング教材や架空サイトは削除して、実績として掲載OKな実案件のサイトを載せましょう。

 

ポートフォリオをサーバーにアップして公開

ポートフォリオを作成したら、サーバーにアップしてインターネット上で見れるようにしておきましょう。

もし先ほど解説したポートフォリオ作成サービスを利用するならポートフォリオ自体はサーバーにアップする必要はありませんが、制作実績はサーバーにアップする必要があります。

サーバーにアップしないと自分のパソコン上でしか見れないので、営業する時に相手に見せる事が出来ません(対面であれば自分のパソコン上で見せる事も出来ますが)

サーバーにアップしてないと『サーバーにアップ出来ない人』と思われてしまうかもしれません。

なので、サーバーにアップしてようやくポートフォリオは完成と言えます。

そのためにはサーバーを契約する必要がありますが、サーバーにも色んな種類があってどこで契約していいか分からないと思います。

そういった方は以下のおすすめレンタルサーバーの記事を参照下さい。

あわせて読みたい
【徹底比較】ポートフォリオ用おすすめレンタルサーバー3選と選び方を解説
【徹底比較】ブログ・ポートフォリオにおすすめレンタルサーバー3選と選び方を解説

続きを見る

またポートフォリオの公開方法(サーバーにアップする方法)については以下の記事を参照下さい。

あわせて読みたい
【初心者向け】Web制作案件での納品を意識したFTPソフトを使用したポートフォリオサイトの公開方法
【初心者向け】Web制作案件での納品を意識したFTPソフトを使用したポートフォリオサイトの公開方法

続きを見る

制作期間の目安

  • 1週間~1ヶ月(こだわり具合で大きく変わります)
  • ポートフォリオ作成サービスを使えば1日で出来ます(制作実績がある場合)

仕事を獲る為の行動③

ポートフォリオ作成まで来たらオフラインでの交流会に参加するのがおすすめです。
Twitter上での繋がりより、オフラインで直接人と会う方が仕事に繋がる可能性は断然高いです。
Progate始めた段階で交流会に参加してもあまり話に入っていけないと思うので、個人的には早くてもこのくらいのタイミングかなと思います。
逆にProgate始めた段階で参加して、どうやって学習序盤を乗り越えたかなど話を聞いてみるのもありなので、タイミングはお任せします。



クラウドソーシングに登録

この辺で一度クラウドソーシングに登録してみましょう。

この3つが有名処となります。

まずはどんな仕事があるか見てみましょう。

ただ・・・今の時点で出来そうな案件は少ないかと思います。

なので個人的にはWordPressまで学習を終えてから案件獲得を始めるのがおすすめですが、もちろんこの時点で出来そうな案件に挑戦するのもありです。

クラウドワークスの攻略法についてはこちらのブログに色々書いてあるので、参考にしてみて下さい。

はらブログ

こちらの記事もおすすめです。

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

クラウドソーシングは駆け出しが集まるレッドオーシャンだと思われていますが、スキル以前の問題の人が多く、しっかり準備して挑めば十分稼ぐことは可能です。

ランサーズについては以下の記事が参考になると思います。

あわせて読みたい
【初心者向き】ランサーズがクラウドソーシングで選ばれる理由4選と営業時間0で稼ぐ方法
【案件獲得!】ランサーズがクラウドソーシングで選ばれる理由4選と営業時間0で稼ぐ方法

続きを見る

あとは有名なクラウドソーシングだと案件の争奪戦になりがちなので、少しマイナーなクラウドソーシングも登録しておくことをおすすめします。

おすすめのクラウドソーシングについては以下の記事を参照下さい。

あわせて読みたい
フリーランスWeb系エンジニア・デザイナーの案件獲得・営業におすすめのサービスまとめ
フリーランスWeb系エンジニア・デザイナーの案件獲得・営業におすすめのサービスまとめ

続きを見る

後ほどクラウドソーシング攻略系の教材をご紹介します。



WordPressの勉強方法

いよいよWordPressの勉強に入ります。

WordPressはこれまでとちょっと毛色が違うので戸惑うかも知れませんが、出来るようになると一気に月20万以上が見えてくるので、頑張りましょう!

 

WordPress案件の種類

WordPress案件は主に2種類あります。

  • オリジナルテーマ制作
  • 既存テーマ、有料テーマで制作(ノーコード、ローコード)

それぞれの特長を見てみます。

オリジナルテーマ制作

  • コーディング必須
  • 制作会社からの案件はほぼこれ

既存テーマ、有料テーマ制作

  • コーディング不要、もしくは少なめ
  • クラウドソーシングやエンド営業ではこっちでもいける

コーディングが必要なオリジナルテーマ制作の方が稼げるように見るかも知れませんが、そうとは限りません。

既存テーマを使った制作はコードをほとんど書かなくても大丈夫なので、回せる案件数を増やせます。

また、既存テーマを使った制作だからと言って単価が極端に安い訳ではありません。

既存テーマを使った制作でガッツリ稼いでいる仲間もいます。

オリジナルテーマとノーコード両方出来ればいいとは思いますが、周りを見る限りどちらかに偏っている気がします。

私の場合は100%オリジナルテーマです。

ノーコードで稼ぎたいと思う方もオリジナルテーマで制作出来るようにしておくとWordPressをより深く理解出来るので、一通りやっておくといいと思います。

 

PHPの勉強は必要?

WordPressはPHPというプログラミング言語で出来ているため『PHPの勉強をしましょう』という方もいますが、個人的にはPHPの勉強は後回しでいいと思っています。

なぜならWordPressで使われているPHPはWordPress独自の関数などを使っているため、PHPを勉強するよりWordPressを勉強した方が断然効率的です。

ProgateにもPHPコースはありますが、これはやらなくても大丈夫です。

 

習得しておきたいWordPressスキル

WordPress案件をやるなら習得しておきたい項目はこちらです。

  • オリジナルテーマ
  • お問い合わせフォーム
  • カスタム投稿
  • カスタムフィールド

お問い合わせフォームに関してはほぼ100%ありますが、ちょっと癖があるので初案件前に出来るようにしておきましょう。

おすすめはContact Form 7というプラグインを使う方法で、こちらの記事を参照下さい。

あわせて読みたい
Contact Form 7の基本的な使い方【WordPressお問い合わせフォームの定番プラグイン】
Contact Form 7の基本的な使い方【WordPressお問い合わせフォームの定番プラグイン】

続きを見る

また、カスタム投稿やカスタムフィールドも必須ではありませんが、結構な確率で含まれているので出来るようにしておくと安心です。

 

勉強方法とおすすめ教材

WordPressの勉強方法は色々ありますが、今回はオリジナルテーマ制作の勉強という事で、前提としてHTMLで制作したサイトを用意します。

このHTMLサイトをWordPressにするのを『WordPress化』とも言います。

ここまでで作成したポートフォリオをWordPress化してもいいんですが、WordPressのメリットはブログなどの投稿機能を実装できることなので、投稿ページがある架空サイトを作ってそれをWordPress化するのがベストです(ポートフォリオに投稿ページはないと思うので)

ただ投稿ページがある架空サイトを作るのも一苦労だと思うので、動画で勉強したい方はちゃんと学ぶ、WordPress テーマ開発講座がおすすめです。

Udemyは他にもたくさんの講座があり、有料ですが頻繁にセールをしているのでセールの時を狙って購入しましょう。

またyoutubeでもWordPressと検索すればたくさん動画が見つかるので、最初はyoutubeで勉強してもいいかも知れません。

書籍であればこちらの本がおすすめです(電子書籍で購入しました)


あとはこのブログでもオリジナルテーマについてや、その他の実装についてもご紹介しています。

関連記事WordPress関連記事

もし1人ではしんどいと感じたら、プログラミングスクールの『テックアカデミー』でWordPressコースなどをやってみるのもありかと思います。

TechAcademyのWordPressコースはこちら

あわせて読みたい
テックアカデミーの評判・口コミ・注意点など徹底解説【プログラミングスクール受講者数No1!】
テックアカデミーの評判・口コミ・注意点など徹底解説【プログラミングスクール受講者数No1!】

続きを見る

他にもDMM WEBCAMPでもWordPressコースがあるので、まずは無料相談を受けてみるといいと思います。

DMM WEBCAMPのWordPressコースはこちら

あわせて読みたい
DMM WEBCAMPの評判・口コミ・注意点など徹底解説【未経験者向けプログラミングスクール】
DMM WEBCAMPの評判・口コミ・注意点など徹底解説【未経験者向けプログラミングスクール】

続きを見る

 

"誰でも月収50万円以上"を達成可能にする】初心者向け実践型WordPress教材

また、こちらの教材もおすすめです(👇画像クリック出来ます)

【"誰でも月収50万円以上"を達成可能にする】初心者向け実践型WordPress教材

こちらは学習面以外にも制作会社とのやり取りの流れや、特典では『作業前・納品前のチェックシート』『営業文のサンプル』『見積もり計算シート』など『実務に対する不安を払拭できる内容』となってます。

LP1本のコーディング費が安くても3万円くらいだと考えれれば、軽く1日で回収出来るので早めに『安心』を購入しましょう。

詳細はこちらからどうぞ👇

今だけ!購入者限定の10大特典付き🎁

WordPress案件の不安を払拭!

 

勉強の注意点

WordPressには勉強の注意点がいくつかあります。

ココに注意

  • ググって見つかった情報が古い事がある
  • 人によってやり方が違う

WordPress化についてはこのブログでも詳しく書いていますが、先ほどご紹介したWordPress テーマ開発講座とは異なる点もあります。

『ちょっと何言ってるか分からない』という時は教材や勉強方法を変えてみたり、見比べてみるのがおすすめです。

自分も何かを実装する時、ググって見つかったページを5~6サイト開いた状態で見比べながら実装しています。

特にWordPressはブログや動画に限らず分かりにくい物はいくら見ても分からないので、たくさんググって色んな方向から情報をかき集めましょう。

どこかに分かりやすい情報があるはずですw

学習期間の目安

  • 1ヶ月以上かかってOK
  • ここをクリアしたら後は案件獲得するだけなのでもうひとふんばり!



コーディング速度を上げる方法

ここまでで一通りの学習は完了しました。

あとは案件をこなしていけば少しずつコーディング速度も上がっていくと思いますが、ここでいくつかその方法をご紹介します。

また、こちらも作業効率がアップし結果的に時給アップにも繋がるので、参考にしてみて下さい。

コーディング&WordPressメモまとめ集の詳細はこちら。

あわせて読みたい
【コピペで使える!】コーディング&WordPressコードスニペット集【無料特典あり】
初心者向き教材!コーディング&WordPressコードスニペット集【コピペで使える】

続きを見る

 

VSCodeでスニペットを自作

これは先ほど出てきたEmmetと似てますが、良く使うコードを少ないキーで表示出来るようにコードを自作する事です。

VSCodeでスニペットを自作する方法については以下の記事を参照下さい。

あわせて読みたい
VSCodeで自作したスニペットを登録する方法【作業効率アップにおすすめ!】
VSCodeで自作したスニペットを登録する方法【作業効率アップにおすすめ!】

続きを見る

 

コード管理

これは今まで使ってきたコードをまとめておくことですね。

方法としてはBoostnoteやNotionなどありますが、自分は最初Boostnoteを使っていましたが今はNotionを使っています。

これについては先ほどもご紹介しましたが、こちらの記事を参照下さい。

あわせて読みたい
Notionを使ってプログラミングのコード管理をする方法【日本語対応版】
Notionを使ってプログラミングのコード管理をする方法【日本語対応版】

続きを見る

最初は面倒に感じるかも知れませんが、この積み重ねが自分を楽にしてくれます。

 

Bootstrapって良く聞くけど何?

色んな人のブログとか見ているとBootstrapという言葉を見た事があるかも知れません。

これは簡単にレスポンシブデザインでサイトが作れちゃうという便利なフレームワークなのですが、Web制作においては滅多に使う機会はありません。

というか自分はこの2年半で一度も使っていません。

ここでしめじ先生のツイート

このツイートの『なんだかんだ』という言葉を見ても分かる通り、世間で言われている割に使う機会はありません。

なので個人的には勉強しなくてもいいと思いますし、もし使う機会がきたら勉強すればいいと思っています。

ただ『他の人はやりましょうって言ってるし、全くやらないのは気持ち悪い』という事であれば、Udemyのこの講座をおすすめします。

WordPress Development with Bootstrap: The Complete Course

全部英語ですが見た通りに手を動かせばOKです(全く英語が出来ない自分でも大丈夫だったので)

自分が買った時は2019年でしたが、2022と書いてあるのでバージョンアップしてるみたいですね。

12時間の動画なので、1日4時間やれば3日で終了です。



Web制作の営業方法

ここまでクリアしたら後は案件獲得に向けて営業するだけです。

ここは『初めてのコーディング教材』『WordPressオリジナルテーマ』に続く三大挫折ポイントの1つとなります。

ここまで来て仕事を獲れないというのは非常に勿体ないですが、実際にそういう人もいます。

案件獲得の方法については色々あります。

営業方法

  • クラウドソーシング
  • 制作会社
  • 知り合い
  • 営業パートナー
  • フリーランスエージェント
  • Twitter
  • エンド営業

ぱっと思いつくのはこのくらいですが、他にも色々あるでしょう。

また、どれがいいとは一概には言えません。

自分に向いていると思う方法を見つけましょう、というか出来れば一通りやってみる事をおすすめします(自分も大体やりました)

以下の記事では営業歴16年のプロに聞いた営業方法についての解説が載っているので、こちらも参考になると思います。

あわせて読みたい
【営業のプロが解説】Web制作フリーランスが未経験から案件獲得する為の営業方法6選!
【営業のプロが解説】Web制作フリーランスが未経験から案件獲得する為の営業方法6選!

続きを見る

また『独学応援サロン』『営業応援サロン』を運営しているこちらのブログも案件獲得や営業に関する記事がたくさんあるので、一度目を通しておくといいと思います。

独学応援ブログ

 

あとは仕事を始める前に、以下のnoteを読んでおくと安心です。

Web制作で遭遇した悪質クライアントのお話とトラブルを回避する方法 

有料ですがこれを知っておくとよく聞く炎上案件を回避しやすくなるはずです(ワンコインで買えます)

 

それでは1つずつ解説してきますが、その前にフリーランスの身を守る契約書』保険』について少し書きます。

 

契約書について

契約書とはクライアントと自分の間で交わす取り決めで、これがあると損害賠償のリスクを軽減できたり双方安心して仕事をすることが出来ます。

しかし、これを1から作ろうとすると何から初めていいか分かりません。

そこで『これさえあればOK』と言うのがこちら(👇画像クリック出来ます)

【"誰でも月収50万円以上"を達成可能にする】初心者向け実践型WordPress教材

これから案件をこなしていくのに必須とも言えるので、購入して手元に置いておくことをおすすめします。

Web制作の業務委託契約書についてはこちらの記事を参照下さい。

あわせて読みたい
【フリーランス必見!】Web制作の業務委託契約書とは?〜おすすめの雛形もご紹介〜
【フリーランス必見!】Web制作の業務委託契約書とは?〜おすすめの雛形もご紹介〜

続きを見る

 

損害賠償保険や即日払いについて

フリーランスは会社に属していないので、万が一クライアントに損害を与えてしまった場合は損害賠償を請求される可能性があります。

そしてそれが数百万円〜数千万円となったら・・・

しかし、フリーナンスというサービスでは損害賠償保険に無料で加入することが出来ます。

また、フリーランスはキャッシュフローに悩まされる事も多いです。

例えば作業開始から遅くとも2ヶ月後には入金されると思っていた案件の入金が4ヶ月後になったり・・・

これは入金が遅いというより、デザインが遅れたりクライアントの確認待ちが理由で案件の進行が遅れ、結果入金が何ヶ月も先になるという事です。

もちろん先払いであれば問題ありませんが、そうでない場合も多いと思います。

しかしフリーナンスでは手数料はかかりますが即日払いも可能です。

フリーナンスの詳細は以下の記事を参照下さい(1,000円貰える招待コードあり)

あわせて読みたい
入って損なし!フリーナンスの即日払いの評判やフリーランスを守る無料の保険を徹底解説!
【招待コードあり】フリーナンスの即日払いの評判やフリーランスを守る無料の保険を徹底解説!

続きを見る

フリーナンス公式HPはこちら

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

 

クラウドソーシング

恐らくクラウドソーシングから営業を始める人が多いと思います。

クラウドソーシングは稼げる人とそうでない人がハッキリ分かれる印象です。

メリット

  • どんなスキルが求められているか分かる
  • どんな仕事があるか分かる
  • スキル出品をすれば放置しててもスカウトされる事もある

デメリット

  • 駆け出しが集中するから頻繁にチェックして速攻で提案する必要あり
  • 発注者のリテラシーが低いと地雷
  • スキル出品をしないと毎回提案する必要がある

またいくつか注意点があります。

ココに注意

  • 短納期は避ける
  • 低評価は避ける
  • 極端な安価は避ける

短納期は誰かが途中でトンズラした地雷案件の可能性があり、そうでなくても慣れないうちから短納期は避けるべきです。

また極端な安価は避けるべきです。

最初は実績作りの為と思って無料でもいいからと思いがちですが、安いだけじゃなくとんでもない作業量という地雷もあります。

最初は適正価格が分からないと思うので、この辺は人に聞いてみるのもいいと思います。

おすすめのクラウドソーシングについてはこちらの記事を参照下さい。

あわせて読みたい
フリーランスWeb系エンジニア・デザイナーの案件獲得・営業におすすめのサービスまとめ
フリーランスWeb系エンジニア・デザイナーの案件獲得・営業におすすめのサービスまとめ

続きを見る

クラウドソーシングのおすすめ教材は、後ほどまとめてご紹介します。

 

制作会社

個人的にはこれが一番おすすめです。

複数の制作会社から継続案件を貰えるようになれば、営業しなくて済むようになります。

常駐の場合は周りにいる経験者の方にコードレビューして貰ったり、色々と教えて貰えるので非常にスキルアップしやすいと思います。

しかし、

制作会社の営業ってどうすればいいの?

という方が大半だと思います。

そういう人にはこちらのサービスがおすすめです(画像クリックでアクセス👇)

サービス内容

  • 制作会社に評価されるポートフォリオの解説
  • 営業文の雛形公開、及び各点の解説
  • 営業時にやってはいけない手法とリストアップ方法
  • 制作会社へのインタビュー
  • 営業文・添付資料・ポートフォリオの添削(2回)
  • 評価されるチェックシートの雛形と作り方
  • 制作会社との面談での質疑応答の解説
  • 制作会社はポートフォリオのどこを見ているのか
  • 制作会社に出す見積書の雛形と解説
  • その他、役立つ書類を複数追加予定

私のように営業経験がない人は、どうやって営業をしていいのかさっぱり分からないと思います。

そして、

燃える犬

とにかく数を打つ!

と意気込む人もいてそれも間違いではありませんが、なるべく希望の制作会社と契約したいですよね?

そのためには営業方法を学び、営業文やポートフォリオの添削を受ければ契約に至る可能性を大幅に上げることが出来ます。

そしてこちらのサービスは売りっぱなしではなく、実際に営業をする会社のリサーチをした上で添削をしてくれます。

営業は無策で挑むと消耗戦になり、次第に営業先がなくなっていくということもあり得るので、このサービスを活用して制作会社営業の打率を上げておくのがおすすめです。

制作会社営業の打率アップに!

営業文完全攻略はこちら

2回の営業文添削付き!

 

知り合い

実務未経験の場合は知人に『ホームページ作らない?』と聞いてみるのも1つの手です。

知人であれば色々と融通が利くこともあると思うので、一番気は楽かも知れません。

しかし注意点があります。それは、

本気で欲している人でないと頓挫する可能性大

という事です。

実際自分も3人ほど声をかけて1人に関してはほぼ完成までいったんですが、連絡が途絶えてしまいました。

しかも実績作りの為に無料でやっていたのですが、頓挫しました。

結局無料でも本気で欲しいと思ってない人だと話が一向に進まないので、そこは注意が必要です。

もしやるなら本気でホームページやLPを欲しいと思っている人を探しましょう。

 

営業パートナー

これは営業パートナーに営業を全部まかせるので、営業が苦手という人におすすめです。

営業パートナーの探し方は色々ありますが、自分の場合は営業が得意な人と親しくなって営業をお願いするという形です。

現在2年近くほぼ営業せずに仕事を受け続けていますが、 最初の1年はほぼ営業パートナー経由の仕事となります。

自分がどうやって営業パートナーを見つけたり、営業せずに仕事を受け続けられているかについてはこちらの記事を参照下さい。

あわせて読みたい
営業力0のフリーランスがコーディングとWordPressのみで月収50万稼ぐまで
営業力0のフリーランスがコーディングとWordPressのみで月収50万稼ぐまで

続きを見る

ちなみに実績が増えて行けば、営業しなくても色んな所から依頼が来るようになります。

 

フリーランスエージェント

これも営業パートナーと似ていますが、フリーランスエージェントは利用者のスキルや希望にマッチした案件を紹介してくれるサービスです。

エージェントが営業やキャリアサポートなどをしてくれるので『一人では不安』という人におすすめです。

おすすめのフリーランスエージェントについては以下の記事を参照下さい。

あわせて読みたい
フリーランスWeb系エンジニア・デザイナーの案件獲得・営業におすすめのサービスまとめ
フリーランスWeb系エンジニア・デザイナーの案件獲得・営業におすすめのサービスまとめ

続きを見る

 

Twitter

これは意外と知らない人がいるようですが、Twitterで『コーダー 募集』など検索すると結構ツイートが見つかるのでそこからDMするという方法です。

自分の初案件獲得はこの方法でした。

ここで日々発信しているかどうかで受注率も変わってくると思うので、積極的に発信していきましょう。

また、逆にDMでスカウトされる事もあります。

なのでTwitterは積極的に使っていきましょう。

冒頭でもご紹介しましたが、私なりにまとめたTwitterの運用術がこちらのnoteになります。

真っ当にノンストレスでフォロワーを増やし続ける『ゆるゆるTwitter運用術』

 

エンド営業

これは直接ホームページを作る相手に営業する方法です。

つまり営業パートナーや制作会社を挟まないので最も高単価で受注出来ますが、その分難易度は一番高いと思います。

しかも継続案件には繋がりにくいので、延々と営業を続ける必要があります。

これは世間がイメージする営業マンそのものに近いので、営業に少しでも苦手意識がある人にはおすすめしません。

ただこれが出来るようになればWeb制作以外にも通用する無敵のスキルとなります。

 

営業が苦手な人向け

それでも営業が苦手・・・という人は、有料になりますがこちらのnoteが参考になると思います(有料と言っても500円です)

【営業が苦手な人向け】Web制作で営業せずに案件を獲得し続ける方法

これは自分がほぼ営業せずに2年以上案件を獲得し続けてきた経験談をまとめているので、ぜひ参考にしてみて下さい。

 

案件獲得方法におすすめの教材【クラウドソーシングに特化】

営業経験ないけど、案件ってどうやって獲得できるの?
クラウドソーシングで案件を獲得したいけど、営業経験ないからどうすればいいのか分からない・・・

という人も多いと思います。

そこでクラウドソーシングの営業で役立つ教材をご紹介します。

特定のクラウドソーシングサイトに特化した教材や、クラウドソーシングに限らず案件獲得に役立つ教材もあるので、ご自身にマッチしそうなものを参考にして頂ければと思います。

 

ここあの1ヶ月ココナラチャレンジ

ここあの1ヶ月ココナラチャレンジ ココナラ 0→1 スタート1ヶ月で77万円 2ヶ月で165万円納品した全てを公開します!!

この『ココナラチャレンジ』というのは、

ココナラでどうやって稼げばいいんですか?

ココナラは低単価のイメージがあるけどどうしたらいいですか?

といった質問がココナラをやったことがないのに山ほど来るから実際にやってみたという企画でした。

私が交流ある人でかなり天才肌なのですが、それを自覚しているのか今回のチャレンジでは色々と縛りプレイで挑戦してみたようです。

いろいろな縛りがありますが、中でも注目すべきはこちら。

  • ココナラの実績0からスタート(新規アカウント)
  • コーディング案件のみ
  • 公開依頼に対するアプローチなし

つまり実績ありきのスタートダッシュはなく『誰がやっても再現性がある方法』というテーマです。

さらに『コーディング案件のみ』且つ『こちらからは応募しない』という完全に待ちのスタイルです。

無料部分だけでも読んでみて、

これ自分で行けそうじゃね?

と思ったら買いかと思います。

ちなみにフリーランスとしてのマインドについても書いてあるので、フリーランスを目指す人にもおすすめです。

 

ココナラで営業ゼロを目指す!案件獲得方法を大公開!

ここでご紹介する中では一番安くかつ一番新しい教材となります。

クラウドソーシングで怖い炎上案件を避ける方法などが記載されているので、ココナラを初めて使う人はまずはこれを使ってスタートするのがおすすめです。

これがあるか無いかで収益も大きく変わってくるはずです。

詳しくはこちらの記事を参照下さい。

あわせて読みたい
営業不要で稼ぐ!ココナラが初心者・副業向きな理由と出品で案件獲得するメリット
営業不要で稼ぐ!ココナラが初心者・副業向きな理由と出品で案件獲得するメリット

続きを見る

 

ランサーズ スキルパッケージ大全

こちらはクラウドソーシングで有名なランサーズに特化した教材になります。

ランサーズの魅力は以下の記事に全て書いていますが、

参考記事
【初心者向き】ランサーズがクラウドソーシングで選ばれる理由4選と営業時間0で稼ぐ方法
【案件獲得!】ランサーズがクラウドソーシングで選ばれる理由4選と営業時間0で稼ぐ方法

続きを見る

こちらの教材を買って期待出来る最大のメリットは『営業時間0で案件を獲得し続けられる』となります。

営業も出費はなくても時間的コストがかかりますし、精神的にもかなり削られます。

しかし営業時間を0に出来れば、営業に使っていた時間を他に使うことが出来ますよね?

なので営業方法というより、営業を不要にする為の教材となります。

 

『待ちの営業』案件獲得術

こちらはここまでご紹介してきた教材とは少し違い、継続案件に繋げるために必要な信頼される案件対応の心得などが書いてあります。

新規のクライアントと繋がっていくことも大切ですが、継続案件だとお互いに要領が分かっているので、新規のクライアントと比べるとコミュニケーションコストも下げられます。

それは『連絡方法・納品方法・入金方法』などなど。

新規のクライアントだと毎回これらの確認が必要になりますし、継続案件に繋げるための仕事術は丁寧な仕事と高評価に繋がります。

詳しくはこちらの記事を参照下さい。

あわせて読みたい
ココナラ攻略!待ちの営業で案件を自動獲得して信頼される方法
ココナラ攻略!待ちの営業で案件を自動獲得して信頼される方法

続きを見る



営業力を身に付ける方法

コードスルーWebスキルを収益化する『本質の営業力』

営業経験が『まったく無い』『自信がない』という人は、営業力はあって損はないです。

なぜなら、案件の進行にも顧客やり取りが必要だからです。

メッセージやzoomでの面談など、顧客と気持ちよくやり取りできると新規の案件はもちろん継続の案件も受注でき、収入の安定化に繋がります。

テレアポや会社訪問、対面の営業まではしたくない。

でも、

  • 顧客も自分も満足感高く、楽しく仕事したい方
  • Web営業で、自宅、もしくはリモートで稼ぎたい方
  • 時間が無いなか、効率的に稼ぎたい方
  • 自分に合う営業方法を見つけたい方
  • メール前提で消耗しない営業手法に興味がある方

こんなことを考えている人にオススメできる、営業を学べてサポートもある環境があります。

CodeThrough コードスルー WEBスキルで収益化を目指す、全ての方のための営業スクール

コードスルー ( CodeThrough )代表のトシさんとは個人的にも仲良くさせてもらっており、タイで旅行をご一緒したりもしました。

会社員として営業経験が16年以上あり、コーチングの資格もお持ちの方で、 自分でWeb収益化でも実績を出しながら、150名以上に案件獲得の秘訣を伝えてきています。

一人一人の個性に合わせて、確実に目標達成まで伴走してくれると評判です。

コードスルーの募集はLINE公式から行われています。

毎回期間限定で選考式ですが、無料の営業コンテンツも提供されているので、LINEの登録だけはしておくことをオススメします。

LINE登録はコチラ

お客さん対応も営業です。

いざという時に困らないためにも、 本質の営業力学んでいきましょう!

また、としさんのブログはこちらになります。

としブログ | 世界を庭に自由に生きる



まとめ:焦らず継続すれば稼げるようになる!

ここまでHTML / CSSから始まり営業の方法まで書いてきました。

Twitterをしていると『3ヶ月で初案件獲得しました!』とか『半年で月収100万円達成!』というツイートを見る事があると思いますが、それはごく一部、100人に1人いるかどうかぐらいだと思っていいと思います。

最も重要なのは辞めない事です。

これもTwitterをやっていると分かりますが、学習初期に一緒に勉強していた仲間はどんどんいなくなります。

つまり、続けているだけで勝ち残れます。

自分は初案件まで10か月かかり、10万円達成するまで1年以上かかっています。

少なくとも1年は継続しましょう。

1年続ければ間違いなく稼げるようになるはずです。

それでも稼げなければ、一歩を踏み出す為に背中を押してくれる仲間を見つければ大丈夫です。

このロードマップも1人の考えであり、正確無比で最短最速に進めるという訳ではありませんが、参考になれば嬉しいです。

長々と読んで頂きありがとうございましたm(__)m
あわせて読みたい
30代後半未経験でもプログラミング独学で稼げるようになるまで!
30代後半未経験でもプログラミング独学で稼げるようになるまで!

続きを見る

あわせて読みたい
営業力0のフリーランスがコーディングとWordPressのみで月収50万稼ぐまで
営業力0のフリーランスがコーディングとWordPressのみで月収50万稼ぐまで

続きを見る

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-副業・案件獲得, Web制作
-