【プロダクトチーム向け】UXPin ワイヤーフレーム 入門
ワイヤーフレームの作成は、UXデザインプロセスにおける重要なステップであり、最終製品の設計図としての役割を果たします。
このガイドでは、コードベースのテクノロジーと内蔵機能で際立つエンドツーエンドのデザインツールであるUXPinを使って効果的なワイヤーフレームを作成する方法を詳しくご紹介します。
本記事では、基本的なUI要素の組み立てからユーザーフィードバックの組み込みまで、アプローチを一つずつ詳細に提供しています。
インタラクティブなフォーム要素や「Code-to-Design（コードからデザイン）」の機能など、UXPinのユニークな機能が、どのようにデザインプロセスの効率化や連携強化、よりユーザーにとって使いやすい製品への貢献をできるかを見ていきましょう。
主なポイント：
- UXPinには、デザイナーが完全にインタラクティブで機能的なワイヤーフレームを作成できるようになるコードベースのワイヤーフレーム作成機能がある。
- UXPinは、デザインライブラリや高度なプロトタイピング機能などが内蔵されていることによって、他のデザインツールとは一線を画している。
- UXPinは、ワイヤーフレームから忠実度の高いプロトタイプへのシームレスな移行をしやすくすることから、複雑なインタラクションや API連携まで実現し、包括的なフルスタックデザインソリューションとなる。
UXPin でデザインプロセスを効率化し、ワイヤーフレームをもっと速く作成しませんか。こちらから無料トライアルにサインアップして、UXPin のフルスタックデザインソリューションをぜひお試しください。
UX のワイヤーフレームとは
UX のワイヤーフレームは、UI（ユーザーインターフェース）の基本的なフレームワークを表現する、低忠実度（Lo-Fi）の視覚的な設計図であり、通常は色やグラフィック、複雑な詳細はなく、主にスペースの割り当て、コンテンツの優先順位、および意図された機能に焦点を当てています。
デザイナーは、Web ページやアプリ、システムの構造を伝えるために、デザインプロセスの初期段階でワイヤーフレームを作成しますが、ワイヤーフレームは、詳細なモックアップや高忠実度（Hi-Fi）プロトタイプに入る前に、基本的なレイアウトとインタラクションのパターンを確立することを主な目的としています。
ワイヤーフレームの利点
ワイヤーフレームには、デザインプロセスの効率化や、チームメンバー間の効果的なコミュニケーションの促進を実現するさまざまなメリットがあります。以下に、その利点を挙げましょう：
- 明瞭性： ワイヤーフレームが、レイアウトを視覚的に表現することで曖昧さを取り除き、関係者は誰でも明確なロードマップを得られる。
- 効率性： ワイヤーフレームが早期に問題を解決することで、開発後期の時間とリソースが節約される。
- 整合性： ワイヤーフレームで、プロジェクトの目標と機能性に関するステークホルダーとチームメンバーの足並みが揃う。
- ユーザビリティ：UX（ユーザーエクスペリエンス）を評価する機会を提供することから、 直感的なナビゲーションとレイアウトが確保される。
- 連携： ワイヤーフレームがディスカッションのツールとして機能することから、デザイナー、デベロッパー、ステークホルダーが初期のデザインのフィードバックを提供できるようになる。
- 優先順位付け： デザインの最も重要な要素を特定し、コンテンツの効果的な階層化が実現する。
- 柔軟性： ワイヤーフレームで、反復と変更がしやすくなることから、実験のための Lo-Fi（低忠実度）モデルとして機能できる。
- アーキテクチャ：ワイヤーフレームは、デジタル製品の情報アーキテクチャのベースとなる。
UXPinはワイヤーフレーム作成に適したツールか
UXPinは、優れたUXを実現できるワイヤーフレームが作成可能なエンドツーエンドのデザインツールです。デザイナーは次のような機能を使用してインタラクティブなワイヤーフレームを簡単に作成できます：
- ボックス（Box）：テキストを追加できる柔軟な UI 要素
- シェイプ（Shape）：長方形、楕円、円、丸、線、矢印、多角形、星形
- テキスト（Text）：基本的なテキストブロック
- フォーム（Form）：ボタン、テキストエリア、セレクト/マルチセレクト、チェックボックス、ラジオボタンなど、基本的なスタイルのないフォーム要素のセット
- ホットスポット（Hotspot）: UIの任意の要素や特定の場所をインタラクティブにする
- アイコン（Icon）：マテリアルデザイン、Fonts Awesome、Retina アイコンなど、複数のアイコンセットから選ぶ
他のデザインツールとは違い、UXPinのUI要素はデフォルトでもインタラクティブなものです。
例えば、UXPinのすべてのフォーム要素は完全に機能し、チェックボックスやラジオをキャンバス上にドラッグ＆ドロップするだけで、クリック可能なオン/オフの状態のインタラクティブ機能がすでに備わっています。
このようなインタラクティブな要素により、デザインチームは、デザインプロセスのよりコストのかかる忠実度の高い（Hi-Fi）段階に移行する前に、ワイヤーフレームのプロセスでより多くのデータとフィードバックを集めることができます。
UXPinと他のワイヤーフレームツールの違い
UXPin の最も大きな違いは、このプラットフォームがコードベースのテクノロジーを採用している点です。UXPin は、SketchやFigmaのようにベクターグラフィックスを生成するのではなく、HTML、CSS、Javascript を裏でレンダリングします。
このコードベースのアプローチにより、デザインチームは完全にインタラクティブなワイヤーフレームやプロトタイプを構築するための機能が強化できます。
たとえば、画像ベースのツールでは、入力フィールドはグラフィカルな表現ですが、UXPinではユーザーデータをキャプチャ、保存、共有できる機能的になります。
内蔵機能とプラグイン
もう一つの違いは、UXPinは他のワイヤーフレームツールよりも多くの機能を標準で提供し、プラグインや拡張機能を必要としない点です。UXPin のプランには、デザインシステム、ビルトインデザインライブラリ、コンテンツとデータ、フォント（Googleとカスタム）、アクセシビリティ機能など、他のデザインツールではプラグインが必要なものが多数含まれています。
Code-to-Design（コードからデザイン）
UXPin Mergeのテクノロジーにより、デザインチームはコードコンポーネントをデザインプロセスにインポートしてプロトタイプを作成を可能にします。デザイナーは、デベロッパーが最終製品に使うのと同じ UI ライブラリを使って、完全に機能するインタラクティブなプロトタイプを作成できます。
エンジニアリングチームで特定のワイヤーフレームのコンポーネントライブラリが使われている場合、Merge を使ってこれを UXPin にインポートできます。
また、Merge にはインタラクティブなプロトタイプの作成に使えるビルトインライブラリ（例：Material UI、MUI、Ant Design、Fluent UI、ボイラープレートなど）があり、ワイヤーフレーム作成から忠実度の高いプロトタイプ作成まで、コンセプトやアイデアをすぐにテストすることができます。
UXPin でワイヤーフレームを構築する方法
ここでは、フィードバックの収集やステークホルダーとの連携など、UXPin でワイヤーフレームを作成するためのステップをご紹介します。
このステップバイステップのチュートリアルに従うには、UXPin のアカウントが必要です。
まだお持ちでない方は、１４日間の無料トライアルにサインアップしてください。
ステップ１: UXPin を開いて新規プロジェクトを作成する。
- UXPin を開き、青い［＋New project］のボタンをクリックする。
- プロジェクト名を入力し、［ Create New Project（新規プロジェクトの作成）］をクリックする。
- 次に、「What do you want to start with today?（今日は何から始めますか？）」画面から［New prototype］を選択する。
ステップ２：ワイヤーフレームのキャンバスサイズを選ぶ
右側のプロパティパネル（Propaties Panel）で、ワイヤーフレームのキャンバス（CANVAS）のサイズを選択します。
UXPin には、デスクトップ、タブレット、モバイル、ウェアラブルなど、幅広い標準ビューポートが用意されています。
グリッドとガイドを使って、水平または垂直方向の一貫性を保ちましょう。
ステップ３：各画面のページを作成する
アートボードやフレームが使われる FigmaやSketchとは異なり、UXPinは画面ごとに独立したページが使われます。
- 左サイドバーの下部にある［Pages & Layers］を選択する
- サイドバー上部の［＋］のアイコンをクリックし、新規ページを作成する（［OPTION + N］のキーボードショートカットでも可能。）
- ページ名をダブルクリックして変更する（今回は「Login（ログイン画面）」と「Welcome（ウェルカムページ）」の２つのページを作成する）
アドバイス：ユーザーフローライブラリを使って、ユーザージャーニーと情報アーキテクチャを設計し、プロジェクトの画面数とナビゲーションレイアウトを決定しましょう。
ステップ４：ワイヤーフレームの UI 要素の作成
UXPinのシェイプ、フォーム、ボックスなどを使ってワイヤーフレームのパターンやレイアウトを組み立てることができます。
また、オートレイアウト（Auto Layout）では、サイズ、ギャップ、配置、分布など、グループ要素を効率的に管理できます。
UXPinのコンポーネントを使って、再利用可能なワイヤーフレーム要素を作成しましょう。これによって、より迅速な反復と最大限の一貫性を実現できます。
ステップ５：インタラクションを定義する
このデモでは、ログイン画面からウェルカムスクリーンに基本的なナビゲーション・インタラクションを追加します。
- 要素をクリックして選択し、Properties Panel（プロパティパネル）の Interactionsをクリックする。
- 以下のようにナビゲーションのインタラクションを作成する：
- Trigger：Click (Tap)
- Action： Go to Page
- Page：ドロップダウンリストから Welcomeを選択
- ［Add（追加）］をクリックしてインタラクションを完了する
Trigger、Action、Animation、条件などのインタラクションの設定方法をご覧ください。
ステップ６：連携とフィードバックの収集
UXPinのPreview（プレビュー）と Share（共有）機能を使って、ステークホルダーにワイヤーフレームを共有します。
また、Comments（コメント）機能で、ステークホルダーはデザインに注釈を付けてフィードバックしたり、特定のチームメンバーにコメントを割り当てることができます。
UXPin でワイヤーフレームからプロトタイプへ移行する方法
UXPinでは、ワイヤーフレームからプロトタイプまで簡単にできます。
ゼロからコンポーネントをデザインしてモックアップを作成することも、デザインシステムを使って忠実度の高いインタラクティブなプロトタイプをすばやく構築することもできます。
UXPinには、プロトタイピング機能を強化する主要機能が以下のように４つあります：
- ステート（状態）: UI要素１つに対して複数のステートを作成でき、メニューやドロワーなどの複雑なインタラクティブコンポーネントをデザインできる。
- Variables（変数）：ユーザーの入力からデータを取得し、登録後に個別に送るウェルカムメッセージのように、個別化された動的なユーザー体験を作成する。
- Expression： 複雑なコンポーネントや高度な機能を作成するための Javascript のような関数であり、コードは不要。
- 条件付きインタラクション：ユーザーのインタラクションに基づいて「if-then」や「if-else」の条件を作成し、複数の結果を持つダイナミックなプロトタイプを作成して、最終的な製品エクスペリエンスを正確に再現する。
API連携でより高度なプロトタイプにする
UXPinのIFTTT統合で、例えば、ユーザーのカレンダーへの予定の追加や、ウェルカムメッセージのようなメールの送信など、API連携を通じて外部の製品やサービスと連携することができます。
UXPinのデザインシステム、高度なプロトタイピング機能、および API機能を使うことで技術的な知識やエンジニアからのサポートがなくても、複雑な製品のレプリカを作成できます。
この洗練されたプロトタイプによって、ユーザーやステークホルダーから有意義なフィードバックを得ることができ、製品のUXを向上させることにつながります。
世界最先端の製品デザインツールを使って、ワイヤーフレームとプロトタイプを作成しませんか？
無料トライアルにサインアップして、UXPin でインタラクティブなワイヤーフレームを作成してみましょう！
