CRUD アプリとは、データに対して「作成（Create）」、「読み込み（Read）」、「更新（Update）」、「削除（Delete）」の基本操作を行うアプリのことで、この４操作は大抵のデータベース管理システムで実行できる基本的な操作であり、アプリケーション内でのデータの管理に非常に重要です。

CRUD 操作は、データの管理や操作が必要な場合に最もよく使われ、その用途は、タスク管理ツール、予約システム、CMS プラットフォームなど、様々な業界にわたっています。

デザイナーなしで、管理パネル、内部ツール、その他の UI（ユーザーインターフェース）のインタラクティブなプロトタイプを構築しませんか。事前構築済みのコンポーネントをキャンバスにドラッグ＆ドロップして、すぐに開発できる美しいインターフェースを作成しましょう。無料相談およびトライアルはこちらから。

CRUD アプリとは

CRUD アプリは、さまざまなプラットフォームでデータ管理の基礎となるデータに対する基本的な操作を実行するようにデザインされた基礎ソフトウェアアプリであり、それでエンドユーザーはデータの操作、整理、維持を効率的にできるようになります。

CRUD とは、Create（作成）、Read（読み込み）、Update（更新）、Delete（削除）の頭文字をとったもので、データに対して行われる中核的な操作を４つのアクションで表します。

「Create（作成） 」は新しいデータの追加、「Read （読み込み）」は既存のデータの取得と表示、「Update （更新）」は既存のデータの変更、「Delete（削除） 」は不要なデータや古いデータの削除ということになります。

コンテンツ管理システムから EC Web サイトに至るまで、CRUD アプリでエンドユーザーは効率的なデータのやり取り、整理、維持ができるようになり、それでダイナミックでレスポンシブな UX（ユーザーエクスペリエンス）のバックボーンが形成されます。

つまり、CRUD アプリはデータインタラクションを推進するエンジンであり、それでユーザーは体系的かつ直感的に情報を作成、取得、更新、削除できるようになります。そしてこの基本的な操作を理解するのは、デジタル領域におけるデータ管理の本質を把握するための鍵となります。

CRUD の４操作

各 CRUD 操作の内訳は以下のようになります：

• 作成操作： システムへの新しいデータやレコードの追加。CRUD アプリでは、例えば新しいユーザーアカウントの作成や、在庫への新しい商品の追加、ブログプラットフォームでの新しい記事の作成などがある。
• 読み取り操作： データベースからのデータの読み込みや取得するのが２番目の操作となり、情報の取得と表示などがある。CRUD アプリでは、全ユーザーのアカウントのリストの表示や、特定の商品の詳細表示、投稿のフィードの表示などがある。
• 更新操作： システム内の既存のデータを変更して最新の状態に保つことであり、ユーザー情報の編集、商品の詳細の変更、投稿内容の更新などがある。
• 削除操作： システムから不要または古くなったデータを削除することであり、ユーザーアカウントの削除、在庫からの商品の削除、投稿の削除などがある。

CRUD 操作を明確なカテゴリに分割すると、明確さ、モジュール性、再利用性、保守性が上がり、フロントエンドとバックエンドの開発プラクティスが強化されます。これは、ソフトウェアエンジニアリングのベストプラクティスと一致し、ソフトウェアアプリケーションの全体的な効率性と堅牢性への貢献になります。

各オペレーションには明確で具体的な目的があるため、フルスタックデベロッパーやステークホルダーはシステムの機能を理解しやすくなります。また、これらはすべて独立して実装できるため、メンテナンス、アップデート、スケーラビリティがしやすくなります。

さらに、デベロッパーは CRUD 操作ごとに標準化された機能やコンポーネントを作成することができることから、アプリケーションのさまざまな部分や将来のプロジェクトでその要素を再利用することができるようになります。

CRUD を個別の操作に分割するのは、エンド ユーザーの観点からも理にかなっています。これによって、ユーザー権限が細かくコントロールされることから、さまざまなロールまたはユーザーに対して、その責任と要件に基づいた特定の CRUD 機能へのアクセスの許可や制限ができます。

さらに、CRUD 操作で、ユーザーは実行できる明確なアクション（作成、読み取り、更新、削除）を簡単に把握でき、これで、明確で直感的なインターフェースを持つ、よりユーザーに優しいアプリケーションの作成ができるようになります。

デザインにおける CRUD 関数の内訳

ターニャ・アノキナ氏の記事に基づいて、デザイナーのための CRUD 関数を見ていきましょう：

• 作成：ユーザーが新しいコンテンツを追加する方法をデザインする。例えばユーザーをスムーズなコンテンツ作成体験に導く「＋」ボタンや「新規作成」プロンプトを考えると、エントリーポイントは見つけやすく、アクセスしやすいものであるべきで、自動保存のようなアクションは偶発的なデータ損失を防ぐことができる。
• 読み込み： リストやグリッドのように、ユーザーが作成したコンテンツを読みやすく表示し、役に立つプレビューやサムネイルをデザインする。これでユーザーは、コンテンツを簡単にナビゲート、並べ替え、フィルタリングして、必要なものをすばやく見つけられるようになるはず。
• 更新：コンテンツの更新や編集は、自然に感じられるものであるべき。例えばインライン編集、アンドゥ機能、明確な「保存」と「キャンセル」オプションは、ユーザーの誤変更を防ぐことができる。特に重要なコンテンツや複雑なコンテンツの場合は、集中して編集するためにモーダル ダイアログの使用を検討する。
• 削除：ユーザーが作成したコンテンツは貴重であることが多いため、ユーザーがミスを回避できるような削除ワークフローをデザインする。例えば［最近削除された］セクション、確認プロンプト、または削除されたデータの復元ができる取り消しオプションを使う。

CRUD アプリの例

多くの人が耳にしたことのある CRUD アプリケーションの一般的な例を以下で見てみましょう。

WordPress

• • アプリの種類：CMS（コンテンツ管理システム）

• CRUD 操作：

• • 作成：作者は新しいブログ記事、ページ、メディアコンテンツを作成できる。
  • 読み込み：ユーザーは Web サイト上で公開されたコンテンツを読むことができる。
  • 更新：作者は既存の投稿やページの編集や更新ができる。
  • 削除：不要なコンテンツや古いコンテンツの削除ができる。

Salesforce

• • アプリの種類：CRM（顧客関係管理）システム

• CRUD 操作：

• • 作成：営業担当者は新しい顧客レコードを作成できる。
  • 読み込み：ユーザーは顧客プロフィールや顧客とのやり取りを閲覧できる。
  • 更新：営業チームは新しい情報に基づいて顧客の詳細を更新できる。
  • 削除：関連性のなくなった顧客のレコードを削除できる。

Shopify

• • アプリの種類：EC プラットフォーム

• CRUD 操作：

• • 作成：売り手は在庫に新しい商品を追加することができる。
  • 読み込み：買い手は商品リストを見ることができる。
  • 更新：売り手は商品詳細、価格、在庫状況を更新できる。
  • 削除：販売終了や在庫切れの商品を削除できる。

Facebook

• アプリの種類：SNS プラットフォーム
• CRUD 操作：
  • 作成：ユーザーは新規投稿の作成、写真のアップロード、コメントの追加ができる。
  • 読み込み：ユーザーは友達の投稿、写真、コメントを閲覧できる。
  • 更新：ユーザーは自分の投稿やプロフィール情報の編集や更新ができる。
  • 削除：投稿、コメント、またはアカウント全体を削除できる。

Trello

• • アプリの種類：タスク管理アプリケーション

• CRUD 操作：

• • 作成：ユーザーは新しいタスク、ボード、カードを作成できる。
  • 読み込み：チームメンバーはタスク、ボード、プロジェクトの進捗状況を見ることができる。
  • 更新：ユーザーはタスクの詳細、期限、割り当ての編集や更新ができる。
  • 削除：完了したタスクや関連性のないタスクはアーカイブまたは削除できる。

CRUD 操作に相当するもの

Web 開発の世界では、関数名や操作に若干の違いがあるものの、CRUD に相当するものが存在しており、例えば、データベースとやりとりするために広く使われている言語である SQL だと、その関数は「Insert（挿入）」、「Select（選択）」、「Update（更新）、「Delete（削除）となります。

一方、NoSQL データベース（MongoDB、Cassandra、CouchDB）では、CRUD 操作に対応する関数は、特定のデータベースとそのクエリ言語に基づいており、例えば、MongoDB では、「insertOne」、「find」、「updateOne」、「deleteOne」となります。

Cassandra では、「INSERT INTO」、「SELECT」、「UPDATE」、および「DELETE FROM」で CQL（Cassandraクエリ言語）が使われ、CouchDB では、「POST」、「GET」、「PUT」、および「DELETE」のような HTTP メソッドが採用されています。

具体的な名称や構文はデータベースやプログラミング言語によって違うかもしれませんが、実行される基本的な CRUD アクション（データの作成、読み込み、更新、削除）は基本的に同等または類似しています。

CRUD アプリの構築手順

ここでは、CRUD アプリの開発について見ていきましょう。このプロセスには、プロトタイプの段階が含まれ、これは非常に重要なステップとなります。なぜか？プロトタイプを行うことで、アプリがユーザー中心で信頼性が高く、スケーラブルなソリューションとなり、長期間の使用に耐えられることが保証されますからね。

要件の収集

CRUD アプリの構築の前に、チームと一緒に座り、アプリが何をする必要があるかを決定し、各 CRUD 操作を通して扱う予定の具体的な情報をざっくりまとめます。この最初のステップは、データのやり取りをシームレスに管理する、強固で効率的なアプリケーションの基礎を築くものです。

要件を集める最も簡単な方法として、ユーザー ジャーニーとユーザー要件、技術的な制約、ビジネス目標を想定しながら、何をどのように構築する必要があるかを話し合う構造化された会議である「デザイン思考ワークショップ」があります。そしてデザイン思考では、ユーザー、ビジネス、技術的な要件は、有用性、持続可能性、実現可能性に変換されます。

デザイン思考ワークショップについてはこちらの記事（英語）をご覧ください

CRUD アプリのプロトタイプのデザイン

見た目がよく使いやすいインターフェースは、成功する CRUD アプリの特徴です。UXPin Merge を活用して、最終製品のように機能するプロトタイプを作成しましょう。その際、データの作成、読み取り、更新、削除といった各 CRUD 操作に対応する画面を作成しましょう。

なぜデザインから始めるのでしょうか？デザイン中心のアプローチだと、デザインにリソースを投入する前に、デザインをテストすることができ、デザインしたいものがエンドユーザーにとって直感的かどうかをチェックすることができます。さらに、これで実際に必要なアプリを作成しているかどうかを確認することもできます。あと、UXPin Merge はアプリの構成要素となる実際の React コンポーネントを使ってデザインするためのデザインツールであるため、デザインが実現可能であることを確認できます。

データベースの設定

デザインに満足ですか？素晴らしい！そしたら次のステップは、データモデルに基づいたデータベースのインストールと設定です。例えば、MongoDB を選んだとしましょう。いよいよインストールして設定します。

API エンドポイントの構築と UI との接続

UI とデータベース間のスムーズな通信を実現すべく、専用のルートとコントローラーを開発します。適切な検証とエラー処理のメカニズムを組み込み、各 CRUD 関数を通じてデータを処理する際にアプリの信頼性とセキュリティを確保しましょう。

そしたら、デザインに基づいてフロントエンドを構築し、API エンドポイントとインターフェースを接続します。

CRUD アプリのテスト

各 CRUD 操作を広範囲に検証し、それらが想定通りに機能することを確認します。このテスト段階では、データの整合性の確保や、潜在的なエッジケースへの対処も含まれます。厳密なテストで、アプリがユーザーに使いやすいものであるだけでなく、強固で弾力性があり、さまざまな場面に対応できることが保証されます。

アプリのデプロイ

CRUD アプリを作る旅の最後のステップは、そのデプロイです。アプリをサーバーやクラウドプラットフォームにデプロイすることで、一般ユーザーがアプリにアクセスできるようにします。これにより、世界中のユーザーが、綿密にデザインされた機能の恩恵を受けられるようになります。デプロイは努力の集大成であり、これでアプリはローカルの開発環境からデジタル領域における価値ある資産へと変貌を遂げます。

AI Component Creator のようなツールが CRUD UI の作成を効率化する方法

UXPin の AI Component Creator のようなツールは、データの作成、更新、削除を行うボタン、フォーム、モーダルなどの反復的な UI 要素を自動化することで、CRUD アプリのデザインを効率化できます。この自動化によりプロトタイプのスピードが上がり、デザイナーは手作業によるコンポーネントのセットアップよりも UX に力を注げるようになります。

さらに この AI で、すべての CRUD コンポーネントがデザインシステム標準に準拠していることが保証されることから、アプリ全体の視覚的な一貫性が維持されます。デザイナーにとって、これは、より速く、よりまとまりのある CRUD インターフェースが、実世界でのテストやデプロイに対応できるということになります。

UXPin Merge で CRUD アプリのインターフェースを構築しよう

自身の CRUD アプリを作るには、インターフェースの計画から始めましょう。UXPin Merge を使えば、CRUD アプリのインタラクティブで完全に機能するプロトタイプをサッと作成し、テストして他のチーム メンバーに見せることができます。デベロッパーのことを考えて作られたデザインツールをぜひお試しください。無料相談およびトライアルはこちらから。

The post CRUD アプリとは appeared first on Studio by UXPin.

npmは、開発者がアプリケーションで利用するライブラリやコードのインストール、共有、管理をするためのJavaScriptパッケージマネージャーです。

これにより、ユーティリティ関数から複雑なUIコンポーネントまで、さまざまなパッケージを扱うことができます。

npmはUXPin Mergeを通じてデザインと開発のコラボレーションを促進します。

開発者はReactコンポーネントをパッケージ化してデザイナーに提供し、デザイナーはそれを簡単にデザインに統合することができます。

このプロセスによって、一貫性のある効率的なワークフローが実現し、デザインシステムと最終製品の整合性が保証されます。UXPinの無料相談およびトライアルはこちらから。

NPM とは

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

npm には 以下の２つの特徴があります：

• オープンソース プロジェクトを公開するためのレポジトリ
• 簡易版：デジタル ストレージおよび検索機能
• リポジトリと対話するための CLI（コマンドライン インターフェース）
• 簡易版：ストレージ機能と通信するためのツール

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

npm パッケージとは何かを説明する前に、パッケージマネージャーの考えを理解することが非常に重要です。パッケージマネージャーはデベロッパーのためのツールキットだと考えてください。

パッケージマネージャーの役割と利便性

例えば、決済のためにStripeを使うアプリケーションを作るとします。

パッケージマネージャは、製品がStripeと通信して支払いを処理するのに必要なコードをすべてインストールします。

パッケージの多様性と利用可能なリソース

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

さまざまなタイプの検索機能、API、支払い、認証ツール、地図、アイコン、ホスティングなど、アプリケーションを開発するのに考えられるあらゆるものに対して、何百万ものパッケージがあります。

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

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

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

npmでは、CLIを通じてパッケージレジストリとやりとりでき、エンジニアは npm install コマンドに続けてパッケージ名を入力することで特定のパッケージをインストールできます。

npm レジストリ

npmのWebサイトでは、エンジニアがパッケージを検索し学ぶことができますが、これは単なるレジストリであり、パッケージはホストされていません。

そのため、エンジニアは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 と入力しても同じ結果になります。

依存関係（Dependency）とは

パッケージは、エンジニアが「依存関係」と呼ぶ他のパッケージで構成されています。

わかりにくいかもしれませんが、この依存関係とは、プロジェクト内でさまざまなタスクを実行するコードのパッケージです。

たとえば、UXPin Merge CLI は Typescript を使うため、依存関係として typescript のパッケージが必要です。

そして Typescript は UXPin Merge CLI に必要な４１の依存関係のうちの１つに過ぎません。

開発依存関係（DevDependencies）とは

UXPin Merge CLI の依存関係を見ると、４１の依存関係と４１の開発依存関係（Dev Dependencies）があります。

依存関係

「依存関係」は、アプリケーションが本番環境で動作するために必要なライブラリやパッケージです。

実行時に必ずインストールされ、アプリの基本機能を支えます。

開発依存関係

「開発依存関係」は、アプリケーションの開発やテスト時にのみ必要なツールです。

本番環境には含まれず、主にコードの品質やビルド、テストを支援します。

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

package.json ファイルとは

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

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

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

package-lock.json とは

package-lock.json は、プロジェクトの構築に使わ れているパッケージの正確なバージョンを指定します。

このファイルは、プロジェクトがインストールされたときに、最新のリリースではなく、開発中に使われたバージョンを参照するように、依存関係をロックします。

エンジニアは定期的にパッケージを更新し、多くの場合はパッケージの動作方法を変更します。

なので、依存関係をロックすることで、プロジェクトが意図したとおりに動作するようになるのです。

npm の使用法

npm init

プロジェクトの package.json ファイルを作成します。

アプリケーションをゼロから構築する場合、npm init はプロジェクトの重要な情報を含めるのに使う最初のコマンドの一つになります。

また、NPM は、パッケージがインストールされたり削除されるたびに、package.json ファイルを自動更新します。

npm install

プロジェクトの依存関係を全て package.json ファイルにインストールします。

npm install <package-name>

NPM レジストリから特定のパッケージをインストールして node_modules フォルダに保存します。

例えば、npm install @uxpin/merge-cli は Merge CLI をインストールします。

npm install <package-name> –save

NPM パッケージをインストールして package.json ファイルの依存関係に追加します。

npm install <package-name> -save-dev

NPM パッケージをインストールして開発依存関係に追加します。

npm uninstall <package-name>

プロジェクトから特定のパッケージをアンインストールします。

npm doctor

npm インストールの診断を実行して、パッケージの管理に必要なものがすべて揃っているかチェックします。

npm update <package-name>

特定のパッケージを最新バージョンに更新します。

これらは、最も一般的な npm コマンドのほんの一部であり、完全なリストは 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 を使って自分で UI コンポーネントを管理することができます。

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

npm 統合でできること

npm は一般的にデベロッパーが使うツールですが、シームレスなドラッグ＆ドロップによる UI 構築のために React のコンポーネントを UXPin に取り込むなど、強力なデザインワークフローを実現する上で重要な役割を果たしています。

UXPin Merge のようなツールを使える技術的なデザイナーにとって、以下のような理由から npm が重要になります：

React コンポーネントへのアクセス

デザインシステムが React を使って構築されている場合、npm を使ってそのコンポーネントをパッケージ化し、UXPin Merge のような他のアプリケーションやツールで使えるようにすることができます。

また、npm パッケージとして利用可能な React コンポーネントは、UXPin に直接インポートすることができ、それでデザイナーはコードを記述することなく、実際のコードコンポーネントをデザインにドラッグ＆ドロップすることができます。

アップデートの管理が簡単

npm でバージョン管理をシンプルになります。

デベロッパーがボタンコンポーネントの新バージョンなどパッケージを更新すると、npm は自動的に UXPin Merge で更新を管理することから、デザイナーは常に開発チームの最新コンポーネントを使えるようになります。

これにより、手動で更新することなく、デザインと開発の一貫性が保たれます。

デベロッパーとのシームレスな連携

npm で、技術的なデザイナーとデベロッパーが同じソースから作業できるようになります。

デベロッパーは npm を使って作成したコンポーネントを公開し、デザイナーは Merge を使ってそのコンポーネントを簡単に UXPin にインポートできます。

これにより、デザイナーがプロトタイプに使うコンポーネントと、デベロッパーが最終製品に実装するコンポーネントが完全に同じであることが保証されます。

UXPin Merge で連携の改善

Merge では、デザイナーとエンジニアが同じコンポーネントライブラリを使って作業できるので、デザインと開発の連携が強化されます。

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

UI要素をドラッグ＆ドロップでインターフェースを構築して、会社のデザインシステムや MUIなどのコンポーネントライブラリを同期してみませんか。無料相談およびトライアルはこちらから。

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

インタラクションデザインは、製品のインターフェースがユーザーの行動に反応し、人間とコンピューターの相互作用を支援することで、UXデザインにおいて重要な役割を果たします。

主なポイント：

• インタラクションデザインは、ユーザーとデジタル製品、システム、インターフェイスとの相互作用に焦点を当てた学際的なデザイン分野である。
• ユーザーがどのように製品に関わり、体験するかをデザインし、そのインタラクションを直感的で効率的なものにすることを目的としている。
• 「IxD」とよく略される。

インタラクションデザインはUXデザインプロセスで特に難しい段階のひとつですが、UXPinのコードベースデザインツールにより、忠実でインタラクティブなプロトタイプを構築することで、この課題を軽減できます。無料相談およびトライアルはこちらから。

インタラクションデザインとは

インタラクションデザインとは、HCI（人間対コンピュータのインターフェース）を人間らしく感じさせるプロセスです。インタラクティブなデジタル製品で、エンドユーザーにフィードバックを与えられることによって、この「人間的」なつながりが作り出されます。そしてそのフィードバックは、スクロールによって誘発されるアニメーション、ボタンのクリック状態、別のページへの遷移などを通じて行われます。

インタラクションデザインはよく「IxD」と略され、トランジション、マイクロインタラクション、アニメーションなどの適切なインタラクティブ要素を使いますが、テキスト、色、ビジュアル、レイアウトもユーザーの感情や行動にも影響を与え、それによって、適切な反応を引き出すために戦略的にインタラクションをデザインできるようになります。

インタラクションデザインをうまく活用することで、以下のようなポジティブなユーザー体験がもたらされます：

• 製品満足度の向上
• ユーザビリティの深い理解
• より速い学習性
• より深い個人的なつながり
• 繰り返し使用される可能性が高まる

HCI におけるインタラクションデザイン

HCI（Human-Computer Interaction：ヒューマンコンピュータインタラクションの略）におけるインタラクションデザインとは、ボタン、メニュー、その他のインターフェースコンポーネントなどの製品のインタラクティブな要素を、直感的で使いやすく、ユーザーの操作に応答し、ユーザーとシステム間のコミュニケーションが円滑になるようにデザインすることです。

インタラクションデザインは、テクノロジーとのシームレスなインタラクションを促進する魅力的なユーザー体験を作ることが目標であり、それにはユーザーのニーズ、行動、期待を理解し、機能的であるだけでなく、使っていて楽しいインターフェースをデザインすることが含まれます。

また、HCI におけるインタラクションデザインは、ユーザーがテクノロジーとどのように相互作用するかに焦点を当てることで、ユーザビリティ、アクセシビリティ、総合的な満足度を高めることを目的としています。

インタラクションデザインと UI デザイン

インタラクションデザインは、例えば「ユーザーがある要素をタップしたときに何が起こるか」などのアニメーション、マイクロインタラクション、トランジション、検索、その他のモーションベースのデザインなど、人間とコンピュータのインタラクションに焦点を当てています。

対する UI デザインは、UI がどのように見えるかを決める色、フォント、図像、レイアウトなどのビジュアルデザインと見た目の美しさに重点が置かれています。

つまり、以下のようになります：

• インタラクションデザインは相互作用と動きに関するもの
• UI デザインはビジュアルデザインと見た目に関するもの

これは多くの場合は、中小企業やスタートアップ企業では UI デザイナーが両方を担うい、大企業では別々です。デジタル製品デザインでは何でもそうですが、役割と責任が相乗効果を生むことがあり、すべては企業、製品、組織構造によりけりです。

インタラクションデザインと UX デザイン

インタラクションデザインは、UX デザインの中でも専門的な分野であり、UX がユーザーエクスペリエンス全体と、すべてがどのように結びついているかに注目するのに対し、インタラクションデザイナーはユーザーのインタラクションとモーションに焦点を当てます。

UX デザイナーは、デザイン思考、HCD（人間中心デザイン）、ユーザーリサーチといった UX の基礎を応用して意思決定を行い、ユーザーのタスクやアクション、環境に特を気にかけます。対するインタラクションデザイナーは、デジタル製品がユーザーのアクションに適切に反応することに重点を置き、ユーザーがボタンをクリックしたとき、検索バーにフレーズを入力したとき、画像にカーソルを合わせたときに何が起こるかを考えがちです。

インタラクションデザインの原則とは

ドン・ノーマン氏（ニールセン・ノーマン・グループの共同創設者）の著書『The Design of Everyday Things』から、お気に入りの「IxD 原則」をピックアップしてみました。

可視性

多くの機能と限られたスペースの中で、可視性を優先させるのはデザイン上の重要な課題であり、ドン・ノーマン氏の理論によると、何かが目に見えるほど、ユーザーがそれを見て操作する可能性が高くなります。なのでインタラクションデザイナーは、ユーザーのニーズとビジネス目標に基づいて、可視性の優先順位のバランスを取らないといけません。

可視性の典型的な例として、モバイル端末でのナビゲーションリンクの優先順位付けが挙げられます。アプリバーから表示されるリンクは何であり、デザイナーはハンバーガーメニューの背後にあるナビゲーションドロワーに何を配置するのでしょうか。

フィードバック

フィードバックとは、デジタル製品やシステムがユーザーとどのようにコミュニケーションをとるかということであり、インタラクションデザイナーには、動きやアニメーション、触覚、音声、コピーなど、このフィードバックを表現するための方法があります。

また、アクセシビリティや、製品がどのようにあらゆる種類のユーザーや支援技術にフィードバックを伝えるかついても考えないといけません。

制約条件

可能性が多すぎる乱雑な UI だと、ユーザーは戸惑い、ユーザビリティの問題が生じますが、いいインタラクションデザインだと、ユーザーの行動を制限（制約）して、製品を通じてユーザーをより効率的に導きます。

このような制約は、ランディングページで最もよく見られます。デザイナーは、ナビゲーションやリンクなど、ユーザーがページ外に誘導されてしまいそうなものをすべて取り除き、目立つボタンの CTA やフォームだけを残します。それでユーザーは、１つのアクションに絞られることでコンバージョンにつながるコンテンツに集中できるようになるというわけです。

マッピング

インタラクションデザイナーは、デジタル製品における操作とその効果の間に明確な関係を作り出さないといけません。つまり、その関係を、ユーザーにとって自然に感じられるようにマッピングするということです。

たとえば、iPhone の上のボタンで音量が上がり、下のボタンで下がります。この直感的なレイアウトだと、ユーザーはどのボタンがどのアクションを実行するかを考える必要がありません。

製品が直感的でわかりやすいほど、より簡単で楽しい体験になるのです。

一貫性

インタラクションや UI デザインには一貫性が不可欠であり、一貫性がないとユーザーは戸惑い、ユーザビリティの問題が起こります。なのでデザイナーは、一貫性のある UI やインタラクションをデザインするだけでなく、さまざまな画面サイズやデバイスにおける一貫性も考慮しないといけません。

多くの組織は、承認された UI パターンやインタラクションとの一貫性を上げるのに、デザインシステムを構築したり、オープンソースのコンポーネントライブラリを採り入れたりしていますが、デザイナーはこのような選択について考える必要がなくなれば、UX に集中できるようになり、ユーザーが望ましい結果を達成できるよう適切なパターンを適用することができます。

アフォーダンス（インタラクションの可能性）

アフォーダンスは、ユーザーに何かの使用方法やアクションの実行方法を伝えるものであり、UI 要素を使ってタスクを完了する方法が、ユーザーにとって明白であることを保証するのがインタラクションデザイナーの仕事です。

例えば、送信ボタンの無効状態で、ユーザーは送信する前にフォームの必須項目を入力しないといけないことがわかります。また、リンクにさまざまな色と下線を使うことで、ユーザーはどのテキストをクリックできるかがわかります。

認知

インタラクション デザイナーは、UX デザインにおける認知心理学（注意と知覚、記憶、問題解決、創造的思考）の基礎を理解しておかないといけません。そしてこれは、この精神プロセスに過負荷をかけない製品と体験をデザインすることを目的としています。

認知は、以下などのデザイン心理学の原則を扱っています：

• ゲシュタルトの原理：人間の脳がどのように視覚を認識し、馴染みのある構造を作り出すか。
• フォン・レストルフ効果：物体の集団の中で、異なるものが目立つ、あるいは最も記憶に残りやすいという予測。
• ヒックの法則：相手に選択肢を与えれば与えるほど、決断に時間がかかる。
• 最小努力の原則：利用者は最小限のエネルギーで済む選択や行動をとる。
• 直列的位置づけ効果：人間は、リスト、文章、またはコンテンツの最初の項目（初頭効果）と最後の項目（新近効果）を最もよく覚えている傾向がある。
• 永続的な習慣の原則：人は馴染みのあるルーティンや習慣に依存する ‐ だからこそ、ユニバーサルデザインパターンを使うことが重要。
• 感情伝染の原理: 人間は、動物やアニメーションなどの他人の感情や行動の模倣や共感をする。なので、デザイナーは気持ちや感情を強調するのに顔（絵文字も含む）を使う。
• フィッツの法則：目標地点まで移動するのに要する時間は、その距離と目標の大きさの関数である。

以下の２記事では、認知について深く掘り下げられています： 

• 優れたUXデザインを生み出す心理的トリック
• A UX Designer’s Guide to Improving Speed of Use（UXデザイナーによる利用スピード向上のためのガイド）

これらの原則は、すべての UX 分野に適用されます。

インタラクションデザインチェックリスト

米国政府の Technology Transformation Services（技術変革サービス）の Web サイトである usability.gov から、有用なインタラクションデザインチェックリストを見つけました。このチェックリストには、インタラクションをデザインする際に考慮すべき質問が含まれています。

• ユーザーがインターフェースと対話する方法を定める：クリック/タップ、プッシュ、スワイプ、ドラッグ＆ドロップ、キーボードコントロールなど。
• ユーザーが行動を起こす前に、行動に関するヒントを提供する：正しいラベル付け、リンクの色の違い、クリック可能なUI要素の一貫性の使用など。
• エラーを予測して軽減する：エラーを防ぐと同時に、問題を修正するために役立つメッセージをどのように提供するか。
• システムのフィードバックとレスポンスタイムを考慮する：ユーザーがアクションを完了した後に何が起こり、フィードバックはどのくらいで表示されるのか。
• 各要素について戦略的に考える：適切な要素／パターンを選択したか、エラーを避けるためにクリック可能な要素の間に十分なスペースがあるか、先述のデザイン心理学の原則に従っているかなど、すべての決定をユーザーの視点から精査する。
• 習得しやすいようにシンプルにする：UI やタスクをできるだけシンプルにし、馴染みのあるパターンを使い、認知力を消耗するタスクや機能を最小限に抑えることで、ユーザー体験をシンプルにする。

また、アーロン・レガスピ氏とアミット・ジャクー氏による IxD チェックリストもチェックしてみてください。

インタラクションデザインのリソース

• Interaction Design Association（インタラクションデザイン協会）
• Interaction Design Foundation（インタラクションデザイン財団）
• 50 Best Interaction Design Programs（インタラクションデザインプログラム ベスト５０）

インタラクションデザイナーの仕事

インタラクションデザイナーの役割は、ユーザーが製品、特に Web サイト、アプリ、ソフトウェアインターフェースのようなデジタル製品とどのようにインタラクションするかということに焦点が当てられ、そういったインタラクションが直感的で、シームレスで、楽しいものであることを保証することを担っています。

インタラクションデザイナーの仕事の内訳は以下のようになります：

１．ユーザーのニーズを理解する

インタラクティブデザイナーは、誰がユーザーで、何が必要なのかをリサーチすることに多くの時間を費やします。これには、ユーザーリサーチ、インタビュー、データ分析などの実施や、ユーザーが直面している問題と、製品がそれをどのように解決できるかの把握などが含まれます。このようなニーズを理解するのは、ユーザーにとって意味のあるインタラクションをデザインする上で非常に重要です。

２．ユーザーフローの作成

インタラクションデザイナーは、ユーザーに何が必要なのかがわかったら、例えば EC アプリの場合だと、カートに商品を追加し、チェックアウトプロセスを経て、確認を受け取るまでといったようなユーザーフローをデザインします。これは、そういったステップを可能な限り簡単かつ効率的にすることを目標としています。

３．インタラクティブな要素をデザインする

ここは、クリック、タップ、スワイプなど、すべてのインタラクティブな要素である、ボタン、ナビゲーション、フォームに焦点を当てるところであり、デザイナーはこのような要素を、わかりやすく、機能的で、アクセスしやすいようにデザインします。そして彼らは「このボタンは目立つだろうか？ユーザーはクリックすると何が起こるか分かるだろうか？」といったことを常に考えています。

４．試作とテスト

インタラクティブデザイナーは、プロトタイプ（製品の初期モデル）を作り、実際にそれがどのように使われるかをテストします。この段階は、仮定のテストに関するものであり、ユーザーやステークホルダーからのフィードバックを集め、何がうまくいっていて、何がうまくいっていないかを確認し、それに基づいてデザインを改良していきます。

５．他のチームと連携する

インタラクティブデザイナーは、UX デザイナー、デベロッパー、プロダクトマネージャーと密接に協力し、デザインが実現可能で、ビジネス目標に沿ったものであることを確認します。その際デベロッパーは、インタラクションがどのように機能すべきか（ボタンにカーソルを合わせるとどうなるかなど）を正確に知る必要があります。

６．一貫性を確保する

彼らの役割の大部分は、製品全体で確実にデザインが一貫しているようにすることです。それでユーザーは、さまざまなセクションを移動するときに、慣れ親しんだ感覚を持つはずです。つまり、同じようなタスクやインタラクションに対しては、同じデザインパターンにこだわるということです。

７．ユーザーニーズとビジネスニーズのバランス

インタラクティブデザイナーは主にユーザー体験に焦点を当てますが、デザインをビジネスの目的に合わせる必要もあります。例えば、登録者数を増やすことが目的であれば、ユーザーが押し付けがましく感じたり、ページを巡るのを妨げられたりすることなく、登録ページに誘導されるようなインタラクションをデザインするかもしれません。

８．最新情報の入手

あと、インタラクションデザイナーは、デザインのトレンド、ツール、ベストプラクティスを常に把握しています。インタラクションデザインは急速に進化するため、製品の競争力とユーザーに対する使いやすさの維持には、常に先を行くことが重要です。

つまり、その製品が見た目だけでなく、ユーザーにとって簡単で満足のいく方法で機能することを保証するために彼らはここにいるのであり、ユーザーと製品とのインタラクションを改善することに常に焦点を当てているのです。

UXPin – 究極のインタラクションデザインツール

従来の画像ベースのデザインツールでは忠実さや機能性が不足し、インタラクションデザイナーは複数のフレームを作成する手間がかかりますが、UXPinのコードベースデザインツールを使えば、少ない労力でより優れた結果を得られます。

以下でその方法を見てみましょう：

ステート

UXPin では、１つのコンポーネントに対して複数のステートを作成できます。例えば、デフォルト状態、ホバー状態、アクティブ状態、無効状態のボタンを作成し、それぞれに個別のプロパティとトリガーを設定することができます。

UXPin の ステートでは、カルーセル、アコーディオンメニュー、マルチレベル・ドロップダウンメニューなど、より複雑な UI パターンを１つのフレームで作成することもでき、その UI パターンはコードのように動作するため、インタラクションデザイナーはテスト中に正確な結果とフィードバックを得ることができます。

インタラクション

UXPin のインタラクションがあれば、デザイナーは画像ベースのデザインツールの能力をはるかに超えた、没入感のあるコードのような体験を構築できます。また、UXPin にはトリガー、アクション、アニメーションが幅広く備わっており、完全に機能するアニメーションプロトタイプを作成できます。

また、条件付きインタラクションで、デザイナーは Javascript のような 「if-then 」や 「if-else 」の条件を使って、プロトタイプをさらに一歩進め、ダイナミックなユーザー体験を作り出すことができます。

Variables（変数）

UXPinでは、フォームフィールドは最終製品のように見えて機能します。そして Variables（変数）により、デザイナーは、例えば「オンボーディングフォームを完了した後に、個別化されたウェルカムメッセージを表示する」など、ユーザーの入力を取得してそのデータをプロトタイプの別の場所で使うことができます。

Expression

UXPin の Expression で、フォーム検証や計算コンポーネント（ショッピング カートの更新）などのコードのような機能によって、プロトタイプが新たなレベルに上がります。

この強力な機能により、インタラクションデザイナーはコードを学んだりエンジニアに頼ることなく、機能するプロトタイプを作成できます。

UXPin を使うことで、デザイナーは構築、テスト、反復をより速やかに行うことができ、大幅に優れた結果を得ることができます。無料相談およびトライアルはこちらから。

The post インタラクションデザイン とは appeared first on Studio by UXPin.

２０２２年、世界のインターネットユーザー数は４９億５０００万人と推定されました。これは世界人口の６０％以上にあたります。

スマートフォン、タブレット端末、ノートパソコン、デスクトップパソコン、そしてウェブサイトやアプリケーションを多くの人が利用するには、使いやすい、効率的、そして楽しく使えることが重要になってきます。

その中心となるのが、UI（ ユーザーインターフェイス ）の存在です。

本記事では、UIの基礎と重要性を解説し、ウェブサイトやアプリでのデザインにおける覚えておくべきヒントをご紹介します。

UXPinの無料相談およびトライアルはこちらから。

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

UI （ ユーザーインターフェース ）とは

UI（ ユーザーインターフェース ）とは、私たちがスマートフォンやノートパソコンなどのデバイスとやりとりする方法のことであり、ディスプレイ画面、キーボード、マウスなどが含まれることがあります。

私たちが遭遇するアプリケーションやウェブサイトにもそれぞれ UI があり、直感的で満足のいくデザインであることが求められます。Forester の調査によると、優れた UI はウェブサイトのコンバージョン率を最大２００％上げると言われています。

UI は、UX（ユーザーエクスペリエンス）と並んで語られることが多く、これには、ウェブページやデスクトップ、モバイルアプリの画面の視覚的なデザインや体験、ロード時間や応答性などの動作、ユーザーの生活における役割の理解度などが含まれます。

UI とUX は、どちらもHCI（ヒューマン・コンピュータ・インタラクション）の分野です。インタラクションデザインについては、「UXデザイン vs UIデザイン 覚えておくべき違い」をお読みください。

GUI（グラフィカル・ユーザーインターフェイス）とは、UI との違い

  UI には、さまざまな種類があります。

コンピュータの黎明期には、画面上に文字列を並べたCLI（コマンドラインインタフェース）で情報を提供することが多く、これは、UI の比較的基本的な例でした。

技術やデザインの進歩に伴い、画像、アイコン、ダイアログボックスなどが追加され、インタラクションがより身近なものになりました。これがGUI（グラフィカル ユーザーインターフェース ）であり、その名の通り、グラフィックが追加された UI です。GUI は、UIのサブセットとして考えるのが最も適切です。

もうひとつの UI は、VUI（音声 ユーザーインターフェース ）であり、例えばAmazon の Alexa や Apple の Siri などが挙げられます。

UIの構成要素

  UI は、要素で構成されています。アプリやウェブサイトの構成要素であり、一貫性を保つようにデザインされているため、ユーザーはデジタル製品を操作する際に何を予測すべきかがわかります。

一般的なデザインパターンとしては以下が挙げられます：

• 入力コントロール: ユーザーがデータを入力または選択するための要素。

  • チェックボックス: 複数の選択肢からいくつでも選べる形式。特に複数選択が必要な場面で利用される。

  • ドロップダウンリスト: 一つの選択肢を選ぶ際にコンパクトに表示できる形式。これでユーザーは選択肢を確認しやすくなる。

  • ボタン: ユーザーのアクションをトリガーする基本的な要素。押すことで新しいページに移動したり、データを送信したりできる。

• ナビゲーションコンポーネント: ユーザーがアプリやウェブサイト内をスムーズに移動するための要素。

  • パンくずリスト: 現在のページ位置を示し、前のページに戻りやすくするためのナビゲーションツール。

  • スライダー: 複数のオプションや情報を視覚的に表示し、ユーザーが簡単に選択できるようにする。

  • 検索フィールド: ユーザーが特定の情報を迅速に見つけるための入力フィールド。これで簡単なキーワード検索が可能になる。

• 情報提供コンポーネント: ユーザーに必要な情報を提供し、理解を助けるための要素。

  • 進捗バー: タスクやプロセスの進行状況を視覚的に示し、これでユーザーは現在の状態を把握しやすくなる。

  • 通知: 重要な情報やアクションを促すメッセージ。ユーザーが必要な行動を取るための指示を提供する。

  • メッセージボックス: エラーメッセージや確認ダイアログを表示し、ユーザーに対して重要な情報を伝える。

• コンテナ: コンテンツを整理し、グループ化するための要素。

  • アコーディオン: 複数の情報を折りたたむことで、必要な情報だけを表示し、ユーザーの視覚的な負担を軽減する。

  • タブ: 関連情報をグループ化し、さまざまなセクションに素早くアクセスできるようにする。

このような構成要素は、ユーザーがデジタル製品とインタラクションする際の体験をよくするのに欠かせない要素です。それぞれの要素がうまく機能することで、全体のユーザー体験が最適化され、使いやすさが向上します。

  UIの要素について詳しく知りたい方は、「デザイナーが知っておきたいUI要素」をご覧ください。

優れたUIが製品の成功の鍵を握る理由

  調査によると、ユーザーがウェブサイトについての意見を持つのにかかる時間は、わずか０.０１７秒です。この瞬時の判断で最も重要なのは、見た目と使い勝手であり、さらに、ウェブサイトの離脱率の９４％は、デザインに関連していると言われています。

ウェブデザインやアプリの成功において、UIが重要であることは明らかであり、UIはビジネスをも左右する可能性もあるのです。次は、UIが重要である理由をさらに詳しくみていきましょう。

ユーザー獲得率の向上

  アプリやウェブサイトに良いデザインがあれば、新しい顧客を獲得することができ、競争力が上がります。以下に例を挙げましょう。

商品を買おうと思っているとして、同じ商品が異なる２社のサイトで同じ値段で売られています。このうち１社のウェブサイトは、ナビゲーションが明確でシンプルであり、多くのビジュアル要素を用いて製品をうまく紹介し、ユーザーが目標に到達するのに役立つ情報が提示されているといたとします。

一方、もう片方のサイトは、読み込みに時間がかかり、ナビゲーションが難しく、やっと目的の商品を見つけたと思ったら、情報はページの下の方に埋もれてしまい、購入ボタンが見つかりづらいデザイン…となるとどちらで商品を購入するかは一目瞭然ですね。

顧客維持率の向上 

  魅力的なUIデザインは、新規顧客の獲得に役立つだけではありません。サイトやアプリの使い方がシンプルであれば、ユーザーは定期的にサイトを訪れるようになるはずです。優れたUIは閲覧を促し、エンドユーザーがサイトに滞在する時間を長くしてくれます。

コンバージョンの可能性も高まるので、売上も増え、また、ユーザーがサイト訪問を途中で切り上げたり、競合他社のプラットフォームに移行する確率も低くなります。

ブランドロイヤリティの向上 

優れたUIは、エンドユーザーに心地よい体験を提供し、再訪を促します。この繰り返しの訪問がブランドへの愛着を生み出します。

直感的で使いやすいインターフェースだと、満足度は上がり、ユーザーエンゲージメントは強化されます。ロイヤル顧客は、口コミを通じて他の潜在顧客にブランドの良さを広めてくれる貴重な存在です。さらに、長期的な関係構築を促進し、リピーターを増やすことで顧客生涯価値を向上させます。したがって、企業は常にUIの改善に努めることが大切です。

スケーラビリティ（拡張性）

  最も効果的なUIとは、「シンプルなデザイン」であり、必要なものだけがデザインされ、ウェブサイトやアプリに一貫性があり、ユーザーに優しいということです。つまり、使い・見やすくすることでユーザーの混乱を避けることができるのです。

デザインのシンプルさを実現すると、新しい機能の追加や、ウェブサイトやアプリのインフラの整備がしやすくなります。つまり、スケーラブル（より多くの人々に使ってもらえる）になるのです。

エラーの減少

 ユーザーテストは、UIデザインの重要なプロセスのひとつです。  

ユーザーテストには、段階がいくつかあります。プロセスを進めるにつれ、UX デザイナーはユーザー要件についてより深く理解し、ユーザージャーニーに関するあらゆる問題を解決していきます。そして、ブラッシュアップされたデザインは、より完成品に近いプロトタイプへと仕上がっていきます。

デベロッパーにデザインを渡すとき、UXデザイナーは、ウェブサイトやアプリのプロトタイプを操作で「ユーザーが直面する問題」を解決しておかなければいけません。それによって時間とリソースが節約され、デベロッパーは、最終製品がユーザーのために機能することを理解しながら、デザインに操作性や機能性をつけることができます。

UXデザイナーは、開発プロセスにおける問題解決に役立つインサイトを提供する立場にあります。たとえば、ページの読み込みが遅い場合、それがユーザーに与える影響を速やかに評価し、最終製品の成功に不可欠かどうかをデベロッパーが判断できるようにします。

アクセシビリティ

  優れたUIとは、ウェブサイトやアプリが誰にとってもアクセスしやすいものであることです。５人に１人には障がいがあり、オンラインでの情報アクセスが困難であると言われています。つまり、アクセシビリティのガイドラインに準拠することが必要になります。

詳しくは、「Webアクセシビリティ チェックリスト：遵守すべき２８点 」をご覧ください。

いいUIを作るためのアプローチ方法 

プロトタイピングの重要性

いいUIは、プロトタイプから始まります。プロトタイプが、実際に動作するウェブサイトやアプリの見た目や機能を反映していれば、UXのことにに関するより具体的なフィードバックを得やすくなります。

一方、プロトタイプが静止画像をつなげただけのような基本的なものである場合、デザインが実際に機能するかどうかをイメージ・判断するのは難しいでしょう。これでは、最終製品のユーザビリティが損なわれてしまう可能性があるのです。

UXPinの活用

UXPinは、完全な機能を持つプロトタイプが作成できるデザインツールです。コンポーネント駆動型であり、プロトタイプの構築はゼロから始めるのではなく、デザインチームがインタラクティブなコンポーネントをドラッグ＆ドロップします。これにより、デザインと構築のプロセスをスピードアップすることができます。

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

UXPinで作られたプロトタイプを操作する人は、データ入力、リンクのクリック、ページのスクロールなどができるため、誰でも簡単に本物のインターフェースを使っていると思うでしょう。ユーザーがプロトタイプを操作すると、UXPinはデータを取得し、何がうまくいっていて、何が改善されなければならないかをデザイナーに知らせます。

デザインと開発の連携強化

最終デザインをデベロッパーに渡すとき、UXPinのプロトタイプがあれば、デベロッパーは最終製品がどのように機能するかを明確に把握することができ、それによって、デザインチームと開発チームの連携がより円滑になります。

UIデザインの準備はいいですか？

UI は、単に美しさだけの問題ではなく、ユーザーがウェブサイトやアプリとどのように関わって、最終的にあなたのブランドをどのように認識するかを決定するものです。

上手くUIをデザインすることで、新規顧客やロイヤル顧客を獲得し、競合他社に対する優位性を高めることができます。

UIにシンプルなデザインの原則が取り入れられていれば、ビジネスの成長に合わせて製品を拡張しやすくなるはずです。あと、誰もがアクセスできるUIにすることの重要性にも理解を深める必要がありますね。

優れたUIの中心にあるのは、ユーザーテストです。UXPinのような強力なUXデザインツールは、確実にその助けとなります。

UXPinには、完全に機能するUI プロトタイプのデザインに必要な機能がすべて含まれており、コードに変換してデベロッパーと共有する前に、ユーザーとテストすることができます。UI デザインに携わっているのであれば、その機能性は必ずや役に立つはずです。

UIデザインを学ぼうとされている方にも、本記事がお役に立てたら幸いです。

無料相談およびトライアルはこちらから。

The post ユーザーインターフェース | UIとは？【初心者向けガイド】 appeared first on Studio by UXPin.

UI のグリッドシステムはレスポンシブデザインに非常に重要であり、それでレイアウトがさまざまな画面サイズや解像度にシームレスに適応することが保証されます。そしてデザイナーはグリッドシステムを使って、一貫性と視覚的階層を維持する流動的なレイアウトを作成して、デスクトップ、タブレット、携帯電話などの複数のデバイスにわたって最適なユーザー体験を提供します。

デザイナーはボタンをクリックするだけで、UXPin でカラム、ベースライン、スクエアなどの３つの UI グリッドタイプを作成できます。無料トライアルにサインアップして、UXPin の高度な UX デザイン機能をぜひお試しください。

UI グリッドとは

UI グリッドは、コンテンツを行と列に整理するデザインにおける基本的なレイアウト構造であり、ページまたは画面上の UI 要素を配置するための体系的なフレームワークを提供します。

また、UI グリッドで、一貫性のある調和のとれた視覚的秩序が確立されることから、コンテンツのナビゲーションや理解がしやすくなり、デザイナーはグリッドシステムを導入することで、UX（ユーザーエクスペリエンス）を上げるような、まとまりがあってバランスの取れたレイアウトを作成することができ、さまざまなデバイスやスクリーンサイズへの適応性と柔軟性も確保できます。

UI グリッドの種類

原稿グリッド

原稿グリッド（１カラムグリッド）は最もシンプルなグリッドタイプで、レイアウトの幅いっぱいに１カラムが配置されます。デザイナーは主に、読みやすさを優先するブログ記事や記事などの長文のテキストコンテンツに原稿グリッドを使います。

例えば、あるオンライン新聞は、記事を見やすく表示するために原稿グリッドを使う場合があります。

カラムグリッド

カラムグリッドは、レイアウトを複数の縦列に分割することから、コンテンツを整理するための柔軟な構造をもたらします。デザイナーは、Web ページやアプリのインターフェースのような複雑なレイアウトにカラムグリッドをよく使います。

例えば、大抵の Web サイトでは、デスクトップ用の１２カラムグリッドから、アスペクト比が小さい場合の２～４カラムグリッドまで、カラムグリッドシステムが採用されています。

モジュラーグリッド

モジュラーグリッドは、レイアウトを行と列に分割する多目的な構造であり、同じサイズのモジュールのマトリックスを作成します。デザイナーは、画像ギャラリーや商品リスト、カードベースの UI など、高いレベルの一貫性と均一性が求められるコンテンツの編成にモジュラーグリッドを使います。

モジュラーグリッドを使う例としては、一貫したグリッド形式で商品を表示するEC サイトが挙げられ、それでユーザーはアイテムを簡単に閲覧、比較できます。

階層グリッド

階層グリッドは、コンテンツの視覚的な階層に基づいて、さまざまな配置や構成を可能にする柔軟な構造であり、重要度や複雑さのレベルが異なるコンテンツを扱う場合に特に便利です。

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

ベースライングリッド

ベースライングリッドとは、レイアウト全体のテキストやその他の要素の垂直方向の一貫した配置を確保する水平方向のグリッド構造です。デザイナーは、読みやすさと視覚的な調和を保つべく、タイポグラフィを多用するデザインでベースライングリッドを使います。

ベースライングリッドを使う場合の例としては、コンテンツが豊富な Web サイトやデジタル出版物が挙げられ、ここではさまざまなセクションやページ間での一貫したテキスト配置の維持が、プロフェッショナルな外観と UX 向上のために非常に重要となります。

正方形グリッド

正方形グリッド（正方形のグリッドまたは市松グリッド）は、等間隔で等しい大きさの正方形モジュールで構成されるモジュール式グリッドです。デザイナーは、特に画像やアイコンのような正方形のコンテンツを使って、視覚的にバランスの取れたレイアウトを作成するのに正方形のグリッドを使います。

正方形のグリッドを適用した例として、ポートフォリオの Web サイトが挙げられます。ここでは、プロジェクトのサムネイルは均一なグリッド レイアウトに配置されることから、視覚的に魅力的なプレゼンテーションができ、ユーザーは展示された作品を簡単に閲覧および探索できるようになります。

フルードグリッドについて

フルードグリッドは、さまざまな画面サイズやデバイスに自動的に調整される、柔軟で応答性の高いレイアウトを実現する最新の UI デザイン手法であり、フロントエンドデベロッパーは、ピクセルなどの固定単位ではなく、パーセンテージなどの相対単位を使ってこの流動性を実現します。

フルードグリッドは、ユーザーのビューポートに合わせてサイズを変更して適応する動的なレイアウトを作成することから、さまざまなデバイスや方向にわたって最適なエクスペリエンスが保証されます。デベロッパーは、CSS とブレークポイントを使って流動的なグリッドを実装し、それでレイアウトを調整やリフローする特定のビューポート幅が確定します。

UI グリッドの構造

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

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

• 一貫性：UI グリッドは、デザインのさまざまなセクションやページにわたって統一性を促進し、その結果ブランドアイデンティティの強化や UX の向上になる、まとまりのある洗練された外観がもたらされる。
• 視覚的な階層：グリッドシステムで、デザイナーはデザイン要素の配置とサイズをガイドすることによってコンテンツの明確な階層を確立でき、それでユーザーは提示された情報を理解し、ナビゲートしやすくなる。
• スケーラビリティと適応性：グリッドで、さまざまな画面サイズやデバイスに簡単に適応できるようなデザインになることから、複数のプラットフォームで一貫性のあるレスポンシブな UX が保証される。
• 読みやすさの向上：グリッドシステムで読みやすくなり、  コンテンツに 構造的な 整列と間隔がもたらされることで、ユーザーはサッと見渡したり把握しやすくなる。
• 連携の促進：グリッドフレームワークの共有でチームのデザインプロセスがシンプルになることから、複数のデザイナーがプロジェクトのさまざまな側面にわたって連携して作業したり一貫性を維持したりできる。

UI グリッドの作り方と使い方

目的とコンテンツ構成の決定

まず、デザインの目的と作業するコンテンツの構成を定めることから始めます。このステップで、レイアウトの要件がわかり、コンテンツを整理して表示するのに最も効果的なグリッドのタイプとカラム（または行）の数を知ることができます。

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

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

マージンとガッターを作る

マージンとガターを定めて要素間の間隔を一定にし、バランスのとれたレイアウトを維持します。マージンでレイアウトの端にスペースを作り、ガターで列と行の間の一貫した間隔を確保し、マージンとガターが適切に設定されことで、すっきりと整った外観になります。

列と行のサイズを定める

表示するコンテンツと希望する柔軟性に基づいて列と行のサイズを決めます。列と行のサイズを統一することで、統一感のある美見た目が保たれます。

要素とテキストの整列

デザイン要素やテキストをグリッド構造内に整列させ、決められた列、行、マージン、ガッターに従います。適切な配置だと、まとまりのある外観が確保され、明確な視覚的階層を作成することによって読みやすくなります。

グリッドを破って強調と多様性を実現

グリッドを守ることは一貫性を保つのに非常に重要ですが、時にはグリッドを破ることでデザインに強調と視覚的な面白さを加えることができます。特定の要素やセクションのためにグリッドを崩すことで、重要なコンテンツに注目を集めたり、ダイナミックで魅力的な UX が生み出されたりします。

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

• シンプルかつ一貫性を保つ：カラムグリッドを使ってブログのレイアウトをすっきりと整理し、すべてのページでテキストと画像の配置を統一する。
• 柔軟性と適応性を持たせる：例えば、モジュラーグリッドを使ったレスポンシブ Web サイトをデザインすることで、様々なスクリーンサイズやデバイスにスムーズに対応でき、一貫した視覚体験の維持もできる。
• 空白を効果的に使う：ポートフォリオの Web サイトでは、マージンとガッターを贅沢に使って各プロジェクトの周囲に十分な空白を作ることで、ユーザーは気が散ることなく個々の作品に集中できるようになる。
• 視覚的なバランスを保つ：オンラインマガジンの場合、テキストと画像を階層的なグリッド内でバランスよく配置することで、視覚的な重みがレイアウト全体に均等に分散され、バランスのとれた見た目が実現する。
• 意図的かつ計画的にグリッドを崩す：例えば、新製品のランディングページでは、目を引く大きな画像や CTA（行動喚起）の要素をグリッドの境界の外側に配置してグリッドを破壊し、新鮮で一味違ったものが強調される。

UI デザインにおけるグリッドシステムとは

ゼロから新しい都市をデザインする任務を負った都市プランナーだと想像してください。秩序と流れを作り出すには、まずは一連の道路、ブロック、交差点を描きます。重要な建物は大通りに、小さな建物は静かな場所に配置します。このグリッド構造が都市の骨格となることから、人は直感的にナビゲートできるようになり、あらゆる建物を目的に合わせて配置するための強固なフレームワークがもたらされます。UI デザインにおいても同様に、グリッドシステムは要素を整理し、視覚的な流れをガイドし、インターフェースを簡単にナビゲートできるようにするという目的を果たします。

では、都市のグリッドと同様に、グリッドシステムがなぜ重要なのかを詳しく見ていきましょう。

基盤の構築：構造と調整

街路が明確な構造を作るように、UI デザインにおけるグリッドシステムで一貫性と整列の基礎がもたらされます。建物や道路が何の構造もなくランダムに配置された街をナビゲートしようとすることを想像してみてください。混沌としているでしょう？そこで、グリッドで 列、行、間隔を使ってコンテンツや要素を整理することによってこれを避けることができ、それでバランスのとれた直感的かつ調和のとれた構造的な外観ができます。

グリッドは多くの場合、１２カラムグリッドなどのカラムに基づいており、それで画面を管理しやすいセクションに分割することができます。また、各カラム、ガッター、マージンには特定の目的があることから、さまざまな画面サイズや解像度で要素が適切に配置されるようになります。

目のための地図：視覚的階層と流れ

歩行者が道路や交差点をたどるように、ユーザーがスクリーンに降り立ったとき、視線は特定の経路をたどります。グリッドが視線を誘導することで、見出しや CTA ボタンなどの重要なエリアは強調され、気が散るものは最小限に抑えられます。うまく構成されたグリッドで視覚的な階層ができるので、ユーザーはどこから始め、次にどこへ行けばいいのか自然にわかるようになります。

例えば、グリッドの上部に複数の列にわたって見出しを配置するとすぐに注目を集めますが、アイコンや補助テキストなどの小さな要素は、より狭い列にきちんと収まります。こうすることで、画面全体に分かりやすい導線ができ、ユーザーはどこを見ればいいのかがよく分かるようになります。

柔軟性と応答性：あらゆる 「スクリーンサイズ 」に対応

都市のグリッドが、その都市を訪れる人の数に応じて柔軟に拡大縮小することを想像してみてください。UI デザインにおいて、グリッドでさまざまな画面サイズに適応するレスポンシブデザインを作ることができることから、デスクトップ、タブレット、スマートフォンでのコンテンツが整理されてアクセスしやすくなることが保証されます。また、柔軟なカラムとブレークポイントを定めることで、整列や明瞭さが損なわれることなくグリッド内の要素を並べ替えることができ、デバイス間で一貫した UX を保つことができます。

正確さと一貫性：一貫性のあるルック＆フィール

都市のグリッドが一貫したブロックサイズを保証するように、UI グリッドシステムは、どのボタン、画像、テキストフィールドの配置にも正確さをもたらし、これによって、アプリケーションや Web サイト全体に一貫性のあるデザイン言語が確立されます。また、要素をグリッドにスナップさせることで、デザイナーは UI がぞんざいになったり、雑然とした感じになるような些細なズレを避けることができます。

この精度により、ユーザーとの信頼関係を築くプロフェッショナルな外観も生まれます。人は意識的にすべての配置に気づくわけではないかもしれませんが、レイアウトが細心の注意を払って構成されている場合、無意識のうちに違いを感じます。

構造内の自由

グリッドで創造性が制限されると心配するデザイナーもいるかもしれませんが、実際はまったく逆であり、都市計画者が構造化されたグリッドの中に公園やユニークな建物、オープンスペースを追加するように、デザイナーはグリッドの枠組みの中でダイナミックで視覚的に魅力的なレイアウトを作ることができます。グリッドは、要素に着地点を与えることで、創造性をサポートするツールとなり、グリッドを崩して強調したり、列のスパンをいいように使うことでで主要な特徴を強調したり、バランスと構造を維持しながらすべて行うことができるのです。

まとめ

UI デザインにおけるグリッドシステムは、画面上のあらゆるビジュアル要素を整え、並べ、ガイドする構造基盤です。まるで街のグリッドのように、すべての構成要素が調和して機能することで、ユーザーはシームレスでナビゲートしやすい体験を得られます。この構造でユーザビリティが上がるだけでなく、デザイナーは創造性をサポートするフレームワークを得られ、さまざまスクリーンサイズ間での柔軟性と一貫性が実現します。

グリッドを使うことで、ユーザーが探索や移動を楽しめる、よく計画された都市のように、整理され、直感的で、美しいデジタル空間を作成できます。

UXPin で UI グリッドシステムを作成する方法

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

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

また、グリッドレイアウトの要素間の間隔をサッと配置・調整できるスマートグリッドもあります。

希望のグリッドシステムが設定されると、UXPin ではグリッドの端にスナップすることによって位置決めや配置ができ、設定でスナップを無効にすることもできます。

グリッドの種類に応じて、列、列幅、行、ガッター、マージン、オフセットなど、さまざまなグリッドプロパティを調整でき、その際 UXPin は、選択したグリッド設定を「記憶」してプロトタイプ内の新しいページに適用します。

UXPin の UI グリッドやその他多くの高度な機能を使って、プロトタイプを一つレベルアップしませんか。無料トライアルにサインアップして、UXPin でインタラクティブなプロトタイプ第一号を作成しましょう。

The post UI グリッド – 押さえておくべきこと appeared first on Studio by UXPin.

ノーコードやローコードのアプリケーションプラットフォーム（LCAP）は、近年さらに注目を集めてきています。ローコードの製品には、特定のニッチな分野をターゲットにしたものもあれば、広範囲のアプリケーション、ソフトウェア、ツールのコーディングを不要にするソリューションを提供するものもあります。

ローコードまたはノーコード開発のいい点は、アプリやツールの構築をより身近なものにしてくれることです。特に大きなアイデアはあるものの、資金があまりない若い起業家にとっては魅力的です。

多くのLCAPでは、ユーザーがAPIやGoogleのFirebaseのようなインフラストラクチャ・アーキテクチャと統合できるようになっており、企業は手頃な価格のアプリや既存のソフトウェアのプラグインを作ることができます。

ローコード開発は、UX調査やテストにおいても有効的です。UXデザイナーは、デザインを開発チームに渡す前に、LCAPを使って完全に機能するプロトタイプを作成し、より効率的にユーザーテストを行うことができます。このようなローコードのワークフローは、新製品や新機能をリリースする際の時間とコストを大幅に削減します。

ローコードとノーコード、その違いは？

多くの人にとって、「ローコード」と「ノーコード」は同じ意味を持つ言葉です。ノーコードと謳っている開発ツールのほとんどは、ユーザーがカスタマイズのために何らかのコード（通常はCSS）を挿入することを可能にしており、これが基本的にはローコードとなります。

最も一般的で広く受け入れられている言葉は、ローコード（Low-Code Application Platforms – LCAP）で、ローコードとノーコードの開発環境を指しています。

それでも、ローコードとノーコードには微妙な違いがいくつかあります。

ノーコードツール

ノーコードビルダーは通常、あらかじめテンプレートが用意されており、ユーザーはロゴや画像、テキストを変更することしかできません。

また、これらのノーコードツールでは、Google SheetsやAirtableのようなシンプルなデータベースに接続することもできます。技術的なスキルを持たないユーザーでも機能するアプリを構築できるため、ノーコード開発は非常に身近なものとなっています。

ローコードツール

ローコードビルダーは、テンプレートを提供するだけでなく、ページやコラムのレイアウトを編集したり、CSSやJavascriptを追加したり、APIを接続したりと、よりカスタマイズが可能です。

ローコードツールでは、GoogleのFirebaseやParse、AWS Amplifyのような、より技術的なデータベースへの接続も可能になるかもしれません。

SAPやSalesforceのような多くの企業向けアプリケーションは、企業がソフトウェアと統合するアプリを構築できるように、ローコードツールを提供しています。

ローコード開発の仕組みとは？

ローコードツールでは通常、ドラッグ＆ドロップ式のビルダーを使用して、アプリ（モバイル、デスクトップ、ウェアラブル・デバイス）やウェブサイトのページに要素を配置します。これらの要素には、テキスト、画像、ボタン、ナビゲーションなどが含まれます。これらの要素の中で、ユーザーはデータベースからデータを引き出したり、アクションやアニメーションを作成したりすることができます。

各要素は、ローコードツールがアプリやWebサイトをコンパイルする際に使用する、効果的なウィジェットです。また、ローコードツールの中には、ホスティングオプションを提供しているものもあり、ユーザーはコードのエクスポートや適切なホスティング環境の確保を気にする必要がありません。

デザインプロセスにおけるローコード

ローコードは、デザインプロセスにおいても不可欠なツールになりつつあります。まず、デザインツールが画像ベースではなくコードベースであれば、構築されたプロトタイプの挙動は最終製品に近くなり、インタラクションも非常にリアルになるという事実があります。

ローコードデザインツールのもう一つの利点は、製品チーム全体に力を与えることができることです。ローコードデザインソフトウェアを使えば、デザインの経験がほとんどないプロダクトチームでも、UXチームが作成したデザインライブラリを使って製品やインターフェースを簡単に作ることができます。

その典型的な例がUXPin Mergeです。デザイナーはMergeを使用して、準備の整ったUIコードコンポーネントをUXPinにインポートし、すぐにそれらを使ってデザインすることができます。これらの準備の整った要素は、開発者のGitリポジトリやStorybookから得られます。

製品チームは、これらのコンポーネントを使って新しい製品やユーザーインターフェースを設計することができます。何よりも優れているのは、インタラクションがすでに用意されているため、チームが作るプロトタイプは忠実度が高く、会社のすべての標準に沿ったものになるということです。

チームのメンバーはすぐに使えるコンポーネントを使うので、エンジニアリングチームは最終製品をより早く作ることができます。

PayPal DesignOps 2.0のローコードプロダクトデザイン

ローコードプロダクトデザインの素晴らしい実践例として、PayPalのDesignOps 2.0があります。UXPin Mergeを使用して、PayPalのUXデザイナーと開発者は、製品チームが作業できる60以上のコンポーネントのデザインライブラリを構築しました。

このコードベースのデザインライブラリにより、PayPal の製品チームは UX チームからの最小限のインプットで製品を作ることができます。また、エンジニアリングプロセスも格段に速くなり、開発者は製品開発作業の80％以上をUXチームの支援なしに終えることができるようになりました。

ローコード開発のメリット

ローコード開発の最も大きなメリットは、スピードとアクセシビリティです。誰でもアイデアを実用的なアプリに変えることができ、多くの場合、数時間以内に完成させることができます。

ここでは、ローコード開発のメリットについて詳しくご紹介します。

• スピード – ローコード開発では、チームや個人が迅速にアプリケーションを構築することができます。シンプルなアプリケーションでも、エンジニアが機能する製品にコード化するには数日かかります。より複雑なアプリケーションは、数週間から数ヶ月かかることもあります。
• コスト削減 – アプリやウェブサイトを構築する際、エンジニアリングは最もコストのかかるステップの一つです。セキュリティのように、専門的なエンジニアリングスキルを必要とする要素もあり、これにはコストと時間がかかります。
• 簡単なデプロイメント – ローコードツールは、多くの場合、ワンクリックでデプロイメントとホスティングを行うことができます。アプリやWebサイトのホスティングには、サーバーやホスティング環境について何も知らない場合は特に、多くの課題が伴います。
• コンセプトテスト – ローコードツールは、スタートアップ企業が新しいコンセプトやアイデアをテストするための安価な製品を作るのに最適です。概念実証に成功すれば、スタートアップ企業が重要なシードステージの資金を確保するのに役立つでしょう。既存の企業は、開発に投資する前にテストするために、新しいサービス、プラグイン、アドオンを構築するためにローコードプラットフォームを使用するかもしれません。

ローコード開発のデメリット

ローコードツールには多くのメリットがありますが、いくつかのデメリットもありますのでご紹介します。

• スケーラビリティ – ローコードツールはコンセプトの証明には優れていますが、これらのアプリはプラットフォームの限界に縛られているため、スケーラブルではありません。しかし、アプリが収益を上げるようになれば、開発者の雇用に投資し、スケーラブルなソリューションを考えることができます。
• イノベーションの制限 – ローコードツールは、イノベーションにも大きな制限があります。繰り返しになりますが、プラットフォームの枠内で作業しなければならないため、潜在的に革新的なコードやアルゴリズムを書くことができません。
• 高価なホスティング – ローコード・アプリケーションを構築するのは安くて速いのですが、ローコードツールで提供されるホスティングは、特に規模が大きくなるにつれて、通常のホスティングサービスよりも指数関数的に高価になります。
• パフォーマンス – ローコード開発がパフォーマンスに悪影響を与える要因はいくつかあります。第一に、これらのシステムは一律のソリューションを提供するため、最終的なアプリケーションには多くの冗長なコードや未使用のコードが含まれている可能性があります。第二に、ローコードホスティングサービスを利用している場合、共有ホスティング環境である可能性が高く、スピードとパフォーマンスの面で理想的ではありません。
• セキュリテイ – 機密データや消費者データを処理するアプリは、世界の一部の地域では、プライバシー法を通過するのに十分なセキュリティを備えていない可能性があります。例えば、EUのGDPRやカリフォルニア州のCCPAは、個人データの管理について非常に厳しい基準を設けています。

ローコード／ノーコードツールでは何が作れるのか？

「これがノーコードでできるの？」と驚くことがあるかもしれません。例えば、Bubbleのような有名なLCAPも、シンプルなAPIから複雑なソーシャルメディア、SaaSアプリケーション、Airbnbのような宿泊施設予約サイトなど、あらゆるものを作ることができます。

一部のLCAPプラットフォームでは、Javascriptの機能や洗練されたユーザーフローをドラッグ＆ドロップのビルダーで作成する機能を提供しています。

カスタムソフトウェアのアドオンとAPI

ローコード開発は、既存のソフトウェアと統合するためのカスタム・アドオンを必要とするビジネスに最適です。

例えば、従業員が勤務時間を記録するために会計ソフトに接続するローコードアプリを構築することができます。この種のアプリは会社にとって利益を生まないので、カスタムアプリに何万ドルも費やすことは経済的に意味がありません。

上記のシナリオでは、経理部の誰かがローコードでアプリを作り、1日で正確に動作するようにデプロイすることができます。

Zoho Creatorは、企業が現在のシステムと統合したネイティブのiOS/Androidアプリを構築することができるローコードアプリビルダーである。

SaaS製品

ローコードツールを利用して、シンプルなSaaS製品を開発するスタートアップが増えています。デザイナーやエンジニアに頼る必要がないため、コストを抑えて迅速に拡張することができます。

教育

ローコードは、教育用ツールやアプリの構築に最適なソリューションです。これらのアプリは、新しい学生の申し込みを受け付けるだけの簡単なものから、学生がビデオを見たり、宿題を提出したり、クラスメートと交流したり、コースノートをダウンロードしたり、成績表を受け取ったりできるカスタマイズされたバーチャル教室まで、さまざまなものがあります。

これらはローコードアプリケーションのほんの一例に過ぎませんが、特に必要なサービスのシステムをデジタル化しようとしている資金不足の発展途上国にとっては、その可能性は計り知れないものがあります。

ローコードは開発者を置き換えるか？

開発者の必要性は常にありますが、ローコードアプリのプラットフォームはアプリ開発の未来形とも言えるでしょう。

LCAP業界は急速に変化しており、新興企業に新たな機会をもたらし、多くの企業にレガシーシステムのアップグレードや改良を可能にしています。

デバイスの互換性のための自動アップグレードや、最新のセキュリティ要件を満たしたりするインテリジェントなLCAPを使用して、非常に複雑なエンタープライズアプリケーションが構築されるようになるのはそう遠い未来ではないでしょう。

ローコードツールの将来性

Brandessence Market Research社によると、ローコード市場は、2027年には651.5億ドル、2030年には1,870億ドル の規模になるといいます。

Salesforce、Microsoft、Appian、Oracle、Agileなどのソフトウェア大手は、すでにローコード市場に強力な足場を築いており、これらのシステムを継続的に改良して、顧客にさらなるカスタマイズを提供しています。

これらの企業は、ソフトウェアを構築するのではなく、顧客のビジネスニーズにぴったり合った独自のアプリケーションを開発するためのツールを提供することになるでしょう。

ここで重要なのは、こうしたローコードツールは、イノベーションを推進する開発者やエンジニアがいなければ存在しないということです。AIを搭載したものであっても、ローコードアプリケーションの限界に囚われることになるでしょう。

ローコードは必ずしも開発者に取って代わるものではなく、開発チームが構築するシステムやツールを変えるものです。

プロダクトチームの誰もが使えるローコードツールを使ってデザインと開発の連携を強化したいとお考えでしたら、Storybookを統合したUXPinの無料トライアルをお試しください。デジタル製品をより早く作るためのコードベースデザインツールのパワーをご体験ください。

The post ローコード ツール、ノーコードツール appeared first on Studio by UXPin.

ユーザビリティテスト参加者やステークホルダーに実際のユーザー体験に近いものを提供する上で、インタラクション機能は欠かせない存在です。しかし、インタラクティブなコンポーネントの作成には時間が掛かってしまい、ほとんどのデザインツールでは上手くいかないことから、多くのデザイナーを悩ませているでしょう。

UXPin Mergeを使用したコンポーネント駆動型プロトタイピング技術と、インタラクティブコンポーネントを使うことで、完全に機能するプロトタイプを構築できます。機能横断的なコラボレーションとユーザーテストを強化するための詳細については、こちらのページをご覧ください。

 インタラクティブコンポーネント とは？

 インタラクティブコンポーネント （またはインタラクティブ要素）は、デザインシステムから再利用可能なUI要素と、デフォルトでインタラクティブ機能を含んでいます。普段からUIキットを使い、プロジェクトごとにインタラクションを追加しなければならないデザイナーにとってこれは画期的と言えるのではないでしょうか。

デザインチームは、インタラクション、ステート、その他のアニメーションを設定して、最終製品を正確に表現する没入型のプロトタイプを作成できます。

インタラクティブコンポーネント のメリット

インタラクティブコンポーネント のメリットをいくつかご紹介します。

1. 少ないアートボード

従来、デザインツールを使ってインタラクションを作成するには、基本的な機能を実装するだけでも複数のアートボードが必要でした。デザイナーは、 インタラクティブコンポーネント を使うことで、1つのアートボードで同じ得ることができます。

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

インタラクティブなコンポーネントは再利用可能なので、デザイナーはインタラクションを一度設定するだけで、デザインプロセスでの時間を大幅に節約できます。

エンジニアが承認されたコンポーネントに慣れ親しめば、デザインのハンドオフはより簡単になり、プロジェクトの納期をさらに短縮することができます。

これらの時間節約の結果、市場投入までの時間が短縮されます。

3. 一貫性の向上

UIキットはデザインの一貫性を高めますが、インタラクションに関してはあいまいさを残します。デザイナーはこれらのインタラクションを自分で設定しなければならず、エラーや一貫性の欠如につながってしまいます。

インタラクティブなコンポーネントには、インタラクティブ性がすでに備わっているので、誰もが同じステート、マイクロインタラクション、アニメーションを持ちます。これによって、一貫性を高めるだけではなく、デザイナーが修正するセットアップタスクやエラーが少なくなるため、効率性を高めます。

4. より良いテストとフィードバック

ユーザーやステークホルダーからのフィードバックは、デザインプロジェクトにとって非常に重要です。また、ビジネスゴールに沿ったユーザー中心の製品を提供するための意思決定の原動力となります。

ほとんどのデザインツールでは、エンジニアが数行のコードで実装する単純なインタラクションを実装するための忠実さと機能性に欠けています。 インタラクティブコンポーネント を使用すると、コードの機能を簡単に再現できるため、ユーザビリティテストやステークホルダーのために実物に近いプロトタイプを作成できます。

5. デザインシステムの普及を促進する

デザインシステムチームの仕事の1つとして、デザインシステムを普及を促進させることです。 これにおいても、インタラクティブコンポーネント は製品開発チームの効率的なワークフローを作成できる強力なツールとなります。

6. デザインの拡張

UXPinでは、コンポーネント駆動型のプロトタイピングとインタラクティブコンポーネントがデザインのスケーリングにどのように役立つかを見てきました。１つの例として、PayPalが新しく人材を雇用せずデザインプロセスを拡張したUXPin Merge活用方法をこちらで紹介しています。

リポジトリにホストされているインタラクティブコンポーネントにMergeを統合することで、PayPalのプロダクトチーム（UX/デザインツールの経験はほぼ無いに等しい）は、経験豊富なUXデザイナーが以前行っていたよりも8倍速くデザインプロジェクトの90％を完了することができました。

 インタラクティブなコンポーネント により、学習曲線が大幅に短縮されたことでデザイナーでない人にとってもデザインプロセスがより身近なものになりました。

PayPalのUXチームは、レイアウトやテンプレートを含むインタラクティブコンポーネントライブラリを構築し、React propsを使用してデザインシステムの制約を設定しました。製品チームは、ユーザビリティテストとデザインハンドオフのためのプロトタイプを、ドラッグ＆ドロップで簡単に構築できます。

インタラクティブコンポーネントは、プロダクトチーム（または別のUXPin MergeユーザーであるTeamPasswordの場合はエンジニア）のような非デザイナーに、より多くのUXに関する仕事を与えることができます。

すでに構築済みのコンポーネントにクリック、ホバーなどの条件に応じてインタラクションを作成することも可能です。

UXPinプロトタイプにインタラクティブ・コンポーネントを組み込むには？

インタラクティブコンポーネントを製品のプロトタイプに組み込むには、多くのステップを踏む必要があります。フォームが実際に入力できること、ボックスがチェックできること、リンクがクリックできることを確認します。

このようにすることで、ユーザーが製品を使おうとする経験を持つことができ、製品がどのように機能し、人々がどのように使用する（または使用したい）のかについての洞察を得ることができます。

1. UXPinでの インタラクティブコンポーネント の使用

10年以上前のUXPinの最初のリリース以来、インタラクティブコンポーネントはUXPinのデザインツールの中核であり、最終的な製品体験を正確に再現するプロトタイプを作成するソリューションをデザイナーに提供してきました。

UXPinには、インタラクティブコンポーネントを作成するための4つの強力な機能があります：

• ステート（状態）： 1つのコンポーネントに対して、それぞれ異なるプロパティとインタラクションを持つ複数のステートバリアントを作成できます。
• バリアブル（変数）： ユーザーの入力データをキャプチャし、パーソナライズされた動的なユーザー体験を作成するために使用します。
• Expression（式）： Javascriptのような関数で、複雑なコンポーネントや高度な機能を作成できます！
• 条件付きインタラクション： ユーザーのインタラクションに基づいてif-thenやif-elseの条件を設定し、複数の結果を持つ動的なプロトタイプを作成して、最終的な製品体験を正確に再現します。

UXPinのプラットフォームで簡単にドラッグ＆ドロップできる、ビルド済みのコンポーネントを使用するのも1つの方法です。(ゼロから設計する必要はありません！）

UXPinのサンプルページにあるインタラクティブなコンポーネントの例をいくつかご紹介します。

ここで、ステート、バリアブル、Expression、条件ロジックで何ができるか見てみましょう。

例１. ボタン

例２. インプットとテキストエリア 

例３. ラジオボタン

例４. インタラクティブなサインアップフォーム

→ このサンプルをダウンロードして使いたい場合は、こちらから。

ドキュメントはこちらをご覧ください。

2. UXPin Mergeの インタラクティブコンポーネント 

Mergeは、コンポーネント駆動型のプロトタイピングとインタラクティブコンポーネントをさらに進化させます。デザイナーが UXPin でコンポーネントを作成する代わりに、Merge はリポジトリからデザイン システム ライブラリをインポートします。

これらの MergeのUI要素の背後には React、Vue、Angular などのフロントエンドフレームワークのコードがあるため、真にインタラクティブなコンポーネントとなります。組織のデザインシステムをインポートすることも、オープンソースのライブラリを使用することもできます。

デザイナーは Mergeコンポーネントを使用するためにコードを見たり書いたりする必要はありません。また、UXPinのプロパティパネルからコンポーネントのプロパティにアクセスし、デザインシステムの制約内で変更を加えることができます。

Mergeについての詳細やアクセスはこちらをご覧ください。

Mergeのインタラクティブコンポーネントを使ってデザインする

ステップ 1: デザインシステムからコンポーネントを取り込む

Mergeを使用してインタラクティブ コンポーネントを UXPin にインポートするには、3 つの方法があります：

• Git統合： React コンポーネント ライブラリを UXPin に直接接続する
• Storybook統合： Vue、Angular、HTML、Ember、Web Components などのフロントエンドフレームワークを同期します。
• npm統合： Node Package Manager（npm）からオープンソースのライブラリをインポートできます。npm Integration とその動作方法の詳細をご覧ください。

インポートされたMergeコンポーネントは左サイドバーのUXPinのデザインシステムライブラリに表示されます。デザイナーはサイドバーから必要なUI要素をクリックまたはドラッグしてキャンバスに表示することができます。

また、複数のデザインシステムとUXPin要素を使用したり、それらを組み合わせて新しいコンポーネントを作成し、パターンとして保存することもできます。

UXPin Mergeでプロトタイピングを始める方法

Mergeを使用して UXPinのコンポーネント駆動型プロトタイピングを始める準備はできましたか？始めるにあたって2 つの方法があります：

• オープンソースライブラリ： オープンソースライブラリは、アクティブな開発サポートがないチームや、コンポーネントに取り組む前にどのように作業できるかの基礎的な情報を把握したいチームに最適です。
• プライベートなデザインシステム： 製品のプライベートデザインシステムをUXPinと同期させたい場合は、Mergeページでアクセスをリクエストしてください。

UXPinの無料トライアルを14日間無料でお試しいただけますので、ぜひご利用ください。

The post プロトタイプに命を吹き込む インタラクティブ コンポーネント appeared first on Studio by UXPin.

UIデザインツール は、デザイナーが Webサイトやモバイルアプリ、Webアプリなどのデジタル製品のUI（ユーザーインターフェース）デザインを作成、プロトタイプ化、改良するのに使用するツール（アプリ）のことです。これらは、ワイヤーフレームやプロトタイピングから、忠実度の高いモックアップやインタラクティブデザインの作成まで、デザインプロセスのさまざまな側面を促します。

ユーザーに優しく視覚的に魅力的なインターフェースを作成するのに必要な機能があるため、UI デザイナーにとって非常に重要です。そしてツールの選択は、多くの場合はプロジェクトの特定のニーズやチームの好み、ワークフローの統合によって変わってきます。そこで本記事で、最もよく使われいる UIデザインツールについて見ていきましょう。

エンドツーエンドの UIデザインツール である UXPin を使って、インタラクティブなプロトタイプを作成し、デザインのハンドオフを効率化しませんか。デザインシステムからドラッグ＆ドロップで作成できるビルディングブロックを使って、デザイン作業を効率化しましょう。UXPin をぜひ無料でお試しください。

UXPin

UXPinは強力なリアルタイムコラボレーション機能で知られる総合デザインツールであり、複数のユーザーが同じプロジェクトで同時に作業することができます。

UXPinはデザインシステムのサポートに優れていることから、デザイナーは再利用可能なコンポーネントやスタイルの効率的な作成や管理ができます。また、UXPin の高度なインタラクティブ機能により、条件ロジックや変数を使って忠実度の高いプロトタイプを作成できます。

UXPinには強力な機能が備わっている反面、ユーザーが使い始めるのに役立つ豊富なリソースとテンプレートが用意されていますが、習得はちょっと頑張らないといけません。

また、このツールでは、HTMLとCSSコードをコピーした詳細な仕様書によって、デザインのハンドオフプロセスがしやすくなり、ユーザビリティテストを通じてユーザーフィードバックを集めるための機能や、（テストツールである Fullstory との統合のような）統合機能が備わっています。

さらにこのツールには、MacアプリとWindowsアプリがありますが、クラウドでも動作します。

UXPin Merge

「信頼できる唯一の情報源（Single source of truth）」が要る場合、UXPinにはもう一つのソリューションである UXPin Mergeがあります。

UXPin Mergeは デザイナーとデベロッパーが同じコンポーネントで作業できるため、デザインプロセス全体の一貫性と正確性が保証されます。また、この機能は、連携やレスポンシブデザインに特に有効です。

また、ReactなどのGitレポジトリから直接コンポーネントを同期できるため、デザインシステムのサポートに優れています。これにより、UXPinで使われるデザインコンポーネントが最終製品で使われるものと完全に同じであることが保証されることから、一貫性が維持されて不一致のリスクが軽減されます。

Figma

Figmaは、リアルタイムで複数のユーザーが編集とコメントをできる優れたコラボレーション機能が高く評価されている、Webベースの製品デザインツールです。

プロジェクト間で簡単に更新できる共有ライブラリ、UIキット、デザイントークンを備えた強力なデザインシステムサポートがあります。

インタラクティブ機能においては、大抵のUI/UXデザインのニーズには十分ですが、他のツールほど高度ではありません。Figmaは、直感的で初心者にも使いやすく、ユーザーに優しいインターフェースや、レイアウトやユーザージャーニーなどのさまざまなテンプレートが提供されています。

Figmaは、デベロッパーがアクセスできる詳細な仕様とコードスニペットを通じてデザインのハンドオフをサポートし、デザインに対するユーザーフィードバックの直接収集を促します。実際のデータに対するネイティブサポートは限られていますが、このためのさまざまなプラグインはすぐに見つかります。

さらに、Figmaには「FigJam」と呼ばれるデジタルホワイトボードツールもあり、これはブレインストーミングに最適で、それでプロジェクトが始まる前に、チームメンバーやステークホルダーがお互いのデザインビジョンを共有することができます。

Axure

Axureは、高度なプロトタイピング機能で知られる強力なプロトタイピングツールであり、詳細なインタラクションと条件ロジックに対応しています。Figmaのようなツールほどシームレスではないかもしれませんが、共同作業が可能です。

Axureは再利用可能なウィジェットとスタイルでデザインシステムをサポートしますが、１番の強みはその詳細なプロトタイピング機能にあります。このツールにはデータ駆動型プロトタイプのための機能が含まれており、それで変数とデータセットを使って、包括的なデザインハンドオフのドキュメントを提供します。

Axureは習得が大変ですが、複雑でインタラクティブなプロトタイプを作成するための強力な機能があります。また、共有されたプロトタイプや注釈を通じたユーザーフィードバックの収集にも対応しており、非常にインタラクティブなデザインワークのための多用途な UI/UXツールとなっています。

Sketch

SketchはMacユーザーの間で人気のUIデザインソフトウェアで、UI/UX デザインに特化した強力なベクター編集ツール群があります。また、macOSユーザーに限定されますが、Sketch for Teams を通じてリアルタイムでの連携に対応しています。

Sketchはデザインシステムに秀でており、再利用可能なUIキットや更新が簡単な共有ライブラリを提供しています。プロトタイピング機能は基本的なものですが、プラグインでの強化が可能です。そして Sketch は、詳細なデザインハンドオフプロセスのための Zeplinのようなツールとうまく統合できます。

このツールはユーザーに優しく、多くのテンプレートやリソースがあるため、サッと気軽にデザインを始めることができます。また、Sketchは、様々なプラグインを通じて実データの追加に対応し、サードパーティツールを使ったユーザーフィードバックの収集を促します。

ちなみに 、Sketchは最も費用対効果の高い選択肢の一つで、価格は月額１０ドルからあります。

UIzard

UIzardは、低忠実度デザインおよび高忠実度デザインのデザインプロセスを効率化する、AI主導のデザイン機能で際立っています。

UIzardはAI主導のデザインシステムに重点を置いています。そのため、迅速なプロトタイピングには便利で、コラボレーション機能もありますが、Figmaのような定評のあるツールに見られるような高度な機能性や他の先進的なUIデザインツールでできるような豊富なカスタマイズ性はないかもしれません。

UIzardの再利用性機能は主にAIによって駆動され、デザインプロセスを効率化することができますが、より複雑な UI/UXデザインプロジェクトではさらなる改良が必要になるでしょう。

UIzardは本記事で紹介した他のツールと同じレベルの手動コントロールは提供されないかもしれませんが、基本的なフィードバック機能があり、AIを統合してインタラクティブな要素を作成してくれます。

Marvel

Marvelはシンプルで使いやすいことで知られており、デザインの反復をサッとするのに理想的な選択肢となっています。また、リアルタイムでの連携とコメントの機能があることから、チームはシームレスに共同作業を行うことができます。

Marvelは、再利用可能なコンポーネントとスタイルガイドを備えた基本的なデザインシステムに対応しており、簡単なプロジェクトに適しています。このツールには、シンプルなインタラクションには適しているインタラクティブなプロトタイピング機能がありますが、より複雑なデザインに必要な深みはないかもしれない。

Marvelは、仕様書とのデザインのハンドオフを促し、開発ツールと統合します。また、実データの基本的な統合に対応し、ユーザーテストとフィードバック収集機能を備えているため、速やかなデザインとプロトタイプのための充実したツールとなっています。

Justinmind

Justinmind は、条件やイベントによる高度なインタラクティブ性に対応する多機能なプロトタイピングツールであり、バージョン管理やコメントによる共同作業ができることから、アプリや Web デザインのプロジェクトに適しています。また、Justinmind には、再利用可能な UI 要素とテンプレートを備えたデザインシステム機能があり、それでデザインプロセスの効率が上がります。

このツールはデザインハンドオフのための詳細な仕様を提供し、JIRAのようなツールと統合します。また、動的なインタラクションのための実際のデータ統合に対応することから、より現実的な UX（ユーザーエクスペリエンス）デザインが実現します。

さらに、共有されたプロトタイプや注釈を通じてユーザーからのフィードバック収集も促すことから、詳細かつインタラクティブなデザイン作業のための包括的なツールとなっています。

InVision と Adobe XD について

InVision と Adobe XD は、どちらも UI/UXデザインコミュニティで広く使われているツールですが、より高度な機能と最新のデザインワークフローとの優れた統合を提供する他のツールとの激しい競争に直面していました。

InVisionはデザインコラボレーション分野で重要な役割を果たし、多くのデザインワークフローに不可欠なツールを提供してきましたが、２０２４年をもって、プロトタイプと DSM（デザインシステムマネージャー）などのデザインコラボレーションサービスが年内に終了することが発表されました。

InVisionはかつてデザイナーとデベロッパーの間の溝を埋めるツールを提供する先駆者の存在だったため、この決定は業界にとって大きな転換点となります。サービス終了の理由は、機能とユーザー普及率の面で InVision を上回った Figma などの他のツールとの競争が激化したためであり、その結果、InVision ではこれらのサービスに重点が置かれなくなり、本記事における２０２４年のおすすめツールのリストから外されることになります。

UI/UXデザイン分野のもう一つの主要ツールである Adobe XDも、２０２４年に終了します。Adobe は、Creative Cloud Suiteの他の製品に重点を置くため、Adobe XDを段階的に廃止することを決定しました。

Adobe XDは、他の Adobe 製品との強力な統合や包括的な機能セットにもかかわらず、競合他社で提供される革新的な機能やリアルタイムコラボレーション機能に追いつくのに悪戦苦闘してきました。その結果、Adobe XD は提供されなくなり、デザイナーはサポートと開発が継続されている他のツールに移行することになります。

どの UIデザインツール を試すか

本記事で見てきたツールの中では、価格的に言うとMarvel と Sketch が２０２４年の最も安価な選択肢であり、特にMarvel は無料価格帯のため利用しやすくなっています。また、Sketch は、手頃な価格でプロ仕様のツールを探している macOS ユーザーにとって今でも強力な候補となっているのではないでしょうか？Adobe XDとInVisionは似たような価格ではありますが、廃止の危機に直面しており、今後の利用に影響を与えるかもしれません。

企業チームにとって、UXPinとFigmaは、その強固なコラボレーション、デザインシステムのサポート、実際のデータやフィードバックの仕組みとの統合のしやすさから、最強の候補です。Axure は、高度なインタラクティブ性と詳細なプロトタイピングに優れていますが、上記２つのUIデザインツール と比べると、習得が難しく、シームレスなコラボレーションが少ないかもしれません。

見た目だけでなく、完全にコード化された UIデザインを構築しませんか。デザイナーとデベロッパーの連携がしやすくなるコードベースのエンドツーエンドのデザインツールである UXPin をぜひお試しください。

The post ２０２４年のおすすめ UIデザインツール appeared first on Studio by UXPin.

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

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

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

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

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

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

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

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

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

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

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

UX デザイン とは？

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

UXデザイナーの責務

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

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

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

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

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

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

UIデザイン とは？

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

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

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

UIデザイナーの責任

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

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

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

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

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

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

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

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

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

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

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

共感する

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

定義

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

アイデアを出す

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

プロトタイプ

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

テスト

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

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

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

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

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

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

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

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

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

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

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

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

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

UXと UIデザイン ツール

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

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

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

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

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

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

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

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

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

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

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.

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.

ダブルダイヤモンドのデザインプロセスは、問題の特定や、ソリューションの開発のために広く使われている方法論であり、この成果ベースのフレームワークは、核となる問題とエンドユーザーへの影響に焦点を当てながら、創造性と革新性を促します。

世界最先端のプロトタイピングツールで、より良い製品をユーザーに届けませんか。無料トライアルにサインアップして、UXPin によるインタラクティブなプロトタイピングをぜひお試しください。

ダブルダイアモンドとは

ダブルダイアモンドモデルは、２００３年にブリティッシュデザインカウンシルによって開発されたイノベーションとデザインのためのフレームワークです。デザインカウンシルは、どのような手法やツールを用いても、プロジェクトを実現するためのシンプルなデザインプロセスを求めていました。

デザインのフレームワークには２つのダイヤモンドが以下のようにあしらわれています：

• 問題を表すダイヤモンド
• ソリューションを示すダイヤモンド

デザイナーはこのダイヤモンドの中で仕事をし、このダイアモンドで彼らは問題を真に理解し、ソリューションを徹底的にテストすることができます。

デザイナーは、最初のダイヤモンドで核となる問題を特定すると、２番目のダイヤモンドの基礎となるデザインブリーフを作成します。２つ目のダイヤモンドでは、プロトタイプを作成し、リリース準備が整うまでソリューションをテストすることに重点が置かれます。

ダブルダイヤモンドデザインプロセスの起源

私たちがデザインフレームワークとして知っているダブルダイヤモンドは、ブリティッシュデザインカウンシルから生まれたものですが、このプロセスは、ハンガリー系アメリカ人の言語学者であるベーラ・H・バーナシー氏の「発散-収束モデル」から影響を受けています。

ベラのモデルは、最初のダイヤモンドを使って問題を広く深く探求し（発散的思考）、次に適切な集中的な行動をとる（収束的思考）というデザインフレームワークと非常によく似ています。

ダブルダイヤモンドデザインプロセスにおける４つのフェーズ

ダブルダイヤモンドのデザインプロセスは、２つのダイヤモンドと「４D」とも呼ばれる以下の４つのフェーズで構成されます：

1. 発見（Discover）
2. 確定（Define）
3. 開発（Develop）
4. 提供（Deliver）

ダイヤモンド１ – 問題の発見と定義

最初のダイヤモンドは、UXリサーチと探索に関するもので、多くの場合「問題空間」と呼ばれます。 ‐ デザイン思考プロセスの共感と確定のステージに似ていますね。

デザイナーはまず、問題とユーザーのニーズを調べることから始めますが、このフェーズには、アナリティクスや UX成果物のレビュー、エンドユーザーへのインタビュー、サービスサファリの実施、その他の初期段階のリサーチ方法が含まれる可能性があります。

第２フェーズでは、デザイナーは「発見」フェーズでのリサーチを用いて、問題とそれがユーザーに与える影響を確定しますが、デザインチームは、核となる問題にたどり着くまで、第１フェーズと第２フェーズを何度か繰り返すことがあります。そしてデザイナーが作成する UX 成果物には、以下のようなものがあります：

• ユーザーペルソナ：対象とするユーザーの架空の人物像で、その特徴やニーズを概説する。
• カスタマージャーニーマップ： タッチポイント間のユーザー体験を可視化した成果物。
• 問題ステートメント：取り組むべき具体的な問題を簡潔に表現したもの。
• 共感マップ：理解と共感を促進するために、ユーザーの思考、感情、行動を図示したもの。

第２フェーズの最後では、デザイナーはデザインブリーフを作成して、それをデザインプロセスの後半で適切なソリューションを見つけるための指針とします。

ダイヤモンド２- ソリューションの開発と提供

 ２つ目のダイヤモンドでは、適切なソリューションを見つけるためのアイデア出し、プロトタイプおよびテストを行います

開発のフェーズでは、ダブルダイヤモンドのフレームワークの中でも、チームが以下のようなさまざまなツールや手法を用いる忙しいフェーズです：

• ワークショップとブレーンストーミング：チームとして集まって、アイデア出しや仮説立て、実験の実行、可能性のあるソリューションについての話し合いを行う。
• 低忠実度（Lo-Fi）デザイン：スケッチ、ワイヤーフレーム、ペーパープロトタイプなど、デザイナーが多くのアイデアをサッと開発してテストするのに使われる、忠実度の低い（Lo-Fi）メソッド。
• 部門横断での連携：デザイナーは、エンジニア、プロダクトオーナー、その他のステークホルダーとミーティングを行い、可能性のある課題や制約に関するフィードバックを得るためにアイデアを話し合う。

開発のフェーズは、デザイナーが以下の点において最も可能性の高いソリューションを１つ特定するまで、アイデア出しやプロトタイプ、さまざまなアイデアのテストを繰り返すプロセスです：

• 問題を解決する
• ユーザーのニーズに合わせる
• 予算と技術的制約を満たす

状況によっては、デザイナーはソリューションを１つ選ぶか、いいと思うアイデアを２つ３つ選んで、提供のフェーズで忠実度の高いプロトタイプとテストを行います。まずは、１つのソリューションにたどり着くまで、うまくいかないものを排除することを目標にします。

それでデザイナーは、１つのソリューションにたどり着くと、最終的なプロトタイプを改良すべくさらにテストを行います。この一連のテストにおいて、デザイナーは、最終的な結果でデザインブリーフとステークホルダーが確実に満足できるように、ユーザビリティと UX（ユーザーエクスペリエンス）に焦点を当てます。

また、デザイナーは問題に遭遇すると、ソリューションを見つけるために開発のフェーズに戻り、ソリューションが見つかるまで反復とテストを繰り返します。

プロトタイプとテストが完了すると、デザインチームは、ドキュメント、注釈、アセット、他にもエンジニアがリリースのために最終製品を開発するのに使う指示など、デザインハンドオフに備えます。

あとは、デザインチームは UX監査と QA（品質保証）を実施し、最終リリースが確実にプロジェクトの要件、ビジネス目標、ユーザーニーズを満たしているようにする必要があります。

ダブルダイヤモンドデザインプロセスの使い方

ダブルダイアモンデザインプロセスをワークフローに活用する実践例を見ていきましょう。

第１フェーズ：発見

• ユーザーリサーチ：ターゲットユーザーへのインタビューやアンケートを実施する。
• 市場調査：競合他社や業界動向の調査
• ステークホルダーへのインタビュー：ステークホルダーからインサイトを得る。
• 共感マップ作成：共感マップを作成して、ユーザーの感情や動機を理解する。

第２フェーズ：確定

• データの統合：親和図を使ってパターンを特定する。
• 問題提起：明確で簡潔な問題ステートメントを作成する。
• ユーザージャーニーマップ：ユーザージャーニーをマッピングして、ペインポイントを特定する。
• デザインブリーフ：プロジェクトの目標と制約をまとめたブリーフを作成する。

第３フェーズ３：開発

• アイデア出し：共同ワークショップを通じてソリューションをブレインストーミングする。
• プロトタイプ：ワイヤーフレームやスケッチを作成する。
• ユーザーテスト：実際のユーザーとプロトタイプをテストする。
• イテレーション（反復）：フィードバックに基づいてデザインを改良する。

第４フェーズ：提供

• 高忠実度（Hi-Fi）プロトタイプ： 忠実度の高いモックアップでデザインの詳細を最終決定する。
• 開発：デザイナーとデベロッパーの密接な連携により、サイトを構築する。
• 品質保証：広範なテストを実施する。
• 立ち上げと監視：サイトを立ち上げ、継続的にパフォーマンスを監視し、さらなる改善を図る。

ダブルダイヤモンドデザインプロセスに従うことで、徹底したユーザー中心のアプローチで新しいサイトをきちんとデザインできることから、ユーザーのニーズを深く理解し、ソリューションを探って改良を重ね、最終製品を効果的に実装して立ち上げることによる、成功の可能性の最大化につながるのです。

UXPin でエンドツーエンドのUXデザインを試してみよう

プロトタイプとテストは、ダブルダイアモンドフレームワークなどのエンドツーエンドのデザインプロセスにおいて重要な意味があります。デザイナーは、潜在的なソリューションの徹底的なテストや正確な結果の獲得のために、高品質のプロトタイプの使わないといけません。

残念ながら、高忠実度のプロトタイプは、特定のツールでは時間がかかることがあり、ダブルダイヤモンドのデザインプロセスで多くのアイデアをテストするには理想的ではありません。

UXPin の完全インタラクティブデザインなら、デザイナーはスピードのために品質を妥協する必要はなく、最終製品のような外観と機能を備えた、忠実度の高いプロトタイプを作成できます。そしてより良いプロトタイプだと、テスト時に正確な結果がもたらされることで、デザイナーは画像ベースのデザインツールでもっと色々できるようになります。

UXPin には組み込みのデザインライブラリも標準装備されていることから、デザインチームはコンポーネントをドラッグ＆ドロップして、忠実度の高いモックアップを数分で作ることができます。数回クリックすれば、インタラクションを追加して、以下のコードのような機能を持つプロトタイプを作成できます：

• ステート：任意の要素に対して複数のステートを作成し、それぞれに個別のプロパティとインタラクションを設定できる。
• 変数：ユーザーの入力を捉えてデータに基づいたアクションを実行することで、ダイナミックで個別化された UX（ユーザーエクスペリエンス）をテスト中に作成する。
• 条件付きインタラクション: 「if-then 」と「if-else 」のルールを作成し、ユーザーのアクションや入力に対してさまざまな反応を実行する。
• Expression：フォームのバリデーション、計算コンポーネント、パスワード認証のシミュレーションなど、従来はコードでしか実行できなかった複雑な操作を実行する関数をデザインする。

どんなフレームワークでも、UXPin だとデザインプロセスを強化して、顧客により良いユーザー体験をお届けできます。無料トライアルにサインアップして、UXPin によるコードベースのデザインの可能性をぜひご体験ください。

The post ダブルダイヤモンドのデザインプロセス – 製品デザインを成功に導くおすすめのフレームワーク appeared first on Studio by UXPin.

Google はレスポンシブ・ウェブデザイン（RWD）を常に推奨しており、特に２０１５年４月２１日にモバイルフレンドリーなサイトを上位に表示する大規模なアップデートが実施された後は、その傾向が顕著です。

ただし、アップデートではレスポンシブデザインを使わなければいけないとは規定されておらず、サイトがモバイルからアクセスでき、いい UX とパフォーマンスを備えていることだけが明記されています。

それを念頭に置いて、パフォーマンスと UX デザインに関して、「アダプティブデザイン」と「レスポンシブデザイン」の長所と短所を検証してみましょう。

Web デザイン用のプロトタイピングツールをお探しでしたら、UXPin がオススメです。様々なブレークポイントを使用できます。こちらから無料トライアルをぜひお試しください。

アダプティブデザイン と レスポンシブデザイン の違い

ではまず、レスポンシブデザイン と アダプティブデザイン の主な違いは何でしょう。

レスポンシブ Web サイトデザイン と アダプティブ Web サイトデザイン

レスポンシブ Web デザインは、画面のサイズに関係なく流動的に適応し、対象デバイスに応じて CSS メディアクエリを使ってスタイルを変更します。これにより、ディスプレイのタイプ、幅、高さなどの要素に基づいて、1 つのクエリだけでレスポンシブ Web サイトがさまざまな画面サイズに適応することができます。

対するアダプティブ Web デザインでは、最初に読み込まれると反応しないブレイクポイントに基づいた静的なレイアウトが使われます。

アダプティブは、画面サイズを検出し、それに適したレイアウトを読み込む仕組みになっており、大体は以下の一般的な画面幅に合わせてアダプティブサイトをデザインすることになります：

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

一見アダプティブの方が、最低でも６つの幅に対応したレイアウトをデザインしないといけないことから手間がかかるように見えますが、レスポンシブはメディアクエリの不適切な使用（あるいはまったく使用しない）によって、表示やパフォーマンスに問題が生じる可能性があるため、より複雑になる可能性があります。

特に後者については、多くのサイトが完全なデスクトップ モデルを提供しており、モバイル デバイスに読み込まれていない場合でも、サイトの速度が大幅に落ちるため、ここ数年で多くの議論を巻き起こしてきました。この回避にはメディアクエリの使用ができますが、レスポンシブサイトがモバイル専用サイトほど速くなることはないため、若干のトレードオフが発生してしまいます。

Web サイトがレスポンシブかアダプティブかを見分ける方法は

レスポンシブデザインには、さまざまな画面サイズに動的に調整する、より流動的で柔軟なアプローチがあり、アダプティブデザインには、サーバー側の検出によって特定のデバイスや画面サイズに合わせた、事前に定められたレイアウトがあります。

アダプティブな Web サイトを認識する際に、さまざまなデバイスや画面サイズからサイトにアクセスする時に、レイアウトが急激に変化することに気づくかもしれません。これは、事前に設定された特定のレイアウトが読み込まれるためであり、画面サイズに柔軟に対応するのではなく、そのサイズに合わせたレイアウトが用意されているためです。

レスポンシブ Web サイトは流動的なグリッドを使用しているため、レスポンシブ Web サイトを識別するには、ブラウザウィンドウのサイズを変更するか、さまざまなデバイスでサイトを表示し、画面サイズに合わせてレイアウトとコンテンツがどのように再配置されるかを観察するといいでしょう。

アダプティブ Web デザインを使う理由

アダプティブは、既存のサイトを携帯電話向けに改修する際に有用であり、これによって、特定の複数のビューポートに対応したデザインと Web 開発をコントロールすることができます。

デザインするビューポートの数は、完全に自身や会社、そして全体の予算次第ですが、レスポンシブデザインでは必ずしも得られない一定のコントロール（コンテンツやレイアウトなど）が可能です。

そして一般的には、低解像度のビューポート用にデザインすることから始め、UI デザインがコンテンツに制約されないように、またユーザビリティが損なわれないように、順を追ってデザインしていきます。

デザインは、前述の６つの解像度に対応していくのが標準的ですが、最も一般的に使われているデバイスの Web 解析を調べ、そのビューポートに合わせてデザインすることで、より十分な情報に基づいた決定を下すことができます。

ゼロからアダプティブ Web サイトをデザインする場合でも、それは問題ありません。一番低い解像度のデザインから始め、徐々に上げていきましょう。その後、メディアクエリを使って、より高い解像度のビューポート用にレイアウトを拡張するといいでしょう。ただし、さまざまなスクリーンサイズ向けに UI デザインを行った場合、ウィンドウのサイズをデバイスのスクリーンサイズに合わせて変更すると、レイアウトが「ジャンプ」してしまうことがあります。

複数のビューポートに対応したサイトをデザインおよび開発するのは余分な作業になりかねないので、通常は後付けに使われます。

アダプティブ Web デザインの３例

アダプティブ Web デザインを使用しているサイトの例を探すと、おそらく大企業や大規模な組織の Web サイトで見つかるでしょう。その組織の多くは、モバイルが登場する以前から存在しているため、複雑なレスポンシブリデザインを行うよりも、巨大な Web サイトをアダプティブ Web デザインで改修する方がはるかに簡単（かつ安価）ですからね。

では、世界の主要企業が、Google のモバイルフレンドリーなランキング要素への適合に向けて現代的なデザイン要素を取り入れるために、どのようにアダプティブ Web デザインソリューションを活用しているかを見ていきましょう。

１．Amazon

EC の巨大勢力である Amazon は、自社の Web サイトにアダプティブデザインのオーバーホールが必要であることをすぐに見極めました。それによって、世界中の顧客がどのデバイスからサイトにアクセスしても、（Google ランキングの重要な要素の一つである）「より速いページ読み込み速度」と「一貫した UX（ユーザーエクスペリエンス）」を提供することができるようになりました。

Amazon のアダプティブ Web デザインのアプローチで、フルサイトのエクスペリエンスとブランドアプリが整合され、それによってユーザーは２つのアプリを切り替えたり、Web とアプリの見た目のデザインの違いに関係なく、同じ機能とワークフローの配置を堪能することができます。すべてのデバイスでこの一貫性を確保するアダプティブデザインのテンプレートによって、ユーザーは、ナビゲーションの方法を色々と学ばなくても、ブラウズ、ショッピング、チェックアウトを行うことができるのです。

このアプローチにより、Amazon ではページの読み込み速度が最適化され、ユーザーはデスクトップの Web サイトからもモバイルと同様にこの EC プラットフォームにアクセスできるようになります。また、重要な検索バーのような要素は、モバイル向けに最適化された他の様々な機能にもかかわらず、すべてのフォーマットでデザインレイアウトの焦点のままであり、Amazon のアダプティブデザインアプローチは、物事を効率的かつ一貫性を保つ方法の成功例となっています。

２．USA Today

アメリカで人気の日刊紙である USA Todayは、オンラインニュースソースがきちんと人目につくようにするために Web サイトのリニューアルを選択した際、テクノロジーに精通したアダプティブ Web デザインのアプローチを採用しました。‐ これは、レスポンシブ Web デザインでは再現できませんでした。

出典：USA Today

同紙は、 Web サイトとアプリケーションが使用されているデバイス、OS（オペレーティングシステム）、スクリーン・サイズを識別し、それに応じてコンテンツを適応させる技術を採用しました。この革新的なアプローチにより、デベロッパーは上述の一般的な６つの画面幅に制限されない体験を作成することができ、ユーザーにユニークな体験を提供することができました。

３．IHG

アダプティブWeb デザインのアプローチを考えるとき、ホスピタリティ企業は通常、頭に浮かばないでしょう。

しかし、IHG では、顧客はモバイルか PC かに関係なく、より速やかな予約ができる、より速い Web およびアプリの予約体験を求めていることがわかり、ホテル チェーンもそれに応じました。

出典：IHG

IHG では、ほぼすべてのモバイルデバイスに搭載されている、アクセス可能なGPS データと位置情報サービスを活用したアダプティブ Web デザインアプローチを採用したことにより、外出先から地元のホテルを予約できるようなアダプティブ Web サイトのインターフェースが開発され、ユーザーは予約の確認や、利用可能なオファーにサッと簡単にアクセスできるようになりました。

レスポンシブ Web デザインを使う理由

現在、新しいサイトのほとんどではレスポンシブが使われていますが、WordPress、Joomla、Drupal などの CMS （コンテンツ管理システム）のシステムを通じてアクセスできるテーマが利用できるようになったおかげで、経験の浅いデザイナーやデベロッパーでもレスポンシブに対応できるようになりました。

レスポンシブデザインは、アダプティブデザインほどコントロールはできませんが、構築と維持にかかる労力ははるかに少なくなります。また、レスポンシブレイアウトは流動的であり、アダプティブでは拡大縮小時にパーセンテージを使ってより流動的な感覚を与えることができますが、ウィンドウサイズが変更されると再びジャンプが発生する可能性があります。例えば、流動的なレイアウトを示す下の画像では、デザイナーがパーセンテージ幅を使用しているため、ビューはユーザーごとに調整されます。

写真提供： Smashing Magazine

レスポンシブでは、すべてのレイアウトを念頭に置いてデザインすることになりますが、もちろんこれはプロセスがややこしくなったり、非常に複雑になってしまう能性があります。つまり、中解像度用のビューポートを作成することに集中し、後でメディアクエリを使って低解像度や高解像度を調整すればいいということになります。

要するに、新規プロジェクトにはレスポンシブを、改修にはアダプティブを使うのが一般的だということです。

デザインをレスポンシブする方法はこちらの記事をご覧ください：レスポンシブデザインガイド – 簡単な8ステップ

レスポンシブ Web デザインの３例

レスポンシブ Web デザインは、ユーザーにより流動的な体験が求められる新しいサイトや、Google がより注目するサイトに適しています。また、デベロッパーとデザイナーにとってレスポンシブ Web サイトの作成や維持がしやすいことから、世界中の大手テクノロジー企業やデザイン企業の多くに選ばれているデザイン手法でもあります。

次に、レスポンシブ Web デザインを採用したサイトの良例と、それがサイトのパフォーマンスやユーザーエクスペリエンスにどのような影響を与えているかを見てみましょう。ちなみにこれらは、ECやメッセージングの分野で活躍する大手ブランドの要求にも応えています。

１．Slack

企業の間で Slack の人気が急上昇している最大の理由の１つに、ユーザーがメッセージングアプリ導入や使用がしやすいと言う点があり、多数の統合機能と最適化機能を備えたわかりやすいインターフェースを誇る Slack のシンプルさと「人間的」な雰囲気は、その印象的なレスポンシブ Web デザインに反映されています。

デスクトップとモバイル間のアプリの有名な適応性は、ディスプレイがいかにシームレスに遷移してレイアウトを再配置するかによって強調されており、Flexbox と CSS グリッドレイアウトが使われていることで、Slack のレスポンシブインターフェースがワンランク上になっています。

つまり、Slack の Web サイトがアプリと同じであるということであり、それによって、ユーザーは仕事用のノートパソコンや PC と同じシンプルさと使いやすさをモバイルデバイスでも体験することができます。

出典：Slack

２．Shopify

Shopify は、レスポンシブ Web デザインにさまざまな路線を取りました。Webサイトとアプリをさまざまな方向に進め、「１つで事足りる万能な」アプローチではなく、デバイス選択型の最適化を選択したのです。

Shopify のデザイナーは、スクリーンサイズに関係なく、デザイン要素はユーザーが使うスクリーンに合わせるべきだと考えました。そこで Shopify は、（たとえそれが変更を意味する場合でも）全ユーザーが一貫した UX を享受できるようにするため、デバイスの画面サイズに応じて反応するようにサイトをデザインしました。また、色々な CTA（Call to Action）とイラストを多様なサイズとページ上のさまざまな位置で提供しました。

PC やタブレットでは Shopify の CTA や画像がフォームの右側に表示されますが、モバイルではそれらの要素がフォームの下および中央に表示されます。このレスポンシブデザインのアプローチにより、ユーザーはより多様な UX を堪能しながら、スクリーンのサイズに関係なく、最適化されたインタラクション機能を体験することができます。

３．Dribbble

クリエイティブデザインのハブである Dribbble を利用している人なら、このセルフプロモーションとソーシャルネットワーキングプラットフォームが、いいレスポンシブ Web デザインであることがわかるでしょう。このプラットフォームの Web サイトは、閲覧しているデバイスにアクティブに対応し、閲覧体験を上げる柔軟な空間を提供しています。

Dribbble の Web サイトは、スクリーンサイズと連動するフレキシブルなグリッドレイアウトを採用しており、デバイスに応じてシフトするグリッドカラムにレイアウトを適応させることで、ユーザーのインタラクションにアクティブに反応します。つまり、デザイナーはグリッド上に表示されるアイテムを調整し、視認性とアイテム数を最適化できるということです。そしてその結果、ユーザーはごちゃごちゃして見えたり、無秩序に見えたりすることなく、バランスの取れたいい体験を得ることができます。

例えば １３インチのノートパソコンや PC の画面でサイトにアクセスするユーザーには４×３のグリッド構成が表示され、より小さな画面でアクセスするユーザーには同じポートフォリオが1カラム形式で表示されます。

出典：Dribbble

アダプティブ か レスポンシブか？サイトのスピード、コンテンツ、UX の検証

前述したように、レスポンシブサイトは（適切に実装されていなければ）サイトスピードの面で苦戦する可能性があります。

また、レスポンシブでは、アクセスする各スクリーンにサイトを確実にフィットさせるために、コーディングがより多く必要になります。対するアダプティブデザインでは、レイアウトごとに別々の HTML と CSS コードを開発して管理する必要があるため、（アダプティブ・デザインと比較して）余分な作業については議論の余地があります。また、アダプティブサイトの修正は、実装時に SEO、コンテンツ、リンクなど、サイト全体ですべてが機能していることを確認しなければならない可能性が高いため、より複雑です。

もちろん、UX（ユーザーエクスペリエンス）も考慮べきです。レスポンシブでは基本的に、デバイスのウィンドウに合わせて流れるようにコンテンツをシャッフルするため、デザインが移動する際の視覚的な階層に特に注意を払う必要があります。

Nielsen Norman Group では、「レスポンシブデザインは、大きなページ上の要素をより細い長いページに合わせて整理するか、またはその逆を考えるようなパズルの解読のようになってしまうことがよくあるが、要素がページ内に収まるようにするだけでは不十分である。レスポンシブデザインの成功には、デザインはすべての画面解像度とサイズで使用可能でないといけない。」とあります。

つまり、どちらのテクニックを使うにしても近道はなく、両者とも、基本的に「すべてに対応できる」サイトの作成に伴う作業が必要です。ただレスポンシブには、今後はサイトのメンテナンスに膨大な時間を費やす必要がなくなるため、若干の利点があります。

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

結局のところ、重要なのは、どのようなデザイン手法を取り入れるにしても、何よりもまず対象者（オーディエンス）を考慮することです。彼らがどのような人たちで、どのようなデバイスでサイトにアクセスする傾向があるのかを正確に把握すれば、さまざまなレイアウトやコンテンツなどに関して、彼らを念頭に置いたデザインがしやすくなります。

また、既存のサイトがあるか、ゼロから始めるかによっても大きく変わってきます。レスポンシブ デザインは主力のデザイン手法となっており、現在約 1/8 の Web サイトがレスポンシブを使用していると考えられています (一方、アダプティブの使用率についてのデータはほとんどありません)。レスポンシブの採用率も急速に伸びており、単体のモバイル サイトとほぼ同じレベルに達しています。

これらを考慮すると、アダプティブデザインが求める継続的な作業のためだけであれば、通常はレスポンシブが望ましい手法であると言ってもいいでしょう。

ただし、Catchpoint が行ったテストによると、クライアントや企業に予算がある場合は、アダプティブの方が良い選択となる可能性があります。彼らは WordPress で「標準の WP TwentyFourteen レスポンシブ テーマ」と、 「Wiziapp と呼ばれるプラグイン」をの２つを使って２つの Web ページを作成しました。

このプラグインは、ユーザーが Web ページにアクセスしているデバイスに応じてモバイルテーマを提供し、さらにプロセスを効率化できるように高度な設定オプションも提供しています。

読み込み時間の結果がそれを物語っています：

最適化が全く行われていないことが指摘されるべきですが、これでレスポンシブサイトがデスクトップコンピューターに必要なものを全てダウンロードしていることがわかります。つまり、まっさらな状態だと、このテーマはあまり良いパフォーマンスを提供しないということです。

繰り返しになりますが、これはメディアクエリを使うことで克服できますが、上記の例は、レスポンシブ UX デザインが一般的な選択肢である一方で、スマートフォンにとって必ずしもベストではないことを示す良い例です。ただし、より良いものが登場するまでは、適切なコーディングと優れたレスポンシブサイトの実装方法を学ぶ以外に、私たちに何ができるかはまだよくわかりません。

結論ですか？

レスポンシブ デザインは今後も人気があり続けるでしょうが、それは、アダプティブに求められる多大なメンテナンスに対する適切な解決策がまだ見つかっていないからかもしれません。 ただ、Web が明らかにレスポンシブを好むにもかかわらず、アダプティブ Web デザインは廃れていないため、少なくとも理論的には、レスポンシブ Web デザインを吹き飛ばすような改善が現れる可能性があります。

レスポンシブ Web サイトデザインとアダプティブ Web サイトデザイン – よくある間違い 

デザインはイテレーション（繰り返し）のプロセスであり、何がうまくいき、何がうまくいかないかを見極めるまでには、ある程度の試行錯誤が必要です。ただだからといって、レスポンシブ Web デザインとアダプティブ Web デザインの両方をマスターするのに、デザイナーが失敗を重ねて痛い目に遭わないといけないというわけではありません。

それでも、プロセスを遅らせがちな最も一般的な間違いを避けることはできます。

デスクトップ版にこだわりすぎる

モバイルデザインは、デスクトップベースと肩を並べる勢いであり、より小さなデバイスで最適化された UX を提供することで、PC やノートパソコンで見られるデザインの選択肢を凌駕することも少なくありません。ただし、オンライン上のものは大抵デスクトップベースのサイトから始まり、モバイルバージョンは後から登場したことから、多くのプラットフォーム、ツール、サイトがデスクトップ起源に傾き、モバイルは補助的なニーズと見なされています。

デザイナーは、デスクトップ中心の考え方から脱却し、デザインがモバイルで機能する可能性と、それがデザイン思考の進化にどれだけ大きな影響を与えることができるかに焦点を当て、モバイル主導型の仕事へのアプローチに適応し始める必要があります。

これは、複数のスクリーンサイズに対応するデザインに根ざしたアプローチへの移行ということであり、専用デザインが必要とされる可能性が最も高いと言われてきた従来の６つのスクリーンサイズから切り離して、固定比率ではなくパーセンテージをターゲットとするということです。つまり、デスクトップデザインを完全に割り引くという意味ではなく、モバイルとのバランスを取るということになります。

ジェスチャーを考慮しない 

今日のモバイルデバイスのほとんどがタッチ機能を誇り、ユーザーがハードウェアや表面に接触することなく Web サイトをナビゲートできるようになるのは時間の問題ですが、ジェスチャーは、大きな可能性を秘めたレスポンシブウェブデザインの要素として見過ごされがちです。

ジェスチャーを使ったズーム、スワイプ、スクロール、リターンから、指示の伝達や複雑なコマンドの実行に至るまで、レスポンシブデザインはこれらの動きを次のレベルに引き上げるための豊かな土壌ですが、主に、全デバイスで一貫したナビゲーションを実現するジェスチャーアーキテクチャの開発が複雑なことから、デザイナーは、デザインの革命的な側面となりうるこのデザインを避け続けています。

考えられる解決策としては、 Web サイトが他のデバイスでも複製可能な統一された構造に従い、使いやすさと正確さを提供できるようにするというのが一つ挙げられます。

ボタンが小さすぎる 

ボタンが小さすぎて正確に打てないアプリを扱ったことがある人なら誰でも、これがモバイルで一番イライラするデザイン上の問題の一つに挙げられることに異議はないでしょう。デスクトップ版では正確なマウスカーソルの恩恵を享受できますが、小さい画面やモバイルデバイスでは、親指や指はマークを見逃しがちです。

レイアウトと利用可能なスペースを最適化しようとするレスポンシブデザインでは、クリック可能な要素をひとまとめにしたり、小さな画面に合わせて縮小したりする傾向がありますが、これがユーザーのイライラの原因になったり、サイトの正確性、操作性、UX を引き起こしてしまうことがあります。 

なのでデベロッパーは、親指、指、目が全て同じように作られているわけではないことをよく考え、レスポンシブデザインのアプローチによってボタンがどのような影響を受けるかに注意を払わないといけません。

機能性よりもデザインを優先する

デスクトップでもモバイルでも見栄えのする Web サイトは重要ですが、Web サイトは何よりもまず、機能するものであるべきです。魅力的なサイトにアクセスしたユーザーは、当然、その実用性にも同等の努力が払われていると考えるでしょうから、見た目と同じように Web サイトが機能しなければ、そのイライラはすぐ想像がつきますよね。そしてその怒りは、トラフィックや評判の大幅な低下につながりかねません。

デスクトップとモバイルの機能レベルについても同じことが言えます。言いデザインと操作性のベンチマークとなるデスクトップサイトが、モバイルでは全然ダメなようでは、モバイルをまったく意識しない方が賢明です。

さまざまなニッチでテストを行い、効果的なプロトタイプを使って、デザインが機能性に合っていることを確認することで、デベロッパーの認識を超えていきましょう。

モバイル用に別の URL を設ける

デスクトップ版とモバイル版で別々の URL を使うのは、貴重な時間を無駄にして、検索順位にダメージを与えるデザインキラーです。各バージョンを行き来することでユーザーのイライラを引き起こすだけなく、複数の URL を使うというのは SEO のベストプラクティスに反しており、多くの場合不要なことです。

ただ場合によっては、複数の URL を使用すると、デベロッパーはモバイル デバイスでのパフォーマンスが上がる軽量モバイル バージョンの Web サイトを作成できるようになります。ただし、デスクトップ バージョンがモバイルに非常に適している場合に限ります。

将来の維持・開発コストが考慮されていない

開発にはお金がかかりますが、将来のことを考えずに目先の金銭的なことを考えてデザインを決定してしまうことがよくあります。

アダプティブ Web デザインは、その開発に労働集約的な性質があるため、より高い初期投資が必要ですが、そのメンテナンスのコストは一般的に長期的に安定しています。

対するレスポンシブ Web デザインは、予期せぬコストにつながる可能性がありますが、UX の向上から生じる報酬は、そうした金銭的リスクを帳消しにしてくれるかもしれません。

UXPinでUIをデザインしよう

自身でレスポンシブな UI デザインのモックを始めたい場合は、UXPin でするのがおすすめです。このコラボレーションプラットフォームには、あらかじめ設定されたブレークポイントとカスタムのブレークポイントが用意されています。そして完成したら、スペックモードを有効にして、デベロッパーへのデザインハンドオフを自動化しましょう。

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.

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

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

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

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

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

ChatGPT とは

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

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

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

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

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

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

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

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

ChatGPT の仕組み

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UXPin での ChatGPT 統合の使い方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UXPin Mergeで簡単デザイン

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

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

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

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

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

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

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

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

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

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

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

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

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

要素とは

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

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

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

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

UI 要素３種

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

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

入力要素

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

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

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

出力要素

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

ヘルパー要素

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

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

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

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

ナビゲーション

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

インフォメーション

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

グループまたはコンテナ

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

一般的な 入力 UI 要素９選

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

１．チェックボックス

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

２．ドロップダウン

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

３．コンボボックス

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

４．ボタン

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

５．トグル

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

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

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

７．日付ピッカー

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

８．ラジオボタン

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

９．確認ダイアログ

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

一般的な出力要素４つ

１．アラート

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

２．トースト

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

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

３．バッジ

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

４．チャート

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

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

一般的なヘルパーUI 要素

ナビゲーション

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

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

ナビゲーションメニュー

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

リンク一覧

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

パンくずリスト

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

検索フィールド

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

ページネーション

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

インフォメーション

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

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

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

ツールチップ

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

アイコン

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

プログレスバー

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

通知

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

メッセージボックス

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

モーダルウィンドウ

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

グループおよびコンテナ

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

ウィジェット

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

コンテナ

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

サイドバー

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

検索バー

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

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

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

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

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

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

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

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

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

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

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

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

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

Tailwind CSS とは

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

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

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

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

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

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

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

cssCopy code

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

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

htmlCopy code

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

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

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

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

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

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

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

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

Tailwind CSS で作れるもの

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

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

Webアプリケーション

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

ランディングページ

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

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

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

ECサイト

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

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

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

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

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

ポートフォリオサイト

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

ドキュメントサイト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Material UI や Bootstrap との違い

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Admin UIは、管理者がシステム、アプリケーション、またはWeb サイトを管理および制御するために設計された GUI（グラフィカルユーザーインターフェース）のことをいいます。

通常のユーザーインターフェイスと異なり、システムの様々な管理や設定で必須の高度な機能とコントロールを提供します。

また、ユーザー管理、アクセス制御、システム構成、監視、レポートツールなどの機能が含まれていることが多く、管理者が直感的に操作できるように設計されており、大体はセキュリティを確保するためにアクセス時は認証が求められます。

 Admin UIの具体的な機能やデザインについては、Webアプリケーション、サーバー、データベース、または管理者の監視が必要なその他のシステムなど、コンテクストによって違います。

Admin UIは、複雑な管理タスクをシンプルにし、管理者が基盤となるシステムやアプリケーションを効率的かつ安全に管理できるようにするのに欠かせません。

UXPin Merge を使って React アプリのAdmin UIを構築しませんか。ドラッグ＆ドロップのUIビルダーで、Reactコンポーネントを使ってインターフェースを作成し、ワンクリックでコードをエクスポートしましょう。UXPin Mergeをぜひ無料でお試しください。

Admin UI とは

Admin UI（Administrative User Interface）は、管理者がシステム設定、ユーザー権限、その他の高度な設定をシンプルにされた直感的な方法で管理および制御するために設計されたグラフィカルインターフェース（GUI）です。

これは、アプリプロバイダー、Webサイト所有者、システム管理者が、アプリケーションやシステムを効果的に設定、管理、セキュリティ保護、監視するのに非常に重要なツールであり、彼らが提供するデジタルサービスの円滑な運用と成功に貢献するものです。

そしてデータへの不正アクセスに対するセキュリティ、アプリや Web サイト、システムのバックエンドの処理、その他管理者に課せられたタスクを提供します。

Admin UI の例

実例として、WordPressを見てみましょう。

WordPress の管理画面は、ユーザーに優しいUXデザインや多機能性、そしてWordpress自体が広く普及していることから、高品質な管理画面のUIデザインの好例となっています。

ユーザーに優しいナビゲーションに重点を置いてデザインされており、メニュー構造は直感的であるため、技術的な専門知識が乏しいユーザーを含め、様々な機能を簡単に見つけて管理することができます。

WordPressのAdminダッシュボードのデザインは、サイトの主要なメトリクス、最近のアクティビティ、重要なタスクへの迅速なアクセスの総合的な概要を提供します。

これによって、管理者はサイトの状況を一目で把握することができます。

また、この管理パネルはモジュール式なので、ユーザーはダッシュボード上のウィジェットを並べ替えたりカスタマイズしたりすることができます。

この柔軟性によって、管理者は特定のニーズや好みに応じてインターフェースをカスタマイズすることができます。

パスワード強度インジケーター、ユーザーロール管理、プラグインによる2FA（二要素認証）の実施機能などのセキュリティ機能も組み込まれています。

Adminダッシュボードにあるべきもの

アプリプロバイダー、Webサイト所有者、システム管理者は、以下のタスクを処理するために Admin UI を構築します：

• システムの構成と管理：Admin UIは、システム、アプリケーション、またはWebサイトのさまざまな側面を構成および管理するための専用スペースを提供する。
  これには、機能、ユーザーの役割、権限、システム設定に関連する設定が含まれる。
• ユーザー管理：Admin UI により、管理者はユーザーを効率的に管理することができる。
  これには、ユーザ登録、認証、役割割り当て、ユーザプロファイル管理などのタスクが含まれる。
  また、管理者はユーザーのアクティビティを監視して、適切な行動を取ることができる。
• コンテンツとデータの管理： Admin UIで、アプリケーションや Webサイト内のコンテンツやデータの管理ができるようになる。
  コンテンツの作成、編集、削除のようなタスクや、構造化された方法でのデータの整理などが含まれる。
• アクセス制御とセキュリティ： Admin UI は、アクセス制御とセキュリティ管理において重要な役割を果たす。
  システム管理者は、機密情報の保護や、許可された個人のみによる特定の機能やデータへのアクセスのために、ユーザーの役割や許可、制限を定めることができる。
• リアルタイムの監視と分析：このようなUIには、多くの場合でモバイルや Webアプリ (またはサイト) のパフォーマンスと使用状況を監視するための管理ダッシュボードが含まれている。
  ユーザー アクティビティの追跡、システム ログの分析、システムの使用状況を把握するためのレポートの生成などが含まれる場合がある。
• デバッグとトラブルシューティング： システム管理者にとって、Admin UI は問題のデバッグとトラブルシューティングのための貴重なツールと言える。
  管理者は、インフラストラクチャの技術的な詳細に立ち入ることなく、エラーログを表示し、問題を診断し、是正措置を講じることができる。
• 更新とメンテナンス： Admin UI で、アプリケーションや Web サイトの更新と保守のプロセスが促される。
  パッチの適用、アップデートのインストール、システムの安全性と最新性を維持するためのバージョン管理などが含まれる。
• カスタマイズと設定：Admin UI では、多くの場合、UI自体のカスタマイズと構成ができる。
  管理者の好みに合わせたテーマ、レイアウト、その他の視覚要素が含まれる場合がある。
• ワークフローの自動化： Admin UI には、管理者が特定のワークフローやタスクを自動化できる機能が含まれる場合がある。
  それによって反復的なプロセスが合理化され、全体的な効率が上がる。
• 管理者のUX強化：Admin UIは、管理者向けに専用のユーザーに優しいUIを提供することで、システムの管理責任者は効率的かつ最小限の労力で管理を行えるようになり、管理者の全体的なUXが向上する。

管理画面のUIデザインは、管理画面が必要なタスクによって異なります。

例えば、CRM（顧客関係管理）アプリではリアルタイムのモニタリングや分析ダッシュボードの UIが必要ですし、CMS（Contents Management System）ではコンテンツやデータの管理だけでなく、幅広いカスタマイズが必要です。

React アプリの Admin UI をデザインする方法

Material Design や Bootstrap のチームが作成したような、オープンソースの React ライブラリに由来する UI コンポーネントを使えば、Admin UI はかなり速くデザインできます。

そしてこのようなコンポーネントは、デザインシステムの基礎となり、Admin UI デザインの一貫性と品質が保証されるでしょう。

このチュートリアルでは、MUIコンポーネントを使ってインタラクティブなAdminダッシュボードをさっと組み立てる方法をご紹介します。

UXPinでは、Adminダッシュボードのテンプレートがあり、React UI デザインがとても簡単かつスピードアップするUIキットもあります。

では早速本題に入りましょう。

ステップ1：コンポーネントを選ぶ

Material Designには、Admin UI の基盤として機能し、事前に設計されたコンポーネントの豊富なセットがあります。

また、ナビゲーションバーからデータテーブルに至るまで、コンポーネントの包括的なスイートが提供されています。

Admin ダッシュボードの要件に適合するコンポーネントを特定することで、一貫性のあるプロフェッショナルな外観を確保しましょう。

MUIのドキュメントでコンポーネントをプレビューしたり、UXPin に直接ジャンプして、Merge ライブラリの一部として提供されているコンポーネントを確認できます。

それを行うには、新しいプロジェクトを開始して新しいプロトタイプの作成し、左下隅にある ［Design System Library］のアイコンを選択します。

そして次に、MUIv5を検索してコンポーネントを全てプレビューします。コンポーネントをグループ化したい場合は、応答性の高いフレックスボックスを使うといいでしょう。

管理画面の UI構築には、以下の UIコンポーネントをお勧めします：

• テーブル：基本テーブル、データテーブル、密テーブルを構築し、並べ替えと選択を管理するためのデータ表示コンポーネント。詳細については公式ドキュメントを参照。
• 棒グラフ – 数量を表現するための MUI-Xチャートコンポーネントの１つ。
• ラインチャート：トレンドを表示するための MUI-X チャートコンポーネント。
• 円グラフ：ここで強調したい最後の MUI-X チャート コンポーネント。
• リスト：完全にインタラクティブなさまざまなタイプのリストのデータ表示コンポーネント。
• タイポグラフィ：入力用の便利なデータ表示コンポーネントの１つ。
• 選択：ユーザーがドロップダウンリストから項目を選択できるようにする入力コンポーネント。 スタイルの設定方法については、公式ドキュメントを参照。
• メニュー ：複雑なナビゲーションコンポーネント。
• パンくず：ユーザーに優しい Web サイトのために追加する便利なナビゲーションコンポーネント。

これらはすべて内蔵の Merge ライブラリに属しているので、UXPin で簡単に見つけることができます。また、テーマ設定のためのものだけでなく、より多くの入力、ナビゲーションコンポーネントもあります。

ステップ2：コンポーネントを配置してプロパティを変更する

選択したコンポーネントを組み合わせて、Admin ダッシュボードのレイアウトを作成します。

MUI はモジュール構造になっているため、配置やカスタマイズが簡単です。アプリのブランディングやビジュアルアイデンティティに合わせて、色、タイポグラフィ、スペーシングなどのプロパティを調整しましょう。

このステップにより、ユーザーに響くまとまりのあるデザインが実現します。

UXPin で MUIコンポーネントを使用方法についてもっと知りたい方は、UXPin のライブラリの使い方に関するこちらの動画をご覧ください。

ステップ3：インタラクションの設定

インタラクティブな要素を追加して、UX を強化しましょう。

UXPin の MUI コンポーネントにはインタラクティブ機能が組み込まれていますが、特定の要件を満たすために、さらにカスタマイズしたり、イベントハンドラを追加したりすることができます。

折りたたみ可能なパネル、レスポンシブナビゲーション、ツールチップなどの機能を取り入れて、管理画面の UI を直感的でユーザーに使いやすいものにしましょう。

UXPin のエディタはコードベースなので、完全にコード化されたコンポーネントを扱うことになりますが、別のページに誘導するクリック可能なメニュー、ユーザーの前にポップアップするアラート、入力バリデーションなどのインタラクションを追加するオプションもあります。

このようなインタラクション（Interactions）は変数、インタラクション、式を使って追加できます。

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

ステップ4：Admin ダッシュボードをステークホルダーと共有してレビューしてもらう

先に進む前に、Admin ダッシュボードのプロトタイプをステークホルダーと共有してフィードバックをもらいましょう。Material-UI のコンポーネントで、デザインの一貫性を上がるだけでなく、迅速なレビュープロセスが促進されます。

レイアウト、ユーザビリティ、全体的な美しさについて意見を集め、プロジェクトの目標との整合性を確認しましょう。

UXPinには、まるで実物のようにデザインを見ることができ、ステークホルダーと共有してフィードバックをもらうことができるプレビューモードがあります。

ちなみに、プレビューにアクセスするショートカットは［Command］ +［P］です。

そして、プレビューにはサイトマップも含まれています。また、モバイルデザインについては、当社のミラーアプリを使って携帯端末でアプリを実行することができます。

ステップ5：アプリ開発のために React コードをエクスポートする

管理画面ダッシュボードのデザインが承認されると、UXPinはMUIベースのデザインから React コードをエクスポートするプロセスをシンプルにします。

また、このコードは Reactアプリにシームレスに統合できるため、開発時間の節約になり、デザインから実装へのスムーズな移行が実現します。

先ほど説明したプレビューモードからSpecモードに移動して、コードをエクスポートするだけです。

そしてそのコードは Stackblitzで直接開くこともできますし、他の開発環境にコピーすることもできます。

UXPinで Admin UI 以上のものをデザインしよう

パワフルでデザイン性の高いUIコンポーネントを利用すれば、React アプリのAdmin UI のデザインはシームレスなプロセスになります。

また、広範なライブラリと柔軟性を備えた MUI により、デベロッパーは一貫性があって視覚的に魅力的でインタラクティブな Admin ダッシュボードを作成できます。

このステップに従うことで、ユーザーとステークホルダー両方の期待に応える Admin UI を効率的にデザインして実装することができるのです。

UXPin でデザインを学ぶ準備はできましたか？UXPinのテンプレート、トライアルキット、Reactコンポーネントを使えば、すぐに効率的なデザインプロセスを実現することができます。

コンポーネントをキャンバスにドラッグ＆ドロップし、プロップを調整すれば製品開発の準備はバッチリです。UXPin をぜひ無料でお試しください。

The post Admin UI – Reactアプリ向けの効率的なデザイン方法 appeared first on Studio by UXPin.

ソフトウェアや Web開発には、初期コンセプトからデザイン、納品、QA、ライフサイクル管理まで、多くの役割と責任があります。UIデザインと UI開発 には、ユーザーがどのように UI（ユーザーインターフェース）と関わり対話をするかに影響を与える重要な役割があります。

そこで本記事では、UIデザインと  UI開発 の内容、これらの役割を支える人々、そしてデジタル製品を提供するためにどのように協力しているかを比較していきます。

主なポイント：

• UIデザインは製品のUI（ユーザーインターフェース）をデザインするプロセスであり、UI開発はそのデザインをプログラミングするプロセスである。
• UI デザインと UI開発は、ソフトウェア開発プロセスの対極にある。
• UIデザイナーとUIデベロッパーは、有用で、持続可能で、実現可能な製品を作るために協力する。

サクッと開発できるUIデザインを構築しませんか。UXPinのデザインエディターでReact、Storybook、npmのコンポーネントを使って、素早く制作できるプロトタイプを作成しましょう。詳しくは UXPin Mergeのページをぜひご覧ください。

UIデザインとは

UIデザインとは、UIの要素、レイアウト、インタラクション（ユーザーが見て、操作するもの全て）をデザインするプロセスのことをいいます。その要素には、画像、アニメーション、スライダー、テキストフィールド、ボタンなどが含まれます。また、UX（ユーザーエクスペリエンス）デザインと同様に、ユーザーのニーズとテストに基づいて決められます。

UIデザインで行うこと

UIデザイナーは、ユーザーが操作するデジタル製品やアプリケーションの視覚的要素をデザインする役割を担っており、全体的なUXの向上だけでなく、与えられたUI内でどのようなアクションが可能であるかを伝える、ユーザーに優しく見た目的にも美しいインターフェースを作成することに主に焦点を当てています。（例：ボタンのクリックやホームページへの移動、文字入力など）

UI デザイナーのスキルと責任

UIデザイナーは、UIデザインプロセスの責任者であり、その役割には以下が含まれます：

• 製品の美観：ブランディング、ビジュアルデザイン
• リサーチ：使用状況やユーザーの把握
• テスト：ユーザーにとってわかりやすいデザインであることの確認
• デザイン：プロトタイプ、モックアップ、インタラクションデザイン、アニメーション、ビューポートレイアウト（レスポンシブデザイン）の作成

UIデザイナーに求められる資質およびスキルセット

• ビジュアル面での創造性
• Webデザイン
• グラフィックデザイン
• デザイン原理およびデザイン思考
• ビジュアルデザインへの興味
• ユーザージャーニーとペルソナ
• ユーザーリサーチ
• タイポグラフィ
• 形と機能のバランス
• ユーザーのインタラクションと行動への注目
• タスク指向

UIデザインプロセスとは

UIデザイナーは、他のUX担当と同じデザイン思考プロセスに従いますが、フレームワークの中では以下のようにさまざまなことを行います：

• 共感：ユーザーの環境、動き、行動に焦点を当てる。
• 定義：ユーザーが目標を達成するために必要な各ステップに焦点を当てる。
• アイデア出し：ユーザーが製品をナビゲートするために必要な要素やコンポーネントについて見る。
• プロトタイプ：忠実度の高いプロトタイプのためのモックアップとインタラクティビティをデザインする。
• テスト：ユーザーがどのように製品を操作するかをテストし、実用的な質問をする。

さらに読む：UX デザイン vs UI デザイン その違いを把握しよう

UIデザイナーが使うソフトウェア

UIデザイナーは一般的に、他のUXデザイナーと同じデザインツールやソフトウェアを使い、そのツールで、UIのデザイン、プロトタイプ作成、テストを行います。

UIデザイナーは、最終製品のように見え、機能する忠実度の高いプロトタイプを作成することを目標としています。UXPinのようなコードベースのデザインツールで、UIデザイナーがデジタル製品のプロトタイプを作成し、テストする方法に革命をもたらしました。

UXPinの高度なプロトタイピング機能には以下のようなものがあります：

• ステート（状態）：１つのコンポーネントに対して、相互作用とシステム変更のための個別のプロパティを持つ複数のステートを作成する。
• 条件付きインタラクション：ユーザーやシステムのアクションに反応する Javascript のような「if-then」や「if-else」ルールで、動的なユーザー体験を作り出す。
• Variables（変数）： 例えば、ユーザーの名前入力からカスタマイズされたウェルカムメッセージを表示するなど、ユーザーの入力を保存し、そのデータに基づいてアクションを実行する。
• Expression：Javascriptのような関数を書いて、フォームのバリデーションや計算フォーマットなどの複雑なタスクを実行する。

１４日間の無料トライアルで、UXPin のこれらの機能やより高度な機能をぜひお試しください！

 UI開発 とは

UI開発 とは、クライアント向けのインターフェースをプログラミングするプロセスであり、UIデザイン同様に、UI 開発のプロセスには、画像、アニメーション、スライダー、テキストフィールド、ボタンなどのコードを書くことが含まれます。

UI デベロッパーとは

UIデベロッパーは、Web サイトやアプリケーションのビジュアルデザインの実装を担当します。UIデザイナーはインターフェースの全体的な LnF（ルック＆フィール）の作成に重点を置きますが、UI デベロッパーはインターフェースが Web上またはアプリケーション内で機能するようにコードを記述することで、そのデザインに動きなどを加えます。

UIデベロッパーのスキルおよび業務

製品や組織の構造によっては、UI開発の役割はフロントエンドデベロッパー、UXエンジニア、またはフルスタックエンジニアが担う可能性があります。その責務はエンジニアリングチームの構成によって異なりますが、以下のようなものがあります：

• UIコンポーネント開発
• UIメンテナンス
• スタイリングアーキテクチャ
• 実装
• 技術面での実現可能性
• バックログ管理
• パフォーマンス
• クエリのアーキテクチャ
• 検索エンジンの最適化

フロントエンド開発とバックエンド開発の違い

エンジニアは、プログラミングを以下のように「フロントエンド開発」と「バックエンド開発」の２つの分野に分けています。

• フロントエンド開発：HTML、CSS、Javascript を使った「クライアント向け」のインターフェースの開発に重点を置く。
• バックエンド開発： フロントエンドのインターフェースをデータベース、API、認証などに接続するためのサーバーサイドのコードを書き、プログラミング言語には、Java、Ruby、Python、Javascript などがある。

さらに読む（英語）：Front-End vs. Back-End: What’s the Difference?（フロントエンドとバックエンド： その違いとは？）

UI デベロッパーが使うソフトウェア

他のエンジニアと同じように、UI デベロッパーは IDE（統合開発環境）を使ってコードを調べたり書いたりします。また、最近の IDE には、Git、パッケージマネージャー、レポジトリ、API などのようなエンジニアリングツールとのインターフェースのための様々な拡張機能が備わっています。

さらに読む（英語）：The 7 Essential Tools for Frontend Web Development.（フロントエンド Web 開発に欠かせない７つのツール）

UIデザインと UI開発 

UIデザインと UI開発が定義されたことで、その分野がソフトウェア開発プロセスの対極にあることが明らかになりました。UI デザインはデザインプロセスで行われ、UI 開発はエンジニアリングプロセスで行われます。

UI デザイナーと UI エンジニアは別々の分野ですが、最終製品を成功させるために協力しないといけません。

また、UIデザイナーと UIエンジニアの役割がどんな組織にもあるわけではない点に注意することが重要です。

以下に、UI の役割と責任を果たす可能性のある職種を挙げてみましょう：

• UIデザイン：UX エンジニア、ビジュアルデザイナー、グラフィックデザイナー
• UI開発：フロントエンドデベロッパー、UXエンジニア/UX デベロッパー、フルスタックエンジニア

UIデザイナーと UIデベロッパーの協力体制

ここでは、UI デザイナーと UI デベロッパーがプロジェクトでどのように連携するかを示す一般的なワークフローを見てみましょう：

• UIデザイナーは、ユーザー、競合、市場、製品などを理解するために、様々な形の UX 調査からデザインプロジェクトを始めて、ユーザーの視点から問題を理解するために、ユーザー中心のデザイン（UCD）プロセスを用いる。
• UIデザイナーは、デザインプロセスの早い段階で UIデベロッパーとミーティングを行い、技術的な制限、デザインハンドオフの手順、ドキュメントの要件について話し合う。
• UIデザイナーは、他の UX デザイナーと協力して、UI、レイアウト、コンポーネントのデザイン、プロトタイプ作成、テストを行い、UI デベロッパーは、場合によってはデザインチームと協力して、複雑な UI コンポーネントをテストするための基本的なコードプロトタイプを構築することもある。
• デザインプロセスが完了すると、UI デザイナーはデザインのハンドオフのためにプロトタイプとドキュメントを準備する。
• UIデザイナーと UI デベロッパーは、デザインについて話し合い、デザインのハンドオフプロセスでエンジニアがすべてを正しく理解していることを確認するために会う場合もある。
• UIデベロッパーは、他のエンジニアリングチームと協力して、デザインを機能するコードに変換する。
• UIデザイナーは、デザインチームやプロダクトチームと協力し、最終リリースがデザイン仕様を満たしていることを確認する QA（品質保証）プロセスを完了する。

UIデザイナーと UIデベロッパーの連携の重要性

現代のソフトウェア開発は、卓越したUIデザインと開発に依存しています。

デザイナーは、製品がユーザーのニーズを満たしていることを確認し、UIとUIコンポーネントを徹底的にテストして、ユーザビリティとアクセシビリティの基準を満たしていることを確認します。

このプロトタイプとテストの段階がないと、ユーザビリティの問題が製品に影響を及ぼし、その結果、UXが落ち、顧客サービスや手直し、顧客喪失など、回避できるはずのコストがさまざまな面で発生してしまいます。

UIデベロッパーは、ソフトウェアのリリースを成功させるためにも重要な役割を果たします。最終的な UI がデザイン仕様を満たしていることを確認し、バグやパフォーマンスがないかコードをテストしないといけませんし、製品が長期にわたって完全性と一貫性を維持できるように、パッケージ、API、セキュリティなどのアップデートを含むコードの管理も担当します。

これを実現するには、デザイナーとエンジニアがソフトウェア開発プロセスを通じて協力し合うことが理想ですが、一般的な大規模組織ではサイロ化やコミュニケーション不足が問題になるかもしれません。

その際、多くの場合ではUIデザイナーと UIデベロッパーはDesignOpsやDevOpsを取り組むことで、部門間のギャップを埋めて、運用プロセスと連携を改善します。

UXPin Mergeでデザイナーとデベロッパーの連携を改善

ドリフト（摩擦）の課題

デザイナーとエンジニアが直面する課題のひとつに、以下のように「話す言語が違う」という点があります。

• デザイナー = 画像ベースの静的モックアップとプロトタイプ
• エンジニア = コード、ブラウザ、OS、データベースなど

お互いの専門分野について深い知識と経験がなければ、デザイナーとプログラマーが相手の限界や制約、その他の課題を理解するのは難しく、そのギャップを埋めるのは、組織が製品を時間通りで予算通りに成功裏に納品するために極めて重要です。

コードベースのソリューション

UXPin Mergeは、コードベースのデザインソリューションにより従来の UXワークフローに革命をもたらします。組織はレポジトリからコンポーネントライブラリをUXPinエディタに同期できるようになるので、デザイナーは完全に機能する UI要素とコンポーネントを使ってプロトタイプを構築できます。

Merge コンポーネントは、インタラクティブ性などのレポジトリ内のコンポーネントとまったく同じプロパティを保持するため、デザイナーはドラッグ＆ドロップするだけで UI を構築できます。

また、デザイナーが JSX や UXPin のプロパティパネルでコンポーネントをカスタマイズできるように、エンジニアはReact や Storybook の Args などのさまざまなプロップを設定できます。プロップに変更を加えるとJSX がレンダリングされ、エンジニアはコピー＆ペーストして開発を開始することができます。

そしてこのMergeを活用したワークフローは、UIデザイナーとUI ベロッパーが同じ言語を同じ制約で話しているため、連携と理解がより高まります。組織のコンポーネントライブラリにとって本当の「信頼できる唯一の情報源」ということです。

UXPinはまた、コード化されたコンポーネントのインポートと管理におけるデベロッパーの関与を軽減するツールである Merge Component Managerを提供しています。エンジニアへの依存が軽減されるということは、デザイナーがMergeをより速く立ち上げて実行できるということです。

「以前はデザインだけで２～３ヶ月かかっていましたが、今では、UXPin Mergeを使うことで、チームは同じ時間枠で製品をデザイン、テスト、納品することができます。「市場投入までの時間の短縮」は、UXPin Mergeを使って経験した最も大きな変化の一つです。」 エリカ ライダー（Paypal 社）‐ UX リード EPX 

UXPin Mergeのテクノロジーがデザインプロセスにどのような革命をもたらすかをぜひご覧ください。アクセスのリクエストはコチラから。

The post UI デザインと UI開発 の違い appeared first on Studio by UXPin.