ぽちっでサイト作成。Create.xyzとは？

先日、こんなポストを見つけた。
もともとAIを活用したサイト制作については興味を強く持っていたが、動画を見る限りではかなりよく出来ているように見える。
今回はこのCreate.xyzを試してみよう。

Claude Opus、レベチすぎる
ㅤ
サイト生成ツール「https://t.co/rxi8oe0Bmm」で、
Opus・GPT-4・Haikuそれぞれに全く同じプロンプトで会社HPを作らせた結果...
ㅤ
1️⃣Opus：レベチ。ガチでこれポン出しはやばい。ヘッダーからフッターまで完備しており、テキストの内容・アイコンまで細かく調整済。 pic.twitter.com/J2v9Orj4Vg

— すぐる | ChatGPTガチ勢 𝕏 (@SuguruKun_ai) March 30, 2024

まずはCreate.xyzのサイトへ。
このサイトちょっとユニークなのは、メールアドレスを入力したらすぐ使えてしまうってところ（chatGPTに登録済みだから？）。

アカウントを作成すると、以下の画面が表示されます。

使い方は非常にシンプルで、
・右にプロンプトを入力
・「Generate」を押す
・数秒で左にプレビューを表示

このビルドされたものは、PC/SP画角のプレビューもできるしコード自体もコピーすることができるようになっています。

今回は、アイデア化したいと思っていた「彼女ノート」を元にアプリ用のサイトを作る体で作成していきます。

といってもプロンプトにどんな呪文詠唱したらいいんや？ってのは最初は分かりづらいもの。サンプルプロンプトを参考にすることもできますが、Xにこんなのがあったので今回はこちらを使ってみます。

サイト生成AI「https://t.co/gwwPKhkzBA」用プロンプトGPTsを作ってみた
ㅤ
・Create公式のTipsを網羅
・ちょっとしたプロンプトから要件を詳細に定義
・英語出力がおすすめ！
ㅤ
実際使ってみると全然サイトの質も違うのでぜひ使ってみてください✨https://t.co/xs6Uj5at3k pic.twitter.com/qj5pg6mCYh

— 大佐/Taisa (@wasedaAI_taisa) March 30, 2024

このGPTsを使用することで、指示をサイト様に構造化したプロンプトを作り出してくれます。

さあ、わくわくどきどきしながら、ジェネレートボタンを押してみよう。

すると、出来上がったのはこれ！

・・・。

えーと、

なんか思ってたのと、違う。

HTML自体は近しい作りになっているように見えるけど、画像とかも含めてもっとサイトらしい形になるのかと思っていたら、エヴァンゲリオンの中身みたいな”HTML素体”が出来上がってきやがった。。ムズいな。

もっとうまく作るには

アップグレードする
このサービス、使用するAIモデルによってクオリティが大きく変わってくるようです。使用するために課金しなければなりませんが本質を確認するには課金しないとわからなそうです。

プロンプトを見直す
サイト内に、ページ別の参考プロンプトが用意されているのでそれをベースに作成すると、似たようなページを作りやすいようです。
また画像を挿入することもできるので、画像をいれると一気にそれっぽいサイトに近くなってきます。

サンプルプロンプトを使用したもの。まあまぁ近しい感じ

まとめ

課金モデルを使用していないので出来上がりはいまいちな結果になりましたが、AIでサイトのようなものを作れるという体験を今回しました。

クオリティの高いものを作るにはまだまだ調整が必要な気もしますが、プロンプトが広まっていくと素人でもフォーマット化されたLPやサイトは簡単に作れるようになってしまうのかもしれませんね。

ちょっとここらへんは、引き続き注視していきたいと思います。