フロントエンドフレームワークは、プロジェクトの成功に大きな影響を与える重要な要素です。本記事では、人気のスタイリングおよびUIコンポーネントライブラリである Tailwind CSS と Material UI を比較し、それぞれの強みを解説します。どちらのライブラリが自分のプロジェクトに最適か判断するために、2つを詳細に比較し、十分な情報を提供します。

UXPin Merge は、コンポーネントをピクセルではなくコードとしてレンダリングするプロトタイピングツールです。UXPin Mergeをぜひ無料でお試しください。

Tailwind CSS

Tailwind CSSは、ユーティリティ優先のアプローチで Web開発に革新をもたらしました。定義済みのコンポーネントではなく、低レベルのユーティリティクラスを使って、HTMLでカスタムデザインを構築できます。これにより、迅速な開発と高い柔軟性が実現し、開発者は高度にカスタマイズされたインターフェースを作成できるようになります。

• カスタマイズを核に：Tailwindでは、HTML内でコンポーネントを直接スタイル設定できるため、比類のないコントロールとカスタマイズが可能になる。
• スピーディな開発：ユーティリティクラスを使うことで、カスタム CSS をゼロから記述する必要がなくなることから、より迅速なプロトタイプ作成や構築ができる。
• レスポンシブデザインが簡単になる：Tailwind のレスポンシブユーティリティクラスを使うと、複数のスクリーンサイズに対応したデザインがしやすくなる。
• コミュニティとエコシステム：Tailwind では、成長するコミュニティと豊富なプラグインのエコシステムにより、必要なツールとサポートを確実に得られる。

Tailwind が使われているのは？

Tailwind CSS は、さまざまな業種の企業やデベロッパーに利用されており、Tailwind CSS が使われている有名な組織やプラットフォームには、以下のようなものが挙げられます：

• GitHub：GitHub には、Tailwind CSS が使われているインターフェースがあり、Tailwind CSS のユーティリティ優先型のアプローチを活かした迅速で柔軟な開発が行われている。
• Laravel：Laravel のフレームワークでは、Tailwind CSS がエコシステムに統合されており、Laravel コミュニティ内のデベロッパーの間で人気のある選択肢となっている。
• Dev.to：Dev.to は、よく使われているデベロッパーコミュニティとブログプラットフォームであり、フロントエンドのデザインに Tailwind CSS を利用していることから、カスタマイズ可能なユーティリティクラスの恩恵を受けている。
• Statamic：Stamic は静的サイト生成のための CMS であり、Tailwind CSS を使って、洗練された効率的な UI（ユーザーインターフェース）を提供している。
• Algolia：Algolia は強力な検索サービスプラットフォームであり、そのドキュメントと様々な Web インターフェースに Tailwind CSS が組み込まれている。
• Vercel：Vercel はフロントエンドフレームワークと静的サイトのプラットフォームであり、ドキュメントとマーケティングページに Tailwind CSS が使われている。
• Superhuman：メールクライアント の Superhuman は、 Tailwind CSS を使って洗練された高速な UI が実現することで、効率性とカスタマイズ性を謳っている。

この例で、大企業から個人デベロッパー、小規模なスタートアップ企業まで、さまざまな分野での Tailwind CSS の多用途性と人気が伺えます。

Material UI

Material UI（フロントエンドデベロッパーでは「MUI」と呼ばれる）は、Googleの Material Designの哲学を実装した React コンポーネントライブラリです。UX デザインのベストプラクティスに従ったプレスタイルのコンポーネントの包括的なセットが以下のようにあることから、一貫性とモダンな美しさを求めるデベロッパーにおすすめの選択肢となっています。

• すぐに使えるコンポーネント：Material UI には、Material Design のガイドラインに準拠した膨大な数の事前構築済みのコンポーネントが付属しており、それによってアプリケーション全体の一貫したルック＆フィールが保証される。
• テーマ設定とカスタマイズ：コンポーネントにはあらかじめスタイルが設定されているが、Material UI には強力なテーマ設定機能があることから、ブランドに合わせた外観の微調整やカスタマイズができる。
• アクセシビリティとパフォーマンス：Material UI コンポーネントは、アクセシビリティを念頭に置いて構築されていることでパフォーマンスが最適化され、それによってシームレスなユーザー体験がもたらされる。
• React ライブラリ：Material UI は、Reactコンポーネントベースのアーキテクチャのパワーを活かしていることから、React プロジェクトに自然にフィットする。

MUI が使われているのは？

MUI は、あらかじめスタイル設定されたコンポーネントの包括的なセットがあることや、マテリアルデザインのガイドラインに準拠していることから、スタートアップ企業から大企業まで、さまざまな企業や組織で広く使われています。

Material UI を採り入れている組織やプラットフォームの注目すべき例としては、以下が挙げられます：

• Netflix：ストリーミング配信大手の Netflix は、特定の社内ツールやアプリケーションに Material UI を活用することで、コンポーネント駆動型のアーキテクチャと一貫性のあるデザインの恩恵を受けている。
• Spotify：広く使われている音楽ストリーミングサービスでは、Web アプリケーションの一部に Material UI が活用されていることから、まとまりのあるモダンなユーザー体験が保証されている。
• Nasa：NASAでは、データ可視化と内部ツールの一部に Material UI が使われ、その強固でアクセスしやすいコンポーネントの利点が活かされている。
• Amazon：Amazon の社内ダッシュボードやツールの一部は Material UI を使って構築されていることから、効率的で効率的な開発プロセスがもたらされている。
• Shutterstock：このストックフォト会社は、Web アプリケーションに Material UI を採り入れることで、プラットフォーム全体でクリーンでプロフェッショナルな外観を実現している。
• Blue Origin：ジェフ・ベゾス氏の航空宇宙メーカーであり、弾道飛行サービスを提供する同社は、社内ツールやアプリケーションの一部に Material UI が使われている。
• Hootsuite：この SNS 管理プラットフォームは、Material UI を使って、顧客に一貫したユーザーに優しいインターフェースを提供している。

このフレームワークは汎用性が高く、Material Design の原則に準拠しているため、モダンでレスポンシブ、アクセシブルな Web アプリケーションを構築したい企業に多く選ばれています。

Tailwind CSS と Material UI の選び方

Tailwind CSS と Material UI のどちらを選ぶかは、最終的にはプロジェクトの要件と個人の好みによります。

きめ細かなコントロールとカスタマイズを好むなら、Tailwind のユーティリティファーストのアプローチが強い味方となるでしょうし、一貫性と速やかな開発を重視して、構造化されたコンポーネント駆動型のフレームワークを好むなら、Material UI がいいかもしれません。

デザイン手法と哲学

• Tailwind CSS:
  • ユーティリティファースト：Tailwind CSSは、ユーティリティファーストの CSS フレームワークであり、低レベルのユーティリティクラスを提供することで、デベロッパーは HTML 内で直接カスタムデザインを構築できるようになる。この手法で、迅速なプロトタイプと高い柔軟性が促進される。
  • カスタマイズ：Tailwind には幅広いカスタマイズオプションがあり、それでデベロッパーは、スタイルを設定して独自のデザインシステムを作成することができる。
• Material UI:
  • コンポーネント優先型：Material UI は、Google の Material Design のガイドラインに基づいた React コンポーネントライブラリであり、一貫性があってまとまりのある UX を保証するために、事前構築済みのスタイル付けされたコンポーネントを提供している。
  • デザインの一貫性：Material UI は、Material Design の原則に従うことで、アプリケーション全体の一貫性を維持することに重点が置かれている。

開発スピードとワークフロー

• Tailwind CSS:
  • ラピッドプロトタイピング： ユーティリティファーストのアプローチにより、マークアップ内で直接スタイリングをサッと変更できるため、デザインの反復がよりしやすくなる。
  • 習得：デベロッパーは、従来の CSS メソッドの代わりにユーティリティ クラスを使うように調整が必要な可能性がある。
• Material UI:
  • すぐに使えるコンポーネント：Material UI はすぐに使えるコンポーネントを提供し、それでコンポーネントをゼロから構築してスタイル設定する必要性が下がることで、開発プロセスのスピードが上がる。
  • React との統合：React とシームレスに統合していることから、React のコンポーネントベースのアーキテクチャを活用して複雑な UI を構築できる。

カスタマイズと柔軟性

• Tailwind CSS:
  • 高いカスタマイズ性：Tailwind の設定ファイルにより、デベロッパーはスタイル、カラースキーム、スペーシングスケールを定めることができ、幅広いカスタマイズが実現する。
  • コンポーネントライブラリ：Tailwind は主にユーティリティベースであるが、デベロッパーは Tailwind のエコシステムに適合するコンポーネントライブラリを作成または使用することができる。
• Material UI:
  • テーマ設定とスタイリング：Material UI にはテーマ設定機能があることから、デベロッパーはブランドのデザイン言語に合わせてコンポーネントの外観をカスタマイズできる。
  • デザインガイドラインによる制約：カスタマイズは可能だが、コンポーネントは Material Design のガイドラインに沿って設計されているため、非常に個性的なデザインの場合は柔軟性が制限される可能性がある。

コミュニティとエコシステム

• Tailwind CSS:
  • 成長中のエコシステム：Tailwind CSS には、機能を強化するプラグイン、テーマ、ツールを備えた急速に成長しているエコシステムがある。
  • コミュニティによるサポート：デベロッパーには、活気あるコミュニティと広範なドキュメントが提供される。
• Material UI:
  • 成熟したライブラリ：Material UI は、強力なコミュニティ、豊富なドキュメント、多数のサンプルやチュートリアルがある、確立されたライブラリである。
  • 包括的なコンポーネントセット：基本的な UI 要素から、データテーブルやチャートのような複雑な機能まで、幅広いコンポーネントがある。

パフォーマンスに関する考察

• Tailwind CSS:
  • より小さな CSS バンドル：PurgeCSS を使うことによって、Tailwind は、未使用のスタイルを削除することで最終的な CSS バンドルのサイズを大幅に下げることができ、それがパフォーマンスの向上につながる。
  • カスタムビルド：Tailwind の設定では、プロジェクトの特定のニーズに合わせたカスタムビルドを作成することができる。
• Material UI:
  • 最適化されたコンポーネント：Material UI のコンポーネントはパフォーマンスのために最適化されているが、パフォーマンスが非常に重視されるアプリケーションでは、ライブラリのサイズが考慮されることがある。
  • Tree Shaking：使われていないコンポーネントを取り除き、バンドルサイズを小さくするための Tree Shaking に対応している。

ユースケース

• Tailwind CSS:
  • カスタムデザイン：高度にカスタマイズされた特注デザインが必要であり、デベロッパーがスタイリングを完全にコントロールしたいプロジェクトに最適。
  • ラピッドプロトタイピング： UI デザインをサッとプロトタイプして反復するのに便利。
• Material UI:
  • 一貫したUI：一貫性のある洗練された外観を実現し、Material Design の原則を遵守するアプリケーションに最適。
  • React プロジェクト： すぐに使えるスタイル付きコンポーネントが開発を大幅にスピードアップする React ベースのプロジェクトに最適。

TailwindとMUIは一緒に使えるか

はい、プロジェクトで Material UI（MUI）と Tailwind CSS を使うことができます。この２つを統合することで、Tailwind CSS のユーティリティファーストのアプローチを活かしてサッとスタイリングしながら、MUI の事前構築済みで高度にカスタマイズ可能な React コンポーネントを使うことができます。

Tailwind CSS と Material UI を併用していることを公に認めている企業や著名なプロジェクトの具体例は、それほど簡単には手に入らないかもしれませんが、この組み合わせは、個人のデベロッパーや小規模なプロジェクトの間で多く使われているのは確かです。この組み合わせでデベロッパーは柔軟性、迅速な開発能力、一貫した洗練された UI を維持する能力を得られますからね。

より良い選択肢：Tailwind UI を備えた Tailwind CSS

Tailwind UI は、Tailwind CSS のメーカーによって作成されたプレミアムコンポーネントライブラリです。Tailwind CSS を使って構築された、プロがデザインした完全にレスポンシブな UI コンポーネントのコレクションを提供し、このコンポーネントで、デベロッパーはゼロから始めることなく、美しく一貫性のある UI をサッと構築することができるようになります。

Tailwind UI と Tailwind CSS の関係

• 補完ツール：Tailwind UIは、Tailwind CSS の自然な延長であり、Tailwind CSS がカスタムデザインを作成するためのユーティリティファーストのフレームワークを提供するのに対し、Tailwind UI は、プロジェクトで直接使用できる事前構築済みコンポーネントのコレクションを提供する。
• 効率とスピード：Tailwind UIでは、デベロッパーがコンポーネントのライブラリからサッとUIを組み立てることができるようになることで、Tailwind CSS の効率が上がる。これは、プロトタイプや MVP 開発に特に有用。
• 一貫したデザイン言語：Tailwind UI を使うと、コンポーネントはすべて同じデザイン原則に従い、Tailwind CSS を使って構築されるため、アプリケーション全体で一貫したデザイン言語が保証される。
• 教育リソース：Tailwind UI は、Tailwind CSS の効果的な使用方法を示す教育リソースとしても機能し、それでデベロッパーは、Tailwind UI コンポーネントがどのように構築されているかを調べることで、ベストプラクティスや高度なテクニックを学ぶことができる。
• 統合：Tailwind UI のコンポーネントを Tailwind CSS のプロジェクトに統合するのは簡単であり、デベロッパーは、Tailwind UI から HTML 構造と対応するユーティリティクラスをコピーして、Tailwind CSS ベースのプロジェクトに貼り付けることができる。そしてそこから、必要に応じてコンポーネントをさらにカスタマイズすることができる。

UXPin で Tailwind UI を使う

UXPin Merge には Tailwind UIライブラリが組み込まれており、CSS コンポーネントを使って、完全に機能するプロトタイプを作成できます。

コンポーネントを入れ子にして複雑な要素を作成したり、「カスタムコンポーネント」タイルを使って、Tailwind UIのWeb サイトに掲載されている事前構築済みのセクションを貼り付けることができます。

お好きなセクションが見つからない場合は、AI Component Creator を使って、自身のプロンプトに基づいたものを生成できます。コンポーネントクリエーターの使い方については、こちらのチュートリアルをご覧ください。

UXPin で MUI を使う

Reactアプリの作成をご希望の方は、UXPinのMUIライブラリをご利用ください。ここには完全に機能的でレスポンシブな React のインターフェースを構築できる UIコンポーネントが統合されています。

お好きなようにスタイリングできますし、お好みでコンポーネントを追加することもできます。以下のチュートリアルに従って、プロトタイプの作り方をご覧ください：ダッシュボードの例

Tailwind と Material UI のどちらがおすすめか

Tailwind CSS と Material UI は、どちらもデベロッパーの強力な武器となるツールですが、その選択は、カスタマイズの必要性と利便性、そしてプロジェクトをMaterial Design の標準にどれだけ忠実にしたいかによります。

ただ、どちらのフレームワークを選ぶにせよ、それで開発ワークフローの強化や、美しくレスポンシブな Webアプリケーションの構築ができることは約束されています。

UXPin Merge は、デザインチームと開発チームの連携方法を変革する強力なツールであることから、デザインがプロダクションコードに直接リンクされる統一プラットフォームを提供します。この革新的な技術により、ワークフローのスピードが上がるだけでなく、高い精度と一貫性が保証され、それで高品質のデジタル製品を効率的に作成することを目指す現代のデザインチームにとって不可欠なツールとなっています。

UXPin Merge をぜひ無料でお試しください。

The post Tailwind と Material 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.

製品デザインおよび開発の世界に飛び込むと、たくさんの用語が飛び交いますが、今回はそのうちの以下の３つに焦点を当ててみましょう：

• プロトタイプは、デザインアイデアをテストし、ユーザーからのフィードバックを得て、最終製品がどのようなものになるかをステークホルダーやデベロッパーに示すための最終製品の表現である。
• MVP（Minimum Viable Product）とは、製品を喜んで使ってくれる最初のユーザーを見つけるためにステークホルダーが使う製品のことである。最初のユーザーを見つけるのに必要なものがすべて揃っていることから、「Minimum Viable Product（実用最小限の製品）」と呼ばれる。
• 概念実証（Proof of Concept：PoC）とは、資金の確保、リソース収集、適切なものへの確実な投資のために、製品の実現可能性、実行可能性、有用性を測るのをサポートするものである。

主なポイント：

• プロトタイプは、製品のUIとUXデザインを対象ユーザーでテストしてフィードバックをもらい、可能な限り最良のソリューションを実現することを目的としている。そして MVP は、そもそも製品を作る価値があるかどうかをチェックするために、新しもの好きを探したり PoC がそこにあることを確認するのを目的としている。
• プロトタイプは、リソースを投入して製品を作る前に、製品をテストするのに必要な機能を備えている必要がある。MVPは完全に機能する必要があり、PoC はまったく機能的である必要はない。
• プロトタイプ、MVP、概念実証は、ユーザーに焦点を当てて開発される必要があり、フィードバックとデザインの検証に基づいて、何度も繰り返される。

UXPin の強力な Merge の技術を使って、完全にインタラクティブなプロトタイプを作成してコンセプトをテストしませんか。製品デザインプロセス中に正確なフィードバックを得ることで、アイデアを検証し、従来の画像ベースのデザインツールよりも高い忠実度でより速くイテレーションを行えます。UXPin Merge をぜひご覧ください。

プロトタイプとは

プロトタイプは、製品のアイデアを表現またはシミュレーションすることから、デザイナーやステークホルダー、ユーザーは主要な特徴や機能を視覚化して、相互作用できるようになります。また、プロトタイプで、開発に多大な時間とリソースを投資する前の初期段階において、デザインコンセプトの検証やフィードバックの収集、ユーザビリティテストを行うことができます。

プロトタイプには、忠実度の低いスケッチやワイヤーフレームから、最終製品に近い忠実度の高いインタラクティブなレプリカまで、さまざまな種類があります。それてデザイナーは、ユーザーのインサイトに基づいてデザインをサッと反復、改良、改善することができることから、最終製品でユーザーのニーズとビジネス目標がきちんと満たされるようになります。

プロトタイプの作り方

UXデザイナーやプロダクトデザイナーは、一般的にプロトタイプのプロセスを担います。その際、UXリサーチャー、デベロッパー、ステークホルダーなどの他のチームメンバーと協力して、要件の収集や、スコープの確定、アイデアの具体的なプロトタイプへの変換を行います。

デザイナーは、さまざまなツールや方法論を使って、アイデアのインタラクティブなビジュアル表現を作成したり、ユーザーインタラクションのシミュレーションを行います。

MVP とは

MVP（実用最小限の製品）とは、初期ユーザーの主要なニーズに対応することを目的とした、核となる特徴と機能しか備わっていない「製品の簡易版」です。これは、最小限のリソースと投資で、製品アイデアを市場でテストして検証することを目的としています。

MVP は機能的な製品であり、これで製品チームはフィードバックの収集や、ユーザーエンゲージメントの測定、反復と機能強化に役立つ貴重なデータの収集ができるようになります。

MVP は、開発コストと市場投入までの時間を最小限に抑えながら、ユーザーに価値を提供することと、製品の実現可能性を検証することのバランスをとることを目的としているのです。

MVP の作り方

デベロッパーは通常、選択した技術スタックに固有のプログラム言語、フレームワーク、開発プラットフォームなど、さまざまなツールや技術を組み合わせて MVP を構築します。そしてその際、HTML、CSS、Javascript のような基礎的なプログラミング言語や、React、Angular、Vue のようなフレームワークを使う場合があります。

エンジニアリングチームは、デザイナー、ステークホルダー、その他のチームメンバーと協力して、MVP の特徴、機能、優先順位を確定します。そして開発プロセスには以下が含まれます：

• 中心となる機能の実装
• 必要な API やデータベースとの統合
• テスト可能な環境への製品のデプロイ

概念実証（PoC）とは

概念実証（PoC）とは、アイデアの実現性や可能性を検証することを目的とした小規模なデモンストレーションや実験のことです。PoC は通常、企業でソフトウェア開発に多大なリソースを投資する前に、製品や技術の技術的・機能的側面をテストするのに使われます。

PoC は、鍵となる仮説を検証したり、アイデアの具体的な特徴や能力をステークホルダーや投資者に紹介したりすることに重点が置かれています。また、そのコンセプトが実現可能であり、問題を解決したりニーズを満たしたりする可能性があることを証明するものになります。

完全に機能する製品とは違って、PoC は生産可能なものでも、対象ユーザーに配備されるようにデザインされたものでもないかもしれませんが、その目的はアイデアの実行可能性と価値を実証し、さらなる開発と投資への道を開くところにあります。

PoC の作り方

PoC 構築は、デベロッパー、エンジニア、デザイナー、SME（その道の専門家）で構成される部門横断チームが担います。連携して、シンプル化されたソリューションのデザインや実装を行い、コンセプトの実行可能性を検証するための中核的な特徴と機能性に重点を置きます。

デジタルイノベーションの性質が多様であるため、PoC を構築するのに組織で使われるツールや技術は様々です。例えば、組織 は Python、Java、C++ を様々な開発フレームワークと組み合わせて使うことがあります。また、PoC の実行や分析をするのに、データ分析ツール、可視化ソフトウェア、シミュレーションプラットフォームを組み込むこともあるかもしれません。

PoC と プロトタイプ と MVP の比較

主な違い

目的と範囲（スコープ）：

• プロトタイプ：デザインコンセプト、インタラクション、UX（ユーザーエクスペリエンス）を視覚化してテストするのに使われる。
• MVP：製品市場適合性を見つけ、実世界のコンテクストでアイデアを洗練させるために開発される。
• PoC： 製品の実現可能性と潜在的な価値を実証するのに作成される。

機能レベル:

• プロトタイプ： 製品のユーザビリティをテストできる限定的な機能。
• MVP：スコープクリープを回避したフル機能。
• PoC： 機能は必要なく、中心となるコンセプトを披露することが目的。

対象者とタイミング：

• プロトタイプ： 初期のデザインおよび開発段階で、社内チーム、ステークホルダー、潜在的ユーザーが対象。
• MVP：新しもの好き、潜在顧客、投資家が対象であり、製品と市場の適合性を検証する。
• PoC： ステークホルダー、投資家、潜在的パートナーを対象とし、コンセプトの実行可能性と潜在能力を示す。

類似点と重複点

反復的なアプローチ：

• プロトタイプ、MVP、PoC は、反復的な製品開発プロセスを採りいれている。
• いずれも、テスト、フィードバックの収集、製品の改良のサイクルを伴う。
• ユーザーやステークホルダーからのインサイトやフィードバックが、イテレーションを推進する。

UCD（ユーザー中心のデザイン）：

• チームは、UCD（ユーザー中心のデザイン）の原則を使って、プロトタイプ、MVP、PoC をデザインする。
• ユーザーからのフィードバックやインサイトは、製品デザインのプロセスを形成する上で重要な役割を果たす。
• チームは、UXを向上させてユーザーのニーズと市場の需要を満たすのに、イテレーションを繰り返す。

学習と検証:

• 企業では、ビジネスアイデアや製品コンセプトを学んで検証するために、プロトタイプ、MVP、PoC が使われる。
• プロトタイプは、フィードバックの収集や仮定のテスト、情報に基づいた意思決定を行う機会を提供する。
• 組織はプロトタイプを構築し、ユーザーテストと検証を通じてインサイトを得て、製品を改良したり必要な改善を行う。

プロトタイプ、MVP、PoC のケーススタディ

シナリオ：FinTech スタートアップの FinPin は、個人の財務を管理するためのデジタル製品の開発に取り組んでおり、このアプリは、予算編成、経費追跡、財務目標設定のためのシームレスで直感的なエクスペリエンスをユーザーに提供することを目指しています。

プロトタイプ

FinPin は、コンセプトとデザインの段階で、UI を検証して潜在的なユーザーやステークホルダーからのフィードバックを集めるのにプロトタイプを作成します。その際、チームはこのプロセスで、Lo-Fiプロトタイプや Hi-Fiプロトタイプなど、バリエーションを色々と作成します。

Lo-Fi プロトタイプを使うことで、デザインチームは、デザインツールを使ってデジタルワイヤーフレームに移行する前に、まず紙を使ってテストと反復をサッと行うことができます。なので FinPin のデザインチームは、この Lo-Fi プロトタイプを使って、構造、ナビゲーション、情報アーキテクチャを作成します。

次に、チームは 低忠実度のワイヤーフレームを高忠実度のインタラクティブなプロトタイプに変換します。その際、FinPin のデザイナーは、デザインシステムの膨大なコンポーネント ライブラリと明確に定めれたデザイン言語を活用して時間を節約し、Material UI を使ってインタラクティブなプロトタイプを構築しています。

そして UXPin Mergeテクノロジーを使って、React コンポーネントを使ってプロトタイプとテストを行います。このインタラクティブなプロトタイプの手法により、チームはアイデアを検証したり、ユーザビリティの問題を解決するための正確なデータとインサイトを集めることができます。

このプロトタイプには、カラー、タイポグラフィ、UI コンポーネント、実際のコンテンツが含まれ、チームはエンドユーザーとデザインをテストし、フィードバックをイテレーションすることができます。また、デザイナーは、このイテレーションプロセスで UX を最適化すると同時に、UI のビジネス価値を高めます。

MVP

プロトタイプに対する肯定的なフィードバックを受けた後、FinPin はモバイルアプリの MVP を開発します。その際、コストと時間のかかるモバイルアプリを作成する代わりに、FinPin は製品の中心的な機能を備えたモバイルフレンドリーな Web アプリを開発します。

MVP には、アカウントリンク、支出追跡、基本的な予算管理機能など、必要不可欠な機能が含まれており、機能的なWebアプリケーションを作成し、最初のユーザーを探し出し、彼らがこのアプリのどこを評価しているかを確認することを目標としています。

また、Web アプリでは、Google AnalyticsやHotjarのようなツールを使ってユーザーの行動の追跡や分析をし、今後の改善に役立てることができます。このデータにより、チームは貴重なユーザーのインサイトを集めて仮定を検証し、追加機能にさらなるリソースを投資する前に製品と市場の適合性を判断することができます。

PoC

FinPin は、革新的な金融予測技術をアプリに導入することを目指しており、技術の実現可能性を示すために PoC を構築して、資金を確保するために投資家にアイデアを売り込みます。

PoC は、予測アルゴリズムの小規模な機能バージョンを開発し、それを MVP に統合することに重点が置かれています。また、MVPとの統合により、FinPin はテクノロジの精度とパフォーマンスをテストし、技術的な課題や制限を評価して、潜在的な投資家やパートナーにその潜在的な価値を示すことができます。

そして PoC の結果は、予測技術を最終製品に統合するスケーラビリティと実行可能性についての決定に役立ちます。

上記の例は、企業やスタートアップがプロトタイプ、MVP、PoC を使うシナリオが３つ示されていますが、この例をまとめると、次のようになります：

• プロトタイプ：デザインテスト
• MVP：ベータテスト
• PoC：コンセプトテスト

UXPin Mergeによる高度なプロトタイプ

MVP を作るにせよ、PoC を行うにせよ、プロトタイプは、開発プロセスにコミットする前にアイデアをテストして検証するのに非常に重要です。

UXPin Merge のテクノロジーにより、デザイナーはコード コンポーネントをデザインプロセスに取り入れてプロトタイプの範囲を拡大し、ユーザーテストやステークホルダーから有意義なフィードバックを集めることができます。そしてこのインタラクティブなプロトタイプにより、ユーザーやステークホルダーは最終製品と同じように UI を操作できるため、開発プロセスの前に正確なインサイトを得てイテレーションや改善をすることができます。

より良い製品成果と UX のために、データ駆動型の意思決定を促進するプロトタイプを作成しませんか。詳細とアクセスリクエスト方法については、Mergeの製品ページをぜひご覧ください。

The post プロトタイプ vs MVP vs PoC：それぞれ何が違う？ appeared first on Studio by UXPin.

React は 、UI（ユーザーインターフェース）、特に、全ページの再読み込みが必要なくユーザーが Web ページと対話できるシングルページのアプリケーションの構築に使われる、JavaScript のライブラリです。Facebook によって開発・保守されおり、UI コンポーネントを構築するための宣言的なアプローチと、仮想 DOM（Document Object Model）による効率的なレンダリングで広く使われるようになりました。

開発準備が整った React アプリのプロトタイプをクリック一つで構築しませんか。MUI、Ant design、React Bootstrap などの最高のオープンソースの React ライブラリに由来する UI コンポーネントをドラッグ＆ドロップしたり、独自の React コンポーネントを持ち込んだりできます。UXPin Merge をぜひお試しください。

React とは

ReactJS または React.js としても知られている React は、フロントエンド開発のための JavaScript ライブラリです。もともとは Facebook によって開発され、現在は Facebook と Instagram のデベロッパーたちによって維持されており、オープンソースコミュニティからの貢献もあります。

React は、インタラクティブでダイナミックな Web アプリケーションや Web サイトの作成に広く使われており、PayPal や Netflix など の 大手の Web サイトやアプリの開発に採り入れられています。

Reactは、宣言的でコンポーネントベースのアプローチの提供や、JavaScript のパワーの活用、仮想 DOM のような機能によるパフォーマンスの最適化を行うことによって、UI 構築のプロセスをシンプルにします。

React は JavaScript フレームワークの React Native と混同されがちですが、一般的には React ライブラリの React js と呼ばれます。React js と React Native の違いについてはこちらの記事をご覧ください。

React がよく比較されるもの

Reactは、Angular、Vue、Svelte といった他の JavaScript ライブラリやフレームワークとよく比較されます。

Angular は JavaScript のフレームワークです。どちらも動的な Web アプリケーションの構築に使われますが、React はビューレイヤーに焦点を当てたライブラリであり、他のツールとの統合に関してより柔軟性があります。一方、Angular は総合的なフレームワークであり、大規模なアプリケーション構築のための意見構造とツール一式を備えています。

Vue に関しては、コンポーネントベースという点で React と共通するプログレッシブ JavaScript フレームワークです。Vue.js はそのシンプルさゆえに初心者にとってより取り組みやすいと思われがちであり、React はその柔軟性とライブラリやツールのより大きなエコシステムで支持されています。

最後に、Svelte は作業の多くをブラウザからビルドステップにシフトする、Web 開発の新しいアプローチであり、仮想 DOM で動作する React とは違って、作業をコンパイル時にシフトするため、実行時のコードがより小さく、効率的になります。また、React の仮想DOMアプローチは、よく Svelte のコンパイル時アプローチと対比されます。

React の仕組み

React は、UI 構築における効率性と柔軟性に貢献する主要な原則と機能を組み合わせることで機能します。

React の仕組みの概要

その仕組みの概要を以下で見てみましょう：

• 宣言的なビュー ：React は宣言的なアプローチを採用しており、そこでデベロッパーはさまざまな状態やデータに基づいて UI がどのように見えるべきかを記述する。また、基礎となるデータが変更されると、React は影響を受けるコンポーネントのみを効率的に更新してレンダリングするため、開発プロセスがシンプルになり、UX（ユーザーエクスペリエンス）が上がる。
• JavaScript のコードとJSX：React は、最も広く使われているプログラミング言語の１つである JavaScript で書かれている。JavaScript の構文拡張である JSX により、デベロッパーは XML や HTML に似た形式で UI コンポーネントを記述でき、これによって、コードがより読みやすく表現豊かになり、より効率的な開発ワークフローへの貢献になる。
• コンポーネントベースのアーキテクチャ：React のアプリケーションは、コンポーネントベースのアーキテクチャを使って構造化される。コンポーネントは、UI のさまざまな部分を表す、モジュール化された自己完結型のコード単位であり、このモジュール性がコードの再利用性を促すことから、大規模なコードベースの管理と保守がしやすくなる。そして React には、関数コンポーネントとクラスコンポーネントがある。
• コンポーネントの階層的配置：このアーキテクチャの重要な利点の１つは、親と子のコンポーネントの関係にある。React では、コンポーネントを階層的に配置することができ、親となるコンポーネントと、子となるコンポーネントがある。親コンポーネントは、子コンポーネントに共通するロジックや機能をカプセル化することから、構造化され整理されたコードベースが促される。
• 仮想DOM：React は、仮想DOM（Document Object Modelの略）を使って、実際の DOM の操作を最適化する。データが変更されたときに DOM 全体を直接更新するのではなく、React はまず DOM の仮想表現をメモリ上に作成する。その後、実際の DOM を更新する最も効率的な方法を計算することから、ページ全体が再読み込みされる必要性は下がり、パフォーマンスは上がる。
• JavaScript ライブラリの統合：React には、そのオープンソースとしての性質と人気の高さにより、さまざまな JavaScript ライブラリと互換性がある。そのライブラリはコミュニティによって開発されており、さまざまな機能のためにあらかじめ書かれたコードを提供する。このようなライブラリを React のアプリケーションに統合することで、開発の時間と労力の節約になり、それでデベロッパーは既存のソリューションを活用できるようになる。（この記事に、そのライブラリの人気度に基づいた例が書かれている。）

React の作り方

React のデベロッパーは通常、React プロジェクトをセットアップして使いますが、そのプロセスは、React プロジェクトの基本的なセットアップを提供するステップで構成されています。まず、Node.js と npm をインストールして、その後、React アプリを作成します。そしてターミナルかコマンドのプロンプトを開き、create-react-app コマンドを使って新しい React アプリを作成します。そしてこのコマンドが、React アプリの基本構造を持つ my-react-app という新しいディレクトリを作成します。

React の習得には、実際に試してみるのが一番です。以下のコマンドで Node.js と npm をインストールしてみましょう：

npx create-react-app my-react-app

そして、以下のようにして、新しく作成されたプロジェクト ディレクトリに移動します：

cd my-react-app

次のように入力して開発サーバーを起動し、ローカルでアプリをプレビューします：

npm start

プロジェクトの構造をしっかり押さえましょう。主なディレクトリには、src（ソースコード）、 public（静的アセット）、package.json や src/index.js などの各種設定ファイルがあります。また、React アプリケーションはコンポーネントを使って構築されており、src/App.js ファイルを開くと、デフォルトのコンポーネントが表示されます。そしてコンポーネントの構造を定めるには、JavaScript の構文拡張である JSX を使います。

より多くのリソースが必要な場合は、以下の記事をご覧ください： 初めての React アプリ作成ガイド

コンポーネントの追加や編集をコードでする代わりに、UXPin Merge のような UI ビルダーを使って React アプリの UI を構築し、デザインから Stackblitz やその他の開発環境に直接コードをコピーしてデータ構造を設定して、React プロジェクトをデプロイすることができます。

UXPin には、MUI、Bootstrap、Ant design などの React コンポーネントライブラリが組み込まれており、コンポーネントをキャンバスにドロップしてアプリのレイアウトを整えることで機能します。従業員ポータルやポッドキャストアプリなど、自由に使える React 要素を使ってどんなレイアウトでも構築でき、独自の React コンポーネントのライブラリがあれば、それを取り込むこともできます。また、コンポーネントは完全にカスタマイズ可能で機能的なので、デプロイ前にアプリの動作を確認できます。UXPin Merge をぜひ無料でお試しください。

React を使う理由

React は強力な JavaScript ライブラリであり、以下のような説得力のある理由から開発コミュニティに広く採用されています。

• オープンソース：React はオープンソースのライブラリであり、Facebook とInstagram のデベロッパー、そして大規模で活発なコミュニティによって維持されている。このコミュニティでは、React の継続的な改善への貢献や、追加ライブラリ（ステートの管理のための Redux など）の開発、フォーラムやドキュメントを通じてのサポートが施されている。
• 個々のコンポーネントの編集：React は下向きのデータフローに従う、つまり、コンポーネントの変更は、より高い階層のコンポーネントに影響を与えない。これにより、デベロッパーはアプリケーション全体に影響を与えることなく、個々のコンポーネントを編集して更新することができ、それで開発はより効率的になり、メンテナンスはより簡単になる。
• 速くて一貫性のある UI デザイン：React は、単なる美観を超えたリッチな UI 構築に秀でており、そのコンポーネントはビルディングブロックとして機能することから、直感的で視覚的に魅力的な UI を作ることができる。また、各インタラクション、ボタン、ビジュアル要素が綿密に作り込まれてカスタマイズされることで、魅力的な UX が実現する。React は多くのデザインシステムの基盤となっているのである。
• 再利用可能なコンポーネント：一度コンポーネントが作成されれば、同じコードを書き直すことなく、アプリケーションの複数の部分で再利用することができる。これにより、冗長性が減り、コードベースはより簡潔で維持されやすくなる。
• 柔軟性：React は、静的な Web サイトやデスクトップアプリケーションから iOS や Android のモバイルアプリケーションまで、あらゆるものを作成でき、多様なプロジェクトの要件に適応する。そしてこの適応性は、時間をかけて無数のツール、ライブラリ、拡張機能を開発してきた広範なコミュニティによって強化されている。
• 素晴らしいユーザーエクスペリエンス：ページ全体を再読み込みせずに即時更新ができるようになる React の素晴らしい機能で大きな変革がもたらされている。この機能により、例えば Facebook の投稿への「いいね」のアクションでページ全体を更新することなくシームレスに変更が行われるなど、よりスムーズで高速な UX（ユーザー エクスペリエンス）が実現する。
• コミュニティ：React のコミュニティの規模と活動は、その地位がさらに強固なものになっている。例えば Stack Overflow の「React.js」のスレッドでの４６万を超える質問や、JavaScript の広範なサポートにより、デベロッパーは豊富なリソースとソリューションを見つけることができ、それで React はアクセスしやすく、十分にサポートされた技術となっている。

React で構築できるもの

React は、さまざまな React プロジェクトの構築に使える、多用途で広く使われている JavaScript ライブラリです。

React は、ユーザーがアプリを操作すると単一の HTML ページが動的に更新されるシングルページ アプリケーションの作成に適しており、例えば SNS のプラットフォームやプロジェクト管理ツール、リアルタイムコラボレーションアプリなどが挙げられます。

また、React は EC サイトの構築にも使えます。UI を効率的に更新できる React の機能は、この種のプロジェクトに最適であり、例えば 動的な商品リスト、ショッピングカート、シームレスなチェックアウト体験の作成ができます。

UXPin Merge に含まれている事前構築済みの EC テンプレートを見てみると、このテンプレートは、React プロジェクトとして作成できるものの完璧な例となっており、React ショッピングカート、商品ページ、商品リストがあるので、自身のワークフローにサッとコピーできます。

React は、リアルタイム更新が必要なデータダッシュボードの構築に最適です。これは特に、分析ツール、監視システム、社内業務の効率化が必要な BI（ビジネスインテリジェンス）アプリケーションに便利です。

さらに、React はマッピングライブラリと統合して、インタラクティブでダイナミックなマップを作成できます。これは、旅行アプリや位置情報サービスなど、地理的な位置情報を伴うアプリケーションに便利であり、地図や位置情報を利用する天気予報アプリにもピッタリです。

そして UI を効率的に更新できる React の機能は、メッセージアプリ、共同文書編集ツール、学習管理システム（例）、ビデオ会議プラットフォームなど、リアルタイムのコラボレーションが必要なアプリケーションにも有効です。

React コンポーネントを使ってアプリのレイアウトを構築しよう

本記事では、React の仕組みと基本的な機能について見ていき、React コンポーネントを使って何を構築できるかについてお話しました。早速実験したい場合は、UXPin にアクセスして、簡単なアプリのインターフェースを作って React をテストしてみてください。

UXPin の無料トライアルアカウントを設定し、新しいプロジェクトを作成したら、デザイン システムライブラリから MUIv5 ライブラリを選択して（Option + 2 キーを使って開けます）、コンポーネントをキャンバスに移動するだけなのでとても簡単です。

必要なものは何でも構築できます。ドキュメントへのアクセスが必要な場合は、コンポーネントをクリックして右側のリンクをご覧ください。早速 React ベースの UI 第一号を構築しましょう。UXPin Merge をぜひお試しください。

The post React の仕組み appeared first on Studio by UXPin.

2021年、iOSおよびGoogle Playのアプリストアのダウンロード数は約1400億になり、わずか2年で20％の伸びを記録しました。多くの需要に対応している結果ですね！ただ、市場にはさまざまな選択肢があるため、今日のアプリユーザーが求めているのは、単に「正しく動作するアプリ」だけではありません。彼らは、自分たちの具体的で個別のニーズに沿ったUXを求めているのです。

一部のアプリデザイナーが「これ1つで全て賄える」モデルで失敗している中、ユーザーが切望するレベルの「パーソナライゼーション」とアプリの「カスタマイズ」を確実に実現するにはどうすればいいのでしょうか。  

  UXPinは、最終製品のように見えるプロトタイプを簡単にデザインすることができます。その優れた機能により、ユーザーやステークホルダーが実際に操作できるプロトタイプを構築することができ、ユーザーテストもスムーズに行えます。こちらからUXPinを無料でサインアップして、実際にご体験ください。

アプリのパーソナライゼーションとは

  アプリのパーソナライゼーションは、最も基本的なレベルでは「特定のオーディエンスの独自のニーズを満たすアプリを構築するプロセス」であると定義することができます。  

ただし、例えば「色々なオーディエンスがどのようなパーソナライゼーションの要素を求めているかを知る方法は？」や「既存のUXに満足してもらうには？」、「どのアプリのカスタマイズ要素が他の要素よりも重要？」など、それ以上に重要なことがもう少しあります。  

現在、利用可能なツールや分析の数が増え続けているおかげで、最高級のカスタマイズオプションやパーソナライゼーション機能を備えたアプリの開発はしやすくなってきています。

ユーザーが登録後に受け取るフィードバックを充実させたり、予測アルゴリズムを使ってユーザーのモチベーションや興味を引き出したり、アプリのパーソナライゼーションは、創造性と革新的な考え方を必要とするデータ駆動型のアートに進化しているのです。  

アプリのパーソナライゼーションが重要な理由

  モバイルアプリで、圧倒的多数の消費者が求めているものは、ユーザーの履歴や興味、好みに応じて、必要な商品やサービスを提供するアプリ1つです。なのでパーソナライゼーションを誤ると、アプリが台無しになります。  

CX（顧客体験）は、いかに顧客のためにジャーニーをパーソナライズ化できるかによって左右されます。ありきたりで個性のないプロセスは時代遅れで、ユーザーが寄り付かないことが知られている一方で、利便性、簡単さ、効率性を追求したアプリが主役に躍り出ています。

アプリのパーソナライゼーションを促すための興味深いデータが、あらゆる研究や調査事例で指摘されています。５８％の人は、自分のことを覚えてくれている企業に対して、より好感を抱いています。また、３分の２は、ブランドは自分のニーズを伝えなくてもわかっていると期待しており、４分の３近く（７２％）の顧客は、パーソナライズ化されたメッセージを提供するブランドとのみ取引を行いたいと思っています。

企業もそのことに注目しています。マーケティング担当はその先頭に立ち、６０％が自社のコンテンツは広範囲にパーソナライズ化されていると回答しており、2022年では、８４％の企業が、豊富なUX（ユーザーエクスペリエンス）の実現にはパーソナライゼーションが不可欠であると認識しています。  

ユーザーは、自分が重要な存在であり、ネットワーク上の単なる番号以上の存在であると感じたいと思っています。そうなると、ユーザのーエンゲージメントが鍵になり、サインアップや購入に対して単に名前を挙げて感謝する以上のことを行えるようにすることが、モバイルアプリの個別化戦略を正しく行うための秘訣になるのです。

モバイルのパーソナライゼーション、セグメンテーション、カスタマイズ

  モバイルアプリのパーソナライゼーションを効果的に行うためには、まずさまざまなユーザーアプリのセグメントとその役割を理解し、効果的な戦略を策定しなければいけません。  

「パーソナライゼーション」と「カスタマイズ」は同じ意味で使われていますが、違うものです。どちらも、エンゲージメントを高めるためにユーザー体験をどのようにデザインするかという概念ですが、根本的なレベルでは、以下のようにそれぞれ異なる結果をもたらすものなのです。：  

• パーソナライゼーション：ブランドや企業が、データ分析によってデジタル技術やツールを活用して、既存顧客や見込み顧客に対する商品提供やダイレクトメッセージを個別化することであり、顧客に何かが届く前に行われ、ブランドや企業の責任となる。
• カスタマイズ：顧客が自分の好みや要求を入力して、製品やサービスを自分のニーズに合わせて変更できるようにするプロセスであり、リアルタイムで行われるが、ブランドは消費者がそうできるような環境整備が必要。

  以下は、【パーソナライゼーション】と【カスタマイズ】の具体的な例です：  

”ABC ブランドは、全国の店舗でコーヒーを販売しており、ユーザーはアプリで注文することができます。ユーザーが注文時にクリームや砂糖、豆乳、トッピングなどを追加するオプションがあれば、それは「カスタマイズ」と言えるでしょう。一方、アプリを開いたら、あなたが好きなコーヒー３種類、お気に入りの店舗、いつもカフェインを摂取する時間帯がすでに分かっているとあれば、それは「パーソナライゼーション」になります。”

しかし、アプリをパーソナライズ化するのに必要なデータへのアクセス、ひいてはカスタマイズのレベルを確保するためには、まず、誰をターゲットにしているのかの把握が必要です。つまり、ユーザーとアプリのセグメントについて知る必要があるのです。  

「効果的なパーソナライゼーション」と「包括的なカスタマイズ」の両方を実現するには、エンゲージメントを促すUXの提供が前提になります。ただ、その実現にはターゲットとなるオーディエンスを理解する必要がありますが、セグメンテーションでそれが可能になります。  

• ユーザーセグメンテーション：ターゲット市場を、共通の興味やニーズ、嗜好に基づいて、より小さく、より管理しやすい顧客グループに分割（セグメンテーション）するプロセス。

  セグメンテーションには、多くの考慮事項、基準、要素が含まれ、効果的な実行が難しい場合があります。以下のような最も一般的な要素のどれに従って市場をセグメンテーションする際にも、常にアプリのニーズと目的を念頭に置きましょう。  

• デモグラフィック：顧客の年齢、性別、収入レベル、雇用形態、人種などに関連し、それによってブランドは、識別しやすい主要な要素に基づいて、さまざまなグループの人々が何を求めているかが把握できる。
• 地理的位置：人の物理的な位置情報を指し、アプリはこの情報にアクセスし、人々の居住地や勤務地、普段よく過ごす場所を知ることができる。
• 生涯収益：顧客がどれくらいの期間で顧客だったのかを把握することができ、また、これでどのグループが他のグループより多く消費しているかもわかることから、デベロッパーは各グループに異なる影響を与えるUXをデザインすることができる。
• 心理的属性：顧客がどのような人であるかを定義する、顧客自体を表す一部であり、文化的アイデンティティ、世界観、政治的傾向、そして宗教的要素などが含まれる。人がアプリに関連するブランドから何を期待するかで重要な役割を果たす。
• 行動セグメンテーション：市場の人々がどのように行動しているかについての貴重なインサイトを提供。アプリの場合、画面占有時間、直帰率、アプリの保持率、画面上のホットスポットなどを調べ、そのデータは、ユーザーの行動を把握してアプリのパーソナライゼーションを適切に行うのに不可欠である。

心理的属性と行動セグメンテーションは、アプリに関連する消費者情報を提供することに特化しているため、アプリのパーソナライゼーションのUXを追求するデザイナーにとっては欠かせません。デベロッパーは、こういったメトリクスから主要なユーザーのニーズと目標を特定し、モバイルアプリ体験をより効果的にカスタマイズしてパーソナライズ化するといいでしょう。  

モバイルアプリをパーソナライズ化する方法

  どのユーザーグループに焦点を当てるべきかがわかれば、モバイルアプリのデザインとパーソナライゼーション戦略をどのように進めるべきか、よりハッキリしてくるでしょう。  

1. ユーザーセグメントを活用する

  アプリのセグメントをより深く理解する努力をした後は、各セグメントは相応の注意が払われなければいけません。それが、アプリのカスタマイズとパーソナライゼーションの優れた点であり、それぞれにパーソナライズ化された体験を提供することができるのです。  

アプリのROI（投資利益率）と持続力は、すべてのユーザーに最も包括的でやりがいのあるUXを提供できるかどうかに大きく依存します。でもリソースは限られたものであり、そうなると最も収益性の高い貴重な顧客を優先させたいと思うでしょう。そこで、各グループの「ニーズ」と期待される「リターン」をバランスよく満たすパーソナライゼーション戦略に投資するのです。  

2. オンボーディング体験に磨きをかける

  特にアプリでは第一印象が重要なので、ユーザーのオンボーディングに注意を払いましょう。この見落とされがちなモバイルアプリのパーソナライゼーションの要素は、ユーザーの安定的な定着とアプリのエンゲージメント率を高く保つために重要です。  

まず始めにユーザーの名前を聞き（ただし、個人に関わる不必要な質問をしすぎないようにしましょう）、必要に応じてそれを使います。アップグレード機能の無料体験や、アプリ内課金の早期割引を提供し、使い続けるようにふわっと促すことも忘れないようにしましょう。  

3. パーソナライゼーションがうまく反映されたコンテンツを作る

  ここで、モバイルアプリのパーソナライゼーションが重要な役割を果たします。ユーザーのあらゆるニーズに対応するために、アプリと綿密に調査されたデジタルコンテンツをカスタマイズしましょう。そうすると、これまでのやり取りやユーザーの関心事が反映され、ユーザーの要望を先取りするようになっているはずです。

さまざまなアプローチでイノベーションを起こし、基本的なパーソナライズ化と、ユーザーに感動と喜びを与える特性のバランスをとる方法を探しましょう。関連性が重要なので、リサーチとセグメントのデータを有効活用しましょう。  

4. プッシュ通知を有効にする

  プッシュ通知は、アプリがデバイス上で注目されるための方法です。ただし、アプリの「推し」加減や、関連するコンテンツの宣伝には十分注意しましょう。  

モバイルユーザーは、特典、製品のオススメ、ニュースフィードからのハイライトや位置情報、アプリ自体に関連する重要な情報、自分の興味に関する最新情報など、自分に役立つ適切な通知を高く評価することから、そのためには、ユーザーの好みに合わせた通知の調整が重要です。  

5. アプリの枠を超えたパーソナライゼーション

  アプリの枠を超えて、パーソナライズ化されたアプリ体験を実現することができます。それにより、ブランドへのロイヤリティが高まり、効果的なパーソナライゼーションへの取り組みが実証されます。  

アプリの利用状況を把握していることを示すメールマーケティングは、エンゲージメントを復活させるには貴重なチャンスとなります。また、アプリユーザーがアプリを中断した場所から再開できるような通知や、アプリの新機能や製品の提供を思い出させる通知も、パーソナライゼーションの優れた動機付けとなります。  

例えば、Duolingoでは、進捗に応じてユーザーに報酬が与えられ、高度にパーソナライズ化されたメールやリマインダーによって、ユーザーの継続を促しています。  

モバイルのパーソナライゼーションに取り組む最善の方法

  アプリのパーソナライゼーションに取り掛かる前に出発点が必要ですが、プロトタイプは、開発に着手する前にアプリをテスト、改良、完成させるための最も効果的かつ効率的な方法の1つと考えられています（特にパーソナライゼーションの分野ではそうです）。  

UXPinは、インタラクティブなプロトタイプを作成するためのオールインワンのデザインツールで、プロトタイプを使ったユーザーのインタラクションから詳細なユーザーフィードバックを得ることができます。また、1つのスクリーンから別のスクリーンへ共有されるライブデータとユーザーインプットを使ってデザインするのに便利な多くの機能を備えています。  

UXPinのプロトタイプで、顧客にとって最も重要な要素の特定や、顧客が望まない要素の排除、失敗バージョンに貴重な時間と費用を費やすことのないパーソナライゼーション戦略の完成を実現しましょう。UXPinの無料トライアルをぜひお試しください。

The post アプリのパーソナライゼーション – その意味と重要性を解説！ appeared first on Studio by UXPin.

Django と Laravel は、Webアプリケーションの構築に使われる人気のフレームワークであり、それぞれに独自の機能、利点、トレードオフがあります。

Laravel が PHP で作られているのに対し、Django は Pythonを使って作られています。Python は読みやすさとシンプルさで知られており、初心者にとっては多くの場合 Django の方が習得しやすく、対するLaravelはより柔軟で表現力に富んでおり、デベロッパーが思うままにアプリケーションを構成することができます。では、両者を比較してみましょう。

React コンポーネントを使って Laravel や Django アプリケーションの UI を構築しませんか。UXPin Merge で完全にカスタマイズ可能なコードバックされたプロトタイプをデザインし、ワンクリックでデザインからコードをコピーしましょう。UXPin Merge をぜひ無料でお試しください。

Django と Laravel – 定義

Django とは

Django は、クリーンで実用的なデザインを維持しながらWeb開発を加速する、強力なWeb フレームワークです。Django だと、デベロッパーは、そのコード構成とセキュリティのベストプラクティスを促進する豊富なツールと機能により、強固でスケーラブルな Webアプリケーションを効率的に構築できるようになります。

また、Django は、シンプルな Web サイトから複雑なデータ駆動型プラットフォームまで、様々な Webアプリケーションを構築するのに様々な企業や組織、デベロッパーに広く採用されており、著名なユーザーには NASA, Spotify, Pinterest などが挙げられます。

Django は２００３年、エイドリアン・ホロバティ氏と サイモン・ウィルソン氏が、カンザス州ローレンスにある Lawrence Journal-World 新聞社で働いていたときに作りました。このフレームワークは当初、迅速なWeb開発が必須であるニュースルームにおける、速いペースの要件を満たすのに開発されました。

Django 誕生の背景には、以下のような主な目的がありました：

• 開発のスピードアップ： デベロッパーが品質に妥協することなくWebアプリケーションをサッと構築できるハイレベルなフレームワークを提供する。
• 再利用性の確保：再利用可能なコンポーネントを作成することで、コードの繰り返しを防ぎ、ベストプラクティスを推進する。
• セキュリティの維持：セキュリティ機能を統合し、一般的な脆弱性からアプリケーションを保護する。

Django は２００５年７月にオープンソースライセンスの下で公開されたことから、世界中のデベロッパーが利用、貢献、改良できるようになりました。それ以来、Django は大規模で活発なコミュニティに支えられ、強力で広く使われる Web フレームワークに成長しました。また、DSF（Django Software Foundation）は Django の開発と保全のサポートに設立されたことから、 Django の継続的な成長と設立時の原則の遵守が保証されています。

Laravel とは

Laravel は、エレガントな構文と包括的な機能で Web 開発を合理化するのにデザインされた強固な Web フレームワークです。最新のWebアプリケーションの効率的な構築に必要なツールをデベロッパーに提供することから、コード構成、保守性、セキュリティのベストプラクティスが促されます。また、Laravel のモジュラーアーキテクチャと広範なエコシステムにより、ダイナミックでスケーラブルなWebアプリケーションの開発に最適です。

小規模なWebサイトから大規模なエンタープライズソリューションまで、様々なWebアプリケーション向けに多くの企業、組織、デベロッパーによって広く採用されており、著名なユーザーには、BBC、About You（ECストア）、9GAG などが挙げられます。

Laravel は、２０１１年に テイラー・オトウェル氏によって、CodeIgniter のフレームワークにより高度な代替機能を提供する試みとして作られました。オトウェル氏は、当時他の PHP フレームワークにはなかったユーザー認証と認可のビルトインサポートなどのフレームワークを作ることを目指していました。

Laravel 誕生の背景には、以下ような主な目的がありました：

• 開発スピードの向上： デベロッパーがより少ない定型コードでサッと効率的に Webアプリケーションを構築できるフレームワークを提供する。
• エレガンスと可読性の促進： コードベースがクリーンで読みやすく、表現力豊かであることを保証する。
• モジュラーアーキテクチャの確保：フレームワークの拡張とカスタマイズがしやすくなるモジュール構造を提供する。
• セキュリティの向上：強固なセキュリティ機能を統合して、一般的な脆弱性からWebアプリケーションを保護する。

Laravel はオープンソースライセンスの下でリリースされたことから、世界中のデベロッパーはそのフレームワークの使用や貢献、強化ができるようになりました。また Laravel は、開始以来、熱心なコミュニティとパッケージやツールの豊富なエコシステムに支えられ、急速に人気を集めています。Laravel のエコシステムには、Laravel Forge、Laravel Vapor、Laravel Nova などの製品があり、すべてデベロッパーのエクスペリエンス向上や、高品質のWebアプリケーション構築の促進のために設計されています。

Django と Laravel の違い

言語と構文

Django と Laravel の主な違いの一つに、使用するプログラミング言語があります。Django は Python をベースに作られており、読みやすさとシンプルさで知られています。

対する Laravel は、膨大な歴史があり Web開発に広く使われている PHP をベースにしています。PHP は Python に比べて構文が複雑ですが、Laravel のエレガントな構文と表現力豊かなコードで、開発プロセスの効率化が実現できます。

開発スピードと機能

Django は「Batteries included（バッテリー同梱）」の哲学を採用していることから、管理インターフェース、認証シス テム、ORM などの包括的な組み込み機能を提供し、このアプローチは、サードパーティのパッケージや統合の必要性が減ることによって、 開発が加速されます。

それに対し、Laravel も Eloquent ORM、Blade テンプレートエンジン、ビルトイン認証など、豊富な機能をすぐに利用できますが、Laravel はモジュール化されているため、デベロッパーは必要に応じて柔軟にパッケージを選択して統合することができます。

パフォーマンスとスケーラビリティ

パフォーマンスとスケーラビリティは、どんなWebフレームワークにとっても重要な検討事項です。効率的な ORMとPythonの実行速度がある Django は、高トラフィックのアプリケーショ ンや複雑なデータ操作の処理に適しており、効率的なスケーリングや、大規模なワークロードの管理ができるようにデザインされています。

Laravelは多くのアプリケーションで良好なパフォーマンスを発揮しますが、Django と同レベルのパフォーマンスを達成するには、特にトラフィックが非常に多いサイトでは、最適化のためにより多くの労力が必要になるかもしれません。その際、キャッシュ、データベースの最適化、その他のパフォーマンス向上テクニックを適切に使うことで、このような差が軽減されるかもしれません。

エコシステムとコミュニティ

Django と Laravel にはどちらも強力なエコシステムと活発なコミュニティがありますが、その焦点やリソースは異なります。Django は、データサイエンス、ML（機械学習）、科学計算のための強力なライブラリなどの、より広範な Python のエコシステムの恩恵を受けていることから、Web 開発の枠を超えたアプリケーションのための汎用的な選択肢となります。

そして、活気ある PHP コミュニティによってサポートされている Laravel には、Laravel Forge、Vapor、Nova のようなツールによる豊富なエコシステムがあり、それで開発とデプロイがシンプルになります。両フレームワークとも、広範なドキュメントとコミュニティサポートがあることから、開発者はヘルプやリソースを見つけやすくなっています。

セキュリティとベストプラクティス

セキュリティは Web 開発において重要な考慮事項であり、Django も Laravel もベストプラクティスを重視しています。

Django には、SQLインジェクション、XSS、CSRF のような一般的なセキュリティ脆弱性に対する保護機能が内蔵されており、安全なデフォルトを提供することに重点を置いています。Laravel もまた、セキュアなコーディングプラクティスを促進するツールとともに、強固なセキュリティ機能があり、保護機能が内蔵されています。

Django と Laravel のどちらを選択するかは、プロジェクトの特定のセキュリティニーズと、デベロッパーが Python や PHP でのセキュリティ対策の実装に馴染みがあるかどうかで決まります。

Django の方が Laravel よりいいのか？

スケーラビリティ、セキュリティ、迅速な開発を優先し、Python に馴染みがあるなり習得の意欲があれば、Django を選択し、PHP を好み、エレガントで表現力豊かな構文を重視して、Laravel の豊富なエコシステムとツールを活用したい場合は、Laravel を選択してください。

最終的には、どちらのフレームワークも強固でスケーラブルなWebアプリケーションを構築することができるので、どちらがいいかは、自身の特定のニーズと既存の専門知識によりけりです。

Django の利点

• 迅速な開発： Django の 「Batteries included（バッテリー同梱）」のアプローチには、管理パネル、認証、 ORM などの多くの機能が内蔵されており、開発のスピードが上がる。
• セキュリティ：Django はセキュリティを重視しており、一般的な Web 脆弱性に対する保護機能がフレームワークに内蔵されている。
• スケーラビリティ： 高トラフィックのサイトを効率的に処理するようにデザインされているため、大規模なアプリケーションに適している。
• 読みやすいコード： Python の可読性と Django のクリーンなアーキテクチャで、アプリケーションの保全とスケーリングがしやすくなる。
• コミュニティとドキュメント： Django には広範なドキュメントがあり、大規模で活発なコミュニティがあるので、初心者デベロッパーにとっては非常に便利。

Laravel の利点

• エレガントな構文： Laravel にはクリーンで表現力豊かな構文があることから、コードの記述と保全がしやすくなる。
• 豊富なエコシステム： Laravel Nova、Laravel Forge、Laravel Vapor など、開発とデプロイの効率化のための幅広いパッケージやツールが含まれている。
• Blade テンプレートエンジン： Laravel の Blade テンプレートエンジンは、パワフルで使いやすく、ダイナミックな Web ページを作成できる。
• 認証と認可： 認証と認可のサポートが内蔵されていることから、ユーザーアクセスの管理がしやすくなる。
• Eloquent ORM： 直感的で強力な ORM システムにより、データベースとのやり取りがシンプルになる。

Django の欠点

• 独断的な構造： Django の独断的な性質は、その慣習から逸脱したい場合に、柔軟性が制限される可能性がある。
• テンプレートエンジン： Django のテンプレートエンジンは強力だが、デベロッパーによっては Blade ほど柔軟ではない可能性がある。

Laravel の欠点

• パフォーマンス： Laravel には、オーバーヘッドが増える可能性のある機能が最初から多く搭載されている。これらの機能で開発スピードと手軽さが上がるが、適切に管理されなければパフォーマンスに影響を与える可能性がある。
• 学習曲線： PHP と Laravel の規約は、言語に馴染みのないない人にとっては習得しにくい可能性がある。

２０２４年に Laravel と Django のどちらを習得すべきか

２０２４年に Laravel と Django のどちらを習得すべきかは、どのようなプロジェクトを目指すかによって変わってきます。Laravel がベースにしているPHPは、最も広く使われているプログラミング言語の１つであり、Laravel は最もよく使われているPHPフレームワークの１つです。このことは、特に Web開発の仕事において、就職の好機につながる可能性があります。

対する Djangoは、自動化スクリプトやデータ分析ツールなど、Web開発以外にも様々な用途で利用されていることから、Pythonのスキルが幅広く活かされます。

結局のところ、どちらのフレームワークも強力で有能なので、可能であれば両方を使いこなすことで、より多才で、需要のあるデベロッパーになれるでしょう。

Django や Laravel アプリのレイアウトを構築しよう

Django も Laravel も、UXPin Mergeでサッと構築できる React アプリケーションの優れたバックエンドとして機能します。Reactコンポーネントをドラッグ＆ドロップして、StackBlitz で開いたり、他の IDE にコピーしたりできる、完全に機能するレイアウトを作成しませんか。UXPin Merge をぜひ無料でお試しください。

The post Django と Laravel – どちらが２０２４年のおすすめバックエンドか 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.

ペースト＆置換

この機能を使うと、要素をクリップボードにコピーし、キーの組み合わせでキャンバス上にある要素と入れ替えることができます。要素を削除して代わりに別の要素を貼り付けるのではなく、「Ctrl（コマンド）＋C」でコンポーネント、画像、図形などをコピーし、「Ctrl（コマンド）＋V」キーの組み合わせで別の要素の場所に貼り付けます。また、コード化されたコンポーネントにも使えます。

新しいキャンバスサイズの使用

ユーザーは、Figma のようなアートボードではなく、キャンバスを使って作業しますが、新しいプロジェクトを開始するとき、デスクトップアプリケーションであれ、デザイン目的に合わせてキャンバスの調整が必要です。その際、右側のプロパティパネルでそれができます。

（iPhone 15 Maxのような）デバイスフレームに対応した新しいキャンバスプリセットが追加されました。また、それぞれの新しいキャンバスサイズに対応するデバイスフレームも用意されています。

グリッドスタイルの設定

UI デザインやデザインシステムにおけるグリッドは、ページ上のコンテンツを整理するのに使われる構造的なフレームワークであることから、さまざまなデバイスやスクリーンサイズ間での一貫性とアラインメントが保証されます。

グリッドは、UI（ユーザーインターフェース）のレイアウトにおいて基礎的な要素として機能し、デザイナーはバランスが取れて整理された、美しいデザインを作成することができるようになります。

UXPin では、定義済みのグリッドを設定し、デザインシステムライブラリに追加できるようになりました。つまり、標準のグリッドスタイルを設定することでプロジェクトで使い回すことができます。

「</>Get Code（コードを取得）」のボタンでスペックにアクセス

エディタの右隅に 「</>Get Code（コードを取得）」という新しいボタンが追加されたことにお気づきかもしれません。このボタンで、クリック一つで製品のインターフェースを構築するのに必要な仕様をすべて見つけることかができる「Spec（スペック）モード」に、これまで以上に速く行くことができます。

UXPin では、さまざまな仕様が用意されています（詳しくはドキュメントをご覧ください）：

• レッドライン
• グリッド
• スタイルガイド
• キャンバスサイズ
• カラー
• タイポグラフィ
• アセット
• CSSコード
• 依存関係を含む JSX コード

プロジェクトグループのユーザー管理

これで、アカウント所有者と管理者は、プライベートグループも含めて、アカウントに作成されたすべてのプロジェクトグループを見ることができ、プライベートグループを所有していたメンバーがチームから削除されると、所有権は自動的にアカウント所有者または管理者に移ります。

この機能は、Advancedプラン、Enterpriseプラン、および Mergeのユーザーにアクセス要求に応じて提供しています。

Merge コンポーネント向けフレックスボックス

Flexbox は、コンテナ内のアイテムをレイアウト、整列、スペース配分する効率的な方法を提供する CSS のレイアウトモデルで、レスポンシブで動的なレイアウトを作成する際に特に便利です。

自動レイアウトのように機能する、コード化されたコンポーネント用の Flexbox が追加されました。右のパネルとコンテキストメニューにあり、これで位置合わせ、配置、要素間のギャップの設定、レスポンシブにコンポーネントを調整するのが簡単にできます。

ユーザビリティの向上

また、以下のような使い勝手の調整も追加されました：

• エディタでのパネル管理 – より柔軟性を持たせるために、パネルの使用方法が微調整されており、「Pages & Layers（ページとレイヤー）」と「Design System Library（デザインシステムライブラリ）」のパネルを同時に開くことができる。
• ネストしたコンポーネントの選択 – 「Get Code（コードを取得）」モードで、「Command/Ctrl」キーを押しながら、検査したいネストしたコンポーネントをクリックする。これで、「Layers（レイヤー）」のパネルを通して各コンポーネントを選択するという従来の方法と比べて、より速く１つ一つのコンポーネントを確認することができる。

ロードマップに追加する新機能の提案

UXPin では、常に改善し、ユーザーの体験をより良いものにしたいと考えています。素晴らしいアイデアや UXPin 製品に搭載してほしい機能がありましたら、ぜひお聞かせください。

皆様からのフィードバックは私たちにとって非常に重要です。小さな微調整でも、大きな追加でも、皆さんのご意見が UXPin の未来を形作る一助となります。しばらくUXPin をお使いでない場合は、無料トライアルをぜひご体験ください。

The post ２０２４年８月の製品 アップデート appeared first on Studio by UXPin.

デザイン会社のIDEOによれば、持続可能な長期的成長や成功する製品の特徴として、有用性（Desirability）、持続可能性（Viability）、実現可能性（Feasibility）が必ずあるといいます。

 デザイン思考 のプロセスでは、最も顧客の役に立つ製品や機能性を決めるために、リサーチ、つまり「デザインレビュー」を行います。このデザインレビューがうまくいけば、競合他社が解決していない問題を特定することができ、エンドユーザーとビジネスの双方に利益をもたらすでしょう。

しかし、デザインレビューは何から始めるべきでしょうか？競合における自社の強みはどうやって見つけるのでしょうか？そして、ユーザーや組織のために実行可能なビジネスモデルかはそのように判断するのでしょう？

本記事では、 デザイン思考 を概念化する段階でのリサーチと、以下３つの重要な基準を満たすアイデアを発掘する方法について見ていきます：

• 有用性（Desirability）
• 持続可能性（Viability）
• 実現可能性（Feasibility）

UXPinは、顧客に最高のユーザー体験を提供するための、高度なエンドツーエンドのデザイン、プロトタイピング、テストツールです。無料トライアルにサインアップして、UXPinでUXワークフローとデジタル製品デザインがどのように強化されるかをぜひお試しください。

デザインにおける有用性、持続可能性、実現可能性とは

有用性、持続可能性、実現可能性とは、アイデア、コンセプト、仮説を検証し、独自の価値提案（UVP （Unique Value Proposition）とも言う）があるかどうか、それを追求する価値があるかどうかを判断する デザイン思考 の方法論です。

この３つをすべてクリアしないと、リスクやコスト、失敗の可能性が高まってしまいます。有用性、持続可能性、実現可能性は、アイデアのリスク分析手法であり、イノベーションの芯の部分を見つけるためのツールキットであるとも言えるでしょう。

この方法論を適用することで、デザインコンセプトの弱点を突き止め、さらなるリサーチを重ねたり、アイデアを破棄して次のステップに進むことができるのです。

この方法論の由来

世界的なデザイン会社である IDEO は、２０００年代前半にアイデアをテストする方法として、『有用性』、『持続可能性』、『実現可能性』という デザイン思考 の手法を概念化しました。

IDEOは、最高のアイデアは、この３つの条件が満たされたときに成功すると考えました。逆を言えば、「素晴らしいアイデア」は、これら３つの基準のうち１つでも欠けているとうまくいかないことが多いのです。

では、この３つのレンズを通して、これらの３要素がどのように組み合わされているのかをみてみましょう。

有用性

デザイナーがまずチェックしないといけないのは、有用性 です。もし製品アイデアに市場価値がなく、誰もそれを欲しがらない、必要としないのであれば、それは売れませんよね。

また、有用性を調査することで、その商品が「欲しいもの」なのか「要るもの」なのかがわかります。

例えば、以下のようになります：

• 徒歩、公共交通機関、車、相乗りなどでの通勤が必要。
• 車通勤は便利で公共交通機関よりも快適かもしれないから、車通勤したい。

要るものとは、顧客にとってなくてはならないものであり、欲しい物とは、そのニーズを満たすための、より望ましい選択肢であることが多いです。どちらも「有用性」を満たすものですが、「欲しい」や「あったらいいな」よりも、「必要」という欲求を満たすものの方が、はるかに価値があります。

有用性のある製品を見つけるには、顧客を調査して、満たすことのできるペインポイント（「欲しいもの」と「必要なもの」）を特定しないといけません。

• 製品で問題が解決される人がいるか
• 競合他社は解決策を提示しているか
• もっといい考えはあるか
• そのアイデアは何がユニークなのか、なぜ競合他社ではなくそのアイデアを選ぶ人がいるのか
• その製品でエンドユーザーはどう思うか
• その製品は、使った人が誰かに話したくなるような有用性があるか
• その製品は、一度使ったら一生手放せないようなものか

有用性を調査する場合、そのアイデアをストレステストして、修正すべきギャップを見つけるという意図があります。ギャップが埋まれば埋まるほど製品は強くなり、ステークホルダーからの厳しい質問や顧客満足度にも耐えられるようになるのです。

持続可能性

持続可能性とは、その製品がビジネスとして成立しているかどうかを示すものです。たとえ世界で最も有用性のある製品があるとしても、それが高すぎたり、利益が出なかったりすれば、それは良いビジネスモデルとは言えませんからね。

本当に持続可能な製品アイデアは、短期的にも将来的にもビジネスとして意味があり、投資に対するプラスのリターンをより早く、より長く提供できるほど、デザインアイデアの持続可能性は高くなります。

持続可能性の素晴らしい例として、いかにしてコカ・コーラが１８８６年に生み出した飲料が、今でも世界で最も消費されている飲料の 1 つであり続けられるのかが挙げられます。その初期投資は、発明者に莫大な富をもたらし、１３５年以上経った今でも株主に信じられないほどの利益をもたらしていますよね。

また、持続可能性は、社会的、環境的なインパクト、つまりデザインの倫理的な側面も重要です。そのデジタル製品は、社会にとってプラスの利益をもたらしますか？例えば２０２１年に、フェイスブックの内部告発者フランシス・ハウゲン氏は、SNS 大手の内部調査で、インスタグラムが１０代の少女たちの不安や鬱、自殺願望を生み出していることを示す文書を公開しました。

Instagramは短期的には高い経済的リターンをもたらすかもしれませんが、このティーンエイジャーへの害は長期的に持続し得るものでしょうか。また、政府はFacebook や Instagram を規制するために何ができるのでしょうか？

Facebookは、社会的な論争、罰金、訴訟を克服するためのリソースを持つ巨大企業ですが、小さな会社やスタートアップ企業は、同じような圧力に直面した場合、ほとんどが折れてしまうでしょう。

そのため、持続可能性を検討する際には、事業、顧客、社会に対する価値の提供が必要であり、以下のようなことを検討してみるといいかもしれません：

• このデザインが成立するには何が必要か
• デザインを機能する製品にするには、どのような費用がかかるか
• 新製品や新機能を構築するための設備投資はあるか
• 価格モデルはどうなっているか、また、そのビジネスは利益を上げられるか
• ROI（投資対効果）が出るまでどのくらい時間がかかるか
• その製品はサステナブルか
• その製品は社会にどのような影響を与えるか

なお、持続可能性は有用性と同様に、その製品が確実に実行可能で持続可能であるようにするために、アイデアの調査、分析、ストレステストが求められます。

実現可能性

実現可能性は、現在のリソースに注目し、予測可能な将来において製品を開発する能力があるかどうかを判断します。そしてデザイナーは、その製品がビジネスにどのような影響を与えるかを考慮しないといけません。

実現可能な要因としては、以下のようなものがあります：

• 技術的な制約
• 財務上の制約
• 製品がブランディング、マーケティング、カスタマーサポートなどに与える影響
• 想定される市場投入までの時間
• 運営能力

理想的には、利用可能なリソースを用いて、会社の現在の能力の範囲内で新製品や機能をデザインしたいものです。新製品をサポートするためにインフラを構築しないといけないとなると、リスクとコストが増加しますからね。

新製品や新機能をデザインする際に考慮したい実現可能性に関する質問として、以下のようなものが挙げられます：

• 現在のデザイン体制で、新製品を開発するための部品が揃っているか
• デザイン・開発にかかる時間はどれくらいか
• 新製品の構築や拡張に十分なプロダクトデザイナー、UX デザイナー、エンジニアがいるか？
• 技術的な制約は新しいデザインに対応できるか
• 組織は新しい人材の採用が必要か
• 組織の能力を拡張する必要がある場合、それが将来の製品にどのような利益をもたらすのか
• その製品はブランドにどのような影響を与えるのか
• 製品のリリースは、マーケティング、セールス、カスタマーサポートなど、組織の他の分野に影響を与えるか？また、そのような部門はより多くの仕事をこなす能力があるか

デザインレビューにおける「有用性、持続可能性および実現可能性」の使用

組織は、「インフラ、マーケティング、販売、カスタマーサポートなどのコストを伴う開発を行う前にデザインやプロトタイプの問題点を特定する」という目的のもと、製品デザインの初期段階でデザインレビューを実施し、特定の基準に照らしてデザインを評価します。

基本的には、組織は製品デザインの有用性、持続可能性、実現可能性を知りたいと考えています。

UXデザインレビューのテンプレートのご紹介

「有用性、持続可能性、実現可能性」の デザイン思考 の方法論を適用することで、ステークホルダーに包括的かつ客観的なデザインレビューを提示するためのインサイトとデータを得ることができます。

以下は、ステークホルダーが読みやすく、理解しやすいように、デザインレビューの説明する際に使用できるストラクチャーまたはテンプレートです。

問題：問題は簡潔に述べましょう。デザインチームとビジネスチームは、この土台から共通の理解を深めていきますからね。

システム（現状）： 問題のコンテクストを理解するために、現在のシステムがどのように機能しているかを示しましょう（既存の製品であれば）。その後、あなたの提案する経験によって、システムがどのように機能するかを示すといいでしょう。

JBTD（ジョブ理論）： デザインレビューでは、何が顧客のモチベーションを高めるのかについて、共通の理解を持つことが重要です。Tony Ulwick氏はJBTDを「市場、顧客、ユーザーニーズ、競合他社、顧客セグメントを異なる角度から観察することでイノベーションをより予測しやすく、収益性の高いものにする。」であると定義しており、これによって、顧客がソリューションをどのように「採用」または「不採用」にするかの決定方法をステークホルダーが理解するために役立ちます。

事業目的： 顧客の問題解決におけるビジネス価値とROI を述べましょう。

把握すべきメトリクス： 測定しないものは改善できません。このメトリクスによって、新製品のデザインによって生み出されるビジネスと顧客の価値を定量化できるはずです。

提案された体験： 提案内容を文章でまとめ、明確で理解しやすいものにしましょう。その場にいる人たちは、その提案があなたが以前に明確にした問題とどのように関連しているのかを理解しないといけませんからね。

提案の意味合い：その提案がビジネスの他の部分にどのような影響を与えるか、もしかしたらわからないかもしれません。製品デザインの初期段階でそれを理解するのは、有用性、持続可能性、実現可能性のバランスを取るのに重要です。

基本的なエクスペリエンスデザイン： ワイヤーフレーム、モックアップ、プロトタイプ、またはMVP（最小実行可能製品）を提示して、顧客が製品をどのように望ましいと感じるかをステークホルダーがイメージできるようにしましょう。

デザインに反映されるインサイト：このデザインを選択した理由は何でしたか？インサイトや仮説などは何でしたか？いくつかの項目を箇条書きにして思考の深さを示しましょう。

新デザインに関する仮説：

• 新しいデザインについての仮説とは
• どのようにしてこの仮説にたどり着いたのか
• この仮説を、重要だと思われるメトリクスとどのように整合させることができるか

このような仮説は、明確でテスト可能なものであるべきです。明確な合格・不合格のメトリクスでテストを行うことで、この仮説は、少しずつ前進していることを測るための強力な基礎となるはずです。

チームの協調性を重視： ステークホルダーからどのような意見が必要か？デザインレビューのテンプレートのこのセクションによって、製品の成功の鍵を握るステークホルダーのために、明確なコンテクストと焦点を設定できます。

UXPinにあるデザインライブラリを使って、忠実度の高いプロトタイプやMVP を手短に構築し、デザインレビューの際にステークホルダーに提示することができます。無料トライアルにサインアップして、早速 UXPinプロトタイプ第１号を作成しましょう！

The post デザイン思考 における「有用性、持続可能性、実現可能性」とは appeared first on Studio by UXPin.

Angular、React、Vue は、Web やモバイルアプリの開発に広く使われるフレームワークやライブラリで、それぞれに特徴があります。開発者の間では、どれが優れているかについての議論が絶えませんが、共通点としてコンポーネントベースのアプローチで効率的にUIを構築できる点が挙げられます。どれも、迅速な開発とスケーラビリティを提供し、Webやモバイルアプリ開発において重要な選択肢となっています。

Angular、React、Vueは同じではなく、Angularは事前構築機能が豊富で、Reactは最小限、Vueはその中間です。UIデベロッパーがどのフレームワークを学ぶべきか迷っている場合、この比較記事が役立つでしょう。

新しいアプリ開発では、UXPinがプロトタイプ作成に最適です。Merge技術を使うことで、Reactコンポーネントを簡単に取り込み、1日以内に高忠実度なプロトタイプを構築し、ユーザビリティテストが可能です。 詳細はこちら。

市場の人気と需要 

それぞれの技術には、特定のプロジェクトにどのようにアプローチし、どのように処理するかに関して、それぞれに目的があります。

Angular、React、Vueにはそれぞれ異なるプロジェクトへのアプローチ方法があり、Angularは大規模なエンタープライズ向けに適したフレームワークです。一方、VueとReactもコンポーネントベースで企業やスタートアップ向けに柔軟に対応できます。

雇用市場ではReactとAngularが人気ですが、Vueも大手企業に採用されつつあり、需要が増加しています。

コミュニティおよびエコシステム

フレームワークを選ぶ際には、活発なコミュニティと開発が重要で、これにより成長と安定したエコシステムが形成されます。取り上げたフレームワークはどれも多くのデベロッパーに利用され、活発に開発・メンテナンスされており、助け合いながら知識を共有する環境が整っています。

Angular のエコシステム

React のエコシステム

２０１３年に Facebook によって開発された React は、比較リストの中で2番目に古いフレームワークであり、開発以来、React の人気は急上昇し、大きなコミュニティが形成されています。

Reactは、エコシステムの成熟度やコンポーネントの可用性、コミュニティ面でAngularやVueより優れているかもしれません。また、Git や UXPin など他のプラットフォームやツールとも統合が可能です。

Vue のエコシステム

２０１４年に開発された Vue は、他の２つのフレームワークと比較すると最も歴史が浅いですが、人気は大幅に伸びています。

データバインディングに関しては、Vue でデベロッパーは多くのことがしやすくなりました。ただ Vue を使ってモバイル アプリや Web アプリの開発を速めるには、エコシステム内で最も広く使われているオープンソース プロジェクトを使って、入力コンポーネントを活用できるようにする必要があります。

使いやすさ

Angular、React、Vue の複雑さ、構文、そしてどれが一番習得しやすいかを見てみましょう。

構文

構文やコードの好みは個人差があり、パフォーマンスには影響しません。習得の難易度では、Reactが最も簡単で、Angularが最も難しいです。

AngularはTypeScriptを使うため追加の学習が必要で、VueはJavaScriptを主に使用し、TypeScriptもサポートしていますが、構文がシンプルで学びやすいです。

VueはHTMLとJavaScriptを混在させず、新人やUIデベロッパーにとって理解しやすいフレームワークです。

前述したように、Web開発とUI開発の両面で最も習得しやすいのはReact です。

コンポーネント

コンポーネントについて話すとき、その使用の背後には、コードを再利用して開発プロセスを高速化するという大前提があります。これは、Angular、React、Vue などのオープンソースのコンポーネントベースのライブラリにおいて最も重要な側面だからです。

React

コンポーネントは React のビルディングブロックと考えることができます。コンポーネントで、コードの一部の再利用や、動作の変更、入力プロパティを使って Web ページの一部を別の方法でレンダリングしたりすることができますからね。

さらに、貴重なオブジェクトの属性データを格納する「プロップ」と呼ばれるオブジェクトと相性がよく、あるコンポーネントから別のコンポーネントにデータを渡す機能もあります。

とはいえ、Reactコンポーネントは、コンポーネント間のコンポジションやコードの再利用という点で、実に強力です。

Angular

Angularはコンポーネントベースのフレームワークで、コンポーネント（ディレクティブ）はテンプレートを使って基本パラメータを決定します。これにより、ディレクティブやコンポーネントにはテンプレート内でメタデータのような動作パラメータが含まれます。プロジェクトで最良の体験を得るには、AngularでTypeScriptを使うことが推奨されます。

Vue

高度にカスタマイズ可能なコンポーネントベースのプログレッシブフレームワークであるため、完璧なコンポーネントの動作で、驚くほどモダンで直感的な UI システムを作成できます。また、Vue は View コンポーネントがベースになっています。

React、Angular で最適なのは？

最も広く使われている JavaScript フレームワークの３者を比較すると、３つとも非常に活発な開発が行われているため、UI開発に関しては「これが絶対一番」というのはありません。

ただし、コミュニティやエコシステム、構文、使いやすさ、コンポーネントなど、これまで取り上げてきた多くの側面から、自身が取り組みたいプロジェクトや所属しようとしているチームの両方に基づいてどれが一番か選ぶべきです。

React と Angular の違い

まとめると、React と Angular の違いは以下のようになります：

• アーキテクチャ：React は UI コンポーネントを構築するための JavaScript ライブラリであり、Angular は双方向データバインディングや依存性注入などの機能を提供する包括的なフレームワークである。
• 言語： React は主に JavaScript（またはJSX）を使い、Angular では JavaScript のスーパーセットである TypeScript を使う。
• 構文： React はコンポーネントの確定に JSX を使い、Angular は Angular 固有の構文を持つ HTML テンプレートを使う。
• データバインディング： React は主に一方通行のデータフローを使うが、Angular は一方通行と双方向のデータバインディングの両方に対応している。
• サイズとパフォーマンス： React のコアライブラリは小さく、バンドルサイズをよりコントロールできる一方、Angular のフレームワークにはすぐに使える機能が多く含まれているため、バンドルサイズが大きくなる可能性がある。
• 習得のしやすさ：React は API サーフェスが小さいため、デベロッパーが学習しやすいのに対し、Angular はその包括的な性質と追加の概念により、習得が難しい。
• コミュニティとエコシステム： React にも Angular にも、活気あるコミュニティと、Web 開発をサポートするライブラリやツールの広範なエコシステムがある。

React と Vue の違い

以下で React と Vue.js をざっと比較してみましょう：

• アーキテクチャ：React はUIコンポーネント開発に焦点を当てた JavaScript ライブラリであるが、Vue.js は UI を構築するための進歩的なフレームワークであり、すぐに使い始めることができる、より構造化されたアプローチを提供する。
• 言語： React は主に JavaScript（またはJSX）を使い、Vue.js は JavaScript と JSX の両方に対応しているが、公式ドキュメントではコンセプトを示すためにプレーンな JavaScript を使うことが多い。
• 構文： React はコンポーネントの確定に JSX を使うが、Vue.js は HTML によく似たテンプレート構文を使うため、HTML に慣れたデベロッパーにとってより馴染みがある。
• データバインディング： React は主に一方通行のデータフローを使うが、Vue.jsは一方通行と双方向のデータバインディングの両方に対応することにより、コンポーネントデータの管理に柔軟性がもたらされる。
• サイズとパフォーマンス： React のコアライブラリは比較的小さく、それによって効率的なバンドルが可能である。一方、Vue.js のコアサイズはやや大きいが、すばらしいパフォーマンスの最適化とバンドルサイズの柔軟性がある。
• 習得しやすさ：React は API サーフェスが小さいため、デベロッパーが理解しやすくなっている。対する Vue.js は 習得しやすいことで知られており、初心者にも経験豊富なデベロッパーにも同様に適している。
• コミュニティとエコシステム： React と Vue.js にはどちらも活発なコミュニティと広範なエコシステムがある。React のエコシステムはより大規模で成熟している傾向があり、Vue.js のエコシステムはシンプルさと柔軟性にフォーカスして急速に成長している。

コンポーネントをデザインエディターにプッシュする

The post Angular と React と Vue – 使うべきフレームワーク 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.

デザインシステムとは、製品の一貫性のある、ブランドのイメージに合ったインターフェースを構築するのに使われるコンポーネント、ルール、スタイルガイド、ドキュメントのセットです。大抵のブランドは独自のデザインシステムを構築していますが、その中で本記事では、そこから多くを学ぶことができる最も一般的なデザインシステムを９つ挙げてみました。ちなみにそのデザインシステムおよびその他のデザインシステムは、Adele というデザインシステムレポジトリで見つかります。

UXPin Merge でデザインシステムの導入とガバナンスを強化しませんか。デザインシステムからインタラクティブコンポーネントをすべてエディタに取り込んで、完全にインタラクティブなプロトタイプを作成し、デザインの一貫性を保ちましょう。UXPin Merge の詳細を読む。

デザインシステムとは

デザインシステムとは、プロダクトチームがアプリ、Web サイト、EC ストア、その他開発が必要な UI デザインの UI（ユーザーインターフェース）を構築するのに使うすべてのデザインリソースの集合体です。

デザインシステムはデザイナーだけのものではなく、デベロッパー向けのものでもあり、必要なフロントエンドコードとドキュメント、デザインガイドライン、関連プラグイン、デザインパターン、スタイルガイド、再利用可能なコンポーネント、ルールとガイドライン、その他 Web デザインと開発ワークフローに役立つ構成要素がすべて含まれた、コードスニペットと開発リソースがすべて含まれています。

このようなデザインシステムは、オンラインの Web サイトとしてホストされて一般に公開されることもあれば（オープンソースのデザインシステム）、ブランド内部で使われることもあります。

そしてデザイン システムは、適用可能な手順や例、プロダクトデザインやコーディングのガイドライン、UI キットの一部などがすべて揃った貴重なドキュメントとして機能する膨大なデータライブラリと考えることができます。

このように、デザインシステムに関連するプロダクトデザインのコンセプトはたくさんあります。デザインシステムとパターンライブラリ、コンポーネントライブラリ、UI キットの違いを知りたい方は、以下のの記事をご覧ください：デザインシステム、パターンライブラリ、スタイルガイド、コンポーネントライブラリの違い

企業が独自のデザインシステムを構築する理由

Shopify、Google、AirBnB などの企業は、以下のような理由から独自のデザイン システムを構築しています：

• 一貫性 – デザイン システムは、デザインと開発の「信頼できる唯一の情報源（Single source of truth）」として機能する。
• 透明性 – デベロッパーは、デザイン上の決定の解釈をする必要なく、デザインシステムのコンポーネントを直接使用できる。
• スケール – デザイナーはプロトタイプをより速く構築し、デベロッパーへの引き継ぎを効率化できる。
• 再利用性 – デザインシステムにより、組織内で共有できる一貫したコンポーネントがあるプロトタイプの作成が促される。
• 明確さ – デザインシステムで、デザイン上の決定が共有された知識に基づいて行われるようになり、それでチーム メンバーが理解しやすく、効果的に貢献しやすくなる。

デザインシステムから学ぶこと

デザインシステムの大半は、むしろ一般的なデザインパターンに従っています。

そしてシステムは、多くの場合はデザイン、コード、言語、コンポーネントなどの主要なカテゴリーを備えたトップナビゲーションを特徴とします。

このようなメインカテゴリには、より詳細な説明があるサブカテゴリがそれぞれあり、アトミックデザインの構造を最大限に活用しています。たとえば、そのサブカテゴリには、タイポグラフィ、色、フォーム、バナーなどがあります。

この直感的なナビゲーションに従うことで、デザインに関するベストプラクティスに関する貴重な情報を得ることができます。

デザインシステムを作成するメリット

適切に構築されたデザインシステムを導入することで、企業はチームワークを大幅に改善して、意思決定プロセスを効率化できますが、デザインシステムの作成で得られるのはそれだけではありません。

このようなガイドライン、要素、データの集まりにより、デザイナーとデベロッパー間のコミュニケーションの問題が最小限に抑えられ、潜在的な UX デザインのバグや UX 負債の発生の余地が最小限に抑えられます。

さらに、このようなリファレンスが豊富なライブラリーがあることで、プロトタイプから実際の製品になるまでに必要な時間が大幅に短縮されます。

例えば、PayPal は Fluent UI を Merge のテクノロジーと共に使っています。これにより、インタラクティブなコンポーネントを UXPin ライブラリに組み込むことができ、そうすることで、デザイナーもプロダクトチームのメンバーも、このコンポーネントに簡単にアクセスし、何度も繰り返しデザインすることができます。

デザインシステムはデザイナーとデベロッパーの間の繋がりが絶たれるのを最小限にする素晴らしい方法ですが、それだけではまだ理想的なソリューションではありません。Merge テクノロジーの革新のおかげで、製品チームのメンバーは同じツールを手軽に使って、DesignOps のワークフロープロセスを改善することができます。つまり、デベロッパーとデザイナーの両方が１つのソースから同じ UI 要素にアクセスして使えるということです。

デザインシステムの課題と解決策

企業がデザインシステムを作ろうとしても、特に要素や文書、コードをすべて管理する際に、特定の問題や一貫性の断絶が起こる可能性があります。

主要なデザインリーダーの１つである Johnson & Johnson社 から、デザイン システムの課題とソリューションについて詳しく学びましょう。当社のウェビナーでは、J&J チームによってベストプラクティスがすべて紹介されました。

例１：ポルシェのデザインシステム

ポルシェのデザインシステムは、その包括的できちんと文書化された高水準のアプローチにより、デザインと実装に対する模範的なモデルとなっており、一流の Web アプリケーションを作成しようとするすべての人にとって貴重な参考資料となっています。

ポルシェのデザインシステムは、視覚的に魅力的で高品質な Web アプリケーションを作成するのに非常に重要なデザインの基礎と要素を提供するという点で際立っています。その主な強みの１つは、Figma 用のピクセルベースのライブラリと、UXPin でコード化されたライブラリにあり、それでデジタルクリエイターのデザインプロセスが効率化されます。さらに、デザインシステムにはコード化された Web コンポーネントと詳細な使用ガイドラインが含まれていることから、デザイン同様にスムーズで一貫性のある実装が保証されます。

このシステムは、ポルシェの厳格な品質基準と企業デザインの原則に忠実であることで真に際立っています。各コンポーネントは入念に製造、テストされ、美しさだけでなく機能的な信頼性も保証されており、このような総合的なアプローチによって、最終製品の美しさと堅牢性が保証され、尊敬を集めるポルシェのブランドが反映されるのです。

例２：Google のマテリアルデザインシステム

最もよく使われているデザインシステムのひとつに、Google のマテリアルデザインがあります。Google は、デザインとデザインの原則について知っておくべきあらゆる事柄について細部まで踏み込んだマテリアル デザイン システムを作成して公開しました。マテリアルデザインのコンポーネントは UXPin のライブラリの１つであるため、UXPin ユーザーであれば誰でも簡単に使うことができます。

そしてユーザーは、このシステムのおかげでさまざまなデバイスやプラットフォーム、入力方法にわたって UI と UX を完全に統一する貴重な情報を得ることができます。

マテリアル デザインによって、他のブランドや個人は、アトミックデザイン、業界のイノベーション、独自のブランド表現に対する独自のアプローチを構築するための強力な基盤を持つことができます。

以下は、Google のマテリアルデザインシステムの主な特徴です：

• スターターキット
• デザインソースファイル
• マテリアルのテーマ設定
• レイアウト
• タイポグラフィ
• 色
• コンポーネント
• モバイルガイドライン

Google のマテリアルデザインシステムは非常に成熟しているように見え、多くのデザインガイドラインがありますが、開発で使われる UI コンポーネントに関する文書も含まれています。そしてそのようなコンポーネントがデザインでも使えることをご存知ですか？UXPin Merge のテクノロジーで、デベロッパーのコンポーネントをデザインに活用しましょう。UXPin Merge へのアクセスリクエストはこちら。

例３：Apple のヒューマンインターフェースガイドライン

Apple にはトップクラスのデザインシステムがあります。それは ヒューマンインターフェイースガイドラインと呼ばれるもので、Web デザインのエッセンスやパターンライブラリ、ダウンロード可能なテンプレートなど、膨大でかなり貴重なデザインシステムのリソースを提示しています。そして iOS の UI キットライブラリも UXPin アカウントで利用可能です。

このシステムは、スティーブ・ジョブズ氏の以下のデザイン原則に従っています：

• 細部までこだわって精密に作り上げる
• UX（ユーザーエクスペリエンス）とユーザーとのつながりを重視する。
• より大きなスケールで本当に重要なことに集中する
• 具体的なデザイン言語と実践により、ユーザーの反応を求める
• 初心者から上級者まで、ハイテクが持つ親しみやすい側面を活かす
• すべてをシンプルにする

Apple のデザインシステムの特徴

Apple のヒューマンインターフェースガイドラインは、iOS、macOS、vOS、watchOS のデザイナーとデベロッパーの両方のための実用的なリソース、ビジュアルガイドライン、スタイルガイドで構成されています。

それには、以下の使用方法に関するデザインシステムのドキュメントが含まれています：

• メニュー
• ボタン
• アイコンと画像
• フィールドとラベル
• ウィンドウとビュー
• タッチバー
• インジケータ
• セレクタ
• 拡張機能
• ビジュアルデザイン
• ビジュアルインデックス
• アプリのアーキテクチャ
• システム機能
• ユーザーインタラクション
• テーマ

例 ４：Atlassian のデザインシステム

Atlassian のデザインシステムは最高峰のひとつであり、連携をシームレスかつ簡単にすることで、世界中のチームに価値ある支援を提供することに重点を置いています。また、Atlassian のデザインガイドラインも UXPin のライブラリコレクションの一部です。

Atlassian のデザイン哲学は、デジタルエクスペリエンスを活用してチームと個々のチームメンバーの生産性と全体的な可能性を上げることであり、それは世界的に使われているコラボレーションツールである Trello と Jira に完璧に反映されています。

とはいえ、Atlassianのデザインシステムは、プロジェクト内の各ステップでのアジャイルな実践と効率的な追跡を特徴とし、最終的に製品の提供と開発において貴重な成果を生み出します。

Atlassian のデザインシステムの特徴

Atlassianのデザインシステムには以下が含まれます：

• UI コンポーネント
• ブランド価値
• UI キット
• UI パターン
• デザイントークン
• イラストレーションライブラリ
• コンテンツのガイドライン

例５：Uber のデザインシステム

Uber によれば、動きはチャンスを呼び起こすものであり、それで彼らのデザインシステムが構成されているらしいです。

結局のところ、Uber のサービスは、配車サービス、乗り合い、フードデリバリー、スクーターや電動自転車を含むマイクロモビリティなど、「移動」が基本となっています。

サブブランドから社内ブランド、製品からプログラムに至るまで、この種のサービスが完璧に機能するために、Uber には世界と共有する効果的なデザインシステムが必要です。

Uber のデザインシステムの特徴

以下は、Uber のデザインシステムの主な特徴です：

• ブランドアーキテクチャ
• コンポジション
• 声のトーン
• モーション
• イラストレーション
• 写真
• アイコノグラフィ
• 色
• ロゴ
• タイポグラフィ

例６：Shopify のデザインシステム Polaris

Shopify はグローバルな EC プラットフォームであり、ブランドのビジネスの運営や成長に必要なあらゆるものが一箇所で提供されています。

彼らのデザイン理念が、より良い、より利用しやすい商業体験を生み出すことに重点を置いているのも納得です。

Polaris という Shopify の公開デザインシステムには、同社の中核となる以下のような価値観が反映されています：

• ユーザーを思いやり、配慮する
• やろうとすることを達成するための適切なツールを提供する。
• ブランドイメージに合った最高レベルの職人技を楽しむ
• 早くて正確なソリューションを提供することで、手間を最小限に抑える
• 常にユーザーの信頼を築く
• ユーザーに安心して使ってもらう

Polaris デザインシステムには、Shopify のプラットフォーム用のデザインについてのわかりやすく実践的なスタイルガイドがあり、UI コンポーネント、ビジュアルエレメント、コンテンツ、デザイン言語を活用し、より良い UX（ユーザーエクスペリエンス）と製品全般を生み出すための膨大な知識ベースを提供します。

Shopify のデザインシステムの特徴

Shopify のデザインシステムである Polaris には、上記の実践に忠実に従った主な機能が以下のように含まれています：

• データの可視化
• アクセシビリティ
• インタラクションのステート
• 色
• タイポグラフィ
• アイコン
• イラスト
• スペーシング
• 音
• リソース

例７：IBM のカーボンデザインシステム

IBM は、大企業の IT のニーズに応えることで、世界規模で事業を展開しています。

そのサービスは、ビジネスコンサルティング、資金調達、ソフトウェア開発、ITホスティング／管理から、「ソフトウェアからハードウェアへ」の製品まで多岐にわたります。

IBM の核となる信念は、科学、理性、知性を活用することで、人間の状態、社会、ブランドのいずれであれ、絶え間ない進歩を遂げることにあります。

IBM によれば、いいデザインは単なる要件ではなく、ユーザーに対する実際の責任であるらしいです。

IBM のデザインシステムの特徴

Carbon デザインシステム は、Adobe、Axure、Sketch のデザイナーやデベロッパー向けのツールやビジュアルリソースが以下のように豊富に提供されています：

• データの可視化
• パターン
• コンポーネント
• ガイドライン
• チュートリアル

UXPin のユーザーだと、自分のアカウントで Carbon から必要なものがすべて見つかります。

例８：Mailchimp のデザインシステム

Mailchimp は、メールマーケティングのリーダーとして有名だった時代から、メールだけにとどまらないオールインワンのマーケティングプラットフォームを提供するまでになりました。

Mailchimp の明確な目標は、ブランドアイデンティティとイメージを忠実に守りながら、中小企業の成長を支援するという一点です。

Mailchimp のデザインシステムの特徴

それが、Mailchimp のデザインシステムと、クリエイティブな表現、より良い UX、最高の品質に焦点を当てたその主な機能を作り上げた多くの理由のひとつでもあります：

• データの可視化
• グリッドシステム
• 色
• タイポグラフィ
• コンポーネント

例９：Salesforce Lightning のデザインシステム

Salesforce は、統合されたクラウドベースの CRM（顧客関係管理）ソフトウェアを通じて、ユーザーに個別化されたエクスペリエンスを提供するために全力を尽くしています。

Salesforce の CRM の目的は、マーケティング、Eコマース、IT、サービス、営業活動の改善であり、ユーザーも自身で同じことができます。

Salesforce のデザイン哲学は、ハワイ語で「意図的な家族」を意味する「オハナ」に反映されており、同社の活動と全体的な文化を推進する以下の４つの中核的な価値観があります：

• イノベーション
• 平等
• 信頼
• カスタマーサクセス

Salesforce のデザインシステムの特徴

Salesforce は、コンテンツ管理システムに携わる人が誰でも以下のような主要な機能を学んで恩恵を受けることができる、独自の Lightning デザインシステムを発表しました：

• デザインガイドライン
• プラットフォーム
• アクセシビリティ
• コンポーネント（多数）

ちなみに、Lightning のコンポーネントは UXPin アカウントライブラリにも含まれています。

デザインシステムを最大限に活用する：UXPin Merge のやり方

Merge tech は、デザインチームと開発チームの間にコミュニケーションギャップがある場合によく起こる一般的な課題に対する適切なソリューションとして作成されました。なので、さまざまな UI コンポーネント、コーディング、ドキュメントの不一致が生じ、製品の効率やメンテナンスに影響を及ぼすことがあります。

正しい方向への第一歩として、必要なコンポーネントをすべて整理するデザイン システムを使って、Merge はその UI 要素をすべてデザイン エディタに直接取り込んでくれます。

矛盾を避けることで時間と費用を節約できるだけでなく、当初思い描いていたものとまったく同じ最終製品を見る喜びも得られます。

Merge tech は、コードコンポーネントによるデザイン、つまりコードコンポーネントをデザインに変換することに重点を置いており、その点で、デザイナーは最終製品の視覚的な側面だけに基づいて（必要なインタラクションのフェイクだけ作りながら）単純にプロトタイプを作成するのではなく、すでにコード化されたコンポーネントを使ってプロトタイプのイメージをデザインできます。

そしてデザインチームは、すでにコード化されたコンポーネントを UXPin のエディタと同期させ、新しいデザインを作成するのに必要なコンポーネントをドラッグ＆ドロップできるため、デザインチームと開発チームの間を行ったり来たりする必要はありません。

基本的に、デザイナーはインタラクションのフェイクを作ったり、追加したり、適切な色を探したりする必要はありません。

その一方で、デベロッパーはプロトタイプのプレビューを入手し、利用可能なプロダクションレディの要素で作業を続けることができます。

どのデザインシステムの例がお好きですか？

デザインシステムは、デザイン作業の最適化や改善を行い、チーム間の一貫性を促すことを目的とした、大量の UI コンポーネントとガイドラインで構成されています。

ただし、デザインシステムのメンテナンスや実装が不十分であれば、そのシステムは、多くの不便で混乱しやすいコードスニペット、ライブラリ、コンポーネントに過ぎなくなる可能性があります。

デザインシステムで、デザイナーがより複雑な UX の問題に対処できるようになる一方で、チームメンバーの一貫性を早く促すことができます。さらに、画期的な Merge のテクノロジーをミックスに加えることで、デザインシステムの編成を次のレベルに引き上げることができます。UXPin Merge の詳細はこちら。

The post ２０２４年のおすすめデザインシステム９例 appeared first on Studio by UXPin.

UXデザインプロセスは、製品のUX（ユーザーエクスペリエンス）をデザインするうえで必要な「体系的、反復的、構造化」された一連のアクションです。 これによって、チームは再現しやすいプロトコルに従って、組織の品質基準を満たしながら製品を提供できるようになります。

デベロッパーがアプリを構築するのと同じUIコンポーネントを使ってプロトタイプを構築することで、デザインプロセスのスピードを上げませんか。 厳しい納期を守り、高品質の製品をリリースしましょう。詳細は UXPin Mergeのページをぜひご覧ください。

UX デザインとは

UX (ユーザー エクスペリエンス ）デザインとは、人間の問題を解決するためのデジタル製品のデザイン方法論であり、 この人間中心のデザインアプローチによって、デザインチームは仮定ではなくユーザーのニーズに基づいた意思決定を行うことができます。

この人間中心のアプローチの中核となるのは「共感」であり、UX デザイナーは「ユーザーがデジタル製品を使って達成したいこと」と、「その過程で遭遇する可能性のあるペインポイント（問題点）」を理解しないといけません。

UX デザインプロセスとは

UX デザインプロセスは、UXデザインチームがプロジェクトを完了するのに使う反復的な段階的な方法論であり、デザイン思考プロセスから派生したものです。 デザイン思考のプロセスと同様に、UX デザイナー時間をかけてユーザーに共感し、ビジネスや背景について学び、問題の範囲を確定します。

UXデザインプロセス と デザイン思考プロセス の違いとは

デザイン思考プロセスは、人間の問題に対するユーザー中心のソリューションを開発するための５段階のプロセスです。対する UXデザインプロセスは、UXプロジェクトを実現するためのデザイン思考を組み込んだ、多段階のエンドツーエンドの方法論です。

企業は UXデザインプロセスはデザイン思考の原則を基にしていますが、手順や方法は若干異なる可能性があります。

UX デザインプロセスが重要な理由

企業が UX デザイン プロセスを標準化するのには、以下のような理由があります：

• プロジェクトが確実に品質と一貫性の基準を満たしているようにする
• デザイナーが偏見や思い込みを持たずにソリューションをデザインできるようにする
• デザイナーが多くのアイデアをテストおよび反復して、最適なソリューションを見つけることができるようになる
• チームや部門間の連携を促す
• 設定されたプロトコルに従うことで手戻りのリスクを軽減する
• ステークホルダーがプロジェクトの進捗状況を追跡できるようにする
• 隠れたリスクと機会を特定する

UX デザインプロセスの７ステップとは

一般的な UXデザインプロセスには、製品の目標の確定からデザインハンドオフ、すべてが想定通りに動作することの確認まで、７つのステップがあります。

ステップ 1: プロジェクトと範囲の確定

UX デザインプロセスの最初のステップでは、複数の部門のチーム メンバーとステークホルダー (通常は以下の部門の代表者で構成) とともにプロジェクトの目標と範囲を確定します：

• ビジネス – プロジェクトのビジネス要件と目標について説明する。
• デザイン – デザインの前に何をする必要があるかを伝え、プロジェクトに期待されることを管理する。
• 製品 – コンテクストを共有し、デザインに必要なタイムラインとリソースの計画を支援する。
• 技術 – UXデザインの実現可能性と技術的制約を確定する。

この初期のデザインフェーズは、新しい製品や機能が解決しなければいけない問題を特定することを目的としています。製品チームは、プロジェクトの範囲、計画、成果物、納期についても概説します。

ステップ 2: UXリサーチの実行

次に、デザイナーは問題を調査して、考えられる解決策を探します。 そしてこのリサーチ段階では、UX デザイナーは次のようなタイプのリサーチを実施します。

• ユーザー調査：潜在的なユーザーを調査して、ユーザーが誰であるか、何を必要としているか、どのようなコンテキストで操作しているかを理解する。 また、ユーザーのニーズを調査したり机上調査を行ったりするために、フォーカス グループを招待する場合があり、 UX リサーチの結果は、ユーザーペルソナやユーザージャーニーマップなどがある。
• 市場調査：市場を分析して、市場の細分化と製品の差別化を決定する
• 競合調査：競合他社が同様の問題をどのように解決し、機会を特定するかを理解するための競合分析。
• 製品調査：既存の製品からのインサイトとアナリティクスを分析して、ユーザーの行動を理解する。

ステップ 3: ソリューションの下書きを作成する

ユーザー、市場、競争環境を明確に理解した上で、デザイナーは、ソリューションがどのようなものになるかについての初期の下書きを作成すべくブレインストーミングのセッションを実行でき、これは、多くの場合「アイデア出しの段階」と呼ばれます。そしてデザイナーは、初期のビジュアル デザイン計画中に紙とペンを使うことも、デジタル UX ツールに直接移行する場合もあります。

低忠実度の手法には、以下のようなものがあります。

• スケッチ：UIの手描きのスケッチ
• ペーパープロトタイプ：プロトタイプの紙バージョン
• ワイヤーフレーム：基本的な線と形状を特徴とする紙のプロトタイプのデジタル バージョン
• 低忠実度のプロトタイプ: ワイヤーフレームを使ってユーザーフローと情報アーキテクチャをテストするデジタル プロトタイプ

また、チームは、デザインスプリントを使って、ステークホルダーや他のチーム メンバーと特定の問題を解決することもあります。

ステップ 4: 高忠実度のモックアップとプロトタイプをデザインする

次に、UIデザイン チームはワイヤーフレームをモックアップに変換し、最終製品と同様の外観と機能を備えた忠実度の高いプロトタイプを構築します。 企業にデザインシステムがある場合、デザイナーは UIコンポーネントライブラリを使ってインタラクティブなプロトタイプを構築します。

ステップ 5: ユーザビリティテストを実施する

高忠実度プロトタイプの主な目的はユーザビリティテストであり、UX デザイナーは、以下の目的でそのプロトタイプを実際のユーザーでテストします：

• アイデアの検証
• ユーザビリティの問題の特定
• アクセシビリティのテスト

ステップ ２〜５は反復可能であり、デザイナーはテスト結果を使って、ステージ ２または３に戻り、有用性、実行可能性、実現可能性の基準を満たすソリューションが見つかるまでアイデアを繰り返します。

ユーザーテストは第５段階ですが、デザインチームはUXデザインプロセス全体を通して複数のテストを実施し、アイデアや仮説を検証することに注意することが重要です。 そしてこのようなテストには、チームメンバーとの内部テスト、またはフィードバックのためにアイデアやプロトタイプをステークホルダーと共有することが含まれます。

ステップ 6: デザインハンドオフを手配する

UXデザインプロセスの最後から ２番目の段階はデザインハンドオフです。ここでは、デザインチームが最終デザインとそのドキュメントを開発チームに引き渡し、エンジニアリング プロセスを開始します。

デザインハンドオフは UXプロセスの終盤に近いですが、デザイナーとエンジニアの連携は、デザインが技術的な制約を満たしていることを確認しながら、デザインから開発への移行を効率化するためのアイデア作成中に始まります。そして彼らの連携は、やり取りがしやすくなる色々なツールを通じて促されます。

関連記事：デザイナーとデベロッパーの連携をダメにする5つの間違い

ステップ 7: 製品を起動する

UXデザインプロセスの最終段階は、新しいリリースの起動と明確な検査です。 新しいリリースがプロジェクトのビジネス目標、UX、アクセシビリティ要件を満たしていることを確認する時期が来ました。

いいUXデザインプロセスのベスト プラクティス

UXデザインプロセスはすべての組織、プロジェクト、チームで同じではありませんが、プロセスを効率化するためにデザイナーが従うことができるベスト プラクティスがいくつかあります。

ユーザー中心の思考を適用する

デザイナーは、デザインが確実にユーザーのニーズを満たすものであるようにするために、デザイン決定の中心にエンドユーザーを置かないといけません。 そしてこの人間中心の考え方により、無関係なコンポーネントや機能のコストを削りながら、ユーザーが望む製品を提供できます。

共感を実践する

ユーザー中心の考え方を維持する方法の 1 つに、ユーザーへの共感があります。しかし、デザイナーがUXデザインプロセスを進めていくと、ユーザーを重視することから、見栄えは良くても特定のユーザーニーズには応えられない機能のデザインに移ってしまうことがあります。

なので、UXデザインプロセス全体を通じて共感を実践することで、デザイナーはユーザーのペインポイントの解決に集中できるようになります。

デザインシステムを構築する

デザインシステムは、組織全体の一貫性と整合性を強化しつつ、市場投入までの時間を大幅に短縮できます。 デザインシステムを最初から構築する余裕がない場合は、MUIや Bootstrapなどのテーマ対応のオープンソース コンポーネントライブラリの使用を検討しましょう。

ちなみに、UXPinには、マテリアルデザインUI、Bootstrap、iOS、Foundationなどのデザインライブラリが組み込まれているため、デザイン チームはモックアップやプロトタイプをサッと作成できます。

デザイナーが開発コンポーネントの完全に機能するプロトタイプを構築できるように、UXPinのデザインエディタをコンポーネントライブラリに連携するツールであるUXPin Merge を使ってプロトタイプを次のレベルに引き上げましょう。

デベロッパーとの連絡および連携

UXデザインプロセスを成功させるには、連絡と連携が非常に重要であり、 デザイナーは他のデザイン チームとつながり、エンジニア、ビジネス マネージャー、製品チーム、ステークホルダーとオープンなコミュニケーションをとらないといけません。

DesignOpsで、他の時間のかかる運用タスクや管理タスクを効率化しながら、より良い連携と連絡が促されます。

UXPinによるUXデザインプロセスの強化

UXプロセスを成功させるには、デザインチームが変更の追加や迅速な反復ができるようにするツールが必要であり、 UXPinは、エンドツーエンドのデザインソリューションであり、デザイナーは UX デザインプロセスのあらゆる段階での機能を得られます。

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

デザイナーは、UXPin のビルトインデザイン ライブラリの 1 つを使うか、デベロッパーのコンポーネントライブラリをインポートして、すぐにプロトタイプを開始できます。 UXPinはコードベースであるため、プロトタイプは画像ベースのデザインツールよりも忠実度が高く、機能が豊富です。

高品質のユーザーテスト

コードベースのプロトタイプで、UXデザイナーは正確でより包括的なテストを実行できます。テストの品質が上がると、最終製品に反映されるエラーやユーザビリティの問題が少なくなります。

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

UXデザインの反復プロセスでは、ステークホルダーのフィードバックが非常に重要です。 プロトタイプが直感的でないと、ステークホルダーは賛同と資金調達に影響を与える可能性のあるデザインコンセプトを理解するのが大変になりますからね。

UXPin を使っているかどうかに関係なく、プロトタイプは他の一般的なデザインツールよりもはるかに高い忠実度と対話性を備えています。 その結果、デザイナーはステークホルダーから有意義で実用的なフィードバックを得ることができるのです。

UXデザインプロセスをレベルアップしよう

UXPin Mergeを使うと、デザイナーはテスト中にデザインハンドオフを効率化しながら、より良い結果を得ることができるため、市場投入までの時間とコストが削減されます。

そしてデザイナーは、ゼロからデザインするのではなく、コンポーネントをドラッグ ＆ドロップして、最終製品のように見えて動作する、完全に機能するコードベースのプロトタイプを構築できます。詳細は UXPin Mergeのページを是非ご覧ください。

The post UX デザインプロセス – 実用的な７ステップ ガイド appeared first on Studio by UXPin.

MUI によって開発・保全されている Material UI は、Googleのマテリアルデザインのガイドラインを実装した人気の Reactコンポーネントライブラリであり、ボタン、カード、メニュー、フォーム要素、事前定義済みのスタイル、テーマなど、再利用可能でカスタマイズ可能なコンポーネントの包括的なセットがあります。

このライブラリは、UI（ユーザーインターフェース）を構築するためのモジュール式で構造化されたアプローチを促進することから、デベロッパーは視覚的に一貫性のあるレスポンシブなデザインを作成できるようになります。Material UI を使うことで、デベロッパーはフロントエンド開発プロセスを効率化し、直感的で視覚的に魅力的な Web アプリケーションを提供することができるのです。

Material UI の Reactコンポーネントを使えば、ピクセルをコードに変換することなく、デザインのプロトタイプやテストができます。UXPin Merge の無料お試しで、プロトタイプ作成がいかにスムーズになるかをぜひご覧ください。

１．Ant Design

おすすめの用途：Web アプリケーション、クロスプラットフォーム アプリケーション、ネイティブ アプリ

Ant Design ライブラリは、Ant Design によって開発された包括的な UI コンポーネントライブラリであり、高品質なアプリケーションの構築のための、再利用可能で十分にドキュメント化された幅広いコンポーネントを提供します。Ant Design は、自身のシステムの原則に従って、使いやすさとアクセシビリティを重視した、クリーンでミニマリストなデザイン美学を重視しています。

また、このライブラリには、国際化サポート、テーマ設定機能、レスポンシブ・デザインなどの強力な機能が備わっていることから、プロフェッショナルでユーザーに使いやすいインターフェースを作成するデベロッパーの間で広く使われています。

そしてデベロッパーは、フォーム、テーブル、ナビゲーションメニューなどの豊富なコンポーネントコレクションを活用することで、一貫性のある視覚的に魅力的なインターフェイスをサッと作成することができます。

Ant Design システムには、モバイルとチャート用のライブラリもあり、それで製品チームは、さまざまなクロスプラットフォームアプリケーションのためのコンポーネントとパターンの包括的なセットを得ることができます。

２．React-Bootstrap

おすすめの用途：Web アプリケーション

React-Bootstrap は、React でレスポンシブ Web アプリケーションを構築するのに広く使われている React UI ライブラリであり、React のコンポーネントベースのアーキテクチャのパワーと、Bootstrap の柔軟性とスタイリング機能を組み合わせることで、デザイン済みでカスタマイズ可能なコンポーネントの包括的なセットを提供します。

また、React-Bootstrap は、ボタン、フォーム、モーダル、ナビゲーションメニューなど、さまざまな UI要素を提供することから、デベロッパーは視覚的に魅力的で機能的なインターフェースを速やかに作成することができます。

React-Bootstrap の詳細なドキュメントと活発なコミュニティサポートによって、再利用可能で十分にテストされたコンポーネントがもたらされることから、Web開発がシンプルになり、それでデベロッパーは強固で使いやすいアプリケーションの構築に集中できるようになります。

３．Fluent UI

おすすめの用途：Web アプリケーション、iOS および Android アプリケーション、ネイティブアプリ、クロスプラットフォームアプリケーション

Fluent UIは、Microsoft が開発した強固で包括的なデザイン システムであり、クロスプラットフォーム アプリやモバイル アプリを構築するための再利用可能なコンポーネントとスタイル オプションを提供します。このライブラリは Fluent  Designの原則に従い、明快さやコンテンツの優先順位付け、スムーズなアニメーションに重点を置いています。

Fluent UI はさまざまなプラットフォームやデバイスにわたって一貫性のある統合されたエクスペリエンスを提供することから、多くのクロスプラットフォームおよびモバイルプロジェクトに適しています。

また、広範なドキュメントと活発なコミュニティにより、チームは Microsoft のデザイン言語に沿った直感的でアクセシブルなUIを構築することができるようになります。ボタンやフォームから複雑なデータグリッドやチャートに至るまで、Fluent UIを使うことでユーザー中心の楽しい体験を提供するために必要なツールを得られるのです。

Material UI と Fluent UI の違いについて：Webアプリケーション – Fluent UIとMUI【 デザイナーが比較】

４．Carbon Design System

おすすめの用途：Webアプリケーション、iOSおよび Androidアプリケーション、ネイティブアプリ、クロスプラットフォームアプリケーション

IBMのデザイン哲学の原則に基づいて構築された Carbonは、シンプルさや明快さ、目的に応じたインタラクションに重点が置かれており、ボタンやフォームからデータビジュアライゼーションやアイコンまで、さまざまなコンポーネントが提供されていることから、デザイナーやデベロッパーは直感的で視覚的に魅力的なインターフェースを作成することができます。

モジュール式で柔軟なアーキテクチャを採用した Carbon Design System は、再利用性と拡張性を促進し、大規模なエンタープライズアプリケーションから小規模なプロジェクトまで対応します。また、このシステムのドキュメントとリソースにより、チームはデザインの一貫性の維持や、連携の効率化ができるようになります。

５．Tailwind CSS

おすすめの用途：Webアプリケーション

Tailwind CSSのライブラリで、デベロッパーはユーティリティ優先の CSS フレームワークを使ってカスタムUIを速やかに構築できます。事前定義されたユーティリティクラスの包括的なセットが提供されているため、カスタム CSS スタイルの記述が必要ないのです。

このライブラリは React、Vue、HTML に対応しており、デベロッパーは、これらのユーティリティクラスを HTML 要素に簡単に適用することができることから、UIコンポーネントの外観や動作をきめ細かく制御できます。

Tailwind CSS は、スタイル設定に対するモジュール式のアプローチを推進しており、デベロッパーはクラスを組み合わせて、ユニークでレスポンシブなデザインを作成することができます。また、Tailwind CSS にはレイアウト、タイポグラフィ、色、スペーシングなどのユーティリティがあることから、デベロッパーは最小限の労力で一貫性のある視覚的に魅力的なインターフェイスを作成することができます。

６．Semantic UI

おすすめの用途：Webアプリケーション

Semantic UI は、UI作成のためのセマンティックで直感的なコンポーネントを幅広く提供する、汎用性の高いフロントエンドフレームワークであり、ボタン、フォーム、メニュー、カード、モーダルなどの Web アプリケーションのためにあらかじめデザインされた UI 要素の包括的なコレクションを提供します。

フレームワークは自然言語の命名規則に従っていることから、ユーザーに使いやすくわかりやすいものになっており、デベロッパーは、Semantic UI の豊富な CSS クラスセットを活用して、視覚的に魅力的でレスポンシブなデザインをサッと構築できます。また、このライブラリは React、Meteor、Ember、Angular のフロントエンドフレームワークに対応しています。

Semantic UI はテーマ設定とカスタマイズに対応しており、デベロッパーはプロジェクトのブランディングに合わせて UI コンポーネントの外観をカスタマイズすることができます。Semantic UI は、その直感的なシンタックスと詳細なドキュメントにより、モダンな Web インターフェースのデザインと開発のための貴重なツールとなっています。

７．Foundation

おすすめの用途：Web アプリケーション、メール テンプレート、ランディング ページ

Foundation は、モダンでモバイルフレンドリーな Web サイトを構築するための CSS と JavaScript コンポーネントを備えたレスポンシブなフロントエンドフレームワークです。モジュール式のアプローチで包括的なツールキットを提供するため、デベロッパーは特定のプロジェクトの要件に合わせてデザインをカスタマイズして調整することができます。

デベロッパーは、さまざまな画面サイズにシームレスに適応するレスポンシブグリッド、ナビゲーションメニュー、フォーム、ボタン、その他のUI要素を難なく作成できます。また、このフレームワークには、インタラクティブな機能とスムーズなアニメーションを実現する強力な JavaScriptライブラリも含まれています。

また、Foundationの豊富なドキュメントと活発なコミュニティサポートにより、デベロッパーは視覚的に魅力的で高機能なWebインターフェースを作成できるようになります。

８．Chakra UI

おすすめの用途：Web アプリケーション

Chakra UI は、UI開発を効率化するためのモダンでアクセスしやすい React コンポーネントライブラリであり、React、Next.js、Meteor、Gatsby などのフレームワークに対応しています。

このプロジェクトはナイジェリアの セグン・アデバヨ 氏によって設立され、アフリカ発の最も著名なオープンソース コンポーネント ライブラリの１つとなっています。

Chakra UIは、あらかじめデザインされたコンポーネントとユーティリティ機能を提供していることから、デベロッパーは、視覚的に魅力的でレスポンシブな Web サイトを作成できるようになります。またデベロッパーは、ボタン、フォーム、カード、ナビゲーション要素などの Chakra UI のカスタマイズ可能で再利用可能なコンポーネントを活用して、直感的でアクセスしやすい UI をデザインすることができます。

さらに、このライブラリは WCAG 標準に準拠することでアクセシビリティにも重点を置いていることから、作成されたインターフェースがハンディキャップのある人でも使用できることが保証されます。Chakra UI のシンプルさ、柔軟性、強固なドキュメントによって、効率的で視覚的に美しい React アプリケーションを構築したいデベロッパーの間で人気の選択肢となっています。

９．Bulma

おすすめの用途：Webアプリケーション、ランディングページ

Bulma は Flexbox をベースとした軽量でモダンな CSS フレームワークであり、柔軟でレスポンシブなグリッドシステムと、すぐに使える UI コンポーネントのセットを提供します。そしてこのフレームワークの直感的なクラス命名規則は、早くて効率的なスタイリングに対応し、モジュラーアーキテクチャはスケーラビリティとカスタマイズを保証します。

Bulma はそのシンプルさ、豊富なドキュメント、コミュニティによるサポートによって、あらゆる規模のプロジェクトで人気のある選択肢となっており、ランディングページ、ダッシュボード、ECサイトのいずれを構築する場合でも、Bulma で美しく機能的なインターフェースを構築するための強固な基盤が得られます。

１０．Styled Components

おすすめの用途：Webアプリケーション、ランディングページ

Styled Componentsは、デベロッパーがタグ付きテンプレートリテラルを使って JavaScript コードに直接 CSS を記述することができる、人気のJavaScriptライブラリです。また、スタイルをコンポーネント内にカプセル化する方法を提供することから、より保守性と再利用性が高まります。

Styled Components は React のエコシステムで広く使われており、人気の UI フレームワークやライブラリとのシームレスな統合を提供します。また、デベロッパーは、コンポーネントのプロップやステートにアクセスする機能などの JavaScript のパワーを活用することで、ダイナミックでレスポンシブなスタイルを作成できます。そしてこのライブラリには、CSS-in-JS、自動ベンダープレフィックス、テーマ管理のサポートなど、多くの機能が備わっています。

１１．PrimeReact

おすすめの用途：Webアプリケーション、ランディング ページ

PrimeReact は React アプリケーションのための包括的な UI コンポーネントライブラリで、すぐに使えるコンポーネントと高度な機能があります。そして、ボタン、入力、テーブル、モーダル、チャートなど、さまざまなデジタル製品向けの幅広い UI 要素を提供します。

PrimeReact はレスポンシブデザインを採用しており、コンポーネントがさまざまな画面サイズやデバイスに適応します。また、このライブラリにはデータバインディング、フィルタリング、ソート、ページネーションなどの強力な機能があることから、データ集約的なアプリケーションの構築に適しています。

PrimeReact の事前構築済みコンポーネントと機能を活用することで、デベロッパーは時間と労力を節約でき、開発サイクルの短縮とユーザー体験の向上を実現できるようになります。また、ライブラリは定期的に更新されることから、最新の React バージョンとの互換性が確保され、継続的なサポートとバグ修正がもたらされます。

UXPinの「Code-to-Design」手法による高品質なプロトタイプ

UXPin Merge のテクノロジーで、製品チームは、デザイナーがコード コンポーネントを使ってプロトタイプの作成やテストをすることができるように、これらをはじめとするオープンソースのデザインシステムを UXPin のデザイン エディターにインポートすることができます。

最終製品の開発に使うのと同じコンポーネントをデザインプロセスで使いませんか。ユーザーテストとデベロッパー向けに没入型のプロトタイプ エクスペリエンスを構築することで、コンセプトを反復して改善するための有意義なフィードバックを得られます。初期段階のデザインから開発、最終製品まで、製品開発環境全体で「信頼できる唯一の情報源（Single source of truth）」を共有しましょう。UXPin Merge をぜひ無料でお試しください。

The post Material UI のおすすめ代替品１１選 appeared first on Studio by UXPin.

モバイルアプリの競争は熾烈で、何百万ものデジタル製品が世間の限りある注目を集めようと競い合っています。そして多くの製品開発チームにとって、アプリのエンゲージメントを上げるのは最優先事項であり、ユーザーを維持し楽しませる革新的な方法を常に模索しています。

UX デザイナーは、様々なデザインと心理テクニックを駆使して、アプリのユーザーを惹きつけるのに非常に重要な役割を担っています。また、プロトタイプとテストは、デザイナーがユーザビリティの問題や、より高いエンゲージメントにつながるビジネスチャンスを修正するのに不可欠です。

世界最先端のデザインツールで、デザインアイデアをテストしませんか。最終製品のような外観と機能を持つ没入型プロトタイプを作成しましょう。無料トライアルにサインアップして、UXPin の機能をぜひお試しください。

アプリの エンゲージメント が重要な理由

アプリのエンゲージメントは、収益、ブランドロイヤルティ、リテンション（維持）、そして最も重要な企業の評価など、他の多くの要素に影響を与えるため、ビジネス価値の指標として極めて重要です。

アプリのエンゲージメントが非常に重要な理由として、以下の４つが挙げられます：

• 収益：アプリが広告モデルであれ有料モデルであれ、大体はエンゲージメントが高ければ収益も高くなる。
• リテンション（維持）：エンゲージメントが高いということは、その製品がユーザーから日常生活において信頼されていることを示す良い兆候であることから、リテンションとCLV（顧客生涯価値）の向上につながる。
• ブランドとの相性：エンゲージメントの向上はブランドとの相性の向上につながり、NPS（ネットプロモータースコア）や CSAT（顧客満足度）といった主要なビジネス指標に影響を与える。このようなスコアが上がるということは、顧客が製品経験を（口コミのように）共有して、それが無料の宣伝になってくれるということになる。
• データと調査：エンゲージメントを上げることでデータ分析が充実し、それで製品チームはユーザーの行動をよりよく理解し、成長のためにそれを最適化することができる。

アプリのいいエンゲージメント率とは

いいアプリのエンゲージメント率は、製品、業界、ニッチ、市場、ユーザーなどの多くの要因によって決まり、リサーチャーは、UXベンチマークを使って、正しいアプリのエンゲージメント業界標準を計算して、製品のパフォーマンスに対してこれを測定します。

アプリのエンゲージメント率の計算式は単純です：

月間アクティブユーザー数 ➗ 総ユーザー数 ✖ １００

また、MAU（月次アクティブユーザー数）を DAU（日次アクティブユーザー）に置き換えることで、日次エンゲージメントについても同じ式を使うことができます。

アプリのエンゲージメント向上における UX チームの役割

UX デザイナーは、アプリのエンゲージメントとユーザーリテンションにおいて重要な役割を果たします。そして直感的な UI と、ユーザーがタスクを完了して効率的に問題を解決できるように設計された機能だと、楽しい体験が生み出され、エンゲージメントが上がります。

また、プロトタイプとテスト中に、デザイナーは障害物を特定し、ユーザーフローを効率化して、製品をより直感的で使いやすくすることができます。

UXデザイナーのためのアプリエンゲージメント指標

ここでは、UX デザイナーがパフォーマンスを測るのに使える KPI（主要業績評価指標）をいくつか挙げてみましょう：

• 維持率：アプリケーションを使い続けるユーザーの割合
• チャーン率：アプリケーションの使用を停止したユーザー数
• 平均セッション時間：ユーザーが１回のセッションでアプリを使用する平均時間 
• DAU（日次アクティブユーザー）：１暦日にアプリを開いたユーザー数
• MAU（月間アクティブユーザー数）：３０日間にアプリを開いたユーザー数
• スティッキネス：ユーザーがアプリに戻る頻度を示すラジオまたはパーセンテージ
• ユーザーエンゲージメント率：アプリ内で特定のアクションを完了したアクティブユーザーの数
• プッシュ通知の開封率：通知を開いたアプリユーザーの割合（全体および通知タイプ別）
• アプリレビュー：アプリストアや Trustpilot のようなプラットフォームでレビューを残すユーザーの割合

デザインチームは、デザインの決定がどのようにビジネス価値を生み出して ROI（投資対効果）をもたらすかを実証すべく、デザインプロジェクトの前後でこのようなアプリのエンゲージメント指標を測らないといけません。

UX デザイナーはアプリのエンゲージメント向上にどう貢献できるか？

段階的開示

段階的開示とは、１つのタスクやアクションを完了するのに最も重要な機能やオプションのみをユーザーに見せるデザインテクニックです。例えば、多くの ECストアでは、認知的な過負荷を最小限に抑えるために、商品説明やその他の情報がアコーディオンの後ろに隠されていることが多く、それでユーザーはその情報を見るか見ないかを選択することができます。

段階的開示によって、以下のようになることでアプリのエンゲージメントが上がります：

• 製品についての情報取得やナビゲーションがしやすくなる
• 重要度の低い機能がセカンドスクリーンに配置されることで、ユーザーがより早くタスクを完了できるようになる。
• ミスが減り、より楽しいユーザー体験が生み出される。

アプリのオンボーディングプロセスを効率化

ユーザーがオンボーディングプロセスで行き詰まっているようでは、アプリのエンゲージメントを見ても意味がありません。なのでデザイナーは、新しいユーザーができるだけ早く製品を使い始め、その利点を体験できるように、障害物を取り除くことを目指さないといけません。

デザイナーがアプリのオンボーディングを効率化する方法としては、以下が挙げれられます：

• Facebook、Google、LinkedIn などの広く使われている SNS のアカウントを使って、ユーザーがサインアップできるようにする。
• ユーザーが初めてログインする際に、簡単な製品紹介で機能を説明し、ドキュメントの確認作業を減らす。

• ユーザーが問題をサッと解決できるように、フォームフィールドに実用的なヘルパーテキストとエラーメッセージを用意する。

ゲーミフィケーションの導入

ゲーミフィケーションは、顧客エンゲージメントを上げるために実証された方法であり、多くの製品でバッジやポイントが使われていますが、エンゲージメントに対してユーザーが報酬を得られる微妙な方法もあります。

例えば Grammarly では、ユーザーの生産性、習得度、語彙力の他のユーザーとの比較が表示されている「週間ライティングアップデート（Your Weekly Writing Update）」というニュースレターが毎週送られます。

このニュースレターの素晴らしい点は、シンプルで、製品分析が使われているため、低コストで実装も簡単なことです。また、このアップデートはプレミアムユーザー向けのメールにのみ存在するため、Grammarly のUIに不要なデータが追加されることはありません。

個別化されたユーザー体験を作る

アプリのパーソナライゼーションで、ユーザーはデザイナーが自分のために特別に製品を作ってくれたように感じます。パーソナライゼーションは、UI に名前を追加するだけではありません。例えばブラウザのシークレット モードを使って YouTube にアクセスしたことがあれば、さまざまなおすすめが表示されるはずですが、そのほとんどは視聴する気のないものです。

YouTube やその他のSNSプラットフォームでは、パーソナライゼーションを使って、閲覧履歴に基づいたコンテンツがオススメされるので、同じ外観のホームページはありません。それでユーザーが興味を持つコンテンツや機能が提示されると、必要なものがすべて目の前に表示されるため、エンゲージメントが上がります。

パーソナライズされたアプリ体験を生み出すためのヒントを以下に３つ挙げましょう：

1. ユーザーが最近訪れた機能やコンテンツをホーム画面に表示すると、ユーザーは未完了のタスクを続けたり、作業中のプロジェクトを戻したりできる。
2. 閲覧履歴を使って、ユーザーが何をしたいかを予測する。たとえば、予算管理アプリでは、ユーザーが夜にアプリを開いたときに、その日の支出を追加するように促すといいかもしれない。
3. たとえば、ユーザーは新しいプロジェクトやタスクに合わせてプロジェクト管理ダッシュボードを定期的に再編成したいなどがあるかもしれないことから、ユーザーが UI のレイアウトとウィジェットをカスタマイズして、コンテンツの優先順位を付けたり整理したりできるようにする。

マイクロインタラクションを使って没入感のあるユーザー体験を作る

デザイナーはマイクロインタラクションやアニメーションを使って、ユーザーを惹きつけて楽しませます。たとえば、Instagram の投稿をダブルタップすると赤いハートが表示されるのですが、これは本当にやみつきになります!

マイクロインタラクションがアプリのエンゲージメントを上げる例には、以下のようなものが挙げられます：

• プログレスバーで進捗状況を表示し、ユーザーのタスク完了を促す。
• 未完了のタスク、アプリ内のメッセージ、またはユーザーの注意が必要なアイテムをユーザーに思い出させる便利なプッシュ通知。
• コンテンツを閲覧しながらユーザーの興味を維持する無限スクロールやスワイプ アニメーション。
• 短いお祝いアニメーションで、タスクを完了したユーザーに達成感がもたらされ、それでアプリの継続使用や次のタスクへの移行が促される。

希少性とFOMOを利用してユーザーを惹きつける

２０１９年にサービス開始されたソーシャルオーディオアプリ「Clubhouse」は、招待制のアプリでした。その際、各ユーザーが送信できる招待の数には限りがあり、参加希望者に希少性と FOMO（取り残される不安）がもたらされました。

この希少性により、ユーザーは他のソーシャル プラットフォーム上の友人やフォロワーに直接体験を語れるように最も人気のある会話に「参加」したいと思っていたことから、エンゲージメントを維持できました。

また、多くの出会い系アプリは、無料プランでユーザーが完了できる「いいね！」の数を制限しています。この希少性には以下の２つの効果があります：

1. 無料プランに留まりたいユーザーは、スワイプ回数を節約することに気を配るため、より積極的に利用し、それでセッションの長さと広告表示の機会が増える。
2. 「いいね！」アクションを制限することで、ユーザーが有料プランに登録する可能性が上がる。無料の「いいね！」がなくなった後に次のプロフィールで理想の相手を見たことがあるか。これは偶然ではない。

アプリのパフォーマンスを上げる

アプリケーションの読み込み待ちほどイライラするものはありません。ユーザーはすぐに興味をなくして製品を使うのをやめ、もっといいアプリパフォーマンスがある競合他社を探しに行きます。

通常、アプリのパフォーマンスを最適化するのに最もコントロールできるのはエンジニアですが、UX デザイナーが手助けできる方法が４つあります：

1. ファイルサイズと寸法を縮小してアセットファイルを最適化する
2. 読み込み時間を短縮するために、画面ごとのコンテンツを最小限にする。
3. 大きなシステムタスクのために、ユーザーの注意を一時的にそらすローディングインタラクションを作成する。
4. アニメーションは短くし、ユーザーのサポートだけに使用する。

UXPinでアプリのエンゲージメントを上げよう

UXPin は、デザイナーが最終製品のような忠実性と機能性を備えたプロトタイプを作成できるエンドツーエンドのデザインツールです。

このような完全インタラクティブなプロトタイプで、デザインチームは有意義で実用的なインサイトを得られ、アイデアの改善と反復、より多くの問題の解決、アプリのエンゲージメントのような貴重なビジネス機会の特定ができるようになります。また、デザイナーはブラウザでプロトタイプをテストしたり、UXPin Mirror（iOS & Android）を使ってモバイルアプリのエンゲージメントを最適化することができます。

UXPinの以下の４つの機能を使って、アプリのエンゲージメントをテストして改善するためのプロトタイプを作成しましょう：

• ステート：１つのコンポーネントに対して複数のステートを作成し、ドロップダウンメニュー、ステッパー、カルーセル、アコーディオンなどの複雑な UI パターンを構築する。
• インタラクション：トリガー、アクション、アニメーションを使って、没入感のあるプロトタイプ体験をデザインする。また、条件付きインタラクションを使って、ユーザーのアクションに反応する動的なインタラクションを作成することもできる。
• Variables（変数）：ユーザー入力からデータを集め、それをアプリケーションの別の場所で使う。デザイナーはその変数を使って、UI をパーソナライズして、実際のアプリ体験を提供することができる。
• Expression：フォーム検証、計算コンポーネント、動的エラー メッセージなどをデザインする。また、ステート、インタラクション、変数と組み合わせると、デザイナーはコードに匹敵する機能を作成できる。

UXPinでデザインプロセス中に多くの問題を解決してより多くの機会を特定することで、アプリの保持率を上げてより多くのユーザーを引き付けましょう。

無料トライアルにサインアップして、UXPin の高度なプロトタイピング機能をぜひご体験ください。

The post UXデザインでエンゲージメントを向上させる７つの方法 appeared first on Studio by UXPin.

” デザイン ”というのは面白い言葉です。会話の中でそれを口にすれば、正確な意味を付加することなく、付加価値を与えてくれます。

もしあなたが「あれが素晴らしいデザインだ」と聞いたら、その相手が何を言いたかったのか正確に分かるでしょうか？美しさについてでしょうか？機能性についてでしょうか？それとも両方でしょうか。

数ヶ月前、私はシリコンバレーで経験豊富な起業家を前にプレゼンをしていました。そのプレゼン中に私は「“I’m a designer”」と言いました。プレゼン後、60代後半のある男性が、「“I’m a designer as well. I used to design circuits”.（私もデザイナーです。以前は回路設計をしていました。）」と言ってきたのです。しかし、私はそのようなタイプのデザインに関しては専門では無かったため、共通の話題は見つかりませんでした。

デザインという言葉は、危険なほど曖昧な言葉です。また、「良いデザイン」はどんな製品にとっても「良いデザイン」かもしれないですし、一方で「悪いデザイン」はどんな製品にとっても「悪いデザイン」かも知れません。

それでは、本ブログの目的である”デザイン”を一般的に定義してみましょう！

UXPin Mergeを使って、共有のビジョンでチームを調整し、デザイン業務を拡張しませんか。詳細とアクセスリクエスト方法については、こちらのページをぜひご覧ください。

 デザイン とは ？

1. デザインの辞書的な定義

デザインとは、物体やシステムを構築するための計画や慣習の創作物の事です。（建築の設計図、エンジニアリングの図面、ビジネスプロセス、回路図、縫製パターンなど）

つまり、デザインは分野によって意味合いが異なるのです。

(出典：Cambridge Dictionary of American English)

2. デザインの語源

・デザイン(動詞での意味)：①＋②＋③の組み合わせ（ラテン語由来）

Design=「マークアウト、考案、選択、指定、任命」=de-「アウト」＋signature「印をつける」＋signum「印、記号」

※現在はdesignateに意味が付けられている。

・デザイン（名詞での意味）：①＋②＋③をミックス
①中フランス語のdesseign「目的、プロジェクト、設計」

②イタリア語のdisegno、disegnare「印をつける」

③ラテン語のdesignare「印をつける」

(出典: Etymology Dictionary)

3. デザイン の本質

• 目的を持った行動であり、特定の問題を解決するための計画の事。
• 受け手に価値を提供することを意図した一連の意図的な行動の事。
• 単なる企画機能ではなく、何かに意味を与えること。だからこそ、デザインのコンセプトは単一の分野を超え、ウェブ、モバイル、ソフトウェア、ファッション、インダストリアル、インテリアなどに多用・適用できるのです。

4. デザイン の意味をより深く理解するために

すべての定義に共通するのは、デザインとは目的のある行動、つまり特定の問題を解決するための計画であるということです。デザインとは、特定の実用的な分野にかかわらず、「デザインされたもの」の受け手に価値を提供することを意図した一連の意図的な行動なのです。

デザインという言葉は、このように考えることで、より深い意味を持つようになります。デザインは美学以上のものである。デザインとは、単なる企画機能ではない。何かに意味を与えることなのです。それは、経験についてです。だからこそ、デザインのコンセプトは単一の分野を超え、ウェブ、モバイル、ソフトウェア、ファッション、インダストリアル、インテリアなどに応用できるのです。

これって、すごいことだと思いませんか？
ここで、デザインの定義を少しグラフィックで表現してみましょう。私たち一人ひとりにとってのデザインの意味と、それをどう理解するかについて、これからも考えてみましょう。

読んでくださりありがとうございます。

The post 「 デザイン 」の本当の意味とは？ appeared first on Studio by UXPin.

プロトタイプとは、最終的なデザインのシミュレーションを作ることであり、最終製品がどのように見え、どのように感じるかのサンプルです。これでその機能を評価できるようになり、さらにこれで欠点も明るみになることから、デザインチームは具体的なものがわかるようになります。

また、チームは、時間や資金や労力ををつぎ込む前にプロトタイプをテストでき、ステークホルダーはフィードバックを出して、次の段階を承認することができます。

なぜプロトタイピングなのか

プロトタイプで以下のようなことができることから、製品の目標とプロジェクトの各段階への移行方法が明確になります。

• ステークホルダーにデザインを最初に見てもらうことができる。
• UXチームは製品の感触をテストできる。
• デザインの状態を製品のコンテクストの中で示すことができる。
• 無意味なものを出力する厄介なアルゴリズムが明らかになる。

プロトタイプは終わりから始まる

デザインに施されたあらゆる装飾に夢中になると、いい UX（ユーザーエクスペリエンス）が目標であることが置いてけぼりになりがちです。

UXデザイナーとして重要なのは、ユーザーの頭の中に入り込むことです。彼らのペインポイントを把握しましょう。何が不満で、どんな目標や願望があるのでしょうか。

対象とするユーザーについての「ストーリーがわかる」UXマーケティングツールが以下のようにあります。

• ユーザーペルソナ：エンドユーザーを代表する架空の人物であり、製品ごとに１～３人設定可能。
• ユーザーストーリー：デザインを使うユーザー ペルソナの簡単なストーリーであり、役に立たない機能の追加の回避につながる。
• ユーザーシナリオ：UXデザインをペルソナやその目標と結びつけることができる。
• カスタマージャーニーマップ：カスタマージャーニーの前後におけるユーザーの行動や感情をマッピングすることで、ユーザーが意識する前にニーズを予測することができる。

これらは架空の描写ではありますが、実在の人物や出来事が表されているはずです。言い換えれば、ユーザーリサーチからわかることを元に構築されています。

静的なプロトタイプ

プロトタイプは、ほとんど何でもあり得ます。紙ナプキンやノート、ホワイトボードにもざっと書いてもいいですし、Photoshopや Illustratorで作るのもいいでしょう。このような静的なプロトタイプで、製品がどのように見えるかや、ユーザーがどのように操作するかが見えてきます。

例えば、顧客が持ち帰りを注文できるレストランのモバイル Web サイトをデザインしているとすると、プロトタイプをデザインして、注文中のユーザーのインタラクションと画面の状態を以下のように示す必要があります。

• アカウントの作成：プロトタイプは、アカウント設定のプロセスが模倣されているべきである。例えば、「ユーザーがチェックアウト時にアカウントを作成すると、レストランはより多くの注文を得る」という調査結果があるとすると、プロトタイプではチェックアウト時のユーザー入力がシミュレーションされるべきである。
• ログインする：ここで、プロトタイプでは入力フィールドが表示される。また、ユーザーが間違った情報を入力した場合の応答も表示される必要があり、ユーザーがまだアカウントを作成していないのにログインしようとした場合の画面の状態も表示されるべき。
• 注文：プロトタイプには、メイン、副菜、ドリンクなどのメニューのカテゴリーがあり、ユーザーがカテゴリーを選択したときにサイトがどのように動作するかが示され、カテゴリーから製品が選択されたときに画面に製品がどのように表示されるかも表示されるべき。
• 会計：ユーザーがどのように支払い情報を入力し、次回以降の注文のために保存するかなどが示される。
• 商品受取に到着：レストランへの到着をどのように知らせるかがシミュレーションされる。例えば、レストランが店外受け渡しの場合、ユーザーは駐車場番号を入力することができる。

ただし、このレストランが、客にダイニングルームのテーブルを予約させたいとすると、プロトタイプでは、持ち帰り注文やテーブル予約のオプションがどのように表示されるのかが示されます。

静的なプロトタイプだと、製品は以下のように表示されるかもしれません：

• ホーム：この例では、持ち帰りの注文やテーブルの予約ができる。プロトタイプでは、ボタンで持ち帰りのページと予約のページに移動できることがわかり、矢印や線はこのようなページの図面に結合させることができる。

• 持ち帰り注文：ここでは、以下のようなカテゴリーのレイアウトがわかる。
  • メイン料理
  • サイドメニュー
  • ドリンク
• 予約状況：予約可能なテーブルが以下のようにわかる。
  • テーブル
  • ブース
  • テラス席
  • バー
• お会計：ユーザが以下でどのように持ち帰り注文を完了するかがわかる。
  • （必要な場合）ログイン/ユーザー名とパスワードの作成
  • 支払い情報
  • 注文の確認
• 到着：レストランスタッフへの以下のような注意喚起の方法がわかる。
  • 駐車場番号
  • 予約受取の到着

これらをフローチャートのように並べることで、プロトタイプのパーツがそれぞれ何をして、製品がどのように見えるのかがわかります。

ただし、これでユーザーと対話はできません。

インタラクティブなフロントエンドプロトタイプ

インタラクティブなプロトタイプだと、UX チームがデザインの感触をつかむことができることから、より優れており、製品テスターからのフィードバックがあれば、次のフェーズに進む前にプロトタイプを以下のように改善することができます。

• ホーム：インタラクティブなプロトタイプだと、お持ち帰りか予約を選んでそのホームページを試すことができる。
• お持ち帰り：ここでは、ボタンやその他の画像がどのように見えるかがわかり、ボタンをタップして、デザインに改善が必要かどうかの判断ができる。
• 予約：テーブルを予約する際の UX を評価でき、空いてるテーブルやブース席、テラス席やバーのテーブル、予約可能な時間帯などを確認できる。
• お会計：支払い情報の入力や保存、お気に入り注文の保存などが簡単にできるかどうかがわかる。
• 到着：レストランスタッフにどのように到着を知らせるかがわかる。

コードによるプロトタイピング

プロトタイプでコードを使うと、静的なベクターベースのデザインに関連する問題はすべて解決します。これが「本当の」フロントエンドプロトタイプだとしましょう。Mergeのテクノロジーが搭載された UXPinだと、プロトタイプ用にコード化されたコンポーネントを UXPinのライブラリにインポートできることから、プロジェクトを進めるときに、以下のことからそれがもっとシンプルになります。

• デザイナーにコーディングの専門知識は必要ない。
• エンジニアは、すでにコーディングされたデザイン要素で作業できる。
• DesignOpsチームは、単一のソースからデザイナーとエンジニアの両方に役立つプロトタイプを構築できる。

コードを直接扱うので、後で変換する必要はありません。なので、エディタで修正が大変だったり、デザイン開発プロセス全体が台無しになる可能性がある複雑なコードの作成の回避になります。

Mergeでプロトタイプが機能的になるだけでなく、コンポーネントをキャンバス上にドラッグ＆ドロップするだけで、自分でサッと簡単に機能させることができます。また、希望しない限り、インタラクションの追加は不要です。Mergeのテクノロジーは、UIだけに焦点を当てた究極のプロトタイプであることから、実稼働可能なコンポーネントを備えたバックエンドのことは考える必要がありません。

実際に体験してみましょう

ゼロからまた作り出す必要はありません。コード化された React.jsコンポーネントを Github や Bitbucket などのGitレポジトリから UXPinデザインツールにインポートして、すでに持っているものを最大限に活かせます。

Mergeテクノロジーが搭載された UXPin をお試しになり、コードコンポーネントによるデザインを開始して、製品の市場投入までの時間を短縮しましょう。

The post フロントエンド開発 – プロトタイプ入門 appeared first on Studio by UXPin.

UXデザイナーがデザイン以外のチームやステークホルダーに、ユーザー中心のソリューションとUXの重要性について教育しようとするにつれて、デザイン提唱は過去10年間で人気が高まっています。

デザインの提唱者には、さまざまな形態があり、組織全体にリプルを広げてユーザー中心の価値観へと思考を転換させることを目標としています。

UXPinのコードベースデザインで製品のUXを向上させませんか？最終製品を正確に再現する忠実度の高いプロトタイプを作成し、ユーザビリティテストやステークホルダーからの有意義なフィードバックを得ることができます。ぜひ無料トライアルにごサインアップしてUXPinがあなたのUXデザインプロセスにどのような革命をもたらすかご覧ください。

UXデザイン提唱者とは

デザイン提唱者とは、デザインの関心、ユーザー中心のデザインアイデア、デザイン思考を促しながら、UX（ユーザーエクスペリエンス）についてデザイン以外のチームやステークホルダーを教育し、連携することに専念するUX専門家のことです。

デザイン提唱者は通常、デザインチーム、ステークホルダー、および他の部門とデザイン関連事項での共同作用における内輪向きの役割になります。

• デザインチームでは、主に組織のデザインバリューを浸透させ、企業文化の構築のために活動する
• ステークホルダーや非デザイナーに対して、デザインの価値を示し、連携の機会を探っている

場合によっては、デザイン提唱者は、オンラインフォーラムやライブイベントを通じてエンドユーザーと外部でつながることもあり、彼らが社内で働くか社外で働くかは、製品や組織によって異なります。

提唱と説得の違い

提唱とは、デザインの利益のために立ち上がってテーブルにつくことであり、一方、説得とは、自分のように考えたり行動するよう人々を説得しようとすることです。

デザイン提唱者とは、人々にデザインの実践を強制することではなく、仕事の中にデザイン思考や原則を取り入れることです。目標は、デザイン以外のチームメンバーやステークホルダーに立ち止まってもらい、”この決定は「我々の利益」と「顧客」のためになるか？”と考えてもらうことです。

UXデザイン提唱 が重要な理由

多くのステークホルダーや非デザインチームはUXを理解しておらず、UXは見た目の美しさだけを追求するものだと考えています。これは些細なことに思えるかもしれませんが、デザインプロジェクトに悪影響を及ぼし、”デザインの失敗 “と認識される結果になりかねないのです。

例えば、ステークホルダーがデザイナーにビジネス上の利益のためにコンテンツとCTA（Call To Action）を優先するように指示するアプリを構築しているとします。ところが、ユーザー調査やテストの結果は、顧客は違うコンテンツや機能を優先すると出ています。

直感的に操作できなかったり、必要なものを見つけるのにメニューやサブメニューに移動しなければならず、その結果、単純な作業なのに必要以上に時間がかかってしまうようになり、ユーザーは製品に不満を感じるようになります。そうなると、以下のようなことが結果として起こる可能性があるのです：

• 顧客が製品を使わなくなり、競合他社に乗り換える
• 顧客問い合わせの増加
• コンバージョン数および売上高の減少
• 否定的なレビューがブランドの評判に傷をつける

このような問題は組織に悪影響を及ぼし、ステークホルダーはUXを責め立てます。本当の問題は、ユーザーリサーチやユーザー中心のデザインよりも、ビジネスの目標や前提を優先させることだったのです。

ステークホルダーは必ずしも悪くないのですが、UXに対する基本的な理解が欠けています。そこでデザイン提唱者の出番です。

デザイン提唱 の例

今回は、PayPalとGMの2つの企業組織におけるデザイン提唱の事例を紹介します。

PayPalにおけるUXの提唱

PayPalのUX Lead EPXであるエリカ・ライダー氏は、デザインバリュー会議2020の講演で、いかにUXの原則を製品やエンジニアリングチームに提唱し、UXだけでなく全員がユーザー体験に責任を負うようにしているかを語っています。

彼女は、製品開発プロセスにおける制御と責任の大きな不均衡を以下のように実感しました：

• UXデザイナーは、ユーザーに提供されたUXについて担うコントロールは0なのに責任は100％を負う
• エンジニアは、ユーザーに提供されたUXに対して負う責任は0なのに、コントロールは100％担う。

エリカは、責任を負うべきは提供するチームであると信じており、エンジニアがUXを理解できるように教育し、専用のウィザードでその成功を測定することに取り組んでいます。

デザインとUXの原則を提唱することで、彼女はユーザーへの製品提供を改善すべく、エンジニアリング担当者との中間点を見出したのです。

エリカのアプローチについては、デザインバリュー会議での30分間の講演「DesignOps 2.0 – Scaling Design」をご覧ください。

デザインの提唱 に一番いい方法

ここでは、パートナーシップから、デザイン活動へのステークホルダーの参加、さらには新しいデザイン手法の導入まで、組織全体でデザインを提唱する方法をいくつかご紹介します。

1. 部門を超えた連携

連携は、デザイン提唱を成功させる鍵の1つです。デザイン提唱者は、各部門と協力して、情報やユーザーリサーチの価値を共有する方法を見つけなければなりません。

ここでは、デザインチームが他の人と協力して、組織の他の部分に価値を提供する方法をいくつかご紹介します：

• セールスチームとマーケティングチームが情報を共有することには、大きなの価値があり、どちらのチームもユーザーの行動を見ますが、それぞれ違うレンズ越しに見ています。
• セールスやマーケティングは、リサーチをサポートするのに貴重なデータを持っていることが多く、UXはキャンペーンの最適化のために既存のユーザー調査を提供することができます。
• ​​ユーザーリサーチで、ビジネスチームが新しいユーザーや市場の機会を特定しやすくなります。デザイン提唱者は、この貴重な情報を共有することで、製品と市場の適合性を向上させ、ユーザーと組織のためになるビジネス上の意思決定におけるUXの影響力を高めることができるのです
• データサイエンティストは、ユーザーの行動、UXが解決できる問題、それに応じた優先順位の付け方について、貴重な見解を持っており、UXの提唱者は、アナリストが顧客の行動をより明確に把握し、理解するためのもう一つのデータポイントとして、ユーザーリサーチデータを共有することができます。

デザインの提唱者となり、組織内での部門の価値を高めるには、このような連携の機会を見つけることは不可欠な部分です。

2. ワークショップ

デザイン思考のワークショップは、デザインプロセスやデザイン思考による問題解決の方法について、デザイン部門じゃないチームやステークホルダーを教育するのにとてもいいです。デザインワークショップは、ジェラ・マーフィー氏がGMで魔法をかけた方法の1つです。その結果を見たらワークショップという方法のすばらしさが分かるでしょう！

3. ユーザーインタビューへ招く

ユーザーインタビューでは、ユーザビリティ・テストのプロセスや、UXデザイナーがどのようにユーザーの問題に対するソリューションを開発し、機会を特定するかをステークホルダーに見てもらうことができます。

また、ユーザーインタビューは、ユーザビリティの問題やデザインの悪いUIでユーザーがどのように苦労しているかをステークホルダーが見る絶好の機会であり、今後の意思決定に共感をもたらします。

4. デザインスプリントに招く

デザインスプリントでは、ステークホルダーとデザイン部門でないチームのメンバーが、1週間以内にエンドツーエンドのデザインプロセスを直接体験することができ、そこでデザイン思考やプロセスを学び、自分たちのソリューションに対するユーザーの反応を見ることができます。

5. ストーリーテリング

GMのジェラ・マーフィー氏は、ユーザーストーリーやUXの成功例を伝えるために、ストーリーテリングをよく利用しますが、UXの成果物を共有することは、こういったストーリーをステークホルダーに提示するにはベストな方法ではないことに、彼女は長い間わかっていました。デザイナーにとっては意味のあるものですが、ステークホルダーにとっては十分なビジュアルではないのです。

彼女は、ユーザーとビジネスゴールの接点を示すビジュアルを多用し、聞き手にとって適切なUXストーリーを語る方法を探しています。

ユーザーやUXのストーリーを語るときは、聴衆のことを考え、適切な言葉やビジュアルを使ってメッセージを伝えましょう。

6. DesignOpsでの提唱

DesignOpsは、デザイン提唱を推進するための一般的な手段であり、DesignOpsの専門家は、デザインの中で効率化を図り、組織の他の部分への影響を測定します。

彼らは、デザインの価値を高めるのに、以下のようないくつかの取り組みを行っています（これらの中には、デザイン提唱者の仕事と類似しているものもあります）。

• 部門を超えた情報共有の推進と促進
• 部門を超えた情報共有
• スキル開発
• デザイン理念の浸透とチーム文化の構築
• キャリア開発およびコーチング
• デザインチームの目標設定とメンタリング
• 結束と一貫性を高めるためのツールやプロセスの開発

このトピックにの詳細については、「DesignOps 101: Guide to Design Operations」と題した電子ブックをご覧ください。

UXPin – ユーザーのための究極のデザイン提唱

ユーザーテストは、デザインプロセスの重要な部分ですが、プロトタイプが製品体験を再現できなければ、正確な結果を得ることはできません。UXPinのコードベースのデザインツールを使えば、デザイナーはコードのような忠実性と機能性を備えたプロトタイプを作成し、より良いユーザーテストを行うことができます。

UXPinのプロトタイプは、ステークホルダーからのより良い、より有意義なフィードバックももたらします。UXPinのコードベースのプロトタイプは、何かをすることを「想像」するのではなく、高度な機能を提供し、ステークホルダーが好む没入型の体験を｢創造」します。

UXPinのコードベースのデザインソリューションに切り替えて、デザイン提唱者が話題にする価値と効率性をより多く生み出しましょう。無料トライアルにサインアップして、UXPinがどのように顧客のためにより良いUXを生み出すかをぜひご体験ください。

The post デザイン提唱とは？ appeared first on Studio by UXPin.

モバイルアプリとWeb アプリのどちらを導入するかを決めるのは、いつも簡単というわけではなく、UX（ユーザーエクスペリエンス）や技術的な制約、費用対効果や拡張性など、決断前に考慮すべき要素は数多くあります。

そこで本記事では、どのアプローチがプロジェクトに最適かを、十分な情報に基づいて判断できるようにするため、『Webデザイン』と『モバイルアプリデザイン』の違いについて見ていきます。このヒントに沿って、UXPin の無料トライアルにサインアップし、これから開発するモバイルアプリやウェブアプリのような見た目や動きのある高度なプロトタイプを構築可能なエンドツーエンドのプロトタイピングツール UXPinをぜひ無料でお試しください。

モバイルアプリ とは

モバイルアプリは、携帯可能なモバイルデバイスのために特別に設計されたツールであり、その形態はさまざまです。単機能の小さなアプリケーションから、より複雑で多機能なモバイルプラットフォームまで、それぞれがユーザーに質の高い体験を提供してくれるはずです。

アプリの目的と範囲は大きく異なり、それによって人々はゲームやレジャーからビジネスや専門的な追求に至るまで、さまざまな活動ができます。

アプリを開発する際、製品開発チームは、アプリを作成するデバイスの画面サイズと OS（オペレーティングシステム）の考慮が必要なことがよくありますが、モバイル技術の急速な進歩に伴い、現在では多くのアプリがクロスプラットフォームの互換性を考慮して作られており、さまざまなデバイスやプラットフォームのユーザーがアプリを楽しむことができます。

現在利用できるモバイルアプリの種類は以下の通りです：

• ネイティブ：通常、単独のプラットフォームや OS（iOsアプリやAndroidアプリ）向けに開発される。
• ハイブリッド：再利用可能なコードを活用し、少ない労力と費用でネイティブに近い UX（ユーザーエクスペリエンス）を提供する。
• PWA：Progressive Web Appsの略で、HTML、CSS、JavaScript、その他のフレームワークで作られたモバイルWebアプリのことである。

モバイルアプリ の利点

• 効率的に動作する（モバイルデバイス向けにネイティブに作成されている）
• インターネットに接続せずにオフラインで作業できる
• より良い分析、つまり、より正確なデータ収集とコンバージョントラッキングが提供される

モバイルアプリの欠点

• 設計にコストがかかり、維持はもっとかかる
• iOSとAndroid で別々のアプリの構築が必要
• プライバシーやセキュリティの維持は自己責任

Webアプリ とは

Webアプリは、ユーザーがインターネットに接続できる端末であれば、Webを通じてアクセスできるので、ユーザーはブラウザ上で動作するのに、PCに別のアプリケーションをインストールして管理する必要がありません。その点においてアクセシビリティが向上するでしょう。

Webアプリケーションを使うメリットは、従来のWebサイトと比べて、AngularJS や ReactJSといった強力なフロントエンドフレームワークのおかげでよりインタラクティブなUXを実現できることです。

このフレームワークによって、アプリ開発者はダイナミックなシングルページアプリケーションをサクッと構築することができ、それによって別々のビュー間のスムーズな遷移が実現され、ユーザーからの入力を受けたときに素早く反応することができるのです。

Webアプリケーションは、セキュリティを犠牲にすることなく、驚異的な性能やスケーラビリティを提供するため、よく使われるソリューションとなっています。

Webアプリの利点

• サーバーにホストされ、ブラウザのインターフェースを通じてインターネット上で配信される。
• 遠隔地のサーバーに保存され、ブラウザーのインターフェースを通じてオンラインで供給されるため、ユーザーは更新プログラムのインストールが不要
• Web開発チームによるメンテナンスが簡単

Webアプリの欠点

• 使用にはインターネットへの接続が必要
• 読み込みに時間がかかる可能性がある – サーバーに負荷がかかると、アプリのコンテンツがすぐに表示されず、UXに深刻な影響を与えることがある。ユーザーの離脱を引き起こしてしまうこともあり得る。
• ターゲットオーディエンスに発見されにくい – Webアプリはアプリストアに載っていないため、アプリストアのプロモーションにはならない。Product Hunt、Capterra、ITreviewなどのレビューサイトは、ウェブアプリを宣伝する適切な方法ではあるが、Apple や Android のアプリストアに比べると今ひとつ。

モバイルアプリ と Webアプリ の違いについて語る

ここで、モバイルアプリとWebアプリの違いをサクッと見てみましょう。

• Webアプリはほぼすべてのブラウザからアクセスできるが、モバイルアプリはアプリストアからのダウンロードが必要。
• 画面サイズの要件の違い。モバイルアプリはデスクトップでアクセスすることができないことから、小さな画面専用に作成されるため、ピクセル数が少なくなるが、Webアプリは、モバイルとデスクトップの両方でのアクセスが可能。
• モバイルアプリはインターネットに接続しなくても使えるが、Webアプリは使えない
• Webアプリはインターネット接続が必要でウェブブラウザに依存するため、モバイルアプリに比べて動作が遅くなりがち。
• デザイナーとして、高いユーザビリティとアクセシビリティの基準を確保するには、「パソコンは大抵座って使う」、「アプリのユーザーは通勤やジョギングで携帯電話を使っているであろう」というようなさまざまなシナリオの考慮が必要。
• モバイルアプリは、Webアプリよりもセキュリティが高度であるため、モバイル アプリの開発では、2 要素認証やその他安全性を上げる手段を作成することで、それに対応すべきである。

モバイルアプリとWebアプリの選択に関する有効な方法

ここでは、モバイルアプリとWebアプリのどちらを選ぶかを決める際に、最も考慮すべき点をご紹介します。

ユーザーのコンテクストと目的の決定

Web は豊富なリソースと情報をユーザーに提供し、Webユーザーは通常、ゆったりと座ってアクセスします。一方モバイルデバイスは、ユーザーが外出先で情報を検索し、サッと入手するためのユニークな機会を提供します。

モバイルUXをデザインする場合、「必要な情報に最小限の時間で最大限アクセスできるようにする」という目的のもとで、ナビゲーションはシンプルで分かりやすく、よく構造化されたコードが簡潔に書かれ、視覚的に優先順位が付けられている必要があります。

UX デザイナーは、次のようなデザイン要素に細心の注意を払ないといけません：

• 小さな画面のユーザーにとって最も直感的な自然なジェスチャー
• メニュー選択のシンプルさ
• クリアな視覚経路
• フォントや色など、一貫した UI 要素
• クリックやアクセスがしやすいボタンやリンク
• その他、ユーザーナビゲーションがしやすくなるインタラクティブな要素

また、ユーザーが誰でもアプリを最大限に活用し、機能的に使えるようにするため、関連するアクセシビリティ基準とペアになっていないといけません。

結論：Webアプリは長時間のユーザーセッションに適しており、モバイルアプリと競合することはないが、習慣や食事の記録アプリ、モバイルECアプリ、SNSアプリなど、製品が短時間で定期的に使用される場合は、おそらくモバイルアプリが適している。

製品やサービスの必要な画面サイズを見極める

B2Bツールの多くはWebベース化され、ユーザーは携帯電話やタブレットなどのモバイルデバイスからアクセスできるようになりましたが、これは、以下のような理由で有益です：

• ユーザーのデバイスに関係なく、都合よくサッと情報にアクセスできるようになる
• より大きな画面で、より鮮明に、より詳細にコンテンツを見ることができる
• PDFのダウンロードやエクスポートを定期的に行う必要がある場合、PDFはモバイル端末のデータ容量を大きく占め、頻繁に保存すると端末が重くなる可能性があることから、ユーザーはモバイルデバイスよりもデスクトップコンピュータで行う方がはるかに簡単で効率的である。そもそも、モバイルはファイルの閲覧に便利な画面サイズではない。
• ユーザーは、複数のデバイスにファイルを分散させるよりも、１つにファイルを保存することを好むであろうことから、企業がB2Bプラットフォームを最大限に活用するには、Webベースのアクセスの提供が不可欠である。
• コンテンツがはっきり見えないこともあるモバイルだけでなく、より大きな画面でアプリにアクセスできるようにすることで、企業はクライアントに常に良いUX を提供できる。

結論：Webアプリは、多数のチャートや分析データがある複雑な（主に仕事に関連する）アプリに適しており、このようなタイプのアプリでは、通常、画面間を何度も行き来する必要がある。

デバイス固有の機能をリストアップする

例えば、美容製品を販売しているのであれば、一日の大半を過ごす場所であるモバイルデバイス向けに美容アプリを開発する方がはるかに有益です。

このプラットフォームで、より多くのオーディエンスを獲得し、コンピュータでは利用できない複数の機能、特に高解像度の携帯電話カメラを活用できます。この種の製品では、市場での成功には画質が不可欠です。

モバイルビューでアクセスできるWebベースのアプリケーションを設計することで、デバイスのカメラを使うことができますが、他の機能の一部は、モバイルのハードウェアと機能によってのみアクセス可能です。例えば、ランナー向けのアプリを作るのに欠かせなかった、携帯電話に内蔵されたジャイロセンサーやGPSのようなものを考えてみてください。

また、モバイルアプリのUX/UIデザインを設計する際には、大きめのインタラクティブボタンやシンプルなナビゲーションなど、デバイス固有の要素を必ず含めるようにしましょう。さらに、必ずソフトウェア開発チームと協力して、サードパーティ製アプリの統合が完璧に機能するようにしましょう。統合の種類は製品によって異なりますが、SNS、オンライン決済方法、プッシュ通知などがあります。

結論：モバイルアプリには、GPSや高解像度カメラなど、端末固有のハードウェアや機能が付加されていいる。

競合他社の選択肢をチェックする

企業は、何を開発すべきかに関して情報に基づいた判断をするために、新製品やアプリを発売する前に、競合状況の分析をすべきです。

もし、市場のトッププレイヤーの多くがWebベースのソリューションであることが判明したなら、その線を行くのがベストでしょう。彼らはユーザーが便利に使えるプラットフォームでソリューションを作って、そのUXによって目標を達成したのですからね（結局、そうでなければ、このようなアプリが市場でこれほどまでに成功することはないでしょう）。

また、「同じカテゴリの製品にユーザーは親しみを感じる」ことを忘れないようにしましょう。そうすることで、競合他社からこちらに乗り換える場合、あなたのアプリを使い始めるのがはるかに簡単になります。競合他社を徹底的に調査することで、投資する前にチャンスと潜在的なリスクを特定することができるのです。

結論：アプリの目的がカテゴリーに革命を起こすことでないのなら、他の人が成功を収めているプラットフォームを採用する価値はある。そこに、ターゲットとなる人がいるかもしれない。

モバイルアプリかデスクトップアプリか？UXPinでデザインしよう

この記事を読んで、モバイルアプリとWebアプリのジレンマでどちらを取るかを選べるようになれば幸いです。ユーザーのコンテクスト、画面サイズ、競合他社の状況などが、アプリの成功にどう貢献するかを理解するのに、ぜひ上記の考察を参考にして下さい。

UXPin があれば、ウェブアプリやモバイルアプリを問わず、高度なプロトタイプを作成し、それをステークホルダーやデベロッパーと速やかに共有することができます。実際に使ってみませんか？無料トライアルでこのツールをぜひお試しください。

無料トライアルは今すぐお試しになれます。準備はいいですか？UXPinをお試しになり、製品のデザインと開発のプロセスを効率化しましょう。トライアル開始はコチラ。

The post モバイルアプリとWebアプリ【違いと各メリット】 appeared first on Studio by UXPin.

ハイテクなデジタル製品におけるUXデザインの世界でも、ペンと紙は、Lo-Fi（低忠実度）のプロトタイプをサクッと作る選択肢として今でも好まれています。皆さんの思い込みとは裏腹に、UXチームはコンピューターから離れ、付箋やホワイトボード、メモ帳に書き込んだり、紙のプロトタイプに注釈を加えたりすることに多くの時間を費やしています。

デザイナーがコンピュータに向かう前に計画や準備をすればするほど、ワイヤーフレーム、モックアップ、プロトタイプをサッとデザインすることができます。そしてペーパープロトタイプは連携を促すことから、初期の UX デザイン思考プロセスの重要な部分であり、それでデザイナーは最小限のコストで多くのアイデアを検討できるようになるのです。

UXPin を使うことで、デザインチームと開発チームは、ペーパープロトタイプから忠実度の高いプロトタイプ作成にすぐに移行でき、それでデザインプロセスは大幅に加速されます。一貫性のある高品質なデジタル体験を構築しませんか。無料トライアルにサインアップして、UXPin のプロトタイピング機能をぜひお試しください！

ペーパープロトタイプとは

ペーパープロトタイプとは、デジタル製品を表す手描きの「スクリーン」を使ってアイデアを開発し、ユーザーフローをデザインするプロセスであり、ここではインタラクションデザインよりも、ハイレベルな UX（ユーザーエクスペリエンス）のテストを行います。

ペーパープロトタイプには機能がないことから、忠実度が低いため、ペーパープロトタイプのデザイナーがペーパープロトタイプを部門外で共有することはほとんどありません。

ペーパープロトタイプは、情報アーキテクチャをマッピングしてユーザーフローを可視化することを主な目的としています。

デザインチームは、よく机の上やフローの上に紙画面を並べて、実際のユーザーがどのようにナビゲートして最終的なゴールに到達するかを想像します。そのデザインは初歩的なもので、たいていは白黒でスケッチされ、コンテンツは見出しと行動喚起のリンクだけが読みやすいテキストで表示された限定的なものです。

また、スワイプやスクロールなどの基本的な機能をシミュレートするために、チームが厚紙を使って iPhone や Android のモックデバイスを作ることもあります。このようなモックデバイスを使うことで、デザイナーは自分のデザインが携帯電話の枠内でどのように見えるかを確認することもできます。‐ これはモバイルアプリのデザインの際には特に便利です。

紙のプロトタイプの主な利点はスピードですが、UI Stencils などのツールを使って、正確で見た目に美しい画面レイアウトをデザインするデザイナーもいます。これは、紙のプロトタイプをステークホルダーやテスト参加者に提示する予定がある場合に極めて重要です。

UXPinの旅は、Web Kitという同様のペーパープロトタイピング製品から始まりました。ペーパープロトタイプを自動的にワイヤーフレームに変換するデザインツールとペアになったペーパーパッドです。そして UXPin は、エンドツーエンドのプロトタイピングソリューションへと進化し、最初から制作可能なプロトタイプを作成できるようになりました。UXPinをぜひ無料でお試しください。

ペーパープロトタイプのデジタル化

reMarkable や Apple Pencil のようなツールを使えば、チームはアナログな紙の体験のようなスピードと多様性を楽しみながら、リモートで共同作業を行うことができます。

デジタルスケッチツールを使うことで、ペーパープロトタイプのプロセスは加速されます。デザイナーは、（画面を再描画することなく）より速やかに変更を加え、詳細なメモを添付し、完成したプロトタイプを UXPin のようなデザインツールにすぐにアップロードして、忠実度の高いプロトタイプを作成したり、ワイヤーフレームを作成したりすることができます。

ペーパープロトタイプがデジタル化されることで、紙やプラスチックのゴミも減って環境にも優しいですよね 。

ペーパープロトタイプのメリット・デメリット

スピードと柔軟性は別として、ペーパープロトタイプにはメリットもデメリットもあります。

以下の無料のeBook に載っているメリット・デメリットからいくつか挙げてみましょう（英語）

メリット：

• 速やかなイテレーション：１時間以上かけて完成させたデジタルモックアップよりも、５分で完成した紙のデザインを破棄する方が簡単。
• 低コスト：紙は安く、ツールやキットが追加されても破綻しない。
• 創造性の向上：鉛筆と紙の自由さで、実験と新しいアイデアが育まれる。デザインツールはデザインプロセスにおいて重要な役割を果たすが、デザインの初期段階では創造性を阻害する可能性がある。
• チーム構築：ペーパープロトプは、クリエイティブな環境でチームが一丸となれる貴重な機会となる。ペンと紙を使って作業することで、子供のようなエネルギーが引き出され、そこから絆が生まれ、同僚との関係が強くなる。
• 習得が一番ラク：誰もがアイデアをスケッチできるため、ペーパープロトタイプはマーケティング、開発、ステークホルダーなどの他部門を巻き込むのに最適な方法となる。
• ドキュメンテーション ：ペーパープロトタイプは優秀なドキュメンテーションとなる。例えばデザイナーは、プロジェクト全体を通して参照できるように、メモやアイデアのアウトラインを作ることができる。ペーパープロトタイプは優れた UX成果物である。

デメリット：

• ユーザーの反応がない：ユーザーからのフィードバックがないため、アイデアがうまくいくかどうかを知るのは難しく、ペーパープロトタイプを参加者とテストしたとしても、フィードバックは限られたものになると思われる。
• 不正確なフィードバック：UXチーム以外では、ペーパープロトタイプの解釈が大変である可能性があり、それで正確で意味のあるフィードバックが制限されてしまう。
• 潜在的に不要：UXPinのようなラピッドプロトタイピングツールでは、ペーパープロトタイプでデザインプロセスに不必要なステップが追加される可能性がある。UXPin にはあらかじめデザインシステムが用意されているため、デザイナーは忠実度の高い要素をドラッグ＆ドロップでサッとデザインして、作業用のプロトタイプを編集することができる。

１４日間のトライアルにサインアップして、UXPin を使って紙のデザインコンセプトを最終製品のように機能する高忠実度のプロトタイプにどれだけ早く変換できるかをぜひご覧ください。

ペーパープロトタイプを作るタイミング

Google のジェイク・ナップ氏は「ペーパープロトタイプは時間の無駄だ」と言っていますが、初期段階のコンセプト作りにはペーパープロトタイプが有効だと認めています。

一度紙からデジタルに移行したら、戻る理由はありません。新機能や製品の再デザインのために、紙のプロトタイプに戻るデザイナーもいるかもしれませんが、その場合でも、紙のプロトタイプまで戻る必要はないかもしれません。

とはいえ、紙のプロトタイプは初期段階の概念化に最適です。そのスピード、簡単さ、シンプルさにより、デザイナー以外の人も含むすべてのチームが利用でき、実験と創造性を育むことができます。‐ これはデジタルキャンバスでは実現できないことですですね。

また、ペーパープロトタイプは以下には理想的です：

• ブレーンストーミングのミーティングとセッション
• 初期段階での基本的な社内ユーザーテスト

ペーパープロトタイプの作り方

ペーパープロトタイプは、製品デザインの楽しみどころです。チームメンバーがブレインストーミングを行い、アイデアをスケッチする機会ですからね。

スケッチの綺麗さを気にする必要はありません。最高の UX デザイナーでも、別に素晴らしいスケッチアーティストというわけではないですし、そもそもこれは、自身のアイデアを視覚化して創造力を引き出すことが目標です。

ペーパープロトタイプの作成には、主に以下の３ステップがあります：

１．材料を準備する

紙、ペン、マーカー、付箋、はさみなどの材料を集めます。UI（ユーザーインターフェース）のスケッチに、ホワイトボードや大きな紙を使うのもいいかもしれません。

２．インターフェースをスケッチする

基本的な画面、UI、デザインの主要な構成要素を別々の紙に描き、そのスケッチを順番に並べることで、ユーザーの流れを表現します。

３．インタラクションのシミュレーションをする

ユーザーとのインタラクションの順序でスケッチをレイアウトします。ユーザーのアクションに基づいてスケッチを手動で切り替えてユーザー体験をシミュレーションし、フィードバックを集めてデザインを直していきます。

詳しいガイドについては、UXPinのプロトタイプに関する記事をご覧ください。

ペーパープロトタイプを作るための６つのヒント

1. プリンター用紙と安い鉛筆やペンを使う。罫線やラインが引いてあるノートは、多くの場合はデザイナーがたくさんのアイデアを練るよりも、線の間に描くことに気を取られて創造性が抑制されてしまう。
2. ウォーミングアップから始める！リラックスして流れに乗るには、数枚のスケッチが必要なこともある。クレイジーエイトは、同じ画面の多くのバージョンを素早くデザインするための素晴らしいペーパープロトタイプの手法であり、これを２，３ラウンド行うと、さらに発展させるアイデアがたくさん出てくるだろう。
3. モバイル優先型またはプログレッシブエンハンスメントのプロトタイプを作成する。最小のスクリーンから始めて、ビューポートを拡大縮小しながらレイアウトを調整する（これはモバイルと Web デザインに当てはまる）。拡大は、コンテンツを優先して、モバイルに変換されない複雑なデスクトップ用のレイアウトになるのが回避されることから、縮小よりもはるかに簡単である。補足: UXPinのオートレイアウトを使うと、自動的にデザインのサイズ、フィット、塗りつぶしがされることからモバイル優先型のデザインに便利な機能である。
4. １画面（１枚の紙）につき１枚のスケッチにこだわる。ペーパープロトタイプでは、紙片を順番に配置してユーザーフローを作成する必要があり、その入れ替えや、新しい画面の追加をしたりすることから、１枚の紙の上に複数の画面があると、このスピードと柔軟性が失われてしまう。
5. アイデアが浮かんだら反復する。目標は質ではなく量であり、紙でプロトタイプのアイデアをたくさん作ると、多くの場合、最終結果を得るために各アイデアから少しずつ取り出すことになる。これは、紙を使ったレゴ セットのようなものである。
6. ペーパープロトタイプがうまくいくには、計画を立てることが重要。十分な数のペン（黒の細いマーカーが最適）、紙、はさみ、のり、付箋、インデックスカード、テープ、厚紙、その他にもプロジェクトに必要と思われるものを用意する。ホワイトボードとマーカーも、ユーザーフローの概要を共同で描くのに最適。プロのアドバイス：ペーパープロトタイプを準備する仕事は、アート＆クラフト愛好家に割り当てる。どのチームにも少なくとも１人はいて、必要なものを十分すぎるほど揃えてくれるはず。

ペーパープロトタイプのテストと発表

UX部門外でペーパープロトタイプをテストして発表することは、常に厄介です。ステークホルダーやユーザビリティの参加者は、何が起こるかを「想像」しなければならないため、訳がわからなくなったり、提示しようとしている内容から焦点がそれる可能性があります。とはいえ、Jakob Nielsen の調査によると、ユーザビリティの問題の７５%は、ペーパープロトタイプのようなシンプルで忠実度の低いプロトタイプで特定できることが分かっています。

ペーパープロトタイプを発表してテストするためのヒントを以下に挙げてみましょう：

• 発表者以外の１人を「人間コンピュータ」または製品シミュレータ役に指名する：人間コンピュータ役の人は、スクロール、スワイプ、さまざまな画面への移動、その他の機能のシミュレーションをする。
• リハーサル：プレゼンターとシミュレーターが同期できるように、リハーサルは非常に重要。発表者は、シミュレータがプレゼンテーションに追いつくための適切なリズムを考案するといいかもしれない。
• 標準的なユーザビリティテストのベストプラクティスに従う – 「最低５人のユーザーを使ってテストを記録する」などの標準は、現在も適用されている。ユーザビリティの標準と実践方法に関する詳細については、当社のユーザビリティ・テスト・ガイド（無料）をこちらからダウンロード可能（英語）。
• ユーザーに紙のプロトタイプを渡して検査させる場合は、どこに注目して何をテストすべきかがわかるように、ガイダンスと注釈を必ず提供する。

UXPin でのプロトタイプ

モバイル アプリケーションを構築する場合でも、新しい Web サイトを構築する場合でも、UXPin でデザイナーは高度なプロトタイプを構築するためのツールを得られます。‐ 大抵の主要なデザインツールではこれができません。

でも本記事を鵜呑みにせず、１４日間の無料トライアルにサインアップして、次のプロジェクトでは UXPin の強力なプロトタイピング機能をぜひ実際にお試しください。

The post ペーパープロトタイプ： １０分でわかる実践ガイド appeared first on Studio by UXPin.