![見出し画像](https://assets.st-note.com/production/uploads/images/140256213/rectangle_large_type_2_cf18f263b19c8c8ac747d348b86d17ea.png?width=800)
【プロンプトあり】 Create.xyzで本格的なWebサイト制作をしてみよう
本記事は、実践的にCreate.xyzを用いてサイトを作成する方法を具体例とともに紹介していきます!
最近追加されたCommand R+やDALLE-3などのAPI Integrationの内容の解説もしていきます。
デモでは自社HPを作り、問い合わせフォームの内容を専用データベースに保存する方法をご紹介します。
Create.xyzで出来ること
![](https://assets.st-note.com/img/1714108871644-tP9lNpOOzT.png?width=800)
Createを使うと、自然言語でサイトの外見や機能を記述するだけで、AIがコーディングを自動で行ってくれます。
プロンプトテクニックとして、デザインやレイアウトを具体的に指定することも重要です。
基本的な作り方については、以下の記事で解説しているので、ぜひこちらもご覧ください!⬇️
と言っても、一から十まで仕様書を書くことは初心者の場合大変なので、今回の記事にはCreateで作成できるサイトの設計書を書いてくれるGPTsとそのプロンプトを記載してあります。
実践:使用可能なAPI
Createでは、API Integrationを利用することで、AIや音声認識、検索、データ可視化など幅広い機能をノーコードで実装できます。
今回は、特に実用性の高いAPIを主にご紹介していきます!
AI機能
Anthropic Opus
高品質な Opusモデルを利用した文章生成機能をサイトに組み込むことが出来ます。
![](https://assets.st-note.com/img/1714107229512-0YW9IVAB8q.png?width=800)
Command R+
最新のCommand R+モデルを利用した文章生成機能をサイトに組み込むことが出来ます。
![](https://assets.st-note.com/img/1714107230238-xSS6k7tn2H.png?width=800)
GPT-4 Vision
画像の分析・解釈ができるGPT-4 Visionモデルを利用できる機能をサイトに組み込むことができます。
![](https://assets.st-note.com/img/1714107235711-LvWAMhGeY8.png?width=800)
DALLE-3
DALLE-3による画像生成を利用できる機能をサイトに組み込むことができます。
![](https://assets.st-note.com/img/1714107232156-yu4NT1kc6m.png?width=800)
Stable Diffusion
![](https://assets.st-note.com/img/1714110731554-JglS8U6Qo3.png?width=800)
なんと、SDもちゃんと使えるんです。
ただし、この画像を見て分かるように、現在は画像生成に問題があり生成される画像に不具合があるようです。
DALLEについてはまともに機能するので、そちらを使用するのがおすすめです!
※ちなみに、SDがDALLEに勝る点として、「縦横比を自由に変更できる」ことが挙げられます!
![](https://assets.st-note.com/img/1714110857477-rfL7PfSCMU.png?width=800)
![](https://assets.st-note.com/img/1714110984540-qubQpQeMpS.png?width=800)
以下のプロンプトを使用すれば、このように縦横比の設定もできるサイトが作成できます!
縦横比を設定できる形で、/Stable Diffusionを使用できるサイトを作成
OpenAI Moderation
様々な指標から、入力テキストを適切なものかを検証してくれます。
![](https://assets.st-note.com/img/1714112259313-YTUh4jezFF.png?width=800)
![](https://assets.st-note.com/img/1714112351674-Vv6aDnf6Rx.png?width=800)
他のAI機能
他に、Google GeminiやClaude3の全シリーズ・出力が非常に高速なGroqなど、様々なAI機能が統合可能なので、ぜひ試してみてください!
![](https://assets.st-note.com/img/1714112413942-aH3NW0Scha.png)
ウェブスクレイピング
Web Scraper
指定したURLのウェブページの情報を取得できる機能をサイトに組み込むことができます。
![](https://assets.st-note.com/img/1714107232963-bT0I6KJ1iu.png?width=800)
翻訳
Google Translate
多言語の同時翻訳できる機能をサイトに組み込むことができます。
![](https://assets.st-note.com/img/1714107228616-VJEh5BqIRF.png?width=800)
検索
Google Search
Google検索できる機能をサイトに組み込むことができます。
![](https://assets.st-note.com/img/1714107231448-Vls3rVsZz6.png?width=800)
Google Image Search
画像検索機能を追加することができます!
![](https://assets.st-note.com/img/1714107234737-3hfC0fKSm5.png?width=800)
SEOキーワードリサーチ
使用するキーワードを打ち込むだけで、そのSEO対策が可能になります。
画像ではChatGPTと入力しており、それに適したKWが表示されているのが分かります。記事執筆の最初のテーマ決めなどに重宝しそうですね!
ちなみに、アメリカ・日本・カナダ・イギリスなどから国を選んでサーチすることも可能です👀
![](https://assets.st-note.com/img/1714112584503-bCD6fnGmsb.png?width=800)