生成AIでWebアプリが作れる!ノーコードツール「Create」の特長と使い方を解説

普段のお仕事に役立つ普遍的なプログラミングTIPSや、業界で注目度が高い最新情報をお届けする「編集部ピックアップ」。
今回はAI搭載のノーコードツール「Create」をご紹介します。

AI搭載のノーコードツール「Create」とは?

「Create」は、コードを書かずにWebアプリを作れるツールです。言葉で説明した内容が、Webアプリとしてすぐに作成されて動かすことができるため、プログラミング経験のない方でも簡単に活用できます。

ChatGPTやStable Diffusionといった生成AIが搭載されており、自然言語で書かれた仕様に基づいたWebアプリのコードの生成を可能にしています。

エンジニアでなくても思いついたアイデアをすぐに形にできることから、幅広い活用が期待できるAIツールです。

Createの特長

Webサイトや生成AIアプリを素早く制作できる

Createではブラウザ上の操作だけで、Webアプリの開発から公開まで行えます。Webアプリを動かすのに必要なインフラが用意されているため、クラウドサーバーなどを用意することなくWebアプリのリリースが可能です。

また、ChatGPTやStable Diffusionなどの生成AIを搭載したWebアプリを簡単に作れます。生成AIを動かすにはスペックの高いサーバーを用意したり、API連携のコーディングが必要とされたりしますが、Createではその必要はありません。生成AIを利用すれば、創造的な文章や画像を作り出す機能を組み込むことができます。

そのほか、Google検索や翻訳、PDF変換、音声処理など様々な外部サービスとの連携できるメニューも用意されています。

CreateのWebアプリと外部サービスとの連携機能

日本語で指示できる

Createではプログラミング言語の代わりに自然言語でWebアプリを定義していきます。Webアプリの要件を言葉(プロンプト)で伝えると、Createの内部でコードに変換され、Webアプリが形成されていきます。そのため、プログラミング言語やアプリ開発の知識がほとんどない利用者でもWebアプリを開発可能です。

また、開発過程では画面の見た目や動きを確認しながら進めていきます。Webアプリを変更したいときはプロンプトに修正を加えたり、機能の補足を追記したりすることで細かな調整が可能です。たとえ説明が不足していたとしても、何らかのWebアプリとして形にしてくれます。その差異を言葉で説明を加えていくことで、描いているWebアプリに近づけることができます。

無料版でも多くの体験ができる

Createは次の3つの料金プランで提供されています。

  • FREEプラン:無料
  • PROプラン:19ドル/月
  • BUSINESSプラン:99ドル/月

FREEプランは無料ながらも、Webアプリを作り上げるための多くの機能が利用でき、充分に実用的です。

  • GPT-4 Turboによるコード生成
  • 20プロジェクト(≒Webアプリ)まで作成可能
  • Webアプリ内での生成AI機能の使用(利用量と種類の制限あり)
  • Webアプリの開発から公開まで可能

上位の有料プランになれば、さらに多くの追加機能がありますが、まずはFREEプランで作成を試してみましょう。本記事でもCreateの利用手順を紹介していますのでご覧ください。

Createのメリット

非エンジニアでもアプリが作れる

プログラミング経験のない方にとっては、Webアプリのどこから作り始めたらよいか取っ掛かりが掴みづらいため難しいでしょう。

Createでは作りたいWebアプリのイメージをプロンプトとして与えるだけで、画面や動きを実装することができます。何のヒントもなく一度でプロンプトを作り上げることは難しいですが、形になったWebアプリのどこを変えたいかという指示であれば想像しやすいでしょう。

また、ボタンやレイアウトなど言葉だけでは伝えづらい内容は画像で代替できます。例えば既存のサイトのキャプチャや、画像編集で作成した画面イメージをプロンプトで与えることで、それに準じたUIを作らせることが可能です。Createの内部で使われているGPT-4 Turbo with Visionによって、画像の内容を高精度に認識することが可能で、Webアプリのコードに反映できます。

継続的な開発にも対応可能

CreateではUIとビジネスロジックを切り離して開発できます。各レイヤーごとに開発を進めることでビルドに掛かる時間が短縮できる上に、ビジネスロジックのテストが行いやすいメリットがあります。さらに、作成したUIの一部をコンポーネントとして切り出すことができるため、再利用性が高いのも特徴です。

また、作成したWebアプリはコードでダウンロードできます。WebアプリはNext.js、React、TailwindCSSを使って作成されているため、手元の環境に移して開発を進めることもできます。

そのため、Createは本格的な開発を始める前のプロトタイプやデモアプリの作成に適しています。

CreateでWebアプリを作ってみよう!

Createの導入方法とアプリの作り方

まずはCreateの利用登録を行いましょう。FREEプランはメールアドレスがあれば登録可能です。公式サイトにアクセスし、[Start building for free]を押下します。

Createの利用登録画面

登録画面でメールアドレスを入力しましょう。

Createの利用登録時のメールアドレス登録画面

登録完了するとCreateのアプリ作成画面に遷移するので、そのままWebアプリを作成してみます。「Prompt」タブに作りたいWebアプリを日本語で記述しましょう。ここでは「入力されたテキストの文字数をカウントするページを作成してください。」と入力してみます。

そして[Generate]ボタンを押下すると、Webアプリの作成が始まり、しばらくすると中央の画面に指示した内容のページが表示されます。

サンプルアプリ作成のプロンプトとアプリ画面

試しにページ内のテキストボックスに入力していくと、文字数がカウントアップされているのが確認できます。

サンプルアプリの実行画面

プロンプトからWebアプリ画面の作成

今度はもう少し複雑な画面を作成してみましょう。一覧表の画面を作るために、下記のプロンプトを指定します。

以下の7つのカラムを持った日本語の表を作成してください。
顧客名
例:「商店」、「喫茶店」、「居酒屋」

受注日
例:「2024年6月20日」

担当者
例:「田中 太郎」

商品名
例:「コーヒー ミルク」、「果汁100% みかん」

金額
例:「\4,400」
値は右寄せ

数量
例:「200」
値は右寄せ

フラグ
チェックボックスを表示
値は中央寄せ

各レコードには、例示した内容から類推できる仮想のデータを作り出し、ランダムに配置してください。

先程と同じように[Generate]ボタンを押下すると、指定した7つのカラムを持つ一覧画面が作成されます。

文章から作成した一覧画面

[View code]のボタンを押下すると生成されたReactのコードを表示できます。

生成されたコード

画像からWebアプリ画面の作成

次は、同様の一覧画面を画像から生成してみましょう。今回は弊社のJavaScriptUIライブラリ「Wijmo(ウィジモ)」を使用して作成した以下のような一覧表の画面の画像を使ってみます。

WijmoのFlexGrid

ダッシュボードに戻り、新しいページを作成します。下記のように、画像を添えてプロンプトを入力して[Generate]ボタンを押下してみましょう。

画像から作成した一覧画面

画像と同じような一覧表を持つ画面が再現されているのがわかります。また、同様に[View code]のボタンを押下すると生成されたReactのコードを表示できます。

生成されたコード(2)

このようにCreateでは、Webアプリの機能や画面の詳細を日本語あるいは画像で伝えるだけで、簡単にイメージを具体化することができます。

Createを活用する上での課題

Createはプログラミングの知識がなくてもWebアプリを制作できるツールで、簡単なデモなど動くものを素早く作る場合に適しています。また、プロンプトの中でUIの具体的なサイズや色などの指定ができるため、見た目の調整もしやすいです。

一方で、複雑な仕組みや精巧な作りのWebアプリ制作には向きません。例えば、複雑なデータベースとの連携や、慎重を要する決済機能の実装が必要な場合は、知見のあるエンジニアが担当したほうが良いでしょう。また、適切なUI/UXを作りこんでいくにも専門的な知識が必要とされるため、Createの機能だけで品質の高いWebアプリを作り上げるのは難しいでしょう。さらに、Createで生成されるコードは特定のプログラミング言語やフレームワークに依存しているため、運用環境によってはそのまま導入できないこともあります。

そのため、素早くWebアプリを形にする用途に向いているといえます。コンセンサスを得るためのデモアプリの試作や、簡単な業務サポートツールの開発など活用の幅は広いでしょう。

さいごに

今回の記事では、ノーコードで生成AI搭載のWebアプリが作れるツール「Create」を紹介しました。Webアプリの仕様を言葉や画像を使って記述するだけで、簡単にWebアプリのプロトタイプやデモの作成が始められます。また、作成したWebアプリはJavaScriptやCSSなどのコードで入手できますし、本格的なフロントエンド開発に移行しやすいです。開発工程に取り入れることで生産性向上が期待できるため、ぜひ導入を検討してみてください。

メシウスでは様々なWebアプリケーションフレームワークと一緒に使えるJavaScriptライブラリを提供しています。今回ご紹介したCreateではReactのコードが生成されましたが、Reactをはじめとした各種JSフレームワークとも一緒に使用できます。

メシウスのJavaScriptライブラリ

無償のトライアル版や、ブラウザ上で手軽に試せるデモアプリケーションも公開しているので、こちらも是非ご覧ください。

\  この記事をシェアする  /