初受注5万円までのロードマップ｜未経験からHP制作で受注するまで

前提として、僕はエンジニアじゃないです。

そして、断じてパソコンが得意なタイプでもありません。タイピングもできませんし、どちらかというと苦手な部類です。

それでも、とりあえず「作って、見せる」ところまでやり切ったら、ちゃんと受注につながりました。

これは紛れもなく僕自身が実際に経験したことです。

「いや、それでどうやって5万円の案件を取ったの？」って思いますよね（笑）

ここからは、僕が実際にやった「初受注→5万円売り上げる」までの流れを、実践形式で一つずつ解説していきますね。

全体像（8ステップ）

STEP 0  なぜHP制作をやるか決める
   ↓
STEP 1  学ぶ（教材・ツールに触ってみる）
   ↓
STEP 2  環境を整える（Codex・作業フォルダ・ブラウザ）
   ↓
STEP 3  練習作品を作る（誰にも見せない1枚目）※別に見せてもいい
   ↓
STEP 4  ポートフォリオ用デモを作る（見せられる1枚目）
   ↓
STEP 5  ターゲット店舗をリサーチする
   ↓
STEP 6  デモを作って「見せる」
   ↓
STEP 7  受注・納品（5万円の初案件）
   ↓
STEP 8  実績化・次の一手

所要時間の目安は、集中してやれば1〜3ヶ月くらいです。僕は教材を買ってから初受注まで実質1週間くらいでしたが、それ以前にアドセンスブログや他の副業で発信・行動してた土台があったからだと思ってます。ゼロからだと、もう少し時間かかる想定でいてください。

STEP 0｜なぜHP制作をやるか

やることはシンプルです。紙に1行だけ、理由を書いてください。

例えば、

本業以外の収入の柱が欲しい
地域のお店を助けたい
自分でサイトを作れるようになりたい
労働収入以外のスキル型の副業が欲しい

僕の場合は、フードデリバリー副業を中心に、ポイ活やフリマでの不用品販売など、「まずは副業でゼロ→1を達成するための方法」をメインに発信しています。ただ、そこだけに留まるのではなく、最近は「フーデリ×Web制作」という形で、自分自身も次のステップに進んでいます。

フードデリバリー副業のように自分が動いて収入を作る働き方と、Web制作のようにスキルや実績を積み上げて仕事につなげていく働き方。同じ副業でも、収入の作り方や一撃の積み上がり方が全然違うんですよね。

STEP 1｜学ぶ

やることは、

「難しい専門知識を全部覚えよう」とするより先に、AI×バイブコーディングの流れを理解する
完成サイトのサンプルを見て、「こういうのが作れるんだ」ってイメージを持つ

僕が実際に使った教材は、ぞろ屋さんの AIで作るホームページの教科書（Brain）です。

エージェントスキル付きで、教材内はClaud code想定の説明もありますが、同じバイブコーディングの流れはCodexでも普通に再現できます
ファーストビュー100選・サンプルサイト45種があって、迷う時間が減ります
僕自身、初受注の直前にこれで学びました

これから制作代行のクライアントワークをやっていきたい人や、ビジネス目的でちゃんと成果の出るサイトを作りたい人は、買ったほうがいいです。

教材には、ぞろ屋さんの長年の知見が詰まってるので、素人が自己流で作るサイトと、プロが戦略込みで作るサイトだと、正直成果の出方が全然違います。逆に、友達に気軽にプレゼントする用とか、趣味で触ってみたいだけなら、無理に買う必要はないです。

これはアフィリエイトリンクなので、買うかどうかは完全に任意です。無料特典だけでも、最初の一歩は踏み出せる内容にしてます。

正直な話、いきなり高いツールとか教材を勧める気はないです。まず無料特典で手を動かしてみて、「もっと知りたい」ってなった人だけ次に進めばいい、くらいの温度感でやってます。

STEP 2｜環境を整える（Codex前提）

この特典シリーズは、全部Codexで進める前提で書いてます。

理由はシンプルで、無料から始められて、実際使ってみてダントツで導入ハードルが低いと僕が感じてるからです。名刺・ポートフォリオ・初受注案件、全部Codexメインで作ってます。

最低限これだけあればOKです。

ツール	用途
Codex（ChatGPT内）	バイブコーディングの本体。ファイル生成・修正
ChatGPT（任意）	構成案・キャッチコピー・文案の壁打ち
ブラウザ(Googlechrome)	プレビュー・リサーチ
Netlify（無料）	公開・デモURL作成

最初の3ステップは、

ChatGPTアカウントを作る（無料プランでOK）
PCに my-first-hp みたいな作業用フォルダを1個作る
Codexに「このフォルダで、カフェのサイトを作って」と指示する

僕の場合は、フードデリバリー配達の合間にカフェや自宅でPC作業してます。文案はChatGPTで壁打ちして、実装はCodexに渡す、みたいな分担もよくやります。

詳細は特典② バイブコーディングでホームページを作る入門マニュアルを見てください。

STEP 3｜練習作品を作る（非公開）

やることは、好きな店とか架空の店とか、自分の趣味とか、誰にも見せない1サイト(別見見せてもいい)を作ることです。完璧を目指さなくていいです。「動くページが1つできた」で十分ゴールです。

因みに僕が最初に作成したのは、タイピングの練習がしたいという理由から、練習ゲームを作成しました。

よくある失敗パターンは、

いきなり「受注できるクオリティ」を目指して手が止まる
ツール選びだけで1週間溶ける

このへん、僕も通ってきた道です。笑コツは、特典③のホームページを作ってみよう7日チャレンジに沿って淡々と進めることです。

STEP 4｜ポートフォリオ用デモを作る

やることは、整体院・カフェ・個人事業主みたいな1ジャンルに絞ったデモLP・HPを2〜3本作って、自分のポートフォリオに載せられる状態にすることです。

僕の場合は、

整体院LP
ミュージシャン向けLP
カフェHP

みたいなのを作って、今はポートフォリオ（https://chottoirodori.com/portfolio/）に統合してます。

STEP 5｜ターゲット店舗をリサーチする

僕の初受注パターン、再現性があると思うのでそのまま書きます。

配達中とか日常で気になった店を目星をつけておく
Instagram・食べログ系サイト・HP を30分くらいリサーチする
「HPがない／未完成／SNSだけじゃ心もとない。など」をメモする

※ChatGPTのディープリサーチ機能を使って、(例)「近所にあるカフェや整体院、小さな個人店などで、ホームページを持っていないお店や、ホームページはあるけど情報が古かったり、あまり作り込まれていないお店をリサーチしてください」みたいな、ざっくりとした指示でもOK

初受注したカフェ（街と珈琲さん）の場合は、Instagramメインで食べログ系の店舗紹介サイトもあるけど、HPは未完成で放置されてました。ここで「サイトは欲しいけど、自作で挫折してるな」って判断しました。

一方、整体院さんの方はもともと施術をしてもらっていたりお世話になっていたのですが、その中でさりげなくヒアリングをしていて、HP・SEO・口コミがすでに強くて、弱いのはSNS→予約の導線ということを聞いていました。なので「HPを作りましょう」じゃなくて「LPで導線を足しましょう」って提案に変えてます。

リサーチによって刺さる提案が全然変わるので、ここは飛ばさないほうがいいです。

STEP 6｜デモを作って「見せる」

僕が初受注できた決定打は、カフェのオーナーさんに、先に作っておいたサイトをそのまま見せたことです。

「お店のHP、勝手に作ってみたんですけど、見ていただけますか？」って感じで持っていきました(笑)

ご依頼前提じゃない
5分だけ見てもらう
イメージに近いか、感想だけもらう

これ、教材読んでるだけだと絶対起きないやつです。作って見せるところまで動いたとき、初めてチャンスが来ます。ぶっちゃけ、ここが度胸が必要で一番怖いところでもあるんですけど。

STEP 7｜受注・納品（初案件5万円）

受注後にやったことは、

ヒアリング（想い・届けたい人・既存の素材）
本制作（Codexでバイブコーディング）
もともとマスターさんが、運営していたWordPress＋独自ドメインがあったので、そのサイトを流用
運営マニュアル一式を作って納品
納品後も不具合修正・ブラッシュアップ対応

料金は今、HP・LPどちらも50,000円〜で掲載してます。初案件は5万円でしたが、信頼構築と実績づくりの意味では、悪くないスタートだったと思ってます。

STEP 8｜実績化・次の一手

やることは、

ポートフォリオに掲載する
口コミ・お客様の声をもらう（もちろん許可取って）
同じ地域・つながりから次の案件につながることが多い
2件目以降は値上げ・線引きする（無料モニターは締め切る）

僕のその後は、同じお店のイベントLP（沖縄フェア→マルシェ）につながったり、整体院さんのLPモニター（口コミ・ポートフォリオ掲載済み）をやったり、DM営業・飛び込みの型をトークスクリプト化したりしてます。

ロードマップ早見表

フェーズ	ゴール	期間目安
0〜2	環境＋インプット	1〜2週間
3〜4	練習＋デモ1〜3本	2〜4週間
5〜6	リサーチ＋見せる	1〜2週間
7	初受注・納品	案件による
8	実績化・有料化	継続

次に読むもの

最後に

完璧な正解を探すより、小さく作って、小さく見せる。これだけです。

僕もアドセンス審査、1年落ち続けてようやく合格出来ました。フードデリバリー副業だって始める時は不安だらけでした。Web制作も最初は「自分にできるのかな…」って全く自信がありませんでした。

でも、一歩進んだ分だけ、選択肢は着実に増えて来ています。

まずは特典②か③を開いて、今日は1アクションだけやってみてください。

イロドリ