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.

人々は「ウェブデザイン」と「開発」という言葉を、デザインと開発の両方の分野を表すために用います。インターネットが使われ始めた当初では、この表現は正確だったかもしれませんが、現在では、これらの分野は建築家と建設業者のように区別されるようになりました。

この記事では、「ウェブデザイナーとウェブエンジニアの違い」や「現代のウェブサイトのデザインと開発」について掘り下げていきます。また、異なる分野を理解するために、さまざまなデザインと開発の職種についても見ていきます。

UXPinは、革新的なコードベースのデザインツールで、デザインと開発の間のギャップを埋めるものです。 ベクターグラフィックスをレンダリングする代わりに、HTML、CSS、Javascriptをレンダリングするため、デザイナーはコード化されたウェブサイトと同じ機能を持つ高忠実度のプロトタイプを構築することが可能です。

ウェブデザイン と 開発とは？

ウェブデザインと開発とは、ウェブサイトを構築するエンドツーエンドのプロセスを表す包括的な用語です。ウェブデザイナーは、ウェブサイトのビジュアル表現を作成し、それをHTML、CSS、Javascriptに変換するデベロッパーに渡します。

ウェブデザインとは？

ウェブデザインは、ウェブサイトの視覚的要素、ページ、ナビゲーションを作成することです。ウェブデザイナーは、色、アセット（画像、ロゴ、アイコン）、タイポグラフィー、画面に表示される構成要素などを担当します。また、デスクトップ、タブレット、モバイルなど、複数のデバイスでウェブページをどのように見せるかを決定する必要があります（レスポンシブデザインとも呼ばれます）。

ウェブデザイナーは、ウェブサイトのグラフィック表示やプロトタイプを作成するデザインツールを使って仕事をします。残念ながら、ほとんどのデザインツールはコードをレンダリングしないため、開発者はデザイナーのモックアップやプロトタイプに従ってウェブサイトを作り直さなければなりません。

ウェブ開発とは？

ウェブ開発とは、HTML、CSS、Javascriptを記述し、機能するウェブサイトを作成することです。また、ウェブサーバー、データベース、セキュリティなど、ユーザーの目に触れない部分（バックエンドとも呼ばれる）も担当します。

ウェブ開発には2つの分野があり、両方を担当する開発者（フルスタックデベロッパー）もいれば、どちらかに特化した開発者もいます。

• フロントエンドエンジニア：ウェブサイトやアプリケーションなど、ユーザーが目にするもの（クライアントサイド）および対話するものすべてを開発します。ウェブデザインを機能するウェブサイトやアプリケーションにするためのHTML、CSS、Javascriptを書くのが仕事です。フロントエンド開発者は、ブラウザやデバイスの違いによる情報の表示方法を理解し、その違いを許容するコードを記述する必要があります。
• バックエンドエンジニア：ウェブサイトやアプリケーションを機能させるためのサーバーサイドの環境を構築する。バックエンドデベロッパーの仕事はユーザーには見えませんが、ウェブサイトやアプリケーションの機能やパフォーマンスに大きな影響を与えます。バックエンド開発者は、ユーザーがウェブサイトやアプリケーションからデータを送受信できるように、サーバーやAPI、さらにはAI/機械学習などを扱うため、Python、PHP、Javaなど多くのプログラミング言語の能力が必要です。

ウェブデザインとウェブ開発の歴史について知りたい方は、この魅力的な年表で、1990年から2017年までの各時代の重要な瞬間をハイライトしています。

ウェブデザイン の職種とキャリアパス

ウェブデザインは、多くの役割と分野を包含する広い言葉です。今回は、その中でも特に人気の高いウェブデザインの4つの分野を紹介します。

• UXデザイン
• UIデザイン
• プロダクトデザイン
• デザインオプス

UXデザイン

UX デザイナー （ユーザー・エクスペリエンス・デザイナー）は、ウェブサイトやアプリケーションのユーザビリティとアクセシビリティに焦点を当てます。ユーザー調査やペルソナの作成を通じてお客様の気持ちに寄り添い、お客様のニーズに合ったウェブサイトやアプリケーションをデザインします。

UX デザイナー は、デザイン思考のプロセスに従って、ユーザーの問題を十分に理解し、それを解決する方法を考えます。デザイン思考のプロセスには、以下の5つの段階があります。

1. 共感する： ユーザーが何を必要としているかを発見する
2. 定義 ：解決したい問題を決定します。
3. 考案 ：ユーザーの問題に対する可能な解決策を開発する。
4. プロトタイプ ：プロトタイプを作成する
5. テスト：プロトタイプをユーザーや関係者とともにテストします。

UX デザイナー の仕事には、以下のようなものがあります。

• ユーザー調査
• ワイヤーフレーム、モックアップの作成
• プロトタイピングとテスト
• 競合他社・市場調査
• 情報アーキテクチャ
• ナビゲーション

無料e-Book「UX Design: The Definitive Beginner’s Guide」をダウンロード

（UXデザインについてさらに詳細、ベストプラクティス、専門家のアドバイスなどついて）

UIデザイン

UIデザイン（ユーザーインターフェースデザイン）は、デジタル製品やウェブサイトのビジュアルデザイン要素やインタラクション（ボタン、色、アイコン、タイポグラフィー、画像、フォーム、その他の要素やコンポーネント）の作成を専門とするUXデザイナーのことである。さらに、アニメーションやマイクロインタラクションなどのインタラクティビティも重要な仕事です。

UIデザイナーはデザイン思考の方法論にも従いますが、ユーザーが何をするか、どのようにデバイスを使うかに、より焦点を当てます。その他、UIデザインに特化したスキルをいくつかご紹介します。

• グラフィックデザイン
• インタラクションデザイン
• イラストレーター

UXデザインとUIデザインの違いについては、こちらの記事で詳しく解説しています。

プロダクトデザイン

プロダクトデザイナーは、既存の製品を扱うことを除けば、UXデザイナーと同じような仕事をします。プロダクトデザイナーの仕事の大部分は、ブランドの関連性と競争力を維持しながら、収益を拡大するための製品を開発することです。

プロダクトデザイナーは、ゼロから要素や部品をデザインするのではなく、既存のデザインシステムを使って新しい機能やインターフェースを構築します。UXデザイナーと同様に、プロダクトデザイナーもユーザビリティテストやデザインハンドオフのためにプロトタイプを作成する必要があります。

この記事では、UXデザインとプロダクトデザインの違いについて説明しています。また、エンタープライズプロダクトデザインに関する無料の電子書籍もご用意しています。

DesignOps

DesignOpsは、これら4つの分野の中で最も若い分野ですが、この10年間で人気と重要性を増しています。DesignOpsは、デザインそのものに焦点を当てるのではなく、デザインのプロセスとワークフローを最適化することに着目しています。

DesignOpsは役割であると同時に、考え方でもあります。企業は、誰かが管理しなくてもDesignOpsを導入することができます。企業が成長するにつれ、DesignOpsのリーダーはデザインを拡張し、非効率性を減らし、コラボレーションを改善するのに役立ちます。

UXPin無料eBook「DesignOps 101: Guide to Design Operations」には、世界中のDesignOpsの専門家が執筆した6つの章が含まれています。この本は、DesignOpsとそれが組織に与える影響についての素晴らしい入門書です。また、ここではDesignOpsとデザインにおけるその役割について概説しています。

ウェブデザインと開発の流れ

ここでは、典型的なエンドツーエンドのウェブデザイン・開発プロセスを紹介します。

1. デザイナーとデベロッパーは、新しいウェブサイトや製品の概要を受け取ります。
2. デザイナーは、ユーザーや市場、競合他社の調査から始めます。ペルソナやユーザージャーニーマップを作成し、ユーザーへの共感や問題の本質を理解します。
3. 次に、スケッチやペーパープロトタイプでデザインのアイデアを出します。この手描きのスケッチによって、デザイナーはコラボレーションを容易にし、多くのアイデアを素早く開発することができます。
4. ペーパープロトタイプを数回繰り返した後、デザイナーはウェブサイトやアプリケーションのワイヤーフレームを作成します。ワイヤーフレームは、情報アーキテクチャの設計とナビゲーションのテストに使用されます。
5. 次に、ユーザビリティテストやステークホルダーとの共有のために、製品やウェブサイトのモックアップや忠実度の高いプロトタイプのレプリカを作成します。
6. テストが完了したら、デザイナーはモックアップとプロトタイプを、開発者にデザインを引き継ぐためのドキュメントとともに準備します。
7. 開発者はデザインを参考にしながら、HTML、CSS、Javascriptを駆使してウェブサイトやアプリケーションを構築していきます。デジタル製品をより速く開発するために、フロントエンドフレームワークを使用することもあります。
8. フロントエンドとバックエンドの開発者は、パッケージやAPIなどのツールを使って、ウェブサイトやアプリケーションの機能を強化したり、他の製品（社内外）と連携させたりします。
9. 開発者が開発フェーズを終えると、デザイナーは品質保証プロセスを実施し、デジタル製品の外観と機能が正しく保たれていることを確認します。

UXPinによるエンドツーエンドデザイン

デザイナーは、デザインプロセスのあらゆる段階でUXPinを使用して、ユーザーフロー、ワイヤーフレーム、情報アーキテクチャ、モックアップ、プロトタイプを作成することができます。プレビューと共有機能により、プロトタイプをテストに使用したり、関係者とアイデアを共有したりすることができます。モバイルアプリケーションの設計では、UXPin Mirror を使用して、iOS または Android デバイスでプロトタイプを共有し、テストすることができます。

UIデザイナーは、高度なインタラクションを備えた美しいアイコンやUIコンポーネントを作成し、顧客のための没入型ユーザーエクスペリエンスを実現することができます。

イメージベースのデザインをレンダリングする他のデザインツールとは異なり、UXPinはコードベースなので、プロトタイプに高い忠実度と高い機能性を与えることができます。ここでは、従来のイメージベースのデザインツールにはない、コードベースの4つの機能を紹介します。

• ステート：1つの要素やコンポーネントに複数の状態を適用し、それぞれに異なるプロパティ、インタラクション、アニメーションを持たせることができます。
• インタラクション：高度なアニメーションや条件付き書式設定により、複雑なインタラクションを作成できます。
• 変数：ユーザーの入力を取得、保存し、その情報を使ってアクションを起こしたり、ユーザー体験をパーソナライズすることができます。
• エクスプレッション：Javascriptのような関数で、完全な機能を持つフォームの作成、パスワードの検証、ショッピングカートの更新などを行います。

UXPinでは、デザインプロジェクトと一緒にデザインシステムを作成、管理、拡張することも可能です。製品チームやデザインチームのために、権限を設定したり、ドキュメントやガイドラインを追加することもできます。

UXPinでMUIを使ったデザイン

要素やコンポーネントのデザインを何から始めればいいのかわからないという方もいるのではないでしょうか？UXPinの新しいMUI統合により、MUIのインタラクティブなReactコンポーネントを使用して、完全に機能する高忠実度のプロトタイプを作成することができます。

デザイナーは、ブランドや製品の要件に合わせてMUIコンポーネントをカスタマイズすることができます。デザインのハンドオフ時に、開発者はUXPinからコンポーネントのプロップをコピーして、最終製品を開発します。

カスタムMUIコンポーネントをリポジトリに保存し、Mergeを使用して新しいデザインをUXPinのデザインエディタに同期し、デザイナーが新しい機能をデザインします。

UXPinでウェブデザインと開発を始める準備はできましたか？無料トライアルに登録して、コードベースのデザインツール1つでデザインプロジェクトにどのような革命が起こるかをご体験ください。

The post ウェブデザインと開発の違いとは？わかりやすく！ appeared first on Studio by UXPin.

Webデザインは必ずしも安価ではありませんが、デザイナーにかかるWebデザインコストの中でも、まずはユーザーのコストを考慮するべきです。

モバイルユーザーは、Wi-Fiから離れた場所で多くの場合、ダウンロード（およびアップロード）するたびに、バイト（Byte）単位で料金を支払います。HTMLやCSSのファイルサイズは年々大きくなっていますが、JPGやPNG、アニメーションGIFのような大容量ではありません。細心の注意を払っているデザイナーは、できるだけ早くダウンロードできるWebサイトやアプリを作ることがベストプラクティスであるとわかっています。つまりそれは、マークアップから余分なdiv要素を削ったりするようなものです。

ユーザーにピクセルが必要ない場合は、ピクセルを送信しないようにしましょう。

「 レス ポン シブ 」を考えるというのは、単にメディアクエリをコードに叩き込むだけではなく、デザイナーが克服しなければならない独自の課題があります。さまざまなスクリーンでうまく機能して見栄えのするサイトを作るには、最初から画像に関するスマートな戦略が必要なのです。

難しいかもしれませんが、努力する価値は必ずあります。写真は千の言葉に匹敵するかもしれませんが、その重さが百万バイトでは、ユーザーは写真がダウンロードされる前に諦めてしまうかもしれませんからね。

デザインだけでなく全チーム間で一貫性が保たれやすくなるコード優先型のプロトタイピングソリューションであるUXPinを使ってプロトタイプを速やかに構築しませんか。コードベースのデザインシステムを共有できるようにしましょう。UXPinをぜひ無料でお試しください。

UIに適したフォーマットの選択

JPG、SVG、GIF、PNG（およびPNG-24）‐ Webデザイン初心者だと、この ３つを混同してしまうかもしれません。熟練したベテランでさえ、SVG で十分なのにJPGを選んだり、PNG-8 ではなく PNG-24 をデフォルトにしたりするのは珍しくないですからね。

JPG

JPEG は「Joint Photographic Experts Group」の略で、インターネットで転送される画像を標準化する手段として１９９１年に開発されて１９９２年に発表されました。当時は帯域幅が限られていたため、ユーザーはより少ないバイト数でより多くの画像を表示できるファイルを好んでいました。

JPG 形式は非可逆圧縮を採用しています。つまり、一度圧縮すると、画像を完全に元の品質に戻すことはできません。0～100 の尺度で品質が落ちる代わりに、ファイルが小さくなりますが、奇妙なことに、100% JPG 圧縮のファイルは、品質は最高でもファイルサイズは最悪であり、0% 圧縮では、ファイルは最小になりますが品質は最悪です。

アーティファクトとは、JPG 圧縮によってファイル サイズを小さくするために変更される画像の一部であり、目に見えるときは、約２０ピクセル四方の領域に色を集めたかのように、均一な色のブロックのように見えます。JPG画像は複雑な画像でも自然に見えるため、この形式は写真に最適です。

結論：JPG画像は、写真のようなディテールの多い複雑な画像に適している。

PNG (8-bit)

JPGとは異なり、PNG（Portable Network Graphics）ファイルは、ファイルを開いて再保存しても圧縮が進行しないロスレス圧縮を使います。代わりに、PNG-8ファイルには、使われているすべての固有の色のリストが含まれます。

ここで言う「固有」とは、肉眼では区別がつきませんが、「#FFFFFF」が 「#FFFFFE」ではないということです。各ピクセルにはファイルリスト内の色が割り当てられているため、同一のピクセルが貴重なバイトを浪費して既に述べたことを再現する必要がなくなります。

例えば最初の１００ピクセルが RGB（255,255,255）を使っている場合、それを述べる必要はなく、ピクセル 1〜500 がカラー #1 に属すると述べるだけです。なので、PNG 形式は完全にフラットな色の画像を圧縮するのに最適です。

結論：PNG-8 形式は、カラーテーブルと呼ばれるリストに最大２５６の固有の色を保持でき、ピクセルを完全に透明にすることもできる。このような事実により、PNG-8 は今日流行している「フラットカラー」の外観に最適。

PNG (24-bit)

PNG の他の種類である PNG-24 を使ったファイルは、圧縮が使われていないため、とてもきれいに見えます。また、カラーテーブルも使いません。PNG-24ファイルを保存するときは、ディテールが逐一保存されます…そして、それが問題なのです。

不透明度もまた問題です。PNG-8 の画像のピクセルは透明にすることができますが、０か１００かです。見えるか見えないかです。

結論：PNG-24 ファイルのピクセルは部分的に不透明になる可能性があり、その背後にある要素に色を付けることができる。この場合も、ファイルサイズは大きくなる。

GIF

GIF（Graphical Interchange Format）は、多くの点で PNG-8 に似ています。

GIF はあらゆるブラウザで広く受け入れられています。１９８７年から存在して定着しています（PNG はそれより少し新しく、１９９６年に登場しました）。GIF はカラーテーブルを使い、圧縮効率は PNG より平均して若干劣ります。また、ピクセルを完全に透明にすることができます。

GIFの特筆すべきは、１つのファイルに複数の「画像」を保持し、それを連続して表示できる点です。つまり、GIF はアニメーションに対応しているということです。アニメーション GIF ファイルは、アニメーションの開始や停止ができないため、実際にはインタラクティブではないことから、通常はデザインよりもコンテンツに使われます。また、ファイルサイズがやや大きいため、デザイナーはフラットカラー画像には GIF よりも PNG を好むことが多いようです。

結論：シンプルなアニメーションが必要な場合は、GIF が最適。それ以外の場合は、単色のイラストなどのシンプルな画像には PNG-8の少し効率的な圧縮方式、写真などの複雑な画像には JPEGを使うのがおすすめ。

各バイトを圧縮

画像ファイルの圧縮（冗長なデータの削除や、ダウンロードしやすいように画像を変更したりしてファイルサイズを小さくすること）は、Webサイトをサクッと読み込むのに極めて重要です。高速なWebサイトの結果、より多くのユーザーを獲得できますからね。

Photoshop、Sketch、Pixelmator などのほとんどの画像エディタは、Webに適した圧縮ファイルを難なくエクスポートしますが、それが必ずしも理想的というわけではありません。他のツールで、画像をさらに圧縮できるかもしれません。

圧縮サービス

1. Compress JPEG

名前の通り、この無料サービスでは、品質を犠牲にすることなく、あらゆる JPG ファイルから余分なバイトを取ってくれます。

Compress JPG により、フォトショップで ７０% で保存された上記の画像が ２１７ KB から １６０ KB にスリム化されました。ちなみに品質はそのままです。

2. TinyPNG

この無料サービスでは、８ビットおよび ２４ビットの PNG ファイルを圧縮して読み込み時間を短縮します。

TinyPNG は、カラー テーブル内のほぼ重複した色を削除することで、品質に影響を与えることなく、上記の画像を１６KB から１２KB に縮小しました。

バイト数の「多すぎる」「少なすぎる」はどのくらい？

画像によって異なりますが、できるだけ少ないバイト数で最高品質の画像を取得することが目標です。ただ、トリミングのしすぎになってしまう時があります。

JPG の場合

検証するために、上の写真をJPGの圧縮率を段階的に変えて保存してみました。結果は、圧縮率０％の４５KBから１００％の４７９KBまで幅がありました。ただこの言葉とは裏腹に、最も圧縮率の高いJPGが最も高品質（そしてファイルサイズが最も大きい）であることを覚えておいてください。

このグラフで、高圧縮領域での劇的な減少がわかります。画質を１００％から７０％に落としただけで、ファイルサイズはほぼ半分になりましたが、より低い圧縮率では、それほど大きな違いは見られませんでした。バイト数は０～２０%に下がったものの、品質が急速に落ちたため、節約に見合うほどではありませんでした。

画像は０％圧縮で４５KB（左）、３０％圧縮で９４KB（右）でした。ファイルサイズは半分になりましたが、アーチファクト、つまりJPG圧縮が効果を発揮するブロック状の部分の増加は、節約に見合いませんでした。

ベストプラクティス：「JPGファイルを７０% より高く、または ２０% より低く圧縮しない」これは厳格なルールではなくガイドラインですが、ほとんどの場合、２０～７０の範囲で対応できることがわかりました。

PNG の場合

PNG ファイルを見ると、話はより複雑になります。このグラフィックでも同じ実験を実行しました。

色が厳密にフラットではないことに注目してください。構図全体に細かいグラデーションがかかっていますね。これを考慮するには、微妙なグラデーションをシミュレートするドットのパターンである「ディザリング」が必要です。

JPG とは異なり、PNG フォーマットはパーセンテージを使いません。カラー テーブル内の色の数によって品質が決まり、ある程度はファイル サイズも決まります。８８% のディザリングでは、結果はまあ…

一般的に、色数とファイルサイズには関係がありますが、それほど多くはありません。フォトショップだと、限られたカラーテーブルで最適なパターンを見つけるのが大変でした。実際、４０色は２５色とほぼ同じバイト数で、ファイルサイズは同じですが、品質ははるかによかったです。

ベストプラクティス：「PNG からバイトをすべて絞り出す際に最良の結果を得るには、さまざまなカラーテーブルを試してみるのが最善である。」。残念ながら、適切な量は画像ごとに異なる主観的な問題であり、いつ 「適切」に見えるかはあなた次第です。

SVG

SVG（Scalable Vector Graphics）は、ピクセルの代わりに線（ラスター画像の代わりにベクター）を使って線画を表示します。SVG は実際には XML の一種で、Inkscape や Adob​​e Illustrator などのプログラムで簡単に作成できます。

SVG ファイルは、ディザリングなしでグラデーションを生成でき、古いスマートフォンからワイドスクリーンTVまで、あらゆるサイズのコンテナに合わせて拡大縮小できます。また、SVG ファイルは、ベクターとしてブラウザがその場で点と点を結ぶため、解像度が落ちることはありません。そして JavaScript でアニメーションさせることもでき、 HTML 文書にそのまま埋め込むこともできます。

上: ベクター アート (左) は適切に拡大されます。一方、ラスターアート (右) はブロック状でピクセル化されて見えます。

ただし、PNG や GIF と同様に、SVG も画像が複雑になるにつれて悪くなります。写真には不向きで、点や曲線が増えるにつれてファイルサイズが急速に大きくなります。

ベストプラクティス：「シャープな線と緩やかなグラデーションを備えたフラット 2.0 の外観を求めており、最新のブラウザ（IE8は残念ながら対象外）を対象としている場合は、SVG を使う」のがおすすめです。

コードに関する考慮事項

画像ファイル自体以外にも、コードを使ってさまざまな状況にピクセルが適切に応答するようにすることができます。

必須の CSSのプロパティ

最も一般的で、最も信頼性の高いソリューションの１つは、CSS のちょっとした設定です：

img { max-width: 100%; }

このセレクタとプロパティで、ほとんどの画像がコンテナに収まるようになります。例えば、メディアクエリでラッパーを幅３００ピクセルに設定すると、そのラッパー内の画像は３００ピクセルを超えることはありません。このテクニックには、モダンブラウザ全体で優れたサポートがあるため、今日、多くのレスポンシブWebサイトで見かけることができます。

将来の HTML画像要素

今日、私たちは CSS と <img>要素 による背景画像に制限されていますが、新しい技術が実装されると（されれば）、レスポンシブWebデザインのページレイアウトと同じように画像もレスポンシブ化されることになるでしょう。

実験的な <picture> 要素には、メディア クエリを使っていつ読み込むかを宣言する <source> 子要素が１つ以上含まれており、ブラウザは、<picture> 内の <img> 要素の src 属性を、（存在する場合は）関連するソースに置き換えます。

例えば：

<picture alt=”Descriptive text fallback”>

 <img src=”sample-default.png”>

 <source srcset=”sample-large.png” media=”(min-width: 640px)”>

 <source srcset=”sample-small.png” media=”(max-width: 639px)”>

</picture>

上記のコードは、画像コンテナの幅に応じて、sample-default.png を大きいバリエーションまたは小さいバリエーションに置き換えます。

おまけに、<picture> に対応していないブラウザでも、デフォルトの <img> 要素は普通に読み込まれます。これは、本記事の執筆時点（2024年4月時点）では、この要素は広く受け入れられているわけではないので朗報です。実際、現在これらの要素に対応している最新のブラウザはほとんどありませんが、<picture> と <source> のサポートは拡大しつつあるので、今後どうなるのか注目しましょう。

ブラウザレンダリング

最高の画像は何もない状態であることもあります。最近のブラウザは、グラデーション、アニメーション、ベジェベクター、影、幾何学図形など、独自のグラフィックをレンダリングできます。ちょっとした工夫で、ストライプを作ることもできるんです。

ブラウザで画像を作成すると、ユーザー側に視覚的な負担がかかります。画像ファイルをダウンロードする必要がないため、帯域幅と時間を節約できますが、ブラウザに特定の機能が必要です。

ベストプラクティス：「ブラウザレンダリングは、背景色や派手なボーダーなどの美観のために使うが、コンテンツのために依存せず、派手な CSS3 のトリックを使わずに、あるいは CSS をまったく使わずに、デザインの可読性を常にテストする」ことがおすすめです。

UIデザインへの影響

アイコンから背景、コンテンツに至るまで、画像がいい UI（ユーザーインターフェース）にとって重要であることは間違いありませんが、レスポンシブ画像は、帯域幅の問題やサイズの問題などの多くの課題に直面しています。

完璧な世界であれば、小さなビューポート用に画像をトリミングし、最も重要な部分に焦点を当てるか、さまざまなブレイクポイント用に異なる画像をアップロードする機能があるはずです。それは可能です。回避策はありますし、 <picture> と srcsetに期待しましょう。ただそれまでは、様々なデバイスやブラウザで読めることを確認するために、様々なサイズで画像をテストすることがベストプラクティスと言えるでしょう。

レスポンシブWebデザインに携わるデザイナーは、画像を考慮しないといけません。適切なファイル形式の使用や圧縮の最適化（やりすぎは禁物）、将来のテクノロジーへの注視は、Webサイトサイトをサクッと読み込み、あらゆるサイズ、解像度、向きの画面で美しく表示するための大きな助けになります。

結局は、ユーザーにとって何が最も役立つかという疑問に行き着きます。

デザインライブラリからインポートした画像、ビデオ、GIFを使ってUIを作成しませんか。

コード優先型のUIデザインのためのオールインワンデザインソリューションであるUXPinをぜひお試しください。UIを８.６倍速く構築して、ベクターをコードに変換せずに本番環境対応のコードをコピーしましょう。UXPin の無料お試しはこちら。

The post レスポンシブ画像 – 決定版ガイド appeared first on Studio by UXPin.

 データテーブル は、多くの企業のUXプロジェクトにとって非常に重要なコンポーネントであり、UXデザイナーは、ユーザーのニーズに応じてデータを視覚化してソートするための最適なUXテーブルデザインソリューションを見つけなければいけません。

本記事では、一般的なコンテンツとユーザビリティの問題を解決するために、テーブルUIデザインのベストプラクティスを例を挙げて見ていきます。また、特定のトピックをさらに研究するのに役立つリソースもご紹介します。

主なポイント：

•  データテーブル のUXデザインには、ユーザーが情報を簡単に検索、理解、操作できる方法でデータを整理して表示することが含まれる。
• 効果的なデータテーブルのデザインには、レイアウトの選択、データの構成、見やすさ、ユーザータスクの機能性などが含まれる。
• データテーブル のデザイナーは、読みやすさの優先、視覚的な階層作り、応答性の確保、列の適切な順序付け、より良いUXのためのアクセシビリティに注力すべきである。

データテーブルの UXデザインとプロトタイプは、画像ベースのデザインツールを使うデザイナーにとっては大変です。画像ツールには、ソート、検索、スクロール、アクションなどの基本的なテーブル機能を作成する機能がありませんからね。

UXPin Mergeを使うと、デザイナーは完全に機能するデータテーブルを同期したり、MUIのようなコンポーネントライブラリを使ってテーブルのUXをデザイン、プロトタイプ、テストすることができます。

 データテーブル のデザイン

まずは、ユーザーが情報を視覚化できるように、データテーブルの構造と、これらの要素がどのように組み合わされているか詳しくみてみましょう。

• テーブルヘッダー： データテーブルの各列のラベル
• 行： データベースからの各エントリー
• ツールバー： データを操作するためのツール（検索、編集、削除、設定など）
• ページネーション： 複数ページのデータを表示するための UIパターン
• 行チェックボックス： 単一または複数の行を選択して削除、コピー、処理などのタスクを実行するために使用する。
• 並べ替え： 特定の列を昇順、降順に並べ替えることができる。
• 水平ルール： 各行を区切る水平線（<hr> HTML要素）。

いい データテーブル にするには

いいデータテーブルをデザインするには、主に以下の４つの要素が挙げられます：

1. ​​表示したいコンテンツに適したデータテーブル UI を使う。
2. テーブルのレイアウトとコンテンツの優先順位を正しく設定する。
3. コンテンツを読みやすくする。
4. データテーブルで、ユーザーがタスクを完了するための機能を得られる。

何よりもまず、ユーザーに必要なデータをすべて表示するのに十分なテーブルでないといけません。また、UXデザイナーはデータに正しい優先順位をつけないといけません。

いいデータ表には明確なヘッダーと説明があり、これによってユーザーは自分が何を見ているのかがわかります。また、デザイナーは読みやすいタイポグラフィーを使ったり、列と行の間に適切な間隔をあけて、ユーザーがコンテンツを読みやすく、吸収しやすいようにしないといけません。

最後に（最も重要なことですが）、データテーブルはユーザーにとって使いやすいものでないといけません。ユーザーのニーズを解決し、直感的に使えるものであるべきです。ユーザーがデータテーブルの使い方の習得よりもデータの分析に集中できるように、難なく習得できるものであるべきです。

ユーザーにとって使いやすい データテーブル をデザインする方法

ここでは、ユーザーに優しいデータテーブルをデザインするためのベストプラクティスを見ていきましょう。

データテーブルの読みやすさ

データテーブルのUXにとって、読みやすさは非常に重要です。デザイナーは、以下のような要素を考慮する必要があります：

• 視覚的なノイズを減らす： ユーザーがデータを読んで操作するのに必要なコンテンツと UI 要素のみを表示する。
• 読みやすいフォントを使う：データテーブルの書体、サイズ、空白、文字間隔は、アプリケーションの他の部分とは異なるフォントを使うことになる場合でも、ユーザーがコンテンツを読むのに十分な大きさでないといけない。
• 分離を作る: ユーザーがデータを簡単に区別して吸収できるように、パディング、間隔、配置、および線での分離の作成が有効である。
• 一貫性： ユーザーが必要なものを見つけるためにテーブルをより速くスキャンできるようになるように、フォント、スペーシング、サイジングなどを使うことで、一貫性や親しみやすさを作る。
• 固定ヘッダー： ユーザーが常にコンテキストを把握できるように、スクロールしてもヘッダーは表示されるようにする。

視覚的階層を構成する

読みやすさには、視覚的階層を構成することが関係しています。つまりデザイナーが、タイポグラフィー、サイズ、間隔、その他の要素を使うことで、データが区別され、表が見渡しやすくなります。

• 列と行のヘッダーには、太字と少し大きめのフォントサイズを使う。
• 見出しと表の内容を区別するために網掛けを使う。
• 「ゼブラストライプ」で、行と行の間の区切りができて読みやすくなる。
• リンクには対照的な色を使い、どのコンテンツがクリック可能か分かるようにする。

 データテーブル はレスポンシブでないといけない

UXデザイナーは、ユーザーが日々のタスクをこなしながらテーブルをどのように使うかを理解し、組織全体で一貫したまとまりのあるユーザー体験を作り出さないといけません。

データテーブルは、ユーザーがビジネスのどこででもデータを分析できるように、レスポンシブでないといけません。例えば営業チームは外出先でモバイルデバイスからデータにアクセスしたいかもしれませんし、倉庫の従業員は主にタブレットを使いますよね。

データの関連性に応じて列を並べる

NNグループの記事では、「列のデフォルトの順序は、ユーザーにとってのデータの重要性を反映すべきであり、関連する列は隣接すべきである 」と推奨しています。

UXデザイナーは、関連性に応じて列を並べてグループ化しないといけません。例えば、住所、都市名、国名、郵便番号のような場所の詳細は、一緒でなければならず、これをバラバラに配置すると、ユーザーはカラムを比較するためにテーブルをスクロールしたりスキャンしたりする手間が増えてしまいます。

 データテーブル のアクセシビリティ

WebAIM では、アクセシブルなテーブルを作成するための以下のようなヒントが挙げられています：

• テーブルのキャプション：テーブルを開く要素の後に配置されている HTML要素の<caption>は、スクリーンリーダーにコンテクストを提供する。HTML はエンジニアの責任である一方で、UX デザイナーは、ユーザー調査とテストに基づいて、適切なキャプション記述を提供しないといけない。
• 行と列のヘッダーを識別する： UX デザイナーは、スクリーンリーダーがコンテンツを正しく識別できるように、適切な行見出しと列見出しを使わないといけない。
• データセルを適切なヘッダーに関連付ける： scope属性は、例えば、<th scope=”col”>Name</th> と <th scope=”row”>Jackie</th> など、スクリーンリーダーにヘッダーが行に属するか列に属するかを伝える。また、scope属性で、スクリーンリーダーは、ユーザーが視覚的にスキャンするように、テーブルを簡単に色々と行けるようになる。
• 絶対的なサイジングではなく、比例的なサイジングを使う： ピクセルのセルサイズを固定するのではなく、パーセンテージを使うことで、テーブルを自動的にスクリーンのサイズに合わせることができ、視覚にハンデのあるユーザーにも読みやすくなる。

データテーブルのアクセシビリティに関するその他のリソースとして、以下が挙げられます：

• Creating Accessible Tables by WebAIM（WebAIM による、アクセシブルなテーブルの作成）
• Accessible Tables by the University of Minnesota（ミネソタ大学によるアクセシブルなテーブル）
• Tables Tutorial by Web Accessibility Initiative（Web Accessibility Initiativeによるテーブルのチュートリアル）

複雑なデータテーブルのためのアトミックデザイン

Smashing Magazine社 では、複雑なデータテーブルをデザインするためのアトミックデザインのアプローチが概説されています。アトミックデザインとは、最小のUI要素からデザインし、より複雑なコンポーネント、パターン、UI全体を作成するために徐々に構築していく手法です。

例えば Smashing Magazine社 は、この手法を用いてデータテーブルを以下のように分類しています：

• 原子：フォント、色、アイコン
• 分子：セル、ヘッダー、アクセサリ
• 有機体： 行、列、ページネーション、ツールバー
• テンプレート： 表全体

おすすめの UXテーブル例６選

ここでは、UX テーブルの例６選と、それがユーザーのために解決する問題を見ていきましょう。

１．大規模データセットの水平スクロール

大規模なデータセットでは、多くのカラムに対応するために水平スクロールが必要です。UXデザイナーは、ユーザーにとってどのコンテンツが最も重要かを判断し、常に表示されるものと、スクロールしなければ表示されないものの優先順位を決めないといけません。

この好みは組織全体で変化する可能性があるため、ユーザーが列を並べ替えることで表示されるものを個別化できるようにするというのは、いいユーザー体験を生み出す上で極めて重要です。

ユーザーがスクロールするときに常に参照できるように、最初の列に識別子を置いて固定することをお勧めします。ユーザーが複数の列を固定できるようにするとで、さまざまなデータを比較できるようになります。

２．拡張可能な行と列

拡張可能やサイズ変更が可能な列は、ユーザーのための２つの目的があります：

1. ユーザーが過剰な内容のセルを表示できるようにする。
2. ユーザーが重要でないと判断したコンテンツのセル幅を最小化できるようにする。

UX デザイナーは、視覚的なノイズを減らし、目の前のタスクにとって最も重要なコンテンツを読みやすくするために、行や列を「非表示」にすることも検討できる場合もあります。

拡張可能な行によって、UX デザイナーはユーザーが必要なときにだけ表示される詳細な情報を含めることができます。CodePenの例では、簡単な説明とステータスを持つ一連のジョブカードが示されており、そこでユーザーは、アコーディオンを開いて、追加のメモや仕事のコストを表示することができます。

３．行フォーカスデータ表

このホバー効果により、ユーザーは一度に１つの行にフォーカスすることができます。複数の列やデータポイントがある場合、このエフェクトを使うと、ユーザーは行をハイライトすることができることから、もっと読みやすくなります。

また、UXデザイナーは、他の行をぼかして、１つの行を選びやすくするようにしてもいいかもしれません。

同じような例で、このデータテーブルは特定のセルをホバー効果で強調しています。

４．無限スクロールデータ表

無限スクロールは、データ量の多いテーブルで便利です。ページネーションに代わる優れた方法であり、ユーザーはクリックする代わりにスクロールするだけでより多くのコンテンツを見ることができます。

５．列の並べ替え

列の並べ替えは、ユーザーが好みに応じてデータを並べ替えるのに非常に重要です。たとえば、倉庫管理者は注文を早い順に並べ替えて進捗状況を監視し、問題に早期に対処できます。 また、配送希望に基づいて並べ替えることもでき、同日の注文が締め切り前に発送されるよう順調に進んでいることを確認できます。

６．インラインフィルター

データテーブルのフィルターで、ユーザーは自分の好みを絞り込んで、関連する項目だけを表示することができます。このデータテーブルの例では、ユーザーは複数のフィルターを適用して、必要なものを正確に見つけることができます。そしてこのようなインラインフィルターは、無関係なコンテンツを排除できる大規模なデータセットにとって特に便利です。

UXPinでテーブルをデザインする方法

UXPin は、インタラクティブで忠実度の高いプロトタイプを作成するための高度なプロトタイピングツールです。１つのインタラクションをシミュレートするのに複数の静的なアートボードを作成する代わりに、デザイナーは UXPin で、１つのアートボード「Page（ページ）」を使ってファンクショナルコンポーネントを設計するのにステート（状態）、Variables（変数）、および条件付きインタラクションを利用できます。

また、UXPinでテーブルを挿入するには、「Search All Assets（すべてのアセットを検索）」の検索アイコン（command + F / Ctrl + F）をクリック -> 入力フィールドに「table」と入力 -> 「コンポーネント」見出しの下にある「Table」をクリックします。

テーブルコンポーネントへのデータのインポート

テーブルコンポーネントに実際のデータを入力するには、JSONファイル、CSV ファイル、Google シートなどの外部データソースに接続します。その際、テーブルのスタイリングを行う前にこの作業を行い、デザインするコンテンツのイメージをよく把握しておくのが一番です。

まず、レイヤー名が JSON/CSV/Google Sheet のテーブルヘッダーと一致していることを確認する必要があります。Googleシートでどのように動作するかは、以下の画像を参照してください。

データを同期するには、入力したいレイヤーを選択し、水平ツールバーの 「Fill with Data （データ入力）」のアイコンをクリックして「JSON / CSV / Sheets」に移動します。

ローカルの JSON または CSV ファイルからデータをインポートする場合は「Browse File…（…のファイルを参照）」 をクリックするか、「Import from URL （URL からインポートする）」の入力フィールドに外部の JSON、CSV、または公開されている Google Sheets のファイルの URL を貼り付けます。

その後、構造が正しく一致している場合だと、データはテーブルコンポーネントに表示されます。

テーブルコンポーネントにソート機能を追加する

ステートとインタラクションを使ってデータをソートすることもできます。

まず、新しい状態で異なるレイヤーをすべて選択します (この場合、特定の列のText Layers 全てになります）。 その後、水平ツールバーの「Add State（ステートの追加）」（command+shift+S/ctrl+shift+S）のアイコンをクリックし、「Set State（状態の設定）」入力フィールドを使って新しいステートに名前をつけます。

次に、例えば 数値順、アルファベット順など、好きなように表のセルを並べ替えます。これを行う方法では、別の外部データソース（この場合はGoogle Sheetsが最適）を作成し、新しいデータを取り込むために前の手順を繰り返すのがベストです。

その後、元のステート（デフォルトでは 「Base（ベース）」と表記）に戻します。

最後に、関連するテーブルヘッダーを選択し、「Properties Panel（プロパティパネル）」の 「New Interaction（新しいインタラクション）」のアイコン（「+」）をクリック ->「Set State（ステートの設定）」を選択 ->「Element（要素）」で関連するエレメントを選択 ->「Set state（ステートの設定）」で作成したステート（および指定したい追加設定）を選択します。

テーブルコンポーネントのスタイリング

次に、Component （コンポーネント）のスタイルを設定します。すでに本記事で説明した UXデザインのベストプラクティスに従った方法で構造化され、スタイルが設定されていますが、プロパティパネルを使って、好きなデザインに設定できます。

また、UXPin でデザインシステムを使っている場合、デザインシステムのカラースタイルとテキストスタイルを再利用することで、このステップを短縮できます。それには、スタイルを設定したいレイヤーを選択し、「Design System Library（デザインシステムライブラリ）」のアイコンをクリックしてUXPin のデザインシステムライブラリに移動し、適用したいスタイルを選択します。

ゼロからデザインせずにオープンソースのコンポーネントを使う

もっといい方法は、オープンソースの React コンポーネントを UXPin にインポートするか、ビルトインライブラリのいずれかを使うことです。例えば UXPin Mergeには、MUI、Ant Design、Bootstrapにデータテーブルのコンポーネントがあるので、ライブラリから取り出してキャンバスにドロップするだけです。

そして、データをインポートし、ニーズに合わせてコンポーネントのプロパティを調整すれば、ステークホルダーにデザインを見せる準備が整いました。これで完了です！

そしてテーブルはコードでバックアップされているので、StackBlitzのような開発環境に直接コピーすることができます。

従来、UXデザイナーはプログラミング スキルを必要とするか、HTML、CSS、JavaScript を使用して機能するデータ テーブルを構築するエンジニアに頼る必要がありました。

しかし、UXPin Mergeを使うことで、UXデザイナーは主導権を握ることができ、コンポーネントを使うために 1 行のコードを記述する必要がなくなるのです。 また、エンジニアリングチームからの入力なしで変更を加えたり反復したりすることもできます。気になった方はまずは14日間の無料トライアルでお試しください。

The post 【 データテーブル 】テーブルUIのベストプラクティス appeared first on Studio by UXPin.

現代のWeb サイトやアプリは、UI（ユーザーインターフェース）の開発、保全、拡張のためにフロントエンドフレームワークに依存しています。

ReactのJavascriptライブラリは、デジタル製品を構築するための多くのコンポーネントライブラリを備えた、間違いなく最もよく使われているフロントエンドフレームワークです。

そこで本記事では、Reactのおすすめライブラリと、次のプロジェクトに適したライブラリの選び方を見ていきます。

UXPin Mergeで Reactコンポーネントライブラリ を同期できるので、すぐにリリース可能なレイアウトを超高速で構築することができます。こちらからUXPin Mergeをぜひご覧ください。

 Reactコンポーネントライブラリ を選ぶ際に考慮すべき６点

以下は、次のプロジェクトで Reactコンポーネントライブラリ を選択する際に考慮すべきポイント６つです。

※これらは完全版のリストではないので、この中には皆さんが構築中の製品に当てはまらない場合もあります。

１．人気

GitHubの星評価では各Reactライブラリの人気をサクッと比較でき、npmの週間ダウンロード数でも、そのコンポーネントライブラリの利用者数を見ることができます。

一般的に言うと、Reactライブラリの人気は、「React」というものの存在が十分に確立され、その目的を果たしているということになります。

２．問題

星評価と同じように、GitHubにあるライブラリの問題を見れば、そのライブラリの人気やメンテナンスの程度がわかります。

そのライブラリに最小限の問題が見つかったとして、それが今作ろうとしている製品に影響を与えるでしょうか？

３．ドキュメントおよびサポート

Reactライブラリを選択する際、ドキュメントは重要な検討事項となります。トラブルに遭遇したり、特定のコンポーネントの使い方を知りたくなったりするたびに Stack Overflowに走るのは避けたいですからね。

そしていいドキュメントというのは定期的に更新されており、ライブラリを包括的に理解することができるものです。

また、Reactライブラリがクリエイターから直接サポートを受けられるのか、専用のコミュニティフォーラムを経由してサポートが受けられるのかも知っておきたいところです。

課題を克服するために専門家のアドバイスが必要な場合もありますからね。

問題を速やかに解決してプロジェクトを進めるには、（たとえお金を払うことになっても）助けを求めることができるのが極めて重要です。

４．カスタマイズ

コンポーネントライブラリを使うことの欠点の１つに、その制約とカスタマイズの欠如があります。

プロジェクトによってはカスタマイズは関係ありませんが、ユニークなUIを開発したいのであれば、独自のデザインシステムを構築できるというのは不可欠です。

ライブラリのドキュメントを調べて、コンポーネントをカスタマイズする手順や、希望する結果を簡単に実現できるかどうかを確認しましょう。

５．ブラウザやデバイスの互換性

デザインするアプリによっては、コンポーネントライブラリのブラウザとモバイルの互換性を知りたいでしょう。ブラウザやデバイスの互換性を調べるには、GitHub の 「issues」 や Stack Overflowで検索するのが一番手っ取り早いです。

６．アクセシビリティ

アクセシビリティは、時間がかかりますがデジタル製品のデザインに欠かせない考慮事項です。

Reactライブラリがコンポーネントのデザインの際にアクセシビリティを考慮していない場合は、それを自分で行う必要があり、ポイント３番目と４番目、つまり「ドキュメント」と「カスタマイズ」に戻ります。

結局、どの Reactコンポーネントライブラリ が一番いいのか

プロジェクトに最適な Reactコンポーネントライブラリ は、特定のニーズや好みによって異なりますので、決定する前に、ドキュメントの質、コミュニティのサポート、活発な開発、プロジェクトの要件との整合性などの要素に基づいて各ライブラリを評価することをお勧めします。

ライブラリを比較するには、デザイン思想、提供されるコンポーネント、テーマ設定機能、ドキュメント、コミュニティサポート、エコシステムなど、さまざまな面の評価が含まれます。

Material-UI (MUI) と Ant Designを例にとってみましょう。

Material-UIは、Material Designのシステムに従った Reactコンポーネントの包括的なセットを提供します。これには、ボタン、カード、フォーム、ナビゲーションなどのコンポーネントと、幅広いカスタマイズ オプションががあります。

Ant Designには、レイアウト、フォーム、ナビゲーション、データ表示など、エンタープライズアプリケーション用に調整された豊富なコンポーネントコレクションがあり、データの可視化やビジネスロジックに特化したコンポーネントを提供します。

 Reactコンポーネントライブラリ ５選

２０２４年の React ライブラリ５選を以下で見てみましょう。

注：GitHub の星評価とNPMのダウンロードに関する情報は、２０２４年３月時点のものです。

１．MUI (Material-UI)

• GitHub のスター数：９１３,０００
• 週間 NPM ダウンロード数：３４０万
• 公式サイト：mui.com

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

コンポーネント

MUIには、モバイルや Web アプリケーション、Web サイト、ウェアラブルアプリまで、あらゆるものを構築するデザイナーのための膨大なコンポーネントライブラリがあります。

また MUI Core は、日々のデジタル製品で目にする基本的なUIコンポーネントを提供します。

MUI X には、データテーブル、データピッカー、チャートなどの複雑なUI を構築するための高度な Reactコンポーネントのリストがあります。

MUI コードコンポーネントを使ったデザインを試してみたい方は、UXPin のトライアルに申し込むと１４日間UXPinにアクセスできます。UXPinのMUI 5 キットについてさらに読む。

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

MUI の最大の魅力の１つに、コンポーネントをテーマ設定してカスタマイズできる点があります。デザイナーは、MUI を基盤としてデザインを速やかに拡張することができますが、ライブラリを適応させて、製品や組織のためのカスタムデザインシステムを構築することもできます。

また、デザイナーは、コンポーネントをカスタマイズする際にユーザビリティの問題を回避するために、Material DesignとMUIの包括的なガイドラインを活用することもできます。

さらに、MUI には、ダッシュボード、EC サイト、ランディングページなどの React のテーマテンプレートを購入できるテンプレートのマーケットプレイスもあります。

ドキュメント

MUIのドキュメントは、コンポーネントライブラリと同様に詳細かつ包括的だと言えるでしょう。

MUI のキュレーターは、インストール、使用方法、カスタマイズ、アクセシビリティなど、デザイナーやデベロッパーにステップバイステップの手順やガイドラインを提供すべく、細心の注意を払っています。

また YouTubeには、MUIのユーザーやコントリビューターの大規模なコミュニティから、ベストプラクティス、チュートリアル、ヒントやコツ、ハウツーガイドなどを提供するビデオが大量にアップされています。

２．React-Bootstrap

• GitHub スター数：２２２,０００
• 週間 NPM ダウンロード数：１３０万
• 公式サイト：react-bootstrap.github.io

２０１１年に設立された Bootstrap は、Webサイトやアプリケーション向けの最も古くて広く使われているオープンソースの CSS フレームワークの１つです。

また、Bootstrapは、モバイル優先型の Web 開発を優先した最初の CSS フレームワークの１つで、デザイナーはレスポンシブな Web サイトをサッと構築したり拡張することができます。

React-Bootstrapは、Bootstrap の Javascript を置き換えると同時に、JQuery のようなリソースの重い依存関係を排除して、包括的かつシンプルな Reactコンポーネントライブラリ を構築します。

コンポーネント

Bootstrapに馴染みがあれば、React-Bootstrap の一般的な外観のコンポーネントライブラリがすぐにわかるでしょう。

CSS の前身と同様に、React-Bootstrapは、モバイル アプリケーションよりも Webデザインを優先するUIコンポーネントを特徴としています。

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

React-Bootstrapは、最小限のスタイリングで非常に汎用的なので、デザイナーにとって微調整やカスタマイズがしやすくなっています。

Bootstrap では、クラスとバリアントが定められているため、CSS を使ってコンポーネントを選択してカスタマイズするのは簡単です。

また、Bootstrap の長い歴史と幅広い用途のため、管理ダッシュボードから多目的な Web サイト、Eコマース、ランディングページなど、あらゆるもののための無料およびプレミアムの React-Bootstrap テーマやテンプレートが大量に見つかります。

ドキュメント

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

Bootstrap は、Stack Overflow でも幅広く紹介されているので、ほとんどの問題の答えが見つかるでしょう。また、アドバイス、チュートリアル、デザインプロジェクトなどを提供するブログやYouTubeビデオも多数あります。

３．Semantic UI React

• GitHub スター数：１３２,０００
• 週間 NPM ダウンロード数：２５３,０００
• 公式サイト： react.semantic-ui.com

Semantic UI React は、React-Bootstrap に代わるものとして人気があります。

React-Bootstrap と同様に、Semantic UIは、そのコントリビューターが Reactコンポーネントを構築するために使うオープンソースの CSS フレームワークとして始まりました。

コンポーネント

Semantic UI React には、Web サイトや Web アプリケーションのための幅広い UIコンポーネントがあり、そのコンポーネントは、ミニマルでシンプルでありながら、Bootstrap よりもクリーンでモダンなスタイリングを提供します。

また、Semantic UI React は、１,６００以上の無料アイコンと７,８６４以上のPro（有料）などの FontAwesome のアイコンセットを使用しています。

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

Semantic UI は直感的でわかりやすい命名規則を使っているので、コンポーネントのカスタマイズが簡単であり、ドキュメントには、Semantic UI React を使ったテーマ設定のステップバイステップガイドもあります。

ちなみに、MUI やReact-Bootstrapとは異なり、Semanticにはテンプレートオプションがほとんどありません。

ドキュメント

Semantic UI Reactのインタラクティブなドキュメントでは、CodeSandbox のサンプルが提供され、コードを検査したりコンポーネントで色々と試すことができます。

また、ドキュメントでは、コンポーネントを多角的に視覚化するために、例、コード、プロップを切り替えることができます。

４．Ant Design (AntD)

• GitHub スター数：８９９,０００
• 週間 NPM ダウンロード数：１２０万
• 公式サイト：ant.design/docs/react/introduce

Ant Design (AntD) も、中国最大のオンライン マーケットプレイスである Alibaba の親会社である Ant Group によって開発された、広く使用されている人気の Reactコンポーネントライブラリ です。

MUI と同様に、Webアプリケーションとモバイルアプリケーションの両方に膨大なコンポーネント ライブラリを提供します。

ちなみに AntD は、本記事で紹介されている、JavaScript の一種である TypeScript を使う唯一の React ライブラリです。

コンポーネント

AntDには、モバイルデバイス用の無限スクロールや Pull-to-Refresh のような UI パターンなどの、デスクトップとモバイル用の膨大なコンポーネントライブラリがあります。

また、Ant Design ProComponents には、複雑なインターフェースを構築するための高度な React UI 要素（MUI Xに類似）があります。

また、プロジェクトをスタートさせ、UI をより速く構築するための既成のテンプレートやスキャフォールドの膨大なライブラリーもあります。

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

AntD は、デベロッパーがコンポーネントをカスタマイズしたりテーマ設定したりするために、デザイントークンや変数を使います。また、UI ライブラリは Less を使っており、全 AntD 変数の完全なリストを GitHub で提供しています。

ドキュメンテーション

AntD の包括的なドキュメントで、使用とカスタマイズのための指示をステップバイステップでしてもらえます。また、CodeSandBox や CodePen、StackBlitz で各コンポーネントを検査することもできます。

５．Chakra UI

• GitHub スター数：３６４,０００
• 週間 NPM ダウンロード数：５２３,０００
• 公式サイト：chakra-ui.com

Chakra UI は、Segun Adebayo によって設立されたナイジェリアベースの Reactコンポーネントライブラリ であり、Chakra の無料コンポーネントライブラリか、インターフェースをより速く構築するための既成の複雑な UI コンポーネントを提供する Chakra UI Pro のどちらかを選ぶことができます。

コンポーネント

Chakra UI のコンポーネントライブラリは、Web ベースのアプリケーションやWeb サイトに対応しており、好みに応じて TypeScript か Javascript React コンポーネントを選べます。

そして Chakra のデザイナーはWAI-ARIA標準に従っているため、すべての要素がアクセシブルです。

また、スタイリッシュな UI コンポーネントは Semantic UI に似ており、「ダーク」と「ライト」のオプションが用意されています。

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

Chakraのデザイナーは、製品とブランドの要件を満たす変数を使って完全にカスタマイズできる UIライブラリを作成しました。

また、Charka は、Create React App、Framer Motion、React Hook Form、および React Table とも統合して、ライブラリの使用法とカスタマイズを拡張します。

ドキュメント

Chakra UIには、ガイド、ビデオチュートリアル、サンプル、FAQ、主要なチームメンバーとつながるためのリンク、活発な Discord コミュニティなどの優れたドキュメントがあります。

Chakra のユーザーは React ライブラリに対して非常に一生懸命で熱意があり、質問の際は常に誰かしらいます。

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

React ライブラリを使う際の課題の１つに、実際のコンポーネントを使って UIをデザインできるツールが限られている点が挙げられますが、UXPin Mergeを使うと、Gitレポジトリ、Storybook、または npm から Reactコンポーネントを使ってレイアウトを構築することができます。

その仕組みをご覧になりませんか。こちらからUXPin Mergeをぜひご覧ください。

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

デバイス、OS（オペレーティングシステム）、テクノロジーの数が増え続ける中、クロスプラットフォーム・エクスペリエンスのデザインは、製品開発プロセスにおいて不可欠な要素となっています。

多くの企業では、iOS、Android、Windows などの専門チームがあり、製品がプラットフォーム固有の要件とユーザーの期待に確実に応えるようにしています。

世界最先端のUXデザインツールであるUXPinで、クロスプラットフォームのシームレスな CX（カスタマーエクスペリエンス）を実現しましょう。無料トライアルにサインアップして、インタラクティブなプロトタイプをぜひご体験ください。

クロスプラットフォーム ・エクスペリエンスとは

クロスプラットフォーム ・エクスペリエンス（プラットフォーム非依存的デザインとも呼ばれる）とは、iOS、Android、Windows、Macなどの OS に加え、Web、モバイル、タブレット、ウェアラブルなど、複数のデバイス間でのUX（ユーザーエクスペリエンス）の比較を表すものです。

製品開発者は、全ユーザーに製品を確実に提供するために、異なるプラットフォームや OS で同等のシームレスな UX を実現することを目標にしています。

またデザイナーは、例えば、自分の銀行口座から銀行のウェブポータルでもモバイルアプリでも支払いできる機能のように、エンドユーザーがデバイスや OS に関係なく、同じ機能にアクセスし、タスクを完了できるようにしたいとも考えています。

レスポンシブデザインと クロスプラットフォーム デザイン

クロスプラットフォーム・エクスペリエンスをデザインする際に、製品チームが考慮しなければならない要素のひとつに『レスポンシブデザイン』があります。レスポンシブデザインは、ウェブブラウザに特化し、デスクトップ、タブレット、モバイルの各ビューポートで UI がどのように見えるかを示すものです。

クロスプラットフォームデザインとは、ウェブ、タブレット、iOS、Android、Windowsなどのモバイルアプリでの製品の UX に加え、ウェブブラウザ、デバイス、OS を考慮しなければならないという、より広範な概念であり、たとえば、シンプルなアラートコンポーネントは、iOS、Android、Windows、macOS、Safari、Chrome、Edgeでまったく異なる見え方になります。

 クロスプラットフォーム ・エクスペリエンスのデザインが重要な理由

ビジネスとしての価値

ビジネスの観点からも、クロスプラットフォームデザインは非常に重要です。米国では iPhone のシェアが６５％ですが、世界には２０億人の Android ユーザーがおり、シェアは７１.３５％です。iPhone が買えない国では、Androidが９０%以上のシェアを占めており、このどちらにも対応していないということは、多くのチャンスを無駄にしているという事になります。

また、企業はレスポンシブデザインを考慮し、ウェブサイトやウェブアプリケーションがデスクトップ、タブレット、モバイルでどのようにレンダリングされるかも考慮しないといけません。多くの人はインターネットの閲覧のためだけにスマートフォンを使い、このようなモバイル端末で効率的に商品やサービスを購入できなければ、企業は貴重な収益を失うことになるのです。

競争力

誰もが製品が複数のデバイスで同じように動作することを期待しており、もしユーザーがウェブアプリケーションとモバイルアプリケーションで同じタスクを実行できなければ、同じタスクを実行できる競合他社を探すでしょう。

これに関しては、FinTechほど顕著なものはないでしょう。モバイル主導／専用のバンキングや投資アプリケーションは、従来の金融機関が残したギャップを埋めようとするスタートアップ企業によって、過去１０年間で爆発的に普及しました。このような旧式の金融機関の多くはモバイルソリューションの提供に遅れをとっており、それによって Robinhood、Monzo、Chime、RevolutなどのFinTechのスタートアップが大きな市場シェアを獲得できるようになっています。

インクルーシブ

万人受けの製品を作りたいなら、クロスプラットフォームデザインは不可欠です。例えば iPhone や Mac などのアップル製品は、家電製品の中でも高級品ですが、多くの人はこうした贅沢品を買うことができません。

もし、あなたの製品がアップル社のデバイスにしか対応していなかったり、Android、Windows、Web で同等の体験が提供されないのであれば、アップル製品を買う余裕のない疎外されたコミュニティを含む、世界の人口の大部分を排除していることになるのです。

クロスプラットフォーム・エクスペリエンスをデザインするための６大原則

１．一貫性

クロスプラットフォームデザインの最初のルールは、ウェブ、モバイルアプリケーション、OS で一貫した UX の維持です。この一貫性には、UIデザイン、機能性、機能、インタラクションデザイン、ブランディングなど、重要な要素がいくつか含まれます。

複数のプラットフォームやデバイスでの UIの正確な一貫性を得るのは不可能ですが、デザイナーはメッセージング、インタラクション、パフォーマンス、タイミングをコントロールすることができ、これらは常に一貫していなければいけません。

２．シームレスなエクスペリエンス

シームレスなクロスプラットフォームの UX とは、複数のデバイスで同じタスクを完了できるということであり、さらに、あるプラットフォームでタスクを開始し、別のプラットフォームで完了させることも可能です。

例えば、Gmailにおいて、 モバイルアプリでメールを作成し、下書きに保存して、別の時にデスクトップパソコンでそのメールを完了させることができます。このようなシームレスな UX により、ユーザーは、デスクトップでメールを送信するまで待つというようなテクノロジー中心の生活ではなく、自分のスケジュールに合わせて仕事をし、タスクを完了する柔軟性を手に入れることができるのです。

３．クロスプラットフォームでのユーザビリティ（インターユーザビリティ）

クロスプラットフォーム・ユーザビリティ（またはインターユーザビリティ）は、IoT（Internet of Things）のエコシステムにおける複数のデバイス間での UX と一貫性を説明するものです。

例えば Netflix は、携帯電話、タブレット、ノートパソコン、スマートテレビで視聴できる身近な例であり、各カテゴリーには、複数のデバイス、OS、スクリーンサイズがあります。

チャールズ・デニス氏とローラン・カーセンティ氏は、２００３年に発表した「Inter-Usability of Multi-Device Systems – A Conceptual Framework」で「インターユーザビリティ」という言葉を作り、一貫したクロスプラットフォーム体験をデザインするための３つの重要な要素について以下のように説明しています：

• 継続性：製品、ツール、デバイス間でのコンテンツとインタラクションのシームレスなフローの促進
• 構成：製品・デバイス間の機能整理
• 適切な一貫性：デザイナーは、UI デザインの一貫性とネイティブのレイアウトやパターンとのバランスをとる必要がある

４．優先順位付けと視覚的ヒエラルキー

クロスプラットフォームの UX をデザインするには、コンテンツとレイアウトへの優先順位付けが重要であり、デスクトップやスマートテレビでは、ユーザーはより多くのコンテンツや機能を見ることができる一方、モバイルアプリやその他の小さな画面では、デザイナーはコンテンツを優先し、多くの場合個別化を採り入れる必要があります。

例えば、Netflix や YouTube のアカウントは、２つとして同じものはありません。製品開発者は、各ユーザーのニーズや好みに合わせてコンテンツや機能の優先順位を決めるべく、個別化されたアルゴリズムを使っているのです。

優先順位付けには、視覚的な階層も含まれます。大きな画面では、より多くのコンテンツや機能を配置するスペースがあり、モバイル端末では、アコーディオン、ナビゲーションドロワー、ドロップダウンなど、スペースをとらない UI パターンを使って、【常に表示するコンテンツ】と【隠すべきコンテンツ】を決める必要があります。

５．アクセシビリティ

クロスプラットフォームのアクセシビリティは、コンプライアンスや製品が確実にインクルーシブであるようにするのに不可欠であり、デザイナーは、ユーザーが音声コマンド、スクリーンリーダー、フォント調整などの組み込みのサポート的技術を確実に使えるようにする必要があります。

また、視覚にハンディキャップがあるユーザーにも対応できるよう、【ダークモード】と【ライトモード】の用意が必要です。デバイスによって色の表現が異なることから、コントラストや読みやすさに影響が出ますからね。

６．適応性

すべてのデバイスに対応する製品を作ることは不可能です。例えば、企業の倉庫管理システムは、UI やアーキテクチャが複雑すぎるため、スマートウォッチでは動作しません。ただし、重要な通知を受け取るスマートウォッチ用アプリを作成し、ユーザーができるだけ早くモバイルアプリやデスクトップにアクセスできるようにすることは可能です。

適応性のある体験は、必ずしも製品の目標や機能に沿ったものではありませんが、価値を提供し、新しい顧客を獲得することも可能です。

 クロスプラットフォーム な体験をデザインするためのヒント３つ

１．親しみやすさを追求したデザイン

たとえば カスタムセットの代わりにiOSとAndroidのアイコンを使うといったように、多くのアプリは、プラットフォームに親しみを持たせるために、ネイティブのスタイリングやコンポーネントが使われています。このような機能は、ブランドに適合していませんが、製品がユーザーのデバイス専用に構築されているように感じられるため、クロスプラットフォームの UX を上げることができます。

２．デザインシステムの作成

デザインシステムは、凝集性と一貫性を最大化するための制約とソリューションを生み出し、製品チームへの、プラットフォーム固有のルールやガイドラインを満たすためのパターンやコンポーネントの提供もします。

マテリアルデザインのドキュメントでは、AndroidとiOSでコンポーネントがどのように見えるかをデザイナーに伝えています。たとえば、マテリアルデザインのTop App Barでは、各 OS でコンポーネントがどのようにレンダリングされるかの例が示されており、iOSとAndroidでは、アイコン、配置、間隔、アプリバーの高さが異なります。

このようなクロスプラットフォームのコンポーネントを作成することで、デザイナーは、製品がサポートするOS のデザインプロセスにおいて、正確なテストを行うことができるのです。

３．デザインライブラリの使用

UXPin には、Webや、iPhone、Apple Watch、Apple TVを含む iOS、Android用のキャンバスが用意されており、各デバイスに合わせたレイアウトを作成することができ、プラットフォームの画面幅に合わせて、カスタムキャンバスサイズを使うこともできます。

UXPinの内蔵デザインライブラリには、iOSおよびマテリアルデザインのコンポーネントが含まれているため、プラグインや拡張機能をインストールすることなく、クロスプラットフォーム・エクスペリエンスを構築することができます。プラットフォーム固有の UI 要素をドラッグ＆ドロップすることで、両方の OS で製品のプロトタイプを作成できるのです。

クロスプラットフォームなアプリを複数のデバイスでテストするには、iOSとAndroidで利用可能な UXPin Mirrorを使うことができます。また、ブラウザでプロトタイプをプレビューして、スマートフォン、タブレット、デスクトップ、スマート TV などでテストするのもいいでしょう。

UXPinによるクロスプラットフォームプロトタイプの構築

UXPin には、Webや、iPhone、Apple Watch、Apple TVを含む iOS、Android用のキャンバスが用意されており、各デバイスに合わせたレイアウトを作成することができ、プラットフォームの画面幅に合わせて、カスタムキャンバスサイズを使うこともできます。

UXPin のデザインシステムがあれば、チームの連携とUIの一貫性を保つために、クロスプラットフォームのコンポーネントライブラリを作成したり組織全体で共有したりできます。説明文を使って各プラットフォームのドキュメントを含め、権限を設定して、デザインシステムへの不正な変更を防ぎましょう。

世界最先端のUXデザインツールで、より良いクロスプラットフォームの UX をデザインしませんか。無料トライアルに登録して UXPin の高度な機能をぜひお試しください。

The post クロスプラットフォーム ・ エクスペリエンス【徹底ガイド】 appeared first on Studio by UXPin.

Webサイトやアプリケーションを作成する際、デザイナーやエンジニアがWebアクセシビリティに関して遵守すべきガイドラインは数多くあります。しかし、これらをすべて把握したり、さまざまなレベルを使い分けたりするのは非常に大変になることでしょう。

そこで本記事では、公式のWebコンテンツアクセシビリティガイドラインを、デザイナー向けにWebアクセシビリティチェックリストを用いてわかりやすく説明していきます。また、WCAG（Web Content Accessibility Guidelines：Webコンテンツのアクセシビリティに関するガイドライン） 1.0と2.0の違いや、各レベル（A、AA、AAA）についても見ていきます。

UXPinが提供するアクセシビリティ機能によって、デザイナーは UXPinから離れることなく、UIのコントラストや色覚異特性のテストを行うことができます。無料トライアルにサインアップし、UXPinでWebサイトやアプリの使いやすさをぜひご体験ください。

アクセシビリティチェックリストの目的

Webアクセシビリティのチェックリストで、デザイナーやエンジニアは、障がいがある人や支援技術を要する人のためにWebサイトをデザインするうえでの考慮事項を確認することができます。

また、チームメンバーは、チェックリストをデザインやコードと照らし合わせて参照し、WCAGに適合していることを確認することができます。

WCAG2.0とWCAG1.0の違い

WCAGは、技術とともに更新され、進化していかなければならず、更新のたびに新しいデバイスに沿った最新のガイドラインが追加されます。

また、ガイドラインとは別に、WCAGシステムには２つのイテレーション（反復）があり、最初のイテレーションである WCAG 1.0 では、優先度 1、2、3のガイドラインとチェックポイントが用いられています。

WCAG 2.0 では、２００８年にチェックポイントからレベルの成功基準に変更されました。現在使用されているシステムでは、以下が含まれます：

• ４つのデザイン原則
• 各原則に複数のガイドライン
• 各ガイドラインのテスト可能な成功基準レベル（A、AA、AAA）

公式文書によると、WCAG 2.0は主に以下のように改善されました：

• より多くの技術やデバイスに適用可能
• 将来の技術に合わせて進化するようにデザインされている
• 自動化されたテスト手法と人的評価により、要件のテストがしやすくなる。
• 国際社会からのインプットと連携
• ガイドラインの遵守と実施をしやすくするのに、サポート資料と文書を改善した。

詳しくは こちらのWCAG 2.0の公式発表資料をご覧ください。

アクセシビリティ準拠の成功基準における３つのレベル

WCAG 2.0 では、製品の意図された目的とターゲットオーディエンスに基づいて各ガイドラインを評価するのに、以下の３つの成功基準レベル（または適合レベル）が導入されています。

• レベル A – シングルエー
• レベル AA – ダブルエー
• レベル AAA – トリプルエー

レベル A

レベルA は、Webサイトが最低限のアクセシビリティ基準を満たしていることを保証するものであり、レスポンシブデザイン、（アイコンなど）文字以外の代替要素、キーボードナビゲーション、ビデオキャプションなど、Webサイトをよりアクセシブルにするための中核的な問題や要素に対応しています。

レベル AA

レベルAA では、誰もが Webサイトを利用できるよう、より広範なUI要素とベストプラクティスがおさえられており、世界中のほとんどの政府Webサイトは、国民の誰もが公共のコンテンツやサービスにアクセスできるよう、WCAGのレベルAAを要求しています。

このレベルでは、健常者と障がい者が同等のユーザー体験、機能性、効率でコンテンツを消化し、タスクを完了できるようになっています。

レベルAA の要件には以下のようなものがあります：

• 「4.5：1」 などのカラーコントラスト比
• 画像とアイコンの Alt（代替）テキスト
• 全テクノロジーに対応したナビゲーション
• 正確なフォームフィールドラベル
• 適切な構造の見出しタグ
• テキストサイズの変更
• 特定支援技術に関する要件

レベル AAA

レベル AAA は最も高い適合性レベルであり、 Webサイトのナビゲートや、コンテンツの消化をできるユーザーが最大数であることを保証するものです。ただし、レベルAAAはW3C（Web Accessibility Initiative）のサイトにあるように、以下に気をつける必要があります。

“It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.”

（日本語訳：コンテンツによってはレベルAAA成功基準を全て満たすことは不可能であるため、サイト全体の一般的な方針として レベル AAA 準拠を要求することは推奨されない。）

Webサイトやコンテンツが特定の読者を対象としている場合、デザイナーはレベルAAAを使用する必要があります。レベルAAAのガイドラインは、スタイリングに大きな影響を与え（カラーコントラスト7：1）、音声や映像の手話通訳を必要とします。

デザイナー向け Webサイトのアクセシビリティのためのチェックリスト

次に、私たちはデザイナーにとって最も重要なWACGガイドラインを選びました。このガイドラインは視覚的要素に適用されますが、HTML要素に関連することも多いため、アクセシビリティについてはデザイナーとエンジニアの連携が必須となります。ちなみに、WCAG 2.0 の全リストは、W3Cの公式サイトでご覧いただけます。

コンテンツ

• 説明的なリンクラベルを使う（レベル A） – ボタンやリンクは、ユーザーにコンテクストが提供されないといけない。例えば、「ここをクリック」というボタンは意味がなく、誤解を招く可能性がある。Info & Relationships SC 1.3.1を参照。
• 中級以下の読解レベル（レベル AAA） – 専門用語、慣用句、俗語、比喩、皮肉、その他の複雑な用語を含まない「平文（プレーンテキスト）」であること。中学2年生相当のレベルが理想的。Reading Level SC 3.1.5を参照。
• テキスト・フォーマット（レベル AAA） – テキストは両端揃えであってはならず、右揃えか左揃えであり（言語による）、支援技術なしで最大２００％までサイズ変更できること。また、ユーザーは「ダーク/ライトモード」切り替えのように前景色と背景色をコントロールできないといけない。Visual Presentation SC 1.4.8を参照。
• 特殊なスクリーンとデバイスでデザインをテストする（レベル A） – 視覚に障がいがあるユーザーは、高コントラストまたは反転カラーモードを使用する。その条件下でコンテンツがどのように機能するかをテストすることが重要。Color SC 1.4.1を参照。

ページタイトル、見出し、ラベル

以下のガイドラインは、レベルAA に適合しています。Headings and Labels SC 2.4.6 を参照。

• １ページに H1（見出し１） タグは１つ – H1（見出し１）ヘッダタグは、Webページや記事全体の内容が記述されてないといけない。
• 論理的な順序で見出しを構成する – 入れ子になった見出しは、H1、H2、H3、H4、H5、H6という従来の順序に従わないといけない。例えば、H2 の次に H4、そして H3 というようなことは絶対しない。また、H2、H3、H4の順ではなく、H2 から H4 へというような、ヘッダーのタグを飛ばすべきではない。
• 見出しやラベルは、トピックや目的を説明するものでないといけない – 見出しやラベルで、ユーザーや、スクリーン・リーダーのような支援技術は、コンテンツを見つけたり消化しやすくなる。

画像

以下のガイドラインは レベルA に適合しています。Non-text Content SC 1.1.1 参照。

• 非テキストコンテンツには Alt（代替）テキストが必要：画像、アイコンなどには、説明的なAlt（代替）テキストが必要であり、画像にテキスト（文字）がある場合は、alt テキストが含まれていないといけない。
• CAPTCHA：Webサイトは、CAPTCHA （完全に自動化された、コンピューターと人間を区別する公開 チューリングテスト）を使用する場合、人間による認証やテキストベースの認証など、代替の確認方法が提供されないといけない。
• 装飾的な非テキスト・コンテンツ：支援技術がこのコンテンツを無視できるように、純粋に装飾的な画像やメディアの Alt テキストは、”null ” が使われないといけない。
• グラフィック表示の代替テキスト：グラフ、チャート、その他のグラフィックには、支援技術がそれを読み取れるように、代替テキストが含まれないといけない。

リスト

以下のガイドラインはレベルAに適合しています。Info and Relationships 1.3.1参照。

• 適切なHTMLマークアップを選択する – リストには、コンテンツに関連する ol、ul、または dl 構文が使われ、ユーザーが混乱しないようにリストの外観（または構造）が備わってないといけない。

コントロール

コントロール（制御）には、リンクやボタンなどのナビゲート可能なUI要素が全て含まれます。

• 新しいタブまたはウィンドウを開く警告（レベル A） – 例えば新しいタブやウィンドウが予告なしに開くと、認知能力に障がいのある人は混乱することがよくあることから、ユーザーは、ボタンまたはリンクがテキストまたはアイコンを使って新しいウィンドウまたはタブを開くかどうかを知る必要がある。On Focus SC 3.2.1 を参照。
• フォーカス状態（レベル A） – コントロールはフォーカス（またはホバー）状態がないといけない。これにより、支援技術を要するユーザーを含むユーザーは、アクティブにするリンクやボタンをいつ選択したかを把握できる。Focus Visible SC 2.4.7 を参照。
• リンクを識別できるようにする(レベル A) – デザイナーは、ユーザがすぐにリンクを識別できるように、色と下線の組合せを使わないといけない。Use of Color  SC 1.4.1」を参照。
• スキップリンク」を使う（レベル A） – スキップリンクを使うことで、支援技術やキーボードのユーザーは、ナビゲーショナルメニューやその他のブロックを迂回して、Web ページのコンテンツに直接行くことができる。Bypass Blocks SC 2.4.1 を参照。

フォーム

• フォームラベル (レベル A) – デザイナーは、視覚的に参照できるように入力全てにラベルを付け、支援技術のために HTM Lの ‘label’ タグを使わないといけない。Input SC 3.2.2を参照。
• エラーメッセージ（レベル A） – エラーメッセージを対応する入力フィールドの上に配置し、問題を解決するための明確な指示をユーザーに与える。Error Identification SC 3.3.1を参照。
• メッセージの状態（レベル A） – 「エラー」、「警告」、「完了」のメッセージの状態を色だけに頼らない。例えば、アイコンやテキストを追加することで、視覚に障がいがある人がエラー状態の種類を識別しやすくなる。Use of Color SC 1.4.1を参照。

マルチメディア

• 自動再生をデフォルトで無効にする（レベル A） – 自動再生は、認知能力にハンデがあるユーザーや発作性障害のあるユーザーにとって問題となる可能性がある。Audio Control SC 1.4.2 を参照。
• ビデオキャプション（レベル A） – ビデオにはキャプション（字幕）が必要で、キャプションがあることを確認する表示が必要。Caption (Prerecorded) SC 1.2.2 を参照。
• 発作を引き起こす要因を取り除く（レベル A） – ストロボや点滅するビデオは発作を誘発する可能性があることから、W3Cのドキュメントでは、Web ページやビデオの点滅は３回までと推奨されている。Three Flashes or Below Threshold SC 2.3.1 を参照 。
• 音声のトランスクリプト（レベル A） – 音声記述にトランスクリプトを含めることで、聴覚にハンデのある人が音声コンテンツを理解できるようになる。Non-text Content SC 1.1.1 を参照。

カラーコントラスト

• テキストのカラーコントラストをテストする（レベル AA） – コントラストチェッカーと色覚特性テスターを使って、視覚にハンデのある人が確実に本文とUI要素を読めるようにする。Contrast (Minimum) SC 1.4.3 を参照,。
• 非テキストのコントラスト（レベル AA） – アイコンやフォーム入力などの非テキスト要素は、視覚にハンデがある人が区別できるものでないといけない。Non-text Contrast 1.4.11 を参照。

モバイルおよびタッチ

• モバイルでは水平スクロールを避ける（レベル AA） – 水平スクロールは、手や指にハンデのあるユーザーにとってやりにくい（または不可能）な場合がある。なお、W3Cでは「水平スクロールと垂直スクロールのガイドライン」が提供されている。 Reflow SC 1.4.10 を参照。
• Webサイトの向き（レベル AA） – Webサイトは、モバイルやタブレット端末のどの向きでも表示できないといけない。Orientation 1.3.4 を参照。
• 適切なターゲットサイズの確保（レベル AA） – リンクが近すぎてアクティブにできなかったり、間違ったリンクに当たってしまわないようにする。Target Size SC 2.5.5 を参照。

Webアクセシビリティに関するその他のリソース

Webアクセシビリティは、最初は難しく感じるかもしれませんが、以下のようにUI（ユーザーインターフェース）を見つけたりテストするのに役立つリソースは多数あります。

• Official Web Content Accessibility Guidelines Website（WCAG 公式ウェブサイト）
• The A11Y Project（A11Y プロジェクト）
• Essential Accessibility（主なアクセシビリティ）
• 覚えておきたい Webアクセシビリティ 完全ガイド

コントラストチェッカーや色覚特性シミュレータなどの UXPinに内蔵されたアクセシビリティツールで、Webアクセシビリティテストを効率化しませんか。無料トライアルにサインアップして、コードベースのデザインでプロトタイプとテストがどのように強化され、ユーザーにインクルーシブなユーザー体験がもたらされるかをぜひご確認ください。

The post Webアクセシビリティ チェックリスト：遵守すべき２８点 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.

レスポンシブなWebサイト、モバイルフレンドリーなデザイン、アダプティブな画像は、UX（ユーザーエクスペリエンス）にとって重要です。 そのため、レイアウトを複数使用せずに、これらのような画面のサイズに合わせたプロトタイプを即応的にデザインできる機能があると時間の節約につながり、開発フローで有益となるでしょう。実はこれは、UXPin Mergeが持つ 実際のReactコンポーネントを使ってコードとデザインするという機能性によって実現可能なのです。

 Mergeが持つ機能をさっそく試してみたいという方は、ぜひこちらからアクセスしてください。認証プロセスとセットアップ完了後、すぐにレスポンシブなプロトタイピングを開始可能です。 MergeではGitを使用しているためデータの保存場所は関係なく、GitHubとの統合も必要ありません。お好きなコードベースプラットフォームをお使いください！  

 レスポンシブデザイン の問題

  最近のプロトタイピングツールの一般的な要件に、「デバイスの種類に合わせた切り替え機能」や「プロトタイプ内のコンポーネントを利用可能な範囲で自動調整できる機能」があります。これらの レスポンシブデザイン 機能は、UXPinを含むその他プロトタイピングツールのデフォルト設定では備わっていません。多くの場合で、複数のレスポンシブレイアウトを、テストしたいデバイスサイズごとに１つずつ作成するしかありません。ただ、このやり方の場合だとプロトタイプにインタラクティブ性がなく、特にモバイルデバイスやレスポンシブなサイトを日常的にデザインしていては生産性が低くなってしまいます。

例として、Material UIライブラリを使って、上記で述べた問題を説明します。下のビデオでは、Gridコンポーネントをx-smallのデバイスサイズで12 列、smallデバイスで6列になるように設計しています。しかし、このレイアウトコンポーネントとUXPinのキャンバスは関係ないので、コンポーネントでの変更はキャンバス上には反映されません。

Material UIコンポーネントは全て最初からレスポンシブですが、基本的にデフォルトでキャンバスサイズが固定されているため、UXPin Mergeはコンポーネントのメディアクエリを使えません。そのため、ページの更新やキャンバスサイズを変更しても、コンポーネントのレイアウトには反映されず、元のデザインのままとなります。

 Mergeの「 Code-to-Design 」ソリューション

  そこで UXPin Mergeの出番です。 Mergeでは実際のReactのコードを使ってデザインできます。コードでデザインすることで、ベクターベースのデザインツールのような制限に縛られることはなくなります。想像力と直感的なプログラミングを組み合わせることで、制限を越えて自由にコードを作成できます。それが Merge の魅力です。

そのため、レスポンシブなプロトタイピングでの問題を解決するには、さまざまなデバイスのサイズに対応可能なコンポーネントを作成し、キャンバスにある全てのコンポーネントのレイアウトを管理するプロトタイプの親コンポーネントとして使いましょう。本記事では、レスポンシブコンポーネントの作成方法を紹介し、コード化したデザインシステムを今日からレスポンシブにすることができます。

レスポンシブコンポーネントの作成

  まず、ラッパーとして機能する「DeviceViewer」という名前の React コンポーネントを作成します。ネストされたサイズ変更可能な IFrameコンポーネントにプロップとスタイルを渡します。コンポーネントがIFrame内にネストされると、キャンバスサイズを固定する必要なくなるため、すべてのメディアクエリ、レスポンシブプロパティ、およびスタイリングが完全に機能します。複数のページを作成することなくレスポンシブなプロトタイプをテストできるようになります。

下の画像は、DeviceViewerの簡略化された構造です。

const useStyles = makeStyles((theme) => ({···
}));
 
function DeviceViewer(props) {
 const classes = useStyles(props);
 const [frameWidth, setframeWidth] = React.useState(0);
 const [frameHeight, setframeHeight] = React.useState(0);
 const [deviceView, setdeviceView] = 
 React.useState(props.defaultView);
 
 React.useEffect(() => {···
 }, [props]); 
 
 const handleChange = (event) => {
   setdeviceView(event.target.value);
 };
 
 const setViewportDimensions = () => {···
 };
 
 const IFrameResize = () => {···
 };
 
 return (
   <div className={classes.root}>
     <Grid···
     <Box pb={3}>
       <IFrame···
     </Box>
   </div>
 );
}

お分かりかもしれませんが、これはMaterial UIライブラリを使ったReactコンポーネントのかなりシンプルなものです。スタイル、ステートメント、onChangeイベントハンドラ、HTML要素を構造化する 「return文」があります。

return文の内部には、Grid、Box、IFrameコンポーネントがあります。Gridコンポーネントは、デスクトップ、モバイル、タブレットなどの選択可能なビューポートサイズのドロップダウンリストであり、Boxは、基本的に IFrame コンポーネントを含むためのスタイリングラッパーです。

useEffect()

useEffectとデフォルトのプロップを使って、デバイスのビューサイズはステートの読み込みと更新時に変更され、その都度、ネストされたコンポーネントのプロップとスタイルが「前のIFrame」 から「新しいIFrame」 に渡されます。

if文（擬似コードで以下にあります）は、ユーザーがUXPinのエディタまたはプレビューモード（Preview）に合わせて、キャンバスに追加するスタイリングを決定します。

React.useEffect(() => {
   setdeviceView(props.defaultView);
 
   // We’ve redacted this code for readability 
   // UXPin mode change CSS handling
   if (in EDITOR mode)) {
     // remove drop-down styling
   } else if (in PREVIEW mode)) {
     // Change canvas margin properties
   }
 }, [props]);

handleChange()

IFrameを更新するときにデバイスのサイズを追跡するのに、ドロップダウンリストの値を参照する onChangeのhandleChange()関数をターゲットの値を渡します。

const handleChange = (event) => {
   setdeviceView(event.target.value);
 };

setViewportDimensions()

これらの値は、setViewportDimensionsで行ったようにハードコードすることもできますし、動的なキャンバスサイズが必要な場合はjsonとして渡すこともできます。

const setViewportDimensions = () => {
   switch (deviceView) {
     case "desktop":
       setframeWidth(1280);
       return;
     case "tablet":
       setframeWidth(768);
       setframeHeight(1024);
       return;
     case "tablet-landscape":
       setframeWidth(1024);
       setframeHeight(768);
       return;
     case "mobile":
       setframeWidth(375);
       setframeHeight(667);
       return;
     case "mobile-landscape":
       setframeWidth(667);
       setframeHeight(375);
       return;
     default:
       return;
   }
 };

ちなみにUXPinのプレビューモードで、setViewportDimensionsで設定したセレクトメニューはこのような表示となります。

IFrameResize()

IFrameResizeは、ステート読み込み時と更新時にIFrameコンポーネントから実行されます。IFrameResizeは、setViewportDimensionsを呼び出して、ステートのプロップに基づきIFrameのサイズを変更し、現在のIFrame（#target）のコピーを作成し、そのプロップとスタイルを新しいIFrameに渡します。こうすることで、新しいIFrameが読み込まれると、プロップとして渡されたコンポーネントが、新しい IFrameの寸法内に配置されます。

実際のIFrameコンポーネントとドキュメントを比較してすると、内部にネストされる子コンポーネントにデータとCSSを渡すために必要なプロップ全てが用意されており、サンドボックスタグは、Frameがキャンバス自体と通信できるようにするために追加されています。

そしてFrameContextConsumerは、jssを全て受け取り、指定された場所にcssルールを挿入し、子コンポーネントに渡します。

IFrameコンポーネントにプロパティを渡すラッパーコンポーネント（DeviceViewer）であり、ページの更新やレイアウトを直接変更することなく、子要素を更新したり変更したりすることができます。

まとめ

ここまで紹介したUXPin Mergeでのソリューションは他社のデザインツールと比較してみると、非常に画期的なアイデアであることがお分かりいただけると思います。Mergeでは、プラグインの作成または編集、APIを呼び出してデザインツールに追加機能を追加する必要はありません。代わりに、実際のReactコンポーネントで実装できるものは全てMergeで全く同じように使うことができます。これによって、デザインプロセスは促進され、レスポンシブなWebデザインにすぐに対応できる柔軟で直感的なコンポーネントを自由に作成できます。

UXPin Mergeが、提供開始当初では想像できないほど、国内外問わず多くの皆様にデザインワークフローで採用していただいており、さまざまなユースケースもいただきました。本記事で、少しでもUXPin Merge について知っていただけると幸いです。

 Merge を最大限に活用するために、ぜひこちらのUXPinのコミュニティでアイデアを共有してください！

まずは14日間の無料トライアルを始めたい方はこちらより。

The post UXPin Merge による レスポンシブデザイン 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.

今回は、皆さんに喜んでいただき、インスピレーションを与えるために、最高の Webサイトデザイン の アイデア をいくつかまとめました。また、ターゲットオーディエンスのニーズとビジネスの目標に基づいた アイデア を生み出すための７ステップをご用意しました。

本記事では、デザイン会社、スタートアップ、中小企業、または個人事業主など、インスピレーションを求めている方に向けて、最高のWebデザインのトレンドと、それがどのようにユーザーの問題を解決しているかをご案内します。

世界で最も洗練されたデザインツールであるUXPinを使って、Webサイトのデザイン アイデア をプロトタイプ化し、テストしませんか。無料トライアルにサインアップしてUXPinの高度な機能を試し、Webサイト訪問者のためにより良い UX を作りましょう。

 Webサイトデザイン の アイデア の作り方

多くの企業は、Webサイトを利用した顧客獲得を目標としています。いい Webサイトデザイン には、美観やビジュアルデザインが不可欠ですが、Webサイトを成功させるには、ユーザー中心の考え方が重要です。

そこで、以下の７のステップを踏むことで、ターゲットに最適なWebサイトの アイデア や機能を見極めることができます。

ステップ１．徹底したユーザー調査の実施

まずは、ターゲットとするユーザー、そのニーズ、目標、動機などに関するデータの収集などのユーザー調査です。UXデザイナーは、インタビュー、調査、ユーザビリティテスト、フォーカスグループなど、さまざまな方法でこのデータを収集し、ユーザーペルソナを作成します。

ステップ２．Webサイトの主な目的の特定

調査によって、Webサイトの主な目的とユーザーへのサービスを決定します。また、調査でメッセージや言語の作成もできます。例えば、１０代のユーザーをターゲットにしたWebサイトと、定年退職者をターゲットにしたWebサイトとでは、外観が大きく異なります。このように、ユーザーによってニーズや優先順位が異なるため、ステップ１が非常に重要になります。

ステップ３．ユーザージャーニーマップの作成

ユーザージャーニーマップは、ユーザーがWebサイトで目標を達成するまでのステップを視覚的に表現したものであり、これによってユーザーの視点を理解し、潜在的なペインポイントや改善すべき部分の特定ができます。

ステップ４．デザインの アイデア 出し

ユーザーリサーチとジャーニーマップ（ユーザーフローが複数ある場合もあります）を使って、ユーザーの目標達成や、特定されたペインポイントの解決を支援するようなデザインアイデアをブレインストーミングします。ちなみに、UXデザイナーは、多くのアイデアを素早く生み出すために、スケッチやペーパープロトタイプをよく使用します。

ステップ５．アイデアの絞り込みと優先順位付け

アイデアを検討して、Webサイトの目的に合致し、ユーザーにとって最も価値のあるものを選びます。重要性と実現可能性に基づいて、アイデアの優先順位を決めましょう。

ステップ６．ワイヤーフレームとプロトタイプの作成

最善案を用いて、Webサイトのワイヤーフレームとプロトタイプを作成します。ワイヤーフレームによって、Webサイトの構造の視覚化や、情報アーキテクチャの確定ができます。

ワイヤーフレームを土台に、忠実度の高いプロトタイプを作成してアイデアを検証し、ターゲットユーザーや他のデザイナー、ステークホルダーからのフィードバックを収集するといいでしょう。

ステップ７．イテレーションと改良

フィードバックをもとに、デザインを変更し、改良します。このプロセスを繰り返すことで、サインアップ数、売上、ブログ閲覧数の増加などのビジネス目標を達成しつつ、ユーザーのニーズを満たす最終的なWebサイトが完成します。

ECサイトのデザイン アイデア ５選

１．クリエイティブなホバー効果

ウクライナを拠点とするブランドの Mr.Popsは、商品画像に巧みな絵文字のホバー効果が使われており、この小さなデザインの選択は、ユーザーをあっと言わせると同時に、- アイスクリームショップにぴったりの – 楽しくてポジティブなブランド印象を創り出しています。

キーポイント：細部にこだわり、クリエイティブでユーザーを魅了する繊細な方法を見つけること。こうした小さな工夫がブランドの認知度を高め、オンラインショップでの購入を後押しするのです。

２．「ブランドらしい」カラーパレット

ポップコーンのECブランドであるPopcornopolisは、明るい色を使ってブランドの認知度を上げ、各ページの最も重要な機能を強調しています。また、デザイナーは、最も重要なコンテンツとCTA（Call to Action: 行動喚起）を商品ページの上部に配置し、ユーザーがチェックアウトまでたどり着き、素早く購入を完了できるよう、素晴らしい仕事をしています。

キーポイント：カラースキームは最も重要なブランド要素のひとつですが、同時に、ユーザーの目的達成をサポートするものでないといけません。また、コンテンツに優先順位をつけ、スクロールを減らすために、最も重要なデザイン要素をフォールドの上に表示することも重要です。- それによって、ユーザーの購買がもっと速く完了するでしょう。

３．大胆なミニマリスト・タイポグラフィ

Wukiyoでは、文字を読みやすくするのに大胆なミニマル・タイポグラフィが使われています。また、最も重要なCTAである 『ADD TO CART （カートに入れる）』には、鮮やかなブルーの特大ボタンが使われており、落ち着いた色調のWebサイトの中でこのブルーが際立っています。

キーポイント：読みやすいフォントを選びましょう。また、コンテンツに優先順位をつけ、ユーザーが判断するのに十分な量だけ表示するようにします。そして最後に、最も重要なCTAを必ずサイズと色で目立つようにしましょう。

４．ショッピングカートの引出し

プレミアムソーダブランドのPerfyは、大胆な色使いと UI 要素で、ブランドと製品群を強化しています。カートに商品を入れると引き出しが開き、買い物カゴとチェックアウトへの CTA が表示されます。

また、引き出しには、Perfy の配送や返金に関するポリシーなど、迷いを解消するための重要なメッセージが表示されており、その下には、ビジネスの価値を上げるためのオススメ商品が並んでいます。

キーポイント：ユーザーが迷うことなくチェックアウトできるようなデザインをしましょう。ユーザーがメッセージを速やかに理解し、決断できるように、必ず明確で簡潔な言葉を使うようにしましょう。

５．製品ページの上部に表示

Popcornopolisと同じく、Verve Coffee Roastersも３カラムの商品ページレイアウトを採用しています。主要なCTAは十分な空白で囲まれ、価格と数量を選択することで、いちばん重要なCTAを目立たせており、商品詳細では、ユーザーが素早く決断できるように、長い説明文ではなくキーワードが使われています。

Verveのカートの引出しでは、買い物客に送料無料を知らせると同時に、取引額を増やすべく関連商品が「Customers Also Love（こちらもオススメ）」で出てきます。

キーポイント：読みやすさのために製品ページを最大限に活かし、文字と画を組み合わせることで、できるだけ色々と読まないでいいようにしましょう。 重要なコンテンツを目立たせるために遠慮なく空白を使いましょう。 さらに、eコマースのWebデザインには、アップセルやクロスセルによって取引額を増やすような仕組みが入っていないといけません。

SaaS/デジタル製品のWebデザインの アイデア ５選

１．価格設定ページのミニマムデザイン

11Sight の価格ページでは、白黒のデザインに明るいグリーンのアクセントが加わり、重要なコンテンツとアクションが強調されています。また、ユーザーと企業にとって最も価値のあるプレミアムプランに注目が集まるよう、コントラストを効かせたレイアウトが採用されています。

キーポイント：サイトの訪問者にわかりやすいように、文字や余計な注意を引くものを最小限に抑え、CTAを目立たせた価格ページをデザインしましょう。

２．空白スペースで注目を集める

Agorapulseのトップページは、余白を多くとった１カラムのデザインで、タイトルとCTAに瞬時に目がいくようになっており、ユーザー目線からの製品の主な利点もうまくまとめられています。CTAは２つありますが、明るい背景と軽い文字で、どちらが重要かが一目瞭然です。

Agorapulse は固定ヘッダーの案内バーを使って、ユーザーがスクロールしてもこれらのCTAが見えるようにし、それによってユーザーはいつでもアクションを起こせるようになっています。

キーポイント：CTAが複数ある場合は、必ずメインのアクションが他のアクションよりも目立つようにします。製品のメリットや特徴をできるだけページの上の方で強調し、サイト訪問者があなたのビジネスで何ができるかがきちんと分かるようにしましょう。

３．ストーリーを語る

ベンチャーキャピタルのNordic Eye は、ホームページのヒーローにビデオを使ってブランドストーリーを伝え、サイトの訪問者とすぐにつながることができるようにしています。ビデオやビジュアルは、あなたが何者で何をしているのかをユーザーに伝えるとてもいい方法です。ちょっとした製品デモやウォークスルーなどで、ユーザーは製品について学べ、その製品が問題を解決してくれるかを判断することができますからね。

キーポイント：ビデオは、瞬時につながりを生み出し、製品/会社の強みを示すことができる強力なメディアです。UX（ユーザーエクスペリエンス）のためのビデオ最適化のヒントについてしっかり調べておきましょう。

４．ターゲットに語りかける

投資アプリの「Alinea」は、ターゲットであるZ世代に、親しみやすく共感できる言葉を使って直接語りかけます。デザイナーは、目立つCTA、ソーシャルプルーフを示すアプリストアのレビューウィジェット、製品を取り上げた主要なメディア出版物を備えた巧妙なホームページのヒーローデザインを使っています。

キーポイント：うまくいくWebデザインには、ターゲットとするユーザーと彼らがいちばん重視するものの把握が重要です。ホームページのヒーローは、訪問者が行動を起こす前に、なぜ製品が存在するのかを説明し、疑念を解消するものでないといけません。

５．機能横断的なアプリサイト

デジタル製品の多くは、Webのアプリケーションとモバイルのアプリケーションを提供していますが、Weera のホームページでは、家族向けのアプリを利用するために、Web、iOS、Androidの３つの選択肢が用意されています。このように、ユーザーが自分の好きな媒体で製品を試せるようにすることで、申し込みの可能性を高めています。

キーポイント：クロスプラットフォームのアプリケーションの場合、ユーザーがデジタル製品をどのように体験するかを選べるようにしましょう。その選択肢をページのできるだけ上部に配置することで、スクロールを減らし、コンバージョンを増やすことができます。

 Webサイトデザイン の アイデア を得るためのリソース

Webデザインのインスピレーションをお探しの方に、オススメのリソースをいくつかご紹介します。

• Awwwards：世界の優れたWebデザインを集めた膨大なコレクション
• Themeforest：WordPress のテーマ、Webサイトテンプレート、プラグイン、デジタルツールの世界最大市場
• Behance：UI デザインの アイデア を共有するデザイナーのためのソーシャルネットワーク
• Dribbble：Behanceの類似サイト

UXPinで人を魅了するWebサイトを構築してみませんか

UXPinの高度なデザイン技術により、デザイナーは最終製品に匹敵する機能性と忠実性を備えたWebデザインの アイデア をプロトタイプ化してテストすることができます。

UXPinがあれば、デザイナーはエンドユーザーやステークホルダーから有意義なフィードバックを得ることで、より精度の高いイテレーションを行い、高品質な結果を出すことができます。

Webサイト、ランディングページ、ECストア、クロスプラットフォームアプリケーションを新たに構築する場合でも、UXPinは最終製品と同じ外観と感触のインタラクティブなプロトタイプを作成するためのツールと機能を提供します。

世界最先端のデザインツールで、Web開発をレベルアップしませんか。UXPin の無料トライアルにサインアップして、UXPinの高度な機能をぜひお試しください。

The post Webサイトデザイン 参考 アイデア・事例のご紹介 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.

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

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

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

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

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

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

フッターの目的

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

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

販売面のメリット

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

マーケティング効果

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

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

フッターに含むもの

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

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

ナビゲーションリンク

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

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

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

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

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

お客様の声

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

著作権

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

フッターのデザイン法

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

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

2. シンプルイズベスト

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

3. 単一のCTAを使用

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

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

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

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

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

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

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

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

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

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

8. お役立ち情報の提供

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

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

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

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

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

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

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

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

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

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

マテリアルデザインとは

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

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

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

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

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

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

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

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

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

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

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

3種のスタイル

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

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

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

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

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

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

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

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

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

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

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

CSS/CDN

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

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

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

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

デザイナーの使用方法

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

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

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

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

ウェイト

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

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

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

サイズと配置

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

訪問者は、ウェブサイトのデザインからあなたのビジネスに対する意見を0.05秒で形成すると言われています。例えばUX（ユーザーエクスペリエンス）が低いと、直帰率が高くなり、 コンバージョン率 が低下するというネガティブな感情が生まれます。

Webサイトのコンバージョン率に与えるUXデザインの影響を理解するというのは、潜在的な障害の排除やビジネス価値の形成、デザインプロジェクトにもたらす高いROI（投資収益率）の鍵になります。本記事では、Webサイトのデザインがコンバージョンに与える影響と、デザインチームがマーケティングキャンペーンを改善する方法についてお話します。

 コンバージョン率 の最適化について学びましょう

UXPinでプロトタイプで得られる有意義なインサイトを使い、 コンバージョン率 の最適化するアイデアをテストして、よりよいUXをデザインしませんか？

無料トライアルにサインアップして、コードベースのデザインにるUXワークフローの強化やWebサイトのコンバージョン率の向上、顧客へのより良い体験の提供方法をぜひご覧ください。

ウェブサイトの コンバージョン率 の最適化とは

ウェブサイトのコンバージョンには、販売の成功、見込み客、フォーム入力や、その他訪問者に完了してほしいタスクが含まれ、コンバージョン率の最適化は、訪問者がこのようなタスクを完了する機会を増やすための手法です。

このコンバージョン率の最適化の多くは、ウェブデザインとUXに起因しており、UXデザイナーの仕事になります。最適化のためのデザインとは、UXチームが、ユーザーが何を必要としているのか、そしてUI（ユーザーインターフェース）はどのようにすればそのゴールへ最も早く導くことができるのかを理解しなければならないということです。

デザインがコンバージョン率に重要な理由

ウェブデザインはコンバージョン率において重要な役割を果たします。以下は、それを裏付ける統計データです：

• ウェブサイト訪問者の38%は、魅力的でないコンテンツやレイアウトのウェブサイトを見ると、そのウェブサイトとの関わりをやめてしまう
• 訪問者の48％が、ウェブサイトのデザインが企業の信頼性を判断する一番の要因であると考える
• モバイルファーストのウェブデザインを採用した企業の68％が、売上が増加したと回答している
• 訪問者は大抵８秒後にウェブサイトを離れてしまうため、デザイナーはユーザーのニーズを満たすのに、ユーザーインターフェースとコンテンツを優先させなければならない

第一印象の設定

ウェブサイトのデザインは、多くの場合、顧客との最初の接点と、それでブランドがどのように認識されるかということになります。美的感覚に優れたUIやエクスペリエンス、コンテンツで顧客に感銘を与えるのは、ウェブサイトのトラフィックを、収益を生む顧客に転換するための第一歩となります。

SEO対策

SEO（検索エンジン最適化）は、無料のオーガニックトラフィックを提供するため、ウェブサイトにとって不可欠です。UX デザイナーは、コンテンツ、レイアウト、および階層構造を最適化するために、検索エンジンが Web ページをクロールしてインデックスを作成する方法を理解していなければいけません。

アクセシビリティ

ウェブアクセシビリティは、SEOの要素のひとつですが、様々な人向けのウェブサイト体験の実現にも不可欠です。UXデザイナーは、弱視、色盲、視覚障がい、認知障がい、聴覚障がい、移動障がいなどのハンディキャップを考慮し、WebサイトがWCAG（ウェブコンテンツのアクセシビリティに関するガイドライン）を確実に満たしていなければいけません。

信頼感の向上

信頼は、訪問者のコンバージョン率をあげるための重要な要素であり、顧客は、お金や個人情報を渡す前に、あなたの会社やウェブサイトが信頼できるものであることを知りたいと思うものです。そこで、優れたウェブデザインは、あなたがブランドを大切にし、ビジネスを評価し、実店舗に人を迎え入れるような良いユーザー体験を与えたいと考えていることを顧客に伝えています。

ROI（投資収益率）のデザイン

デザイナーは、UXはともかく、デザインのROI（投資収益率）を高めるために、コンバージョン率をあげる重要性も認識しなければなりません。機会やコンバージョンを増やすことは、組織におけるデザインの価値を確立することにつながります。

コンバージョン率をあげるためのデザインのヒントとUIのパターン

1. CTA（Call To Action）

CTA（Call To Action）は、コンバージョン率の最適化に不可欠です。CTAは、CTAボタンやメールフォームのように、希望するアクションを起こすためのUI要素を備えた提供で、ユーザーの注意を引きます。CTAボタンは通常、その重要性を示し、エンゲージメントを促すために、カラフルで他のコンテンツよりも大きく表示されます。

2. ランディングページ

HubSpotの調査によると、”ウェブサイトにランディングページがあるビジネスほど、見込み客の発生が多い “という結果が出ていることから、デザイナーとマーケターが協力して、高品質で見込み客を生み出すランディングページをデザインするといいでしょう。

ランディングページは、通常のウェブページとは異なり、気が散るものを排除してユーザーを1つの製品またはCTAに集中させるために、ナビゲーションやリンクはすべて取り除きます。

3. お客様の声

お客様の声やレビューは、特に著名人やブランドからのものであれば、ソーシャルプルーフを示すのに不可欠です。お客様の声は、製品を使ってその恩恵に満足している人がいることをウェブサイトの訪問者に伝えてくれますからね。

マーケティングソフトウェア大手のHubSpotによると、「人はレビューや体験談を参考にして、製品やサービス、さらには販売者を信頼するかどうかを判断する 」とのことです。

4. 価値提案

価値提案は、あなたの製品がどのような問題を解決しているかを顧客に伝えるものです。例えば、高速インターネットを販売している場合、あなたの価値提案は、顧客が「バッファリングや中断なしにNetflixやYouTubeのビデオをストリーミングできる」ことです。高速通信やインターネットについてはどこにも触れず、「解決策」を売っているのです。

マーケティング担当者は一般的に、価値提案をアバブ・ザ・フォールド（Webサイトを訪れた際に、スクロールをせずに目に入ってくる画面領域）、CTAの横に置きます。顧客は、自分の問題に対する解決策（価値提案）を見て、リンクをたどって申し込むのです。

5. お問合せ先

メールアドレスや電話番号などのお問い合わせ先を探すのに、ビジネスのウェブサイトを訪れることがよくありますが、多くのウェブサイトでは、そのような情報をメインナビゲーションの上にあるヘッダーバーに掲載しているため、ユーザーはスクロールしたり、別のページに移動したりすることなく、お問合せ先を見つけることができます。

デザイナーは、ユーザーがクリックしてメールや電話をかけられるように、HTMLのリンク属性に「tel:」や「mailto:」を含めるようエンジニアへの指示が必要です。

6. 価格設定

価格設定は、特にSaaSなどのサービス型ビジネスにおいて、人が企業のウェブサイトを訪れるもう一つの理由です。製品のプランを比較する価格表のUIパターンは、ユーザーにとって便利であり、その透明性が信頼を築きます。デザイナーは、ユーザーが希望するオプションにサインアップし、オンボーディングプロセスを開始できるよう、常にCTAを含めなければいけません。

7. 人の顔

商品画像に人の顔を使うことは、人間的なつながりを生み出し、親しみやすいコンテンツにするために非常に重要です。また、アバウトページには、チームメンバーのプロフィール画像を掲載し、ブランドの個性の表現が必要です。

Onextrapixelに「On How To Use Human Face To Improve User Experience」という、有名ブランドのウェブサイトの例がいくつか紹介された興味深い記事があります。

8. ネガティブスペース

ネガティブスペースやホワイトスペースは、CTAや重要な要素、コピーなど特定のコンテンツに注意を引くための優れたウェブデザイン手法です。また、デザイナーは、読みやすくしたりコンテンツを別々にするのに、テキストやUI要素にも適切なネガティブスペースを使う必要があります。

9. ケーススタディ

B2Bサイトでは、製品がどのように問題を解決し、結果をもたらすかを示すケーススタディが不可欠です。

たとえば、UXPinブログでは、”How PayPal scaled How PayPal Scaled Their Design Process with UXPin Merge “というケーススタディが紹介されています。世界最大のテック企業の1つから採用されるということは、Mergeに大きな信頼性を与え、製品が機能することを実証しています。

10. 読み込みのスピード

読み込み速度の最適化は通常、エンジニアリングチームの責任ですが、デザイナーはページの読み込み時間を短縮するために、以下のように多くのことをすることができます：

• レスポンシブデザインのベストプラクティスを用い、レイアウトとコンテンツをデスクトップ、タブレット、モバイルデバイスに最適化する
• ユーザーのより早い目標到達を妨げるような、余計な「あれば便利」的機能や特徴を排除する
• コンポーネントやマイクロインタラクションを再利用して、CSSやJavascriptのファイルサイズを最小化する方法を見つける
• PNGよりもJPGを使用し、配置やウェブレイアウトに応じて画像を拡大・最適化する
• ロゴ、アイコンなどのグラフィックにはSVGを使う

CRO（コンバージョン率の最適化）

ここでは、デザインチームがウェブサイトのコンバージョン率を分析し、最適化するためのヒントをご紹介します。デザイナーは、このようなテストを既存のウェブサイトに使ったり、新しいアイデアをテストしたりすることができます。

A/Bテスト

A/Bテスト（スプリットテスト）とは、2つのデザインを比較して、どちらがより良いパフォーマンスを示すかを判断する手法です。UXデザイナーがウェブサイトやランディングページを最適化するために小さな変更を加える、反復的なプロセスです。

A/Bテストを成功させるコツは、色、コピーの言い回し、フォント、画像など、細かい変更を比較することであり、全く異なる2つのデザインを比較すると、何が具体的にコンバージョンを増加させたの判断が難しくなります。

多変量解析テスト

多変量解析テストはA/Bテストに似ていますが、デザインチームは2つのバリエーションだけでなく、複数のデザインをテストします。デザイナーは、複数のレイアウトを同時にテストすることで、より早く最適な選択肢を導き出すことができます。

このテストは、デザイナーが訪問者を複数のグループに分けることができ、なおかつ正確な結果を得るのに十分なサンプルサイズを確保できる、トラフィック量の多いウェブサイトでのみ有効です。

ヒートマップ

ヒートマップで、ウェブサイト訪問者がウェブページやコンテンツにどのように関わっているか、特にホバー、スクロール、クリック/タップのインタラクションについてインサイトを出すことができます。デザインチームはこのデータを使って、次のことを判断します：

• CTAとユーザージャーニーは明白か
• どのナビゲーションリンクが最も重要か
• ユーザーはどの程度スクロールするか
• 訪問者の行動を妨げるようなUI要素はあるか
• ページ下部のリンクやコンテンツは、アバブ・ザ・フォールドにあるものよりも価値があるとユーザーが感じるか、つまり、視覚的な階層がユーザーの行動と一致しているか

デザイナーのためのGoogle Analytics

GA（Google Analytics）は、人口統計、ユーザーフロー、オーガニック、SNS、紹介などのトラフィックソース、および行動について、デザイナーに多くの情報をもたらします。GAは、最もパフォーマンスの高いページと最も低いページを特定し、ユーザーがどこでファネルを抜けることが多いかを把握するための素晴らしいツールであり、デザイナーはGAデータを使った問題の特定や、テストやエンドユーザーへのインタビューの実施で、問題を突き止めることができます。

このツールとその機能をもっとよく理解するには、アリス・ウォーカー氏の「The ultimate guide to Google Analytics for UX designers」を読むことをお勧めします。

UXPinでプロトタイプとテストを改善し、ウェブサイトのコンバージョン率を上げよう

UXチームがWebサイトデザインのプロトタイプやテストを行う際、画像ベースのデザインツールでは忠実度や機能性に欠けることが課題のひとつとなっています。

ユーザーフローやコードの忠実度や機能性を再現しなければ、UXデザイナーは正確なフィードバックやインサイトを得ることができず、コードベースのプロトタイプを作成するには、フロントエンドデベロッパーに頼らざるを得ません。

UXPinのコードベースのデザインツールがあれば、デザイナーは一行のコードも書かずに、同じ忠実度と機能を実現できます。UXPinのプロトタイプは、テスト時に正確で実用的な結果をもたらし、デザイナーはデザインハンドオフの前に、より多くのユーザビリティ問題を解決することができます。

デザイナーは、ウェブサイトのユーザーフロー、ランディングページ、eコマースのチェックアウトなどを正確に複製し、実際のエンドユーザーとプロトタイプをテスト、反復、最適化することができます。

UXPinで正確なプロトタイピングとテストを行うことで、ウェブサイトのUXをより明確に把握することができます。無料トライアルにサインアップし、コードベースのデザインでウェブサイトのデザインを最適化し、コンバージョン率を高める方法を是非ご覧ください。

The post コンバージョン率 をあげるウェブデザインとは？初心者ガイド appeared first on Studio by UXPin.

デザインツールを使ったプロトタイピングの課題のひとつとして、忠実度と機能性の不足で、デザイナーが包括的で正確なユーザーテストを完了することができないという点があります。 ​​

 ライブデータ プロトタイプは、ユーザー入力のデータでコードの動的な体験を複製することで、このプロトタイプの問題を解決しようとするものです。デザイナーは、ライブデータ機能を実行できるコードベースのプロトタイプを構築するのに、フロントエンドデベロッパーやUXエンジニアとの共同作業が必要になります。

 ライブデータ プロトタイプとは

 ライブデータ プロトタイプは、例えばサインアップフォームからユーザーの名前を取得してカスタムウェルカムメッセージを作成するといったように、ユーザー入力、データベース、APIからの情報を使用して、最終製品のようなダイナミックでカスタマイズされたエクスペリエンスを作成します。

 ライブデータ プロトタイプは通常、API、OTPのメール/テキスト、その他の複雑なユーザーインタラクションなど、ユーザーによって引き起こされる単一のタスクまたはシーケンスのテストをしますが、プロトタイプは、おそらく1つまたは2つのスクリーン、あるいは1つのコンポーネントになります。

リソースを大量に消費するプロセスであるため、デザイナーは、ユーザビリティの問題を伴う可能性や製品の障害を引き起こす可能性のある機能のために、このようなライブデータプロトタイプを準備します。そのため、構築のための時間とリソースを正当化することができるのです。

あいにく、デザイナーは画像ベースのツールを使ってライブデータプロトタイプを作ることができず、ベクターデザインのツールを使う場合は、エンジニアにコードで開発してもらうのが一般的ですが、これはかなり時間とコストがかかる作業です。

とはいえ、代替手段はあります。UXPinのようなコードベースのデザインツールやその革新的なMergeの技術で、チームがデザインとコードで同じUI要素を使用できるようになり、それにより同じ信頼できる情報源を使用することができます。UXPinがどのように機能するかは、これから見ていくことにしましょう。

 ライブデータ プロトタイプの構築法

製品デザインチームには、ライブデータプロトタイプを構築する際に選択肢がいくつかあります：

• コード： HTML、CSS、Javascriptは、正確で実用的なフィードバックをもたらす最終製品と同じ機能性と忠実性を提供するが、デザイナーにはそれらを構築するエンジニアが必要。
• ローコードビルダー：エンジニアを介さず、プラットフォームの制約の中でプロトタイプを構築できるが、デザイナーがテストできる内容は限定される。
• デザインツール：UXPinのようなコードベースのデザインツールで、デザイナーが実際のデータ、API、コードコンポーネントなどを使って構築、プロトタイプ、テストを完全にコントロール可能。

ライブデータ vs. リアルデータ

ライブデータとリアルデータのプロトタイプの識別は重要です。 ​​ライブデータプロトタイプは、ライブで動的なデータを提供し、情報はソースと同期して動的に変化します。以下のように、名前とメールアドレスを入力する基本的なサインアップフォームを見てみましょう：

• 名前 ジョー・キング
• メール： joeking@uxpin.com

ライブデータプロトタイプでは、ジョーが自身の名前とメールを入力することができ、気分次第で別のメールアドレスに変えたり、スペル違いもできます。つまりライブデータプロトタイプは、ジョーが入力したデータをそのまま捉えるのです。

一方、リアルデータプロトタイプは静的なものです。フォームフィールドが機能せず、データを取得できないため、デザイナーはジョーの情報を使ってリアルデータプロトタイプへの事前入力が必要です。プロトタイプはジョーの本当の名前とメールを使用しますが、情報は静的で、変更やインタラクションへの反応はできません。

 ライブデータ プロトタイプの例

デザイナーは、UXPinのコードベースのデザインツールを使って、ライブデータプロトタイプを構築することができます。UXPinの無料サインアップフォームテンプレートは、ステート、変数、条件付きインタラクションを使って、メールとパスワードの有効化と個別化されたメール確認をシミュレーションするいい例です。

  このプロトタイプは，ユーザーの入力に反応し、メールとパスワードのフィールドにエラーメッセージを表示します。パスワードは8文字以上で、メールは正しくフォーマットされていなければいけません。もし、ユーザーが何も入力せずに「SIGN UP」ボタンをクリックすると、該当する入力欄の下には「空白にできません」というエラーメッセージが表示されます。

UXPinの無料サインアップフォームのテンプレートは、このような手順で編集することができます。

 ライブデータ プロトタイピングを使うタイミング

このリストは決して完全なものではないですが、以下はライブデータプロトタイプの最も一般的な使用例です。

1. ユーザートリガー機能

ライブデータプロトタイピングは、ユーザーデータやインタラクションに依存する通知やAPIをテストするのに有益であり、例えば、テキストやGoogle Authenticatorを使用した2段階認証を設計している場合、ライブデータプロトタイプでのこの機能のテストは非常に重要です。

2. MVPテスト

ライブデータプロトタイプは、MVP（Minimum Viable Product：ユーザーに必要最小限の価値を提供できる製品）をテストしたいスタートアップ企業にとって最適です。このMVPで、アイデアの望ましさ、実行可能性、実現可能性をテストし、製品開発プロセスにコミットする前に、テストと反復を行うことができます。

このようなライブデータプロトタイプは、概念実証のための正確な結果を得るのに十分包括的なものですが、無駄がないので、構築や変更に時間がかかりません。

3. A/Bテスト

マーティ・ケーガン氏は、SVPG社（Silicon Valley Product Group）が製品発見時のA/Bテストにライブデータプロトタイプを使用する方法について説明しています。製品チームは、開発に着手する前に、同じ画面やフローの軽量な2つのオプションを作成して、最適なオプションをテストすることができます。

画像ベースのツールによるライブデータプロトタイピングの長所と短所

長所1 – 有意義なステークホルダーのフィードバック

画像ベースのプロトタイプの課題の一つは、デザイナーがステークホルダーにリアルな製品体験を提供できず、賛同が得られにくいことです。 画像ベースのプロトタイプでは、ステークホルダーやユーザビリティの関係者は、自らが情報を入力するか、アプリが複雑なタスクを実行したことを「イメージ」しなければいけません。

ライブデータプロトタイプだと、ステークホルダーの入力へ反応し、動的で個別化されたユーザーエクスペリエンスを実現することで、彼らにに製品の正確な表現が提供されるのです。

長所2 – ユーザビリティテストの改善

UXデザイナーは、デザインを引き渡す前にユーザビリティの問題をテストして解決することを目標としています。ライブデータプロトタイプで、忠実度と機能性が大幅に向上され、デザインチームにユーザーテストからの実用的なフィードバックがもたらされます。

たとえば、フォームのエラーがユーザーの問題解決に役立っているかどうかを、デザイナーはどのようにテストすればよいのでしょうか。ライブデータプロトタイプの動的な性質により、デザイナーはスペルミス、パスワード認証、メールフォーマットなど、複数のシナリオをテストすることができます。

長所3：エラーの減少

ライブデータのテストにより、デザイナーはデザインプロセスにおいて、より多くのユーザビリティの問題を解決することができます。エラーが少ないということは、手直しが少ないということであり、企業の人件費の削減に繋がります。

短所1：プロトタイピングに時間がかかる

ライブデータプロトタイピングは、プロトタイプを開発するのにエンジニアに依存しています。ドラッグ＆ドロップ式のデザインツールとは違って、コーディングには時間がかかり、また、プロトタイプの構築には多くのチームメンバーも必要であり、結果としてコスト増と市場投入までの時間の遅れを招きます。

短所2：賛同の獲得

コーディングスキルを持つデザイナーやUXエンジニアでない限り、ライブデータプロトタイプの構築は、デベロッパー抜きには不可能です。つまり、エンジニアリングチームやステークホルダーの賛同が不可欠なのです。

短所3：限られた範囲

ライブデータのプロトタイプを作るには時間とリソースが必要なため、デザイナーが作成やテストできることは限られています。そのため、デザイナーは通常、正確な結果を必要とする大きな問題に対して、このプロトタイプを準備します。

UXPinでエンジニアいらずのライブデータプロトタイピング

UXPinのようなコードベースのツールを使えば、デザイナーは高度なライブデータプロトタイプを、エンジニアにそれほど頼らずに構築することができます。 UXPinプロトタイプは、デザイナーがテストをする際に有益なだけでなく、エンジニアが最小限の文書と説明ですべてがどのように機能するかを正確に確認できるため、デザインハンドオフのプロセスも効率化されます。

機能的なユーザー入力

大抵のプロトタイピングツールはフォーム入力が機能しないため、ユーザーデータに依存する機能をテストすることができませんが、UXPinのコードベースのプロトタイプには、デザイナーがコードを模倣するようにプログラムできる機能的な入力が備わっています。

UXPinのサインアップフォームの例には、一般的にコードプロトタイプを必要とするよくあるエラーや認証を、デザイナーがどのようにテストできるかが示されています。

UXPinでAPIを使用する

デザイナーは、会議予約アプリにGoogleカレンダーの招待状を送るなど、UXPinのプロトタイプをwebhooks経由で他の製品やサービスに接続するのにIFTTTを使うことができます。

IFTTTには、メール、SMS、プロジェクト管理、IoT製品、チャット、SNSなど、UXPinアプリに接続できるサービスが700以上あります。

IFTTTを通じて外部サービスを統合することで、デザイナーはエンジニアの手を借りずに数クリックでライブデータのプロトタイプを接続することができ、UXPinには、デザイナーがAPIデータの送受信ができるように、GETまたはPOST HTTPリクエストのアクションがあります。

リアルデータの取り込み

デザイナーは、JSON、Google Sheets、またはCSVを使用してリアルデータをUXPinプロトタイプに取り込むこともできます。UXPinでは、レイヤー名でコンテンツを一致させる機能や、画像用のUnsplashを使用して、ダミーデータをフィールドに入力することもできます。

このようなコンテンツやデータ機能により、デザイナーは、ライブデータ、リアルデータ、ダミーデータなど、ソースに関係なく、あらゆるフィールドにデータを入力することができます。

UXPin Mergeによる完全に機能するプロトタイプ

デザイナーはUXPin Mergeを使用して、ライブデータプロトタイプを次のレベルに引き上げることができます。デザイナーがコードコンポーネントを使用して完全に機能するプロトタイプを構築できるように、デザインシステムやコンポーネントライブラリをUXPinに同期させましょう。

Merge を使用すると、デザイナーはコードを使用するエンジニアと同じ機能を備えた忠実度の高いプロトタイプを作成できます。コードを書く代わりに、デザイナーはコンポーネントをドラッグ＆ドロップするだけで、ライブデータ プロトタイプの構築ができるのです。

以下は、デザイナーが Merge を使用して作成できるライブ データ プロトタイプの例です：

• 完全な機能を持つ日付ピッカー
• ユーザーの入力に応じて変化するグラフとチャート
• ユーザーがフィルタリング、仕分け、編集できるデータグリッド
• ページネーションと検索フィールドの機能
• サインアップ、メール購読などの各種フォーム
• eコマースと注文フロー

Merge のライブデータプロトタイピングは、デザイナーがプロトタイプを作成するのにエンジニアに頼る必要がないということです。また、追加リソースを正当化するために、毎回ステークホルダーから賛同を得る必要もありません。

また、Merge はコードベースのプロトタイピングを組織の他のメンバーにとってもより身近なものにします。ちなみに、デザイン ツールの経験がほとんどない PayPal の製品チームは、従来のデザイン ツールを使用する経験豊富な UX デザイナーよりも Merge を使用した方が 8 倍も速くプロトタイプを作成することができます。

UXPin Mergeを使用すると、すべてのプロトタイプを没入型ライブデータプロトタイプにすることができ、また、デザイナーはこれらの完全に機能するプロトタイプを、従来の画像ベースのデザインツールよりも速やかに構築することができます。

世界最先端のデザインツールでプロトタイプとテストを始めてみませんか？無料トライアルにサインアップして、UXPinで、顧客により良いユーザー体験の提供、デザイナーとデベロッパーの連携の強化、エラーの削減、エンドツーエンドのデザインプロセスの効率化をぜひご体験ください。

The post ライブデータ プロトタイプとは？ appeared first on Studio by UXPin.

  フィンテック  （FinTech：金融機関に関するテック）はどの分野にとっても一筋縄ではいかない業界ですが、特にUXデザイナーにとってはそうでしょう。 フィンテック のデザインにおいて、デザイナーは州や国によって異なる金融規制を勉強しなければならず、その金融規制は詳細かつ広範であることが多いです。ということは、デザイナーはプロジェクトの始動前に多くの読み物が必要であるということです。

本記事では、 フィンテック 製品デザインの基本について、製品がユーザーに優しく、コンプライアンスに適合し、顧客に最大限の価値を提供するためのベストプラクティスを含めてお話します。

UXPinは、暗号通貨製品をデザインするフィンテックスタートアップ企業でも、モバイルバンキングアプリに革命を起こそうとしている既存の多国籍企業でも、より高い忠実度と機能を備えたプロトタイプとテストのための洗練されたコードベースデザインツールをUXデザイナーに提供します。無料トライアルにぜひサインアップして、UXPinの高度なコードベースの機能をぜひすべてご体験ください。

 フィンテック とは

フィンテック（Financial Technology）とは、金融テクノロジーの製品やサービスを生み出す市場部門を指し、このような金融商品には、業界の革新と改善を目指すアプリケーション、API、あるいはアルゴリズムが含まれます。

フィンテック の例

以下は、フィンテックの例です：

• ネットバンキング（ネオバンクとも呼ばれる）：Monzo (イギリス)、Chime (アメリカ)
• デジタルお財布： Payoneer、Skrill、Revolut
• 決済サービス：PayPal、Venmo、Cash App、Stripe
• 投資サービス：Robinhood、Betterment
• 暗号化商品:：Coinbase、Ripple

フィンテックの事例については、Insider Intelligenceのフィンテックスタートアップの記事をご覧ください。

 フィンテック のUXデザインの課題

1. コンプライアンスへの挑戦

企業コンプライアンスは、フィンテックデザインの最大の課題の1つです。複数の国や世界中のユーザーを対象に製品をデザインする場合、異なった法律に準拠するために市場ごとにデザインを変更することがあります。

例えば、AML（マネーロンダリング防止）やKYC（顧客情報保護）などの規制には、オンボーディングやユーザーフローに影響を与える詳細なプロトコルがあり、こういった規制には、ユーザーの識別、プライバシー、不正防止、アクセシビリティ、さらにはテロリズムなどに関する複雑なレイヤーが追加されています。

さらに複雑なことに、州や国がこのような法律を定期的に更新したり、新しい法律を導入したりするため、UX研究者やデザイナーは、コンプライアンスの維持のためにデザインを修正しなければならず、それによって製品のロードマップやUX戦略がぐちゃぐちゃになってしまう可能性があります。

2. 顧客の期待に応える

規制とは別に、UXデザイナーは、レガシー（旧式）バンキングや金融サービスからの顧客の期待も乗り越えなければなりません。例えば、多くのネオバンクは顧客のために実店舗を持たないので、アプリは対面での体験を再現するツールや機能を提供しなければなりません。

3. 製品の複雑さへの対応

フィンテックデザインのもう一つの課題は、製品の複雑さと、UXデザイナーがまとまりのあるエコシステムをどのように作るかであり、フォーブス誌では、それを「断片化から生態系への転換 」と表現しています。

従来の銀行や金融機関は、クレジット、小切手、預金、住宅ローン、ローンなど、商品ごとに異なる部門が担当しています。デザインチームは、適切な連絡と連携がなければ、シームレスな顧客体験を提供する全体的なエコシステムではなく、断片的な製品をデザインしてしまう危険性があります。

セキュリティプロトコル

フィンテックのセキュリティプロトコルは、UXのワークフローや、デザイナーがリサーチを実施、共有、保存、分析する方法に影響を及ぼします。UXチームは、ISO-27001（ISMSの要求事項などをまとめた規格）やISO-27002（実践規範の規格）など、さまざまなセキュリティプロトコルに準拠する必要があります。

また、UXデザイナーは、安全なパスワード、OTP（ワンタイムピン）の共有、テキストや電子メールのリンクに注意するなど、安全な習慣を採用するようユーザーに促す必要があります。

 フィンテック アプリデザインの8つのヒント

1. クリーンなUIデザイン

クリーンでミニマルなUIはあらゆるデジタル製品に不可欠ですが、免責事項やポリシーへのリンク、その他の必要な情報を掲載するスペースを確保しなければならないことが多いフィンテックのデザインだとなおさらです。

段階的開示は、複雑なフィンテック UIをデザインする際によく使われる戦略です。UXデザイナーは、重要かつ必要なコンテンツのみをユーザーに表示し、その他の情報はツールチップ、ドロップダウン、アコーディオン、モーダル、その他のUXパターンの背後に「隠す」のです。

段階的開示のアプローチにより、デザイナーはきれいなUIを作りながら、ユーザーが必要なときにコンテンツを提供することができます。

2. 明確でシンプルな言語

金融商品・サービスは、その条件が長く複雑で、多くの人が理解できないことで知られています。

言葉を簡素化し、ユーザーに明確な予測を持たせることは、フィンテック製品のデザインにおいて非常に重要です。また、それによって金融の専門用語やその意味を理解していないユーザーとの信頼関係も構築できるのです。

例えば、クレジットの申し込みは、ユーザーのクレジットスコアに影響を与える可能性があります。UXデザイナーは、モバイル画面の制約がある中で、このような重要な情報を通常は数個の箇条書きで説明をしなければいけません。

3. アクセシビリティ

アクセシビリティはあらゆるデジタル製品に不可欠ですが、フィンテックのデザインには特に重要です。ノルウェーやオーストラリアなどの国では、製品はウェブコンテンツのアクセシビリティに関するガイドライン　(WCAG) 2.0 レベルAA基準を満たさなければいけません。

こちらのPowerMapperの記事には、国とその関連するアクセシビリティ要件の一覧があります。

4. 有益な可視化

データを視覚化することで、ユーザーは情報を素早く消化し、理解することができます。UXデザイナーは、例えば収入と支出のように、数字を分けるのに色を使うこともできます。

5. 適切なキーパッドの使用

モバイル端末でフォームを入力する場合、ユーザーは数字、文字、特殊記号を切り替えて入力する必要があります。フィンテックのフォームは、一般的に他のデジタル製品よりも長く、ユーザーが入力する項目も多くなっています。

UXデザイナーは、モバイル機器に以下のようなどのキーパッドを使用するかを指示することで、このプロセスを効率化することができます：

• 数字優先のキーパッド
• 日付ピッカー
• 電子メールフィールド（デフォルトで@と.comが表示されるようにする。）

6. 説明的で有益なCTA（Call To Action）の使用

CTAをクリックすると何が起こるかについて、ユーザーに誤解があってはいけません。例えば、誰かがローンの申し込みをする場合、フォームのCTAは通常の 【送る】や【送信 】ではなく【適用 】でなければなりません。

7. 助ける、妨げない

しかし残念なことに、デジタル製品では、顧客がサービスをキャンセルしたりダウングレードしたりするための機能が隠されていることがまだよくあります。UXデザイナーは、顧客の購読終了やオプトアウトを可能にするものも含めて、ユーザーがタスクを完了できるよう、常にサポートしなければいけません。

管轄区域によっては、有料サービスのオプトアウトに関する明確なガイドラインがある場合もありますので、デザインが規制やベストプラクティスを満たしていることを常に確認しましょう。

8. モバイル向けの最適化

多くのユーザー（特に30代以下）は、モバイルアプリやブラウザーを通じて、モバイルでタスクを完了したいと考えています。フィンテック製品にモバイルアプリがない場合、ウェブサイトやウェブアプリがモバイルユーザー向けに最適化され、デスクトップと同じ体験が提供されるようにしましょう。

モバイルアプリの場合、ユーザーが確実にデスクトップと同じタスクを実行できるようにしておく必要があります。多くの製品では、モバイルアプリでできることが制限されており、これが不満の原因になったり、サービスのダウングレードや定期的な支払いのキャンセルができないなど、マイナスの影響を与えることがあります。

フィンテックのユーザビリティに関するよくある課題の克服

ここでは、フィンテック UXの一般的なシナリオとその克服方法をご紹介します。この例は、GoogleのUX Playbook for Financeから引用しています。

ユーザーへの教育とコンバージョン

デザイナーが直面する課題の1つは、複雑な金融商品についてユーザーを教育しながら、コンバージョンさせることです。ここでは、典型的なモバイルオンボーディングフローの推奨例を紹介します：

• 箇条書きで提供品と規制情報をまとめる
• スクロールを減らし、コンバージョンの可能性を高めるために、価値提案をCTAとともにフォールドの上に配置する
• オンボーディングフォームの冒頭に価値提案を繰り返す
• 信用と信頼を築くために、TrustPilotウィジェットなどのソーシャルプルーフを含める。
• 「サインアップして見積もりを入手する 」など、明確なCTAを使用する
• 既存ユーザーが新しい製品やサービスを申し込む際に、フォームのフィールドを予め埋めておく
• プログレスバーを使用して、ユーザーがプロセスのどの段階にいるのかを表示する

大容量データの表示

フィンテック製品は、多くのデータを1つの画面に表示しなければならないことが多く、特に面積の限られたモバイルデバイスでは困難です。ここでは、スペースを最大限に活用し、認知負荷を軽減するための推奨事項をご紹介します：

• メインのCTAは説明的なラベルで確実に目立たせる
• 二次的CTAにはアウトラインボタンやゴーストボタンを使う
• コンテンツの区切りには、色と一定の間隔を使う
• 見出しと本文の区別を明確にする
• 読みやすく、読みやすい書体を使用する
• 二次的コンテンツはカルーセル、アコーディオン、ツールチップの後ろに隠す

長文フォームの効率化

フィンテック製品は、法律の準拠のために多くの個人情報の収集が必要なことがよくあります。このようなフォームには長い時間がかかり、ユーザーにとっては圧倒されるように見えるかもしれません。そこで、長いフォームを効率化するためのヒントをご紹介します：

• 期待に応えるべく、フォームの入力にかかると思われる時間を最初にユーザーに伝える
• フォームをセクションに分割し、ステップに分け、ユーザーがいつでも簡単に前後に移動できるようにする
• ユーザーがあとどれくらい完了しなければならないかを示すために、進捗状況を示すインジケータを使用する
• 申し込みに必要な情報のみを尋ね、本人の肩書きや性別、人種など、金融機関にとって無関係な余計な項目は避ける
• 選択肢が3つ以下の場合は、ドロップダウンメニューを使用せずラジオやチェックボックスを使用して、素早い選択を可能にする
• ユーザーが時間のあるときに戻れるように、進捗状況を保存できるようにする
• 生年月日、連絡先番号、米国の郵便番号、クレジットカード番号などの適切なフィールドには、テンキーを使用する
• ユーザーを案内するプレースホルダとエラーメッセージを提供し、エラーメッセージには、ユーザーが問題を解決するための明確で実行可能な指示を必ず付ける

PayPalがUXPin Mergeを使用して製品を8倍速く構築する方法

PayPalは、200カ国以上、25通貨をサポートする世界最大級の決済プラットフォームです。2019年、PayPalの社内製品開発チームはUXPin Mergeの使用を開始し、デザインの拡張と製品の提供を8倍速く行えるようになりました。

Mergeとは

Mergeは、コンポーネントライブラリをUXPinのエディタに同期させるデザイン技術で、デベロッパーが製品段階で使用するUI要素を完全にコード化し、デザイナーがプロトタイプを作成できるようにします。

PayPalのMergeはどのように機能したか

PayPal は Merge を使用して、Microsoft の Fluent デザインシステムと UI コントロールを同期させています。各 React コンポーネントのプロップを通じてすべてが事前に設定されているため、PayPal の製品デザイナーはそのコンポーネントをドラッグ＆ドロップして新しいユーザーインターフェースの構築ができるのです。

PayPalのUXチームは、デザイン、プロトタイプ、およびテストの90%をデザインハンドオフ前に完了する製品チームに指導とサポートを提供していますが、UXデザイナーが丸一日かけて行っていた作業を、プロダクトマネージャーは10分以内で、しかも忠実度や機能性を大幅に向上させながら完了させることができるのです。

このプロトタイプには、完全に機能するグラフやデータの可視化、ソートフィルター、実データ、動的なユーザー体験など、画像ベースのプロトタイプでは実現できなかった機能が含まれています。

MergeのプロトタイプはPayPalのユーザビリティテストの改善だけでなく、ステークホルダーがガイドや説明なしにプロトタイプに関与することができます。

「UXPin Mergeの大きな影響の1つは、より忠実度の高いプロトタイプを作成できるようになったことです。最終製品がどのように見えるか、UX、インタラクティブ性に関して、デザイナー、経営陣、ディレクター、デベロッパーを含む全員がより確信を持っており、ステークホルダーからより質の高いフィードバックが得られます。」エリカ・ライダー氏（ペイパル、デベロッパーツールおよびプラットフォームエクスペリエンス、UX担当シニアマネジャー

UXPin Merge が世界最大の フィンテック企業のワークフローに革命をもたらすことができるとしたら、このコードベースのテクノロジーがあなたのビジネスに何をもたらすか想像してみてください! 無料トライアルにサインアップし、MUI React ライブラリ統合を通じて UXPin Merge をぜひお試しください。

The post 【フィンテックデザイン】プロダクトデザイナー向けUXのヒント appeared first on Studio by UXPin.

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

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

 UIデザイン とは

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

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

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

入力要素

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

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

出力要素

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

ヘルパー要素

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

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

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

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

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

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

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

 UIデザイン の最高の原則

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

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

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

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

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

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

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

2.認知的負荷の軽減

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

デザインの一貫性とは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. スケッチする

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

2. まずはモバイルから

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

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

3. グリッドシステム

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

モバイルUIを極める

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

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

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

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

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

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

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

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

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

2. デザインを繰り返す

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

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

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

3.一定であり続ける

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

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

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

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

• 感情のトリガー

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

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

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

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

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

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

• 画像を使用する

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

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

• A/Bテストの実施

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

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

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

Choosing Your UI Design Software

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

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

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

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

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

2. 機能的忠実度

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

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

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

3. 一緒に働く

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

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

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

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

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

1. Lottie Animation

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

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

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

2. コードベースツール

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

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

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

3. 音声UI

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

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

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

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

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

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

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

このレスポンシブWebデザインガイドは、複数のビューポート幅に対応するデザインのプロセスを段階的に説明するものです。このプロセスをUXワークフローに組み込むことで、デザインチームがユーザーインターフェースをデザインする際に、さまざまな画面幅を考慮することが可能になります。

UXPinでデザインする場合、ウェブ、iOS、Android、カスタムキャンバスの各サイズから選択できます。無料トライアルにサインアップして、UXPinを使った色々なデバイス向けのデザインがいかに簡単であるかをご確認ください。

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

レスポンシブデザインとは、複数のビューポートに対応するユーザーインターフェースをデザインするプロセスです。使用するデバイスに関係なく、一貫したユーザーエクスペリエンスの提供を目的としています。

従来、レスポンシブWebデザインは、携帯電話、タブレット、デスクトップという3つの主要スクリーンを考慮していましたが、現在ではスマートウォッチ、テレビ、車のダッシュボード、冷蔵庫など、デザイナーが手掛けるスクリーンやデバイスの数は増えています。また、製品によっては音声も含まれるため、デザインチームはVUI（音声ユーザーインターフェース）も取り入れなければなりません。

ステップ1： レスポンシブデザイン の理解

デザイナーは、レスポンシブUIのデザインを始める前に、レスポンシブデザインと、デベロッパーが製品に用いる技術の理解が必要です。

例えば、エンジニアはCSS（カスケーディングスタイルシート）を使ってユーザーの画面サイズに応じた画像を提供することもできますし、自動的に最適化するツールを使うこともできます。前者の場合、デザイナーは複数の画面サイズに対応したアセットを用意しなければなりませんが、後者の場合は1つで済みます。

そのため、デザイナーはプロジェクト始動前にエンジニアと相談し、以下のような質問をして、技術的な要求や制約を理解しておく必要があります：

• 製品はレスポンシブグリッドかフルードグリッドを採用していますか？
• 製品のブレイクポイントは？
• オペレーティングシステム（Apple iOS、Android、Windows）は、製品のレイアウトに影響を与えますか？
• エンジニアはどのように画像のスケーリングや配信をしていますか？
• エンジニアが使用する動画や画像、アイコンなどのメディアはどのような形式ですか？
• 製品はどのようなグリッドシステムを採用していますか？
• 製品にFlexboxや通常のCSSが使われていますか？

レスポンシブ グリッドとフルードグリッド

レスポンシブグリッドは、ピクセルを使用した標準の12列グリッドシステムを使ってサイズ設定します。ピクセルの使用というのは、エンジニアがCSSメディアクエリでのみ変更されるコンポーネントまたはコンテナのサイズを設定するということです。フルードグリッドは、パーセンテージを使用し、利用可能なスペースに応じてUI要素のサイズを変更することができます。

ステップ2：ブレークポイントの確定

例えば複雑な機能の中には、モバイル版とデスクトップ版のアプリケーションでできることが制限されるものがあるように、ブレークポイントをリストアップすることで、デザイナーは、各デバイスに対応した情報アーキテクチャ、レイアウト、機能を計画することができます。

最も一般的なブレークポイントは以下の通りです：

• デスクトップパソコン – 最大幅: 1200px
• ノートパソコン – 最大幅: 991px
• タブレット – 最小幅: 768px, 最大幅: 990px
• スマートフォン – 最大幅: 500px

例えば、iPhone 13は390ピクセル×844ピクセルで、横長と縦長では幅が2倍以上違うといったように、デザイナーは、画面の向きやランドスケープレイアウトでのデザインの調整についても考慮が必要です。

ステップ3：コンテンツ優先のアプローチ

コンテンツを中心にレイアウトをデザインすることで、直感的で操作しやすいUIを構築でき、コンテンツの階層を確定することで、ブレークポイントに応じたレイアウトの整理が可能になります。

デザイナーは、ユーザーにやって欲しいアクションに関連する階層の考慮が必要です。例えば、ブログフィードの目的は、ユーザーに記事の一覧を表示し、興味のあるものをクリックしてもらうことであり、そのためには、記事のクリックを促す画像と見出しが最も重要な要素となります。

デスクトップフィードでは、記事の抜粋、公開日、著者、カテゴリータグなど、より多くの情報を含めるためのスペースがあり、ユーザー調査やインタビューは、ユーザーにとって何が最も重要であるかに応じて、レスポンシブデザインを導くことができます。

ステップ4：モバイル優先のデザイン

モバイル優先のデザインは、最小のスクリーンサイズから始めて、拡大していくプロセスですが、このデザイン戦略には、主に2つの利点があります：

1. 小さな画面という制約の中で、デザイナーは最も重要な機能とUIコンポーネントのみを搭載することを余儀なくされます。不要な機能を削減することで、コストと市場投入までの時間が短縮されます。
2. モバイルレイアウト（小画面）を大画面に変換する方が、その逆よりも速くて簡単です。デスクトップ優先のデザインは、しばしばモバイル版へのスケールダウンのために妥協やデザインの変更を余儀なくされます。

モバイルファーストのアプローチは、ウェブデザインにおいてもビジネス的な意味を持ちます。例えば、Googleはモバイルフレンドリーなコンテンツを優先します。つまり、レスポンシブデザインはSEOに有利で、上位に表示され、より多くのクリックを生み出す可能性があります。

ステップ5: コンテンツの優先順位付け

モバイル優先とコンテンツ優先のアプローチの一環として、小さなデバイスで常に見えるコンテンツを優先し、ナビゲーションの引き出し、ドロップダウンメニュー、アコーディオンの後ろに隠すべきものを選択します。

例えば、デスクトップのレイアウトでは、デザイナーはFAQセクションの質問と回答をユーザーに表示することがよくありますが、このようなレイアウトでは、モバイル端末でユーザーが目的のものを見つける場合、すべてのQ&Aをスクロールしなければならないことになります。その代わりに、小さな画面に質問を表示し、答えをアコーディオンの後ろに隠すことで、モバイルユーザーのスクロールを減らすことができます。

ステップ6： レスポンシブ な画像と動画

プロジェクト始動時にメディアフォーマットを決めておくと、後々のデザイナーの手直しを省くことができます。例えば、デザイナーはアイコンにPNGを使うかもしれませんが、エンジニアはレスポンシブレイアウトに対応しやすく、パフォーマンスも高いSVGを使うかもしれません。

複雑なレスポンシブデザインでは、デバイスやビューポートに応じて異なるメディアを提供するのに、複数のサイズとフォーマットが必要になる場合があります。これらのフォーマットについて最初から合意しておくことで、デザイナーはプロトタイプを正しくテストし、よりスムーズなデザインのハンドオフのためのアセットの準備ができます。

ステップ7： レスポンシブ ・タイポグラフィ

タイポグラフィは、ブランド/アイデンティティ、読みやすさ、音声、読みやすさに影響を与える重要なデザイン要素です。デザイナーは何時間も何日も、あるいは何週間もかけて熟慮を重ね、複数のデバイスに対応する書体を選択します。

A guide to responsive typographyでは、UXデザイナーのオーガスティン・トーマス氏が、レスポンシブ・タイポグラフィーのためにデザイナーが考慮しなければならないことを、以下のように挙げています：

• 正しいタイポグラフィの選択
• タイポグラフィーのスケールの選択
• アライメントとスペーシング

画像、ビデオ、グラフィックなど、プロジェクトのコンテンツは、上の3要素に大きな影響を与えることから、正確な結果を得るには、ダミーテキストを避け、必ず実際のコンテンツで書体の組み合わせをテストしてください。

ステップ8：レスポンシブ デザイン・パフォーマンスの最適化

パフォーマンスはデベロッパーの仕事であることが多いのですが、デザイナーの負担を減らすためにできることがいくつかあります：

システムフォントの使用

iOSではSan Francisco、AndroidではRoboto、WindowsではSegoe UIが使用されています。このデフォルトフォントを使用することで、レスポンシブWebサイトやアプリケーションは追加のリクエストの必要がなく、パフォーマンスを向上させることができます。

美しさよりもパフォーマンスを優先する製品の場合は、カスタムフォントの代わりにシステムフォントを使用することを検討してください。すべてのオペレーティングシステムで一貫した結果を得るには、必ずそれぞれのフォントで製品をテストをしてください。

アニメーション

CSSやJavascriptのアニメーションは、パフォーマンスに影響を与え、ユーザーエクスペリエンスに悪影響を与える可能性があります。逆に、エンジニアが機能のロードに数秒を要する場合、デザイナーはアニメーションを使用することができます。この2つの適切なバランスを見つけるには、デザイナーとエンジニアの連携とテストが必要です。

まとめ

RWD（レスポンシブWebデザイン）と最適化は、デザイナーとエンジニアの連携に大きく左右されます。画像ベースのデザインツールを使用すると、デザイナーが正確に応答性をテストするのは不可能になります。

デザイナーは、いくつかのレスポンシブ要素を考慮し、コンテンツ、レイアウト、タイポグラフィー、その他のUI要素が複数のビューポートでどのように相互作用するかの考慮が必要です。

Mergeによる レスポンシブデザイン

レスポンシブデザインの課題のひとつは、画像ベースのデザインツールの静的な性質により、デザイナーが複数のビューポートでUIやコンポーネントを正確にテストできないことです。

ウェブページの正確なテストには、デザイナーにはほとんど知られていないHTML、CSS、Javascriptを使うしかないのです。

UXPin Mergeはコードベースのデザインツールで、デザイナーはエンジニアが使用するのと同じコンポーネントを使用してプロトタイプとテストを行うことができます。また、エンジニアはレスポンシブ・プロパティをプログラムすることができるので、UI要素がプロトタイプでも最終製品と同じように機能します。

UXPin Mergeとは

UXPin Mergeは、製品のコンポーネントライブラリをUXPinのデザインエディタに同期させ、デザイナーが完全に機能するコードコンポーネントを使用してプロトタイプを作成できるようにするものです。

Git または Angular、Ember、Vue、およびその他のフロントエンド フレームワーク用の Storybook 統合を使って、React コンポーネント ライブラリを Merge に直接接続することができます。

Mergeを使用したレスポンシブコンポーネントの作成

Reactコンポーネントライブラリを用いて、エンジニアは、IFrameコンポーネントがレスポンシブプロパティ、メディアクエリ、スタイリングに反応するようにプログラムし、最終製品のコンポーネントと同じレスポンシブ機能を提供することができます。

UXPin Merge を使ってレスポンシブなコンポーネントを構築するためのステップバイステップのチュートリアルをご覧ください。

テストの強化

複数のフレームを使用する代わりに、単一のフレームとコンポーネントを使用して、コードと同じレスポンシブな機能の実現ができます。また、これらのUI要素は、最終製品と同じ忠実度と機能を持ち、デザイナーはユーザビリティテストやステークホルダーからの有意義なフィードバックが得られます。 Merge を使用すれば、デザイナーはコードを書いたり、エンジニアに頼ったりすることなく、コンポーネント ライブラリからきちんと機能する応答性の高い UI 要素を使用してプロトタイプやテストの作成ができます。

デザインハンドオフの効率化

これらのレスポンシブ Merge プロトタイプは、デザインのハンドオフの効率化を実現し、市場投入までの時間が短縮されます。エンジニアは、デザインをレスポンシブ コードに変換するための複数のモックアップやドキュメントの検査が必要なくなり、レポジトリからコンポーネントをコピーして貼り付け、UXPin から JSX の変更を行うだけで、ウェブ開発プロセスを開始することができます。

世界最先端のデザインツールで、レスポンシブプロトタイピングとテストを改善しましょう。無料トライアルにサインアップし、MUI 統合による UXPin Merge をお試しください。

The post レスポンシブデザインガイド – 簡単な8ステップ appeared first on Studio by UXPin.

この記事では、デザインシステムの成熟に向けたロードマップと、目標をより早く達成するためにプロセスを最適化する方法をわかりやすくご説明します。

ShopifyのPolarisやIBMのCarbon、AppleのiOSやGoogleのMaterial、SalesforceのLightningのような業界をリードするシステムと同じくらい、我々のデザインシステムは、こういった企業が成功を収めるために従った成熟度モデルを実現しなくても、よくできていて包括的です。

UXPinでは、組織のデザインシステムをデザインツール内に保存および管理できます。 結束と一貫性を維持するために、デザインシステムのガバナンスに合わせてアクセス許可を設定できます。 無料トライアルにサインアップして、次のデザインプロジェクトのためにUXPinを体験してみてください。

デザインシステムの重要性

一握りのデザイナーしかいないようなスタートアップ環境では、デベロッパーが製品の一貫性を維持するのは比較的簡単です。 しかし、製品が進化し、チームが成長するにつれて、デザインシステムの重要性が増します。 複数のデザインチームがデザインの引き継ぎ段階に到達し、それぞれがデザインシステムのコンポーネントを独自に解釈している場合、製品の機能は一貫性に欠けてしまいます。

そうなると、デベロッパーは常にゼロからコーディングしなければいけなくなり、ユーザーは不満を募らせてイライラしたり、製品を完全に使わなくなってしまう可能性があります。 デザインシステムがあることで、UXデザイナーや製品チーム、およびエンジニアは共通認識を保つことができ、一貫性を維持しながらインターフェースをより速く構築できるのです。

特に製品が進化するにつれて、デザイナーは完全性と一貫性を維持するためにデザインシステムのガバナンス手順に従わなければいけません。 そのための目標は、デザインシステムが拡張可能なビルディングブロックを提供するため、デザイナーとエンジニアがコーディングをほとんど全く行わずに製品を立ち上げることができる段階に達することです。

その目標を達成するということは、組織は、成長するための柔軟性を促進するデザインシステム成熟度モデルに従わなければならないということです。

デザインシステムの成熟度の段階

世界中の組織がデザインシステム成熟度モデルをいくつか使用していますが、我々はIressのモデルが消化、複製、拡張がしやすいことがわかりました。

デザインシステムのプロダクトオーナーであり、Iressのプロダクトデザインの地域責任者であるニック・エリオット氏は、NSW州政府のデザインシステムプロダクトマネージャーであるTJ Harropからこのモデルのヒントを得ました。 これは、デザインシステムの成熟を達成するために必要な手順の概要を示す4段階のプロセスです。

1. 第1ステージ–スタイルガイド
2. 第2ステージ–HTMLとCSS
3. 第3ステージ–デザインおよびコード化されたコンポーネント
4. 第4ステージ–完全統合

特筆すべきは、Iressがステージ1から4に到達するのに8年かかった点です。デザインシステムの開発は短距離走ではなく、長距離走でなのです。

第１ステージ- スタイルガイド

第1ステージの場合、組織にはデザインシステムがありませんが、共通のアセットがいくつか設定されている可能性があります。 ほとんどのスタートアップ企業はこの段階にいると思いますが、多くの確立された組織もまたステージ1にいます！ デザインシステムの成熟度のこの初期段階で、チームは製品アセットをデザインし、ブランドの一貫性を開発します。このアセットは、デザイナーがアセットを作成する際に使用するPDFスタイルガイドに保存されます。

こういったスタイルガイドはある程度の一貫性がありますが、デザイナーは多くの場合、独自のバージョンのデザインシステムをデザインツールに保存しています。 デザインシステムの複数の解釈によるズレや不整合があるため、デザインの引き継ぎはしばしば収拾がつかなくなります。

第1ステージのもう1つの問題は、PDFスタイルガイドが拡張性に乏しいということです。少なくとも正確性や一貫性はありません。 スタイルガイドの新しいバージョンをリリースする場合、デザイナーは変更に注意し、アセットを手動で更新する必要があります。 より多くの手間がかかることになり、市場投入までの時間が長引いてしまいます。

組織がこれらのデザインの問題に悩まされていたら、今こそスケーラブルなデザインシステムを開発するための戦略を実行するときです。

第2ステージ　- HTMLとCSS

第2ステージでは、デザインシステムコンポーネントがHTMLとCSSのスニペットに確定されます。 これがよくなっているとはいえ、デザインシステムは、デザイナーやエンジニアがインターフェースを構築するために取得できるビルディングブロックではなく、ガイドラインであることに変わりはないのです。

解釈は自由なので、デザインのズレとエラーが依然として定期的に発生するということも言えます。 HTMLとCSSスニペットも定期的な更新が必要です。つまり、DesignOpsとDevOpsは、デザインシステムを手動で同期するために絶えず通信しなければならないということです。

第3ステージ -　デザインとコード化されたコンポーネント

多くの企業が第3ステージでいつまでも滞っています。 組織にはデザインシステムがあり、パターンライブラリとコンポーネントを更新する前にガバナンス手順を踏みます。 デザインシステムは完全に文書化されており、オンボーディングを合理化し、エラーを減らします。

組織には通常、デザインシステムの維持と更新を行う専任のチームがありますが、DesignOpsとDevOpsは、信頼できる唯一の情報源を維持するための共同作業が不可欠です。 これにより一貫性が向上しますが、このプロセスはコストがかかる上に非効率的です。

それでも、デザイナーはデザインシステムコンポーネントを使用してインターフェースを構築できるため、プロトタイピングとテストはずっと速いです。 それによって、デザイナーとエンジニアには必要なコンポーネントがあるため、市場投入までの時間を大幅に短縮できます。

第4ステージ -　完全統合

完全に統合されたデザインシステムにより、デザイナーとエンジニアは信頼できる唯一の情報源で作業します。 新しいデジタル製品を構築するために、デザインのズレもなく、コーディングも必要ないと言っていいくらいです。 デザインシステムは自動的に同期されるため、製品チーム、UXデザイナー、エンジニアは常に同じコンポーネントを使用します。 一貫性はもはや問題ではなく、チームメンバーは、デザインやコードの問題の修正よりも、より多くの時間をかけてユーザーの調査とユーザーエクスペリエンスの向上に取り組めます。 チームは隙間なく製品のデザインやローンチができ、デベロッパーはコピー＆ペーストするだけなので、引き継ぎ中のコミュニケーションは最小限で済みます。 多くの組織にとって、このデザインシステム成熟度モデルの第4ステージは、ありえない夢のように思えるかもしれません。

しかし、実際は、多くの苦痛は避けられるし、第4ステージに進んでデザインシステムの目標を思ったよりも早く達成できるのです！

UXPinMergeで第4ステージへ

ツールとソリューションのレビューに12か月かけた後、ニックとIressのチームはUXPin Mergeと出会いました。 UXPin Mergeでリポジトリのコードコンポーネントをデザインエディタと同期できるため、デザイナーとエンジニアはまったく同じデザインシステムで作業できます。

UXPinMergeのコードベースのソリューションを使用すると、第2・第3ステージを飛び越えて、多くの組織が耐えなければならない苦痛を味わうことなくデザインシステムの成熟に到達できます。 UXPin Mergeを使用すると、デザインシステムの成熟度モデルは2段階の反復プロセスになります。

1. 第1ステージ　- コンポーネントのデザイン：UXPinを使用して、製品の要素とコンポーネントをデザインします。エンジニアは、スペックモードを使用して、コンポーネントをコーディングするための自動生成されたスタイルガイドを作成できます。デザイナーは、すべてのチームメンバーが同じパーツにアクセスできるように、どんなコンポーネントも共有デザインシステムに保存することができます。
2. 第2ステージ　– UXPinMergeとの完全統合：製品の第一弾がリリースされると、デザイナーが完全に機能するコードコンポーネントを使用して新しい機能を構築できるように、エンジニアはコンポーネントをレポジトリに保存します。 デザインシステムの更新が必要であれば、第1ステージに戻って繰り返します。

UXPinのコードベースのデザインで、デザインシステムの目標をより早く達成し、プロトタイピングをより高いレベルにしましょう。 14日間のトライアルにサインアップして、次のデザインプロジェクトのためにUXPinの機能を体験してみてください。

The post デザインシステムの成熟度〜デザインシステムを改善する方法〜 appeared first on Studio by UXPin.