ウラチカ勉強会 / 2026年8月17日

作品が商品になった日、
置き場と材料費を見直す

LPを納品した。サイトで商売を始めた。その瞬間から、公開先の条件は変わります。今夜は、商用でも無料で使えるCloudflareへ「公開」を持ち替え、月額契約なしで新しい生成AIモデルを試せるfalへ「素材づくり」を持ち替えます。

合言葉は「商用OK・使った分だけ」
SESSIONウラチカ勉強会
DURATION60分
SPEAKER講師: 園長
CHAPTER02

最初に持ち帰ること

要点まとめ

今日の話は、この3点に集約されます。

商用公開はCloudflare

Vercel Hobbyは非商用の個人利用限定。Cloudflare Pagesの無料プランは商用利用ができ、独自ドメインと自動SSLにも対応します。開始時のカード登録も不要です。

同じアカウントに土台が揃う

Pagesだけでなく、世界330都市以上の配信網、DNS、ドメイン取得、R2なども同じCloudflareにあります。今日はPagesへ集中します。

素材はfalで必要な分だけ

画像・動画・音声・音楽・3Dのモデルを1つのアカウントで利用。月額固定費はなく、前払い残高の範囲で生成できます。

温かな制作スタジオの机から世界各地の都市へ光の経路が伸びるイラスト
作品を仕上げる手元と、その作品が世界へ届く経路。公開先を変えても、作る力はそのまま活かせます。
CHAPTER03

コミュニティの現在地

作れる人が増えた。だから条件が変わった

サイト制作が学習から商用へ進み、公開費と素材費の選び方が新しい課題になっています。

無料枠の条件を見落とす

Vercelで公開できた安心感のまま、Hobbyが非商用の個人利用限定であることを見落としやすい。

固定費が小さな案件に響く

商用向けのVercel Proは$20/席/月。案件が小さいほど、毎月の固定費を意識する必要があります。

モデルごとに契約が増える

新しい画像・動画AIを試すたびに別サービスの月額契約を増やすと、使わない月の費用も残ります。

全体地図: 作る・素材・公開を分けて選ぶDIAGRAM 01

横にスクロールして図全体を見られます

AI制作スタックの全体地図 Claude Codeで作り、falで素材を作り、Cloudflareで公開する流れ ✦ 作る工房 Claude Code サイト・LPを仕上げる ◇ 素材の市場 fal 生成した分だけ支払う ↗ 公開する土地 Cloudflare 商用OK・無料で開始 月額固定費0円で組み合わせる
図 01: 作る場所、素材を得る場所、公開する場所を分けると、目的に合うサービスを選べます。
価格と仕様の基準日

本資料は2026年8月17日時点。クラウドの料金や条件は変わるため、最後に公式ページでの確かめ方も残します。

CHAPTER04

第1部の起点

Vercelは悪くない。商売にした瞬間、条件が変わる

趣味・学習・ポートフォリオならHobbyのままで問題ありません。商用のときだけ、公開先を見直します。

受注して納品するLP、自社サービスや店舗の集客サイト、広告・アフィリエイト収益のあるサイトは、商用に含まれがちな例です。最終判断は規約と各自の状況によりますが、疑わしいときは無料枠へ載せない安全運転を選びます。

公開先の条件を同じ物差しで比べるDIAGRAM 02

表は横にスクロールできます

見る項目Vercel HobbyVercel ProCloudflare Pages Free
商用利用対象外
非商用の個人利用限定		商用向け商用利用可
月額無料$20/席/月
$20分の利用クレジット込み		無料
帯域・配信100GB/月1TB/月静的アセットのリクエスト・帯域に課金なし、上限の設定なし
独自ドメイン対応対応接続可
自動SSL対応対応対応
開始時のカード登録不要必要（有料プラン）不要
この資料で扱う公開方法これまでのVercel公開フロー直接アップロード / GitHub連携 / AI経由
図 02: 商用可否と固定費が判断の中心です。数値・条件は2026年8月17日時点の各社公式ページに基づきます。
移行するかを決める判断フローDIAGRAM 03

横にスクロールして図全体を見られます

商用サイトの公開先判断フロー お金が絡むか、Vercel Proの機能を選ぶかで公開先を決める そのサイトに 売上・受注・集客が関係する? NO Vercel Hobbyのままでよい 趣味・学習・ポートフォリオ YES Vercel Proの機能を $20/席/月で選ぶ? 基本はCloudflare Pages Vercel Pro NO YES
図 03: Vercelの使いやすさを否定せず、商用条件と必要機能で分けます。最終判断は現行規約と自分の状況で行います。
今夜、いまのサイトを消す必要はありません

Cloudflareへ同じサイトをもう1つ公開し、表示を確認してから独自ドメインの向き先を切り替えます。この順なら、公開中のサイトを保ったまま移行できます。

CHAPTER05

インターネットの配達と防御

Cloudflareとは何者か

世界中にサーバー網を持ち、サイトを訪問者の近くから届ける会社です。

CDNが変える「届け方」DIAGRAM 04

横にスクロールして図全体を見られます

1か所から届ける場合とCloudflare CDNの比較 遠い1か所から送るより、世界330都市以上にある近い拠点から届ける 1か所から遠くへ送る 元の場所 1つの拠点 訪問者 訪問者 訪問者 世界330都市以上の配信網 近い拠点Cloudflare 訪問者 訪問者 訪問者 拠点 訪問者に近い場所から届ける
図 04: 1か所から全国へ送るより、世界330都市以上にある近い拠点から届ける。それがCDNの基本イメージです。

日本の読者にも、園長がいるオーストラリアからでも、近い配信拠点が応答します。個人向け無料枠は期限つきの試用ではなく、継続して提供される料金プランとして、有料領域と並んで用意されています。

Cloudflareを3層で見るDIAGRAM 05
アプリの層
Pages
静的サイト
Workers
動く処理
R2
ファイル保管
D1
データベース
配達と防御の層
CDN
近くから配信
自動SSL
https化
DDoS防御
大量攻撃へ備える
Turnstile
ロボット判定
土台の層
Domain Registration
ドメイン取得
DNS
行き先を案内
Nameserver
案内先の委任
今日の入口
Workers & Pages
図 05: 機能名が多くても、土台・配達と防御・アプリの3層に分けると迷いにくくなります。今日の主役はPagesです。
最初は管理画面で迷って当然

機能が多いぶん、入口も多く見えます。今夜は左メニューの「Workers & Pages」だけを開ければ大丈夫です。

CHAPTER06

今日の主役

Cloudflare Pagesの無料枠

HTML/CSS/JSの静的サイトを世界配信。LP・ポートフォリオ・Claude Code製サイトの多くが対象です。

公開すると <プロジェクト名>.pages.dev のURLが無料で付き、独自ドメインも接続できます。

Pages Freeの数字を一枚で確認DIAGRAM 06
商用と静的配信商用利用OK静的アセットのリクエスト・帯域に課金なし、上限の設定なし
ビルド500回/月同時ビルド1
プレビュー無制限公開前の確認用URL
カスタムドメイン100個1プロジェクトあたり
プロジェクト100個無料枠で作成可能
ファイルサイズ25MiB1ファイルあたり
ファイル数2万1サイトあたり
図 06: 静的サイト公開に必要な無料枠。ドラッグ&ドロップによる直接アップロードはビルド回数を消費しません。
500ビルド/月はGitHub連携の更新処理

日々のLP更新を何度も試す余地があります。直接アップロードなら、この回数を使いません。

操作感はVercelと近い

GitHubへpushすると自動反映する流れも同じ感覚です。一部の共同レビュー機能は異なりますが、LP公開が目的なら必要な流れが揃います。

CHAPTER07

ハンズオン第1部

Cloudflare Pagesで公開する

3つのルートから、自分に合う入口を選びます。着地はすべて「あなたのサイトが世界に公開される」です。

迷ったらルートA。GitHubを前回覚えた人はB、Claude Codeに任せたい人はCへ進みます。

3ルート共通の準備

cloudflare.com → Sign up（無料登録）。メールアドレスとパスワードで登録し、メール認証まで進めます。クレジットカード登録は不要です。

フォルダを画面へ置くだけ

今夜の宿題に使う、いちばん短いルートです。

園長の一押し
  1. 左メニューの Workers & Pages → Create（作成）→ Pages を開きます。
  2. Upload assets（ファイルをアップロード） を選びます。
  3. 半角英数とハイフンでプロジェクト名を入力し、Create project（プロジェクト作成） を押します。
  4. index.htmlが入ったフォルダを画面へドラッグ&ドロップし、Deploy site（サイトを公開） を押します。
  5. https://<プロジェクト名>.pages.dev を開き、表示を確認します。
更新とファイル位置

更新は同じプロジェクトで Create new deployment（新しいデプロイを作成）。フォルダでもZIPでも構いません。index.htmlはフォルダ直下に置きます。

GitHub連携で更新が届く流れDIAGRAM 07

横にスクロールして図全体を見られます

GitHubからCloudflare Pagesへ自動公開される流れ 作業フォルダからGitHub、Cloudflare、世界330都市以上の配信網へ進む 作業フォルダサイトを更新push GitHub変更を受け取る Cloudflare自動で公開 世界330都市以上の配信網近くから届ける
図 07: GitHubへのpushをCloudflareが受け取り、Pagesを更新して世界の配信網へ載せます。
公開できたら、スマホでもURLを開く

パソコンとは別の回線から開き、あなたのサイトがインターネット上へ公開されたことを確かめます。

CHAPTER08

商売の顔をつなぐ

独自ドメインも無料機能で接続

<プロジェクト名>.pages.dev でも動きます。納品物や事業サイトでは、自分のドメインを接続できます。

ドメインを用意する2ルートDIAGRAM 08

横にスクロールして図全体を見られます

Cloudflareでドメインを買うルートと他社のドメインを持ち込むルート どちらもCloudflare PagesのCustom domainsへ接続する おすすめ Cloudflareで購入 Domain Registration（ドメイン登録） 原価販売・DNSも同じ画面 購入済みでもOK 他社から持ち込む 案内されたネームサーバーへ変更 所有はそのまま・DNSの案内先を委任 Pagesプロジェクト Custom domains（カスタムドメイン）
図 08: Cloudflareで買っても、他社で買ったドメインを持ち込んでも、最後はPagesのCustom domainsへつなぎます。
01

プロジェクトを開く

Custom domains（カスタムドメイン） を選びます。

02

ドメイン名を入力

Set up a custom domain（設定） から進みます。

03

画面の指示を完了

CloudflareでDNSを管理していればレコードは自動追加され、SSLも自動で設定されます。

DNSはすぐ切り替わらないことがある

反映まで時間がかかる場合があります。設定後は少し待ち、別回線でも開けるかを確認します。

山括弧の部分は自分のものに置き換えてからコピー

Claude Codeへの独自ドメイン接続相談
Cloudflare Pagesで公開したサイトに独自ドメイン<ドメイン名>をつなぎたい.ドメインは<Cloudflareで購入した / お名前.comで購入済み>.いまダッシュボードのどこを開いて何を入力するか, 1手順ずつ教えて.
CHAPTER09

今日は名前と役割だけ

Cloudflareの他の道具

次にやりたいことが出たとき、AIへ正しい名前で相談するためのカタログです。

Pagesの先にある機能カタログDIAGRAM 09

Workers

問い合わせフォームの受信やAPIなど、動く処理の置き場。

10万リクエスト/日

R2

画像・動画・PDFの保管。データ取り出しに課金がありません。

10GB

D1

会員機能や記録に使える、小さなデータベース。

総容量5GB

Workers AI

Cloudflare上でAIモデルを動かす、お試しの入口。

1万Neurons/日

Turnstile

利用者のクリック負担を抑えたCAPTCHA代替。

無料
図 09: 「フォームを付けたい」「画像が重い」などの課題が出た日に、Pages以外の名前をAIへ伝えられます。
CHAPTER10

第2部 / 素材づくり

falは新しい生成AIモデルが集まる市場

公開の話とは独立して使えます。画像・動画・音声・音楽・3Dを、1つのアカウントと1つのAPIキーで扱います。

LP用画像、商品紹介の短尺動画、サイトのヒーロー素材。必要なモデルをfalで選び、Playgroundでは画面操作、APIではClaude Codeから日本語で依頼できます。

falに並ぶ生成カテゴリDIAGRAM 10

画像

  • Seedream V4
  • FLUX Kontext Pro
  • Nano Banana
  • GPT Image 2

動画

  • Kling 2.5 Turbo Pro
  • Wan 2.5
  • Veo 3
  • Seedance

音声・音楽

  • 音声生成
  • 音楽生成
  • 効果音生成

3D

  • 3Dモデル生成
  • 立体素材づくり
  • APIからの利用
図 10: モデルごとに別サービスへ移動せず、同じfalアカウントからカテゴリを横断して選べます。

Playground

ブラウザでモデルを開き、入力欄へプロンプトを書いて生成。最初の感触を確かめる入口です。

API

Claude Codeへ頼み、生成を日常の制作フローへ組み込む入口です。

CHAPTER11

使った分だけ・入れた分まで

falの料金を、3枚の図でつかむ

月額固定費を払う方式ではなく、前払い残高から生成分が減る方式です。

月額サブスクと従量課金の違いDIAGRAM 11
月額サブスク

使わない月も定額

サービスごとに契約すると、利用量に関係なく月額費用が続きます。

fal

生成した分だけ

月額0円スタート。必要なモデルを選び、利用した分を前払い残高から支払います。

図 11: falは利用しない月の固定費を持たず、生成した分だけ残高から差し引かれます。
モデル別の価格感DIAGRAM 12
画像 / 1枚

Seedream V4

$0.03約5円
画像 / 1枚

FLUX Kontext Pro

$0.04約6円
動画 / 1秒

Wan 2.5

$0.055秒で約40円
動画 / 1秒

Kling 2.5 Turbo Pro

$0.075秒で約53円
動画 / 1秒

Veo 3

$0.45秒で約300円
図 12: 価格例はfalの2026年8月時点の情報。円換算は$1≒150円の概算で、為替により変動します。
チャージ式が実質の上限になる仕組みDIAGRAM 13

横にスクロールして図全体を見られます

falの前払い残高が減り、残高切れで生成が止まる仕組み 交通系ICカードのように先に入れた残高から生成費が減る 前払い残高自分で入れる 交通系ICカードと同じ考え方 画像・動画を生成 使った分だけ 残高から減る 残高が尽きる 生成を停止 入れた分が実質の上限
図 13: 残高が切れるとAPIリクエストは拒否されます。上限として使いたい場合は、自動補充を有効にしません。
CHAPTER12

ハンズオン第2部

falを開通して、最初の1枚を作る

まずPlaygroundで体験し、その後にAPIキーをClaude Codeへ安全に設定します。

登録から日常利用までの工程DIAGRAM 14

横にスクロールして図全体を見られます

falの登録、チャージ、Playground、APIキー、Claude Code設定の流れ fal.aiで登録して少額チャージし、画像を生成してからAPIキーを作る 01Sign upfal.aiで登録Google / GitHubも可 02Billing少額チャージここでカード登録 03Playground画像を1枚生成最初の体験 04KeysCreate key（キー作成）APIの入口 05Claude Code安全に設定小さい画像で確認 最初はPlayground → 日常使いはAPI
図 14: fal.aiのSign up（無料登録）からPlaygroundでの生成、Keys → Create key（キー作成）までの一本道です。

APIキーを発行してからコピー。キー本体はチャットではなく、求められた安全な入力先へ貼る

Claude Codeへのfal設定依頼
falを使えるようにしたい. APIキーを発行したので, 今から貼る.キーが漏れない置き方(設定ファイルに保存して, Gitに上がらないようにする)まで含めて設定して.設定できたら, テストとして小さい画像を1枚だけ生成して, 何のモデルでいくらかかったか教えて.

山括弧の部分は自分のものに置き換えてからコピー

日常の画像生成依頼
falで画像を1枚作って: <欲しい画像の説明>モデルはコスパの良いものをおまかせで選んで.生成する前に, 使うモデルと概算料金だけ先に教えて.

APIキーは「あなたのお金で生成できる鍵」

GitHubへ上げるファイルには書きません。漏れた場合はfalの管理画面でそのキーを削除し、新しいキーを作ります。削除した古いキーは使えなくなります。

生成物の商用条件はモデルごとに確認

仕事で使う素材は、モデルページのライセンス表記を確認します。分からなければAIへ「このモデルの商用利用条件を確認して」と頼みます。

CHAPTER13

前回のGit入門とも接続

月額固定費0円のAI制作スタック

道具を1つに詰め込まず、作る・素材・公開をそれぞれ得意な場所へ任せます。

持ち帰る最終地図DIAGRAM 15

横にスクロールして図全体を見られます

Claude Code、fal、Cloudflare、GitとGitHubの関係 作る工房から素材の市場を経て公開する土地へ進み、GitとGitHubが下から支える ✦ 作る工房Claude Codeサイト・LPを制作 ◇ 素材の市場fal使った分だけ ↗ 公開する土地Cloudflare商用OK・無料 前回の勉強会からつながる土台バージョン管理 = Git / GitHub
図 15: Claude Codeで作り、falで素材を用意し、Cloudflareで公開。GitとGitHubが制作履歴を支えます。
Cloudflare月額0円で静的サイトを公開
fal月額0円、生成した分だけ
独自ドメイン年額の実費のみ
趣味・学習サイトVercel Hobbyのままでよい
商用サイト・納品Cloudflare Pagesを基本候補にする
画像・動画素材falで必要な分だけ。毎日大量に作る人は月額サービスも比較する
CHAPTER14

先輩たちの転び方

よくある失敗

失敗を先に知れば、今夜の公開と生成を落ち着いて進められます。

01

商用なのにVercel Hobbyのまま

仕事の土台を条件外の状態に置くリスクです。Cloudflareへ複製し、表示確認後に切り替えます。

02

重い動画をPagesへ直置き

Pagesは1ファイル25MiBまで。重い動画はR2や動画配信サービスへ置き、サイトから参照します。

03

モデルの商用条件を見ない

fal全体で一律ではありません。仕事へ使う前に、選んだモデルのライセンス表記を確認します。

04

APIキーをGitHubへ上げる

見つけたら、ファイルから消すだけで終えません。発行元で古いキーを無効化し、新しく作ります。

05

無料条件と価格を覚えたままにする

料金と規約は変わります。大きな案件の前や定期確認のとき、公式ページを見直します。

CHAPTER15

今夜、手を動かす

宿題＋結論＋出典

手元のサイトを1つ公開し、「世界に届いた」を自分のURLで確かめます。

今夜のチェックリスト

今夜の宿題

ルートAで公開し、余裕があればfalの最初の1枚まで進めます。チェック状態はこのブラウザに保存されます。

  1. 商売にするなら、公開先はCloudflare。商用利用可・無料・独自ドメイン接続・自動SSLをひとつの流れで使えます。
  2. 素材はfalで使った分だけ。前払い残高が実質の上限になり、月額固定費なしで新しいモデルを試せます。
  3. 道具が変わっても、地図は残る。作る・素材・公開の3つと、AIへの頼み方が分かれば、次の選択肢も判断できます。

出典・参考

数値の確認日

本資料の数値はいずれも2026年8月17日時点。価格・仕様・規約は利用前に各公式ページで再確認してください。