先進的な7つのプロトタイピング機能

プロトタイプの品質と忠実度は、デザインプロセスや最終製品に大きな影響を与えます。高度なプロトタイプ（最終製品のように見え、機能するもの）があれば、UXデザイナーはユーザビリティテストでより良い結果を得ることができ、デザインのハンドオフに至る前に問題を解決することができます。

ほとんどの主要なベクターベースのデザインツールは、最終製品を正確に模倣するプロトタイプをデザインするための忠実度や機能を備えていません。

コードベースのデザインツールの登場により、デザイナーは最終製品のような外観と機能を持つ高度なプロトタイプを作成することができるようになりました。

この記事では、コードベースのデザインツールが提供する7つの高度なプロトタイピング機能と、それらがどのように役立つのかをご紹介します。

1. Auto Layout

Auto Layoutは、コンポーネントの配置・サイズ調整・位置調整を高速に行うことができるので、デザイナーにとって便利な機能です。デザイナーは、いくつかのAuto Layoutのプロパティを変更するだけで、ユーザーインターフェイスのレイアウトを大きく変えることができます。

ほとんどのデザインツールはオートレイアウト機能を備えていますが、UXPinのコードベースのツールでは、もう少し高度な機能を利用できます。

UXPinのAuto LayoutはFlexboxのプロパティと原則に基づいて動作するため、デザイナーと開発者が同じ言語で会話できることになります。エンジニアはUXPinからCSSをコピー＆ペーストするだけで開発のスタート地点に立てるので、デザインのハンドオフに最も有益です。

UXPinのAuto Layoutが持つ5つのプロパティ：

Direction: Auto Layoutフレームを縦に並べるか横に並べるかを設定します。
Distribute: 十字の軸に沿った要素の配置を設定します。
Gap: グループ内のコンポーネントを一定の間隔を設定することができます。
Wrap: グループの幅や高さに応じてコンポーネントをラップします。
Align: コンテナ内の主軸に沿って要素を整列させます。

さらに、Auto Layoutグループには、fill・border・ padding・radiusなど他のプロパティを変更することができます。デザイナーは、単一のコンポーネント又はコンポーネント・エレメントのグループにAuto Layoutを使用できます。

2. Merge

UXPin独自のMergeテクノロジーは、UXデザインワークフローに革命を起こすと同時に、DesignOpsの多くの課題を解決しています。Mergeの機能により、デザイナーはリポジトリで完全に機能するコードコンポーネントを使用して製品やインターフェイスを構築することができます。

この技術により、デザイナーは最終製品に使われるのと同じコンポーネントでプロトタイプを作ることができるようになりました。また、新しいデザインに合わせてコンポーネントの特性を変更することも可能です。

Mergeに繋ぐ2つの方法:

Git 統合（Reactコンポーネント）
Storybook統合（Vue、Angular、Web Components、Emberなど）

エンジニアがレポのコードコンポーネントに加えた変更は、自動的にUXPinのデザインエディタに同期されます。デザイナーにも新しいアップデートを知らせる通知が届きます。組織全体のデザインシステムを同期して、「single source of truth！」を得るのに最適です。

3. コンポーネント

デザイナーは再利用可能なコンポーネントを作成することで、時間の節約・一貫性の維持を可能にします。また、コンポーネントをデザインシステムに保存することで、組織全体が同じコンポーネントにアクセスできるようになります。

2つの側面から成る UXPin コンポーネント：

Master Component: コンポーネントプロパティを定義します。
Instance Component: Masterをコピーし複製します。

Masterに加えた変更は、自動的に全てのInstanceに同期されます。必要に応じて、デザイナーはInstanceを上書きすることができます。例えば、グリッド内の複数のInstanceの背景色を変更したい場合などです。また、上書きをリセットして、Masterに戻すこともできます。

Master Component に変更を加えると、UXPin は Properties パネルに【このコンポーネントは同期していません】という通知を表示します。同じメッセージは、組織内の他の誰かがデザインシステムコンポーネントを調整した場合にも表示されます。UXPinでは、コンポーネントの変更を適宜プッシュまたはプルするオプションが用意されています。

チームメンバー（他者）によるデザインシステムの変更を望まない場合、デザインシステムのDashboardで許可制の設定ができます。

4. ステート

ステートでは、ユーザーやシステムのトリガーに基づいてエレメントやコンポーネントに異なるプロパティを設定することができます。例えば、1つのボタンにdefault・hover・active・disableを設定でき、最終製品に近い状態にすることができます。

ベースステートは、エレメントやコンポーネントがdefaultの状態です。ベースステートに変更を加えると、UXPinは全てのステートに共通するプロパティのみを調整するので、各ステートを個別に更新することなく変更ができます。また、すべての変更をリセットし、ベースステートに戻すこともできます。

ステートは、Dropdown・Accordion・Carousel・ナビゲーションなどの複雑なコンポーネントを設計する際にも便利で、プロトタイプの忠実度と機能性を向上させることができます。

5. Variables

ベクターベースのプロトタイプでは、データの入力とバリデーションは不可能です。開発の参加者や関係者は、Webサイト訪問者がSign-upフォームを記入したことをイメージしなければならないですし、デザイナーはパーソナライズされたプロトタイプを構築しなければなりません。

UXPin Variablesでは、ユーザーの記入情報を取り込み、それを使ってアクションを起こすことができます。例えば、ユーザー名を取得して、次の画面でパーソナライズされたウェルカムメッセージを表示したり、様々なフローをシミュレーションすることができます。

また、デザイナーはユーザーに応じて変化するダイナミックかつカスタマイズされた没入型のUXを作ることができます。（これはベクターベースのデザインツールではできないことです。）

6. Expressions

UXPin Expressionsを使用して、プロトタイプをコーディングされた製品に一歩近づけましょう。このパワフルな機能により、様々なフォーム・パスワードの検証、ショッピングカートの更新、ユーザー入力のテキスト変更などJavascriptのようなプログラミングを作成することができます。

好例は電子メールアドレスの検証です。入力に@記号が含まれていない場合、プロトタイプはエラーメッセージを表示し、有効なメールアドレスを入力するようユーザーに伝えることができます。

また、eコマースにおいても本格的なUXを作成することが可能です。
（カート内商品の削除・更新、合計金額の計算・表示、支払い情報入力・確認など）

7. データの活用

JSON、CSV、Googleシートから独自のデータを使用したり、UXPinのFill with Data機能を使って、関連するダミーコンテンツやUnsplash画像でフィールドを埋めることが可能です。

UXPinに独自のデータを取り込むには、Google Sheetsがおそらく最も迅速で簡単な方法です。列の見出しがレイヤー名と一致していることを確認すれば、UXPinが関連するフィールドに自動的にデータを入力します。データ（JSON、CSV、Googleシート）に変更を加えると、データを更新してレイヤーを再投入することができます。

おまけ – UXPinデザインシステム

UXPinでは、デザインシステムを0から作成したり、いくつかの組み込みデザインライブラリを使用して、すぐにプロトタイプの作成を開始することができます。
デザインシステム（Merge も含む）は、制作画面の左側のナビゲーションに表示されるので、デザイナーはプロトタイプを作成するために必要なコンポーネントをドラッグ＆ドロップすることができます。優れたデザインシステムを使用すれば、コンセプトから忠実度の高いプロトタイプまであっという間に完成させることができます。

まとめ

UXデザイナーは最終的にはコードベースの製品をデザインしますが、プロトタイピングやテストにはベクターベースのツールを使用しています。最終製品と同じ忠実度と機能性がなければ、正確なテストができるでしょうか？

高度なプロトタイピングは、ツール選定から始まります。ほとんどの主要なデザインツールは、ベクターグラフィックのデザインには優れていますが、プロトタイピングや有意義なユーザビリティテストには適していません。

UXPinを使用することで、デザイナーは完全に機能するプロトタイプを作成することができます。

ぜひ14日間無料体験をしてみてください。