見出し画像

【プロンプトあり】 Create.xyzで本格的なWebサイト制作をしてみよう

本記事は、実践的にCreate.xyzを用いてサイトを作成する方法を具体例とともに紹介していきます!

最近追加されたCommand R+やDALLE-3などのAPI Integrationの内容の解説もしていきます。

デモでは自社HPを作り、問い合わせフォームの内容を専用データベースに保存する方法をご紹介します。


Create.xyzで出来ること

Createを使うと、自然言語でサイトの外見や機能を記述するだけで、AIがコーディングを自動で行ってくれます。

プロンプトテクニックとして、デザインやレイアウトを具体的に指定することも重要です。

基本的な作り方については、以下の記事で解説しているので、ぜひこちらもご覧ください!⬇️

と言っても、一から十まで仕様書を書くことは初心者の場合大変なので、今回の記事にはCreateで作成できるサイトの設計書を書いてくれるGPTsとそのプロンプトを記載してあります。

実践:使用可能なAPI

Createでは、API Integrationを利用することで、AIや音声認識、検索、データ可視化など幅広い機能をノーコードで実装できます。

今回は、特に実用性の高いAPIを主にご紹介していきます!

AI機能

Anthropic Opus

高品質な Opusモデルを利用した文章生成機能をサイトに組み込むことが出来ます。

Command R+

最新のCommand R+モデルを利用した文章生成機能をサイトに組み込むことが出来ます。

GPT-4 Vision

画像の分析・解釈ができるGPT-4 Visionモデルを利用できる機能をサイトに組み込むことができます。

DALLE-3

DALLE-3による画像生成を利用できる機能をサイトに組み込むことができます。

Stable Diffusion

なんと、SDもちゃんと使えるんです。

ただし、この画像を見て分かるように、現在は画像生成に問題があり生成される画像に不具合があるようです。

DALLEについてはまともに機能するので、そちらを使用するのがおすすめです!

※ちなみに、SDがDALLEに勝る点として、「縦横比を自由に変更できる」ことが挙げられます!

正方形の場合は512✖︎512を設定
縦長にしたい場合も、自由に数値が設定可能

以下のプロンプトを使用すれば、このように縦横比の設定もできるサイトが作成できます!

縦横比を設定できる形で、/Stable Diffusionを使用できるサイトを作成

OpenAI Moderation

様々な指標から、入力テキストを適切なものかを検証してくれます。

大好き!だと一切反応しません
やや不快感のあるワードを使用すると、ハラスメントの計測がされました

他のAI機能

他に、Google GeminiやClaude3の全シリーズ・出力が非常に高速なGroqなど、様々なAI機能が統合可能なので、ぜひ試してみてください!

ウェブスクレイピング

Web Scraper

指定したURLのウェブページの情報を取得できる機能をサイトに組み込むことができます。

翻訳

Google Translate

多言語の同時翻訳できる機能をサイトに組み込むことができます。

検索

Google Search

Google検索できる機能をサイトに組み込むことができます。

Google Image Search

画像検索機能を追加することができます!

SEOキーワードリサーチ

使用するキーワードを打ち込むだけで、そのSEO対策が可能になります。

画像ではChatGPTと入力しており、それに適したKWが表示されているのが分かります。記事執筆の最初のテーマ決めなどに重宝しそうですね!

ちなみに、アメリカ・日本・カナダ・イギリスなどから国を選んでサーチすることも可能です👀

Googleビジネスデータ

ここから先は

23,165字 / 38画像

AGIラボ

¥2,980 / 月
このメンバーシップの詳細