機能概要 · 001 / 16

公開に必要なあらゆるツール 映画のような 3Dサイトを。

単一のプロンプトから、5分以内に本番環境対応のコードへ。WebGLの知識は不要。デザインの学位は不要。テンプレートライブラリを漁る必要もありません。

無料で始める →料金を見る料金を見る
001
031
061
091
121
151
181
211
3つの柱

1つのワークフロー。3つのレイヤーの クリエイティブコントロール。

— 01

Website Presets

50+ production-ready sites — customize in place, publish to Draftly or your domain. No long prompt required.

Browse presets →
— 02

AI Generation

Trained on 10,000+ professional designs. Outputs images, videos, and layouts from natural-language prompts.

Learn more →
— 03

Scroll Engine

Frame-by-frame playback locked to viewport scroll. No WebGL, no Three.js, no performance tax.

Learn more →
— 04

Production Export

Clean semantic HTML, Tailwind CSS, and JavaScript. Deploy anywhere. Own your code.

Learn more →
ウェブサイトプリセット

白紙はスキップ キャンバス。

洗練されたプリセットを選び、クリックでテキストやメディアを編集。無料のDraftlyサブドメインに公開するか、独自のDNSを接続できます。3Dビルダーと同じ公開フローです。

  • 01Production-ready UISaaS, agency, portfolio, and launch templates with motion and layout already dialed in.
  • 02Click-to-editChange text and images directly in the preview — no rebuilding from scratch.
  • 03Publish & custom domainLaunch on *.draftly.space or point your domain with DNS A-records.
  • 04ZIP exportDownload the full project on Pro plans — host anywhere you like.
// presets gallery50+
preset · 01
preset · 02
preset · 03
preset · 04
click-to-edit · publish → yoursite.draftly.space
custom domain · ZIP on Pro
AI生成

入力する。 公開する。

希望するウェブサイト（ムード、業界、雰囲気）を記述するだけで、Draftlyがあなたの言葉だけで完全な映画のようなスクロール体験を構築します。

  • 01Cinematic image generationHero compositions tuned for web-first framing — not square crops, not stock-photo lighting.
  • 02Atmosphere controlsDirect the style: noir, golden hour, brutalist, pastel dream, neon dystopia. Plain English.
  • 03Trained on 10,000+ designsTypography, hierarchy, and spatial rhythm baked in. No "AI website" aesthetic.
  • 04Regenerate any layerDon't like the hero? Swap it. Don't like the palette? Shift it. Keep the rest intact.
// prompt → outputLIVE
A luxury watchmaker landing page. Slow cinematic motion of brass gears in golden light. Editorial typography, muted palette, generous whitespace.
↓ generating ↓
モーションエンジン

画像。動画。 フレーム。

4段階のパイプラインが、静止したコンセプトを8秒間の映画のようなモーションに変え、そのモーションをブラウザが即座に再生できる数百のフレームに分割します。

  • 01Image-to-videoState-of-the-art video synthesis. Subtle camera moves, particle drift, environmental motion.
  • 02Frame extractionHundreds of optimized frames at the resolution your visitors actually need.
  • 03No WebGL. No Three.js.Native browser scroll. Works on any device, any browser, any year.
  • 04Adaptive qualityFrame count and resolution adjust automatically for low-bandwidth visitors.
// frame sequence240 / 240
001
060
120
180
240
01 ▸ generate cinematic still
02 ▸ animate to 8-second video
03 ▸ extract 240 frames
04 ▸ encode scroll-locked playback
ビジュアルスタジオ

プロンプトだけでは 物足りないときに。

最初のサイトを公開したら、ノードスタジオで2つ目のサイトを異なる方法で構築できます。あらゆるAIモデル、あらゆるパイプライン、あらゆる出力を接続できます。

  • 01Node-based pipelinesChain text-to-image, image-to-video, upscale, background removal, and more.
  • 02Reusable workflowsSave a pipeline once. Run it on a hundred briefs. Consistent output across a brand.
  • 03Honest about the curveNodes take a few hours to learn. We've put a starter pack in the docs.
// node pipelineRUNNING
Input
Prompt
Generate
Image v3
Process
Upscale 4x
Animate
Video Gen
Output
Frames
スクロール再生

ホイールで操作する フィルム。

すべてのスクロールイベントが1フレームを進めます。すべてのフレームはプリレンダリングされています。その結果、映画のような感覚で、静的サイトのように動作し、5年前のスマートフォンでも機能します。

  • 01Frame interpolationButtery 60fps playback even on mid-range hardware.
  • 02Parallax depth layersForeground, midground, background — each scrolls at its own speed.
  • 03Mobile-first physicsTouch-scroll behavior tuned per device. No janky momentum.
  • 04Sub-2s load timeAggressive frame compression. Lazy-loaded sequences.
// scroll playback
↓ scroll
cinematic
depth
↑ release
本番環境向けエクスポート

あなたのサイト。 あなたのコード。

ZIPをダウンロード。Vercel、Netlify、または独自のサーバーにデプロイ。Draftlyはホスティングせず、ロックインせず、訪問者ごとに課金することもありません。コードはあなたのものです。

  • 01Semantic HTML5Accessible markup. Screen-reader friendly. SEO-ready out of the box.
  • 02Tailwind CSSThe framework your team already uses. Customize anything in your editor.
  • 03Express API starterOptional backend included. Push to GitHub. Deploy in one click.
  • 04One-click deploy targetsPre-configured for Vercel, Netlify, Cloudflare Pages.
// export
index.html · 4.2KB
<!-- Draftly export · scroll-locked sequence -->
<section class="hero" data-frames="240">
  <div class="scroll-stage">
    <canvas id="frame-canvas" />
    <div class="overlay">
      <h1>Built with Draftly</h1>
    </div>
  </div>
</section>

// 240 frames · 1.8MB total · LCP 1.2s
レスポンシブ

1つのビルド。 すべての画面に。

Tailwindのブレイクポイント、流動的なタイポグラフィ、適応型フレーム解像度により、4Kモニターでも360pxのスマートフォンでも、意図通りのサイト表示を実現します。

  • 01Fluid typographyHeadlines scale with viewport, not abrupt breakpoint jumps.
  • 02Adaptive frame qualityMobile gets 480p frames. Desktop gets 1080p. Automatic.
  • 03Touch-first interactionsScroll, tap, swipe — all behave like a native app.
// responsive

Desktop · 1440px

Tablet · 768px

Mobile · 375px

パイプライン

5つのステップ。 5分で。

i

ステップ 01

Presets

ii

ステップ 02

Prompt

iii

ステップ 03

Image

iv

ステップ 04

Video

v

ステップ 05

Frames

vi

ステップ 06

Ship

開始プロンプト

白紙のページは不要です。 意図を持って開始。

SaaS Landing

Hero · Features · Pricing

Studio Portfolio

Editorial · Case studies

Luxury E-com

Product · Story · Cart

Agency Site

Manifesto · Work · Contact

比較

Draftlyの立ち位置 スタックでの位置付け。

Draftly		FramerWebflowSpline
Website presets gallery● 50+ templates———
AI prompt-to-site● Full pipelinePartial——
3D motion (no WebGL)● Native scroll——WebGL required
Code export● HTML/CSS/JSCode componentsYes (paid)React only
Hosting required● OptionalBundledBundledBundled
Bring your own AI model● Yes———
Entry price● $0 / $25$15$18$0 / $9
導入事例

創業者、 スタジオ、個人事業主が利用。

“We pitched a $40k brand site using a Draftly export. The client thought we'd hired a Three.js team. We hadn't.

Mara VelascoFounder · Northbound Studio

“Our hero section used to take a designer two weeks. Now it takes a prompt and an espresso.

Daniel ParkHead of Growth · Lumen Labs

“The exported code is cleaner than what most agencies hand off. We host it ourselves. No platform lock.

Priya IyerEngineering Lead · Fold & Co.
技術仕様

詳細（退屈ですが） 正直に記載。

Browser Support

Chrome, Safari, Firefox, Edge — last two versions. Tested on iOS 14+ and Android 9+.

Export Format

ZIP archive containing HTML, CSS (Tailwind), JS, frame sequences (WebP or AVIF).

Typical File Size

2–6 MB per site, depending on frame count and resolution. Aggressive compression.

Self-Host Requirements

Optional. 8GB VRAM minimum for local AI inference. Supports Gemini and Fal.ai keys.

API Access

Pro plan and above. REST endpoints for programmatic generation and pipeline triggers.

Performance

Target LCP under 1.5s. Lazy frame loading. Adaptive quality per connection.

質問

質問、 回答。

Does Draftly host my site?

+
No. You export a ZIP and deploy anywhere — Vercel, Netlify, Cloudflare Pages, your own server. No platform lock-in.

Who owns the exported code?

+
You do. The HTML, CSS, JS, and frame assets are yours to modify, resell, white-label, or open-source as you see fit.

Do I need to know WebGL or Three.js?

+
No. The scroll engine runs on native browser scroll plus frame playback. No 3D library is required at runtime.

Can I bring my own AI keys?

+
Yes. Connect Gemini, Fal.ai, or self-hosted open-source models. You control the inference budget.

Do I need a paid plan to start?

+
Yes. Choose Basic ($25/mo) or higher on the pricing page to unlock 3D Builder, Studio credits, and monthly generation limits.

5,000ドルの支払いは不要です ヒーローセクションに。

必要なものを記述するだけで、Draftlyが数分でスクロール駆動の3Dサイトを構築します。無料で開始でき、すぐに公開可能です。

無料で作成開始 →料金プランを見る