import { ArticleImage } from "@/components/ArticleImage";

【2026年最新】Dora AIの使い方・料金完全ガイド｜テキスト1行で3Dウェブサイトを無料で作る方法

「3Dアニメーションのサイトを作りたいけど、コーディングは難しすぎる」そんな悩みを持っているクリエイターに、Dora AIは刺さるツールです。

テキストプロンプト1行を入力するだけで、スクロールアニメーション付きの本格的なランディングページが自動生成されます。しかもアカウント作成で120クレジットが無料でもらえるため、今すぐ試せます。

この記事では、Dora AIの機能・料金・使い方・競合との比較まで、実際の手順を交えて解説します。

この記事でわかること

• Dora AIでできることと、他のAIサイトビルダーとの違い
• 無料プランで何が作れるか（120クレジットの使い方）
• アカウント作成から公開までの5ステップ
• 料金プランの詳細（Basic・Pro・Business）
• Framer・Webflow・Lovableとの使い分け基準
• よくある質問への回答

30秒で結論

• 無料で始められる（120クレジット付き、カード不要）
• 最大の強みは3Dアニメーション。他のAIビルダーではここまで動かない
• 有料はBasicが約$14/月（カスタムドメイン対応）
• ポートフォリオ・キャンペーンサイトに最適。CMSや大規模ECには不向き
• Figma連携でデザインをそのままインポートできる

Dora AIとは？3Dアニメーションに特化したAIウェブサイトビルダー

Dora AI（dora.run）は、AIがテキストプロンプトからウェブサイトを丸ごと生成するノーコードツールです。2023年に公開され、2026年現在はAlpha 2.0として無料で利用できます。

他のAIサイトビルダーが「テンプレートに文章を流し込む」だけなのに対し、Doraはコピー・画像・レイアウト・カラーパレットをすべてゼロから生成します。80以上のデザインスタイルから選べるため、毎回ユニークな仕上がりになります。

3つの核心機能

① AI生成（Text to Website） 1行のプロンプトから、複数のデザイン候補を提示します。スタイルを「Custom」に切り替えれば、トーン・カラー・レイアウト方針まで細かく指定できます。サイト1回の生成コストは20クレジット。無料の120クレジットで6回試せます。

② 3Dオブジェクト＆スクロールアニメーション 3DモデルをサイトにDropするだけでインタラクティブな演出が追加できます。スクロールに連動したパララックスやフェードインも、コードなしでビジュアルエディタ上から設定できます。競合のFramerでも同様の演出は作れますが、Doraのほうが3Dに特化していて設定ステップが少ないです。

③ Figma連携プラグイン Figmaで作ったデザインを「From Figma to Dora」でそのままインポートできます。デザイナーが既存ワークフローを変えずにDoraの公開機能を使えるのは大きな強みです。既存アセットをDora上でアニメーション化してそのまま公開、という使い方が増えています。

料金プラン：無料で6サイト作れる

Doraの料金体系は「サイトプラン」と「クレジット」の2軸で構成されています。

無料プラン（Starter）

Starterでも公開まで完結します。カスタムドメインが不要でプロトタイプやポートフォリオを試したいだけなら、無料で十分です。クレジットは追加購入もできます。

Basicプラン（約$14/月 ※年払いでさらに22%OFF）

キャンペーン期間中（登録から6日間）は$8/月に割引されます。独自ドメインで公開したい場合はこのプランが最小構成です。

Proプラン（約$25/月 ※年払いでさらに22%OFF）

3Dアニメーションをフルに活用したい、クライアントワークで使いたい場合はProが現実的な選択です。

Businessプラン（約$28/月）

CMSによる動的コンテンツ管理、チームコラボレーション、カスタムコード挿入、高度なSEOツール、ホワイトラベルオプションが追加されます。エージェンシーや複数プロジェクトを管理するチーム向けのプランです。

競合との料金比較

3Dアニメーション特化で比べると、Doraが最安値かつ最も特化しています。

使い方ステップガイド：アカウント作成から公開まで

ステップ1：アカウント作成（2分）

1. dora.run にアクセス
2. 右上の「Get Started」をクリック
3. Googleアカウントまたはメールアドレスでサインアップ
4. 登録後、自動で120クレジットが付与されます

クレジットカード不要です。メールアドレスだけで即使い始められます。

ステップ2：プロンプト入力

ダッシュボードの「Prompt」欄に作りたいサイトの内容を入力します。英語プロンプトのほうが精度は高いですが、日本語でも意図は理解してくれます（ただしUIや文章は英語で生成されるため、後から日本語に書き換える必要があります）。

プロンプト例：

# シンプルな例
A modern portfolio site for a product designer.
Dark mode, minimal typography, smooth scroll animations.

# 詳細な例
A landing page for a Tokyo-based coffee brand.
Style: warm, artisan, premium. 
Color: warm beige and earth tones.
Sections: hero with 3D coffee cup, features, story, CTA.

「Style」を「Custom」に切り替えると、トーン・カラー・感情表現・フォントの方向性まで細かく指定できます。

ステップ3：デザイン候補を選択

プロンプト生成後、4つのデザインバリエーションが提示されます。サムネイルを確認し、気に入ったものをクリックして編集画面に進みます。1回の生成で20クレジットを消費するため、プロンプトはなるべく具体的に書くのがコツです。

ステップ4：ビジュアルエディタでカスタマイズ

編集画面は左側のコンポーネントパネル、中央のキャンバス、右側のプロパティパネルで構成されます。

操作のポイント：

• テキスト変更: クリックして直接編集（Basicプラン以上で全要素編集可）
• 3Dオブジェクト追加: 「Insert」から3Dモデルをドラッグ＆ドロップ
• スクロールアニメーション: 要素を選択してAnimation設定から追加
• レスポンシブ対応: 上部のデバイス切替でモバイル表示を確認
• Figmaインポート: 「From Figma to Dora」プラグインでFigmaデータを取り込み

Starterプランだと一部の要素編集がロックされます。テキストや画像の細かい変更をしたい場合はBasicへのアップグレードが必要です。

ステップ5：公開

編集完了後、右上の「Publish」をクリック。

• 無料（dora.runサブドメイン）: 即時公開、例: yoursite.dora.run
• カスタムドメイン（Basicプラン以上）: DNSレコードを設定するだけ。設定手順はヘルプセンターで詳しく説明されています

SSL証明書は自動適用されるため、HTTPS化の手間もありません。

Dora AIが向いているケース・向いていないケース

向いているケース

クリエイターのポートフォリオ 3Dオブジェクトとアニメーションを使った没入感のある作品展示ができます。写真家、プロダクトデザイナー、イラストレーターのポートフォリオとして差別化できます。

マーケティングキャンペーンの1ページLP プロモーション用ランディングページを短期間で量産したいケースに適しています。プロンプトを変えるだけで複数バリエーションを作れるのでA/Bテストにも対応できます。

スタートアップのデモサイト 投資家向けや採用向けのデモサイトとして、視覚的に強い印象を与えたい場合に最適です。Bolt.newやLovableに比べると動的なウェブアプリ開発には向きませんが、マーケティングページとしての完成度は高いです。

Figmaデザインの高速公開 デザインはFigmaで作り、実装はDoraで公開するワークフロー。デベロッパーを介さず、デザイナーが単独でサイトを公開できる環境を整えられます。

向いていないケース

大規模ECサイト WooCommerceやShopify相当のEC機能はありません。商品管理・カート・決済処理が必要なケースにはWebflowやShopifyを選ぶべきです。

ブログ・メディアサイト CMSはBusinessプランのみで対応可能ですが、WordPressやNotionベースのサイトほど柔軟ではありません。定期的なコンテンツ更新が中心なら他のCMSが適切です。

複雑なユーザー認証・会員機能 ログイン・会員登録・決済などの動的機能は、Doraの守備範囲外です。こうした機能が必要なWebアプリにはLovableやBolt.newが向いています。

Framer・Webflow・Lovableとの比較

結論として:

• 3Dで差をつけたいマーケティングページ → Dora AI
• デザイン品質重視のスタートアップサイト → Framer
• CMS・ECが必要な本格サイト → Webflow
• Webアプリのプロトタイプ → Lovable / Bolt.new

よくある質問

Q. Dora AIは日本語に対応していますか？

UIとエディタは英語のみです。ただし、日本語プロンプトを入力してもサイトの概要は理解してくれます。生成されたサイトのテキストは英語になりますが、エディタ上で日本語に書き換えることは可能です。Chromeの自動翻訳を使うと操作が少し楽になります。

Q. 無料の120クレジットはどれくらいで使い切りますか？

1回のサイト生成が20クレジットなので、6回分です。デザインを試しながら作ると比較的早く消費します。追加クレジットは購入可能で、今後のアップデートでクレジット制度が変わる可能性もあります。公式サイトで最新情報を確認してください。

Q. 生成したサイトは商用利用できますか？

Basicプラン以上であれば商用利用可能です（Doraブランディングの削除が条件）。Starterでもサイト自体は公開できますが、フッターにDora AIのロゴが表示されます。クライアントワークや収益化目的のサイトにはBasicプラン以上を推奨します。

Q. FigmaとDoraはどう連携させますか？

Figma Plugin「From Figma to Dora」をインストールして、Figma上でフレームを選択し「Export to Dora」を実行します。デザインがDoraのエディタにインポートされ、アニメーションを追加して公開できます。ただしFigmaの複雑なオートレイアウトはインポート時に崩れる場合があります。

Q. Dora AIで作ったサイトのSEO対策は？

メタタイトル・メタディスクリプションはBasicプラン以上で設定可能です。Businessプランではより高度なSEOツールが使えます。3Dアニメーションサイトはパフォーマンス面でSEOに不利になりやすいため、ページ速度の最適化も意識する必要があります。

Q. 作ったサイトを他のホスティングに移せますか？

現状、Doraはエクスポート機能が限定的です。生成したコードをそのまま他のホスティングに持ち出すことは難しく、基本的にDora上でホスティングする前提の設計です。自社サーバーに移行したい場合はFramerやWebflowのほうが柔軟です。

Q. Dora AIのAlpha 2.0とは何ですか？

2026年現在、Doraは「Alpha 2.0」というフェーズにあります。機能が積極的に追加・変更されており、料金体系も今後変わる可能性があります。早期ユーザーとして無料で全機能を試せる状態ですが、将来的に料金が変更されることも想定しておくべきです。

まとめ：こんな人にDora AIをおすすめします

Dora AIは「コーディングなしで視覚的に強いウェブサイトを作りたい」というクリエイターに向けて設計されています。

特に3Dアニメーションやスクロールエフェクトを使ったポートフォリオ・LPを作りたい場合、他のAIウェブサイトビルダーでは出せないクオリティが無料から試せます。

無料の120クレジットで試してみて、「これで行ける」と思ったらBasicプラン（~$14/月）に移行するのが現実的な使い方です。Figmaユーザーなら連携プラグインも試してみてください。

まずは公式サイト（dora.run）でアカウントを作成して、プロンプト1行から始めてみましょう。

関連記事: Lovableの使い方完全ガイド / v0（Vercel）の使い方完全ガイド / AIノーコード開発ツール比較