コラム

LLMが開発市場を大きく変化させています。コーディング時にAIがサポートしてくれたり、テストコードを生成したりします。さらに、AIがUIを生成するサービスも登場しています。今回は、AIでUIを生成するサービスを15個紹介します。

Visily

VisilyはスクリーンショットやスケッチからUIを生成します。また、執筆時点でアルファ版ですが、テキストからデザインしてUIを生成する機能も開発されています。

Visily自体はプロトタイピングやブレインストーミング、ワイヤーフレームとしての利用が想定されています。

Visily

UI to Code

UI to Codeはチャット形式でUIを生成するサービスです。指定したプロンプトに応じたHTML、CSS（Tailwind CSS）、そしてJavaScriptコードを生成します。

コードはチャットの中で展開されるので、実際のコードはコピーしてファイルに貼り付ける必要があります。

UI to Code-フリーのAI駆動UIコードジェネレータ

Builder.io

Builder.ioはWYSIWYGなエディタの中で、チャットを使ってUIコンポーネントを生成・修正できます。フレームワークの選択幅が多く、ReactやVue、Svelte、Angular、素のHTMLなどが用意されています。

コンポーネントは再利用されるので、同じような機能は何度も生成されずにプロジェクト内で一貫して利用されます。

Builder.io: Ship twice as much, twice as fast

Framer

FramerではUI全体ではなく、サイトのテキストを修正したり、翻訳したりするのにAIが使われています。デザイナーの作業余地は残しつつ、面倒なテキスト生成部分などに利用できます。

AI Tools in Framer

Fronty

Frontyは画像をアップロードすると、HTML/CSS/JavaScriptに変換します。そして、Fronty内でコンテンツを修正したり、カスタマイズが可能です。

Frontyはホスティング機能も有しており、できあがったデザインをそのままホスティングできます。

Image to HTML CSS converter. Convert image to HTML CSS with AI: Fronty

Taskade

Taskadeはチャットボット型であり、最初に作成したいWebサイトのイメージをテキストで定義します。一つ目の指示でいきなり作る訳ではなく、プラットフォームや機能についてチャットを重ねつつ、実際のアプリケーションの作り方を解説してくれます。

自分の作業余地が残っているのが、Taskadeの特徴です。

AI HTML Code Generator | Taskade

v0 by Vercel

v0はVercelの提供するサービスです。プロンプトや画像を利用してUIを生成します。生成されたUIは素のHTML、またはReactコンポーネントになります。Next.jsプロジェクトであれば、CLIでインポートできます。

生成されたUIに対して追加指示を行うことで、バージョン管理しながらUIを修正できます。

v0 by Vercel

raidendotai/openv0: AI generated UI components

openv0は、v0のオープンソース実装とも言うべきソフトウェアです。LLMはOpenAIのAPIを利用しています。オープンソースなので、気軽に利用できる（API利用料金はかかります）のがメリットです。

raidendotai/openv0: AI generated UI components

Uizard

Uizardは、スクリーンショットやスケッチからUIを生成します。生成されたUIはReact向けに出力できます。また、テーマを指定してカラーリングを生成する機能もあります。

UI Design Made Easy, Powered By AI | Uizard

Relume

RelumeはWebサイト全体を生成するのに適したサービスです。サイトマップでは、作りたいWebサイトに合わせたサイトマップを生成し、各UIコンポーネントも提示します。

UXワイヤーフレームでは、サイトマップに合わせたワイヤーフレームを生成します。

Relume — Websites designed & built faster with AI | AI website builder

Wireframe Designer | Figma

Wireframe DesignerはFigmaのプラグインです。Figma上でワイヤーフレームを生成します。モバイルまたはデスクトップのデザインをサポートしています。

チャット形式なので、一度生成されたUIに対して修正内容を指示できます。

Wireframe Designer | Figma

TeleportHQ

TeleportHQはLLMとしてChatGPTを利用しています。生成したい内容をテキストで指示する他、ウィザードを使ってUIコンポーネントを指定した生成も可能です。生成後、カラーテーマを指定してダイナミックに変更できます。

AI Website builder powered by ChatGPT

ZZZ Code AI

ZZZ Code AIはAIを使った各種サービスを提供しており、その一つがHTMLコード生成機能になります。生成するコードに対して説明をつける、エラーハンドリングを追加する、3つの異なる種類のコードを生成するなどの指示ができます。

FREE AI HTML Code Generator: Generate HTML Code Online

Galileo AI

Galileo AIはプロンプトを使ってHTML、またはFigmaファイルを生成します。ワイヤーフレームレベルではなく、画像なども生成されたものを使って、よりリアルなUIを生成します。

Galileo AI

まとめ

AIでUIを生成するサービスは、デザイナーの作業負荷を大幅に軽減します。その分、デザインと検証を繰り返し行えるようになり、より優れたデザインが実現できるでしょう。

また、プロトタイプやワイヤーフレームの作成期間を短縮できれば、プロジェクトの検証と修正を素早く実現できます。これはプロジェクトの成否において、大事な役割を担うはずです。

Hexabaseでは、テキストからシステム開発を実現するAIドリブン開発機能の開発を進めています。ご興味があれば、ぜひお問い合わせください。

AIドリブン開発 先行無料登録フォーム | Hexabase