ここ１０年のデザインシステム革命は、製品開発のワークフローを強化するためのさまざまなツールや戦略をもたらしました。

デザイントークンは、UI 要素の実装、管理、更新をしやすくするために Google の Material Design 3 や MUI などの多くのデザインシステムが採用しているツールの１つです。

お知らせ：UXPinのカラー用デザイントークンはベータ版です！サインアップすると、デザイントークンの正式なリリース時に通知します。

組織全体でデザイン業務を最適化しませんか。デザインと開発で React コンポーネントを使うチームを支援する画期的なデザインテクノロジーである UXPin Merge をぜひご利用下さい。Merge の詳細はこちら。

デザイントークンとは

デザイン トークンには、クロスプラットフォーム の UI（ユーザー インターフェース）のスタイル設定と構築に使われる色、フォント、スペース、アニメーション、アセットなどの UI データが含まれています。各 OS（オペレーティングシステム）用に静的な値をハードコーディングする代わりに、デザイントークンには複数のフォーマットが含まれているため、フロントエンドデベロッパーは iOS や Android、さらには Web アプリケーションを構築する場合でも、同じ変数を使うことができます。

クロスプラットフォームの製品開発における課題の１つに、OS で異なるスタイルプロパティとフォーマットが使われる点が挙げられます。例えば、UXPin のWeb サイトでは CTA（Call to Action）に黄色が使われますが、この黄色の16進コードは#FCC821であり、以下のような方法で表すことができます：

• RGB (CSS): rgb(252, 200, 33)
• RGBA: rgba(252, 200, 33, 1)
• Octal (Android/Flutter): 77144041

このような静的プロパティを使う代わりに、デザイナーやエンジニアは、この４つのカラーコードすべてを表す「uxpin.cta.primary」のようなトークンを参照します。これでプラットフォームやプログラミング言語に関係なく、色は常に同じになります。

デザイントークンの種類

組織は、カラーパレット、サイズ、スペース、アセット、ドロップシャドウなど、多くのスタイルプロパティにこのようなデザイントークンを使います。デザイン トークンの主な種類には以下があります：

• カラートークン： デザインシステムで使われるカラーパレットを定める。例えば以下のように、原色、二次色、背景色、文字色、枠色などがある。
  • 例：
    • color-primary: #007bff
    • color-background: #f8f9fa
      
      
• タイポグラフィトークン： テキスト関連のプロパティを指定する。フォントファミリ、フォントサイズ、行の高さ、文字間隔、フォントの太さなどがある。
  • 例：
    • font-family-body: ‘Roboto’, sans-serif
    • font-size-heading: 24px
      
      
• スペーストークン： マージン、パディング、ギャップなどのスペーシング・システムを管理する。デザイン全体を通して一貫したスペーシングを保証する。
  • 例：
    • spacing-small: 4px
    • spacing-large: 16px
      
      
• サイズトークン： コンポーネントや要素のサイズを定める。これには、幅、高さ、最大サイズと最小サイズなどがある。
  • 例：
    • size-button-height: 48px
    • size-avatar-small: 32px
      
      
• ボーダートークン： 幅、スタイル、半径などのボーダーラインのプロパティを指定する。
  • 例：
    • border-width-thin: 1px
    • border-radius-medium: 8px
      
      
• シャドートークン：色、オフセット、ぼかし、広がりなど、デザイン システムで使われる影の効果について説明する。
  • 例：
    • shadow-small: 0 1px 2px rgba(0, 0, 0, 0.1)
    • shadow-large: 0 4px 8px rgba(0, 0, 0, 0.2)
      
      
• 不透明度トークン： 要素の不透明度を定める。
  • 例：
    • opacity-low: 0.3
    • opacity-high: 0.9
      
      
• ブレークポイントトークン： レスポンシブデザインのブレークポイントを指定し、デザインがさまざまなスクリーンサイズにどのように適応するかを指示する。
  • 例：
    • breakpoint-mobile: 480px
    • breakpoint-desktop: 1024px
      
      
• デュレーショントークン： アニメーションとトランジションのタイミングを管理する。
  • 例：
    • duration-short: 200ms
    • duration-long: 600ms
      
      
• イージングトークン：アニメーションとトランジションのイージング関数を定める。
  • 例：
    • easing-in-out: cubic-bezier(0.4, 0, 0.2, 1)
    • easing-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55)

デザイントークンの起源

デザイントークンの先駆者は Salesforce だと言われており、Salesforce Designer に掲載された２０１４年の記事で、Salesforce UX VP の ゾンケ・ローデ氏によって、同社が複数のプラットフォームやソフトウェアに同じデザイン原則を適用するのにデザイントークンを使っていることが説明されています。

「Salesforce では、まさにこの課題に直面し、不可知論的な解決策を考え出しました。我々は、デザインを一箇所に定めて、それをシステムを使って全プラットフォームにカスケードダウンします。これは「信頼できる唯一の情報源（Single Source of Truth）」と言って、基本的に、我々のデザイントークンを記述する名前と値のペアを含む JSON ファイルのセットとなります」ゾンケ・ローデ氏による Living Design System からの抜粋。

エンジニアは、静的なスタイル プロパティを使う代わりに、デザイントークンを参照し、プラットフォームに応じて正しい値を JSON ファイルから取得します。そして Salesforce はこのプロセスを自動化すべく、「デザイントークンを変換してフォーマットするための抽象化機能」である Theo を開発しました。

アトミックデザインとトークンの違い

「アトミックデザイン」と「デザイントークン」は、どちらもデザインシステムで使われる概念ですが、「デザインの一貫性」と「スケーラビリティ」という異なる側面に対処しています。

アトミックデザインは、ブラッド・フロスト氏によって開発されたデザインシステム構築のための方法論であり、UI を、「原子」、「分子」、「有機体」、「テンプレート」、「ページ」（複雑さの昇順）と呼ばれる、より小さく再利用可能なコンポーネントに分解します。例えば原子は、ボタン、入力フィールド、アイコンなどの基本的な構成要素で、分子は原子の組み合わせ、有機体は分子の組み合わせ、といった具合です。

対するデザイントークンは、デザインシステムにおける色、タイポグラフィ、スペースなどのデザインプロパティを定める変数のセットであり、ビジュアルデザインの決定を抽象的に表現するものです。デザイントークンは、色の16進コードのような「特定の値」を UI コンポーネントに直接ハードコーディングするのではなく、デザインシステム全体でデザインプロパティを一元的に管理や更新をする方法を提供します。

デザイントークンは、デザインプロパティの抽象化と管理を行い、デザイン上の決定を変数に抽象化することから、メンテナンス、拡張性、一貫性がしやすくなります。また、デザイントークンで、デザインに関連する値の「信頼できる唯一の情報源（Single source of truth）」がもたらされます。

デザイントークン３例

タイポグラフィのデザイントークンの例を３つ挙げてみましょう。このトークンで、さまざまなコンポーネントやプラットフォーム間でのタイポグラフィのスタイルの一貫性が保証されます。

例１：フォントファミリー

</p>
{
  "font-family": {
    "base": "Roboto, Arial, sans-serif",
    "heading": "Montserrat, Arial, sans-serif",
    "monospace": "'Courier New', Courier, monospace"
  }
}
<p>

例２：フォントサイズ

</p>
{
  "font-size": {
    "base": "16px",
    "small": "14px",
    "large": "24px",
    "heading": {
      "h1": "32px",
      "h2": "28px",
      "h3": "24px"
    }
  }
}
<p>

例３：行の高さ

</p>
{
  "line-height": {
    "base": "1.5",
    "tight": "1.25",
    "loose": "1.75",
    "heading": {
      "h1": "1.2",
      "h2": "1.3",
      "h3": "1.4"
    }
  }
}
<p>

デザイントークンは適しているか

Google の Material Design 3 のドキュメントには、デザイントークンが最も役立つ場面のリストが以下のように掲載されています：

• 複数のプラットフォームや製品でデザインシステムを使っている。
• 製品のスタイルを簡単に維持・更新したい。
• 製品デザインの更新や、新しい製品や機能の構築を予定している。

Material Design は、デザイントークンが「あまり有効でない」例も２つ挙げています。

• 数年以内に製品を変更する予定がない。
• 製品にデザインシステムがない

デザイントークンを使うメリット

デザイントークンを使う主な利点を３つ挙げてみました。

１．「信頼できる唯一の情報源（Single source of truth）」がある

デザイントークンは、「信頼できる唯一の情報源（Single source of truth）」を作るのに最も有益であり、これが、Salesforce がデザイントークンを使い始めた理由です。例えば複数の製品チームやエンジニア、UX デザイナーが同じ製品に取り組む場合は、みんなそれぞれ同じデザイン言語を話さないといけません。

それがデザイントークンによって、チームは、役割、プラットフォーム、プログラミング言語、責任に関係なく、同じ言語で話すことができるようになります。

２．UI の一貫性の維持

UI の一貫性は、大規模なデザインを行う際の重要な課題です。１つの製品に対して、デザイナーが誤って微妙に違うサイズやブランドカラー、スペースを使ってしまうことは珍しいことではなく、このような不一致でユーザビリティの問題が起こり、リリースのたびにエンジニアリングと UX の負債が増えていきます。

そこでデザイントークンが、デザイナーがみんな同じスタイルとプロパティを使えるように、このような矛盾を解消してくれます。「信頼できる唯一の情報源（Single source of truth）」のもう一つのメリットですね！

３．スケーリングの柔軟性を得る

デザイントークンで、製品やデザインシステムに変更や拡張の柔軟性ができます。なので、チームがプラットフォーム固有のプロパティを追加する必要がある場合は、デザイントークンを更新するだけです。

例えば、Android は HEX や RGB の代わりに 8進数 のカラーコードを使いますが、その際デザインシステムを Android に適応させるのに、DSチームは各デザイントークンに8進コードを追加して「信頼できる唯一の情報源（Single source of truth）」を維持することができます。

このトークンによって、エンジニアはエラーや不整合を減らしながら、新しいプロジェクトをずっと速やかに提供できるようになります。

この柔軟性で、変更もできるようになります。例えば、ある製品がモンセラットからロボトに書体を変更した場合、チームはタイポグラフィートークンを更新するだけで、製品全体の変更を実施できます。

デザイントークン構造の確定方法

デザイントークンの構造を定めるルールはありませんが、Amazon のStyle Dictionary にあるこの例が最もわかりやすく、多くの組織で同じようなフォーマットがデザイントークンに使われています。

Amazon の Style Dictionary は、以下のような階層的なデザイントークン構造を採用しています：

• カテゴリ （色、時間、行の高さ、サイズ、アセット、コンテンツなど）
• 種類
• 項目
• サブ項目
• ステート

例えばこの構造を使って、主要な有効ボタンのためのデザイントークンを作成する場合、color_background_button_primary_active のようになるか、color-bg-btn-primary-active のような短縮形になるかもしれません。そしてこのトークンには、クロスプラットフォームの実装に必要なあらゆる種類のカラーコードが含まれます。

デザイントークン構造は一貫性が鍵なので、ユーザーがトークンを簡単に見つけてシステムを拡張できるように、予測可能な命名規則を使わないといけません。

オプションと決定によるトークンの設計

UX の専門家であり、eightshapes の創設者であるネイサン・カーティス氏は、トークンのアーキテクチャについて素晴らしい記事を書いています。彼は、最初のステップは、デザイントークンを以下のようにオプション（または選択肢）と決定に区分することだと言います。

• オプション： 基本トークン値を作成する。トークンは、色、時間、アセット、コンテンツなど、上記の Style Dictionary で説明されているカテゴリを定める。
• 決定：オプションを使って、例えばインタラクティブカラー、背景色、テキストカラーなどのコンポーネントのプロパティを作る。

このシステムには、白を別の色合いに変更したい場合は、カラー オプションの下の HEX コードを置き換えると、各デザイントークンと関連する UI 要素に自動的に同期されるという利点があります。

ネイサン の方法論だと、オプションを使ってより多くの決定を作成するだけなので、拡張もしやすくなります。トークンの設計に関する詳しい手順については、彼の記事全文をお読みください。

デザイントークンの実際の仕組み

「Design Tokens for Dummies」というお役立ち記事で、ルイ・シェネ氏 は、デザイントークンを使う場合と使わない場合の一般的なデザイン変更ワークフローについて以下のように概説しています。

従来のワークフロー – デザイントークンなし

• デザイナーがデザインツールでスタイルを更新する
• デザイナーがデザインハンドオフのために変更をドキュメント化する
• エンジニアが CSS、LESS、SASS などのコンポーネントのプロパティを更新する
• デザインチームが QA（品質保証）中に変更を確認する

このワークフローには以下のような問題があります：

• デザインハンドオフ中に、より多くの作業と細部への注意が必要。
• エラーや誤解が生じやすくなる。
• チケットが増えるので技術的負債が増える。
• 変更を加えて関連するエラーを修正するのに、不要な時間と費用がかかる。

デザイントークン方式

• デザイナーはデザインツールでスタイルを更新する。
• デザイントークンジェネレーターで、プラットフォーム固有のファイル (JSON／YAML) を作成する集中レポジトリが更新される。
• エンジニアは新しいレポジトリをプルし、新しいトークンを追加して、プロジェクトのスタイルを自動更新する。

デザイントークンを使うと、デザインハンドオフに関するドキュメントが少なくなって、エンジニアのプログラミング時間が節約されます。そしてこの自動化されたシステムによって、人的エラーが大幅に減ることから、開発と QA プロセスが効率化されます。

UXPin Merge による「信頼できる唯一の情報源」

デジタル製品が複雑になっていくと、デザイナーとエンジニアはワークフローを統合するソリューションを見つけないといけません。ちなみに UXPin は、革新的な Merge の技術でこの問題を解決しました。

Merge を使うと、レポジトリからコンポーネントライブラリを UXPin のデザイン エディタにインポートできるため、デザイナーはエンジニアが最終製品の開発に使うのと同じ UI 要素を使うことができます。

Merge のコンポーネントには、レポジトリ内のコンポーネントと同じ忠実度と機能があり、デザイン システム チームは、React のプロップ (または Storybook 統合の場合は Args) を使って変更を制限したり、デザイナーにデザイン上の決定を柔軟に行えるようにしたりできます。

また、エンジニアがレポジトリに変更を加えると、それは自動的に UXPin に同期され、デザイナーに更新が通知されます。Merge にはバージョン管理機能が備わっているため、デザイナーは以前のバージョンに切り替えることができ、それで古いプロジェクトの更新をすることができます。

UXPin Merge で製品開発を新たなレベルに引き上げ、「信頼できる唯一の情報源（Single source of truth）」を作りませんか。アクセスリクエストの詳細については、Merge のページをぜひご覧ください。

The post デザイントークンとは？ appeared first on Studio by UXPin.

開発フローで思い浮かぶのは、デザインからコードにするという形ではないでしょうか？デザイナーはデザインツールを使って、プロトタイプを作成し、デベロッパーはそれをコードに変換するという、標準的な製品開発プロセスでしょう。

UXPin Mergeでは、画期的な「Code-to-Design（コードからデザインへ）」ワークフローによって、このプロセスをひっくり返します。そこで本記事では、「Code-to-Design（コードからデザインへ）」と、それが製品開発プロセスをどのように強化するかを、４つのケーススタディとともに見ていきます。UXPin Merge の詳細はこちら。

「Code-to-Design（コードからデザイン）」とは

「Code-to-Design（コードからデザイン）」は、UXPinがMergeの技術を使って開発した UX ワークフローです。UXPin Mergeを使うと、コード化されたUIコンポーネントを使って完全にインタラクティブなインターフェースを構築し、デザインが完了したら製品コードをエクスポートできます。ちなみにコンポーネントはデザインからコードに変換されるのではなく、そもそもがコードです。

「Code-to-Design（コードからデザイン）」のワークフローで、デザイナーやステークホルダー、エンジニアは以下のようなメリットが得られます：

• デザイナーは完全にインタラクティブなプロトタイプを作成し、それでデザインプロセスにおけるテストの範囲が広がる。
• デザイナーはゼロからデザインしないため、市場投入までの時間が短縮される。
• プロトタイプが最終製品のように動作するため、ステークホルダーはデザインのビジョンを把握することができる。
• デザイナーとエンジニアが同じ「信頼できる情報源（Source of truth）」を使うため、デザインのハンドオフがスムーズになる。
• チームがデザインシステムを共有することで、その導入が問題にならなくなる。
• ドラッグ＆ドロップのワークフローにより、デザイナーでなくても製品デザインをより身近に感じられるようになり、デベロッパー、ステークホルダー、リサーチャーなどが自分ででプロトタイプを作成できるようになる。

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

コードに合わせてデザインすると不整合が生じる

デザインからコードへの変換は、従来の UX ワークフローです。デザインチームは標準的な画像ベースのデザインツールを使ってモックアップやプロトタイプを作成し、それをデベロッパーがコードに変換します。

「デザインからコードへ」のワークフローは、デザイナーとエンジニアの間にギャップが生じるところに最大の課題があります。そしてデザイナーは、そのギャップを埋めるのに、外部ツールを使い、詳細なドキュメントを書き、デベロッパーと会ってプロトタイプやインタラクションがどのように機能しないといけないかを説明しないといけません。

このような余分な作業や説明をしても、最終製品がデザイナーの仕様や期待を満たさないことはよくあります。デザイナーとエンジニアはどちらに原因があるかをめぐって言い合いになりますが、本当の問題は「言葉の壁」です。デザイナーはベクターグラフィックツールで仕事をし、エンジニアはコードで仕事をしますからね。

「Code-to Design（コードからデザインへ）」で連携を促す

「Code-to Design（コードからデザインへ）」のワークフローによって、デザイナーとエンジニアの間のギャップを埋めることができます。両者は異なる言語を話しますが、Mergeのようなテクノロジーにより、デザインと開発の間のコミュニケーションがしやすくなります。

デザインチームは視覚的なUI要素を扱い、エンジニアはそれらを動かすコードを扱います。つまり、同じコンポーネントを２つの視点から扱うことになります。

そしてデザイン システムで作業するチームは、この「コードからデザイン」のワークフローから最大のメリットを得られます。

「デザインからコード」のワークフローでは、チームは以下の２つのバージョンのデザインシステムで作業します：

• デザインツール用画像ベースUIキット
• プログラミング用 UI コンポーネントライブラリ

「コードからデザイン」の場合では、デザインチームとエンジニアが同じレポジトリから同じコンポーネントライブラリを使うことができるので、この断絶がなくなり、「信頼できる唯一の情報源（Single source of truth）」ができます。

「Code-to Design（コードからデザインへ）」のユースケース

「”コードからデザイン” というのは聞こえはいいけど、実際の製品開発にはどう反映されるのか」と思っていることでしょう。ここでは、企業が製品開発に「コードからデザイン」を使っているユースケースを４つ見てみましょう。

１．PayPal

２０１９年、PayPal は UXPin Merge を使って社内の製品開発プロセスを完全にデザインし直しました。PayPal の社内 UX チームには、６０以上の製品を管理するエンジニアが１０００人以上いるのに対してデザイナーは５人という独特な課題がありました。そしてどの製品も同じようには見えず、それぞれにユーザビリティやデザインの一貫性の問題がありました。

PayPal の UXリード EPX であるエリカ・ライダー氏は、この問題の解決を任されました。さらに複雑なことに、彼女は PayPal の製品チームが製品をデザイン、テスト、提供できるようなワークフローも作らないといけませんでしたが、彼らにはデザインスキルがなく、デザインツールの経験もほとんどありませんでした。

そこで、従来の画像ベースのツールを使ってソリューションをいくつか試した後、エリカは Merge を発見しました。そして PayPal の UX チームは Merge を使って、カスタマイズされた Fluent UI デザインシステムを UXPin と同期させました。

PayPal のステークホルダーは、この新しい「コードからデザイン」への投資の効果をテストしたいと考えていました。そこでエリカは試し単一ページのプロトタイプを２バージョン作成しました。１つは画像ベースのツールを使い、もう１つは UXPin Merge を使ったところ、結果は予想以上のものでした：

• 画像ベースのツール：１時間以上
• UXPin Merge：８分

Merge のプロトタイプには、はるかに優れた忠実度と機能があり、Paypal の製品チームもコーチングを受けることで、同じ結果を得ることができました。

PayPal のケーススタディ全文はこちら。

２．Iress

ソフトウェア開発会社の Iress は、システムの成熟度をデザインするのに以下の４つプロセスを踏んでいました。

1. PDF スタイルガイド
2. CSS 付き HTML パターンライブラリ
3. UI キットとコンポーネントライブラリ
4. リリースにデザインやコードが要らない、完全に統合された「信頼できる唯一の情報源（Single source of truth）」

Iress は、チームが「コードからデザイン」のアプローチを発見する以前は、デザインと開発のギャップをどのように埋めて最終目標に到達すればいいか分からず、３番目で行き詰まっていました。

そしてこのワークフローは、その時点で Iress にとっての要件をすべて満たしていました：

• 製品の構築とリリースに必要なコンポーネントをデザイナーとエンジニアに提供する単一のレポジトリ。
• シームレスなデザインハンドオフにより、デザイナーとエンジニアの連携がよくなる。
• ゼロからのデザインやフロントエンドのプログラミングが不要。
• デザインの劣化や組織間の不整合が発生しない。
• リアルでインタラクティブなプロトタイプで、ユーザビリティテスト参加者やステークホルダーは最終製品の正確な表現を得られる。
• ダークモードやマルチブランドのデザインシステムで、テーマの切り替えを試すことができる。

Iress についての記事はこちら。

３．TeamPassword

先述の２つのユースケースは企業向け製品でしたが、「コードからデザイン」手法はスタートアップ企業や小規模チームにはどうでしょう？ TeamPassword は、競争の激しいパスワード管理市場で事業を展開していますが、このスタートアップは、UX デザイナーがいないことがの最大の課題です。

パスワードや機密データを預かるスタートアップ企業にとって、ユーザビリティの問題やデザインの不整合は信頼を損ない、それで TeamPassword の評判が落ち、チャーンにつながってしまいます。

そこで TeamPassword のエンジニアは、コードプロトタイプを使ってデザインとユーザーテストをすべて行いました。ただそのプロトタイプは、製品の機能と UX（ユーザーエクスペリエンス）を正確に表現していましたが、アイデアを構築して反復するのには時間がかかりました。

２０２２年、TeamPassword は MUI デザインシステムに切り替えて、Merge を使って UXPin と同期させました。その際、エンジニアはプロトタイプを開発するのではなく、UXPin でカスタム MUI React ライブラリを使いました。そしてこの「コードからデザイン」のワークフローで、ユーザビリティの問題やデザインの劣化がなくなり、市場投入までの時間が大幅に短縮されました。

TeamPassword のデザイナーがデザインシステムレポジトリを更新すると、変更が自動的に UXPin に同期されるため、常に最新バージョンを使うことができます。また、Merge のバージョン管理により、チームは変更を追跡し、テスト中にバージョンを切り替えることができます。

TeamPassword のケーススタディはこちら。

４．dotSource

dotSource は、ドイツを拠点とするデジタル製品のコンサルティングおよび開発エージェンシーであり、複数のデザインシステムを駆使して、クライアントに製品やソリューションを提供しています。

dotSource が製品を提供する上で最も大きな問題となったのは、デザイン用の UI キットと開発用のコンポーネントライブラリという２つのデザインシステムによる冗長なプロセスと重複作業でした。そこでデザインシステムのドキュメントにより、チームが維持する必要のある３番目の部分が作成されました。

dotSource の「信頼できる唯一の情報源（Single source of truth）」は、実際には ”唯一” ではなく３つでした。これは、多くの組織がデザインシステムで遭遇する問題です。

同社は、「信頼できる唯一の情報源（Single source of truth）」をコードベースにしないといけないのはわかっていましたが、従来の画像ベースのデザインツールを使ってこのワークフローを実現する方法がわかりませんでした。

dotSource は Merge の Storybook 統合を使ってデザインシステムを UXPin と同期しました。そして Storybook により、リリースごとにデザイン システムのレポジトリ、ドキュメント、UXPin のコンポーネントの更新ができます。

dotSource の記事はこちら（英語）。

UXPin での「Code-to Design（コードからデザインへ）」の仕組み

コードコンポーネントを UXPin にインポートする際、製品チームには以下の選択肢があります：

• 製品のデザインシステムを読み込む
• オープンソースの UI ライブラリを読み込む
• 無料トライアル版で利用可能な内臓のライブラリを使う

そのライブラリを UXPin に導入する方法は以下の３つがあります。

• Git 統合： React コンポーネントライブラリをレポジトリから UXPin に同期する。
• Storybook 統合：React、Vue、Angular、Web Components、Ember など、多くのフロントエンドフレームワークを同期できる（全リストは Storybook のドキュメントを参照）。
• npm 統合：デザイナーは、MCM（Merge コンポーネントマネージャ）を使って、npmレジストリからオープンソースライブラリからUIコンポーネントをインポートできる。

npm 統合およびコンポーネントマネージャーの使用に関するチュートリアルが 以下のように３つあります。

• React-Bootstrap
• Ant Design
• MUI

Git と Storybook の統合は少し複雑なので、UXPin のテクニカルサポートチームと協力してMerge のセットアップを完了するには、技術的なスキルが必要です。

「Code-to-Design（コードからデザイン）」を始めてみませんか？無料トライアルにサインアップして、製品開発プロセスのスピードを上げてチームが同じ方向を進める方法をぜひご覧ください。UXPin Merge の無料お試しはこちら。

The post Code-to-Design（コードからデザイン）２０２４年版完全ガイド appeared first on Studio by UXPin.

ReactアプリまたはWebサイトを構築しているなら、プロトタイプで実際のReactコンポーネントを使うことをおすすめします。

その方法などについて、こちらの記事で詳しくご紹介していきます。

主なツール

• UXPin Merge
• Framer
• Storybook
• React-Proto

Git、Storybook、またはnpmからインポートしたコンポーネントを使って、Reactのプロトタイプを構築しませんか。

UXPin Mergeを試して、魅力的で制作準備の整ったレイアウトを１０倍速く作成しましょう。UXPin Mergeをぜひご覧ください。

UXPin Merge

UXPin Merge技術では、レポジトリからコードコンポーネントをデザインプロセスにインポートします。

製品のデザインシステムやオープンソースのライブラリをインポートして、高忠実度で完全に機能するReactプロトタイプを構築できます。

Mergeを使うと、ネイティブ アプリケーション、Webアプリケーション、さらにはテレビまで、クロスプラットフォームアプリケーションのプロトタイプを作成できます。

その際プロトタイプはブラウザ、または iOS およびAndroidアプリケーション用のUXPin Mirrorを介して確認できます。

Mergeを使ってコードコンポーネントをUXPinにインポートするには、以下の３つの方法があります：

• Git統合では、Reactコンポーネントを Gitレポジトリから直接インポートでき、Mergeの機能をフルに利用することができる。
• Merge の Storybook統合で任意のStorybookを接続できることから、React、Vue、Angularなどのより多くのフロントエンドテクノロジーにアクセスすることができる。
• npm統合では、Mergeコンポーネントマネージャーを使って npmレジストリ上のオープンソースのデザインシステムから各UI要素をインポートできる。

主な機能

• バージョン管理（Git 統合のみ）：デザインシステムのレポジトリに変更があると、自動的に UXPin に同期され、デザイナーに最新リリースが通知される。
• パターン（Git 統合のみ）：デザインシステムのコンポーネントを使った新しいパターンの作成や、他のデザインシステムの要素の取り入れなどで、ライブラリを増やすことができる。
• ドラッグ＆ドロップのワークフロー：UXPin のデザインライブラリからコンポーネントをキャンバスにドラッグして UI（ユーザーインターフェース）を作成する。また、プロパティパネルで定義済みのプロパティを調整して、スタイルやインタラクションなどを変更できる。
• 連携：製品チームは、UXPinの有料アカウントを持っていなくても、UXPinのコメントを通じてステークホルダーと連携できる。
• スペック モードとドキュメント： Mergeを使うと、デベロッパーはすでに同じレポジトリにアクセスできるため、デザインハンドオフがよりスムーズになる。その際、デベロッパーはSpecモードを使って、プロパティの検査、距離の測定、本番環境のコンポーネント CSS および JSXのコピー（Git 統合のみ）、製品のスタイル ガイドおよびドキュメントの表示を行うことができる。

料金体系

年間払いの場合では、１ヶ月あたり１１９ドル〜（Companyプラン）

また、AI機能などの新機能を搭載したMerge AIの提供を開始しました。

長所と短所

長所：

• 信頼できる唯一の情報源（Single source of truth）：UXPin Merge を使うと、デベロッパーが最終製品に使うのと同じ React コンポーネントをデザインプロセスでインポートして使えるため、デザイナーとデベロッパーの間のギャップを効果的に埋めることができる。
• 実際のデータ：デザイナーは、JSON、Google Sheets、または CSV を使って実際の製品データを組み込むことができる。また、変数を使ってユーザーの入力をキャプチャし、そのデータを使ってプロファイルアカウントの入力や、動的でパ個別化された UX（ユーザー エクスペリエンス）の提供もできる。
• インタラクティブなプロトタイプ：Reactコンポーネントをプロトタイプに使うことで、デザイナーは最終製品と見分けがつかないインタラクティブなレプリカを作成できる。

短所：

• Javascript に限定される： UXPin Merge は Javascript ライブラリおよびフレームワークでしか動作しない。
• 技術的なセットアップ：製品チームは、コンポーネントライブラリのレポジトリを Merge と互換性のあるものにするのに技術的な支援が要る。ただし、UXPin には ボイラープレートがあり、この作業のお手伝いをすべくテクニカルサポートが提供される。そしてデザイナーは、設定不要な MUI、Material UI、Ant Design、Fluent UI などのビルトインライブラリを使うことができる。

Storybook

StorybookJS は、デベロッパーがコンポーネントを分離して構築できる UI 開発環境です。デベロッパー、デザイナー、ステークホルダーは、各 UI要素のさまざまな状態を可視化できることから、コンポーネント駆動型の開発環境を構築できます。また、React などの様々なフレームワークに対応しています。

Storybookは社内のプロトタイプやコンポーネント主導の開発には優れていますが、ユーザーテストのためのツールや機能はありません。

なので、MergeのStorybook統合を使って、UXPinでプロトタイプを行うために組織の Storybookプロジェクトをインポートするのがおすすめの回避策となります。

Storybook と UXPin Merge を組み合わせることで、デザイナーとデベロッパー間のギャップを効果的に埋めながら、組織全体で「信頼できる唯一の情報源（Single source of truth）」が作られるのです。

主な機能

• コンポーネントストーリー： コンポーネントのさまざまな状態を表示するストーリーを作成できる。
• アドオンエコシステム： 強固なプラグインのエコシステムで Storybook の機能を拡張できる。
• コンポーネント駆動型の開発： 一度に１つのUI要素を開発し、それによってプロパティ、インタラクション、バリアントがすべて表示される。
• ドキュメント： ストーリーとコンポーネントに基づいたドキュメントを自動生成できる。
• 自動テスト： リリース前に複数のテストを実行し、コンポーネントがコード構文、デザイン原則、アクセシビリティ、その他のカスタム要件を満たしていることを確認できる。

料金体系

StorybookJS はオープンソースで無料で利用できますが、アドオンや統合には費用がかかる場合があります。

長所と短所

長所：

• フレームワークにとらわれない：Reactコミュニティでは著名だが、さまざまなJavascript フレームワークに対応している。
• 豊富なエコシステム： 多種多様なアドオンや統合により、Storybook をニーズに合わせてカスタマイズできる。
• 連携： デザイナー、デベロッパー、ステークホルダーが連携できるため、一貫した UI/UX が実現する。

短所：

• 技術的な専門知識： Storybook はデベロッパー向けツールであり、使用にはプログラミングと Javascript のスキルが必要。
• 設定： プロジェクトの複雑さによっては、すべてを正しく設定するのに時間がかかる場合がある。
• 習得： コンポーネント構造と使っているフレームワークの理解が必要。

Framer

Framer は、React Web サイトと Web アプリのためのノーコードデザインツールです。

このプラットフォームの最新のAI機能により、ちょっとしたキーワードでレスポンシブなスターターテンプレートを作成することができます。

主な機能

• コードに裏打ちされたデザイン： React コンポーネントでデザインすることから、プロトタイプから開発への移行が効率化される。
• Figma のプラグイン： Framer で使うために、Figma デザインを HTML に変換する。‐ ただ、その HTML は React に変換されないといけない。
• コードのようなアニメーション：コードを書くことなく、Javascript のようなアニメーションやエフェクトを追加できる。
• プロダクション対応コード： デベロッパーは、ReactのWeb サイトや Webアプリケーションを構築するために、Framer からコードをエクスポートすることができる。

料金体系

年払いの場合、１サイト（プロジェクト）につき１ヶ月あたり５ドルから。

長所と短所

長所：

• インタラクティブなデザイン： 現実的なインタラクションを実現するためのコードコンポーネントを使ったデザイン。
• ノーコード開発： コードを一切記述することなく、制作可能な Web サイトを作成できる。
• スターターテンプレート：Framer には、すぐに始められる Web サイトおよびランディング ページ テンプレートの膨大なライブラリがある。‐ 平均２９〜９９ドルのサードパーティの有料テンプレートもある。

短所：

• コスト：小規模なプロジェクトでは費用対効果が高いが、複数のサイトを運営する場合には、サイトごとの価格モデルは高くつく。また、スターターテンプレートを購入する場合は、コストが上がる。
• Web 専用：FramerはノーコードのWebサイトデザインツールであるため、プロトタイプの範囲が制限される。
• コンポーネントをインポートできない： UXPin Mergeとは異なり、デザインシステムや UIライブラリのインポートはできない。

React-Proto

React-protoは、Reactのデベロッパーのために特別にデザインされた プロトタイピングツール であり、Reactコンポーネントとその関係を作成するための視覚的なインターフェースを提供します。

デベロッパーは UI要素をドラッグ＆ドロップすることで、コードを記述することなくコンポーネント間の親子関係を確立し、それによってステートの場所やプロップの関係を指定することができます。

主な機能

• コンポーネントツリーの可視化：アプリケーション全体の構造とコンポーネントの関係を視覚化する。
• インタラクティブ性：プロトタイプを操作して、ビジュアルツリーに反映された変更を確認する。
• ステート管理：ステートの場所を指定し、データの流れを把握する。
• コードのエクスポート：ビジュアル デザインを機能的なReactコードに変換して、フロントエンド開発を開始する。

料金体系

React-protoはオープンソースなので、無料で使えます。

長所と短所

長所：

• より速いプロトタイプ：React-protoのドラッグ＆ドロップ インターフェースにより、デベロッパーはコードを書くよりも早くコンポーネントとプロトタイプを編集できる。
• コスト効率が高い：オープンソースであるため、全デベロッパーおよびデザイナーにとってコストに優しいオプションとなる。
• コード生成：デザインのコードへの変換がしやすいことから、デザインと開発の間の壁が低くなる。

短所：

• 技術的なスキルが必要：React-protoはデザイナーにとって使いやすいツールではなく、効果的に使うには、React の深い経験などの技術スキルが必要。
• 機能が制限されている：React-protoにはオープンソースツールとしての機能があるが、ユーザー テストには不向き。
• サポートなし：React-protoには、Github のコミュニティ以外でのサポートやオンボーディングがない。

Reactを使用したWebサイトとアプリケーションのプロトタイプ

素晴らしいReactプロトタイピングツールはありますが、デザイナーにとって使いやすく、使い慣れた作業環境を提供しているプラットフォームは UXPinしかありません。

UXPinは、見た目も操作感も他のデザインツールと同じですが、UXPinでデザイナーが React、Vue、Angular などのコード コンポーネントを使ってプロトタイプを作成できるようになることで、プロトタイプの幅が広がります。

Git レポジトリ、Storybook、またはインポートされた npm パッケージからの React コンポーネントを使って、本番環境に対応したレイアウトを構築しませんか。

UIを作成して生産性を向上させましょう。 UXPin Mergeをぜひご覧ください。

The post React を使ったおすすめの プロトタイピングツール appeared first on Studio by UXPin.

強固なバックエンド機能と柔軟でスタイリッシュなフロントエンドの両方が必要な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.

React デザインシステムをゼロから構築するには、慎重な計画と検討が必要であり、組織とそのエンドユーザーに役立つコンポーネントライブラリを作成するには、複数の部門とステークホルダーからの意見が不可欠です。

そこで本記事では、Reactのデザインシステムと、コンポーネント開発、ドキュメンテーション、ガバナンス、デザインツールなどへのアプローチ方法について見ていきます。また、重要なトピックが１２個もカバーされている、デザインシステムを構築するためのステップバイステップのガイドもあります。

主なポイント：

• Reactデザインシステムは、ReactJSを使って構築された再利用可能なコード化されたコンポーネント、開発ガイドライン、アセットのコレクションである。
• React デザインシステムのコンポーネントには、事前構築されたボタン、フォーム、ナビゲーションメニュー、カード、その他の UI（ユーザーインターフェース）のビルディングブロックが含まれる。
• Reactデザインシステムを始めるには、「MUIやFluent UI のようなオープンソースのReactコンポーネントを使う」か、「ゼロからの構築」かである。
• プロトタイプで React デザインシステムを使うための最良のツールの１つとして、デザイナーが開発で再利用できる実際のコンポーネントを使えるようになることから、UXPin Merge が挙げられる。

UI コンポーネントを UXPin に取り込み、Reactデザインシステムに基づいてデザイン性の高いプロトタイプを作成しませんか。アプリの構築が１０倍速くなって、開発のスピードが上がります。こちらから UXPin Merge をぜひご覧ください。

Reactデザインシステム とは

Reactデザインシステムは、UI（ユーザーインターフェイス）構築のために広く使われている JavaScript ライブラリである React で使うために特別に構築された、再利用可能な UI コンポーネントとガイドラインのコレクションであり、ボタン、フォーム、ナビゲーションバー、カードなど、事前デザイン済みでカスタマイズ可能なコンポーネントのセットと、React アプリケーション内での使用と実装のためのガイドラインが含まれています。

Reactデザインシステムは、プロジェクト間で簡単に再利用できる統一されたコンポーネントとデザインパターンのセットを提供することで、UI開発の一貫性、効率性、拡張性を促進することを主な目的とします。デベロッパーは Reactデザインシステムを活用することで開発プロセスの効率化、コードの重複の低減、アプリケーション全体でまとまりのある洗練されたルック＆フィールの確保ができます。

React デザインシステムの主な構成要素には、大体以下のようなものが含まれます：

• 再利用可能なコンポーネント： 入力フィールド、ドロップダウンメニュー、モーダル、タブなど、一般的な UI パターンや機能をカプセル化した React コンポーネントのライブラリ。
• デザインガイドライン： プロップ、スタイリングオプション、アクセシビリティへの配慮、React アプリケーション内での統合のベストプラクティスなどの情報を含む、各コンポーネントの使用方法に関する明確なドキュメントとガイドライン。
• テーマ設定とカスタマイズ： テーマ設定とカスタマイズに対応していることから、デベロッパーはブランドアイデンティティやデザイン要件に合わせてデザインシステムを簡単に適応させることができる。
• レスポンシブ・デザイン： さまざまな画面サイズやデバイスに対応し、デスクトップ、タブレット、モバイルの各プラットフォームで一貫したユーザー体験が得られるようにデザインされたコンポーネント。
• アクセシビリティ： アクセシビリティを考慮し、アクセシビリティの基準とガイドラインを満たすようにデザインされたコンポーネントだと、デザインシステムで構築されたアプリケーションは、ハンディキャップのあるユーザーを含むすべてのユーザーが使用できるようになる。

つまり、React デザインシステムは、Reactアプリケーションを構築するための強固な基盤を提供し、デベロッパーは最小限の労力で一貫性のある高品質の UIを作成できるようになります。コラボレーション、効率性、保守性を促進し、Reactベースのプロジェクトに取り組むチームにとって貴重なツールとなるわけです。

React デザインシステムのメリット

React デザインシステムの使用や構築には、多くの利点があります。例えば React のコンポーネント駆動型の開発アプローチは、デザインシステムに最適なモジュール形式のUIライブラリになり、フロントエンドデベロッパーは、React コンポーネントを原子まで分解し、それを組み合わせて新しい UI要素、パターン、テンプレートを作成できます。

また、React は最も広く使われている UI ライブラリの１つで、デザインシステムを構築する上で以下のように多くのメリットがあります：

• 質問や問題解決ができる、デベロッパー向けの大きなコミュニティ
• 豊富なJavascriptツールと統合
• インスピレーションの源となるきちんと確立された多くのデザインシステム

React デザインシステムを利用している企業

以下は、デザインシステムに React を使っている企業です：

• Instacart/Snacks
• Shopify Polaris
• Atlassian デザインシステム
• Salesforce Lightning
• IBM のカーボンデザインシステム
• Microsoft の Fluent UI
• Google のマテリアルデザイン で構築された MUI (Material UI)

コンポーネントのシンタックス、ドキュメント、ガイドライン、その他のデザインシステム要素について学ぶには、これらのデザインシステムをチェックするのがおすすめです。

また、デザインシステムのインスピレーションを得るには、Adele をチェックしてみてください。これは、ダウンロードして分析できる GitHub レポジトリへのリンクを備えた、公開されているデザイン システムとパターン ライブラリのレポジトリです。

React デザインシステムの基礎

アトミックデザインの原理

アトミックデザインとは、ブラッド・フロスト氏によって考案された「UI要素を以下の５つのカテゴリーに分類するシステム」です：

1. 原子：これ以上分解できない基本的な UI 要素であり、HTML タグ、フォント、ボタン、アニメーション、カラーパレットなどがある。
2. 分子：原子の集まりで、特定の機能や目的を果たす構成要素を作り出し、検索入力、ナビゲーション リンク、ドロップダウン メニューなどがある。
3. 有機体：組み合わせて UI を作成する複雑な UI パターンであり、ヘッダー ナビゲーション バー、フッター、画像カルーセルなどがある。
4. テンプレート：複数の有機体が連携して動作する完全な UI を表し、ダッシュボード、ニュース フィード、チャット UI などがある。
5. ページ：テンプレートのさまざまなインスタンスと、画面内でコンテンツがどのように変化するかを表し、例えば、ニュースフィードのコンテンツの更新や、チャットでのメッセージ受信などがある。

アトミックデザインが React のデザインシステムにとって重要な理由

アトミックデザインの方法論で、React のモジュール性と再利用性の利点を活用できるようになります。デザインシステムを多くの原子の集合体としてアプローチすることで、製品に適応し進化できる柔軟でスケーラブルな UIライブラリを開発しやすくします。

そしてデザインシステムチームは、原子や分子を組み合わせることで、新しいコンポーネントやパターンをより速やかに構築することができ、また、このモジュラーアプローチは、ゼロから開発するよりも、今あるものを組み合わせればいいので、ワンオフの構築がより簡単で、コスト効率も高くなります。

React デザインシステムにおけるコンポーネントの役割

React コンポーネントは、UI やアプリ全体の一貫性、再利用性、保守性を確保するのに役立つビルディングブロックであり、その UI 要素は、以下のような多くの重要な目的を果たします：

• モジュール性： React コンポーネントはデザイン上モジュール化されているため、UI ライブラリの組み合わせ、再利用、管理がしやすくなる。
• 一貫性： React の簡単な再利用性により、デベロッパーはデザイン原則、スタイル、インタラクションを各コンポーネントに組み込み、アプリケーションのどこからでも呼び出すことができる。
• 再利用性： デベロッパーは、再利用可能なコンポーネントの UI ライブラリを活用することで、新製品を開発する際の時間とリソースを節約でき、この再利用性により、ゼロからコードを書く必要がなくなるため、エラーや技術的負債も減らすことができる。
• カスタマイズ性：デベロッパーは、デザインガイドラインに従ったり、UI ライブラリに影響を与えながら、特定のコンポーネントを簡単にカスタマイズすることができる。
• 保守性： コンポーネントが一元化されたレポジトリに保存されているため、デベロッパーは更新やバグ修正を１つの場所からプッシュすることができ、それによってデザインシステムとその製品の保守と改善がしやすくなる。
• スケーラビリティ： エンジニアは、React コンポーネントを拡張して適応させ、製品や新技術に合わせて進化させることができる。
• アクセシビリティ： デベロッパーは、コンポーネントレベルで基本的なアクセシビリティ標準を組み込むことができるため、製品全体への実装がしやすくなる。

デザイントークンを使うことの重要性

デザイントークンには、React デザインシステムのコアバリューが組み込まれており、そのトークンには、色、タイポグラフィ、スペーシング、サイジング、ステート、インタラクティブ性などのプロパティが含まれ、複数のプラットフォーム、デバイス、OS（オペレーティングシステム）にわたって一貫したデザイン言語を維持します。

デザイントークンは、複数のプラットフォーム用に多くの値を含むことができます。例えば、UXPin のホームページでは CTA（Call to Action）に黄色を使っており、この黄色の16進コードは「#FCC821」で、以下のような方法で表現できます：

• HEX: #FCC821
• RGB (CSS): rgb(252, 200, 33)
• RGBA: rgba(252, 200, 33, 1)
• Octal (Android/Flutter): 77144041

そして、この４つの値をすべて１つのデザイントークンの下に以下のようにカプセル化することができます：

• cta-background-primary

なので、この色をプラットフォームに実装する場合は、コードの代わりにトークンを使います。 また、例えば同じ色でも、あるチームは 16 進数、別のチームは RGB、また別のチームが 8 進数を参照すると混乱が生じてエラーにつながるような可能性がありますが、デザイン トークンを使うと、全員が同じ言語を使用するため、部門を超えたコラボレーションがしやすくなります。

また、デザイントークンで、デザインシステムチームはトークンファイルのプロパティの変更だけで製品全体の変更を実装するこができるようになります。例えば、４つのコードを１か所で調整することで、インスタンスやスタイルシートを個別に更新するのではなく、製品エコシステム全体で cta-background-primaryのデザイントークンを黄色から青色に変更できます。

 Reactデザインシステム を始める

表面的には、デザインシステムはシンプルに見えますが、実際には、その UI ライブラリは、多くの可動部分を持つ複雑な有機体です。ここでは、Reactのデザインシステムを計画する際に考慮すべき点を見ていきましょう。

これらの要素は、デザインシステムのガバナンスプロトコルと手順の基礎を築くことになることから、この初期の意思決定プロセスの各段階をドキュメント化することが非常に重要です。

モノレポ と ポリレポ のレポジトリ

デザインシステムの React コンポーネントライブラリに「モノレポ（単一のレポジトリ」を使うか、「ポリレポ」を使うかを決定します。

モノレポは依存関係の管理をシンプルにし、複数のパッケージを同時に扱いやすくします。対するポリレポは、パッケージ間のモジュール性と分離性を高め、個々のコンポーネントを独立して保守・使用しやすくします。

アクセンチュアでモノレポとポリレポの長所と短所について語られています（英語）

コンポーネントの構成

製品およびチームにとって最も理にかなった方法でコンポーネントライブラリを整理しましょう。例えば、コンポーネントを機能性、ドメイン、または Atomic Design-MUI はでグループ分けできます ‐ ちなみに MUIはUIライブラリを以下のように機能別に整理しています：

• 入力： ボタン、スイッチ、テキストフィールドなど
• ナビゲーション：ドロワー、メニュー、ページネーションなど
• レイアウト：ボックス、コンテナ、グリッドなど
• データ表示：アバター、アイコン、リストなど

ただ、このようなコンポーネントがどのように分類されるとしても、それぞれに独自のソースコード、スタイル、テスト、ドキュメントがないといけません。

デザイントークンの管理

デザイントークンの管理を、デザインシステムチームが管理する専用のフォルダまたはパッケージに一元化します。この集中管理により、変更と更新はシンプルになりながら、より良いメンテナンスとガバナンスは促進されます。

テーマ設定とカスタマイズ

デザインシステムのテーマ設定とカスタマイズは、最新の製品開発には不可欠であり、大体は「ライトモード」と「ダークモード」の少なくとも２つのテーマが必要です。また、マルチブランドのデザインシステムには、より大きなカスタマイズ性と柔軟性が要求されるため、開発前にこのような要素を考慮する必要があります。

React ライブラリのテーマの設定方法については、CSS Tricks の「Theming and Theme Switching with React and styled-components」をご覧ください。

ドキュメンテーション

デザインシステムのドキュメント化は、導入の成功や、一貫した実装に不可欠であり、そのドキュメントには、デザイン言語、 (コンテンツ、デザイン、コード、アクセシビリティなどの）ガイドライン、スタイル ガイド、ユースケース、コード例、ツール、その他の重要な情報が含まれていないといけません。

Storybook のようなツールで、デザインシステムのドキュメント管理と更新を一元化することができ、 Merge を使って Storybook を UXPin に同期し、デザインと開発全体にわたって「信頼できる唯一の情報源（Siingle source of truth）」を作成できます。

テスト

コンポーネント テストを管理および組織するための構造を計画します。‐ これが、Storybook を検討するもう 1 つの理由です。 Storybookは、ビジュアル、インタラクション、アクセシビリティ、スナップショットなどの複数のバグ防止テストを備えた自動のコンポーネントテストが内蔵されていますからね。

バージョン管理とリリース管理

React ライブラリのバージョン管理戦略とリリース管理プロセスを確立して、デザインシステムが常に更新され、製品と互換性があることを確認します。

デザインツール

デザイナーは、プロトタイプとテストのために React デザインシステムにアクセスする必要があります。 一般的な戦略はベクターベースのツールの使用ですが、これは React デザインシステムの以下の２つの形式を更新して維持するということです：

• レポジトリ内のコンポーネント ライブラリ
• デザインチーム向けの UI キット

UXPin Merge を使うと、React ライブラリを UXPin のデザイン エディターにインポートできるため、デザイナーとエンジニアはまったく同じUIコンポーネントを使うことができます。 そしてコードコンポーネントの同期には、いくつかのオプションがあります。 UXPin Merge についての詳細は、こちらからぜひご覧下さい。

The post Reactデザインシステム の始め方 appeared first on Studio by UXPin.

Figma のコンポーネントライブラリは、再利用可能な UI要素を作成してチームメンバーと共有できる素晴らしい方法です。

デザイナーは、Figmaでコンポーネントを使ってUIやプロトタイプを作成することができ、プロジェクト間の一貫性を維持することができます。

ただ、Figmaのコンポーネントライブラリには、インタラクティブなプロトタイプを作成できないなどの制限がいくつかあります。

一方 、UXPin MergeはFigmaと異なり、実物に近くて完全にインタラクティブなプロトタイプを作成することができます。

主なポイント：

• Figmaコンポーネントライブラリは、再利用可能な UI要素を作成してそれを共有するための素晴らしい方法である。
• UXPin Mergeは、Figma のコンポーネントライブラリに代わるもので、完全にインタラクティブなプロトタイプを作成できる。
• Figmaのコンポーネントライブラリには、インタラクティブなプロトタイプを作成できないという制限がある。
• MergeはUI コンポーネントをレポジトリからデザインプロセスにインポートすることで、デザインと開発の間に「信頼できる唯一の情報源（Single source of truth）」を作成する。
• Merge では、デザインプロセスでコードコンポーネントを使って完全にインタラクティブなプロトタイプを作成し、テストを改善することができる。

Figmaでの基本的なプロトタイプから、UXPinでの高度なプロトタイプに切り替えてみませんか？こちらから UXPin Merge をぜひご覧ください。

Figma のコンポーネントライブラリとは

Figma のコンポーネントライブラリでは、Figma のコンポーネントとスタイルを作成し、そのファイルを公開することによって、チームメンバーと共有することができます。

そしてチームメンバーは、この共有ファイルにアクセスし、コンポーネントやスタイルをデザインシステムとして使うことができます。

デザインチームは、このようなコンポーネントやスタイルを変更し、それをライブラリにプッシュすることができます。

また、権限を作成して、権限を与えられたチーム メンバーだけがコンポーネントライブラリを変更できるようにもできます。

Figma のコンポーネントとコンポーネントインスタンスとは

Figma のコンポーネントは、コンポーネントライブラリの一部を構成する、単一の再利用可能な UI 要素であり、Figma のドキュメントによると、コンポーネントライブラリには、以下のような様々なものを保存することができます：

• UI コンポーネント
• 企業ロゴとブランドアセット
• アイコン
• デバイスモックアップ
• Android、iOS、Linux、OSX など、プラットフォームOSコンポーネント
• カーソル
• 赤線と注釈のコンポーネント
• 共同デザインスプリントを実行するための付箋と投票用「ステッカー」
• 流れを示す矢印やフローチャートの形などのダイアグラム作成用「ヘルパー」

このようなマスターコンポーネントは、プライマリコンポーネントファイルか、左サイドバーの［assets（アセット）］のタブで見ることができます。

コンポーネントインスタンスは、UI やプロトタイプの作成に使われるライブラリコンポーネントのコピーです。例えば、ライブラリに２０画面に表示されるアプリバーのコンポーネントがあるとします。

この２０個のアプリバーは、ライブラリコンポーネントのインスタンスになります。

ライブラリコンポーネントを更新すると、そのインスタンスもすべて変更されます。Figma では、コンポーネントが更新されるたびにそれがデザイナーに通知され、いつ最新バージョンを受け入れるかを選択できます。

Figma の「スタイル」とは

「スタイル」によって、チームやプロジェクト間で一貫性が保たれ、誰もが同じプロパティや値を使えるようになります。

Figmaでは、色、タイポグラフィ、サイズ、間隔、ボーダー半径など、再利用可能なスタイルプロパティを保存でき、これは CSS の変数に相当します。

そして、HEXコードやフォントサイズの値を入力する代わりに、例えば、プライマリーブルーや見出し１などの定義済みのスタイルを選択します。

Figma でコンポーネントライブラリを見つける方法

Figma のコンポーネントライブラリを探すには、以下のような方法があります：

• デザインライブラリのファイルの中で作業している場合は、コンポーネントを右クリックし、［Go to main component（メインコンポーネントに移動）］を選択する。また、右サイドバーのコンポーネント名の横にある［Figma Component（Figmaのコンポーネント）］のアイコンをクリックすることもできる。
• メインのファイルにアクセスできない場合、Figma のコンポーネントライブラリにアクセスすることはできないが、左サイドバーの「Assets（アセット）」タブで、のコンポーネントをすべて見ることができる。

Figma のコンポーネントライブラリのコンポーネントの使い方

• 左サイドバーの「Assets（アセット）」タブをクリックする。
• 検索フィールドを使ってアセットを検索するか、下のドロップダウンから「ライブラリ」を選択する。
• 「Assets」タブからコンポーネントをクリックするか、キャンバス上にドラッグする。
• 左サイドバーの「Design」タブでコンポーネントのプロパティと変数を調整する。

インスタンスを切り離すことで、コンポーネントを再デザインできます。

そして、切り離したインスタンスに加えた編集は、以前のコンポーネントやインスタンスには影響せず、変更が完了したら、これを新しいコンポーネントとして保存し、「Assets」のフォルダに表示されます。

Figma のコンポーネントライブラリの限界と課題

Figma のコンポーネントライブラリで、UI 要素の再利用や共有がしやすくなりますが、それを使ってできることには、以下のような制限があります：

• Figma のコンポーネントは、美しい UI デザインを作成するが、インタラクティブなプロトタイプを作成する機能がないため、デザイナーが達成できる範囲は限られる。
• デザインチームは、Figmaのコンポーネントをよりインタラクティブにするには追加のツールやプラグインが必要であり、コストとワークフローの複雑さが増す。
• コンポーネントで、デザインチームは Figma で UI や基本的なプロトタイプを構築することができるが、デベロッパーにとって使いやすいものではなく、コードのUIコンポーネントとずれる可能性がある。
• インスタンスを切り離すのは、新しいコンポーネントを作成するのに便利だが、デザインチームが UI要素を許可なく編集や操作をできるということになる。
• Figmaのコンポーネントライブラリをデザインシステムに使う場合、DS チームは、「Figma用」と「コード用」の２つのバージョンを管理しないといけない。

インタラクティブなプロトタイプでより良い結果を得ませんか。世界最先端の UX デザインテクノロジーである Merge をぜひお試し下さい。

UXPin Merge – Figmaのライブラリに代わるおすすめライブラリ

UXPin Merge のテクノロジーは、UIコンポーネントを Github や Bitbucket、GitLab などのレポジトリからデザインプロセスにインポートします。

そしてデザインチームは、この完全にインタラクティブなコードコンポーネントを使って、最終製品のように見えるプロトタイプを作成できます。

スタイリングとインタラクティブ機能

Merge のコンポーネントには、スタイリングやインタラクティブ性などのプロパティが「ベイクイン」されているため、デザインチームは正しい値の入力や、コードコンポーネントライブラリからのアニメーションのコピーを気にする必要はありません。

また、デザインシステムチームが、React props や Storybook Args を使ってプロパティを確定すると、UXPin のプロパティパネルにそれが表示されます。

例えば、ボタンのステート、テキストスタイル、色、サイズ、アイコン、インタラクションは、デザイナーがドロップダウンで選択できます。

さらに、Mergeでデザインドリフトがなくなり、UI要素への誤った修正を防ぐことができます。

デザイナーは Mergeコンポーネントを切り離して変更することはできず、デザインシステムチームのみが、UXPinに同期するレポジトリ内のコードコンポーネントを変更してデザイナーに更新を通知できます。

信頼できる唯一の情報源（Single source of truth）

多くのデザインツールは、「信頼できる唯一の情報源（Single source of truth）」が提供されていると主張してますが、現実には、画像ベースのソリューションは、デザインツール、プロトタイピングツール、ドキュメンテーション、コード UI ライブラリなど、複数の分野でのアップデートが必要です。

そこで Mergeを使うと、製品開発チーム全体 （UX デザイナー、製品チーム、エンジニア）が同じレポジトリからコンポーネントを引っ張って来れます。

レポジトリへの変更はすべて UXPin に自動的に同期され、その更新がデザイナーに通知され、これが真の「信頼できる唯一の情報源」となります。

UI キット、コードコンポーネント、関連ドキュメントを更新する代わりに、デザインシステムチームは１つのリリースを全員に同時にプッシュするということです。

UXPin で Merge のコンポーネントライブラリを使う方法

デザインシステムチームがセットアップを完了すると、コンポーネントライブラリを UXPin で使えるようになります。

Merge のコンポーネントライブラリの使い方についてのステップバイステップのチュートリアルを以下で見てみましょう：

ステップ 1. デザインシステムのライブラリを開く

デザインシステムは、UXPin の左サイドバーのデザインシステムライブラリの下に全て表示されます。

カテゴリーは以下の２つです：

• MERGE LIBRARIES：レポジトリからのコードコンポーネントライブラリ
• CLASIC LIBRARIES： 通常の UXPin コンポーネント

ステップ2. デザインシステムを選択する

作業したいデザインシステムを選択すると、コンポーネントライブラリが左サイドバーに開きます。

ライブラリの上には、［コンポーネント」と［Patterns（パターン）］のタブがあります（パターンについては後ほど…）。

コンポーネントにはコンポーネント ライブラリが含まれており、ドロップダウンにはボタン、スイッチ、カード、アイコンなど)の使用可能なカテゴリが表示されます。

ステップ3. コンポーネントライブラリの使用

コンポーネントをクリックしてキャンバスに追加します。

コンポーネントのプロパティを表示し、右側のプロパティパネルで調整します。

このプロセスを繰り返して、UI とプロトタイプを作ります。

ステップ4. UXPin – Pattern（パターン）の使い方

パターンを使うと、デザインシステムから複数の UI 要素を組み合わせて新しいコンポーネントやテンプレートを作成でき、複数のコンポーネントライブラリからコンポーネントを使って、新しいパターンをデザインシステムに昇格させる前にテストすることができます。

また、パターンでコンポーネントの複数の状態や変数を作成すこともできいます。

例えば、UI に「ライトモード」と「ダークモード」のバージョンが欲しいけどデザインシステムには「ライト」の変数しかない場合、UXPinでこの「ダークモード」の変数を作成し、それをパターンに保存して、チームメンバーと共有することもできます。

ステップ5. インタラクティブコンポーネントを使ったプロトタイピングとテスト

UXPin でプロトタイプをテストするには、以下の２つのオプションがあります：

• プレビューと共有： ブラウザでプロトタイプを起動
• UXPin Mirror： iOS および Android デバイスでのテスト用アプリ

Merge のプロトタイプで、デザインチームはエンジニアが開発に使うのと同じコンポーネントを使って複雑なプロトタイプを作成できるようになります。

ステークホルダーやユーザーは最終製品と同じように Merge プロトタイプを操作することができ、デザインチームは反復と改善のための有意義なフィードバックを得ることができます。

高品質のインタラクティブプロトタイプを使うのは、デザイナーはデザインプロセスにおいて、より多くのユーザビリティの問題を解決し、より良いビジネスチャンスを特定できるということです。

ステップ6. デザインハンドオフ

Merge ではデベロッパーとエンジニアが同じ UI ライブラリを使うため、デザインから開発への移行はシームレスです。

また、UXPin は本番環境で使用可能な JSX を生成するため、デベロッパーはコードを IDE （統合開発環境）にコピー/貼り付けて開発することができます。

世界最先端の製品デザインツールで、デザインと開発のギャップを埋めませんか。詳しくは Mergeページをぜひご覧ください。

The post 【FigmaとUXPin】 コンポーネントライブラリにおける違い appeared first on Studio by UXPin.

ChatGPT は  OpenAIによって開発された言語モデルであり、深層学習（ディープラーニング）技術を利用してテキストを理解して生成する生成 AI ツールの一部です

このモデルは、質問したりプロンプトを表示したりするためのチャットボットのように機能し、コンテクストに応じた適切な応答を生成します。

また、この OpenAIツールは、さまざまな自然言語の理解および生成タスクを処理するように設計されており、プロンプトに基づいてオープンソースライブラリから UI コンポーネントを生成するなど、さまざまなアプリケーションに多用途に使うことができます。

UXPin の AI Component Creator を試してみて、ChatGPT でカスタム UI コンポーネントを生成しませんか。

生成されたコンポーネントはPattrens（パターン）として保存され、将来再利用できます。他のツールよりも８.６倍速くデザインできるその他の機能もぜひお試しください。UXPin Mergeを無料でお試し

ChatGPT とは

ChatGPT は OpenAI によって開発された言語モデルであり、受け取った入力に基づいてテキストを理解し、生成するように設計されています。

また、様々なインターネットテキストで訓練されており、質問への回答、会話への参加、テキストの要約、言語の翻訳など、様々な自然言語処理タスクを実行することができます。

ChatGPTは、さまざまな自然言語処理の課題に対処できる、強力で多用途かつユーザーに優しい言語モデルを提供するために作成されました。

そしてその幅広い適用性と、トレーニングに使用されたデータの規模を組み合わせることで、会話型AIと言語理解の分野で大きな進歩をもたらしています。

ChatGPTは最も強力な言語モデルのひとつですが、唯一無二というわけではなく、Googleの Bert、T5、BaiduのERNIE、Facebook の Blender Bot や XLNet というモデルもあります。

そして ChatGPT 3.5 は、リリース時点でこれまでに作成された最大の言語モデルの1つであり、1,750億という驚異的なパラメータを備えていました。

そしてそのトレーニング データにより、小規模なモデルと比較して、よりコンテクストに関連した一貫性のある多用途の応答を生成する能力が得られたのです。

多くのユーザーはワークフローにChatGPTを実装し、APIキーを使ってAIツールを構築できるようになりました。UXPinの新機能「AI Component Creator」では、OpenAIが提供するAPIを使うと、デベロッパーはモデルをアプリケーション、製品、またはサービスに統合することが可能です。

ChatGPT の仕組み

ChatGPT は、ユーザーから受け取ったプロンプトに応答して人間のようなテキストを生成することで機能し、テキストのブロックから実際の会話、さらにはビジュアルまで、あらゆるタイプのレスポンスを生成することができます。

そしてユーザーは、ChatGPT UI に「プロンプト」と呼ばれるものを入力することで、ChatGPTと対話します。

プロンプトは、応答を生成するためにモデルに提供される入力クエリまたはステートメントです。そのプロンプトというのは、希望する出力を引き出すためにユーザーがモデルに与えるコマンドまたは質問であり、ユーザーがプロンプトをどのように表現するかによって、返される結果の質と関連性が変わってきます。

では、ChatGPT のような言語モデルのプロンプトの例を以下で見てみましょう：

• 会話：「好きなプログラミング言語とその理由を教えてください。」
• 指示：「Webサイトのパフォーマンスとスピード上げるためのヒントを下さい。」
• クリエイティブライティング：「未来都市での思いがけない冒険についての短編小説を書いて下さい。」
• 問題解決：「コードのデバッグで困っています。こ のJavaScrip t関数の問題を特定するのを手伝ってくれませんか？」
• 教育：「機械学習の概念をわかりやすく説明してください。」
• 意見：「AIの最新の進歩についてどう思いますか？」
• ロールプレイのシナリオ：「旅行アシスタントだとして、アウトドアアクティビティが好きな人のために、週末旅行の旅程を計画してください。」
• 比較：「Web 開発に Python と JavaScriptを使うことの長所と短所を比較検討して下さい。」
• タスク：「与えられた数の階乗を求める Python 関数を書いてください。」
• 説明：「ブロックチェーン技術の機能とその応用について説明して下さい。」

これらのプロンプトは動作動詞で始まっていることがわかります。これはユーザーが ChatGPT に何を求めているかを示すもので、説明、計画、比較、回答、間違いの発見などがあり、ChatGPT はそれに対して最適な答えを導き出します。

その際、会話ごとに 1 つのプロンプトを尋ねることも、満足するまでディスカッションを続けることもできます。

そしてプロンプトを使う際は、直面している課題や改善したい点を具体的に伝えると効果的です。

コンテクストを提供し、実践的なアドバイスを求めることで、ChatGPT からよりカスタマイズされた実用的な回答が得られます。

UI デザインに ChatGPT を使うメリット

ChatGPT は生産性の向上、スキル磨き、質問に対する答えをもたらします。もちろん、これは単なる言語モデルであるため、その推奨事項を無条件に信用するのではなく、得られた答えが正しいかどうかわからない場合は、微調整して再試行してください。

UI デザインで ChatGPT を使うメリットには以下のようなものがあります：

• トレーニング不要：特定のデータセットで大規模なトレーニングを必要とする従来の ML（機械学習）モデルとは異なり、ChatGPT は UI デザインなどの様々なトピックについて事前にトレーニングされている。なので、ユーザー自身がモデルをトレーニングする必要がない。
• インスタントデザインアシスタンス：ChatGPT は、クエリに対する迅速な応答を提供し、それによってインスタントガイダンスが提供されることから、インターネットで答えを探したり、仲間に尋ねたりする必要がなくなる。
• 効率的な問題解決：ChatGPT の早くて有益な応答により、デザイナーは高い生産性を維持できる。また、このモデルの効率性で、デザインプロセス全体の生産性が上がる。

UX デザイナーは、ChatGPT を使って事前のユーザー調査やペルソナの作成、ユーザーフローの完成度を高める一方で、ChatGPT にレイアウトや配色、タイポグラフィの組み合わせを考案するよう依頼します。

AI Component Creator に関しては、それでシンプルまたは複雑なUI コンポーネントを生成することができるので、MVP（実用最小限の製品）や高度なアプリをより速く構築することができます。では、どんな機能が期待できるか見てみましょう。

ChatGPT で UI コンポーネントを生成する方法

ChatGPT を使って UI コンポーネントを生成するには、必要なコンポーネントを受け取るための明確で詳細なプロンプトを提供する必要があります。

UXPin Mergeを使えば、OpenAI の Webサイトに行かなくても、UIデザインのヘルプを得られます。このツールは UXPin のエディタに組み込まれており、［Quick Tools（クイックツール）］バーで利用でき、必要なときにいつでもすぐに起動できます。

そしてこのツールは、デザインに直接表示されるプロンプトに基づいて UIコンポーネントを生成します。

ChatGPT 統合で生成される UI コンポーネントは Tailwind UI コンポーネントです。これは UXPin Merge で利用可能な数少ないビルトインオープンソースコンポーネントライブラリの１つであり、ランディングページ、ドキュメントハブ、タスク管理アプリ、従業員ポータルなど、コンテンツ優先型の Web デザインを構築するための素晴らしいリソースです。

また、生成されたコンポーネントは、プロジェクト内で他の UXPin Merge のコンポーネントとして使用でき、サイズの変更や位置の変更などが可能です。

UXPin での ChatGPT 統合の使い方

UXPin Mergeアカウントがある場合は、今すぐログインしてください。まだアカウントをお持ちでない方は、こちらで UXPin をぜひ無料でお試しください。

また、統合には OpenAI API が必要ですので、お持ちでない場合は、弊社のサポートまでご連絡いただければ喜んでお手伝い致します。（salesjp@uxpin.com）

その１：コンポーネントのプロンプトを書く

UIデザインを作成しているのに、デザインに合うコンポーネントが見つからないですか？

ではそれを作ってみましょう。UXPinでエディタを開き、［Quick Tools（クイックツール）］バーにある ChatGPT のプラグインに移動して、「AI」と書かれたアイコンをクリックしてください。

そうすると、次のようなモーダルが表示されます：

ここにプロンプトを入力します。プロンプトの例を見た「ChatGPT の仕組み」のセクションに戻ってご確認下さい。

（書く、提供する、識別するなどの）動作動詞 、チャットボットが必要なものを把握するためのコンテキスト、および「応答性」、「グラデーション」、「カスタマイズ可能」などの具体的な詳細がありましたよね。

さらに、要件や制限事項があれば必ず明記してください。

要件は、背景色の特定のHEXコードなど、配色に関するものであったり、アクセシビリティに関する制限であったりします。

Tailwind UI は素晴らしいコンポーネントリソースであり、コンポーネントのインスピレーションでもあります。

Tailwindの Webサイトにアクセスして、 どのようなコンポーネントを作成できるかを見つけてください。

そこには以下のような提案があります：

• 価格表：「以下の３列の価格表を作成してください。カラム1：フリーランサーの価格は19ドル、カラム2：スタートアップの価格は39ドル、カラム3：会社の価格は59ドルです。会社の列は、強調表示されて最も人気のある列としてラベル付けされるべきです。」
• 「お客様の声」のカード：「５つ星評価の ”お客様の声のカード” を作ってください。証言は引用符で囲んで、コピーは ”今まで使った中で最高のツール ” とし、５つ星のうち５つ全部をアクティブにします。色は、星には #FFD700、テキストには#636363 を使います。あとは、ラベルに “長年の顧客”を追加してください。」
• CTA（Call to Action）セクション：「画像で分割された CTA セクションを作成してください。画像は左の列にあり、ホワイトボードの前に人がいます。もう一方の列は ”一緒に働きましょう” という CTA で、オレンジ色の ”お問い合わせ” というボタンがあります。」

その２：UIコンポーネントの生成

このチュートリアルで使うコンポーネントのプロンプトは以下のようになります：

「Leave your message（メッセージを残す）」というヘッダー、メールフィールド、「I accept privacy policy（プライバシーポリシーに同意します）」というテキストを含むチェックボックス、およびユーザーがメッセージを入力できるフィールドを備えたお問い合わせフォームを作成してください。

背景の色には #0000FF を使ってください。

そして、以下のコンポーネントができました（下のスクリーンショットをご覧ください）。

青い背景、メールアドレスとユーザー入力用のインタラクティブな入力フィールド、送信ボタン、クリック可能なチェックボックスがあります。

結果はなかなかいい感じですが、改善できる所もあるので、自由に別の具体的なプロンプトを書いてみてください。

ページとレイヤーパネルでコンポーネントの場所を確認してください。

その際、他のレイヤーの一部ではなく、独立したコンポーネントであることを確認してください。

その３：再利用のためにコンポーネントを保存する

気に入ったコンポーネントができたら、他の場所でも使えるようにライブラリに保存したり、デザイン資料の一部として保管しておきましょう。

コンポーネントはコードでバックアップされ、ワンクリックで開発環境にエクスポートできます。

詳しくは AI Component Creatorのドキュメントをご覧ください。

より良いプロンプトを書くためのリソース

より良いプロンプトを書くのに参考になるリソースを以下にいくつか挙げましょう：

• Prompt Engineering Course by OpenAI — Prompting Guidelines （OpenAI によるプロンプト エンジニアリング コース — プロンプト ガイドライン）‐ アンドレア・バレンズエラ
• How To Write ChatGPT Prompts (150+ Awesome Prompts Inside) （ChatGPTプロンプトの書き方（150以上の素晴らしいプロンプトを収録））‐ エミリー・ゲルテンバッハ
• Writing Effective Prompts in ChatGPT （ChatGPTで効果的なプロンプトを書く）‐ Uxcel

UXPin Mergeで簡単デザイン

AI Component Creator は UXPin に新しく追加された機能で、コードに裏付けされた Tailwind UI ライブラリと完全に整合性のあるコンポーネントを作成するのに適しています。これは、指示に基づいて UI 要素を生成する AI デザインアシスタントだと考えてください。

そして、デザイン全体で簡単に再利用できるカスタム ナビゲーション バー、ペルソナ カード、画像ギャラリー、またはサイドバーが得られます。

Tailwind UI コンポーネントで何が作成できるのか想像できない場合は、TailwindのWebサイトを参考にして下さい。

UXPin Merge を使えば、デザイナーでなくてもデザインのスキルがなくても、インタラクティブで美しい UI を簡単に構築できます。

ドラッグ＆ドロップのような方法で動作するので、ライブラリからコンポーネントを取り出し、それを使ってインターフェースを構築することができます。

また、Tailwind UI 以外にも、MUIv5、React Bootstrap、Ant Design といったReactをベースとしたオープンソースのライブラリがあります。

利用可能なテンプレートから１つを選び、カスタマイズするか、まったく新しいデザインを始めませんか。

そして、デザインからコードをコピーして、そのまま開発ツールに持っていきましょう。UXPin Merge をぜひ無料でお試しください。

The post ChatGPT 統合 – UXPinでUIコンポーネントを生成する方法 appeared first on Studio by UXPin.

UI（ユーザーインターフェース）の要素は、Web デザイン、モバイル、デスクトップ、AR （拡張現実）または VR（仮想現実）のアプリを問わず、製品デザインに最も不可欠な部分であり、すべての製品の核となる構成要素です。

UI 要素やユーザーがどのように UI 要素と相互作用するかを深く理解することは、UI デザイナーや Web デベロッパーとして非常に重要であり、それによって、より良いアプリケーションや Web サイトの構造を作成できるようになります。

また、デザイナーは通常、Web ページやモバイルアプリを作るときに UI 要素を新たに描くことはなく、UI 要素が準備されているレポジトリから始め、コードでバックアップされている場合は、インタラクティブな UI コンポーネントを作成します。

UXPin Merge を使うと、そのコンポーネントを UXPin のデザインエディタに取り込むことができ、数時間ではなく数分で完全に機能する UI を構築できるため、製品チーム全体のワークフローを最適化できます。UXPin Merge の詳細はこちら。

要素とは

簡単に言うと、『UI 要素』はアプリや Web サイトの構成要素です。ユーザーが製品を使う際に相互作用するものであり、ボタンをクリックしてサインアップしたり、ナビゲーション・コンポーネントを使ってページを切り替えたりしてくれます。

また、UI 要素は、優れた UX（ユーザーエクスペリエンス）とデザインされた機能性を実現するものです。

例えば UX デザインは、ユーザーが慣れ親しんでいるデザインパターンの上に成り立っており、デザインパターンを壊してしまうと、ユーザーは訳がわからなくなったり、少なくとも混乱したりするかもしれません。そこでデザイナーは、よく知られた UI 要素を使ってそれを防ぎます。

UI 要素とは何かを学ぶだけでは十分ではなく、使われるコンテクストも知る必要があるのです。

UI 要素３種

理想的には、UI 要素を以下のように大きく３つに分類することができます。

• 入力要素：ユーザーは、入力要素とのインタラクションによって情報入力や、次のステップに進んだりする。
• 出力要素：この要素によって、以前のユーザーアクションの結果が示される。
• ヘルパー要素：さらに「ナビゲーション」、「インフォメーション」、「コンテナ」に分けられ、それによってデジタル製品内を移動したり、情報を得たり、ユーザーの注意をある要素に向けさせたりすることができる。

入力要素

入力要素は、ユーザーによるさまざまな入力を処理する役割を担っており、時には、入力検証プロセスの一部となることもあります。

最もよく使われる入力要素には、以下のようなものがあります：

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

出力要素

出力要素は、ユーザーのさまざまな入力に対する結果を表示する役割を担っており、アラート、警告、成功、エラーメッセージをユーザーに表示します。また、出力要素はもともとニュートラルではなく、入力と様々な操作に依存しています。

ヘルパー要素

その他の要素はすべてこのカテゴリーに入ります。

最も広く使われているヘルパー要素は以下になります：

• お知らせ
• パンくずリスト
• アイコン
• スライダー
• プログレスバー
• ツールチップ

また、ヘルパー要素を以下のように３つのカテゴリーに分類することもできます。

ナビゲーション

ナビゲーションのコンポーネントで、サイト、デスクトップアプリ、モバイルアプリ、その他のデジタル製品内の移動がシンプルになります。また、ナビゲーションを補助する UI 要素には、ナビゲーションメニュー、リンクのリスト、パンくずなどがあります。

インフォメーション

インフォメーションは、例えば、ツールチップ、アイコン、プログレスバーなど、情報の表現を担当します。

グループまたはコンテナ

これは、さまざまなコンポーネントをまとめる役割を担い、ウィジェット、コンテナ、サイドバーなどがこのカテゴリーに含まれます。UXPin ブログのニュースレター購読ウィジェットもコンテナの良い例です。

一般的な 入力 UI 要素９選

ここでは、全デザイナーが知っておくべき、最も一般的な入力要素を９つご紹介します。このリストには、ボタン、チェックボックス、テキストフィールドが含まれ、UI コンポーネントの下に記載されている最もよく使われているデザインシステムに必ずあります。

１．チェックボックス

チェックボックスで、ユーザーはオプションセットから１つ以上のオプションを選択できるようになります。チェックボックスは縦に表示するのがベストプラクティスですが、利用可能なスペースやその他の要素を考慮すれば、複数列でも大丈夫です。

２．ドロップダウン

ドロップダウンで、ユーザーは長いオプションリストから一度に１つの項目を選択できるようになります。また、ラジオボタンよりもコンパクトで、スペースの節約もできます。より良い UX のためには、「一つ選択」」などのラベルとプレースホルダーとしてのヘルパーテキストの追加が必要です。

３．コンボボックス

コンボボックスでは、ユーザーがカスタム値を直接入力するか、リストから値を選択することができます。これは、ドロップダウンリストまたはリストボックスと１行入力フィールドの組み合わせです。

４．ボタン

ボタンで、ユーザーはタッチやクリックでアクションを実行できるようになります。そしてそのアクションは通常、テキスト、アイコン、またはその両方で表示されます。ボタンはUIの中で最も重要なパーツの１つであるため、ユーザーが実際にクリックするようなボタンをデザインすることが重要です。

５．トグル

トグルで、ユーザーは２つの状態の間で ビュー / 値 / 設定 を変更でき、オンとオフの切り替えや、リストビューとグリッドビューの切り替えに便利です。

６．テキストフィールド と パスワードフィールド

「テキストフィールド」と「パスワードフィールド」で、それぞれユーザーはテキスト（文字）とパスワードを入力できるようになります。テキストフィールドでは、単一行入力と複数行入力の両方が可能であり、複数行入力フィールドは「textarea」とも呼ばれます。また、パスワードフィールドでは通常、１行でパスワードを入力することができます。

７．日付ピッカー

日付ピッカーで、ユーザーは日付や時刻を選択することようになり、プラットフォームからネイティブの日付ピッカーを使用することで、一貫した日付値がシステムに送信されます。

８．ラジオボタン

ラジオボタンで、ユーザーは相互に排他的なオプションの事前確定されたセットのうちの１つだけを選択できるようになります。ラジオボタンの一般的なユースケースとして、サインアップフォームでの性別のオプションの選択が挙げられます。

９．確認ダイアログ

確認ダイアログは、たとえば「削除アクションに対するユーザーの同意の収集」など、特定のアクションに対するユーザーの同意を収集する役割を果たします。

一般的な出力要素４つ

１．アラート

アラートは、ユーザーの注意を引く簡潔な重要メッセージを表示し、以下のようなステータスや出力をユーザーに通知します。

２．トースト

これは、ユーザー入力やサーバー応答、計算など、あるイベントがトリガーとなって、小さなテキストボックスが画面に表示される UI 機能を指し、モバイルでは「下部」に、デスクトップでは「左下または右側」に表示されるのが理想的です。

「アラート」と 「トースト」の違いは、前者は勝手に解除されず、後者は一定時間後に解除される点です。

３．バッジ

この機能は、子（達）の右上に小さなバッジを生成し、一般的には、小さなカウンターやインジケータを表します。これは、カートアイコン上のアイテム数や、ユーザーアバター上のオンラインインジケーターのようなものがあります。

４．チャート

チャートは、さまざまなデータの種類とデータの比較を描くことから、複雑なデータセットを表現する一般的な方法です。

また、UI で使用されるチャートの種類は、主に「伝えたいデータ」と、「そのデータについて伝えたいこと」の２つによって決まります。

一般的なヘルパーUI 要素

ナビゲーション

以下の要素はナビゲーションを支援します：

• ナビゲーションメニュー
• リンク一覧
• パンくずリスト
• 検索フィールド
• ページネーション

ナビゲーションメニュー

これは、ユーザーが選択できる値がいくつかあるナビゲーションの UI 要素であり、そこから Web サイト/アプリの別のエリアに移動します。

リンク一覧

その名の通り、リンク一覧はリンクで構成されており、カテゴリーリストのあるサイドバーがこの良い例です。尚、リンクには内部リンクと外部リンクがあります。

パンくずリスト

パンくずリストで、ユーザーはシステム内の現在位置を確認できるようになり、それによって、ナビゲートするための進行中のページをクリックできる軌跡を得られます。

検索フィールド

検索バーは通常、「入力フィールド」と「ボタン」の２つの UI 要素で構成され、これによって、ユーザーはキーワードを入力し、最も関連性の高い結果を期待してシステムに送信することができます。

ページネーション

この機能で、ページ間のコンテンツは分割され、ユーザーはページ間を移動できるようになります。

インフォメーション

UI 要素のこのカテゴリーは、情報を転送します。

それは次のようなものから構成されます：

• ツールチップ
• アイコン
• プログレス（進捗）バー
• 通知
• メッセージボックス
• モーダルウィンドウ

ツールチップ

ツールチップで、ユーザーが要素の上にカーソルを置いたときに、アイテムの名前や目的を示すヒントが表示されます。

アイコン

これは簡略化されたシンボルで、ユーザーのシステムのナビゲート、情報の提示、法令の表示ために使用されます。

プログレスバー

プログレス（進捗）バーはプロセスの進行状況を示すものであり、通常このバーにはクリックできません。

通知

ユーザーがチェックすべき新しい何かを知らせる更新インジケータであり、通常は「タスクの完了」や「新しいチェック項目」などを示します。

メッセージボックス

ユーザーに情報を提供する小さなウィンドウですが、通常は、ユーザーがタスクを続行する際の妨げになることはありません。また、メッセージボックスは、警告や提案などのタスクを実行します。

モーダルウィンドウ

オーバーレイの上にコンテンツを表示するのに使われ、オーバーレイがクリックされるか、閉じるアクションがトリガーされるまで、ページとのインタラクションをブロックします。

グループおよびコンテナ

特定の要素とそれ以外をどのように分けるか？そのためにあるのがグループとコンテナです。

ウィジェット

ウィジェットは、チャットウィンドウ、ダッシュボードのコンポーネント、他のサービスのエンベッドのようなインタラクションの要素です。

コンテナ

コンテナは、さまざまなコンポーネントを一緒に保持します。これには、テキスト、画像、リッチメディアなどが含まれ、コンテナの最良の例の一つとして、モダンな UI デザインにおけるカードが挙げられます。

サイドバー

サイドバーには、他の要素グループやコンポーネントも含まれていますが、それは折りたたみ状態と可視状態の間で切り替えることができます。

検索バー

検索バーには、「検索フィールド」と「検索オプション」があり、通常、検索バーには検索フィールドとフィルタリングオプションがあります。検索バーのいい例としては、X（旧Twitter）の高度な検索が挙げられます。

UXPinでインタラクティブな UI 要素をデザインしよう

一般的な UI 要素がどのようなもので、どのように機能するのかがわかったところで、その知識を実践してみましょう。UXPin には、UI 要素のデザインと整理に必要な機能が全て揃っているので、デザインプロセスがシンプルになります。

デベロッパーのコンポーネントライブラリから入手した既製の UI 要素がある場合はどうなるでしょう？UXPin Merge のテクノロジーを使って、それを UXPin エディタに取り込み、製品チームと共有する UI コンポーネントを使って、完全にインタラクティブで一貫性のあるプロトタイプをデザインしましょう。UXPin Merge の詳細はこちら。

The post デザイナーが押さえておくべき UIエレメント appeared first on Studio by UXPin.

Tailwind は、HTML マークアップに直接適用できる、あらかじめデザインされたスタイルのセットを提供します。

また、定義済みのコンポーネントやスタイルが付属していることが多い従来のCSSフレームワークとは異なり、カスタムUIデザインを作成するために組み合わせることができるローレベルのユーティリティクラスを提供することに重点が置かれています。

プロジェクトを開始するのに、フロントエンドのデベロッパーは大体npmやyarn経由でTailwindをインストールし、生成されたCSSファイルをHTMLに埋め込みます。

インストールが完了すれば、ユーティリティクラスを HTML要素に適用して、UIデザイン要件に従ってスタイルを整えます。

Tailwind CSSは、ランディングページ、ダッシュボード、管理画面、EC サイト、そしてもちろんラピッドプロトタイプなど、幅広いWebアプリケーションおよびサイトの構築によく使われます。

Tailwind UI コンポーネントを使ってインタラクティブなプロトタイプを作成しませんか？

UXPin Merge には、公式の Tailwind UI コンポーネントが豊富のライブラリを用意しているので、使いたいコンポーネントをキャンバス上にドラッグ＆ドロップするだけです。

その後は、コードをコピーしてプロジェクトに貼り付けるだけで、簡単に製品開発を行うことができます。気になった方は、ぜひUXPin Mergeを無料でお試しください。

Tailwind CSS とは

Tailwind CSS は、従来の CSS フレームワークとは違う方法で Webサイトをスタイリングします。

これは、Webサイトのスタイルに合わせて、あらかじめ定められた構成要素 (またはレゴのピース) のセットと考えてください。

大量の CSS ルールを記述する代わりに、事前に作成されたクラスを HTML コード内で直接使うことができます。

Webサイトをスタイリングしたいと思ったときに、見栄えを良くするために CSS コードをたくさん書かないといけないとします。

従来の CSS だと、要素ごとにルールを作成し、マージン、パディング、色などを定める必要がありますが、それだと時間がかかって、少し反復的な作業になる場合もあります。

Tailwindを使用する場合では、HTML要素に直接適用できるあらかじめ用意されたクラスのセットを得られることで、スタイリングがシンプルになり、このプロセスがより効率的かつ柔軟になります。

例えば、以下のように書く代わりに：

cssCopy code

.button { background-color: #3490dc; color: #ffffff; padding: 10px 20px; border-radius: 5px; }

このようなスタイルを、以下のように Tailwindのクラスを使って HTML に直接適用することができます：

htmlCopy code

<button class="bg-blue-500 text-white p-2 rounded-md">Click me</button>

ここでは、それぞれのクラス（bg-blue-500、text-white、p-2、rounded-md）が特定のスタイルを表しています。

つまり、bg-blue-500 はボタンの背景を青くし、text-white はテキストを白くし、p-2 はパディングを追加し、rounded-md は角を丸くします。

Tailwind は非常にカスタマイズしやすく、特定のスタイルが必要ないと判断した場合や独自のスタイルを追加したい場合は、このフレームワークをニーズに合わせて簡単に調整することができます。

また、Tailwind にはプラグインシステムがあり、機能を拡張することができるので、サードパーティのプラグインを追加したり、独自のプラグインを作成したりして、フレームワークを具体的なニーズに合わせることができます。

Tailwind は Web デベロッパーの間で「ユーティリティ優先型の CSS フレームワーク」と呼ばれています。

Tailwind CSS のコンテクストでは、「ユーティリティ」とは、要素に直接スタイリングを適用する小さな、単一目的のクラスを指し、そのユーティリティクラスは目的に応じて名前がつけられ、それによってクラスがそれぞれ何をするのかがわかりやすくなります。

また、これはフレームワークの構成要素であり、組み合わせて複雑なスタイルを作成することができます。

Tailwind CSS で作れるもの

レスポンシブ対応Webサイト

Tailwind のレスポンシブ・ユーティリティクラスは、さまざまなスクリーンサイズに適応するWeb サイトを簡単に作成し、デバイス間でシームレスな体験を提供する。

Webアプリケーション

Tailwind は、Webアプリケーションの UI（ユーザーインターフェース）の構築に使用できる。また、モジュール化されたユーティリティクラスにより、アプリケーションコンポーネントのスタイリングを迅速かつ効率的に行うことができる。

ランディングページ

Tailwind はランディングページのデザインとスタイリングに適しており、そのシンプルさと使いやすさから、マーケティングページをサッとプロトタイプ化して構築するための人気な選択肢となっている。

ブログとコンテンツのサイト

個人のブログでも、コンテンツの多い Web サイトでも、Tailwind のユーティリティクラスを使えば、テキスト、画像、その他のコンテンツ要素を簡単にスタイル設定できる。

ECサイト

Tailwind は、EC サイトの商品リスト、ショッピングカート、チェックアウトページのデザインに適用でき、その柔軟性により、特定のブランド要件に合わせたカスタマイズができる。

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

ダッシュボードと管理パネルを備えた Web アプリケーションは、多くの場合、Tailwind CSS のモジュール式でカスタマイズ可能な性質の恩恵を受ける。また、Tailwind CSS で、クリーンで機能的な UI を作成するためのツールが得られる。

プロトタイプと迅速な開発

Tailwind は、アイデアをサッとプロトタイプ化したり、速やかな開発が求められるプロジェクトによく使われている。そして、そのユーティリティ優先型のアプローチにより、デベロッパーはスタイルいちいちカスタム CSS を記述する必要もなく、速やかな反復（イテレーション）ができる。

ポートフォリオサイト

Tailwind を使うと、個人や専門的なプロジェクトを紹介するためのスタイリッシュでレスポンシブ対応のポートフォリオを構築でき、ユーティリティクラスにより、視覚的に魅力的なレイアウトを作成できる。

ドキュメントサイト

Tailwindは、ドキュメンテーションやヘルプセンターのWeb サイトのスタイリングに使うことができ、シンプルなので、クリーンで読みやすいレイアウトを簡単に作成できる。

カスタム UI コンポーネント

Tailwind はカスタム UI コンポーネントのスタイリングに使うことができ、それによってデベロッパーは、ユニークで視覚的に魅力的なインターフェースとレスポンシブデザインを作成できる。

Tailwind のコンポーネントの入手法

Tailwind CSS コンポーネントとリソースを見つけることができるソースは色々とあり、注目すべきリソースの１つに、Tailwind UI で専門的にデザインされたコンポーネントとテンプレートの素晴らしいセットがあります。

Tailwind UI は、Tailwind CSS の創設者であるAdam Wathan氏と Steve Schoger氏によって作られました。

Tailwind CSS とシームレスに統合された、プロのデザインによるすぐに使える UI コンポーネントとテンプレートのセットを提供することが、Tailwind UI を開発した主な動機であり、その目的は、フロントエンドのデベロッパーに、美しく一貫性のある UI を簡単に構築できるプレミアムなリソースを提供することでした。

Tailwind UI のセールスポイントの一つは、そのデザインの質の高さです。コンポーネントとテンプレートは、デザインの専門家として知られる Steve Schoger氏によってプロフェッショナルに作られており、それによって、Webアプリケーションの洗練された、魅力的な外観が保証されます。

Tailwind UI に期待できるコンポーネントやテンプレートの例を、以下で見てみましょう：

• ナビゲーションコンポーネント – ナビゲーションバー、ドロップダウン、メガメニューがある。
• フォームコンポーネント – 入力フィールド、チェックボックス、ラジオボタン、セレクトドロップダウン、ボタン、グループなどのフォームを作成するためのコンポーネント。
• コンテンツ表示コンポーネント – カード、モーダル、ポップオーバー、アラート、バッジ、ツールチップなどがある。
• 組版とテキストコンポーネント – 見出し、ブロッククォート、リスト、テキストスタイルを追加する。
• グリッドとレイアウトのコンポーネント – コンテナ、グリッドシステム、フレックスボックスのユーティリティがある。
• メディアコンポーネント – イメージカード、ギャラリー、レスポンシブビデオコンポーネントが含まれる。
• ユーティリティコンポーネント – スペーシング、マージン、フレックスボックス、アライメント、可視性ユーティリティ。
• テンプレート – ライブラリには、ランディングページ、ダッシュボード、EC 商品、価格設定、ブログレイアウトのテンプレートがある。

これらはほんの一例に過ぎず、Tailwind UI には、Web 開発における様々なユースケースに対応するコンポーネントとテンプレートの包括的なセットがあります。

また、各コンポーネントは柔軟でカスタマイズできるように設計されており、プロジェクトの特定のニーズやブランディングに合わせて簡単に適合させることができます。

Tailwind UI のコンポーネントは、デザインと UI の美学で知られる Steve Schoger氏が優れたデザインとユーザビリティの原則を念頭に構築しました。

そして全体的に、Tailwind UI は、Tailwind CSS のフレームワークに沿った高品質ですぐに使えるコンポーネントを提供することで、デベロッパーの時間を節約することを目指しています。

Material UI や Bootstrap との違い

Tailwind CSS、Material UI、Bootstrap はいずれも Web 開発でよく使われているライブラリですが、スタイリングと UI に対するアプローチは大きく異なります。

すでに説明したように、Tailwind はユーティリティ優先型のアプローチに従っており、HTML のマークアップに直接適用してスタイルを構築できる、ローレベルのユーティリティクラスのセットを提供します。

そしてこのアプローチは柔軟性が高く、スタイルをより細かく制御でき、多くの場合、ラピッドプロトタイプやカスタマイズに好まれます。

Bootstrap と Material UI は、レスポンシブな Web サイトをサッと構築するのに広く使われています。

Bootstrap には、事前に設計されたコンポーネントとスタイルのセットが付属されており、これは、よりコンポーネント中心のアプローチに従っていることから、デベロッパーは、テーマシステムを通じて簡単にカスタマイズできる既製の UI コンポーネントのセットを得られます。

また、デベロッパーは、自分たちのブランドに合わせて色やフォントなどの変数を変更することができます。

一方 MUI は、Google の マテリアルデザインガイドラインを実装したReact コンポーネントライブラリです。

MUI は Bootstrap のようにコンポーネント中心で、あらかじめデザインされた Reactコンポーネントのセットを提供します。

また、カスタマイズが簡単で、大規模で活発なコミュニティがあり、サポートやドキュメントも充実しています。

Tailwind でレスポンシブ UI デザインを作成する方法

ここからは、UXPin Mergeを使ってTailwindのUIデザインを作成できる簡単な方法をご紹介します。

UXPin Merge は、デザイナーとデベロッパーがインタラクティブな UI デザインをシームレスに作成して、連携できるプロトタイピングツールであり、コラボレーティブデザインを重視しています。

また、その中でも、「デザイン」と「開発」のワークフローを統合することに重点を置いており、それによって、より迅速なデザインと開発プロセスを実現します。

以下で、Tailwind UI と UXPin を使って UI デザインを作成する方法を見てみましよう。

その次に、Tailwind CSS のインストールに関する簡単なヒントをご紹介します。 記事に沿って進めるには、UXPin にサインアップしてトライアルを開始してください。

ステップ１：Tailwind UI コンポーネントをライブラリから取り出す

UXPin Merge には、Tailwind UI コンポーネントのライブラリが組み込まれており、このライブラリには、Tailwind CSSスタイリング原則に従ったボタン、カード、フォームなどのデザイン済み UI 要素のコレクションが含まれています。

デザインを開始するには、UXPin のデザインシステムライブラリです。

ボトムバーの［Design System Libraries］のアイコンをクリックするか、［Option］ +［２］のキーボードショートカットでアクセスします。

次に、Mergeのライブラリにスクロールすると、MUIv5（MUIv5を使ったデザイン方法を参照）や Ant design、React Bootstrap などの React ライブラリの中にTailwind UIが表示されます。

Tailwind のライブラリは今のところ Reactベースではなく、Tailwindライブラリを使用している間は、デザインから HTMLのみをコピーすることができます。

そしてキャンバスに好きなコンポーネントを配置します。ボタンでもカードでも、インターフェースを作るのに必要なものなら何でもいいです。

ステップ２： ChatGPT で複雑なコンポーネントを生成する

この時点まで、私たちは「子」を使っていました。アトミックデザインの原則に基づけば、「子」は分子や有機物を構成する最小の構成要素です。ちなみにブラッド・フロスト氏によって考案されたアトミック デザインは、Web デザインをその基本的な構成要素に分解する方法論であり、それによって一貫性のあるスケーラブルな UI の作成がしやすくなります。

アトミックデザインについてもっと知りたい方は、アトミックデザイン における５つの UI コンポーネントの記事やブラッド・フロスト氏の記事をぜひご覧ください

いわゆる「分子」を持ち込むには、コンポーネントの生成を支援する UXPin Merge の AI Component Creator を使います。 これは、プロジェクトに必要な動的コンポーネントやカスタム コンポーネントを作成する場合に特に便利です。

そして AI Component Creator は機械学習を利用してデザインパターンを理解し、デザインに基づいてコード スニペットやコンポーネントを生成します。

AI Component Creator と ChatGPT を使ったデザインのスピードアップに関するガイドをぜひお読みください。（英語版）

ステップ３：カスタムコンポーネントを使ってレイアウト全体を取り込む

インターフェースのさまざまなセクションやコンポーネントを形成する分子の組み合わせである「有機物」を UXPin にインポートする方法があるので、まだアトミックデザインの方法から離れるわけではありません。

ビルトインの Tailwind UIライブラリには、Tailwind UIのWebサイトから UIコンポーネント、パターン、フルレイアウトを UXPin のプロジェクトに直接コピーするための「New Custom Component」のオプションがあります。

また、コンポーネントは、UXPin でカスタマイズやテーマ設定ができます。

エディタ内の Tailwindライブラリの上部に、プラス記号のついたシースルーのコンポーネントが見えます。これがカスタムコンポーネントです。

Tailwind UIのWeb サイトにアクセスし、サンプルやコンポーネントのページからコードをコピーして、UXPinのカスタムコンポーネントに貼り付けます。

その後は、今後も再利用できるようにコンポーネントを［Pattrens］に保存します。

実際にどのように使っているかを、下の動画のプロダクトツアーをぜひご覧ください。

ステップ４：コンポーネントのプロパティを編集する

インターフェースの構成要素が揃ったところで、UI コンポーネントのプロパティを調整し、一貫性のあるプロフェッショナルなデザインに仕上げます。

調整したいコンポーネントをクリックすると、右側にプロパティパネルが表示され、色やテキストを変更したり、ステートを追加したり、特別なスタイリングを考えることができます。

そして、ここはテーマを切り替える場所でもあり、それには以下のように２種類あります。

• グローバルテーマ ：全ページの「ライト」または「ダーク」のテーマを選択する。

• ローカルテーマ ：各コンポーネントの「ライト」または「ダーク」のテーマを選択する。

また、ここではインタラクションの追加もできます。

ユーザがボタンをクリックした時に、次のページに移動するのか、モーダルを表示したり消したりするのかなどの動作を決定でき、コード化されたコンポーネントのプロパティを設定することもできます。

ステップ５：デベロッパーの環境にコードをコピーする

レイアウトが完成したら、いよいよ構築です。

「プレビューモード」から「スペックモード 」に進み、コードをコピーしたいコンポーネントをクリックするか、エクスポート機能を使ってプロトタイプ全体をワンクリックでエクスポートします。これで、アプリの構築開始はバッチリです。

まだの場合は、Tailwind UI ライブラリを使う新しいプロジェクトをセットアップしてください。

新しい HTML ファイルを作成し、<head> のセクションに Tailwind CSS と Tailwind UI スタイルシートをリンクします。

または、Stackblitz統合を使って、プロジェクトを事前に設定してください。

Tailwind UI でレイアウトの作成が８.６倍速くなる

Tailwind CSS は、スタイリングへのユニークなアプローチで注目されています。

従来の CSS フレームワークとは違って、Tailwind にはローレベルのユーティリティクラスを通して、あらかじめデザインされたスタイルのコレクションがあります。

そしてインストールは、npm や yarn による簡単なセットアップの後、ユーティリティクラスを HTML 要素に直接適用することで、特定の UI デザイン要件を満たすことができます。

また、Tailwind CSS は、ランディングページやダッシュボードから、管理画面、EC サイト、ラピッドプロトタイプまで、さまざまな Webプロジェクトで活用されています。

Tailwind UI のコンポーネントを使ったインタラクティブなプロトタイプをお探しの方にとって、UXPin Merge は理想的なソリューションとなります。

UXPin Mergeでは、公式のTailwind UI コンポーネントで溢れるライブラリが提供されることから、キャンバス上でのシームレスなドラッグ＆ドロップ体験が促されます。

また、生成されたコードをコピーしてプロジェクトに統合すれば、効率的な製品開発が実現します。

この記事が少しでもご参考になれば幸いです。ぜひUXPin Mergeを無料でお試しください。

The post Tailwind CSSを使ってレスポンシブデザインを構築する方法 appeared first on Studio by UXPin.

MUI（Material-UI）は、Googleのマテリアルデザイン原則に基づいて構築された多くの人に使用されているReact UIフレームワークです。カスタマイズ可能なコンポーネントとスタイルで、ブランド標準に沿った組織運営が実現します。

そこで本記事では、  MUI for Figma の機能と制限について深く掘り下げます。また、MUI を UXPin Mergeと統合するという別のアプローチもご紹介します。あるスタートアップ企業がデザインプロセスで MUIのReactコンポーネントを使って製品をリデザインした実例を交えてお話しします。

主なポイント

• MUI（Material-UI）は、GoogleのマテリアルデザインがベースのReact UIフレームワークであり、ブランドガイドラインに合わせたカスタマイズが可能。
• MUI for Figmaにはデザインキットがあるが、MUIではReactライブラリのインタラクティブ機能がないため、デザインに矛盾が生じる可能性がある。
• サイズが大きく、Token Studioなどのプラグインに依存するため、パフォーマンスの問題につながることもある。
• UXPin Mergeは代替手段を提供。デザイナーがReactコンポーネントを使ってプロトタイプを作成できることで、デザインと開発のギャップを埋めることができる。
• TeamPasswordは、UXPin MergeとMUIを活用したことで製品開発ワークフローを強化し、「Code-to-Design（コードからデザイン）」アプローチによって効率性が向上したことを実証した。

UXPin Mergeにより、使い慣れたデザインツールの中でMUIのReactライブラリを使用したプロトタイプ作成とテストが可能です。詳細とアクセスリクエストはこちらのページをご覧ください。

MUI とは

MUI（Material-UI）は、Google のマテリアルデザインに基づいたコンポーネントとスタイルのセットを提供する人気のReact UIフレームワークであり、組織は、MUIのテーマ機能を使って、製品やブランドの仕様に合わせて UIライブラリをカスタマイズすることができます。

MUI を使う理由

MUIを使うことでゼロからデザインすることなく製品を構築するための包括的なデザインシステムを活用することができます。わずかな調整や修正を行うだけで、カスタムデザインシステムを構築することができるため、研究開発にかかる時間の節約につながるでしょう。

また、MUIの使用は新製品の開発にも便利です。プロダクトチームやスタートアップ企業は、テーマを変更することなくMaterial UIのライブラリを使って、テスト用のMVP（実用最小限の製品）を構築することができます。デザインシステムを活用することで、UX（ユーザーエクスペリエンス）とアクセシビリティのために最適化された包括的なライブラリを使うことができ、製品を速やかにデザインすることができるのです。

 MUI for Figma のコスト

無料のコミュニティである MUI for Figmaのライブラリがありますが、提供されているコンポーネントは限られており、サポートもありません。また、UIライブラリ全体が必要な場合は、MUIのWebサイトでMUI for Figmaのライセンスの購入が必要です。ちなみに２０２３年１０月現在、エディター１名分のライセンスは７９ドルです。大規模なチームであれば、すぐに料金がかさむ上に、毎年のライセンス更新が必要です。

このような追加料金を回避するためにも、UXPinで完全に機能するMUIのReactコンポーネントを使ってプロトタイプを作成することをおすすめします。MUIはUXPinに組み込まれているデザインライブラリの１つで、UXPin Mergeでのすべてのプランに備えられています。UXPin MergeでのMUIを使ったデザインについては、こちらをご覧ください。

Figmaでマテリアル UIを統合する方法

コミュニティページからファイルを開き、無料のFigma MUIライブラリを使うことができます。新しいプロジェクトでMUIを使い始めるには、Open in Figma ボタンをクリックしてください。

フルライブラリを使用する場合は、以下をご参考ください。

MUI for Figma のインポート法

• Figma の下書きまたは組織に移動する
• Import ボタンをクリックして、MUI ファイルをインポートする

 MUI for Figma の使用法

FigmaでMUIライブラリを扱うには、次の２つの方法があります：

１．MUIファイルで直接デザインする：この方法は無料版では問題ありませんが、フルライブラリではファイルサイズが大きくなるため、MUIはこの方法を推奨していません。

２．MUIファイルをライブラリとして使う： FigmaでMUIを使う際の好ましい方法です。これをするには以下を行います：

• Figmaのアセットパネルに移動する
• ライブラリのアイコンをクリックする
• MUIファイルをライブラリとして公開する

FigmaでMUIライブラリをカスタマイズする方法

MUI ライブラリの色をカスタマイズするには、以下の２つの方法があります：

1. Token Studioプラグイン： この方法は高速で、合成が可能。つまり、ある色を使って別の色を生成することができる。
2. Figmaのネイティブトークン： サードパーティのプラグインを使用したくない場合は、Figma のネイティブ・トークンを使って色の変更が可能。

Token Studioでグローバル設定を変更する方法

Token Studioプラグインを使うと、Border‐radiusやフォントファミリなど、コンポーネントのグローバル設定を全て簡単に変更できます。例えば以下のような感じです：

• グローバルのborder‐radiusを変更するには、プラグインを開き、［Border radius］のグループに移動して値を編集する。
• フォントファミリーを変更するには、プラグインの［Typography］のグループに移動してフォント設定を調整する。

Figma MUIのダークモードを有効にする方法

Token Studioを使って、MUIライブラリ全体のダークモードを有効にするには以下を行います：

• Token Studio のプラグインを開く
• ダークモードなど、有効にしたいグループのボックスにチェック（✓）を入れる
• Figma のカラーモードをダークモードに変更して、変更を確認するというオプションもある

Figma MUIの課題と限界

MUIのFigmaライブラリは、UIデザインや静的プロトタイプには優れていますが、正確なテストを行うためのインタラクティブ性には欠けています。ここでは、デザイナーが FigmaのMUIライブラリを使う際のよくある問題を見ていきましょう。

 MUI for Figma は、UIデザインキットであり、インタラクティブなデザインシステムではない

Figma MUIライブラリで、ゼロからデザインする時間が何時間も節約されますが、MUIのインタラクションを提供するものではありません。そのため、デザイナーはプロジェクトごとに Figmaでインタラクションを設定しなければいけません。

また、Figmaのコンポーネントのインタラクティブ性を追加することは、デベロッパーが使うMUIのReactライブラリと一致しません。コンポーネントの見た目は似ていますが、デザイナーは 正しいアクション、ステート、アニメーションを確実に実装すべく、MUI のドキュメントに忠実に従わないといけません。

編集可能なコンポーネント

デザインシステムチームは、メインのライブラリのファイルからMUIコンポーネントを管理し、不正な変更を防ぐことができます。一方で、デザイナーはインスタンスを切り離したり、UI要素を調整したりすることができるため、デザインドリフトや不整合が生じてしまいます。

プラグインへの依存

MUI for Figmaを正しく機能させるには、Token Studioのようなプラグインが必要です。しかし、プラグインは複雑さと潜在的な互換性の問題を別のレイヤーにもたらす可能性がある上で、Token Studioはプレミアム機能であることから月々のコストがかさみます。

チュートリアルの 「Getting Started」で、MUIは、Token StudioプラグインとFigmaのネイティブ・トークンとの同期に問題がある可能性があり、適切に管理されないと不整合が生じる可能性があることを記載しています。

パフォーマンスの問題

MUIではFigmaのファイルサイズが大きいため、デザインチームは、特にライブラリファイル内で直接作業する場合、パフォーマンスに問題が生じる可能性があります。

 MUI for Figma の代替案

MUIライブラリを使った最適なデザイン方法として、UXPin Mergeを使って、エディタ内でReactコンポーネントを使用したプロトタイプの作成という方法があります。

UXPinで MUIを使うには以下の２つの方法があります：

1. 内蔵されたMUIライブラリの使用
2. カスタムMUIライブラリの連携

UXPinでのMUIライブラリの使い方

UXPinには、MUI、Fluent UI、Ant Design、MUI、Material UI、UXPin Boilerplateなど、Mergeではいくつかのビルトインライブラリが用意されています。それらはすべて、GitHubのレポジトリからのインタラクティブコンポーネントを備えたReactライブラリです。

UXPinでMUIライブラリを使用する利点は、スタイリングインタラクティブ機能が各コンポーネントに「組み込まれている」ため、デザイナーがそれを設定する必要がないことです。また、マスターインスタンスからコンポーネントをデタッチして変更することもできないため、レポジトリで定義されたデザインシステムを使わないといけません。

デザインライブラリのサイドバーからUI要素をキャンバスにドラッグし、プロパティパネルで再定義されたReactのプロップを調整するだけです。

このようなビルトインライブラリでは、デザイナーはUI（ユーザーインターフェース）の構築と、スタイリング、変数、ステート、ナビゲーションなどの定義済みの MUIプロパティの調整だけに集中することができます。

また、ブランドカラーやスタイリングでカスタムMUIデザインシステムを使いたい場合は、Mergeで他の統合の使用をおすすめします。

カスタムの MUIライブラリを UXPinに同期する方法

UXPin Mergeは、以下２つの統合機能により、テーマ別の MUI ライブラリなどのあらゆるデザインシステムをインポートすることができます：

• Git 統合（Reactのみ）：Reactのライブラリの統合によって、 パターン、バージョン管理、および JSXのプリセットを含むなどすべてのMerge機能にアクセスできる。
• Storybook統合： React、Vue、Angular、Ember、その他のフロントエンド技術など、あらゆるStorybookで動作する。

この２つの統合のセットアップには技術的な入力が必要ですが、一度設定すると、Mergeは自動的にUXPinにアップデートを同期します。デザイナーとエンジニアは常に同じコンポーネントライブラリを使って、組織全体で「信頼できる唯一の情報源（Single source of truth）」を作成することができます。

UXPinでMUIコンポーネントを使用する方法

UXPinのビルトインライブラリを使おうが、カスタムの MUIデザインシステムを使おうが、ワークフローは同じであり、ライブラリは、キャンバスの左側にあるDesign System Libraries（デザインシステム ライブラリ）の下にあります。

Mergeのデザインシステムを選択すると、ライブラリのコンポーネント、カラー、タイポグラフィ、アセットが左サイドバーに表示されます。UI要素をクリックまたはキャンバス上にドラッグして、簡単にUIを構築します。

Mergeが非デザイナーにとってデザインをより身近なものにする

デザインツールは非デザイナーにとっては大変なものです。多くのデベロッパーは学習曲線をマスターするヒマはなく、そうなると彼らは、大体慣れ親しんだもの、つまり「コードを書くこと」に戻ります。

ただ、コードのプロトタイプはテストには最適ですが、時間とコストがかかり、デベロッパーは結局、ユーザビリティの問題やその他の矛盾を抱えた製品や機能をリリースすることになります。

TeamPasswordがMergeとMUIを使って再デザインと高速拡張を実現した方法

パスワード管理ツールを提供するTeamPasswordは、UXPinに切り替える前にこの課題に直面しました。２名構成の開発チームにはデザインスキルがなく、速やかに進めるために最小限のテストしか行わずにアップデートをプッシュしていました。また、時代遅れの技術スタックを使っていましたが、リソースが限られていたため、製品をゼロから作り直すことはできませんでした。

また、TeamPasswordにはUXデザイナーがいないため、エンジニアがデザイン、プロトタイプ作成、テスト、プログラミング、QA、出荷のすべてを自分たちで行わないといけません。

製品の再デザインのために MUIとReactに切り替えることにしました。彼らは、毎回コードを書いたり編集したりすることなく、Reactのコンポーネントを使ってプロトタイプを作成してテストするソリューションを求めており、シンプルなデザインワークフローを提供するツールが必要でした。

そこで、UXPinのMergeテクノロジーが選択肢として挙がり、TeamPasswordのデベロッパーは、製品固有のパターン、テンプレート、UIなどのカスタムのReact MUIライブラリを、Git統合でUXPinに同期し、インタラクティブなプロトタイプを使って新製品をテストできるようにしました。

MergeとMUIを使うことで、TeamPasswordsの製品開発ワークフローに革命がもたらし、２名構成の開発チームは、デザインから最終製品に至るまで非常に効率的かつ効果的になったのです。

MUI を使ったプロトタイプに「Code-to-Design（コードからデザイン）」が適している理由

Figmaのデザインシステムは、UIデザインや基本的なプロトタイプ作成には最適ですが、正確なテストを行うためのインタラクティブなプロトタイプを作成するには、外部ツールやプラグインに頼らないといけません。この時代遅れの「デザインからコード」へのワークフローは、時間もコストもかかるので、非効率的です。

そこでUXPinの「Code-toDesidn（コードからデザイン）」のワークフローだと、MUIのReact コンポーネントをデザインプロセスに取り入れ、プロダクトチームに以下のような多くのメリットをもたらします：

• コードによって定義された「信頼できる唯一の情報源（Single source of truth）」によって、デザインと開発のギャップを埋める。
• より少ない文書と説明によるシームレスなハンドオフ。
• デザインシステムのレポジトリにプロパティを確定することで、ドリフトや不整合がなくなる。
• ゼロからのデザインやプログラミングが不要なため、市場投入までの時間が短縮され、組織の競争力が強まる。
• 一元化されたデザインシステム管理は、少ないリソースで多くの運用負担を軽減し、それによって運用チームがより効果的になる。

Mergeのテクノロジーでインタラクティブプロトタイプさっそく作ってみましょう！詳細およびアクセスリクエスト方法については、こちらのページをぜひご覧ください。

The post MUI for Figma はデザイナーに最適なソリューションか？[代替案] appeared first on Studio by UXPin.

コンポーネント駆動型のプロトタイプは、UXデザインの次なるイテレーションです。デザイナーはもはやゼロからデザインすることはなく、エンジニアが書くコードはより少なくなっています。  

これによってもたらされることは、機能横断的な連携の強化、市場投入までの時間短縮、一貫性、エラーの減少、より良いテスト、ステークホルダーからの有意義なフィードバック、そしてスムーズなデザインのハンドオフが実現します。  

UXPin Mergeを使うことで、これらのメリットがすべて実現可能です。詳しくはこちらのページをご覧ください。  

 コンポーネント駆動型 プロトタイプとは

  コンポーネント駆動型のプロトタイプは、デザイナーが既製のUI（ユーザーインターフェース）要素を使ってUIを構築する製品デザイン手法の１つです。ゼロからデザインするのではなく、インタラクティブなコンポーネントをドラッグ＆ドロップしてプロトタイプを作成します。  

このデザイン手法は、フロントエンドエンジニアがゼロからコーディングするのではなく、既存のコンポーネントライブラリを使ってUIを構築するコンポーネント駆動開発に由来するものです。  

Storybookはこの開発方法でよく使用されるツールであり、エンジニアはコンポーネントを分離して構築・管理することができます。

コンポーネント駆動型プロトタイプも同様に、ゼロからデザインするのではなく、オープンソースのUIライブラリや製品のデザインシステムを使って、既製のコンポーネントでUI構築に集中することができます。  

コンポーネントは通常、色、タイポグラフィー、サイズ、スタイルなどの定められたプロパティで完全にインタラクティブであり、それによってデザイナーはプロトタイプ作成、テスト、イテレーション、デザインプロジェクトの提供をより速く、より正確に行えるようになります。  

 コンポーネント駆動型プロトタイプ の手法

  コンポーネント駆動型のプロトタイプはコンポーネント駆動開発からヒントを得たものですが、ブラッド・フロント氏のアトミックデザイン原則がデザイン手法の基礎となります。  

アトミックデザインにおいては、UI構築の際に最小のUI要素から始めて徐々に規模を拡大していく段階的な取り組み方法を採用しています。ゼロからデザインするのではなく、要素を組み合わせ、より大きなコンポーネントやテンプレート、UI（ページ）を作成します。

アトミックデザインの5つの要素には、以下のようなものがあります：  

1. 原子（Atoms）：HTMLタグ、フォント、アニメーション、カラーパレットなど、UIの基礎となる要素。デザイナーはこれらの要素を分解することはできない。
2. 分子（Molecules）：原子が組み合わさって、フォームのラベルや入力フィールドのような小さなインタラクティブなコンポーネントを作る。
3. 生体（Organisms）：ユーザビリティやアクセシビリティの問題を解決するために、デザイナーが使うインタラクティブ性の高い複雑なUIコンポーネントであり、ロゴ、検索フィールド、プライマリーナビゲーションなどが例として挙げられる。
4. テンプレート：ブログのフィード、カルーセル、導入事例、フッターなど、さまざまなウェブサイトやアプリケーションの部門の構造を定めるものであり、テンプレートには、このような大きな構造を作成するための原子、分子、生体のグループ化が含まれている。
5. ページ：ユーザーのニーズとビジネスゴールを一致させ、まとまりのあるUIを作成するためのテンプレート集を使った完全な画面。

コンポーネント駆動型プロトタイプにおける8つのメリット

1. 信頼できる唯一の情報源（Single source of truth）

  コンポーネント駆動型のプロトタイプの最も大きなメリットは、デザインと開発の連携の強化であり、デザイナーとエンジニアは、レポジトリやnpmパッケージ、Storybookでホストされている同じコンポーネントライブラリを使って作業します。  

UXPin Mergeのようなツールは、デザインと開発の間の繋がりを促し、各部門が単一のコンポーネントライブラリにアクセスできるようにします。デザインチームが視覚的なUIコンポーネントを使う一方で、エンジニアはその背後にあるコードを見るというように、同じ要素を異なる視点から見ることができます。   

2. デザインの一貫性

  この信頼できる唯一の情報源（Single source of truth）は、デザインと開発全体の一貫性の維持に優れており、インタラクティブ機能とスタイリングが組み込まれているため、デザイナーはUIコンポーネントを組み合わせてUIを作成することだけを考えればよく、色、タイポグラフィー、サイズ、境界線の半径、正しいアイコンの使い方などのバリエーションといったよくある問題を排除することができます。  

また、デザインの一貫性は、複数のチームが同じ製品に取り組む際に重要な、承認され統一されたコンポーネントやUIを受け取るエンジニアにも利点があります。

3. 共有可能

  デザインチーム間でコンポーネントを共有することで、デザインの一貫性を維持しながら、UXワークフローとデザイナーの連携を効率化することができます。  

静的なUIキットで、デザイナーはUI要素の共有ができますが、そのようなキットは忠実性と機能性に欠けています。そうなると、デザイナーが自らセットアップしなければならず、それがインタラクションデザインの矛盾やドリフトにつながります。  

そこでコンポーネントライブラリを共有すれば、デザイナーはビジュアル要素、インタラクション、スタイリング、その他デザインシステムが設定するあらゆる制約を受けることができます。  

4. よりスムーズなデザインハンドオフ

  デザインハンドオフは、デザイナーとエンジニアにとって、本来はストレスの多い、虚構に満ちたプロセスであり、デザイナーは、ツールやビデオ、ドキュメントや静的なデザインを使って、プロトタイプが「何をするはずなのか」を示します。  

UXPin Mergeでデザインハンドオフを行うと、エンジニアが同じコンポーネントを使うため、不確実性がなくなり、文書化を減らすことができます。デザイナーは、各コンポーネントのインタラクションやスタイリングのプロパティで技術的な制約を受けないようにできるので、エンジニアが再現できないデザインを目にすることはほとんどありません。  

5. 有意義なフィードバック

  ユーザビリティの参加者やステークホルダーも、コンポーネント駆動型のプロトタイプの恩恵を受けます。完全にインタラクティブなプロトタイプは、最終的な製品とその能力について、誰もが現実的に期待することができ、デザインチームは、より高い忠実度と機能性により、ステークホルダーとエンドユーザーから有意義で実用的なフィードバックを得ることができるのです。

6. より高速なイテレーション

コンポーネント駆動型のプロトタイプのワークフローにより、デザイナーはテストやステークホルダーからのフィードバックに対して、より速やかにイテレーションを行うことができます。ドラッグ＆ドロップによるデザインプロセスと簡単にできるプロパティへのアクセスにより、デザイナーはその場で変更を加えることができるのです。ちなみにPayPalは、UXPin Mergeに切り替えた後、以下のようにその効率性の向上を実感しました：

「忠実度の高いプロトタイプをより早く作り、セッション後にすぐにフィードバックが得られます。すぐに修正できることがあれば、次の参加者の前にその変更を行い、以前よりずっと早くフィードバックを得ることができます。」- PayPal, UXシニアマネージャー、エリカ・ライダー氏

UXPin Merge のユーザーはPatternのようなツールの恩恵を受け、デザインチームは1つのコンポーネントが持つ複数のバージョンを共有のパターンライブラリに保存することができます。そしてデザイナーは、UXPinのPropaties Panel（プロパティパネル）を使う代わりに、UI要素とパターンを切り替えて、より速くイテレーションを行うのです。  

7. レスポンシブデザイン機能

  レスポンシブデザインは、デザイナーにとって時間のかかる作業です。1つの画面に対して複数のレイアウトの作成が必要があり、それによってデザインプロジェクトに多大な時間が費やされることになります。そこで、レスポンシブコンポーネントを開発することで、デザイナーはプロトタイプを１つ作成するだけで、すべてのレイアウトに対応できるようになります。  

Merge のコンポーネント駆動型のプロトタイプのソリューションでは、デザイン システムチームはコンポーネントをiFrameでラッピングして、複数のビューポートに対応させることができ、デザイナーはデザインをプレビューする際に、ドロップダウンを使ってこのようなレイアウトを切り替えることができます。  

8. デザインの拡張性

  コンポーネント駆動型のプロトタイプのドラッグ＆ドロップの特性とは、非デザイナーが、画像ベースのデザインツールを使う熟練のUXデザイナーよりも、高い忠実度と機能性でプロトタイプを構築することができるということです。  

PayPalが2019年にUXPin Mergeを使い始めた際に、製品チームをトレーニングすることでデザインプロジェクトの90%を完了させることができました。UXデザイナーは製品チームを指導し、複雑なユーザビリティの問題をサポートすることで、UX専門家を増やす必要性が下がるとともに、ハイレベルなUXの取り組みに集中できるようになりました。  

コンポーネント駆動のワークフローは、学習曲線を大幅に短縮し、プロトタイプを高速化することで、非デザイナーにもデザインプロセスがより身近なものになっているのです。  

コンポーネント駆動型のプロトタイプのワークフローを導入している会社

  PayPalとTeamPasswordは、コンポーネント駆動型のプロトタイプを使って不整合を排除し、顧客にポジティブなユーザー体験を提供しています。  

PayPalが巨大な多国籍企業であるのに対し、TeamPasswordは小規模なチームで運営されていることから、今回この２社を例に選びました。  

両社とも、UXPin Mergeに切り替え、コンポーネント駆動型のプロトタイプのワークフローを採用することで、大きなメリットを得られました。  

PayPal

  PayPalは、コンポーネント駆動型のプロトタイプのとてもいい成功例です。同社はUXPin Mergeに切り替えた後、画像ベースのデザインツールを使っていたときよりも8倍速くデザインプロジェクトを完成させました。  

「PayPalで使っている別のデザインツールで、1ページのベクターベースのデザインを行い、その後、UXPinでMergeコンポーネント ライブラリを使って全く同じプロトタイプを作成しました。Merge だと、デザイナーは約 8分間でできますが、他のデザインツールでは1時間以上かかりました。」

「社内でよくある問題は、製品チームがUXデザインをボトルネックと捉えていることです。まずはそのボトルネックを取り除き、製品チームが自分たちでデザインを行えるようにする戦略を実行しました。」 – Paypal、エリカ・ライダー氏  

PayPalのコンポーネント駆動型のワークフローでは、製品開発に関わるすべての人がUXに責任を持つようになります。最も大きな影響として、コンポーネント駆動型のプロトタイプによって、PayPalの製品チームはより多くのデザイン責任を担うことができるようになった点です。  

Teampassword

  パスワード管理は、組織が顧客の確保および維持のために信頼を勝ち得なければならない、競争の激しい業界であり、デザインは、ブランドの強化や、顧客の信頼とロイヤルティを獲得する一貫したユーザー体験を生み出す上で、重要な役割を担っています。  

「お客様は私たちに「ログイン記録」という重要な情報を託しています。矛盾や時代遅れのデザインは、当社がその情報を安全に保つのに十分な最先端の技術を備えているかどうか、一部のお客様に疑念を抱かせてしまうことになります。フロントエンド開発は、バックエンドのパフォーマンスに対する信頼と自信を築くのです。」トニー・カッチャーボ氏、TeamPasswordオペレーションディレクター  

TeamPasswordはゼロからデザインする代わりにオープンソースのコンポーネント ライブラリを使い、プロトタイプとテストのためのデザイン チームは設けられてません。その代わりに、TeamPasswordのフロントエンドのデベロッパーは UXPin Merge を使って新しいUIや機能のプロトタイプとテストを行っています。  

このコンポーネント駆動ワークフローによって、TeamPasswordは製品のデザイン、テストなどが高い整合性で行うことができ、市場競争の中での運営において欠かせないものとなっています。  

コンポーネント駆動型のプロトタイプの始め方

  デザインと開発の間に信頼できる唯一の情報源（Single source of truth）を作成することはこれまで以上に簡単になります。UXPin Mergeでを使用することで、組織はコンポーネント ライブラリをインポートでき、デザイナーとエンジニアは同じ UI 要素を使えるようになります。  

コンポーネントの取り込み

  デザイナーは、UXPinのNPM統合を使ってオープンソースのコンポーネントライブラリをインポートしたり、エンジニアの協力を得て、MergeのGitまたはStorybookの統合を使って製品のデザインシステムを同期させたりすることができます。

プロトタイプ

どの方法でUXPinとコンポーネントを同期させても、デザインの流れは同じです。

• MergeのUI 要素をキャンバスにドラッグして、プロパティパネルで変更する。また、より大きく、より複雑なコンポーネントを作成するのにUXPin Pattern（パターン機能）を使って要素を組み合わせることも可能。
• コンポーネントを接続してプロトタイプを作成し、ユーザビリティテストやステークホルダーへのプレゼンテーションを行う。
• 完璧なソリューションを見つけるまで、テストとイテレーション行う。UXPinでは、【プレビューと共有】を使ったブラウザでのテストや、【UXPin Mirror】を使ったモバイルでのテストが可能。
• プロジェクトに【ドキュメンテーション】を追加し、デザインハンドオフの時にコメント機能を使ってエンジニアと共同作業を行う。

Mergeの信頼できる唯一の情報源（Single source of truth）

UXPin Mergeは組織全体での「信頼できる唯一の情報源（Single source of truth）」として機能し、それによって製品のデザインシステムの管理および拡張のお手伝いをします。さらに、コンポーネントライブラリのレポジトリに変更があると、UXPinのデザインエディタに自動的に同期され、チームに更新が通知されます。

UXPin Mergeのバージョンコントロール機能で、リリースの追跡や、デザイナーによる以前のバージョンへの切り替えができるため、アップデートを完全にコントロールすることができます。

UXPin Mergeが提供するコンポーネント駆動型のプロトタイピングを試してみませんか？詳細とこの革新的なテクノロジーへのアクセス権のリクエスト法については、Mergeのページをぜひご覧ください。

The post コンポーネント駆動型 プロトタイプとは？ appeared first on Studio by UXPin.

UXPin Mergeのコンポーネント駆動型のプロトタイプにより、デザイナーは最終製品とそっくりなレプリカを作成することが可能になりました。UXPinは静的なグラフィックをレンダリングする他のデザインツールとは違い、コードによって駆動するためデザイナーは忠実度の高いプロトタイプを作成できるのです。

UXPinのnpm統合により、デザイナーはオープンソースのデザインシステムからコンポーネントやパターンを自由にインポートできます。既存のデザインシステム用の新しいパターンを作成するために単一のUI要素が必要な場合もあれば、デザインスプリント中に完全に機能する MVP （実用最小限のプロダクト）を構築するためにnpm統合を使用する場合もあります。

UXPin Mergeがどのようにコンポーネント駆動型のプロトタイプによってデザインを強化できるか体験してみませんか。アクセスのリクエスト方法は こちらのページでご確認ください。

 npm のコンポーネントを使ったプロトタイプについて

 UXPinの npm 統合と、プロトタイプにインポートできるパッケージについて説明する前に、まずは npmライブラリを使ったコンポーネント駆動型プロトタイプを実現する技術「Merge」についての理解が必要です。  

企業はMergeにより、デザイナーがエンジニアと同じコンポーネントライブラリを使ってプロトタイプを作成することができるようになります。それと同じように、リポジトリにホストされたデザインシステムをUXPinのデザインエディタと同期させることもできます。  

このような「既製」の UI 要素には、デザインシステムのコードによって確定されたプロパティとインタラクティブ機能が含まれています。Mergeのコンポーネントは完全なレプリカであるため、最終製品と同じ見た目であり、機能性を持ちます。

デザイナーは Mergeコンポーネントをビルディングブロックのように使い、ドラッグ＆ドロップで簡単に新しいUIや完全に機能するプロトタイプを構築します。また、Pattern（パターン）を使って UI要素を組み合わせたり、新しいコンポーネントを構築することもできます。

また、Mergeの最も魅力的な機能は「デザインと開発を同期させる機能」であり、デザインシステムのリポジトリを経由して、組織全体で使うことができる「信頼できる唯一の情報源（Single source of truth）」を作成します。さらに、リポジトリへの変更は自動的にUXPinに同期され、製品チームにも通知されます。

１．Ant Design

  Ant Designは、中国の巨大テック企業である Ant Groupによって開発および維持されているオープンソースのデザインシステムです。コンポーネントライブラリは、React、Angular、Vue で利用可能で、クロスプラットフォームやモバイルアプリケーションを構築するための Ant Design Mobile も含まれます。

Ant Designは、B2C製品、エンタープライズアプリケーション、Webサイト、クロスプラットフォームアプリのためのコンポーネントを備えた「オールラウンダー」であり、アイコンセット、ダークモード、アニメーション、インタラクティブ機能も備えています。

Ant Design npm のパッケージをインポートする

  以下は、Ant Designの npm 統合での ライブラリ設定です：

• ライブラリ名：Ant Design NPM – ライブラリ名はインポートに影響しない。
• パッケージの詳細：antd – Ant Designの npm レジストリに対応していないといけない。
• アセットの場所：antd/dist/antd.css – Ant Design React のプロップのスタイリングに必要。

  その他はすべてデフォルトのままにして、「Save Changes （変更を保存）」をクリックします。

さらに読む： 中国初の Ant Design とは？UXPin連携方法と npm 統合徹底ガイド

２．Bootstrap

  Bootstrapは、最も古くて大規模なレスポンシブ対応なフロントエンドのフレームワークの１つです。エンジニアは、Webサイトや Webアプリケーションのプロトタイプを作成する際に、基本的な CSSスタイリングやJavascript機能でBootstrapをよく使います。

UXPinの npm 統合では React Boostrap が使われており、オリジナルのBootstrapと同じアウトオブボックス機能と特徴が備わっています。ちなみに、レスポンシブ WebサイトやWebアプリケーションのプロトタイプには、React Bootstrapがオススメです。

React Bootstrap の npm パッケージをインポートする

  以下は、React Bootstrapの npm 統合でのライブラリ設定です：

• ライブラリ名：Bootstrap NPM Integration – ライブラリ名はインポートに影響しない。
• パッケージの詳細：react-bootstrap – React Bootstrapの npm レジストリに対応していないといけない。
• Dependency package の名前：bootstrap – React BoostrapをUXPinで動作させるには、Bootstrapのdependency パッケージが必要。
• アセットの場所：bootstrap/dist/css/bootstrap.min.css – React Boostrapのプロップのスタイリングに必要。

  その他はすべてデフォルトのままにして、「Save Changes（変更を保存）」をクリックします。

さらに読む： BootstrapコンポーネントをUXPinに追加する方法 – npm統合ガイド

３．MUI

MUI は、GoogleのマテリアルデザインUI に基づいて構築された Reactライブラリです。この包括的なデザインシステムには、さまざまなデジタル製品を開発するのに必要なものが全てあり、その上に２,０００以上のマテリアルデザインのアイコンが用意されています。

MUIはその包括的なコンポーネントライブラリにより、エンタープライズ製品、クロスプラットフォームアプリケーション、MVPによく選ばれています。

MUIの npm パッケージをインポートする

  以下は、MUIの npm 統合でのライブラリ設定です：

• ライブラリ名：MUI NPM – ライブラリ名はインポートには影響しない。
• パッケージの詳細：＠mui/material – MUIの npm レジストリに対応していないといけない。

MUIは 、React Boostrap や Ant Design とは違ってUXPinで動作するために依存関係やアセットを必要としません。他のすべてをデフォルトのままにして、[Save Changes（変更を保存）]をクリックします。

さらに読む： npm統合 – MUIコンポーネントのUXPinへ導入のご案内

４．Semantic UI

  Semantic UIはBootstrapに代わる優れたフレームワークです。Semantic UI Reactのフレームワークには、よりモダンな美しさ、シンプルな機能、高度にカスタマイズ可能なコンポーネントがあります。また、Semantic UIには、世界で最も広範なアイコンライブラリである FontAwesome ￥が組み込まれています。

Bootstrapのように、Semantic UIはWebサイトや Web アプリケーションのプロトタイプに最適です。

Semantic UI Reactの npm パッケージをインポートする

  以下は、Semantic UI React の npm 統合 でのライブラリ設定です：

• ライブラリ名：Semantic UI – ライブラリ名はインポートには影響しない。
• パッケージ詳細：semantic-ui-react – Semantic UI React の npmレジストリに対応していないといけない。
• Dependency package の名前：semantic-ui-css – Semantic UI React が UXPin で動作するには、Semantic UI CSSのdependency が必要。
• アセットの場所：https://cdn.jsdelivr.net/npm/semantic-ui@2/dist/semantic.min.css – Semantic UI の React props のスタイリングに必要。

  その他はすべてデフォルトのままにして、「Save Changes（変更を保存）」をクリックします。

さらに読む： ライブラリ設定は React Bootstrapに似ています。Bootstrap のチュートリアルのステップバイステップのガイドに従い、Semantic UI Reactのドキュメントを使って、ライブラリとコンポーネントの設定を適宜置き換えてください。

５．Carbon Design System

  Carbonは IBMが開発および維持するデザインシステムで、React、Angular、Vueのバージョンがあります。このシンプルかつ包括的なデザインシステムには、大規模なコンポーネントとパターンライブラリ、アイコンセット、ピクトグラム、モーション、テーマ設定の指示が含まれています。

Carbon は、B2Bやエンタープライズ製品のデザインに最適なデザインシステムであり、Carbon のデータ可視化ドキュメントは、ダッシュボードやレポートのUI を開発する製品チームに最適です。  

Carbon Design Systemの npm パッケージをインポートする

  以下は、Carbon Design System React の npm 統合での ライブラリ設定です：

• ライブラリ名：Carbon NPM – ライブラリ名はインポートに影響しない。
• パッケージの詳細：carbon/react – Carbon Design Systemの npm レジストリに対応していないといけない。
• アセットの場所：https://unpkg.com/carbon-components/css/carbon-components.css – Carbon Design System の React のスタイリングに必要。

その他はすべてデフォルトのままにして、「Save Changes（変更を保存）」をクリックします。

６．Grommet

  Grommet は React ベースのフレームワークで、アクセシブルでレスポンシブなモバイル主導型のプロトタイプを作るのに適しています。このデザインシステムは、Netflix、Uber、Hewlett Packard で使用されており、簡単にテーマ設定ができるので、ぜひ試してみてください。

Grommet の npm パッケージをインポートする

  以下は、Grommetの npm 統合での ライブラリ設定です：  

• ライブラリ名：Grommet NPM
• パッケージ詳細：grommet – Grommet の npm レジストリに対応していないといけない
• アセットの場所：https://v2.grommet.io/components　

  その他はすべてデフォルトのままにして、「Save Changes（変更を保存）」をクリックします。  

Semantic UIのボタンをキャンバスに追加して選択すると、同じプロパティが UXPinのプロパティパネルに表示され、そのプロパティを調整することで、ボタンのスタイルを即座に変更することができます。

npm コンポーネントをUXPinにインポートする方法

  Mergeでの npm 統合により、エンジニアのサポートがなくても、デザインチームは Reactコンポーネントをインポートおよび管理するために必要なコントロールと柔軟性をUXPinで得ることができます。

MCM（Merge コンポーネントマネージャー）を使って、デザイナーはライブラリの npm パッケージを介して各コンポーネントとプロパティをインポートできます。コードは不要で、セットアップも数分で完了します。  

デザイナーは、このオープンソースのコンポーネントを使い、自社デザインシステムの新しいパターンを構築したり、完全に機能するUI要素を使ってMVP（最小実行可能製品）を作成したりすることができます。

MCM（Mergeコンポーネント マネージャー）の使用

  MCM（Merge コンポーネントマネージャー）は、デザイナーが npm でインポートしたコンポーネントライブラリを管理する場所です。

コンポーネントをインポートするときは、ライブラリのドキュメントと命名規則に従う必要があります。UXPinでの npm 統合は、リポジトリの命名規則を使ってコンポーネントとそのプロパティを見つける必要がありますが、React propsを間違って参照してしまうと、MCMではそれを見つけることができません。

Semantic UIのボタンを使って、コンポーネントをインポートするときに React propsを参照する方法を見てみましょう。このReact propsは、デザインシステムのドキュメントで見つけることができます。

なお、コンポーネントのプロパティをインポートする場合、MCMのプロパティ名はドキュメントにある React prop名と一致していないといけません。

この場合、Semantic UIのボタンにラベルを与える 子プロップをインポートしています。

デザイナーが UXPinのプロパティパネルで目にするのが表示名になります。

このスクリーンショットで見ることができるように、children（子）、circular（円形）、color inverted（反転色）、 secondary（セカンダリ）、size（サイズ）、type（タイプ）をインポートしました。

このようなMCMでのプロパティ名は、以下の２つのスクリーンショットにあるSemantic UIのドキュメントに対応しています。

npm コンポーネントの選択ルール

• デザイナーがnpm統合を使用できるのは、Reactコンポーネントライブラリがあるデザインシステムをインポートする場合のみで、npm パッケージを持っている必要があるため注意しましょう。
  
  
• デザインシステムは、製品のニーズに応えるものでないといけません。B2Bの製品をデザインしているのか、Web、モバイル、クロスプラットフォームのアプリケーションのプロトタイプなのか、既存のデザインシステムを補完したいのか、それともゼロから作りたいのかなどありますよね。例えば、WebサイトやWebアプリケーションを構築するのであれば、BootstrapやSemantic UIは優れた選択ですが、モバイルやクロスプラットフォームのデジタル製品には Ant Designが適しているでしょう。
  
  
• ライブラリに必要なUI要素があることを確認するために、オープンソースのデザインシステムを調査する価値はあります。また、ライブラリには、セットアップ手順や利用可能な React の propsのリストが記載されたドキュメントが必要です。これらのpropsによって、コンポーネントの色、形、インタラクティブ性、サイズ、アイコンなどのプロパティを変更できるようになります。

UXPinで npm のコンポーネントを使ってデザインしよう

ここでは、UXPin Mergeで試せる6 つの npm コンポーネントライブラリをご紹介しました。npm 統合でパッケージをテストし、コンポーネント駆動型プロトタイプがもたらすものメリットをぜひご体験ください。14日間の無料トライアルはこちらより。

The post コンポーネント駆動型 プロトタイプのための npm パッケージ６選 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が持つコンポーネント駆動型プロトタイピング機能によって、デザイナーでも高忠実度なプロトタイプ作成の実現が可能です。

npm統合で、簡単にコンポーネントライブラリをUXPinのデザインツールにインポートできます。これには、技術面での複雑な設定は不要で、共有コンポーネントのインタラクティブ性を最大限に活かすことができるのです。今回は、Mergeを使ってコンポーネントの統合が実際にいかに速く行えるのか見ていきましょう。

さっそくGitレポジトリ、Storybook、または最新のnpmからUXPinにコンポーネントを統合させてみましょう。UXPin Mergeテクノロジーついての詳細は、こちらのページをぜひご覧ください。

UXPin Merge とは

npmについてお話しする前に、UXPin Mergeの概要を説明します。UXPin Mergeはコンポーネント駆動型プロトタイプを実現するコードベースのテクノロジーです。デザイナーはゼロからデザインする代わりに、レポジトリからProduction ReadyなUI要素を使用して、高忠実度で完全に機能するプロトタイプを構築することができます。

デザイナーはビジュアル要素、エンジニアはその背後にあるコードに取り組むことで、製品開発チーム全体で「信頼できる唯一の情報源（Single source of turth）」が構築されます。これによって、実際に、UXPin Mergeを導入したPayPalやTeamPasswordのチームは、デザインの品質、スピード、一貫性向上に成功しました。

UXPin で「npm統合」って何？

UXPin Mergeを非公開のデザインシステムで使う場合、同期のためのレポジトリをセットアップする上で技術的な知識が必要になってしまうのですが、オープンソースのコンポーネントライブラリを使う場合だと、デザインチームは直感的なダッシュボードを使用して簡単にnpm統合を完了できます。

また、デザイナーはMergeコンポーネントマネージャー機能を使って、コンポーネントのインポートとプロパティを管理することができます。たとえば、 Bootstrapのコンポーネントライブラリまたは以下９つのVariants（変数）からButtonをインポートできます：

• プライマリー（primary）
• セカンダリー（secondary）
• 成功（success）
• 危険（danger）
• 警告（warning）
• 情報（info）
• 明るい（light）
• 暗い（dark）
• リンク（link）

これらのVariantsはUXPin上の画面右にあるプロパティパネル（Properties Panel）でドロップダウンとして表示されます。Mergeはほとんどのコンポーネントにホバーステートも含んでいるため、デザイナーはこのような詳細を気にせず、プロトタイピングにすぐに取り掛かれることができます。

デザインチームは、React Bootstrapのドキュメントから、インポートするコンポーネントのプロパティを探すことができ、全てのプロパティまたはプロジェクト関連のもののみをインポートすることもできます。

 Bootstrapを使うメリット

 BootstrapはReact、Vue、Angularで利用可能な最も有名なモバイルファーストのフロントエンドフレームワークです。

UXPinのnpm統合では、React Bootstrap のコンポーネントライブラリを使用しますが、VueまたはAngularのバージョンをインポートするにはStorybook統合で可能です。

BootstrapはレスポンシブなWebサイト・Webアプリ開発に最適ですが、モバイルアプリのデザインプロジェクトでもReactライブラリを使うこともできます。Bootstrapには、フォーム要素、レスポンシブテーブル、その他の関連コンポーネントが豊富に揃っているため、Webベースのエンタープライズ向け製品に適しています。

なお、Boostrapは総合的なフロントエンドフレームワークなので、Bootstrapのサンプルページでできることを見ておくことをおすすめします。

UXPin Mergeで Bootstrapの npm 統合

npmパッケージ（react-bootstrap）を使って、BootstrapのコンポーネントをUXPinのデザインエディタにインポートできます。Mergeコンポーネントマネージャーによって、各UI要素と利用可能なプロパティをインポートが可能です。

UXPinのコンポーネント駆動型のプロトタイピングで、要素は同じレポジトリから取り込めることから、デザインチームはエンジニアと同じ忠実度と機能性を手に入れることができます。エンジニアがレポジトリのコンポーネントでできることを、デザイナーも同様にUXPinのプロパティパネルで実現することができます。

また、フレームワークのドキュメンテーションにあるBootstrapのReact propsを使用することでこれらのプロパティを割り当てることができます。

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

Mergeコンポーネントマネージャーはnpmコンポーネントをインポートおよび管理するためのハブ的存在であり、プロジェクトを完成させるために必要な数だけインポートすることができます。

また、インポートするプロパティ数のコントロールも可能です。例えば、Bootstrap Buttonの［プライマリー］と［セカンダリー］Variantsのみを使いたい場合、全てのプロパティをインポートするのではなく、使いたいプロパティ２つのみをインポートすればいいだけです。

UXPinを React Bootstrapの npm パッケージにつなげる

ステップ１

UXPinのDashboard（ダッシュボード）画面に移動し、［+ New Project（新規プロジェクト ）］をクリックします。

ステップ２

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

ステップ３

［Design with Merge components （Mergeコンポーネントでデザインする）］と ［+ Add new Library （ライブラリの追加）］をクリックします。

ステップ４

［Import React Components with npm integration（npm統合でReact Componentsをインポートする）］を選択し、［Next（次へ）］をクリックします

ステップ５

ライブラリに名前を付けます。この名前は参考用のためだけなので、インポートには影響しません。

Mergeを動作させるには、npm統合に 『React Bootstrap（react-bootstrap）』と『 Boostrap（bootstrap）』という２つのBootstrapパッケージが必要です。

最後に、コンポーネントのプロパティをUXPinで動作させるには、BootstrapのCSSファイルへのパスが含まれてないといけません。（パスはReact-Bootstrap のドキュメントのCSSの下にあります。）

• bootstrap/dist/css/bootstrap.min.css

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

上記の手順を完了すると、UXPinはMergeのコンポーネントマネージャー にリダイレクトします。

ステップ１

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

Mergeコンポーネントマネージャーが新規タブで開きます。

ステップ２

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

ステップ３

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

正しい命名規則は、React Bootstrapのドキュメントにあります。

このチュートリアルでは、Bootstrap Buttonをインポートして、［Components （コンポーネント）］という新しいカテゴリーを作成してみます。ここでは、デザイナーとエンジニアが同じ基準点持つためにReact Bootstrapのドキュメントと同じカテゴリを使うことをお勧めします。

１回のインポートで複数のコンポーネントを追加できるので、ステップ２と３の繰り返しは省略されます。

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

ステップ４

右上の［Publish Changes（変更を公開）］をクリックして、インポート処理を初期化します。

新しいコンポーネントで初めてこの作業を行う際は、少し時間がかかるかもしれません。

ステップ５

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

ここまで進めると、左サイドバーのカテゴリーに[Components]、その中に[Button]があります。

ステップ６

［Button］をクリックしてプロパティを追加してみましょう。このReact propsは、React Bootstrapのドキュメントで、Components > ButtonのAPIの下にあります。

Mergeコンポーネントマネージャーでコンポーネントプロパティの追加

React Bootstrap のドキュメントを使って、Buttonプロパティをいくつか追加します。

Buttonラベル

ステップ１

React BootstrapのButtonラベルは、childrenプロパティを使って、次のように設定します：

• プロパティ名：「children」と入力（小文字を使用する）
• 表示名：（これは必須ではないですが）デザイナーとエンジニアの両方が使うわかりやすいものにする（ 統一感があるように 、ここでは『label』とします。）
• 説明：デザイナーに簡単な説明や指示を加える
• プロパティの種類：String（ストリング）型
• プロパティコントロール：『textfield（テキストフィールド）』
• デフォルト値：好みで設定 （ 今回は 『Button』を選択。）

コンポーネントのプロパティを完成させると、コンポーネントのプレビューが表示され設定した通りに変更されます。

ステップ２

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

そして［Save Changes（変更の保存）］

最後に［Publish library changes（ライブラリの変更を公開）］

コンポーネント 駆動型のプロトタイピングをご体験ください

実際にReact Bootstrapコンポーネントとプロパティをインポートしてみると、UXPinでのプロトタイピングはドラッグ＆ドロップでレイアウトを作成するのと同じくらい使いやすいんです。ちなみに、下画像のシンプルなデザインのメール登録フォームだと、３つの Bootstrapコンポーネントを使っただけで、１分もかからずに作成できました。

 Bootstrapコンポーネントを選択すると、Mergeコンポーネントマネージャーで作成したプロパティはUXPinのキャンバス画面右側にあるプロパティパネルで表示されます。

UXPinのnpm統合でコンポーネント駆動型プロトタイピングをさっそく試してみませんか？ Bootstrapのnpmコンポーネントをインポートして、いかに早く製品のアイデア出しから開発までできるかをご体験ください。開発時間を大幅に短縮できますよ。詳しくはMergeのページをご参照ください。

The post BootstrapコンポーネントをUXPinに追加する方法 – npm統合ガイド appeared first on Studio by UXPin.

忠実度とは、プロトタイプやデザインの「精度」や「リアルさ」のレベルを指し、ビジュアルデザインやインタラクション、機能性において、プロトタイプが最終製品にどれだけ近いかを表します。 高忠実度 なプロトタイプは再現性が高く、最終的なUX（ユーザーエクスペリエンス）を可能な限り近い形でシミュレーションすることを目的としています。

 高忠実度 プロトタイプ（Hi-Fiプロトタイプ）には、色、タイポグラフィ、インタラクション、アニメーション、イメージなど、実際の製品が持つUI（ユーザーインターフェース）に沿ったビジュアルおよびインタラクティブな要素が含まれます。このようなプロトタイプによって、ユーザーやステークホルダーに没入感のある体験が提供されるため、最終製品のイメージが理解しやすくなります。

そして、デザイナーはデザインプロセスの後期段階で、コンセプトのテストおよび検証、ユーザーフィードバックの収集、UX改良のために忠実度の高いプロトタイプを作成します。そして作成されたプロトタイプで、インターフェースの使いやすさや効果性の評価、潜在的な問題や改善点の特定し、情報に基づいた製品デザインの決定をすることができます。

UXPinのMergeテクノロジーで完全にインタラクティブなプロトタイプを作成して、より良いデザインを決定しましょう。詳細とアクセスリクエスト方法については、こちらのページをぜひご覧ください。

高忠実度（Hi-Fi）と低忠実度（Lo-Fi）プロトタイプ

デザイナーは、さまざまな目的と目標のために、デザインプロセスの各段階で高忠実度または低忠実度なプロトタイプを使用します。

低忠実度（Lo-Fi）プロトタイプとは、一般的に簡単なスケッチやワイヤーフレーム、または基本的なデジタルモックアップを使って作成される、シンプル化されたデザインコンセプトのことです。デザイナーは、デザインプロセスの早い段階でこの低忠実度プロトタイプを作成し、多くのアイデアを共同作業で可能な限り速やかにに反復します。

また、低忠実度プロトタイプは、デザインの核となる構造、情報アーキテクチャ、機能性に焦点を当てており、簡単に作成できるため、デザイナーは時間とリソースを過剰に費やすことなく、デザイン案を複数検討し、反復することができます。

一方、高忠実度プロトタイプでは、最終的なデザインのより正確でリアル感があり、ビジュアルデザイン要素、インタラクティブ機能、実際のコンテンツを取り入れ、最終製品のイメージ通りのデザインや機能とほぼ同一のように完成します。デザインチームは、デザインプロセスの後半で高忠実度プロトタイプを作成し、デザインハンドオフの前にコンセプトを確定します。

 高忠実度 プロトタイプのプランニング

デザイナーは、デザインプロセスの初期段階でほとんどのリサーチとプランニングを完了します。そのため、このステップでは高忠実度プロトタイピングを導くために、調査結果を統合し、レビューします。

プロトタイプの目的と目標の設定

デザインのどの側面をテスト、評価、またはステークホルダーに見せたいかを決定することで、高忠実度で達成したい具体的な目標を設定します。

例えば、ECのWebサイトをデザインする場合だと以下のようになります：

• 目標：カートに商品を追加し、チェックアウトプロセスを完了するまでのユーザーフローをテストする。
• 目的：ユーザビリティの問題特定およびコンバージョン率の最適化。

UXリサーチからのユーザーゴールの設定

デザイナーがプロトタイピングツールを使い始める前に、何を作って、誰のために作るのかがわかるように、徹底したUXリサーチが必要です。ユーザーゴールを理解することで、ターゲットオーディエンスのニーズや好みに合わせて忠実度の高いプロトタイプを調整することができるのです。

例えば、フィットネス愛好家向けのモバイルアプリをデザインしている場合、ターゲットとなるユーザーは、ワークアウトや進捗情報の追跡に興味がある可能性があります。となるとこのユーザーグループの目標には、フィットネス目標の設定、消費カロリーの追跡、ワークアウト統計の分析などが含まれます。このようなリサーチを利用することで、デザイナーはそれに応じて機能やインタラクションを計画することができますよね。

主な機能とインタラクションの概要

上記の目標と目的を達成しながら、適切なUXを実現させるためにプロトタイプに必要な中核となる要素を決定します。そのような主要な機能性を特定することで、デザイン作業に優先順位をつけ、プロトタイプに必要不可欠なインタラクションとユーザーフローを確実に捉えることができるのです。

例えば、フライト予約のモバイルアプリをデザインする場合、主な機能として以下が挙げられます：

• フライトの検索
• 検索結果の絞り込み
• フライト詳細の表示
• 座席の選択
• 支払いと予約確認
• 予約内容の確認

視覚的要素のデザイン

デザイナーは、リサーチ、スケッチ、ワイヤーフレームを基礎として、高忠実度のプロトタイプの視覚的要素をデザインします。また、視覚的要素をデザインする際は、タイポグラフィ、色、イコノグラフィー（図像）、イメージなどのさまざまな側面を考慮します。

製品のタイポグラフィと色は、ブランドアイデンティティと調和され、読みやすさを上げるものでないといけません。そして、製品のイコノグラフィーは、親しみやすく直感的なシンボルを使ってアクションや機能を表します。イラストや写真などのイメージは、UXの質を向上させて、適切なメッセージを伝えてくれます。

また、デザイナーは、このようなデザイン要素が、色のコントラスト、読みやすさ、支援技術などのアクセシビリティにどのような影響を与えるかも考慮しないといけません。

オープンソースのコンポーネントライブラリの活用

デザイナーは、MUI、Ant Design、Fluent UI などのオープンソースのコンポーネントライブラリを使うことで、ビジュアルデザインのプロセスを加速することができます。ボタン、フォーム、ナビゲーションバーなどの既製要素を活用することで、デザインに必要な時間と労力が削減され、 高忠実度 のプロトタイプ全体で一貫したビジュアル言語を維持することができるのです。

UXPinには、UIデザインのプロセスを簡素化するツールや機能を提供しています。UXPinにあるMergeライブラリによって、UI要素をドラッグ＆ドロップするだけで画面やレイアウトが構築可能となります。これらのコンポーネントはデフォルトでインタラクティブで、デザインシステムによって定められたプロパティを含んでいるため、より速く、効率的で、一貫性のあるUIデザインが可能になります。

この段階が完了すれば、デザイナーはインタラクティブなプロトタイプを作るための、 高忠実度 なモックアップが作成可能です。

コンポーネントのインタラクションとアニメーションの追加

デザイナーは、ユーザーと要素とのインタラクションを反映するために、ホバー、アクティブ、無効などのさまざまなステートを確定します。また、最終製品の動的な動作をシミュレーションして、たとえば「ユーザーがフォームで入力必須箇所の欄を入力するまでボタンを無効状態にする」など、よりリアルなUXを提供するために、コンポーネント間の遷移も作成します。

さらに、デザイナーは マイクロインタラクションとアニメーションを取り入れます。マイクロインタラクションとは、フィードバックを提供し、プロトタイプとのインタラクションを通してユーザーをナビゲートする、小さくて、繊細で、意図的なアニメーションのことです。プロトタイプをより魅力的でインタラクティブなものにするだけでなく、ユーザーに重要な情報を伝えて、インターフェースをより直感的に誘導してくれます。

Mergeのインタラクティブなコンポーネントを活用

UXPinのMergeテクノロジーによって、デザイナーはレポジトリからコードコンポーネントをデザインプロセスに取り込むことができ、そのUI要素には、デザインシステムによって規定されたインタラクションなどのプロパティが含まれています。

この『Code-to-Design』の手法により、デザイナーはスタイリングやインタラクションなどのコンポーネントプロパティの設定に悩まされることはありません。また、各コンポーネントのバリアントは、デザイナーが選択できるように、例えば「コンポーネントのステート選択」などが UXPinのプロパティパネルに表示されます。

さらにデザイナーは、キーボードやスマホ用のトリガーやアクションなどを含むUXPinのインタラクション機能を使って、マイクロインタラクションを追加することもできます。

ユーザーフローのシミュレーション

ユーザーフローとナビゲーションパスのマッピング

デザイナーは、画面の論理的な順序を確定し、ユーザーの［入口］や［出口］、およびタスク達成のために取ることができるさまざまな［経路］を特定するなど、デジタル製品を通じて「ユーザージャーニー」を定めます。そのユーザージャーニーマップで、ユーザーにとって使いやすくて直感的なナビゲーション体験が保証されます。

インタラクションの設定

デザイナーは、ユーザージャーニーマップに従って、ボタンやリンクなどのインタラクティブな要素を使って、画面間のつなぎを設定します。そしてユーザーは、設定したつなぎによって、さまざまなスクリーンをナビゲートし、製品内で起きるトランジションやインタラクションのシミュレーションができます。

トランジションへの対応

デザイナーは、アニメーション、トランジション、インタラクティブな要素を使って、例えば、「ボタンをクリックするとモーダルが表示される」や、「スクロールすると追加コンテンツが表示される」など、ユーザーがプロトタイプとどのように操作するかをシミュレーションします。

このプロセスが終わる頃には、デザイナーはエンドユーザーと 高忠実度 のプロトタイプをテストする準備が整います。

テストおよびイテレーション（反復）

テストとは、デザイナーがユーザーからのフィードバックを取り入れ、より効果的でユーザーに優しいソリューションを生み出すためにデザインを改良することで、高忠実度のプロトタイプを継続的に改善していく反復的なプロセスです。

以下は、高忠実度プロトタイプのプロセスにおける概要です：

• ユーザーによるユーザビリティテストのセッションを実施し、高忠実度のプロトタイプを評価して、そのユーザビリティに関する貴重なフィードバックを収集する。
• プロトタイプをステークホルダーに提示し、ビジネス価値のフィードバックを得る。
• プロトタイプを使ったユーザーとステークホルダーの対話、理解、全体的な経験に関するフィードバックとインサイトを収集および分析する。
• 改善点を特定し、受け取ったフィードバックに基づいてプロトタイプに変更を加える。
• ユーザビリティの問題に対処し、全体的なUXを向上させるためにデザインを改良する。
• プロトタイプが確実にユーザーのニーズを満たし、デザイン目標に合致していることを確認するために改良の反復プロセスを繰り返します。

UXPin でのプロトタイプの共有と連携

プロトタイプを共有し、フィードバックとレビューを受ける

UXPin のプレビューと共有機能により、デザイナーはチームメンバーやステークホルダーとデザインやプロトタイプを共有でき、その際、サイトマップ、コメント、スペックモード、ドキュメントなど、デザイナーが共有したいものを選択できます。

UXPin の共有リンクはオープンな Web 上で利用可能です。つまり、リンクがあれば誰でもプロジェクトにアクセスできます。その際デザイナーは、チームメンバーやステークホルダーだけがアクセスできるように、プロジェクトをパスワードで保護することができます。

チームメンバーやステークホルダーとの連携

UXPinのコメント機能で、オブジェクト上で直接コメントしたり、メンバーのタグ付け、コメントの割り当て、適切なアクション後に解決できることから、メンバーやステークホルダー間の連携強化されました。また、Team（チーム）コメントとPublic（公開）コメントの機能を使えば、UXPinのアカウントを持っていない人でもフィードバックに参加してもらうことができます。

より円滑な連携とデザインハンドオフ

デザイナーとエンジニアはUXPinのMergeテクノロジーを通して同じ言語で会話できることから、コードコンポーネントで 高忠実度 のプロトタイプを構築すると、デザインと開発プロセスの間のギャップを埋めることができます。

デザイナーとエンジニアは、まったく同じコンポーネントをそれぞれのレンズを通して見ています。例えばデザイナーはUXPinでビジュアル要素を確認し、エンジニアはIDE（統合開発環境）でコードを確認しますが、デザイナーとエンジニアが同じ制約の中で作業するため、この「信頼できる唯一の情報源（Single source of truth）」によって摩擦は軽減されます。また、これらの制約は、デザインドリフトや技術的負債、不整合を防ぐことから、より調和のとれた製品開発プロセスを生み出すのです。

ユーザーテストを強化し、ステークホルダーの連携を効率化するために、より優れた高忠実度のプロトタイプをより速く、よりインタラクティブに構築しませんか。

UXPin Merge を使った高忠実度のプロトタイプについての詳細はこちらをご覧ください。

The post UXPinでできる 高忠実度 なプロトタイピング appeared first on Studio by UXPin.

ユーザビリティテスト参加者やステークホルダーに実際のユーザー体験に近いものを提供する上で、インタラクション機能は欠かせない存在です。しかし、インタラクティブなコンポーネントの作成には時間が掛かってしまい、ほとんどのデザインツールでは上手くいかないことから、多くのデザイナーを悩ませているでしょう。

UXPin Mergeを使用したコンポーネント駆動型プロトタイピング技術と、インタラクティブコンポーネントを使うことで、完全に機能するプロトタイプを構築できます。機能横断的なコラボレーションとユーザーテストを強化するための詳細については、こちらのページをご覧ください。

 インタラクティブコンポーネント とは？

 インタラクティブコンポーネント （またはインタラクティブ要素）は、デザインシステムから再利用可能なUI要素と、デフォルトでインタラクティブ機能を含んでいます。普段からUIキットを使い、プロジェクトごとにインタラクションを追加しなければならないデザイナーにとってこれは画期的と言えるのではないでしょうか。

デザインチームは、インタラクション、ステート、その他のアニメーションを設定して、最終製品を正確に表現する没入型のプロトタイプを作成できます。

インタラクティブコンポーネント のメリット

インタラクティブコンポーネント のメリットをいくつかご紹介します。

1. 少ないアートボード

従来、デザインツールを使ってインタラクションを作成するには、基本的な機能を実装するだけでも複数のアートボードが必要でした。デザイナーは、 インタラクティブコンポーネント を使うことで、1つのアートボードで同じ得ることができます。

2. 市場投入までの時間を短縮

インタラクティブなコンポーネントは再利用可能なので、デザイナーはインタラクションを一度設定するだけで、デザインプロセスでの時間を大幅に節約できます。

エンジニアが承認されたコンポーネントに慣れ親しめば、デザインのハンドオフはより簡単になり、プロジェクトの納期をさらに短縮することができます。

これらの時間節約の結果、市場投入までの時間が短縮されます。

3. 一貫性の向上

UIキットはデザインの一貫性を高めますが、インタラクションに関してはあいまいさを残します。デザイナーはこれらのインタラクションを自分で設定しなければならず、エラーや一貫性の欠如につながってしまいます。

インタラクティブなコンポーネントには、インタラクティブ性がすでに備わっているので、誰もが同じステート、マイクロインタラクション、アニメーションを持ちます。これによって、一貫性を高めるだけではなく、デザイナーが修正するセットアップタスクやエラーが少なくなるため、効率性を高めます。

4. より良いテストとフィードバック

ユーザーやステークホルダーからのフィードバックは、デザインプロジェクトにとって非常に重要です。また、ビジネスゴールに沿ったユーザー中心の製品を提供するための意思決定の原動力となります。

ほとんどのデザインツールでは、エンジニアが数行のコードで実装する単純なインタラクションを実装するための忠実さと機能性に欠けています。 インタラクティブコンポーネント を使用すると、コードの機能を簡単に再現できるため、ユーザビリティテストやステークホルダーのために実物に近いプロトタイプを作成できます。

5. デザインシステムの普及を促進する

デザインシステムチームの仕事の1つとして、デザインシステムを普及を促進させることです。 これにおいても、インタラクティブコンポーネント は製品開発チームの効率的なワークフローを作成できる強力なツールとなります。

6. デザインの拡張

UXPinでは、コンポーネント駆動型のプロトタイピングとインタラクティブコンポーネントがデザインのスケーリングにどのように役立つかを見てきました。１つの例として、PayPalが新しく人材を雇用せずデザインプロセスを拡張したUXPin Merge活用方法をこちらで紹介しています。

リポジトリにホストされているインタラクティブコンポーネントにMergeを統合することで、PayPalのプロダクトチーム（UX/デザインツールの経験はほぼ無いに等しい）は、経験豊富なUXデザイナーが以前行っていたよりも8倍速くデザインプロジェクトの90％を完了することができました。

 インタラクティブなコンポーネント により、学習曲線が大幅に短縮されたことでデザイナーでない人にとってもデザインプロセスがより身近なものになりました。

PayPalのUXチームは、レイアウトやテンプレートを含むインタラクティブコンポーネントライブラリを構築し、React propsを使用してデザインシステムの制約を設定しました。製品チームは、ユーザビリティテストとデザインハンドオフのためのプロトタイプを、ドラッグ＆ドロップで簡単に構築できます。

インタラクティブコンポーネントは、プロダクトチーム（または別のUXPin MergeユーザーであるTeamPasswordの場合はエンジニア）のような非デザイナーに、より多くのUXに関する仕事を与えることができます。

すでに構築済みのコンポーネントにクリック、ホバーなどの条件に応じてインタラクションを作成することも可能です。

UXPinプロトタイプにインタラクティブ・コンポーネントを組み込むには？

インタラクティブコンポーネントを製品のプロトタイプに組み込むには、多くのステップを踏む必要があります。フォームが実際に入力できること、ボックスがチェックできること、リンクがクリックできることを確認します。

このようにすることで、ユーザーが製品を使おうとする経験を持つことができ、製品がどのように機能し、人々がどのように使用する（または使用したい）のかについての洞察を得ることができます。

1. UXPinでの インタラクティブコンポーネント の使用

10年以上前のUXPinの最初のリリース以来、インタラクティブコンポーネントはUXPinのデザインツールの中核であり、最終的な製品体験を正確に再現するプロトタイプを作成するソリューションをデザイナーに提供してきました。

UXPinには、インタラクティブコンポーネントを作成するための4つの強力な機能があります：

• ステート（状態）： 1つのコンポーネントに対して、それぞれ異なるプロパティとインタラクションを持つ複数のステートバリアントを作成できます。
• バリアブル（変数）： ユーザーの入力データをキャプチャし、パーソナライズされた動的なユーザー体験を作成するために使用します。
• Expression（式）： Javascriptのような関数で、複雑なコンポーネントや高度な機能を作成できます！
• 条件付きインタラクション： ユーザーのインタラクションに基づいてif-thenやif-elseの条件を設定し、複数の結果を持つ動的なプロトタイプを作成して、最終的な製品体験を正確に再現します。

UXPinのプラットフォームで簡単にドラッグ＆ドロップできる、ビルド済みのコンポーネント（UXPinでは「フォーム」と呼びます）を使用するのも1つの方法です。(ゼロから設計する必要はありません！）

UXPinのサンプルページにあるインタラクティブなコンポーネントの例をいくつかご紹介します。

ここで、ステート、バリアブル、Expression、条件ロジックで何ができるか見てみましょう。

例１. ボタン

例２. インプットとテキストエリア 

例３. ラジオボタン

例４. インタラクティブなサインアップフォーム

→ このサンプルをダウンロードして使いたい場合は、こちらから。

ドキュメントはこちらをご覧ください。

2. UXPin Mergeの インタラクティブコンポーネント 

Mergeは、コンポーネント駆動型のプロトタイピングとインタラクティブコンポーネントをさらに進化させます。デザイナーが UXPin でコンポーネントを作成する代わりに、Merge はリポジトリからデザイン システム ライブラリをインポートします。

これらの MergeのUI要素の背後には React、Vue、Angular などのフロントエンドフレームワークのコードがあるため、真にインタラクティブなコンポーネントとなります。組織のデザインシステムをインポートすることも、オープンソースのライブラリを使用することもできます。

デザイナーは Mergeコンポーネントを使用するためにコードを見たり書いたりする必要はありません。また、UXPinのプロパティパネルからコンポーネントのプロパティにアクセスし、デザインシステムの制約内で変更を加えることができます。

Mergeについての詳細やアクセスはこちらをご覧ください。

Mergeのインタラクティブコンポーネントを使ってデザインする

ステップ 1: デザインシステムからコンポーネントを取り込む

Mergeを使用してインタラクティブ コンポーネントを UXPin にインポートするには、3 つの方法があります：

• Git統合： React コンポーネント ライブラリを UXPin に直接接続する
• Storybook統合： Vue、Angular、HTML、Ember、Web Components などのフロントエンドフレームワークを同期します。
• npm統合： Node Package Manager（npm）からオープンソースのライブラリをインポートできます。npm Integration とその動作方法の詳細をご覧ください。

インポートされたMergeコンポーネントは左サイドバーのUXPinのデザインシステムライブラリに表示されます。デザイナーはサイドバーから必要なUI要素をクリックまたはドラッグしてキャンバスに表示することができます。

また、複数のデザインシステムとUXPin要素を使用したり、それらを組み合わせて新しいコンポーネントを作成し、パターンとして保存することもできます。

UXPin Mergeでプロトタイピングを始める方法

Mergeを使用して UXPinのコンポーネント駆動型プロトタイピングを始める準備はできましたか？始めるにあたって2 つの方法があります：

• オープンソースライブラリ： オープンソースライブラリは、アクティブな開発サポートがないチームや、コンポーネントに取り組む前にどのように作業できるかの基礎的な情報を把握したいチームに最適です。
• プライベートなデザインシステム： 製品のプライベートデザインシステムをUXPinと同期させたい場合は、Mergeページでアクセスをリクエストしてください。

UXPinの無料トライアルを14日間無料でお試しいただけますので、ぜひご利用ください。

The post プロトタイプに命を吹き込む インタラクティブコンポーネント 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.

プロトタイプが完成しましたか？それでは、作成したデザインを開発チームに送ってコードに変換してもらいましょう！

…しかし、ここで疑問が浮かびます。そもそも、「デザインからコード（Design to Code）」という流れで行うのは、本当にベストな手順なのでしょうか？

これについて考える前に、もう一つの方法として「コードをデザイン（Code to Design）」に反映させ、コード化されたUIコンポーネントで作業する方法もあります。

本記事では、「Design-to-Code（デザインからコード）」と「Code to Design（コードからデザイン）」のワークフローについてメリット、デメリットを含めて説明し、実際に企業が実践しているユースケースをいくつかご紹介していきます。

「Code to Design」のテクノロジーを体験してみませんか？UXPin Mergeで、デザインと開発での「信頼できる唯一の情報源（Single source of turth）」を活用しましょう。UXPin Mergeについて詳しく見る。

Design-to-Code

「Design-to-Code」は、典型的な製品開発プロセスを表しています。デザイナーはデザインツールやプロトタイピングツールを使ってUI（ユーザーインターフェース） をデザインし、デベロッパーに渡してコード化してもらいます。

長年にわたり、「Design-to-Code」のプロセスは進化してきましたが、「デザイン」と「開発」の間には、まだ大きなギャップがあります。デザイナーは今でも静的なUIを作成し、エンジニアはそれをコードに変換しないといけないのです。

静的なUIは忠実度や機能性に欠けるため、デザインチームはデザインやプロトタイプが何をするものなのか、ドキュメントや注釈、説明を含めないといけません。

ツールにインタラクティブ性がなく、多大な時間とリソースが必要なことから、多くのデザイナーがアニメーションやトランジションのデモにGIFやビデオを使っています。それによって、デザインファイルやドキュメントを断片化し、デベロッパーやステークホルダーにとってわかりにくいものとなってしまいます。

詳しくは、「デザインツールはイメージベースからコードベースへ」の記事でご覧ください。

「Design-to-Code」の利点

デザイナーとエンジニアにとって「Design-to-Code」のプロセスは、それぞれが使い慣れたツールやワークフローを使って馴染みのある言葉を用いて作業することができることから、両者にとって。

デザインツールは、使いやすさとスピードを重視して作られており、経験豊富なデザイナーは、画像ベースのデザインツールを使って、画面モックアップを本当に速く作成することができます。

「Design-to-Code」の限界

残念ながら、「Design-to-Code」は実際のところ、利点よりも制限の方が多いため、多くの企業がデザインプロセスの改善に模索しています。

デザインと開発間のズレ

現在の「Design-to-Code」でのワークフローでは、忠実度と機能性が大きな制約となっていることから、画像ベースのプロトタイプでは最終製品のように見えたり機能はしません。デザイナーは、プロトタイプを説明する文書や注釈、会議を行ったとしても、エンジニアが期待に応えてくれないと不満を抱いてしまうかもしれません。逆に、エンジニアはデザイナーに技術的な制約をうまく伝えづらいため、そこに摩擦が生じてしまいます。

デザインシステムの課題

高品質のデザインシステムであっても、「Design-to-Code」は、ハンドオフ、スケーラビリティ、成熟度の面で課題が生じてしまい、デザインシステムチームは、以下の２つのデザインシステムの管理が必要です：

• デザイナー向けのUIキット
• デベロッパー向けのコンポーネントライブラリ

さらに、両方のシステムに関するドキュメントの維持が必須です。

このワークフローを「信頼できる唯一の情報源（Single source of truth）」として表現するのは誤りです。これについて、ドイツに本拠を置くソフトウェア開発会社のdotSourceがこちらの記事（英語の記事です）で以下のように指摘しています：

「デザインシステムのリリースの多くは、少なくとも以下の３か所のアップデートが必要になるでしょう：

• デザインシステムのコードベース（コンポーネントライブラリ）
• デザインチームのUIキット(デザインツール)
• デザインシステムのドキュメント

各 UIコンポーネントに対して、「信頼できる唯一の情報源（Single source of truth）」が「３つの 信頼できる情報源」になると、直感に反しているように見え、エラーを増加させてしまいます。デザインシステムの更新プロセスと技術が一致していないと、1つの変更に3箇所の更新が必要になるため、チームは冗長な作業で行き詰まることになってしまいます。”

重複作業

エンジニアは、デザインの最終版を手に入れたら、それをコードに変換させなければいけないため、デザインをコードに反映させる必要がない場合よりも、はるかに長い時間がかかってしまいます。

Code to Design

「Code to Design」は、UXPinがMergeの技術を使って独自に開発したワークフローです。

デザイナーは、使い慣れたUIや機能のあるデザインツールを引き続き使いますが、デザインはベクターグラフィックスではなく、本番環境へリリースする前のコードをレンダリングします。

多くのデザインツールはプラグインや拡張機能でこのシステムを再現しようとしていますが、エンジニアがそのコードを使えることはほとんどありません。MergeはデザインシステムのリポジトリからUXPinにコンポーネントを同期させるので、コードはエンジニアが自分で書いたものなのでそのまま使うことができます。

そしてデザイナーは、エンジニアが開発時に使うのと同じコンポーネントライブラリをデザインプロセスで使います。

「Code to Design」の利点

信頼できる唯一の情報源（Single source of truth）

「Code to Design」は製品開発の多くの問題を解決しますが、最も大きな利点は、「真の 信頼できる唯一の情報源（Single source of truth）」、つまり全員が同じレポジトリから同じコンポーネントライブラリを使う点です。レポジトリに変更があると、自動的にUXPinに同期され、デザインチームに更新が通知されます。

Mergeのバージョン管理により、デザインチームは以前のリリースに変更し、選択したときに既存のプロジェクトの更新のみをすることができます。

デベロッパーは、UXPinの Storybook統合を使っていたら、リリースごとにドキュメントを同時更新します。この「信頼できる唯一の情報源（Single source of truth）」は、DesignOpsでの多くの課題を解決し、それによってチームメンバーが重要なタスクに集中することができます。

「Code to Design」のワークフローのもうひとつの大きなメリットは、そのデザインハンドオフのしやすさです。エンジニアはコンポーネントライブラリのパッケージをインポートしてコンポーネントを追加し、UXPinからJSX コードをコピーし、開発を完成させます。

コンポーネント駆動型のプロトタイピング

Mergeコンポーネントは、レポジトリと同じプロパティとインタラクティブ機能でUXPinに表示されます。各コンポーネントのプロップ（Storybookでは Args）はUXPinキャンバス上のプロパティパネル（Propaties Panel）に表示されるため、デザイナーは色、ステート、サイズなどを含むデザインシステムに従って変更を加えることができます。

このような既製のUI要素を用いて、デザイナーがコンポーネントとパターンをドラッグ＆ドロップするだけで、完全に機能するプロトタイプを構築するコンポーネント駆動型の迅速なプロトタイピングが実現するのです。

デザインドリフトがない「究極の一貫性」

既成のコンポーネントによって、誰でも同じ制限および制約のある同じUIライブラリを使うため、矛盾がなくなります。

デザイナーは、UXPinのプロパティパネルで利用可能なプロパティによってのみ要素を変更することができます。オーバーライドがないため、変更の可能性がないことから、結果としてドリフトが発生しません。

ガバナンスの向上

この制限により、ガバナンスとデザインシステムの整合性が上がります。デザインシステムチームはレポジトリを絶対的に管理していることから、新しいパターンやコンポーネントを普及させるためには、誰もが正しい手順を踏まなければなりません。

拡張性と成熟度

Merge は、チームメンバー全員が同じコンポーネントライブラリを使い、ゼロからのデザインや開発を行わずに製品をリリースすることで、最高のデザインシステム成熟度を提供します。この技術を使うことで、組織は「Design to Code」のワークフローに従うよりも、大幅に早くこのレベルの成熟度を達成することができるのです。

全員が単一のコードベースを使用することで、技術や市場の変化に応じたデザインシステムの拡張がしやすくなります。また、デザインシステムチームが新しいコンポーネント、パターン、テンプレートをレポジトリに追加すると、製品開発チーム全体ですぐに利用できるようになります。

検証の質を向上

「より良いプロトタイプ」は、「より良い検証」ということであり、デザイナーは、最終的な製品体験を正確に表現するプロトタイプによって、デザインプロセスにおいてより多くの問題を解決し、より良い機会を見出すことができます。

ユーザビリティ調査の参加者やステークホルダーは、最終製品と同じようにそのようなプロトタイプを操作することができ、それによって有意義なフィードバックやデータに基づく実用的なインサイトに繋がります。

制限事項

「Code to Design」にはコンポーネントライブラリが必要

「Code to Design」は、コンポーネントライブラリでのみ機能します。組織内でデザインシステムがない場合は、オープンソースのUIライブラリの活用も可能です。たとえば、PayPal の社内製品開発チームではカスタマイズされた MicrosoftのFluent UIデザインシステムを使用しました。

デザイナーはMergeの npm統合を使って、npmレジストリで利用可能なオープソースライブラリからコンポーネントをインポートすることもできます。この方法には技術的なスキルは必要なく、その代わり、デザイナーは Merge コンポーネントマネージャー機能 を使って UI要素をインポートまたは管理を行うことができます。

デザイナーとエンジニアの連携

「Code to Design」では、デザイナーとエンジニアのより密接に連携する必要がありますね。ほとんどの組織には、デザインシステム専門のチームがあるので、これは標準的なガバナンスの手順とあまり変わらないでしょう。

柔軟性が低い

コードベースのデザインシステムは、デザイナーが素早く組み立てられるUIキットに比べると柔軟性に欠けてしまいます。デザイナーは、一度デザインツールにアップロードされたコンポーネントの変更や操作が制限されている、もしくは全くできません。この柔軟性の低さは、デザインシステムのガバナンスと整合性のうえでは必要ですが、革新性と創造性を制限してしまうという意見もあるかもしれません。

UXPinは他のデザインツールと同様に機能するため、デザイナーは新しいアイデアやパターンを開発し、チームメンバーに提案することができます。UXPin のパターン（Patterns）機能では、既存のデザインシステム要素を組み合わせたり、オープンソースライブラリをインポートして、新しいコンポーネントや、パターン、テンプレートを作成することができます。

このように、「Code to Design」は、デザイナーがオープンソースのライブラリの良い部分を活用して新しいパターンを開発できるため、創造性と革新の機会が増えるでしょう。

「Code to Design」を採用している企業

UXPinの「Code to Design」ワークフローは世界の様々な規模の企業に採用されています。ここでは、実際に「Code to Design」を実践しているユースケースを３つご紹介します。

PayPal

PayPalでのUXチームは、「Code to Design」のワークフローへの切り替えで、製品開発プロセスに革命を起こしました。２０１９年に切り替えて以来、PayPalの製品チームは、デザインドリフトや不整合もなく、８倍速くリリースを提供できるようになりました。さらにPayPalの新しい製品開発プロセスでは、部門外のコラボレーションも改善され、全員がUXに責任感を持つようになりました。

また、Mergeで PayPalのプロトタイプと検証の質も改善され、ユーザビリティテスト参加者とステークホルダーからのフィードバックもより良いものになりました。

「UXPin Mergeの大きな影響の1つは、高忠実度のプロトタイプを作成できるようになったことです。最終製品がどのように見えるか、UXやインタラクティブ性に関して、デザイナー、経営陣、ディレクター、デベロッパーを含む全員がより確信を持てるようになり、ステークホルダーからより質の高いフィードバックを得られるようになりました。」- Paypal 社 UX Lead EPX、エリカ・ライダー氏

TeamPassword

TeamPasswordは、競争の激しいパスワード管理市場で事業を展開する、５名からなる（２０２３年２月現在）スタートアップ企業です。TeamPasswordにはUXチームがなく、エンジニアが新しいリリースのプロトタイプとテストを行う必要があります。

Mergeに切り替える前は、TeamPasswordのエンジニアが各プロトタイプを開発していたこともあり、リソースが限られた企業にとっては時間のかかるプロセスでした。そこで２０２２ 年、TeamPasswordはUXPin Mergeに変更し、カスタムMUIのデザインシステムを同期させました。

「Code to Design」のワークフローに変えてからは、TeamPasswordの市場投入スピードは劇的に改善され、製品に使い勝手の問題や矛盾がなくなり、それによって企業の競争力が高まりました。

革新的な「Code to Design」のソリューションで「Design-to-Code」のワークフローを改善しませんか？詳細はMerge のページをぜひご覧ください。

The post 「Code to Design」か「Design to Code」どっちがいい？ appeared first on Studio by UXPin.

Ant Design は、エンタープライズ製品開発のためのよく使われているデザインシステムであり、その包括的なコンポーネントライブラリには、製品チームが最新の B2B デザインの問題を解決するのに必要なものがすべて備わっています。

主なポイント：

• Ant Design は、ボタン、フォーム、ナビゲーションメニュー、データテーブル、モーダルなど、幅広いユースケースをカバーする高品質な UI コンポーネントが集まったものである。
• Ant Design は、一貫性とユーザビリティを促進するデザイン原則とガイドラインの遵守で知られている。
• Ant Design は「Ant Design 言語」の原則に従い、それが明快さ、効率性、シンプルさを重視したデザインとなっている。
• Ant Design には、デザイナーとデベロッパーの強力で活発なコミュニティがあり、それが継続的な開発とサポートに貢献している。

UXPin Merge で、デザインチームは Ant Design の UI コンポーネントをインポートして、完全に機能するプロトタイプを作成することができます。そこで本記事では、Ant Design で作業する利点、その膨大なコンポーネントライブラリ、そして最終製品のように見える Ant Design プロトタイプを構築する方法について概説していきます。

UXPin Merge で、デザインと開発の間に「信頼できる唯一の情報源（Single source of truth）」を作成しませんか。詳細およびこの高度なプロトタイプ技術へのアクセス方法については、Merge のページをぜひご覧ください。

Ant Design （AntD）とは

Ant Design は、アリババ、アリペイ、Huabei、MYbank などの親会社である Ant グループによって開発されたオープンソースのデザインシステムであり、そのコンポーネントライブラリは、React、Vue、Angular のフロントエンドフレームワークに対応しています。

Ant Design には、レイアウト、アイコン、タイポグラフィ、ナビゲーション、データ入力/フォーム、データビジュアライゼーションなどが含まれ、デザイントークンで、組織は製品要件に合わせてコンポーネント ライブラリをカスタマイズできます。

Ant Design の主な利点

製品開発者が Ant Design を選ぶ主な理由の一つに、その包括的なコンポーネントライブラリと機能があります。データビジュアライゼーションなどの、あらゆるタイプの UI パターンを見つけることができることから、エンタープライズ製品に最適です。

以下に、ソフトウェア開発者から学んだ Ant Design の利点を挙げてみましょう：

• 行き届いたメンテナンス： Ant Design のチームは、頻繁にアップデートを行い、デザインシステムの改善に継続的に取り組んでいる。バグはほとんど発見されいないとのエンジニアからの報告もある。
• 包括的なライブラリ： Ant Design には、あらゆるデザイン問題を解決するコンポーネント、パターン、アイコンがある。さらに、各要素には複数のバージョンがあり、どのようなシナリオにも対応できる。
• ネイティブライブラリ： Ant Design Mobile には、クロスプラットフォームのネイティブアプリケーションを構築するための広範なライブラリがある。
• アニメーションライブラリ： Ant Motion は、ネイティブと Webコンポーネントライブラリを補完するために、一般的なパターンとマイクロインタラクションのアニメーションを提供する。
• サードパーティライブラリ： Ant Design のサードパーティの React ライブラリには、デザインシステムの機能を上げるデータビジュアライゼーション、無限スクロール、マップ、メディアクエリなどが含まれる。
• 国際化対応： Ant Design の国際化機能は、世界中の言語に対応しており、デベロッパーは言語を追加することもできる。
• フォーム：優れたフォーム処理機能を備えた広範なフォームライブラリ。
• Scaffold： ダッシュボード、レポート、テーブル、管理者 UI、チャット、ログインなど、１００以上のテンプレートプロジェクト。
•  

• タイプスクリプトの互換性

マテリアルデザインと Ant Design

マテリアルデザインと Ant Design は、相違点よりも類似点の方が多くあります。

どちらにも、クロスプラットフォームのアプリケーションを構築するための包括的なデザインシステムがあり、優れたドキュメントと大規模なグローバルコミュニティが備わっています。

テーマ設定

マテリアルデザインとAnt Designでは、テーマ設定にデザイントークンが使われています。そのため、デベロッパーはUIコンポーネントやパターンを簡単にカスタマイズできるようなります。

アクセシビリティ

アクセシビリティは、両デザインシステムの最も大きな違いの１つです。マテリアルデザインには、原則とベストプラクティスが各コンポーネントに「組み込まれている」アクセシビリティが備わっているのに対し、Ant Designではこれをデベロッパーに任せています。

技術スタックの互換性

マテリアルデザインは、クロスプラットフォームの Flutterのアプリケーションを開発するための最善策であり、デベロッパーは数行のコードでコンポーネントを呼び出し、UI（ユーザーインターフェース）を簡単に構築できます。また、マテリアルデザインはMUIを通じて Reactアプリでも利用できます。

対する Ant Designは、React、Vue、Angular のフレームワークに対応していることから、より多くのソフトウェアデベロッパーがデザインシステムにアクセスできるようになります。

Ant Design と Bootstrap

Bootstrap は、レスポンシブ Webサイトや Webアプリケーションを構築するための、最も古いフロントエンドの CSS フレームワークの１つです。フレームワークの CSS と Javascript のライブラリを活用して、少ない労力で Webサイトや Webアプリケーションを開発できるため、多くのエンジニアがプロトタイプに Bootstrap を使っています。

Ant Design と同様に、Bootstrap は React、Vue、Angular に対応していますが、Bootstrap がフレームワークであるのに対し、Ant Design はデザインシステムである点が両者の最大の違いです。

プロトタイプと Webサイト構築には、Bootstrap を選ぶ方がいいですが、Ant Design には、Web とネイティブのクロスプラットフォームアプリケーションを構築するのにより多くの機能があります。

Ant Designで構築できるもの

Ant Design のコンポーネント、パターン、テンプレート、アイコンの膨大なライブラリで、B2B や B2C のデジタル製品の開発が実現します。そして、このデザインシステムのフォームとデータ可視化パターンは、エンタープライズアプリケーションのための一般的な選択肢となっています。

以下は、Ant Designを採用している企業です：

• Yuque（语雀）：ナレッジマネジメントのプラットフォーム
• アリババ：世界最大のオンラインマーケットプレイス
• バイドゥ：中国の Google に相当し、Ant Design を実行する複数の製品がある世界最大級の AI・インターネット企業。
• Fielda：フィールド調査用のモバイルデータ収集アプリケーショ
• Moment：プロジェクト管理ソフトウェア
• Videsk: ビデオベースのカスタマーサービス・プラットフォーム
• Solvvy：Zoomのチャットボット・ソフトウェア
• Ant Financial：中国有数の FinTech企業

Ant Designのデザイン言語

１．デザイン言語

Ant Design のデザインバリューには、多くのユーザビリティの問題を解決するための原則とパターンが含まれており、そのデザインシステムには以下の４つの価値があります：

1. 自然：認知的負荷を最小限にするため、製品や UI は直感的でないといけない。
2. 一定：デザイナーは、連携を強化し、一貫したユーザー体験を提供するために、コンポーネントとパターンを一貫して使用しないといけない。
3. 有意義：製品には明確な目標があり、ユーザーを支援するために各アクションに対して即座にフィードバックを提供しないといけない。また、デザイナーは、ユーザーが気が散ることなくタスクに集中できるような体験を作らないといけない。
4. 成長：デザイナーは、人間とコンピュータのインタラクションの共生を考慮し、スケーラビリティを考慮したデザインをしないといけない。

２．動作の原理

Ant Design には以下の３つの動作の原理があります：

1. 自然：デザイナーは、スムーズで直感的なアニメーションとトランジションで、自然の法則に基づいた動きをしないといけない。
2. パフォーマンス：アニメーションは遷移時間が短く、製品のパフォーマンスに影響を与えてはいけない。
3. 簡潔：デザイナーは、UX（ユーザーエクスペリエンス）に付加価値を与えない過剰なアニメーションを避けながら、正当で有意義なインタラクションを作成しないといけない。

３．グローバルスタイル

Ant Design のドキュメントの「Global Styles（グローバルスタイル）」のセクションには、色、レイアウト、フォント、アイコン、ダークモードのガイドラインが含まれています。

Ant Design のパレット生成ツールでは、製品の原色に基づいて１０色のパレットが生成されますが、Material Theme Builder や他のパレット生成ツールに比べると、やや原始的なツールです。

フォントのスケールと行の高さは、平均的な距離の５０cm（２０インチ）、角度０.３度で計算されたユーザーの読書効率に基づいて、有益なガイドラインを提供します。ちなみに、ベースフォントは１４px、行の高さは２２pxです。

Ant Design のアイコンは、アウトライン、塗りつぶし、ツートンの３種類があります。また、デザインシステムのイコノグラフィーの原則に準拠したカスタムアイコンを作成するための説明書もあることから、カスタマイズの一貫性が最大限に確保されます。

Ant Design のコンポーネント

Ant Designのコンポーネントライブラリの概要と主な機能は以下の通りです。

一般的なコンポーネント

ボタン、アイコン、タイポグラフィなどがあります。また、ボタンの種類は以下の５つになります：

1. プライマリ：メインCTA（Call to Action）
2. デフォルト：セカンダリ（二次的）CTA
3. 破線
4. テキストボタン
5. リンクボタン

さらに、以下の４つのボタンのプロパティがあります：

1. 危険：削除のようなリスクの高い操作
2. ゴースト：アウトラインボタンとも呼ばれる
3. 無効：アクションが利用できない場合
4. 読み込み中：スピナーを追加し、コントローラを無効にして複数投稿を防ぐ

レイアウト

Ant Design のレイアウトには、仕切り、グリッド、スペース（配置、方向、サイズなど）が含まれます。

ナビゲーション

ナビゲーションのパターンには、affix、パンくずリスト、ドロップダウン、メニュー、ページヘッダー、ページネーション、ステップなどがあります。

データ入力

Ant Design のデータ入力コンポーネントにより、そのデザイン システムはエンタープライズ アプリケーション開発に最適な選択肢となるでしょう。

プロダクトチームは、Ant Designのすぐに使用できるパターンを使って、以下のようなエンタープライズ UIを簡単に構築できます：

• オートコンプリート入力フィールド
• カスケードのドロップダウンメニュー
• チェックボックス
• 日付ピッカー
• フォーム
• 入力（テキストと数値のみ）
• メンション（ユーザーへのタグ付け）
• ラジオ
• レーティング（アイコンと絵文字）
• セレクトメニュー
• スライダー
• スイッチ
• タイムピッカー
• 転送セレクトボックス
• ツリーセレクター
• アップロード

データ表示

データ入力にはデータ表示が関係しており、以下のようにデータを視覚化してユーザーに提示します。

• アバター
• バッジ
• カレンダー
• カード
• カルーセル
• 折りたたみ（アコーディオン）
• コメント（ユーザーディスカッション）
• 説明（注文、取引、レコードなどのテーブル）
• 空（空のコンポーネントのプレースホルダー）
• 画像
• リスト
• ポップオーバー
• セグメント
• 統計（ダッシュボード用の数値コンポーネント）
• テーブル
• タブ
• タグ
• タイムライン
• ツールチップ
• ツリー

フィードバック

デザイナーは、以下の Ant Design のフィードバックのコンポーネントを使って、ユーザーとコミュニケーションをとります。

• アラート
• 引き出し
• メッセージ（画面上部にシステムフィードバックを表示）
• モーダル
• 通知
• ポップコンファーム
• 進行状況
• 結果（成功、失敗、エラーなど）
• スケルトン（遅延ロード・プレースホルダー）
• スピン（スピナー）

その他

最後のカテゴリーには、アンカー（目次）とバックトップ（トップに戻る）があり、基本的にはナビゲーション・コンポーネントです。また、デベロッパーがコンポーネントをグループ化できるコンフィグプロバイダーもあります。

Ant DesignのReactコンポーネントをUXPinにインポートする

どのようなデザインシステムでも、「信頼できる唯一の情報源（Single source ofn truth）」があるにもかかわらず、デザイナーとエンジニアで、デザイナーは画像ベースの UI キットを使い、エンジニアは React、Vue、Angularなど、コードベースのコンポーネントライブラリを使うというように、異なる UI 要素が使われていることが課題となります。

UXPin Merge は、真の「信頼できる唯一の情報源（Single source of truth）」を作成します。ソフトウェアのデベロッパーは、製品のデザインシステムやAnt Design などのオープンソースのコンポーネントライブラリを UXPin に取り込むことができるため、デザイナーは、エンジニアが最終製品の開発に使うのと同じ UI 要素をプロトタイプに使うことができます。

Merge のコンポーネントはコードによって駆動されることから、デザイナーは完全なインタラクティブ性とデザインシステムによって確定されたプロパティを得られます。例えば、この Ant Design ボタンには、UXPin で何も変更しなくても、デフォルトでホバーとクリックのインタラクションが含まれています！

また、デザイナーは、（色、サイズ、タイプ、コンテンツなど）デザインシステムで確定されたコンポーネントのプロパティにプロパティパネルからアクセスして、変更を加えることができます。

UXPinはそれを JSXとしてレンダリングするため、エンジニアはSpecモードからコピー＆ペーストして開発を始めることができることから、ドリフトがなく、常に100％の一貫性を保つことができるのです！

Ant Design の npm統合

UXPin の npm統合により、デザイナーは Ant Design などの npm レジストリにホストされているオープンソースのコンポーネントライブラリから UI 要素をインポートすることができます。

デザイナーは Merge のコンポーネントマネージャーを使って、以下の Ant Design の npm の詳細を追加するだけです。

• パッケージ名：antd
• アセット位置：antd/dist/antd.css

そして、UXPinは npm経由でAnt DesignのGitHub のレポジトリに接続します。 デザイナーは、Ant Design のドキュメントを使って、プロトタイプに必要なコンポーネントとプロパティを選択できます。

Ant Design のコンポーネントを UXPin にインポートするには、このステップバイステップ ガイドをご覧ください。

また、セットアップと基本的なプロトタイプの構築を説明する CoderOne の YouTube のチュートリアルを見るのもいいでしょう。

ユーザーテスト中に有意義な結果を生み出す、完全に機能する Ant Design プロトタイプを構築しませんか。 より多くの機会を特定しながら、デザインプロセス中により多くの問題を解決することで、デザインチームの価値を高めましょう。 詳細とアクセスのリクエスト法については、Merge のページをぜひご覧ください。

The post Ant Design – デザインシステム入門【エンタープライズ向け】 appeared first on Studio by UXPin.