新プラン「 Merge AI 」| 詳細とアップデート情報
この新しいプラン「Merge AI」は、再利用可能なUIパターンのアクセシビリティとAIを活用したインタラクティブなプロトタイピングを求める開発者や多くのチームにとって、画期的なソリューションになることでしょう。
あるProductHunt Launchのレビュアーは、UXPinをプロダクトデザインの「Apple」と呼びました。
Appleは革新性、創造性、未来性を象徴していますが、これらは私たちにとっても重要な価値観でもあります。
新プラン「Merge AI 」では、多くのチームでのデザイン民主化を目的としています。
ついに、品質と一貫性を損なうことなく、インターフェースを速やかに作成できるようになりました。
本記事では、この新しいプランで提供される内容を詳しく見ていきますので、ぜひ Merge AI をお試しください。
Merge AI を体験してみませんか？ここで紹介する機能はすべてトライアルでご利用いただけます。
４つの ビルトインMergeライブラリ
– Production Ready コードでバックアップ –
統一感を出すためにボタンを描き直さないといけないことがあったことを覚えていますか？
Merge AIを使えば、MUIv5、React Bootstrap、Ant design（React ベースのライブラリ）や Tailwind UI（HTMLのみです）のようなインターフェースのレイアウトを構築するためのトップクラスのオープンソースライブラリから提供される、完全にコード化された４つのコンポーネントにアクセスすることができます。そのため、かつてのように再描写する必要はもうありません！
ライブラリを選択し、そのコンポーネントをキャンバスに配置すれば、ベクターベースのツールよりも８.６倍速くレイアウトを構築できるのです。（検証すみ）
とはいえ、ここで最も重要なのは、UI コンポーネントがすべてコードでバックアップされているため、デベロッパーの環境に合わせてデザインを作り直す心配がないという点です。
追加されたもの
MUIv5、React Bootstrap、Ant design、Tailwind UI
やり方
-
UXPinを開く
-
新しいプロトタイプを作成する
-
Design System Libraries （デザインシステムライブラリ）に進む
-
Merge のライブラリを選択する
事前構築済みのレイアウトとパターンの使用
新プランの Merge AI では、ECの商品ページ、チェックアウト、社内アプリなど、最もよく使われているレイアウトにアクセスできます。
そのテンプレートは自分のものになるので、編集や、要素を追加したり、テーマ切り替えなどができます。
また、レイアウトはすぐに使えるコードで裏打ちされており、オープンソースのライブラリコンポーネントを使って構築されています。
そのため、使いたいコンポーネントライブラリの一貫性を保ちながら、調整も加えることができます。
追加されたもの
完全にコード化されたインタラクティブなレイアウトとパターン
やり方
-
UXPin を開く
-
プロジェクトが表示されるまで下にスクロールする
-
レイアウトを選び、そのコードをコピーする
ChatGPT向けの AI Component Creator
生産性を上げる最大のものの一つとして最近は ChatGPT がありますが、OpenAI APIを介した統合により、プロンプトでTailwind CSSコンポーネントを生成することができるようになりました。
また、データレポート、サインアップフォーム、ショッピングカードなど、HTMLが裏側の複雑なコンポーネントを生成し、完全にカスタマイズすることができます。
追加されたもの
AIコンポーネントクリエーター（AI Component Creator）
やり方
-
新しいプロトタイプを作成する（UXPinにサインアップする）
-
「Quick Tools（クイックツール）」バーに移動する
-
「AI Component Creator（AIコンポーネントクリエーター）」を開く
-
OpenAI API キーを貼り付ける
-
プロンプトを書く
UXPin と StackBlitz の統合
StackBlitz は、Webブラウザから直接Webアプリケーションの作成、共有、共同作業をシンプルにする開発環境です。
そこで、ユーザーがデザインをコードとして StackBlitz で開くことができる統合を構築しました。
追加されたもの
コードのエクスポートがしやすくなるStackblitz統合
やり方
-
ブラウザでプロトタイプを開く
-
「Preview Prototype（プロトタイプのプレビュー） 」をクリックする
-
「Spec mode（Specモード）」に移動する
-
「Copy to Stackblitz（Stackblitz にコピー）」をクリックする
クリーンで動作するコードをUI からエクスポートする
以前、ある ProductHunter からUXPinは「デザインからコードへのGoogle翻訳機」と呼ばれたことがありましたが、それがとても印象的でした。
UXPin Merge では、ベクターコンポーネントではなく、コード化されたコンポーネントが使われているため、コンポーネントの背後にあるコードをコピーできるのは当然です。
そして今、 ワンクリックでプロトタイプ全体のコードをコピーできるようになりました。
当社は Reactベースのコンポーネントライブラリに対応しているため、独自のコンポーネントライブラリをお持ちの場合は、弊社が統合作業を行いますので、ぜひこちらからお気軽にお問い合わせください。
追加されたもの
コードのエクスポート
やり方
-
ブラウザでプロトタイプを開く
-
「Preview Prototype（プロトタイプのプレビュー）」をクリックする
-
「Spec mode（スペックモード）」に移動する
-
「Copy code （コードをコピーする）」をクリックする
Merge AI を無料でお試し
長い間UXPinをご利用いただき、その変遷を見守っていただきありがとうございます。
UXPin はペーパープロトタイピングツールから始まり、オールインワンデザインツール、そして「Code-to-Design（コードからデザイン）」のファシリテーターとなりました。
今回のリリースは、製品開発プロセスにおいて、さらに短時間で MVP（実用最小限の製品）を構築できるようになりましたので、特別なアップデートになりました。
UXPin Merge AI をせひ無料でお試し下さい。
