はじめに
最近は様々なAIサービスが出て来ておりますが、注目を集めているのがCreate(クリエイト)です。
Createはプロンプトを入力するだけで、アプリのモックアップやプロトタイプを自動生成できるノーコードツールです。
今回は、この画期的なCreateの魅力や使い方について詳しく解説していきます。
Createの特徴
Createは、ユーザーが入力したプロンプトからアプリを一発生成できる点です。
例えば「アパレルのECサイトのトップページ」と入力すれば、すぐに適切なモックアップを出力してくれます。
このように雑なプロンプトだけでもいい感じのデザインを作ってくれますが、
Createの更にすごいところは、デザインのモックアップだけでなく、ChatGPTやGoogleMapなどの外部サービスと繋ぎ込み、アプリケーションとして動作する部分までも実装してしまう点です。
また、生成されたデザインを、パーツ毎に一部だけデザインを書き換えることも可能です。
ChatGPTの例
GoogleMapの例
画像だけだと伝わらないですが、実際にテキストを入力し、テキストの内容を踏まえて動作します。
この辺は後ほど解説します。
Createの利用開始まで
Createのページにアクセスして利用開始するまでを解説します。
- 以下サイトにアクセス
https://www.create.xyz/
真ん中の「Start building for free」ボタンをクリック
- メールアドレスを入力して「Sign Up」
これでもう使えるようになります。
よくあるメールないのリンクから認証とかがないので若干の不安要素ではあります。
認証はないですが、create.xyzからメールは届きます。
個人名ぽいアドレスでくるので人によってはブロックされるかもしれません。。
Dhruv Amin dhruvamin@create.xyz
Createのログイン
ログインはトップページの右上の「Log in」からできます。
- 以下サイトにアクセス
https://www.create.xyz/
右上の「Log in」をクリック
- ログインページで新規登録時に入力したメールアドレスを入力し、「Send link」ボタンをクリック
- メールが送られてくるので、メール内のリンクをクリックしログイン完了
アプリの自動生成から編集まで
Createではまずシンプルなプロンプトを入力して、基本的なアプリを生成させます。
そこから要件に合わせて詳細を追加していき、徐々にアプリを発展させていく流れです。
生成方法に加えて、生成ページでできる操作等についても解説していきます。
これは新規登録直後に表示されるページです。
このページで操作するのが基本的な利用方法です。
生成
右にプロンプトを入力する欄があり、右下の「Generate」ボタンでプロンプトの内容を元に真ん中のプレビュー欄にデザインが生成されていきます。
標準ではGPT-4が使われます。しかも無料です。
有料プランに入ることで、AnthropicのOpus、HaikuやGemini、Groqなど他のLLMを用いて生成することもできます。
プロンプトは、テキストだけでなくキャプチャした画像を貼り付けてページを生成することも可能です。
プロンプトの欄に画像をドラッグすることでプロンプトに添付することができますので、
「添付した画像のイメージで生成して」などとプロンプトを入れて「Generate」することでイメージに寄せて生成してくれます。
生成されたデザインがいまいちな場合は再度「Generate」ボタンで再生成できます。
前の方が良かった場合は、ショートカットキー（Cmd＋Z ※1）で前に戻ることもできます。
※1・・・Macでのショートカット、Windowsの場合、Ctrl+Zで戻れます。
また、「Generate」ボタンの左にある「リトライ」ボタンでも再生成が可能です。
「Generate」と「リトライ」の違いについて解説します。
「Generate」は、一言で言えば追加修正です。
これまで生成したページの内容を踏まえて生成してくれるので、修正したい箇所だけをプロンプトに指示します。「ボタンの色を変えたい」や「テキストの位置を右寄せにしたい」など
一方「リトライ」は、作り直しです。
入力されているプロンプトを元に一から作り直したい場合に使うと良いです。
なので、基本的にはプロンプトを直し直し「Generate」を使いつつ、全然言うこと聞いてくれない場合はこれまでの履歴からプロンプトを組み立て直して、「リトライ」で再生成し直すと割とうまくいきます。
編集
生成されたアプリはプロンプトで作り直す以外に直接編集することも可能です。
- テキストの内容は自由に書き換え可能（太字、イタリック、下線も可）
- 画像は任意のファイルをアップロードして差し替え可能
- 画像についてはドラッグで任意の場所に複製ができました。
- メニューのテキストや画像などのクリックに反応して別ページへ遷移するリンクをつけられます。
リンクを入れたい項目をクリックした後、左上のタブで「Design」をクリックし、その下に表示されるアイコンの左から２番目のアイコンをクリックすることでリンク先を設定できます。
リンク先は別で作成したページへのリンクか、外部URLへのリンクを選べます。
また、有料プランではテキストのフォントや幅、高さ、色などを直接変更できそうです。
前に戻る、やり直す、履歴
先ほど紹介した前に戻るも含め、前に戻る、やり直す操作や、生成した履歴の確認ができます。
ページ左上にあるアイコンで操作が可能です。
履歴機能は地味に便利です。
生成系AIで生成されたものは、全く同じものを再現するのが難しいため、
色々試した結果うまくいかずに元に戻したいシーンはよくあると思います。
右側に時系列で生成した内容がリスト化されているので、戻したい状態をクリックして、
右下の「Restore Version」ボタンをクリックすることで指定の状態に戻せます。
プレビューの切り替え
プレビューで表示されている見た目の変更やコードの確認ができます。
ページ上部のアイコンで右から「PC」、「スマホ」、「コード」とプレビューを切り替えられます。
PC
スマホ
コード
コードは見た感じReactのようです。
コードを直接書き換えることはできないようですが、ダウンロードは可能です。
ある程度Createで作り込んだら、コードをダウンロードして、本格的なアプリケーションの実装を加えていくようなこともできそうです。右から「PC」、「スマホ」、「コード」とプレビューを切り替えられます。
モードの切り替え
作成されたプレビューは「ビルドモード」と「デモモード」の切り替えができます。
ビルドモードではページ内のボタンや画像などの編集できます。
一方、デモモードでは、編集したアプリの動作確認ができ、リストの選択やボタンクリックの動作などの動きを検証できます。
メンバーの招待
メールアドレスを指定し、別なメンバーと共同で編集できるようにすることも可能です。
招待されたメンバーはメール内のボタンで招待を承諾することで編集メンバーとして追加されます。
公開
完成後は「公開」機能を使って外部にアプリを公開することもできます。
つまり、Createだけでアプリを作りきってしまえば、アプリをデプロイする環境を用意しなくてもよいということです。
画面右上にある「Publish」ボタンをクリックするとアプリの名前を決めるポップアップが表示されるので、
名前を決めてボタンをクリックすることで、アクセス可能なURLが提供されます。
ドメインは固定ですが、有料プランであれば独自ドメインを指定することも可能そうです。
URLが提供された後は作成したページについてURLを変更することもできます。
他に作成したページがあれば、別なurlを設定することも可能です。
Createの構成について
- ダッシュボード
- チーム
- プロジェクト
- ページ
- コンポーネント
ダッシュボード
ログイン時に表示されるページです。
Createで作成したアプリケーションが一覧で見れます。
新しいアプリケーションを作る場合はこのページの「New Project」からプロジェクトを作成します。
チーム
アカウント作成時に1つ作成されます。
「My Team」という名前で、編集は不可です。
別なアカウントから招待された場合、ダッシュボード上で複数チームの内容を確認することができます。
チーム名が変えられないので、今のところ中に入っているプロジェクトで判断するしかなさそうです。
プロジェクト
１つのアプリケーションの単位
アカウント作成時に「Drafts」というプロジェクトが作成されます。
プロジェクトは名前の変更が可能ですが、削除ができません。
無料プランの場合、20個まで作成できます。
ページ
アプリケーションを構成する１ページ
静的なHTMLのサイト１ページと同等と考えてよさそう。
公開時にページ単位でURLを設定できます。
同じプロジェクト内であれば、それぞれのページをリンクで紐づけることができます。
コンポーネント
ページを構成する各部品
ページの一部を編集すると、その部分がコンポーネントに変換されます。
コンポーネント化した部品はプロジェクトを跨いで使用できるため、積極的にコンポーネント化する事で、様々なページへの再利用することで生産性の向上が見込めます。
とはいえ、どこで参照されているかがわかりづらくなるため、プロジェクト内の利用に止めるのがよいかなと
コンポーネントは、Createが自動的に切り分けたブロックで構成されます。
自由にコンポーネントの範囲を決められないため、望ましくない場合は、広い範囲のコンポーネントで管理するか、気に入った構成になるまで作り直す必要があります。
軽く触った感じでは、違和感ないですが、ページ内のボタンやテキスト、それらを束ねたカードや、テーブル、ヘッダーやフッターなどの単位となっています。
以下画像のようにマウスカーソルを当てると出てくる青い枠1つ１つがコンポーネント化できる単位です。
コンポーネント機能
Createには「コンポーネント」という機能があり、アプリの一部分をモジュール化してコンポーネントとして管理できます。
コンポーネントを作成すれば、プロジェクト間での再利用が簡単になり開発効率がグンとアップします。またアプリ全体の一貫性も保ちやすくなるでしょう。
コンポーネント化
ページを開いて、コンポーネント化したい箇所を選択し、「Combert to component」をクリックします。
そうすると新しく編集ページが開きます。
少し待つと選択した部分だけが生成されます。これでコンポーネントが作成されました。
作成されたコンポーネントは同じプロジェクト内に作成されています。
ここで、プロンプトを用いて見た目や機能等を修正することができます。
コンポーネント化した元のページに戻って見てみると、該当箇所の右上にアイコンがついており、これがコンポーネントを参照している事を表します。
コンポーネント化したパーツの更新
コンポーネントのアイコンをクリックすると、コンポーネントの状態を確認することができ、
コンポーネントが修正されている場合、「Update」をクリックして最新のコンポーネントの状態を反映することができます。
ちょっと微妙だったのが、コンポーネント化した際に元のページが勝手に再生成されてしまい、コンテンツの内容が壊れてしまう事がありました。
また、コンポーネントを元のページに反映した際も、コンポーネントで生成した通りの内容ではなく、改変されてしまい、使いこなすにはもう一工夫必要な印象です。
新たにページを作り直して、作成したコンポーネントを使用するようにして生成すると、比較的うまくいきました。
コンポーネントの利用
作成したコンポーネントを使用するには、プロンプト欄で「/」と打つと候補が色々な候補が出て来ます。
ここで「Component」を選択し、表示されたリストから必要なコンポーネントを選択することで、ページの生成時にコンポーネントを使用してくれます。
AIやWebサービス連携でアプリケーションを構築
CreateにはAIやWebサービスとの連携が可能です。
この連携の事をインテグレーション（Integration）と言います。
ChatGPTを組み込めば対話AI機能を実装でき、Google検索もワンクリックで行えます。
PDFやWebスクレイピングなどの機能もアプリに追加可能です。
以下はドキュメントに載っているインテグレーションです。
- 生成AI連携
- ChatGPT、Groq、Anthropic Opus、Google Gemini、GPT-4 Vision、Stable Diffusion
- Eコマース連携
- US Sales Tax Calculator、Real-Time Product Search
- 音声連携
- 音声文字起こし、テキストの音声化
- 位置情報の統合
- Google Maps
- Google Business Data
- Google Place Autocomplete
- Weather by City
- ドキュメント統合
- PDF生成
- ドキュメント内検索
- ファイル変換
- QRコード
- ウェブスクレイピング
- 翻訳（Google Translate）
- 検索の統合
- Google検索
- Google画像検索
- データ可視化（Charts）
- 安全性とコンプライアンス
- Email検証
- ドメイン検証
- OpenAI Moderation
日々インテグレーションは増えているようで、現時点でここに載っていないものもあります。
インテグレーションの利用方法
インテグレーションを利用するにはチャットで/を入力すると利用可能なインテグレーションのリストがポップアップで表示されます。
利用したいサービスを選択してプロンプトに含めましょう。
インテグレーションはプロンプト内で色が付くので、どこでインテグレーションを利用しようとしているかがわかりやすくなっています。
インテグレーションを活用したアプリの例
以下はGoogle翻訳のAPIを利用した翻訳アプリの例
と、一見よさそうなのですが、これだけでは動作しませんでした。
以下の修正を加えて動作しました。
- APIエンドポイントの修正（生成されたコードとGoogleドキュメント見比べて）
- APIパラメータにAPIキー（key）を追加
- GCPでGoogle Translate APIを有効化
- APIキーを発行し、権限制限
普通にGoogle翻訳のアプリを作ろうと思ったらやっておく必要な事はCreate外でやっておかないといけないです。
APIを利用した経験がないと、この辺はなんで動かないのかわからないと思います。
というわけで、成功パターン
ちゃんとAPI通信できました。
こちら公開版のアプリです。APIキーを外部から入れられるようにしたので有効なAPIキーを設定頂ければ利用可能です。
インテグレーションによっては上記のようなAPIの発行等、APIを利用するための準備が必要だと思われます。
が、運良く？手間が掛かるインテグレーションを引いてしまったようで、
他のインテグレーションを色々と試してみましたが事前準備不要で利用できます。
ChatGPTやGoogle MapやText to Speechなど準備なしでできました。
データベースの活用
インテクレーションだけでもかなり強力なのですが、それに加えてデータベースも作れます。
ユーザからの入力や、インテグレーションを使って取得したデータを溜めておくこともできます。
データベースの作成
先ほどインテグレーションの使い方でも操作したようにプロンプトの入力欄で/でメニューを表示します。
タブの「Data」をクリックし、「Create a database」をクリックします。
※すでに「manga」というデータベースを作っているので選べる状態になっています。
以下のようなポップアップが表示されるので、好きな名前を付けて、「Save database」をクリックすればデータベースの作成は完了です。
作成すると、プロンプト欄に緑の文字でデータベース名が入力されます。
データベースの利用
このデータベースに対して値を登録するようなプロンプトを書けばデータの登録ができます。
テーブル名やカラムなどは特に指定しません。
以下サンプルでアンケートフォームを作ってみました。
デモで操作していくつか登録します。
データベースのデータ確認
データの内容確認方法はいくつかありますが、手軽なのは以下の方法です。
プロンプト欄のデータベース名をクリックします。
ポップアップの「View ｄａｔａ」をクリックすると別タブが開いてデータベースの中身が確認できます。
ダッシュボードのページ上部にある「Data」
テーブル名やカラム名は勝手に決められています。
別なページで検索フォームを作成
クエリとして検索もできそうです。
コードはこんな感じ、普通にSQLぽいですね。
注意点
-
おそらくバグだと思うのですが、作成済みのデータベースをプロンプトに設置する際にマウスクリックだとうまくいきません。
/に続けてデータベース名を入力します。そうすると選択項目がフィルタされていくので、データベース名が特定できる状態になったら、Enterキーで確定します。これでプロンプトに設置できます。
すでに設置してあるデータベースであれば、コピー＆ペーストも可能です。 -
データベースは複数テーブルを持つことも可能です。登録時や取得時にテーブル名を指定することで指定したテーブルを操作できます。テーブル名の指定は通常のプロンプト同様テキストで入力するだけです。
アプリを作る秘訣
最後に、アプリをうまく作るためのプロンプトのポイントを紹介します。
-
チャットではなく仕様:
アプリを読んだ人が作成できるほど詳細にアプリを説明します。
Create は仕様を読み取り、それに一致するアプリを生成します。
生成されたものが希望どおりでない場合は、仕様のその部分に詳細を追加します。
詳細が多ければ多いほど、より良い結果が得られます。 -
シーンを設定します:
最初に要件を明確にします。アプリの内容と重要な部分を伝えます。 -
パーツを具体的にする:
シーンを設定した後、主要なパーツをそれぞれどのように見え、動作するかについて詳細に分割します。 -
非常に具体的な情報を取得できます:
正確なものを取得するために、必要に応じて 16 進コード、フォント、スペースなどの詳細を指定することもできます。 -
画像を試す:
仕様として画像を貼り付ける。画像に加えて詳細な説明を追加すると、良い結果が得られます。
プロジェクト全体を 1回のショットで行うのではなく、コンポーネント単位で画像を使用すると良い結果が得られやすい。 -
考えを整理する:
仕様を「UI」、「機能」、「詳細」などのセクションに分割する。
これは、AIが何に注意を払うべきかを判断するのにも役立ちます。
太字、箇条書きリスト、または改行などを利用すると良いです。 -
長すぎるプロンプトを避けて、コンポーネントに分割する:
メイン仕様に内容が多すぎると (例: 1 ページ以上)、AI は何が重要かを判断するのが難しくなります。 長くなったら、仕様をコンポーネントに分割します。
もっと細かなポイントを公式で紹介していますので、気になる方はこちらも確認してみてください。
Guide to Prompting
※読んだ人がアプリを作成できるほど詳細に説明が書いてあれば、最初から人が作った方がメンテナンスも柔軟で楽なんですどね、というツッコミはあります。
仕様を詳細化するアプリ
詳細な説明を書くのが大変という方向けに、仕様を詳細化してくれるアプリがあります。
英語でのみ応答可能なようです。
このツールを用いて出力された「アパレルのECサイトのトップページ」のプロンプトを用いて作成したページが以下です。
だいぶショップぽさが出ていますよね。
プロンプトは以下（クリックで開きます）
アパレル e コマース Web サイトのトップ ページに一般的に表示される内容を概説して、どのようなことが予想されるかを概説します。
- ナビゲーション メニュー付きのヘッダー: 通常、最上部には、ブランドのロゴ、さまざまなカテゴリ (男性、女性、子供、アクセサリーなど) にリンクするナビゲーション メニュー、および多くの場合、顧客サービス、配送情報、アカウントの詳細にリンクします。
- 検索バー: 多くの場合、ヘッダーの近くには、ユーザーが特定のアイテムやカテゴリをすばやく見つけることができる検索バーがあります。
- メイン バナー: トップ ページのメイン部分には通常、現在のプロモーション、新しいコレクション、季節のイベント、またはベストセラー製品を強調する大きなバナーまたはバナーのカルーセルが表示されます。
- 注目のコレクション/カテゴリ: メイン バナーの下または周囲で、サイトでは「新着」、「セール」、「限定」、または季節のセレクション (例: 「夏」など) などの注目のカテゴリまたはコレクションを紹介する場合があります。必需品」）。
- 商品ハイライト: 一部のアパレル サイトでは、トップ ページにハイライトされた商品が表示されます。これらは、ベストセラー、新商品、または現在割引されている商品である可能性があります。
- Call to Action (CTA): 「今すぐ購入」、「もっと見る」、「アップデートにサインアップ」などの CTA は通常、ユーザーの関与を促すためにトップ ページ全体に散在します。
- フッター: 下部には、会社概要、プライバシー ポリシー、サイト マップ、ソーシャル メディア リンク、連絡先情報などの追加リンクを含むフッターがあります。
- 社会的証明とレビュー: 一部のサイトでは、信頼を築くために、顧客の声を掲載したり、トップページでソーシャルメディアへの言及を強調したりしています。
- ニュースレターの登録: 多くのサイトには、限定セールやニュースを入手するためにユーザーがニュースレターを購読するためのセクションがあります。
- ブログまたはライフスタイル コンテンツ: 一部のアパレル EC サイトでは、訪問者を引き付けるために、トップ ページに直接、ライフスタイル、ファッションのヒント、ハウツー ガイドに関連するブログ投稿や記事へのリンクが含まれています。 Web サイトごとにレイアウトや焦点は異なりますが、ほとんどの Web サイトはこの一般的な構造に従って、ユーザー エクスペリエンスを最適化し、販売を促進します。
Createを使えば誰でもアプリが作れてしまう時代？
Createを用いることで、実装は自動化され、アイデアがあればプロンプトだけで実際に動くアプリケーションが作れてしまいます。
プロンプトを書けなくても、良さげなデザインを元に生成することもできます。
やはり、Webサービス連携機能が優秀で、「XXサービスを使って〇〇するアプリ」と一言書くだけで、雑ではあるものの動くものが出来上がる体験は最近のAIサービスの中でも頭ひとつ抜けている印象です。
エンジニアであれば一度は夢見た機能ではないでしょうか？
とはいえ、ちゃんとしたサービスとして提供するには、正直難しいレベルだとは思います。
一番は保守性の面で、一部の機能を修正するために、全体が再生成され、もともと動作していた部分の動作を担保できなくなるのは致命的です。
これも保守性ではありますが、ちょっとした修正をしたいだけでも、プロンプトで操作する必要があり、うまく指示が伝わらずに、プロンプト修正→待ち→確認動作せず→プロンプト修正、と延々続けることになります。
開発序盤や追加機能のモックアップとして活用し、本格的な機能実装時は従来型の開発という住み分けが良さそうです。
気軽に作れるため、ちょっとした開発ツール、補助ツールとしても活用できそうです。
また、アクセス数が増えているのか、ページの再生成が重たいです。重いだけでなく割と失敗します。
無料プランなので制限かかっている可能性もあります。
そもそもGPT4が遅いので、有料プランにしてGroqやOpusを使えば速度改善は見込めそうです。
とはいえ、今後もさらなる機能拡張が見込まれ、精度も向上していくでしょう。
1年半前はChatGPTがありませんでした。
Createの進化も期待しつつ他のサービスもウォッチしていきたいです。
参考資料
ガイド コンポーネント インテグレーション Createプロンプトガイド
Customer Dashboard - built with Create
Discussion