目次
Create.xyzとは
Create.xyzをご存知でしょうか。
Webサイトを、日本語を入力するだけのノーコードで高速につくれる、夢のようなAIツールです。慣れれば思い通りのサイトを短時間でつくることができます。
Create.xyzを知ってから、時間があれば常にCreate.xyzでWebアプリ開発をしています。
それくらい楽しいです。
作成できるAIアプリの例
作成したWebアプリ(Webサイト)の一部がこちら
どちらのアプリも、形ができるまでは数分でできました。
登録
登録は簡単で、ここから簡単にできます。
基本的に無料で十分です。
驚くことに、無料枠でもGPT-4で生成できます。
20個のプロジェクトを作成できるので、作成できる数も十分です。
よりクオリティの高いアプリをつくりたければ、Proプランに登録して基盤AIをOpusに変えるのをおすすめします。
使用方法
作成画面に移動
まず、New Projectを押します。
次に、New Pageを押します。
左のNew Compornentでも作成はできますが、これはフロントエンドの開発で使用されるもので、パーツを使用して使い回すためのものです。
サイト全体で統一したパーツなどを使用したいときは、こちらのNew Compornentでパーツを作成します。
実際の開発方法
実際にどのように開発するのかというと、プロンプト(指示文)を入力して、Generateを押すだけです！
プロンプトには、どのようなことをしてほしいのかを入力します。
アドオン(add-ons)の使用
アドオンを使用してみます。
右上のadd-onsをクリックして、Google Translateを選択します。
そうすると以下のように、反映されたアドオンが表示されました。
これで、アドオンを使用する準備が整いました。
同じように、GPT-4のアドオンも追加します。
以下のように指示して、ChatGPT-4の出力結果を表示するサイトを作成します。
Google Translateを使用すると、結果を必ず翻訳するようになります。
これだけだとサイトは英語のままなので、日本語のサイトに変更します。
サイトが日本語になりました！
動作確認
ここまでくると、サイトが動作するか確認したくなりますよね。
Demoのタブに切り替えて、サイトの動作を確認します。
例えば、東京について教えてと質問してみます。
読み込み中の画面になり、出力結果を待ちます。
出ました！ChatGPTの回答を受け取ることができました。
こんな簡単にAIを使用したアプリを作成できてしまいます。
Webアプリ(Webサイト)の使用
早速アプリを使用したいですよね！
Shareを押して、
Copy linkを押します。
コピーしたリンクを検索エンジンのURL貼り付け欄に貼り付けて表示すると、
Webサイトが作成されているのを確認できました！
Webサイトは、デプロイの手間があったり、コンポーネントの配置が難しかったり、バックエンドで機能をプログラミングしたりと、専門性が必要で今までは手間がかかりました。
しかし、Create.xyzの登場で、素晴らしく早く作成できるようになりました。
公式の説明
以下に、公式の説明を翻訳したものを載せておきます。
作成のヒントになると思います。
「あなたが望むものを入力するだけで、ビルダーが入力通りに作成してくれます。アプリの外観や動作を記述してください。画像を貼り付けることもできます。
まだ始めたばかりですか？シンプルに始めて、詳細を追加していきましょう。
変更が必要ですか？仕様に詳細を追加または削除するだけです。
何か問題がありましたか？すべての履歴が保存されています。cmd-z または以前のリビジョン モーダルから以前のバージョンにジャンプできます。
Createは仕様書をコードに変換し、アプリを実行します。コードはコードタブで確認できます。
ビルドモードでは、要素をタップしてリンクや画像を変更したり、コンポーネントを作成したりできます。
デモモードでは、アプリがインタラクティブになり、テストすることができます。
公開の準備はできましたか？Publishを押して、人々が使えるアプリを完成させましょう。
友人やチームメイトの助けが必要ですか？共有]をクリックして、あなたのチームに人を招待します。リアルタイムでアプリを共同開発できます。
Createを使ったことがないですか？このデモで基本を学びましょう。
プロンプティングのヒント
説明文から、より見栄えよく、より効果的なアプリを作成するためのトップヒントをご紹介します：
- チャットではなく、スペック： あなたのアプリを、それを読んだ人が作成できるくらい詳しく説明しましょう。Createはあなたのスペックを読み、それに合ったアプリを生成します。生成されたものがあなたの望んだものでない場合は、仕様のその部分にさらに詳細を追加する。詳細が多ければ多いほど、結果は良くなる。
- シーンを設定する： 最初に要件を明確にしましょう。アプリが何についてのものなのか、重要な部分は何なのかを伝えましょう。
- パーツについては具体的に： シーンを設定した後、各主要パーツを、どのように見え、どのように振る舞うべきかを詳細に分解する。箇条書きでも構いません。
- 非常に具体的にすることもできる： 厳密なものにしたい場合は、16進数コードやフォント、スペーシングなどの詳細を指定することもできます。
- 画像を使ってみましょう： GPT-4 Visionの仕様に画像を貼り付けることができます（Macでは
ctrl-cmd-shift-4を押してスクリーンショットをクリップボードに保存できます）。画像の周りに詳細を追加すると、最良の結果が得られます。 - GPT-4Visionは初期のものなので、プロジェクト全体を1ショットで撮影するのではなく、コンポーネントや一度にたくさんのテキストをつかむために画像を使うのがベストです。
- 考えを整理する： スペックを「UI」「機能」「詳細」などのセクションに分けることが役立つことがあります。また、AIが何に注目すべきかを把握するのにも役立ちます。太字や箇条書き、改行などを使うと便利です。
- 長すぎる」は避ける→構成要素に分ける： メインのスペックが多すぎると（例えば1ページ以上）、AIは何が重要かを判断するのが難しくなります。長くなってきたら、スペックを構成要素に分割する。
- もう一度やってみよう： 出来上がったものが気に入らない場合は、「Try Again」ボタンを押すと、Createがあなたの仕様に基づいてアプリを再生成します。新しいバージョンが表示されます。
- 戻る： いつでも
cmd-zを押して前のバージョンにジャンプしたり、リビジョンモーダルから前のバージョンに目を通すことができます。
<aside> 💡より具体的なDo's and Don'ts（例付き）は、こちらをご覧ください：
</aside>
プロジェクトをコンポーネントに分割すれば、より強力なアプリを作成できます。
コンポーネントとは、ボタン、ヘッダー、カード、テーブル、セクションなどの構成要素のことです。各コンポーネントは複数のバリエーションを持つことができ、サブコンポーネントを含むことができるので、すぐに強力になります！
コンポーネントを作る利点は主に3つあります：
- コンポーネントを作成する主な利点は3つあります。一度コンポーネントを作れば、常にそのように機能する。再生成されない。
- メインのスペックが短縮され、懸念事項が分離される。これにより、AIがアプリを作成する際、より正確に行うことができる。
- すべてのプロジェクトで使うことができます。一度作れば何度でも使える。
コンポーネントを作成できる：
- スペックで
/と入力し、"コンポーネントを作成" を検索する。 - スペックから、いくつかの詳細をハイライトし、"コンポーネントに変換 "をタップします。
- ビルド」モードで、要素をタップし、「コンポーネントに変換」をタップする。
- ダッシュボードから
コンポーネントを作成したら、/と入力し、コンポーネント名を選択することでそのコンポーネントを使用することができます。
<aside> 💡より多くの例については、このガイドをお読みください：
</aside>
AIの追加
ChatGPT、GPT Vision、Stable Diffusion、OpenAI Content Moderationなどのインテグレーションがあります。
これらを使用するには、仕様の/ を押し、メニューから選択してください。次に、アプリをどのように動作させたいかを記述します。Createは、それらを使用するためのコードの書き方を考えます。具体的であればあるほど、より良い結果が得られます。
インテグレーション
AIだけでなく、AIと組み合わせることで、より強力な機能をアプリに持たせることができる便利な統合機能を多数ご用意しています。いくつか挙げてみましょう：
- ウェブスクレイピング
- グーグル検索
- 画像検索
- PDF生成
- オートコンプリート
- その他多数
仕様の/ を押すことで追加できます。デモはこちらをご覧ください。
アプリでこれらをどのように使用したいかを記述するだけで、Createがコードを作成します。
それぞれの使い方はこちらをご覧ください：
インテグレーションを作成する 🤖 インテグレーションを作成する
<aside> 💡 見たことのない統合に興味がありますか？統合のリクエストはこちらから。
</aside>
チームを招待する
チームメイトとリアルタイムでアプリを共同開発できます。プロジェクト内の「共有」ボタン、またはダッシュボードからチームメイトのEメールを追加しましょう。
同じプロジェクトにいるときは、チームメンバーごとにカーソルが表示されます。チームメイトは、ワークスペース内のすべてのプロジェクトを編集できます。
旅を楽しみ、創造性を開花させましょう！😊🚀。
チームへの質問やフィードバックは？Discordに参加するか、help@create.xyz。
」
