Baroque
Baroqueは、プロンプト、テンプレート、またはURLの「再作成」から本番環境対応のWebおよびモバイルUIを生成するAI搭載のデザインスタジオであり、スタイルを選択して編集可能なデザインを迅速に作成できます。
https://getbaroque.com/?ref=producthunt&utm_source=aipure
製品情報
更新日:2026年06月16日
Baroqueとは
Baroqueは、完全な製品インターフェースを迅速に作成するための「究極のデザインスタジオ」として位置付けられている、ブラウザベースのAI UIデザインジェネレーターです。白紙の状態から始めるのではなく、デザインスタイルを選択し、SaaSランディングページ、ダッシュボード、Eコマースストア、ポートフォリオ、モバイルアプリなど、構築したいものを記述すると、Baroqueは洗練された本番環境対応のレイアウトを数秒で生成します。また、テンプレートライブラリも提供しており、一般的なデザインおよび構築ワークフロー（FigmaやHTML/CSSを含む）への出力エクスポートをサポートしているため、初期段階のアイデア出しから出荷可能なUIまで実用的なツールとなっています。
Baroqueの主な機能
Baroqueは、プロンプト、テンプレート、または既存のURLから、すぐに使えるWebおよびモバイルデザインを生成するAI搭載のUIデザインスタジオです。ユーザーは視覚スタイルを選択し、構築したいものを記述するだけで、ワイヤーフレームや再デザインされたページコンセプトを含む編集可能な出力を迅速に入手でき、HTML/CSSやFigmaへのエクスポートオプションも利用できます。サインアップなしでコア体験を試すことができ、アイデアからインターフェースまで迅速なイテレーションが可能です。
プロンプトからデザイン生成: 製品や画面を自然言語で記述し、スタイルを選択するだけで、Baroqueは数秒で完全なUIデザインを生成します。
ワイヤーフレームモード: 単一のプロンプトからピクセルパーフェクトなワイヤーフレームを作成し、レイアウト構造（グリッド、タイポグラフィ、コンポーネント）を自動的に処理します。
URL「再作成」による再デザイン: 任意のURLを貼り付けると、Baroqueが選択したスタイルでサイトを再構築し、コーディングする前に新しい方向性をプレビューできます。
テンプレートライブラリ: 編集可能で本番環境に対応したテンプレート（SaaSランディングページ、ダッシュボード、Eコマース、ポートフォリオ、企業サイトなど）から開始できます。
FigmaおよびHTML/CSSへのエクスポート: 生成されたデザインを一般的なワークフローにエクスポートすることをサポートし、デザイナーや開発者への引き渡しを可能にします。
Web + モバイル対応: Webとモバイルの両方のデザインを生成します（Web + モバイルと表記され、モバイルはBETAとマークされています）。
Baroqueのユースケース
スタートアップMVPのUI作成: 創業者は、ランディングページ、オンボーディング、コアアプリ画面を迅速に生成し、アイデアを検証してより早くリリースできます。
代理店のコンセプト作成とクライアントへの提案: 代理店は、複数のスタイル方向を迅速に作成（テンプレートまたはURL再作成経由）し、提案とイテレーションを加速できます。
Eコマースストアフロントのプロトタイピング: 新しいストアや再デザインの探索のために、商品リスト、商品詳細、カート/チェックアウトのUIコンセプトを作成します。
SaaSダッシュボードのデザイン: 社内ツールやSaaSアプリ向けに、標準コンポーネント（テーブル、チャート、KPIカード）を備えた分析ダッシュボードや管理パネルを生成します。
マーケティングサイトの再デザイン探索: マーケティングチームは、既存のURLを貼り付け、エンジニアリング時間を投入する前に代替スタイル/レイアウトをプレビューできます。
ポートフォリオおよび個人ブランドサイト: クリエイターは、クリーンでタイポグラフィを重視したポートフォリオレイアウトを生成し、コンテンツをカスタマイズして迅速に公開できます。
メリット
プロンプト、テンプレート、またはURLから、すぐに使えるUIデザインを迅速に生成します
複数のエントリーポイント（ワイヤーフレーム、再作成、テンプレート）が異なるワークフローに対応します
FigmaおよびHTML/CSSへのエクスポートは、引き渡しと実装をサポートします
デメリット
クレジットベースの制限（例：無料ティアで月25クレジット）により、大量の使用が制限される可能性があります
モバイルはBETAと表示されており、潜在的な制限や不安定性を示唆しています
品質とブランドの特異性については、洗練された最終デザインのために手動での調整が必要な場合があります
Baroqueの使い方
1) Baroqueを開く: https://getbaroque.com/ にアクセスし、すぐに開始します（サイトには「今すぐ試す — 登録不要」と表示されています）。
2) デザインしたいものを選択する: ホームページで、主要なワークフローのいずれかを選択します。ターゲットプラットフォームに応じて、ワイヤーフレーム（プロンプトからレイアウトを生成）、再作成（既存のURLを再設計）、またはWeb/モバイル（ベータ版）を選択します。
3) デザインスタイルを選択する: 利用可能なスタイル/テンプレートから視覚スタイルを選択します。製品フローでは、「スタイルを選択し、ビジョンを記述すると、数秒で本番環境対応のデザインが手に入ります」と強調されています。
4) (オプションA) /wireframeでプロンプトから生成する: /wireframeフローを選択します。単一のプロンプトでレイアウトを記述し、必要なコンポーネントを指定します。Baroqueは、タイポグラフィとグリッドが自動的に処理されたワイヤーフレームを組み立てます。
5) 生成されたワイヤーフレーム/デザインを確認する: 生成された画面を検査し、構造（ナビゲーション、セクション、カード、テーブル、チャートなど）が意図と一致していることを確認してから次に進みます。
6) (オプションB) /recreateで既存のサイトを再設計する: /recreateフローを選択します。任意のURLを貼り付け、スタイルを選択し、希望する方向性を記述します。Baroqueはサイトを「再構築」し、コードを書く前に新しい外観をプレビューできます。
7) (オプションC) /templatesから始める: /templatesを開き、厳選されたテンプレート（例：SaaSランディングページ、ダッシュボード分析、Eコマースストア、ポートフォリオミニマル、企業ウェブサイト）を選択します。コンテンツに合わせてカスタマイズします。
8) 反復：プロンプト/スタイル/テンプレートを調整する: 出力が適切でない場合は、説明（レイアウト要件、セクション、コンポーネントの選択）を調整するか、スタイル/テンプレートを切り替えて、デザインが目標に一致するまで再生成します。
9) デザインをエクスポートする: エクスポートオプション（プランに記載）を使用して、HTML/CSSおよび/またはFigmaにエクスポートし、制作の引き渡しと実装を行います。
10) (オプション) より多くのクレジット/機能が必要な場合はプランを選択する: 制限に達した場合は、月間クレジットと含まれる機能（例：テンプレート＆スタイル、ブランドキット、AIイラスト、カスタムデザインルール、エクスポート）に基づいて、料金プラン（Starter/Pro/Pro+）を選択します。
Baroqueのよくある質問
バロックは、スティングが開発・発売したローグライクのロールプレイングゲームです。PlayStation版は1999年10月28日に発売され、「バロックインターナショナル」（JP）としても知られ、日本でWii版もリリースされています。
Baroqueに類似した最新のAIツール
Personalized License Plate Generator
ユーザー入力に基づいてユニークでパーソナライズされたナンバープレートデザインを生成するAI駆動のツールです
Keak
Keakは、ウェブサイトのバリエーションを自動的に生成し、テストを開始し、コンバージョンを最適化するAI駆動のA/Bテストツールです。
Makeasite
Makeasiteは、ユーザーがプロンプトを使用して迅速にウェブサイトを作成および共有できる革新的なウェブサイトビルダーです。
Adviseful
Advisefulは、ITコンサルタントやデジタルエージェンシー向けに、アイデアを数分で有資格のリードに変えるウェブおよびモバイルアプリの計画を加速するAI駆動のツールです。
Baroqueに似た人気のAIツール
GPT Engineer
GPTエンジニアは、誰でもAIエンジニアとチャットすることでウェブアプリケーションを構築できるAI駆動のソフトウェア開発ツールです。
Framer
Framerは、デザイナーが直感的なインターフェースを使用して驚くべきレスポンシブウェブサイトを作成し、コーディングなしで瞬時に公開できる強力なウェブビルダーです。
Framer Workshop
Framer Workshopは、Framerに組み込まれたAI搭載のコンポーネントジェネレーターであり、デザイナーや開発者は、簡単な会話型プロンプトを通じてコードを記述せずに、高度でカスタマイズ可能なウェブサイトコンポーネントを作成できます。
Wireframer
Wireframerは、FramerによるAI搭載ツールであり、簡単なプロンプトからクリーンでレスポンシブなWebページレイアウトとワイヤーフレームをすばやく生成し、デザイナーが特定の視覚スタイルに縛られることなく構造的な青写真を作成するのに役立ちます。