レスポンシブデザインにおいてグリッドシステムは不可欠であり、レイアウトでのさまざまな画面サイズや解像度にシームレスに適応されます。

デザイナーはグリッドシステムを使うことで、デザインの一貫性と視覚的階層を維持する流動的なレイアウトが作成できます。

デスクトップ、タブレット、携帯電話など各デバイスでの最適なUX（ユーザー体験）を提供します。

UXPinでは、ボタンのクリックだけでカラム、ベースライン、正方形などのグリッドが作成可能です。

無料トライアルにサインアップして、UXPinが提供する高度なUXデザイン機能をお試しください。

グリッドとは

グリッドは、デザインにおける基本的なレイアウト構造です。コンテンツを［行］と［列］に整理し、ページや画面上にUI要素を配置するための体系的な枠組みを実現します。

また、グリッドによって一貫性・調和のとれた視覚的秩序を確立するため、コンテンツのナビゲーションや理解のしやすさに繋がります。

デザイナーはグリッドシステムを使うことで、さまざまなデバイスやスクリーンサイズへの適応性と柔軟性を確保できるようになります。

このようなことから、UXを向上させることにつながり、まとまりがあって、バランスのとれたレイアウトを作成することができるのです。

グリッドの種類

原稿グリッド

原稿グリッド（１カラムグリッドとも呼ばれる）は最もシンプルなグリッドタイプです。

レイアウトの幅いっぱいに１カラムが配置されることから、このグリッドタイプは、主にブログまたは記事などでの「読みやすさ」を優先するための長文コンテンツで使用します。

原稿グリッドが用いられている例としては、オンライン新聞（一部の）があります。

カラムグリッド

カラムグリッドは、レイアウトを複数の縦列に分割してコンテンツを整理することで柔軟な構造を提供します。

デザイナーは、Webページやアプリのインターフェースのような複雑なレイアウトにカラムグリッドをよく使います。

例えば、多くのWeb サイトでは、デスクトップ用に１２ 列グリッドを備えた列グリッド システムが使われており、アスペクト比が小さい場合は２～４カラムグリッドになります。

モジュールグリッド

モジュラーグリッドは、レイアウトを［行］と［列］に分割して、均等なサイズのモジュールを組み合わせる汎用性の高い構造です。

デザイナーは、画像ギャラリーや商品リスト、カードベースUIなど、高いレベルで一貫性および均一性が求められるコンテンツにおいてモジュラーグリッドを使います。

モジュラーグリッドを使った例として、ECサイトが挙げられます。一貫したグリッド形式によって商品を表示させることで、ユーザーが商品を閲覧または比較しやすくなります。

階層グリッド

階層グリッドは、コンテンツの視覚的な階層に基づいて、さまざまな配置や構成を可能にする柔軟な構造です。

重要度や複雑さが異なるコンテンツを扱う場合に特に便利です。

階層型グリッドの例として、ポートフォリオサイトがあります。デザイナーはグリッド内のコンテンツのサイズや位置を変えることで、特定のプロジェクトや要素を強調することができます。

ベースライングリッド

ベースライングリッドとは、レイアウト全体のテキストや要素などに垂直方向の一貫した配置を保証する水平方向のグリッド構造です。

デザイナーは、タイポグラフィを多用するデザインでベースライングリッドを使用することで、読みやすさや視覚的なバランスを保つことができます。

ベースライングリッドを使用する場合の例として、コンテンツが豊富なWebサイトやデジタル出版物が挙げられます。

さまざまなセクションまたはページ間で一貫したテキスト配置を維持することは、プロフェッショナルな外観とUXの向上につながるので意識したいポイントです。

正方形グリッド

正方形グリッドは、均一な間隔および大きさの正方形モジュールで構成されるモジュラーグリッドです。

特に画像やアイコンのような正方形のコンテンツを使って、視覚的にバランスの取れたレイアウトを作成するために正方形グリッドを使います。

正方形グリッドを使用した例としては、ポートフォリオサイトが挙げられます。

プロジェクトのサムネイルが統一されたグリッドレイアウトで配置されることで、視覚的に魅力的なプレゼンテーションが作成されて、見る人にとって作品が閲覧または探索しやすくなります。

フルードグリッドを理解する

フルードグリッドは、様々なスクリーンサイズやデバイスに自動的に適応できる、柔軟でレスポンシブなレイアウトを可能にする最新のUIデザインアプローチです。

フロントエンドデベロッパーは、ピクセルのような固定単位ではなく、パーセンテージのような相対単位を使うことでこの流動性を実現します。

フルードグリッドは、ユーザーのビューポートに合わせてサイズを変更および適応する動的なレイアウトを作成します。これによって、さまざまなデバイスやオリエンテーションにおいて最適なエクスペリエンスが保証されます。

デベロッパーは、CSSとブレークポイントを使ってフルードグリッドを実装することで、レイアウトが調整またはリフローするための特定のビューポート幅を確定します。

グリッドの構造

• カラム（列）：グリッドを縦に分割し、レイアウト内のコンテンツを整理するための構造を提供する。デザインのさまざまなセクションにバランス、階層、一貫性が生み出される。
• ガター（アレー）：カラムとカラムの間にスペースを設けて、グリッド内のコンテンツに余裕と区切りを与える。ガターで読みやすさが改善され、レイアウト内の秩序感が生み出される。
• マージン（余白）：デザイン要素をキャンバスまたはスクリーンの端から分離するグリッドの外周のスペース。マージンで、コンテンツは枠で囲まれ、さまざまな画面サイズやデバイスで一貫性が保たれる。
• 行：グリッド内の水平方向の区分で、完全なグリッド構造を作成するために［列］と組み合わせて使われることが多い。［行］で、コンテンツの垂直方向の流れが確立され、要素間の一貫した間隔が維持される。
• モジュール：モジュラーグリッドの［行］と［列］が交差して形成される個々の単位。モジュールは、テキスト、画像、その他のデザイン要素など、さまざまなタイプのコンテンツを編成するための柔軟で適応性の高いフレームワークを提供する。

グリッドシステムを使う利点

• 一貫性：デザインのさまざまなセクションやページでの一体感を高める。ブランドアイデンティティの強化、UXを向上させる洗練された外観を持たせる。
• 視覚的ヒエラルキー：デザイン要素の配置とサイズをガイドすることでコンテンツの明確な階層を確立させる。ユーザーは、提示された情報への理解やナビゲートがしやすくなる。
• 拡張性と適応性：デザインはさまざまな画面サイズやデバイスに適応しやすくなり、複数のプラットフォーム間で一貫性のあるレスポンシブなUXを実現する。
• 読みやすさの向上：コンテンツに構造化されたアラインメントとスペース（間隔）を設けることで、ユーザーは全体を目を通しやすくなり、内容を理解しやすくなる。
• 連携の促進：共有のグリッドフレームワークで、チームのデザインプロセスはシンプルになる。複数のデザイナーが結束して作業しやすくなり、プロジェクトでのさまざまな側面で一貫性が保たれるようになる。

グリッドの作成および使用法

目的とコンテンツ構成を決める

まず、「デザインの目的」と「コンテンツの構成」を決めることから始めましょう。

このステップによって、レイアウトの要件を理解しましょう。コンテンツを整理して表示させるために最も効果的なグリッドのタイプとカラム（または行）の数を設定します。

適切なグリッドタイプを選ぶ

目的やコンテンツ構造に基づいたデザインニーズに最も適したグリッドタイプを選び、グリッドタイプを選択する際は、複雑さやレイアウトの柔軟性、階層構造を考慮しましょう。

マージンとガターを設定する

マージンとガターを確定して要素間の間隔を一定にし、バランスのとれたレイアウトを維持しましょう。

マージンでレイアウトの端にスペースができ、ガターで列と行の間の一貫した間隔が確保されます。マージンとガターが適切に設定されていると、すっきりと整理された外観になります。

列と行のサイズを確定する

列と行のサイズは、表示するコンテンツと希望する柔軟性に基づいて決めましょう。列と行のサイズを統一することで、一貫性のある外観が保たれます。

要素とテキストを整列する

デザイン要素やテキストをグリッド構造内に整列させて、決められた列、行、マージン、ガターに従います。

適切な配置によって、まとまりのある外観が保証され、明確な視覚的階層を作成することによって読みやすさが改善されます。

強調とバリエーションを増やすためにグリッドを崩す

グリッドを守ることは一貫性を保つのに不可欠ですが、時にはグリッドを崩すことでデザインに強調性と視覚的な面白さが加わることもあります。

特定の要素やセクションのためにグリッドを崩すことで、重要なコンテンツに注目が集まったり、ダイナミックで魅力的なUXが生み出されることがあります。

デザインにおけるグリッド使用のベストプラクティス

• シンプルさと一貫性を保つ：カラムグリッドを使ってスッキリと整ったブログのレイアウトを作ると、全ページでテキストと画像の配置が統一される。
• 柔軟性と適応性があるものにする：例えば、モジュラーグリッドを使ってレスポンシブWebサイトをデザインすると、統一感のあるビジュアル体験が維持しながら、さまざまな画面サイズやデバイスにスムーズに適応できる。
• 空白を効果的に使う：ポートフォリオサイトでは、マージンとガターを広く取り、各プロジェクトの周囲に十分な余白を作ることで、ユーザーは気が散ることなく個々の作品に集中できるようになる。
• 視覚的なバランスを保つ：オンラインマガジンの場合、テキストと画像を階層的なグリッドでバランスよく配置することで、視覚的な重みがレイアウト全体に均等に配分され、バランスの取れた美しさが実現する。
• 意図的かつ計画的にグリッドを崩す：例えば、新商品のランディングページでは、グリッドの枠外に目を引く大きな画像やCTA（コールトゥアクション）の要素を配置することで、グリッドがくずれ、新鮮さや違いが強調される。

UXPinでのグリッドシステム効率化

UXPinには以下の３種類のグリッドシステムがあります：

• カラムグリッド
• ベースライングリッド
• 正方形グリッド

また、グリッドレイアウトの要素間の間隔を素早く配置・調整できるSmart Grid機能もあります。

任意のグリッドシステムを設定すると、UXPinはグリッドエッジにスナップすることで、位置決めと配置をサポートします。（ Setting からスナップを無効にすることもできます）

さらに、グリッドの種類に応じて、列、列幅、行、ガター、マージン、オフセットなど、さまざまなグリッドプロパティを調整できます。

以前に選択したグリッドはUXPin内で記憶されるため、プロトタイプ内の新規ページにも適用されます。

今回紹介したグリッド機能を含むその他の機能を活用し、プロトタイプをレベルアップさせましょう！

無料トライアルにサインアップして、UXPinでインタラクティブなプロトタイプ第１号を作成してみませんか？

The post Webデザインの基礎「 グリッドシステム 」 appeared first on Studio by UXPin.

フィルターは効果的なUIパターンであり、効率とコンテンツディスカバリーを上げることでユーザージャーニーを合理化し、エンゲージメントを高めることができます。

そこで本記事では、UIフィルターのデザインを深掘りし、大手テクノロジー企業の例を用いて、ユーザーに優しいパターンのデザインに役立つインサイトとベストプラクティスについてお話しします。

主なポイント：

• フィルターUIとは、アプリや Webサイト内の検索を補助するデザイン要素である。
• フィルターは、ユーザーのナビゲーションに直接影響を与え、効率的に欲しいコンテンツが見つかる。
• 効果的なフィルターデザインには、シンプルさ、応答性、ユーザーコントロールを優先させることが最も重要。
• クロスプラットフォームのフィルターデザインでは、プラットフォーム固有のパターンと、一貫したコア機能の調和が必要である。
• フィルターは、自然言語、段階的開示、アクセシビリティを取り入れることで、全ユーザーおよび多様なニーズに対応する。
• UXPinを使うことで、デザイナーはインタラクティブなフィルターコンポーネントのプロトタイプを作成およびテストすることができる。

世界最先端のUXデザインツールで、直感的なフィルタやインタラクティブなコンポーネントをデザインしませんか。早速無料トライアルにサインアップして、UXPin でインタラクティブなプロトタイプ第１号を作成しましょう。

UXデザインでの フィルターUIとは？

UIフィルターとは、ユーザーが特定の条件に基づいてデータセットやオプションを絞り込むことができるようにするデザイン要素です。

例えば、ECストアではフィルター機能を使うことで、いくつかの条件（サイズ、色、価格など）で絞ることができ、商品を見つけやすくなります。

フィルターUIによって、ユーザーは欲しいものが見つけやすくなるだけでなく、時間の節約になり同時にフラストレーションも軽減されます。

コンテンツやサービスを効率的にナビゲートするために、デザイナーはユーザーのニーズに基づいてフィルターを作成します。正しく実装されれば、ナビゲーションは効率化され、ユーザーに優しい直感的なインターフェースが実現します。

 フィルター がユーザー体験（UX）に与える影響

フィルター機能によって、ユーザーはコンテンツの探し方や体験をコントロールし、タスクを早くこなし、デジタル製品との関わりを高めます。

では、フィルターの使用が具体的にどのようにユーザー体験を向上させるのか見てみましょう：

• ナビゲーションの効率性：例えばECサイトで何百もの靴を何となく見るのではなく、自分のサイズ、好みの色、ブランドなどでフィルタリングすることで最も関連性の高い結果を見つけることができる。延々と画面をスクロールし続けなくて良い。
• 個別化されたコンテンツ配信：フィルターは好みに合わせることができる。例えばニュースアプリでは、特定のカテゴリを選択することで、ユーザーの欲しい情報を受け取ることができる。
• 意思決定のサポート：多くの選択肢ではユーザーは意思決定ができなくなるため、フィルター機能を使用すると選択肢を絞ることができ決断しやすくなる。ストリーミングアプリの場合でも、何千もの映画の中から選択するのではなく、フィルタリングによって「高評価」や 「新作 」のみを表示することができる。
• 認知的負荷の軽減：ユーザーに余計な情報処理や疲れさせることなく必要なものだけを表示する。
• 満足度と定着率の向上：探しているものが効率的に探せることでユーザー満足度は上がり、プラットフォームを使い続ける可能性も高くなる。

ユーザーに優しいフィルターデザインの原則とは

シンプルでわかりやすい

フィルターのインターフェースはわかりやすいものであるべきです。繰り返しますが、選択肢が多すぎるとユーザーをさせてしまうので、あいまいな名称を使ったりするのは避けましょう。

例：ファッション通販の場合、買い物客を混乱させるような複雑なサブフィルタではなく、サイズ、色、フィット感、ブランド、価格などの明確なカテゴリーに設定しましょう。

応答性とフィードバック

フィルターの変更は速やかに適用し、アクションに関するフィードバックを与えましょう。

例：適用されたフィルターの結果数が表示されることで、スクロールしなければならないオプションの数がわかり、予測がつきやすくなるためフラストレーションを防ぐことができます。

フィルターの優先順位付け

フィルター項目の全てが重要というわけではありません。ユーザーのニーズを理解することで、最もよく使われるフィルターを優先し、それ以外は非表示にしましょう。

例：宿泊サイトでのフィルターに、日付、ゲスト、場所を最初のUIに表示させ、それ以外の項目見る場合に「すべてのフィルタを表示」ボタンまたはアイコンを表示させるといいでしょう。

柔軟性と制御

ユーザーは、自分が主導権を握っていると感じるべきです。上手くフィルタリングできない場合でも、「フィルターのリセット」ボタンがあれば簡単にデフォルトに戻すことができます。

可視性とアクセシビリティ

フィルター機能はページ上でアクセスしやすい位置に配置しましょう。

例：大概、［検索フィールド］の近くにある［結果］の上に［フィルター］がある認識になっているユーザーが多いでしょう。

クロスプラットフォーム向けのフィルターUIをデザインする

クロスプラットフォームのフィルターUIを作成するには、異なるプラットフォームが持つ各UIパターンとベストプラクティスを意識しましょう。

そのため、プラットフォーム独自のガイドラインを守りながら、さまざまな OS（オペレーティングシステム）間で一貫性のあるUXを提供することが重要です。

クロスプラットフォームのフィルターパターンをデザインする上で、以下のポイントに気をつけましょう：

• iOSプラットフォーム独自のパターン：iOSのデザインでは、フィルターにセグメント化されたコントロールがよく使われる。
  例えば、ショッピングアプリでは「男性」、「女性」、「子供」がブラウズ画面のトップにセグメント化されたコントロールとして表示されることがある。
• Android プラットフォーム独自のパターン： AndroidのUIは、最初のフィルタリングオプションにタブが多く使われる。また、ドロップダウンは、二次的なフィルタリングや並べ替えのオプションのための規準になっている。
• プラットフォーム間の一貫性： 最初の体験を維持するには、プラットフォーム固有のパターンを尊重することが不可欠。中核となる機能は全プラットフォームとモバイルアプリで一貫性を保つようにする。iOS にフィルターのオプションがある場合、たとえ表現が違っていても、Android でも同じようにアクセスできるようにする。
• アダプティブUIコンポーネント： ユーザーのデバイスや OS に適応するコンポーネントを活用し、それによってデバイスに関係なくシームレスなエクスペリエンスがもたらされる。

効果的な UIフィルターのデザイン方法

フィルターのオプションに自然言語を使う

ユーザーがフィルターのオプションをぼやっとではなくきちんと理解できるように、ユーザーが自然に使う、または予測できる言葉や言い回しを使いましょう。

例えば、ペット用品のECストアのフィルターオプションとして［イヌ科動物］と［ネコ科動物］のような表現の代わりに、［犬］と［猫］を使いましょう。

広範なリストをフィルター内で検索

フィルターのオプションのリストが長くなった場合は、検索機能を使うことでユーザーは延々とスクロールせずに探しているオプションを見つけることができます。

例えば、複数のジャンルを扱うオンライン書店では、すべてのジャンルをリストアップするのではなく、フィルター内に検索バーを設けています。例えばユーザーが［スリラー］と入力すれば、長いリストをナビゲートすることなく、直接そのジャンルにアクセスできます。

段階的開示の促進

最初に最もよく使われるフィルターを表示し、ユーザーがさらに詳細な設定が必要な場合に「さらに表示する」オプションを提供しましょう。

例えば、不動産サイトでは、［価格］、［都市］、［価格帯］フィルターを最初に表示し、［部屋数］や［郊外］、その他にも物件の特徴などの詳細を知りたいユーザーのために「さらに表示する」オプションを表示させるといいでしょう。

ビジュアルキューを使う

視覚的要素（色、アイコン、タイポグラフィなど）を使用することでユーザーを効果的に誘導するだけでなく、選択肢をわかりやすくし、フィルターの利用を促進します。

例えば、フィルターのオプションの横にある「色見本」は、ユーザーがより速く結果を見つけるためのビジュアルキューとなります。

アクセシビリティのためのデザインフィルター

フィルターはすべての人が使えるものであるべきです。そのため、コントラスト、スクリーンリーダーとの互換性、キーボードナビゲーションを考慮することを覚えておきましょう。

例えば、アプリでフィルターのカテゴリに色を使用している場合は、色覚異常のユーザーをナビゲートし、結果がスキャンできるアイコンの追加をおすすめします。

企業例で考える “良いフィルターデザイン” とは？

Airbnb

Airbnb は２０２３年にサイト内のフィルターUIがリデザインされたことで、より使いやすく、ユーザーに優しいデザインになりました。ユーザーは、検索フィルターの横にある誰でも認識できるアイコンから検索フィルターのオーバーレイにアクセスできるようになりました。

同社は価格がユーザーにとって最も重要であると考えており、［価格帯］のフィルタリングでは２つのUIデザインパターンを提供しています。ユーザーは、大きなボタン、アイコン、チェックボックス、スライダー、スイッチを使ってスクロールでき、より詳細な設定が可能です。

Booking.com

Airbnb同様に、Booking.comも旅行者に何百万ものホテルを表示し、選択肢を絞り込むためにフィルターが使われています。アクセシビリティを向上させるための工夫として、フィルターのアイコンとラベルに少し違ったパターンを使っています。

また、スクロールを減らしてオプションを選択できるように、上部には［予算］フィルターを表示し、下部にはよく使われるリストを表示します。そして各フィルタの横には、フィルターごとの結果の数字が表示されるため、ユーザーにとっては結果が予測しやすくなります。

例えば、フィルターを適用しても該当条件のものは見つからず、何度も条件を変えて検索のやり直しをするようなことは避けたいですからね。

Spotify

フィルターは必ずしも検索に適用されるわけではなく、ユーザーが探したいコンテンツを決定する機能としても役に立ちます。Spotify には以下の３つの主なカテゴリがあります：

• 音楽
• ポッドキャストと番組
• オーディオブック

このストリーミングサービスでは、ユーザーが利用したいコンテンツをフィルタリングできるように、ホーム画面の各カテゴリにボタンが使用されています。ワンクリックだけで自分の好みを設定することができ、検索やナビゲーションへのアクセスが不要なので、ホーム画面はユーザーフレンドリーで効率的になります。

Amazon

Amazonのデスクトップのインターフェースでは、ページ上部に検索フィールドを表示し、左サイドバーに各項目がまとめられたフィルターが表示されます。ユーザーは、アイコン、チェックボックス、ボタン、またはカスタム価格用のフォームフィールドを使ってフィルターを適用することができ、アイテムを選択すると、自動的にフィルターの結果が読み込まれるため、「適用」のボタンがいらなくなり、クリックやインタラクションが少なくなります。

この非常にきめ細かいフィルタリングは、Amazonの商品在庫のような大規模なデータベースにとって非常に重要です。上の例では、フィルターサイドバーで２つのオプションを適用して、靴の検索結果を「５０,０００件以上」から「２０２件」に絞り込み、ブラウジング体験を効率化して、より速くお会計まで行けるようにしています。

Googleマップ

Google マップのフィルタリングのインターフェースは、多様で無限のように見える選択肢がある場合でも、デザイナーが最小限のクリックと入力でユーザーが望むものを見つけられるようにする方法の優れた例となっています。

UXPinでより良いフィルターUI/UXをデザインしよう

フィルターのデザインとプロトタイプ作成は、Figma、Adobe XD、Sketchのようなイメージベースのツールを使用する場合作成に時間がかかってしまいます。優れたビジュアルデザインの結果は得られますが、このようなデザインツールには、インタラクティブなプロトタイプを作成する機能がありません。これは、インタラクティブなフィルターのコンポーネントをテストする場合に大きな問題になります。

その点、UXPin はコードベースのデザインツールであり、ベクターグラフィックスを生成する代わりに、HTML、CSS、Javascript を裏でレンダリングするため、デザイナーは一行も書くことなくコードの力を得ることができます。

高度なプロトタイプ機能

デザイナーは、UXPin のコードベースの機能を使って、１つのツールで最終製品のような外観と操作性を備えた機能的なフィルターを作成することができます。

• ステート（状態）：単一のUI要素に対して複数のステートを作成し、ドロップダウンメニュー、タブメニュー、ナビゲーショナルドロワーなどの複雑なインタラクティブコンポーネントがデザインできる。
• 変数：ユーザーの入力からデータを取得し、例えばユーザーが選択したフィルターと結果を表示するなど、個別化された動的なユーザー体験を作成する。
• Expression： Javascriptのような関数で、複雑なコンポーネントや高度な機能を作成できる。
• 条件付きインタラクション：ユーザーのインタラクションに基づいて「if-then」と「if-else」の条件を作成し、複数の結果を持つダイナミックなプロトタイプを構築することで、最終的な商品体験を正確に再現する。

テストの強化

UXPinの高忠実度なインタラクティブプロトタイプを使用することで、デザインチームはアイデアの検証や、エンドユーザーやステークホルダーからの正確で実用的なフィードバックを得ることができます。

このような効果的なフィードバックがあることで、デザイナーはデザインプロセスにおける多くのユーザビリティ問題を解決でき、ビジネスチャンスを特定することができるようになります。同時にチーム連携強化にも繋がるでしょう。

世界最先端のデジタル製品のデザインツールを使って、インタラクティブコンポーネントをデザインしてみましょう！

無料トライアルはこちらからお試しいただけます。

The post 企業事例で見るフィルター 機能のUI/UX【入門ガイド】 appeared first on Studio by UXPin.

多くのプログラミング言語では、ウェブサイト、ソフトウェア、その他のデジタル製品の構築、拡張のためにパッケージが使われ、こういったパッケージにより、エンジニアは追加のコードを書いたり維持したりすることなく、プロジェクトの機能を拡張できます。

もしあなたの会社で Node.js が使われていたら、エンジニアが NPM、Node.js パッケージ、またはパッケージマネージャについて話しているのを聞いたことがあるかもしれません。本記事では、パッケージがどのように機能し、なぜエンジニアがそれを使用するのかについての基本理解のために、デザイナーの視点でこれらの用語について説明します。

UXPin Mergeは、デザイナーが完全に機能するコードコンポーネントでUIデザインができる画期的なツールを提供しています。UXPin Mergeのトライアルはこちらより。

NPM(Node Package Manager)とは

NPM（Node Package Manager）は、エンジニアがアプリケーションやWebサイトの開発に使うツールのオープンソースレポジトリです。

NPMは2種類あります：

1. オープンソースプロジェクトを公開するためのレポジトリ。簡略版：デジタル記録及び検索機能
2. レポジトリとインタラクトするためのCLI（コマンドラインインターフェース）。簡略版：ストレージ機能と通信するためのツール

パッケージマネージャ とは？

NPMを説明する前に、パッケージマネージャの基本を理解しておきましょう。パッケージマネージャはデベロッパーのためのツールキットだと考えてください。

例えば、支払いにStripeを使用するアプリケーションを構築するとします。パッケージマネージャは、あなたの製品がStripeと通信して支払い処理をするのに必要なコードをすべてインストールします。

エンジニアは、コードを書いたりStripeのドキュメントからのコピー＆ペーストの代わりに、コマンドの入力だけで、パッケージマネージャがStripeから必要なコードの依存関係をインストールします。

検索機能、API、決済、認証ツール、地図、アイコン、ホスティングなど、アプリケーション開発のためにに思いつくあらゆる機能を備えたパッケージが何百万と存在します。

NPMなどの、誰でもパッケージをアップロードしてインストールできるオープンソースのレポジトリと、アクセスが制限されたプライベートなパッケージレポジトリがあります。

コマンドラインインターフェースとは？

CLI（コマンドラインインターフェース）とは、デベロッパーがコンピュータープログラムの操作に使うテキストインターフェースのことです。このCLIを使用すると、コマンドを実行して、ソフトウェア開発に必要なバックグラウンド操作を実行できます。

NPMの場合、例えば、エンジニアはnpm installのようなコマンドにパッケージ名を続けて指定したパッケージをインストールすることができるように、CLIによってパッケージレジストリの対話ができます。

NPMレジストリ

NPMのウェブサイトは、エンジニアがパッケージについて検索したり学んだりする場所ですが、このウェブサイトは単なるレジストリであり、パッケージをホストしているわけではありません。代わりに、エンジニアはGitHub、Packagecloud、AWS CodeArtifactなどのプラットフォームを使って、パッケージをホストし配布しています。

例えば、NPM上のUXPin Merge CLIを見ると、レポジトリと関連リンクとしてGitHubが表示されています。その上に、UXPin Merge CLIとその依存関係を【 npm i @uxpin/merge-cli】とインストールするコマンドがあります。 NPM の後の “i” は “install” の省略形なので、【npm install @uxpin/merge-cli 】と入力しても、同じ結果になります。

依存関係とは？

パッケージは、エンジニアが【依存関係】と呼ぶ他のパッケージで構成されています。ちょっとわかりにくいですよね。この「依存関係」とは、プロジェクト内で異なるタスクを実行するコードのパッケージのことです。

例えば、UXPin Merge CLI は Typescript を使用しており、Typescript は UXPin Merge CLI が必要とする 41 の依存関係のうちの 1 つに過ぎませんが、依存関係として typescript パッケージが必要です。

開発依存とは？

UXPin Merge CLI の依存関係を見ると、41の依存関係と41の開発依存 (devDependenciesとも呼ばれる) があります。

• 依存関係：あるソフトウェア実行（本番）に必要なパッケージ
• 開発依存：開発段階で必要なパッケージのみ

依存関係と開発依存はnode_modulesという別のフォルダに存在するので、packages.jsonファイルとプロジェクトのコードはそれらがどこにあるのかがわかります。

package.jsonファイルとは？

そのメタデータと依存関係を提供する package.json ファイルがあります。コンピュータにプロジェクトをインストールするとき、NPM は 、依存関係と 開発依存 をインストールするのにpackage.json ファイルを参照します。

それぞれの依存関係を個別にインストールする代わりに、コマンドラインでnpm installと入力するだけです。

ホスティングプロバイダーもpackage.jsonファイルを使用して、そのサーバー上でプロジェクトの実行に必要な依存関係（開発依存を除く）をインストールします。

package-lock.jsonとは？

package-lock.jsonは、プロジェクトのビルドに使用されたパッケージの正確なバージョンを特定します。このファイルによって依存関係がロックされ、プロジェクトがインストールされるときに、最新のリリースではなく、開発中に使用されたバージョンが参照されるようになります。

エンジニアは定期的にパッケージを更新しますが、多くの場合、パッケージの動作方法が変更されます。それにより、依存関係のロックによって、プロジェクトが意図したとおりに確実に動作するようになります。

NPMの使用方法

ここでは、一般的なNPMのコマンドとその機能について説明します。

• npm init：プロジェクト用のpackage.jsonファイルが作成されます。アプリケーションを一から構築する場合、npm initはプロジェクトの重要な情報を含めるために使用する最初のコマンドの1つになり、NPMは、パッケージをインストールまたは削除するたびに、package.jsonファイルを自動更新します。
• npminstall：プロジェクトの依存関係をすべてpackage.json ファイルにインストールします。
• npminstall <package-name>：たとえば、npminstall @uxpin/merge-cli とすると、Merge CLI がインストールされるように、 NPMレジストリから特定のパッケージをインストールし、node_modules フォルダに保存します。
• npminstall <package-name> –save：NPMパッケージをインストールし、package.jsonファイルの依存関係に追加します。
• npminstall <package-name> –save-dev：NPMパッケージをインストールし、開発依存に追加します。
• npmuninstall <package-name>：プロジェクトから特定のパッケージをアンインストールします。
• npmdoctor：npmのインストールを診断し、パッケージの管理に必要なものがすべて揃っているかどうかを確認します
• npmupdate <package-name>：特定のパッケージを最新バージョンに更新します。

これらは、最も一般的なNPMコマンドのほんの一部であり、すべてのリストはNPMのドキュメントでご覧になれます。

デザイナーとしてのNPMの理解

NPMは、デザインツールのプラグインやアプリの拡張機能に匹敵する、ツールキットです。パッケージがどのように作られるのか、その裏側を知る必要はありませんが、一つや二つ知っておくと便利かもしれません。

まず、MUIやAnt Designなど、コードコンポーネントライブラリの一部は、NPMパッケージとして共有されています。

NPMパッケージとして配布されているコンポーネントライブラリはどのように探すのでしょうか。UXPinが公開しているデザインシステムのライブラリAdeleから、UXPinに取り込めるコンポーネントライブラリを探したとします。そこでShopifyのPolarisを選び、それがNPMで配布されていることがわかります。 そこで、NPMのサイトに行って、ShopifyのPolarisを探し、見つけるのです。

UXPinはMerge技術により、NPMパッケージを介してコンポーネントライブラリからUI要素をインポートすることができ、それらの要素を使って、完全に機能するプロトタイプを組み立てることができます。

UXPin Mergeは通常、デベロッパーによってセットアップされますが、開発サポートが不足している場合はMerge Component Managerを使って、コンポーネントを自分で管理することができます。

もし、デベロッパーとの連携を強化するためにプログラミングの知識を高めたいのであれば、HTML、CSS、Javascriptなどの基本的なコードの原則やコンポーネントライブラリについて学ぶ方が、デザイナーにとってはるかに有益だと思います。

UXPin Mergeで連携の強化

Mergeは、デザイナーとエンジニアが同じコンポーネントライブラリを使用することで、デザインと開発の連携を促します。

Mergeは、デザイナー用のUIキットとデベロッパー用のコードを用意する代わりに、レポジトリをUXPinのエディタに同期させ、デザインチームがコードコンポーネントを使用して完全に機能するプロトタイプを構築できるようにしています。

自社デザインシステムやMUIなどのコンポーネントライブラリを同期させることで、デザイナーはUI要素をドラッグ＆ドロップするだけでインターフェースやプロトタイプの構築ができます。UXPin Mergeをトライアルしてみたい方はこちらまで。

The post NPMと言うのは？把握しよう！ appeared first on Studio by UXPin.

組織と製品の成功に導くためにも、「ユーザー」と「ビジネス」２つの目標において、適切な目標内容とそのバランスを取ることは極めて重要です。双方にメリットのあるソリューションを提供するために、製品チームは企業の戦略目標を達成し、ユーザーの目的や欲求、課題について考慮しなければいけません。

そこで本記事では、「ユーザーゴール」と「ビジネスゴール」２つの違いについて解説し、それぞれの目標内容を見ていきます。また、AirbnbとSpotifyの成功例も合わせてご紹介します。

エンドユーザーやステークホルダーとのテストを強化するために、完全にインタラクティブなプロトタイプを構築しませんか？適切なテストの実施とユーザビリティテスト参加者からの適切なフィードバックを得ることで、ユーザーとビジネスでのニーズを満たすデジタル製品体験を提供しましょう。無料トライアルはこちらから。

ユーザーゴール と ビジネスゴールのちがい

ユーザーゴール

ユーザーゴールとは、ユーザーが製品を使用する際に達成したい、満足させたい、解決したい目的、願望、問題のことです。ユーザーゴールを理解して優先順位をつけることで、デザイン思考の核となる原理である「使いやすく」「機能的」で「楽しい」製品となります。

ビジネスゴール

ビジネスゴールとは、企業が製品やサービスを通じて達成しようとする目標のことであり、収益の増加、市場シェアの拡大、ブランドの評判の向上などが挙げられます。

ユーザーゴールとKPIの把握

ユーザーゴールは、製品の種類やターゲット層によって異なりますが、ここでは一般的なユーザーゴールと、組織がその追跡に使うKPIをいくつかご紹介します。

効率性

ユーザーは、最小限の労力で効率的にタスクを完了させたいと思うものです。なので製品は、ユーザーがタスクを完了して目標を達成するまでの時間を短縮するのにプロセスが効率化されないといけません。

「効率化」のKPI：

• タスク完了時間
• タスクに完了に必要なクリック数/ステップ数/インタラクション数

使いやすさ

ユーザーは、わかりやすく、習得しやすく、操作しやすい製品を求めていることから、シンプルなナビゲーションと親切なガイダンスを備えた直感的な製品だと、UX（ユーザーエクスペリエンス）が向上します。

「使いやすさ」のKPI：

• エラー率
• CES（カスタマーエフォートスコア）
• SUS（システムユーザビリティスケール）

アクセシビリティ

デザイナーは、多様なユーザーや能力に対応した製品体験の提供が必要であり、調整可能なフォントサイズ、代替入力方法、スクリーンリーダーとの互換性などの機能は、インクルーシブなUX（ユーザーエクスペリエンス） の提供には不可欠です。

「アクセシビリティ」のKPI：

• アクセシビリティのチェックリストによる適合度

パーソナライゼーション（個別化）

パーソナライゼーションは、個人のニーズや好みに合わせてコンテンツや機能をカスタマイズして製品体験を上げるものであり、そのニーズを満たすことで、楽しささ、継続性、そしてその “いい体験” が提供される可能性が上がります。

「パーソナライゼーション」のKPI：

• 設定をカスタマイズしているユーザーの割合
• カスタマイズ可能な数
• 活用されたカスタマイズの数

信頼性

ユーザーは、製品に対してエラーのない安定性のある動作を好みます。特に、無料ではない場合はなおさらです。なのでユーザーの信頼と満足感の維持には、製品はエラーや不具合、性能上の問題がなく、正しく機能するものでないといけません。

「信頼性」のKPI：

• クラッシュ、ダウンタイムなどの、技術的な不具合の発生率
• MTBF（Mean Time Between Failure：平均故障間隔）
• MTTR（Mean Time To Repair：平均回復時間）

セキュリティとプライバシー

ユーザーは、組織に対して個人情報やデータの保護を期待しており、強固なセキュリティ対策と透明性の高いプライバシーポリシーを導入することで、ユーザーは自分のデータが保護されていることを確信できます。

「セキュリティとプライバシー」のKPI：

• セキュリティインシデントの発生件数
• データ侵害の件数
• 個人情報保護に関する苦情件数
• 管轄ごとの個人情報保護苦情件数

美観

魅力的で視覚に訴える製品は、CX（顧客体験）を上げ、製品の好感度アップに貢献します。また、優れた美観はブランドのアイデンティティを強化し、製品を競合他社から際立たせてくれます。

「美観」のKPI：

• インタビュー、レビュー、アンケートなどの、デザイン要素に関するユーザーからのフィードバック

楽しさ

ワクワク感、楽しさ、エンターテイメントなどの要素を取り入れることで、商品をより魅力的で楽しいものにすることができます。

「楽しさ」のKPI（エンゲージメントのメトリクス）：

• 平均セッション時間
• 継続率（リテンションレート）
• 使用頻度
• NPS（ネットプロモータースコア）

ソーシャルインタラクション

ユーザーは、社会的な交流や、自分の経験を他の人と共有することを求めることが多いことから、ソーシャルな機能を取り入れたり、ユーザーとのコミュニケーションを促したりすることで、製品の魅力が高まります。

「ソーシャルインタラクション」のKPI：

• コメント、いいね！、シェアなどの数
• １アカウントあたりの平均フォロー数
• 友人への招待状送付数

支援・サポート

アクセスしやすく、迅速なカスタマーサポート、包括的なドキュメントやチュートリアルを提供することで、ユーザーの満足度が上がり、ロイヤリティが構築されます。

「支援・サポート」のKPI：

• カスタマーサポートのチケット数
• カスタマーサポートの対応時間
• チケットの解決率
• サポート交流による満足度スコア

ビジネスゴールと KPI の把握

ビジネスゴールは、事業や業界、組織の戦略的優先順位によって異なりますが、ここでは、プロダクトデザインにおける複数のセクターで見られる、一般的な会社のゴールをご紹介します。

収益成長

多くの企業にとって、売上と収益の向上は主要な目標です。プロダクトデザインチームは、魅力的で機能的、かつ価格の高い製品を作ることで収益の増加に貢献することができ、収益を生み出すインターフェースやユーザーフローを効率化することで、収益の向上を図ることができます。

「収益成長」のKPI：

• 日次/週次/月次/四半期/年次の総売上高
• 収益成長率
• ARPU（１ユーザーあたりの平均収益）

マーケットシェア拡大

マーケットシェアは、業界全体の売上高に占める企業の割合を示すため、製品のメトリクスとして極めて重要です。マーケットシェアを高めるには、組織が多くの要素で競争力を持つことが必要です。例えば、イノベーション、機能、性能、良いUXの提供は製品チームに最も関係の深い要素です。

また、革新的なデザインで製品が差別化され、潜在的な顧客にとってより魅力的なものになり、マーケットシェアの拡大につながります。

「マーケットシェア拡大」のKPI：

• マーケットシェア率
• 市場浸透率
• 顧客獲得数 と 業界/競合他社のベンチマーク の比較

顧客獲得

新規顧客の獲得は、ビジネスの成長にとって極めて重要であり、他の多くのビジネスの目的に影響を与えますが、ターゲットとするユーザーのニーズや好みに合わせた製品をデザインすることで、新規ユーザーを獲得し、有料会員にすることができます。

「顧客獲得」のKPI：

• 日次・月次・年次の新規顧客数
• CAC（顧客獲得コスト）
• コンバージョン率（トライアルから有料プランへ、購読者/ユーザーから顧客へ、など。）

顧客維持

長期的な成功には、既存顧客のエンゲージメントと満足度の維持（顧客ライフサイクル）が不可欠です。プロダクトデザインは、ユーザーからのフィードバックの対応、機能に関する要望の実装、UXの継続的な改善によって、顧客維持の向上を実現できます。

「顧客維持」のKPI：

• 顧客維持率
• チャーン率
• CLV（顧客生涯価値）

ブランドの評価と認知度

強力で一貫性のあるブランドアイデンティティで、企業は際立ち、消費者の信頼が築かれます。プロダクトデザインは、製品が企業の価値観や美意識、ブランド戦略全般と確実に合致しているようにすることで、ブランドの評価を上げることができます。

「ブランドの評価と認知度」のKPI：

• ブランド認知度の測定
• NPS（ネットプロモータースコア）
• 定期的なセンチメント分析
• SNS のセンチメント分析

コスト削減

コストは利益に影響します。つまり、給与やボーナス、株主利益が下がるということです。なので企業は、製品開発、製造、またはサポート関連のコストを削減しようとすることがよくあります。

そのようなコストは、効率的なプロダクトデザインであれば以下のような方法で最小化することができます：

• 製品性能の最適化（サーバーコストの削減）
• インプットコストの削減
• ワークフローとプロセスのシンプル化
• 製品の品質向上
• 新作の市場投入までの時間の短縮
• サポートチケットの削減

「コスト削減」のKPI：

• デザイン、プロトタイプ、テストなどのプロダクトデザインのコスト
• プログラミング、サーバー、APIリクエストなどの製品開発コスト
• 運用コスト
• 労働時間・コスト
• 従業員のオンボーディングコスト

スケーラビリティ

特に、成長意欲の高いスタートアップ企業では、需要の増加や新しい市場への進出のために、ビジネスの規模を拡大しなければならないことがよくあります。なのでプロダクトデザインチームは、製品やサポートするリソースが将来のニーズに対応できるよう、スケーラビリティを考慮する必要があります。

「スケーラビリティ」コストにおいてのKPI：

• 新製品リリースの市場投入までの時間
• 負荷や需要が増加した場合のシステム性能
• 新しい市場や顧客セグメントへの製品適応性

イノベーションと差別化

関連性と競争力の維持には、継続的なイノベーションが必要です。製品チームは、新しい技術、製品、アプローチを探求し、イノベーションを推進する上で極めて重要です。

「イノベーションと差別化」においてのKPI：

• リリースされた新機能や製品改良の数
• 研究開発予算のうち、イノベーションに配分される割合
• 特許出願数または業界賞受賞数

法規制の遵守

企業は、製品が関連する法律、規制、および業界標準に確実に準拠しているようにしないといけません。そのため製品チームは、製品、UI、およびプロセスが確実に規制要件を満たしているようにし、例えばカリフォルニア州やヨーロッパのユーザーなど、特定の管轄区域に合わせて必要な調整を行う必要があります。

「規制遵守」のKPI：

• コンプライアンス監査の合格数
• コンプライアンス違反の発生件数
• コンプライアンス違反により発生した罰金または違約金。

環境および社会的責任

多くの企業は、持続可能性や社会的責任への取り組んでいます。特に法律で特定の目標や要件を満たすことが義務付けられている国や州で、このような取り組みを行っています。そのため、製品チームは、e-waste（デジタル廃棄物）の削減、パフォーマンスの最適化（サーバーリクエストの削減）、製品ファイルサイズの縮小によるストレージの最小化などの目標に貢献するといいでしょう。

「環境および社会的責任」のKPI：

• 製品に関連する温室効果ガス排出量の測定と削減
• デザインおよび開発プロセスにおけるエネルギー消費量の測定と削減
• E-wasteの測定と削減
• 製品の社会的インパクトの測定

ビジネスゴール と ユーザーゴール のバランスのとり方

「ビジネスゴール 」と「 ユーザーゴール 」のバランスをとるのは難しく、ユーザーのニーズとビジネスゴールに対応した機能や改善の開発には、継続的な反復が必要です。

そこで、製品チームが適度なバランスを取ることに成功した２社の実例を以下でご紹介します。

例１：Spotify

•  ユーザーゴール ： ユーザーは、お気に入りの曲やアーティスト、プレイリストに簡単にアクセスでき、パーソナライズされた楽しいリスニング体験を望んでおり、自分の好みに合わせて新しい音楽を発見することも大切にしている」。
  
•  ビジネスゴール ：ユーザーベースを拡大し、プレミアム購読と広告による収益を増やすことを目標としており、製品チームは、ストリーミング業界における競争力を維持するために、UI（ユーザーインターフェース）、機能、パフォーマンスを常にアップデートしている。
  
• 両者のバランスを取るためのアプローチ：『Discover Weekly』 や 『Release Radar』 など、パーソナライズされたプレイリストを生成するアルゴリズムに投資することで、ユーザーとビジネスのゴールに取り組んでいる。このような機能は、ユーザーに合わせた音楽のオススメを提供し、ユーザーがプラットフォームでより多くの時間を過ごすことの促進、広告露出の増大、購読のアップグレード促進をすることで、ユーザーの満足度を高める。また、UXを向上させる機能に焦点を当てながら、収益モデルに対応することで、ユーザーとビジネスのゴールをうまく両立させている。

例２：Airbnb

•  ユーザーゴール ：ゲストは、シームレスな予約体験、宿泊施設の多様性、ホストとの信頼できるコミュニケーションを望んでいる。
  
•  ビジネスゴール ：ホストのネットワーク拡大、予約数の増大、サービス料による収益の獲得を目的としており、信頼できる宿泊施設マーケットプレイスとしての評判を維持したいとも考えている。
  
• 両者のバランスを取るためのアプローチ：Airbnbは、直感的な UI、強固な検索とフィルタリング機能、ゲストとホスト間の信頼できるメッセージシステムに投資することで、 ユーザーゴール に取り組んでおり、ビジネスゴール達成のために、「Airbnbのホスト向けリソースセンター」など、ホストがリスティングやカスタマーサービスを改善するためのサポートやリソースを提供している。

また、Airbnbはレビューと評価システムを導入することで、ゲストとホストの透明性と信頼性を確保しており、企業の成長と成功には、このような「ユーザーゴール」と「ビジネスゴール」 のバランスが欠かせません。

インタラクティブなプロトタイプを使って、ステークホルダーに好印象を与える・顧客に愛されるユーザー中心の製品をデザインしてみましょう。無料トライアルにサインアップして、UXPinの多機能で高度な機能をぜひお試しください。

The post UXのティッピングポイント – ユーザーゴール と ビジネスゴール 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.

 カラースキーム （配色）とは、プロジェクトや製品において、感情を伝えたり呼び起こしたりするために使われる色の組み合わせのことです。例えばアーティストやデザイナーなど、プロジェクトや製品のビジュアルコミュニケーションを担当する人は、相性が良くて、期待の結果に繋がる色を選びます。

そして、アプリの カラースキーム は、UX（ユーザーエクスペリエンス）を親しみやすく印象的なものにすることから、競合他社との差別化を図ります。また、色によってUI（ユーザーインターフェース）とブランドの一貫性を維持し、ユーザーとの信頼関係を育みます。

一方、カラーパレットは、アプリのテキストやナビゲーションの読みやすさに影響を与えます。例えば、色のコントラストが悪いと、多くのユーザーは文字が読みにくくなります。そのため、デザイナーはUIの背景色にフォントやその他のデザイン要素がどのように表示されるかを評価し、ブランド要件や製品の見た目、ユーザビリティやアクセシビリティのバランスを取らないといけません。

ブランドカラーを使用したアプリのプロトタイプを作成して、ユーザビリティテストをしてみましょう。UXPinは、UIデザインにおいて見た目だけでなく、実際のアプリのような機能・動作性を持つエンドツーエンドのプロトタイピングツールです。ぜひこちらから無料でお試しください。

モバイルアプリのデザインで色彩心理学を活用するには？

色彩心理学とは、色相が人間の行動、感情、意思決定にどのような影響を与えるかを探求するものであり、この色彩理論が、芸術、科学、文化の魅力的な組み合わせです。

色彩心理では、購買決定から気分まで、色が私たちの日常生活にどのような影響を与えるかを検証し、マーケティングやブランディングにおいても重要な役割を果たします。Gregory Ciotti氏の『The Psychology of Color in Marketing and Branding』にある、”「Impact of Color in Marketing（マーケティングにおける色の影響 ）」という研究では、商品について下される即断判断の最大90％が色のみに基づいていることがわかりました（商品によって異なる）。” と書かれています。

デザイナーにとって、この分野では非常に貴重なインサイトを得られます。色の持つ感情的・心理的効果を理解することで、デザイナーはより効果的でユーザーの心に響くデザインを作ることができます。そしてブランドのアイデンティティと合わせてユーザーのエンゲージメントを促進し、ユーザーの反応をより引き出す体験を作り上げることができるのです。色彩心理を取り入れることは、単なる美的感覚にとどまらず、UXと満足度を高めるための戦略的な取り組みなのです。

色が感情や気持ちを呼び起こす仕組み

色には固有の感情的な重みがあり、強い感情や反応を引き出し、アプリ内でのユーザーの知覚や経験を形成します。以下に、実際に色とその効果が人に与える影響の例を挙げてみましょう：

• 青： 多くの場合で信頼、冷静さ、信頼性を連想させる。
• 赤： 情熱、緊急性、あるいは危険の感情を呼び起こす。
• 緑： 成長、調和、健康を象徴する。
• 黄色： 楽観主義、暖かさ、エネルギーを表す。
• 黒： エレガンス、力、神秘を表す。
• 白： 純粋、シンプルさ、明瞭を表す。

色の選択が持つ文化的な意味

色の認識は普遍的なものではなく、文化によって大きく違ってきます。例えば東洋と西洋の文化圏では、『白』という色は以下のように異なって認識されています：

• 西洋では、純潔、無垢、結婚を表す。
• 東洋では、白が伝統的に喪や死と結びついている文化もある。

このような大きな違いは、UXデザインにおける文化的配慮の重要性をはっきり示しています。グローバルなアプリケーションでは、さまざまな文化的背景での「色が持つ意味」を理解することが、世界共通のユーザーエクスペリエンスを生み出すためにも不可欠です。

カラーグラデーションの使用時期

カラーグラデーションとは、ある色から別の色へ移ることを指し、アプリのデザインに奥行きや立体感、視覚的な面白さを加えることができます。以下は、グラデーションをつなげる際の主な考慮事項です：

• フォーカルポイント（目を引く点）を強調する： グラデーションは、CTA（Call To Action）ボタンやバナーなど、ユーザーの注意を特定のセクションや要素に向けることができる。
• 背景を強調する： 均一な色ではなく、絶妙なグラデーションで豊かさと深みを加え、より没入感のある体験を提供することができる。
• 深みと立体感を出す：グラデーションと影を組み合わせることで、UI要素をより触感的で立体的に見せることができる。
• 感情を呼び起こす： 各色が感情を呼び起こすように、グラデーションはこれらの感情をブレンドし、より幅広い感性があるパレットを作り出すことができる。

アプリでの カラースキーム の決め方

デザイナーは、適切なカラーパレットを決める際に、以下のようなユーザビリティ、ブランド認知、ユーザーエンゲージメントを考慮しなければいけません：

• アプリの目的と、そのアプリが目指す雰囲気
• 既存のブランドアイデンティティと視覚的な一貫性の確保
• ユーザーの好みや要望にマッチする、ユーザー調査からのインサイト

アプリの目的と雰囲気を決める

アプリにはそれぞれ独自の目的があり、特定の感情や感覚を呼び起こすことを目的としています。例えば瞑想アプリなら落ち着いたブルーやアースカラーのグリーンになるかもしれませんし、フィットネスアプリならエネルギッシュなオレンジややる気を起こさせる赤が効果的でしょう。

そのため、カラーパレットを意図する雰囲気に合わせることが不可欠です。色を選ぶ前に、アプリから引き出したい感情や反応を明確にしましょう。そしてその感情が色とデザインの決定に繋がり、選択された色合いが確実にアプリの中心となる目的を強化するようになります。

ブランドアイデンティティと視覚的一貫性を取り入れる

アプリはブランドの延長であるべきで、一貫性がブランド認知への鍵となります。まず、例えば ”このまま同じデザインで使えるのか、それともアプリの環境に合わせて色などの調整が必要なのか。” など、既存のブランドカラーを見極めることから始めましょう。

また、さまざまなブラウザ、デバイス、プラットフォームで色の表現が異なるため、配色を徹底的にテストすることが重要です。デザイナーは、デジタル表示、ユーザビリティ、アクセシビリティを最適化し、強力なブランドアイデンティティが維持されるようにしないといけません。

配色を決めるためにユーザー調査を行う

デザイナーは、ターゲットユーザーの好み、文化的な連想、潜在的な色覚異常の懸念を理解すべく、ユーザーリサーチを含めないといけません。UXPinだと、色覚異常シミュレーターやコントラストチェッカーなど、カラーテストのためのアクセシビリティ機能が組み込まれており、デザイナーはその場でデザインを評価することができます。

アンケートやフォーカスグループの実施から始め、類似アプリでの色の好みについてユーザーに尋ねてみましょう。また、さまざまな配色で A/Bテストを行うことで、データに基づいたインサイトを得るのもいいでしょう。

テック業界の大手ブランドのデジタル製品における色の使い方

以下のブランドはそれぞれ、ブランドのアイデンティティや、ユーザーに呼び起こしたい感情や価値観に沿った色を選んでいる５つの例です。色の選択は単に視覚的に魅力的なだけでなく、ブランドの核となる理念やビジョンに合致しています。

Google

• 主要色：青
• 副色：赤、黄、緑
• グーグルのカラフルなパレットは、ブランドの遊び心と革新性を表している。この４色には、「多様性と包括性」という意味があり、多くの製品やロゴに顕著に使用されている。

Facebook

• 主要色：Facebook のブルー
• 副色：ライトグレー
• Facebook の支配的なブルーの配色で、「信頼感、信頼性、つながり感」が醸し出され、それは穏やかでありながら、権威的である。

Apple

• 主要色：ロゴは黒、製品は白
• 副色：シルバー／グレーを基調とした製品デザイン
• アップルのパレットは、「革新性とユーザー中心主義」を反映し、ミニマルで洗練されている。また、シンプルな色使いは、「洗練された直感的なデザイン」というアップルの理念と一致している。

Headspace

• 主要色：オレンジ
• 副色： ソフトイエロー、ペールブルー、ライトグリーン、ライトラベンダー
• 「マインドフルネスと瞑想を通して健康と幸福感を向上させる」という、Headspace の使命を反映した、落ち着きのある多彩なカラーパレット。主要色のオレンジは「熱意と励まし」を、副色は「静けさとバランス」を表している。

Robinhood

• 主要色：Robinhood のグリーン
• 副色：ダークグリーン、ダークグレー、ライトグレー
• Robinhood 支配的な緑、特にミントのような色合いは、「富、成長、繁栄」を象徴する。この名前自体、「金持ちからお金を奪って貧しい人々に与えた中世の英雄」に由来し、（米国で）お金の代名詞である「緑」の色合いで表現されている。同時に、グレーで「堅実で安定した背景」が演出され、金融に望まれる「安定性」が反映されている。

Duolingo

• 主要色：Duolingo のグリーン
• 副色：ライトグリーン、ダークグリーン、ライトグレー、ダークグレー
• 生き生きとした鮮やかなグリーンは、「成長、学習、進歩」の象徴であり、まさに Duolingo が言語学習において目指しているものである。グリーンの濃淡は「学習の様々な段階とペース」を表し、グレーは全体のエネルギッシュなパレットにニュートラルなバランスを演出している。

UXPinでデジタル製品のカラーテスト実施を簡単に

UXPinの高度なプロトタイピング機能により、デザイナーはアプリのUIをテストする際に、静的なモックアップにとどまらず、インタラクションデザイン、アニメーション、機能性が色の選択にどのように影響するかを判断することができます。

また、UXPinには 色覚異常シミュレータやコントラストチェッカーなどのアクセシビリティ機能が組み込まれていることから 、デザイナーはデザインプロセス中に色の選択をサッと評価して改良できるため、視覚的に魅力的で、普遍的なデジタルエクスペリエンスを作成できます。

世界最先進的のUXデザインツールを使って、高品質で使用感や見栄えを検討できるモックアップやインタラクティブなプロトタイプを作成しませんか。UXPin で作成したプロトタイプで、アプリの配色をテストしましょう。ぜひこちらから無料トライアルにお申し込みください。

The post アプリの カラースキーム の決め方 [５例付き] appeared first on Studio by UXPin.

新しいプロジェクトの開始時に企業が考えることの一つとして、「コンポーネントライブラリを採用するか、ゼロから始めるか 」というのがあります。メリット・デメリットの比較検討が必要であり、プロジェクトの範囲と優先順位の考慮も必要です。 その際に最も人気のあるコンポーネントライブラリの1つがMUIで、GoogleのMaterial Design UIを最初にモデル化された包括的なReact UIライブラリです。

今回はMUIについてみていきましょう、なぜMUIを使いたいのか、他のコンポーネントライブラリとの違いは何か、そして次のプロジェクトのデザインの始め方ついてお話します。 コードでデザインってどんな感じだろう、と思ったことはありませんか？

UXPin Mergeは、コードコンポーネントをレポジトリからUXPinのエディタに同期させる画期的な技術です。この強力なツールにより、デザイナーは一行のコードも書かずに、きちんと機能するコードベースのプロトタイプを作成することができます。Merge の詳細と、次のプロジェクトのためのアクセス要求方法についてご覧ください。

また、UXPinのトライアルでは、コードコンポーネントを使ったデザインがどんな感じか試すことができ、トライアル中にMUI 5キットを用意していますので、MUIを間近で体験することができます。14日間の無料トライアルに登録して、MUIをぜひご利用ください。

MUI とは

MUIは、デザイナーやデベロッパーがReactアプリケーションを構築するのに使えるUIコンポーネントの巨大なライブラリです。このオープンソースプロジェクトは、コンポーネント作成のためのGoogleのガイドラインに従っており、基礎的なUI要素と高度なUI要素のカスタマイズ可能なライブラリが備わってます。 また、MUIはReactのテンプレートやツールを販売しており、プロジェクトに合わせて微調整できる既成のユーザーインターフェースがあります。

MUI のような コンポーネントライブラリ を使う理由

デザイナーは、新製品の開発や既存プロジェクトの機能追加にUIキットを使用することがよくありますが、これらのライブラリにより、デザイナーは必要なコンポーネントをドラッグ＆ドロップして、さっとインターフェースのデザインができます。

MUIコンポーネントライブラリを使用する7つの理由を探ってみましょう。

1. 市場投入までの時間を短縮

競争の激しい今日のテク環境において、市場投入までの時間は、企業が常に最適化を求めるメトリクスとなっています。コンポーネントライブラリを利用することで、デザイナーやデベロッパーは、すぐに使える徹底的にテストされたUI要素で、大きな幸先のいいスタートを切ることができます。

デザイナーは、要素をドラッグ＆ドロップしてユーザーインターフェースを構築し、製品やブランドの要件に合わせてコンポーネントをカスタマイズすることができます。

デザインチームは、UIコンポーネントをゼロから構築してテストすることに煩わされることなく、優れたカスタマーエクスペリエンスのデザインにより多くの時間を費やすことができ、市場投入までの時間が大幅に短縮されます。

デザイナーがプロトタイプの作成、テスト、反復を速くできるため、ユーザビリティテストはずっと速くなります。テスト中にユーザーインターフェースがうまく機能しない場合は、膨大なライブラリからその場で変更を加え、参加者やステークホルダーから即座にフィードバックを得ることができます。

デザインハンドオフでは、エンジニアはコンポーネントライブラリをインストールし、プロトタイプやスタイルガイドからの変更をコピー＆ペーストすることで、ゼロから始めることなく製品を開発することができます。

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

信頼できる唯一の情報源（Single source of truth）の維持は、デザインシステムのガバナンスにおける最大の課題の1つです。製品チーム、UXデザイナー、およびデベロッパーが、同期していないデザインシステムを使用していることは珍しいことではなく、その結果、エラーや再作業が発生し、DesignOpsは大きな課題に頭を抱えることになります。

MUIのコンポーネントライブラリを使用することで、デザインと開発の間に信頼できる唯一の情報源（Single source of truth）を作成しながら、こういった課題を大幅に減らすことができます。デザイナーとエンジニアは別々のデザインシステム（デザイナーは画像ベース、エンジニアはコードベース）を持つことになりますが、MUIは彼らに同じスタートブロックを提供します。

UXPinのコードベースエディターでMergeを使用すると、デザイナーとエンジニアは同じデザインシステムのコンポーネントを単一のレポジトリで同期して使用します。レポジトリが更新されると UXPin に同期され、デザイナーに変更点が通知されます。Reactコンポーネント ライブラリにはGitを、その他の一般的なテクノロジーにはStorybookを使用してMergeを接続できます。

3. デザインの一貫性

一貫性は、ユーザーエクスペリエンス、信頼の構築、ブランドロイヤリティには欠かせません。同じUIコンポーネントを使用することで、デザイナーは一貫性を高め、エラーや手戻りを最小限に抑えることができます。

4. 拡張性

拡張性もまた、製品デザインの重要な要素です。ゼロからデザインシステムを構築する場合、デザイナーは製品をスケールアップする前に、新しいコンポーネントのデザイン、プロトタイプの作成、テストが必要です。

MUIの包括的なUIライブラリにより、デザイナーはプロトタイプに必要なコンポーネントを検索して、すぐに拡張することができ、エンジニアは、MUIから同一のReactコンポーネントをコピー＆ペーストし、デザイナーの仕様に合わせてカスタマイズできます。

MUI Xには、データグリッド、日付ピッカー、チャート、ページネーション、フィルタリングなど、複雑な製品をより速く拡張するためにチームが使用できる高度なReactコンポーネントのライブラリが含まれています。

5. 容易なメンテナンス

MUIのようなコンポーネントライブラリには、コンポーネントのインストール、使用、更新、カスタマイズのための詳細なドキュメントが付属しています。デザイナーやエンジニアは、このフレームワークを使って企業のデザインシステムの維持ができ、ガバナンスシステムやプロトコルを簡単に確立することができます。

また、MUIには、あるバージョンから次のバージョンへの移行のためのハウツーガイドもあるので、企業はMUIがアップデートをリリースするたびに、最新のUIスタイル、テクノロジー、トレンドを利用できます。

6. アクセシビリティ

デザインシステムを設定した経験のある方は、すべてのコンポーネントがアクセシビリティ基準をクリアするのに必要な時間と費用をご存知でしょう。MUIのデザイナーは、WCAD 2.0のアクセシビリティ・ガイドラインを満たすようにコンポーネントをデザインすることに細心の注意を払い、研究者やデザイナーの負担を軽減しています。

ただし、アクセシブルなコンポーネントを用いてインターフェースをデザインする場合でも、ナビゲーションやユーザーフローをテストして、製品全体がアクセシビリティの基準を満たしていることの確認が必要であることに留意することが重要です。

7. スキルの強化

MUIのオープンソースコンポーネントUIライブラリは、スタートアップ企業や若い起業家が新製品を開発する際に、特に教育、指導、技能伝授を受けられない発展途上国において、その能力が発揮されるようにします。

また、チャリティ団体、非営利団体、NGOなど、製品やツールを開発したいがデザインシステムに投資する予算がない場合にも、このライブラリーは非常に有益です。 誰でもMUIの優秀なデザイナーやデベロッパーのスキルを活用し、フォーチュン500社で使用されているのと同じコンポーネントライブラリを使用して、洗練されたデジタル製品を開発し、グローバル市場で競争することができます。

MUIが他の コンポーネントライブラリ と異なる点

GoogleのMaterial Design UIは、間違いなく世界で最も優れた、最も包括的なデザインライブラリの1つであり、MUIは、Material Designの上に構築することで、それに匹敵するReactコンポーネントライブラリを提供します。

MUIはTheming機能で簡単にカスタマイズでき、ライブラリのドキュメントも充実しているため、多国籍企業や製品アイデアを持つ一人のデベロッパーでも製品の構築が可能です。 MUIは非常に広く使われているため、デザイナー、研究者、デベロッパーからなる大規模なグローバルコミュニティが存在し、指導やサポートを受けることができます。

Reactが最も人気のあるフロントエンドフレームワークの1つであるという事実も加わり、MUIは魅力的なコンポーネントライブラリとなっています。

興味深い事実と数字

ここでは、MUIの興味深い事実と数字をご紹介します。 注：MUIの統計は上昇を続けており、これは、2022年1月時点のものです。

• MUIは、Googleと差別化するために名称を変更することにして、2014年にMaterial UIとしてスタートしましたが、多くの人がMaterial UIはGoogleの製品だと思い込んでいるようでした。
• MUIには2,200人以上のオープンソースの貢献者がいます。
• GitHubで73,700スター以上獲得しています
• MUIが実施した2020年調査の回答者1,488人のうち、35％のデベロッパーが従業員5人以下の企業で働いていました。
• 調査では、27％のデベロッパーがエンタープライズ・アプリケーションにMUIを使用し、20％が管理者用ダッシュボードにライブラリを使用しています。

UXPinのMUI5キット

UXPin MergeのMUI統合で、UI Reactコンポーネントでプロトタイピングの力が発揮されます。 MUIは、きちんと機能するコードコンポーネントでのデザイン作成をサポートします。信頼できる唯一の情報源（Single source of truth）により、デザイナー、デベロッパー、製品チームなどは、エラーや摩擦を減らし、より効果的にコラボレーションを行うことができます。 忠実度が高いほど、参加者とステークホルダーから有意義なフィードバックを得られるような、より良いユーザビリティ・テストとなります。

その結果、全体的なユーザー体験が向上し、ビジネス価値が高まります。 UXPinのMUIキットの詳細と、この画期的なコードベースのデザイン技術へのアクセスをリクエストするための申し込み方法についてご覧ください：UXPinのMUIライブラリ：より速くデザインする。

UXPin Mergeによるコンポーネントライブラリの同期

UXPin Mergeで、Gitレポジトリ、Storybook、またはMUIからコードコンポーネントを同期し、実際のコードで完全に機能する高忠実度のプロトタイプの構築ができます。 メニュー、フォーム、タブ、データテーブル、日付ピッカー、アコーディオンなどの複雑なUIコンポーネントは、UXPinのコードベースエディタに機能が搭載されており、デザイナーは、ユーザーインターフェースの構築に必要なMUIコンポーネントをドラッグ＆ドロップします。

標準的な画像ベースのデザインツールと同じように、コンポーネントのプロパティパネルを調整することができます。 UXPin Mergeの優れた点は、デザイナーがコードベースのコンポーネントを使用してデザインするのに、新しいスキルセットを学んだり、コードの書き方を知る必要がないことです。

ワークフローは変わりませんが、プロトタイプの忠実度と機能性が大幅に向上します! デザイナーが Merge を使用せずに UXPin を使用する場合でも、ステート、Javascriptのようなインタラクション（条件付きインタラクションを含む）、変数、エクスプレッション、オートレイアウトなど、コードベースの高度な機能を利用できます。

The post MUI とは？MUIについて何を把握すべき？ appeared first on Studio by UXPin.

ユーザーエラーは、フラストレーション、混乱、ユーザー満足度の低下を引き起こし、放棄などの多くの不本意な結果につながってしまいます。そのため、ユーザーエラーを特定、理解および対処をすることは、ユーザー中心のエクスペリエンスのデザインや製品性能の最適化において不可欠です。

この記事では、ユーザーエラーについての基礎を説明した上で、例を用いてエラーを防ぐための11の予防策をご紹介します。

UXPinの完全にインタラクティブなプロトタイプを使って、デザインプロセス中にユーザビリティの問題解決や、ビジネスチャンスを特定しましょう。ぜひこちらから１４日間の無料トライアルをお試しください。

ユーザーエラーとは

ユーザーエラーとは、製品、システム、またはインターフェースと相互作用する際に、意図しない、または望ましくない結果につながる行動や意思決定のことです。プロダクトチームは一般的に、これらのエラーを3つのタイプに分類します：

• スリップ（うっかり）：不注意、注意散漫、筋肉の記憶によって、ユーザーが意図しないミスを犯したときに発生する。
• ミステイク（ミス）：意思決定や問題解決の過程における認知的な誤りが含まれる。
• 違反：ユーザーが想定される意図的な行動やルールから逸脱した場合に発生する。

ユーザーエラーの例

ヒューマンエラーの例として、以下に４つ挙げてみましょう：

1. データ入力エラー：フォームに入力する際にユーザーがメールアドレスを間違って入力してし、通信に失敗したり、メールに送られた重要な情報にアクセスできない。
2. ナビゲーションエラー：EC（Eコマース）のWebサイトを閲覧中に、不明瞭な表示や誤解を招くようなデザインによって、ユーザーが間違った商品画像をクリックするなどで、フラストレーションを招き、ビジネスの売上を失ってしまう。
3. 誤解釈エラー：モバイルアプリでは、ユーザーがアイコンの意味を間違って解釈し、あるアクションを期待してタップしたが別のアクションが実行されてしまう。このような誤解によって、不本意な結果を招き、ネガティブなユーザー体験につながってしまう。
4. 設定エラー：ソフトウェアアプリケーションのセットアップ時に、ユーザーがプライバシー設定を誤って設定してしまった際に、意図せず個人情報を公開したり、過剰なアクセス許可を与えたりして、プライバシーが損なわれ、機密データが流出する。

上記のような例から、ユーザーエラーは間違ったボタンをクリックするようなささいなものから、誤って機密情報を共有してしまうような深刻なものまであることがわかりますね。

ユーザーエラーの６つの要因

以下は、ユーザーエラーの原因となるありがちな要因です：

1. 情報過多や複雑な意思決定要件など、高い認知的負荷は、ユーザーによるエラーの可能性が高まる。
2. デザインの複雑さ、複雑なワークフロー、わかりにくいナビゲーションは、ユーザーを困惑・混乱させてしまうため、ユーザーエラーを引き起こしかねない。
3. エラーメッセージ、通知、視覚的な合図などのフィードバックが不十分不足だと、ユーザーはミスを認識して迅速に修正できない可能性がある。
4. 時間的な制約があったり、締め切りが迫っていたりすると、ユーザーは焦ってタスクをこなすことになり、エラーの頻度が高くなる。
5. 外部からの妨害があると、ユーザーの注意をそらしてしまい、タスクへの集中力を低下させ、ミスの可能性を高める。
6. 不十分なユーザーオンボーディングや、システムやインターフェースに慣れていなかったり、オンボーディングが不十分であったりすると、ユーザーエラーの原因となる。

ユーザーエラーの検出

エラーログと分析

製品チームは、エラーモニタリングツールを使ってユーザーエラーのデータを集め、ユーザーの行動とエラーパターンを分析し、エラーメッセージ、エラーコード、エラーに至るまでのユーザーの行動などのコンテキスト情報を含むエラーデータを取得します。そのデータによって、UXデザインチームはミスの根本原因を特定し、適切な再設計を実施することができます。

ユーザーフィードバック と サポートチャンネル

一般的に組織は、オンラインフォーム、「高評価」や「低評価」などのフィードバックボタン、サポートセンターのメールアドレスなど、専用のフィードバックプラットフォームを設け、ユーザーがエラーを報告したり、サービスでの体験について貴重なフィードバックを提供できやすいようにしています。

ユーザーエラーを防ぐ１１の方法

１．見やすくて直感的なインターフェースデザイン

「The Design of Everyday Things 」の著者であるドナルド・ドーマン氏のアフォーダンス(affordances)、シグニファイア(signifiers)、マッピング(mapping)の概念で、デザイナーはユーザーを正しいインタラクションへと導き、エラーのリスクを最小限に抑える直感的なインターフェースを作ることができます。

例えば、「削除」を表すゴミ箱のアイコンのように、アクションに認識可能なアイコンやラベルを使うことで、ユーザーは意図するアクションを瞬時に特定し、エラーを起こさずに実行することができます。

２．効果的なオンボーディング

効果的なオンボーディングで、明確な指示とインタラクティブなチュートリアルがもたらされるので、ユーザーは製品に親しみやすく、適切な使用方法を理解できるようになります。

例えば、モバイルバンクのアプリのオンボーディングプロセスでは、口座開設や取引の方法を説明したり、ユーザーのミスを防ぐための主要なセキュリティ機能を強調したりする場合があります。

３．考え抜かれた情報アーキテクチャ

情報アーキテクチャは、コンテンツを論理的かつ階層的にまとめ、それによってユーザーは、デジタル製品をナビゲートしやすくなります。例えば、ECサイトでは、商品を明確でわかりやすいカテゴリーに分類しています。このようにして、子供服を探している人が誤って男性用のセクションにたどり着かないようにすることができます。

４．エラー防止の仕組み

検証チェック、エラーメッセージ、トラブルシューティング、確認などのセーフティネットは、問題が起こる前に再確認し、ミスがあれば修正するようユーザーに警告します。

例えば、必須項目が欠けているフォームをユーザーが送信しようとすると、ユーザーが入力を完了するようにエラーメッセージが強調される形で表示されます。

５．一貫した馴染みのあるパターンとインタラクションデザイン

一貫したデザインパターンとインタラクションで、ユーザーはその使い方に慣れてきて、認知的負荷は軽減され、ユーザーエラーを最小限に抑えられます。デザイナーは確立された慣習に従うので、ユーザーは知識、メンタルモデル、習慣を頼りに製品を操作することができるのです。

例えば、 Webサイトのさまざまなセクションの間で一貫したナビゲーションメニューが配置されれば、ユーザーはナビゲートしやすくなり、それによってエラーの可能性が低くなります。

６．ユーザーに優しいフォームデザイン

フォームフィールドの最適化 や明確なラベルと指示の提供、入力検証の実施によって、ユーザーは情報を正確に入力することができるようになります。例えば、入力マスクの使用や、（パスワード強度インジケータなど）入力されたデータの妥当性に関するリアルタイムのフィードバックがあることで、エラーを防ぎ、ユーザーが正確な情報を提供できるように案内することができます。

７．明確な指示およびツールチップ

明確な指示とツールチップ（補足説明）で、ユーザーはツールチップとダイアログを使ったコンテクストに応じたガイダンスを得られ、それによってタスクの完了方法や機能の使用方法を理解することができます。

例えば、Googleドキュメントでは、ツールバーの各アイコンを明確にするためにツールチップが使われ、ユーザーが製品をより効率的に使用する方法についてわかるようにキーボードショートカットが提供されています。

８．段階的開示

段階的開示とは、一度に多くの情報でユーザーが圧倒されることを防ぐため、ユーザーのコンテキストに基づいて徐々に情報を提示する手法です。情報が徐々に開示されることで、ユーザーは関連性のある情報に集中することができ、情報過多によるエラーを回避することができます。

例えば、複雑なソフトウェアアプリケーションでは、デフォルトで高度な設定が隠されている場合があり、それをユーザーが閲覧や修正を要求したときのみ公開することで、複雑すぎることによるエラーを減らすことができます。

９．ユーザーテストとフィードバック

ユーザーテストとフィードバックによって、デザイナーはデザインプロセスにおいてユーザビリティの問題を解決できます。デザインチームは、ユーザーからのフィードバックを収集し、潜在的なペインポイントの特定や、ユーザビリティの問題の発見、エラーを防ぐための改善を行います。

例えば、ユーザビリティテストのセッションを実施し、ユーザーがインタラクティブなプロトタイプにどのように関わるかを観察することで、ユーザーが困ったり、エラーを起こしたりする箇所を明らかにすることができます。デザインチームはインターフェースを改良し、そのような問題を最小限に抑えることができます。

１０．スマートデフォルト

スマートデフォルトは、適切なオプションや設定を事前に選択することで、ユーザーのエラーを防ぐことができます。デザイナーは、スマートデフォルトを使って好みや行動を予測し、エラーを減らしながら、快適なユーザー体験を提供します。ただし、利益のためにスマートデフォルトを乱用しないことを覚えておきましょう。

例えば、カレンダーアプリは、デフォルトのタイムゾーンをユーザーの所在地に設定することで、ユーザーの入力の必要性をなくし、タイムゾーン設定の誤りによるエラーの可能性をなくすことができます。

１１．ユーザーオプションの制限

オプション（選択肢）を限定することで、意思決定がしやすくなって認知的負荷が軽減されることで、ユーザーのミスを防ぐことができます。ユーザーが管理しやすい選択肢であれば、負担なく選択しやすくなります。

例えば、予約プラットフォームは、支払いオプションを最も多く使われているものに制限し、ユーザーが選択した場合、追加のオプションを明らかにするために段階的開示を使用する場合があります。

UXPinのインタラクティブなプロトタイプでエラーを減らす

画像ベースのデザインツールのプロトタイプの制約では、デザイナーはユーザビリティの問題やユーザーエラーの原因となるデザイン上の意志を特定する上で困難なことがよくあります。デザインチームは、より良いプロトタイプを作るためにデベロッパーに頼るか、製品をリリースして品質保証（QA）で把握した問題をバックログに追加しないといけません。どちらを選んでも、コストとフロントエンドの負債は上がります。

UXPinのインタラクティブなプロトタイピング機能を使えば、デザイナーはコード同様のインタラクションや操作性を得ることができるので、最終製品と見分けがつかないようなレプリカを作ることができます。

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

完全に機能するコンポーネントを作る

デザイナーは、テストを強化するのに UXPinで完全に機能する UI （ユーザーインターフェース）やコンポーネントを作成できます。例えば、下の登録フォームの例では、ユーザーがフォームを正しく入力できるためにデザイナーがフィールドエラーメッセージを作成する方法を示しています。最終製品の体験が正確に再現されています。

このプロトタイプは、エラーメッセージを隠す/表示できる条件付きインタラクションで、単一のフレームを使います。このシンプルさは、デザイナーがその場で変更を加えて再テストすることで、コストのかかるテスト時間を最大限活用できるということです。

ちなみに、画像ベースのデザインツールで同等の結果を得る場合だと、デザインチームはフレームを複数の作成する必要があり、コードベースのような迅速性や直感性はありません。また、フレームベースのキャンバスでは簡単に変更を加えたり、反復したりするのも厄介に感じるかもしれません。

コードベースのプロダクトデザインによって、プロトタイプの幅を広げることにつながります。デザインプロセスでより多くのユーザビリティに関する問題を解決できるソリューションを体験してみませんか？こちらからぜひ無料トライアルにお申し込みください。

The post ユーザーエラー とは？：エラーの防止、検出、管理方法 appeared first on Studio by UXPin.

組織が製品を作る際に考慮しなければならない重要な UXデザイン原則 が数多くあります。これらのUX原則は、ユーザーをすべての意思決定の中心に据えるデザイン思考プロセスを補完するものです。

この記事では、企業がより良い製品を作るために利用できる16の UXデザイン原則 を紹介します。

UXPinの高度なプロトタイピングとテスト機能によりデザインチームはユーザビリティの問題を最小限に抑え、より良いユーザー体験を生み出すことができます。14日間の無料トライアルに今すぐお申し込みください。

16の UXデザイン原則 

その1：ユーザーにフォーカスする

ユーザーに焦点を当てるのは当たり前のように思えるかもしれませんが、多くのデザイナーはユーザーを十分に理解することなく、個人的な好みや偏見に基づいて意思決定を行っています。 またユーザーの問題を解決したり、製品に大きな付加価値を与えたりするとは限らないデザインや技術的なイノベーションに、デザイナーは振り回されてしまいます。

最良のデザイン決定はユーザーを理解し、そのニーズを満たすことから生まれます。なぜかというと、人間のための製品のデザインだからです。

経験豊富なUX専門家の多くは、人間ではなくユーザーに焦点を当てることはデザイナーが人間を相手にしていることを忘れてしまうという断絶を生むと考えています。

この言葉を人間中心設計と言い換えることで、UXチームはデザインや技術的な問題を解決することから、”人”を助けることへ考えをシフトすることができます。 デザイン思考の原則に基づいてフレームワークを構築することで、常にユーザーを中心に据えることができます。

• 共感-対象の”人”（エンドユーザー）を知る
• 問題を定義する
• アイデアを生み出す
• プロトタイプ
• テストとイテレーション

人間中心設計についての詳細はこちらをご覧ください。

その2：一貫性を保つ

デザインの一貫性は良いユーザー体験を提供するための重要な要素です。一貫性のないユーザー体験は製品の一部を使いこなせなかったり、機能のリリースやアップデートのたびに使い方を学び直さなければならないことを意味します。

デザイナーの目標は矛盾を気にすることなくユーザーのニーズを満たす製品を作り、最終的には信頼と愛用者を獲得することです。

デザインシステムを構築することで、デザイナー、プロダクトチーム、開発者が常に同じ要素、タイポグラフィ、色、コンポーネント、アセットなどを使用し、一貫性を養うことができます。

デザインシステムをお持ちでない方は ゼロからデザインシステムを構築するための7つのステップをご覧ください。

その3：わかりやすい

ユーザーが簡単に理解できるコンテンツや体験を提供すること。デザイナーは、人は常に最も簡単なルートを探すものだと認識しなければなりません。この競争の激しいテクノロジーの世界であなたが使いやすいものを提供しなければ、他の誰かが使ってしまうでしょう。

製品にオンボーディングが必要な場合は、ステップバイステップでわかりやすいドキュメントを作成してください。

UXPinのドキュメントはその例です。まず手順を分類し、探しているものを簡単に見つけることができます。次に、小見出し、ステップ・バイ・ステップの説明、説明ビデオなどでコンテンツを整理し、情報をフォローして消化しやすいようにしています。

その4：ユーザーに考えさせない

情報設計者でありユーザーエクスペリエンスのプロフェッショナルであるスティーブ・クルーグは、著書『Don’t Make Me Think』の中で、「ユーザーとしては、物事がクリックできるかどうかについて、1ミリ秒も考える必要があってはならない」と述べています。

UXデザイナーはプロダクト、アプリ、Webデザインのデザインスタンダードに従わなければなりません。例えば、ユーザーが予想しないような場所にナビゲーションを隠さないこと。またボタン、CTA、リンクなどがわかりやすく配置され、ユーザーを目的地に導くようにしましょう。

創造性や革新性は、競合他社が思いつかないような問題を解決することで得られるものであり、ユーザーが基本的な基準やプロセスを学び直さなければならないような体験を作り出すことではありません。

人間の心理や認知負荷がUXデザインにどのように関係しているかは、すべてのデザイナーが学ばなければならないことです。認知的負荷を最小限に抑えた製品設計を行うことで、より良いユーザー体験とブランドへの信頼が生まれます。

その5：点・線・面-視覚的な文法を理解する

1900年代初頭にバウハウスで定義されたデザインの基本は、「点」「線」「面」の3つの要素で構成されています。

その7：シンプルな言葉が一番

デザイナーは、人々が理解できないような専門用語や社内でのみ使う用語の使用は避けましょう。複雑な言葉を使ってしまうことで、顧客を失うことにもつながってしまいます。

読みやすさは、たとえ高学歴のユーザーであっても認知的負荷に大きな影響を与えます。これは、ポイント4の「ユーザーに考えさせない」でも同じです。

広く使われているライティングサポートツール「Grammarly」によると、書かれたコンテンツには（アメリカでは）13歳位の言葉を使うべきだとしています。

その8：オーディエンスへの共感を持つ

共感は、人間中心のデザインの核心です。デザイナーは理解を超えて、ユーザーとより深いレベルでつながることができます。デザイナーはユーザーやその苦労、環境に共感するために共感を用います。

エンパシーマップとはUXリサーチツールのひとつで、ユーザーが何を求めているのかを明らかにすることで、デザイナーが共感を得るためのツールです。

• 見る
• 聞く
• 考える
• 感じる

エンパシーマップは初期のリサーチやユーザビリティテストの際に、さまざまな感情や気持ちを確認するために使用します。ユーザーをより深く理解することで、彼らが言葉にしないような問題を発見することができます。

その9：フィードバック

マイクロインタラクションやアニメーションを使ってユーザーとコミュニケーションをとり、ユーザーの行動に対するフィードバックやコンテキストを提供します。

例えばアクションの処理に時間が必要な場合は、スローバーやローディングアイコンを使ってユーザーに待つように伝えます。エラーメッセージは、ユーザーが問題を修正するのに役立つようなものにしましょう。

ブランドメッセージに沿った一貫したフィードバックを使用することで、常にポジティブなユーザーエクスペリエンスを提供することができます。

その10：ビジネスバリューを忘れてはいけない

デザイナーは、ユーザーとブランドという2つの要素を満たさなければなりません。製品を成功させるためにはユーザーに焦点を当てることが重要ですが、デザイナーは、デザインがビジネス価値を生み出すことも保証しなければなりません。

ビジネスバリューと人間中心のデザインはしばしば重なり合います。例えば、よりスムーズでスピーディなEコマースのチェックアウトでの体験は、ユーザー・エクスペリエンス（ユーザー中心）を向上させると同時に、コンバージョン率（ビジネス価値）を高めます。

ユーザーの問題を解決しようとするときは常にビジネス価値を同時に生み出す機会を探しましょう。

ポーランドのエージェンシー、HERODOTのEwelina Łuszczek氏は、ビジネス価値に対するデザイナーの義務を簡潔な一文にまとめています。

「優れたUXデザイナーはユーザーの目標とビジネスの目標をリンクさせて、ユーザーと会社の両方が利益を得られるように管理します。」

 2014年のINFRAGISTICSの調査「The Business Value of User Experience」から4つの素晴らしい例を紹介します。

Bank of America

• デザイナーのアクション：登録プロセスのユーザーセンターの再設計
• 結果：登録数が45％増加

Anthropologie (衣料品会社) 

• デザイナーの行動 チェックアウトプロセスのUX再設計
• 結果：売上が24％アップ

GFK (コンサルティング会社)

• デザイナーの行動：購入ボタンの再設計
• 結果：売上高が5億ドル増加

United Airlines (航空会社)

• デザイナーの行動：ユーザーリサーチ
• 結果：オンラインチケット販売が200％増加

UXデザインによるビジネス価値の創出についての詳細は、INFRAGISTICSの12ページにわたる調査結果をこちらでご覧いただけます。

その11：ユーザーテスト

その6の「まず問題を特定する」と同様に、ユーザーテストはデザイナーが経験的な推測をするのではなく、実際のユーザーの問題を理解するために非常に重要です。 ユーザビリティテストは、UXチームに以下のような貴重なフィードバックとユーザーインサイトを提供します。

• ユーザーの問題を解決するためのデザインコンセプトの検証
• 修正すべきユーザビリティ上の問題の発見
• 改善の機会を発見する
• ユーザーについてより深く知る
• ビジネスバリューの機会を特定する

チームは、コンセプトの立案から最終的なデザインの引き渡しまで、常に解決すべき問題を探し、その解決策を検証するためにテストを行う必要があります。 テストについて詳しくはこちらをご覧ください。ユーザビリティ・テストとは何か、どのように実行するか。

その12：視覚的な階層化

視覚的な階層は、製品や画面のレイアウトを整理するのに役立ちます。ユーザーは重要な要素を識別し、必要なものを素早く探し出すことができます。

デザイナーは色、コントラスト、スケール、グループ化などの明確なバリエーションを用いて、視覚的な階層を作ります。

このブログ記事のようにライターがヘッダータグを使って記事の内容を構成し、整理することも視覚的な階層化の好例です。

Nielsen Norman Groupのこちらの記事も合わせてご覧ください。：Visual Hierarchy in UX: Definition

その13：アクセシビリティ

アクセシビリティは、障害のあるユーザーが製品を利用できるようにするための重要な設計上の考慮事項です。また、Google社が「次の10億人のユーザー」と呼ぶ人々（初めてテクノロジーを利用する人々）についても、アクセシビリティを考慮する必要があります。 アクセシビリティに関する主な検討事項は以下の通りです。

• スクリーン・リーダーがコンテンツや指示を解釈できるようにする
• 読みやすさを損なわないような色やコントラストにする
• すべてのユーザーがリンクやナビゲーションを理解できるよう、アイコンとテキストを組み合わせて使用すること
• 読みやすいフォントと文字サイズを使用する
• UXデザイナーは、デザインツールがアクセシビリティチェック機能を備えていないため、これらの配慮を忘れがちです。

UXPinでは、「一人、ひとりに合わせたデジタル体験を提供したい」という思いがあります。そこで、デザインエディタにアクセシビリティ機能を組み込みました。

 14日間の無料トライアルに登録して、UXPinでよりインクルーシブな製品作りを始めましょう!

その14：ユーザーがコントロールできるようにする

可能な限りユーザーが自分の考えを変えたり、送信した情報を編集したりすることが簡単にできるようにしましょう。例えば、チェックアウトフローのすべての画面に戻るボタンを用意することで、ユーザーはエラーを修正したり、変更を加えたりすることができます。

また意図的であるかどうかに関わらず、ユーザーに誤解を与えないようにしてください。

多くの企業ではユーザーが定期購入をキャンセルできないように設定でオプションを隠したり、サポートに連絡するように仕向けたりしています（サポートでは通常、定期購入を継続するためのインセンティブを提供しようとします）。

ユーザーが考えを変えたり情報を編集したりする手段を制限することはブランドへの不信感を生み、お客様に他の解決策を探させることになります。

その15：デザインハンドオフ

デザインの受け渡しは社内のプロセスですが、デザインの受け渡しがうまくいかないと不必要な遅延や技術的なエラーが発生し、ユーザーに悪影響を及ぼします。

UXチーム、プロダクトデザイナー、開発者が協力してプロセスとプロトコルを開発し、デザインハンドオフを最小限のエラーでスムーズに行う必要があります。 UXPin Mergeは、デザインと開発の間のギャップを埋めるのに役立ちます。

まず第一に、Mergeはデザイナーがコンポーネントをリポジトリと同期させることができるので（GitまたはStorybookの統合を介して）、デザインチームは完全に機能する高忠実度プロトタイプを構築することができます。

また、UXPinのSpec Modeは、開発者がデザインの詳細情報を得るための簡単なハンドオフプロセスを提供します。

• プロパティの検査：サイズ、グリッド、カラー、タイポグラフィなど、要素やコンポーネントのCSSを取得できます。
• 距離の測定：要素にカーソルを合わせると、要素とキャンバスの端の間の距離が表示されます。
• スタイルガイド：製品のデザインシステムの概要と、必要に応じてアセットをダウンロードするオプションを表示します。

UXPin Mergeのパワーと、React用のGit統合や他の人気フロントエンドライブラリ用のStorybookなど、お好みのテクノロジーを接続する方法をご紹介します。

その16：再評価と修正

UXデザインの素晴らしい点の1つは、製品やユーザーエクスペリエンスを継続的に改善できるよう、常に進化し続けていることです。 新しい製品やリリースを開始するとデータを分析し、デザインを見直す作業が始まります。

• 何千人、何百万人もの人々が製品を使用したとき、製品のパフォーマンスはどうなるのか？
• ユーザーは意図したとおりに製品を使っているのか？
• ユーザーは、ユーザー体験を向上させるための近道を使っているか？
• ヒートマップはユーザーの行動について何を教えてくれるのか？
• サインアップやチェックアウトの際、ユーザーはどこで脱落するのか？

製品のパフォーマンスを分析する際、チームは常にユーザー・エクスペリエンスを向上させる方法を模索するとともに、ビジネス価値を高めるための道筋を探るべきです。

まとめ

今回ご紹介した16の UXデザイン原則 はワークフローを改善し、ユーザーにとってより良い製品体験を生み出すために活用していただけると幸いです。これは決して網羅的なリストではありませんので、常にプロセスを改善する方法を模索することをお勧めします。

UXPinは、企業の健全な UXデザイン原則 を育むためのコラボレーションデザインツールです。UXPinはデザイナー、製品チーム、開発者の間のギャップをうまく埋め、UXデザインプロセスのあらゆる側面を改善することができる唯一のデザインツールです。

UXPinで新しいデザインの世界を探求するために、14日間の無料トライアルを始めてみませんか？

The post UXデザイン原則 – ユーザーが喜ぶための法則 appeared first on Studio by UXPin.

最新のウェブサイトとアプリは、ユーザーインターフェースの開発、維持、拡張をフロントエンドフレームワークに依存しています。ReactのJavascriptライブラリは、デジタル製品を構築するための多くのコンポーネントライブラリがある、間違いなく最も人気のあるフロントエンドフレームワークです。

そこで今回は、主要な Reactコンポーネントライブラリと、次のプロジェクトに適したライブラリの選び方について見てみましょう。

UXPin Mergeで、デザイナーがコードコンポーネントを使って完全に機能するプロトタイプを作成できるように、ReactのコンポーネントライブラリをGitのリポジトリからデザインエディターに同期できます。

 Reactコンポーネントライブラリを選ぶ時に検討すべき6つのこと

これから「Reactのコンポーネントライブラリを選ぶ時に検討すべき6つのこと」を述べますが、これは決して完全なリストではありません。中には、現在作成している製品に当てはまらない場合もあります。

１）人気

各 Reactライブラリ の人気は、GitHubのスター数で手軽に比較できます。 毎週ダウンロードされるNPMで、コンポーネントライブラリの使用者数もわかります。 一般的に言って、 Reactライブラリ の人気が高いということは、それだけ確立され、目的を果たしているということです。

２）問題点

星評価と同様に、ライブラリのGitHubの問題で、そのライブラリの人気と維持の程度について色々とわかります。 これは、たとえライブラリに問題が最小限しかないとしても、作ろうとしている製品に影響を与えるものはないのでしょうか？

３）ドキュメントとサポート

 Reactライブラリ を選ぶ時、ドキュメントは重要な検討事項です。 例えば、問題が発生するたびにStackOverflowが実行されるのを避けたいとか、特定のコンポーネントの使用方法を知りたい時など、 優秀なドキュメントは定期的に更新されるので、ライブラリを包括的に理解できます。 また、 Reactライブラリ が作成者から直接サポートされるのか、専用のコミュニティフォーラムを介してサポートされるのかを把握しておきたいのではないでしょうか。 課題を克服するために専門家のアドバイスが必要な場合があるので、問題を迅速に分類し、プロジェクトを継続させるためには（それが有料でも）十分なサポートを得られるかが重要です。

４）カスタマイズ

コンポーネントライブラリの使用における欠点の1つは、その制約とカスタマイズの欠如です。 一部のプロジェクトではカスタマイズは重要ではありませんが、独自のUIを開発する場合は、独自のデザインシステムを構築する機能が不可欠です。 ライブラリのドキュメントを調べて、コンポーネントをカスタマイズするための手順が提供されているかどうかと、いかに簡単に思い通りの結果に辿り着けるかを確認してください。

５）ブラウザ／デバイスの相性

デザインしているアプリによっては、コンポーネントライブラリのブラウザとモバイルの相性を知りたい場合があります。 最も手っ取り早くブラウザとデバイスの相性を調べるには、GitHubの問題かStackOverflowの検索です。

６）アクセシビリティ

アクセシビリティはややこしいですが、デジタル製品のデザインには必要な検討事項です。 Reactライブラリ がコンポーネントをデザインするときにアクセシビリティが考慮されていないと、あなたはそれを自分でしなければならなくなり、3番のドキュメントと4番のカスタマイズに戻るということです。

 Reactコンポーネントライブラリ：トップ５

我々が独自に選んだReact ライブラリの２０２２年のベスト５です

注：GitHubスターとNPMのダウンロードに関する情報は、2022年1月時点のものです。

1) MUI

• GitHub スター数：73.8k
• 週間 NPM ダウンロード数: 2.3M
• 公式サイト: mui.com

MUIは、最も広く使用されている Reactコンポーネントライブラリ の1つです。 このライブラリは、世界で最も広範なUIキットの1つであるGoogleのマテリアルデザインUIに基づいて構築されています。 

MUI- テーマとカスタマイズ

MUIの最大の魅力の1つは、コンポーネントにテーマを設定してカスタマイズできることです。 デザイナーは、MUIを基盤として使用して、デザインを速く拡張できますが、製品または組織のカスタマイズデザインシステムを構築するのにライブラリを適応させることもできます。 デザイナーは、コンポーネントをカスタマイズする際のユーザビリティ問題を回避するために、マテリアルデザインとMUIの包括的なガイドラインを活用できます。 MUIには、ダッシュボード、eコマースWebサイト、ランディングページなどのReactテーマテンプレートを購入するためのテンプレートマーケットプレースもあります。 

MUI-　ドキュメント

MUIのドキュメントは、そのコンポーネントライブラリと同じくらい詳細で包括的なものです。 そのキュレーターは、デザイナーとデベロッパーに、インストール、使用法、カスタマイズ、アクセシビリティなどの一つひとつの手順とガイドラインを提供するために細心の注意を払っています。 YouTubeには、MUIのユーザーと寄稿者からなる大規模なコミュニティからの、最善の方法、チュートリアル、ヒントとコツ、ハウツーガイドなど多数のビデオがあります。

2) React-Bootstrap

• GitHubスター数：20.3k
• 週間 NPM ダウンロード数。879,780
• 公式サイト：react-bootstrap.github.io

2011年に設立されたBootstrapは、WebサイトおよびWebアプリケーション向けの最も古くから人気のあるオープンソースCSSフレームワークの1つです。 Bootstrapは、モバイルファーストのWeb開発を優先する最初のCSSフレームワークの1つであり、設計者がレスポンシブWebサイトを早く構築および拡張できるようにしました。 React-BootstrapはBootstrapJavascriptに取って代わり、JQueryのようなリソースを大量に消費する依存関係を捨てて、包括的で単純な Reactコンポーネントライブラリ を構築しました。

React-Bootstrap–コンポーネント

Bootstrapを熟知していたら、React-Bootstrapの一般的な外観のコンポーネントライブラリにすぐに気付くでしょう。CSSの前身と同様に、React-Bootstrapは、モバイルアプリケーションよりもWebデザインを優先するUIコンポーネントに特化しています。

React-Bootstrap–テーマ設定とカスタマイズ

React-Bootstrapは非常に一般的で、スタイリングが最小限であるため、デザイナーは簡単に調整やカスタマイズができます。 Bootstrapで確定されたクラスとバリアントにより、CSSを使用してコンポーネントを簡単に選択およびカスタマイズできます。 Bootstrapの長い歴史と幅広い使用により、管理ダッシュボードから多目的Webサイト、eコマース、ランディングページなど、あらゆるものに対応する無料のプレミアムReact-Bootstrapテーマとテンプレートがたくさん見つかります。

React-Bootstrap – ドキュメント

React-Bootstrapには、MUIほど詳細で包括的ではありませんが、優秀なドキュメントがあります。 React-Bootstrapのシンプルさと命名規則により、このドキュメントはReactを理解、使用、カスタマイズするのが最も簡単なライブラリの1つになっています。

３）Semantic UI React

• GitHubスター数：12.6k
• 週間 NPM ダウンロード数: 218,320
• 公式サイト：react.semantic-ui.com

Semantic UIReactは、React-Bootstrapの代替として人気です。 React-Bootstrapのように、Semantic UIは、寄稿者がReactコンポーネントを構築するために使用したオープンソースのCSSフレームワークとして始まりました。

Semantic UI React – コンポーネント

Semantic UI Reactには、WebサイトおよびWebアプリケーション用の幅広いUIコンポーネントがあります。 コンポーネントは、ミニマムでシンプルなまま、Bootstrapよりもクリーンでモダンなスタイルです。 Semantic UI Reactは、1,600を超える無料アイコンと7,864 Pro（有料）を含むFontAwesomeアイコンセットを使用しています。

Semantic UI React – テーマ設定とカスタマイズ

セマンティックUIは、コンポーネントが簡単にカスタマイズできる、直感的でわかりやすい命名規則を使用しています。 ドキュメントには、SemanticUIReactを使ったテーマ設定について一つ一つ説明したガイドも含まれています。 Semanticには、MUIやReact-Bootstrapにあるようなテンプレートオプションがほとんどありません。

Semantic UI React – ドキュメント

Semantic UI Reactの対話型のドキュメントには、コードを検査してコンポーネントを色々と試すためのCodeSandboxの事例が用意されています。 また、ドキュメントでは、サンプル、コード、プロップを切り替えて、多角的にコンポーネントを可視化することもできます。

4) Ant Design (AntD)

• GitHubスター数：76.6k
• 週間 NPM ダウンロード数：681,434
• 公式サイト：ant.design/docs/react/introduce

Ant Design（AntD）は、中国最大のオンラインマーケットプレースであるAlibabaの親会社であるAntGroupによって開発された、もう1つの多くの人々から利用されている人気の Reactコンポーネントライブラリ です。 MUIと同様に、AntDにはWebアプリケーションとモバイルアプリケーションの両方に対応する膨大なコンポーネントライブラリがあります。

Ant Design – コンポーネント

AntDには、モバイルデバイス用の無限スクロールやPull-to-Refresh（引っ張って更新）などのUIパターンを含む、デスクトップおよびモバイル用の大規模なコンポーネントライブラリがあります。 Ant Design ProComponentsには、複雑なインターフェースを構築するための一連の高度なReact UI要素（MUI Xに類似）があります。

また、プロジェクトを開始してUIをもっとずっと速く構築するための、既成のテンプレートとスキャフォールドの膨大なライブラリもあります。

Ant Design – テーマ設定とカスタマイズ

AntDは、デベロッパー向けのデザイントークンまたは変数を使用して、コンポーネントをカスタマイズおよびテーマ化します。 UIライブラリにはLessが使用され、GitHub内のすべてのAntD変数の完全なリストが備わってます。

Ant Design – ドキュメント

AntDの包括的なドキュメントには、使用とカスタマイズについての一つ一つの手順が記載されています。 CodeSandBox、CodePenやStackBlitz内の各コンポーネントを検査することもできます。

5) Chakra UI

• GitHubスター数：22.8k
• 週間 NPM ダウンロード数：182,166
• 公式サイト：chakra-ui.com

Chakra UIは、セグン・アデバヨ氏によって設立された、ナイジェリア拠点の Reactコンポーネントライブラリ です。 Chakraの無料のコンポーネントライブラリかChakra UI Proのいずれかを選択でき、それにはインターフェースをより速く構築するために予め作られた複雑なUIコンポーネントがあります。

Chakra UI – コンポーネント

Chakra UIのコンポーネントライブラリは、WebベースのアプリケーションとWebサイトを対象にしています。 ライブラリは、好みに応じて、TypeScriptまたはJavascriptReactコンポーネントのいずれかを選択できます。 チャクラのデザイナーはWAI-ARIA規格に沿っているため、すべての要素にアクセスできます。

スタイリッシュなUIコンポーネントは、Semantic UIに似ており、濃淡のオプションを利用できます。

Chakra UI – テーマ設定とカスタマイズ

Chakraのデザイナーは、製品とブランドの要件を満たすために、変数を使用して完全にカスタマイズされるUIライブラリを作成しました。Charkaは、Create React App、Framer Motion、React Hook Form、およびReact Tableとも統合して、ライブラリ使用とカスタマイズを拡張します。

Chakra UI – ドキュメント

Chakra UIには、ガイド、ビデオチュートリアル、事例、FAQ、主要チームメンバーと接続するためのリンク、およびアクティブなDiscordコミュニティを含む優秀なドキュメントがあります。

åChakraのユーザーは、 Reactライブラリ に非常に情熱的で熱心であり、質問できる相手が必ずいます。

UXPin MergeでReactコンポーネントを使ったデザイン

 Reactライブラリ を使用する際の課題の1つは、デザイナーと開発者が同じコンポーネントを使用しても、デザインシステムは別々だということです。

デザイナーはベクトルベースのデザインシステムを使用し、開発者はコードベースのReactコンポーネントを使用します。 一部のライブラリにはデザインツール用のUIキットが備わってないため、デザイナーはライブラリを再作成するか、第三者の作成者を見つける必要があります。

UXPinでGitHubから Reactコンポーネントライブラリ を分離し、Mergeを使用してレポジトリをデザインエディターに同期できます。 デザイナーは、レポジトリからのコードコンポーネントを使用して、完全に機能するプロトタイプを作成します。 デベロッパーがレポジトリを更新すると、変更は自動的にUXPinに同期されるため、信頼できる唯一の情報源が作成されます。

ということは、個別のデザインシステムはもういらないのです！

こちらでUXPin  Mergeの詳細、アクセスのリクエスト法を確認してみてください。 また、Vue、WebコンポーネントやEmberなどより多くのフロントエンドフレームワークにStorybookと統合し、Mergeを使うことができます。

The post おすすめ５選 – Reactコンポーネントライブラリ appeared first on Studio by UXPin.

最初に

複数のツールにまたがって開発を効率的に行うには、コンポーネントライブラリの利用を検討するのが賢明です。

プロダクションレディで、カスタマイズ性があり、再利用可能なコードコンポーネント（例：ボタン、アコーディオンなど）にアクセスできるオープンソースリポジトリがあることで、UI／UXデザイナーは開発の高速化と成長を実現できます。

主なポイント（概要）

• コンポーネントライブラリは、事前に構築・検証済みの十分に文書化されたUIコンポーネントのセットであり、製品のUI全体で簡単に再利用できる。

• コンポーネントライブラリにより、製品の一貫した LnF（ルック＆フィール）が保証され、効率性と拡張性が促進される。

• コンポーネントライブラリを使うことで、デザイナーと開発者は全体的なデザインの一貫性を保ち、新しい機能やページを素早く追加できる。

デザイナーとエンジニア間で「信頼できる唯一の情報源（Single source of truth）」を作成しましょう。

UXPin Mergeを使って、コンポーネントライブラリをデザインツールに取り込んでみましょう。

インポートした要素を使用することで、インタラクティブなプロトタイプが簡単に構築可能です。

UXPin Mergeについての詳細はこちらより。

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

UIコンポーネントライブラリは、Webサイトやアプリケーションなどのデジタル製品向けに、統一感を持たせるために使用される、デザインおよび事前構築済みの ユーザーインターフェースの要素のコレクションです。

ライブラリには、様々なUI要素（例：ボタンやフォーム、ナビゲーションメニュー、アイコンなど）があらかじめ備わっており、各要素は一貫したルック＆フィールでデザインされています。

また、UIコンポーネントライブラリは、チームメンバー間で「信頼できる唯一の情報源（Single source of truth）」を確実に使うことができます。

これによって、最終製品がプロフェッショナルで洗練された外観を確実に維持できることから、協働デザインおよび開発環境において有益です。

コンポーネントライブラリ には「信頼できる唯一の情報源（Single source of truth）」がある

コンポーネントライブラリによって、仕上がりのばらつきや、さまざまなコンポーネントが色々な場所に配置されてしまうというリスクが下がります。

コンポーネントライブラリでは、UI要素のソースコードを扱い、通常はCSSとJavaScriptを使用します。

Reactは、よく使われているオープンソースのフレームワークの代表例であり、Facebookによって「コンポーネントライブラリ」として開発されました。

それ以来、アプリ、静的サイト、デスクトップアプリケーションを作成するための大規模なエコシステムに成長しました。

コンポーネントライブラリ を使う利点

アクセシビリティ

コンポーネントライブラリは、既製の再利用可能なコンポーネントを格納する単一のレポジトリとして、あらゆる開発者やデザイナーに迅速なアクセスを提供する。

チームを超えて働く開発者やデザイナー間の連携や連絡が改善される。

重複コードを削減

さまざまなデザインやプロジェクトで重複コード（コードクローン）がよく起きるが、コンポーネントライブラリを使うことでピクセルを全てコードに変換する必要はなくなる。

代わりとして、すでにコード化されたコンポーネントを使うことができる。

一貫性

コンポーネントライブラリを使うことで、「信頼できる唯一の情報源（Single source of truth）」が促進され、プロジェクト全体で一貫したUI／UXを可能にし、統一性を出しやすくなる。

全体的な作業の高速化、効率化につながる。

スピード

ボトムアップ型手法での構築を避けることで、チームの時間が節約される。

UIの作り直しやデザインする代わりに、すでにあるUIを使うことができる。

既製のコンポーネントを使用することで、これまで時間を要した意思決定のプロセスを省略できる。

互換性

フロントエンドデベロッパーは、クロスブラウザやクロスデバイスの互換性の確保が大変な時があるが、コンポーネントライブラリを使用して標準化することによって非互換性の回避が可能。

コンポーネントライブラリを使うベストタイミング

コンポーネントライブラリでプロジェクトに測定可能な価値が加わる特別な状況がいくつかあります。

では、それがどのようなものか見てみましょう。

コード優先のプロトタイプ

ビジュアルデザインよりも機能性を重視するプロジェクトは、コンポーネントライブラリの恩恵を受けやすく、さらに、コードによるプロトタイプは、画像から始めてコードに変換するよりも効率的です。

なので、デベロッパーが画像ベースのデザインを解釈してコードを作成するのを期待するのではなく、既製のデザインからコードコンポーネントを取り入れるだけでいいのです。

これにより、デベロッパーはデザインスキルの不足を心配することなく、事前に構築されたコンポーネントを使ってデザインできる機会も広がります。

自分で作る技術や経験がない場合

独自のコンポーネントライブラリの作成や、独自のエンタープライズデザインシステムの一部としてのコンポーネントライブラリの開発を夢見ているかもしれませんが、再利用可能なUI コンポーネントの構築の経験がチームになかったり、プロジェクトの締め切りが厳しかったりすると、これは現実的ではないかもしれません。

その代わりに、統合されたコンポーネントライブラリだと、デザイナーやデベロッパーがデジタル製品に変換する前に、機能性、使いやすさ、デザインをテストするのに必要なコードコンポーネントをすべて得られます。

小規模な企業やチームの場合

スタートアップ企業や中小企業では、資金繰りにもっと慎重になる必要があるかもしれません。また、効果的で汎用性の高いオープンソースのコンポーネントライブラリが幅広く存在するため、中小企業でも一歩ずつ規模を拡大することができます。

結局のところ、業界の巨大勢力が一夜にしてそこに到達したわけではなく、その多くは、その進化を通して、オリジナルのコンポーネントライブラリにこだわり続けているのです。

拡張に役立つ優れたツール

もし、コンポーネントライブラリがどのようなメリットをもたらすのかがまだハッキリしないのであれば、以下のポイントを考えてみてください：

• デベロッパーがプロジェクトごとに同じコンポーネントを、多少の違いはあるものの構築しているのを見るか。
• インターフェースでどのUIやUX規約を使うべきかを迷っているデベロッパーはいるか。
• アップデートや変更の迅速なリリースが必要か。
• 多くのカスタマイズが必要か。
• デザインシステムとコンポーネントライブラリの組み合わせを探しているか。

上記質問のいずれかに当てはまるものがあれば、以下のツールのいずれかをご検討ください。

１．Mergeコンポーネントマネージャー

Merge コンポーネントマネージャーは、UXPin で React の UI コンポーネントを管理するためのデザイン操作ツールであり、独自のコンポーネントライブラリを持ち込んで、コンポーネントマネージャーを使ってコンポーネントのプロパティを管理することができます。

これはアクティブな開発サポートが不足している場合に最適です。

UI コンポーネントをアップロードすると、それを使って UXPin で UI をデザインできます。

コンポーネントは React でコーディングされているため、UXPin で完全なインタラクティブ性が発揮されます。

２．npm統合

コンポーネントライブラリから UXPin に UI コンポーネントを取り込む方法の1つに、NPM パッケージの統合があります。

コンポーネントのインポートに必要なのは、ライブラリ名だけです。

その後は、Merge のコンポーネントマネージャーを使って プロップ を設定し、説明などを記述します。

npm 統合についての詳細はこちらをご覧ください。

３．Storybook統合

Storybook は、１５のさまざまなフレームワークで UI コンポーネントを開発するためのオープンソースのツールです。

中でもReact、Vue、Angularは最もよく使われているフレームワークです。

これはコード化されたデザインシステムとコンポーネントライブラリを組み合わせたもので、効果的なコンポーネントとページの開発、テスト、ドキュメンテーションのためのサンドボックスとして機能します。

そしてデベロッパーは、視覚的なアプローチよりも効果的なコンポーネント駆動型のアプローチを取ることができます。

また、Storybook はデベロッパーが使うものであることから、デザインにも役立つ UXPin との統合があります。

UXPin Merge の技術があれば、Storybook を UXPin エディタと同期して、コードコンポーネントでデザインすることができ、すぐにアクセスできるように、完全に機能する要素はUXPinでのUIライブラリの１つとして表示されます。

４．MUI統合

MUI（Material UI）コンポーネントを使用し、デザインからハンドオフ、及び開発プロセス全体の流れの最後まで一貫性を確保します。

CSSユーティリティでReactフレームワークを簡単にカスタマイズし、求めるデザインを追及できます。

革新的なMerge技術を使って、コードでデザインする１番手になろう

コンポーネントライブラリで、開発の標準化やコードの重複の減少、チーム間の連携の改善およびスケーラビリティ推進のチャンスがもたらされます。

また、プロジェクトの成果物やチームのモチベーションに大きな影響を与えるため、ニーズに合ったソリューションを選択することが重要です。

ただ、デザインの一貫性と開発生産性の向上を目指している場合、UXPin の Mergeの技術には、Storybook統合の独自のポイントだけでなく、デザイン内のコンポーネントを管理するための独自のツールである Mergeコンポーネントマネージャーもあります。

こちらから UXPin Merge の詳細をぜひご覧ください。

The post コンポーネントライブラリ とは？なぜUI開発に使う必要がある？ appeared first on Studio by UXPin.

ReactJSと React Native の違いを理解すると、デザイナーはエンジニアとのコミュニケーションは円滑になり、コストのかかる技術的な問題は回避され、デザイン引き継ぎ時の摩擦を最小限に抑えることができます。

デザイナーは、JavascriptやReactの基本的な違いを理解するのに、コードを学んだり技術的な詳細に踏み込む必要はありません。デザイナーに関係する最も大きな違いは、ウェブベースの製品とネイティブのモバイルアプリケーションをデザインする際のコンポーネントライブラリとその選び方です。

UXPin Mergeを使用すると、React UIコンポーネントをGitリポジトリからUXPinのデザインエディタに同期させることができるので、デザインチームは問題なく機能するコードベースのプロトタイプを作成できます。この信頼できる唯一の情報源（Single source of truth）により、デザインのズレがなくなり、市場投入までの時間が短縮され、デザイナーとデベロッパー間の結束が高まります。この画期的なテクノロジーへのアクセスに関する詳細およびリクエスト方法については、Mergeについてのページをご覧ください。

ReactJS とは

ReactJS（一般にReactと呼ばれる）は、Webベースのユーザーインターフェース構築のためのオープンソースのJavascriptライブラリです。コンポーネントベースのフロントエンドフレームワークで、バニラHTML、CSS、Javascriptを記述するよりも早く簡単にWebサイトやWebアプリケーションの開発・拡張ができます。 ReactJSでは、基本的なボタンから複雑なチャートやデータグリッドまで、再利用可能なタグやコンポーネントを作成でき、デベロッパーはコード一行でそれを呼び出すことができます。デザイナーがマスターコンポーネントを作成し、それをユーザーインターフェースの他の部分にコピー＆ペーストするのとよく似ていますね。

ReactJS の例

Facebookは、2011年に自社のWebベースの全製品のためにReactを開発し、現在もWhatsApp、Messenger、Facebook、InstagramのWeb版でこのフロントエンドフレームワークを使用しています。

Facebook以外にも、以下のような多くのグローバル企業やFortune 500社が、WebサイトやWebアプリケーションにReactを使用しています。

• Netflix
• Salesforce
• New York Times
• Reddit
• Cloudflare
• Tesla
• PayPal(PayPalがUXPin Mergeを使ってデザイン拡張させ、Reactリポジトリに同期した方法はこちら)

React Native とは

 React Native は、プラットフォームを超えたモバイルAndroidおよびiOSアプリ、ならびにWebベースのアプリケーションに使用されるReactJSのモバイル版です。ReactJSと同様に、 React Native は、モバイルアプリの開発・拡張のための再利用可能なコンポーネントをデベロッパーにもたらします。

技術的な大きな違いとしては、Reactは仮想DOM（Document Object Model）を使ってWebブラウザ上でコードをレンダリングするのに対し、 React Native はネイティブAPIを使ってモバイルデバイス上でUIをレンダリングする点が挙げられます。

Facebookが React Native を作った理由

 React Native 以前は、デベロッパーはApple XCodeまたはAndroid Studioを使用して、iOSとAndroid用の2つの別々のネイティブアプリケーションをそれぞれ作成しなければいけませんでしたが、今は React Native により、デベロッパーは、iOSとAndroid用のネイティブコードを自動的にレンダリングする単一のアプリケーションを開発することができます。

React Native の例

Facebookは、Instagram、Facebook、Facebook Ads Manager、Oculusなど、ネイティブモバイルアプリケーションに React Native を使用しています。 また、以下のように多くのグローバル企業がReact Nativeを使用しています。

• Coinbase
• Shopify
• Discord
• Skype
• Bloomberg
• Pinterest
• Baiduモバイル

 React Native と ReactJS の違い

２つの最大の違いは、ReactがJavascriptのライブラリであるのに対して、React NativeはJavascriptのフレームワークであることです。

• ライブラリとは、エンジニアがWebサイトやアプリケーションを開発しやすくするために、あらかじめ用意されたコードのことです。
• フレームワークはより複雑で、Webサイトやアプリケーションを構築するためのライブラリ、テンプレートフレームワーク、API、セッション管理などで構成されています。

その他にも、ReactJSとReact Nativeの決定的な違いは以下のようにあります；

• ReactJSはJavascriptとCSSでアニメーションを行い、React Nativeはアニメーション用のAPIを使用します。
• ReactJSはUIでHTMLをレンダリングし、React NativeはJSXをレンダリングします。
• デベロッパーは主に、Web開発にはReactJSを、モバイルアプリケーション開発にはReact Nativeを使用しています。
• ReactJSではWebページのナビゲーションにReact-routerが使われ、React NativeではNavigationライブラリが組み込まれています。

プロトタイプデザインのためのReact

ここでは、デザイナーがReactのプロジェクトに取り組む方法をいくつかご紹介します。

コンポーネントベースのデザイン手法

ReactJSやReact Nativeでは、コンポーネントベースのフレームワークを用いてUIを構築していました。デザイナーも同様に、コンポーネントベースのデザインマインドセットを使わなければいけません。自身がデザインするUIについてそれぞれ、「デベロッパーはこれをどのようにして核となるコンポーネントに分解できるのか」と自問してみましょう。

React製品をデザインする場合、コンポーネントを作成し、製品デザイン全体で一貫してこれらを再利用します。コンポーネント内でフォントサイズやスペーシングの変更は、エンジニアが新しいコンポーネントを構築したり、追加のスタイリングを記述する必要があるためなるべく避けましょう。

コンポーネントライブラリの採用

ReactJS やReact Nativeのデザインシステムをゼロから構築すると、デザインと開発の間で常に課題が発生し、ズレが生じてしまいます。そこで企業は、カスタマイズ可能なReactコンポーネントライブラリを採用することで、この課題を克服しています。

Reactコンポーネントライブラリを用いたデザインにより、デザイナーは、デザインを最終製品に変換する際にエンジニアが直面する制限や制約がわかってきます。

GoogleのMaterial Design UIをベースにしたMUIは、最もわかりやすく広く使われているコンポーネントライブラリの1つであり、デザイナーは、MUIを基盤として、ウェブサイト、ウェブアプリ、ネイティブアプリケーションのデザインシステムを構築することができます。

UXPinのMUI統合により、デザイナーはReactコンポーネントを使用してUIの構築ができます。UXPinのプロパティパネルでMUIコンポーネントをカスタマイズして、ブランドや製品の要件に対応させることができます。無料トライアルにサインアップし、UXPinでReactコンポーネントを使ったデザインを始めてください。

モーションとアニメーション

モーションとアニメーションは、特にネイティブアプリケーションの場合、デザイナーとデベロッパーの間でしばしば摩擦を起こします。ReactJSでは、エンジニアは比較的簡単にデザインアニメーションを再現できますが、 React Nativeで同じ結果を得るのは、追加のツールやパッケージがなければ困難または不可能です。このような追加には時間とコストがかかり、プロジェクトの制約を超えてしまう可能性があります。 モーションとアニメーションについては、プロジェクト開始時に必ずエンジニアと話し合い、デザインの引き継ぎ時に摩擦が生じないよう、何ができるかを判断しましょう。

ReactとUXPin Mergeでデザインする

UXPin Mergeで、デザイナーはReactコンポーネントを使用してきちんと機能するプロトタイプを構築できます。デザイナーは、他のデザインツールと同様にReactコンポーネントを使用しますが、最終製品に含まれるコンポーネントと同じであるため、忠実度と機能性が大幅に向上します。

UXPin MergeでのデザインのためにReactを理解する必要はありませんが、理解していたら、エンジニアリングチームとのコミュニケーションと連携が改善されつつ、より忠実で機能的なプロトタイプを作成できる可能性があります。

Reactのプロップ

Reactコンポーネントは、色、文字デザイン、ボーダー、シャドウなどのプロパティを確定するのにプロップを使用します。Merge はプロップを自動的に認識し、デザイナーが編集できるようにプロパティ パネルが表示され、デザイナーは JSX に切り替えて、コードで表示および編集もできます。

プロップでデザイナーが変更を加えることができますが、同時にプロップは、ブランドの色や書体など、デザインシステムで確定された制約を設定するものでもあります。この制約により、一貫性が維持され、チームメンバーが不正に変更するのを防ぐことができます。

UXPinはベクターグラフィックスではなくコードをレンダリングするため、デベロッパーはデザイナーがコンポーネントのプロップに加えた変更をコピー＆ペーストするだけで、さっとUIを開発できます。

より忠実に、より機能的に

Reactコンポーネントを使ったデザインでは、デザイナーは最終製品の正確なレプリカを作ることができます。たとえば、機能する日付ピッカーを従来の画像ベースのデザインツールで作成することはできませんが、UXPin Merge を使用すると、日付ピッカー、チャート、データ テーブル、グラフなど、エンジニアがレポジトリに追加したあらゆる React コンポーネントでプロトタイプを作成できます。

定義されたインタラクション

インタラクションやアニメーションは、デザインプロジェクトに多大な時間を要し、デザイナーはプロジェクトごとにこれらのインタラクションを作り直さなければならず、エラーや矛盾が生じる可能性があります。

Mergeでは、プロダクションコードから生成された機能的およびインタラクティブな要素を使用してプロトタイプを作成でき、デザイナーは、プロップを使用して新しいインターフェースやコンポーネントに合わせてアニメーション設定の変更ができます。

デザインシステムにアニメーションを組み込むことで、デザイナーはインタラクションの矛盾をなくしつつ、プロトタイピングの時間を短縮できます。

Storybookを使ったその他のフロントエンドフレームワーク

Mergeを使うと、React でのデザインだけにとどまらず、当社の Storybook 統合により、Vue、Ember、AngularJS、Web Components などの他の一般的なフロントエンドフレームワークを同期することができます。

Reactコンポーネントと全く同じようにStorybookコンポーネントを使用して、忠実度の高いプロトタイプのデザインができます。プロップの代わりにStorybook Argsを使用して、UXPinのプロパティ、スロット、スタイル、入力などを変更します。

コードを使ったデザイン

プロトタイピングとテストの強化に向けて、きちんと機能するReactやStorybookコンポーネントを使ったデザインを始める準備はできましたか？ここでは、開始法を2つご紹介します。

1. 14日間の無料トライアルにサインアップすると、MUIのReactコンポーネントライブラリを使用してUIをデザインするためのMUI統合にアクセスできるようになります。
2. または、Mergeページで、ReactのGit統合、またはその他の一般的な技術用の Storybookへのアクセスをリクエストすることもできます。サポートチームのメンバーが、オンボーディングプロセスのお手伝いのご連絡を差し上げます。

The post React Native と ReactJS – それぞれの違い appeared first on Studio by UXPin.

マイクロインタラクションは、強化とフィードバックによってユーザーエクスペリエンスを向上させます。マイクロインタラクションがなければ、ユーザーインターフェースは退屈で活気のないものになってしまいます。

好むと好まざるとにかかわらず、デジタル製品は人間の心理を利用しています。チャットやソーシャルメディアのアプリで「入力中…」と点滅しているのを見ると、その人が何を言おうとしているのか気になってしまいます。

このようなマイクロインタラクションは、ユーザーを引きつけ、製品を使い続けたり、購入したり、ポジティブなブランド体験を共有したりする可能性を高めます。

一方で、マイクロインタラクションは、ユーザーがユーザーフローを完了するのを妨げ、結果的にネガティブな体験をもたらします。

適切なバランスを見つけるには、UXチームがユーザビリティスタディや関係者からのフィードバックを通じて、エンドユーザーとともに忠実度の高いプロトタイプをテストすることが重要です。

UXPin Mergeを使用すると、GitリポジトリやStorybookから完全にインタラクティブなコンポーネントを使用して、UXデザイナーがハイフィデリティ・プロトタイプを作成でき、インタラクションの追加プロセスをスピードアップできます。コードベースのプロトタイプを使用することで、UXチームは最終製品で使用されるマイクロインタラクションを正確にテストすることができます。UXPinを使った高度なプロトタイピングを体験するには、今すぐ無料トライアルをご利用ください。

マイクロインタラクションとは？

マイクロインタラクションは、システムやユーザーからのトリガーに基づいて、フィードバックを提供します。このフィードバックは、タスクが完了したことをユーザーに知らせたり、アクションが必要なときにユーザーに警告したりします。

マイクロインタラクションは、トリガーとフィードバックのペアで動作します。最初にトリガーがあり、次に確認のためのフィードバックがある：

• トリガー：ユーザーのアクションまたはシステムの状態変化
• フィードバック：ユーザーインターフェースへの視覚、聴覚、触覚の変化

私たちが毎日無意識に使っているマイクロインタラクションの優れた例として、プレビュー通知をスワイプで消すことが挙げられます。携帯電話を使用中に通知を受け取った場合、よくスワイプすると、通知のポップアップが画面からスライドして消えます。

上記の例では、マイクロインタラクションのトリガー-フィードバックを次のように定義することができます：

• トリガー：ユーザーが通知のポップアップをスワイプする
• フィードバック：通知が画面から消える

ポップアップで表示される通知もマイクロインタラクションです。

• トリガー：システムが通知を受け取る
• フィードバック：通知ポップアップのアニメーション

通知ポップアップは、複数の目的を果たすマイクロインタラクションの素晴らしい例です：

• ヘルプ：ユーザーに新しいメッセージを通知する
• マーケティング：通知を送信した製品の使用をユーザーに勧める

マイクロインタラクションの4つのステージ

ユーザーにとって、マイクロインタラクションはトリガー・フィードバックとして起こります。しかし、UXチームやエンジニアが知っているように、舞台裏ではさらに多くのことが行われています。すべてのマイクロインタラクションには、4つのステージまたはステップがあります。：

• トリガー：ユーザーのアクションまたはシステムの状態変化
• 条件：どのようなマイクロインタラクションがトリガーされるかを定義するシステムルール
• フィードバック：ユーザーインターフェースへの視覚、聴覚、触覚の変化
• モード：マイクロインタラクションが完了した後に起こること-ステートまたはUIの変更

UXPinは、クリック/タップ、マウスアクション、ジェスチャーなど、様々なユーザートリガーをUXデザイナーに提供します。また、プロトタイプの次のアクション（マイクロインタラクションを含む）に対して「if-then」条件を設定することができます。これは、Javascriptの関数を実行するのと同様です。

実際にお試しください。UXPinの無料トライアルにサインアップして、世界で最も先進的なプロトタイピングツールで遊んでみてください。

なぜマイクロインタラクションが重要なのか？

マイクロインタラクションは、ブランドがユーザーとコミュニケーションをとることを可能にし、わかりやすさ、次のアクション、ブランドエンゲージメントなどを提供します。

わかりやすさとシステムフィードバックの提供

例えば、Instagramのフィードを下に引っ張ると（ほとんどのアプリで）、上部にローディングアニメーションが表示され、システムがフィードを更新するために働いていることを示します。

このマイクロインタラクションがなければ、ユーザーは、システムが A.自分のアクションに応じたのか、B.タスクを完了したのかを知ることができません。

アクションを起こす

マイクロインタラクションは、ユーザーにアクションを起こさせるのにも役立ちます。最も一般的なものは、Eコマースで見られる「カートに入れる」というマイクロインタラクションです。

買い物客が商品をカートに入れると、ヘッダーにあるカートのアイコンが揺れたり、色が変わったりします。場合によっては、画面の横からカートがスライドしてきて、ユーザーにチェックアウトを促すこともあります。

ブランディング

マイクロインタラクションは、ユーザーにポジティブな印象を与えたり、楽しいアニメーションを提供することで、ブランド体験を向上させます。

例えば、DuckDuckGoのアプリを使用したことがある人は、「すべてのタブとデータを消去」をクリックすると、ブラウザが閲覧履歴を消去したことを示す炎が表示されます。

このマイクロインタラクションは、DuckDuckGoがユーザーにブラウジングのプライバシーを提供し、トラッキングクッキーをブロックすることを約束するものです。

マイクロインタラクションの重要性を示すその他の例

• ナビゲーションとユーザーフローの改善
• 特に新しいユーザーに対して、指示を与える。
• ユーザーのエラーを示す、または防止する（必須項目での入力不完全なフィールドに赤でハイライトするなど
• エンゲージメントや共有を促進する

マイクロインタラクションの例

マイクロインタラクションには無限の可能性があります。UXデザイナーはしばしば、マイクロインタラクションで創造性を発揮して楽しんでいます。

ここでは、マイクロインタラクションの最も一般的な例と、それらがどのようにユーザーエクスペリエンスを向上させるかをご紹介します。

マウスホバーエフェクト

マウスのホバー効果は、デスクトップユーザーにとって最も一般的なマイクロインタラクションの一つです。これらのマイクロインタラクションは、ツールチップを使って分かりやすくしたり、カーソルを変えてクリック可能な要素を示したりすることができます。

また、ホバーによるマイクロインタラクションは、画像カルーセルの開始／停止や、ビデオのプレビューを可能にし、ユーザーが画面を「ブラウズ」してからどこをクリックするかを決めることができます。

クリック/タップエフェクト

ほとんどのインタラクションは、ユーザーが画面上の要素をクリックしたりタップしたりすることで発生します。クリック／タップによるインタラクションには、無限のマイクロインタラクションと可能性がありますが、ほとんどの場合、製品やウェブサイトをナビゲートする方法を提供しています。

クリック/タップアクションは、ボタンを押すエフェクトのように、要素上のマイクロインタラクションをトリガーし、ユーザーが別の画面に移動したことを示すために、ページのスライドトランジションをトリガーすることがあります。

タップ／クリック／ホールドエフェクト

タップ＆ホールドのマイクロインタラクションは、ドロップダウンメニューに代わる優れた機能で、特にスクリーンスペースが限られたモバイルデバイスでは有効です。ユーザーは要素をタップ＆ホールドすることで、より多くの選択肢を得ることができます。通常、何らかのマイクロインタラクションでポップアップを起動します。

Facebookの「いいね！」ボタンがその典型例です。デスクトップでは、「いいね！」ボタンの上にカーソルを置くと、より多くの投稿のリアクションを見ることができます。モバイルではマウスカーソルがないため、同じ機能を利用するには「いいね！」ボタンをタップ＆ホールドする必要があります。

ハプティック・フィードバック

最近のスマートフォンやゲーム機のコントローラーには、ユーザーやシステムの動作に対応した振動である「触覚フィードバック」が搭載されています。

ゲームでは、撃たれたり殴られたりするようなアクションシーンに触覚フィードバックがよく使われます。この振動により、ユーザーは画面上で起こっていることを聞いたり、見たり、感じたりすることができ、没入感を得ることができます。

スマートフォンで親指を使った生体認証を行った場合、認証に失敗すると親指の下にわずかな振動が伝わります。この触覚マイクロインタラクションは、親指の位置を変えて、もう一度やり直さなければならないことを知らせてくれます。

データ入力・進捗管理のためのマイクロインタラクション

マイクロインタラクションは、データの入力や進捗状況に非常に効果的です。よく、新しいパスワードを作成するときに、「弱い」から始まり、「強い」「非常に強い」へと進行していくプログレスバーが表示されます。

また、「サインアップ」や「確認」のボタンは、シェーディングされた暗い色/クリックできない状態にしておき、次に進むために十分な強度のパスワードを作成した後に点灯させることもできます。

フローの上部にプログレスバーを設置すると、ユーザーに確認ページまでの残り時間を知らせることができます。ユーザーが進むにつれて、バーがアニメーションしたり、色合いが変わったりして、完了を促すことができます。

スワイプ／スライドによるマイクロインタラクション

UXデザイナーは、移動やナビゲーションを示すためにスライドによるマイクロインタラクションをよく使います。これらのマイクロインタラクションはモバイルで最も効果的ですが、デスクトップ画面でも画像カルーセル、セールスファネル、チェックアウトフローなどで効果を発揮します。

モバイルデバイスでは、タップする代わりにスワイプすることで、よりスムーズで高速なナビゲーションが可能になります。スライドのマイクロインタラクションは、アクションに対応しているため、スワイプとの相性が良いです。

スライドマイクロインタラクションの優れた例として、出会い系アプリでの左右へのスワイプがあります。ユーザーがスワイプすると、マッチする可能性のある相手が画面外にスライドします。一致した場合、アプリは「It’s a Match」というマイクロインタラクションと、チャットを開始するためのボタンやリンクをユーザーに提供します。

システムフィードバック

マイクロインタラクションは、システムのフィードバックをユーザーに伝える上で重要な役割を果たします。回転するローディングアイコンは、最も一般的なシステムマイクロインタラクションです。これらのマイクロインタラクションは、アプリやウェブサイトのロード中にユーザーに待つことを知らせます。

回転するアイコンがないと、ユーザーはアプリがクラッシュしたと思ってしまうかもしれませんし、クリックやタップを続けてしまい、結果的に複数のサーバーリクエストが発生してしまうかもしれません。

メッセージの通知も、システムのフィードバックの好例です。アプリは（他のユーザーから）新しいメッセージを受け取り、アプリを開くように警告します。

まとめ

マイクロインタラクションの重要性と、それを利用してユーザーエクスペリエンスを向上させる方法をご紹介しました。何事も「過ぎたるは及ばざるが如し」です。マイクロインタラクションを使いすぎたり、無駄に長いアニメーションを作ってユーザーの動きを遅くしたりしないようにしましょう。

UXデザイナーは、ユーザビリティスタディからのフィードバックをもとに、ユーザーがナビゲーションのためにマイクロインタラクションを必要としている箇所や、強力なパスワードの作成など重要な指示を見逃していないかを判断する必要があります。

UXPinプロトタイプ：マイクロインタラクションの作成

UXPinは、UXデザイナーがハイフィデリティ・プロトタイプのための没入型ユーザー体験を作成するためのトリガー、条件、およびインタラクションを提供します。

また、変数を作成してマイクロインタラクションをパーソナライズすることもできます。例えば、サインアップフォームからユーザーの名前を取得し、ユーザーがサインインに成功したときのウェルカムアニメーションをパーソナライズすることができます。

また、ページ遷移の有効化、要素の表示/非表示、トグル、状態の設定、APIリクエストの作成など、様々な機能があります。UXPinは、UXチームが完全に機能するハイフィデリティ・プロトタイプを構築して創造性を発揮するためのツールと柔軟性を提供します。UXPinで次のプロトタイプのデザインを始めましょう。世界で最も先進的なコードベースのデザインツールを使ったプロトタイピングのパワーを体験していただくために、14日間の無料トライアルをご用意しています。

The post プロトタイプを改善するパワフルな マイクロインタラクション appeared first on Studio by UXPin.

UXデザイン と UIデザイン がUXの世界で最もよく議論されることの一つです。その違いと共通点はどこにあるのでしょうか？UXデザイナーとUIデザイナーはどちらが必要なのでしょうか？誰が何をするのか？両者は分離すべきなのか？両者はどのように連携するのでしょうか？

このような混乱が生じるのは、ほとんどの教育機関がユーザーインターフェースデザインをUXデザインカリキュラムの一部として教えているからです。UIはユーザーエクスペリエンスの一部であり、なぜ両者を分けるのでしょうか？

中小企業やスタートアップ企業では、UIはUXの傘下に入ります。しかし、組織や製品の規模が大きくなると、ユーザーエクスペリエンス部門は、UXデザイナー、UIデザイナー、リサーチャー、ライター、UXアーキテクト、リサーチオプス、デザインオプス、その他のUXスペシャリストに分かれます。

これらの役割は分かれていますが、いずれも素晴らしいカスタマーエクスペリエンスを実現するために、ユーザー中心のデザインを重視しています。そのためにUXチームは予算、製品、技術的な制約の中で、ユーザーの問題を解決するために協力し合わなければなりません。

UXPinは、UXチーム、プロダクトデザイナー、エンジニア、その他のステークホルダーを含む組織全体の強力なコミュニケーションを促進するコラボレーションデザインツールです。

チームはUXPinのコメント機能を使って、プライベートまたはパブリックなコメントを作成したり、人にタグを付けたり、タスクを割り当てたりして、UXPinを通じてコミュニケーションをとることができます。UXPinを14日間お試しいただき、ユーザーエクスペリエンスデザインを強化するために作られたコラボレーションデザインツールをご確認ください。

ユーザー中心のデザインとは？

ユーザー中心設計とは、UXとUIを結びつける接着剤のようなものです。UXデザイナーとUIデザイナーが効果的に仕事をするためには、ユーザー中心設計のアプローチを用いなければなりません。

ユーザー中心設計とは、お客様を中心にしてデジタル製品を設計するプロセスのことです。この言葉は、アップル社の元社員でニールセン・ノーマン・グループの創設者であるドン・ノーマンが1986年に発表した著書”User-Centered System Design: New Perspectives on Human-computer Interaction “の中で、この言葉を使っています。

その中で彼はこう書いています。「人間は適応能力が高いので、人工物への適応という負担をすべて背負うことができるが、熟練したデザイナーは、人工物をユーザーに適応させることで、この負担の大部分を消滅させることができる」。

ドンが言いたいのは、ユーザーエクスペリエンスデザイナー（UX＆UI）の仕事は、A）人間の問題を解決し、B）ユーザーの制限をなくすように製品を適応させることだということです。

UX デザイン とは？

UXデザインとはユーザーインターフェースを含む、より広範なユーザー体験と、製品に触れたときのユーザーの感じ方を包含するものです。UXデザイナーは製品の体験を最適化し、より楽しく使いやすいものにするために、ナビゲーションやユーザーフローにも重点を置きます。

UXデザイナーの責務

• 製品構造：ナビゲーション、ユーザージャーニー、フロー

• リサーチ：ユーザー、競合他社、市場の分析

• テスト：ローフィデリティおよびハイフィデリティ・プロトタイピング

• デザイン：ワイヤーフレーム、ヒエラルキー、コンテンツレイアウト

UXデザイナーの資質とスキルセット

• クリティカルシンカー
• 問題解決能力
• データや分析に興味がある
• 構造に興味がある
• 機能的なデザイン
• プロジェクトマネジメント

UIデザイン とは？

ユーザーインターフェースデザイナーは、デジタル製品やWebサイトでユーザーが操作するボタン、色、アイコン、タイポグラフィー、画像、フォーム、その他の要素やコンポーネントなどの視覚的要素を作成します。

また、アニメーションやマイクロインタラクションなどのインタラクティビティにも関心があります。

基本的に、UIデザインはユーザーエクスペリエンスデザインの中の専門的なポジションです。

UIデザイナーの責任

• 製品の美学：ブランディング、ビジュアルデザイン

• リサーチ：デザインリサーチ、ユーザー分析

• テスト: UIプロトタイピング（ハイフィデリティ・プロトタイピング）

• デザイン：モックアップ、インタラクションデザイン、アニメーション、ビューポートレイアウト(レスポンシブデザイン)

UIデザイナーの資質とスキルセット

• ビジュアル・クリエイティブ
• グラフィックデザイン
• ビジュアルデザインに興味がある
• 美意識が高い
• 形と機能のバランスをとる
• ユーザーのインタラクションや行動を考慮する
• タスクオリエンテッド

UXデザインと UIデザイン の違い

責任の所在からわかるように、UIデザイナーは美的感覚とインタラクティビティを重視し、UXデザイナーは全体的な体験、構造、ナビゲーションを重視します。

UXデザイナーは製品の体験を幅広く見ますが、UIデザイナーは各画面で何が起こっているかに注目します。

UXデザイナーは通常、リサーチを深く掘り下げ、ユーザーを超えて競合他社や市場分析にまで目を向けます。UIデザイナーは、ビジュアルデザインのトレンドを研究しながら、ユーザーの研究も行います。

ここでは、デザイン思考プロセスにおけるUXデザインとUIデザインの主な違いをご紹介します。

共感する

• UXデザイナー：ユーザーのペインポイント、ニーズ、エモーションに焦点を当てる。
• UIデザイナー：ユーザーの環境や動き、行動に着目する

定義

• UXデザイナー：ユーザーの問題と達成しようとする目標を定義する
• UIデザイナー：ユーザーが目標を達成するために必要な各ステップに焦点を当てる

アイデアを出す

• UXデザイナー：ユーザーの問題を解決するための情報アーキテクチャとナビゲーションを検討します。
• UIデザイナー：ユーザーが製品を操作する際に必要となる要素やコンポーネントを検討します。

プロトタイプ

• UXデザイナー：ワイヤーフレーム、ローフィデリティ、ハイフィデリティのプロトタイピングを用いて、ページの階層やユーザーフローを設計します。
• UIデザイナー：忠実度の高いプロトタイプのためのモックアップとインタラクティビティをデザインする

テスト

• UXデザイナー：全体的なユーザーエクスペリエンスをテストし、ユーザーが製品を使用する際にどのように考え、どのように感じるかを知りたいと考えます。
• UIデザイナー：ユーザーが製品をどのように操作するかをテストし、実用的な質問を投げかける

UXデザインと UIデザイン の共通点

UXデザイナーとUIデザイナーは、どちらもユーザー中心のデザインを重視し、UXデザイン思考の原則に従っています。UXデザイナーはユーザーの目標を定義し、UIデザイナーはユーザーがその目標を達成するのを支援します。UXデザイナーはユーザーのゴールを定義し、UIデザイナーはそのゴールを達成するための手助けをします。

UIとUXを2つの独立した部門ではなく、1つの組織として捉えることが重要です。どちらもユーザーエクスペリエンスデザイナーであり、UXデザインの中で異なるタスクに焦点を当てているだけなのです。

もしデザイナーがどちらかのタスクをうまく実行できなければ、他方のタスクがどんなに優れていても、ユーザーエクスペリエンスと製品全体が失敗してしまいます。

UXデザイナーとUIデザイナーは、どちらもアクセシビリティを考慮しなければなりません。UXデザイナーは、レイアウト、階層、配置など、製品の使いやすさを重視し、UIデザイナーは、色、フォント、サイズ、インタラクションなど、ユーザーインターフェースのアクセシビリティを重視します。

プロダクトデザインのプロセスにおけるUXとUI

ここでは、典型的なプロダクトデザインのシナリオと、UXとUIの役割分担をご紹介します。

1. UXデザイナー／UXリサーチャーは、ユーザー、市場、競合他社の調査を行います。
2. UXデザイナーは、プロダクトマネージャーやステークホルダーと協力して、製品や予算の制約の中でアイデアを開発する。
3. UXデザイナーは、情報アーキテクチャ、初期スケッチ、ワイヤーフレーム、ローフィデリティ・プロトタイプを作成します。
4. UXデザイナー/リサーチャーは、ナビゲーションやユーザーフローを改善するための初期テストを行います。
5. UIデザイナーは、色、アイコン、ボタン、タイポグラフィを使ってワイヤーフレームをモックアップに変換します。
6. UIデザイナーは、インタラクティブな機能を追加して、忠実度の高いプロトタイプを作成します。
7. UXリサーチャーはハイフィデリティプロトタイプをテストし、UX/UIデザイナーに変更を依頼し、反復作業を行います。

デザインチームは、デザインハンドオフの際にエンジニアと協力し、開発プロセスを開始します。

この例は、決して「業界標準」のアプローチではありません。UXデザイナーとUIデザイナーは、デザインプロセスを通じて密接に連携します。

UXデザインは常にユーザーインターフェースデザインに先行します。製品のインターフェイスをデザインするには、それを支える構造やアーキテクチャが必要です。

UXデザイナーは基礎を作り、UIデザイナーはインタラクションと美観を重視します。これらの作業を行うためには、どちらのデザイナーもユーザーのニーズを意識して、楽しいユーザー体験を生み出す必要があります。

UXとUIの デザイン ツール

UXデザイナーとUIデザイナーは通常、同じデザインツールを使用しますが、タスクや目的は異なります。

UXデザイナーは、ワイヤーフレームを作成し、各画面を基本的なクリック／タップ操作でリンクさせ、ローフィデリティのプロトタイプを作成します。UXデザイナーは、グリッドシステムを使って各ページの構造を構築し、ナビゲーションを組み込みます。

ワイヤーフレームが完成したら、UIデザイナーは色、インタラクティブ性、ページトランジション、アニメーション、タイポグラフィなどを追加し、忠実度の高いプロトタイプを作成します。

UXPinがUX/UIデザイナーのスピードと一貫性を高める方法

UXPinは、UXデザイナーとUIデザイナーが協力して、ワイヤーフレームからプロトタイプ、そして最終的なデザインに至るまで、お客様に素晴らしい製品を提供するためのエンドツーエンドのユーザーエクスペリエンスデザインツールです。

1. UXデザイナーは、内蔵のデザインライブラリを使用して忠実度の高いワイヤーフレームを設計することができ、UIデザイナーや関係者は画面のレイアウトやフローをより深く理解することができます。
2. UXデザイナーは、試行錯誤されたビルトインのデザインライブラリを使用することで、初期のテストにおいてユーザビリティスタディや関係者から有意義なフィードバックを得ることができます。
3. ほとんどの作業が完了しているため、UIデザイナーはブランディングや製品の要件に合わせてデザイン要素を洗練させ、すぐにテストを開始することができます。
4. UXPinのコードベースのデザインツールを使えば、UIデザイナーは高度なインタラクションやアニメーションで製品に命を吹き込むことができます。また、条件付きインタラクションを使用して最終製品の機能を模倣することで、ユーザビリティテストでより良い結果とフィードバックを得ることができます。

コミュニケーションとコラボレーションの向上

製品チーム、開発者、その他の関係者を招待し、ブラウザ上でプロトタイプをプレビューしてもらうことができます。UXPinのコメント機能を使ってフィードバックを残したり、UXデザイナーやUIデザイナーにタスクを割り当てたりすることができます。

UXPinを実際に試してみませんか？14日間の無料トライアルにお申し込みいただくと、ユーザーエクスペリエンスを向上させるために構築された、コードベースのコラボレーションデザインツールをご覧いただけます。

The post UXデザイン vs UIデザイン その違いを把握しよう appeared first on Studio by UXPin.

トレンドは繰り返されるものです。例えば１９７０ 年代のファッションが１９５０年代のものから影響を受けたように、流行のサイクルは２０年周期で繰り返されると言われています。とはいえ、このデザインの流行サイクルはファッションに限ったことではなく、Webサイトデザインなどの他分野でも見受けられます。

近年、www（ワールド・ワイド・ウェブ）の黎明期を彷彿とさせるデザインを目にすることが多くなりました。そこで本記事では、９０年代にあったWebサイトのデザインの特徴について見ていき、代表例をご紹介します。令和のいま、デザインに９０年代の「っぽい」テイストを取り入れたいと思う方、本記事をこのまま読み進めていきましょう。

UXPinを使って、Webサイトやアプリのリアルなプロトタイプを作成してみましょう。UXPinの高機能（変数（variables）、ステート、Expressionなど）を使うことで、プロトタイプを最終製品のように動作できます。無料トライアルにサインアップしてぜひプロトタイピングをご体験ください。

 ９０年代 Webサイトの主な特徴

www（ワールド・ワイド・ウェブ）の黎明期は象徴的ではありましたが、今日のインターネット体験ほど便利なものではありませんでした。これを紐解いてみると、そもそもこの当時のWebサイトデザインは、人々から注目を集め、面白みを感じさせるデザインが “ミューズ”（インスピレーションの源）として使用されることを目的としていたからです。

レトロな感じと技術の進歩がほどよくミックスされることで、美しく機能的なウェブサイトが実現しますね。

パターン化された背景

９０年代には様々なものがありましたが、そのほとんどがシンプルなデザインではありませんでした。特にWebサイトの背景デザインにおいては、明るい色と模様が定番でした。星空、メタルスタッズ、鮮やかな幾何学模様、繰り返されるロゴなど目を引くような大胆なデザインが多くありました。

このような盛りだくさんな要素のデザインでは、Webサイトのデザインを使いやすくさせたいとしても、無理があるように思われるかもしれません。しかし、背景のデザインがWebページ上の他の要素を打ち消してしまっていても、結局のところ人間の脳は柄や模様などの「パターン」を好む傾向があるのです。パターンは自然界でよく見られる視覚刺激の一種であり、繰り返しのパターンを見るとストレスが軽減されるという研究結果もあります。

では、 ９０年代 テイストのWebサイトの背景を自分たちで作るにはどうすればいいのでしょうか？方法はいくつかありますが、「繰り返しパターン　無料」で検索してみるのが一番簡単に始められるでしょう。

気に入ったものがあれば保存して、なければ Pixabayのような画像サイトを活用して探してみましょう。「繰り返しパターン」と検索すれば、何百種類もの画像が見つかると思いますが、いい画像が見つからない場合は、自分でデザインを作成したり、デザイナーにお願いしてみても良いでしょう。

そして、 ９０年代 感をさらに楽しむには、背景にアニメーションを取り入れてみるといいでしょう。Textures Townのようなサイトでは、さまざまなテーマに合う3Dアニメーションデザインが提供されており、サイト自体もレトロな感じなのでインスピレーションが得られると思います。

ナビゲーション

今日、Webサイトのナビゲーションは、UX（ユーザーエクスペリエンス）および「アテンション」や「リテンション」において重要な要素ですが、昔からそうだったわけではありません。むしろ９０年代のWebサイトでは、明確なカテゴリーを持たないリンクやオプションで溢れていました。

このナビゲーションスタイルの例として、世界最古の検索エンジンである AliWebがあります。このサイトのナビゲーションは、Googleのような検索エンジンのナビゲーションとは違い「積み重ね式」になっていることがわかります。（下画像参照）

サブ・ナビゲーション・システム（一般には「ドロップダウンメニュー」と呼ばれる）は、９０年代後半から２０００年代前半あたりで出てきたこともあり、９０年代を象徴する Webサイトには、リンクのリストやアイコン、フラッシュアニメーションが使用されていました。そのため、現在の「ユーザーフレンドリーなナビゲーション」と「９０年代のナビゲーション」は、相反するものではありません。

オプションの見つかりやすさが Webサイトのメニュー項目の順番に左右されることはほとんどありませんが、メニューオプションが１０個以下である場合が最も良い結果をもたらすという調査があります。これは、９０年代にデザインされたメニューオプションを適切なバランスで配置することで、機能的かつ洗練されたものになるということを示唆しています。

クリック可能なアイコン

今はメニューアイコンやバナーは、ほとんどのウェブページのテンプレートでよく見かけますよね。このようなシンプルなナビゲーションツールは、書かれているフレーズなどで訪問者をサイト内に誘導しますが、実は以前まではアイコンの方が好まれていました。初期の Webサイトでは、均一なテキストでリンクを並べる代わりに、画像にリンクを埋め込むことで、クリエイティブな印象を持ち、人々の興味を引いたのです。

現在の Webページの構造を簡素化にするために使われている CSS（カスケーディング・スタイル・シート）は、９０年代には利用できませんでした。そのため、アイコンを使用することで、識別しやすく簡略化されたスタイリッシュなナビゲーションを提供しました。場合によっては、背景と相互作用しているかのように、背景に合わせて配置されたり、逆に背景とは対照的に配置されることもありました。

例えば「Apple」は、うまく配置された画像アイコンの有効性を示すいい例です。現在、Appleでの時計、電卓、メモ帳機能に使われているアイコンは使いやすいデザインのため、今でも当時の形をが残されたデザインとなっています。

明るく、大胆で、箱型のアイコンは、実際の９０年代の Web サイトデザインのスタイルに最も近いかもしれませんが、このような形のナビゲーションも、現代のスタイルに合わせてデザインすることもできますね。

アニメーション

９０年代の Webサイトデザインにおいて最も記憶に残って、夢中になったのはアニメーションの存在です。ハートの軌跡を描くカーソル、流れ星、魚が泳ぐアニメーションなど多くの空想的なアニメーションを使用し、Webページ上に動きをつけることができるようになりました。

当時はまだアニメーションのためのツールがあまりない時代でしたが、最新かつ利用しやすいものとしてFlashがよく使われていました。また、アニメーションは、主にマウスの動きやクリック可能なアイコンに組み込まれるのが一般的でしたが、背景の一部でも使用されることがありました。

アニメーションの目的は、訪れる人にとってWebサイト操作での「ワクワク感」であり、初期のデザイナーはそれを見抜いていました。 人間の目は、動きに引き寄せられるものことです。

デザインや人々の好みは年月経て変化しているかもしれませんが、目や知覚は変わらないため、アニメーションは現在でも多くの人たちに使われています。

 ９０年代 のカラーパレット

歴史上で、その時代に流行った色がファッションや家具などあらゆるところで広く使われていましたが、９０年代もその１つと言えるでしょう。９０年代のカラーパレット、特に Webサイトに登場したカラーパレットは、主に以下の２つのグループに分けられます。

メンフィス・スタイル

９０年代に見られた明るい色のデザインは、「メンフィス・スタイル」と呼ばれるカテゴリーに分類されます。これには大胆な原色、パステルカラー、ネオンカラーが含まれ、黒や白とのコントラストでよく使われました。また、幾何学的な形がメンフィス・デザインによく取り入れられ、主に「視覚的にコントラストを生み出すこと」に重きが置かれていました。

このスタイル自体は８０年代に誕生し、当時のファッションにおいても顕著に見られます。また、９０年代の多くの Webデザイナーにインスピレーションを与えたうえに、今でもたまにデザインで用いられることがあります。

グランジ・スタイル

９０年代の Webデザインの暗めの色のデザインは、「グランジ・スタイル」として知られるカラーパレットに分類されます。メンフィスとは対照的に、グランジはニュートラルでダークな印象を持ち、黒、グレー、茶色、ベージュなどの暗めな色がデザインの中心でした。また、このスタイルは、グランジ・バンドとしても知られる、新進気鋭のオルタナティブ・ロックシーンからインスピレーションを受けたものです。

この２つのスタイルは相反するもののように感じるかもしれませんが、９０年代のあらゆるカラーパレットにインスパイアされたユニークのあるデザインを作る上で色々と交ぜることができます。大胆な色と落ち着いた形を混ぜ合わせたり、幾何学的な面を持つ奇抜で斬新なブルータルなデザインを用いることで、メンフィスとグランジは９０年代スタイルのスペクトルを作り出すことができます。

フォント

９０年代のWebサイトデザインの特徴からわかるように、フォントのスタイルにおいてもシンプルなデザインではなかったと言えます。フォントももう一つのアートのように使われ、サイトのカラーパレットに関係なく太字にされる傾向がありました。また、丸みを帯びたものや角ばっているもの、ブラシをかけたようなフォントはタイトルによく使われ、小さなテキストでは Comic Sans のような遊び心のあるフォントが好まれました。

色、アニメーション、フォントの理想的な組み合わせを見つけるのは大変に思えますが、高機能なプロトタイプがあれば、９０年代の要素を取り入れたアイデアを再現することができます。UXPinを使えば、その時代を連想させる Webデザイン作成に取り組むことができ、細部まで９０年代のノスタルジーな感じも再現可能です。また、最終製品のように動作するインタラクティブなプロトタイプによって、９０年代風のアニメーションを含むデザインをテストできます。

気になった方は、UXPinの無料トライアルをぜひお試しください。

 ９０年代 の Web サイトの事例

内容についてお話するのもいいですが、やはりデザインのインスピレーションには視覚的な部分が大事ですよね。ここからは、９０年代の”アイコニック”なWebサイトの事例を２つ紹介します。

NASA

科学技術の最前線にいるNASAは、関連情報が一元化された Web ページを象徴的な方法で作る必要がありました。１９９４年に制作された最初の Webページは、質感のあるグレーの背景で構成され、ナビゲーション用のボタンはカラフルですが、粒状の画像がくすんだ感じの背景に映えていました。

画面全体に施されたドロップシャドウと浮き出し模様のようなロゴ（エンボス）で、このWebページは９０年代当時としてはモダンなデザインとなっています。そして注目すべきなのは、このデザインによって、学生、教育者、科学者が NASA のあらゆることを一箇所で参照できるようになったことです。

Lego

Legoのカラフルでクリエイティブな性質は、９０年代のデザインのトレンドにぴったりでした。１９９６年に最初のサイトが公開されたとき、レゴがちりばめられた背景で質感が表現されており、レゴの人物のアイコンの多くがアニメーション化されるなど、動きも取り入れられていました。

また、レゴのページのアイコンはピクセル化されていたかもしれませんが、オーディエンスはWebデザインに施された色が持つそのコントラストと創造性に釘付けになりました。

UXPinで ９０年代 のWebサイトをデザインしよう

９０年代のデザインの側面が現代文化にますます再ブームになっているため、当時のトレンドからデザインにおいてのインスピレーションを得て融合させることは新しいアイデアにもつながります。幸い、当時の Webデザインでの技術的な制限も今ではその障壁を乗り越えることができていますが、UXPinのような強力なプロトタイピングツールのおかげで、懐かしい感じのパターン、色、フォント、アニメーションを数回のクリックで試すことができます。

今日の「ユーザーフレンドリーな」デザインは、９０年代のアイデアや特徴とうまく融合させることができます。UXPinを使うと、プロトタイプの段階でも、細部までこだわった完全な機能を備えたWebデザインを実現可能です。

さっそく「レトロ」 × 「モダン」な UX / UIをつくってみませんか？

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

The post ９０年代 のWebサイト – 主な特徴のまとめ/事例紹介 appeared first on Studio by UXPin.

見た目の良いサイトや機能性の高いサイトもありますが、その両方を兼ね備えた魔法のようなインタラクティブなサイトもあります。

これらのサイトは、より深いレベルで私たちを惹きつけ、私たちの注意を引きつけ、私たちの想像力を定着させてくれます。私たちをその世界に引き込み、一瞬でも自分の世界を忘れさせてくれるのです。

この記事では、優れたデザインを持つ16のインタラクティブなウェブサイトを分析します。よりよいデザイナーになるために、これらのサイトからどのように学べばよいかを説明します。

インタラクティブ性と楽しさは、互いに影響しあっています。心理学者のEliot Aronson氏は、著書『The Social Animal』の中で、人は何かの作業を行う際に、その行為を頭の中で正当化する傾向があると説明しています。このことは、ユーザーが少しでも時間をかけてサイトを楽しむという自己実現の予言につながりやすいです。

これは必ずしもインタラクションに限ったものではありません。ビデオや心に響く映像など、感情を揺さぶるコンテンツでも同じ効果を得ることができます。この場合、コンテンツを見たり振り返ったりすることが、インタラクションでのユーザーの役割となります。このような体験は、映画を見たことがある人なら誰でも体験したことがあるように、没入感があり、同じようなつながりを形成することができます。

今年の新たなデザイントレンドにも注目していきましょう。

1. Nike Reactor

出典: Nike

まずはおなじみのNikeからご紹介します。このインタラクティブなウェブサイトでは、楽しくてシームレスなアニメーションと人目を引くビジュアルを使って、自分のReactランニングシューズを作ることができます。しかし、厳密な意味での靴作りではありません。ステッチや生地を選ぶ代わりに、シャボン玉、ストレスボール、スプリングなどを使うことができます。このような楽しいビジュアルを使用することで、ユーザーのエンゲージメントを高め、NikeのReactフットウェアが特別に快適であることをアピールしています。

出典: Nike

2. AirBnB Online Experiences

出典: AirBnB Online Experiences

人気の旅行サイトは、多くのリアルなインタラクションを伴わないインタラクティビティの完璧な例と言えるでしょう。AirBnBは、旅先で体験する日常の瞬間に潜む魔法を、注目を集めるさまざまな写真を通して描き出しています。 しかし、AirBnBのインタラクティブなウェブサイトは、従来の旅行サイトを超えて、他の人が主催するユニークなオンライン・インタラクションを提供しています。エキゾチックな場所へのツアーに参加したり、他のシェフから料理を習ったり、あるいはエスケープルームを解決したりと、これらのオンライン体験ができます。

3.  An Interesting Day

出典: An Interesting Day

このインタラクティブなウェブサイトは、最先端のグラフィックでなくても魅力的なデザインを作ることができることを示しています。「An Interesting Day」は、デジタルプロダクトスタジオ「Bakken & Bæck」がアムステルダムで開催した2018年のカンファレンスを記録したものです。すべてのアニメーションは手描きでシンプルに作られており、手作り感のあるサイトに仕上がっています。

出典: An Interesting Day

Webサイト全体が1つのページで構成されているため、ユーザーが必要とする情報をナビゲーションなしで得ることができます。

4. Chanel: Spring-Summer 2021 Haute Couture Show

出典: Chanel: Spring-Summer 2021 Haute Couture Show

シャネルは、雰囲気を作り出す方法をよく知っています。このサイトでは、動画、静止画、詩的な文章で書かれた商品説明が、インタラクティブなスクロールナビゲーションと一体となって、ブランドが誇るエレガンスとファッション性に満ちた環境にユーザーを没入させています。

5. Space Needle

出典: Space Needle

一般的にスクロールは、没入感のあるインタラクションのための優れた戦略です。シアトルを中心としたスペースニードルのサイトでは、美しいビジュアルと、スクロールで動くアニメーションのボックスでコンテンツを表示しています。ユーザーは通常、サイトを上方向にスクロールして詳細を確認することに慣れていませんが、このナビゲーションパターンは、画面上の旅にマッチしているため、この特殊な状況でも機能しています。

6. APPS

出典: APPS

APPSは、このリストの中で最もインタラクティブなサイトのひとつです。まず、サイダーの製造工程をガイドツアーで紹介します。数回ボタンを押すと、旅の続きをするように促されます。生き生きとした楽しいアニメーションと、ユーザーを飽きさせないインタラクティブな要素が特徴です。

7. Aquatic Macroinvertebrate Collection

出典: Aquatic Macroinvertebrate Collection

また、教育施設では、学習者の記憶に残りやすく、楽しみながら学習できるという価値を理解しています。「Aquatic Macroinvertebrate Collection」では、あまり知られていない生物を、体の各部分を拡大・縮小して説明文を読みながら観察することができます。それ自体は画期的なものではありませんが、何か新しいものを探求しているような不思議な気持ちにさせてくれます。インタラクティブなウェブサイトを作る際には、最高のデザインではなく、適切なデザインであることを忘れないでください。

8. The Happy Forecast

 出典: The Happy Forecast

私たちが好きなインタラクティブなウェブサイトの要素は、色の変化につながるホバーの状態や、インタラクティブ性を示すいくつかの動きです。美しい音楽とアニメーションは、感情的に没入し、魅力的な体験を生み出します。

9. Make Your Money Matter

 出典: Make Your Money Matter

私たちが好きなインタラクティブなウェブサイトの要素は、ストーリーを語り、ユーザーを教育的な旅へと誘うスクロール型のインタラクションです。スクロールするたびに、ストーリーの新しい部分が見えてきます。見事なイラストとアニメーションは、落ち着いたアースカラーのパレットで表現されています。

10. Mammut

 出典: Mammut 

山に登らずに山を登る。私たちが気に入っているインタラクティブなウェブサイトの要素は、ホームページ上で回転する360度のエベレスト山のアニメーションです。これは、奥行きを出すことでユーザーを引きつけます。また、スクロールすることで、インタラクティブでカスタマイズ可能な登山体験をユーザーに提供しています。

11. Hello Monday

 出典: Hello Monday

私たちのお気に入りのインタラクティブ要素は、ユーザーがメニューバーをクリックしたときに起こる水平方向のパララックス効果です。カーソルを置くとメニュー項目に動きが出るものや、2Dイラストのアニメーションなど、意外性のある要素が注目を集めています。

12. Ocean School

 出典: Ocean School

私たちが気に入っているインタラクティブなウェブサイトの要素には、ユーザーを海の奥深くへと誘うスクロール・インタラクションがあります。青と白のカラーパレットと3Dアニメーションは、アニメーションと色が変化するホバーの状態とともに、没入感のある体験を生み出しています。

13. Cyclemon

 出典: Cyclemon

私たちが気に入っているインタラクティブなウェブサイトの要素には、スクロールするインタラクションに垂直方向のパララックス効果があり、自転車のタイプによってユーザーが誰であるかを教えてくれます。大胆で楽しいカラーパレットは、それぞれのバイクタイプに合わせてカスタマイズされています。

14. Fontsmith

 出典: Fontsmith

私たちが気に入っているインタラクティブなウェブサイトの要素には、色や文字の大きさが変わる楽しいホバー状態があります。大胆でファンキーなカラーパレットは、最初からユーザーの注意を引きつけます。

15. Akita

 出典: Akita

イケアのお気に入りのインタラクティブなウェブサイト要素には、従来のトップダウンの方向性を覆すスクロールインタラクションがあり、インターネット上のデータの動きをグラフ化しています。また、ホバーするとポップアップで詳細情報が表示されます。

16. Pete Nottage

 出典: Pete Nottage

この声優さんのインタラクティブなウェブサイトは、ホバー・ステートや楽しいアニメーションを駆使して、印象に残るものになっています。

これらのインタラクティブなウェブサイトから学んだこと

私たちがこれらのインタラクティブなウェブサイトから見た最も一般的なインタラクティブ機能は、ホバー・ステートです。その理由は？幅広い業界で簡単に導入でき、気が散ることもありません。Ocean Schoolのようにシンプルなホバーやステートを試すこともできますし、Pete Nottageのようにアニメーションを使ったものにすることもできます。

スクロールインタラクションも、実装が簡単で、アニメーションを使わずに動きを表現できるため、人気のある要素です。Cyclemonのようにパララックス効果を利用したり、Akitaのようにストーリー性を持たせることもできます。ユーザーエクスペリエンスを向上させるために、これらのインタラクティブなウェブサイトでは、インタラクティブな機能やマイクロインタラクション以外にも様々な工夫がなされています。「Make Your Money Matter」のように楽しい配色を使ったり、「Fontsmith」のように感情を呼び起こして没入感を演出したりしている。また、MammutやHappy Forecastで使われているビデオやアニメーションは、ユーザーの注意を引く非常に深い映画のような体験を作り出すことができる。

インタラクションを促進し、エンゲージメントを高めるために、優れたインタラクティブサイトでは、一貫したデザインと、ストーリーテリングと優れたコピーライティングの組み合わせを用いて、好奇心を刺激し、エンゲージメントを獲得していました。インタラクティブな要素は、ただ目的のために使うべきではなく、その役割はユーザーの体験を高め、メッセージを伝えることにあります。

UXPinは、世界中の優秀なデザイナーが使用しているプラットフォームです。UX/UIプロジェクト全体をひとつのツールで管理することができます。デザインプロセスをシンプルにすることができます。UXPinを今すぐ完全なリスクフリーでお試しください。

The post 魅力的でインタラクティブなウェブサイト 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.

毎日何十億という人々が Webサイトを訪れていますが、そのWebサイトはどのように見えているのでしょう？また、デザイナーは人々がそのサイトにアクセスし、利用しやすくするにはどのような工夫をする必要があるのでしょうか？
この答えが 「 Webアクセシビリティ 」です。

コントラストチェッカー内蔵でWebアクセシビリティを考慮したデザインツール「UXPin」を使用してアクセシブルなプロトタイプを作ってみませんか？

無料トライアルでぜひ機能をお試しください。14日間の無料トライアルはこちら。

 Webアクセシビリティが重要な理由

  Webアクセシビリティとは、弱視、色覚障がい、視覚障がい、認知障がい、聴覚障がい、移動障がいをもつ人達にとっても利用しやすい Webサイトをデザインすることです。

 Webアクセシビリティ は、Webサイトをすべてのユーザーのニーズに対応させる点において重要です。 現在、世界には１０億人以上もの人々がなんらかの障がいを持ち、米国では６,１００万人が障がいと共に生活しています。アクセシビリティを念頭において Webサイトをデザインすることで、誰でも使いやすくなりますね。

アクセシブルな Webデザインは単なる「あったらいいな」ではなく、一部の国（米国、イスラエル、カナダ、英国など）では法律で義務付けられています。実際、米国では２０１９年だけで Webサイトアクセシビリティ訴訟が２,０００件も提起されているのです。 

調査によると、アクセシブルな Webサイトのデザインは、SEOのランキング上昇、顧客満足度やユーザビリティの向上、Webサイトのリーチ拡大をもたらすため、強力なビジネスケースがあることが分かりました。

POURとは？４つのウェブアクセシビリティにおける基準

W3C（World Wide Web Consortium）のWAI（Web Accessibility Initiative）が提唱する WCAG（Web Content Accessibility Guidelines）によれば、Webコンテンツでは４つの基準の頭文字をとった「POUR」が必須だといいます。

• Perceivable：知覚可能な情報
• Operable：操作しやすいUIとナビゲーション 
• Understandable：理解しやすい情報とUI
• Robust：堅牢なコンテンツと信頼できる解釈

以下でそれぞれの詳細をお話しします。

知覚可能な情報原則（Perceivable）

  情報とUIコンポーネントは、どんなユーザーでもさまざまな方法で理解できるように全て表示されないといけません。「見えない」、「わかりづらい」情報やUI要素はないようにしましょう。

この原則を満たすためにデザインで従うべきガイドライン：

• 画像やグラフィックなど、文字以外のすべてのコンテンツにおける代替テキスト。これにより、テキスト以外のコンテンツも、音声、点字、大きなフォントなど、他の形式に変換できることが保証される。
• ビデオやアニメーションのような時間ベースのメディアには、字幕やクローズドキャプションなどの代替手段を与える。
• 構造を損なうことなく、シンプルなレイアウトなど、さまざまな方法で表示できて適応性のあるコンテンツを作る。
• 前景と背景を区別して、ユーザーが見聞きしやすいようにシンプルなコンテンツにする。

操作可能なUIとナビゲーションの原則（Operable）

  この原則は、WebサイトのUIコンポーネントとナビゲーションがマウスなしで簡単に操作でき、ユーザーができないような操作を必要としないことが求められます。

Webデザインを操作可能にする方法：

• すべての機能をキーボードで操作できるようにする。
• ユーザーとコンテンツのインタラクションの時間を十分に設ける。
• 点滅要素など、発作を引き起こす可能性のあるコンテンツのデザインは避ける。
• 現在地の確認やサイトのナビゲーション、探しているコンテンツを見つける方法をユーザーに提供する。

分かりやすい情報とUIの原則（Understandable）

  サイトのUIが機能する仕組みや、サイトに表示される情報をユーザーが理解できるようにする必要があります。

構成するための方法：

• サイトの文章が、確実に読みやすくてわかりやすいものであるようにする。
• 予測可能な方法で機能する Webページを作成し、提示する。
• ユーザーが Webサイトの入力ミスを防いだり修正しやすいようにする。

堅牢なコンテンツと信頼できる解釈の原則（Robust）

堅牢なコンテンツとは、スクリーンリーダーなどの支援技術によって正確に解釈できるコンテンツのことです。支援機器の技術が進化していっても、コンテンツは引き続きそのような機器へアクセスでき、互換性がある必要があります。

ちなみに、WCGAの各原則には、A（最低評価）、AA（良好）、AAA（黄金比）のいずれかの成功評価があります。

「アクセシビリティな」Webサイトにするための工夫

 ここでは、アクセシビリティにするためにWebデザインに加えることができる工夫をいくつかご紹介します。

カラーコントラスト

  Webサイトをデザインする際は、背景色と前景のテキストに十分なコントラストがあることを確認しましょう。なお、カラーコントラストの原則は、ボタンや画像上のテキスト、その他の UI 要素にも適用されます。

色のコントラストで、ユーザーが Webサイトのコンテンツを読みやすいかどうかが大きく影響され、コントラストが低いと、弱視の人は読みづらくなります。

ちなみにWCAGによると、最低許容コントラスト比は３:１で、黄金比は７:１です。

UXPinには、デザインが WCAG基準を満たしていることを確認できるカラーコントラストチェッカーツールがあります。これによって、８タイプの色覚異常の人がデザインを見るのと同じ方法でデザインを見ることもできます。

W３Cによる色のコントラストがもたらす違いの例はこちら 。（英語の記事です）

代替テキスト

  各画像やグラフィックには、テキストを見るのと同じ意味を伝える説明的な代替テキストを用意しましょう。視覚に障がいがある人のためにスクリーンリーダーがこの代替テキストを読み取りますので、数値的な記述や意味を持たないものは使わないようにしましょう。

さらに、動画やオーディオ録音のような時間ベースのメディアには、クローズドキャプションと、目に見えるリンクのあるトランスクリプトをつけましょう。これはアイコン、ボタン、表、グラフにも適用されます。

その際、<alt> タグを使って代替テキストを表示したり、キャプションを使って字幕を提供するといいでしょう。

読みやすいコンテンツ

ユーザーは、主にテキストコンテンツを通して Webサイトと関わります。そのため、専門用語や一般的でない言葉を使わず、シンプルな言葉を使うことが重要になります。

Hemmingwayのアプリなどのツールを使って、Webサイトのコピーの読みやすさを判定するといいでしょう。

ヘッダタグを適切に使う

  ヘッダタグで、ユーザーはWebコンテンツにざっと目を通しやすくなり、さまざまな情報の重要性、関係、階層に関するシグナルがスクリーンリーダーにもたらされます。

<h1> から始め、タグを一貫して正しい順序で使いましょう。

W3C によるヘッダタグの正しい使い方はこちら。

「フォーカス」ステートのデザイン

フォーカスステートで、Tabキーを使ってウェブサイトを見ている人々が、サイトを利用する際に、サイト内で自分がどこにいるのかを簡単に把握できるようにします。この機能は、スクリーンリーダーや移動に制限のある人、パワーユーザーに使用されます。

メニュー項目、フォーム、リンク、ボタンには、それを目立たせるために、明確でコントラストの高いフォーカスインジケータを含ませましょう。

W3C による明確なフォーカスステートの例はこちら。  

エラー状態を考慮した便利なデザイン

ユーザーがエラーを起こした場合、状況に応じた情報を提供しましょう。また、エラーを修正する方法を説明し、投稿を取り消せるようにしましょう。

指示を明確に提示し、ユーザーのアクションが必要な場合は、それを目立つように表示させましょう。

W3C による識別しやすいエラー状態の例はこちら。  

フォームフィールドには全てラベルを付ける

各フォームフィールドの横には、説明を含めたラベルを付けるようにしましょう。また、プレースホルダーテキスト（入力欄の内側に表示される仮入れのテキスト）をフォームのラベルとして使うのは、内容が読みにくくなりやすいので避けましょう。プレースホルダーテキストは、テキストが消えた後にユーザーが何をすればいいのかわからなくなって混乱を招くことにもなりますからね。

フォームラベルは、スクリーンリーダーを使っている人がフォームを理解するのにも便利です。スクリーンリーダーは <label> としてタグ付けされた情報のみを読み、プレースホルダーのテキストはスキップしましょう。

W3C の明確なラベルを持つフォームはこちら。

点滅するUIアニメーションを使わない

１秒間に３回以上点滅するUIアニメーションは、人によっては発作や身体反応を引き起こす可能性があることからから、避けるのが一番です。

色だけでメッセージを伝えるのは避ける

  色はメッセージを伝える良い方法ですが、色盲の人もいるため、唯一の方法であってはいけません。代わりに、色や *（アスタリスク）など他の要素を使いましょう。また、グラフやその他の図表の場合は、ラベルと色を併用しましょう。

W3Cからのメッセージを伝えるための色と他の要素の使用はこちら。

読みやすいフォントを使う

読みやすいフォントサイズとスタイルを使いましょう。フォントの読みやすさは、多くの場合、タイプよりもスタイルによって決まり、原則として、草書体や装飾的なフォントは読みにくいです。読みやすさの向上には、行の長さを短く、行の高さを高くし、文字と文字の間のスペースを広くして、大きなテキストを使いましょう。

２０２０年以降発表された新たなアクセシビリティでの配慮

２０２０年にリリースされた WCAG 2.2

W3C（World Wide Web Consortium ） は２０２０年２月２７日、WCAG 2.2 の最初の草案を発表しました。このアップデートは、特にモバイル機器における障がいがある人たちに対する  Webアクセシビリティ をさらに改善することを目的としています。

WCAG 2.2 について把握しておくべきポイント：

• WCAG 2.0 および 2.1 に準拠しているため、Webサイトが 2.2 の基準を満たしていれば、以前のバージョンの基準を満たしていることになる。
• フォーカスエリアの大きさや色のコントラストなど、フォーカスが見える状態に関する新しい基準も含まれている。

重要性を増すVUIと音声インターフェースデザイン

Alexa、Siri、Amazon Echo のような音声制御デバイスを検索ニーズに使う人が増えるにつれ、音声インターフェースデザインの必要性が高まっています。

デザイナーが音声インターフェースデザインで「アクセシビリティ」において考慮するポイント：

• ユーザーに何ができるかを伝える
• ユーザーに自分が使っている機能を知らせる
• 選択肢を増やしすぎない
• 可能な限り視覚的なフィードバックを設ける

ADAを「完全に」または「100％」遵守しすぎない

  障がいを持つアメリカ人法（１９９０年）は、障がいがある人に対する差別を防止するために署名された法律です。ただこの法律は、 「 Webアクセシビリティ 」については明確に言及されていないため、さまざまな解釈が可能です。そのため、ADAが Webアクセシビリティ にどのように適用されるかが明確でないため、WebアクセシビリティにおいてはADAを完全に遵守することを約束しないほうがよいでしょう。  

アクセシビリティを考慮したプロトタイピング、デザイン、そして開発

  アクセシビリティWebデザインに完全に準拠するには、プロトタイプ、デザイン、開発に役立つ最高のツールが必要ですね。UXPinでは、WCAGに準拠しているかどうかを確認でき、デザインを簡単にハンドオフできるオールインワンのプラットフォームを提供します。
気になった方は、ぜひUXPinを14日間無料でお試しください〜！

The post 覚えておきたい Webアクセシビリティ 完全ガイド appeared first on Studio by UXPin.

UXデザインは、人間の心理を理解するプロセスです。 ユーザー中心設計やユーザーエクスペリエンスなどの用語がデザイン思考プロセスを支配するのはそのためです。

UXデザイン心理学とは、問題を解決しようとしている人々の行動を理解し、それらの人間の行動に合わせてユーザーエクスペリエンスを設計することです。

UXPinは、UX心理学とゲシュタルト視覚の原則に従ったすぐに使用できるプロトタイプの例もありますので、ぜひ実際にお試しください。

UXPinの14日間の無料トライアルにサインアップして、UXPinの革新的なデザインエディターと高度なプロトタイピング機能を探索し、顧客のユーザーエクスペリエンスを向上させましょう。

UXデザインにおける認知心理学とは？

認知心理学は、注意と知覚、記憶、問題解決、創造的思考など、人間の精神的プロセスを研究します。これは、ユーザーエクスペリエンスデザインの基盤となります。

優れたUXデザイナーは、これらの人間の精神的プロセスと、認知心理学が精神的障壁を克服して改善するのにどのように役立つかを理解しています。

• 使いやすさ
• ナビゲーション
• 読みやすさ
• アクセシビリティ

人間の脳は、デジタル製品を含む周囲の環境を理解するために、パターンや認識可能なオブジェクトを絶えず検索しています。

認知的負荷とUXデザイン

認知的負荷は、新しい情報を処理して学習するために必要な精神的な努力、つまり人間の処理能力です。

優れたUXデザインは、ユーザーインターフェースを最適化し、コンテンツを提示するための認知的負荷の限界を理解しているため、ユーザーは情報をすばやく吸収して処理できます。

デジタル製品の情報を吸収して処理するために必要な処理能力がユーザーの認知的負荷を超える場合、ユーザーはそれを使い続ける可能性は低くなります。

3種類の認知的負荷

3種類の認知的負荷と、それらがUXデザインにどのように影響するかを次に示します。

1. 本質的な認知的負荷は、タスクの固有の難しさに由来します。 ユーザーは、目前のタスクに集中しながら、どのように情報を吸収しますか？ 良い例はオンラインショッピングのチェックアウトです。 デザイナーはすべてのナビゲーションを削除し、ユーザーが購入を完了するために必要なコンテンツのみを提供します。 設計者は、固有の認知的負荷を軽減することにより、ユーザーが目前のタスクを完了する可能性を高めます。
2. 外部の認知的負荷は、脳がタスクの本質的でない問題（フォント、マイクロインタラクション、命令など）を処理する方法です。 フォントを読んだり、指示を理解したりするのに苦労しているユーザーは、UXでの無関係な認知的負荷を超える例です。
3. ゲルマンの認知的負荷は、スキーマの処理、構築、および自動化です。 ユーザーが情報のカテゴリと関係を整理する方法。 何か新しいことを学ぶとき、人間の脳はスキーマを構築するためにコンテンツのなじみを探します。

ゲシュタルトの原則とビジュアルデザイン

ゲシュタルトの原則は、人間の脳が視覚を認識して見慣れた構造を作成する方法を説明しています。

ゲシュタルト心理学の有名な例は、19世紀後半のイギリスの漫画家による若い女性または老婆のイラストです。 この「ゲシュタルトスイッチ」は、心がキャンバス上の要素をどのように解釈するか、そしてこれがビジュアルデザインに与える影響についての魅力的な洞察を提供します。

以下では、ビジュアルデザインに適用される6つの主要なゲシュタルト原則を紹介します。

1.フィギュアグラウンド -脳が前景と背景をどのように区別するか。 UXデザイナーは、認知的負荷を最小限に抑えるために、前景と背景を明確に区別する必要があります。

2. 近接の法則 – グループ化されたオブジェクトは、離れた場所にあるオブジェクトよりも関連性が高いように見えます。 複数のカテゴリの情報がある場合、これらのカテゴリ間にスペースを作成すると、ユーザーはコンテンツをより速く区別できるようになります。

3. 類似性の法則 – 類似のオブジェクトは関連しているように見えます。たとえば、類似の形状、色、陰影、サイズ、およびその他の品質のオブジェクトです。

4. 閉鎖の法則 – 不足している情報を埋めることによって完全な形を見る脳の能力。

5. 連続の法則 – 人間の目は、デザインのパス、線、または曲線を自然にたどります。 近接性と同様に、継続性はユーザーが関連コンテンツを識別するのに役立ちます。

6. 対称の法則 – オブジェクトを偶数の対称部分に分割するという脳の好み。

すべてのデザイナーが知っておくべき6つのUXデザイン心理学の原則

1.フォンレストルフ効果 (Von Restorff effect)

フォンレストルフ効果は、オブジェクトのグループ内で、異なるオブジェクトが目立つか、記憶される可能性が最も高いことを予測します。 ユーザーに明確さと方向性を提供するのに役立つため、UXデザイン心理学の最も重要な原則の1つです。

UXデザイナーは、CTAを拡大したり、色を変えたりするなど、目立つ召喚ボタンを強調しようとするたびにフォンレストルフ効果を適用します。

フォンレストルフ効果は、ユーザーインターフェイスの他の部分でも役立ちます。 たとえば、一連のタブがある場合、別の色にすることで、ユーザーが現在どのタブを使用しているかを示すことができます。 ナビゲーションの現在のページまたはユーザーフローの現在のステップを強調表示する場合も同様です。

2.ヒックの法則 (Hick’s Law)

ヒックの法則は、あなたが誰かに与える選択肢が多ければ多いほど、彼らが決定を下すのに時間がかかると推定しています。なぜなら、あなたは彼らの認知的負荷を増やしているからです。

ヒックの法則は、eコマースデザインの重要な心理的原則です。 まず、買い物客の選択肢が多すぎると、何を購入するかを決める前に何度も訪問する可能性があります。 経験は圧倒的すぎるかもしれません、つまり彼らは何も購入しないというにつながります！

UXデザイナーは、チェックアウトプロセス中にヒックの法則にも注意を払う必要があります。 販売を完了するために必要な手順、およびフォーム入力フィールドの数は、ストアのコンバージョン率に深刻な影響を与える可能性があります。

UXチームは、タスクまたは目標を完了するための選択肢の数が最も少ないことを確認するために、設計を継続的に評価する必要があります。

3. 最小努力の原則 (The Principle of Least Effort)

最小努力の原則は、ユーザーが最小量のエネルギーを必要とする選択または行動をとることを示しています。 製品が複雑すぎる場合、または学習曲線が急な場合、ユーザーはそれを使用する可能性が低くなります。

レイアウトやユーザーインターフェイスを変更する場合も、最小努力の原則が重要です。 ユーザーが製品を操作する方法を変更すると、新しいプロセスを学ぶのが面倒になる可能性があります。これを何度も行うと、ユーザーを失う可能性があります。

最小努力の原則は、設計者が問題を解決するために一度検討することではありません。 これは、ユーザーのテストと反復の継続的なプロセスであり、継続的に改善点を探します。

4. 系列位置効果 (The Serial Positioning Effect)

系列位置効果は、リスト、文、またはコンテンツの最初（主効果）と最後（最新効果）の項目を覚えている可能性が最も高いことを示しています。

心理学者は、人々が最も意味のある情報が最初と最後に現れることを期待しているため、系列位置効果が発生するのではないかと疑っています。

UXデザイナーは、系列位置効果を使用して、より優れたユーザーエクスペリエンスを作成できます。 たとえば、最も重要または最も使用されるナビゲーションリンクを最初と最後に配置します。

系列位置効果は、重要な情報を上下に表示することにより、画面レイアウトにも効果的です。

5. 永続的な習慣の原則 (The Principle of Perpetual Habit)

永続的な習慣の原則は、人々が身近な習慣や習慣に依存していると述べています。 新しい車を設計する場合、クリーンでミニマリストなダッシュが必要なため、ハンドルをトランクに入れません。

創造性と革新性を発揮できる分野はありますが、決して変更してはならない普遍的な基準がいくつかあります。

たとえば、ユーザーはヘッダーとフッターにナビゲーションリンクを見つけることを期待しています。 ハンバーガーアイコンは、モバイルユーザー向けのナビゲーションの場所を示しています。 この構造を変更すると、ユーザーは基本的なナビゲーションに問題を抱え、ユーザーエクスペリエンスが低下します。

優れた製品設計は、モバイルデバイスからデスクトップ、iOSからAndroidまで、デバイス間でのさまざまなユーザーの習慣を認識し、ユーザーのニーズに合わせて製品を調整することです。

6. 感情的な伝染の原則 (The Principle of Emotional Contagion)

感情的な伝染またはカメレオン効果の原則は、人間が動物やアニメーションを含む他の人の感情や行動を模倣または共感することを示しています。

UXデザイナーは、感情的な伝染の原則を使用して、魅力的で没入型のユーザーエクスペリエンスを作成できます。

良い例は、DuolingoがLanguage Birdを使用して、ユーザーにアプリに戻るように促す方法です。 ユーザーがレッスンを欠席すると、LanguageBirdの表情は泣いているように示されたり、クラスを終了すると明るい表情となるような反応を示します。

UXデザイナーには、ユーザーに害のある感情伝染の原理を乱用しないようにする必要があります。

まとめ

UX心理学を理解することで、ユーザーにとってより良い製品を構築できます。 デザイン心理学は、製品とインタラクションデザインの背後にある理由を理解するのにも役立ちます。

ユーザーエクスペリエンスを向上させるために、人間の行動から多くのUXデザイン原則を導き出します。 しかし、これらは強力な心理的ツールであり、善と同じくらい害を及ぼす可能性があります。

良い例は、ソーシャルメディア企業がデザイン心理学を使用して人々を操作し、利益の名の下にユーザーの注意を競う方法です。

デザイン心理学をよく理解して、ユーザビリティテストでのこれらの原則を認識することを学ぶことができます。 あなたが観察する非言語的な手がかりがあるかもしれません、それはより充実したフィードバックを収集するうえでユーザーと接することができます。

UXPinによるユーザビリティテストの改善

意味のあるフィードバックを得るもう1つの方法は、最終製品のように見え、機能する忠実度の高いプロトタイプを作成することです。 UXPinを使用すると、洗練されていながら直感的なオールインワンプロトタイピングソフトウェアを使用して、アイデアをエクスペリエンスに変えることができます。

この記事からUXの原則を取り入れて、UXPinの次のプロジェクトに適用してください。 14日間の無料トライアルにサインアップして、今日からより良いCXデザインを始めましょう！

The post 優れたUXデザインを生み出す心理的トリック appeared first on Studio by UXPin.

パララックス・スクロールは、デザイナーが2次元の画面に3次元の体験を作り出すためのクリエイティブ・ツールです。パララックス・スクロール効果は、深みと奥行きを与え、ユーザーに没入感と魅力的な体験を与えることができます。これは、ブランドが常に目指していることです。

パララックス・スクロールとは何ですか？

パララックス・スクロールとは、要素が異なる速度で動いているように見えることで、3Dスクロール効果を生み出すウェブデザインの手法です。

車を運転しているときに、近くのものは早く通り過ぎ、遠くのものはゆっくりと通り過ぎるという奥行きの感覚に似ています。

パララックススクロールのパターンにはいくつかの種類がありますが、いずれもコンテンツのレイヤーを分けて使用することで、目的の効果を得ることができます。それぞれのレイヤーに異なるスクロールスピードを設定することで、ユーザーがスクロールするたびに画面内をオブジェクトが移動しているように見せることができます。

パララックス・スクロールを作ってみませんか？UXPinでは簡単に作成可能です。14日間のトライアルですぐにお試しいただけます。

パララックス・スクロールの歴史

パララックス・スクロールは、1930年代にディズニーの「白雪姫と7人の小人たち」などのアニメーション映画の手法として登場しました。1980年代初頭、ゲームデザイナーは、1981年に発売された「Jump Bug」をはじめとする2Dゲームに3D効果を持たせるためにパララックス・スクロールを使用しました。

しかし、2007年になって、Internet Explorer 6のJavascriptとCSS 2を使って、パララックス・スクロールがウェブデザインに登場しました。2011年にHTML5とCSS 3が導入されると、パララックス・スクロール効果の制作が容易になり、人気が高まりました。

現在、パララックススクロールは非常に複雑で、ウェブデザイナーは没入感のあるビジュアル体験を作り出すことができます。

パララックス・スクロールを使うタイミング

亜麻色のスクロールは、ユニークなユーザー体験を生み出す非常に効果的なツールですが、デザイナーは亜麻色のスクロールの欠点を考慮しなければなりません。悪影響を及ぼす可能性があるのです！

ページスピード

パララックス・スクロールは、特に共有ホスティングプランのウェブサイトでは、ページスピードを低下させます。Googleによると、Eコマースサイトでは2秒が限界とされています。しかし、その他のほとんどのウェブサイトでは、平均して3～6秒となっています。

では、Eコマースに関しては、どのような目標があるのでしょうか？ユーザーにウェブデザインのスキルを印象づけることでしょうか、それとも商品を売ることでしょうか？ページスピードを最適化できない限り、Eコマースやスピードが重視されるウェブサイトでは、パララックススクロールは避けた方がよいでしょう。

おすすめの記事： how to improve page speed for parallax scrolling（英語記事）

コンテンツへの影響は？

亜麻色のスクロール効果を追加する前のもう一つの疑問は、それがコンテンツにどのような影響を与えるかということです。

例えば、Collage Craftingのウェブサイトでは、デザイナーは販売店に視差効果を加えることにしました。

しかし、スクロールすると上下に切れてしまうため、一部のコンテンツが読みづらい。これでは、ユーザーはすべてのコンテンツを適切に消費することができず、良いユーザーエクスペリエンスとは言えません。

ユーザーにコンテンツを読んでもらう必要があるなら、シンプルにしましょう デザイナーがユーザーにコンテンツを提供し、かつ読みやすさを維持する方法は他にもあります。

 パララックス・スクロール 効果は、ユーザーの注意をそらしたり、迷惑をかけることはないのか？

パララックス・スクロールには、それなりの効果があります。クリエイティブエージェンシーにとっては、潜在的なクライアントにウェブデザインのスキルを印象づけるためにも意味があります。

しかし、もし私が自動車保険の見積もりを探しているとしたら、見積もりフォームにたどり着くまでに、派手なパララックス効果の中をスクロールして時間を無駄にしたいと思うでしょうか？おそらくそうではないでしょう。

ユーザーが素早く情報を求めている競争の激しい業界では、パララックス・スクロールは直帰率やコンバージョンに悪影響を及ぼす可能性があります。

常にコンテンツ、コンテクスト、そしてウェブサイトがユーザーにどのようなサービスを提供しようとしているのかを考えましょう。

優れたパララックス・スクロール　9つの例

これらのWebサイトの多くは、デザイナーがストーリーを伝えるためにパララックスをどのように使用しているかというテーマが際立っています。

紹介している例からわかるように、パララックスは強力なストーリーテリングツールになりますが、そのためには多くにおいての考慮や計画が必要です。

NIIKA

NIIKA は、オーストラリアを拠点とするクリエイティブ・エージェンシーです。主人公のイメージは、美しい抽象的なデザインに微妙な動きを加えたものです。スクロールすると、抽象的なオブジェクトがページ内を移動し、大きな動くヘッドラインがエージェンシーのサービスを表示します。

さらにその下には、背景に固定されたカスタムマップを使用したパララックス・スクロール効果があり、エージェンシーの連絡先詳細が上部にスクロールします。

NIIKA は、フッター付近にある「私たちと一緒に働きませんか」というCTAにもパララックス効果を使用しています。

NIIKA は、パララックス・スクロールに多くのコピーを使用していますが、重要な情報やメッセージを見失うことはありません。

CANN

CANN は、アメリカの大麻入りトニック飲料メーカーです。このウェブサイトでは、没入感のあるシームレスなパララックス・スクロール効果を用いて、ブランドストーリーを伝えています。 開発者は、このような複雑なパララックス・スクロール効果に対応できるように、CANNのウェブサイトを最適化するという素晴らしい仕事をしました。

コピーやコンテンツは読みやすく、パララックス効果でブランドが持つストーリーを伝えることができ、泡でトニックを表現しています。また、色を効果的に使い、CANNの3つのフレーバーを表現しています。

ウェブデザイナーは、CANNのストアにおいても素晴らしい仕事をしており、派手な効果を捨てて、コンバージョンのためにデザインを最適化しています。

Toy Fight

Toy Fightは、イギリスに拠点を置くクリエイティブエージェンシーです。このウェブサイトでは、トップページにシンプルかつエレガントなパララックス・スクロール効果を採用し、ページの中央には明確な行動喚起が表示されています。

Toy Fightでは、各ページにパララックス効果を用いて、ヒーローからページのコンテンツへと移行しています。このパララックス効果は、アニメーションがどこかおどけている一方で、コンテンツは会社のサービスや過去の仕事について説明しているという、まるでカーテンを開けるような巧みな演出です。

Toy Fightのウェブサイトは、パララックス・スクロールがどのようにストーリーを伝えることができるかを示す素晴らしい例です。

Garden

Garden は、数々の賞を受賞したポルトガルのデザインスタジオです。このサイトでは、美しいパララックス効果を利用して、庭の夕日を描いたヒーロー画像をスクロールしていくと日が暮れていきます。

さらにその下には、スクロールしながらスケッチしているかのような線やアイコンが現れます。繊細な効果により、Gardenのサービスやヘッドラインなどの重要な情報に目がいきます。

Smart Move

Smart Move は、スウェーデンのグレーター・オレブロ地域に専門家を誘致し、維持するための取り組みです。このサイトのトップページには、エーレブローの特徴や文化を紹介する印象的な水平方向のパララックス・スクロール効果があり、それぞれに関連するリンクが貼られています。

このパララックス効果は、自然、商業、家庭生活、娯楽、ナイトライフなど、スウェーデンの様々なシーンを巧みに表現しています。

Bertani Wines

Bertani は、イタリアのワインメーカーです。このウェブサイトでは、水平方向のパララックス効果を利用して、画像、ビデオ、コピーでブランドのストーリーを表現しています。

この効果は、水平方向と垂直方向の動きを組み合わせて、ブランド、ブドウ畑、ワインを巡る旅へと誘います。Bertani社のデザイナーは、複雑な水平視差効果と説得力のあるストーリーテリングのバランスをうまくとっています。すべてが理にかなっており、メッセージ性も際立っています。

Quentin Goupille

Quentin Goupille は、パリ出身のフリーランスのアートディレクター、イラストレーター、映像制作者です。彼のポートフォリオは、パララックス・スクロール効果を用いて、各プロジェクトの背景にあるストーリーを伝えています。

各ページはそれぞれ異なっており、Quentinはパララックス効果を使って、ユーザーを各作品の旅へと誘います。その結果、Quentin氏のストーリーテリングと創造性が印象的に表現されています。

Quentin Goupille氏のウェブサイトは、クリエイターが視差効果を利用して、自分の作品をユニークで魅力的な方法で紹介できることを示す素晴らしい例です。

Crazy About Eggs

Crazy About Eggsは、放し飼いにこだわり、鶏に健康的な農場生活を送らせることに情熱を注ぐオランダの養鶏業者です。

このウェブサイトでは、小さな要素や小見出しを紹介するために、微妙なパララックス・スクロール効果を使用しています。この会社の卵の箱は、半分までスクロールしても静止したままで、製品の利点が左右にスクロールします。

これは、ブランドを前面に押し出し、ユーザーが製品に親しみを持てるようにする、非常にクリエイティブな方法です。ユーザーは次にスーパーに行ったとき、Crazy About Eggsのパッケージに気づくことでしょう。

Kibana

Kibana は、宿泊施設、イベントスペース、庭園、マーケットなどのアウトドア体験ができるフランスのリゾート地です。

ヒーロー画像には、テキストによる紹介文を掲載しています。スクロールすると、Kibanaの美しい庭園の中に入り込み、すぐにその場にいたいと思うでしょう。

さらにスクロールすると、微妙な動きでKibanaの主要な機能や美しい画像にユーザーの注意が向けられるようになっています。フッター付近では、デザイナーが巧みなパララックス効果を使ってKibanaのチームを紹介しています。

まとめ

いかがだったでしょうか？スクロールは強力なツールですが、デザイナーはユーザーを感動させ、ストーリーを伝えるために使用する必要があります。上で紹介した例のようにパララックスを効果的に使用するには、多くの時間、コラボレーション、そして計画が必要です。

ユーザーのニーズを常に念頭に置き、ユーザーエクスペリエンスに悪影響を与えるようなパララックス効果は使用しないようにしましょう。

UXPinを使った素晴らしいUXデザイン

UXPinは強力なコラボレーションデザインツールで、プロジェクトの成功に向けてチーム全体を招待することができます。UXデザイナーはUXPinを使って、没入感のあるビジュアル体験やUIをデザインすることができます。

UXPinの14日間の無料トライアルで、美しいUXの創造を始めましょう。

The post パララックス・スクローリング を使ったデザイン appeared first on Studio by UXPin.