MENU

初心者歓迎!『Dora AI』でサクッとWEBサイトを構築する手順

こんにちは!AI-Bridge Labのせいやです😊

今回は、簡単なテキストを入力するだけで通常のWEBサイトや3Dギミックが入ったサイトを数十秒で生成してくれる『Dora AI』についてご紹介します。

プログラミングの知識がなくても、「こんな雰囲気のWEBサイトを作って」と指示するだけで、あっという間に理想通りのサイトが完成してしまう凄いツールです。

Dora AIの使い方や具体的な活用方法についてみていきましょう!

目次

Dora AIとは?

Dora AIは、テキストプロンプトを使って通常のWEBサイトや3D要素を含むWEBサイトを自動生成できるノーコードエディタです。
従来のWEBサイト制作で必要だったプログラミングやデザインスキルがなくても、簡単に高品質なWEBサイトを作れることができます。

主な特徴と機能

1. テキストプロンプトによる自動生成

  • 希望するWEBサイトのイメージをテキストで入力するだけ

  • AIが自動的に3D要素を含むWEBサイトを生成

  • 複雑なコーディング作業が不要

2. 直感的なノーコードエディタ

  • ドラッグ&ドロップで簡単にカスタマイズ可能

  • プログラミング知識が不要で誰でも扱える

  • リアルタイムでプレビューを確認しながら編集できる

3. 3Dオブジェクトとシーンの活用

  • 外部の3Dモデルを直接インポートすることが可能

  • 個性的なデザインを実現

  • 豊富な3Dアセットライブラリを提供

4. 高度なアニメーション機能

  • スクロールアニメーションの作成

  • 複雑なレイアウトも直感的に構築できる

  • ユーザーの興味を引く動的な表現が可能

使い方

https://www.dora.run/ai

右上の「始める」を押してアカウント登録をします
中央の「新しいプロジェクト」を押して制作画面に移ります。
赤枠の生成マークを押すとAIが自動で作成してくれますが、
自分で一から作成することもできます。
赤枠はどんなサイトを作りたいのか詳細な情報を入力する部分で、
青枠内にはサイトの雰囲気やスタイルを入力してカスタムすることができます。

WEBサイトを作る手順

今回はクリスマスケーキ販売用の簡易的なサイトを作成しました。

赤枠(内容)のプロンプトChristmas cake sales page「クリスマスケーキ販売ページ」青枠(スタイル)のプロンプトwhite, and bright red accents, the layout is clean and structured, vibrant color contrasts and minimalistic icons create a professional and contemporary feel
「白と明るい赤のアクセント、すっきりと構造化されたレイアウト、鮮やかな色のコントラストとミニマルなアイコンがプロフェッショナルで現代的な雰囲気を醸し出しています」

実行後カウントが始まり、25秒後には大枠のレイアウトを提示してくれます。
入力したプロンプトに合わせたレイアウトを2つ用意してくれるので、
自分の好みに近い方を選ぶことができます。
文字の位置や写真配置などかなり細かい部分までの修正が可能なので、
自分の商品に合わせたサイトに仕上げることができます。
右上の赤枠に「publish」を押してから青枠の「publish online」を押すと、
完成したWEBサイトを公開することができます。

🔽完成したウェブサイト

https://yhlbomcpbd.preview.dora.run/Christmas-cake-sales-page?device=Current+Web+Browser&project=1662514

🔽3Dギミックを利用したサイト例

https://3vyfncav.dora.run/

https://3d-character.dora.run/

料金プランと提供機能

料金表
新規登録してから6日間はキャンペーン中なので、
月払いだとベーシックプランを8$、プロプランを20$で契約することができます。

クレジット消費の目安

簡易的なレイアウト作成に20クレジット、サイトの総仕上げに20クレジットを使うので、AIで自動作成する場合に1サイト40クレジット消費します。

Dora AIの活用シーン

1. 自身のアピール材料になる

3Dギミックというインパクトのある演出によって、従来の動きのない表示から一歩進んだダイナミックな表現に変えることができます。
他の人と差別化できるようなWEBサイトを作れるので印象に残りやすくなり、自身をアピールする1つの武器になります。

2. 企業サイトとして使用できる

最新のAIツールやモダンなフレームワークを活用すれば、クオリティの高いサイトをスピーディーに仕上げることができます。
開発時間の短縮でコストも抑えられるので、スタートアップや個人事業主の方でも、おしゃれで使いやすいサイトを手軽に実現することができます!

3. 臨場感のある商品紹介ページ

商品のリアルな3Dモデルを自由に回転させたり、拡大したりできるから、オンラインでもお店で見ているような臨場感を演出することができます。
製品の細部までじっくり確認できるインタラクティブな機能で、ユーザーを夢中にさせながら、楽しい買い物体験を提供できちゃいます。

まとめ

今回は一瞬でクールなWEBサイトと作れるDora AIを触ってみました。

プログラミング未経験でも自分専用のWEBサイトを作ってみたい人や短時間で高品質なサイトを制作したい人におすすめのツールだなと感じました。

1つ物足りない点があるとすれば、Dora AI自体はまだ日本語対応していない(2024年12月9日時点)ので、完成したサイトを日本語表記に手直しする必要があるという部分です。

ただ、日本語対応できるようになれば、一気に注目されるAIツールになることは間違いないので我々も今後の動向に注目していこうと思います!

AI-Bridge Labについて

AI-Bridge Labは、最新のAI技術とその活用方法について情報を発信し、企業のDX実現をサポートしています。AIを活用したソリューションや人材育成にご興味があれば、お気軽にご連絡ください!

メール:ai_business@doerstokyo.jp

最後まで読んでいただき、ありがとうございました。 気に入って頂けましたら「スキ」や「フォロー」「コメント」をしていただけると幸いです😄

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

DoersTokyo株式会社(https://doerstokyo.jp/)でAIの活用事例や最新情報の調査と検証を行っています
「AI-Bridge Lab(エーアイブリッジラボ)」と申します。

【メインコンテンツ】
大規模言語モデル(LLM)や画像、音楽、動画生成などのコンテンツ制作系のAI情報

コメント

コメントする

目次