AI自動生成!テキストからWEBサイトを一瞬で作成する

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. AI自動生成!テキストからWEBサイトを一瞬で作成する

AI自動生成!テキストからWEBサイトを一瞬で作成する

AI自動生成!テキストからWEBサイトを一瞬で作成する

こんにちは。
今回は使ってみたかったWEBサイトをテキスト1文からでも作成できる「Create」というAIツールを使っていきたいと思います。

今回作成したサイトはこちら


AI画像生成サイト

Createとは

Createは、自然言語を使って、高度なAIを搭載したアプリやツールが作成できる生成AI搭載のコード不要ノーコードツールです。
Create

プログラミングの知識がなくても、自然言語で指示を出すだけで、Webサイトやアプリを作成することができます。
20プロジェクトまで無料で作成できるようです。

プロンプトを作成する

まずはWEBアプリケーション作成するプロンプト(指示文章)を作成していきたいと思います。
今回はChatGPTを使用して、プロンプトを作ってもらおうと思います。

まずはChatGPTに以下の内容で指示を出してみます。
今回は、AI画像生成サイトを作成します。

Createというサービスを利用してWEBサイトを作成します。
Createは、自然言語のテキストのみでWEBサイトを自動生成してくれるサービスです。
今回WEBサイトを作成するにあたってCreateで使用するプロンプトを考えてください。プロンプトは日本語で大丈夫です。

以下必須な要件です。

[概要]
サイト名: Magic.ai
目的: 完全無料で自然言語のテキストからAI画像生成できるサービス
ページ数: 1ページ

[イメージ]
チャットのような形式
モダンなデザイン
魔法を感じるデザイン

ChatGPTからの返答は以下の内容でした。

以下は、Createサービスで使用するためのプロンプトです。

### Magic.ai WEBサイト作成プロンプト

#### [概要]
サイト名: Magic.ai
目的: 完全無料で自然言語のテキストからAI画像生成できるサービス
ページ数: 1ページ

#### [デザイン・機能]
– チャットのような形式のインターフェース
– モダンで洗練されたデザイン
– 魔法を感じるビジュアルと雰囲気

#### [ページ構成]
– **メインページ**:
– ヘッダー:
– サイトロゴ「Magic.ai」
– ナビゲーションリンク(例: ホーム, 使い方, お問い合わせ)
– チャットインターフェース:
– 入力フィールドと送信ボタン
– ユーザーがテキストを入力してAI画像生成をリクエスト
– 生成された画像の表示エリア:
– 生成された画像が表示されるエリア
– 画像をダウンロードするためのボタン
– フッター:
– 著作権表示
– 利用規約やプライバシーポリシーへのリンク

#### [スタイル・ビジュアル]
– カラースキーム: ミッドナイトブルー、パープル、シルバー
– フォント: モダンでシンプルなフォント(例: Helvetica, Arial)
– 背景: 星空や魔法のエフェクトを取り入れたデザイン
– アイコンとボタン: シンプルで直感的に操作できるデザイン
– アニメーション: テキスト入力時や画像生成時に魔法を感じるアニメーション効果

このプロンプトをCreateサービスに入力することで、希望するWEBサイトが自動生成されることを期待できます。

これでCreateで使用するプロンプトの完成です。

WEBアプリケーションを作成する

結構苦戦しました。
使い方が慣れるまでは苦戦するかもしれません。

ただ単にプロンプトを打つだけでは、画像生成APIのリクエストは走りませんでした。
失敗した生成
単純なWEBサイトだと問題ないと思います。

色々試しましたが、最終的には以下の内容で自動生成しました。

Functionを追加する


ヘッダー左上のアイコンをクリックし、メニューから「New Function」をクリックします。
Functionは機能を自動生成してくれます。

次に、新しく作成されたFunctionを選択したまま、promptに「チャットの内容を送信後、内容を画像生成AIにリクエストし、返ってきた画像ファイルを返すような処理」という内容を入力します。

さらに、promptの右上にある「Add-ons」から「Stable Diffusion V3」を選択し、プロンプトに挿入します。


最後に「Generate」で機能を自動生成します。

ページを追加する

先ほどのメニューから「New page」をクリックします。

次に先程、ChatGPTで作成したプロンプトをpromptに入力します。

さらに、「Add-ons」から「functions」タブをクリックし、先程作成したFunctionをクリックし、プロンプトに挿入します。
また、「Stable Diffusion V3」も選択し、プロンプトに挿入します。

最後に「Generate」で機能を自動生成します。

公開する


ヘッダー右上の「Publish」から公開します。
ドメインの名前を入力し、
公開したいページと機能をオンにし公開すると完了です。

完成したのがこちら
AI画像生成サイト

実際に使ってみて

今回、CreateというAIツールを実際に使ってみましたが、やはりツールの使い方の理解は必要そうです。もっと使っていれば効率の良い方法もあるかもしれません。
ただし、慣れるまでに時間はかからないだろうというほどシンプルなので、ぜひ使ってみてください。

プロンプトは今回先にChatGPTで作りましたが、使っていくうちに、生成を繰り返して指示を付け加えていくのが良さそうだと感じました。
イメージ的には、AIとサイトを作り上げていくようなイメージです。

Beta版ですが、Databaseの機能もあり気になるので使ってみたいです。
これもプロンプトで生成できるなら、すごいなと思います。
会員登録系のWEBアプリケーションも作成できるかもしれません。

また、ソースコードも見れるので使い方によっては、かなり便利かもしれません。

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら
Webデザイナー、Webプログラマ募集中!