強固なバックエンド機能と柔軟でスタイリッシュなフロントエンドの両方が必要なWebアプリケーションを開発する場合、Laravel と Tailwind CSS は完璧な組み合わせになります。

Laravel で使える人気のCSSフレームワークやライブラリは他にもいくつかありますが、Tailwind CSSは、ユーティリティ優先型のアプローチや高いカスタマイズ性など、現代の Web 開発に対応する特徴的な機能が備わっているため、他の CSSフレームワークとは一線を画しています。

そこで本記事で、Laravel と Tailwind CSS を一緒に使う方法を見てみましょう。

UXPin Merge でコードバックされた Tailwind UIコンポーネントを生成しませんか。Merge AI プランでは、複雑な Tailwind コンポーネントをプロンプトで生成できます。テーブル、ナビゲーションメニュー、ユーザープロファイルカードが必要でしたら、当社のAI Component Generatorがお手伝いできます。この機能とライブラリを使って、コードをコピーして使えるUIをデザインしましょう。UXPin Merge をぜひ無料でお試しください。

Tailwind CSS が新しい Laravel プロジェクトに最適な理由

Tailwind CSS は、最新のWeb開発手法に対応する特徴的な機能により、他のCSSフレームワークとは一線を画しています。Tailwind CSS が他のフレームワークよりも優れている理由を、プロジェクトの要件に応じて以下にいくつか挙げてみましょう：

• ユーティリティ優先型のアプローチ：Tailwind CSS は、ユーティリティ優先のコンセプトに基づいて構築されている。つまり、HTML に直接適用する低レベルのユーティリティクラスを提供するということであり、このアプローチは、従来のセマンティック CSS ではなく制約とシステムの観点からスタイルを考えることが奨励され、それがより一貫性があり保守しやすいコードベースにつながる。
• 高いカスタマイズ性： Tailwindでは、Bootstrap や Foundation のようなあらかじめ定められたコンポーネントスタイルが付属しているフレームワークとは違い、デベロッパーは、オーバーライドが必要なデフォルトのスタイルに抵抗することなく、カスタムデザインを作成できる。なので、同じテンプレートから作られたとは思えないようなユニークな UI をデザインすることができる。
• レスポンシブデザインをシンプルに： Tailwind だと、モバイル優先の理念により、レスポンシブデザインの構築が非常に簡単になる。md:、lg: などのユーティリティクラスに付加された単純な修飾子を使って、さまざまなスクリーンサイズ上でアプリケーションのスタイルをそれぞれ制御できる。
• JavaScript の依存がない： Tailwindはデフォルトで JavaScript を含まず、純粋にスタイリングに重点を置いている。これは、サイト上で実行される JavaScript を正確に制御したい場合や、インタラクティブな機能のために他のライブラリを使いたい場合に大きな利点となる。
• PurgeCSS の統合： Tailwind は PurgeCSS のようなツールとシームレスに統合されており、本番用に構築する際に使われていない CSS を取り除くことができる。つまり、何千ものユーティリティクラスがあるにもかかわらず、クライアントに送られる最終的な CSS バンドルは非常に速く小さく読み込まれる。
• 速やかなプロトタイプ： ユーティリティ優先型のアプローチにより、マークアップで直接、変更の確認やデザインの反復をサッと行える。これにより、CSS ファイルと HTML を行き来するオーバーヘッドなしに、さまざまなデザインやレイアウトを試すプロセスのスピードが上がる。
• デベロッパーの体験：Tailwind は、要素をスタイル設定する際の認知負荷を軽減できる、一貫性があり覚えやすいユーティリティ クラスのセットを提供する。これにより、開発時間が短縮され、HTML と CSS 間のコンテキストの切り替えが少なくなる。
• 成長するコミュニティとエコシステム： Tailwind CSS のコミュニティは急速に成長しており、完全なデザイン パターンとコンポーネント用の Tailwind UI など、その機能を拡張するプラグインや統合の数が増えている。

Tailwind CSS には多くの利点がありますが、特に従来の CSS やよりセマンティックなフレームワークに慣れている人にとっては、習得が必要であることを考慮することが重要です。なので Tailwind と他のフレームワークのどちらを選択するかは、プロジェクトのニーズ、チームの馴染み具合、Web 開発のワークフローにおける特定の好みによって決められるべきです。

Laravel とTailwind CSSの典型的なユースケース

Tailwind CSSは、その柔軟性、カスタマイズ性、ユーティリティ優先のアプローチにより、幅広い Laravel のプロジェクトにおいて素晴らしい選択肢となります。Tailwind CSS が特に際立つ Laravel プロジェクトのタイプを以下で見ていきましょう：

SPA（シングルページアプリケーション）

Laravel がバックエンド API として機能し、フロントエンドが Vue.js や React、その他の JavaScript フレームワークで処理されるプロジェクトでは、Tailwind CSS がレスポンシブレイアウトとコンポーネントのスタイルをサッと効率的に作成します。デベロッパーは、そのユーティリティ優先のアプローチにより、UIデザインのプロトタイプをサッと作成して反復することができます。

ダッシュボードと管理パネル

Tailwind のユーティリティクラスで、カスタムでレスポンシブなダッシュボードや管理パネルを作成しやすくなります。また、フレームワークの応答性とコンポーネント駆動型の構造は、高度なカスタマイズを必要とする複雑な UI の構築に最適です。

EC プラットフォーム

Tailwind だと、Laravel で構築された EC プラットフォーム向けに、視覚的に魅力的で高度にカスタマイズされたインターフェースを作成することができます。また Tailwind は、多様な商品表示や複雑なフォーム入力、EC サイトでよくあるような様々なレイアウトに対応しています。

ブログとコンテンツの管理システム

Tailwind は、ブログや CMS（コンテンツ管理システム）プラットフォームのスタイル設定に使用できるので、テーマやレイアウトを簡単にカスタマイズできる柔軟性が得られます。また、そのユーティリティクラスで、タイポグラフィやスペーシングなど、コンテンツ主体のサイトにとって重要な要素をサッと調整することができるようになります。

教育系 Web サイト

オンライン学習や講座を扱う Web サイトでは、Tailwind CSSを使うことで、わかりやすく、読みやすく、魅力的なインターフェースをデザインすることができます。特に、レイアウトグリッド、テキストユーティリティ、教育プラットフォームでの UX（ユーザーエクスペリエンス）を向上させるレスポンシブデザインの作成に有効です。

SaaS製品

Laravel をバックエンドとして SaaS（サービスとしてのソフトウェア）製品を構築しているスタートアップや企業は、Tailwind のスケーラブルでメンテナンス可能なスタイリングのアプローチの恩恵を受けることができます。また Tailwind で、ブランドの一貫性を保つのに欠かせない、アプリケーション全体にわたるまとまりのあるルック＆フィールの作成がしやすくなります。

マーケティングの Web サイト

Laravel を使ってマーケティングやポートフォリオの Web サイトを構築する場合、Tailwind CSS のデザインの柔軟性により、デベロッパーはカスタム CSS に大きく依存することなく、目立つクリエイティブでモダンなデザインを実装することができます。

ソーシャルネットワーク

複雑な UI（ユーザーインターフェース）があるソーシャルネットワークのプラットフォームのために、Tailwind CSS で、モーダル、ドロップダウン、タイムライン、フィードレイアウトなどの様々な UIコンポーネントを効果的かつレスポンシブに管理することができます。

Tailwind CSS を Laravel に統合する方法

Laravel プロジェクトを立ち上げ、Tailwind CSS をインストールするという従来の方法もありますが、フロントエンド開発を効率化するツールである UXPin Merge があります。これは Tailwind UI コンポーネントでインターフェースを作成するための UI ビルダーなので、Tailwind と Laravel の統合は、まずは UXPin での UI 探索から始まります。

ステップ1：UXPin で UI デザインを作成する

UXPin にアクセスし、新しいプロジェクトを開始します。Merge AI プラン（または無料おためし）で利用可能な Tailwind UI ライブラリ（再利用可能なコンポーネントの公式 Tailwind CSS ライブラリ）を開きます。そしてプロジェクトに必要なコンポーネントを選択して、プロパティを設定します。ちなみに関連するコンポーネントが見つかない場合は、AI Component Creator を使って、必要なコンポーネントを生成します。

例えば、マーケティングの Web サイトを作るとします。その際、UXPin Merge のおすすめポイントは、Tailwind UIライブラリのカスタム コンポーネントと呼ばれる追加コンポーネントを使って、Tailwind UI ライブラリからコードをコピーして UXPin のエディタに貼り付けることができる点です。

以下がその方法です：

• Tailwind UI から Hero Section に移動する
• 右上のコピーアイコンをクリックしてコードをコピーする
• UXPinのプロトタイプを開く
• カスタムコンポーネントのコードをコピーする
• 別のセクションを選び、上記の手順を繰り返す

これは、コードベースの UI を構築する一番早い方法です。尚、Tailwind UI リソースにないカスタムセクションが必要な場合は、AI Component Creator を使って、プロンプトに基づいて生成してください。使い方は以下の記事で紹介されています： ChatGPT 統合 – UXPinでUIコンポーネントを生成する方法

そして、デザインの一貫性を保つのには、UXPin で Tailwind UI のライブラリの Global Theming を使うといいでしょう。

ステップ2：Laravel プロジェクトのセットアップ

次のステップでは、新しい Laravel プロジェクトをセットアップするか、既存のプロジェクトを開きます。

• PHP、Composer（依存性の管理）、Node.js などの前提条件をnpmでインストールする
• 新しいプロジェクトを始める場合は、Composerを使って Laravelをインストールする
• Visual Studio Code または StackBlitz で Laravelのプロジェクトを開く
• PHP IntelephenseやLaravel Extension Packなど、Laravel 開発用に推奨されるVS Code の拡張機能をインストールする
• .envファイルの設定を調整して、環境を設定する

ステップ3：Tailwind CSS をインストールする

npm経由で Tailwind CSS をインストールし、tailwind.config.jsをセットアップして、Tailwind のディレクティブを含むようにCSSファイルを設定します。また、Tailwind のビルドプロセスがアセットコンパイルパイプラインに統合されるように、Laravel Mixを通して Webpackの設定を調整する必要があります。

つまり、UXPinで作成したUI デザインをプロジェクトに組み込むということになります。コンポーネントからコードをコピーして、自分が作っているものに組み込むといいでしょう。Visual Studio CodeやStackBlitzなどのコードエディターを使うだけです。

そして UXPinのPreview（プレビューモード）を開いて、Inspectタブに切り替えるだけです。コンポーネントをクリックすると、裏にあるコードが表示されます。これをコピーして、Laravelプロジェクトに貼り付けてください。

このステップについては、このウェビナーで取り上げています：

ステップ 4: アプリケーションの提供

「アプリケーションの提供 」とは、Webブラウザからアクセスできるように、ローカルの開発サーバ上で Webアプリケーションを実行するプロセスを指します。これは、ローカルの制御された環境であっても、ライブWebサーバー上で表示および機能するのと同じようにアプリケーションの表示や操作ができるため、開発における重要なステップです。

Laravel アプリケーションを提供する場合、通常は Laravelにある開発サーバーを使います。このサーバーは Artisanコマンドラインツールで起動できます。

Laravel で Tailwind CSSを使う

強力なバックエンド機能とスタイリッシュで適応性の高いフロントエンドの両方が求められる Web アプリケーションに取り組むデベロッパーにとって、Laravel と Tailwind CSS の組み合わせはいい選択肢です。他の CSS フレームワークとは違い、Tailwind CSS には、ユーティリティ優先のアプローチや広範なカスタマイズ性など、現代の Web 開発にとってユニークな利点があります。そして本記事では、Laravel と Tailwind CSS を効果的に統合する方法についても取りあげました。

デザインとコードの力を統合する強力な UI ビルダーである UXPin Merge を使って、コードに基づいた UI をサッと構築することで、事前に構築されたコンポーネント、AI 生成、およびクイックコードコピー機能を使用してアプリのUIデザインを作成しましょう。 UXPin Mergeをぜひ無料でお試しください。

The post Laravel と Tailwind CSS – クイック統合ガイド appeared first on Studio by UXPin.

デザイナーは、ステークホルダーからのフィードバックや正確なユーザーテスト、デザインハンドオフのために、プロトタイプを改善する方法を常に模索しています。

Figma は素晴らしいデザインツールですが、プロトタイプ作成においてデザイナーは外部のツールを使っているというケースも多いのではないでしょうか。

一方UXPinには、UXPin – Copy. Paste. Prototype という Figmaのプラグイン があります。

デザイナーは、Figmaデザインを コピーしUXPinにペーストし、静的な Figmaのモックアップにインタラクティブ性を追加することができます。

今回は、Figmaプラグイン使い方とそのインストール方法を見ていきましょう。

主なポイント：

• UXPin の Figmaプラグインで、静的な Figma デザインを最終製品のように動作するインタラクティブなプロトタイプに変換することができる。
• プラグインの使用は無料だが、Figma へのインストールが必要。
• UXPin で［Command+V（またはControl+V）］をクリックすると、 Figmaデザイン を UXPin に貼り付けることができる。
• UXPinにデザインをコピーしたら、変数、Expression、状態などのインタラクションを追加できる。

静的な Figma のモックアップを、インタラクティブ機能が加わったデザインに変えてみませんか。

デザイナーとデベロッパーの連携を改善し、デザインのハンドオフ を簡単にしていきましょう。無料トライアルにぜひお申し込みください。

Figma とは

Figma は、主にインターフェースのデザインに使われるWebベースのデザインツールです。

Figmaでは同じプロジェクトに複数のデザイナーが同時に取り組むことができ、リアルタイムでの連携とフィードバックが可能です。

その使いやすさとパワフルな機能性、デザインプロセスを効率化することから、デザイナーやデザインチームに広く使われています。

Figmaを使えば、デザイナーは、さまざまな画面をリンクさせて UIデザインにインタラクティブ性を加えることができます。

しかし、これはユーザビリティテストやデザインのハンドオフにおいては最適なソリューションとは言えません。

そこで UXPinの出番です。手戻りや伝達ミスを避けるために、その盲点を補います。

Figma と UXPin の違い

Figma も UXPin も、コラボレーションを促進するデザインツールであり、Figmaはデザイナーに焦点を当て、UXPinはデザインと開発のギャップを埋めようとするものです。

Figmaでは、デザイナーは美しい静的なモックアップをデザインできますが、高度なプロトタイピング機能は十分ではありません。

デザイナーは、インタラクティブなプロトタイプ作成のために、追加のツールを使うか、エンジニアに頼らなければいけません。

対する UXPinはコードによって駆動され、最終製品のエクスペリエンスを正確に再現する忠実度が高く、完全に機能するプロトタイプを作成する機能を提供します。

UXPinを使うと、デザインチームはプロトタイプを作成する際にデザインをコードに変換するために複数のツールを使うことなく、デベロッパーにプロトタイプを渡すことができます。

また、UXPinの魅力的なポイントとしては、MUI、Ant Design、Bootstrap など、最終製品とまったく同じように見えて動作するオープンソースUIコンポーネントを扱う技術があるところです。

これを使えば、デザインとコード間での究極の一貫性が実現されます。UXPin Merge についてさらに読む

UXPinで Figmaのプラグイン を使ってUIをインタラクティブにする

UXPin はエンドツーエンドのデザインツールですが、ワイヤーフレームやモックアップを Figmaでデザインするが好きというデザイナーが多いのではないでしょうか。

そこで、UXPin – Copy. Paste. Prototype という、デザインチームが Figmaデザインを UXPinにエクスポートしてプロトタイプを作成できる Figmaのプラグイン を作成しました。

このガイドでは、Figmaをお使いの方向けに プラグインのインストール方法、UXPinでFigmaのデザインをインタラクティブにする方法、UXPinの高度でインタラクティブなプロトタイピング機能でできることを１つずつご説明します。

注： UXPin – Copy. Paste. Prototype は、Chromeブラウザ、または FigmaからUXPin デスクトップアプリケーションで使用する場合に最適です。

★ここでは、Moood Music App UI Kitsを使用します。これは制作者のFabrxのWebサイトからダウンロードできます。

ステップ１： Figmaプラグイン をインストールする

UXPin – Copy. Paste. Prototype のプラグインは、Figma のコミュニティにあります。［Try it out（試してみる）］をクリックしてインストールしてください。

ステップ２： Figmaデザイン をコピーする

Figma プロジェクトを開き、コピーしたい画面を選択します。その際、一回につき１画面をコピーすることをお勧めします。

フレームを選択するか、コピーしたいコンポーネントの周りにカーソルをドラッグします。

ステップ３：プラグインを有効にする

デザインを右クリックし、［Plugins（プラグイン）］ > ［Saved Plugins（保存したプラグイン）］ > ［UXPin – Copy. Paste. Prototype.］の順で行きます。

ちなみに Figma のデスクトップアプリでは、プラグインが自動的にコピーします。Chrome の場合は、コピー処理を始めるのに［Copy to Clipboard（クリップボードにコピー）］をクリックする必要があります。

それが完了すると、画面の下に「Copied to clipboard（クリップボードにコピーされました）」というメッセージが表示されます。

ステップ４：UXPin に貼り付ける

UXPin でプロジェクトを作成して開きます。

貼り付けのショートカットである［COMMAND+V］を使うか、右クリックの［Paste（貼り付け）＞［Paste Here（ここに貼り付け）］を使います。

必要に応じて、デザインをドラッグして配置します。

画面が複数ある場合は、新しいページを追加して、ステップ２と３を繰り返します。

注：Figmaでは、１つのアートボードまたはビューに複数の画面がありますが、UXPinでは、１ページにつき１画面を使います。

インタラクションやページ遷移を含むプロトタイプを作成すると、このワークフローがより直感的になることがわかるでしょう。

ステップ５: インタラクティビティを追加する

Figmaデザイン をインポートしたら、次は UXPin でインタラクティブなプロトタイプを作成します。

その際、UXPin のプロトタイピング機能を実演するアプリやパターンの例や、このアプリケーションの YouTube ビデオもあるので、ぜひ参考にしてみて下さい。

UXPin のプロトタイピング機能の例を以下で見てみましょう。

デスクトップのカルーセルの例では、アニメーションカルーセルを作成する方法が３つ示されており、１つは自動で、他の２つはクリック/タップのトリガーに依存しています。

UXPin の登録フォームの例では、デザイナーが（UXPinの変数を使って）ユーザーデータを取得し、それを（個別化された確認画面のように）プロトタイプの他の場所で使用する、完全に機能するフォームを作成する方法が示されています。

登録フォームは、ユーザーの入力に反応する動的なエラーメッセージのためにインタラクションと Expression の組み合わせを使います。

このステッパーの例では、標準的な Eコマースの UI パターンである「入力フィールド」と「インタラクティブボタン」の組み合わせ方が示されています。

ユーザーは、［＋］ボタンまたは［-］ボタンを使ってステップアップまたはステップダウンするか、入力フィールドを使ってカスタム金額を入力することができます。

つまり、エンジニアが HTML、CSS、Javascript でできることを 、デザインチームは UXPin でほとんど再現できるということです。

デザイナーは、IFTTT（If This, Then That）を使って API に接続し、画像ベースのデザインツールの機能を超えることができるのです。

ステップ６：プロトタイプをステークホルダーと共有する

デザインプロセスにおいて、ステークホルダーからのフィードバックは非常に重要ですが、画像ベースのプロトタイプは、ステークホルダーがデザインの解釈をめぐって争い、それがデザインチームのアイデアや賛同に悪影響を与えてしまうという問題点があります。

そこで UXPin のプロトタイプだと最終製品のように見えるので、デザインがすべきことについて混乱が生じることはなく、ステークホルダーは、UXPinのプロトタイプでフォームへの入力、購入、プランのアップグレード/ダウングレードなど色々と試すことができます。

また、デザイナーはプレビューと共有機能を使ってブラウザでプロトタイプを共有したり、UXPin Mirror を使ってモバイルアプリケーションを共有することができ、許可された人だけが閲覧できるようにデザインをパスワードで保護することもできます。

UXPin のコメントでは、ステークホルダーはプロトタイプに対するフィードバックを共有できます。

また、ステークホルダーはコメントをチームメンバーに割り当てることができ、チームメンバーはそのコメントを実行して完了したら「解決済み」としてマークすることができます。

そしてこのような無料でチームメンバーやステークホルダーを追加できるので、デザイナー以外のユーザー枠を追加で購入することなく、全員が UXPin で連携できます。

ステップ７：ユーザビリティテストの実施

ステークホルダーのフィードバックと同様に、デザイナーはブラウザでのテストには「Preview（プレビュー）」と「Share（共有）」を、ネイティブアプリのテストには「 UXPin Mirror 」を使うことができます。

また、UXPin の高度なプロトタイプを使うことで、デザインチームはユーザビリティの参加者から有意義で実用的なフィードバックを受け取り、それでより多くの問題と機会を特定することができます。

UXPin は、デザインにコンポーネントベースのアプローチを採用しています。つまり、デザイナーは、画像ベースのデザインツールのようにフレームを複数作成するのではなく、完全にインタラクティブなコンポーネントを作成します。

ステップ８：デザインハンドオフ

UXPinでは、デザインハンドオフがよりスムーズになることで混乱が抑えられます。

プロトタイプには最終製品のような見た目と感触があり、それでエンジニアはトリガー、インタラクション、アニメーション、ユーザー フローを深く理解することができます。

そしてデザイナーは、プロトタイプ、デザインファイル、ドキュメンテーション、アセット、技術仕様などをエンジニアに提供することができます。

最終製品のような機能性と忠実性を備えたプロトタイプだと、説明やドキュメント化の手間が省かれるのです。

また、チームメンバーはUXPinのコメント機能を使って、デザインハンドオフの全体にわたって共同作業を行うことができ、すべてを１ヶ所に保管し、エラーや「欠落」ファイルの発生を最小限に抑えられます。

完全にインタラクティブなプロトタイプの作成

UXPinのコードベースの機能により、デザイナーは Figma、Adobe XD、InVision などの画像ベースのデザインツールでできること以上のことができるようになります。

以下に、プロトタイプをレベルアップしてくれる UXPin 機能を５つご紹介します。

１．状態

多くのデザインツールにはコンポーネントの状態を変更する機能がありますが、アクティブ、ホバー、無効などの基本的なインタラクティブ機能に限られています。

UXPinの状態（state）では、デザイナーは、完全に機能するアコーディオン、マルチレベルのドロップダウンナビゲーション、カルーセルなどの複雑なコンポーネントを作成できます。

２．インタラクション

インタラクションは、プロトタイプやデジタル製品の心臓部であり、インタラクティブ性がなければ、プロトタイプの範囲は大きく制限されてしまいます。

UXPin のインタラクションには、複数のトリガー、アクション、アニメーションが含まれており、ユーザーのエンゲージメントやシステムの変化に反応する没入感のある体験を作り出します。

また、デザイナーは条件付きインタラクションを使って「if-then」や「if-else」条件（Javascriptの関数に似ている）をデザインし、ユーザーが最終的な製品を使って体験するような動的な「コードのような」結果を再現することができます。

３．変数

UXPinには、コードのようにユーザーの入力に反応するフォーム要素が用意されており、デザイナーは、UXPinのVariables（変数）を使ってユーザーの入力内容を取得し、そのデータをプロトタイプの別の場所で使うことができます。

上記のサインアップフォームの例では、プロトタイプはメール入力からデータを取得し、入力されたアドレスにメールが送られたことを伝え、受信トレイをチェックすることで、動的なユーザー情報を持つ典型的なサインアップ確認画面を正確に再現しています。

４．Expression

Expressionで、デザイナーはコードのような機能を使ってプロトタイプの複雑さを高めることができます。

登録フォームに話を戻すと、Expressionを使うことで、メールアドレスとパスワードの入力が特定の基準を満たしていることが確認され、基準を満たしていない場合にエラーメッセージがトリガーされるようになります。

デザイナーがExpressionで使えるデータには、以下のようなものがあります： 

• 数値：一致する数値
• 文字列：二重引用符で囲まれた文字 (例: “Text”)
• 要素の内容：一重引用符で囲まれた要素の内容 (例: ’Box’)
• 関数：サポートされている関数のいずれか (例: length(string))
• ブール値 ：真または偽の値

デザイナーがこういった機能を組み合わせれば、可能性は無限に広がります。

コードによってのみ制約されるため、プロトタイプ機能とデベロッパーの連携が強化されるのです。

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

コードのインポートは、開発コンポーネントを UXPin と同期させる方法であり、生産性や一貫性の向上、エンジニアとの連携をより良いものにしたい方におすすめです。

また、このインポートを使うと、Git、Storybook、npm からコンポーネントを取り込むことができ、プロトタイプ作成からデザインのハンドオフまで、製品デザインプロセスのあらゆる段階をスピーディーに行うことができます。

画像ベースのデザインツールでプロトタイプの範囲を制限せず、UXPinでプロトタイプを改善し、ステークホルダーからのフィードバックとユーザーテストを改善しましょう。

世界最先端のデザインツールで、顧客にふさわしいユーザー体験をデザインしませんか。こちらから無料トライアルにぜひお申し込みください。

The post 【 Figmaのプラグイン 】 デザインをUXPinにコピー&ペースト appeared first on Studio by UXPin.

デザイン ワークフローを次のレベルに引き上げてみませんか？このチュートリアルでは、UXPin Merge の世界を総合的に掘り下げていくことから、React アプリのコンポーネントを UXPin エディタにシームレスに統合して、忠実度の高いプロトタイプを作成できるようになります。

静的なデザインの時代は終わりました。UXPin Merge だと、React コンポーネントを動的にリンクすることができ、それによってプロトタイプが常にコードベースの最新開発と同期していることが保証されます。

本記事で、UXPin Merge の可能性を最大限に引き出す準備をしましょう！

UXPin Merge とは

UXPin Merge は、本番環境に対応したコードで裏付けられたコード化された UI コンポーネントでデザインするためのテクノロジーです。これは、非常に現実的で正確なプロトタイプのためのコードベースのデザインツールである UXPin の一部であり、この技術により、仕様書、JSXコード、その他のアセットをすべて取得してデベロッパーに渡すことができ、製品開発ワークフロー全体を８.６倍速くすることができます。

UXPin Merge のチュートリアル – この技術の使い方

UXPin Merge のテクノロジーはドラッグ＆ドロップの UI ビルダーのように機能します。

UXPin のデザインライブラリからコンポーネントを取り出してキャンバスに配置し、そしてレイアウトの配置とコンポーネントのプロップ設定が終わったら、 リリース可能なReact コード（Tailwindライブラリの場合はCSSコード）を開発環境にコピーする、またはStackBlitzで開きます。

また、UXPinではテンプレートとパターンをいくつか提供しているので、チームのオペレーションを自動化するシンプルなダッシュボードから、フロントエンドをバックエンドから切り離した複雑なEC ストアまで、自由に何でも作ることができます。

Webデベロッパーの RachelによるUXPin Merge の使用方法のビデオ チュートリアルをぜひご覧ください。

Youtube でご覧ください。UXPin Mergeチュートリアルのフル再生リストはこちら。

独自のコンポーネントを統合する方法 ‐ ステップ・バイ・ステップ

UXPin Merge は、MUI、Ant design、Bootstrap などのオープンソースライブラリの Storybook コンポーネントと React コンポーネントに対応しています。

本記事でさらに詳しく見ていき、React ベースのライブラリを Mergeに統合して、日常的にコードを使ってデザインするのがいかに簡単であるかを示したいと思います。

コーディングの仕方を学ばなくても、すべてできます！

UXPin Merge で、ユーザーは既存のカスタム React コンポーネントをシームレスにインポートし、実際のコードを使ってインタラクティブなプロトタイプを作成することができます。そしてこれは、従来のデザインツールにはないものです。

これにより、デザイナーはデザインツール内で 「第２の 」デザインシステムを手動で管理する必要がなくなり、代わりにチーム全体に「信頼できる唯一の情報源（Single source of truth）」を提供することができます。

そしてその結果、デジタル製品を構築する際のデザイナーとデベロッパー間の連携が絶たれることがなくなりました。

このチュートリアルでは、時間の節約のために Mozilla の React Todo App にある例を Merge と統合することにしました。

これで、統合後はアプリのコンポーネントを使って UXPin 内でインタラクティブな Todo リストのプロトタイプをデザインできるようになるでしょう！

あと、Merge へのアクセスをリクエストすることから始めることを忘れないでください（こちらでできます）。認証プロセスとセットアップが完了したら、コードでデザインする準備は完了です！また、GitHub との統合について心配する必要はありません – コードベースがどこにあるべきかという要件はありませんので、お好きなものをお使いください！

コンポーネント

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

• フォーム – ToDo の項目を作成する。
• FilterButton – 現在の状態で Todoをフィルタする。
• Todo – ToDo リストの項目。

これらのコンポーネントは `src/components` ディレクトリにあり、以下のスクリーンショットに概略が示されています：

このチュートリアルが完了すると、デザイナーはそのコンポーネントでプロトタイプを作成できるようになります。実際の カスタムDS（デザインシステム） には、おそらくコンポーネントが３つ以上含まれていますが、このチュートリアルで説明するコンセプトは 皆さんの DS にも適用できるはずです。

UXPin Mergeのセットアップ

まず、フォークして次のリンク https://github.com/mdn/todo-react を複製します。 次に、CLI（コマンドラインインターフェース）を含む UXPin Merge NodeJS パッケージをインストールします。

• プロジェクトフォルダの cd todo-react に移動する。
• UXPin Merge とその CLI NodeJS バンドルを次のようにインストールする： yarn add @uxpin/merge-cli–dev
• UXPin Merge のビルド ディレクトリを無視する：echo ‘/.uxpin-merge’ >> .gitignore

カスタムデザインシステムには、さらに以下の設定ファイルが必要です：

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

UXPin は通常、既存の Webpack ビルドプロセス全体を使う必要はなく、UXPin のビルドには、より最小限のデフォルトのビルドが使われます。そして 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 を作成し、以下の内容をファイルに貼り付けます。あとは、 Webpack が Babel-loader が使ってアプリバンドルを作成します。babel をインストールするには、次のコマンドを使います： yarn add babel-loader –dev からの yarn install

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

おめでとうございます👏 これで、Form コンポーネントを表示するのに必要な最小限の設定は完了です。

Experimental モード

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

フォームコンポーネントはありますが、スタイリングがありません。なので、Global Wrapper Component を作ります。

Global Wrapper Component を使って CSS スタイルを適用する

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

ラッパーファイルを作成してみましょう：

以下をコピーして `UXPinWrapper.js` に貼り付けます

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

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

i

この `import ‘../index.css’;` の行で、各コンポーネントをレンダリングする前に CSS スタイルが読み込まれることが保証されます。

UXPin に、このラッパーファイルを使うように指示する必要があります。そして uxpin.config.js に以下を追加します：

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

Experimental モードでは、スタイル付きの Form コンポーネントで新しいブラウザウィンドウが開くはずです：

カスタマイズ可能な名前を持つ FilterButton の追加

では、UXPin Merge に FilterButton を追加してみましょう。このボタンは Form コンポーネントの下に表示されます：

このコンポーネントの追加は Form コンポーネントと同様ですが、ボタン内に表示されるテキストを指定する機能もデザイナーが使えるようにしたいと思います。これは `prop-types` パッケージを使ってやってみましょう。

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

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;

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 スタイルを適用するために使った Global wrapper component と似たコンセプトですが、Todo コンポーネント専用になります。

次のように入力します：

mkdir -p src/components/merge/todo 

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

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

</pre>
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;


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

大元の Todo コンポーネントを `TodoM` としてインポートし、新しく定めた `Todo` 関数でこのコンポーネントを返します。そして、新しく定めた `Todo` ラッパー関数で FilterButton コンポーネントと同じように propTypes を指定します。

uxpin.config.js に「src/components/merge/todo/Todo.js」を追加し、./node_modules/@uxpin/merge-cli/bin/uxpin-merge -disable-tunneling を使って再起動します。そして Experimental が新しいウィンドウを起動したら、Todo コンポーネントをクリックしてキャンバスにドラッグします：

Todo コンポーネントとデフォルトの「Do Laundry」Todo 名が表示され、このデフォルト名は Merge を使う時のみ適用されます。

UXPinにプッシュする

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

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

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 ライブラリにアクセスできるようになりました。

UXPin で Mergeライブラリを使う

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

• ブラウザで UXPin エディタを再読み込みする。
• エディタの左下にある「Learn UXPin Merge（UXPin Merge を学ぶ）」のデザインシステムを選択する。
• サイドバーのコンポーネントをクリックしてキャンバスにドラッグする。

これでしっかりとしたプロトタイプができるはずです：

それで、デザイナーはどのようにしてプロトタイプをデベロッパーに引き渡すのでしょうか？

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

UXPin で簡単なプロトタイプを作ったので、それをアプリにエクスポートする準備ができました。出力をプレビューし、Spec モードを使ってコンポーネントの JSXコードをコピー＆ペーストします。

エディタの右上の再生ボタンをクリックします。プレビューが読み込まれたら、上部の 「Spec 」のリンクをクリックしてください。コンポーネントをクリックして、右側のパネルでそれを生成する JSX コードを見ることができます：

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

アップデートのプッシュ

FilterButton には、現在アクティブなフィルターを示す「押された」状態があります。ライブの React アプリを見ると、「押された」状態と「押されていない」状態の違いは以下のようになります：

この状態のサポートを追加しましょう。src/components/FilterButton.js`を以下のように変更します：

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

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

Merge のコンポーネントは、直近でプッシュされたコードに自動的に同期されます。最新のものを表示するには、UXPin エディタを表示しているタブを再読み込みします。そして FilterButton を選択したら、エディタの右パネルに、新しい “isPressed” のプロパティが表示されます。

この状態を有効にするにはこれを選択します：

今後変更を加える場合も、同じ流れ（git commit + uxpin-push）に従います。その際プロトタイプは、プッシュされた最新バージョンのコンポーネントを自動的に使います。

製品開発を８.６倍スピードアップ

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

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

UXPin Merge をまだお持ちでない方は、コードによるデザインを最大限に活用するために、まずは忘れずにアクセスリクエストの手続きを行ってください！そして UXPin Merge をぜひ無料でお試しください。

The post コードによるデザイン – UXPin Merge のチュートリアル appeared first on Studio by UXPin.

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

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

主なポイント：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UXPin を始める

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Pages & Layers

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

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

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

Design System Libraries

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

CANVAS

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

Properties Panel

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

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

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

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

• ステート（状態）

• インタラクション

• バリアブル（変数）

• Expressions

ステート（状態）

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

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

インタラクション

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

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

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

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

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

Variables（変数）

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

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

Expressions

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

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

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

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

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

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

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

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

• MUI

• Ant Design

• Fluent UI

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

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

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

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

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

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

Merge の対象者

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

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

Merge を使う理由

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

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

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

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

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

UXPin ではじめよう

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

The post 初心者 向け UXPin の使い方 appeared first on Studio by UXPin.

ワイヤーフレームの作成は、UXデザインプロセスにおける重要なステップであり、最終製品の設計図としての役割を果たします。

このガイドでは、コードベースのテクノロジーと内蔵機能で際立つエンドツーエンドのデザインツールであるUXPinを使って効果的なワイヤーフレームを作成する方法を詳しくご紹介します。

本記事では、基本的なUI要素の組み立てからユーザーフィードバックの組み込みまで、アプローチを一つずつ詳細に提供しています。

インタラクティブなフォーム要素や「Code-to-Design（コードからデザイン）」の機能など、UXPinのユニークな機能が、どのようにデザインプロセスの効率化や連携強化、よりユーザーにとって使いやすい製品への貢献をできるかを見ていきましょう。

主なポイント：

• UXPinには、デザイナーが完全にインタラクティブで機能的なワイヤーフレームを作成できるようになるコードベースのワイヤーフレーム作成機能がある。
• UXPinは、デザインライブラリや高度なプロトタイピング機能などが内蔵されていることによって、他のデザインツールとは一線を画している。
• UXPinは、ワイヤーフレームから忠実度の高いプロトタイプへのシームレスな移行をしやすくすることから、複雑なインタラクションや API連携まで実現し、包括的なフルスタックデザインソリューションとなる。

UXPin でデザインプロセスを効率化し、ワイヤーフレームをもっと速く作成しませんか。こちらから無料トライアルにサインアップして、UXPin のフルスタックデザインソリューションをぜひお試しください。

UX のワイヤーフレームとは

UX のワイヤーフレームは、UI（ユーザーインターフェース）の基本的なフレームワークを表現する、低忠実度（Lo-Fi）の視覚的な設計図であり、通常は色やグラフィック、複雑な詳細はなく、主にスペースの割り当て、コンテンツの優先順位、および意図された機能に焦点を当てています。

デザイナーは、Web ページやアプリ、システムの構造を伝えるために、デザインプロセスの初期段階でワイヤーフレームを作成しますが、ワイヤーフレームは、詳細なモックアップや高忠実度（Hi-Fi）プロトタイプに入る前に、基本的なレイアウトとインタラクションのパターンを確立することを主な目的としています。

ワイヤーフレームの利点

ワイヤーフレームには、デザインプロセスの効率化や、チームメンバー間の効果的なコミュニケーションの促進を実現するさまざまなメリットがあります。以下に、その利点を挙げましょう：

• 明瞭性： ワイヤーフレームが、レイアウトを視覚的に表現することで曖昧さを取り除き、関係者は誰でも明確なロードマップを得られる。
• 効率性： ワイヤーフレームが早期に問題を解決することで、開発後期の時間とリソースが節約される。
• 整合性： ワイヤーフレームで、プロジェクトの目標と機能性に関するステークホルダーとチームメンバーの足並みが揃う。
• ユーザビリティ：UX（ユーザーエクスペリエンス）を評価する機会を提供することから、 直感的なナビゲーションとレイアウトが確保される。
• 連携： ワイヤーフレームがディスカッションのツールとして機能することから、デザイナー、デベロッパー、ステークホルダーが初期のデザインのフィードバックを提供できるようになる。
• 優先順位付け： デザインの最も重要な要素を特定し、コンテンツの効果的な階層化が実現する。
• 柔軟性： ワイヤーフレームで、反復と変更がしやすくなることから、実験のための Lo-Fi（低忠実度）モデルとして機能できる。
• アーキテクチャ：ワイヤーフレームは、デジタル製品の情報アーキテクチャのベースとなる。

UXPinはワイヤーフレーム作成に適したツールか

UXPinは、優れたUXを実現できるワイヤーフレームが作成可能なエンドツーエンドのデザインツールです。デザイナーは次のような機能を使用してインタラクティブなワイヤーフレームを簡単に作成できます：

• ボックス（Box）：テキストを追加できる柔軟な UI 要素
• シェイプ（Shape）：長方形、楕円、円、丸、線、矢印、多角形、星形
• テキスト（Text）：基本的なテキストブロック
• フォーム（Form）：ボタン、テキストエリア、セレクト/マルチセレクト、チェックボックス、ラジオボタンなど、基本的なスタイルのないフォーム要素のセット
• ホットスポット（Hotspot）: UIの任意の要素や特定の場所をインタラクティブにする
• アイコン（Icon）：マテリアルデザイン、Fonts Awesome、Retina アイコンなど、複数のアイコンセットから選ぶ

他のデザインツールとは違い、UXPinのUI要素はデフォルトでもインタラクティブなものです。

例えば、UXPinのすべてのフォーム要素は完全に機能し、チェックボックスやラジオをキャンバス上にドラッグ＆ドロップするだけで、クリック可能なオン/オフの状態のインタラクティブ機能がすでに備わっています。

このようなインタラクティブな要素により、デザインチームは、デザインプロセスのよりコストのかかる忠実度の高い（Hi-Fi）段階に移行する前に、ワイヤーフレームのプロセスでより多くのデータとフィードバックを集めることができます。

UXPinと他のワイヤーフレームツールの違い

UXPin の最も大きな違いは、このプラットフォームがコードベースのテクノロジーを採用している点です。UXPin は、SketchやFigmaのようにベクターグラフィックスを生成するのではなく、HTML、CSS、Javascript を裏でレンダリングします。

このコードベースのアプローチにより、デザインチームは完全にインタラクティブなワイヤーフレームやプロトタイプを構築するための機能が強化できます。

たとえば、画像ベースのツールでは、入力フィールドはグラフィカルな表現ですが、UXPinではユーザーデータをキャプチャ、保存、共有できる機能的になります。

内蔵機能とプラグイン

もう一つの違いは、UXPinは他のワイヤーフレームツールよりも多くの機能を標準で提供し、プラグインや拡張機能を必要としない点です。UXPin のプランには、デザインシステム、ビルトインデザインライブラリ、コンテンツとデータ、フォント（Googleとカスタム）、アクセシビリティ機能など、他のデザインツールではプラグインが必要なものが多数含まれています。

Code-to-Design（コードからデザイン）

UXPin Mergeのテクノロジーにより、デザインチームはコードコンポーネントをデザインプロセスにインポートしてプロトタイプを作成を可能にします。デザイナーは、デベロッパーが最終製品に使うのと同じ UI ライブラリを使って、完全に機能するインタラクティブなプロトタイプを作成できます。

エンジニアリングチームで特定のワイヤーフレームのコンポーネントライブラリが使われている場合、Merge を使ってこれを UXPin にインポートできます。

また、Merge にはインタラクティブなプロトタイプの作成に使えるビルトインライブラリ（例：Material UI、MUI、Ant Design、Fluent UI、ボイラープレートなど）があり、ワイヤーフレーム作成から忠実度の高いプロトタイプ作成まで、コンセプトやアイデアをすぐにテストすることができます。

UXPin でワイヤーフレームを構築する方法

ここでは、フィードバックの収集やステークホルダーとの連携など、UXPin でワイヤーフレームを作成するためのステップをご紹介します。

このステップバイステップのチュートリアルに従うには、UXPin のアカウントが必要です。

まだお持ちでない方は、１４日間の無料トライアルにサインアップしてください。

ステップ１: UXPin を開いて新規プロジェクトを作成する。

• UXPin を開き、青い［＋New project］のボタンをクリックする。
• プロジェクト名を入力し、［ Create New Project（新規プロジェクトの作成）］をクリックする。
• 次に、「What do you want to start with today?（今日は何から始めますか？）」画面から［New prototype］を選択する。

ステップ２：ワイヤーフレームのキャンバスサイズを選ぶ

右側のプロパティパネル（Propaties Panel）で、ワイヤーフレームのキャンバス（CANVAS）のサイズを選択します。

UXPin には、デスクトップ、タブレット、モバイル、ウェアラブルなど、幅広い標準ビューポートが用意されています。

グリッドとガイドを使って、水平または垂直方向の一貫性を保ちましょう。

ステップ３：各画面のページを作成する

アートボードやフレームが使われる FigmaやSketchとは異なり、UXPinは画面ごとに独立したページが使われます。

• 左サイドバーの下部にある［Pages & Layers］を選択する
• サイドバー上部の［＋］のアイコンをクリックし、新規ページを作成する（［OPTION + N］のキーボードショートカットでも可能。）
• ページ名をダブルクリックして変更する（今回は「Login（ログイン画面）」と「Welcome（ウェルカムページ）」の２つのページを作成する）

アドバイス：ユーザーフローライブラリを使って、ユーザージャーニーと情報アーキテクチャを設計し、プロジェクトの画面数とナビゲーションレイアウトを決定しましょう。

ステップ４：ワイヤーフレームの UI 要素の作成

UXPinのシェイプ、フォーム、ボックスなどを使ってワイヤーフレームのパターンやレイアウトを組み立てることができます。

また、オートレイアウト（Auto Layout）では、サイズ、ギャップ、配置、分布など、グループ要素を効率的に管理できます。

UXPinのコンポーネントを使って、再利用可能なワイヤーフレーム要素を作成しましょう。これによって、より迅速な反復と最大限の一貫性を実現できます。

ステップ５：インタラクションを定義する

このデモでは、ログイン画面からウェルカムスクリーンに基本的なナビゲーション・インタラクションを追加します。

• 要素をクリックして選択し、Properties Panel（プロパティパネル）の Interactionsをクリックする。
• 以下のようにナビゲーションのインタラクションを作成する：
  • Trigger：Click (Tap)
  • Action： Go to Page
  • Page：ドロップダウンリストから Welcomeを選択
  • ［Add（追加）］をクリックしてインタラクションを完了する

Trigger、Action、Animation、条件などのインタラクションの設定方法をご覧ください。

ステップ６：連携とフィードバックの収集

UXPinのPreview（プレビュー）と Share（共有）機能を使って、ステークホルダーにワイヤーフレームを共有します。

また、Comments（コメント）機能で、ステークホルダーはデザインに注釈を付けてフィードバックしたり、特定のチームメンバーにコメントを割り当てることができます。

UXPin でワイヤーフレームからプロトタイプへ移行する方法

UXPinでは、ワイヤーフレームからプロトタイプまで簡単にできます。

ゼロからコンポーネントをデザインしてモックアップを作成することも、デザインシステムを使って忠実度の高いインタラクティブなプロトタイプをすばやく構築することもできます。

UXPinには、プロトタイピング機能を強化する主要機能が以下のように４つあります：

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.

製品とそのデザインシステムは、常に進化し続けるプロジェクトです。製品の規模が大きくなるにつれ、デザイナーはユーザビリティの課題を解決しながら、ビジネス目標やユーザーニーズを満たすために、新しい 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.