Draftly

Draftlyは、プロンプトやプリセットから映画的なスクロール連動サイトを作成できる3D website builderです。生成したコードは独自ドメインや各種ホスティングへ展開できます。

AIウェブデザイン AIアプリビルダー AIウェブサイトビルダーノーコード・ローコード

概要

Draftlyは、プロンプトまたはプリセットから映画的でスクロール駆動のウェブサイトを作成するための3D website builderです。ホームページでは、数分で本番用HTMLを構築する方法として位置づけられており、機能ページでは、50以上のテンプレートから開始してその場で編集できることも追加されています。

この製品は、AI生成、フレームベースのモーション再生、コードエクスポートを組み合わせています。ワークフローは、要約文やプリセットから生成ビジュアル、スクロールに連動したアニメーションシーケンス、そして独自ドメインやVercelやNetlifyなどのプラットフォームでデプロイできるダウンロード可能なサイトへと進みます。

機能

ウェブサイトプリセット

Draftlyは、SaaS、エージェンシー、ポートフォリオ、ローンチ、スタジオ、エディトリアル、ケーススタディ、高級Eコマース、製品、ストーリー、カート、マニフェスト、仕事、連絡先レイアウトを含む、50以上の本番対応テンプレートから開始できます。ユーザーはゼロからページを作り直す代わりに、クリックしてコピーやメディアを編集できます。

プロンプトベースの生成

AI生成フローは、自然言語の要件を映画的なスクロール体験へと変換し、画像、動画、レイアウトの出力を生成します。サイトでは、このシステムが10,000以上のプロフェッショナルデザインで学習されており、noir、golden hour、brutalist、pastel dream、neon dystopiaのようなスタイル指示をサポートすると説明されています。

スクロール固定モーションエンジン

Draftlyのモーションエンジンは、静止コンセプトを8秒の動画に変換し、それをスクロールに連動して再生されるフレームに分割します。サイトでは、この体験がWebGLやThree.jsではなく、ネイティブのブラウザスクロールを使用していると明記されています。

本番向けエクスポート

エクスポートワークフローは、セマンティックHTML、Tailwind CSS、JavaScriptを生成し、機能ページではコードをどこにでもデプロイできると説明されています。さらに、オプションのExpress APIスターターや、Vercel、Netlify、Cloudflare Pagesなどへのワンクリックデプロイ先にも言及されています。

ノードベースのパイプライン

ノードスタジオでは、AIモデルを接続し、text-to-image、image-to-video、アップスケーリング、背景除去、フレーム生成などの手順を連結できます。Draftlyは、最初のプロジェクトを公開した後に再利用可能なパイプラインを構築する場としてこれを説明しています。

適応型再生とレスポンシブ配信

Draftlyは、フレーム数、フレーム解像度、再生挙動を訪問者のデバイスと接続状況に合わせて調整します。サイトでは、モバイルには低解像度フレーム、デスクトップには高解像度フレームが提供され、シーケンスは読み込み時間短縮のために遅延読み込みされると説明しています。

ユースケース

テンプレートベースのマーケティングページ
SaaS、エージェンシー、ポートフォリオ、ローンチ、またはエディトリアルページ用のテンプレートから始め、公開前にテキストとメディアをクリックして編集します。これは、プロンプトをゼロから書かずに洗練された出発点を求めるチームに適しています。
プロンプト主導のコンセプト制作
ブランド付きランディングページの自然言語要件を書き、Draftlyにレイアウト、ビジュアル、モーションシーケンスを生成させます。この製品は、WebGLを使わずに映画的なホームページやヒーローセクションを作りたいユーザー向けに位置づけられています。
映画的なストーリーテリングページ
製品ストーリー、高級ブランドページ、またはモーション自体がプレゼンテーションの一部となるケーススタディ向けに、スクロール駆動の体験を作成します。モーションエンジンは、ブラウザのスクロール位置に追従するフレーム単位の再生を中心に構築されています。
セルフホストデプロイ
完成したサイトをHTML、Tailwind CSS、JavaScriptとしてエクスポートし、Vercel、Netlify、Cloudflare Pages、または自己ホストのサーバーにデプロイします。このワークフローは、コードを所有し、ホスティングを管理したいチームに適しています。
再利用可能なクリエイティブパイプライン
最初のサイトを公開した後は、ノードスタジオで画像生成、動画生成、アップスケーリング、背景除去などのモデル手順を連結します。この構成は、単発ページではなく、再現可能なクリエイティブパイプラインを想定しています。

Pros and Cons

Pros

プロンプト優先とプリセット優先の両方のワークフローをサポートしています。
所有権確保とカスタムデプロイのために、クリーンなセマンティックHTML、Tailwind CSS、JavaScriptをエクスポートできます。
WebGLやThree.jsではなく、ネイティブのブラウザスクロール再生を使用しています。
異なるデバイスや帯域条件に合わせてフレーム品質と解像度を調整します。
素早く開始できるよう、さまざまなテンプレートと編集可能なプリセットを提供しています。

Cons

ノードベースのパイプラインなど、一部の高度なワークフローには学習コストがあると説明されています。
料金ページでは、ZIPエクスポートがProプランに紐づいており、最下位プランではすべてのエクスポートオプションが含まれていないことが示されています。
ドキュメントとAPIリファレンスのページは提供されたソース内で確認できなかったため、サイト自身のエクスポート先とデプロイ先を超える統合の詳細は限定的です。

FAQ

Draftlyは何に使いますか？

Draftlyは、プロンプトやプリセットから映画的な3Dウェブサイトやスクロール連動ランディングページを作成するための website builder です。ソースでは、プロンプトまたはプリセットからAI生成、スクロール再生、そして本番用エクスポートへ進む流れが説明されています。

Draftlyには無料トライアルや有料プランはありますか？

料金ページには、デビットカードが必要な2日間の無料トライアルの後、有料プランに移行することが示されています。また、プランの階層にはAIクレジット、生成上限、上位プランでのカスタムドメインやZIPエクスポートなどの機能が含まれています。

Draftlyのサイトをエクスポートして自分でホストできますか？

機能ページでは、DraftlyがクリーンなセマンティックHTML、Tailwind CSS、JavaScriptをエクスポートできると説明されており、サイト上ではZIPエクスポートがProプランで利用可能だとされています。エクスポート先にはVercel、Netlify、Cloudflare Pages、または自分のサーバーが含まれます。

Draftlyでプロジェクトを始めるにはどうしますか？

Draftlyは、ウェブサイトのプリセットまたはプロンプトから開始できます。機能ページでは、SaaS、エージェンシー、ポートフォリオ、ローンチ、スタジオ、エディトリアル、ケーススタディ、高級Eコマース、製品、ストーリー、カート、マニフェスト、仕事、連絡先スタイルのページ向けプリセットが説明されています。

DraftlyにはWebGLや特別なブラウザ対応が必要ですか？

ソースによると、Draftlyはネイティブのブラウザスクロール再生を使用しており、WebGLやThree.jsは必要ありません。機能ページでは、フレーム品質と解像度が低帯域幅の訪問者向けに自動調整されることも示されています。

Quick Facts

カテゴリー: 3D website builder
主なワークフロー: プロンプトまたはプリセットからスクロール連動サイトへ
出力: セマンティックHTML、Tailwind CSS、JavaScript、フレームシーケンス
ホスティング: 独自ドメイン対応と、Vercel、Netlify、Cloudflare Pagesなどへのデプロイ先
ソースドメイン: draftly.space
価格: 2日間の無料トライアルの後、有料プラン