公開日:
ポートフォリオサイトを作り始めても、多くの人が「公開」の手前で止まります。
原因はコピー（載せる文章）が決まらないことと、サイトの形にして公開する作業が重いこと。
この2つを別々のAIに渡すと、サイトが1個出るまで10分前後まで縮みます。
Claudeに載せる文章を設計させ、その指示書をLovableに丸投げしてサイト化する。
これが今、海外で広がっている分業のやり方です。
ただし「10分」はサイトが1枚出るまでの話。
デザインの詰めとクレジット管理を入れると現実は15〜20分です。
この記事は開業直後のフリーランス・副業勢で、コードもHTMLも触れないけど「私を見せる1ページサイト」が今すぐ欲しい人向け（専門知識なしで読めます）。
そもそもポートフォリオはなぜ「公開の手前」で止まるのか
WordPressやWixで作り始めて、途中でやめた経験。
私はこれが一番多い挫折パターンだと見ています。
止まる理由は2つに分けられます。
1つは「何を書くか」が決まらないこと。
もう1つは「サイトの形にして世に出す」作業が地味に重いことです。
とくに後者がきつい。
WordPressだとドメイン取得、サーバー契約、FTPでアップロード、と段階が多くて、非エンジニアが途中で力尽きます。
複数のレビューがこの「多段階で止まる」を最頻の挫折点として挙げています。
ここで効くのが分業という考え方。
文章を作るAIと、サイト化するAIを分ける。
1個のAIに全部やらせると、中身の薄い量産型ページになりがちです。
これ正直あるあるです。
文章はClaude、サイト化はLovable。
役割をはっきり割ると、それぞれの得意が活きます。
Claude＋Lovableの分業って具体的にどう役割を分けるのか
まず前提を1つ。
ここで言う「Claude」は、claude.aiの普通のチャット機能のことです。
コピーの設計や構成を考えさせる用途で使います。
UIデザインを生成する別機能「Claude Design」とは別物なので、そこは混同しないでください。
分業のかたちはシンプルです。
Claudeに「ポートフォリオに載せる文章と構成」を作らせる。
出てきた指示書をLovableに渡して、サイトの形に起こす。
役割分担はこうなります。
| 工程 | 担当AI | やること |
|---|---|---|
| コピー設計 | Claude（claude.ai） | キャッチコピー、自己紹介文、実績の見せ方、ページ構成を文章で組む |
| サイト化・公開 | Lovable | その文章を受け取って、見た目を作り、公開URLまで出す |
なぜこの組み合わせが今いいのか。
Claudeは文章の構成力と日本語の自然さで頭ひとつ強いと感じる人が多い。
一方のLovableは、テキストで指示するとフロントからバックまで丸ごと組んで、公開ボタン1つで世に出します。
この分業を実測した事例があります。
Claude+Lovableのワークフローを記録した海外の実践者の報告では、リサーチ2〜3分、プロンプト作成2〜3分、サイト生成8〜10分で、合計15〜20分とされています。
週単位でかかっていた計画・コピー作成・開発の調整が、数分で実現される。
（出典: aiforcrecollective.com）
個人的には、この「コピーを外で練ってからサイト化に渡す」流れが分業の肝だと見ています。
後で触れますが、これはクレジット（Lovableの利用枠）の節約にも直結します。
なぜ今この海外ワークフローが効くと言えるのか
理由は3つあります。1つ目は、Lovable側のハードルが本当に低いこと。
GizModo Japanは、Lovableについて「やることは日本語でお願いするだけ」「非エンジニアにもできるバイブコーディングの筆頭」と書いています（出典: GizModo Japan）。
話しかける感覚で作れる、というのが現在地です。
2つ目は、生成スピード。
nxcode.ioの実測レビューでは、シンプルなランディングページなら15分で完成、初回ログインから90分以内に動くプロトタイプが手に入る、とされています。
シンプルなランディングページ生成は15分で完成。
Excellent — this is where Lovable shines.（出典: nxcode.io）
3つ目は、コピーをClaudeに任せられること。
Lovableは詳しいプロンプトを入れないと、どこかで見たような量産型の出力になりやすい。
gaincafe.comも「詳細プロンプトが必須でないとジェネリック出力の危険がある」と指摘しています（出典: gaincafe.com）。
ここをClaudeで埋める。
文章設計をClaudeに寄せると、Lovable単独より中身が締まります。
私はこの一手で差がつくと思っています。
フリーランス向けの使われ方としては、コンサルやライターの作品ページ、転職用の実績ページ、講座運営の告知ページなど、文章が主役のポートフォリオに向きます。
Lovable公式も、コンサル・フリーランスのポートフォリオ用途を1ジャンルとして案内しています（出典: Lovable公式）。
Claude＋Lovableで実際にポートフォリオを作る手順
ここからは、海外ワークフローの記録とLovable公式ガイドをもとに、再現できる形に並べ直します。
文章が主役の1ページサイトを出すまでの流れです。
STEP1：Claudeに載せる文章を設計させる
claude.aiを開いて、職種・実績・ターゲット・希望トーンを伝え、「ポートフォリオの構成案と各セクションの文章」を作らせます。たとえば「フリーのWebライター。実績は記事30本。問い合わせにつなげたい。落ち着いた信頼感のあるトーンで、ヒーロー・実績・料金・問い合わせの4セクション分の文章を作って」のように具体的に渡します。
ここでざっくりした指示しか出さないと、出てくる文章もぼやけます。固有の数字と相手像を入れるのがコツです。
STEP2：Lovableのアカウントを作る
lovable.devにアクセスして、メールまたはGoogleアカウントで登録します。無料のFreeプランから始められます。
Freeは1日5クレジットなので、登録した日にいきなり大量の修正を試すとすぐ枯れます。最初は1〜2回の生成で様子を見るのが安全です。
STEP3：Claudeの文章をプロンプトにしてLovableに渡す
STEP1で作った構成と文章を、Lovableの最初の指示欄にまとめて貼り付けます。「この内容でポートフォリオサイトを1ページで作って。配色は◯◯、フォントは読みやすいもので」と添えます。
バラバラに何度も送ると、そのたびにクレジットを食います。最初の1回にまとめて入れるのが鉄則です。
STEP4：プレビューを見て修正を1メッセージにまとめる
生成されたサイトがプレビューに出ます。直したい箇所が複数あるなら、「ヘッダーの色を濃紺に、実績を3カラムに、フッターの会社名を削除」のように1メッセージにまとめて送ります。
ボタン1個のスタイル変更は0.5クレジット、フッター削除は0.9クレジット。1個ずつ送ると無駄に減ります。
STEP5：Publishボタンで公開する
納得したらPublish（公開）ボタンを1クリック。.lovable.appのサブドメインで公開URLが発行されます。
独自ドメイン（私の好きなアドレス）をつけたい場合はProプラン以上が必要です。まず公開して動線を作る、という意味ではFreeのサブドメインでも十分です。
この流れで、サイトが1枚出るまでが10分前後。
ただしデザインの詰めとコンテンツの差し替えを入れると、現実は15〜20分です。
手順自体はLovable公式の公開フロー（出典: docs.lovable.dev）に沿っています。
Lovableの料金とクレジットはどうなっているのか
ここが無料で詰む最頻ポイントなので、数字を正確に出します。
クレジットは生成・修正のたびに消費される利用枠です。
| プラン | 月額 | クレジット | 主な違い |
|---|---|---|---|
| Free | $0 | 1日5・月30まで | 公開は.lovable.appのみ。日次の繰越なし |
| Pro | $25 | 月100＋1日5（最大150） | 独自ドメイン接続、バッジ削除、直接コード編集、月間クレジット繰越 |
| Business | $50 | Pro相当＋拡張 | 社内向け限定公開、SSO、チーム機能 |
Freeの1日5クレジットは、シンプルな修正なら最大10回、複雑な生成なら2〜3回で1日分が消えます（出典: docs.lovable.dev）。
ランディングページ構築が2.0、認証機能追加が1.2、という具体的な目安も公式に出ています。
この消費の速さは批判の的でもあります。
superblocks.comは「クレジットの枯渇はLovableに対する2026年の最大の不満」と書き、Freeの5クレジットは約3回のやり取りで尽きると指摘しています（出典: superblocks.com）。
これ正直きつい。
だからこそClaudeでコピーを先に固める分業が効きます。
文章をLovable内で何度も練り直すとクレジットを食うので、外で完成させてから持ち込む。
あるデベロッパーの報告では、全変更を1プロンプトにまとめて週500クレジットを200に減らせた、とされています（出典: banani.co）。
個人的な見立てだと、ポートフォリオ1本ならFree月30クレジットで完結する可能性はあります。
ただ修正を重ねると1〜2日で日次上限に当たり、翌日まで待つ展開になりやすい。
腰を据えて運用するならPro $25が現実的なラインです。
作ったサイトのコードは私のものになるのか、商用で使えるのか
ここを気にする人は多いと思います。
クライアント案件で使えるのか、サービスを解約したらサイトが消えるのか。
公式FAQは、コードの所有権について「You as the creator do!（作った人のものです）」と明言しています。
GitHubに書き出せば、自由に持ち出して使えると書かれています（出典: docs.lovable.dev FAQ）。
コードをGitHubに転送すれば、エクスポートして好きなように使える。
（出典: Lovable公式FAQ）
サブスクを解約してもコードの所有権は残ります。
いわゆる「囲い込み」がない設計です。
書き出される中身は、React・Tailwind CSS・ルーティング・フォルダ構成一式です。
ただし利用規約の表現はもう少し慎重で、付与されるのは「non-exclusive, non-transferable, revocable license（非独占・譲渡不可・取り消し可能なライセンス）」で、用途は「personal or internal business purposes（個人または社内のビジネス目的）」とされています（出典: Lovable利用規約）。
クライアント案件は社内ビジネス利用として認められますが、Lovableというプラットフォーム自体を再販する形はNGです。
ここは曖昧にせず、案件で使うなら必ず公式利用規約を私の目で確認してください。
私はこの一手間を省くと後で揉めると思っています。
ポートフォリオ用途で気をつけたい点はどこか
ベタ褒めで終わらせる気はないので、引っかかる点も出します。3つあります。
1つ目はSEO（検索で見つけてもらいやすさ）。
Lovableは作りの都合で検索エンジンに弱いと複数のレビューが指摘してきました。
2026年5月13日以降の新規プロジェクトはSSR対応で改善していますが、検索順位はコンテンツ品質やバックリンクなどLovable側で制御できない要因に依存する、と公式も明記しています（出典: docs.lovable.dev）。
検索流入を狙うなら別途の対策が要ります。
2つ目は複雑化への弱さ。
nxcode.ioは「いくつか以上のプロンプトを書くと、システムが崩れ始めることがある」と書いています。
1ページのポートフォリオなら問題になりにくいですが、多機能なサイトに育てるなら別の土台への移行も視野に、という温度感です。
3つ目はセキュリティと個人情報。
Lovableは2026年2〜4月に、公開プロジェクトのソースコードやデータに第三者がアクセスできる状態が48日間続いたインシデントを起こし、後に謝罪しています（出典: Lovable公式）。
ポートフォリオは個人情報を載せるページです。
住所や電話番号など、漏れて困る情報は載せない判断を私は薦めます。
ここは慎重でいい。
普通の自作とClaude＋Lovable方式は何が違うのか
| 比較項目 | 普通の自作（WordPress等） | Claude＋Lovable方式 |
|---|---|---|
| 文章の中身 | 私が全部書く（手が止まりやすい） | Claudeが構成と文章を設計 |
| 公開までの手数 | ドメイン→サーバー→FTPと多段階 | Publishボタン1クリック |
| サイトが1枚出るまで | 数日かかることも | 10分前後（詰めて15〜20分） |
| 初期費用 | サーバー・ドメイン代 | Freeから開始可 |
| つまずく所 | 公開作業で力尽きる | クレジット管理 |
表にすると、分業方式の強みは「文章で止まらない」「公開で止まらない」の2点に集約されます。
逆に新しい悩みはクレジット管理。
悩みの種類が入れ替わる感覚です。
私の結論はこうです。
検索流入で勝負する本格メディアにはまだ薦めません。
でも「とにかく見せられる1ページを今すぐ公開したい」非エンジニアには、この分業はかなり噛み合います。
まず触っておいて損はない領域。
FAQ
本当に10分でポートフォリオが作れますか
「10分」はサイトが1枚出るまでの数字です。
元になった海外SNS投稿があって、実測レビューでは15分（nxcode.io）、リサーチからデザイン込みで15〜20分（海外実践者の実測）が現実的なラインです。
デザインの詰めとコンテンツ差し替えを入れると、もう少し延びると考えてください。
無料のFreeプランだけでポートフォリオは完成しますか
1ページのポートフォリオなら、Free月30クレジットで完結する可能性はあります。
ただ1日5クレジットなので、修正を重ねると1〜2日で日次上限に当たり、翌日まで待つ形になりやすいです。
腰を据えるならPro（$25/月）が無難です。
Lovableで作ったサイトはクライアントの案件に使えますか
公式FAQはコードの所有権をユーザーに認めており、社内・個人のビジネス目的での利用は可能とされています。
ただし利用規約はLovableプラットフォーム自体の再販を禁じています。
クライアント案件で使う前に、必ず公式利用規約（lovable.dev/terms）を私の目で確認してください。
独自ドメインはつけられますか
独自ドメインの接続はProプラン以上の機能です。
DNSのA+TXTレコード設定が必要で、反映に最大48時間かかります。
Freeプランでは.lovable.appのサブドメインでの公開のみになります。
Claude Designでも同じことができますか
この記事の「Claude」はclaude.aiの通常チャットで、コピー設計に使う役割です。
Claude Designは視覚ファーストの静的サイトやクリエイティブな見せ方に強い別機能です。
フルスタックで公開まで届けるサイト化はLovable側の担当、と役割を分けて考えるのが整理しやすいです。
このページに出てきた言葉
- Lovable
- テキストで指示するとWebサイトやアプリをAIが丸ごと作るサービス。公開ボタン1つで世に出せる
- クレジット
- Lovableで生成・修正をするたびに消費される利用枠。Freeは1日5・月30まで
- コピー
- サイトに載せる文章。キャッチコピーや自己紹介、実績説明など
- プロンプト
- AIに出す指示文。質が出力にそのまま響く
- ノーコード
- コードを書かずにWebサイトやアプリを作れる仕組み
- ランディングページ
- 1ページで要点を伝える縦長の1枚もののWebページ
- サブドメイン
- 既存ドメインの前に名前をつけた住所。無料版は「名前.lovable.app」の形
- 独自ドメイン
- 「example.com」のような、自前で取得した好きなアドレス
- エクスポート
- 作ったコードやデータを外に書き出して持ち出すこと
- SEO
- 検索エンジンで見つけてもらいやすくする工夫の総称
参考リンク
- Lovable公式サイト
- Lovable料金ページ
- Lovableドキュメント（プランとクレジット）
- Lovable公式FAQ
- Lovable利用規約
- LovableドキュメントSEO
- Claude+Lovableワークフロー事例（海外実践者）
- nxcode.io Lovableレビュー2026
- superblocks.com Lovableレビュー
- banani.co クレジット節約ガイド
- gaincafe.com ポートフォリオ作成ガイド
- Lovable 2026年4月インシデント公式対応
- GizModo Japan Lovable紹介記事
※この記事の内容は執筆時点のものです。AIは進化が速い分野のため、最新の仕様は公式サイトでご確認ください。