YouTubeではブログで伝えきれないプログラミングやWEB制作に関する有益情報を配信中!(当サイトはアフィリエイト広告を利用しています)

【最新版】WEB制作で月20万円稼ぐ独学ロードマップ【フリーランス独立】

きたしょー

前職は銀行で5年勤務、フリーランスエンジニアとして4年活動し、現在はWEB制作会社を経営しているきたしょーです。

プログラミング初心者

  • WEB制作は独学でフリーランスになれる?
  • WEB制作フリーランス向けの独学ロードマップが知りたい
  • WEB制作フリーランスになるための営業手順が知りたい

と疑問を抱えている方の悩みを解決できる記事を書きました。

本記事の筆者であるぼくは現役のWEB制作フリーランスです。

完全未経験からWEB制作を始めて半年で月15万円、1年で月120万円を達成し、今ではWEB制作会社を起業するまでになりました。

本記事は、今のぼくがゼロからWEB制作フリーランスを目指すなら、この独学ロードマップで進んでいくという観点で書いています。

記事の前半は「WEB制作の独学に臨む際の心構え」をお話し、記事の後半では「WEB制作フリーランスになるための独学ロードマップ」について解説します。

本記事を読めば、未経験からWEB制作フリーランスとして独立するまでの流れが鮮明にイメージできます。

本気でWEB制作フリーランスを目指したい方はぜひ最後まで読んで実践してみてください。

  • YouTube版も公開中(画像をタップするとYouTubeに遷移します)

本記事のより詳しい学習手順から営業手法、独立準備までをYouTubeで徹底解説しています。この動画は4時間12分ありますので、本気でプログラミングで稼ぎたい方だけご覧ください。

 

▼総制作費100万円超【豪華10大特典】プレゼント▼

目次

そもそも独学でWEB制作フリーランスになれるのか?

なれます。

本WEB制作独学ロードマップ通りに進めれば、未経験からでもフリーランス独立可能です。

当然ながらフリーランス独立可能なレベルになれば、WEB制作会社に転職したり、副業で稼いだりすることも十分に可能です。

実際にぼくは完全未経験からWEB制作を始めて

  • 半年で月15万円
  • 1年で月120万円

稼ぐなど、フリーランスとして4年間活動してきました。

今ではWEB制作事業を主軸とした会社を立ち上げるまでに至っています。

ぼく以外にも未経験からフリーランス独立してる人はたくさんいます。

https://twitter.com/shinshinshin_w/status/1377238529164468227?s=20&t=O7_BRYhLW_Rs5zm7d43CZg
https://twitter.com/ta3_web/status/1365775594458279938?s=20&t=AeHdx-oewJYPAI-jLpJYKw
https://twitter.com/minami_papa/status/1412611627891970049?s=20&t=MH3leRur_7qq3eHKEKF8qg

「WEB制作ってそんなに簡単に稼げるんだ!」と思われるかもしれません。

しかし、決して「WEB制作は楽勝!誰でも簡単に稼げる!」と言っているわけではありません。

ぼくは月15万円稼ぐまでに1,000時間、月120万円稼ぐまでに2,000時間もかかりました。

むしろ、めちゃくちゃ大変です。

でも断言できるのは、やれば必ずできるということです。

完全未経験からWEB制作フリーランスになるのは簡単ではないが、本気で取り組めば、だれでも実現可能。

これがぼくの結論です。

本WEB制作独学ロードマップに臨むうえでの大前提3つ

本WEB制作独学ロードマップに臨むうえでの大前提を3つお伝えします。

当然ですが、いくらロードマップを知っていたとしても、行動しなければ成果は出ません。

逆にアホでも行動さえすれば、必ず成果は出ます。

最も重要なのは本記事を読んだ後に実際に手順通りに行動するかどうか。

これからロードマップ通りに行動していくために重要なポイントを3つお伝えします。

WEB制作の独学を始める前に必ず押さえておきましょう。

本WEB制作独学ロードマップに臨むうえでの大前提3つ
  1. 目標を決める
  2. 目標達成の期限を決める
  3. 学習時間を確保する

1:目標を決める

まずはWEB制作を始める目的を明確にしましょう。

  • 最近WEB制作が流行ってるから
  • 友達がWEB制作やってるから
  • WEB制作は稼げるらしいから

こんな浅い動機の人は99.9%挫折します。

WEB制作は立派な専門スキルで難しいので、学習中に何度もつまずきます。

お客様を相手にするクライアントワークなので、実務では大変なことやキツイことも多いです。

目的がぼんやりしている人は精神的に追い込まれた時に壁を乗り越えていけるわけがありません。

「でも、目的なんてよく分かりませんよ…」という方もいるかもしれません。

そんな方はWEB制作を始めようと思ったキッカケを思い出してみてください。

  • フリーランスになりたい
  • 時間と場所にとらわれずに働きたい
  • もっとお金を稼ぎたい

最初に抱いていた純粋な気持ちがあなたの真の目的です。

若手起業家のような「自社サービスで世界を変える!」的なミッションやビジョンは不要です。

目的さえ明確であれば、どんな困難な状況に陥ろうとも乗り越えていけます。

常に目的を見据えながら学習していきましょう。

2:目標達成の期限を決める

目標達成までの期限も必ず設定してください。

人間は期限があるからこそ、今を本気で頑張れます。

例えば、必ず給料はもらえるが、1日何時間働けばいいか分からない会社で働きたいと思いますか?

絶対に嫌ですよね?

いつまで働き続ければいいのか分からない会社なんて聞くだけでもゾッとします。

じゃあ、なぜみんな会社で働くのでしょうか?

それは「平日8時間勤務」という期限が決まっているからです。

つまり、人間は目標だけでなく、期限もあるからこそ、どんなにキツくても今を本気で頑張れる。

  • 目標=給料
  • 期限=平日8時間勤務

です。

そう、目標は期限があって初めて効力を発揮するのです。

WEB制作もこれと同じ。

目標と期限をセットで決めることで、ようやく毎日の勉強や営業を本気で頑張れるようになります。

あなたは

  • いつまでに学習を終わらせますか?
  • いつまでにWEB制作でゼロイチを達成しますか?
  • いつまでにWEB制作でフリーランス独立しますか?

これらの質問には必ず答えられるようにしておきましょう。

目標は期限を設定して初めて意味を成します。

3:学習時間を確保する

当たり前ですが、学習時間は必ず確保してください。

スキルを習得するには、絶対的な学習時間が必要です。

目安は1,000時間。

ここから逆算すると、1週間で確保すべき学習時間は

  • 1年以内に稼ぎたいなら「週20時間」
  • 半年以内に稼ぎたいなら「週40時間」

となり、これをさらに分解すると

  • 週20時間確保したいなら「平日2時間」「休日5時間」
  • 週40時間確保したいなら「平日5時間」「休日8時間」

となります。

実際にぼくも初心者時代は半年1,000時間で月15万円、1年2,000時間で月120万円という結果でした。

逆に毎日30分の学習を1年継続しても、トータルで183時間にしかなりません。

それだと勉強した内容をすぐに忘れてしまうので、ほぼスキルは身に付きません。

自身の成長スピードよりもライバルが成長するスピードやIT業界が進化するスピードの方が早いので、もはや退化しているレベルです。

1,000時間学習すれば、WEB制作で月20万円稼ぐために必要なスキルは身に付きます。

生活に最低限必要な時間以外は全てWEB制作に捧げるくらいの勢いで取り組んでいきましょう。

WEB制作で月20万円稼ぐ独学ロードマップ【目指せフリーランス独立】

ではいよいよWEB制作で月20万円稼ぐ独学ロードマップをお伝えします。

この学習手順通りに進めれば、フリーランス独立はもちろん、WEB制作会社への転職や副業で稼げるレベルにも余裕で到達します。

本WEB制作独学ロードマップで使用するコーディング練習用デザインカンプは50万円以上かけてプロのデザイナーに作ってもらいました。

記事内で紹介してる参考書や学習教材も無料または格安のものになるので、予算も3万円以内に収まります。

正直、めちゃくちゃボリューミーですが、これを完走すれば、WEB制作で月20万円稼げる状態になれます。

本業がある会社員の方や子育て中のママさんは相当大変になるかもしれませんが、最後まで諦めずに食らい付いて来てください。

WEB制作で月20万円稼ぐ独学ロードマップ
  1. HTML/CSS独学手順
  2. サイト写経課題
  3. ポートフォリオサイト制作課題
  4. デザインカンプコーディング課題超初級編
  5. デザインカンプコーディング課題初級編
  6. Sass独学手順
  7. JavaScript独学手順
  8. jQuery独学手順
  9. デザインカンプコーディング課題中級編
  10. デザインカンプコーディング課題上級編
  11. PHP独学手順
  12. SQL独学手順
  13. WordPress独学手順
  14. WordPress課題自作テーマ編
  15. WordPress課題既存テーマ編
  16. +αスキル

1:HTML/CSS独学手順

まずはHTML/CSSを学んでいきます。

HTMLとは?
WEBページで文書を作成するためのマークアップ言語。

CSSとは?
HTMLの文書にデザインを施すスタイルシート言語。

HTML/CSSの独学で取り組むべき内容は以下の3つです。

HTML/CSS独学手順
  1. Progate HTML&CSS学習レッスン
  2. ローカル開発環境構築
  3. Progate HTML&CSS道場レッスン上級編

1-1:Progate HTML&CSS学習レッスン

まずはProgate HTML&CSS学習レッスン(初級編〜Flexbox編)に取り組みます。

ポイントは、最大2周まで。

プログラミングはググればいつでも答えが見れるので、コードを暗記する必要はありません。

「まだまだ理解が足りない」という不安からProgateを何周もする人は多いですが、それはただの時間の無駄。

コードは覚えようとせずに50%の理解度でサクサク進めていけばOKですよ。

1-2:ローカル開発環境構築

次はローカル開発環境を構築します。

具体的には「Visual Studio Code」というテキストエディターを用います。

Visual Studio Codeとは?
Microsoftが提供している無償で高機能なエディター。

Progateならローカル開発環境なしでもコードは書けますが、自身のパソコンでコードを書くにはテキストエディターが必須です。

実務でも必ずローカル開発環境は使用しますので、この段階で前もってローカル開発環境を構築しておきます。

ドットインストールのVisual Studio Codeに関する動画が分かりやすいので、ぜひ参考にしてみてください。

1-3:Progate HTML&CSS道場レッスン上級編

最後はProgate HTML&CSS道場レッスン(初級編〜上級編)に挑戦します。

HTML&CSS道場レッスンは、デザインカンプを見ながらコーディングする実務と似た形で勉強できます。

もし途中で分からなくなったら、Progateやドットインストールで復習したり、都度ググったりするようにしましょう。

HTML&CSS道場レッスンは難しいので、つまずいた挙句、グルグル迷走してるうちに挫折していく人が本当に多いです。

最大の目的は、サイトの作り方をなんとなく理解することです。

決して完璧にクリアすることではないので、「どう頑張っても難しそう…」と感じたら、潔く答えを見ながらコードを書き写していってください。

サイトが完成したらコードの一部を別のコードの書き換えたり、CSSの数値を変えたりすると、さらに理解が深まりますよ。

HTML&CSS道場レッスンの進め方
  1. ノーヒントで挑戦する
  2. もし分からなければProgateやドットインストールで復習する
  3. それでも分からなければググる
  4. それでも分からなければ解答通りにコードを書き写す
  5. 完成したサイトのコードをいじって遊んでみる

2:サイト写経課題

次はサイト写経課題です。

サイト写経とは?
サイトのソースコードを見ながらコーディングすること。

「HTML&CSSとWebデザイン入門講座」で解説通りにコードを書き写しながらサイトを作りましょう。

サイトを写経する目的は、コーディングの流れを掴むためです。

サイト制作未経験の初心者がいきなりゼロからサイトを作れるわけがありません。

お手本通りにコードを書いていくことで、「あぁ、こんな感じでサイトって作っていくんだ」と初めて理解できます。

サイト写経する際はデベロッパーツールも使いながら実務に近い形で学習していきましょう。

3:ポートフォリオサイト制作課題

次はポートフォリオサイト制作課題です。

ポートフォリオサイトとは?
自身のプロフィールや制作実績を掲載したサイト。

これまでの知識を総動員してゼロからHTML/CSSのみでオリジナルサイトを作りましょう。

  • どんなサイト構成にするのか?
  • どんなデザインにするのか?
  • どうやってコーディングするのか?

を自分の頭だけで考え抜くことで、実務に近い形で学習することができます。

とはいえ、最初は白紙のテキストエディターを目の当たりにすると、手も足も出ないかもしれません。

そんな時は写経課題で制作したサイトやネット上のサンプルコードを参考にすればOKです。

ここを乗り越えれば、サイト制作の流れが一気に掴めるので、飛躍的にスキルアップします。

「手探り状態で試行錯誤する時間が自分を成長させてくれる…!」

ぜひこのマインドで前向きに取り組んでいきましょう。

目標
  • HTML/CSSでゼロからオリジナルサイトを作ろう
ポイント
  • 写経課題で制作したサイトを参考にする
  • 写経課題で制作したサイトを直接編集するのはNG
  • 正しくコードが書けているかどうかは気にしない
  • レスポンシブ対応も行う
  • アニメーションは実装しなくてOK
ポートフォリオサイト制作の流れ
  1. 参考サイトを探す
  2. サイトに掲載する情報を洗い出す
  3. ワイヤーフレームを作る
  4. 素材を集める
  5. デザインを決める
  6. コーディングする
  7. サーバーにアップロードする

4:デザインカンプコーディング課題超初級編

次はデザインカンプコーディング課題超初級編です。

実際にFigmaというAdobeのデザインツールで作られたデザインカンプをコーディングしていきます。

とにかくデザインカンプ通りのコーディングを目指しましょう。

コーディングの絶対条件は、HTML/CSSでデザインカンプを再現すること。

デザイン通りにコーディングできれば、最初はコードの良し悪しなんて気にしなくていいです。

そもそも経験が乏しい初心者がいきなり綺麗なコードや保守性の高いコードを書くのは不可能。

身の丈を超えすぎた挑戦は挫折の原因となります。

もちろんデザインカンプの都合上、どうしても数pxだけズレてしまうなどの現象が起きることもあります。

しかし、明らかにデザインカンプから10〜20px以上ズレてしまうのはNGです。

パソコンとスマホの中間であるタブレットサイズでレイアウトが崩れるのも初心者あるあるなので注意してください。

全画面幅でサイトが適切に表示されるようにコーディングしていきましょう。

目標
  • コードぐちゃぐちゃでも良いのでデザインカンプをコーディングで再現しよう
ポイント
  • パーフェクトピクセルを目指す
  • コードの綺麗さは気にしない
  • レスポンシブ対応する
  • 中間サイズでのレイアウト崩れに注意する
課題デザインカンプ
  • コーディング課題超初級編デザインカンプ「カフェサイト」についてはきたしょー公式LINEにて無料配布しています。
デザインカンプコーディングの流れ
  1. Figmaの使い方を覚える(ちょっとデザインがおすすめ)
  2. コーディングする
  3. サイトの品質チェックをする
  4. テスト環境にアップロードする
  5. サイト公開後チェックする
注意事項
  • サーバーにアップロードする際はno-indexとBasic認証を必ず設定する

5:デザインカンプコーディング課題初級編

次はデザインカンプコーディング課題初級編です。

今回から本番さながらに取り組んでもらうために、想定納期を設定しています。

想定納期に間に合わせるために、スピード感と正確性を意識しながらコーディングしてみてください。

WEB制作においてコーディング工程は下流工程に位置付けられます。

よって、プロジェクト全体の終盤に行われるため、納期が短いケースが多いです。

今回のような1枚もののサイトであれば、遅くとも3日以内(合計24時間以内)には完成させたいところですね。

スピード感のあるコーディングを目指すためにも

・Chrome拡張機能
・VSCodeプラグイン
・スニペットツール
・Emmet
・VSCodeショートカット

をフル活用しましょう。

とはいえ、まだまだコーディングにすら慣れてない人がほとんどだと思います。

もし想定納期に間に合わなくても特に気にする必要はありません。

それに変にプレッシャーを感じながら課題に取り組んでしまうと、落ち着いて勉強できませんからね。

「いまの自分には想定納期3日の案件をどれくらいでこなせるのか?」

自分自身の実力を試すつもりで取り組んでいきましょう。

目標
  • スピード感と正確性を意識しながらコーディングしよう
ポイント
  • 全画面幅でレイアウトが崩れないようにする
  • EmmetやVSCodeショートカットを活用する
  • 第三者が見ても分かりやすいclass名を意識する
  • リセットCSSを入れる
課題デザインカンプ
  • コーディング課題初級編デザインカンプ「動物病院サイト」についてはきたしょー公式LINEにて無料配布しています。
想定納期
  • 理想:3日(合計24時間以内)
  • 現実:7日(合計56時間以内)

6:Sass独学手順

次はSassを学んでいきます。

Sassとは?
Syntactically Awesome Stylesheetsの略で、CSSを拡張したメタ言語。

メタ言語とは?
プログラミング言語を作成する言語。

日本語に訳すと「構文的にイケてるスタイルシート」という意味です。

つまり、SassはCSSの機能を拡張したCSSを作成するための言語。

もっと分かりやすく言うと、SassはCSSをより便利に効率的に書けるようにした言語です。

ここでなぜSassを勉強するのか?

それは圧倒的に便利だからです。

Sass導入メリット
  • コーディングスピードが爆上がりする
  • スタイルシートの管理が楽になる
  • メンテナンス性の高いコードが書ける

Sassは学習から導入までそれなりの時間がかかりますが、WEB制作会社の案件でも当たり前に使われるので、スキルセットとしては必須です。

ぼくは初心者時代、Sassを勉強するのが億劫で学習を後回しにしてました。

でも、いざ勉強してみたら神レベルで便利すぎて「なんでもっと早く勉強しなかったんだ…」と後悔しました。

別にSassを使わなくてもコーディングはできますが、神レベルで便利なので学習することを強く推奨します。

Sass独学手順
  1. Progate Sass学習レッスン
  2. Web制作者のためのSassの教科書

7:JavaScript独学手順

次はJavaScriptを学んでいきます。

JavaScriptとは?
主にサイトにアニメーションを付けるために使われるプログラミング言語。

実はWEB制作の実務ではJavaScriptをゴリゴリ書く機会はほとんどありません。

「えぇ!そしたら、JavaScript勉強する意味なくない!?」と思いますよね。

では、なぜここでJavaScriptを勉強するのかというと、実務でアニメーションを実装する際によく用いられるjQueryがJavaScriptで作られているからです。

つまり、jQueryを正しく使いこなすために、JavaScriptの基礎学習を行います。

とはいえ、フリーランスが取り扱うレベルの案件では、JavaScriptをゼロから書くような機会はほとんどありません。

JavaScriptはコードの書き方や読み方が理解できていれば申し分ないです。

あまり深入りせずにサクッと学習していきましょう。

JavaScript独学手順
  1. Progate JavaScript学習レッスン

8:jQuery独学手順

次はjQueryを学んでいきます。

jQueryとは?
JavaScriptを簡単に書けるようにしたJavaScriptのライブラリ。

ライブラリとは?
複数の機能をまとめて部品化したもの。

繰り返しますが、実務でアニメーションを実装する際はjQueryを使用するケースがほとんどです。

とはいえ、サイトにアニメーションを付けるためにjQueryをゼロからゴリゴリ書く機会はそんなに多くありません。

WEB制作でよく登場するアニメーションはググればすぐにサンプルコードが出てくるので、それを参考にしながら実装するケースがほとんどです。

jQueryはサンプルコードを理解できるかつ編集できるレベルで合格点です。

jQuery独学手順
  1. Progate jQuery 学習レッスン
  2. jQuery標準デザイン講座

9:デザインカンプコーディング課題中級編

次はデザインカンプコーディング課題中級編です。

SassとjQueryを駆使しながらアニメーション付きサイトをコーディングしていきましょう。

実案件ではCSSでベタ書きするのではなく、Sassを使用するケースが多いです。

WEB制作会社と仕事をする場合は、Sassを指定される案件もあるので、Sassでのコーディングスキルは必須。

利便性の観点からもSassを使わない理由がないので、これからは基本的にSassでコーディングするようにしてください。

アニメーションについては、jQueryの便利なプラグインを使用すれば、そんなにコードを書かなくても簡単にサイトに動きを付けることができます。

しかし、WEB制作会社からの下請け案件の場合は、難易度が高いアニメーションの実装を求められるケースもあります。

そんなときはjQueryでゼロからコードを書かなければなりません。

今回もjQueryプラグインに頼りっきりになるのではなく、できるだけjQueryでゼロからコードを書いての実装にもチャレンジしてみましょう。

目標
  • Sassで効率化を図りながらjQueyでアニメーション付きサイトをコーディングしよう
ポイント
  • Sassで素早く効率的にコードを書く
  • jQueryプラグインを活用する
  • Live Sass Compilerを使用する
課題デザインカンプ
  • コーディング課題中級編デザインカンプ「建設会社サイト」についてはきたしょー公式LINEにて無料配布しています。
想定納期
  • 理想:3日(合計24時間以内)
  • 現実:7日(合計56時間以内)

10:デザインカンプコーディング課題上級編

次はデザインカンプコーディング課題上級編です。

複数ページサイトのデザインカンプコーディングに挑戦していきます。

ここではclass名に気を付けながらコーディングしていきましょう。

これまでに取り組んできた1ページのサイトとは異なり、複数ページのサイトはCSSのコード量が膨大になります。

1枚もののLPを制作するような感覚でコーディングしてしまうと、class名が途中から被り始めるので、知らぬ間にレイアウトが崩れてしまいます。

コーディング終盤でレイアウト崩れを起こさないためにも、class名の付け方に注意を払いながらコーディングしてみてください。

実務で対応する案件はほとんどが複数ページのサイト制作になります。 

運用フェーズで別の担当者がサイトを修正したとしても、レイアウト崩れを起こさないようなCSSを目指してコーディングしていきましょう。

目標
  • 複数ページサイトをデザインカンプ通りにコーディングしよう
ポイント
  • class名が被らないように気を付ける
  • できるだけコードは再利用する
  • 全ページでパーフェクトピクセルを目指す
課題デザインカンプ

コーディング課題上級編デザインカンプ「ミュージックスクールサイト」についてはきたしょー公式LINEにて無料配布しています。

想定納期
  • 理想:10日(合計80時間以内)
  • 現実:30日(合計240時間以内)

11:PHP独学手順

次はPHPを学んでいきます。

PHPとは?
動的なWEBページを生成できるサーバーサイド言語。

動的なWEBページとは?
掲示板やショッピングサイトのアクセス時の状況に応じて異なる内容が表示されるWEBページ。

サーバーサイド言語とは?
サーバー側で動作するプログラミング言語。

なぜここでPHPを学習するのか?

それは、WEB制作で最も使われるWordPressがPHPで作られているからです。

つまり、WordPressを理解するためにまずはPHPを理解する必要があるのです。

とはいえ、WordPress案件でPHPをゴリゴリ書く機会はそこまで多くありません。

・PHPのコードの書き方が分かる
・PHPのコードの読み方が分かる
・PHPのソースコードを編集できる

このくらいのレベル感で申し分ありません。

WordPress学習をスムーズに進めるためにも、PHPは基礎中の基礎を押さえておけばOKです。

PHP独学手順
  1. Progate PHP 学習レッスン

12:SQL独学手順

次はSQLを学んでいきます。

SQLとは?
データベースを操作するための言語。

データベースとは?
表のように管理された情報の集まり。

なぜここでSQLを勉強するのか?

それは、WEB制作で最も使われているWordPressがMySQLというデータベースと密接に結びついているからです。

これからWordPressを学ぶためにはPHPだけでなく、SQLの知識も必要不可欠というわけです。

とはいえ、PHPと同様にWordPress案件でSQLをバリバリ書く機会はほとんどありません。

データベースの仕組みやSQLでデータベースを操作できることを知っておくだけでOK。

WordPressの理解度を深めるためにも、SQLは最低限の基礎知識だけでも必ず学習しておきましょう。

13:WordPress独学手順

次はWordPressを学んでいきます。

WordPressとは?
ブログやコーポレートサイトなどを簡単に作成できるCMS。

CMSとは?
Contents Management Systemの略で、サイトのテキストや画像、デザイン、レイアウトなどをまとめて管理できるシステム。

WordPressを用いれば、WEBサイトだけでなく、ブログ機能やお問い合わせ機能なども簡単に作成することができます。

全世界のWEBサイトのうち40%以上がWordPressで作られています。

・WEB制作ではWordPress案件が大半を占める
・WordPress案件はコーディングのみ案件よりも高単価

このような理由からWEB制作で稼ぐためには、WordPressスキルが必須です。

WordPressなくして、WEB制作では稼げないと言っても過言ではありません。

WordPressは焦らずに腰を据えて勉強しておきましょう。

WordPress独学手順

14:WordPress課題自作テーマ編

次はWordPress課題自作テーマ編です。

コーディング課題上級編で制作した複数ページのサイトをWordPress用に作り直していきます。

ここではとにかく自力で静的サイトをWordPress化させることを目指してください。

前回のWordPress学習では、参考書の解説通りにコードを書きながら静的サイトをWordPress化したと思います。

しかしながら、お手本通りにコードを書くだけでは、「理解」は出来ても「スキル」は身に付きません。

よく分からない中でも必死に調べながら手を動かす過程が一番スキルアップします。

もし途中で分からなくなったら

  • 参考書を見直す
  • ググりまくる

この2つを徹底してください。

ググりながらWordPress化できれば合格点です。

あらゆる手を尽くして静的サイトをWordPress化させましょう。

目標
  • 自力で複数ページの静的サイトをWordPress化しよう
ポイント
  • ググりながら実装できればOK
  • 動的な部分の表示崩れに注意する
  • WordPress化後も全ページでパーフェクトピクセルを目指す
課題デザインカンプ
  • WordPress課題自作テーマ編デザインカンプ「ミュージックスクールサイト」についてはきたしょー公式LINEにて無料配布しています。
想定納期
  • 理想:3日(合計24時間以内)
  • 現実:15日(合計120時間以内)
ブックマーク必須記事

15:WordPress課題既存テーマ編

最後にWordPress課題既存テーマ編です。

WordPressテーマをカスタマイズする形で事業サイトを作りましょう。

おすすめのWordPressテーマ

これらの優秀なテーマを利用すれば、ブロックエディターでパズルのようにパーツを組み合わせるだけで、綺麗なサイトが完成します。

実務の作業工数も大幅に削減できるので、低予算なエンド案件にも向いています。

  • ワイヤーフレーム:ブロックエディターでブロックを組み合わせるだけでOK
  • デザインカンプ:参考サイトをモデリングしながら直接デザイン可能
  • サイト品質チェック:クロスブラウザチェック済みのテーマが多いので表示確認を省略可能

フリーランスに回ってくる案件は、予算の問題でWEB制作会社に依頼できなかったものが多いです。

フリーランスは予算が低い案件にも対応できるようにWordPressテーマを用いたサイト制作スキルが必須。

それに今後の営業フェーズでは、第三者から信頼を得るためにも事業サイトが必要不可欠です。

今回はWordPressテーマをカスタマイズする制作手法で企業公式サイトと遜色ないレベルのフォーマルな事業サイトを作りましょう。

目標
  • 企業公式サイトにも負けないフォーマルな事業サイトを作る
ポイント
  • WordPressテーマをカスタマイズする
  • ワイヤーフレームは作らなくてOK
  • デザインカンプも作らなくてOK
事業サイト制作の流れ
  1. リサーチする
  2. 参考サイトを探す
  3. 要件定義する
  4. テーマをカスタマイズする
  5. サーバーにアップロードする
事業サイトのポイント
  • プランを用意する
  • プランは3つ用意する
  • 運用保守プランも用意する
  • 料金表も用意する
  • テキストは日本語で表記する

16:+αスキル

最後に今後習得して欲しい+αの技術やスキル、ツールを紹介します。

ぜひ実務に取り組みながら学習していきましょう。

SEO
  • SEO内部対策
  • SEO外部対策
  • GoogleAnalytics
  • SearchConsole
  • 内部SEO対策
  • アクセシビリティ対応
技術
  • CSS設計
  • Gulp
  • Pug
  • EJS
  • Webpack
  • Git
  • GitHub
NoCode
  • STUDIO
  • Wix
  • ペライチ
  • Webflow

WEB制作で月20万円稼ぐ営業7ステップ

続いて、WEB制作で月20万円稼ぐ営業7ステップを解説します。

大前提として、いくらスキルが身に付いたとしても、案件を獲得することができなければ、1円たりとも稼げません。

あなたがエンジニアとしてIT企業で働いているのであれば、会社の営業マンが代わりに案件を持って来てくれるので、コードを書いてるだけで給料がもらえます。

しかし、あなたがフリーランスになりたいなら、自分自身で営業して案件を獲得しなければなりません。

つまり、営業はスキルと同様以上に重要です。

この営業手順通りに進めれば、月20万円どころかフリーランス独立も夢ではありません。

ぜひ実践してみてください。

WEB制作で月20万円稼ぐ営業7ステップ
  1. 身近な人脈に営業する
  2. 日常生活でよく利用するお店に営業する
  3. SNSで営業する
  4. 営業代行を活用する
  5. コミュニティに参加する
  6. WEB制作会社に営業する
  7. クラウドソーシングで営業する

1:身近な人脈に営業する

まずは既存の人脈に声を掛けましょう。

なぜなら、身近な人からの案件は

  • デザインは参考サイトをベースに
  • 納期はお任せ
  • 品質チェックも厳しくない

ので、腰を据えて勉強しながら仕事に取り組めるからです。

  • LINE
  • Facebook
  • Twitter
  • Instagram
  • TikTok

SNSで繋がっている友人や知り合いには徹底的に声を掛けてください。

「でも、友達なんていませんよ…」と思われる方もいるかもしれません。

しかし、それは絶対に嘘です。

  • 小学校時代の同級生の親
  • 中学校時代の部活動の先輩や後輩
  • 高校時代のクラスメイト
  • 大学時代の同じゼミ生
  • 前職の同僚

過去の記憶を辿れば、知り合いなんてごまんといますよね。

ぼくも初案件はオンラインサロンで繋がった友人からの受注でした。

人生で出逢った人は全てが営業対象です。

まずは身近な友人や知人に声を掛けまくりましょう。

身近な人脈に営業する際のポイント4つ
  1. メッセージは短文で送る
  2. テンプレート文は使わない
  3. 名前を呼ぶ
  4. クライアントの紹介を依頼する

2:日常生活でよく利用するお店に営業する

行きつけのお店に営業するのも実績作りフェーズでは有効な戦略。

顔馴染みの店長や社長には声を掛けやすいはずです。

  • 病院
  • 整骨院
  • 美容室
  • ジム
  • 居酒屋
  • レストラン
  • カフェ

日常生活の中で利用するついでに声を掛けてみてください。

実際にぼくは会社の担当税理士のホームページやLPの修正案件を受注しています。

逆転の発想で、営業目的で新しいお店を利用してみるのもアリですよ。

  • 新しい美容室で社長を指名する
  • 新しいジムで社長にサポートしてもらう
  • 新しい整骨院で社長に身体を見てもらう

客として自ら乗り込めば、社長への直接アプローチも容易いです。

日常生活でお店を利用する際は営業がてら声掛けまで行いましょう。

日常生活でよく利用するお店に営業する際のポイント3つ
  1. 決裁権者にアプローチする
  2. エンドクライアントはマーケティングをフックにする
  3. 経営者の紹介を依頼する

3:SNSで営業する

実績作りフェーズではSNS営業もおすすめです。

Facebook、Twitter、Instagram、TikTokなどで

  • 制作したサイトをシェアする
  • サイトの制作過程を投稿する
  • 「仕事募集中!」と投稿する
  • コーダー募集ツイートに応募する
  • 見込み客の投稿にいいね&コメントする
  • プロフィールを営業用に作り込む
  • 営業DMを送る

自ら投稿するのはもちろん、見込み客にもガンガン絡んでください。

ぼくも初心者時代はTwitterで仲良くしてる人から30万円の案件を受注したことがあります。

いまはSNSで仲良くなった人と一緒に仕事をする時代です。

SNSでアクティブに活動するだけで、それが自然と営業活動になります。

学習完了後の営業フェーズではSNSをフル活用しましょう。

4:営業代行を活用する

営業代行も営業力が問われにくいので、実績作りフェーズではおすすめです。

  • 一般企業の営業マン
  • 外資系保険営業マン
  • フルコミ営業マン

などに成果報酬型で営業代行を依頼することで

  • 依頼者:固定費なしで営業してもらえる
  • 請負人:副業として本業の傍ら取り組める

お互いにWin-Winの関係を築くことができます。

営業代行パートナーが本業で担当する取引先にもアプローチできるので、本当にオイシイですよ。

身近にいる営業マンは全員味方に付けるつもりで、営業代行をフル活用していきましょう。

5:コミュニティに参加する

オンラインサロンやコミュニティも実績作り営業に向いています。

特に経営者やお金持ちがたくさん参加してそうな異業種コミュニティがおすすめです。

おすすめ異業種コミュニティ
  • 西野亮廣エンタメ研究所
  • PROGRESS
  • HIU(堀江貴文イノベーション大学校)
  • 人生逃げ切りサロン

同業種コミュニティは下請け案件になりやすいので、どうしても価格低下圧力がかかります。

一方、異業種コミュニティは元請け案件がほとんどなので、案件単価が高めなケースが多いです。

営業系コミュニティで営業代行パートナーを探すのもアリですね。

ぜひこの機会に営業目的でいくつかコミュニティに参加してみてください。

コミュニティに参加する際のポイント4つ
  1. 期間限定で参加する
  2. 積極的にチャットする
  3. 積極的にイベントに参加する
  4. 案件チャンネルは常にウォッチする

6:WEB制作会社に営業する

これまでの実績を武器にWEB制作会社にメール営業しましょう。

最初はすでに繋がりがある人に営業するだけでも案件獲得できますが、それだけではいずれ案件はなくなります。

継続的に案件を獲得するためには、新規営業しなければなりません。

制作会社は常に複数の案件を抱えているので、上手く業務提携できれば、継続的な案件受注に繋がります。

新規営業はとにかく営業件数が最重要項目です。

結局、自分がいくら制作会社と繋がりたくても、相手が自分を選んでくれないことには契約は成立しません。

最終的な意思決定が制作会社に委ねられている以上、営業する側の人間はひたすら数を打ち続けるしかないんです。

制作会社3~4社との業務提携を目標に1ヶ月で200件以上営業していきましょう。

ここまで来れば、月20~30万円が安定してくるので、いつでもフリーランス独立が可能な状態になります。

WEB制作会社に営業する際のポイント3つ
  1. とにかく大量行動する
  2. メールの返信は期待しない
  3. コピペ提案文は絶対にNG

7:クラウドソーシングで営業する

これからさらに収入を上げていくためにもクラウドワースやランサーズ、ココナラなどのクラウドソーシングでも営業しましょう。

WEB制作会社との仕事は下請けとなるため、収入は安定しやすいですが、単価が低めな傾向があります。

これから月40万円、月50万円と単価を上げていくには、エンドクライアントから元請で案件を獲得していかなければなりません。

クラウドソーシングは仕事をお願いしたい人が集まるプラットフォームなので、闇雲に企業に営業するよりは案件を獲得しやすいです。

「でも、クラウドソーシングって低単価で消耗するって有名だけど大丈夫?」と不安に感じるかもしれません。

もちろん最初の実績がないうちは単価が低めな案件が多いです。

しかし、複数の制作会社と業務提携できるレベルであれば、当然ながら実績ゼロ時代よりも高単価な案件は獲得しやすいです。

クラウドソーシングで営業する際は予算のある企業や案件に狙いを定めてください。

自分がいくら魅力的な提案をしても、クライアントに提案金額を支払えるだけの金銭的余裕がなければ、契約は成立しません。

結局、ビジネスはいかにお金持ちと繋がれるかが勝負です。

クラウドソーシングでは予算のある企業や案件に狙いを定めてひたすら数を打っていきましょう。

クラウドソーシングで営業する際のポイント5つ
  1. 発注者は素人という認識を持つ
  2. マッチングプラットフォームという認識を持つ
  3. まともに提案してる人は全体の2割
  4. とにかく提案数をこなす
  5. 提案スピードが命

WEB制作フリーランス独立準備5ステップ

最後にフリーランス独立する前に必ずやるべき準備を5つお伝えします。

この手順通りに学習と営業を進めてくれば、すでにフリーランス独立できる状態になっています。

しかしながら、WEB制作で稼げるようになったからといってすぐに会社を辞めるのは非常に危険です。

会社員とフリーランスではお金の流れや社会的な信用力が全く異なります。

勢いで会社を辞めて危機的な状態に陥らないようにするためにも、これからお話しする内容は独立前に必ず準備しておいてください。

WEB制作フリーランス独立準備5ステップ
  1. 運転資金を貯める
  2. クレジットカードを作る
  3. 固定費を減らす
  4. 引っ越しの予定があれば先に引っ越す
  5. 有給休暇を消化する

1:運転資金を貯める

フリーランス独立後の運転資金として最低でも生活費の半年分は貯金をしておきましょう。

運転資金とは?
企業が事業を行うために必要な資金。

フリーランスは案件を納品してから報酬が振り込まれるまでにタイムラグがあります。

一般的には「当月末締翌月末払い」の仕事が多いです。

例えば、この場合だと3月5日に案件を受注し、3月17日に納品したら、報酬が振り込まれるのは4月30日になります。

つまり、報酬が入金されるまでに1ヶ月の待機期間が生じるのです。

ちなみにぼくは最高で「当月末締翌翌々月末払い」を経験したことがあります。

もしあなたが貯金ゼロの状態で独立してしまったら、どうなるか分かりますよね?

会社も起業する時はまず始めに資本金を用意します。

フリーランスも独立後数ヶ月間は入金がなくても生きていけるだけの運転資金を必ず用意しておきましょう。

2:クレジットカードを作る

会社員時代にできるだけクレジットカードを作っておきましょう。

フリーランスになると社会的信用力が落ちるので、収入が安定するまでの間はクレジットカードの審査が通りにくくなります。

ぼくは銀行員時代にクレジットカードの営業もしてたのでよく分かりますが、年収100~200万円レベルの個人事業主は審査の承認率が異常に低かったです。

残念ながら、フリーランスは会社員よりも社会的信用が圧倒的に低い。

だからこそ、クレジットカードは会社員のうちにできる限り作っておいた方が良いです。

ぼくは銀行退職前にクレジットカードだけでなく、万が一のためにすぐにお金が借りられるカードローンも5~6枚作成しました。

特に固定収入がない状態で独立する場合は毎月の収入と支出のバランスを取るのが難しいです。

もしかしたら、お金が足りなくなることがあるかもしれません。

クレジットカードは支払いを1ヶ月先延ばしできる最強の資金繰りツールです。

あまりオススメはしないですが、最悪リボ払いで支払いを遅らせることもできます。

最悪の事態を想定し、クレジットカードはフリーランス独立前に必ず複数枚作っておきましょう。

クレジットカードやカードローンを作成する際は、ハピタスというポイントサイトがおすすめです。

カードを作成するだけで数千円分の現金やポイントがキャッシュバックされるので、お金を稼ぎながらカードを作ることができます。

3:固定費を減らす

会社を辞める前に固定費も見直しておきましょう。

支出を下げるのは収入を増やすのと同等の効果があります。

  • スマホを格安SIMにする
  • 保険を見直す
  • 車を売る
  • シェアハウスに住む
  • お金がかかる趣味を辞める

ぼくも銀行を辞める前に当初400万円で購入した車を売りました。

毎週洗車するくらい大切にしてたんですが、退路を断つためにも勇気を出して売りました。

フリーランスは毎月の収入が一定ではなくなります。

リスクヘッジのためにも、会社員のうちに固定費は最大限削減しておきましょう。

4:引っ越しの予定があれば先に引っ越す

引っ越しの予定があれば、先に引っ越すのもアリです。

フリーランスになると社会的信用力が落ちるため、仮にWEB制作で収入があったとしても、賃貸契約の入居審査は通りにくくなります。

ぼくは銀行退職と同時に上京したのですが、「おそらくアパートは借りれないだろう」と最初から思っていたので、シェアハウスに移り住みました。

当時の家賃はたったの4万円。

ただし、仕事に専念したい場合は一人暮らしを強くおすすめします。

やはりシェアハウスだと同居人が多く、定期的にイベントもあるため、仕事には集中しづらい環境です。

都内に上京するなどの引っ越しの予定がある場合は、早め早めに家探しも始めましょう。

5:有給休暇を消化する

有給休暇は労働者の権利なので、会社退職までに必ず使い切りましょう。

労働基準法には、会社は条件を満たす労働者に有給休暇を与えなければならないと明記されています。

有給休暇の権利発生条件
・入社から6カ月間継続勤務
・期間中全労働日の8割以上を出勤

繰り返しますが、会社は労働者に有給休暇を「与えることができる」ではなく「与えなければならない」です。

年次有給休暇については、使用者は、労働者が請求する時季に与えなければならないと定められています。
引用:労働基準法第39条(年次有給休暇)について

ぼくが働いていた銀行では

・有給休暇は周りに迷惑を掛けるから使ってはいけない
・有給休暇はインフルエンザ用に取っておくもの

という習わしがあったので、銀行に申請したにも関わらず、有給休暇は銀行退職前にたったの3日しか使えませんでした。

今考えると本当にヤバすぎますよね。

たしかに、同僚が一生懸命に働いている中で悠々自適に休むのは気後れするかもしれません。

しかし、何度も繰り返すように、有給休暇は労働者の権利です。

有給休暇は休みながら給料がもらえる最高の休日です。

使えるもんは使っておく精神で、有給休暇は会社退職前に全て使い切りましょう。

よくある質問5つ

最後に初心者の方からよくある質問に回答します。

よくある質問5つ
  1. 40〜50代からでもWEB制作フリーランスになれる?
  2. 主婦や大学生でもWEB制作フリーランス独立できる?
  3. プログラミングスクールには通うべき?
  4. どのタイミングで会社を辞めるべき?
  5. WEB制作会社に一度就職すべき?

1:40〜50代からでもWEB制作フリーランスになれる?

なれます。

実際にぼくは50代未経験から独立したフリーランスの方と一緒に仕事をしています。

WEB制作フリーランスになるのに年齢は全く関係ありません。

必要なのは、本人のやる気と熱意だけです。

2:主婦や大学生でもWEB制作フリーランス独立できる?

できます。

実際に50代未経験から独立した専業主婦の方や20代未経験から11ヶ月目で月100万円を達成した大学生の方もいます。

WEB制作でフリーランス独立するのに学歴や職歴は全く関係ありません。

本気度120%の覚悟があれば、誰でもフリーランス独立可能です。

3:プログラミングスクールには通うべき?

まずは独学でOKです。

Progateやドットインストールから勉強を始めて、「これちょっと厳しそうだなぁ…」と感じたらプログラミングスクールを検討してみてください。

「独学で迷う時間がもったいない」「最短最速でフリーランスを目指したい」という方は最初からスクールを受講しましょう。

4:どのタイミングで会社を辞めるべき?

「これならフリーランスとしてやっていける」という道筋が見えてから会社は辞めることを全力で推奨します。

さすがに収入ゼロの状態で独立するのはリスクが高すぎます。

例えば、収入がなくても1年間生きていけるだけの貯金があれば、話は別ですが、基本的には「学習完走」→「ゼロイチ達成」→「複数の制作会社と業務提携」してからフリーランス独立するのが理想的です。

フリーランスは収入が安定するまでに思ったよりも時間がかかるので、独立後の道筋が見えるまでは副業で頑張ってください。

5:WEB制作会社に一度就職すべき?

しなくてOKです。

実務経験を積むために制作会社に一度就職したとしても、必ずしも自分のやりたい仕事を任せてもらえるわけではありません。

実際にコーダー枠で転職したにも関わらず、電話当番やエクセル業務ばかりやらされたりと全くスキルアップできない人かなり多いです。

それに今は未経験からでもフリーランス独立を目指せる環境が整っています。

ぼくもWEB制作オンラインスクールを運営していますが、未経験からフリーランス独立する人たくさんいます。

そして面白いことに、ぼくのスクールには制作会社に就職してる現役コーダーの方も何人かいるんですよね。

「未経験からフリーランスを目指す」→「それが難しいと判断し一旦制作会社に就職」→「フリーランス独立する勇気がなくて今もダラダラと働いている」

このようなパターンです。

何度も繰り返しますが、制作会社に就職したところで、必ずスキルアップできるという保証はありません。

仮に運良くスキルアップできたとしても、制作会社を辞めて自分一人で生計を立てれるだけの仕事がなければ、フリーランス独立もできないんです。

そもそも制作会社に自身のスキルアップの命運を委ねるのは他力本願すぎると思いませんか?

最初からフリーランスとしてやっていく方が結果的に早くスキルも経験も積み上がっていく。

これがぼくの結論です。

まとめ

最後に本記事をまとめます。

WEB制作の独学に取り組む際は以下の3つを必ず実践しましょう。

WEB制作独学ロードマップに臨むうえでの大前提3つ
  1. 目標を決める
  2. 目標達成の期限を決める
  3. 学習時間を確保する

目標設定が完了したら、以下の手順でWEB制作の独学を進めていきます。

WEB制作で月20万円稼ぐ独学ロードマップ
  1. HTML/CSS独学手順
  2. サイト写経課題
  3. ポートフォリオサイト制作課題
  4. デザインカンプコーディング課題超初級編
  5. デザインカンプコーディング課題初級編
  6. Sass独学手順
  7. JavaScript独学手順
  8. jQuery独学手順
  9. デザインカンプコーディング課題中級編
  10. デザインカンプコーディング課題上級編
  11. PHP独学手順
  12. SQL独学手順
  13. WordPress独学手順
  14. WordPress課題自作テーマ編
  15. WordPress課題既存テーマ編
  16. +αスキル

WEB制作の独学が完了したら、以下の手順で営業活動を始めてください。

WEB制作で月20万円稼ぐ営業7ステップ
  1. 身近な人脈に営業する
  2. 日常生活でよく利用するお店に営業する
  3. SNSで営業する
  4. 営業代行を活用する
  5. コミュニティに参加する
  6. WEB制作会社に営業する
  7. クラウドソーシングで営業する

営業活動と同時並行でフリーランス独立に向けての準備も進めておきましょう。

WEB制作フリーランス独立準備5ステップ
  1. 運転資金を貯める
  2. クレジットカードを作る
  3. 固定費を減らす
  4. 引っ越しの予定があれば先に引っ越す
  5. 有給休暇を消化する

以上、WEB制作フリーランスになるための独学ロードマップになります。

いかがでしたでしょうか?

次はあなたが行動を起こす番です。

本記事をここまで読んでも、実際に行動開始する人は1%もいません。

逆に考えれば、今この瞬間から行動すれば、それだけで上位1%には入れるということです。

何度も繰り返しますが、WEB制作なら未経験からでも独学だけでフリーランスになれます。

実際にぼくだけでなく、ぼくの周りには

  • 1年で月50万円稼ぐフリーランスになった元夜職の50代男性
  • 10ヶ月で月30万円稼ぐフリーランスになった元工場勤務の30代男性
  • 2年越しに月50万円稼ぐフリーランスになった元製造業の20代男性

このような方々いますが、全員が完全未経験からのスタートです。

もちろん学習や営業、実務では大変なこともありますが、それはどんな副業をするにしても避けては通れない道です。

WEB制作は人生逆転するための最強スキルです。

  • 毎日8時間労働→毎日2〜3時間労働
  • 会社に出社→家やカフェで働ける
  • 月20万円→月平均300万円

このように、ぼくはWEB制作を始めて人生が激変しました。

そう、ぼくはWEB制作を始めたからこそ今があるのです。

今の仕事に不満を感じていても、行動を起こさなければ、未来は変わりません。

本WEB制作独学ロードマップ通りに進めていけば、経験年齢問わず誰もが月20万円稼ぐレベルのフリーランスになれます。

まずは今日、理想の未来への第一歩を踏み出しましょう。

 

プログラミングに関する人気記事

プログラミング未経験者が月収100万円稼ぐまでの過程を実況する! プログラミング初心者が月15万円稼ぐまでの全ステップ【完全保存版】 WEBサイト制作案件の受注から納品までの流れ【フリーランス&副業向け】