このブログでは、UXPin Mergeにある「Patterns」機能をご紹介いたします。Patternsを使うことで、簡単に新しいコンポーネントや変数の作成や再利用が可能です。これによって、デザインプロセスでのスピード感と一貫性の向上につながります。さらに、新しいUI要素を試してみたり、デザインシステムの拡張したり、同じプロパティを何度も設定する時間を節約することもできるんです。

 Pattern を試してみたい方は、まずはUXPinの14日間の無料トライアルをお試しください。

UXPin Mergeが選ばれる理由

UXPin Mergeは、コードコンポーネントをUXPinのデザインエディタに取り込むことができる技術を提供します。この技術により、デザインチームは完全に機能する要素を使って、インタラクティブなプロトタイプを構築することができます。たとえデザイナーのよりもデベロッパーの数が大きく上回っていたとしても、UXPin Mergeを使用するチームはデザインの拡張だけでなく、デザインシステムの高い成熟度も実現できることがわかったのです。

UXPinはこのMergeテクノロジーを日々進化させており、デザイナーがUXPinにコンポーネントをインポートしたり、エディタで使用できる方法を研究しています。そこで、複雑なコンポーネントをUXPinで構築・保存可能にする機能「 Patterns 」を発表しました。

堅牢なデザインライブラリをスピーディに構築できる

UXPinでは、Storybook、Git、NPMパッケージ経由でコードコンポーネントライブラリをUXPinにインポートできるだけでなく、プロトタイプですぐに再利用可能で、定義済みのUIコンポーネントを備えたデザインライブラリがあります。

この新しいMerge機能によって、デザイナーの生産性を向上につながり、デザインシステムの拡張、コード化していない新しいコンポーネントのテストができます。これにより、以下のことがずっと楽になりました：

• コンポーネントのバリエーションとプロパティの保存及び再利用
• Mergeコンポーネントをより大きく、より高度な要素と結合
• まだコード化されていない、定義済みのプリセットを持つ新しいコンポーネントの作成及び共有

 Patterns は標準的なUXPinライブラリとして機能しますが、原子や基本的なコンポーネントだけではなく、より複雑なものを作成することができます。また、MergeコンポーネントとClassicコンポーネントと合わせて、開発者にコーディングを依頼することなく新しい要素を試すこともできます。

 Patterns の使い方

 Patterns は、Mergeのアカウントをお持ちの方で、Git、Storybook、およびNPMパッケージなどすべてのMerge統合にてお使いいただけます。

UXPin日本語公式ドキュメントにあるPatternsの使い方をご参照ください。

 Patterns はStorybook統合でお試しいただけます。UXPinの無料トライアルで、デザインプロセスでコードコンポーネントを使ってみて、そのスピード感と迅速さをぜひご体験ください。

The post コンポーネントを素早く構築 & 保存できる「 Patterns 」とは？ appeared first on Studio by UXPin.

UXPinのnpm統合により、デザインチームはより忠実でコード同様の機能でプロトタイプが作成できるようになりました。これまではエンジニアにコーディング依頼が必要だったところを、UXPinが持つコンポーネント駆動型プロトタイピング機能によって、デザイナーでも高忠実度なプロトタイプ作成の実現が可能です。

npm統合で、簡単にコンポーネントライブラリをUXPinのデザインツールにインポートできます。これには、技術面での複雑な設定は不要で、共有コンポーネントのインタラクティブ性を最大限に活かすことができるのです。今回は、Mergeを使ってコンポーネントの統合が実際にいかに速く行えるのか見ていきましょう。

さっそくGitレポジトリ、Storybook、または最新のnpmからUXPinにコンポーネントを統合させてみましょう。UXPin Mergeテクノロジーついての詳細は、こちらのページをぜひご覧ください。

UXPin Merge とは

npmについてお話しする前に、UXPin Mergeの概要を説明します。UXPin Mergeはコンポーネント駆動型プロトタイプを実現するコードベースのテクノロジーです。デザイナーはゼロからデザインする代わりに、レポジトリからProduction ReadyなUI要素を使用して、高忠実度で完全に機能するプロトタイプを構築することができます。

デザイナーはビジュアル要素、エンジニアはその背後にあるコードに取り組むことで、製品開発チーム全体で「信頼できる唯一の情報源（Single source of turth）」が構築されます。これによって、実際に、UXPin Mergeを導入したPayPalやTeamPasswordのチームは、デザインの品質、スピード、一貫性向上に成功しました。

UXPin で「npm統合」って何？

UXPin Mergeを非公開のデザインシステムで使う場合、同期のためのレポジトリをセットアップする上で技術的な知識が必要になってしまうのですが、オープンソースのコンポーネントライブラリを使う場合だと、デザインチームは直感的なダッシュボードを使用して簡単にnpm統合を完了できます。

また、デザイナーはMergeコンポーネントマネージャー機能を使って、コンポーネントのインポートとプロパティを管理することができます。たとえば、 Bootstrapのコンポーネントライブラリまたは以下９つのVariants（変数）からButtonをインポートできます：

• プライマリー（primary）
• セカンダリー（secondary）
• 成功（success）
• 危険（danger）
• 警告（warning）
• 情報（info）
• 明るい（light）
• 暗い（dark）
• リンク（link）

これらのVariantsはUXPin上の画面右にあるプロパティパネル（Properties Panel）でドロップダウンとして表示されます。Mergeはほとんどのコンポーネントにホバーステートも含んでいるため、デザイナーはこのような詳細を気にせず、プロトタイピングにすぐに取り掛かれることができます。

デザインチームは、React Bootstrapのドキュメントから、インポートするコンポーネントのプロパティを探すことができ、全てのプロパティまたはプロジェクト関連のもののみをインポートすることもできます。

 Bootstrapを使うメリット

 BootstrapはReact、Vue、Angularで利用可能な最も有名なモバイルファーストのフロントエンドフレームワークです。

UXPinのnpm統合では、React Bootstrap のコンポーネントライブラリを使用しますが、VueまたはAngularのバージョンをインポートするにはStorybook統合で可能です。

BootstrapはレスポンシブなWebサイト・Webアプリ開発に最適ですが、モバイルアプリのデザインプロジェクトでもReactライブラリを使うこともできます。Bootstrapには、フォーム要素、レスポンシブテーブル、その他の関連コンポーネントが豊富に揃っているため、Webベースのエンタープライズ向け製品に適しています。

なお、Boostrapは総合的なフロントエンドフレームワークなので、Bootstrapのサンプルページでできることを見ておくことをおすすめします。

UXPin Mergeで Bootstrapの npm 統合

npmパッケージ（react-bootstrap）を使って、BootstrapのコンポーネントをUXPinのデザインエディタにインポートできます。Mergeコンポーネントマネージャーによって、各UI要素と利用可能なプロパティをインポートが可能です。

UXPinのコンポーネント駆動型のプロトタイピングで、要素は同じレポジトリから取り込めることから、デザインチームはエンジニアと同じ忠実度と機能性を手に入れることができます。エンジニアがレポジトリのコンポーネントでできることを、デザイナーも同様にUXPinのプロパティパネルで実現することができます。

また、フレームワークのドキュメンテーションにあるBootstrapのReact propsを使用することでこれらのプロパティを割り当てることができます。

Merge コンポーネントマネージャでプロパティの割り当て

Mergeコンポーネントマネージャーはnpmコンポーネントをインポートおよび管理するためのハブ的存在であり、プロジェクトを完成させるために必要な数だけインポートすることができます。

また、インポートするプロパティ数のコントロールも可能です。例えば、Bootstrap Buttonの［プライマリー］と［セカンダリー］Variantsのみを使いたい場合、全てのプロパティをインポートするのではなく、使いたいプロパティ２つのみをインポートすればいいだけです。

UXPinを React Bootstrapの npm パッケージにつなげる

ステップ１

UXPinのDashboard（ダッシュボード）画面に移動し、［+ New Project（新規プロジェクト ）］をクリックします。

ステップ２

プロジェクトに名前を付け、［Create New Project （プロジェクトの新規作成）］をクリックします。

ステップ３

［Design with Merge components （Mergeコンポーネントでデザインする）］と ［+ Add new Library （ライブラリの追加）］をクリックします。

ステップ４

［Import React Components with npm integration（npm統合でReact Componentsをインポートする）］を選択し、［Next（次へ）］をクリックします

ステップ５

ライブラリに名前を付けます。この名前は参考用のためだけなので、インポートには影響しません。

Mergeを動作させるには、npm統合に 『React Bootstrap（react-bootstrap）』と『 Boostrap（bootstrap）』という２つのBootstrapパッケージが必要です。

最後に、コンポーネントのプロパティをUXPinで動作させるには、BootstrapのCSSファイルへのパスが含まれてないといけません。（パスはReact-Bootstrap のドキュメントのCSSの下にあります。）

• bootstrap/dist/css/bootstrap.min.css

React Bootstrapコンポーネントのインポート

上記の手順を完了すると、UXPinはMergeのコンポーネントマネージャー にリダイレクトします。

ステップ１

左側のサイドバーから、［Open Merge Component Manager （Mergeコンポーネントマネージャーを開く）］をクリックします。

Mergeコンポーネントマネージャーが新規タブで開きます。

ステップ２

［Add new component （新しいコンポーネントの追加）］をクリックします。

ステップ３

インポートするコンポーネントの名前を入力します。

正しい命名規則は、React Bootstrapのドキュメントにあります。

このチュートリアルでは、Bootstrap Buttonをインポートして、［Components （コンポーネント）］という新しいカテゴリーを作成してみます。ここでは、デザイナーとエンジニアが同じ基準点持つためにReact Bootstrapのドキュメントと同じカテゴリを使うことをお勧めします。

１回のインポートで複数のコンポーネントを追加できるので、ステップ２と３の繰り返しは省略されます。

［Import Components（コンポーネントをインポートする） ］をクリックします。

ステップ４

右上の［Publish Changes（変更を公開）］をクリックして、インポート処理を初期化します。

新しいコンポーネントで初めてこの作業を行う際は、少し時間がかかるかもしれません。

ステップ５

インポートが完了したら、［Refresh Library （ライブラリの更新）］をクリックし、プロジェクトライブラリの変更を更新します。

ここまで進めると、左サイドバーのカテゴリーに[Components]、その中に[Button]があります。

ステップ６

［Button］をクリックしてプロパティを追加してみましょう。このReact propsは、React Bootstrapのドキュメントで、Components > ButtonのAPIの下にあります。

Mergeコンポーネントマネージャーでコンポーネントプロパティの追加

React Bootstrap のドキュメントを使って、Buttonプロパティをいくつか追加します。

Buttonラベル

ステップ１

React BootstrapのButtonラベルは、childrenプロパティを使って、次のように設定します：

• プロパティ名：「children」と入力（小文字を使用する）
• 表示名：（これは必須ではないですが）デザイナーとエンジニアの両方が使うわかりやすいものにする（ 統一感があるように 、ここでは『label』とします。）
• 説明：デザイナーに簡単な説明や指示を加える
• プロパティの種類：String（ストリング）型
• プロパティコントロール：『textfield（テキストフィールド）』
• デフォルト値：好みで設定 （ 今回は 『Button』を選択。）

コンポーネントのプロパティを完成させると、コンポーネントのプレビューが表示され設定した通りに変更されます。

ステップ２

すべての項目を入力したら、［Add property （プロパティの追加）］をクリックします。

そして［Save Changes（変更の保存）］

最後に［Publish library changes（ライブラリの変更を公開）］

コンポーネント 駆動型のプロトタイピングをご体験ください

実際にReact Bootstrapコンポーネントとプロパティをインポートしてみると、UXPinでのプロトタイピングはドラッグ＆ドロップでレイアウトを作成するのと同じくらい使いやすいんです。ちなみに、下画像のシンプルなデザインのメール登録フォームだと、３つの Bootstrapコンポーネントを使っただけで、１分もかからずに作成できました。

 Bootstrapコンポーネントを選択すると、Mergeコンポーネントマネージャーで作成したプロパティはUXPinのキャンバス画面右側にあるプロパティパネルで表示されます。

UXPinのnpm統合でコンポーネント駆動型プロトタイピングをさっそく試してみませんか？ Bootstrapのnpmコンポーネントをインポートして、いかに早く製品のアイデア出しから開発までできるかをご体験ください。開発時間を大幅に短縮できますよ。詳しくはMergeのページをご参照ください。

The post BootstrapコンポーネントをUXPinに追加する方法 – npm統合ガイド appeared first on Studio by UXPin.

自分に合ったデザインツールをお探しですか？すでにリサーチされている方は、デザインツールは様々な機能があることはすでにご存知だと思います。数多くあるUXツールが多くの機能を提供しているなかで、今の自分に一番あったツールを選ぶことは難しいですね。1つのツールのみではなく他のツールも並行して使いこなす必要があるかもしれませんし ね。

製品開発やデザインプロセスでの効率性において、どのような機能をみるべきか、なぜそれが必要なのかをご紹介します。

開発とデザインの連携をサポートするツールをお探しですか？UXPin をぜひ無料でお試しください。

デザインプロセスにおいて、UX ツール がどのように役立つのか

最適なUX プラットフォームを探すために、おさえておくべき７つの主要な機能をそれぞれご紹介します：

１．リアルタイムでの連携が可能

  リアルタイムでの連携で、チームメンバーが同じ部屋にいるかどうかにかかわらず、同じプロジェクトでチームと一緒に作業することができるようになります。これにより生産性が上がり、リモートで作業している人も他のチームメンバーとリアルタイムでやり取りができるようになります。例えば、UXPin は高度な連携能力を備えており、プロジェクトに対するフィードバック取得や、コメント、プロトタイプの共有も可能です。

また、プロジェクトの保存や、過去に保存したバージョンをコマンドでめくることも可能ですし、連携の環境を充実させるために、Slackや Jiraとの統合もできます。チームのメンバーが編集した箇所も確認できるので、チーム全員の足並みを揃えることができます。

２．便利なデザインハンドオフ機能がある

  ご存知のように、プロトタイプが完成すると、次はデベロッパーにプロトタイプを渡し、完成品を作ってもらうことになりますが、残念ながらこのプロセスは単純ではありませんよね。

Adobe XD のようなハイエンドなツールでは、ユーザーが他のチームメンバーとデザインドキュメントを共有することができ、これは簡単なプロセスですが、デザインが通常「ベクター」でレンダリングされるという問題があります。

一方、UXPin はデザインを「コード」でレンダリングします。

デザインドキュメントが「ベクター」ではなく「コード」でレンダリングされるため、デベロッパーはデザインの各コンポーネントを明確に理解することができます。さらに、最終製品を作る際にも、デベロッパーはコード化されたデザインを参照することができ、より迅速で便利な開発プロセスを実現できるのです。コード化されたデザインで、チームは製品を市場投入プロセスでの誤解や混乱を回避することができるのです。

３．インタラクティブなプロトタイプ

  インタラクティブなプロトタイプは、アイデアを試すことができるインタラクティブな環境を作ることで、さまざまなデザインアイデアを探求できるため、ますます人気が高まってきています。また、デザインの説明やアイデアの売り込みの際にも、そのデザインの価値をより深く理解してもらうのに最適です。UXPinにはインタラクティブなプロトタイプ機能が搭載されており、それを利用することで、以下のことが実現します：

• 製品がどのようなものになるかを十分に理解し、体験することができるようにするための、エンジニアやステークホルダーに作成したデザインのよりインタラクティブな体験を提供
• ユーザーがどのようにデザインを使用するかについて、より正確なフィードバックとデータを収集するための、実際のユーザーでの製品テスト
• ステート、変数、高度なインタラクションなどの機能を用いて、完成品と同様の機能を持つプロトタイプのデザイン
• デザインに名前や画像などを追加してくれる自動生成機能を使って、プロトタイプをより完成品に近づけるための詳細の追加
• デザインの良さを最大限に引き出すための、ボタンのホバー（hover）や条件付きナビゲーションフローなどのインタラクティブなコンポーネントの作成

  UXPinがあれば、プロトタイプが静的でクリックもできないデザインにはなりません。その代わり、完成品の外観、UX、機能が正確に反映された動きのあるプロトタイプを作成することができます。  

４．ステークホルダーがデザインを理解できる 

ご存知のように、製品をデザインする際には、ステークホルダーや関係者とも足並みを確実に揃えるのが不可欠です。そのため、新しいアイデアのブレストからデザインのテストに至るまで、デザインプロセス全体を通じて彼らを関わらせることが重要です。

上記のことから、UXデザインツールで必要なことは：

• ステークホルダーがインタラクティブな体験を通じて、プロトタイプやデザイン・コンポーネントを体験・試用することができ、それによって、デザインとそれが完成したときにどのように展開するかがわかりやすくなる。
• デザインプロセスを通じて、ステークホルダーがデザインにフィードバックを残すことができる。ちなみにUXPinでは、comment機能から他の人がデザインにコメントや質問でき、その場にいなくても、フィードバックへの返答が簡単にできる。

５．デザイナーとデベロッパーのコミュニケーションをサポートする

  デザイナーは、デザインを作るだけでなく、デベロッパーに完成品を作る方法を伝える役割も担っています。特に、リモートワークが主流となりつつある現代では、コミュニケーションは非常に重要であるため、適切なコミュニケーションツールの導入は、デザインプロセスにおいて不可欠な要素となっています。  

そこで、UXPinのようなツールを使うと、デベロッパーとのコミュニケーションと理解を深めることができます。UXPinのMergeテクノロジーでは、Git レポジトリや Storybook との統合も可能で、デザイナーがデベロッパーと同じ技術を使うことで、２つのチーム間で一貫性を生み出せるようになります。

最終的に、Mergeはデベロッパーとデザイナーの両方が使えるツールであるため、複雑な問題が発生することなく、両者が一緒になってプロジェクトを進めることができるでしょう。

６．プラグインの購入が必要ないツール

  筆者のように、その機能の多くが有料であることに製品購入後に気付くと、イライラすることがあります。ただ残念ながら、市販のデザインツールには、そのようなものがけっこうあるんです。

世の中の多くのデザインソフトには、必要な機能が不足しており、そのため、デザイナーが製品を完成させるためにプラグインを購入しなければならないケースも珍しくありません。

UXPin を使う場合、ありがたいことに必要な機能はすべて組み込まれていて追加費用はかからないので、プラグインの購入は不要です。つまり、UXPinにはデザインを最初から最後まで行うために必要なものがすべて備わっているのです。

７．MacとWindowsの両方で利用でき、クラウドベースである

イメージベースのデザインツールはウェブベースでであるため、デザイナーはさまざまなデバイスを使用する際に、互換性の問題やさまざまな制限にぶつかることがあります。そこで、Mac、Windows、クラウドベースなど、複数のシステムで利用できる互換性のあるデザインツールを見つけることが重要になってきます。

UXPinはウェブ上だけでなく、デスクトップアプリケーションからも使えます。さらにいくつかのプラグイン機能を搭載しいるため、Figmaをお使いの方はデザインをUXPinにインポートすることで、より多くの機能を利用できるようになり、システム間での使い勝手もよくなります。

UXPinは、Finder/Explorerへのダウンロードも、ウェブベースのバージョンの使用も可能であり、ダウンロードしたソフトウェアを使うことで、オフラインの状態でもプロジェクトに取り組むことができる機能が追加されます。

さらに、UXPin はモバイルアプリのビューも備えていることから、モバイルデバイス用のプロトタイプを作成してテストすることができ、アプリの UX についての評価ができるようになります。

UXPin で UXデザインプロセスを実践しよう

  UXPinはすべてのデザイナーにとって、まさに「１つで全てをこなせるソリューション」です。様々なショートカットキーもあり、デザインを拡大縮小したり、インタラクティブなプロトタイピングを行うなど必要な機能はすべて備わっています。

UXPinには充実した連携機能も備えており、リモートで仕事をしているかどうかにかかわらず、全員がチームとシームレスに協働できます。さらに、デバイスやシステムに関係なく利用できるため、チームメンバー間の互換性の問題もありません。  

シンプルなデザインから複雑なシステムまで、UXPin にはプロジェクトの最初から最後まで必要な機能がすべて備わっています。UXPin の無料お試しでぜひご体験下さい。  

The post 自分に合ったUX ツール の選び方とは？注目すべき７つの機能 appeared first on Studio by UXPin.

UXPin とMergeの違いは何だろうと思われるかもしれません。そして、どちらが自身のデザイン チームに適しているのでしょうか？  

簡単に言うと、UXPinはデザインハンドオフを含む製品デザインプロセス全体を一緒にカバーするオールインワンデザイン「ソフトウェア」で、MergeはUXPinにインタラクティブなコンポーネントを持ち込み、それを使ってプロトタイプをデザインできるようにする「技術」です。  

  つまるところ、Mergeテクノロジーは、デザイナーとデベロッパーの両方が「信頼できる唯一の情報源（Single source of truth）」を共有して一貫したUIを作成できる、より協力的で迅速なデザイン プロセスにつながります。UXPin Merge の詳細はぜひこちらでご確認ください。  

画像ベースと コードベース のデザインツール

  UXPinとMergeについて見ていく前に、画像ベースとコードベースのデザインツールの違いを把握しておくことが重要です。  

コードベースのデザインツールと聞くと、デザイナーはデベロッパー向けのツールだと思ったり、コードを学ばなければ使えないと思ったりしますが、どちらも間違いです。  

コードベースとは、UXデザイナーがキャンバス上に作成したものを、ツールがどのようにレンダリングするかということを指し、従来の画像ベースのツールは静的なベクタグラフィックスを生成しますが、コードベースのツールはコードをレンダリングします。  

詳しく読む： Figmaのデザインをインタラクティブなプロトタイプにしよう

コードベースのツールには、インタラクティブ性のためのより多いオプションが大体あることを除けば、大抵はデザイナーはこの2つのインターフェースを比べても大きな違いを感じることはないでしょう。  

たとえば、画像ベースのツールを使って入力フィールドを作成した場合、それはキャンバス上のブロックに過ぎません。UXPinでは、入力は最終的な製品と同じように動作し、ユーザーが入力欄をクリックするとカーソルが表示され、テキストを入力することができます。そしてデザイナーは、UXPinのさまざまな機能によって以下ができるようになります：  

• 入力の有効性確認
• 文字、数字、記号などのパスワードの条件チェック
• ウェルカムメッセージの個別化
• ユーザープロファイルページの作成

UXPinとは

  UXPinは、高度なプロトタイプテストのためのエンドツーエンドのコードベースのデザインツールであり、デザイナーは、最終製品のインタラクションや機能を正確に再現するプロトタイプを作成できます。

UXPinは、他のデザインツールと同じように見えますが、UXワークフローやコラボレーション、プロトタイプ、およびテストを強化する機能を備えています。  

以下は主な機能の一部です：  

• 変数
• インタラクションと条件付きインタラクション
• エクスプレッション
• オートレイアウト
• デザインシステム
• コメント

変数

  変数によって、デザイナーは入力フィールドからデータを取得し、プロトタイプの他の場所で使うことができます。この例は、サインアップフォームのデモで、ユーザーのメールアドレスを取得し、確認ページを個別化する方法が表示されています。

インタラクションと条件付きインタラクション

UXPinで、プロトタイプへのインタラクションの追加が数回のクリックで簡単にできるようになり、デザイナーは、最終製品のインタラクティビティを正確に模倣するトリガー、アクション、アニメーションの豊富なリストを利用できます。

条件付きインタラクションは、Javascriptがデベロッパーに提供するのと似たような感じで、【if-then】と【if-else】の条件によって、インタラクションをさらに高いレベルに引き上げることができます。

デモのサインアップフォームに戻り、条件付きインタラクションを使って、ユーザーがメールアドレスとパスワードのフィールドを空白にした場合にエラーメッセージを表示する方法を見てみましょう。ユーザーが入力の条件を満たしたときのみ、確認ページに進むことができます。

エクスプレッション

エクスプレッションで、プロトタイプは次のレベルに上がり、それによってデザイナーはコードと同等のダイナミックなUX（ユーザーエクスペリエンス）を作成できるようになります。サインアップフォームのプロトタイプでは、メールと入力フィールドの条件を定めるために、以下のような【エクスプレッション】を使います：

• メールアドレス：@記号と、.com や.co.jp などの「ドメイン拡張子」が必要
• パスワード：8文字以上

デザイナーは、コンポーネントやプロトタイプに好きなだけエクスプレッションを追加し、それによってコードと見分けのつかないような結果が得られます。

オートレイアウト

多くのデザインツールにオートレイアウトがありますが、UXPinのオートレイアウトは、Flexboxの命名とプロパティを使って現実的な期待値を作り出し、デザイナーとデベロッパーの提携を向上します。

デザイナーは、オートレイアウトを使ってデザインのサイズ変更やフィット、配分、塗りつぶしを自動的に行い、それによって、手動で行ったら時間を食うような作業はなくなります。  

さらに読む：UXPinのオートレイアウト機能をご紹介  

デザインシステム

  デザインシステムは、文書化や権限の設定など、ゼロからデザインシステムを構築するための素晴らしい機能であり、これによってデザイナーは、デザインシステムで再利用可能なコンポーネントのライブラリの作成や、組織全体でのその共有ができるようになります。  

UXPinは、デザインシステムを以下のように自動的に分類します：  

• 色
• タイポグラフィ
• アセット
• UI（ユーザーインターフェース）のパターン

  左側のサイドバーにはライブラリ全体が表示されるので、デザイナーは要素をドラッグ＆ドロップするだけでUI（ユーザーインターフェース）を構築することができます。 

また、UXPinにはOS（オペレーティングシステム）、マテリアルデザイン、ブートストラップ、ファンデーション、ユーザーフローの5つの内蔵されたデザインライブラリがあり、チームはプロトタイプやMVP（Minimum Viable Product）をサッと作成して、デザインプロセスのあらゆる段階でアイデアや仮説を検証することができます。  

コメント

コメント機能によって、デザインチームやステークホルダーは、連携やフィードバックの共有、タスクの割り当て、デザインプロジェクトやプロトタイプのプレビューへのコンテキストの提供ができるようになります。

UXPinでは、誰でも【プレビューへのコメント】機能を使えるため、ステークホルダーやデベロッパーなどのUXPinのキャンバスへのアクセスが不要なユーザーのための、追加でのユーザー購入が必要ありません。また、デザイナーはデザインをパスワードで保護することができるので、許可された人しかデザインを見ることができません。  

UXPinの用途

  デザインチームは、デザインプロセスのあらゆる段階でUXPinを使います。高忠実度のプロトタイプはUXPinの最大の特徴ですが、既製のフォームを使うことでそれが優れたワイヤーフレーム作成ツールになります。  

以下は、画像ベースの競合他社よりもUXPinが一歩先行く一例です：  

• インタラクティブなプロトタイプ
• IFTTT（イフト）によるAPI 統合
• 高速なデザインイテレーション
• デザインチーム、エンジニア、ステークホルダーとの連携
• よりスムーズなデザインハンドオフ
• ゼロからのデザインシステム構築と拡張
• UXPinの機能に関する情報やチュートリアルを提供するUXPinのドキュメント
• UXPinの機能を実際に使用したインタラクティブなパターンとアプリの例

  コードベースのデザインがどのようなものかご覧になりませんか？今すぐ無料トライアルにサインアップして、UXPinでインタラクティブなプロトタイプ”第１号”を作成しましょう。  

UXPin Mergeとは

  UXPin Mergeは、レポジトリからUXPinのデザインエディタにコードコンポーネントを同期させる技術であり、組織は Merge をオープンソースのライブラリと一緒に使ったり、製品のデザインシステムをインポートしたりすることができます。

デザイナーは、このようなコードコンポーネントをビルディングブロックのように使い、ドラッグ＆ドロップで UI を構築しますが、Mergeのコンポーネントには、インタラクション、ステート、カラー、タイポグラフィー、サイジングなど、デザイン システムで確定されたプロパティが含まれます。  

そのプロパティはUXPinのプロパティパネルに表示され、そこでデザイナーはプロトタイピングの要件に応じて調整を行うことができます。  

この例では、MUIのデザインシステムで確定されたプロパティを使って、色、サイズ、変数を変更し、アイコンを追加する方法を説明しています。  

Merge はこのようなプロパティをレポジトリから取り出し、変更があれば自動的に同期します。たとえば、デザイン システム チームが原色を青から赤に変更した場合、Merge はその更新を検出し、デザイン チームにその新しいリリースを通知します。  

さらに、バージョン管理により、デザイナーは最新のリリースに切り替えるタイミングを選択でき、いつでも初期のバージョンに戻すことができます。  

UXPin Mergeでデザインシステムを同期させる方法

  UXPin Mergeでデザインシステムを同期させるには、以下の３つの方法があります：

• Git統合：Reactのコンポーネントライブラリのみ対象
• Storybook統合：React、Angular、Ember、VueなどのStorybookのライブラリ向け
• npm統合: npmレジストリで利用可能なオープンソースライブラリからコンポーネントをインポート

この 3 つの統合は、それぞれ異なるプロトタイプとチームのニーズに対応します。Git と Storybook の統合では、Merge 用のコンポーネントとレポジトリをセットアップするのに技術的な知識が必要ですが、UXPin はエンジニアのためにボイラープレートを提供し、当社の技術チームがセットアップ プロセスを指導します。  

Storybookは、エンジニアがコンポーネントを単独で構築し、プロトタイプを作成・テストしてからデザインチームのUXPinにプッシュできるため、プライベートのデザインシステムとしてはおそらくベストな選択肢でしょう。  

npm 統合と Mergeコンポーネントマネージャー により、デザイナーはインポートするコンポーネントとプロパティをもっとコントロールできるようになります。デザイナーはデザイン システムのドキュメントに従うことができ、UI 要素をインポートするのにエンジニアを必要としません。  

Mergeの主な利点

  Merge の主な利点は、デザインと開発の間に「信頼できる唯一の情報源（Single source of truth）」を作成することです。デザイナーとエンジニアは同じレポジトリから同じコンポーネント ライブラリを使い、以下のようにしてシームレスなデザインハンドオフ プロセスを作成します。  

1. エンジニアは、ただコンポーネントライブラリをインポートする
2. UXPinがコンポーネントプロパティから生成するJSXの変更をコピーする
3. そして、デザインチームのプロトタイプに従って、最終製品を開発する

  この効率化されたワークフローは、以下のような多くの製品開発の効率化を生み出します：

• 高速プロトタイプ（Paypalは速さが８倍アップ）
• 市場投入の時間短縮
• ゼロからのデザインが不要
• フロントエンドのコーディングが全くまたは殆どない
• デザインドリフトがない
• UXとフロントエンドの負債の減少
• 少ないコミュニケーションとドキュメントでのシームレスなハンドオフ
• 完全なまとまりと一貫性
• ステークホルダーからのより質の高いフィードバック
• テスト中の有意義で実用的な結果
• 質の高い結果　=　よりよいUX（ユーザーエクスペリエンス）

UXPinからMergeへ – 拡張性の高いデザインソリューション

  UXPinは、成熟期のあらゆる段階でワークフローをサポートするツールと機能を備えた、拡張性のあるデザインソリューションを企業に提供します。

UXPin Standardは、デザインシステムを使っていないスタートアップや企業にとってとてもいいソリューションであり、デザイナーは、正確なテストのために、完全に機能するインタラクティブプロトタイプやMVPを構築することができます。  

UXPin Standardには、UXPinのデザインシステム機能も含まれているため、デザイナーは製品のコンポーネント、カラーパレット、タイポグラフィー、アセットの保存・共有ができます。  

Mergeでの拡張

  急成長中のスタートアップ企業であれ、多国籍企業であれ、Merge で企業のデザイン業務の拡張が可能になります。  

FinTechの大手であるPayPalと大手ソフトウェア開発会社のIressは、UXPin Mergeに切り替えることでワークフローの最適化と連携が強化されたことを経験しています。

企業レベルでは、Mergeには製品開発チーム全体にわたって「信頼できる唯一の情報源（Single source of truth）」があるため、チームがより速やかに行動できるようになります。デザイナーとエンジニアが同じ言語で話し、同じ制約の中で作業するため、摩擦が少なく、より良い連携が可能になるのです。

Merge のデザイナーが UXPin でボタンなどの UI コンポーネントを作成する際に使うのは、エンジニアが最終製品を開発するためにレポジトリから取得するのとまったく同じボタンか何かです。  

また、筆者たちはMerge がスタートアップ段階の企業をどのようにサポートしているかも見てきました。例えば、スタートアップ企業である TeamPassword には UX チームがないため、エンジニアはプロトタイピングとテストに UXPin Merge を使っています。また、Merge はドラッグ＆ドロップの環境を作るので、従来のデザインツールに比べ、学習曲線が大幅に短縮されます。  

TeamPassword のエンジニアは、プログラミングしたコンポーネントを使って UXPin でプロトタイプを作成するため、テスト、変更、イテレーションを速やかに行うことができます!  

Merge のパワーでプロトタイピングとテストを次のレベルへステップアップしませんか。詳細およびアクセス要求方法については、Mergeのページをぜひご覧ください。

The post UXPinとMergeの違いをわかりやすく解説！ appeared first on Studio by UXPin.

UXPinの目標は、デザイナーがデザインと構築に費やす時間を減らし、アイデアのテストと反復にもっと時間をかけられるようにすることです。UXPinには、デザイナーがより速くプロトタイプを作成し、より意味のあるテスト結果を得られるよう、多くのショートカットや機能があります。

セクションへ移動します：

• 1ページデザインと複数のアートボード
• データのリフレッシュ
• スクロール可能なコンテンツ
• スタイルのコピーと貼り付け
• インタラクションのコピーと貼り付け
• プレビューからページを非表示にする
• 高度なアニメーション
• アクセシビリティ機能
• アイコンとフォームのビルトインライブラリ

UXPinでより速くデザインするためのヒントトップ9と仕掛けをリストアップしました。コードベースのデザインに慣れていない方は、無料トライアルにサインアップし、この記事のヒントに従って、UXPinでいかにプロトタイピングをさっと楽しくできるか是非ご確認ください。

1ページデザインと複数のアートボード

画像ベースのデザインツールでは、基本的な機能やインタラクションを作成するのに、デザイナーは複数のアートボードの複製が必要です。その結果、トランジションが「不自然」になり、本物のUX（ユーザーエクスペリエンス）を提供できないことがよくあります。

UXPinでは、アートボードを切り替えることなく、最終製品を使用するのと同じように、1つの画面に対して複数のインタラクションを作成することができます。UXPinのCalming Appは、1つのスクリーンでインタラクションとアニメーションを作成できるいい例です。

Calming Appには4つのスクリーンがあり、それぞれのスクリーンではユーザーがボタンをタップすることでマイクロインタラクションやアニメーションが発生します。アプリの「Breathe」セクションで【Start】をクリックすると、画面が完全に変化し、脈打つようなアニメーションが表示されますが、これらはすべてUXPinの1フレームでデザインされています。

UXPinのデザイナーがこの没入型プロトタイプをどのように作ったか、Calming Appを自由にダウンロードしてインストールしてみてください。UXPinのアカウントをお持ちでない方は、無料トライアルにサインアップし、ダウンロードの添付ファイルの指示に従って、アプリをインストールしてください。

データの更新

プロトタイプにダミーデータを探して追加するのは、時間の無駄に感じられるかもしれません。よく整理されたコンテンツ・ライブラリがあったとしても、コピー＆ペーストして適宜アップロードが必要です。

UXPinでは、数回のクリックでダミーデータをプロジェクトに追加したり、レイヤー名でコンテンツを一致させる機能を使ってフィールドに自動的にデータを入力することができます。

UXPinでは、Macでは【CMD】＋【SHIFT】＋【D】、Windowsでは【CTRL】＋【SHIFT】＋【D】のデータ更新のショートカットで、ダミーコンテンツの瞬時の更新も可能です。

スクロール可能なコンテンツ

使用するデザインツールによっては、スクロール可能なコンテンツの作成は時間のかかる作業ですが、UXPinのクロップとスクロール機能を使えば、わずか2クリックで縦または横のスクロールを追加できます。

• ステップ1：（コンテンツがアートボードからはみ出ることになっても）すべてが見えるようにプロトタイプにコンテンツを追加します（例を参照）。
• ステップ2：コンテンツが選択されていることを確認し、【選択したコンテンツを切り抜く】にチェックを入れ、縦にスクロールさせるか横にスクロールさせるか選択します。
• ステップ3：コンテンツをプロトタイプの端にトリミングし、余分な部分が隠れるようにします。

プロトタイプをプレビューすると、設定にしたがってコンテンツがスクロールします。

スタイルのコピー＆ペースト

あるコンポーネントから別のコンポーネントへのスタイルのコピー＆ペーストは、たった2つのショートカットコマンドででき、2番目のコンポーネントのコンテンツに影響を与えません。

• コピー：Macでは【CMD】＋【OPTION】＋【C】、Windowsでは【CTRL】＋【ALT】＋【C】
• ペースト： Macでは【CMD】＋【OPTION】＋【V】、Windowsでは【CTRL】＋【ALT】＋【V】

このショートカットはスタイルをコピー/ペーストするだけです。インタラクションはコピー/ペーストしませんが、そのためのショートカットはあります :)

インタラクションのコピー＆ペースト

コンポーネントのインタラクションもコピー＆ペーストしたい場合は、このUXPinのショートカットが使えます：

• コピー：Macでは【CMD】＋【SHIFT】＋【C】、Windowsでは【CTRL】＋【SHIFT】＋【C】
• ペースト： Macでは【CMD】＋【SHIFT】＋【V】、Windowsでは【CTRL】＋【SHIFT】＋【V】

プレビューからページを非表示にする

「制作中のプロトタイプをステークホルダーに見せることになったが、まだ完成していない部分は見せたくない」ような時は、プロトタイプを複製して余分な画面を削除し、完成したものを見せることができます。

ただ、この方法には問題点がいくつかあります：

• 時間を食う
• 複数のプロジェクトファイルが作成され、それぞれ別々の画面が欠落する。
• エラーが発生する可能性が高くなる
• 2つ目のプロトタイプで自身やステークホルダーが作成したメモを、オリジナルにコピーする必要がある
• 同じプロジェクトで作業している他の人と混同してしまう

より簡単な解決策は、他の人に見られたくない画面を非表示にして、プロトタイプのリンクを共有することですが、これはUXPinの【プレビューからページを非表示】でできます。プロトタイプに表示したくない画面を非表示にできますが、シングルクリックで再度表示することができます。

高度なアニメーション

UXPinはHTML、CSS、Javascriptをレンダリングするため、デザイナーはコードのようなインタラクションやアニメーションを作成することができ、UXPinのプロパティパネルでアニメーションの種類を選択して設定を微調整することで、思い通りの結果を得ることができます。

条件付きインタラクションがあれば、デザイナーはインタラクションを次のレベルに引き上げることができます。コード化された製品を正確に表現するダイナミックなユーザーエクスペリエンスを引き起こすべく、【if-then】と【if-else】のルールセットを作成してみましょう。

UXPinの高度なアニメーションがあれば、デザイナーはUXを実現する没入感のある直感的なプロトタイプを作成することができるのです。

アクセシビリティ機能

インクルーシブな製品を作ることの重要性は誰もが知っていますが、デザイナーはUIのテストにプラグインや外部ツールを使用しなければならないため、アクセシビリティが面倒に感じられることがあります。

内蔵されているアクセシビリティ機能があれば、デザイナーは色の選択をテストするためにUXPinを離れる必要がありません。UXPinには、その場でテストするためのツールが以下のように2つ用意されています：

• コントラストチェッカー：プロトタイプをWCA（ウェブコンテンツ・アクセシビリティ・ガイドライン）規格に照らし合わせ、レベルAAとAAAに対応したインジケータでチェック。
• 色覚異常シミュレーター：8種類の色覚異常を切り替えて、色覚異常のユーザーがプロトタイプをどのように見るかをテスト。

アイコンとフォームの内蔵ライブラリ

プロトタイプをサッと作りたいとき、フォームやアイコンを最初から作るのはとても時間がかかります。多くのデザインツールにはサードパーティーのライブラリが用意されていますが、その中から必要なものを探し出すのもまた大変です。

UXPinには、GoogleのMaterial UI、Font Awesome、Pixel、Retinaのアイコンセットなど、膨大なアイコンのライブラリが内蔵されており、また、自身のSVGを読み込んで、UXPin内での編集も可能です。

UXPinには、デザイナーがそのまま使用することも、ニーズに合わせてカスタマイズすることもできる基本的なフォームエレメントも含まれています。

UXPinで高度なプロトタイピングを試してみよう

このようなヒントやトリックをご自身で実際に試してみませんか？UXPinの高度なデザインおよびプロトタイプ機能をご紹介するサンプルプロジェクトがいくつかあります。無料トライアルにサインアップして、コードベースのデザインがどのようにプロトタイプに革命をもたらし、顧客にとってより良いユーザー体験を生み出すのかぜひご確認ください。

The post UXPinでより速いデザインのための9つのヒントと機能紹介 appeared first on Studio by UXPin.

UXPinに「オートレイアウト」が導入され、今までよりもさらに速くデザインができるようになりました。数秒のうちにすべてのコンポーネントを思い通りに配置し、デザインワークフローをスピードアップすることが可能です。UXPinは、デザインプロセスを簡素化し、デザイナーが有意義な仕事に専念できるような時間を確保することを常に目標としています。自動レイアウトは、手動でサイズを変更する手間を省き、より直感的に作業できるようになります。

オートレイアウトを使用しない場合のデザインの課題

しかし、デザインはクリエイティブで楽しい仕事だけではないのではないでしょうか。実際、UI/UXツールの制約にも応じなければなりません。デザインは元々静的なもので、適切な技術がなければコード化された製品のような動きを期待することはできません。つまり、あなたが描くすべての要素は、それがどのように見えて、機能するかを視覚化しているに過ぎません。たとえば、シンプルなボタンをデザインする場合、まず矩形を描き、テキストを追加します。テキストを拡大しようとすると、長方形の長さも調整しなければなりません。このように、デザイナーはすべてのUI要素の関係性を考えなければならないのです。 複数の要素のサイズを変更し、それぞれを調整することで、全体として統一感を持たせることができます。すべてを手作業で行うには、あまりにも時間がかかりすぎます。さらに、すべての要素で変更の一貫性を保つ必要があります。正直なところ、特にデザインに新しい要素を追加する場合、正しいパディングやギャップを設定することを忘れてしまいがちです。 そんなとき、オートレイアウトがボトルネックをすべて解消してくれます。

https://t.co/rXr0hFKg94 🆕 Take care of your responsive and consistent design with our new Auto Layout feature! 🔥Sign up and take it for a test ride. pic.twitter.com/Hox6bwhZY9

— UXPin (@uxpin) November 8, 2021

オートレイアウトは、繰り返しの手作業から解放され、重要なことに集中する自由を与えてくれます。UXPinでは、あなたのUIが静的デザインの法則に縛られることなく、コードアプローチのメリットを受けることができます。Flexbox – CSS Flexible Box Layoutのおかげで、グループやコンポーネントに自動レイアウトを適用し、選択した要素を互いの位置に依存させることができるようになりました。

オートレイアウトは、すべての手間を省き、ほんの数秒でコンポーネントを思い通りに調整します。例えば、シンプルなボタンを例にとると、テキストを変更する必要がある場合、残りの要素は新しいテキストの長さに適応します。これは、オートレイアウトが作業をスピードアップする数あるケースの一つに過ぎません。メニューのように繰り返される要素をデザインして、アイテムの位置を入れ替えたり、拡大・縮小表示を追加したい場合、私たちの新機能はあなたの作業を大幅に軽減してくれることでしょう。

導入

キャンバスに要素をドロップし、グループを選択するか、ライブラリからコンポーネントを選びます。プロパティパネルでオートレイアウトを追加すると、デザインがフレックスボックスのように動作するようになります。また、デザインシステムにオートレイアウトコンポーネントを追加することもできます。

数回のクリックですべての要素を整列させ、オートレイアウトがあなたをサポートします。

分散する要素をグループ化し、好みでラッピング

包むだけで、すぐに整列し、幅や高さをコントロールして何行にするかを調整できます。別のボックスを移動させるのとは、もうおさらばです。

エレメントのレイアウトと配置

コンポーネントを互いに関連して配置したい場合は、縦または横の方向を設定し、どのように配置するか（開始、中央、終了、伸張）を選択するだけです。

一貫性を維持

ギャップ、パディング、ボーダー、ラディウスの整合性を保つのも簡単です。指定した値を適用すると、オートレイアウトのすべての要素がそれに合わせて整列します。

リサイズ機能

オートレイアウトグループの中から選んだ1つの要素を変更したいときに便利なのが、リサイズです。グループに設定されているすべてのプロパティを維持したまま、幅や高さを変更したり、メイングループを塗りつぶしたりして、1つの要素で遊ぶことができます。

まとめ

オートレイアウトは、要素の微調整、整列、サイズ変更時に必要な手作業を一部自動化します。アイテムのグループは、全体として動作するように直感的に整列できるようになりました。すべての機能の詳細に関しては、こちらのドキュメントをご覧ください。ご質問やUXPin Mergeの導入などのご相談はこちらまで。また、UXPinのコミュニティもございますのでよろしければご活用ください！

トライアルにサインアップして、ワンクリックですべてのコンポーネントを整列させましょう。

The post UXPinのオートレイアウト機能をご紹介 appeared first on Studio by UXPin.