ブログ【Create.xyz】ウェブサイト生成AIの使い方を解説！
今回はWebサイトを自動で作ってくれる「Create.xyz」を紹介していきたいと思います。
1. Create.xyzとは
Create.xyzとは、自動でWebサイトを制作してくれるAIサービスです。
日本語か英語でプロンプトを入力するとその通りにWebサイトを作ってくれます。
Createが実際に作ったウェブサイトのサンプルを紹介します。
画像のサンプルは実際に公式サイトで紹介されており、誰でも似たようなウェブサイトを作ることができます。
① カスタマーダッシュボード
（引用元：カスタマーダッシュボードのプロンプト）
② 料金プランの紹介
（引用元：料金プランのプロンプト）
③ AI画像生成を使ったクレジットカードのデザイン生成
（引用元：クレジットカードデザインのプロンプト）
④ サービスのウェイトリスト
（引用元：ウェイトリストのプロンプト）
⑤会員登録ページ
（引用元：会員登録ページのプロンプト）
⑥オシャレなAI画像の生成ページ
（引用元：オシャレなAI画像生成ページのプロンプト）
⑦Webページ要約サイト
（引用元：Webページ要約サイトのプロンプト）
⑧ジャンケンゲーム
（引用元：ジャンケンゲームのプロンプト）
公式サイトではもっと多くのサンプルが紹介されていたので、気になる方はCreate.xyzでご確認ください！
2. Create.xyzの料金体系
Createの料金体系とプラン別でできることを下記にまとめました。
| 個人 | プロ | ビジネス | エンタープライズ | |
|---|---|---|---|---|
| 料金 | 無料 | 月19ドル | 月99ドル | 料金要相談（企業向けプラン） |
| プロジェクト数 | 20個まで | 無制限 | 無制限 | 無制限 |
| カスタムAPI統合 | ✕ | 1個まで | 10個まで | 無制限 |
| ドメイン提供 | ✕ | ✕ | 3つまで | 無制限 |
| GPT-4 Vision | ○ | ○ | ○ | ○ |
| 画像生成（Stable Diffusion） | ○ | ○ | ○ | ○ |
| 作業共有 | ○ | ○ | ○ | ○ |
| コードのコピー＆ペースト | ○ | ○ | ○ | ○ |
| プロジェクトの公開 | ○ | ○ | ○ | ○ |
| GPT-4の利用 | ○ | ○ | ○ | ○ |
| “Create”の透かし解除 | ✕ | ○ | ○ | ○ |
| Claude Opus（最高クオリティ）の利用 | ✕ | ○ | ○ | ○ |
| Claude Haiku （利便性が高い）の利用 | ✕ | ○ | ○ | ○ |
| Groq （最速ウェブページ生成）の利用 | ✕ | ○ | ○ | ○ |
| Gemini Pro の利用 | ✕ | ○ | ○ | ○ |
| APIリミット解除 | ✕ | ✕ | ○ | ○ |
| サイト分析 | ✕ | ✕ | ○ | ○ |
| Slack用サポート | ✕ | ✕ | ✕ | ○ |
| Github統合 | ✕ | ✕ | ✕ | ○ |
| SAML シングル・サイン・オン | ✕ | ✕ | ✕ | ○ |
（表：Create.xyzの情報をまとめてAI相談.com編集部が作成）
上の表を見ると、Create.xyzは無料プランがかなり優秀なことが分かると思います。
フリープランで、ChatGPTをWebサイトに組み込むことができますし、画像生成にはStable Diffusionが使えたりします。
お試しでウェブサイトを作る分には無料なので、有料にする必要があるかどうかは試してから判断すると良いかもしれません。
私は無料のプランで問題なくWebサイトが作れました。
ただ、サイトの流入をチェックしたり、ユーザー行動の分析をするには月99ドルを払う必要があります。
本格的な運用を考える場合、無料や月19ドルのプランでは限界があるといえるでしょう。
3. Create.xyzの使い方
Create.xyzの使い方の大まかな流れを解説していきます！
- Createの公式サイトにアクセス、アカウントを作成
- 右側の入力欄に、作ってほしいサイトの説明（プロンプト）をする
- CreateのAIがウェブを自動で作り上げる
- 色や配置などデザインの編集
- サイトとして公開！
以上の流れを詳細に説明していきます。
① まず下記のCreateの公式サイトにアクセスしてください。
URLをクリックすると下のような画面が出てきます。
（引用元：Create公式サイト）
② 真ん中にある青いボタン「Start Building for free」を押すと、メールアドレスを登録できるページが表れるので登録しましょう。
（引用元：Create公式サイト）
③ そしてメールアドレスに送られてきたURLをクリックすると、Createを使い始めることができます。下のような画面になっていれば、Webサイトを作る準備が整っています。
（引用元：Create公式サイト）
④ 右側のバーから英語や日本語で「Twitterみたいなウェブサイトを作って」や「アップル公式サイト風なWebページを作って」というと作りだしてくれます。
4. 実際にWebサイトを作ってみた！
百聞は一見にしかず、実際にCreateでWebページを作成していきましょう。
最初につくったWebサイトがこちらです！「Bagel検索」です。
（画像：Create.xyzの利用画面を撮影）
自分の好きな食べ物がベーグルだったのと、Googleのデザイン性って凄いなと思い作るに至りました。
実際に下のURLからアクセスもでき検索もできます。ただ検索はGoogle検索に飛ばされます（汗）
ちなみにこのサイトを作ったプロンプトはこちらです。
＜プロンプト＞
Googleみたいな検索サイトを作って。
ロゴはBagelでGoogleをイメージして作って。文字は横文字で。
検索バーからGoogleに繋いで検索できるようにして。
たったこれだけです。こんな短いプロンプトで簡単に模倣サイトが作れるような恐ろしい時代がやってきました。
他にも小倉トーストを販売する架空のWebサイトを作ってもらいました。Createで遊んでいたときにたまたま「しるこサンド」を食べていてこんなページを作りたくなりました。
（画像：Create.xyzの利用画面を撮影）
画像が小倉ではなく、卵や生クリーム、アイスクリームになっているのが若干目につきますね。画像生成はあまり精度が高くないのかもしれません。
しかし、写真の部分はユーザーが編集できるのでそこまで問題にはならないでしょう。
どちらかというと日本語と英語が混じってしまったのがツギハギ感があります。こちらも人間の手作業で直していく必要がありそうです。
この小倉トーストページのプロンプトは下記の通りです。
＜プロンプト＞
小倉トーストを売るWebページをアップル公式サイト風に作って
全然アップルの公式サイトっぽくはありませんが、シンプルでデザインは良いなと思いました。
5. 公式おすすめのプロンプトのコツ
Createの公式サイトがプロンプトのコツを紹介しているので、そちらを日本語に訳しました。
- プロンプトを人間が読んでもWebサイトを作れるぐらいのクオリティにする。
- Webサイトの目的を明らかにする。
- Webページがどんな風に動くかプロンプトに組み込む。
- 長過ぎる文章はNG。短く箇条書きにするのが有効。
- 説明しにくいものは参考となるページをスクリーンショットでアップロードしてもOK（GPT-4 Visionが認識します）
上記のポイントをもとに公式サイトのプロンプトを見てみたいと思います。
＜プロンプト＞
・モダンな価格ページを作ってください。
・タイトルを追加してください。
・背景を白くしてください。
・"Simple, transparent pricing for everyone "の上にテキストタイトルを追加してください。
・各プランのタイトルの下に画像を追加してください。
・アウトラインを\#2849F4、テキストを\#2849F4にして、透明なボタンにしてください。
・「営業に連絡」ボタンを\#2849F4、白文字に。
・すべての緑のチェックマークを\#2849F4にしてください。
・赤の「x」をライトグレーのアウトラインにし、背景を透明にして「x」をライトグレーにする
・赤の「x」をライトグレーにする
・背景を白にする
・テキストをすべてインターにする
・テキストをインターにする
・価格を中央に配置
・料金の数字（$19/月、$59/月、$149/月）を中央揃えにしてください。それ以外はセンタリングしない！
・タイトル（スタータープラン、プロプラン、ビジネスプラン）を中央に寄せ、小さくする。
・説明テキスト（個人向けなど）を価格（$19/月、$59/月、$149/月）の下に移動する
・このタイトルを太字にする
・画像をカットして全体を表示する
・画像をカットしています。
・あなたは画像を切り取っています。
・すべての画像が同じサイズになるように拡大縮小する。
・レスポンシブにする
・箇条書きを左寄せにする
実際にできたWebサイトが下の画像の通りです。プロンプト次第でクオリティの高いものができますね！
（引用元：Create公式サイト）
6. 【応用編】Xインフルエンサーが見つけた使い方
ジェイくん@データサイエンティストのキャリア論氏がXにポストしていたCreate.xyzの使い方【応用編】も紹介します。
① Galileo AIでWebページのドラフトを作る。（Galileo AIはWebデザインを高速で作るAIです！）
② ドラフトのスクリーンショットを撮って、Create.xyzに読み込ませる。
③ TailwindCSSでコードを修正。
④ ウェブサイトを公開！
（引用元：ジェイくん氏Xアカウント）
この応用編でカギになるのは、Galileo AIを使うことにありそうです！Galileo AIが実際に作ったWebデザインは下のようなものです。
（引用元：Galileo AI公式サイト）
↑不動産販売のホームページ
（引用元：Galileo AI公式サイト）
↑化粧品の広告
Create.xyzは自分で0から想像してプロンプトを考えなければなりません。しかし、Galileo AIを使うことによってそのプロセスも省くことができそうです。
自分の作りたい理想をある程度、Galileo AIで形にしてそれをCreate.xyzに作ってもらうとより良いものができそうですね！
また、AI相談.comでは無料で使えるAIチャットも公開しているので、調べ事がしたい時にサクッとお使いいただけます。どうぞお試しください。
参考文献 ・Create.xyz ・カスタマーダッシュボードのプロンプト ・料金プランのプロンプト ・クレジットカードデザインのプロンプト ・ウェイトリストのプロンプト ・会員登録ページのプロンプト ・オシャレなAI画像生成ページのプロンプト ・Webページ要約サイトのプロンプト ・ジャンケンゲームのプロンプト ・Helpful Tips for Using Create🌟 ・ジェイくん@データサイエンティストのキャリア論 ・Tailwindcss
