アプリを作成できるAIツール「Cades」の使い方。自然言語でデザインを生成するプロセスを紹介

だーだい

CadesはAIを使ってモバイルアプリの開発を手軽に行えるプラットフォームです。テキストを入力するだけでアプリのデザインやコードが自動生成され、数分でアプリを作成できるのが特徴です。

Cadesには無料プランと有料プランがあり、有料プランを利用するとFlutterコードの生成とクラウドIDEによるコードの編集が可能。すべてブラウザ上で完結するため、追加のソフトウェアをインストールする必要はありません。

また、アプリを作る上で要件定義からデザイン作業までチャットによルコミュニケーションで段階的に実行できるのも魅力のひとつ。この仕組みにより開発にかかる時間と労力を大幅に削減し、思いついたアイデアをスピーディーに形にできます。

Cadesはアプリ開発初心者から経験者まで、手軽に利用できるツールとして注目されています。

Cadesの特徴やできることは下記の通りです。

Cadesの料金プランは下記の通りです。

上記のようにプラン内容によってできる範囲が異なります。無料プランだとアプリのデザイン生成までしかできず、コーディングやクラウドIDEを利用するには有料プラン契約が必要です。

今回はCadesの無料プランで利用できる、アプリのデザイン生成までの流れを詳しく解説します。

はじめにCadesの公式サイトへアクセスします。

Cades：https://cades.dev/

Cadesより

トップページ右上から「Sign Up」をクリック。

Cadesより

GoogleかAppleアカウントのいずれかで登録できるので、任意のアカウントをクリックして作業を進めて下さい。

Cadesより

アカウント登録が完了すると上記画面が標示されます。画面中心の欄へプロンプトを入力します。

Cadesより

上記の赤枠にはアプリ作成のプロンプト例が掲載されています。今回はこの中から「予報とアラートを備えた天気アプリ（Weather app with forecasts & alerts）」というプロンプトを使ってみます。

また、プロンプトの語尾に「日本語で作って下さい」と指定することで、やり取りするチャットも日本語になるのでおすすめです。

Cadesより

左の作業画面がAI都チャットをやり取りする画面で、画面右側で実際のデザインが生成されます。

Cadesより

まずは各画面の要件定義が提示されました。

Cadesより

要件定義の内容に問題がなければ、スクロールして画面下部にある「Yes」をクリックします。付け加えたり修正したい要件があれば、その内容をプロンプトで伝えましょう。

Cadesより

要件定義に沿ったデザインを促すチャットが表示されるので、問題なければ「デザインを生成する」をクリックします。

Cadesより

まずは2画面のデザインが生成されました。しかし文字化けしているため「日本語が文字化けしているので直して下さい。」とチャットで伝えています。

しかし日本語の文字化けは治らなかったので、Cadesで作ったデザイン内の文字はこちら側で修正する必要がありそうです。

Cadesより

デザインの生成を進めると、上記のように全画面のデザイン生成が完了します。

無料プランで作成できるのはここまでで、これから先のコード生成やデプロイは有料ユーザーのみ利用可能です。

Cadesより

作成したアプリのデザインは、ホーム画面の「Projects」欄をクリックして確認できます。

Cadesはアプリデザインの要件定義からデザイン作成、Flutterコードの生成までを一貫して利用できるのが魅力です。しかしデザイン生成からクラウドIDEによるコード編集を行うには、月額50ドルのProプランを契約する必要があります。

この点に関してコストに見合うほど便利なのかが、利用する際のポイントでしょう。アプリ内のテキストが日本語に対応していないようなのも気になるポイントです。

そのあたりの手間を考えると、無料で簡単なデザインとコードまで生成できるAIツール「Bolt」の方が実用性が高いように感じました。

日本語でWebアプリを作れるAIツール「Bolt」の使い方。できることや料金プランも併せて紹介

とはいえ、作成したいアプリの要件とデザイン生成を無料でできる点については、プロトタイプを生成する際に役立ちそうです。