現役Web制作者が初案件獲得までにやったことを徹底解説!学習言語から実際に取った初案件の内容までを隠さず公開します!

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

今回の記事では、僕が初案件を取るまでにしてきたことを隠さず公開していきたいと思います。

Web制作などのスキルをつけて副業、フリーランスとして活動する際の大きな壁の1つが「初案件獲得」だと思いますが、適切な行動を行うことで、最短で到達することができます。

僕は営業開始から1週間ほどで初案件を獲得できましたが、今回紹介する方法を実践すれば遅くとも2,3ヶ月くらいで初案件を獲得できるようになることでしょう。

わい

実際に初案件を獲得して納品するまでに、どの言語を勉強して、どのように初案件を獲得していったかも全て紹介するよ!

目次

【前提】生成AIが出てきたから、Web制作者はオワコン?

また、気になる人が多い話題として

初心者きつね

優秀な生成AIが出てきたら、Web制作者ってオワコンじゃない?

ということだと思います。

しかし、現時点でWeb制作者がオワコンかと言われれば、答えは「NO」です。

確かに、AIを利用することで本来のコーディングを2倍、3倍に時短できるかもしれませんが

基礎力がない状態でAIを利用して仮に7割のコーディングを代替してもらったとしても

残りの3割をどう改善すれば良いのか理解できていないと、納品できないからです。

また、Web制作者に必要なのはコーディングだけではなく

実際にはクライアントがどのようなサイトを作りたいのかを深掘りしていく「ヒアリング」をしたり

その内容に近づけるためにはどうすればいいのかを思考する時間のほうが、画面越しにコーディングする時間より長いことも多いです。

つまり、Web制作者にとってコーディングは一部の作業でしかないのです。

Web制作者の全ての業務をAIに任せることができない以上

少なくともここ5〜10年ほどは生成AIによってWeb制作がオワコンになることはありません。

Web制作で初案件獲得までにやるべき6ステップ

それでは、いよいよWeb制作で初案件獲得までにやるべき6ステップについて解説していきます。

Web制作で初案件獲得までにやるべき6ステップ
STEP
HTML/CSS学習

まずはサイト制作の基礎であるHTML、CSSから学習を開始しましょう!

STEP
JavaScript(jQuery)学習

HTML、CSSの学習が終わったら、ハンバーガーメニューやアコーディオンなどサイトに動きをつけることができるJavaScript(jQuery)を学びます。

STEP
WordPress(PHP)学習

jsの学習が終わったら、WordPressやWordPressに使用されている言語であるPHPについて理解していきます(案件のほとんどはWordPressサイトなのでWordPress学習はほぼ必須)。

STEP
番外編

プラグラミング言語以外で、「インターネットがどのように繋がっているか」「どのようにサイトを公開するか」など、サイト制作に必要な重要な知識を身につける必要があります。

STEP
営業

学習が終わったら、営業をかけて初案件獲得を狙いましょう!

①HTML/CSS学習

Web制作で初案件を取るためにまずしたことは、Webサイトの根幹となる「HTML/CSS」言語の学習です。

まずやったのは、Progateを利用してHTMLやCSSを学習することでした。

Progateでは

  • HTML&CSS初級編
  • HTML&CSS中級編

をやりました。

ですが、この時点で余裕があるなら

  • HTML&CSS上級編
  • HTML&CSS Flexbox

もやっておくことをお勧めします。

Flex boxに関してはヘッダー部分やカード型のセクションを整理を使用するときに必要になる概念ですので

HTMLやCSS、あるいはプログラミングに適正があると感じたなら、受講しても良いかもしれません。

ちなみに、Progateとドットインストールどちらがいいかという論争があります。

ドットインストールは動画での講義がメインですし、スマホ用のサイトを作る講義とかもあるので

初心者きつね

僕は、動画講義の方が向いているかなぁ。

初心者たぬき

最初の学習段階で、レスポンシブまで一気に勉強したいポン!

などの思いがある人はドットインストールが向いているかと思いますが、個人的には、そこまで大差はないと思います。

また、Progateと並行して学習していたときのコンテンツとしては、YouTubeや書籍が多く

書籍では「1冊ですべて身に付くHTML&CSSとWebデザイン入門講座」

YouTubeでは、Shin CodeさんのプログラミングチュートリアルというチャンネルのHTML、CSSに関する動画を参考にしていました。

楽天Kobo電子書籍ストア
¥2,486 (2025/12/04 18:04時点 | 楽天市場調べ)

「1冊ですべて身に付くHTML&CSSとWebデザイン入門講座」では、その名の通り案件で頻出するHTML、CSSコーディングを学ぶことができます。

  • FlexBox
  • レスポンシブ対応デザイン

など、現代主流になっているWebサイトを作るには欠かせない技術も掲載してあります。

Shin Codeさんのチャンネルでは、HTML、CSS、JavaScriptの他に

「どのようにしてインターネットが繋がって、サイトが見れているのか?」

など、エンジニアになるなら知っておきたい基礎知識が身につけられる動画もありますので、おすすめです。

ちなみに、「1冊ですべて身に付くHTML&CSSとWebデザイン入門講座」の著者Manaさんも

「webクリエイターボックス」というブログやYouTubeなどを更新されています。

それと、できたらこの時点でVSCodeなどのエディターの操作方法などもこの時点で学んでおいてください。

参考記事
あわせて読みたい
VSCodeの基本的な使い方とファイルを表示させる方法を徹底解説!【Web制作初心者必見!】 VSCodeとは? VSCodeはMicrosoftが開発した、主にファイル内の記述を編集するためのエディターです。 高機能で軽量、かつ多くのプラグラミング言語に対応しているので ...

当然ですが、エディターを使えないとコーディングそのものができません。

今なら、CursorなどのAIエディターを利用してもいいですね!

②JavaScript(jQuery)学習

HTML/CSS、基本的なツールなどを習得したら、今度はJavaScriptの学習に移ります。

ただ、いきなり素のJavaScriptを学習するのは難易度が高いので

初心者の方は、jQueryから学習してみましょう。

jQueryとは、JavaScriptのライブラリの1つで

本来のJavaScriptでは数十行のコードを書かないといけない処理でも、jQueryでは数行で書くことができます。

具体的には、Web制作で頻出の

  • ハンバーガーメニュー
  • アコーディオン
  • 「トップに戻るボタン」の実装
  • ふわっと表示させるアニメーション

などを、jQueryで実装できるように練習していくことになります。

特に、上の3つの実装頻度はかなり高いのでできるようになっておきましょう。

また、jQueryを利用する場合にはCDNという概念も知っておくと便利なのでここで一緒に勉強しておきましょう。

参考記事
あわせて読みたい
jQueryって何?素のJavaScripの違いと導入方法を徹底解説! Webサイトを作る際に、単純なコードで動きを実装できる便利なjQueryというライブラリが存在します。 特に、Web制作を学習したての人は jQueryって、一体何? どうやって...

③WordPress(PHP)

最後は、WordPress(PHP)です。

WordPress(PHP)と書いているのは、WordPressはPHPというプログラミング言語で出来ているから。

ただし、PHPはECサイトや掲示板を作成する際にも使用される言語でもあり、色々なことができてしまうがゆえに勉強する幅も広いです。

なので、ここではWordPressで使用する範囲だけを勉強するようにしましょう。

具体的には

  • htmlで書いた内容をPHPで書き換える
  • メインループやサブループの実装ができるようになる

このような形をゴールとして勉強していくと、効率が良い勉強ができ

初心者きつね

時間を無駄に使っちゃった!

ということがなくなります。

Web制作においてWordPressの学習は必須

Web制作において、WordPressの学習は必須です。

なぜなら、Web制作で案件を取っていく場合はそのほとんどがWordPressを利用した案件だからです。

僕もこれまで

  • サイト制作
  • 改修
  • オリジナルテーマ開発
  • サイトリニューアル

などを担当してきましたが、そのほとんどがWordPressサイト案件でした。

初心者きつね

じゃあ、HTMLやCSSなどはやらないでWordPressだけやればいいんじゃない?

と思うかもしれませんが、それは違います。

なぜなら、昔に作られたサイトはクラシックエディターやオリジナルテーマで作成されたサイトも多く

PHPの他にHTMLやCSS、JavaScriptの知識も必要になりますし

既存テーマを利用したサイト制作で、初稿で提出した際に依頼された修正が

テーマによっては追加CSSにコーディングで記述しないと対応できないものもあったからです。

WordPressを学ぶ上では

「ビジネスサイトを作って学ぶWordPressの教科書」

という書籍がお勧めです。

この本を読みながら手を動かすことで、実際の案件でよくある流れを体験しながらサイトを制作できるようになります。

WordPressで出来るようになるべきことは

  • 既存テーマ制作
  • オリジナルテーマ制作

になります。

a. 既存テーマ制作

まずは、既存テーマ制作です。

既存テーマ制作とは、既にカスタマイズされているWordPressのテーマを利用してサイトを制作することです。

使用する代表的なテーマとしては、Lightning, Snow Monkey, SWELLなどですね。

特に、SWELLはサイト制作だけではなく、ランキング形式のブログが簡単に作れるので

「成果が出るアフィリエイトブログを制作してほしい」という案件などにも対応可能です。

しかし、SWELLを利用する場合には、クライアント側にもSWELLのテーマを購入してもらう必要があります(2025年8月時点で、税込¥17,600)。

Snow Monkey, SWELLは有料テーマですが、Lightningは無料なので

まだWeb制作案件を受けたことがない人は、Lightiningを利用して始めてみるのもいいでしょう(一部有料テーマのLightinig Proでしか実装できない機能あり)。

b. オリジナルテーマ制作

続いては、オリジナルテーマ制作です。

オリジナルテーマ制作では先ほど紹介した、ある程度出来上がっている既存テーマとは違い

自分で静的サイトを作り、それをWordPress化をすることになります。

つまり、これまで学習してきたHTML、CSS、js、PHPなどの知識が必要になってきますが

具体的には、index.htmlやstyle.cssを作成してサイトを作り

それをphp形式のファイルに書き換えたり、ヘッダーやフッターなどのどのページでも固定で表示される部分をテンプレート化したりしていきます。

オリジナルテーマ制作では、WordPressに特化したPHPの関数を使いこなせる必要が出てきますので

少し難易度は高いです。

しかし、オリジナルテーマ制作を習得することによって、月収20〜30万円は実現可能です。

なので、月収20万円以上を目指したい方や、それ以上を目指したい方にとっては、習得しておきたい技術ですね!

先ほどもWordPressに関する本を紹介しましたが

オリジナルテーマに関して言えば、「HTMLサイトをWordPresにする本」もお勧めです。

楽天ブックス
¥2,640 (2025/12/04 18:06時点 | 楽天市場調べ)

WordPressの概念から、HTMLサイトとWordPressサイトの違い、ローカル環境でWordPressサイトを動かすための「Local」というソフトのダウンロード方法から使い方まで幅広く解説されているので

オリジナルテーマ制作全くの初心者でも理解しやすいです。

電子書籍版はこちら。

楽天Kobo電子書籍ストア
¥2,399 (2025/12/04 18:05時点 | 楽天市場調べ)

オリジナルテーマ制作の練習をしたり、今後案件を取っていきたい場合はLocalも必須なので

上で紹介した本を読み進めながらでもいいので、今のうちに使えるようにしておきましょう!

引用:https://localwp.com/

番外編

WordPressまで学習できたら

「さあ、案件獲得しに行くぞ!」

と意気込むかもしれませんが、ちょっと待ってください。

プログラミング言語以外にも学習しておくことがあります。

それは、サイトが公開されるまでの手順やFTPツールの使い方です。

FTPソフトとは、Webサーバーに接続してファイルをアップロードしたりダウンロードできるソフトのことです。

静的サイトを納品する案件の場合、作成したファイルを提出するだけでいい場合もありますが

サイト公開を納品条件とする案件もあります。

なので、自分で作成したHTMLファイルやCSSファイルなどを実際にどのようにWeb上にアップロードしていくのかを知っておく必要があります。

また、僕が実際に受けたWordPress案件でもFTPソフトを利用してテスト環境を構築するものがありましたので

「WordPress案件だけしか受けないから知らなくていい」ということにはなりません。

なので、まだ勉強できていなかったりよく理解できていない人はこれを機に勉強して

FTPソフトを利用して実際にWebサイトを公開できるようにしておきましょう。

営業

学習を終えたら、営業していきます。

知人にホームページが作りたい人がいたら無料で作ってあげてもいいですし

クラウドソーシングサイトを利用して案件を獲得していきましょう。

クラウドソーシングサイトでは、だいたい20件ほど応募したら1件受注できると言われています。

ボクの場合は、10件ほど応募したら依頼主から連絡があり

初案件をいただくことができました。

ただ、やみくもに提案しても提案文が悪ければ意味がないので

提案文の中に自分ができることを書いたり、不安に思っていることを取り除いてあげるような解決策を提示してあげましょう。

例えば、「PCを普段あまり触らないのですが、サイトを作ってもらいたいのですが、自分で内容を変更できるようにして欲しいです」と依頼文に書いてあったら

「WordPressを利用することで、ご自身でも簡単にカスタマイズを行うことができます。また、僕にご依頼いただけたら操作マニュアルも提供させていただきます。」

という風な提案を含めると、依頼者としても安心できますので受注率は上がりますよね。

実際に取った初案件の話

ここからは、ボクが実際に取ってきた初案件の話をしていきたいと思います。

初案件は、クラウドソーシングサイトである「ランサーズ」で取得しました。

内容は、用意されていた画像を貼り、それにリンクを付けスタッフ紹介ページに飛ばし

その紹介ページを少し編集するというものでした。

実は過去にも自分でブログをやるためにWordPressは触っていたことがあるので

わい

なんだ、画像にリンク貼ったり固定ページを少し修正するだけじゃん♪

と感じ、できる自信がありました。

ただ、念のため何か起こってもいいようにMENTAというサービスで先生として教えてくれる人を募集し

評価も高く、実績もある人にお願いしました。

案件を応募する際は、最低金額の半額で応募したら

「安く受けてくれて助かります」

と返信がきて、見事当選。

しかし、勉強内容と違い、実際の現場は蓋を開けてみたら思った以上に難しかったです。

用意された画像を貼り付ければいいと思っていたので、そのまま貼り付けたら

実際は「画像の中身をコーディングを利用して再現する」もので、当然やり直しに。

しかも、CSSのtransitionプロパティを利用した画像の拡大調整なんかもあり

MENTAで募集したメンター(先生)に教えてもらいながら

納期が1週間だったのですが、結局最終日の夕方までかかってなんとか納品できました。

初心者きつね

簡単そうに思っても、実際は思っていたより大変なこともあるんだね。。

わい

僕みたいなことにならないように、一見簡単そうに見える案件でも依頼内容に不明点があれば質問してみた方がいいよ!

「質問したら初心者だと思われそうで嫌だ」という人もいるかと思います(最初はボクもそう思っていました)。

しかし、不安点を解消してから案件に臨んだ方が絶対にいいですし、任せる側しても安心して任せられます。

また、僕が行ったようにいざとなった時に質問できたり頼れる先生の存在があるかないかも大きいでしょう。

お金に余裕がある人はプログラミングスクールに通うでも良いですし、余裕がない人でも

MENTAなどのサービスを利用すれば安価で指導してくれる自分専用のメンターをつけることもできます。

【結論】初案件までが1番きつい

ということで、今回は僕の初案件獲得を例に、学習言語から案件獲得までの流れを解説しました。

実際、案件獲得に慣れてきたら基本的には同じことの繰り返しになるので繰り返しになるので

初案件獲得が1番きついです。

なので、学習開始から初案件獲得までが踏ん張りどころです。

今回紹介した手順でWeb制作について学習していけば、今後Web制作1本で生活できるレベルにまで到達する人も出てくるでしょう。

ここさえ乗り越えれば後は同じことを繰り返していくだけで月収アップが狙えますので、ぜひ頑張ってください!

これからも、こういったコーディングやWeb制作、WordPressなどに役立つ情報を発信していこうと思いますので

次回の記事もぜひみてみてくださいね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

わい
Web制作未経験から、HTML/CSS(Sass)/JavaScript(JQuery)/WordPressを習得し、学習開始半年で月収10万円を達成。制作実績15件超。大手有名企業の提携会社のサイト制作も経験。
主にWeb制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しています。

コメント

コメントする

CAPTCHA


目次