![見出し画像](https://assets.st-note.com/production/uploads/images/165067978/rectangle_large_type_2_04a768e276705874b1fae11d1a106bc2.png?width=1200)
初心者でも安心!『Dora AI』で簡単にWEBサイトを作る方法
こんにちは!AI-Bridge Labのせいやです😊
今回は、簡単なテキストを入力するだけで通常のWEBサイトや3Dギミックが入ったサイトを数十秒で生成してくれる『Dora AI』についてご紹介します。
プログラミングの知識がなくても、「こんな雰囲気のWEBサイトを作って」と指示するだけで、あっという間に理想通りのサイトが完成してしまう凄いツールです。
Dora AIの使い方や具体的な活用方法についてみていきましょう!
Dora AIとは?
Dora AIは、テキストプロンプトを使って通常のWEBサイトや3D要素を含むWEBサイトを自動生成できるノーコードエディタです。
従来のWEBサイト制作で必要だったプログラミングやデザインスキルがなくても、簡単に高品質なWEBサイトを作れることができます。
![](https://assets.st-note.com/img/1733724027-M9x5DTlJYbF20UgvkRSInXrV.png?width=1200)
主な特徴と機能
1. テキストプロンプトによる自動生成
希望するWEBサイトのイメージをテキストで入力するだけ
AIが自動的に3D要素を含むWEBサイトを生成
複雑なコーディング作業が不要
2. 直感的なノーコードエディタ
ドラッグ&ドロップで簡単にカスタマイズ可能
プログラミング知識が不要で誰でも扱える
リアルタイムでプレビューを確認しながら編集できる
3. 3Dオブジェクトとシーンの活用
外部の3Dモデルを直接インポートすることが可能
個性的なデザインを実現
豊富な3Dアセットライブラリを提供
4. 高度なアニメーション機能
スクロールアニメーションの作成
複雑なレイアウトも直感的に構築できる
ユーザーの興味を引く動的な表現が可能
使い方
![](https://assets.st-note.com/img/1733713479-iymhpwbWdVPI4Xkr3RsYZ9zM.png?width=1200)
![](https://assets.st-note.com/img/1733713712-SEFQbZdwjg26BsfLz1tcnkIX.png?width=1200)
![](https://assets.st-note.com/img/1733713743-fzDH5d7nKu6cQVwj1SkYeBUv.png?width=1200)
自分で一から作成することもできます。
![](https://assets.st-note.com/img/1733713746-m8O54jePTAkH1qh7Bu32WgXs.png?width=1200)
青枠内にはサイトの雰囲気やスタイルを入力してカスタムすることができます。
WEBサイトを作る手順
今回はクリスマスケーキ販売用の簡易的なサイトを作成しました。
![](https://assets.st-note.com/img/1733718192-qKPwL3fVWONGTpYX92o0bm5H.png?width=1200)
青枠(スタイル)のプロンプトwhite, and bright red accents, the layout is clean and structured, vibrant color contrasts and minimalistic icons create a professional and contemporary feel
「白と明るい赤のアクセント、すっきりと構造化されたレイアウト、鮮やかな色のコントラストとミニマルなアイコンがプロフェッショナルで現代的な雰囲気を醸し出しています」
![](https://assets.st-note.com/img/1733718246-9aihSMGEmz5rBfRuZjn1pgJT.png?width=1200)
![](https://assets.st-note.com/img/1733718320-5lk34oShKOzDbWXaQgApdFu7.png?width=1200)
自分の好みに近い方を選ぶことができます。
![](https://assets.st-note.com/img/1733720522-gYU741nKhVrAQ6oiLtaJFOeG.png?width=1200)
自分の商品に合わせたサイトに仕上げることができます。
右上の赤枠に「publish」を押してから青枠の「publish online」を押すと、
完成したWEBサイトを公開することができます。
🔽完成したウェブサイト
🔽3Dギミックを利用したサイト例
料金プランと提供機能
![](https://assets.st-note.com/img/1733719105-qZ1AQzVRcBXSpToyjLwe0m67.png?width=1200)
![](https://assets.st-note.com/img/1733720744-5GeKHWTJcpM6dQaXoqxUDNkA.png?width=1200)
月払いだとベーシックプランを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-Bridge Lab](https://assets.st-note.com/production/uploads/images/135850626/profile_004a68ac9c5f51814c0d78cc3568a3c0.png?width=600&crop=1:1,smart)