AI活用 Web制作

【全手順公開】AIと掴んだ初案件!私がココナラで「2万円」のWebサイトを売るまでにやったこと全て

AIを相棒にノーコードで初案件を受注—ココナラで「2万円」サイト制作までの全手順を象徴するダイナミックなアイキャッチ

あなたのポートフォリオ、ただの「飾り」になっていませんか?

ポートフォリオは完成した。スキルも、確かに身についたはずだ。
なのに、ここからどうすれば「仕事」という形になるのか、その一歩が踏み出せない。

クラウドソーシングサイトを眺めては、実績豊富な猛者たちに気圧され、そっとブラウザを閉じる日々…。「自分のスキルに、本当にお金を払ってくれる人なんているのだろうか?」

もしあなたが今、そんな「学習の次」の壁の前で立ち尽くしているなら、朗報です。
つい先日まで、私も全く同じ場所にいました。

しかし、この記事で私は、あなたに一つの「可能になった未来」を報告します。

先日、私はココナラで「税込2万円」のWebサイト制作案件を受注し、無事に納品、そしてクライアントからの「ありがとう」を頂きました。

特筆すべきは、私がメインで使ったのがゴリゴリのコードではなく、ノーコードツールの「Studio」だったという事実。そして、その全てのプロセスに、AIという最高の「相棒」がいたことです。

この記事は、単なる成功自慢ではありません。
VibeCodingを実践する私が、なぜノーコードツールを選び、AIをどう「思考の壁打ち相手」として活用し、単なる学習者から「価値を提供するプロ」へと変貌を遂げたのか。

その生々しい全思考プロセスと、あなたが今日から真似できる具体的なアクションプランを、ここにご紹介します。

なぜVibeCoding実践者が「ノーコード」を選んだのか?答えは「顧客価値の最大化」

「あれだけAIとコードを書くことを推奨していたのに、なぜノーコード?」
当然の疑問だと思います。

結論から言えば、プロの仕事とは、自分の技術をひけらかす場ではなく、クライアントの課題を解決する場だからです。

VibeCodingの本質は、特定のツールを使いこなす技術論ではありません。AIという最高の相棒と共に、目の前の課題に対する最適解を導き出し、実行する「課題解決の思想」そのものです。この考え方については、【AI時代の新常識】VibeCodingと従来型学習の決定的な違いでも詳しく解説しています。

薬剤師的思考による「提案」のアナロジー

今回のクライアントが最も重視していたのは、「専門知識がなくても、自分で簡単にお知らせを更新したい」という切実な願いでした。

これを、私の本業である薬剤師の仕事に例えてみましょう。
最新の治療薬(プログラミングによるフルスクラッチ開発)があったとしても、患者さん(クライアント)が副作用(維持管理の複雑さ)に耐えられなかったり、用法・用量(更新作業の難易度)を守れなかったりしては、全く意味がありません。

それならば、少し効果はマイルドでも、患者さんが毎日安心して服用できる漢方薬(ノーコードツールStudio)を提案する方が、よほど患者さんのQOL(Quality of Life)向上に繋がる。

この判断こそ、学習者脳からプロフェッショナル脳への転換点でした。自分の技術力を誇示するのではなく、相手の成功を心から願う。その「誠実さ」こそが、AIには真似できない、人間ならではの提供価値なのです。

【実録】ココナラ初案件獲得までの全4ステップ

では、具体的に私がどう考え、行動したのか。AIとの対話ログも交えながら、完全に再現します。

ステップ1:【準備編】AIと「売れるサービス」を設計する

戦場を「ココナラ」に定め、自分のスキルを「商品」として設計することから始めました。価格やサービス内容を自分でコントロールできる出品型サービスは、初学者にとって心理的安全性が高い選択です。

1-1. 自分の「提供価値」をAIと壁打ちして言語化する

まず、自分の強みと提供できることを、AIに投げかけ、客観的な言葉にしてもらいました。

【私からAIへのプロンプト】 
あなたは優秀なキャリアコンサルタントです。私は現役薬剤師で、プログラミングを学んでいます。この経験を活かしてWebサイト制作サービスを始めたい。私の強みを、顧客に響く言葉で言語化してください。 
- 経験: 薬剤師(患者への説明、正確な情報伝達が得意) 
- スキル: HTML/CSS, JavaScript, STUDIO 
- 提供したいこと: 初心者でも自分で更新できる、シンプルなサイト

この対話を通じ、「薬剤師として培った『丁寧なヒアリング力』と『情報の正確性』を武器に、クライアントの漠然とした想いを形にする」というサービスコンセプトが固まりました。私がなぜこのスキルを活かそうと思ったのか、その背景は【実話】薬剤師がVibeCodingで人生の再起を誓うまでで詳しく語っています。

1-2. 競合を分析し、価格とサービス内容を決定する

次に、ココナラで「Studio サイト制作」と検索し、競合サービスをAIに分析させ、自分の立ち位置を決めました。

【私からAIへのプロンプト】 
(競合サービス数件のURLと説明文を貼り付け) 
上記の競合を分析し、実績ゼロの私が最初に狙うべき価格帯と、差別化できるサービス内容のアイデアを3つ提案してください。

AIの提案は「①モニター価格で実績を積む、②薬剤師の経歴を全面に出して信頼性を訴求する、③丁寧なアフターフォローを約束する」というもの。これを採用し、「先着2名様限定・2万円モニター価格」という形で出品しました。

ステップ2:【実践編】AIと「心に響く提案」を共作する

今回は出品サービスへの直接依頼でしたが、公募案件に応募する際の思考プロセスを、あなたが明日から使えるテクニックとして紹介します。

2-1. AIに「クライアントの心の声」を分析させる

例えば、こんな公募案件があったとします。
「新規開業する心療内科クリニックのWebサイト制作。患者様が安心して来院できるような、温かみのあるデザイン希望」

この依頼文をAIに渡し、こう質問します。

【私からAIへのプロンプト】 
あなたは、クライアントの隠れたニーズを読み解くプロのコンサルタントです。以下の公募案件から、依頼者が本当に重視しているであろう「価値」を3つ、優先順位をつけて教えてください。 (ここに公募案件の文章を貼り付け)

AIはこう答えるでしょう。
「1. 信頼性: 医療情報としての正確さと権威性。 2. 安心感: デザインや言葉遣いから伝わる温かみ。 3. 利便性: 診療時間やアクセス情報の分かりやすさ」
(どのAIを使うか迷っている方は、【初心者向け】ChatGPT・Claude・Geminiの比較と使い分けの記事も参考にしてみてください。)

2-2. 自分の強みと相手の課題を「完璧に接続」する

AIの分析を元に、自分の強みと相手の課題を繋ぐ提案文を共作します。

【私からAIへのプロンプト】 
先ほどの分析を元に、私の強みを活かした最高の提案文を作成します。以下の要素を盛り込み、相手の心に響く文章を一緒に作ってください。 
* 私の強み: 現役薬剤師としての医療現場への深い理解。患者様への説明で培った、専門用語を使わない丁寧なコミュニケーション能力。 
* 相手の課題: 患者様に「信頼」と「安心」を届けたい。 
* 具体的な提供価値: 私のサービスが、いかに「シンプルさ」と「使いやすさ」を重視しているかの証明。

このプロセスを経て、ただ技術を売るのではない、課題解決のパートナーとしての提案が完成します。

ステップ3:【納品編】クライアントの期待を超える

納品時に、単にサイトを渡すだけでなく、「自分で更新できる自信」も一緒にプレゼントすることを心がけました。具体的には、クライアント専用の「取扱説明動画」をScreenFlowで撮影し、限定公開URLで提供。これも薬剤師の「服薬指導」からの発想です。薬を渡すだけでなく、飲み方までしっかり説明して初めて、治療が完結するのと同じです。

ステップ4:【評価】そして、次へ

先日、私の銀行口座に、ココナラから「15,840円」が振り込まれました。手数料を引かれた、リアルな金額です。

金額の大小ではありません。
自分のスキルが、誰かの課題を解決し、感謝され、対価を得られた。
この事実が、何物にも代えがたい自信と、次へ向かうモチベーションになりました。

まとめ:最初の1円が、あなたを「学習者」から「プロ」へ変える

あなたがこれまで学んできたスキルは、もう「お勉強」ではありません。誰かの課題を解決し、感謝される本物の「価値」です。

この記事をガイドに、まずはココナラに登録し、AIと対話しながらあなたのスキルを棚卸ししてみませんか?私と同じように、モニター価格からで構いません。もし具体的な学習の進め方に迷ったら、VibeCoding流「1日30分」学習法がきっとあなたの助けになるはずです。

その小さな一歩が、あなたの新しい物語の始まりです。
もしサービスを出品したら、ぜひSNSで「#VibeCoding」のタグを付けてください。あなたの挑戦を、心から応援しています。

よくある質問

Q1: プログラミング学習は、結局無駄だったのでしょうか?

A1: 決して無駄ではありません。むしろ、プログラミングの知識があるからこそ、ノーコードツールの限界を理解し、クライアントに「できないこと」を的確に伝えられます。この「正直さ」がプロとしての信頼に繋がります。また、コードが読めることで、より複雑なカスタマイズへの道も開けています。

Q2: 実績ゼロの初学者が、本当に仕事を取れるのでしょうか?

A2: はい、取れます。大切なのは、実績の数ではなく「あなたに頼みたい」と思わせる課題解決能力です。この記事で紹介したように、AIを活用して相手の課題を深く理解し、自分だけの強みと結びつけた「心に響く提案」ができれば、実績の壁は必ず乗り越えられます。

Q3: 薬剤師の経験は、本当に武器になりますか?

A3: 最強の武器になります。「専門用語をかみ砕いて説明する能力」「相手の状況を正確にヒアリングする能力」「情報の正確性を担保する倫理観」。これらは全て、クライアントが安心して仕事を任せられる、絶大な信頼性の源泉です。自信を持って、プロフィールに「現役薬剤師」と書きましょう。

-AI活用, Web制作
-, , , , , ,