未経験からWeb制作を副業にする方法｜AIで作って、ココナラで受注するまでの全手順

「Web制作の副業、稼げるらしい」——そう聞いて調べ始めたものの、HTMLとかデザインとか、覚えることが多すぎて手が止まっていませんか。この記事は、まさにそこで止まっている人に向けて書きました。

先に正直なことを言っておきます。これは「誰でも簡単に月30万」みたいな話ではありません。ただ、「作れないから無理」という一番大きな壁は、AIでほぼ消えたのは本当です。この記事のゴールは、あなたが「未経験でも、人に納品できるサイトを作って、案件を受けられる状態」までたどり着くこと。そこまで来れば、あとは数をこなすだけです。

しかもこの記事では、AIツール（rafuru）の画面を1枚ずつスクショで見せながら、「この画面でこれをダウンロードして、こうやってクライアントに送る」というレベルまで具体的に書きます。受注してから納品するまでを、1つの流れとしてなぞるだけ。読み終わる頃には、あなたも同じ手順でクライアントワークができるようになっているはずです。長いですが、順番にやれば必ずたどり着けます。

まず、この記事を「AIと一緒に」読む準備をしよう

読み始める前に、ひとつだけ準備を。この記事はそこそこ長く、専門用語も少し出てきます。「一人だと途中で挫折しそう…」という人は、ChatGPT か Claude を”隣で教えてくれる先生”にして、一緒に読み進めるのが断然ラクです。

やり方はかんたん。下のプロンプトをコピーして、ChatGPT か Claude に貼り付けるだけ。この記事のURLごとAIに読ませて、あなたのペースで1ステップずつ導いてもらいます。分からない言葉が出てきたら、そのままそのAIに聞けばOKです。

次のURLの記事を読んで、その手順に沿って、私を最初から最後まで
1ステップずつ案内してください。私はプログラミング未経験です。
https://rafuru.ai/blog/web-seisaku-fukugyo-hajimekata/

お願い：
- 一度に全部説明せず、1ステップずつ。私が「できた」と言ってから次へ進んでください。
- 専門用語（デプロイ、FTPなど）は、その都度かみくだいて説明してください。
- 私がつまずいたら、次にやることを1つだけ示してください。
- 記事の内容やスクショについて質問したら、それにも答えてください。
- 私が「わからない」「不安」と言っても、否定せず励ましてください。

まずは記事を読んで、私の状況（パソコンはあるか、作りたいサイトのイメージが
あるか）を2〜3個の質問で確認してから、最初の一歩を教えてください。

もしAIが「URLを開けません」と言ったら、この記事のページを全選択してコピーし、プロンプトのあとに貼り付ければOKです。あとはAIの質問に答えながら進むだけ。この記事とAIの2つを開いておけば、未経験でも迷子になりません。では、始めましょう。

先に「いくら残るのか」を計算しておく

やる気の話をする前に、現実的なお金の話を先にします。ふわっとした期待より、具体的な数字のほうがモチベーションになるからです。

ココナラでLP（ランディングページ）制作を出品する場合、最低価格は1.5万円（15,000円）から。まずはここから始めるとして、手元にいくら残るか計算してみます。

まず1本目：1.5万円で受注したら

• 売上：15,000円
• ココナラ手数料（22%）：−3,300円
• rafuru 利用料（月額 Starter・月1本ぶん）：−3,300円
• 手取り：約8,400円

「思ったより少ない」と感じたかもしれません。でもこれは一番安い価格でのスタートの話。大事なのは、制作の大半をAIがやるので1本にかかる時間が短いこと。数をこなすほど、時給に直すとぐんと上がっていきます。

慣れてきたら：5万円で受注できるようになる

レビューが貯まり、クオリティも上げられるようになると、単価は上がります。同じ「LP1本」を5万円で受けられるようになると——

• 売上：50,000円
• ココナラ手数料（22%）：−11,000円
• rafuru 利用料：−3,300円
• 手取り：約35,700円

同じ作業量でも、手取りは 8,400円 → 35,700円と4倍以上。入口は低く、伸びしろは大きい——ここがこの副業のいいところです。しかも rafuru の月額3,300円は「月1本ぶん」なので、月に2本・3本と作れば、1本あたりのツール代はさらに下がります。

▲ 「1.5万円→約8,400円」から始めて、単価が上がれば手取りは一気に伸びる

rafuru の料金は、月額 Starter が3,300円で月6クレジット（完成LP約1本ぶん）。完成LP1本はおよそ5.2クレジットで、単発ならクレジット購入もできます。数値は本記事執筆時点のもの。最新は rafuru の料金ページ と、ココナラなど各サービスの公式情報をご確認ください。

「作れない」の壁は、もう技術の問題じゃない

これまでWeb制作の副業でつまずく人の大半は、制作そのもので消耗していました。デザインを考え、Photoshopで作り込み、HTMLとCSSでコーディングして、スマホ表示を直して……。ここで数ヶ月かけて挫折する、というのが定番のパターンです。

ここ1〜2年で状況が変わりました。ノーコードツール（Wix、STUDIO、ペライチなど）やAIツールが実用レベルになり、「手を動かして作る」部分をツールに任せられるようになったからです。つまり、あなたが身につけるべきは「コードを書く力」ではなく「ツールを使って案件を回す力」に変わりました。

その中でも、この記事では rafuru を軸に進めます。理由は後で実際の画面で説明しますが、ひとことで言うと「Web制作の”仕事の流れ”そのものをAIが再現してくれる」ツールだからです。ChatGPTに「LP作って」と投げると”それっぽい単発の出力”が返ってきますが、rafuru はヒアリング → 要件整理 → デザイン3案 → カンプ → コードまで、受託の工程をそのまま歩いてくれます。

全体像：稼ぐまでは4ステップ

やることを分解すると、たった4つです。

1. 作る — サイト（LP・ホームページ）をAIで組み立てる
2. 公開する — 作ったものをネット上に出す（デプロイ）
3. 受注する — ココナラなどで案件を取る
4. 納品する — 相手とやり取りして、完成品を渡す

▲ 稼ぐまでの全体像。この記事では③受注のあと、①作る→②公開→④納品を1つの流れでやる

この記事は、まず③案件の取り方を押さえてから、受注した前提で①作る→②公開→④納品を1つの流れとして通しでやってみます。多くの人が①だけで消耗して先に進めませんが、実際に「お金になる」のは③と④。だからこそ①はツールに任せて、早く抜けるのが正解です。

案件を取る：ココナラで出品する

作り方の前に、案件の取り方から見ておきます（先に出口が見えていたほうが、手を動かす気になるので）。未経験がまず1件目を取るなら、ココナラ（スキルのフリマ）が一番現実的です。

出品までの流れ

ココナラは「自分のスキルを商品として並べておき、買いたい人に見つけてもらう」フリマ形式です。手順はシンプル。

1. ココナラに無料登録する（メール or SNS連携）
2. 右上の「出品する」からサービスを作成
3. カテゴリは「Webサイト制作・Webデザイン」→「LP・ランディングページ制作」あたりを選ぶ
4. サービス内容・価格・納期を入力して公開

登録から公開まで、慣れれば30分ほど。ここに載せる実績（ポートフォリオ）は、次の章の手順で自分用に1〜2本つくればOK。まだ作ったことがなくても大丈夫、作り方はこのあとすぐ説明します。

手数料は先に頭に入れておく

ココナラの出品者手数料は、販売額の 22%（税込） です（2026年時点）。たとえば15,000円のサービスが売れると手数料は3,300円、手取りは約11,700円（ここからさらにツール代を引きます）。決して安くはないので、価格は手数料を織り込んで決めます。「手数料を引かれても割に合う値付け」を最初から意識してください。

刺さる出品ページの作り方

初心者の出品ページは、埋もれがちです。次の3点を押さえるだけで、ぐっと選ばれやすくなります。

• サービスタイトル：検索で目に留まる言葉を前に置く。例：「AI活用で高速納品｜ホームページ・LP制作します」。「安さ」より「速さ」「AI活用」を打ち出すと、他の初心者と差別化できます。
• ポートフォリオ（実績画像）：次の章の手順でつくったサイトのスクショを載せます。rafuru の完成LPは見栄えがするので、1枚目に一番きれいなものを。業種違いで2〜3本並べると、対応力が伝わってさらに強いです。ただし、架空のデモであることは正直に書くこと。実案件のように見せかけると、後で必ず信用を失います。「制作イメージ（デモ）」と一言添えればOKです。
• 差別化ポイントを3つ書く：「デザイン3案から選べる」「スピード納品」「修正◯回まで対応」。この3つは未経験でも今日から打ち出せる強みです。特に”3案から選べる”は rafuru を使えば本当にできるので、嘘になりません。
• 「写真・ロゴなどの素材はご支給ください」と明記する：サービス内容（商品説明）に必ず書いておきます。AIは文章は書けても、お店・お教室の実際の写真そのものは作れません。素材は支給いただく前提にしておくと、後で「載せる写真がない」で止まらず、実物どおりのサイトに仕上げられます。「写真をご用意できない場合はフリー素材で対応します」と一言添えておくと、より親切です。

価格は「実績作り優先」から始める

最初はココナラのLP最低価格（1.5万円）〜2万円あたりから始めて、レビューを集めることを最優先にします。ここでレビューが5件、10件と貯まってくると、冒頭で計算した5万円のように単価を上げても選ばれるようになります。構成や集客の提案までできるようになれば、1本15万円以上の仕事も見えてきます。最初の数件は「稼ぐ」より「信用を貯める」期間だと割り切ると、気が楽です。

提案（見積もり）にも自分から動く

ココナラには、買い手が「こういうの作って」と募集する公開依頼もあります。出品して待つだけでなく、条件の合う依頼にこちらから提案文を送ると、初速がつきやすいです。同じ発想で、クラウドワークスやランサーズの「Web制作」案件（常時1万件以上あります）に応募していくのも有効です。

受注したら：rafuru で作って、納品するまで（通しでやってみる）

ここからが本番です。「下北沢ピアノ教室」から、無料体験レッスンの集客LPを受注した——という前提で、最初から最後まで通しでやってみます。

やることは、ずっと同じリズムです。rafuru の画面で1工程進める → その成果物をダウンロードしてクライアントに送る → OKをもらって次へ。この流れをなぞるだけで、それがそのままクライアントワークになります。

▲ 各工程の成果物を送って「OK」をもらいながら進める。この流れをなぞるだけ

① 受注のお礼と、ヒアリング

案件を受けたら、まずお礼と一緒に、制作に必要なことを質問します。ここで聞く内容は、このあと使う rafuru のヒアリング項目とほぼ同じ。難しく考えず、下の5点を送れば十分です。

このとき、写真やロゴなどの素材は、必ずこの段階でデータをもらっておきましょう。サイトに載せる写真は、基本的にクライアント支給のものを使います（AIはお店・お教室の実際の写真を作れないため。詳しくは⑥で）。もらい忘れると後の工程で止まるので、ヒアリングと一緒にお願いしておくのが安全です。

返事をもらったら、さっそく rafuru を開きます。ログインして、右上の「新しいプロジェクト」から。

▲ 制作中の案件はここで一覧管理できる。複数のクライアントを並行しても迷子にならない

最初の画面で、作りたいサイトを日本語で1行書くだけ。ヒアリングでもらった内容を、そのまま入れればOKです（例：「下北沢のピアノ教室の集客用ランディングページ。無料体験レッスンの申し込みを増やしたい」）。

▲ クライアントからもらったロゴや写真（PDF・画像）は、ここで一緒にアップロードできる

② AIのヒアリングに答えて、要件をまとめる

「分析を開始」すると、AIがそのサイトに必要なことを質問してくれます。ターゲットや載せたい内容を、選択式で聞いてくるだけ。Web制作の知識がなくても答えられます。分からない項目は右下の「AIに任せる」をオンにすれば、AIが妥当な内容で埋めてくれます。

▲ 「何を決めればいいか」をAIが用意してくれる。初心者が一番つまずく”要件定義”を肩代わり

答え終わると、内容が「要件サマリー」に整理されます。目的・ターゲット・トーン・料金・ページ構成まで1枚に。事実と違うところだけ直せばOKです。

▲ アピールポイントや講師プロフィールの下書きまでAIが補完。ゼロから書くより断然ラク

この要件サマリーは、そのままクライアントに送って「この方向で進めますね」と一度確認しておくと、さらに安心。OKなら「この内容でワイヤーフレームを生成」で次へ進みます。

③ デザイン3案を出して、クライアントに選んでもらう

要件をもとに、rafuru がデザインの方向性を3案出してくれます。各案は右上の↓ボタンでダウンロードできます。

▲ 配色・トーンの違う3案が、それぞれ提案文つきで並ぶ。各案はダウンロードできる

ここが最初の”合意ポイント”。3案をダウンロードして、そのままクライアントに送り、選んでもらいます。自分で1案に絞らず、相手に選ばせるのがコツ。選ばれた案がそのまま合意になるので、後から「イメージと違った」が起きません。

あなた（制作者）

ヒアリングありがとうございます！デザインの方向性を3案つくりました📎
それぞれ雰囲気が違うので、「これが好み」というものを1つ選んでいただけますか？

案1：パステルで明るく／案2：木目とアイボリーのナチュラル系／案3：モノトーンでスタイリッシュ

クライアント（ピアノ教室オーナー）

ありがとうございます！
案2の、木目のナチュラルな感じが教室のイメージにぴったりです😊 これでお願いします！

これで「デザインの方向性」が合意できました。あとはこの案で仕上げるだけなので、大きく外すことがありません。

④ カンプで「雰囲気」を合意する

選ばれた案2で「カンプを生成」。要件とデザインを合わせた、サイト全体の”完成イメージ”が1枚の絵になって出てきます。これもダウンロードできます。

▲ 選んだ方向で、ヒーロー・コース・講師・雰囲気・申し込みフォームまで1枚に組み上がる

ここで、一番大事な注意点です。カンプは”完成イメージの絵”であって、まだ動くサイトではありません。そして rafuru では、このカンプを部分的に手直しすることはできません（直したいときは、③に戻ってデザインボードを選び直し、カンプを作り直す仕組みです）。

なので、この段階の目的は「この雰囲気で進めていいか」のすり合わせだけ。細かい文言や写真は、次の”実装”の段階でいくらでも直せます。だから送るときに、「今日は全体の雰囲気だけ見てほしい」「細かい調整は後でできる」と先に伝えておくのがコツ。ここを言っておかないと、絵の段階で細かい指摘が続いてしまいます。

あなた（制作者）

案2の方向で、全体の完成イメージ（デザイン見本）ができました📎
まずは「全体の雰囲気」がイメージ通りかを見ていただけますか？
文言や写真などの細かい調整は、この後の"実装"の段階でまとめて反映しますので、今はざっくりの印象でOKです😊

クライアント（ピアノ教室オーナー）

わ、素敵です😳 温かい雰囲気で、まさにイメージ通りです！
（写真は差し替えたいかも…と思いましたが、後でできるんですね）ではこの方向でお願いします！

もし「雰囲気が思っていたのと全然違う」と言われたら——無理に直そうとせず、③に戻って別のデザインボードを選び、カンプを作り直します。逆に、雰囲気にOKが出れば、いよいよ”実物”を作ります。

💬 もし絵の段階で「ここの文言を変えて」と具体的に言われたら、こう返します。「こちらはまだ完成イメージ（見本）なので、細かい調整は次の”実装”の段階でまとめて反映しますね。今は全体の雰囲気がこの方向でOKか、だけ教えてください🙏」——これで、直しのタイミングを正しい場所に寄せられます。

⑤ 実装（動く実物）を生成して、見てもらう

雰囲気にOKが出たら、そのカンプから実際に公開できる本物のサイト（HTML/CSS）を生成します。ここで初めて、“絵”が”動くWebページ”になります。

▲ 左に実物のプレビュー、右に生成されたHTML/CSS。上部の「ダウンロード」でコード一式、「リンクをコピー」で共有用URLが手に入る

ここで「リンクをコピー」を押すと、実際に動くページの共有URLが発行されます。これをクライアントに送って、本物を触って確認してもらいます。カンプ（絵）では分からなかった細かいところは、実物を見て初めて気づくもの。具体的な修正指示は、ここからが本番です。

⑥ 細かい修正は、AIで直す

実物を見てもらうと、具体的な直しが出てきます。ここでの直しは大きく2種類——「文言の修正」と「写真の差し替え」。どちらもコードを自分で触る必要はありませんが、やり方が少し違います。まず、rafuru の「ダウンロード」でHTML/CSS一式を取得しておきます。

① 文言の修正は、AIにそのまま頼めます。 ダウンロードした zip を ChatGPT / Claude に渡して、こう頼むだけ。

添付はWebサイトのHTML/CSS一式です。
料金セクションに「入会金なし」の一言を追加してください。
直したファイル一式を、そのまま公開できる形で返してください。

② 写真の差し替えは、“クライアントからもらった写真”を使います。 ここが大事な注意点。AIは文章は直せても、お店やお教室の実際の写真そのものは作れません（特に Claude は画像生成に非対応。ChatGPT なら生成できる場合もありますが、実在するお店の写真を”それっぽく作る”のは避けるべきです）。だから写真は、クライアントに支給してもらったデータに差し替えるのが基本。手順はこうです。

1. クライアントからもらった写真を、ダウンロードしたサイトの画像フォルダ（images など）に入れる。ファイル名は分かりやすく（例：main.jpg）。
2. AIに、画像の指定を書き換えてもらう。

添付はWebサイトのHTML/CSS一式です。images フォルダに main.jpg を追加しました。
メインビジュアルの写真を、この images/main.jpg に差し替えてください。
直したファイル一式を、そのまま公開できる形で返してください。

AIが画像の参照先（コード）を書き換えて返してくれるので、あなたが入れた写真ファイルと合わせれば、実際の写真が入ったサイトになります。（もらった写真は、rafuru の最初の入力画面で”参考資料”としてアップロードしておくと、はじめから反映されることもあります。）

文言も写真も直したら、更新したページを、もう一度クライアントに見てもらいます。

修正依頼は「まとめてお知らせください」と一言添えるのがコツ。小出しの往復を防げます。

⑦ 公開して、納品する

最終OKが出たら、いよいよ公開です。修正済みのファイル一式を、ネットに公開（デプロイ）します。rafuru はコードそのものを渡してくれるので、公開先は案件ごとに自由に選べます（相手のサーバーでも、自分で用意した無料サーバーでもOK）。

そして、公開の細かい手順は覚えなくて大丈夫。 その zip を ChatGPT / Claude にアップして、「これを○○で公開したい。初心者向けに手順を1つずつ教えて」と頼めば、あなたの環境に合わせて手取り足取り教えてくれます。

このzipはWebサイトのHTML/CSS一式です。プログラミング未経験です。 これを Cloudflare Pages で無料公開したいです。 アカウント作成から公開URLが出るまで、専門用語をかみくだいて、 1ステップずつ、私が今どの画面のどこを押せばいいか教えてください。

実際に、この完成データ（zip）を Claude にアップして、上のお願いをそのまま送ってみました。

▲ ダウンロードしたzipを添付して、お願いをそのまま送るだけ

すると、中身まで確認したうえで、アカウント作成 → アップロード → 公開URLが出るまでを1ステップずつ案内。「パソコンはWindows？ Mac？」と、こちらの環境に合わせて質問までしてくれます。

▲ あなたの環境に合わせて手順を出してくれる。あとは言われた通りに進めるだけ（ChatGPTでも同じことができます）

公開先は、主に2パターン。相手がサーバーを持っていなければ Cloudflare Pages（無料・数分）、すでにレンタルサーバー（エックスサーバー等）を持っていれば、そこにアップ。どちらも、上と同じようにAIに聞けば手順を教えてくれます。案件を受けるとき「サーバーはお持ちですか？」と一言聞けば、どちらか決まります。持っていなければ「こちらで無料の公開先を用意できます」と言えるので、むしろ提案の幅が広がります。

公開が終わったら、URLとデータを渡して納品完了です。

支払いはココナラのエスクロー（先払い）方式。購入時点でココナラが代金を預かっているので、納品して「正式な回答」を送れば報酬が支払われます。取りっぱぐれがないのは、初心者に大きな安心。そして最後にもらうレビューが、次の受注を呼びます。

この流れを、ただなぞるだけ

改めて、やったことはこれだけです。

• ① お礼＋ヒアリング（rafuru のヒアリング項目が、そのまま質問リストになる）
• ② AIヒアリング→要件（選ぶだけ。分からなければ「AIに任せる」）
• ③ デザイン3案を送って選んでもらう（方向性の合意）
• ④ カンプで雰囲気を合意（絵の段階。細かい修正はまだしない）
• ⑤ 実装を生成して、実物を見てもらう（ここから具体的な修正）
• ⑥ 細かい修正はAIで（コードは触らない）
• ⑦ 公開して納品（手順はAIに聞く）

制作そのものは rafuru と AI がやってくれます。あなたの仕事は、節目ごとに成果物を見せて”OK”をもらい、相手を安心させること。ここが、AIに置き換わらない一番の価値です。

数をこなすほどラクになる（正直な注意も）

冒頭で計算したとおり、1本目の手取りは約8,400円、慣れて5万円で受けられれば約35,700円。rafuru を使えば1本の制作時間はかなり短くできるので、数をこなすほど時給は上がっていきます。ただし最初の1〜2本は、慣れるまで時間がかかる前提でいてください。

そして大事なこと。案件が自動で降ってくるわけではありません。出品しただけで売れることは少なく、最初はプロフィールや提案文を工夫して、こちらから動く必要があります。「作れる」と「売れる」は別のスキルです。ただ、①作る のハードルをAIで消しておけば、②売る に集中できる。これが未経験にとって一番効いてくる部分です。

未経験がつまずくポイント

先回りして、よくある失敗を挙げておきます。

• 素材の権利：使う画像・フォント・アイコンが商用利用OKか、必ず確認する。ここは事故が多いです。クライアントから支給された写真を使うのが一番安全です。
• 「全部AIで作りました」と言わない：「AIを活用して制作しています」でいい。最終的な品質を担保するのは自分の責任です。
• 安請け合いしない：無理な納期や過度な値引きは、自分の首を絞めます。
• 誇大にしない：「必ず稼げます」的な言葉を自分の営業でも使わないこと。信用が最初の資産です。

まずは今日、ここから

長くなったので、最初の一歩だけ具体的に置いておきます。この記事を閉じたら、そのままやってみてください。

1. rafuru で、自分用にLPを1本つくってみる（上の「受注したら〜」の①〜⑦を、練習としてなぞるだけ）
2. できた1本を実績に、ココナラで出品してみる
3. 最初の1件を受けたら、また同じ①〜⑦をなぞる

繰り返しますが、「作れる人」より「作って、公開して、納品まで一人で回せる人」のほうが圧倒的に少ない。そこに立てるだけで、もう十分に戦えます。まずは1本、手を動かすところから始めてみてください。

この記事は、SNSで rafuru の動画にコメントをくれた方に向けた実践ガイドです。ツールの詳細や最新の料金は rafuru の公式サイト で確認してください。ココナラの手数料など外部サービスの数値は、各サービスの最新情報もあわせてご確認ください。