新プラン「Merge AI」は、再利用可能なUIパターンやAIを活用したインタラクティブなプロトタイピングを提供し、デザインの民主化を目指します。品質や一貫性を保ちながら、迅速なインターフェース作成を可能にする画期的なソリューションです。
AIを駆使して、最適なデザイン案を提示し、デザイナーの作業効率を劇的に改善します。それでは「Merge AI」プランでできること、機能を紹介します。
AI Component Creator
内蔵されたChatGPT統合によって、使用するプロンプトに基づいた完全にカスタマイズ可能なコンポーネントをAIで生成することができます。
AI Component Creatorは入力フォーム、メニュー、モーダルなどの完全にコード化されたコンポーネントを生成します。そしてデザインが完了すれば、プロトタイプから実用的なコードをコピぺするだけで、製品開発のフェーズに入れます。
オープンソースのコンポーネントライブラリ
現在利用できるライブラリには、Tailwind、MUI、Ant Design、Boostrapがあります。これによってテーマ化やカスタマイズができて、要素は変換なしで開発環境にコピー&ペースト可能です。
コードはオープンソースのライブラリから提供されていることから、自身がコードの所有者になるので、コード全体をコピーしてUXPin Mergeの外部でも使うことができます。
Tailwind UI
UXPinで利用可能なTailwind UIコンポーネントのライブラリがすべて加わります。Tailwind は再利用可能な CSSコードの最良の選択肢の一つであり、ゼロから始める必要なく洗練されたフロントエンドをサッと構築したい人にピッタリです。
MUIv5
UXPinのMUIv5ライブラリは、簡単操作や柔軟なテーマ化を提供し、一貫性のあるUIを維持できます。公式ドキュメントへの即時アクセスや、状態を含むコンポーネントの再利用が可能で、クリーンなコードをそのまま開発環境で使用できるので効率的かつ高品質なデザイン・開発プロセスを実現します。
Ant Design
Ant DesignはReactコンポーネントライブラリで、UXPin内でドラッグ&ドロップ操作に対応しています。検索して選択したコンポーネントを使用し、公式ドキュメントと一致するクリーンなコードをコピー可能です。アバターやカード、入力などの基本コンポーネントから、レイアウト構築やアラート、ナビゲーション要素まで幅広く利用できます。
React Bootstrap
Bootstrap は、MUIに次いで最もよく使われているオープンソースのReactコンポーネントライブラリの１つで、デザインシステムの基盤を形成しています。
テンプレート
今回のリリースにはカスタマイズ可能なテンプレートが多数用意されています。ユースケースに合ったレイアウトを選び、好きなように編集し、自分のUIとして形にしてください。
テンプレートは UXPinだけのものではなく、コード化されたコンポーネントと同様に、要素の背後にあるコードをコピーして、自社製品を構築するために使うことができます。
テンプレートに含まれるものを紹介
ダッシュボード
活動チャート、注文履歴、販売レポート、検索バーを備えた本格的なUIダッシュボードのテンプレートを取得する。内部用ツールに最適。
ブログ
記事構成、画像、著者アバター、タグ、パンくずを備えたブログ用のレイアウトを使う。
ストア
ストアテンプレートをコピーして独自のコンテンツで画像を入力したり、タグ名の調整、価格の編集、独自のランキングの追加をする。
商品詳細
画像、星評価、価格変更などの UI 要素を含む商品カードを編集する。
チェックアウト
チェックアウトページで遊び、商品のニーズに合わせて個別化し、その裏にあるコードをコピーする。
Specモードの改善
リニューアルされたUXPinのSpecモードは、MUIv5ライブラリに対応し、StackBlitz統合やクリーンなReactコード生成、リサイズ可能なスペックパネル、折りたたみ可能なコードセクションなどの新機能を追加。これにより、デベロッパーはプロトタイプから実装への移行を効率化できます。
JSON Tree Viewer
JSON コードエディタの使いやすいバージョンである JSON Tree Viewer がリリースされます。ユーザーはノードを広げたり折りたたんだり、データ内を簡単に移動したり、視覚的に変更を加えることができます。また、JSON5のフォーマットにも対応していますので、二重引用符を使う必要はありません。
Merge AIを体験する
Merge AIは、UXPin Mergeテクノロジー、AI Component Creator、コードエクスポートをフルに使いたい方向けのオプションです。また、これによって製品開発プロセスにおいて、さらに短時間で MVP（実用最小限の製品）を構築できるようになりました。すでにReact ベースのコンポーネントライブラリをお持ちの場合は、独自のコードコンポーネントを使ってデザインに統合できます。
UXPinについての詳細は弊社ホームページをご覧ください。
また、今回紹介したMerge AIプランの料金詳細については、こちらのページからご確認いただけます。UXPin はペーパープロトタイピングツールから始まり、オールインワンデザインツール、そして「Code-to-Design（コードからデザイン）」のファシリテーターとなりました。
Merge AIは、単なるデザインツールの枠を超え、真の意味でのデザインシステムの実現をサポートします。デザインと開発が一体化した新しいワークフローを体験しませんか？無料オンライン相談および14日間のトライアルを提供していますので、お気軽にご利用ください。
UXPin Inc.
UXPinは、2010年の設立以来UXデザイン専門会社として、コードベースで動くSaaS基盤のUXデザインツールを提供しています。UXPinにより、デザイナーにはノーコードで本物のようなプロトタイプを、デベロッパーには製品化に実装できるコードを提供できます。
エンタープライズ導入に関する問合せ先：
salesjp@uxpin.com
記事はPR TIMESで掲載されているテキスト・画像を使用しています。これはPR目的で使用しているものです。テキスト・画像の使用にあたってはPR TIMES社に個人メディアでの掲載について、承諾を得た上で掲載しています。ただし、掲載しているものに不都合なことがありましたら削除等の対応をします。記事の内容はリリース当時のものです。イベントやキャンペーンなど現在では行われていないものもありますのでご注意ください。また、リンク先の他サイトで提供される情報・サービスについても、責任を一切負いかねますのでご了承ください。
