SHARE

NEW 2025.06.11

チャットでサイトやアプリを瞬時に生成できる「create.xyz」とは

#クリエイティブ#プロトタイピング#生成AI

鈴木 凱士 鈴木 凱士

現代においてウェブサイトやアプリの重要性はますます増していますが、実際に優れたサイトやアプリを一から構築するとなると、要件定義やデザイン、コーディング、コンテンツ作成など、非常に多くのスキルと開発コストが求められます。
そこで最近注目を集めているのが、生成AIを活用した「Vibe Coding(バイブコーディング)」と呼ばれる開発手法です。 この開発手法では、自然言語の指示だけで瞬時にアプリやサイトを作成できる最新の生成AIツールを使用します。抽象的な初期アイデアも素早く形にして検証でき、またプログラミングの知識や作業も不要なため、従来よりも感覚・雰囲気(≒Vibe)を重視して開発できる点が特徴です。
本記事では、そんなVibe Codingに活用可能な生成AIツールのひとつである「create(クリエイト)」について、実際に利用してみた際の感想とともにご紹介します。
※本記事でご紹介する内容は2025年5月時点の情報です。

1.createとは

createは、ユーザーがchatGPTのようにチャット上にプロンプトを入力することで、プログラミング不要でサイトやアプリを自動生成できるノーコード開発ツールです。
日本語のプロンプトにも対応しており、プロンプトが日本語であれば日本語のサイトやアプリが生成されます。
また無料プランも用意されており、一部制限はあるものの基本機能は無料で利用可能です。無料アカウント作成時に一定量のクレジット(ポイントのようなもの)が付与され、作業内容に応じてクレジットが消費されていき、クレジットが無くなると作業ができなくなります。

create TOP画面

create TOP画面 (https://www.create.xyz/)

生成AIのモデルは選択可能で、Claude(Anthropic Sonnet)やGPT-4、Geminiなど各社の様々なモデルを設定できます。(一部の最新モデルは有料プランでのみ選択可能です。)
なお本ツールの呼称に関して、正式名称である「create」は一般用語と被るため、公式サイトのURLからとって「create.xyz」と非公式で呼称される場合もあります。本記事では、紛らわしさを防止するため記事タイトル上でのみ「create.xyz」と表記しており、本文上では「create」と呼称しています。

2.createで出来ること

createで出来ることを、実際に「UXデザインに関するメディアサイト」を簡易的に作ってみた際のアウトプットとともにご紹介します。

①実際に動作するプロトタイプを瞬時に作成
こちらの記事でご紹介したGalileo AIがあくまで静止画面のUIデザイン作成に特化しているのに対して、createでは生成AIが要件定義・デザイン作成・コーディングまですべて瞬時に実行し、実際に動作するアプリやサイトのプロトタイプを作成することができます。
実際にサイトのプロトタイプを作成した際の画面が以下で、「UXデザインに関するメディアサイトを生成して」と一言指示を出してから10秒もかからずにサイトが生成されました。

createのチャット(左)と実際に生成されたプロトタイプ(右) の画面

createのチャット(左)と実際に生成されたプロトタイプ(右) の画面

サイトのタイトルやデザイン、記事の表示エリアなど最低限の要素だけでなく、各記事のタイトルやサムネイルまで生成されており、さらに読了時間表示エリア、ニュースレター登録機能など、メディアサイトによくある機能も網羅的に取り込まれています。
これらの機能のボタンは、遷移はしませんがそれぞれクリック可能で、カーソルを合わせるとホバーエフェクトも表示されます。(以降のプロセスで下層ページの追加を指示することで、遷移も行われるようになります。)

また生成されたプロトタイプは最初からレスポンシブ表示にも対応しています。

プロトタイプのスマホ表示画面

プロトタイプのスマホ表示画面

②修正もプロンプトで瞬時に行える
プロトタイプで気付いた改善点や足りない要素については、追加のプロンプトで修正を行うことができます。
実際にさきほど生成した「UXデザインメディアサイト」に対して、「タグでの絞り込み機能の追加」と「下層ページの作成」を指示してみると、以下の修正案が生成されました。
タグでの絞り込みは、デザインだけでなく機能的にも有効となっており、実際にタグを選択することで該当の記事に絞り込まれます。

チャットでの修正指示(左)と実際に修正が反映されたプロトタイプ(右)の画面

チャットでの修正指示(左)と実際に修正が反映されたプロトタイプ(右)の画面

また下層ページも追加されており、上記の画面で記事を選択すると以下の記事詳細ページに遷移します。
ページのデザインだけでなく記事の本文についても、内容は粗いですが生成してくれています。

生成された下層ページ(記事詳細ページ)のプロトタイプ画面

生成された下層ページ(記事詳細ページ)のプロトタイプ画面

③生成したプロトタイプ画面の一部を選択し、直接修正することも可能
上記のプロンプトによる修正は、抽象的な指示でも修正が可能であり便利な一方で、細かい調整はしづらいというデメリットがあります。そのためcreateでは、生成したプロトタイプ画面の中で気になる箇所を選択し、直接修正を行うことも可能です。
例えば、段落タイトル名( 「記事一覧」 )を変えたい場合は、下記画像のようにカーソルで選択することで直接テキストを編集することができます。
無料プランで直接修正を行えるのはこうしたテキストなど一部に留まりますが、有料プランであれば背景や文字色、サイズなどより幅広い要素を柔軟に修正することが可能となります。

プロトタイプの一部を選択して修正可能(黒ハイライト箇所)

プロトタイプの一部を選択して修正可能(黒ハイライト箇所)

④コードの表示や編集にも対応
一部のノーコード開発ツールとは異なり、createではプロトタイプだけでなく生成されたコードも表示、編集可能です。そのため、プログラミングの知識がある方はコード上で修正を行うこともできます。
またユーザー自身がプログラミングの知識が無い場合も、「ユーザーがcreateでプロトタイプを途中まで作成し、最後の仕上げのみプログラマーにコードを渡して行ってもらう」といったような使い方が可能です。

コード編集画面

⑤様々な外部サービスを組み込み可能
createでは「インテグレーション」と呼ばれる外部サービス連携機能が用意されており 、地図表示(Google Maps)やAIによる文章生成(ChatGPTなど)など、90種類以上の外部サービスをプロトタイプの中に簡単に組み込むことができます。
例としてGoogleマップと連携すると、以下のように見慣れたマップをサイト上に表示することが出来ました。

プロトタイプにGoogleマップを組み込んだ画面


3.createのメリットと注意点

createを実際に使用してみて感じたメリットと注意点を紹介します。

【メリット】

①総合的なサービスの使いやすさを検証できる
自然言語での指示だけで、抽象的なアイデアであっても一瞬で、機能やコンテンツ、動作まで盛り込まれた状態の形にしてくれます。そのため、従来のワイヤーフレームや簡易的なプロトタイプと比べて、createではデザインのみならず操作やサイト全体の印象なども含めた総合的なサービスの使いやすさを、素早く体験・検証できる点が大きなメリットだと感じました。

②修正方法や追加機能が充実しており、Vibe Codingを実践しやすい
生成AIの性質上、最初のアウトプットがイメージと異なる場合も当然ありますが、createでは様々な方法で修正が可能であり、かつ外部サービス連携などの機能も充実しているため、スムーズに自身のイメージに近いアウトプットに近づけることができます。
そのため、記事冒頭でご紹介したVibe Coding(コードを使わずに、AIと会話形式で指示を出しながら、従来よりも感覚を重視して開発を行う手法)を十分に実践できると感じました。

③利用ハードルが低い
create自体のUIもシンプルなので、説明を読まなくてもある程度の操作が可能です。 無料プランもあり、プロンプトも日本語に対応しているため、利用ハードルはかなり低いと言えるでしょう。
また非公式ですが、日本語でcreateの最新情報を発信しているサイトも存在しています。

【注意点】

①アウトプットのブレは生じるため、繰り返しの対話は不可欠
Chat GPTなどと同様、生成AIの特性上、同じ指示でも異なるアウトプットが生成されたりします。文章表現や画像も、生成AI特有の言い回しやイラストになる場合が多いです。そのため、いきなり完璧なプロトタイプを作成出来るわけではありません。また複数階層にまたがるサイトの場合は、最初は各ページ間の遷移がうまくいかないバグが生じる場合も見られました。
通常の生成AIと同様、出来るだけ具体的なプロンプトで対話を繰り返していくことで、そうした問題は解消することができます。また画像を添付して指示を出すこともできるので、デザインの参考にしたいサイトやアプリのスクリーンショットを添付するとより的確なアウトプットが生成されやすくなります。

②デザインの調整にはやや工夫が必要
細かいデザインの調整については、FigmaやXDなどのWebデザインツールと比べると、createは仕様上やや自由度が低くなっています。その代わり、デザインのテンプレートを選択できる「スタイルガイド」機能や、ページの構成要素を事前に設定できる「コンポーネント」機能などが充実しているので、理想のデザインに近づけるためにはそうした機能を使いこなすことが重要となります。

4.createの活用シーン

続けて、createの利用に向いていると感じた具体的なシーンについてご紹介します。

①初期アイデアの検証
サービスの方向性がどういったものがよいか初期アイデアを確かめたいシーンにおいて、createを使えばコストをかけずに素早く、幅広い観点で検証できます。また複数の方向性でプロトタイプを作り、比較、検証したい場合や、PoC(概念検証)などでも活用できるでしょう。

②ユーザー体験の検証
ある程度サービスの方向性が固まったあとも、ユーザー体験の改善においてcreateの活用が有効です。サービスに必要と思われる要素や機能について、どういった配置が良いか、過不足が無いか、実際にプロトタイプに細かく反映していきながら総合的に検証することができます。

③チーム内やクライアントとの合意形成への活用
createでは、他のチームメンバーやクライアントからMTG内等で受けたフィードバックを、その場で即座にプロトタイプに反映、共有し、議論することができます。そのため、従来よりもスムーズかつ認識ずれの少ない合意形成を実現できます。

④サービスへの実活用
運用保守やセキュリティ面などの検討は必要ですが、createで作成したサイトやアプリは、そのまま実際のサービスとして公開することもできます。特に個人や社内で利用する場合や、短期間のみの利用となる場合に有効でしょう。。

5.おわりに

この記事では、サイトやアプリを数分で作成できる生成AIツール「create」についてご紹介しました。
他にもエクスペリエンス+では生成AI関連の記事として、プログラミング不要で生成AIアプリを構築できる「Dify」 についての記事や、UI生成に特化したAIツール「Galileo AI」 についての記事を掲載しておりますので、よろしければご覧ください。
これらの記事を通じて、生成AIツールへの理解を深めUXデザインに活用していくきっかけとなれば幸いです。

参考URL

・create 公式HP

https://www.create.xyz/

・Experience+ 記事「瞬時にUIを生成するAIツール「Galileo AI(ガリレオAI)」を実際に触ってみた」

https://xp-plus.jp/reports/article_41/

・電通デジタルの生成AIソリューション

https://www.dentsudigital.co.jp/services/AI

鈴木 凱士

鈴木 凱士

エクスペリエンス&プロダクト部門

2023年に電通デジタルに入社。UXコンサルタントとして、定量・定性分析やサイトにおけるIA・UI設計、オフラインチャネルでのUX施策立案・実行支援などに携わる。

※所属は記事公開当時のものです。

RELATED REPORT

EXPERIENCE+は、株式会社電通デジタルが運営しているUXデザインメディアです。

ビジネスに役立つUXデザインのナレッジ・ノウハウについて、コラムやインタビュー、
体験レポートや書評コラムを通して発信しています。

サービスの詳細や詳しい説明をご希望の方は、こちらのボタンよりお問い合わせください。

CONTACT お問い合わせ