初心者 向け UXPin の使い方

UXPin は、デザイナーがデベロッパーとのシームレスな連携、生産可能なプロトタイプの構築、デザインシステムのスケールとメンテナンスの効率化ができるようになるオールインワンのプロトタイピングツールです。

今回は、UXPin 使い方とプロトタイプの作成方法を見てみましょう。

主なポイント：

• UXPinには、ステート（状態）、インタラクション、バリアブル、式などの高度なインタラクティブ・プロトタイピング機能があり、デザイナーは最終製品とほとんど見分けがつかないプロトタイプを作成できる。

• UXPinのデザインテクノロジーである Mergeは、コードコンポーネントをデザインプロセスに取り込むことでデザインと開発を融合させ、プロトタイプの品質と範囲が上がる。

• UXPin では、高度なプロトタイピング機能と Merge テクノロジーをトライアルで試すことができる。

このチュートリアルのステップに従うのに UXPin のトライアル版にサインアップして、プロトタイプからデザインのハンドオフまでの全機能をぜひ試してみてください。無料で始める

デスクトップ用 UXPin のダウンロード

まずは、UXPin のデスクトップアプリをダウンロードすることをお勧めします。

UXPinはブラウザ上で動作しますが、MacまたはWindows 用のデスクトップアプリでのダウンロードを推奨します。

Web環境とデスクトップ環境は区別がつきませんが、デスクトップアプリだとオフラインでの作業ができるようになるのでインターネットの問題も軽減されます。

ブラウザでは安定したインターネット接続が必要ですが、デスクトップアプリでは必要ありません。

UXPinのダッシュボードを操作する

UXPinをまず開くと、画面上部に以下のようなタブが４つある空のダッシュボードが表示されます：

• Project（プロジェクト）： この画面には、すべてのUXPinプロジェクトとファイルを表示する。

• Design Systems（デザインシステム）：自分で作成、または共有された既存のデザインシステムを表示する。

• Merge Component Manager（コンポーネントマネージャー）： オープンソースの npmインポートを表示する。

• Manage your team（チームの管理）： プロジェクトを共有するチームメンバーを表示し、管理する。

このチュートリアルでは、プロジェクトに焦点を当て、デザインシステムについても触れていきます。

Merge Component Managerと npm統合については、こちらの記事をご覧ください。

UXPin を始める

プロジェクトのダッシュボードから、左上の［+ New project（＋新規プロジェクト）］をクリックしてプロジェクトを作成し、プロジェクトに名前を付けて、［Create New Project（新規プロジェクトの作成）］をクリックします。

“What do you want to start with today?” 画面

次の画面では、以下の３つの選択肢が出て「What do you want to start with today?（今日は何を始めますか？）」と表示されます：

1. New prototype（新しいプロトタイプ）：UXPinのデザインエディタを開き、ゼロから作業を開始する。

2. Import Sketch, images, or documents（スケッチ、画像、ドキュメントのインポート）: スケッチファイル、JPG、PDF、PNG、または UXPin のファイルフォーマットである UXP をアップロードするためのウィンドウをコンピュータ上に開く。

3. Design with Merge components（Mergeコンポーネントでデザイン）: 選択したMergeライブラリでUXPinのデザインキャンバスを開くか、［+Add a new library（新しいライブラリの追加）］ができる。‐ これについては、本記事の後半で UXPinの Mergeテクノロジーについての説明のときに詳細有 :)

［New prototype（新規プロトタイプ）］をクリックして、デザインエディタを開きます。

UXPinのデザインエディタを探る

このチュートリアルでは、デザインエディタの概要を簡単に説明していきましょう。

ちなみにデザインエディタとその機能については、ドキュメントで詳しく説明しています。

UXPin のデザインエディタには主に以下の３つのワークスペースがあります：

• 左側の「Pages & Layers（ページとレイヤー）」と「 Design System Libraries（デザインシステムライブラリ）」

• 中央のデザインキャンバス

• 右側のProperties Panel（プロパティパネル）

Pages & Layers

キャンバスに要素を追加すると、それがLayersのサイドバーに表示され、ここで選択、グループ化、並べ替えができます。また、このサイドバーの一番上のページを見るか、「+」のアイコンをクリックしてさらに追加できます。

ページのワークフローは、他のデザインツールとは違い、例えば Sketch や Figma では、ユーザーフローの全画面が１つのキャンバスに表示されますが、UXPin では画面ごとに個別のページが表示されます。

ちなみに全画面を１つのインターフェースで表示するのは、概要アイコン（OPTION + O）のクリックでできます。

Design System Libraries

デザインシステムライブラリには、各デザインシステムのコンポーネントとアセットが表示され、それをキャンバスにドラッグしてプロトタイプを開始したり、サイドバーの下部でライブラリを切り替えることができます。

CANVAS

デザインキャンバスには、プロパティパネルで設定した画面の幅と高さが表示されます。そしてここでプロトタイプを作成します。

Properties Panel

プロパティパネルは、キャンバス上のコンポーネントのプロパティやインタラクションをコントロールする場所です。また、グリッドの設定や、背景色の変更、その他のキャンバスのグローバルな設定を行うこともできます。

UXPin のインタラクティブなプロトタイピング機能

インタラクティブなプロトタイプにより、UXPin は競合他社とは一線を画し、最終的な製品体験を正確に再現することができます。

そして UXPinには、他のデザインツールにはないプロトタイプのための以下のようなユニークな機能が４つあります：

• ステート（状態）

• インタラクション

• バリアブル（変数）

• Expressions

ステート（状態）

UXPinのステートで、コードに匹敵するコンポーネントのステートを作成できます。例えば、ボタンにデフォルト、アクティブ、無効、ホバーの状態を設定できます。

また、ステートを使って、カルーセル、アコーディオンメニュー、マルチレベルドロップダウンナビゲーションなどの複雑なUIコンポーネントを作成することもできます。

インタラクション

UXPinのインタラクションでは、ユーザーがプロトタイプに関与したときに何が起こるかを定められ、デスクトップやモバイルなどのトリガーで、リアルで直感的なプロトタイプを作成できます。

アクションは、トリガーの後に何が起こるかを決定します。UXPinには、APIリクエスト、ステートの変更、ナビゲーション、コンポーネントのプロパティ調整、ビデオ/オーディオコンテンツの再生など、アクションが２０以上用意されています。

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

条件付きインタラクションでは、Javascript のように if-then や if-else 条件を設定することができます。この条件で、ユーザーとシステムのアクションに基づいてさまざまシナリオをトリガーするルールが設けられます。

例えば、複数のフォームの条件を設定することで、必須フィールドの未完了や、無効なメールアドレスのような不正確なデータに対するエラーメッセージをトリガーすることができ、データがすべて正しい場合にのみ、ユーザーはプロトタイプでフォームを正常に送信できるようになります。

Variables（変数）

画像ベースのツールとは違って、UXPinのフォームは最初から完全に機能し、Variables（変数）を使ってフォームからデータを取得し、プロトタイプの他の場所で使うことができます。

例えば、チェックアウトプロセス中にユーザーの情報を取得し、確認画面に表示してユーザーに確認してもらうことができます。

Expressions

UXPin の Expressions は、コードを書かずに Javascript に最も近いことができ、Expressions を使うと、フォームの検証、パスワード基準のチェック、ショッピングカートの計算コンポーネントの構築など、さらに複雑なレイヤ ーを追加できます。

この４つの高度なプロトタイピング機能を組み合わせることで、最終製品と見分けがつかないほどリアルでダイナミックなプロトタイピング体験を実現できます。

UXPin のサンプルアプリやパターンをチェックして、ステート、インタラクション、バリアブル、Expressionsを使って何ができるかを見てみましょう。

ダウンロードして、UXPinプロジェクトにインポートすることで、このような機能がどのように機能するのかを確認するといいでしょう。

Merge のテクノロジーによるコンポーネント駆動型プロトタイプ

次に UXPin Mergeのテクノロジーについて見ていきましょう。

コードコンポーネントをデザインプロセスに取り込むことで、デザインと開発を融合させることから、この名前が付けられました。

UXPin の無料トライアルを使っている場合、デザインシステムライブラリで以下の３つの内蔵されたMerge のデザインシステムにアクセスできます：

• MUI

• Ant Design

• Fluent UI

これらは UI キットの通常のデザイン要素のように見えますが、実際にはレポジトリから取り出された React のコンポーネントです。Merge と UI キットの違いを説明するために、一見同じように見える ２つのボタンを使ってみましょう。

どちらもマテリアルデザインのボタンであり、紫色のものは GoogleのマテリアルデザインのUI キットのもので、下のものはマテリアルデザインを基盤としているMUIデザインシステムのものです。

紫色のマテリアルデザインボタンをクリックすると、コンポーネントのスタイルとインタラクションを作成できる UXPinの標準プロパティパネルが表示されます。

そして、青いMUIボタンをクリックすると、プロパティパネルがMergeモードに変わり、プロパティを作成する代わりに、Reactコンポーネントの利用可能なプロップ（Storybook統合 を使っている場合は Args）に基づいてプロパティを選択します。

例えば、色のドロップダウンを開くと、MUI のドキュメントにマッチした MUI ボタンのカラープロパティが表示されます。

このような特性で、製品チームは、ドリフトや不整合を最小限に抑えたプロトタイプを作るための必要な制約を得られます。

Merge の対象者

Merge は、スタートアップから大規模な企業まで、デザインシステムを使ってデジタル製品を構築するならどんな人にもピッタリです。UXPin の内蔵 UI ライブラリの 1 つを使うか、プロトタイプとテストのために製品のデザインシステムをインポートしてみましょう。

また、デザインシステムがある場合、Merge がレポジトリからインポートするコード コンポーネントが必要です。デザインシステムの成熟度についての詳細はこちらをご覧ください。

Merge を使う理由

デザインプロセスでコードコンポーネントを使用することにより、デザイナーは最終製品を正確に再現するプロトタイプを構築することができ、このようなコードベースのプロトタイプで、ステークホルダーやユーザーは現実的なユーザー体験を得られ、その結果、デザイナーが反復して改善するための有意義なフィードバックが得られます。

Merge でのプロトタイプは、従来のデザインツールを使うよりもはるかに高速です。ある実験では、クライアントが 1 ページのプロトタイプを 10 分もかからず作成できたのに対し、画像ベースのデザインツールを使った場合は 1 時間以上かかりました。‐ そして、Merge のプロトタイプは、機能性と対話性が大幅に上がりました。

デザインと開発のギャップを埋める

従来の製品開発ワークフローでは、デザインからエンジニアリングへの明確なハンドオフのプロセスがあり、エンジニアはプロトタイプやモックアップをコードに変換しないといけません。

Mergeがあれば、デベロッパーにはまったく同じレポジトリから取り込まれたまったく同じコンポーネントを使うことができるため、デザインのハンドオフがよりシームレスになります。対するMergeはプロダクションで使用可能なJSXを生成するので、エンジニアはコピー＆ペーストするだけでプロトタイプを複製できます。

UXPin ではじめよう

UXPin の初心者向けチュートリアルをお楽しみいただけましたか？アカウントをお持ちでない場合は、無料トライアルにサインアップして、コードに簡単に変換できるプロトタイピングを試してみて、より良いデザインワークフローをお楽しみください。詳細はこちら。