ワイヤーフレームの作成は、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には、プロトタイピング機能を強化する主要機能が以下のように４つあります：

1. ステート（状態）: UI要素１つに対して複数のステートを作成でき、メニューやドロワーなどの複雑なインタラクティブコンポーネントをデザインできる。
2. Variables（変数）：ユーザーの入力からデータを取得し、登録後に個別に送るウェルカムメッセージのように、個別化された動的なユーザー体験を作成する。
3. Expression： 複雑なコンポーネントや高度な機能を作成するための Javascript のような関数であり、コードは不要。
4. 条件付きインタラクション：ユーザーのインタラクションに基づいて「if-then」や「if-else」の条件を作成し、複数の結果を持つダイナミックなプロトタイプを作成して、最終的な製品エクスペリエンスを正確に再現する。

API連携でより高度なプロトタイプにする

UXPinのIFTTT統合で、例えば、ユーザーのカレンダーへの予定の追加や、ウェルカムメッセージのようなメールの送信など、API連携を通じて外部の製品やサービスと連携することができます。

UXPinのデザインシステム、高度なプロトタイピング機能、および API機能を使うことで技術的な知識やエンジニアからのサポートがなくても、複雑な製品のレプリカを作成できます。

この洗練されたプロトタイプによって、ユーザーやステークホルダーから有意義なフィードバックを得ることができ、製品のUXを向上させることにつながります。

世界最先端の製品デザインツールを使って、ワイヤーフレームとプロトタイプを作成しませんか？

無料トライアルにサインアップして、UXPin でインタラクティブなワイヤーフレームを作成してみましょう！

The post 【プロダクトチーム向け】UXPin ワイヤーフレーム 入門 appeared first on Studio by UXPin.

最初に

ダッシュボードは、アプリケーション内の主要なイベントの整理や、さらなる分析に使える統計情報を確認できることから営業、マーケティングなどのを含むさまざまなチームまたはビジネスでよく使用されます。

一見、ダッシュボードのデザインは複雑そうに思うかもしれません。大量の情報とデータセットが統合されていますからね。

しかし、実際にダッシュボードを作成してみると、意外ととても簡単に１つにまとめることができます。

ここで重要なのはデザイン上の決定を導くために役立つ、すぐに使えるコンポーネントを用意しておくことです。

本記事では、Reactライブラリである Material UI （既製の要素の完全に文書化された人気のライブラリの１つ ）を使ってレスポンシブなダッシュボードをデザインする手順を見ていきましょう。

レスポンシブなレイアウトを短時間で簡単に作ってみませんか？

完全にインタラクティブな要素をドラッグ＆ドロップするだけで、プロ並みのUIを数分で簡単に作成することができます。

詳しくはUXPin Mergeのページをぜひご覧ください。

ダッシュボードの構築に MUI コンポーネントを使う理由

MUIは、React向けのコンポーネントライブラリであり、Googleのマテリアルデザインガイドラインに従って開発されました。

開発当時でもMUIは画期的なコンポーネントライブラリであり、React開発者はレスポンシブレイアウトをより速く構築できるようになりました。

また、MUIチームはライブラリを進化し続け、新しいバージョンを随時リリースしているため今日でも変わらず人気があります。詳しくは、MUI に関するこちらの記事をご覧ください。

MUI はデータ表示コンポーネントでいっぱい

MUI には、ダッシュボードに最適なUI（ユーザーインターフェース）の要素が数多くあり、広範囲にカスタマイズ可能です。

コンポーネントの種類

カード

特定のデータポイント、または強調したい関連データのグループを表すカードを作成できる。

データテーブル

MUIは、ソートとフィルタリング機能を持つシンプルな外観の Reactコンポーネントに公開されている。

日時ピッカー

詳細な日付または時刻での並べ替えが必要な場合は、 Material UIコンポーネントを使用する。

入力コンポーネント

チェックボックス、レーティング、セレクトなど、データテーブルで使いたいあらゆるタイプのボタンや入力フィールドが見つかる。

きちんと文書化されたライブラリ

Material UIは、最も文書化された UIコンポーネントライブラリの１つです。

ライブラリの進化とともにドキュメントを更新し続けるというコミットメントから、包括的な公式ドキュメントを備えています。

MUIがライブラリを最新の状態に保つ努力をしていることはもちろんですが、ライブラリはコミュニティからの強力なサポートを受けています。

例えば、開発者は Material UIを使ったアプリ構築のチュートリアルを頻繁に共有し、ヘルプが必要な人たちを手伝うことも十分できます。

アクセスしやすくレスポンシブである

MUIには、「使いやすい」と「レスポンシブ」という２つの大きな特徴があり、これは現代のインターフェースのデザインにおけるポイントなっています。

MUIはアクセシビリティを重視しており、「ARIA属性の使用」などのアクセシビリティのベストプラクティスに関するヒントが含まれています。

また、レスポンシブデザインにおいて、MUIは最も優れたコンポーネントライブラリの１つです。

デバイスや画面サイズに関係なく動作するレスポンシブレイアウトを簡単に作成できます。

MUIコンポーネントでダッシュボードを構築する方法

ここからはUXPin Mergeを使って、MUIコンポーネントを使ったシンプルで機能的、かつレスポンシブなダッシュボードを構築する方法をご紹介します。

UXPinのアカウントをまだお持ちでない方は、こちらでUXPinのアカウントを作成してください。

それでは実際に作成してみましょう！こちらのUXPinプレビュー画面を開き、コードをみながらインタラクティブ性と応答性の高さをぜひご確認ください。

ステップ１：プロトタイプを新規で作る

UXPinのDashboardから［Design with coded components（コード化されたコンポーネントでデザインする） ］にカーソルを合わせ、MUIライブラリを選択します。

次にエディタが表示され、中央にはキャンバスが表示されます。

このキャンバスが作業フィールドになるので、レイアウトをデザインしたいデバイスに調整するには、右側にある「CANVAS SIZE」でキャンバスサイズを設定してください。

その他に、右側のメニューでは背景色の変更や、要素を整列させるためのグリッドの追加も可能です。 

キャンバスの左側では、ページやレイヤー、既成のコンポーネントなどが全て確認できます。

ちなみにMUIライブラリの場所は、左下の［Design System Libraries］から［MUI V5］を見つけましょう。（MERGE LIBRARIESの中にあります）

あとは、好きなコンポーネントをキャンバスにドラッグ&ドロップまたは、クリックすると中央に表示されます。

いかがでしょうか？簡単にできますね！

ステップ２：ThemeCustomizer にアクセスする

MUIライブラリを開き、［ThemeCustomizer］を検索します（検索バーを使って見つけましょう）

MUIコンポーネントの外観の調整に便利で、 ThemeCustomizerをキャンバスの上と外側に配置すると、操作しやすくなります。

ステップ３：キャンバスに MUI コンポーネントを配置する

デザインしたいコンポーネントを選びます。アプリバーやパンくずリストなどの操作から始めましょう。

アプリバーでは、ユーザーは他のページへのアクセスまたはアプリ内移動がしやすくなり、パンくずリストでは、アプリ内でのユーザーの位置付けを可能にします。

下のチュートリアル動画をご覧ください：

コンポーネントの四隅をクリックして拡大や縮小することで、簡単にサイズを調整できます。

他のコンポーネントも見てみましょう。

Cards（カード）

さまざまなインサイトを強調するために、このコンポーネントを複製する。

Paper（ペーパー）

テキストボックスです。

Typography（タイポグラフィ）

ライブラリからドラッグ&ドロップして、Paperコンポーネントに入れる。フォントの操作ができる。

Table（テーブル）

ソートできるデータのテーブルになる。

これでコンポーネントの準備ができたので、キャンバスの上に配置したThemeCustomizerでテーマを切り替えることができます。

ステップ４：コンポーネントをカスタマイズする

ここからが楽しくなってきますよ！

コンポーネントを移動させたり、独自のコンテンツやデータで埋めるたり、パディングやサイズを編集など、好きなように触ってみてください。

これは、基本的なコンポーネントだけでなく複雑なコンポーネントを作成するステップでも同じです。

テキストボックスのコンポーネントを取り出し、その中にいくつかの子要素をコピーした方法をご覧ください。

次に、実際のコンテンツを入力し、テキストのサイズを調整して、パディングを追加しました。 テーブルも同様です。

テーブルのセルをコピーして、［Pages and Layers］パネルに貼り付けるだけで、さらに行が追加されました。

ステップ５：グリッドとレイアウトを設定する

レイアウトがレスポンシブかどうかを確認します。コンポーネントをキャンバスの外に出し、レイアウト要素を配置しましょう。

その方法は次の通りです。

メニュー用のコンテナから始めます。コンテナをキャンバスの上に置き、幅に合わせてサイズを変更して、アプリバーを戻します。コンテナが必ず 「responsive（レスポンシブ）」 に設定されているようにしてください。

その後は、パンくずリスト用のBoxをドラッグ&ドロップし、データテーブル、カード、テキストボックス用のグリッドを追加します。

メニュー内のコンポーネントを移動させてグリッドをコピーして、その中に別のコンポーネントを配置するだけなのでとても簡単です。

ステップ６：デザインのプレビューと共有をする

これでダッシュボードを見たり、他の人と共有できる準備が整いました。

［Share］ボタンをクリックし、プロトタイプをプレビューするためのURLをコピーしてブラウザに貼り付けるか、Previewボタン（▶️）をクリックして確認してください。

できましたか？いいですね！！これで、ウィンドウのサイズを変更して、プロトタイプが実際にレスポンシブデザインのようにサイズを調整できるかが確認できます。

また、そのリンクを他の人と共有して閲覧してもらうこともできます。

ステップ７：実装作業

デザインは完了したので、最後のステップはコードをReactアプリケーションにコピーするだけです。

必要な依存関係や設定がすべて含まれた 初心者向けのReactボイラープレートを用意しましたので、こちらからCodeSandboxやStackBlitzですぐに編集を始めることもできます。

React App Boilerplateのインストール実行手順

1. ボイラープレート のレポジトリをダウンロードまたはクローンする。

2. npm install を指定してプロジェクトをインストールする。

3. npm start を指定してプロジェクトを実行する。 

テーマのインポート

1. UXPinのSpecモードにあるThemeCustomizerのコンポーネントのJSXをコピーする。

2. プロジェクトのtheme.jsファイルに JSX を貼り付ける。

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

1. UXPinのSpecモードから、目的のコンポーネントコンポジションのJSXをコピーする。

2. JSX をApp.jsファイルに貼り付ける。

3. MUI からインポートする各コンポーネントに import のステートメントが追加されていることを確認する。例：’@mui/material/Button’から「Button」 をインポートする。

より詳細な手順については、CoderOneのビデオチュートリアルの最後の部分をご参照ください。

UXPin Merge でレイアウトを１０倍速で作成する

これで完了です！これで、完全にレスポンシブでMUIコンポーネントライブラリと一貫性のある、アプリ用の新しいダッシュボードがセットアップされました。

作成したダッシュボードがプレビューのダッシュボードと同じようになっているか見てみてください。

UXPin Mergeを使用して、ダッシュボード以上のものも作成することができます。

デザインスキルがなくても、簡単にコードに変換できるアプリ、ウェブサイト、その他のデジタル製品の完全なUIを効率的にデザインできます。

無料トライアルはこちらから

The post 【React向け】 ダッシュボード デザインのチュートリアル appeared first on Studio by UXPin.

日付ピッカーは、Web サイト、アプリケーション、ゲーム、企業向けソフトウェア、OSなどで使われる、デジタル製品のデザインにおいて最も馴染みのあるUIパターンの１つです。

そしてデザイナーは、日付ピッカーがスクリーンサイズ、OS、デバイスなどでどのように機能するかを理解し、製品の美観、機能性、全体的なUX（ユーザーエクスペリエンス）への影響をテストしないといけません。

UXデザイナーは、従来の画像ベースのデザインツールで日付ピッカーは作成できませんが、UXPin Mergeでは可能です。UXPin Mergeの技術によって、完全に機能する日付ピッカーをGitレポジトリやnpmパッケージ、さらにStorybookからインポートすることができるのです。  

UXPinに同期された日付ピッカーは、最終製品のように機能します。アートボードをリンクしてインタラクションを作成する必要はありません！Mergeへのアクセスリクエストはこちらのリンクから。

 日付ピッカー とは

  日付ピッカーは、ユーザーが特定の日付、時間、またはその両方の組み合わせを選択できるようにする UIパターンであり、フォーマットの一貫性を確保しながら、日付の取得を効率化することを目的としています。

 日付ピッカー が必要な理由

  世界では、例えば米国だと「mm/dd/yyyy（月/日/年）」のように「日」の前に「月」を置くのに対し、英国では「日、月、年」の形式を使うというように、日付の表示形式が異なります。

これは微妙な違いに見えますが、データベースはユーザーが米国形式を使っているのか、英国形式を使っているかを区別することはできません。データベースは、どちらか一方の形式でしか日付を正しく読み取ることができないのです。例えば『２０２２年１０月１日』を数字で見てみましょう：

• 米国：10/01/2022 （英国だと 10日1月2022年）
• 英国：01/10/2022 （米国だと1月10日2022年）

  この例では、データベースは各エントリーを「１０月」ではなく「１月」として解釈しています。 また、ユーザーは同じ日付を複数の方法で入力し、異なるセパレーターを使用することもできます。以下に例を挙げましょう：

• Oct 1, 2022 
• Oct 1, 22
• 1 Oct 2022
• 1 Oct 22
• 10-01-22 / 01.01.2022 / 10/01/22 
• 22/10/01 / 2022/10/01

  日付ピッカーによって、ユーザーが日、月、年を個別に選択し、あいまいさをなくし、システムが一貫した正確なフォーマットを提供できるようにします。 

モバイルとデスクトップにおける 日付ピッカー の UIデザイン

モバイルの 日付ピッカー 

デザイナーは、iOSやAndroidのようなモバイルのオペレーティングシステムがユーザーにどのように日付ピッカーを表示するかを認識することが重要です。ちなみに、 iOS のネイティブピッカーでは無限スクロールのUIが使われ、Androidアプリケーションでは月全体を表示するカレンダービューが使われています。

また、iOSでは親指でのスクロールができますが、Androidでは親指タップに最適化されたUIとなっています。

デザインシステムからカスタムの日付ピッカーを使うこともできますが、ネイティブのオプションを使うことで、親しみやすさが生まれ、製品の学習曲線が短くなります。ただし、モバイルアプリにネイティブの日付ピッカーを使う場合は、iOSのUIで述べたようなユーザビリティの問題が生じないように注意しましょう。

デスクトップの 日付ピッカー 

  大抵のデスクトップのWebサイトやアプリケーションは、カレンダーの日付ピッカーが使われており、余分なスペースとマウスを使うことで、ユーザーは数回のクリックだけで簡単に日付を選択できます。また、多くの製品では、ユーザーが手動で日付を入力するための入力フィールドが提供されています。

日付の数値の入力フィールドは、デスクトップでもうまく機能します。UXデザイナーは、ユーザーを正しいフォーマットに導くべく、プレースホルダーや有益なエラーメッセージを含めないといけません。

 日付ピッカー の UIデザイン５種

数値の入力フィールド

  最も基本的な日付ピッカーは、数値入力またはテキスト入力フィールドです。このようなフィールドには、日付ピッカーを備えたモーダルポップアップが含まれる場合があるか、ユーザーは区切り文字を使って日付を入力する必要があります。

製品によっては、US Web Design Systemsのこの例のように、ユーザーが日付を入力するか、モーダルを使うかを選択できるものもあります。

プレースホルダーは、「MM/DD/YYYY（月/日/年）」といった日付のフォーマット方法をユーザーに示す必要があります。UXデザイナーは、ユーザーが「月」と「日」を入力するとセパレーターが表示される日付のオートフォーマットを適用することで、これをさらに推し進めることができます。また、デザイナーは、ユーザーがフォームに記入する方法を知ることができるように、ヘルパーテキストを下に追加することもできます。こちらの例をご覧ください。

ドロップダウン日付セレクタ

  デザイナーは、Webサイトやデスクトップのアプリケーションで、大体はドロップダウンの日付セレクタを使用します。ただこのような日付ピッカーはマウスではうまく機能しますが、オプション間のスペースが少ないため、モバイルデバイスのユーザー、特に大きな指や親指を持つユーザーには難しいかもしれません。

ドロップダウンセレクタは、カレンダーモーダルで単一の入力フィールドを使うよりも多くのスペースを占有し、ユーザーが「日」、「月」、「年」を個別に選択する必要があるため、入力に時間がかかります。

なので、ドロップダウンセレクタは、デスクトップアプリケーションやWebサイトには最適ですが、オンボーディングフォームではボトルネックになるかもしれません。

スクロール 日付ピッカー 

  スクロール日付ピッカーは、ユーザーが日、月、年を別々に選択するため、ドロップダウンと同様に機能します。このようなスクローラーは、ユーザーが親指を使って日、月、年をスクロールできるモバイルデバイスで最も便利です。

ただ、多くのユーザーは、スクロール式の日付ピッカーが遠い未来や過去の日付には適していないとの不満を抱いています。何十年もスクロールするのは時間がかかり、特に手や指に障がいのあるユーザーにとっては大変です。

ちなみに、iOSのデフォルトの日付ピッカーは、スクロール式の日付ピッカーの最も一般的な例ですが、Appleでは、はるか過去や未来の日付にカレンダーピッカーがよく使われています。

カレンダー 日付ピッカー 

  カレンダーUIは、最もよく使用される日付ピッカーであり、カレンダー日付ピッカーは、OS、デバイス、画面サイズに関係なくうまく機能します。

物理的なカレンダーやデジタル形式のカレンダーは誰でも見慣れたものであるため、ユーザーはこのような日付ピッカーで慣れ親しみ、それによって認知的な負荷や製品の学習曲線が軽減します。

カレンダーのUIは、日付範囲のピッカーに特に有益で、それによってユーザーは自分の選択を視覚化してサッと調整することができます。  

タイムラインピッカー

タイムラインピッカーは、１週間までの短い日付範囲や数時間の時間枠を選択するのに適しています。タイムラインのUIは、ユーザーが［開始日］と［終了日］を選択するためにインジケータをドラッグすることができるので、モバイルデバイスで特に便利です。

タイムラインピッカーは日付にも使えますが、タイムウィンドウの選択に最適です。

 日付ピッカー のUIとUXのベストプラクティス

日付ピッカー のアクセシビリティ

  デザイン性の低い日付ピッカーだと、障がいのあるユーザーやスクリーンリーダーを使うユーザーはイライラしてしまう可能性があります。全ユーザーが日付の選択にアクセスできるようにするには、物事をシンプルに保つことが非常に重要です。

以下は、日付ピッカーにアクセスしやすくするための推奨事項です：

• 日付フィールドには明確なラベルを使いましょう。例えば、誰かが予約をしている場合、スクリーンリーダーや認知障がいのユーザーが必要な日付を知ることができるように、フィールドに「予約日」または「予約日を選択してください」というラベルを付けます。
  
  
• プレースホルダーと入力フィールドの上または下にフォーマットのヒントを含めましょう。このバリデーションで、明確な指示によって全ユーザーに利益がもたらされると同時に、日付ピケットがより利用しやすくなります。
  
  
• ユーザーは、タッチ、マウス、スクリーンリーダー、キーボードを使って日付ピッカーを使えないといけません。UX デザイナーは、全ユーザーとデバイスが 確実にUIを操作して簡単に日付を選択できるようにするために、日付ピッカーをテストしないといけません。
  
  
• 日、月、年のフィールドを分けることで、スクリーンリーダーやキーボードユーザーが日付を入力しやすくなります。UX デザイナーは、ユーザーがカレンダーを使って選択を完了できるように、ボタンまたはカレンダーのアイコンを含めるのもいいでしょう。（USWDSの日付ピッカーの例を参照）。

以下は、日付ピッカーのアクセシビリティリソースです：

• Collecting dates in an accessible way by Hassell Inclusion
• Date picker by US Web Design System
• General accessibility guidance for forms by US Web Design System

現在の日付を表示

  カレンダーピッカーでは、ユーザーに［現在の日付］と［選択内容］の表示が重要です。現在の日付を強調表示することで、ユーザーが選択する際の基準となり、特に旅行や予約の際に重要です。

「現在の日付」と「ユーザーが選択した日付」の区別は、混乱を避けるために非常に重要です。マテリアルUI では、現在の日付にはアウトラインを、選択された日付には陰影のある背景を使用することで、これをハッキリと区別しています。

空いてない日をブロックする

日付を選択しても、その日が利用できないことが判明するのは、最もイライラするユーザー体験のひとつであり、それでユーザーは選択をやり直して、空きを見つけるまで試さないといけません。そこで、空いてない日付をブロックすることで、ユーザーはカレンダーに戻ることなく選択することができます。

追加の重要な意思決定データを提供する

Booking.com や Airbnb などの多くの旅行予約アプリは、ユーザーが最良の料金を見つけることができるように、各日付の下に１泊あたりの料金を表示しています。この情報でユーザーはお金を節約できるため、ポジティブなユーザー体験が生み出されます。

不要なデータの削減

カレンダーのUIは、ごちゃごちゃして煩わしい場合があります。デザイナーは、カレンダーを読みやすくしてタスクを完了しやすくするために、UI要素、線、その他のコンテンツをできるだけ減らさなないといけません。例えば、ユーザーは「生年月日」を選択する際に「曜日」を見る必要はありませんよね。

また、UXデザイナーは、カレンダーの背後にあるコンテンツを遮断するために、モーダルオーバーレイに無地の背景を使わないといけません。

UXPinで 日付ピッカー をデザインする方法

UXPinは、インタラクティブで動的な忠実度の高いプロトタイプを作成するための高度なプロトタイピングツールです。大抵のプロトタイピングツールでは、１つのインタラクションをプロトタイプ化するために複数のアートボードを作成する必要がありますが、UXPinではステート、Variables（変数）、条件を使って完全に機能するページを作成できます。

UXPin に日付ピッカーを挿入するには、まず垂直ツールバーの「Search All Assets（すべてのアセットを検索）」の検索アイコン（command + F / Ctrl + F）をクリックします。

次に、入力フィールドで「date（日付）」または「calendar（カレンダー）」を検索します。

オプションは［Components（コンポーネント）］ の見出しの下に用意されるものもあり、タッチユーザーに最適なものもあれば、キーボードユーザーに最適なものもあるでしょう。ただし、「Input calendar（カレンダー入力）」は、タッチユーザーにはカレンダーを提供し、キーボードユーザーには入力フィールドを提供します。

 日付ピッカー コンポーネントのスタイリング

UXPin のコンポーネントはすでに優れたUXを提供するようにデザインされていますが、皆さんはブランドが持つビジュアルアイデンティティやアプリ/ Web サイトの美的感覚に合うようにスタイリングしたいと思うでしょう。そのためには、右側のプロパティパネルを使いましょう。

UXPinのデザインシステムライブラリ（特にテキストスタイルとカラースタイル）を使っている場合は、すでに確立されているスタイルを活用することで、日付ピッカー コンポーネントとデザインの他の部分の視覚的な一貫性をある程度維持できます。

コンポーネントをカスタマイズするには、スタイルを設定したいレイヤーを選択し、「デザインシステムライブラリ」の アイコン（⌥ + 2 / alt + 2）をクリックして UXPinのデザインシステムライブラリに移動し、レイヤーに適用したいスタイルを選択します。

実際のコンポーネントで代用

デザイナーは、同じコンポーネントを何度も挿入したりスタイリングしたりして毎回最初からいちいち作るのではなく、デベロッパーによってすでに構築されたリリース可能なコンポーネントを使用できます。コーディングなしで Git、Storybook、または NPM からコンポーネントを取り込むことができ、見た目も機能も本物と同じです。これを実現できるUXPinが持つテクノロジーについてご覧になりませんか。こちらからぜひアクセスをリクエストしてください。

The post UI を魅力的にする 日付ピッカー のデザイン appeared first on Studio by UXPin.

コンポーネント駆動プロトタイプは、ユーザーテストを大幅に改善すると同時に、ステークホルダーに現実的な製品デザインの期待値を提供しますが、UXPinの npm統合 で、デザインチームは、完全に機能する高忠実度のプロトタイプのデザインに、オープンソースのコンポーネントライブラリを使うことができます。

UXPinのMergeテクノロジーと npm統合 で、コードベースのデザイン革命に乗り出しましょう。 デザインシステムを最大限に活用し、デザインハンドオフを改善し、デザインを大幅に拡張するコンポーネント駆動型プロトタイプの詳細をぜひご覧ください。

UIコンポーネントは、Gitレポ、Storybook、または最新の npm統合 によって提供されます。最後のオプションについては、ぜひこちらをご覧ください。

UXPin Mergeとは

UXPin Merge は、レポジトリ、Storybook、または npm パッケージとしてホストされているコンポーネントライブラリをUXPinのデザインエディタに同期できる、コードベースの技術であり、デザイナーは、このような UIコンポーネントを使って、最終製品のような外観と機能を持つプロトタイプを構築できます。

エンジニアやデザイン システム チームがレポジトリ内の機能コンポーネントに加えた変更は、自動的にUXPinに同期され、デザイン チームに更新が通知されます。Mergeにはバージョン管理が含まれており、チームメンバーは必要に応じて古いデザインシステム バージョンに切り替えることができます。

この『信頼できる唯一の情報源（Single source of truth）』は連携を強化し、「デザインツール」と「コード」という２つのデザインシステムを管理するDesignOpsとDSチームの負担を軽減します。

UXPinの npm 統合 とは

これまでUXPin Mergeは、セットアップ全般にはエンジニアリングの専門知識を必要としていましたが、セットアップのための貴重なエンジニアリングリソースがどのチームにもあるわけではないので、npmコンポーネントをUXPinに統合する方法を考え出しました。

Merge の npm 統合により、デザイナーは npm パッケージとして利用可能なオープンソースのコンポーネントライブラリのインストールと管理を完全に制御することができます。また、直感的なインターフェースを使って、プロトタイプのニーズに合わせてコンポーネントをインポートおよびカスタマイズすることができます。ちなみに、全設定においてコーディングスキルは不要です。

デザイナー向けのnpmについて学びたい方は、入門ガイドをお読みください：NPMと言うのは？把握しよう！

 Ant Design とは

Ant Designは、Alipay、華北、優慧宝など、中国に拠点を置くハイテク/金融企業のコングロマリットである Ant GROUPから生まれた製品です。

Ant Designは、B2B、B2C、エンタープライズ製品など、数多くのアプリケーションの構築に利用されており、この包括的なデザインシステムには、React、Angular、Vueのコンポーネントライブラリと、それを補完するアイコンセットが含まれています。また、ネイティブアプリケーションの構築に、Ant Design モバイルも入手できます。

UXPin Mergeを使った Ant Design の npm 統合方法

Ant DesignのReactコンポーネントライブラリは、 npm パッケージ（antd）として提供されており、デザイナーは、UXPinの  npm 統合を使った Ant React コンポーネントをインポートし、Mergeのコンポーネント管理でプロパティをカスタマイズすることができます。

デザインチームが Ant Design を他のデザインツールと併用する場合、 Ant Design の静的ベクターベースの UI キットをいずれか使う必要がありますが、UXPinの npm 統合 により、デザイナーはエンジニアが使う同じコンポーネントへのアクセスが可能です。

Ant Designのコンポーネント駆動型プロトタイプは、デザイナーとエンジニアの間に『信頼できる唯一の情報源（Single source of truth）』を作成し、UXチームと製品チームの間に最高の一貫性を確保します。

UXPinの  npm 統合 では、インポートする Ant DesignのReactpropsを色、サイズ、アイコン、ステートなど自由に選択することができます。

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

  npm 統合 には、各 Ant Designのコンポーネントプロパティをインポートおよび管理するための一元管理である『Merge コンポーネントマネージャ』が含まれています。

UXPinの npm 統合はReactコンポーネントで動作するので、 Ant Design のReactドキュメントに従って、どのpropsをインポートするかを参照できます。これらを Merge のコンポーネントマネージャ で設定すると、コンポーネントのプロパティが UXPin のプロパティパネルに表示されます。

例えば、Ant のボタンには以下のように６つのタイプまたはバリエーションがあります：

• プライマリー
• ゴースト
• ダッシュ
• リンク
• テキスト
• デフォルト

これらのボタンタイプ（および他のすべてのプロパティ）は、デザイナーが選択できるようにプロパティパネルにドロップダウンとして表示されます。プロップは、コンポーネントによって、テキストフィールド、チェックボックス、コードエディタなどとして表示されます。

UXPinとAnt Designの npm パッケージの連携

ステップ１

UXPinのダッシュボードに移動し、【New Project（新規プロジェクト） 】をクリックします。

ステップ２

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

ステップ３

【New prototype（新規プロトタイプ）】をクリックし、UXPinのデザインキャンバスにプロジェクトを開きます。

ステップ４

左サイドバーのDesign System Libraries（デザインシステム・ライブラリ）タブの下部にあるドロップダウンをクリックし、【New library （新規ライブラリ）】をクリックします。

お使いのサイドバーや利用可能なライブラリは、例と異なる場合があります。

ステップ５

【Import React Components （React コンポーネントをインポートする）】を選択し、【Next （次へ）】をクリックします。

ステップ６

ライブラリに名前を付けます。この名前は純粋にあなたの参考のためであり、インポートに影響を与えることはありません。

また、Ant Design のnpmページの「Install（インストール）」にある、npmパッケージのレポジトリ名を取得する必要があります。npmからインストール内容をコピーして、「Library Package name （ライブラリパッケージ名）」欄に貼り付けます（antdより前は削除）。

コンポーネントのスタイリングプロパティをインポートするために、Merge は Ant Design の CSS (antd/dist/antd.css) へのパスを要求します。これは、Ant Design の React インストール手順の 【Usage（使用） 】 に記載されています。

Ant Design コンポーネントをインポート

npm の統合が完了すると、UXPinは自動的にキャンバスにリダイレクトします。では、インポートしたいAnt Design のコンポーネントを選択してみましょう。

ステップ１

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

Merge のコンポーネントマネージャが新しいタブで表示されます。

ステップ２

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

ステップ３

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

正しい命名規則は、Ant Design のドキュメントの コンポーネント API にあります。Ant Designのコンポーネントは、例えば、「Date Picker」 は 「DatePicker」 となるように、スペースなしのキャメルケースを使い、常に最初の文字を大文字にします。

このチュートリアルでは、最初のコンポーネントとしてAnt Design のボタンをインポートし、「General」という新しいカテゴリに追加します。その際、Ant Design のドキュメントと同じカテゴリを使うことをお勧めします。そうすることでデザイナーとエンジニアが同じリファレンスポイントを持つことができますからね。

一度のインポートで複数の部品を追加できるので、手順の「２」と「３」を繰り返す手間が省けます。

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

ステップ４

右上の【Publish Changes（変更を公開する）」をクリックすると、インポート処理が初期化されます。

新しい部品に対して初めて行う場合は、１～２分かかるかもしれません。

ステップ５

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

この手順を順を追って見ていくと、左サイドバーにカテゴリ【（General（一般）】と最初のコンポーネント（ボタン）があるのが見えます。

ステップ６

そのボタンをクリックして、プロパティの追加を開始します。このような Reactプロップは、Ant Design のドキュメントで、Components > General > ButtonのAPI で見ることができます。

Merge のコンポーネントマネージャを使ったコンポーネント プロパティの追加

ドキュメントにあるReact propsを使って、Ant Designのボタンのプロパティをいくつか追加してみましょう。

ボタンの種類：ステップ1

Reactのボタン型プロップは、Ant Designのボタンスタイル６種をインポートします。

• プロパティ名：「type 」と入力（propsは必ず小文字を使用）。
• 表示名：デザイナーとエンジニアの両方が使う説明的なもの（これは参照用であり、わかりやすように「Type」が使用されている）。
• 説明文：デザイナー向けの簡単な説明または指示を追加。今回は「ボタンの種類」を使用。
• プロパティの種類：「列挙型（enum）」 − スタイル６種を表示するドロップダウンを作成することができる。
• プロパティコントロール：「セレクト」
• オプション：Ant Design の API ドキュメントにあるオプションである「primary（プライマリ）」、「ghost （ゴースト）」、「dashed（破線）」、「 link （リンク）」、「 text （文字）」、「default （デフォルト）」 を追加。
• デフォルト値：お好みで。ここでは Ant Designのドキュメントにあるように「default （デフォルト）」とする。

プロフィールを完成させると、コンポーネントのプレビューが表示され、お好みに応じて変化することがわかります。

ボタンの種類：ステップ２

項目を全て入力したら、【Add property（プロパティを追加） 】をクリックします。

その後、【Save changes（変更を保存） 】します。

最後に、【Publish library changes（ライブラリの変更を公開）】します。

UXPinによるコンポーネント駆動プロトタイピング

Ant Designの必要なコンポーネントとプロパティをインポートすれば、UXPinでのプロトタイプは、ドラッグ＆ドロップでレイアウトを構築するのと同じくらい簡単です。３つのAnt Designのコンポーネントを用いて、以下のシンプルなメール登録フォームを１分足らずで作成しました。

Ant Designコンポーネントを選択すると、Mergeのコンポートマネージャ で作成したプロパティが右側のプロパティパネルに表示されます。

UXPinの npm 統合でAnt Designのプロトタイプを構築してみませんか。コンポーネント駆動のプロトタイプが、どのように製品開発のワークフローを改善し、より良いユーザー体験を顧客に提供するかぜひご体験ください。

The post 中国初の Ant Design とは？UXPin連携方法と npm 統合徹底ガイド appeared first on Studio by UXPin.

UXPin Mergeは、デザイン協働者（デベロッパー、UXデザイナー、プロダクトチーム）や関係者に、ReactJS コンポーネントを使ったプロトタイプ・テストを行うための直感的な UI （ユーザーインターフェース）を提供します。この機能性によりワークフローは、デザイナーでなくてもデザインツールのスキルを持たない人でも、React の ラピッドプロトタイピング を行うのに最適な環境です。

大手決済会社の PayPal とスタートアップの TeamPassword では、デザイナー以外の社員が UXPin でプロトタイプの構築とテストを行っています。PayPal のプロダクトチームはデザインプロジェクトの９０％をこなし、TeamPassword の２名からなる開発チームは、会社のプロトタイプとユーザーテストをすべて行っています。

そこで本記事では、「ラピッドプロトタイピング」について解説し、エンジニアがUXPin Mergeを使って開発プロセスにおける、より速い反復や、UIの不整合の減少を実現する方法をご紹介します。

UXPin MergeでReactの ラピッドプロトタイピング のワークフローを効率化しませんか。詳細とアクセス権のリクエスト方法については、Merge ページをぜひご覧ください。

ラピッドプロトタイピング とは

 ラピッドプロトタイピング とは、デザイナーが最善策を見つけるために、たくさんの実験を速やかに行うプロトタイプのプロセスであり、チームメンバーは「あったらいいな」の機能を無視して、UX（ユーザーエクスペリエンス）のための UI の最適化のみに集中します。

デザイナーは、新製品のプロトタイプを作るために、デザインシステムやオープンソースのコンポーネントライブラリを使います。既存のライブラリを使うことで、デザインチームはゼロからデザインする必要がなく、紙のスケッチからHi-Fi（高忠実度）プロトタイプとテストをサッと行うことができます。

React ラピッドプロトタイピング

React  ラピッドプロトタイピング は、エンジニアがコンポーネントライブラリを使ってMVP（最小実行可能製品）を構築するのと同様の方法論を採用しています。React のライブラリを使うことで、エンジニアは最小限のフロントエンドプログラミングで UI をゼロから開発することができ、それによってより速いテストと反復が可能になります。

コードでのプロトタイピングの課題

コードによるプロトタイピングの最大の課題は、ドラッグ＆ドロップのデザインツールを使い、あらかじめ用意されたコンポーネントでプロトタイプを作成するワークフローに比べ、時間がかかるということです。小さな変更であっても、望ましい結果を得るには、何らかのコードやスタイリングの調整が必要です。

また、コードでプロトタイピングを行うと、エンジニアはコードの記述、ドキュメントの参照、UI デザインなど、複数のタスクに集中しないといけません。プロトタイプが複雑になればなるほど、変更と反復に必要な時間と集中力が必要となり、 ラピッドプロトタイピング には程遠くなってしまいます。

TeamPassword がReactを使って ラピッドプロトタイピング の課題を克服した方法

パスワードマネージャのスタートアップ企業である TeamPasswordは、市場投入のスピードと UIの不整合に悩まされていました。小さなチームにはデザイナーがおらず、リリースのデザイン、プロトタイプ、テストはエンジニアがコードを使って行っていました。

そこで TeamPassword は、MUIのオープンソースの Reactライブラリに切り替え、ブランドや製品の要件に合わせてカスタマイズし、プライベートのレポジトリでホスティングしました。

UXPin Mergeを使ったプロトタイピングとテスト

また、TeamPassword は新製品のプロトタイピングとテストを行うためのより良い方法も必要でした。この小さなスタートアップには UX デザイナーを雇うリソースがなかったため、「デベロッパーに優しい」デザインツールを探すことにし、いくつか検討した後、TeamPassword のデベロッパーは UXPin Mergeを見つけました。

Mergeにより、TeamPasswordはMUIデザインシステムのレポジトリを UXPinのデザインエディターに同期させ、エンジニアにドラッグ＆ドロップでプロトタイプの環境を提供することができたのです。

そして今、プロトタイプの段階を終えたら、デザインシステムをプロジェクトにインポートしてコンポーネントを追加し、UXPinか JSX コンポーネントプロップをコピーするだけで最終製品を開発することができます。

この Merge の製品開発ワークフローでは、TeamPasswordの UI の一貫性は排除され、デベロッパーはプロトタイプ、テスト、反復を大幅に短縮することができるようになりました。また、Merge のバージョン管理は、デザインシステムの変更を UXPin に自動的に同期させ、デザインと開発の間に「信頼できる唯一の情報源（Single source of truth）」を作成することができます。

UXPin Mergeを使ったReact ラピッドプロトタイピング 

ベクタ形式を生成する画像ベースのデザインツールと違って、UXPinはHTML、CSS、Javascriptをレンダリングし、それによって完全にインタラクティブなReact コンポーネントのインポートが可能になります。

TeamPassword のケーススタディには、デベロッパーがデザインツールの複雑さを学ぶことなく、Reactコンポーネントを使ってより速くプロトタイプを作成する方法が示されています。以下にそれをご紹介しましょう：

デザインシステムの選択

デザインシステムがない場合は、オープンソースのライブラリを使いましょう。ちなみに筆者のオススメは、MUI、React-Bootstrap、Ant Design、Semantic UIなどです。このデザインシステムはテーマ設定が可能で、デスクトップやモバイルの UI 要素などの膨大なコンポーネントライブラリが用意されています。

UXPin のドキュメントに従って、レポジトリを正しくセットアップしましょう。また、Merge へのアクセスのリクエストもできます。テクニカルサポートチームがそのプロセスをお手伝いします。

デザインシステムのカスタマイズ

コンポーネントライブラリのドキュメントに従ってデザインシステムをテーマ設定するか、そのままの状態ですぐにプロトタイプを開始します。デザインシステムをプライベートレポジトリに保存して、UXPinと同期させましょう。

カスタム コンポーネントやテンプレートの追加など、レポに変更を加えると、Merge が自動的にそれを UXPin に同期してくれます。また、バージョン管理により、プロジェクトを更新するタイミングを選択でき、デザインシステムの以前のバージョンにいつでも切り替えることができます。

統合の選択

以下の３つの統合機能のうちの１つから、コンポーネントをUXPinに取り込むことができます：

• Git 統合：Reactライブラリにのみ利用可能な Git レポジトリに直接接続する。
• Storybook 統合：React、Vue、Angular、Ember などのフロントエンドフレームワークで利用可能なパブリックまたはプライベートな Storybook に接続する。
• npm 統合：UXPin への npm リンクを貼り付け、使いたいコンポーネントをインポートする。

統合の初期設定が完了すると、MergeはUXPinのレポジトリの変更を自動的に更新し、チームのメンバー全員に新しいバージョンを通知します。

Git 統合は、UXPinと正しく同期するための何らかの設定が必要ですが、UXPinはダウンロードできる Merge boilerplateを提供しており、ルートディレクトリで npm install を実行すると、ボイラープレート レポジトリからコードを実行するのに必要な依存関係がインストールされます（React、Webpack、Babel などのものです）。

また、Git 統合では、バージョン管理、パターン、Merge コンポーネント マネージャーなどの Merge の全機能を利用できます。

Storybookは、デザインシステムのコンポーネントを分離して開発するための直感的なダッシュボードを提供します。デベロッパーは GitHub レポジトリにディストリビューションする前に、コンポーネントを文書化してテストするといいでしょう。また、Storybook には連携、QA（品質保証）、承認機能があり、チームはデザインシステムのあらゆる側面を管理し、ガバナンス手順に従うことができます。

プロパティパネルの設定

各コンポーネントの React props は、UXPinのプロパティパネルに表示され、色、サイズ、ステート、タイポグラフィなど、デザインシステムで確定された変更を行うことができます。

注：React propsは Git 統合でのみ表示されます。Storybookを使っている場合は、Args を使って UXPin のプロパティパネルを設定する必要があります。

作業開始

コンポーネントを UXPin にインポートしたら、いよいよプロトタイプ開始です。デザインシステムのライブラリから UI エレメントをキャンバスにドラッグして、UI を構築しましょう。

UXPin のパターンでは、新しいパターンやテンプレートを作成し、それを個人のパターンライブラリに保存することができます。その UI コンポーネントはすでにレポジトリに存在しているため、開発中にそれを組み合わせてプロトタイプを再現することができます。

また、Webサイト や Webアプリ ではブラウザ上でプロトタイプをテストでき、モバイルアプリのテストには UXPin Mirror を使います（Android と iOS で利用できます）。

そして、開発の準備に納得がいくまで、UXPin のプロトタイプでテストを反復をします。

React のアプリ制作

最後のステップは、UXPin MergeのプロトタイプをReactアプリケーションへの変換作業です。ちなみに YouTuberのCoderOne は、UXPinのプロトタイプから開発への移行に関する優れたチュートリアルを公開しています。

プロトタイプのコピーに最適な方法は、UXPinのPreview（プレビュー）とShare（共有）モードです。ここでは、製品のサイトマップ、アダプティブバージョン、仕様、各コンポーネントのプロップなどを見ることができ、UXPinでは、コンポーネントのドキュメントへのリンクも提供されます。

スペックモードでは、UXPinは各コンポーネントとその相対的なプロップを JSX で表示します。デベロッパーは、このproduction-ready のコードをコピー/ペーストして、React のプロジェクトでプロトタイプを複製できます。

UXPin Mergeに切り替えて、プロトタイピングツールの利便性とコードの魅力を活用しませんか。より良いUXを作りながら、プロトタイピング、テスト、イテレーションをより速くやってみましょう。詳しくは、Merge のページをぜひご覧ください。

The post React ラピッドプロトタイピング – 速く作成する方法とは？ appeared first on Studio by UXPin.

この記事は、UXPinのエンタープライズ向け機能であるUXPin Merge について簡潔にまとめました。Reactベースのライブラリを Merge に統合し、簡単にデザインできるのでぜひ試してみてください！

UXPin Merge は、デザイナーが開発者のReactコンポーネントを取り込み、実際のコードを使用してインタラクティブなプロトタイプを作成することができます。これは従来のデザインツールにはない魅力です。Merge 機能によって、デザイナーにとってもデザインツール内で「第2の」デザインシステムを作成する必要がなくなり、チーム全体にとっての「信頼できる唯一の情報源（Single source of truth）」を提供できるようになりました。デジタル製品の開発において、デザイナーとデベロッパーの断絶を解消したのです。

今回 Merge を簡潔に説明するにあたって、MozillaのReact Todo Appのサンプルを使用してMergeと統合してみました。統合後は、コンポーネントを使って、UXPinでインタラクティブな Todoリストのプロトタイプをデザインできるようになりますよ。

始める前に、UXPin Merge へのアクセス権をまだお持ちではない方は、こちらからお知らせください。認証プロセスとセットアップが完了したら、コードでデザインの準備は整いました！

GitHubとの統合についてもご安心ください。制約などないので、お好きなものをお使いください！

コンポーネント

Todoアプリでは以下３つのReactコンポーネントがあります：

1. Form：ToDo 項目の作成
2. FilterButton：現在の状態によって Todo をフィルタリング
3. Todo：ToDoリスト項目

これらのコンポーネントは `src/components` のディレクトリにあり、下のイメージでまとめました：

このチュートリアルが終わる頃には、デザイナーは上記３つのコンポーネントでプロトタイプを作成できるようになります。実際のデザインシステムでは、コンポーネントが３つ以上あるかもしれませんが、ここで紹介する方法が他のデザインシステムでも応用できると思います。

UXPin Merge をセットアップ

まず、 https://github.com/mdn/todo-react をフォークしてクローンしてください。次に、CLIを含むUXPin Merge NodeJSパッケージをインストールします。

1. Navigate（ナビゲート）：cd todo-reactというプロジェクトフォルダに移動する
2. Install（インストール）：UXPin MergeとCLI NodeJSバンドルを yarn add @uxpin/merge-cli-dev でインストールする
3. Ignore（無視）：UXPin Mergeのビルドディレクトリを echo ‘/.uxpin-merge’ >> .gitignore で無視する 

デザインシステムでは、さらに以下のような２つのコンフィグファイルが必要です：

1. uxpin.webpack.config.js
2. uxpin.config.js

UXPinは通常、既存のWebpackのビルドプロセス全体を使う必要はないので、デフォルトのビルドを使います。uxpin.webpack.config.jsファイルを作成し、以下のコードを貼り付けましょう：

</p>
const path = require("path");
const webpack = require("webpack");
 
module.exports = {
    output: {
      path: path.resolve(__dirname, "build"),
      filename: "bundle.js",
      publicPath: "/"
    },
    resolve: {
      modules: [__dirname, "node_modules"],
      extensions: ["*", ".js", ".jsx"]
    },
    devtool: "source-map",
    module: {
      rules: [
        {
          test: /\.(s*)css$/,
          use: [
            {
              loader: 'style-loader'
            },
            {
              loader: 'css-loader',
              options: {
                importLoaders: 2
              }
            },
          ]
        },
        {
          loader: "babel-loader",
          test: /\.js?$/,
          exclude: /node_modules/,
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          }
        },
      ]
    }
}
 
<p>

UXPin Merge で使うコンポーネントは、レポジトリのディレクトリの一番上にある uxpin.config.jsファイルで、そのファイルディレクトリを指定する必要があります。下のコードスニペットでもわかるように、この時点では「Form」コンポーネントの src/components/Form.jsのみを追加します。他のコンポーネントはチュートリアルの後半で追加していきます。

uxpin.config.js を作成し、以下の内容を貼り付けましょう：

module.exports = {
  components: {
    categories: [
      {
        name: 'General',
        include: [
          'src/components/Form.js',
        ]
      }
    ],
    webpackConfig: 'uxpin.webpack.config.js',
  },
  name: 'Learn UXPin Merge - React Todo list tutorial'
};

最後に、 Webpackがアプリバンドルを作成するためにBabel-loaderを使用します。そして babelをインストールするには、yarn add babel-loader -devからyarn install のコマンドを使います。

おめでとうございます👏 これで、Formコンポーネントを表示するのに必要最低限のコンポーネントの準備ができました。

Experimental Mode（実験モード）

Experimental Modeでは、UXPinにプッシュする前に、ローカルコンポーネントのプロトタイプを作成し、動作確認ができます。UXPin Merge のExperimental Modeを開き、 Formコンポーネントをプレビューするために、 ./node_modules/@uxpin/merge-cli/bin/uxpin-merge -disable-tunneling を実行してください。実験モードでは、-disable-tunneling を使うと、リクエストはローカルホストの Webサーバーに直接送られます。（注：UXPinの -disable-tunneling オプションは、Chromeでのみ機能します。）

`uxpin.webpack.config.js` で提供される設定を使って、Experimental Modeはコンポーネントをバンドルして、ブラウザウィンドウを開きます。UXPinエディタと同じ方法でコンポーネントをレイアウトすることができ、Experimental Modeが読み込まれたら、サイドバーからFormコンポーネントをキャンバスにドラッグ＆ドロップします：

Form コンポーネントがありますが、スタイリングが足りないので、グローバルラッパーのコンポーネントを作成することにします。

グローバルラッパーコンポーネントを使ってCSSを適用する

デザインシステムと同様に、このTodoアプリはグローバルスタイルがあり、 `src/index.css` ファイルで指定されています。全コンポーネントに、このファイルで指定されたスタイルが必要です。ファイルは、グローバルラッパーコンポーネントから読み込むことができます。そしてこのコンポーネントは、UXPinのキャンバスにドラッグしたすべてのコンポーネントを包みます。

ラッパーファイルを以下のように作成します：

mkdir src/wrapper/ 

touch src/wrapper/uxpinwrapper.js

以下をコピーし、`UXPinWrapper.js`にペーストします：

import React from "react";
import '../index.css';

export default function UXPinWrapper({ children }) {
  return children;
}

import ‘../index.css’;` の行は、各コンポーネントをレンダリングする前にCSSが読み込まれるようにします。

このラッパーファイルを使うようにUXPinに指示するため、以下を uxpin.config.jsに追加します：

wrapper: 'src/wrapper/UXPinWrapper.js',

ターミナルで ./node_modules/@uxpin/merge-cli/bin/uxpin-merge -disable-tunneling を使って、UXPin の実験モード を再起動します。再起動は、コンフィグファイル更新のときに必要になります。ブラウザの再読み込みは、コンポーネント更新の場合にのみ必要です。

Experimental Modeでは、スタイル設定された Formコンポーネントのある新しいブラウザウィンドウを開く必要があります：

名前をカスタマイズできるFilterButtonの追加

では、UXPin MergeにFilterButtonを追加する作業を行います。このボタンは Formコンポーネントの下に表示されます：

このコンポーネントを追加するのは、Formコンポーネントと同じですが、ボタン内に表示されるテキストをデザイナーが指定できるように `prop-types` のパッケージで実装したいと思います。

propTypesは、コンポーネントを編集する際にUXPinのプロパティパネルにマッピングされますが、既存のFilterButtonコンポーネントではprop-typesを使っていないので、`FilterButton.js`を追加しましょう：

</pre>
import React from "react";
+ import PropTypes from 'prop-types';

function FilterButton(props) {
  return (
@@ -15,4 +16,9 @@ function FilterButton(props) {
  );
}

+ FilterButton.propTypes = {
+   name: PropTypes.string
+ }

+FilterButton.defaultProps = {
+  name: 'Button Name'
+};

export default FilterButton;

<pre class="wp-block-syntaxhighlighter-code">

src/components/FilterButton.js’`を `uxpin.config.js` に追加し、./node_modules/@xpin/merge-cli/bin/xpin-merge -disable-tunneling で再起動してください。コンフィグファイルを更新したため、再起動が必要です。Experimental Modeが起動すると、サイドバーに新しい「FilterButton」コンポーネントがパネル上に表示されているはずです。これをクリックしてキャンバスにドラッグします。

３つのコンポーネントのうち２つが UXPin Mergeで動作するようになりました。残る１つは Todoコンポーネントです。

ラッパーでTodoコンポーネントを追加する

最後のコンポーネントである「Todo」に進みます。これは、UIで Todoアイテムのリスト内に表示されます。

FilterButtonを追加するときに、propTypesを追加するためにFilterButton.jsファイルを編集しました。では、Merge固有の変更を分離し、コンポーネントのソースコードを変更したくない場合は、Todoコンポーネントのためのラッパーの作成ができます。これは、CSSの適用に使ったグローバルラッパーコンポーネントと考え方自体は似ていますが、Todoコンポーネントに特化したものになります。

次のように入力します：

mkdir -p src/components/merge/todo 

touch src/components/merge/todo/Todo.js

以下のコードをコピーして、Todo.jsに貼り付けます。

import React from 'react';
import PropTypes from 'prop-types';

// Import the original component
import TodoM from '../../Todo';

function Todo(props) {
  return <TodoM {...props}/>
}

Todo.propTypes = {
  /**
   * If `true`, the todo will be marked as completed.
   */
  completed: PropTypes.bool,

  /**
   * The name of the todo.
   */
   name: PropTypes.string,

  toggleTaskCompleted: PropTypes.func,
}

Todo.defaultProps = {
  name: 'Do Laundry'
};

export default Todo;

オリジナルのTodoコンポーネントを `TodoM` としてインポートし、新しく確定した `Todo` 関数でこのコンポーネントを返しています。また、PropTypesはFilterButtonコンポーネントと同じように、新しく確定された `Todo` ラッパー関数で指定しています。

Uxpin.config.js に src/components/merge/todo/Todo.js」を追加し、./node_modules/@uxpin/merge-cli/bin/uxpin-merge -disable-tunneling で再起動します。実験モードで新しいウィンドウを立ち上げたら、Todo コンポーネントをクリック＆ドラッグでキャンバスに配置します：

Todo コンポーネントが表示され、デフォルトの「Do Laundry」の Todo 名も表示されます。このデフォルトの名前は、 Merge を使用する場合にのみ適用されます。

UXPinへのプッシュ

デザインシステムを UXPin にプッシュするまでは、コンポーネントは自分にしか見えないので、デザインチームがそのコンポーネントを使えるようにするには、コンポーネントバンドルを UXPinにプッシュする必要があります。 Mergeでデザインライブラリを作成してプッシュするには以下の２ステップが必要です：

１．UXPinでライブラリを作成する

1. UXPinのアカウントに行く
2. UXPin エディタに入る
3. 新しいライブラリを作成する
4. Reactコンポーネントをインポートするオプションを選択する。
5. Authトークンをコピーする（誰とも共有せず、gitレポジトリにチェックインしたファイルにも配置しないでください。このトークンは、あなたのアカウントでライブラリに直接アクセスするためのものです）。

以下のような流れになります：

２．uxpin-merge CLI経由でライブラリをプッシュする。

前回の停止で作成したトークンを使って、プロジェクトのレポジトリ内から以下を実行します：

./node_modules/@uxpin/merge-cli/bin/uxpin-merge push –token YOUR TOKEN 

デザインチームが Mergeライブラリにアクセスできるようになりました。

 Merge ライブラリの使用

 Merge のデザインライブラリがプッシュされたので、UXPin エディタ内でテストしてみましょう：

* ブラウザで UXPin Editor をリロード

* エディタ左下の「Learn UXPin Merge（UXPin Merge  について）」のデザインシステムを選択

* コンポーネントをキャンバスにドラッグ&ドロップ

下の画像のようなプロトタイプができるているはずです：

プレビューとエクスポート

UXPinでプロトタイプを作成して、アプリへのエクスポート準備が整いました。プロトタイプをプレビューし、Specモードを使ってコンポーネントのJSX コードをコピー＆ペーストすることができます。

エディタの右上にあるPreview（プレビュー）ボタンをクリックします。読み込まれたら、上部にある「Spec」リンクをクリックします。これで、コンポーネントをクリックして、右側のパネルに生成する JSXコードを表示できるようになります：

デザインシステムの初期バージョンをプッシュするのは素晴らしいことですが、時間をかけてかなりの数のアップデートをプッシュする必要がありそうです。

アップデートのプッシュ

FilterButtonには、アクティブなフィルタを示すために「pressed（押されている）」ステートがあります。Reactアプリを見てみると、「pressed（押されている）」と「unpressed（押されていない）」ステートの違いは以下の通りです：

このステートへの反応を追加してみましょう。src/components/FilterButton.js` に以下の変更を加えます：

FilterButton.propTypes = {
-   name: PropTypes.string
+   name: PropTypes.string,
+   isPressed: PropTypes.bool
}

変更をgitにコミットし、UXPinにプッシュします：

git add. 

git commit -m “Added isPressed prop to button” 

./node_modules/@uxpin/merge-cli/bin/uxpin-merge push –token YOUR TOKEN

Mergeコンポーネントは、最新のプッシュされたコードに自動的に同期されます。最新のものを表示するには、UXPin エディタを表示するタブを再度読み込み、FilterButtonを選択します。エディタの右側のパネルに新しい「Pressed」プロパティが表示されるので、選択するとステートが有効になります：

今後変更するときも、同じ流れでしてみてください。ちなみにプロトタイプでは、プッシュされた最新バージョンのコンポーネントが自動的に使われます。

まとめ

Reactアプリを作成し、そのコンポーネントをUXPin Mergeにプッシュしました。また、コンポーネントの変更や新しいコンポーネントの追加に、アップデートをプッシュする方法も学びました。これで、デザインチームはこのコンポーネントを使って、UXPinで忠実度の高いプロトタイプを作成できるようになりました。

このプロジェクトのソースコードは GitHubで閲覧できます。より高度な Merge テクニックを学ぶには、Mergeドキュメントを参照するか、salesjp@uxpin.com までお問い合わせください。

UXPin Merge をまだお持ちでない方は、アクセスのリクエストをお願いします。

The post コードでデザインする【UXPin Merge 入門】 appeared first on Studio by UXPin.

製品とそのデザインシステムは、常に進化し続けるプロジェクトです。製品の規模が大きくなるにつれ、デザイナーはユーザビリティの課題を解決しながら、ビジネス目標やユーザーニーズを満たすために、新しい UI パターンやコンポーネントを作成しないといけません。

デザイナーは新しいパターンを普及させる前に、まずはそれを作らないといけないんです！さらに、大抵の組織では、デザインシステムのガバナンスの手順に従っているため、新しいパターンがライブラリで利用できるようになるまでに時間がかかる可能性があります。

UXPinのPatterns（パターン）では、デザインチームが「既存のMergeコンポーネント」と「標準的なUI 要素」を組み合わせて新しいUIパターンを作成し、UXPinライブラリに保存することができます。

そこで本記事では、UXPin のPatterns（パターン）機能の使い方などをご紹介し、製品やデザインシステムをスケールアップするためどのように活用することができるかをみていきます。

UXPin Merge で完全に統合されたデザインシステムを構築し、製品開発チームに「信頼できる唯一の情報源（Singl source of truth）」を提供しませんか。この革新的なコードベースのデザインテクノロジーの詳細とリクエスト方法については、ぜひ Mergeのページをご覧ください。

UXPin Mergeとは、その仕組み

Merge によって、Gitレポジトリ、Storybook、npmパッケージでホストされているコンポーネントライブラリの要素を UXPin のデザインエディターにインポートして、チーム全体が同じデザインシステムを使えるようになります。そして、デザイナーはその要素を使って、最終製品と完全に一致するプロトタイプを作成することができます。

従来、多くのデザインシステムでは、以下の２つの UI ライブラリが搭載されています：

• デザインチームは静的なUIキットを使用
• エンジニアはコード化されたコンポーネントライブラリを使用

多くの組織は、この二重のシステムが「信頼できる唯一の情報源（Single source of truth）」であると主張していますが、その実現には多くの時間とリソースが必要です。

UXPin Merge は、コンポーネントライブラリが１つしかないため、純粋にそれが「信頼できる唯一の情報源」になり、デザイナーとエンジニアは、同じレポジトリから同じ UI 要素やパターンを使います。

また、Vue、Ember、Web Components、Angularなど、他の一般的なフロントエンド技術については、Merge for Git や UXPin の Storybook 統合を使ってReactコンポーネントを同期することができます。

さらに、デザイナーは Merge の npm 統合を通じて、MUI、Bootstrap、Ant Design、Lightning などのオープンソースのコンポーネントライブラリの npm パッケージをインポートして、完全に機能するプロトタイプまたは最小実行製品（MVP）を構築することもできます。

UXPin パターン（Patterns）とは

パターンとは、デザインチームが Merge コンポーネントと標準的な UXPin UI  要素を組み合わせて、より複雑な UI パターンを構築することができる Merge 独自の機能です。

ブラッド・フロスト氏の「アトミックデザイン」のコンテクストでは、デザイナーはパターンによって、基礎となる UI 要素やコンポーネントである原子や分子を使って、カード、フォーム、ナビゲーション、ヘッダー、フッターなど、有機体やテンプレートなどの大規模で複雑なデザインを構築できます。

UXPin パターンの代表的な使用例として、以下のようなものがあります：

• 現在のライブラリにはない高度なコンポーネントの作成
• よく使うコンポーネントのバリアントのプロパティの保存
• グループ化と保存 要素の大きなUIパターンへの統合
• 一貫性を上げるための新しい UI パターンのデザインチームとの共有
• エンジニアがコンポーネントライブラリに追加するための新しいパターンの推進

デザイナーは、複数のコンポーネントライブラリや UXPin の基本的なコンポーネントの UI 要素を組み合わせて、新しいパターンを作成することができます。この柔軟性は、新しい UI パターンに必要なパーツがデザインシステムにない場合に有益です。

例えば、ドロップダウン メニューを使ったヘッダー ナビゲーションを構築したいけど、現在のデザイン システムにはドロップダウン メニューがないとします。その場合は UXPin の npm 統合を使って、MUI（または他のオープンソースライブラリ）からドロップダウン メニューをインポートし、それを使って新しいナビゲーションのパターンを構築することができます。エンジニアは、MUIのドキュメントを読み、JSXコードを見ることで、新しいパターンのコーディング方法がわかり、それをデザインシステムに追加することができます。

UXPin Patterns（パターン）の３つのメリット

パターンは製品開発およびデザインシステムチームに対して 主に３つの利点があり、この３つは、Merge レポジトリに必要なものがない場合に、パターンが同等の代替手段を提供してくれる点が共通しています。

１．UI 要素を入れ子にして複雑なコンポーネントを構築できる

包括的なデザインシステムがあっても、デザイナーは製品の進化に伴って新しいコンポーネントやパターンを作らないといけないことがよくありますが、多くの場合、そのパターンはデザインシステムには存在しないため、デザイナーは毎回ゼロから構築しないといけません。

特にグラフやデータテーブルのようなものを作る場合、ゼロからデザインすると、貴重な時間がその作業に費やされることになります。その代わりに、このような複雑なパターンを一度作成し、UXPin のパターンライブラリに保存しておくといいでしょう。また、このパターンを他のデザイナーと共有することで、チームで作業が被ったり、矛盾が生じたりすることがなくなります。

多くのデザインツールがこの機能を提供していますが、コードコンポーネントを操作して組み合わせることができるものはありません。これがパターンだと、デザイナーはデザイナーとエンジニアのハイブリッドな役割を担い、１行のコードも書かずに、完全に機能する複雑なUIを構築することができます。

２．同じコンポーネントのプロパティを再利用できる

デザイナーは Merge によって、プロトタイプを画像ベースのデザインツールよりずっと速く構築できますが、より効率的に作成する余地は常に存在します。

例えば、デフォルト、エラー、警告、成功など、さまざまな Merge フォームの入力やボタンの状態についてパターンを保存したいと思うかもしれません。パターンだと、それを一度設定してパターンライブラリに保存し、次の UI（ユーザー インターフェース）のためにドラッグ ＆ ドロップする準備ができます。

このような構築済みのパターンは、デザインスプリントや、ステークホルダーとのミーティングやユーザーテスト中でのちょっとした変更がしたい場合に特に便利です。UXPin のプロパティパネルでプロパティを操作する代わりに、目的のパターンをキャンバスにドラッグするだけですぐに使えますよ！

３．新しいデザインシステムの UI 要素の推進とテストができる

新しい UI 要素は、デザインシステムで魔法のように現れるわけではなく、DSチームは、リリース前にこのパターンを構築してテストする必要があります。UXPin パターンを使えば、DSチームは既存のコンポーネントを 基本的な UXPin やオープンソースのライブラリと組み合わせて、より高い忠実度と機能性でテストおよびイテレーションを行うことができます。

また、UXPin Mergeとパターンを使ったコンポーネント駆動型のプロトタイプによって、デザイナーはエンジニアからのより少ないインプットでイテレーションを行い、エンジニアは最終コンポーネントの開発とデザインシステムのテクニカルバックログの処理に集中することができます。

パターンがあれば、デザインチームはエンジニアが新しいコンポーネントを開発するのを待つ必要がなく、DSチームが作成したプロトタイプのパターンを使うことで、忠実性や機能性を損なうことなく、デザインとテストのプロセスを継続できるのです。

UXPin パターンは、１回こっきりの UI コンポーネントやほとんど使われない UI コンポーネントを作成するのに素晴らしいツールです。このようなパターンは、デザインシステムに昇格するほどには使われていませんが、デザインチームはまだそこへのアクセスが必要な時がありますからね。

それを UXPin パターン ライブラリに保存すると、デザイン システムのレポジトリに追加されることなく、完全に機能する Merge コンポーネントの利点を得られ、エンジニアは、そのコンポーネントを別のレポジトリに保存して、必要なときに使えます。

UXPin Merge Patterns（パターン）の使い方

では、UXPinで新しいMerge パターンを作成するのがいかに簡単であるかをみてみましょう。MUI npm のチュートリアルでインポートしたものと同じコンポーネントを使用しているので、そちらもぜひご覧ください。

以下のパターンは、Merge の npm 統合 を使ってインポートした MUI コンポーネント３つと、UXPin の基本的な テキスト要素 ２つが使われています（デザイン賞はもらえないでしょうけど！）

でもこのようなシンプルなパターンでも設定が必要なので、再利用可能なパターンを作ることで、その繰り返しの作業をなくすことができたらいいですね。

ステップ１

パターンに必要なコンポーネントを追加して配置します。複数のコンポーネントライブラリや UXPin の基本的な要素を組み合わせることができることを忘れずに。

ステップ２

Merge コンポーネントのプロパティを設定します。

• アクセシビリティのために、プレースホルダーとヘルプテキストを備えたメール入力フィールドを作成しました。また、ユーザーが入力しないといけないことがわかるように、このフィールドは「必須項目」としました。
  
  
• 次に、MUIチェックボックスを追加しました。これはユーザーが当社からのメールを受信するためにチェックする必要があります。
• 最後に、ユーザーがメールフィールドとチェックボックスを完了した後にクリックしなければならない場所が明確になるように、MUIボタンを選択し、プライマリに設定しました。

以下は、メールコンポーネントのプロパティパネルの例です。

ステップ３

コンポーネントライブラリの上にある左サイドバーの「Patterns（パターン）」タブに切り替えます。

ステップ４

パターンとして保存したい UI 要素のグループまたは単一のコンポーネントを選択します。左サイドバーの大きな白い「＋Add（追加）」のボタンをクリックすると、新しいパターンが表示されます。

ステップ５

パターンの名前をクリックして、より分かりやすいものに変更したり、デザインシステムの命名規則と一致させます。複数のパターンを用意したら、UXPin の検索機能🔍を使って、必要なものを絞り込むといいでしょう。

パターンの削除

また、下の鉛筆のアイコン（「Enter edit mode（編集モードに入る）」）をクリックすると、古いパターンを削除できます。

削除したいパターンを選択して【Delete（削除）】をクリックします。

複数のステートの作成

デフォルトのパターンができたので、ワークフローをさらに最適化するために、追加のステートを作成したいと思うかもしれません。

例えば、ユーザーがメールアドレスを入力しなかったときに発生するエラーステートのパターンを設定するといいでしょう。

また、ユーザーが有効なメールアドレスを入力し、入力を確認した場合にのみ、ボタンが有効になるような無効ステートを作るのもいいですね。

これで、プロトタイプを始めるのに３つのニュースレターパターンの準備ができました。デザイナーは、プロパティの設定やパターンからの個々のコンポーネントの切り替えを気にすることなく、ドラッグ＆ドロップで簡単に変更することができます。

UXPin MergeとPatternsでワークフローを効率化する準備はできましたか？Merge へのアクセス権をリクエストして、さっそく使ってみましょう。

The post UXPin Merge Patterns（ パターン ）の使い方・チュートリアル appeared first on Studio by UXPin.

オープンソースのデザインシステムには、高品質の製品を急ピッチで開発する機会があり、組織はユーザビリティとアクセシビリティの基礎的な課題を解決することで、製品開発と問題解決を重点的に行うことができます。  

 Fluent UIは、エンタープライズ製品を開発する企業で支持されているオープンソースのデザインシステムです。包括的なコンポーネントライブラリを使うことで、マイクロソフトのエコシステムに対応したアプリケーションを構築できるとともに、あらゆる製品のテーマ設定による完全なカスタマイズと柔軟性を実現します。  

革新的なMergeテクノロジーを使ってFluent UIデザインシステムをUXPinにインポートして、デザインと開発の間に信頼できる唯一の情報源（Single source of truth）を作成しませんか。詳細とアクセスリクエスト方法については、Merge ページをご覧ください。  

 Fluent Design Systemとは

  Fluent UIは、マイクロソフトが構築・保守するデザインシステムです。オープンソースのデザインシステムで、以下の2つの機能があります：  

1. LightningがSalesforce向けにするような、Microsoft 365製品を開発するためのデザイン言語とコンポーネントライブラリ。
2. Microsoftのエコシステムの外でエンタープライズアプリケーションを構築するためのテーマ別コンポーネントライブラリ

  包括的なデザイン システムには、Web、Windows、iOS、Android、および macOS 用のプラットフォーム固有の UI 要素を含む、クロスプラットフォーム アプリケーションを構築するためのコンポーネントとパターンが含まれています。  

コンポーネントとパターンには、それぞれクロスプラットフォームの製品開発における凝集性と一貫性を高めるための基本的なステートとインタラクティビティが含まれています。このような機能により、企業はゼロからデザイン、プロトタイプ、テスト、イテレーションを行うのではなく、製品とUX（ユーザーエクスペリエンス）に注力することができます。  

 Fluent Design Systemの利点

  大抵のオープンソースのコンポーネントライブラリから得られる凝集性と一貫性とは別に、Fluent UIはB2B（企業間取引）やエンタープライズ製品のデベロッパーにとって多くの利点があります。  

シームレスなMicrosoft 365の製品体験

もし会社でメール、Excel、Word、TeamsなどのためにMicrosoft 365が使われていたら、Fluent UIは、たとえMicrosoft 365と同期していなくても、社内製品用の素晴らしいデザインシステムになります。  

受信トレイやスプレッドシートから、倉庫の在庫システムやデータの可視化まで、シームレスなUIデザインを作成することで、従業員はどのワークスペースでも馴染みのあるユーザー体験を得ることができ、それによって学習曲線が短縮されて、最終的に連携と生産性が上がります。  

企業向け製品開発

  企業のUIは、B2C（企業消費者間取引）アプリケーションに比べて、より複雑なアーキテクチャ、レイヤー、データを持つことが多いため、ゼロから設計すると、最終製品の開発・保守の負担や複雑さに加え、多大なリソースが必要となります。  

 Fluent UIのようなオープンソースのライブラリで、何百（もしかしたら何千）時間もかけてコンポーネントをゼロから作ってテストする作業が省かれ、その代わり、製品チームは Fluent UIのコンポーネントをドラッグ＆ドロップすることで効率的に新製品を開発することができます。  

 Fluent UIには、基本的な入力から、日付ピッカー、リストUI、ナビゲーションコンポーネント、通知、モーダルなどのより複雑なパターンまで、包括的なライブラリーが含まれています。また、デザインシステムはテーマ化が可能で、他の製品との統合やブランド要件に合わせたライブラリの適用が簡単です。  

さらに、Fluent UIチームがデザインシステムを成熟させ、製品が基本的なユーザビリティとアクセシビリティの要件を満たすようにするため、組織は無料でメンテナンスを受けられるという利点もあります。  

 Fluent UIによるコンポーネント駆動型プロトタイプ

  コンポーネント駆動型のプロトタイプは、ゼロからデザインするのではなく、デザインプロセス中に既製のUI要素を用いてプロトタイプを構築します。  

このプロトタイプの手法は、デザインチームがスケッチやペーパープロトタイプから、そのままHi-fiプロトタイプに移行でき、時間のかかる新しいUI要素をデザインするプロセスを省けるという利点があります。  

例えば、ゼロから表をデザインするのは特に厄介で、時間がかかりますよね。その点Fluent UIには、実装方法とベストプラクティスを記載したリストUIが多数付いています。  

デザイナーは、プロジェクトに適したリストを選び、関連するコンテンツを追加して、すぐにテストを始めることができます。例えば、このドキュメントライブラリーのUIは、デザイン、テスト、イテレーションに何時間もかかりますが、Fluent UIはそのような作業を省き、デザイナーは線、円、四角などを描くのではなく、ユーザーニーズのコア部分の解決に集中することができるのです。  

Fluent UIには多くの利点がありますが、従来のデザインツールでプロトタイプを作成すると、入力や日付選択などのユーザーコントロールが機能しないなど、テストが制限される制約があります。  

UXPin Mergeがあれば、デザイナーはコードのような忠実性と機能性を実現できます。  

コードベースのデザインツールとして、UXPin Mergeはコンポーネント駆動型のプロトタイピングを可能にし、そこでデザイナーは一行のコードも書かずに最終製品の正確なレプリカを作成することができるのです。  

UXPin Mergeによる高度なコンポーネント駆動型プロトタイプ

  UXPin Mergeでは、組織がレポジトリからコンポーネントライブラリを同期できるため、デザイナーはエンジニアと同じUI要素を使うことができます。Fluent UIのUIキットのいずれかを使う代わりに、UXPinのデザインエディタでデザインシステムのReactのコンポーネントを使うのです。  

このような Merge のコンポーネントには、色、サイズ、インタラクティブ性、ステート、機能性など、デザイン システムによって定められた Fluent UI の React プロップが含まれており、そのプロップは UXPin のプロパティパネルに表示されるため、デザイナーは製品の要件に合わせてコンポーネントを調整することができます。  

PayPal「Fluent UIとUXPin Merge」の使用例

  PayPalがUXPin Mergeに切り替える前は、同社の社内製品は一貫性がなく、使い勝手の問題が多くありました。  

PayPalでのデベロッパーツールおよびプラットフォームエクスペリエンスのUX担当シニアマネージャー であるエリカ・ライダー氏は、UXPinのインタビューで「PayPalの製品チームには、経験豊富なUX担当者やUIデベロッパーはいませんでした。その結果、さまざまなユーザビリティとデザインの一貫性の問題、つまり、2つの製品が同じに見えないという問題が生じたのです！」 と述べています。  

そこでエリカは、Fluent UIを次のような理由で採用することにしたと述べています：「マイクロソフトのFluentデザインシステムとUIコントロールは、より企業向けに特化しており、社内のUIに適しているため、社内ツールの開発に採用することにしました。」  

Fluent UIで、PayPalにUIコントロールと一貫性がもたらされ、コンポーネントの構築と管理よりも製品開発に集中できるようになりました。また、ゼロからデザインする必要性を最小限に抑えるカスタムコンポーネントやUIのテンプレートなどのテーマ別のFluent UIライブラリをホストするのに、同社はGitHubのプライベートレポを使っています。  

レポジトリ内のコードによって設定された制約のもと、PayPalのプロダクトチームがデザインプロジェクトの90％を完成させ、UXデザイナーは「UX（ユーザーエクスペリエンス）の指導者」として、複雑なユーザビリティの問題や継続的なコーチングをサポートします。  

Fluent UIとUXPin Mergeに切り替えてから、PayPalの製品チームは、経験豊富なUXデザイナーが画像ベースのツールを使っていたときよりも8倍速く製品を提供できるようになりました。  

信頼できる唯一の情報源（Single Source of Truth）

  Fluent UIやMergeのようなデザインシステムを使う最も大きな利点は、すべての製品開発チームにわたって信頼できる唯一の情報源（Single source of truth）を作成することです。  

Fluent UIのコンポーネントはすべて1つのレポジトリから提供されるため、デザイナーとエンジニアは同じ制限と制約の中で作業でき、レポジトリに変更があると自動的にUXPinに同期されて、デザインチームに更新が通知されます。さらに、デザイナーはUXPinのバージョンコントロールを使って、いつでもどのプロジェクトでも、どのバージョンのデザインシステムにも切り替えることができます。  

迅速な製品の成熟度

  製品やデザインシステムを成熟させるには、かなりの時間とリソースが必要ですが、Fluent UIを使えば、スタートアップ企業が何年もかけて行ってきた研究開発を、最初のリリースでFortune500のソフトウェア企業と肩を並べるまで早めることができます。  

Fluent UIユーザーは、コンポーネントの開発に悩まされることなく、製品のイノベーションと問題解決に集中することができ、デザインシステムには、ゼロからデザインやプログラミングをすることなく、プロダクトをスケールアップするためのUI要素がすべて揃っています。

Fluent UIのコンポーネントをUXPinにインポートする方法

  Fluent UI の Reactのコンポーネントライブラリをインポートする場合、デザイナーには 2 つの選択肢がありますが、どちらを選ぶにしても、ファイル構造とレポジトリの正しい設定のためにエンジニアの協力が必要です。  

Git統合

  UXPinのGit統合は、Reactのコンポーネントでのみ動作してレポジトリに直接接続し、エンジニアは、すべてをセットアップするのにUXPinのボイラープレート・レポをテンプレートとして使うことができます。そしてUXPinのテクニカルサポートは、このプロセスを通じて企業を指導し、デザインシステムが確実に正しく同期されるようにします。  

始めの接続が完了すれば、UXPinはどんな変更点でも自動的に同期してデザイナーにその更新情報を通知します。  

Storybook統合

  UXPinのStorybook統合もReactで動作しますが、組織のFluent UIのVue、Angular、Emberのライブラリとの同期も可能です。  

Storybookは、UIのコンポーネントを単独で開発・管理するための素晴らしいツールであり、UXPinのStorybookのベストプラクティスで、組織が確実にStorybookとMergeを最大限に活用できるようにします。  

UXPinでStorybookのコンポーネントを使う

Storybookのセットアップが完了すると、左サイドバーの「デザインシステムライブラリ」にコンポーネントライブラリが表示され、以下のマテリアルUIの例のように、ライブラリ名の横にStorybookのアイコンが表示されます（MUIライブラリのGit 統合のアイコンは違うことに注意しましょう）。

デザイナーは、ライブラリからコンポーネントをドラッグ＆ドロップして、UIを構築しますが、UXPin Patternを使って、このようなStorybookのコンポーネントや他のライブラリの要素を組み合わせることもできます。  

UXPin Patternには、以下のように大きなメリットが２つあります：  

• デザインシステムを拡張するための新しいUIのコンポーネントとテンプレートの作成（デザイナーは、エンジニアがレポジトリに追加するのを待つ間、これらを共有・使用し、プロトタイプを継続できる）
• プロトタイプやテスト時の速やかな変更のための、コンポーネントの複数のステートやバージョンの保存。

Argsとプロップの使用

  組織は、Reactのプロップ や StorybookのArgs を使って、UXPin のプロパティパネルに表示されるコンポーネントのプロパティを設定することができ、そのプロップやArgsで、デザイナーは色、タイポグラフィー、ステート、影、その他の重要な値など、スタイリングのためのデザインシステムのガイドラインに確実に準拠できます。  

デザイナーは、毎回最小限の労力でブランドらしい仕上がりを実現するのに、ドロップダウンやチェックボックス、テキストフィールドなどを使ってさまざまなプロパティを適用できます。  

このようなプロパティには、すでにレポジトリにコンポーネントとスタイリングがあり、それによってリリースごとに絶対的な凝集力と一貫性を保証されることから、エンジニアは最終製品をより速く開発できるようになるのです。  

Merge と Fluent UI で早速デザインを始めよう！

  UXPin Merge と Fluent UI のパワーをうまく使って、顧客の期待を上回る高品質のUXを実現するエンタープライズ製品を開発しましょう。詳しい情報およびデザインシステムやオープン ソースのコンポーネント ライブラリを同期するためのアクセスのリクエスト方法については、Mergeのページをぜひご覧ください。

The post Fluent Design System とは？UXPinのStorybookに取り込む方法 appeared first on Studio by UXPin.

ウェブサイトのフッターは、必要不可欠なUIパターンであり、訪問者を重要なコンテンツに導くと同時に、ビジネス価値を高め、新規顧客とつながる絶好の機会をもたらします。  

本記事では、みなさんの今後のプロジェクトにインスピレーションを与えるようなウェブサイトのフッターデザイン、「やるべきこと」と「やってはいけないこと」、専門家の例、ベストプラクティスについてお話します。  

  UXPinでより高い忠実度と高度な機能性でUIデザインをプロトタイプ化しませんか。無料トライアルにサインアップして、コードベースのデザインの無限の可能性をぜひご覧ください。  

ウェブサイトフッターとは

  ウェブサイトフッターとは、ウェブサイトやアプリケーションの下部（またはフッター）にあるUIパターンのことです。フッターには、ナビゲーションのリンク、連絡先、ポリシー、著作権情報、SNSへのリンクなどのお役立ち情報が表示され、ユーザーがビジネスについてより詳しく知ることができるため、重要なウェブサイトの構成要素となっています。

メインのヘッダーナビゲーションをリンクしましょう；フッターは、ユーザーがいつでもリンクやコンテンツにアクセスできるように、すべてのページに表示されます。フッターはウェブページの最下部に位置しますが、ユーザーとビジネス目標にとって重要なコンポーネントです。  

フッターの目的

  デザイナーがWebサイトのフッターをどのように使うかは、ビジネスやコンテンツによって異なり、ウェブサイトでは大抵、セカンダリーナビゲーション、つまり、会社概要、製品資料、リソースなど、ウェブサイトのヘッダーに収まりきらない重要なリンクにフッターが使われています。  

GDP（EU一般データ保護規則）やCCPA（カリフォルニア州消費者プライバシー法）、その他の法的情報により、ウェブサイトにはプライバシー、利用規約など、特定のポリシーが含まれなければいけません。なのでデザイナーは通常、このようなリンクをフッターに設置し、ユーザーが常にそれがどこにあるのか分かるようにしています。  

販売面のメリット

  また、多くのUI/UXデザイナーは、製品のCTA（Call To Action）、お問い合わせページやニュースレターのサインアップフォームによる見込み客の獲得など、ビジネス目的でウェブサイトのフッターを使っており、フッターで、ユーザーを特集ページや売れ筋の製品カテゴリー、サービスに関する詳細情報へナビゲートできるようになります。  

マーケティング効果

  また、多くのマーケティング担当者は、SEO（検索エンジン最適化）目的でウェブサイトのフッターを使っており、フッターには、以下のようにSEO効果がいくつかあります：  

• 検索結果の上位に表示させたいページの押し上げをサポートする。
• ホームページのリンクには重みがある。つまり、検索エンジンはそのような内部リンクを重要と見なし、それに応じて優先順位を付ける。
• クリックの可能性を高め、それによって直帰率が下がり、ドメインオーソリティとランキングが上がる。

フッターに含むもの

  繰り返しになりますが、何を含むかはウェブサイトによって変わってきます。例えばECサイトは、ブログとはフッターの優先順位が異なるでしょう。以下は、フッターに含めるとよい項目です：  

• ナビゲーションリンク
• ブランドエンゲージメントとメッセージ発信
• お客様の声
• 著作権

ナビゲーションリンク

  フッターに表示されるナビゲーションリンクには種類がいくつかあり、以下のようなものがあります：  

• お役立ちリンク：お問い合わせ先、電話番号、メールアドレス、会社所在地、カスタマーサービスのお問い合わせ先、プライバシーポリシー、使用条件
• 便利なナビゲーション：利便性のためのメインナビゲーションのコピー（固定ヘッダーの場合は不要な場合がある。）
• 二次的タスクリンク：求人応募、投資家情報、ドキュメント/仕様書、プレス情報、アフィリエイト登録、FAQ
• サイトマップ：複数のトピック/製品カテゴリへのリンク

ブランドエンゲージメントとメッセージ発信

ウェブサイトフッターのもう一つの一般的な用途は、人と会社がつながることを奨励するようなリンクとフッターコンテンツである、「ブランドエンゲージメントとメッセージ発信」であり、以下のようなものがあります：  

• SNSのアイコン
• InstagramまたはTwitterなど、複数の最新投稿があるソーシャルフィード
• ブランドロゴ
• 1〜3文程度のブランドのスローガンやビジョン
• メール配信登録

お客様の声

  ブランドによっては、お客様の声やレビューのためにフッターが使われ、また、GoogleビジネスやTrustPilotのウィジェットで星評価が表示されることもあります。このようなUIパターンは、社会的証明や製品・サービスへの興味を喚起するのに適しています。

著作権

  フッターの一番下にある著作権マークと告知は、あなたが当該ウェブサイトのコンテンツの所有者であることを訪問者に伝えるものです。法的な義務ではありませんが、コンテンツに対する権利を保護する予定であることを知らせるのは、一般的な方法です。  

フッターデザインの事例6選

  様々な業界からフッターデザインの例を６つ選び、デザイナーがどのようにビジネス目標やユーザーのニーズに沿ったレイアウトを作るかご紹介します。  

このような例から得られる重要なポイントは、業界によってリンクとコンテンツの優先順位が異なるということです。また、どの例でも、訪問者が素早く情報を見つけられるよう、クリーンでミニマルなレイアウトが取り入れられています。

1. UXPin – Saasのフッターデザイン

筆者達は、UXPinのウェブサイトをSaaSのフッターの例として使うことにしました。固定ヘッダーが使われているため、主要なナビゲーションがデスクトップユーザーから常に見えるようになっているのがわかるでしょう。  

UXPinのフッターには、会社、製品情報およびマーケティングの主要情報が記載されています。また、高度なツールであるUXPinと、一般的な画像ベースの競合製品との比較を希望されるお客様が多いため、製品比較リンクがいくつか掲載されています。  

その他、SaaS製品に欠かせないフッターリンクとして、ドキュメント、チュートリアル、教育コンテンツ、その他のお役立ちリソースがあります。ちなみにUXPinには、言語選択、SNSのリンクやポリシー情報も含まれています。

2. BBC – ニュースのフッターデザイン

BBC（英国放送協会）は、世界最大級の報道・メディア機関です。  

この巨大メディアには、30以上の言語版のウェブサイトが主にフッターを使って表示され、人気のあるニュースのトピックには別のセクションが設けられています。また、ページの一番下には、法的情報、ポリシー、お問い合わせ先、BBCの広告へのリンクが掲載されています。  

すっきりとしたレイアウトで読みやすく、ユーザーはコンテンツやリンクをサッと見つけることができます。  

3. Asos – eコマースのフッターデザイン

世界的なECブランドであるAsosは、SNSのボタン、支払い方法、お役立ちリンクなどを備えたシンプルなフッターデザインが使用されています。eコマースで最も重要なのは、「配送/返品ポリシー」、「注文追跡」、「スペシャルキャンペーン」へのリンクですが、Asosの場合、学生割引やギフトカード、ブラックフライデーのプロモーションが行われています。  

そして、上場企業（ASOMY）であるAsosは、投資家情報や企業責任に関する情報提供がが求められています。  

さらに、世界的ECブランドであるAsosには、顧客が閲覧中のストアや、他の地域や通貨に変更するためのリンクが表示されます。

4. Zorro Design – 代理店のフッターデザイン

代理店は通常、以下の２つの目的でウェブサイトを利用します：  

• 自身の作品紹介
• 新規リードの創出

  米国のZorro Designは、白と黒のフッターデザインに、ユーザーをコンタクトフォームに誘導する明るい黄色のCTAが使われています。Zorroのデザイナーはフッターを完璧にデザインしており、画面の中央にCTAがあり、周囲には「クリックして!」と訴えかけるような空白がたくさんあります。  

最後に、ロゴとスローガンを左側に配置し、最近の仕事、お問い合わせ先、会社概要、SNSのボタンなど、重要なリンクがいくつか付いています。  

Zorroのフッターデザインは、ユーザーがサッとコンテンツを理解し、見つけることができるように、すっきりとしたデザインになっています。  

5. アレックス・ラカス氏 – フリーランサーのフッターデザイン

代理店と同様に、フリーランサーも自身の仕事を紹介して顧客を獲得するためのポートフォリオのウェブサイトが必要です。プロダクトデザイナーのアレックス・ラカス氏は、潜在的な顧客や雇用者、デザイナーとソーシャルチャンネルを通じて主につながるために、ウェブサイトのフッターを使用しています。  

また、リモートワーカーであるアレックスは、文字を点滅させることで、自身の現在地（この場合はロサンゼルス）を訪問者に伝えています。  

このダーク/ライトモードの切り替えは、UXデザインのポートフォリオとして、彼がウェブアクセシビリティに配慮していることを示すいいタッチであり、過去の作品やお問い合わせページにつながるリンクも用意されています。

6. Booking.com – 旅行会社のフッターデザイン

Booking.comは世界最大級のオンライン旅行会社で、70カ国以上、2800万件以上の宿泊施設が掲載されています。Booking.comの目的は宿泊施設の販売ですが、新しい物件を取り込みたいため、 「物件を掲載する 」ことが主要なフッターのCTAになっています。  

また、フッターには重要な5つのリンクが大きく太字で表示されて目立つようになっており、さらに、顧客が理想の旅行先をより早く見つけられるよう、地域や宿泊施設など、複数の検索カテゴリーが設けられています。  

そして、Booking.comは上場企業（NASDAQ: BKNG）として、必要なすべての投資家および企業情報へのリンクを掲載しています。  

ページ下部には、Booking.comの持株グループであるBooking Holdings Inc.のロゴがいくつか掲載されています。  

フッターのデザイン法

1. リンクの優先順位付け

  いいフッターをデザインするための第一歩は、リンクに優先順位をつけることです。デザイナーは、ユーザーのニーズとビジネスの目標を考慮し、訪問者にとって有意義で役立つものを作成しなければいけません。  

2. シンプルイズベスト

  ごちゃごちゃしたUIは、常にお粗末なパフォーマンスになり、わかりにくく、ユーザーを混乱させる可能性があります。UI要素、リンク、テキストを減らすことで、最も重要なコンテンツにトラフィックを誘導することができるのです（ここで、最初のポイントに戻りますが、リンクの優先順位を適切に設定しましょう）  

3. 単一のCTAを使用

CTAが単一であれば、訪問者を最も重要なタスクやビジネスゴールに導くことができます。フッターのデザインは通常、白と黒のツートンカラーで、鮮やかな色のCTAがポップで人々の注意を引くのに最適な背景となっています。  

4. モバイルからでも使いやすいフッター

  モバイル優先のデザインは、ウェブサイトのフッターに非常に重要です。デスクトップでは3～4カラムあるでしょうが、スマートフォンでは1カラムです。カラムやリンクの数が増えると、ユーザーはコンテンツを探すためにスクロールしなければならなくなります。最も重要なリンクやコンテンツは最初のカラムに配置し、ユーザーが最初に目にするようにしましょう。  

5. 階層構造で重要度を表示

  Booking.com、Zorro Design、BBC、アレックス・ラカス氏の例では、ユーザーに最も重要なリンクを示すために視覚的階層構造が使われています。サイズ、色、重みの違いは、重要性を表示するための効果的なテクニックです  

6. コンプライアンスの遵守

  ポリシーや免責事項などの法的情報は、現代のウェブデザインにおいて非常に重要です。デザイナーは、こういったリンク先の表示方法について、自社の義務を調査する必要があります。  

例えば、一部の国の金融・投資商品では、免責事項の情報をフッターに表示し、常に顧客の目に触れるようにすることが義務付けられています。Chase Bankのフッターの例をご覧ください。

7. ブランディングのチャンス

ウェブサイトのフッターは、SNS、ニュースレターの登録、会社のリンクなど、ユーザーとブランドの接点をつなぐ素晴らしい機会です。

8. お役立ち情報の提供

ユーザーは、ドキュメント、チュートリアル、ブログ、その他のリソースのようなヘルプを探して、ウェブサイトのフッターにスクロールすることがよくあり、UXPinのフッターデザインは、製品について顧客に啓蒙するための複数のリソースを提供する完璧な例になります。

UXPinでフッターをデザインしよう

UXPinで美しく、インタラクティブで、レスポンシブなWebサイトのフッターを作成しませんか。UXPinがあれば、デザイナーはコードのような機能を持つプロトタイプの構築やユーザーテストの改善、さらにステークホルダーからのより良いフィードバックの獲得が実現します。

UXPinには、コントラストチェッカーや色覚異常シミュレーターなどのアクセシビリティツールも組み込まれており、キャンバスを離れずにサッとデザインをテストすることができます。

世界で最先端のコードベースのデザインツールであるUXPin を使って、より良い製品をより早く提供しませんか。無料トライアルにサインアップして、UXPin でより良いユーザー体験を顧客に提供しましょう。

The post フッターデザイン – 6つの事例とベストプラクティス appeared first on Studio by UXPin.

  UXPinの npm統合 があれば、デザイナーはnpmコンポーネントライブラリをインポートして、完全に機能するプロトタイプを構築することができ、このような忠実度の高いプロトタイプにより、従来のベクターベースのデザインツールでは実現できなかった特徴やインタラクション、機能をテストすることができます。

UXPinの npm統合 とは

最初に、当社のnpm 統合は革新的なテクノロジーの最新のイテレーションであることから、まずはUXPin Mergeの理解が重要です。

Mergeでは、デザインシステムのコンポーネントライブラリをGitレポジトリまたはStorybookからUXPinのデザインエディタに同期できるので、デザイナーはデザインシステムから来る完全にインタラクティブなコンポーネントを使ってプロトタイプを作成することができます。

このコンポーネント駆動型のプロトタイピングにより、デザイナーとエンジニアが同じデザインシステムで作業する信頼できる唯一の情報源（Single source of truth）ができ、レポジトリへの変更は自動的にUXPinに同期されるため、チームは常に最新バージョンを使うことができます。

npm統合 の入力

デザイナーが Merge を接続して同期する際、以前はエンジニアの助けが必要でしたが、UXPinの npm統合 があれば、デザイナー（またはDesignOpsがあれば）はコードを書かずに直観的なユーザー インターフェースを使用して統合を完了できます。

コンポーネント ライブラリが npm パッケージとして存在する場合、Merge でUXPin に接続し、プロトタイプ作成を始めるのに必要な UI 要素をインポートすることができます。MUIのようなオープンソースのデザインライブラリは、命名規則、ファイル構造、ドキュメントが一貫しているため、npm統合と相性抜群です。

MUIを使うメリット

MUIは、GoogleのマテリアルデザインUIをベースにしたReactコンポーネントライブラリです。包括的なデザインシステムで、UIの速やかな構築に必要なものがすべて揃っているため、プロトタイピングに最適です。

MUI チームは、コンポーネントが基本的なユーザビリティとアクセシビリティの問題を確実に解決できるように素晴らしい作業を行い、そのおかげですぐに使用できる製品開発ソリューションを提供できるのです。

MUIはテーマに対応しているので、デザインシステム構築の基盤として利用したり、製品のコンポーネントライブラリに新しいパターンを見つけようとする際に、UI要素のテストに包括的なライブラリを活用することができます。

MUI npmとUXPin Mergeの統合

MUIには、いくつかの画像ベースのデザインツール用のデザインキットがありますが、UXPinでは、エンジニアが開発に使用するのと同じ基本コンポーネントであるコンポーネントライブラリを完全にインポートすることができます。

UXPinのMUIコンポーネントは、他の静的コンポーネントとまったく同じように見えますが、コードと同じ忠実度と機能を備えており、UXPinはベクトルグラフィックではなく、バックエンドでHTML、CSS、Javascriptをレンダリングします。

UXPinにUIエレメントをインポートすると、MUIのコンポーネントステートもそのまま利用することができます。画像ベースのデザインツールでこの設定をしたことがあれば、基本的なステートを追加してプロパティパネルに割り当てるのがいかに時間がかかり、複雑かわかると思います。でもUXPinの npm統合 があれば、数回のクリックでこういったステートをインポートすることができるんです！

Merge Component Manager でのプロパティの割り当て

Merge Component Managerでは、各MUIコンポーネントのプロパティの設定ができます。

各コンポーネントにインポートするReact propsの選択には、MUIのドキュメントが使えます。このようなインポートされたReact propsは、UXPinの右側のプロパティパネルに表示され、個々のUI要素をカスタマイズすることができます。

例えば、MUIボタンには、以下のような色のプロパティがあります：

• 原色
• 二次色
• 成功
• エラー
• 情報
• 警告

このようなプロップをMerge Component Managerでインポートすると、プロパティパネルにドロップダウンが表示され、必要なカラーの選択ができます。同じことが、バリアント（付属、輪郭、テキスト）、サイズ（小、中、大）、およびその他の複数オプションのプロップにも当てはまります。

プロパティの種類は、二択、関数、文字列、配列、列挙など、いくつかあり、プロトタイピングのニーズに応じて、ドキュメントにあるMUI React propsをインポートすることができます。

UXPinとMUI npmパッケージの接続

ステップ1

UXPinのダッシュボードに移動し、【New Project（新規プロジェクト）】をクリックします。

ステップ2

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

ステップ3

【New prototype（新しいプロトタイプ）】をクリックし、UXPinのデザインキャンバスにプロジェクトを開きます。

ステップ4

左サイドバーの【Design System Libraries（デザインシステムライブラリ】タブの下部にあるドロップダウンをクリックし、【New library （新しいライブラリ）】をクリックします。

お使いのサイドバーや利用可能なライブラリは、例と異なる場合があります。

ステップ5

【Import React Components （Reactコンポーネントをインポートする）】を選択し、【Next（次へ）】をクリックします。

ステップ6

ライブラリに名前を付けます。この名前は純粋にあなたの参照のためであり、インポートに影響を与えません。

そして、MUI Materialのnpmページの【Install】にある、npmパッケージのレポジトリ名を取得する必要があります。npmからインストール内容をコピーして、【Library package name（ライブラリパッケージの名前】欄に貼り付けます。

記号の前をすべて削除して、@mui/materialのみ残し、他はデフォルトのままにして、【Next（次へ）】をクリックします。

MUIコンポーネント のインポート

npmの統合が完了すると、UXPinは自動的にキャンバスに誘導されます。さて、いよいよインポートしたいMUIコンポーネントの選択です。

ステップ1

左側のサイドバーから、【Open Merge Component Manager（Merge Component Managerを開く）】をクリックします。

Merge Component Manager は新しいタブで表示されます。

ステップ2

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

ステップ3

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

正しい命名規則は、MUIドキュメントのComponent APIに記載されています。MUIのコンポーネントは、スペース無しの「キャメルケース」を使用しています。最初の文字は常に大文字にするので、例えば、ボトムナビゲーションは 「BottomNavigation」 となります。

最初のコンポーネントとしてMUIの【Button（ボタン）】をインポートし、【Inputs（インプット）】という新しいカテゴリに追加してみましょう。デザイナーとエンジニアが同じ参照ポイントを持てるように、MUIのドキュメントと同じカテゴリの使用をお勧めします。

一度のインポートで複数の部品を追加できるので、ステップ2と3を繰り返す手間が省けます。   Import Components（コンポーネントをインポートする）】をクリックします。

ステップ4

右上の【Publish Changes（変更を公開）】をクリックすると、インポート処理が初期化されます。

新しいコンポーネントに対して初めて行う場合、1～2分かかるかもしれません。

ステップ5

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

この手順を順を追って見ていくと、左サイドバーにカテゴリー（Inputs）と最初のコンポーネント（Button）があることがわかると思います。

ステップ6

【Button（ボタン）】をクリックして、プロパティの追加を開始します。このようなReactプロップは、MUIのドキュメント【Component API（コンポーネントAPI） > Button（ボタン）】で確認できます。

Merge Component Manager でコンポーネント プロパティの追加

ドキュメントにあるReact propsを使って、MUIボタンのプロパティをいくつか追加してみましょう。

ボタンのラベル：ステップ1

MUIのボタンラベル（またはコンテンツ）は、【children】というReactプロパティを使用します。

• プロパティ名：”children “と入力（propsは必ず小文字を使用）。
• 表示名：これは参考までにですが、デザイナーやエンジニアが使うような説明的なものです。ちなみに筆者達は “Label（ラベル） “にしました。
• 説明文：デザイナー向けの簡単な説明や指示を追加します。筆者たちは「Buttons’ label（ボタンのラベル）またはCTA（Call To Action）」を使います。
• プロパティの種類：MUIのドキュメントにあるように「node（ノード）」
• プロパティコントロール：“textfield”（注：このフィールドは、プロパティの種類を選択すると表示され、選択内容によって異なります。）
• デフォルトの値：お好みでどうぞ。ここでは 【Button（ボタン）】とします（注：MUIはボタンラベルを大文字で表記します）。

コンポーネントのプロパティが完成したら、コンポーネントのプレビューが表示され、好みに応じて変更されることがわかります。

ボタンのラベル：ステップ2

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

その後、【Save changes（変更を保存）】します。

最後に、【Publish library changes（ライブラリの変更）】を公開します。

UXPinによるコンポーネント駆動型プロトタイピング

必要なMUIコンポーネントをインポートしたら、UXPinでのプロトタイピングは、ドラッグ＆ドロップでレイアウトを構築するのと同じくらい簡単です。ちなみに筆者たちは、3つのMUIコンポーネントを使用して、このシンプルなメールサインアップフォームを1分もかからず作成しました。

MUI コンポーネント を選択すると、Merge Component Manager で作成したプロパティが右側のプロパティパネルに表示されます。

UXPinのコンポーネント駆動型プロトタイピングの可能性を発見する準備はできましたか？MUIの npm 統合 （またはnpmで利用可能なその他のオープンソースコンポーネントライブラリ）をぜひお試しください。

The post npm統合 – MUIコンポーネントのUXPinへ導入のご案内 appeared first on Studio by UXPin.

  マテリアルデザインは、最も人気のあるデザインシステムの一つです。Android端末をお持ちの方は、毎日Material Designを使用していることでしょう。多くの企業が、モバイルおよびウェブアプリケーションを構築するための基盤として、マテリアルデザインシステムを使用しています。

このシステムの包括的なコンポーネントライブラリと、マテリアルアイコン（現在はマテリアルシンボル）を含むリソースには、組織やスタートアップ企業がゼロからデザインすることなく製品を無限に拡張するための構成要素があります。

本記事では、次の製品開発プロジェクトで使用できるマテリアルシンボルやその他のマテリアルリソースについて見ていきます。

UXPinの各プランには、マテリアルデザインのUIとアイコンが標準装備されています。無料トライアルにサインアップして、今日からUXPinとマテリアルデザインで美しいアプリを構築しましょう。

マテリアルデザインとは

マテリアルデザインは、Googleが開発したデザインライブラリで、UIコンポーネント、アイコン、タイポグラフィなどが含まれます。すべてのマテリアルコンポーネントには、実装、使用方法、構造、動作などのガイドラインが含まれており、デザイナーやエンジニアが高品質なユーザー体験を提供しながら最高の成果をあげられるようサポートします。

Googleは、2014年のGoogle I/O会議でマテリアルデザインの最初のバージョンを発表しました。2021年5月、GoogleはDynamic Color、折りたたみ可能なデバイスコンポーネント、デザイントークンなどの注目すべき機能を含むMateri Design 3（M3）を発表しました。

マテリアルシンボルの発表

マテリアルデザインの最もワクワクするアップデートの1つは、5つのスタイルで2,000以上のオープンソースのアイコンを含む、カスタマイズ可能なアイコンセットである「マテリアルシンボル」の発表でした。お気に入りのマテリアルアイコンをすべて見つけることができますが、製品やブランドの要件に合わせて、より柔軟にカスタマイズできるようになりました。

マテリアルアイコンはまだ利用可能ですが、シンボルのようなカスタマイズはできません。そしてシンボルでは4つの可変オプションがありますが、サイズと密度しか調整できません。

マテリアルアイコンセット

Googleは、シンボルのカタログより少ないとはいえ、旧マテリアルアイコンを残しており、アイコンは、【Outlined】、【Filled】、【Founded】、【Sharp】、【Two-tone】の5つのスタイルで利用できます。

マテリアルシンボル：最新情報

マテリアルアイコンは、Google Fontsの下に移され、【Outlined】、【Rounded】、【Sharp】の3つのスタイルで可変のアイコンセットがあります。また、デザイナーは、以下の4つの変数または軸でアイコンセットをカスタマイズすることができます：

• 塗り：塗りつぶしまたは塗りつぶしなしの外観
• 太さ：シンボルの線を100から700のウェイトで確定
• グレード：強調を伝えるのにシンボルの太さを細かく調整
• 光学サイズ：アイコンのサイズを20、24、40、48ピクセルに設定可能

可変方式では、エンジニアは複数のバリエーションを複数のファイルではなく、1つのフォント（またはアイコン）に保存することができます。ファイルサイズとファイル数を減らすことで、エンジニアにパフォーマンスの向上と管理すべきアセットの削減がもたらされるのです。

3種のスタイル

Googleは、ブランドのアイデンティティやUIデザインに合わせた3つの新しいスタイルの導入もしました。

• 輪郭：クリーンで軽やか。デザイナーは、製品のフォントを補完するのにアイコンの重さを調整することができる。
• 丸み： 曲線の美しさは、丸みを帯びたロゴと重厚なフォントと相性がいい。
• 鋭さ：直線的なエッジと90度のコーナーのスタイリングを持つUIにマッチするようにデザインされている。

マテリアルアイコンを作成する

マテリアルシンボルの膨大なカタログの中から必要なアイコンを見つけられない場合、Googleは下記のようなカスタムアイコンをデザインするためのガイドラインを用意しています：

• デザイン原則：ユーザーにとって意味があり、役に立つ明確な図像を作成するためのベストプラクティス
• アイコンのサイズとレイアウト：デザインツールを使ってアイコンをデザインする際のグリッドサイズとレイアウトの設定方法
• グリッドとキーライン図：一貫したアイコンセットを作成するためのテクニック
• アイコンメトリクス：コーナー、ウェイト、ストローク、複雑さなど、アイコンのデザイン構造

このようなガイドラインに従うことで、マテリアルの包括的なアイコンセットを活かしながら、自身のブランドに関連するアイコンをいくつか追加することができます。

Googleのマテリアルアイコン＆シンボルの使用方法

デザイナーやエンジニアがマテリアルアイコンやシンボルを使用する方法はいくつかあります。

SVGまたはPNGをダウンロードする

アイコンとシンボルは、SVGまたはPNG形式でダウンロードすることができますが、パフォーマンスとカスタマイズの利点を考慮し、SVGを使用することをお勧めします。PNGファイルはサイズが大きく、デザイナーやエンジニアが編集したりサイズを変更するのがより複雑になります。

Googleでは、ダウンロード前にアイコンやシンボルをカスタマイズできるため、プロジェクトで使用する最終的なアセットが得られます。

CSS/CDN

マテリアルシンボルには、Google Fontsに使用するものと同様のウェブサイト設置用のCSSファイルがありますが、この方法は、ウェブサイトに追加のリクエストを行う必要があり、パフォーマンスに深刻な影響を与える可能性があるという問題があります。

なので、複数のマテリアルシンボルを使用する場合は、別の方法で設置した方がよいでしょう。

運営システムとフレームワーク

マテリアルアイコンとシンボルには、プロジェクトのアセットとしてインストールするためのAndroidとiOS用のダウンロードがあり、実装のためのコードスニペットも用意されています。マテリアルデザインには、Flutter（Googleが開発したプログラミング言語）とAngularの説明書があり、Reactの説明は、MUIのドキュメントに掲載されています。

デザイナーの使用方法

大抵のデザインツールには、マテリアルアイコン用のプラグインやエクステンションがありますが、UXPinをご利用の場合、すべてのプランにマテリアル アイコン セットが標準装備されています。

また、自分で作成したSVGアイコンをインポートしてUXPinで編集し、デザインシステムに保存して他のチームメンバーと共有することも可能です。

マテリアルアイコンやシンボルをタイポグラフィと一緒に使う

GoogleのMaterial 3（M3）ドキュメントには、アイコンとタイポグラフィの組み合わせに関するヒントとベストプラクティスが紹介されています。

ウェイト

アイコンとテキストに別々のウェイトを絶対に使わないでください。 Googleは、こういったアセットをマテリアルシンボルのウェイトカスタマイズ変数と簡単に組み合わせられるようにしています。クリーンで一貫した美しさを実現させるべく、確実にフォントのウェイトとアイコンのウェイトを常に一致させましょう。

（正）フォントのウェイト

（誤）フォントのウェイト

サイズと配置

アイコンのサイズと配置は、常にテキストと一致させましょう。ユーザーは両方を読んで、それらが関連していると認識できなければいけません。Googleは、デザイナーに「シンボルのベースラインを、文字サイズの約11.5%にシフトダウンする」ことを推奨しており、このやり方でアイコンやテキストが統一され、整列した状態に保たれます。

マテリアルアイコンのアクセシビリティ

Googleは、アイコンのアクセシビリティについて、デザイナーに簡潔ながら有益なアドバイスを提供しています。デザイナーは、特にナビゲーションのために、常にアイコンに有意義でよく説明されたラベルを使わなければいけません。テキストラベルのないアイコンは、ユーザーにとってあいまいで混乱を招く可能性がありますからね。また、スクリーンリーダーやその他の補助的な技術のための「代替（Alt）テキスト」も含めなければいけません。

アイコンは、対象サイズも重要な要素です。指の大きな人や手の不自由な人は、間違ってアイコンのボタンを押してしまい、混乱やフラストレーションの原因になりかねません。

Googleは、デザイナーに最小ターゲットサイズ48ピクセルの使用を推奨しています。20ピクセルのアイコンを使用する場合は、ターゲット領域の合計が48ピクセルになるよう、十分なパディングを設けましょう。

UXPinでマテリアルデザインのアイコンを使ってデザインする

マテリアルアイコンを含め、UXPinで予めインストールされた複数のアイコンセットがあれば、デザイナーはプラグインのインストールや、外部ファイルのアップロードが必要ありません。以下のように、プロジェクトへのアイコン追加は簡単です。

ステップ1：アイコン要素をクリック

キャンバスの左側にあるクイックツールパネルで、アイコン要素をクリックします。または、キーボードショートカットの【OPTION】+【I】（Macの場合）や【ALT】+【I】（PCの場合）でもできます。

ステップ2：キャンバスにアイコンを描く

アイコンを表示させたい場所をクリックして、四角くドラッグします。【SHIFT】キーを押しながらドラッグすると、幅と高さが等しくなります。

ステップ3：アイコンのプロパティパネル

アイコンを描画すると、右側のプロパティパネルにアイコンプロパティパネルが表示され、マテリアルアイコンや、Fonts Awesome、Retina Icons、UXPinセットなど、他のセットのいずれかを選択することができます。

ステップ4：アイコンの選択

利用可能なマテリアルアイコンをスクロールして、必要なものを探します。プロパティパネルで（キャンバス上でアイコンを選択した状態で）任意のアイコンをクリックし、選択状態にします。

ステップ5：アイコンのプロパティを調整

アイコンを選択したら、【アイコン】セクションの上にあるプロパティパネルを使用してスタイルを設定することができます。カラーピッカーの下には、マテリアルデザインを含む利用可能なデザインシステムのドロップダウンがあるので、デザイナーが他の場所からHEXコードをコピー＆ペーストする必要はありません。

ステップ6：インタラクションの追加

プロパティパネルの上部には、「インタラクション」があり、【インタラクション】、【アニメーション】、【トランジション】などを追加して、アイコンをインタラクティブにすることができます。例えば、このユーザーアイコンを使って、パーソナライズされたプロフィールページを開くとします。

UXPinのインタラクティブなUIパターンとアプリの例で、UXPinの機能の仕組みやコードベースのデザインでできることをご覧ください。

UXPinでプロトタイピングとテストを改善しよう

マテリアルアイコンは、UXPinで作業する際の1つの利便性に過ぎませんが、デザイナーが画像ベースのデザインツールとして、より機能的で忠実なプロトタイプをより早く構築できるようにすることが我々の目標です。

UXPinの内蔵デザインライブラリのいずれかを使えば、デザイナーは要素をドラッグ＆ドロップして、インタラクティブなプロトタイプを数分で構築できます。ウェブサイトから企業やB2C製品のウェブおよびモバイルアプリケーションまで、あらゆるタイプのプロジェクトに対応できるよう、人気の高い5つのデザインライブラリを収録しました

UXPinのすべてのプランには、マテリアルデザイン、iOS、Bootstrap、Foundation、ユーザーフローが含まれており、それぞれのライブラリのインタラクティブな要素、カラー、テキストスタイル、アイコンが用意されています。

UXPinのデザインシステム機能では、デザイナーがゼロからデザインシステムを構築し、ライブラリをカラー、アセット、タイポグラフィ、コンポーネントに自動的に分類することができます。また、権限の設定や、デザイナーやエンジニアが従うべきドキュメントを含めることができます。

UXPinのコードベースのデザインツールを使用して、最終的な製品エクスペリエンスを正確に再現する、より優れたプロトタイプを構築しませんか？無料トライアルにサインアップして、UXPinを使用したデザインの可能性を是非ご覧ください。

The post マテリアルデザインのアイコン： Webとアプリデザインの構成要素 appeared first on Studio by UXPin.

88％ものユーザーが、たった一度嫌な思いをしただけで、そのアプリやサイトを二度と利用しなくなることを知ってましたか？このことから、いかにUIデザインが重要かがわかりますね。UIデザインは、美観をはるかに超え、ユーザーエクスペリエンスに決定的な影響を与えるのです。

以下のガイドでは、「UIとは何か」から、鍵となる要素、そして2022年以降の最新UIトレンドまで、ユーザーインターフェースをデザインする際に知っておくべきことをすべてお話します。

 UIデザイン とは

UIデザインとは、ユーザーインターフェースデザイン（User Interface Design）の略で、デジタル製品のグラフィックレイアウトを作成し、アプリケーションの最終的な見た目や雰囲気をサポートするプロセスのことを指します。それには画像、アニメーション、スライダー、テキストフィールド、ボタンなど、ユーザーが操作するさまざまな要素が含まれます。いいUIデザインは親しみやすいユーザーエクスペリエンスに繋がるため、ソフトウェア開発プロセスにUIデザインが入れられるべきなのです。 それでは、インターフェースをデザインする際に使用できる要素について見ていきましょう。

デザイナーが知っておくべきUI要素

ユーザーインターフェースのデザインには、さまざまなUI要素があり、以下3つのカテゴリーに分類することができます：

入力要素

入力要素は最もポピュラーなカテゴリーです。入力要素で、ユーザーは年齢や購入理由など、さまざまな必要情報を提供します。入力は、テキスト、グラフィックス、オーディオなど、さまざまな形式でできますが、入力要素には、以下のような形式があります：

• ドロップダウン
• コンボボックス
• ボタン
• トグル
• テキスト/パスワードフィールド
• 日付ピッカー
• チェックボックス
• ラジオボタン
• 確認ダイアログ

出力要素

出力要素は、入力要素で行ったアクションの結果です。アラート、警告、完了、エラーなどを表示し、その性質は決して中立的ではありません。例えば、サポートされていない形式の画像をアップロードした場合、「対応していない画像」というメッセージが表示され、別の形式の画像が出されないといけないことがすぐに分かります。

ヘルパー要素

三つ目のカテゴリーは、出力や入力のカテゴリーに分類できないすべての要素の総称になります。その名が示すように、ユーザーがサイトの内容を理解したり、インターフェースの使い方を見つけたりするのをお手伝いするものです。 ヘルパー要素は、さらに3つのサブカテゴリに分類されます：

• ナビゲーション：インターフェースのナビゲーションを手助けします。例えばメニュー、パンくずリスト、リンクリストなどがあります。
• インフォメーション：ユーザーが現在どのステップにいるのか、あるいはウェブサイトが現在どの処理を実行しているのかを伝えるものです。例えばプログレスバー、アイコン、ツールバーなどがあります。

• コンテナ／グループ：様々なUIコンポーネントをまとめておくものです。これらの要素は、大抵ポップアップ、サイドバー、ウィジェットの形で提供されます。例えば、下の画像のようなニュースレターのサインアップボックスはそのいい例です。

 UIデザイン 要素の違いを理解することの重要性

前述の3つのグループからわかるように、アウトプット、インプット、ヘルパーの各要素は、それぞれに違う目的がありますが、UIデザイナーは、同じグループ内の要素もきちんと区別しなければいけません。 例を出してみましょう、あなたはネットスーパーのページにフィルターを追加しようとしています。検索結果には、「ビーガン」商品のみ表示させたいとします。 UIの観点からは、入力要素がいくつも見つかります。

• ラジオボタンリスト：正しい選択肢をタップ
• リスト：合致する要素を見つけ、「ビーガン」をクリック
• ドロップダウン：スクロールして、当該製品タグをタップ（通常、選択肢はアルファベット順に表示されます）。
• チェックボックス：「ビーガン」だけでなく、「無糖」や「フェアトレード」など、他の要素も選択

UIという点からどの要素を選べばいいかを見るには、ユーザーの目的を把握し、それが果たされるためにできるだけシンプルで便利なものにしなければいけないのです！ ユーザーの目的とインタラクションの簡略化といえば、次のトピックにつながります。

 UIデザイン の最高の原則

UIデザインとは？ユーザーの生活を便利にすることです。 それが、 UIデザイン の成功に繋がる大原則です。ユーザーを継続的なデザインプロセスの中心に据えることで、ユーザーをより引き付け、離さないようになるのです。つまり、ユーザーの思考を読み、彼らがどのように行動するかをデータを使って把握するということです。その結果、ユーザーのニーズと期待に応えられる、より洗練された製品が生まれるのです。

そして、それには高い期待が寄せられています。ユーザーがオンラインで膨大な時間を過ごすようになり、以前にも増して要求が厳しくなってるのです。自覚していなくても、あるいはそれを「 UIデザイン 」と呼んでいなくても、どんなインターフェースがいいものなのかわかっていますから。

だって、ユーザーがアプリやサイトのナビゲーションに四苦八苦したらどうなります？

使うのをやめちゃいますよ。アンインストールしちゃいますよ。 なので、正しい原則を適用してユーザーが通る過程をシンプルにすることは、ビジネスにとって非常に重要です。手始めに、以下のことを行ってください。

1. 一画面あたりのアクションとステップを最小限にする

ユーザーは、できるだけ少ないクリックやタップで、目的の場所に移動したいはずです。特に、画面サイズが小さいデバイス向けにユーザーインターフェースをデザインする場合は、スペースが限られているため、ナビゲーション技術を大きく太く、親指で操作しやすいものでなければいけません。

美的にも意図的にも、デザインの焦点を絞りましょう。そのページや画面は何なのか、ユーザーは何を知る必要があるのか、何をする必要があるのかが明確であるべきです。例えば、Amazonのチェックアウトページを思い浮かべてください。商品と価格に焦点が当てられ、詳細情報と配送オプションが自動入力され、あとは「購入する」を押すだけです。 時間は貴重なものです。多くの企業がユーザーの注目を集めようとしている今、タスクやアクションを合理化せずに競合他社に「負け」てしまうリスクは許されません。

2.認知的負荷の軽減

ミリオンダラー・ホームページを覚えていますか？これは、認知的過負荷の桁違いの例です。鮮やかな色彩とほとんど読み取れない文字の塊に目を奪われます。カジノや小さな小売店など、ある企業を見つけることができるかもしれませんが、その前に別の派手なピクセル広告が目に入り、その前にあったことはすべて忘れてしまうのです。 認知負荷とは、脳内で占有される情報量のことです。それを踏まえて、インターフェースをデザインするときの目標は、ユーザーが必要としない余計なものを取り除き、必要な情報が簡単にやりとりされるようにすることです。 よくある例としては、ユーザーが既にクリックしたリンクの色を切り替えるというものです。どのページを訪れたかを覚えておく必要がなく、一目でどこに行ったかを確認することができます。 優秀な UIデザイン とは、ユーザーは考えなくていいということです。直感的に操作でき、あなたの「縁の下の力持ち」的なデザイン力を意識することなく、タスクが完了するのです。

3. 確実にダイアログが終了すること

前回、ネットで商品を購入したときのことを思い出してみてください。そこには、明らかに三部構成のストーリーがありました。第一部、商品を物色する。第二部、商品を選び、お会計に進む。そして第三部、注文確認書を受け取る。 いい感じです。「これをしたらこうなる」というのが世の中の一番シンプルな法則なので、我々の脳にはそれがスッと入ってくるのです。このボールを壁に投げつけたらボールは跳ね返る、R2D2が設計図を持っていたらルークがデス・スターを破壊できる、「買う」をクリックしたら商品がバスケットに入ったことが通知される、といった具合です。 ユーザーのアクションに「3部構成」を適用し、各ステップで「追加されました」の通知などのフィードバックを追加しましょう。

4. はっきりとわかりやすい次のステップを提供する

ウェブページを最後までスクロールしてみたら、まるでアラーキスのように不毛な空間だったという経験はありませんか？作業をいきなり止め、上にスクロールするか、クリックで戻るか、タブを閉じるしかなくなります。

こういったことがあなたのアプリやサイトで起こらないようにくれぐれも気をつけてください。ユーザーを目的の場所に導くことができましたが、次は何をしますか？

 UIデザイン の核となるのは、ユーザーが通るプロセスを案内することです。次にどこへ行けばいいのか、何をすればいいのか、さりげなく（あるいははっきり）伝えるのです。CTA（Call-To-Action）ボタンの位置と機能について考えてみましょう。データを使って、ユーザーの意図と配置に焦点を当て、エンゲージメントを最大化しましょう。 詳しくは、ガイド「ユーザーインターフェースデザインの基本原則」をご覧ください。

 UIデザイン のありがちな間違いトップ3とその回避方法

ユーザーインターフェースのデザインには、リスクや失敗の可能性がつきものですが、その多くは簡単に回避できるため、私たちは専門家数人と連絡を取り、彼らの見解を教えて頂きました。ここでは、私たちが集めた11のユーザーインターフェースデザインの間違いのうち、3つを紹介します。

間違い１. 使用性より創造性重視

CellPhoneDealのCEOであるジョシュ・ライト氏は、企業が目立とうとしすぎるあまり、使用性に悪影響を及ぼすことがよくあると述べています。印象に残るUIをデザインすることは推奨されますが、画像やアニメーションを多用することは決して良いことではありません。アプリやWebサイトが使いづらくなる可能性があり、注目を集めるどころか、ユーザーの利用意欲をそぎ、競合他社の手に渡ってしまうかもしれません。創造性よりも使用性を重視し、目に楽しいだけでなく、直感的に操作できるUIを目指しましょう。

間違い２. デザイントレンドへの過度な依存 

CRACKITTの創設者であるディーパーシャ・カッカル氏は、企業がよくトレンドの犠牲になることを非常に的確に指摘しています。ご存知のように、トレンドは移り変わるものです。だからこそ、最初の評価なしにトレンドと言うだけで食いつくのは間違いなのです。業績評価指標を見て、何か変更を加える必要があるかどうかを判断しましょう。もしそうでなければ、他の人がやっているからという理由で変更しないでください。もし、最新のトレンドに基づいて製品を変更するのであれば、それを裏付けるデータがあるかどうかをまず確認しましょう。そうしないと、多くの時間とお金を無駄にすることになります。

間違い３.  UIデザイン  の中身よりスタイル重視

また、「中身よりもスタイル」を重視することも、よくある問題です。spacelift.ioのプロダクトデザイナーであるアレク・ノヴァコウスキー氏は、このように語っています。 彼はそのキャリアを通じて、デザイナーが役に立たない（あるいは存在しない）UXを美しいブランディングに包んで誤魔化してしまう例を数多く見てきました。そのようなプロジェクトは、「見た目」だけで、「性能」が伴わないため、失敗に終わります。 例えるなら、車輪のない車です。外観や内装が豪華でも、その車が意図する基本的なこと、つまり人を乗せて移動することができなければ意味がありません。 そこで彼は、まずWebサイトやアプリのフローチャートを作成し、潜在顧客に対して仮説の検証を行うことを提案しています。仮説が正しいことが証明されれば、それをUIに盛り込むことを検討します。ここで重要なのは、一貫性を保つことです。では、デザインの一貫性とはどういうことでしょうか。次にこれについて説明します。

UI/UXデザイナーのためのデザインの一貫性に関するベストプラクティス

デザインの一貫性とは

デザインの一貫性とは、すべてのプラットフォームにおいて、視覚的および機能的な要素の統一性を保つことです。モバイル、タブレット、デスクトップのいずれでも、ユーザーがXのアクションを行うと、必ずYのアクションが発生する、これを「デザインの予測可能性」と呼ぶこともできます。 例えば、ダイアログボックスの右側に緑色の「はい」、左側に赤色の「いいえ」を表示するアプリがあるとします。ユーザーはこれを熟知し、UIデザイナーが切望するように、この動作を直感的に行います。しかし、ある画面では、その配置が反転しています。するとユーザーは、間違った選択肢を事故的に選んでしまうのです。そうなるとユーザーは、今後選択するすべての選択肢に疑いをかけてしまい、親指を各インタラクションの上で1秒以上長く浮かせてしまいます。 このように、一貫性のないデザインは、あなたとユーザーとの関係を終わらせてしまいます。

デザインの一貫性に関するベストプラクティス

1. ユーザー中心のUI・UXデザインリサーチの実施

まず、2つの質問に答えることからリサーチを始めましょう。

• ユーザーは何を求めているのか？
• ユーザーは何を期待しているのか？

解決策をデザインする前に、ユーザーの気持ちに寄り添わなければいけません。ユーザーがアプリをダウンロードしてサイトをクリックしました。でも、それはなぜですか？UIとUXは、データと共感だらけで成り立っているようなものです。

ユーザーのニーズが特定できたら、ユーザーの期待に焦点を当てます。つまり、デザインに精通した上で構築するということです。例えばGoogleは、オンラインの検索法を決めました。Facebookは、友人とのつながり方に影響を与えました。Amazonは、買い物の仕方を定義づけました。  このページのホームページボタンはどこですか？左上です。迷いません。これが純粋なオンラインの一貫性です。

2. プロダクトデザインパターンの定義

この「3つのルール」は、一貫性の維持を支えてくれます。ユーザーのアクションは最小限に抑えたいものです。ということは、現在地から目的地まで、タップやクリックを3回以内にするということです。 これには、方法がいくつかあります。

• デザインの階層：ユーザーの注意を誘導し、最も使われる部分を目立たせる。
• ブランディング：カラーパレットから声のトーンまで、ブランディングは自身を際立たせるもの。常に、あなたらしさを大切に。
• コンポーネント：インタラクティブ要素は、それぞれ統一された動作の実行が必要。プログレスバーは常にプログレスバーであるべき。
• テンプレート：すべてのプラットフォームでレイアウトを統一するためには、テンプレートを利用すると効率的。

3. 一貫したアクションの構築

ユーザーには、製品がどのように機能するかをただ把握してほしいのです。一貫したアクションは、使いやすいデザインフローを生み出します。いったんユーザーが、Xアクションの結果がYであることを知ってしまえば、その知識を製品全体で活用することができ、その後はそのアクションについて考える必要さえなくなるのです。一貫性のあるアクションを構築する際には、既存の影響やあなた自身のデザインを活用しましょう。

4. 一貫性のあるコンテンツを作る

コピーに一貫性を持たせましょう。ユーザーへの「話し方」、特に特定の専門用語を使う場合は、製品全体で統一しておく必要があります。一貫性を保つことで明瞭になり、ユーザーの流れが維持されるからです。また、ブランディングの面でも、ユーザーに対して、自分が他の誰かではなく、あなたと一緒にいるのだということを意識させることができます。 コンテンツは、標準化された方法で表示され、実行されないといけません。デザインする際には、ユーザーの目的を中心に置きましょう。 5.コミュニケーションの維持

コミュニケーションの価値は計り知れません。例えば選択したときにチャイムが鳴るなど、ユーザーは自分の実行したアクションが認識されると安心します。

自分が正しく操作できたかどうか、製品が正しく動作しているかどうかなど、ユーザーに疑問を残してはいけません。疑問は迷いを生むからです。

また、一貫性を保つには、社内のコミュニケーションも重要です。チーム全員が、それぞれ自分の役割がどのように構築に関わっているのかという、1つのビジョンに向かい動きます。UXPinのようなコードベースのUIツールを使って、アイデア出しから実施までのデザインの一貫性を強化しましょう。UXPinは、デベロッパーが使用するのと同じ「ライブコード」要素を使用して、デザイナーがクラウド上でコラボレーションを行い、製品をあなたのビジョンに一致させられるようにするツールです。 一貫したデザインを維持するための詳細は、デザインコンシステンシーガイド：UI/UXデザイナーのためのベストプラクティスをご覧ください。

専門家が語る「良い UIデザイン 」

UIデザイン の原則とよくある間違いについて説明したところで、専門家に聞いた「良いデザインの特徴」について見ていきましょう。

ユーザーインターフェースのデザインはレスポンシブであるべし

ExaWeb Corporationのテクニカルリーダーは、特にGoogleが2019年にモバイルインデックスを検索ランキング上位要因の一部にしたことを受け、レスポンシブの重要性を強調します。アプリやウェブサイトを構築する際、デバイスに関係なく良好なユーザー体験を保証するために、異なる画面サイズに適応させることが絶対に必要です。しかし、レスポンシブは、画面サイズの最適化にとどまらず、スピードやパフォーマンスにも関わってきます。そのため、Googleの標準を遵守し、すべてのデバイスで UIデザイン が標準を満たすようにすることが重要です。

 UIデザイン に必要なのは「共感性」

Mantra Designのデザイナーであるグレッグ・フィンドリー氏は、優れた UIデザイン の特徴として、ユーザーのニーズに対する共感が最も重要であると述べています。これは主にUXに関連する問題だと思われるかもしれませんが、彼は、ユーザーが操作するのはUIであり、その背後にあるプロセスではないことを忘れてはいけないと主張しています。

グレッグは、UIは一般人の行動、例えば、私たちの集中力がどんどん短くなっていること等が反映されなければいけないと言います。もし、インターフェースやメッセージ機能がコンバージョンに集中しすぎていると、ユーザーは購入を急かされているような気になってしまい、サイトやアプリを途中でやめてしまうかもしれません。

そこで、彼は次のように自分に問いかけるように勧めています：

• 初めて見たとき、ユーザーにどのような印象を与えるか。
• 2度目、10度目、50度目はどのように感じるのか？
• 製品のライフサイクルのすべての段階において、UIはどのように共感を維持するのか？

要は、グレッグが言うように、インターフェースの感じ方や響き方によって、 UIデザイン の良し悪しは大きく変わってくるということです。

以下は、デザイナーが語る優れたUIの特徴のほんの一部です。詳しくは、この記事をお読みください。

優れた UIデザイン はミニマムであるべき

Vitamina KのUX/UI & Digital Product Designerであるカーラ・フェルナンデス氏は、製品の目的は全て、ユーザーが問題を解決したり、ユーザー体験の調査で特定された目標を達成するのをサポートすることであるべきだと言います。ミニマルな UIデザイン というのは、視覚的な階層を持つだけでなく、ユーザーの注意を促し、情報過多を抑える色、フォント、比率を使用することによって実現されます。これは特に、間隔を空けたり、画像やアニメーションを慎重に選択することで実現できます。

また、彼女は、人は親しみやすさを好むとも言っています。繰り返しのパターンや要素を使えば、次にどうすればいいかわかってもらえるので安心です。その結果、それが製品の使いやすさにつながり、人々の暮らしの中での役割に安心感を与えるのです。専門家による詳しいアドバイスは、「良い UIデザイン 」のページをご覧ください。

ユーザーインターフェイスのモックアップを速く作成するためのベストプラクティス

1. スケッチする

時間 – 時間はいくらあっても足りないものですから、失敗する運命にある（あるいはとにかく全く実行不可能な）コンセプトをデジタルで練り上げることで時間を無駄にしたくありません。スケッチは、より迅速かつ低コストで、UIのモックアップを素早く作成するのにピッタリです。ペンと紙を手に取るだけですから。とはいえ、低忠実度であり、完成品のように見えたり、感じたり、機能したりしないかもしれません。しかし、あなたのビジョンと、それにどうアプローチするのがベストなのか、チームに明確なアイデアが与えられます。

2. まずはモバイルから

小さく始める – この場合、画面のことです。モバイルはオーディエンスの大部分を占める場所であり、ビジネスの観点からも理にかなっていますが、モバイルファーストのアプローチは、モックアップ、プロトタイプ、ワイヤーフレームなど、デザインの観点からも実用的な利点ももたらします。

モバイルから作成すると、スペースが限られているため、最も重要なコンテンツのみを載せることができます。そうすれば、大画面に対応するためにコンテンツを削ったり、後戻りしたり、デザインを複雑にしたりすることなく、簡単にスケールアップすることができます。

3. グリッドシステム

グリッドシステムは、人生におけるあらゆる最高のもののように、依然として多少の異論があります。しかし、近年その人気が高まっていることは否定できず、効率的で一貫性のあるモックアップを作る必要があるデザイナーにとっては、これは欠かせないツールとなっています。グリッドを使えば、カオスになりそうなものに順序を与えることができ、整理されたグリッドシステムで、コンテンツの最適な間隔、サイズ、階層を決定しやすくなります。横型のグリッドが最も一般的ですが、文字デザインのコンセプトを考えるなら、縦型のグリッドを導入すると便利でしょう。

より速くUIモックアップを作成するための19のベストプラクティスと、Web UIデザインのベストプラクティスに関する電子ブックを読んで、より多くのヒントを掴んでください。

レスポンシブデザインかアダプティブデザインか

レスポンシブデザインとは

レスポンシブデザインは、ユーザーがどんな画面サイズであっても、流体的に適応するデザインです。複数のCSSメディアクエリを使用して、デバイスのディスプレイやサイズを判断し、それに応じてスタイルを変更します。

アダプティブデザインとは

アダプティブデザインは、ブレークポイントに基づいた静的なレイアウトを表示します。つまり、ユーザーが760幅のスクリーンを使っている場合、常に760幅のレイアウトが表示されることになります。ほとんどのアダプティブデザインチームは、以下の6種類のスクリーンサイズに対応するアダプティブデザインを作成しています。

• 320
• 480
• 760
• 960
• 1200
• 1600

レスポンシブデザインとアダプティブデザインの長所と短所

アダプティブデザインを始めるには、より多くの作業が必要です。デザイナーは、少なくとも6つのスクリーンサイズに対応したデザインをする必要がありますが、レスポンシブデザインには複雑な問題があり、適切なメディアクエリを使用しないと表示上の問題が発生する可能性があります。

これは、サイトが完全なデスクトップ体験を提供する場合に最も顕著です。私達もこれには参りました。運良くサイトが読み込まれたとしても、その速度はびっくりするほど遅いのです。メディアクエリの導入は有効ですが、レスポンシブWebサイトは、モバイルの画面サイズに特化してデザインされたWebサイトに比べ、決して速くはありません。

アダプティブで行く場合、UXPinのようなUIツールを選ぶと、複数のブレークポイントを導入して、デバイス間で画面上の一貫性を維持することができます。無料トライアルで、この簡単さを実感してください。

アダプティブデザインとレスポンシブデザインはどちらが優れているのか？

そんな中、何がデザイナーにとってベストチョイスなのでしょうか？

デザインの選択は、ユーザーから始まります。あなたのユーザーは誰ですか？どのデバイスを使っていますか？答えられますか？それを知ることで、ユーザーのニーズを満たすデザインが簡単にできます。例えばユーザーの多くが960の画面でサイトにアクセスしていたら、どの画面幅を優先してコンテンツを最適化すればよいかがわかりますね。

また、既存のサイトがあるかどうかによっても判断が変わってきます。デザインの世界では、レスポンシブデザインが主流となっており、モバイル専用サイトとほぼ同等の導入率で、約1/8のサイトがレスポンシブデザインを採用しています。

しかし、人気があるからといって必ずしもそれが良いとは限りません。ある巧妙なテストでは、既成概念に囚われないようなレスポンシブデザインが、サイトのロード時間に重大な影響を与えることが示されました。つまり、厳密な最適化が絶対に必要なのです。アダプティブデザインは、より多くの投資が必要ですが、ユーザーが見るべきものだけを正確に読み込むことができるということから、モバイルファーストの運用では一般的に優れた選択肢となります。レスポンシブデザインとアダプティブデザインの比較で、あなたにぴったりのデザインを見つけてください：レスポンシブデザイン対アダプティブデザイン：デザイナーにとってのベストチョイスは？

さて、UIデザインとレスポンシブの原則を利用して、ユーザーが使用する際のプロセスを効率的に作り上げる方法について、かなり明確に理解することができたと思います。それでは、モバイルとランディングページのUIを完璧にする方法について、より詳しく見ていきましょう。

モバイルUIを極める

モバイルアプリデザインとは？

モバイルUIとは、モバイル画面上に表示されるすべてのものを指します。ユーザーがそれを見たり、タップしたり、スワイプしたり、何かできるのであれば、それはモバイルユーザーインターフェースに含まれます。

全世界で稼働しているモバイル端末の数は約170億台。米国では3億人以上のスマートフォンユーザーがおり、年間3,300億ドル以上の利用があります。これは無視できない巨大市場であり、競争の激しい（あえて言えば熾烈な）デジタル空間では、正しい印象を与えることが重要です。

モバイルデザインに課題がないわけではありません。画面が小さく、タッチ操作に対応するため、モバイルでのインターフェースデザインの原則は、従来のデスクトップデザインとは異なります。

モバイルインターフェースデザインのコツ

1. 明確なビジョンを提示する

すべてのプロジェクトは、ビジョンから始まるべきです。チームと主要なステークホルダーに伝える明確な目標なので、具体的で、可能であれば図などの視覚的な補助を使用しましょう。

プロジェクトに携わる全員が、あなたのビジョンとそれを実現するために何が必要かを理解してから、ミーティングを終えなければいけません。この段階で、例えば、ブランドカラーや開発ツールとの相性はどうか等、最終的な製品に影響を与える可能性のある要素をすべて洗い出してください。

このようにプロジェクトをスタートさせることで、デザイン・開発プロセスが効率化されますが、最終的な目標は、複数の部署を経由して、再生ごとにどんどん機能が追加されていくというようなわけではありません。

2. デザインを繰り返す

「プログレッシブ・エンハンスメント」とは、デザインを完璧な状態にまで継続的に磨き上げる方法と解釈されます。

製品を作るには、ビジネスに必要なあらゆるリソースが必要です（そうでないのありますが）。それよりも、デベロッパーがモジュールを徐々に開発するのと同じように、アイデアを忠実度の高いプロトタイプに仕上げていくことを繰り返したいものです。小さく始めて、何がうまくいくか（そして何がうまくいかないか）を確認し、最初のビジョンに本当にマッチした製品を作るのは、ずっと簡単なことなのです。

UXPinのMergeのようなUIデザインソフトウェアには、効率的なプログレッシブエンハンスメントを実現する素晴らしい方法があります。延々とやり取りをしたり、毎回要素をデザインし直したりする必要はもうありません。完全にインタラクティブな「ライブコード」コンポーネントを使用することで、デザイナーは、最終製品の外観、感触、機能を正確に再現したデザインを作成できます。

3.一定であり続ける

モバイルインターフェースには、一貫したデザインが必要です。少なくとも、私たちの脳はコンピュータの前に座っているときに切り替わるので、モバイルデザインの一貫性は、デスクトップデザインよりも重要であるとさえ言えるでしょう。

ボタン、アイコン、色を統一しましょう。主要なアクションの配置も一定にしましょう。テレビを見ながらスマホをスクロールしているとき、親指で何をタップしているかは考えたくないですもんね。そこは考えずに直感的であるべきです。モバイルUIについてもっと知る。

UIランディングページのUIを理解する

ユーザーフレンドリーなランディングページのUIを作るには

• 感情のトリガー

ブランドの色、トーン、イメージは、あなたのビジネスの個性の核となる部分です。これは、あなたそのものです。スタートアップ企業であれベテラン企業であれ、これらはすべてユーザーにとって意味を持つものであり、ランディングページに反映されるべきものなのです。

デザインの最も早い段階で、以下を決めましょう

• 伝えるべきメッセージ
• 伝えるべき感情
• 提示すべき個性

その答えがデザインの形になりますから。

例えば、あなたがオンライン瞑想のサービスを提供しているとします。あなたのランディングページには、落ち着いた色合い、落ち着いたトーン、呼吸するスペースが十分にある軽いデザインが必要になります。

色彩心理のパワーも忘れないでください。Canvaによると、『消費者の85％が、特定の商品を選ぶ際の最大の動機は色だと考えており、92％が視覚的な外観を全体的に最も説得力のあるマーケティング要因として認めている』とのことです。

• 画像を使用する

ユーザーの注目を集めたいとき、画像は非常に大きな力を発揮します。私たちは画像に惹かれます。これは私たちのDNAの一部です。動く乗り物や人の顔は、特に目を引く（そして離さない）のに有効です。実際、ユーザーは写真に写っている人の視線を自然に追うようになります。

ランディングページのデザインで、ユーザーをどこかに誘導したり、アクションを起こさせたりするために、これらのトリックを使います。ただし、画像の配置がページの構成的な流れを壊さないように注意してください。

• A/Bテストの実施

A/Bテストは、ランディングページの使いやすさを評価するのに最適な方法の1つです。このテストでは、例えばCTA（コールトゥアクション）のコピーを変えた2つのバージョンのページを作成します。半分のユーザーにはページAを、残りの半分にはページBを表示します。

勝者が決まれば、とどまるところを知らないランディングページができるまでA/Bテストを繰り返し、デザインを改良していきます。さらにユーザーテストを行うには、他のUIデザイナーや一般ユーザーからなるフォーカスグループでデザインを確認します。

ランディングページのUIに関するガイドをご覧ください。

Choosing Your UI Design Software

ベストUIデザインツールの機能

1. 画像ベースかコードベースか

ソフトウェアを選ぶとき、画像ベースのツールに出会うことが多いのではないでしょうか。デザイナーが迅速にインターフェースのモックアップを作成できるため、デザインの世界ではかなり一般的です。これは、ノートと鉛筆に相当するもので、頭の中から出てきた最初のアイデアをスクリーンに映し出すのにピッタリのソフトウェアです。

ただし、それ以上のことはできないのです。扱うのはイメージであって、機能的な要素ではないのです。見た目が素晴らしいだけで、具体的な製品に発展させるには、あまりに不十分なのです

コードベースのUIソフトウェアは、画像ベースのツールのように甘いデザインを作成することができますが、デベロッパーが使うのと同じコードから作られたUIコンポーネントを使用します。デザインは最初から最後まで一貫しており、デザインおよび開発プロセスがしやすくなることで、デプロイメントがより早く行えるようになります。

2. 機能的忠実度

デベロッパーとの引き継ぎがうまくいってないんですか？「でも、こんな感じじゃないとダメなんです…」と説明するのにうんざりしていませんか？自分がイメージしていたものと少ししか似ていない完成品を見て恥ずかしくなったことはありませんか？それは、今まさにデザインの機能的な忠実度を高める時ですよ。

低忠実度のデザインは、外観の感覚を与えるだけです。実現可能であること前提ですが、これではデベロッパーが実用的なモデルに変換することは困難です。

UXPinで作成されたような高忠実度のデザインは、見た目も機能も実物と同じですが、デザインと開発の両方で使用されるコンポーネントを調和させることで、全員が同じ見解を持つことができます。ビジョンも、他のすべても、一貫しています。

3. 一緒に働く

みんな何かしらと繋がっている世の中では、コミュニケーションとコラボレーションがかつてないほどやりやすくなりました。ただ、あなたのUIソフトウエアが奇妙なものにならないように気をつけてください。

ツールは、共同作業、最新情報の共有、プロジェクトに関するチャットなどを、これまで以上にシンプルにすることを目的としているはずです。クラウドベースのデザインツールは、チーム内や部門間のギャップを埋めることができます。UXPinは連携を重視し、チームでリアルタイムに同じデザインに取り組み、共有ライブラリにアクセスし、フィードバックを収集し、リモートでブレーンストーミングセッションを行うことを可能にします。モックアップからハンドオフまで、デザインプロセス全体を1つのオンラインツールで管理することができます。

UIソフトウェアツールの選び方については、こちらのガイドをご覧ください。

2022年のトップUI・UXトレンド

2022年、UX・UIデザインはどうなるでしょう？ユーザーインターフェースデザイン業界のトップトレンドをご覧ください。

1. Lottie Animation

Lottie Animationの人気は衰えることを知りません。ある調査によると、このアニメーション技術の検索数は、過去4年間で2300%も急上昇しています。

Lottie Animationは、オープンソースのJSONベースのツールで、本当にパパッとアニメーションの作成ができます。しかし、これを単なるGIFと勘違いしてはいけません。Lottieはより小さく、より良い画質を備えていますし、サイトに表示する前に、それぞれのデザインを構築してテストすることができ、あなたのデザインをよりよく制御することができます。

近年、UIデザインにアニメーションが復活し、ユーザーの興味を引くことに熱心な企業も多く、Lottieのユーザー層が広がることが予想されます。

2. コードベースツール

デザインチームと開発チームは、いつも意見が一致するわけではありませんよね。デザインはこんな製品が欲しいけど、開発はそれは無理とわかっていたり、、

特にリモートワークの場合、コミュニケーションがうまくいかないことが多いので、こうした問題を解決するのは簡単なことではありません。誰も同じ言語で話していないのです。

そのため、デザインツールはコードベースへと移行しつつあります。製品の外観を正確に表現することしかできない画像ベースのソフトウェアとは異なり、コードベースのUIツールはライブコードコンポーネントを使用します。デザイナーは、デベロッパーが使用するのと同じコードで構築された要素を使用して、インタラクティブで忠実度の高いプロトタイプを自由に作成することができます。つまり、プロトタイプはサイトやアプリと同じように動作し、デベロッパーは各要素がどのように機能するかをすでに熟知していることになります。

3. 音声UI

UIやUXは、視覚的な要素で捉えられがちですが、実は、視覚的な要素が最も重要です。しかし、音声によるユーザーインターフェースを軽視してはいけません。

Google、Amazon、Appleは、いずれもAIを搭載したスマートスピーカーでVUIの主流化に貢献しました。現在では、ほぼすべての最新スマートフォンに音声機能が搭載されています。そして2025年には、スピーチと音声インターフェースの市場は250億ドル近くに達するでしょう。

音声によるデザインは大きな変化であり、新たなチャンス（そしていくつかの課題）をもたらしており、ユーザーは音声UIに慣れ親しみ、快適に使用できるようになってきています。2022年は、製品とのインタラクションのための新しいアプローチを模索する適切な時期なのかもしれません。

UXPinでユーザーインターフェイスをデザインする

インターフェースのデザインは難しいプロセスですが、ユーザーにとって良い体験（ひいてはブランドの成功）を生み出すのには欠かせません。でも聞いてください！このガイドで、UIデザインの旅を始めるのに必要な知識をすべてお伝えしできました！

デザイナーやデベロッパーの製品開発をサポートするツールをお探しなら、ぜひUXPinをチェックしてみてください。

The post 効果的な UIデザイン のための究極のガイド appeared first on Studio by UXPin.

ダッシュボード デザインは、企業向け製品を連想させることが多いですが、ダッシュボードは、SNSアプリやゲーム、そしてモバイルデバイスなど、どこにでもあり、ユーザーにわかりやすいように簡潔に視覚化された、重要な情報が表示されています。

では、ダッシュボードのデザインとプロトタイピング、そして顧客に素晴らしいダッシュボード体験を確実に提供するためのベストプラクティスを見ていきましょう。

UXPinは、ユーザビリティ参画者やステークホルダーから有意義で実用的なフィードバックを得られるような正確なダッシュボードプロトタイプを作成できる、高度なコードベースのデザインツールです。無料トライアルにサインアップして、UXPinを使ったダッシュボードのプロトタイプ作成をぜひすぐに始めてみてください！

ダッシュボードとは

ダッシュボードとは、分析、ステータス、統計、レポートなどの重要な情報の視覚化、管理タスクの完了、設定の微調整をユーザーができるようにするユーザーインターフェースのことです。

携帯電話やデスクトップで設定するユーザーインターフェースはダッシュボードです。WordPressやShopifyなどのCMS（コンテンツ管理システム）を使ったことがあったら、その管理画面のUIはダッシュボードであり、ネット銀行のユーザー・インターフェースもダッシュボードです。

ダッシュボードの種類

ダッシュボードデザインの選択は、ユーザーに提供したい機能や情報によって異なり、ダッシュボードのUIデザインには、4つのタイプがあります：

• 分析型：可視化されたデータを表示
• 運営型：リアルタイムまたは短期間のデータを表示
• 戦略型：長期目標をKPIとステータスで可視化
• 戦術型：ハイレベルなパフォーマンスのモニタリングを表示

タイプ１．分析型ダッシュボードデザイン

製品のデザイナーは、膨大な量のデータを簡素化して表示するのに、分析用ダッシュボードを使い、そのダッシュボードには、データのハイレベルな概要が単一の数値またはグラフ表現で表示されます。

分析型ダッシュボードは通常、過去のデータを参照し、ユーザーが予測や意思決定を行うための傾向を特定できるようにします。例えば、マーケティング担当者は、分析型ダッシュボードを使用して、主要な人口統計、ユーザーの場所、およびトラフィックソースを分析し、マーケティング戦略を作成します。

タイプ２．運営型ダッシュボードデザイン

運営型ダッシュボードでは、リアルタイムまたは短い時間枠のデータが表示され、ユーザーがシステムや運営をモニタリングできるようにします。運営型ダッシュボードのデータは、多くの場合、データソースの変更に伴い、定期的にリアルタイムで変更されます。

運営型ダッシュボードでは、通常、多くのユーザーの視線が最初に集中する上部付近に、運営に必要な情報を表示します。例えば、ロジスティクスマネージャーは、運営型ダッシュボードを使って、倉庫の活動をリアルタイムでモニタリングします。

タイプ３．戦略型ダッシュボードデザイン

戦略的ダッシュボードでは、長期的な目標に向けたKPIに対するパフォーマンスの追跡ができ、このダッシュボードで複雑なデータがまとめられ、ユーザーは強みと弱点の特定ができます。

戦略型ダッシュボードには通常、【目標】、【現在の状況】、【目標達成に必要な予測】が表示され、過去の期間や年度が含まれることもあります。例えば、セールスマネージャーは、戦略型ダッシュボードを使って、売上目標に対するパフォーマンスを表示し、前年、四半期、月、週、日を比較して進捗状況を確認します。

タイプ４．戦術的ダッシュボードデザイン

戦術型ダッシュボードは、戦略型と運営型ダッシュボードのハイブリッドで、ユーザーは「プロジェクトの完了」などの目的に向かって、パフォーマンスのモニタリングができます。

戦術ダッシュボードは、戦略や意思決定の指針として、全体的なパフォーマンスとセグメント化されたパフォーマンスを可視化するためのものです。例えば、プロジェクトのダッシュボードでは、全体的な進捗状況と、チームがまだ完了させなければならないタスクが表示されます。また、戦術ダッシュボードでは、プロジェクトマネージャーがフォローアップできるように、納期遅延や期限間近の問題など、潜在的な問題を指摘することもできます。

ダッシュボードのUIタイプについては、Datapineのこちらの記事で詳細と例をご覧ください。

ダッシュボード デザインの要素

UIデザイナーは、さまざまな種類のデータの表示のために、主要な要素をいくつか使用し、この写実的表現によって、ユーザーは情報の視覚化や比較が簡単にできるのです。

データテーブル

Excelシートのようなものであるデータテーブルは、チャート、ゲージ、パイ、グラフなど、他のUI要素の作成に使用できることから、ダッシュボードのデザインにおいて重要です。テーブルは通常、多くのスペースを占有するため、デザイナーは、ユーザーが可視化の背後にあるデータを分析できる二次的なページに、こういったテーブルを配置します。

棒グラフ

棒グラフは、月次売上高のように時系列のデータ比較に適しており、さまざまな高さを視覚化することで、ユーザーはさまざまなデータポイントをパッと比較することができます。

円グラフ

円グラフは、全体を構成する複数の点におけるデータの分布を視覚化するものであり、ユーザーが自分の支出を視覚化し、どこに最も多く支出したかを確認できるため、支出追跡アプリでよく見られます。

折れ線グラフ

折れ線グラフは、特定の期間におけるパフォーマンスやトレンドの追跡に最も有効であり、線によって、トレンドがどの方向に動いているのかや、１年における月単位などの色々な重要な間隔での変化を簡単に確認することができます。

ゲージ

デザイナーは、進捗状況やステータスの表示にゲージを使用することができます。進捗ゲージに数値を表示することで、ユーザーは2つのビジュアルを見ることができ、より分かりやすくなります。

また、特定のシステムをモニタリングする際にも、ゲージを用いたステータスの表示ができます。例えば、倉庫管理システムで、包装担当者の1日の目標達成に向けた現在のパフォーマンスを、【不十分】【平均以下】【許容範囲】【最適】で表示することができ、インジケータが許容範囲を下回ると、マネージャーはパフォーマンスの問題を調査し、対処することができます。

メトリクスや数字

デザイナーは、例えば現在の収益を表す数値など、主要な値の表示や、視覚化のサポートのためにメトリクスを使用できます。

メトリクスは、ユーザーが情報をより簡単に理解することや、認知的負荷の軽減といった目的において、単独の使用が最も効果的です。

ダッシュボード デザインのプロセス

The Data SchoolのeBookにある「Dashboard Prototyping and Feedback」では、ダッシュボードデザインとプロトタイピング戦略の概要を４つのステップで説明していますが、筆者たちはこれを、以下のような包括的な6ステップのエンドツーエンドのダッシュボードデザインプロセスを含めるべく、若干手を加えました：

1. レビュー
2. スケッチ
3. フィードバック
4. プロトタイプ
5. テスト
6. ハンドオフ

ステップ１．レビュー

最初のステップは、ダッシュボードの目標と要件を確定するために調査を見直すところであり、デザイナーは、デザインの構成と優先順位を決めるのに、ユーザーのニーズと利用可能なデータを一致させなければいけません。

ここでスケッチを開始するために必要なUIと要素のリストを作成しましょう。この要素を重要度順に並べると、ダッシュボードのUIに優先順位をつけやすくなります。

ステップ２．スケッチ

ダッシュボードのデザインは、複雑で時間のかかる作業であることから、デザイナーは、忠実度の高いモックアップやプロトタイピングに取りかかる前に、アイデアのスケッチや改良が欠かせません。

デザイナーはスケッチを使って、データをどのように表現するのが最適かを判断します。1つのUIに複数のグラフィックがある場合は、1ページにまとめる前に、それぞれを切り離してスケッチしましょう。

また、 Data SchoolのeBookでは、スケッチする際に以下の2つを考えることを推奨しています：

• ユーザーはどのような判断が必要か
• その判断のために、ユーザーは何を知る必要があるか

​​ダッシュボードは、他の多くのUIレイアウトよりも色々とたくさんあるので、データは最小限にとどめましょう。重要なデータがたくさんある場合は、情報を分類して2ページ以上に分けることを検討しましょう。

ステップ３．フィードバック

デザイナーがデジタルモックアップやプロトタイプを作成する前に、チームメンバーやステークホルダーからのフィードバックは欠かせません。このフィードバックで、時間のかかるデジタル処理に入る前に、デザインを改善し、問題を解決できるのです。

次のステップに進む前に、何度かイテレーションがあることを頭に入れておきましょう。

ステップ４．プロトタイプ

ペーパープロトタイプやメモを使い、ワイヤーフレームやデジタルモックアップ、プロトタイプを作成しましょう。ゼロから始める必要がないように、コンポーネントライブラリやUIキットの使用をお勧めします。

UXPinには、Material Design UI、Bootstrap、Foundationなど、ダッシュボードのプロトタイプに最適なライブラリである内蔵デザインライブラリがあります。

また、Mergeを使ってデザインシステムやコンポーネントライブラリをUXPinに同期させることもできます。デザイナーは、画像ベースのデザインツールでは不可能な、完全に機能するグラフやチャートを構築できるため、Mergeテクノロジーを採用したUXPinは、ダッシュボードのプロトタイピングに最適です。

ステップ５．テスト

プロトタイピングとテストは、繰り返し行われるプロセスであり、UXデザイナーは、確実にユーザビリティの問題が最終製品に影響しないよう、プロトタイプを総合的にテストする必要があります。

ユーザーのニーズを満たしながらビジネス価値を最大化するデザインを確実に行うのに、エンドユーザーや主要なステークホルダーからのフィードバックは重要です。

ステップ６．ハンドオフ

ダッシュボードのデザインハンドオフは複雑で厄介なものです。このデザインハンドオフチェックリストに従って、プロセスを合理化し、デザイナーとエンジニア間の連携を向上させることをお勧めします。

ダッシュボードデザインのベストプラクティス

コンテンツの優先順位

調査段階で、どのデータが最も重要かをユーザーに尋ね、デザインプロセスの指針とすることが重要です。データを【ミッションクリティカル】と【セカンダリ】に分けることで、コンテンツの優先順位や配置を把握するようにしましょう。

シンプルイズベスト

ダッシュボードのレイアウトを可能な限りスッキリまとめることを常に意識しましょう。ダッシュボードのUIは色々とたくさんあるので、認知負荷とユーザビリティに深刻な影響を与えかねません。

モバイル優先のデザイン

ダッシュボードをデスクトップで美しく見せるのは簡単ですが、本当の課題は、モバイルフレンドリーなダッシュボードの作成です。モバイル優先のダッシュボードデザインの戦略を取ることで、以下の2つの問題を解決することができます：

• モバイルユーザーからのダッシュボードへのアクセスができるようにする
• UI要素の軽減

一貫性を保つ

どのようなUIでも一貫性は重要ですが、複雑なダッシュボードのデザインでは、一貫性は不可欠です！デザインシステムを使えば、タイポグラフィー、色、スペーシング、レイアウト、その他のUI要素をデザイン全体で一貫性を保つことができます。

余白は倍取る

デザイナーであるタラス・バクセビッチ氏は、「10 Rules for Better Dashboard Design」の中で、コンテンツを区切るのに、余白を倍取ることや空白を使うことを推奨しています。コンテンツが余白に触れたり、近すぎたりすると、読みづらいですからね。

スクロールしない！

また、彼はダッシュボードをスクロール可能にすることが最大のデザインミスの1つであると述べています。できるだけ要約し、新しい画面に移動させるか、タブを作成してユーザーがコンテンツを切り替えられるようにしましょう。

柔軟性を持つ

組織や個々のプロジェクト内でも、ユーザーのニーズや優先順位はさまざまであることから、一律のダッシュボードのレイアウトを作ることは無理です。

ユーザーが自分のニーズに合わせてダッシュボードをアレンジできる機能を提供することで、「これひとつで全部できます」という課題を解決しながら、ポジティブなユーザーエクスペリエンスを実現します。

UXPin Mergeを使ったダッシュボードのデザインとプロトタイプの作成

UXPin Mergeは、ダッシュボードのプロトタイピングとテストを正確に行うことができる唯一のデザインツールです。静的なデザインを使用する代わりに、デザイナーは最終製品のような外観と機能を持つコードコンポーネントを使用して、ダッシュボードのプロトタイプを構築することができます。

MUI ライブラリ統合から React コンポーネントを使用して、一行のコードも書くことなく Merge ダッシュボードを構築してみましょう！MUI コンポーネントをドラッグ＆ドロップするだけで、完全に機能するダッシュボードやその他のユーザー インターフェイスの構築ができます。

無料トライアルにサインアップして、UXPinの高度なコードベースデザイン機能をぜひお試しください！

The post ダッシュボード のプロトタイプを作成する方法 appeared first on Studio by UXPin.

このレスポンシブWebデザインガイドは、複数のビューポート幅に対応するデザインのプロセスを段階的に説明するものです。このプロセスをUXワークフローに組み込むことで、デザインチームがユーザーインターフェースをデザインする際に、さまざまな画面幅を考慮することが可能になります。

UXPinでデザインする場合、ウェブ、iOS、Android、カスタムキャンバスの各サイズから選択できます。無料トライアルにサインアップして、UXPinを使った色々なデバイス向けのデザインがいかに簡単であるかをご確認ください。

レスポンシブデザイン とは

レスポンシブデザインとは、複数のビューポートに対応するユーザーインターフェースをデザインするプロセスです。使用するデバイスに関係なく、一貫したユーザーエクスペリエンスの提供を目的としています。

従来、レスポンシブWebデザインは、携帯電話、タブレット、デスクトップという3つの主要スクリーンを考慮していましたが、現在ではスマートウォッチ、テレビ、車のダッシュボード、冷蔵庫など、デザイナーが手掛けるスクリーンやデバイスの数は増えています。また、製品によっては音声も含まれるため、デザインチームはVUI（音声ユーザーインターフェース）も取り入れなければなりません。

ステップ1： レスポンシブデザイン の理解

デザイナーは、レスポンシブUIのデザインを始める前に、レスポンシブデザインと、デベロッパーが製品に用いる技術の理解が必要です。

例えば、エンジニアはCSS（カスケーディングスタイルシート）を使ってユーザーの画面サイズに応じた画像を提供することもできますし、自動的に最適化するツールを使うこともできます。前者の場合、デザイナーは複数の画面サイズに対応したアセットを用意しなければなりませんが、後者の場合は1つで済みます。

そのため、デザイナーはプロジェクト始動前にエンジニアと相談し、以下のような質問をして、技術的な要求や制約を理解しておく必要があります：

• 製品はレスポンシブグリッドかフルードグリッドを採用していますか？
• 製品のブレイクポイントは？
• オペレーティングシステム（Apple iOS、Android、Windows）は、製品のレイアウトに影響を与えますか？
• エンジニアはどのように画像のスケーリングや配信をしていますか？
• エンジニアが使用する動画や画像、アイコンなどのメディアはどのような形式ですか？
• 製品はどのようなグリッドシステムを採用していますか？
• 製品にFlexboxや通常のCSSが使われていますか？

レスポンシブ グリッドとフルードグリッド

レスポンシブグリッドは、ピクセルを使用した標準の12列グリッドシステムを使ってサイズ設定します。ピクセルの使用というのは、エンジニアがCSSメディアクエリでのみ変更されるコンポーネントまたはコンテナのサイズを設定するということです。フルードグリッドは、パーセンテージを使用し、利用可能なスペースに応じてUI要素のサイズを変更することができます。

ステップ2：ブレークポイントの確定

例えば複雑な機能の中には、モバイル版とデスクトップ版のアプリケーションでできることが制限されるものがあるように、ブレークポイントをリストアップすることで、デザイナーは、各デバイスに対応した情報アーキテクチャ、レイアウト、機能を計画することができます。

最も一般的なブレークポイントは以下の通りです：

• デスクトップパソコン – 最大幅: 1200px
• ノートパソコン – 最大幅: 991px
• タブレット – 最小幅: 768px, 最大幅: 990px
• スマートフォン – 最大幅: 500px

例えば、iPhone 13は390ピクセル×844ピクセルで、横長と縦長では幅が2倍以上違うといったように、デザイナーは、画面の向きやランドスケープレイアウトでのデザインの調整についても考慮が必要です。

ステップ3：コンテンツ優先のアプローチ

コンテンツを中心にレイアウトをデザインすることで、直感的で操作しやすいUIを構築でき、コンテンツの階層を確定することで、ブレークポイントに応じたレイアウトの整理が可能になります。

デザイナーは、ユーザーにやって欲しいアクションに関連する階層の考慮が必要です。例えば、ブログフィードの目的は、ユーザーに記事の一覧を表示し、興味のあるものをクリックしてもらうことであり、そのためには、記事のクリックを促す画像と見出しが最も重要な要素となります。

デスクトップフィードでは、記事の抜粋、公開日、著者、カテゴリータグなど、より多くの情報を含めるためのスペースがあり、ユーザー調査やインタビューは、ユーザーにとって何が最も重要であるかに応じて、レスポンシブデザインを導くことができます。

ステップ4：モバイル優先のデザイン

モバイル優先のデザインは、最小のスクリーンサイズから始めて、拡大していくプロセスですが、このデザイン戦略には、主に2つの利点があります：

1. 小さな画面という制約の中で、デザイナーは最も重要な機能とUIコンポーネントのみを搭載することを余儀なくされます。不要な機能を削減することで、コストと市場投入までの時間が短縮されます。
2. モバイルレイアウト（小画面）を大画面に変換する方が、その逆よりも速くて簡単です。デスクトップ優先のデザインは、しばしばモバイル版へのスケールダウンのために妥協やデザインの変更を余儀なくされます。

モバイルファーストのアプローチは、ウェブデザインにおいてもビジネス的な意味を持ちます。例えば、Googleはモバイルフレンドリーなコンテンツを優先します。つまり、レスポンシブデザインはSEOに有利で、上位に表示され、より多くのクリックを生み出す可能性があります。

ステップ5: コンテンツの優先順位付け

モバイル優先とコンテンツ優先のアプローチの一環として、小さなデバイスで常に見えるコンテンツを優先し、ナビゲーションの引き出し、ドロップダウンメニュー、アコーディオンの後ろに隠すべきものを選択します。

例えば、デスクトップのレイアウトでは、デザイナーはFAQセクションの質問と回答をユーザーに表示することがよくありますが、このようなレイアウトでは、モバイル端末でユーザーが目的のものを見つける場合、すべてのQ&Aをスクロールしなければならないことになります。その代わりに、小さな画面に質問を表示し、答えをアコーディオンの後ろに隠すことで、モバイルユーザーのスクロールを減らすことができます。

ステップ6： レスポンシブ な画像と動画

プロジェクト始動時にメディアフォーマットを決めておくと、後々のデザイナーの手直しを省くことができます。例えば、デザイナーはアイコンにPNGを使うかもしれませんが、エンジニアはレスポンシブレイアウトに対応しやすく、パフォーマンスも高いSVGを使うかもしれません。

複雑なレスポンシブデザインでは、デバイスやビューポートに応じて異なるメディアを提供するのに、複数のサイズとフォーマットが必要になる場合があります。これらのフォーマットについて最初から合意しておくことで、デザイナーはプロトタイプを正しくテストし、よりスムーズなデザインのハンドオフのためのアセットの準備ができます。

ステップ7： レスポンシブ ・タイポグラフィ

タイポグラフィは、ブランド/アイデンティティ、読みやすさ、音声、読みやすさに影響を与える重要なデザイン要素です。デザイナーは何時間も何日も、あるいは何週間もかけて熟慮を重ね、複数のデバイスに対応する書体を選択します。

A guide to responsive typographyでは、UXデザイナーのオーガスティン・トーマス氏が、レスポンシブ・タイポグラフィーのためにデザイナーが考慮しなければならないことを、以下のように挙げています：

• 正しいタイポグラフィの選択
• タイポグラフィーのスケールの選択
• アライメントとスペーシング

画像、ビデオ、グラフィックなど、プロジェクトのコンテンツは、上の3要素に大きな影響を与えることから、正確な結果を得るには、ダミーテキストを避け、必ず実際のコンテンツで書体の組み合わせをテストしてください。

ステップ8：レスポンシブ デザイン・パフォーマンスの最適化

パフォーマンスはデベロッパーの仕事であることが多いのですが、デザイナーの負担を減らすためにできることがいくつかあります：

システムフォントの使用

iOSではSan Francisco、AndroidではRoboto、WindowsではSegoe UIが使用されています。このデフォルトフォントを使用することで、レスポンシブWebサイトやアプリケーションは追加のリクエストの必要がなく、パフォーマンスを向上させることができます。

美しさよりもパフォーマンスを優先する製品の場合は、カスタムフォントの代わりにシステムフォントを使用することを検討してください。すべてのオペレーティングシステムで一貫した結果を得るには、必ずそれぞれのフォントで製品をテストをしてください。

アニメーション

CSSやJavascriptのアニメーションは、パフォーマンスに影響を与え、ユーザーエクスペリエンスに悪影響を与える可能性があります。逆に、エンジニアが機能のロードに数秒を要する場合、デザイナーはアニメーションを使用することができます。この2つの適切なバランスを見つけるには、デザイナーとエンジニアの連携とテストが必要です。

まとめ

RWD（レスポンシブWebデザイン）と最適化は、デザイナーとエンジニアの連携に大きく左右されます。画像ベースのデザインツールを使用すると、デザイナーが正確に応答性をテストするのは不可能になります。

デザイナーは、いくつかのレスポンシブ要素を考慮し、コンテンツ、レイアウト、タイポグラフィー、その他のUI要素が複数のビューポートでどのように相互作用するかの考慮が必要です。

Mergeによる レスポンシブデザイン

レスポンシブデザインの課題のひとつは、画像ベースのデザインツールの静的な性質により、デザイナーが複数のビューポートでUIやコンポーネントを正確にテストできないことです。

ウェブページの正確なテストには、デザイナーにはほとんど知られていないHTML、CSS、Javascriptを使うしかないのです。

UXPin Mergeはコードベースのデザインツールで、デザイナーはエンジニアが使用するのと同じコンポーネントを使用してプロトタイプとテストを行うことができます。また、エンジニアはレスポンシブ・プロパティをプログラムすることができるので、UI要素がプロトタイプでも最終製品と同じように機能します。

UXPin Mergeとは

UXPin Mergeは、製品のコンポーネントライブラリをUXPinのデザインエディタに同期させ、デザイナーが完全に機能するコードコンポーネントを使用してプロトタイプを作成できるようにするものです。

Git または Angular、Ember、Vue、およびその他のフロントエンド フレームワーク用の Storybook 統合を使って、React コンポーネント ライブラリを Merge に直接接続することができます。

Mergeを使用したレスポンシブコンポーネントの作成

Reactコンポーネントライブラリを用いて、エンジニアは、IFrameコンポーネントがレスポンシブプロパティ、メディアクエリ、スタイリングに反応するようにプログラムし、最終製品のコンポーネントと同じレスポンシブ機能を提供することができます。

UXPin Merge を使ってレスポンシブなコンポーネントを構築するためのステップバイステップのチュートリアルをご覧ください。

テストの強化

複数のフレームを使用する代わりに、単一のフレームとコンポーネントを使用して、コードと同じレスポンシブな機能の実現ができます。また、これらのUI要素は、最終製品と同じ忠実度と機能を持ち、デザイナーはユーザビリティテストやステークホルダーからの有意義なフィードバックが得られます。 Merge を使用すれば、デザイナーはコードを書いたり、エンジニアに頼ったりすることなく、コンポーネント ライブラリからきちんと機能する応答性の高い UI 要素を使用してプロトタイプやテストの作成ができます。

デザインハンドオフの効率化

これらのレスポンシブ Merge プロトタイプは、デザインのハンドオフの効率化を実現し、市場投入までの時間が短縮されます。エンジニアは、デザインをレスポンシブ コードに変換するための複数のモックアップやドキュメントの検査が必要なくなり、レポジトリからコンポーネントをコピーして貼り付け、UXPin から JSX の変更を行うだけで、ウェブ開発プロセスを開始することができます。

世界最先端のデザインツールで、レスポンシブプロトタイピングとテストを改善しましょう。無料トライアルにサインアップし、MUI 統合による UXPin Merge をお試しください。

The post レスポンシブデザインガイド – 簡単な8ステップ appeared first on Studio by UXPin.

  友人であるPaypalのアンソニー・ハンド氏に、UXPin Mergeでのプロップの解析でデザイナーの仕事が楽になる方法をシェアして頂けることになりました。

MergeはUXPinの革新的な技術で、デザインツールのコンポーネントライブラリからデベロッパーのUIコンポーネントをインポートして同期できます。コンポーネントは、Storybook 統合または Git レポジトリ経由で持ってくることができ、開発リソースが不足している場合は、Merge コンポネントマネージャーを使って、エンジニアの助けを借りずにコンポーネントのインポートおよび管理ができます。

デザインのプロセスで使うUI 要素がライブ コードであるため、完全にインタラクティブなプロトタイプの、極めて迅速なデザインが可能です。UXPin Merge へのアクセスをリクエストして、より良いデザインプロセスを構築しましょう。

UXPin Mergeでは、チームのニーズに合わせたエクスペリエンスの最適化ができます。これはまさに アンソニー・ハンド氏 が書いていることです。彼がどのようにスマートな解析を使って Merge のエクスペリエンスを彼のチームに合わせて調整したかをご覧ください。

UXPin Merge Controlのためのプロップパーサ

UIのデベロッパーなら誰でも知っているように、ユーザー入力の解析と検証は、科学的であり芸術的です。大抵のユーザーは大抵期待通りの値を入力するかもしれませんが、私たちは常に、エラー処理と同様に、少し優雅なマッサージや微調整の準備を常にしておかなくてはいけません。

私はPayPalのDevOpsチームのシニアUXデザイナーで、手掛けるプロジェクトはすべて社内のウェブベースツールです。2年前、次世代ウェブアプリのためにMicrosoft Fluent UIライブラリに決めた後、UIライブラリをUXPinのMergeテクノロジーを使ってインポートするプロセスに乗り出しました。このプロセスはとても簡単でしたが、少し学習が必要でした。

UXPin Merge で、標準的な構文解析と検証の適用が必要だということを最初に学びました。UXPin のプロパティパネルは、結局のところ、たとえば私たちがいくつか開発した、色や日付のような基本的なユーザー入力のための標準的な解析ユーティリティのような、単なる凝ったユーザー入力フォームにすぎません。

UXPin Merge の準備を進めるにつれ、より複雑な UI コントロールには、基盤となるコントロールに複雑な JSON が必要であることにすぐに気づきましたが、UXPinで技術者でない人に生のJSONを表面化させると、ユーザーの採用率がすぐに低下してしまいます。

JSONは文字列で表現される複雑なデータモデルで、人間ではなくコンピュータのために作られたものです。その結果、プレーンテキストのユーザー入力を収集して、ドロップダウン、ナビゲーションリスト、データテーブルなどの複雑なUIコントロールを構成できる高度な多目的パーサの作成が、私たちの最も重要なイノベーションの一つでした。

基本的な解析

色、日付、数字などの一般的なユーザー入力の検証を処理するために、JavaScriptで基本的なパーサ関数をいくつか作成しました。これは主にUXPinでUIコントロールを簡単に設定するために作成されましたが、こういったユーティリティの一部は、内部で広く使われています。

パーサは文字列 「50」 を整数に変換し、16 進数の色を検証し、必要な # マークを追加して戻します。Merge ラッパーはアイコン名の先頭と末尾の空白を切り落としました。(UXPin Editor と Props Panel のビュー)

詳細：色の解析とフォーマット

Microsoft Fluent UI コントロールは、【#0078d4】（美しい青色）のような 16 進値を必要としますが、私たちは、【themePrimary】など、ユーザーが 16 進値と覚えやすいテーマ・トークンの両方を使用できるようにしたいと思いました。さらに、【success】などのセマンティックトークンと、【white】や【transparent】などの一握りの基本色もサポートしたいと考えました。エラー処理に関しては、入力テキストから空白を取り除き、たとえ#マークで始まらなくても有効な16進数値を受け入れるようにしました。

私たちのカスタムカラーパーサは、ユーザーに大きな自由度を与え、この種の値をすべて受け入れ、UIコントロールでの使用に有効な16進数値か、エラーフラグとして「未確定」のどちらかを返します。

カラーパーサは 【themePrimary】がテーマのカラートークンであるかどうかをチェックし、その 16 進値を取り出してアイコンオブジェクトで使用しました。

同様に、カラーパーサは特別なセマンティックカラートークンである【success】を調べ、同様に16進数に変換しました。【success 】は任意の16進数値よりも覚えやすいのです。

複雑な解析

前述のように、メニュー、ナビ、ドロップダウンなど、基盤となるUIコントロールの多くは、設定に複雑なJSONを使用していますが、JSONは人間にとって読みづらく、壊れやすいものです。そこで私たちは、JSONの代わりに、人間が使いやすい革新的な構文を考案しました。平文に加え、私たちが開発した構文トークンには、以下のようなものがあります：

• icon(Icon_Name|色): マイクロソフトのアイコンライブラリにある任意のアイコン
• link(表示文字列|URL)
• Dividerまたは–。リストに仕切りの表示
• * : ナビやメニューのようなセクションの子マークを付ける場合
• CSVのパース：テーブルの行や、特定のコントロールで平文にカンマが必要な場合など

注: ほとんどの場合、この特別な構文は、デザイナーや（一般的に）技術者でない人が簡単にプロトタイプを構築できるように、UXPin内で使用するためだけのものです。実際のWebアプリの構築には、デベロッパーがJSONやイベント処理などを使用して、これらのUIコントロールを標準的な方法で設定します。

ケーススタディ：メニューのアイコンとテキスト

UXPinのCommandButtonコントロールにユーザーがポップアップメニュー項目を追加する方法を見てみましょう。この例では、ユーザーが【New】というテキストを含むボタンをクリックすると、さまざまなファイルタイプ、フォルダ、ユーザーなど、ユーザーが追加できるオブジェクトの種類のポップアップ リストが表示されます。

UXPin エディタでは、ユーザーはメニューアイテムのプロップをクリックして、大きなテキストエディターを表示します。改良されたパーサは、「File」 のような文字列が通常のメニュー項目であるか、セクションの見出しであるかを判断するために、先読みするようになりました。星印( * )は、「Document」 が子であることを示しますので、「File」 はセクションの見出しである必要があります。icon() トークンの使い方と、区切り文字を示す2つの直感的な方法に注目してください。

この強力で革新的な構文は、リスト形式のビューをサポートする、他の1ダース近くのUIコントロールに再利用されました。プルダウン、コンボボックス、ピボット（タブストリップ）、ナビゲーション、チョイスグループ（ラジオボタン）、グループボタン、スプリットボタン、パンくずリスト、その他多数です。

アイコンや仕切り、グループのサポートはコントロールによって異なりますが、UXPinユーザーがこの基本的なアプローチに慣れると、JSONの知識がなくても、大量のコントロールに同じアプローチを簡単に適用して、豊富でインタラクティブなプロトタイプの作成ができるようになります。

ケーススタディ：データテーブル

ご想像のとおり、社内のWebアプリケーションはデータ集約型で、データ テーブルは極めて一般的です。そのため、この高度な解析エンジンを開発した主な理由の1つは、プロトタイプで現実的な（そして適度に機能する）データテーブルを簡単に作成できるようにすることでした。

それなりに高度な機能を持つ豊富なプロトタイプの作成のためには、私たちのワークフローはExcelから始まります。まず、Excelでビューのモデルを作成し、各セル内で前述のlink()とicon()構文を使用します。そして、そのワークシートをCSVファイルとしてエクスポートします。任意のテキスト エディタを使って CSV ファイルを開き、ヘッダーまたは行のデータのみを UXPin の 「ヘッダー および 行」プロップにそれぞれコピーできます。この合理的なワークフローを、他のプロトタイピングツールのテーブル作成に行っていたことと比べてみてください。

UXPin エディタ の DetailsList の 「行」 プロパティに、カンマ区切りのセル (CSV 形式) と革新的な link() と icon() 構文が表示されます。

デザイナー目線での解析

パーサのソースコードに目を通すと、コードのデザイン上の決定や、（比較的）非効率的なコード、くどいコードについて、何らかの意見をお持ちかもしれません。また、いくつかのエラーにお気づきになるかもしれません。その決定については、私が責任を負います。

私はUXデザイナーであり、プロのプログラマーではないことを心に留めておいてください。さらに重要なのは、私のJavaScriptの知識が限られているため、効率性よりも読みやすさ、モジュール性、メンテナンスのしやすさを重視することを明確に決めたことです。これはオープンソースのコードなので、コードの一部または全部を借りたり、修正を加えたり、アップデートやバグフィックスを提供することは歓迎されます。

UXPin Mergeの最適化について

UXPinのMergeテクノロジーは、どの企業でも開発で使用しているものと全く同じUIコンポーネントライブラリをUXPinにインポートし、チームの誰もが豊富でインタラクティブなプロトタイプを作成できるようにするものです。ユーザーフィードバックやステークホルダーのレビューのためのデザインの、速度の劇的な向上や、デベロッパーのハンドオフの改善ができる強力な技術です。

しかし、うちのチームが学んだように、UXPinで成功するためには、エンドユーザーエクスペリエンスの設定に適度な投資が必要なのです。私たちは、エラーを最小限に抑えながら最大限の力を発揮するスマートな解析によって、UXPinのユーザーエクスペリエンスを最適化するという明確な決定を下しました。

この度、独自のMicrosoft Fluent UIライブラリをオープンソースライブラリに移しました。このライブラリを使用して、チームで色々と試してインスピレーションを得てください。 また、自身のUXPin Mergeプロジェクト用に、パーサを自由にご利用ください！

The post UXPin Merge Controlでのプロパティ解析 appeared first on Studio by UXPin.

MUIは、最も人気のある丈夫なReactコンポーネントライブラリのうちの1つです。デベロッパーは、MUIを使ってReactアプリのユーザーインターフェースをまとめます。また、MUIはプロトタイピングにも便利です。このライブラリを使用すると、デザイナーは、完全にインタラクティブで、ユーザビリティ・テストや引き継ぎに対応できる高忠実度のプロトタイプを、実質サッと簡単に作成することができます。

MUIを使ったプロトタイピングを試してみたい方は、無料トライアルにサインアップすると、MUIキットを14日間使用することができます。ベクター画像の代わりにコードをレンダリングするデザインツールを使って、プロトタイプがどれだけ実際の製品に近いものになるかをご覧ください。

UXPin MergeでMUIを使ったデザインの可能性を目一杯ご体験ください。

この記事では、 MUI 5 コンポーネントの様々なスタイリング法の簡単な概要と、それらのスタイリング法を考慮すべき理由について説明します。

https://t.co/OoMuzMpoMf 🚀MUI is a powerful library with extensive documentation. Check out how easily you can access the documentation in UXPin Merge. 🎉 Request Merge access and use MUI.

Many thanks to @MUI_hq 🙌#uxpinmerge #mui #reactlibrary #FrontEndDevelopment pic.twitter.com/CtAq2Y9bmJ

— UXPin (@uxpin) January 27, 2022

多くのチームが、デザインシステム用の既製のコンポーネントライブラリとしてMUIを使用しています。MUIはオープンソースのライブラリで、大規模なコミュニティによってドキュメント化され、メンテナンスされているので、Reactライブラリを一から構築するためにリソースをムダにする代わりに、それを利用すればいいのです。 MUIコンポーネントはカスタマイズが可能です。

MUI 5 コンポーネント をカスタマイズする方法 – 正しい方法の選択

MUI コンポーネント のカスタマイズについて議論する場合、そのほとんどはどのようにスタイリングされるかに集約されています。このトピックについて深く掘り下げた記事はすでに多数ありますが、ここでは最高のスタイリング法について簡単に説明します。

１）Theme Provider

まずMUIの最初のスタイリング法は、他のコンポーネントをラップするHoC (Highrt order Components)であるThemeProviderでしょう。これは、カスタマイズ・スタイルを注入し、ユーザーがスタイルとプロップを上書きできるようにするものです。 これを利用して、例えばブランド化されたライブラリを構築するために、大抵のコンポーネントで簡単に使えるようなスタイルを作りたいと思うでしょう。チュートリアルではなく、本当にシンプルで簡単なショーケースですので、Buttonコンポーネントをご覧いただき、スタイルを上書きする方法に注目して、ブランド化されたコンポーネントの開発を始めてみましょう。

２）createStyled

MUIカスタマイズの次の方法は、スタイリングされたメソッドです。これはスタイリングされたユーティリティから発展した機能です。この方法は、あまり使わないスタイルを適用する必要がある場合に非常に便利だと思いましたが、再利用できるようにするのに時間をかけるほど重要なものだったのです。 例えば、使用頻度の高いコンポーネントがあるが余白なしやマージンなしなど、特定のスタイルにする必要があるのは25%に過ぎない場合、これらのユースケースでスタイルを有効にするために、対応するプロップを追加します。下の画像は、MenuItem コンポーネントの余白を時折削除する必要がある場合です。

const stylesFromProps = {
 shouldForwardProp: (prop) => prop !== 'disablePadding',
};
const MenuItemM = styled(
 MenuItem,
 stylesFromProps,
)(({ theme, disablePadding = false }) => ({
 ...(disablePadding && {
   padding: 0,
 }),
}));

３）sx={…} Prop

新しくリリースされたMUI 5では、prop sxが導入されました。 これは、テーマとその変数、または考え得るあらゆる有効なCSSにアクセスできる、カスタマイズスタイルをサッと定める方法です。 これは、複数の場所で使用されるコンポーネントがあり、非常に特定のスタイルを持つ必要がある場合、また例えば、以前説明したMenuItemコンポーネントの余白を削除しなければならないという問題のように、1つのケースに対してニッチな問題を修正するのに非常に便利です。

</p>

４）コンポーネント ラッピング

次は、コンポーネントをラップして、スタイルを変更するためのプロップを渡してみる方法です。可能性はありますが、プロップが重複することが多く、全体的に問題があると感じました。

５）スタイリングされてない コンポーネント

MUI コンポーネントをカスタマイズするもう一つの方法は、非常に新しく、まだ完全には実装されていないUnstyled Componentsの使用です。今後数ヶ月のうちに、より多くのコンポーネントをサポートすると言われています。 MUIを使わない理由にもなっているMaterial Designに基づかないコンポーネントライブラリをUnstyled Componentsで作ることができるので、これは素晴らしい解決策になりそうです。CSSの衝突を避けるのに最適なようです。

６）MUI Box Component

最近わかったことなのですが、Boxコンポーネントを使ってスタイルを上書きする方法があります。ドキュメントが継続的に更新されているので、どのように機能するのか、もっと情報が欲しいです。 以上、MUI 5 のコンポーネントをカスタマイズするおすすめの方法をご紹介しました。これらの方法は、多くの可能性を提供し、Unstyled Componentsを使用すると、ユニークなブランドのライブラリを作成することもできます。

MUIをUXPin Mergeと同期する

多くのスタイリング方法を持つMUIを一度試してみてください。それを使ってインターフェイスデザインを作成する準備ができたら、UXPin Mergeでどのようにできやすくなるかをご覧ください。 これは、MUIコンポーネントの完全なインタラクションと機能でデザインし、サードパーティツールでデザインをコードに変換する必要なく、制作段階でそれらのコンポーネントを使用できるようにする画期的なソリューションです。そして、デザインチームと開発チームは、信頼できる唯一の情報源（Single Source of Truth）を共有することができるのです。

The post MUI 5 カスタマイズ 最適なスタイリング法とは？ appeared first on Studio by UXPin.

• ナビゲーションパスの提示
• ユーザーテスト
• 情報アーキテクチャの視覚化
• 利用可能なインターフェース機能の設計
• ブランディングとビジネス目標をデザインで伝える
• 入札中にコンセプトを表現する
• ビジュアルデザイナーと開発者向けのドキュメントの準備

上記の状況でも「クリック可能」、「クリックスルー」、「インタラクティブ」などの用語に悩まされないようにしてください。 これから、このようなキーワードを使って独自のプロトタイプを描く方法を紹介します。 このやり方は早くて簡単、そして何よりも–コーディングスキルが不要です。

これから紹介するコツをUXPinで試してみてください。

インタラクティブなプロトタイプ要素でユーザーインタラクションを設定する

特定の要素をプロトタイプ内の別の要素と相互作用させたい場合は、「インタラクションの設定」という簡単なやり方があります。 たとえば、次のような基本的なインタラクションを備えたフォトティーザーを設計するとします：

a) インタラクション１　ー「クリック時」

ユーザーが要素をクリック（モバイルの場合はタップ）したときに発生します。 では、サクッと簡単にできる方法でやってみましょう。ティーザーをクリックしてその下に画像を表示させたいとします。そうすると、ティーザーと画像の2つの要素が関係しており、それはキャンバスに配置されないといけません。そしたら、 また使いたい時にプロトタイプ全体で簡単に識別できるように、それらに名前をつけておきましょう。

注：グループまたは固有のものに関する何か特徴的な名前を付けましょう。 例えば、ティーザーが数あるティーザーの中の1つになるとわかっている場合、たとえば「ティーザー1」または「ティーザー＃1」と呼ぶことができ、他のティーザー要素と混同することはありません。

要素が固有である場合は、「ピンクフロイドティーザー」のように、同様に固有の名前を付けることができます。 要素にどのように名前を付けたか忘れても心配不要です。　—インタラクションウィンドウで要素にカーソルを合わせると、UXPinによって、プロトタイプのその要素がハイライトされます。

それらをキャンバスに配置したら、次はインタラクションの設定です。 要素をダブルクリックして「ティーザー1」ウィンドウのインタラクションを開き、「インタラクションの編集」ボタンをクリックします。 コンボボックスからセットアップを選択します—「ティーザー1」の「クリック時」に「画像1」を表示するインタラクションの場合、セットアップはこのようになるはずです。

セットアップは　 クリック時| 表示| 写真1　となり、これがトリックを行います:)。

インタラクションを設定すると、要素の右上隅にリンクアイコンが表示されることに注意してください。

では、画像1の要素についてです。 ティーザーをクリックして下の画像が表示されるということは、クリックする前の画像は非表示でなければならないということです。

それではやってみましょう。 この要素を使用して「クリック時」のインタラクションを設定したため、開始時に「画像1」を非表示にするだけで、変更設定ができます。 要素をダブルクリックして、要素の状態を次のように「非表示」に変更するだけです。

プロジェクトに携わってる人達に、「この要素をクリックすると画像が表示されます」と示すのに必要なのはこれだけです。 プレビューボタンを押して、実際の作業を確認してください。

b）インタラクション２ー「マウスオーバー時」

ユーザーが（要素をクリックせずに）要素の上にカーソルを置いたときに発生します。 設定の流れは「クリック時」のインタラクションと同じですが、「クリック時」を「マウスオーバー時」に設定します。 したがって、ユーザーのクリックでティーザーが表示されるのであれば、ユーザーがカーソルを置いたときにもティーザーが表示されるようになります。

では、ここで少し発展させてみましょう。 カーソルがティーザーの上にあるときはツールチップが表示され、ティーザーがクリックされても下の画像を表示したままにしたいとします。 これには新しい要素が必要で、それを「ツールチップ」と呼びましょう。 また、筆者は「クリックして画像を表示」という文字の表示を追加しました。これは要素をダブルクリックしたらできます。

ツールチップを編集しながら、カスタム化されたオプションを全てやってみることができます。 筆者はサイズをカスタマイズし、色を変更して、ツールチップに丸みを帯びた境界線の効果を付けました。

注：要素をキャンバスに配置するには、2通りのやり方があります。要素を引っ張ってきてキャンバスに移動させるか、便利な検索機能を使います。「ctrl+ f」を押して（検索バーが表示されます）、探している要素に関連するキーワードを入力してクリックすると、キャンバスに表示されます。

次は、おそらくご想像のとおり、開始時にこのツールチップを非表示にし、要素「ティーザー1」と「ツールチップ」との「マウスオーバー時」のインタラクションを設定します。 ただ、新しいインタラクションは、ユーザーがツールチップを表示させるのにインタラクションする要素なので、「ティーザー1」のインタラクションウィンドウで設定されるように注意してください。

注：1要素で1インタラクションと制限されているわけではないので、 インタラクティブなプロトタイプでは、さまざまな要素との複数のインタラクションを設定できます。

これで、カーソルがティーザー上にあるときにツールチップが表示され、ユーザーがそれをクリックしたときに画像が表示されるティーザー要素ができました。

3.インタラクティブなプロトタイプのページをリンクする

最後になりましたが重要事項ですー　ページのリンクです。インタラクティブなプロトタイプのどんな要素でも、プロトタイプ内のページであれ外部ページであれ、思いのままにリンクすることができます。 一度試してみると、プロセス全体がわかります。 筆者は「写真1」を「サイト2」という別のサイトに、以下のようにリンクしてみました。 次の簡単な手順でやってみてください。

a) 新しいサイトを設定する

b) リンクする要素（「画像1」）をクリックし、リンクツールをクリックします。 リンクさせる先のサイトを選択すると、インタラクションの準備完了です。

プレビューの左側のメニューバーを使用してページをナビゲートできることにも注意してください。

これで以上です。 もう「クリック可能」や「クリックスルー」、「インタラクティブ」なプロトタイプを作成できます。 これであなたはビジュアルデザイナーと開発者に大絶賛されるはずです:)。

The post インタラクティブなプロトタイプ：コードなしでユーザーインタラクションの設定 appeared first on Studio by UXPin.

エンタープライズ・デザイン思考は、企業が直面する問題である「チームやステークホルダー、エンドユーザー間の断絶」を補うためにIBMによって考案されたものです。IDEOの伝統的なデザイン思考の方法論を取り入れ、企業レベルで特有のプロジェクトの課題に特化しています。IBMのエンタープライズ・デザイン思考の一番の大きなメリットはプロセス全体を通して、人とのつながりを優先できることです。それによって、最終的にデザイナーは、従来の共感する方法では得られなかった、ユニークなユーザーインサイトを得ることができるのです。

企業にとって最大の課題の1つは、人間的なつながりを維持することです。多くの企業は、「これは人とのつながりの問題を解決するのか？」「この製品・機能は需要があるのか？」などと問わなければ、テクノロジーやイノベーションに多大な投資をしてしまうという過ちを犯しています。顧客との接点を失うと、デザイン思考の基本原則である「デザイラビリティ」を満たさないイノベーションを優先してしまうのです。

Appleはこのことを、90年代に発売され、製造中止となったパーソナルアシスタント機器（PDA）、アップル・ニュートンでの体験から痛感したそうです。このPDAは当時としては信じられないほど革新的ではありましたが、「価格が高い」「機能性が優れない」といった理由から、顧客は現在のiPhone 13の4倍ほどの大きさの携帯端末に何の目的も見いだせませんでした。

企業が適切なリサーチやデザイン思考を適用して、製品のプロトタイプやテストを効果的に行うことができなかった例は他にも多くたくさんあります。エンタープライズ・デザイン思考は、人とのつながりの断絶を解決することを目的としており、UX部門を超えた人間中心の考え方を身につけることで、チームが顧客と共感し、現実の問題を解決できるようにします。

部門間でのコラボレーションやユーザビリティテストを向上させる方法のひとつに「適切なデザインツールの導入」があります。UXPinはコードベースのデザインツールで、部署間や関係者間のコミュニケーションとコラボレーションを強化し、デザイン、テスト、イテレーションを迅速に行えるようにするために構築されています。

エンタープライズ・デザイン思考とは？

エンタープライズ・デザイン思考は、従来のデザイン思考モデルを現代の企業に適したものへ再解釈されたフレームワークです。IBMによって開発された、エンタープライズ・デザイン思考は、現代の企業のスピード感とスケールでユーザーの問題を解決するための人間中心型のフレームワークです。

フレームワーク原則

IBMは、エンタープライズ・デザイン思考のフレームワークを導くために、3つの基本原則を使用しています。

1. ユーザーの成果にフォーカス：ユーザーの目標達成を支援することで、ビジネスを推進する。
2. 絶え間ない改革：すべてをプロトタイプとして扱い、常に本質的であり続ける。
3. 多様なエンパワーメントチーム：多様なチームに権限を与え、より速く行動できるようにします。

思考と革新のループ

エンタープライズ・デザイン思考は、デザイン思考プロセスの5段階（共感、定義、アイデア、プロトタイプ、テスト）を、デザインとプロトタイプの反復ループに置き換えたものです。

1. 観察：現実の世界に浸る
2. 反映：集まって内観する
3. 作る：抽象的なアイデアを具体化する

チーム連携

最後に、エンタープライズ・デザイン思考は、スケーラブルなフレームワークを用いて、人間を中心とした共通の目的に向かってチームを調整するものです。

• ヒルズ：ユーザーの有意義な成果を達成するためにチームを調整する
• プレイバック：定期的なフィードバックで連携を保つ
• ユーザーを支援：現実のニーズに忠実であるために、専門家であるユーザーを作業に招待する。

エンタープライズ・デザイン思考は企業にどのように役立つのか？

エンタープライズ・デザイン思考は、企業の2つの重要な課題を解決することを目的としています。：

• デザインプロセスに顧客を招き、アイデアとイノベーションが実際の問題解決に関連するものであることを確認する。
• コラボレーションをデザイン思考プロセスの一部とすることで、チーム、部門、ステークホルダー間のサイロをなくす。

現実の問題を解決するために、ユーザーの成果に焦点を当てる

エンタープライズ・デザイン思考の鍵は、ユーザーの成果と多様なチームによる問題解決に重点を置いています。これは、チームが焦点を当てるべきな成果や目標を作成するために、ユーザーに共感するためのプロブレムステートメントに似た手法である「Hill（ヒル）」から始まります。 チームは3つの要素を用いてHillステートメントを作成します。

• 誰の（Who）：ユーザーペルソナ。誰のためにデザインするのか？このWhoは、人間的なつながりを生み出すために、できるだけ具体的である必要があります。
• 何を（What）：何を解決しようとしているのか？ユーザーのニーズがプロジェクトのゴールになります。
• 驚き（Wow）：あなたのユニークなセールスポイント。あなたの製品は競合他社とどのように違うのか？ 

ヒルにはこの3つの要素が含まれていれば、順番は関係ありません。IBMの例で言うと 「開発者（Who）がIBMとサードパーティのAPI（What）を使ってアプリを構築し実行するのに、30分以上（Wow）かからないこと。」ヒルが定義されたことで、チームは達成すべき明確な目標を持つことができる。このステートメントでは、機能の設計や技術革新よりも、人間の問題を優先しています。その代わり、問題を解決することがイノベーションになります。

ステークホルダーやチームとのコラボレーションを促進する

従来のデザイン思考では、コラボレーションやステークホルダーとの協力を優先して考えていませんでした。IBMのエンタープライズ・デザイン思考では、プレイバックによってステークホルダーを含めて、組織のゴールとユーザーのゴールを一致させます。 大きな組織では、ステークホルダーとプロジェクトチームの足並みが乱れ、摩擦やフラストレーションが生じることは珍しくありません。 プレイバックでは、ステークホルダーがチームメンバーと定期的に会い、全体像に関する話を共有し、プロジェクトのフィードバックを交換することを推奨しています。その目的は、破壊的なサイロを壊し、多くの企業が経験する「チーム、部門、ステークホルダー間」のメンタリティーを排除することです。

現実への共感性を高める

エンタープライズ・デザインでは、宇宙機関、医療機関、政府機関、大規模生産など、高度な技術を持つプロフェッショナルや大規模な組織向けの製品をデザインすることがよくあります。 デザイナーは、このような複雑な労働環境のコンテキストや実体験を持たないため、これらのユーザーに共感することはほとんど不可能であり、結果としてエンドユーザーにとって意味のないデザインソリューションが生み出されてしまうのです。 エンタープライズ・デザイン思考では、スポンサーユーザー（業界の専門家）をデザインループに加えることで、デザイナーは共感するだけでなく、専門知識を持つユーザーから学ぶこともできるのです。目標は、製品の成功に既得権を持つ専門家を見つけることです。その上で、コンセプト考案から最終製品完成までのデザイン全工程に携わることができる人が望ましいでしょう。

IBMとIDEOのデザイン思考手法の比較

IDEOのデザイン思考に本質的な問題はないのですが、IBMは企業独自の課題に対応する方法論を必要としていました。

• 多様なチームコラボレーションによるサイロの打破
• デザインプロセスへのステークホルダーの参加
• デザインソリューションの開発を支援するドメインエキスパートの追加
• 企業レベルのプロジェクトが抱える規模や不明瞭な課題への対応

エンタープライズ・デザイン思考で「デザイン」を広げるには

『Scaling Design Thinking in the Enterprise』では、イルミナのシニアUXディレクターである著者のジュリー・バハーが、3つのステップのプロセスを概説しています。JulieのプロセスはIBMのアプローチと若干異なりますが、基本的なコンセプトは同じで、サイロを壊し、デザイン思考プロセスにステークホルダーと協力をします。

1. コアサポーターを募集する：UXのワークフローを理解し、賛同を得るために、ステークホルダーと協力してデザイン思考を学びます。
2. 組織を変える：公式・非公式なイベントを利用して、デザイン思考を組織全体に拡大します。
3. リーン・スタートアップの実行：デザイン思考の演習で定義した目標をもとに、プロトタイプとテストの反復プロセスを開始します。

上記で説明した「Scaling Design Thinking in the Enterprise（企業におけるデザイン思考の拡大）」は無料のebookで読むことが可能です。

UXPin Mergeを活用したPaypalの事例

1000人を超える開発者と100を超える製品に対して、デザイナーはわずか3人。PayPalの開発者向けツールのUXデザインを担当するErica Riderは、デザインチームの規模を拡大せずにデザインの領域を拡大するという重大な課題を抱えていました。

PayPalが抱えていたデザインプロセスに影響を与える4つの大きな問題

• 一貫性のないUIとデザインシステムの使用
• 迅速なプロトタイピングを妨げる部門間のサイロ化
• 部門間（特にUX、プロダクト、エンジニア）のコミュニケーション不足
• デザインプロセスにおけるステークホルダーの意見やフィードバックの少なさ

イメージベースのデザインツールを使っていくつかのアイデアを試した後、EricaはUXPin Mergeと出会いました。コードベースのデザインツールで、リポジトリからUXPinのデザインエディタにコードコンポーネントを同期させます。 UXの知識やデザインツールの使い方をあまり知らないデザイナーが、これらのコードコンポーネントをドラッグ＆ドロップして、最終製品のような外観と機能を備えた忠実度の高いプロトタイプを作成することができます。 さらには、PayPalの初心者のプロダクトデザイナーは、イメージベースのデザインツールを使用する経験豊富なUXデザイナーよりも8倍速く、これらの完全に機能するプロトタイプを構築しました。

PayPalは、UXPin Mergeによって、エンタープライズ・デザイン思考の方法論に沿った下記のメリットも得ることができました。

• UXチーム、製品チーム、開発チーム間のコラボレーションとコミュニケーションの向上。
• UXPinのコメントを使用して、完全に機能するプロトタイプを操作し、UIに関するフィードバックを提供するステークホルダーの関与が増えます。
• 最終製品を開発するためのコーディングが少なくなり、市場投入までの時間が短縮される。
• デザインチームと開発者が同じデザインシステムコンポーネントを使用し、社内レポにホストされる信頼できる唯一の情報源。
• 完全に機能するプロトタイプと対話できるため、ユーザビリティ参加者から有意義なフィードバックが得られる。

UXPinのコメントを使用して、完全に機能するプロトタイプを操作し、UIに関するフィードバックを提供するステークホルダーの関与が増えます。 それによって最終製品を開発するためのコーディングが少なくなり、市場投入までの時間が短縮されます。 デザインチームと開発者が同じデザインシステムコンポーネントを使用し、社内レポにホストされる信頼できる唯一の情報源。 完全に機能するプロトタイプと対話できるため、ユーザビリティ参加者からの有意義なフィードバックが得ることができます。 PayPal が UXPin Mergeを通して、世界最大の FinTech 企業の 1 つである同社製品の迅速な開発プロセスをどのように実現したかをご覧ください。

まとめ

エンタープライズ・デザイン思考は、IDEOの伝統的なデザイン思考手法を、企業レベルの課題を特有のプロジェクトに対応させるために応用したものです。

企業が経験する「チーム、ステークホルダー、顧客間の断絶」を補うために、IBMのエンタープライズ・デザイン思考の方法論はプロセス全体を通して人とのつながりを優先しています。

その結果、エンドツーエンドのデザイン思考プロセスが生まれ、ステークホルダーがチームと関わり、チームメンバーに目的意識を持たせながら、プロジェクトとビジネス目標を一致させるストーリーを共有することを促します。

特定分野専門家と協力することで、デザイナーは従来の共感する方法論では得られないユニークなユーザーインサイトを得ることができます。 また、企業レベルの成果を得るためには、スピード・コラボレーション・スケーリングに優れた企業レベルのソリューションに導くことができるデザインツールも必要になります。

PayPalの例の通り、UXPin Mergeはデザインと開発間のギャップを上手く埋めるとともに、デザインプロセスでステークホルダーと協力することが可能です。

UXPin Mergeの完全に機能するプロトタイプにより、デザイナーはIBMのエンタープライズ・デザイン思考ループ（観察、反映、作成）に従ってソリューションを反復し、より優れた顧客体験をデザインすることができます。

UXPin Merge の詳細に関してはこちらをご覧ください。

The post エンタープライズ・デザイン思考で「デザイン」を広げるには appeared first on Studio by UXPin.

UXPinは最新テクノロジーであるMergeを通して、Storybookと統合し全てのインタラクションを保ちながら、Storybook上のコンポーネントをUXPinのエディターに取り入れることが可能になりました。これによってデザインと開発のサイロをなくしプロダクト制作チームにとって信頼できる一つの情報源となりました。

Mergeテクノロジーによってサポートされる2つ目の統合（Gitライブラリとの接続も可能）は、デザインと開発の作業間の同等性を維持し、デザイナーが開発者と同じコンポーネントを使用できるようにすることを目的としています。

UXPinとStorybookの統合はデザインツールの市場のなかでも初めての試みであるため、私は１人の開発者として、このトピックに関して開発者ファーストの観点から追求します。Storybookを使用する最初のステップであるUIコードコンポーネントの導入方法などについて詳しく説明します。create-react-app を使ってプロジェクトを作成、Storybook パッケージをインストールしMergeのテクノロジーを取り入れた UXPin アカウントに統合してプロトタイピングを行った際に経験したことを簡単にまとめてみました。

Storybook とは？

その前に、Storybookの機能面や利便性などに関して先にご説明させて頂きます。もし、ご自身がReactやVue、Angularなどのフレームワークを使ってコンポーネントライブラリを含むプロジェクトに取り組み、各コンポーネントをあらゆる状態やプロップの組み合わせで素早く表示しテストをしたい場合にStorybookを活用して行うことができます。

プロジェクトのディレクトリ内部で、メインアプリケーション同士が離れた環境でも、独自のドキュメントと一緒にインタラクティブなコンポーネントライブラリを構築することができます。つまり、オリジナルのコードを変更することなく、コンポーネントの構築プロセスとドキュメントをより効率的で使いやすくすることができるのです。 例えば、いくつかのプロパティとステートを含むコンポーネントで構成されているウェブサイトがあったとします。以下のようなことができることを指します。

1. ユーザー入力
2. バリデーションエラーとメッセージ
3. 追加されるプロモーション

上記の動作などをテストするには、手動でプロップスを作成し、アプリのローカルバージョンをロードする必要があります。実際、これにはかなり手間がかかるため変更を加える際にそれぞれの状態でテストすることはほとんどありません。しかし、Storybook を使えば、ローカルの離れた環境でも各プロップをライブで素早くテストを行うことができます。これによって、作業がさらにスムーズで簡単になります。

Storybook を使ってみて

Storybookを使用する主な目的は、Javascriptフレームワークを利用するプロジェクトに取り組むフロントエンドエンジニアが、コンポーネントライブラリを作成しスタイルを整えることでした。しかし、さらなる使い道や効果があるのです。

• プロジェクトマネージャー – コンポーネントの変更をStorybook上で確認できる、QAにおいての時間効率を向上させる。
• ソフトウェアの開発部門と運用側 – 他のユーザーがコンポーネントの変更を確認するために、ローカル環境を常に最新に保つ必要がなくなる。
• デザイナー – UIコンポーネントデザインと全体のデザインの状況が忠実であることをすばやく確認できる。
• UXPin Mergeユーザー – 公開または非公開のStorybookライブラリをリアルタイムでReactコンポーネントを導入でき、プログラミングの知識がなくても機能的にプロトタイプを作成することができる。

Storybook を導入

プロジェクトにStorybookをインストールする必要があります。パッケージなので、Storybook上のテストでは、npx create-react-appでReactプロジェクトを作成し、yarn sb initでStorybookをインストールしました。Reactを選んだのは、今まで使ってきたこともありドキュメントも充実しているように思えたからですが、その他にもAngular、Vue、Web Components、Emberの方もサポートされているとのことです。 Storybookはインストール後すぐに使えて、完了後はyarn storybookを実行するだけでローカルのStorybookサーバが起動し、ブラウザがローカルホスト、ローカルのStorybookコンポーネントライブラリといくつかのプリインストールされた例が表示されるようになります。

My Component

Storybookは、プラグアンドプレイではないとはいえコンポーネントを統合するために多少の作業をする必要がありますが、非常に簡単ですぐにできます。私はシンタックスの面で少し戸惑いましたが、Storybookのドキュメントがをみたら分かり易かったので、そんなに時間はかかりませんでした。コンポーネントの統合はオール・オア・ナッシングではありません。つまり、コンポーネントを一つずつ追加することができ、統合のトラブルシューティングが容易になります。

これは、私が統合したかった最初のコンポーネントで、いくつかのプロップを取るシンプルなボタンです。

次のステップは、ストーリーファイルを書いて、Storybookに統合することです。

import * as React from 'react'
import PropTypes from 'prop-types';
import ButtonStyles from './ButtonStyles';
 
const MyButton = (props) => (
 <ButtonStyles onClick={props.clicked} {...props}>
   {props.children}
 </ButtonStyles>
);
 
MyButton.propTypes = {
 disabled: PropTypes.bool,
 children: PropTypes.string,
 onClick: PropTypes.func,
 type: PropTypes.oneOf(['primary', 'secondary', 'success', 'error', 'warning']),
 size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl']),
}
 
export default MyButton;

ストーリーのファイルに追加

Storybook のストーリーという機能とは、あるコンポーネントがサポートできるレンダリング状態のことを言います。例えば、警告、エラー、送信のテーマを持つボタンのコンポーネントのように、異なる状態を表すために、それぞれ複数のストーリーを持つことができます。詳しくは、こちらをご覧ください。

複数の引数を持つButtonにはストーリーファイルを追加する必要があります。ストーリーファイルには、Storybookでコンポーネントがレンダリングされる1つまたは複数の状態を表す「ストーリー」が含まれており、引数を追加することでレンダリングされます。各argは、レンダリング時にコンポーネントに与えるプロパティを指定します。同じstoriesファイルに複数のargを定義できるので、各コンポーネントの異なるバリエーションをすべて表示することができます。今回のButtonでは、いくつかのargを示しましたが、すべてのバリエーションをカバーするためには、もっと追加する必要があります。コンポーネントファイルでpropを定義しておけば、ストーリーファイルで引数を定義する必要はありません。

import React from 'react';
import MyButton from '../MyButton';
 
export default {
 component: MyButton,
 title: 'MyButton',
};
 
const Template = (args) => <MyButton {...args} />;
 
export const Primary = Template.bind({});
Primary.args = { children: 'primary', type: 'primary' };
 
export const Warning = Template.bind({});
Warning.args = { children: 'Warning', type: 'warning' };
 
export const XXL = Template.bind({});
XXL.args = { children: 'XXL Primary', size: 'xxl' };
 
export const Stretched = Template.bind({});
Stretched.args = { children: 'Stretched Primary', stretched: 'true' };
 
export const Disabled = Template.bind({});
Disabled.args = { children: 'Disabled Primary', disabled: 'true' };

つまり、簡単に言うと、Storybookにコンポーネントを組み込むには、以下のものが必要になります。

src/components/[COMPONENT].stories.js に、必要な形式でコンポーネントのストーリーを含めます。
コンポーネントを追加した場合は、yarn storybookを実行してサーバーを再起動します。

これは、Storybookがメインアプリの外側から離れた環境にあり、既存のコードには干渉しないことを意味します。追加された機能はすべてストーリーファイルを使用し、元のコード自体は変更されません。また、ストーリーファイルを作成する際に、ストーリーブック固有のライブラリも必要ありません。

ドキュメント作成の自動化

また、ソースコードをもとに基本的なドキュメントを自動的に作成する機能も、Storybookの大きな特徴です。これは、信頼できる唯一の情報源に固執することに非常に役立ち、大きな時間の節約になります。

以下は、MyButtonコンポーネントのドキュメントです。

また、ソースコードにあるすべての引数をリストアップし、コンポーネント様々なバリエーションを確認することができます。それぞれのコードをコピー＆ペーストすることもできます。

Storybook の公開とUXPinとの連携

Storybookにコンポーネントを導入するのにそれほど時間はかからず、ドキュメントもたくさんあるので、実際にはとても簡単にできました。UXPinのMergeテクノロジーを使って、ローカルまたはプライベートでもStorybookをライブラリとしてアプリに統合できるようになったので、私の経験もここに記録していきたいと思います。

そこで、UXPin のこちらのStorybook統合ドキュメントに従って、私のコンポーネントをUXPinエディタに統合することができました。その後、（さらにコンポーネントがあれば）統合されたStorybookコンポーネントライブラリを活用して、リアルタイムのコードがある環境で、すべてのコンポーネントのインタラクションと機能を使用できる状態で、プロトタイプの作成を開始することができました。

まとめ

Storybookにコンポーネントを導入するのは簡単で、多くの利点があります。その上、製品チームのための信頼できる唯一の情報源でもあり、ハンドオフを最小限に抑え、プロジェクト内のすべてのデザインと開発の矛盾を取り除くことができます。試してみたい方は、ぜひお試しください。

The post Storybook にコンポーネントのインストールとUXPinでの活用方法 appeared first on Studio by UXPin.