機能概要 · 001 / 16

公開に必要なすべてのツール 映画のような 3Dサイトを。

魅力的なプリセットから始めてその場で編集するか、1つのプロンプトから没入型3Dスクロールサイトを構築できます。WebGLの知識は不要。デザインの学位も不要。無限の白紙キャンバスプロンプトも不要です。

無料で構築を開始 →プリセットを見る料金を見る
001
031
061
091
121
151
181
211
4つの柱

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

— 01

ウェブサイトプリセット

50以上のプロダクション対応サイト — その場でカスタマイズし、Draftlyまたは独自のドメインに公開。長いプロンプトは不要です。

プリセットを見る →
— 02

AI生成

10,000以上のプロフェッショナルデザインで学習済み。自然言語プロンプトから画像、動画、レイアウトを出力します。

詳細を見る →
— 03

スクロールエンジン

ビューポートスクロールに連動したフレームごとの再生。WebGL不要、Three.js不要、パフォーマンスの負荷なし。

詳細を見る →
— 04

プロダクションエクスポート

クリーンなセマンティックHTML、Tailwind CSS、JavaScript。どこにでもデプロイ可能。コードはあなたのもの。

詳細を見る →
ウェブサイトプリセット

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

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

  • 01プロダクション対応UIモーションとレイアウトが既に調整されたSaaS、エージェンシー、ポートフォリオ、ローンチテンプレート。
  • 02クリックで編集プレビューでテキストや画像を直接変更。ゼロからの再構築は不要です。
  • 03公開とカスタムドメイン*.draftly.spaceで公開するか、DNS Aレコードでドメインを設定できます。
  • 04ZIPエクスポートProプランでプロジェクト全体をダウンロードし、どこでもホストできます。
// presets gallery50+
preset · 01
preset · 02
preset · 03
preset · 04
click-to-edit · publish → yoursite.draftly.space
custom domain · ZIP on Pro
AI生成

入力する。 公開する。

欲しいウェブサイトのムード、業界、雰囲気を説明するだけで、Draftlyがあなたの言葉から完全なシネマティックなスクロール体験を構築します。

  • 01シネマティック画像生成ウェブファーストのフレーミングに最適化されたヒーロー構成。正方形のトリミングやストック写真のようなライティングではありません。
  • 02雰囲気コントロールノワール、ゴールデンアワー、ブルータリズム、パステルドリーム、ネオンディストピアなど、平易な英語でスタイルを指定できます。
  • 0310,000以上のデザインで学習済みタイポグラフィ、階層、空間のリズムが組み込まれています。「AIウェブサイト」のような見た目にはなりません。
  • 04任意のレイヤーを再生成ヒーローが気に入らなければ交換。パレットが気に入らなければ変更。他はそのままにできます。
// 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秒間のシネマティックモーションに変換され、ブラウザが即座に再生できる数百のフレームにスライスされます。

  • 01画像から動画へ最先端の動画合成。微妙なカメラの動き、パーティクルの漂流、環境の動きを表現します。
  • 02フレーム抽出訪問者が実際に必要とする解像度で、最適化された数百のフレームを提供します。
  • 03WebGL不要。Three.js不要。ネイティブブラウザスクロール。あらゆるデバイス、ブラウザ、年代で動作します。
  • 04適応品質低帯域幅の訪問者向けに、フレーム数と解像度が自動的に調整されます。
// 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モデル、パイプライン、出力を接続可能です。

  • 01ノードベースのパイプラインテキストから画像、画像から動画、アップスケール、背景除去などを連結。
  • 02再利用可能なワークフローパイプラインを一度保存すれば、多数の案件で実行可能。ブランド全体で一貫した出力を実現します。
  • 03学習曲線について正直にノードの学習には数時間かかります。ドキュメントにスターターパックをご用意しました。
// node pipelineRUNNING
Input
Prompt
Generate
Image v3
Process
Upscale 4x
Animate
Video Gen
Output
Frames
スクロール再生

フィルム、制御は ホイールで。

スクロールイベントごとにフレームが進み、すべてプリレンダリングされます。フィルムのような感覚で、静的サイトのパフォーマンス、5年前のスマホでも動作します。

  • 01フレーム補間ミドルレンジのハードウェアでも、なめらかな60fps再生。
  • 02パララックス深度レイヤー前景、中景、背景がそれぞれ異なる速度でスクロール。
  • 03モバイルファーストの物理挙動デバイスごとに調整されたタッチスクロール挙動。不自然な慣性なし。
  • 042秒未満の読み込み時間高度なフレーム圧縮。遅延読み込みシーケンス。
// scroll playback
↓ scroll
cinematic
depth
↑ release
本番環境へのエクスポート

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

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

  • 01セマンティックHTML5アクセシブルなマークアップ。スクリーンリーダー対応。すぐにSEO対応。
  • 02Tailwind CSSチームがすでに使用しているフレームワーク。エディターで自由にカスタマイズ。
  • 03Express APIスターターオプションのバックエンドを同梱。GitHubにプッシュし、ワンクリックでデプロイ。
  • 04ワンクリックデプロイターゲット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のスマートフォンまで、あらゆる画面で意図した通りに表示されます。

  • 01流動的なタイポグラフィ見出しはビューポートに合わせて拡大縮小し、突然のブレークポイントジャンプはありません。
  • 02適応型フレーム品質モバイルには480p、デスクトップには1080pのフレームを自動で提供。
  • 03タッチファーストのインタラクションスクロール、タップ、スワイプなど、すべてネイティブアプリのように動作します。
// responsive

Desktop · 1440px

Tablet · 768px

Mobile · 375px

パイプライン

2つのパス。 1つのプラットフォーム。

i

ステップ 01

プリセット

ii

ステップ 02

プロンプト

iii

ステップ 03

画像

iv

ステップ 04

動画

v

ステップ 05

フレーム

vi

ステップ 06

公開

スタータープロンプト

白紙のページは不要です。 意図を持って始めましょう。

SaaSランディング

ヒーロー · 機能 · 価格

スタジオポートフォリオ

エディトリアル · 事例

高級Eコマース

製品 · ストーリー · カート

エージェンシーサイト

マニフェスト · 実績 · お問い合わせ

比較

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
導入事例

創業者、 スタジオ、ソロイストが公開。

“Draftlyのエクスポートを使って4万ドルのブランドサイトを提案しました。クライアントはThree.jsチームを雇ったと思ったようですが、実際は違いました。

Mara Velasco創業者 · Northbound Studio

“以前はヒーローセクションの作成にデザイナーが2週間かかっていましたが、今ではプロンプトとエスプレッソ一杯で済みます。

Daniel Parkグロース責任者 · Lumen Labs

“エクスポートされたコードは、ほとんどのエージェンシーが提供するものよりもクリーンです。自社でホストしており、プラットフォームロックもありません。

Priya Iyerエンジニアリングリード · Fold & Co.
技術仕様

退屈な詳細を、 正直に。

ブラウザサポート

Chrome、Safari、Firefox、Edgeの最新2バージョン。iOS 14以降およびAndroid 9以降でテスト済み。

エクスポート形式

HTML、CSS (Tailwind)、JS、フレームシーケンス (WebPまたはAVIF) を含むZIPアーカイブ。

標準ファイルサイズ

サイトあたり2〜6MB（フレーム数と解像度による）。強力な圧縮。

セルフホスト要件

オプション。ローカルAI推論には最低8GBのVRAM。GeminiおよびFal.aiキーをサポート。

APIアクセス

Proプラン以上。プログラムによる生成とパイプライントリガーのためのRESTエンドポイント。

パフォーマンス

LCP目標1.5秒未満。遅延フレーム読み込み。接続ごとの適応品質。

質問

よくある質問、 回答。

Draftlyは私のサイトをホストしますか？

+
いいえ。ZIPをエクスポートして、Vercel、Netlify、Cloudflare Pages、またはご自身のサーバーなど、どこにでもデプロイできます。プラットフォームのロックインはありません。

エクスポートされたコードの所有者は？

+
お客様です。HTML、CSS、JS、フレームアセットは、お客様が自由に修正、再販、ホワイトラベル化、オープンソース化できます。

WebGLやThree.jsの知識は必要ですか？

+
いいえ。スクロールエンジンはネイティブブラウザのスクロールとフレーム再生で動作します。実行時に3Dライブラリは不要です。

独自のAIキーを使用できますか？

+
はい。Gemini、Fal.ai、またはセルフホストのオープンソースモデルを接続できます。推論予算はお客様が管理します。

開始するには有料プランが必要ですか？

+
はい。料金ページでベーシック（月額25ドル）以上のプランを選択すると、3Dビルダー、スタジオクレジット、月間生成制限が解除されます。

5,000ドルを支払うのはやめましょう ヒーローセクションに。

欲しいものを記述するだけで、Draftlyが数分でスクロール駆動の3Dサイトを構築します。購読して公開しましょう。

料金を見る →料金を見る