【製品最新ニュース】UXPin Mergeでデザインビジョンを実現する

弊社はこの数ヶ月の間、新機能の開発に取り組んできました。そして、みなさまのおかげさまで、ついにそれをお見せする時がきました。

この記事では、さらに進化したUXPin Mergeに関する 最新アップデート情報をご紹介していきますので、開発者やデザイナー、デザインチームに所属の方など、ぜひ最後までご覧ください！

UXPinの進化

製品のアップデートをご紹介する前に、UXPinの誕生秘話をお話しさせてください。

弊社「UXPin」のツールは、イノベーションへの情熱と、デザインを多くの人にとって身近なものにしたいという強い思いから開発しました。

プロトタイピングを普及させ、デザインのアイデアを素早く構想するための一般的な概念にすることを目的に、紙のプロトタイピング用メモ帳として始まりました。

​​そして、２０１１年頃、デジタルワイヤーフレームのソリューションを開発しました。

当時このタイプのデザイン作業には限界がありましたが、UXPinはデザイン開発での欠点を改善するべく、デザイン以外のチームメイトとのより良い連携、迅速なイテレーション（反復）への挑戦など、新たな利点を取り入れたソリューションを生み出しました。

UXPinは当初からデザインプロセスの改革を目指していくなかで、ピクセルで操作する代わりに、コードで裏付けする形にこだわり続けました。

また、単純なモックアップに焦点を当てるのではなく、高度でインタラクティブなプロトタイプを構築する機能をユーザーに提供するために開発しました。

デザインハンドオフを後回しにするという「お決まりルート」ではなく、最初からデザインプロセスに融合させました。

これは、Spec （スペック）モードのような環境を作ったことにより、開発者はプロパティの検証や距離の測定、デザインから生成されたスタイルガイドを取り組むことができ流様になりました。

ここでUXPinの技術発展は終わらず、次のステップとして、チームが「信頼できる唯一の情報源（コード化されたUIコンポーネント）」を共有することで、デザインと開発の間のギャップを埋めることを目指しました。

そこで、誕生したのが UXPin Mergeという独自のデザイン技術です。

そして今、UXPinはさらに多くの人にとって包括的なデザイン環境を広めていきたいと考えています。

変化への道のり

この道のりは、開発者がデザイナーの代わりにUIを作成しなければならない場面がよくあるという重大な気づきから始まりました。

ユーザーと話した結果、UXPin Mergeは、デザインにアクセスできるようにし、デザインの新時代を告げる上で重要な役割を果たすことがわかりました。

つまり、デザインと開発の両方を 1 つの一貫したプロセスに統合できるものであるということです。

最も人気のあるコード化されたコンポーネントライブラリであるMUI、Ant Design、Bootstrap、Tailwind UIを皮切りに、UXPin Mergeをドラッグ＆ドロップのUIビルダーへと進化させました。

UXPin Merge 最新アップデート：ドラッグ＆ドロップでコードを書き出せるUIビルダー

私たちが掲げるミッションを達成すべく、この度、製品開発プロセスがもっと簡単になるために次のような機能を導入しました。

それでは、ひとつずつ見ていきましょう

AI Component Creator

AIを組み込むことを決めた理由は、AIによって多くの環境で生産性、作業効率、そして UIとコードの世界、つまり製品開発が改善されることが証明されたからです。

内蔵されたChatGPT統合によって、使用するプロンプトに基づいた完全にカスタマイズ可能なコンポーネントをAIを生成することができます。

必要なコンポーネントを記述するだけで、数秒でキャンバス上に表示されます。再利用や共有が必要な場合は、「UXPinパターン」として保存しましょう。

AI Component Creator は画面左側にあります。下のGIFを参照ください。

現在では、Tailwindコンポーネントライブラリと連動してます。（こちらについては別の記事で詳しくお話します）

これは、Tailwind UI ライブラリを補完するカスタムコンポーネントを入手するための優れた機能です。AI Component Creatorは入力フォーム、メニュー、モーダルなどの完全にコード化されたコンポーネントを生成します。

そしてデザインが完了すれば、プロトタイプから実用的なコードをコピぺするだけで、製品開発のフェーズに入れます。

プラグインには OpenAIのAPI キーが必要ですが、そちらのサポート体制は整っていますのでご安心ください。

プラグインへのお問い合わせについては、UXPinのサポートチーム (salesjp@uxpin.com) にご連絡ください。

オープンソースのコンポーネントライブラリ

新しいUIライブラリが追加され、デザインと開発の間で１００%コードパリティを利用できるようになりました。

このリリースには、MUIv5、Ant Design、React Bootstrap、 Tailwind UI という、テーマ化やカスタマイズがきちんとできて、要素は変換なしで開発環境にコピぺできる強力な UIライブラリが４つも含まれています。

コードはオープンソースのライブラリから提供されているので、自分がそのコードの所有者になります。

そのため、コード全体をコピーしてUXPin Mergeの外部でも使うことができます。

UXPin Mergeは、UIやコードを探索するための安全なデザイン環境を提供するだけであって、当社のツールありきのコードではないということです。

１．Tailwind UI

UXPinで利用可能な Tailwind UI コンポーネントのライブラリがすべて加わります。

Tailwind は再利用可能な CSSコードの最良の選択肢の一つであり、ゼロから始める必要なく洗練されたフロントエンドをサッと構築したい人にピッタリです。

UXPinで Tailwind ライブラリを開き、必要なコンポーネントを選びます。プロップを調整してSpec Modeモードに移動し、ワンクリックでデザインからコードをコピーする という形になります。

これには、ボタン、アラート、入力、アバターグループ、ドロップダウンなどコンポーネントが１８種含まれています。

さらに、AI Component Creator を使う場合でも、ライブラリの「カスタム コンポーネント」オプションを使用する場合でも、ユーザーには、カスタム Tailwind コンポーネント追加の選択肢があります。

また、カスタムコンポーネントを使えば、Tailwind UI のどのコードでもUXPinに貼り付けることができます。

例えば、ヒーローセクションが欲しいとします。

その場合、Tailwind UI > Components（コンポーネント） > Marketing（マーケティング） > Hero Sections（ヒーローセクション）に移動し（クイックリンクはこちら）、右側のアイコンをクリックしてコードをコピーします。

そして UXPinの Tailwind ライブラリ に移動し、「Custom component（カスタムコンポーネント）」という名前の最初のコンポーネントをクリックします。

コードを貼り付けて、ヒーローセクションがキャンバスにドロップされる様子をご覧ください。

さらに、ユーザーはこの統合があれば、以下のようにテーマを設定することができます：

• プロトタイプ全体にテーマを伝播させるためのGLOBAL THEME（グローバルテーマ）プロパティ

• 特定のページでのみテーマを変更するLOCAL THEME（ローカルテーマ）プロパティ

Tailwind の詳細については、ヘルプドキュメントをご覧ください。

２．MUIv5

UXPin のもう一つの新しいビルトインライブラリは MUIv5 です。

無料トライアルがあり、チュートリアルと実際に機能するレイアウトを提供しています。

Tailwind と同様、ビルトインライブラリから好きなコンポーネントを取り込んでキャンバスに配置し、プロパティを調整してコードをコピーするだけです。

MUIv5 は、多くのチームでデザインシステムとして使われている Reactライブラリです。

UXPin を使えば、２つの環境を常に更新することなく、一貫したUIを手に入れることができます。

• ワンクリックでドキュメントにアクセス – コンポーネントをキャンバス上に配置してそれをクリックすると、［Properties panel（プロパティパネル）］にリンクされている公式ドキュメントをプレビューできる。

• ユニークなデザインにすべくテーマを切り替え – MUIv5 は完全にテーマ化可能で、使いたいテーマに合わせて更新することができる。

• 同じ要素を何度もデザインし直さなくていい – 大抵のデザインツールはコンポーネントの外観を一貫したものに保つが、当社ではそれより一歩進んで、コンポーネントの状態もライブラリに組み込まれる。

このライブラリ（他のライブラリ含む）のアップデートにおいての魅力ポイントとしては、使用する各コンポーネントの背後にクリーンなコードが含まれていることです。

他のデザインツールとは違って、開発環境で使用できるようにコンポーネントを変換する必要がないのです。

MUIv5 のライブラリコンポーネントの使い方は以下の記事をご覧下さい：【React向け】 ダッシュボード デザインのチュートリアル

デザインで MUIv5 を使いこなせるようになるために、ぜひこちらの動画をご覧ください。最初のエピソードはこちら。

 

３．Antd (Ant Design)

このリリースには Ant Designも含まれています。

Ant Design は React のコンポーネントライブラリで、UXPin の他のライブラリと同様にドラッグ＆ドロップで動作します。

使いたいコンポーネントを検索し、それをデザインで使い、公式ドキュメントと完全に一致するクリーンなコードをコピーします。

もしチームがデザインシステムをお探しなら、Antd が React のコンポーネントライブラリのベースになります。

UXPin に含まれるコンポーネントには、アバター、パンくずリスト、カード、入力がありますが、レイアウトの構築、アラートなどのフィードバックを追加、ナビゲーション向けの要素もあります。

これらも無料トライアルでお試しいただけます。UXPin Merge にサインアップする。

４．React Bootstrap

UXPin Merge には React Bootstrap も統合されています。

Bootstrap は、MUI に次いで最もよく使われているオープンソースの React のコンポーネントライブラリの１つで、デザインシステムの基盤を形成しています。

Editorの［Design Systems Libraries（デザインシステムライブラリ）］に移動して、React Bootstrap を選ぶだけで、Bootstrap の公式ドキュメントと完全に一致する数多くのビルトインコンポーネントを探索できます。

キャンバス上に React Bootstrap のコンポーネントをドラッグ＆ドロップして、プロップを管理し、レイアウトを配置して、［Spec（スペック）モード］でコードをコピーします。

気になった方には、React Bootstrap にはトライアルがあるので、独自のトライアルキットでお試しいただけます。

Reactライブラリを始めてみませんか。UXPin Merge の無料お試しはこちら。

テンプレート

真っ白なキャンバスではアイデアも浮かびづらいです。今回のリリースにはカスタマイズ可能なテンプレートが多数 用意 さ れて います。

ユースケースに合ったレイアウトを選び、好きなように編集し、自分自身の UI として形にしてください。

テンプレートは UXPinだけのものではなく、コード化されたコンポーネントと同様に、要素の背後にあるコードをコピーして、自社（オリジナルの）製品を構築するのに使うことができます。

そして、上記の MUIv5 コンポーネントライブラリを使用してテンプレートを作りました。

このテンプレートは公式ドキュメントに基づいて、クリーンな React コードが含まれており、UXPin Mergeの優れた機能を表します。

テンプレートに含まれるものの紹介

ダッシュボード

活動チャート、注文履歴、販売レポート、検索バーを備えた本格的な UI ダッシュボードのテンプレートを取得する：内部用ツールに最適。

ブログ

記事構成、画像、著者アバター、タグ、パンくずを備えたブログ用のレイアウトを使う。

ストア

ストアテンプレートをコピーして独自のコンテンツで画像を入力したり、タグ名の調整、価格の編集、独自のランキングの追加をする。

商品詳細

画像、星評価、価格変更などの UI 要素を含む商品カードを編集する。

チェックアウト

チェックアウトページで遊び、商品のニーズに合わせて個別化し、その後ろにあるコードをコピーする。

Specモードの改善（ベータ版）

Specモードもリニューアルしました。 現時点では MUIv5 ライブラリで利用できますが、後に完全なリリースが行われる予定です。

UXPin のSpecモードは、仕様、アセット、HTML、CSS、JSX コードをデベロッパーがコピーできるようにする機能です。

MUIv5 コンポーネントを使用してプロトタイプを作成する場合、Specモードの追加機能があります。以下で見てみましょう。

Stackblitzの統合

ボタンをクリックするだけで、ユーザーは人気のフロント開発環境である Stackblitz にコードをコピーすることができる。

公式ドキュメントと完全に一致するクリーンなReactコード

デベロッパーの環境にコピーしたり、利用可能な統合機能のいずれかを使用できるクリーンな作業コードを取得できる。

リサイズ可能なスペックパネル

固定サイズではなく、ユーザーがスペックパネルのサイズを変更できる。

折りたたみ可能なコードセクション

不要なセクションを折りたたむことができる、小さいが強力なユーザビリティの改善。

JSON Tree Viewer

JSON コードエディタの使いやすいバージョンである JSON Tree Viewer がリリースされます。

ユーザーはノードを広げたり折りたたんだり、データ内を簡単に移動したり、視覚的に変更を加えることができます。

また、JSON5 のフォーマットにも対応していますので、キーに二重引用符を使う必要はありません。

JSON Tree Viewer の使い方はヘルプをご覧ください。

UXPin Merge を始めよう

この戦略的転換により、デベロッパーが素晴らしい UI を作成できる未来が期待され、UXPin Mergeとデザインコミュニティ全体にとって新たな時代がやって来ます。

ぜひお試しいただき、TwitterでUXPin Mergeの新しいアップデートについての感想をお聞かせください。

もう一つの大きなニュースは、このような機能をすべて含む新しい料金プランの登場です。

Merge AI

Merge AIは、UXPin Merge テクノロジー、AI Component Creator、コードエクスポートをフルに使いたい方向けのオプションです。UXPin Merge をぜひ無料でお試しください。

すでにReact ベースのコンポーネントライブラリをお持ちの場合は、独自のコードコンポーネントを使ってデザインを続けられるように統合することができます。

Merge AIプランについての詳細はこちらのブログをご覧ください。

無料デモをご希望の方はこちらからご相談ください。