プロダクトデザイン Archives

２０２４年に試すべきデザインハンドオフツール１０選

Haruka Ikoma — Fri, 01 Dec 2023 06:36:22 +0000

デザインハンドオフツールを使用することで、デザインから開発へのスムーズな移行を促進させることができます。

エンジニアには、実用的なドキュメント、忠実度の高いプロトタイプ、効率的なコミュニケーションおよび連携向けの機能を提供します。

効果的なデザインハンドオフのプロセスがなければ、デザインと開発間のギャップを埋めるために多くの時間を費やしてしまいます。

コード化コンポーネントを使ってデザインすることで、ハンドオフのプロセスを効率化してみませんか？

UXPin Mergeでは、npm、Storybook、Gitレポジトリからコンポーネントをインポートして、エディタにドラッグ＆ドロップするだけで高度なプロトタイプを作成できます。

この技術についてさらに詳しく知りたい方は、こちらのページをぜひご覧ください。

１．UXPin Merge

UXPin Mergeは、ReactやStorybookコンポーネントで構築されたコードベースのHi-Fi（高忠実度の）プロトタイプをデザインしてハンドオフをすることができます。

この「信頼できる唯一の情報源（Single source of truth）」によって、デザイナーもエンジニアも同じUI要素で作業できるため、市場投入までの時間が大幅に短縮されます。

プロトタイプが完成すると、次にデザイナーはそれをエンジニアと共有します。

エンジニアはスペックモードを使って、ドキュメント、スタイルガイド、コメントを見ることができるだけでなく、開発段階で使用可能なコンポーネントのJSXコードをコピーして使用することができます。

ちなみに、UXPin Mergeは最初から完全にコード化されたコンポーネントを使ってデザインできるのでエンジニアとデザイナー間で伝達ミスが起きることはありません。

Mergeがデザインプロセスとハンドオフをどのように最適化できるかについての詳細は「デザインハンドオフーUXPin Mergeで実現することー」の記事をご覧ください。

２．Zeplin

Zeplinは、デザイナー、エンジニア、その他のチームメンバーが効率的に連絡・連携しやすくなる人気のデザインハンドオフツールです。

Jira、Slack、Trello、Microsoft Teamsなどのコラボレーションツールと統合可能です。

Zeplinを使うと、デザイナーは注釈を含むユーザーフローの作成と、エンジニアにコンテキストの提供が可能です。

スタイルガイドから色、テキストスタイル、スペーシング/レイアウト、デザイントークン、コンポーネントを保存することができます。

また、開発で使えるコードスニペット、その他のスタイリングが含まれているのも魅力ポイントです。

３．Marvel

Marvel は、Zeplinと同じくデザインハンドオフ機能がある人気のデザインツールです。

自動生成されたモックアップを使って、プロトタイプの作成・他のデザインツールからのインポートが可能です。

MarvelはモックアップからスターターコードとCSSを生成して時間を節約でき、デザインと開発のギャップを埋めることができます。

また、エンジニアは各コンポーネントのチェックとアセットのダウンロードができるため、連絡ミスやツール間の切り替えを回避できます。

４．Sympli

Sympli は、バージョン管理とデザインのハンドオフを目的としたツールなので、コンポーネントディレクトリのStorybookに相当する “デザイナーのような” 存在と言えるでしょう。

Sympliをプロトタイピングツールと統合し、UI要素やデザインシステムを同期させることで、要素の説明やコンテクストを加えるためにチーム間のレビューや共同作業が可能です。

また、エンジニアはスタイルガイド、スペックモード、スペックとアセットを参照して開発プロセスを開始できます。

さらに、Sympliにはモバイルアプリ開発用のXcodeとAndroid StudioのプラグインでIDE（統合開発環境）と同期できるのが最大の魅力です。

５．Avocode

Avocode は、開発チームのためのデザインハンドオフファイルを作成します。

また、Avocode の「ワンクリック」統合が、ダウンロード可能なアセット、スペックモード、１０種類のコード言語用のスニペットを生成することで、デザイナーには時間の節約になります。

そして、Avocode のデザインレビューでは、デザイナーは他のチームやステークホルダーを招待して、デザインの批評やフィードバックを行うことができます。それでデザイナーは、全員が更新を認識できるように、フィードバックを反復し、変更を再同期して新しいバージョンを作成できます。

なのでデザインチームは、Avocodeのレビュー機能を使って、矛盾点や修正点について話し合うことができます。

６．InVision

InVision は UXPin のような機能があるデザインツールであり、InVision Studioのデザインからのプロトタイプの作成や、他の一般的な画像ベースのデザインツールからのファイルのインポートなどができます。

Inspect は、デザインスペックとコードスニペットを自動生成する、InVisionのデザインハンドオフツールであり、デザイナーとエンジニアは、コメント機能で連絡をとって連携とフィードバックを一箇所で維持することもできます。

また、InspectのStorybook統合により、InVision はコードレポジトリにあるコンポーネントをエンジニアに通知し、それがライブラリを検索する時間の節約や、不慮の手戻りの予防になります。

そして、InVisionはコミュニケーションやプロジェクト管理タスクを同期するのに、Jira、Confluence、Trello などのソフトウェアとの統合もします。

７．Framer

Framerは、React コンポーネントを同期して編集するコードエディタを備えたレイアウトデザインツールです。

これはデベロッパーにとっては素晴らしい機能ですが、コードの知識や経験があまりないデザイナーには不向きです。

UXPinのようにプロパティパネルでコンポーネントのプロップを編集することはできないので、代わりにFramerのコードエディタでの変更を加える必要があります。

これもコードに慣れていない人にとっては理想的ではありません。

しかし、デザイナーはReactコンポーネントをプロトタイプやテストに使うことができ、他の一般的な画像ベースのツールよりも優れた忠実度と機能性が得られます。

また、Framerの高い忠実度と機能性によって、デザインのハンドオフがスムーズかつ効率的になり、エンジニアは、React コンポーネントからコードをコピーして、新しい製品やUIを構築することができます。

ただ、Framer のコードベースのデザインテクノロジーは、React製品には優秀ですが、UXPinの Storybook統合が提供する他の一般的なフロントエンドフレームワーク用の機能がありません。

８．Spectrr

Spectrr は、色、フォント、スペーシングなど、エンジニアがコンポーネントやレイアウトを検査するための自動注釈が付いたデザイン仕様ツールです。

デザイナーは、各コンポーネントのメモや、レスポンシブレイアウトの作成指示を含めることができます。そしてエンジニアは、Spectrr がプロジェクト用の完全なCSSファイルの生成もするため、開発を開始するための優れたスターターテンプレートを手に入れることができます。

９．Adobe XD

UXデザインやプロトタイピングツールとして広く使われていましたが、2023年に廃止されました。Adobe XDの共有モードを使って、デザイナーは仕様書やCSS のスターターコードなどをエンジニアに渡すことができます。

コメント機能はAdobe XDとJira、Slack、Microsoft Teamsなどのプロジェクト管理ソフトウェアと統合させて共同作業を行うことができます。

また、Adobe XDの共有モードでは、他のデザインハンドオフツールに比べて限られていましたが、Zeplinにデザインを同期することで、より多くの機能とより良い連携ができました。

１０．Figma

Figmaは世界中で最も人気のあるデザインツールの１つです。初期リリース時点では Sketchに似ていましたが、その後プロトタイプやテスト機能を提供できるように進化しました。

Figmaの共有機能によって、エンジニアは要素を検査し、Web、iOS、Android用のコードスニペットを生成することができます。

また、React、Flutter、Vue、Ember、Angular などのフレームワーク向けのコードを生成するために、サードパーティのプラグインのインストールもできます。

2023年現在、デザインプロジェクトに無料で「開発モード」が追加できるので、エンジニアはプロジェクトにアクセスして、コメント機能でフィードバックができるでしょう。

ちなみにUXPinは、従来の画像ベースのデザインツールのようなベクターファイルではなく、HTML、CSS、Javascript をレンダリングするコードベースのツールです。そのため、デザイナーとデベロッパーにとってドリフトが少なく、実際のデザインがイメージしやすいというメリットがあります。

デザインハンドオフが大変な理由

デザインハンドオフの最大の課題として、プロトタイプの忠実性と機能性があります。

デザイナーは、トランジションやアニメーション（例：GIFやビデオなど）のようなコードベースの機能を再現するために、さまざまなツールや方法を用いる必要があります。

非現実的な期待

技術的制約がないと、デザイナーや製品チームに非現実的な期待を抱かせてしまうかもしれません。

実際のプロトタイプには含まれていないことから、エンジニアはどのように組み合さっているかを確認するためにプロトタイプから外部ファイルにアクセスしたり、アニメーションを見てどのように組み合わされているかを確認する必要があります。

コードレンダリングに不十分な画像ベースツール

もうひとつの問題は、デザインのコードへの変換です。

多くの画像ベースのデザインツールには、CSSを含むHTMLテンプレートが自動生成できるプラグインやアプリケーションがあり、これで十分に思えるかもしれません。

しかし、実際のところ、このコードだけではデザインを完全には再現はできません。共通言語が異なることから、”ズレ” がでてきてしまうのです。

技術的制約

デザインドリフトのもう一つの原因は、製品を表示するブラウザやデバイスのレンダリングエンジンです。

よく起きがちなケースとしては、モックアップから最終的なコードへの色やグラデーションでのドリフトが挙げられます。

多すぎるデザインハンドオフツール

ハンドオフではデザインファイル、プロトタイプ、ドキュメント、アセット、コラボレーションのためのツールが複数使用されていることがよくあります。

さまざまな場所やプラットフォームに分散していると、ハンドオフではミスやエラーが起こりやすくなってしまいます。

ここで紹介したのは、あくまでデザインと開発間の摩擦が起きやすい場面の一部の例であり、ハンドオフ経験者であればよくご存じかと思います。

しかし、ラッキーなことに、このプロセスを効率化できるデザインハンドオフツールがあります。

UXPin Mergeによるデザインハンドオフの改善

UXPin Mergeは製品開発フローにおけるすべての課題を解決できるオールインワンUXデザインツールです。

ツールの使用を１つにして、デザインワークフローを効率化し、完全に機能するプロトタイプの作成、連携の強化、製品のUXの向上を実現しましょう。

まずは14日間の無料トライアルでUXPinをお試しいただき、すべてがつながることで製品開発がどれくらい簡単になるかを実感ください。

UXPin Mergeのアクセスのリクエストはこちら。

The post ２０２４年に試すべきデザインハンドオフツール１０選 appeared first on Studio by UXPin.

Figmaのデザインをインタラクティブなプロトタイプにしよう

tomotaka@xenon.io — Wed, 22 Nov 2023 00:47:25 +0000

10年以上の研究開発の末、UXPinは Figma、Sketch、Adobe XDなどのデザインツールを超える、従来デザイナーがエンジニアのバックグラウンドがなければ実現できなかった、高度なプロトタイピングによるエンドツーエンドのデザインソリューションを実現しました。

こういった画像ベースのツールは、デザインチームへのより良いUX（ユーザーエクスペリエンス）を提供すべく進化してきましたが、エンドユーザーにとってのプロトタイピングやテストの改善にはほとんど何もされていません。デザイナーは、1つのツールですべてをまかなうのではなく、複数のプラットフォームを切り替えるか、フロントエンドエンジニアと連携して、最終的な製品体験を正確に再現するプロトタイプを構築しなければいけないのです。

AdobeがFigmaを200億ドルで買収する意向を表明したことで、多くのデザイナーや組織は、このソフトウェア大手の製品エコシステムの一部になりたいかと疑問を抱いていますが、この件に関する考えがどうであれ、デザインツールの切り替えというのは、よりユーザー中心で、画像ベースのデザインによる制約を超えるものであるべきです。

UXPinでは、情報アーキテクチャやワイヤーフレーム、モックアップ、および忠実度の高いプロトタイプをデザインできます。また、FigmaからデザインをインポートしてUXPinでプロトタイプの作成といった、ニーズに合わせた柔軟なワークフローが可能です。

ブラウザまたはUXPinのミラーアプリ（iOSおよびAndroid）を使ってテストを行い、ステークホルダーやエンドユーザーから有意義なフィードバックを頂きましょう。

無料トライアルにサインアップして、ぜひ今すぐUXPinプロトタイプを作成してみよう！

Figma のデザイン、UXPinでプロトタイプを作る

…わかります。Figmaでのデザインがいいんですよね。でもUXPinでのプロトタイピングで得ることができる、より高い忠実度と機能性も捨てがたい。

もしあなたがこのように感じたら、UXPinのFigmaプラグインには両方の長所がありますよ。

Figmaでモックアップをデザインして、プロトタイピングのために画面をUXPinにコピーすればいんです。

このワークフローには両方の長所が備わっており、製品や状況に応じた最適なソリューションの導入を推奨していますが、UXPinですべてまかなえる場合、デザイナーは2つのツールの使用が必要です。

UXPinはデザインおよびプロトタイピングツールとして有効であり、画像ベースのツールでは不可能なUXを拡張する機能が満載です。

Figma とUXPinでプロトタイプを作る意義

Figma、Adobe XD、Sketchなどは静的なベクターグラフィックスをレンダリングするため、デザイナーがコードを再現することはできませんし、再現するにしても多くの労力とワークアラウンド、そして追加ツールが必要です。

UXPinはコードベースのデザインツールですが、デザイナーがコードを操作するという意味ではなく、UXPinがHTMLやCSS、Javascriptを裏でレンダリングし、コードと同じ忠実度と機能性をデザイナーに提供します。

以下にある、コードによる4つの機能により、デザイナーはUXPinでより高度なプロトタイプを作成することができるのです。

ステート

UXPinの【ステート】では、デザイナーは1つのコンポーネントに対して複数のステートを作成することができます。たとえば、ユーザーのインタラクションによって引き起こされる異なるプロパティを含んだ「ステート」を、ボタンにいくつか付けることができます。

また、ステートによって、ドロップダウン・メニュー、ステッパー、カルーセル、アコーディオンなどの複雑なコンポーネントの作成もできます。

インタラクション

デザイナーは、デザインツールの制限ではなくコードに制約された複雑なUXPin【インタラクション】を作成することができ、またUXPinには、没入型のプロトタイプ体験をデザインするためのトリガー、アクション、アニメーションが数多くあります。

【if-then】と【if-else】の条件付きインタラクションにより、デザインチームはユーザーの入力やトリガーに反応するダイナミックなプロトタイプを作成することができ、このJavascriptのようなインタラクティブ機能により、デザイナーはデザイン上の決定がユーザー体験にどのような影響を与えるかがわかり、改善すべき領域をピンポイントで特定することができます。

このようなリアルなやり取りを行うことで、ステークホルダーとエンジニアはほとんど説明を必要とせず、フィードバックプロセスやデザインがハンドオフがより生産的に行われるようになります。

変数

Figmaを含むほとんどのデザインツールでは、フォームをテストすることができません。なぜか？フィールドが「入力」ではなく、「画像」になっているからです。UXPinでは、フォームフィールドはまるでエンジニアが開発したかのように機能し、デザイナーが【テキスト入力】や【チェックボックス】、【ラジオ】、【選択/ドロップダウン】、【複数選択】および【ボタン】をすぐに使えるようになっています。

【変数】があれば、例えば「サインアップ時にユーザーの情報を取得し、名前フィールドを使って個別化されたウェルカムメッセージを作成することができる」というように、デザイナーはプロトタイプからユーザーの入力を取得し、そのデータをアプリケーションの別の場所で使用することができます。

エクスプレッション

UXPinの【エクスプレッション】で、デザイナーは他のデザインツールの可能性をはるかに超えてプロトタイピングを行うことができるようになり、パスワードやその他のフォームフィールドの検証、ユーザーインタラクションに基づいて更新されるショッピングカートのデザイン、動的なエラーメッセージの作成など、さまざまな機能を利用できます。

ステート、インタラクション、変数などのUXPinの他の機能と組み合わせることで、デザイナーは、エクスプレッションによってコードと区別のつかないプロトタイプやユーザーフローの構築ができるのです。

このような機能やその他の高度なUXPin機能については、UXデザイン界のインフルエンサーであるジェシー・シャウォルター氏によるチュートリアルのYouTubeビデオで詳しく説明されています。

FigmaのモックアップをインタラクティブなUXPinプロトタイプにする5つの理由

1. 高忠実度プロトタイピング

Figma：美しいベクターモックアップだが、あいにく実際の機能性や忠実度が再現されていないため、デベロッパーやステークホルダーがプロトタイプの解釈をしにくいものになっている。

UXPin：コードのような忠実度と機能性により、デザイナーは最終製品と見分けがつかないほど没入感のあるダイナミックなプロトタイプ体験を作成することができ、より少ないドキュメント、よりスムースなデザインハンドオフ、市場投入までの時間の短縮が実現される。

Figma、Sketch、Adobe XDなどが作り出すような高忠実度モックアップと、最終製品のような外観と感触を持つ高忠実度プロトタイプには大きな違いがありますが、UXPinは、プロトタイプがコードのようにユーザーのインタラクションに反応するため、ほとんど説明が必要ない、本物の高忠実度の結果をもたらします。

**2. UIデザインとリアルなプロトタイプのギャップを埋める**

Figma：FigmaでのUIデザインのアイデアをデザイン・開発

UXPin：Figmaの限界を超え、UXPinで高度なプロトタイプを作成

Figmaは美しいデザインとモックアップを作成するための機能を備えていますが、デザイナーはプロトタイピングの段階で壁にぶつかります。UXPinのFigmaプラグインだと、デザインチームがUXPinで忠実度の高いプロトタイプを作成するために、両方のツールの優れた資質を活かせます。

UXPinでUIデザインの変更とイテレーションを行うか、Figmaでデザインと編集を行いプロトタイピング・ツールとしてのみ使用するかは、あなた次第なのです！

3. ユーザーテストの強化

Figma：基本的なクリック／タップ操作、ユーザーフロー、ナビゲーションに限定したテストの実施。

UXPin：最終製品を正確に再現する没入型プロトタイプ

Figmaのベクターベースの制約と制限は、正確なテストの妨げになります。デザイナーは、基本的なインタラクティブ性を実現するために複数のフレームを使用しなければならず、多くのコンポーネントの再現は不可能です。

コードベースのデザインツールであるUXPinで、デザイナーがコードを一行も書かずに、デベロッパーが構築可能なものに限定してプロトタイプの構築ができます! そしてこのような複雑で動的なプロトタイプで、デザインチームはUXの向上とビジネスチャンスを特定するための貴重なインサイトを得られるのです。

また、デザイナーはUXPinプロトタイプでテストする際に、重要なユーザビリティとアクセシビリティの問題をピンポイントで把握することができ、その結果、UX負債の減少や、より高品質なデザインプロジェクト成果につながります。

4. イテレーションの高速化

Figma：最終製品の動作を模倣するための複数のフレームとコンポーネント – 変更と再デザインには時間がかかる。

UXPin：レイヤーとステートを1つの画面で使用し、数回のクリックで変更可能。

Figmaでプロトタイプを作成する際の課題の1つとして、コードのインタラクティビティの模倣のために、デザイナーは複数のフレームやコンポーネントの作成が必要という点があります。このようなインタラクションは、厄介で直感的でないように感じられ、デザインや変更に時間がかかります。

UXPinでは、デザイナーは「ページ」と「レイヤー」で作業します。複数のフレームやページを切り替えるのではなく、1つのキャンバス上で作業を行い、プロパティパネルで変更を加えます。このワークフローは、より直感的で、イテレーションの高速化を促進し、デザイナーがより早く問題を解決できるようにします。

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

Figma：多くのドキュメント、デベロッパーとのやり取り、インタラクションを模倣するビデオ/GIF、他のツールへのリンク

UXPin: プロトタイプが最終製品のエクスペリエンスとインタラクティブ性を再現し、長いドキュメントと追加ツールの必要性は削減される。

動きやインタラクションの再現に、デザイナーはAfter Effectsなどのツールをよく使います。

なぜか？デザインツールには忠実度や機能性が欠けているからです。技術的な制約からエンジニアが再現できないトランジションやインタラクションをデザイナーが作成することもあるし、複数のツールやファイル間での切り替えは、混乱を招き、時間がかかり、エラーを増加させます。

UXPinでは、コードを正確に模倣したコンポーネントやインタラクションをデザインできるため、デザイナーは追加のツールの使用は必要ありません。プロトタイプが何をするものかを説明するしたビデオやGIF、行ったり来たりのコミュニケーション、長ったらしいPDFは必要ないのです。

デザイナーはUXPinでプロトタイプに注釈を付けてドキュメントを作成できるため、エンジニアやステークホルダーは複数のファイルを切り替える必要がなく、すべてが一箇所に集約されます! さらに、デベロッパーやステークホルダーは、UXPinのプレビュー上のコメントを使用して、質問したり、チームメンバーをタグ付けしたり、編集にコメントを割り当てることができます。

リアルなプロトタイプやサポートドキュメント、コラボレーションが一箇所に集められていることで、UXPinではより少ない摩擦でよりスムーズなデザインハンドオフが実現します。

End – to – EndのデザインソリューションであるUXPin

FigmaのデザインしてUXPinでプロトタイプを作成するというのもできますが、そうなると1つで済むところを2つのツールを使ってしなければいけないことになります。

UXPinだと、コラボレーション、ワイヤーフレーム、情報アーキテクチャのデザイン、モックアップ、ゼロからのコンポーネントデザインなど、Figmaと同等のデザイン体験があります。

UXPinのエンドツーエンドのデザインソリューションでは、デザインシステムの構築、管理、共有など、すべてをUXPin内で行うことができるため、デザイナーはツールを切り替える必要がありません。

ツールが減ることによって、UXワークフローの効率化だけでなく、コスト削減や、デザインリーダーによる貴重なリソースの他への再配分が可能になります。

ステークホルダーには、画像ベースのプロトタイプとそれに付随するドキュメントを読み解くほどの時間や忍耐力はありません。その点UXPinのプロトタイプは説明が少なくて済むので、ステークホルダーは最終的な製品体験を楽しむことができ、この没入型体験は、ステークホルダーから有意義なフィードバックを引き出すとともに、デザインソリューションへの賛同を高めることができます。

画像ベースのデザインの限界は卒業して、UXPin を使って強化されたプロトタイピング、コラボレーション、デザインの成果を手に入れましょう。無料トライアルにサインアップして、UXPin が製品デザインのワークフローに革命をもたらし、顧客に優れたUXを提供する方法をぜひご覧ください。

Try UXPin for free

The post Figmaのデザインをインタラクティブなプロトタイプにしよう appeared first on Studio by UXPin.

これだけは知っておきたい！プロダクトデザイナーになるには

Haruka Ikoma — Fri, 27 Oct 2023 07:04:59 +0000

プロダクトデザイナーとしてのキャリアをお考えですか？このガイドでは、必要なスキルや資格、人脈作り、キャリアアップに至るまで、覚えておくべきポイントをご紹介します。ビジネス目標とユーザーニーズを一致させ、魅力的な製品を作り上げ、進化し続けるプロダクトデザインの世界で活躍するための方法を見ていきましょう。

主なポイント：

ワイヤーフレームから効果的なコミュニケーションまで、「ハードスキル」と「ソフトスキル」を混ぜて習得するのが、プロダクトデザインでの成功には不可欠である。
デザインやコンピューター・サイエンスの正規教育は強力な基礎となるが、オンラインコースや独学の道もある。
業界のイベントやコミュニティを通じてネットワークを作り、メンターを見つけることがプロとしての成長の近道になることがある。
プロダクトデザイナーのキャリアアップは、ジュニアから専門家、または管理職へと進むことが多く、それぞれの段階でさまざまなレベルの専門知識が要求される。
磨かれた履歴書とインタラクティブなポートフォリオがあれば、求人応募で際立つため、自分の経験をカスタマイズし、数値化できる実績をアピールすることに重点を置くといい。

世界最先端のプロダクトデザインツールを使って、インタラクティブなプロトタイプで他のデザイナーに差をつけましょう。無料トライアルにサインアップしてUXPinの機能を実際にお使いいただき、デザインスキルをさらに高めましょう。

プロダクトデザイナーの仕事とは

プロダクトデザイナーは、ユーザーの問題を解決するソリューションを戦略化・概念化して提供します。そしてビジネス目標とユーザーニーズを一致させ、市場調査から最終的な実行まで、製品ライフサイクルをナビゲートします。

また、プロダクトデザイナーは、ユーザーフローのマッピング、ワイヤーフレームの作成し、忠実度の高いプロトタイプの作成をし、ビジュアルだけでなく、デベロッパー、UX デザイナー、プロダクトマネージャーなどの部門横断的なチームと協力して、製品をアイデアから市場に送り出すこともよくあります。

プロダクトデザインと UXデザイナーは同じか

製品のユーザビリティと機能性に主眼を置く UX デザイナーとは違って、プロダクトデザイナーはデザインプロセス全体を管理し、それは、UX（ユーザーエクスペリエンス）にとどまらず、UI（ユーザーインターフェース）のデザインや、多くの場合フロントエンド開発も含みます。

また、UX デザイナーが UX に焦点を当てるのに対し、プロダクトデザイナーは CX（カスタマーエクスペリエンス）全体を広く見渡します。ユーザビリティと収益性の最適化のために、顧客がどのように顧客ライフサイクルに入り、どのように顧客ライフサイクルから退出するかを理解しないといけません。

プロダクトデザイナーの役割

以下のような主な責務で、プロダクトデザイナーがデザインプロセスにおいて全面的な所有権を持つことがわかります：

市場調査：ユーザーニーズと市場ギャップを特定し、それをデザイン戦略に反映させる。
ワイヤーフレーム作成：プロジェクトのビジュアルおよびコンテンツ要素をガイドする基本的なレイアウト構造を作成する。
プロトタイプ：最終製品を視覚化するための忠実度の高いプロトタイプを開発し、ユーザビリティテストを実施する。
ユーザーテスト：ユーザーインタビュー、ユーザビリティテスト、アンケートを実施し、デザインイテレーションのためのインサイトを集める。
デザインハンドオフ：デベロッパーと調整し、ビジュアルアセットとコーディングのためのデザイン仕様を全て提供する。
QA（品質保証）：開発環境で実装されたデザインがデザイン仕様に確実に適合しているように確認する。
部門を超えた連携：目標を合わせて統一された UX を提供すべく、プロダクトマネージャー、UX デザイナー、デベロッパーと協力する。
ドキュメンテーション：デザイン仕様書やライブラリを作成および更新し、それによってチームメンバーが一貫してデザインを実施できるようにする。
パフォーマンス指標：ユーザーエンゲージメントやコンバージョン率などの KPI（重要業績評価指標）を監視し、デザインのインパクトを測る。

プロダクトデザイナーに必要なスキル

ハードスキル

スケッチとワイヤーフレーム：デザインのアイデアをサッと視覚化するスケッチテクニックを習得している。
プロトタイピングツール： UXPin、Figma、Adobe XD、Sketch など、忠実度の高いプロトタイプのためのデザインツールに精通している。
コーディング： HTML、CSS、JavaScript の基礎知識で、インタラクティブなプロトタイプを作成でき、デベロッパーとのコミュニケーションを強化する。
デザインシステム：スケーラブルなデザインシステムを構築および維持する方法を理解している。
ユーザーリサーチ：ユーザーインタビュー、アンケート、ユーザビリティテストを実施できる。
データ分析：分析データを解釈し、情報に基づいたデザイン上の意思決定を行うスキル。
レスポンシブデザイン：さまざまな画面サイズに対応する UI のデザインに精通している。
ビジュアルデザイン：タイポグラフィ、カラーセオリー、グリッドシステムなどの UI デザイン要素を使いこなせる。

ソフトスキル

コミュニケーション：デザインの選択肢を明確に説明し、ステークホルダーを説得する能力。
問題解決：問題を特定し、実用的な解決策を考案する卓越した分析力。
協調性：部門横断的なチームでシームレスに働き、集団的な意見の価値を理解している。
時間管理：品質を犠牲にすることなく、複数のプロジェクトと納期のバランスをとる。
共感力：ユーザー中心のデザインのために、ユーザーのニーズ、モチベーション、ペインポイントを理解している。
適応力：変化を受け入れ、必要に応じて新しいツールやプロセスをサッと採り入れる。
細部へのこだわり：どんなデザイン要素も見逃さず、洗練された最終製品に貢献する。

プロダクトデザイナーになるのに必要な資格

プロダクトデザイナーになるには、さまざまな道があり、正規の教育を受けて学位を取得することもできますし、オンラインのリソースやコースを利用した独学も可能です。

正規教育

グラフィック・デザインの BFA（美術学士号）：デザイン原理とビジュアル・コミュニケーションの基礎を学ぶ。
インタラクションデザインの学士号：インタラクティブなデジタル製品のデザインに重点を置く。
デザインにおける MFA（美術修士号）：さらに専門性を高め、競争力を身につけたい人向け。
コンピューターサイエンスの学士号：プログラミングと開発に関する基礎的な理解を深め、デジタル製品のデザインをより効果的に行うことができる。

オンラインのデザインコースおよびワークショップ

Coursera：プロダクトデザインに関する大学やカレッジのコースを提供している。
Udemy：特定のデザインツールやテクニックに関する短期間で実践的なコースに特化している。
General Assembly：UX とプロダクトデザインに特化した集中ブートキャンプを提供している。
Interaction Design Foundation：よりアカデミックなコースのための会員制プラットフォーム。
IDEO：デザイン思考の組織の大手であり、様々な製品やデザイン関連のコースを提供している。

独学

プロダクトデザインのスキルを磨くのに役立つ本を以下にいくつか挙げてみましょう：

スティーブ・クルーグ著「Don’t Make Me Think」
（日本語版：超明快 Webユーザビリティ ―ユーザーに「考えさせない」デザインの法則）
Webデザインにおけるユーザビリティの入門書。
ドナルド・ノーマン著 「Design of Everyday Things」
（日本語版：誰のためのデザイン？　増補・改訂版　―認知科学者のデザイン原論）
優れたデザインの基本原則を解説。
アリステア・クロール, ベンジャミン・ヨスコビッツ著「Lean Analytics: Use Data to Build a Better Startup Faster」
（日本語版：Lean Analytics ―スタートアップのためのデータ解析と活用法 (THE LEAN SERIES)）
商品と市場の適合性とデータ主導のデザインに関するインサイトを提供。
ニール・イヤール著「Hooked:：How to Build Habit-Forming Products」
（日本語版：Hooked ハマるしかけ使われつづけるサービスを生み出す[心理学]×[デザイン]の新ルール）
心理学とデザイン原理を融合させ、習慣的なエンゲージメントを生み出す製品をデザインする方法を伝授。

プロダクトデザイナーのキャリアアップ

典型的なプロダクトデザイナーのキャリアパス

ジュニア・プロダクトデザイナー：一般的に、学校を卒業したばかり、または２年未満の経験者の出発点となり、主に指導下でデザイン業務を遂行する。
中堅プロダクトデザイナー：３～５年程度の経験を積んだ中堅デザイナーは、より複雑なプロジェクトを担当し、専門性を高める。
シニア・プロダクトデザイナー：５～８年の経験を経て、デザインプロジェクトの指揮や後輩の指導、戦略的な決定にも関われるようになる
リード・プロダクトデザイナー：少なくとも８～１０年の経験が必要。大規模プロジェクトをリードし、デザインチームを監督することも多い。

プロダクトデザインにある専門分野

UXスペシャリスト：ユーザーリサーチとエクスペリエンスデザインを深く掘り下げ、アナリティクスやユーザー行動を熟知していることが求められる。
UIスペシャリスト：配色、タイポグラフィ、全体的な美しさなど、製品の視覚的要素に焦点を当てる。グラフィックデザインの経験があると有利。
フロントエンド開発：コードを書くなど、技術的な側面を専門とするプロダクトデザイナーもおり、HTML、CSS、JavaScript の熟練したスキルが求められる。最新の製品開発には、React、Vue、Angular などのフロントエンド・フレームワークのスキルが含まれる。
インタラクションデザイナー：考え抜かれた動作で魅力的なインターフェースを作るのが専門であり、人間の心理や行動に対する深い理解が求められる。

プロダクトデザインのリーダーシップやマネジメントの役割とは

デザインマネージャー：デザイナーチームの管理、プロジェクトの監督、上層部への報告を行い、多くの場合は、デザインスキルとマネジメントの専門知識の融合が求められる。
デザインディレクター：組織全体のデザイン戦略の設定と実行に責任を担い、経営陣の一員であることが多い。
プロダクトデザイン副責任者：デザインに特化したトップレベルの経営陣の一人であり、リーダーシップと様々なプロダクトデザイン業務における豊富な経験と実績が求められる。
コンサルタント／アドバイザー：長年の専門知識を持つプロダクトデザイナーの中には、企業やスタートアップ企業のコンサルタントとして、プロダクトデザイン戦略の策定を支援する人もいる。

プロダクトデザイナーとしてネットワークを築き、メンターを見つける方法

ネットワークの機会

業界会議および会合：デザインに特化したイベントに参加して、業界のプロフェッショナルと出会い、見識を深める。自分の興味やキャリアの目標に沿ったカンファレンスに参加すると、最大限の効果が得られる。
オンラインフォーラムとグループ：業界別の LinkedInやSlackのチャンネルなど、専門的なオンラインコミュニティに参加し、有意義なディスカッションに参加して知識を得たり、人脈を作ったりする。

プロダクトデザインのメンターを見つける

メンターは、業界の見識や実践的なアドバイス、教科書には載っていない貴重なフィードバックを提供してくれます。実社会の課題を通して導いてくれることで、速やかな成長が実現します。

既存のネットワーク、同窓会、LinkedIn の中で検索してみましょう。ADPList もメンター探しのお役立ちリソースです。相手の仕事に対する尊敬の念を示し、メンターシップに何を求めるかを明確に説明した、よく練られたメッセージを遠慮なく送ってみましょう。

プロダクトデザインの仕事に就くには

以下に挙げるプロダクトデザイナーの履歴書戦略は、Dribbble から拝借しました：

職務経歴書を見直し、不足している点を洗い出す：職務経歴書に記載されている条件を満たすように履歴書を調整することで、より際立った履歴書を作成することができ、履歴書テンプレートに記載されていない特定のスキルや経験が見つかるかもしれない。
履歴書の形式（年表形式か職務経歴書形式か）を選ぶ：採用担当者は、キャリアの成長を示すために年代順の履歴書を好むが、エントリーレベルのポジションを狙うのであれば、学歴とスキルに焦点を当てた機能的なレイアウトの履歴書がいいと思われる。
つまらなく思えるようなものにしない ‐ 自分のデザインスキルをアピールする：標準的なPDF や Word 文書では、プロダクトデザイナーとして目立つには不十分。多くのプロダクトデザイナーは、プロフェッショナルな Web ベースのポートフォリオ（作品集）を使って、自分のスキルや経験をアピールしている。
メトリクスを使う：デザインプロセスを主導した、またはデザインプロセスに大きく貢献したプロジェクトを紹介し、影響力を示すために、定量化可能な指標を使う。

UXPinのインタラクティブなプロトタイプで注目を集める

UXPinのインタラクティブなプロトタイプで、自身のプロダクトデザインスキルをアピールしましょう。多くのプロダクトデザイナーは、Figma や Sketch のような一般的な画像ベースのツールを選びますが、このようなプラットフォームには、基本的なプロトタイプを超える機能や特徴がありません。

その点、UXPinはコードベースのデザインツールで、最終製品のように見える完全にインタラクティブなプロトタイプを作成する機能を備えています。インタラクティブなプロトタイプへのリンクを履歴書に添付すれば、採用担当者に好印象を与えて、関心を持ってもらえる可能性が高まります。

UXPinの洗練されたツールと機能性で、一歩先を行く製品デザインスキルを身につけませんか？無料トライアルにサインアップして、インタラクティブなプロトタイプを作成しましょう。

Try UXPin for free

The post これだけは知っておきたい！プロダクトデザイナーになるには appeared first on Studio by UXPin.

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

Haruka Ikoma — Wed, 25 Oct 2023 05:15:32 +0000

デザイン会社の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プロトタイプ第１号を作成しましょう！

Try UXPin for free

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

デザインイテレーションプロセス入門

Haruka Ikoma — Mon, 16 Oct 2023 05:34:40 +0000

デザインイテレーションとは

デザインイテレーションとは、製品（または製品の一部）を比較的短い間隔で定期的に改善する繰り返し可能なプロセスのことをいいます。「反復」とも呼ばれ、「高忠実度（Hi-FI）のプロトタイプ、中忠実度のワイヤーフレーム、低忠実度（Lo-Fi）のスケッチ、あるいはサイトマップのようなシンプルな図で構成されることもあります。

デザインイテレーションは、デザインプロセス全体を前進させる原動力となります。

デザインイテレーションがデザインプロセスの一部な理由

すぐに製品開発にすぐ着手するとリサーチ（例：ユーザビリティテスト）において最終結果を検証する際に、最悪のバージョンの製品をデザインしてしまうかもしれません。

「最悪のバージョン」を作った場合、「最高のバージョン」にするまでの道のりは、コストも時間も掛かってしまいますよね。

ヒューマン・コンピュータ・インターフェースをデザインするための適切なアプローチは、イテレーション（反復）でのデザインです。フィードバックや試行錯誤を繰り返すことで、デザインの方向性や、機能性のアイデアを出してその過程から学びを得ることができます。

ゴールまでの道のりは平坦ではありませんが、完全に間違った方向に進んでしまうこともないので、デザインイテレーションは、長い目で見たときに多くの時間や見解、そして安定性をデザインプロセスに与えてくれるものなのです。

デザインプロセスを反復する利点

リソースの節約

デザインプロセスを反復すると、ユーザー（少なくともステークホルダー）からのフィードバックも定期的に得ることができるため、多くの時間節約につながります。

受け取ったフィードバックはポジティブなものも、ネガティブなフィードバックも正しい方向性を知ることができるきっかけとなるので、貴重な時間を無駄にすることはありません。

フィードバックが全くない場合、ゴールまで急いでも失敗している危険性があり、時間と帯域の大きな無駄となります。さらに、「時は金なり」ですから、デザインイテレーションは最も費用対効果の高い選択肢となりますね。

連携の促進

デザインプロセスを反復することで、ステークホルダーが意見を述べたり、自分のアイデアを共有したりする機会ができるため、健全な連携が促進されます。その結果、「自分の視点でのみ物事を見る」ということにならないため、自分だけでは発見できないような気づきが得られます。

本当のユーザーニーズへの対応

デザインイテレーションのプロセス（特に連携を取り入れたプロセス）が確立されていないと、デザイナーは孤立して仕事をするという罠にはまりがちです。サイロ化すると、内省的になりすぎてしまい、それが早合点や、生産性のない完璧主義への暴走につながってしまいます。

しかし、デザインプロセスを反復的に実施することで、ユーザーのニーズに焦点を当て、ユーザーからのフィードバックに従った意思決定を行うことができます。また、漫然とした改善に終始するのではなく、次善の策に優先順位をつけてデザインの改善ができるようになります。

さらに、ユーザーからのフィードバックによって、ステークホルダー間の意見の対立を解消できるようにもなります。

定期的な更新のしやすさ

デザインプロセスの反復によって、ステークホルダーに最終結果を投げかけて「見といてね」と放置するのではなく、定期的に進捗状況の更新を提供することができます。

特にデベロッパーにとっては、これは「デザインの途中でも開発に着手できますよ」ということです（実際、デベロッパーは反復的な開発プロセスを活用することができますから、みんなにとっていい話になります）。

また、顧客と仕事をする場合、頻繁に更新することで、製品にかける努力を示すことができ、それによって顧客との良好な関係を築くことができます。さらに、製品の定期的な更新を顧客に伝えることで、マーケティング上の話題を提供し、世間の声を得ることだってできます。

UXPinのプロトタイプは、顧客やステークホルダーとの共有がすぐにできます。数回クリックするだけで、デザイナーは、顧客やステークホルダーが本物と同じように見えて機能するデザインイテレーションをテストする際に、コンテクストに応じたフィードバックのコメントを得られるようになります。また、アダプティブバージョンを使うと、シミュレーションされたプロトタイプは、デバイスやスクリーンサイズに適応します。ただし、プロトタイプの共有前に、プレビューモードでエラーや見落としがないかをチェックすることを忘れないでください！

イテレーションが使われる場所

イテレーションはデザイナーだけのものではありません。ソフトウェアデベロッパーも、非同期で、あるいはデザインのイテレーションに連動して、仕事に反復的なアプローチを取ることができます。さらに大規模なものでは、プロジェクト全体をイテレーションで計画的に管理することも可能です。

デザインにおけるイテレーション

デザインにおいては、イテレーションは、以下のような多くのデザイン方法論において重要な役割を担っています：

デザインスプリントの方法論
HCD（人間中心のデザイン）
デザイン思考およびリーンUX
ラピッドプロトタイピング（3Dテクノロジーを使って迅速（ラピッド）に製品の試作品（プロトタイプ）を作成する開発技法）のアプローチ

どのような方法論であっても、必要なリソースがあれば、同時進行の反復デザインプロセスを用いて、非同期で複数のユーザーニーズに対応することができます。

ソフトウェア開発におけるイテレーション

ソフトウェア開発では、イテレーションは継続的な改善の促進や、誤差の範囲の提供、そして製品開発プロセスの他の側面が妨げられるのを防ぐのに使われます（直線的で、すべてのプロセスを順次行うことを強制するウォーターフォール方法論とは違いますね）。実際、反復的なアプローチによって、例えば「アジャイルUX」と「アジャイルソフトウェア開発」を組み合わせて機能性を構築したり、デザインと開発のチームメンバーが連携して作業できるようになります。

プロジェクト管理におけるイテレーション

最後に、イテレーションは、より高いレベルでも機能し、それによって製品やプロジェクト管理プロセス全体の包括的なテーマとなることもあります。プロジェクトのステークホルダーに、ライフサイクルを通じて製品の方向性に関する定期的な最新情報や、主要な成功メトリクスを測るのに使えるデータを提供しますからね。

さらに、イテレーションは DesignOps や DevOps などの社内業務の改善にも活用でき、それによってチームの士気と生産性が大幅に上がります。

リサーチにおけるイテレーション

イテレーションは、リサーチによって促進されるべきです。デザインにおけるフォーカスグループであれ、開発におけるブラウザテストであれ、リサーチで学んだことはすべて、次のイテレーションを推進するために使用されるべきです。

場合によっては、リサーチは非同期かつ独立して行うことができ、「デザイン」または「開発」された成果物を得る必要がないこともあります。例えば、ナビゲーションのラベルや構造を考えるとき、デザイナーは様々な形式的・総括的なカード分類を繰り返し、最終的にシンプルな要件にたどり着くことができますよね。

反復的なデザインプロセスとはどんな感じか

反復的なデザインプロセスは、方法論によって異なりますが、一般的には、計画、アイデア出し、プロトタイプ、テスト、レビューという５つのステージにハッキリとと分けてまとめることができます。

ステージ１：計画

イテレーション（反復）は早いだけでなく、効果的に行われないといけないので、特定のユーザーニーズに焦点を当てたイテレーションを続けるには、ある程度の計画が必要です。

計画段階は、イテレーション中にどの問題を解決するかを決めることがほとんどです。時にはステークホルダーの観察に耳を傾けることもありますが、ほとんどの場合、以前のイテレーションやフィードバックフォームなどの別の場所からユーザーのフィードバックを直接集めるということになります。

いずれにせよ、この段階は常に「リサーチ」という燃料を得て、「目的」によって動かされます。多くのデザイン方法論では、問題は「機会」としてとらえ直され、多くの機会が存在する場合には、方法論は「ステークホルダーは製品の改善に一番いい機会であると思われるものに投票すべきである」述べています。例として、デザインスプリントの方法論は、機会を選択するために「How might we（どのようにすれば〜できそうか）」と「ドット投票（多数決のようなもの）」に依存しています。

つまり、計画段階では、「今回のイテレーションで何を改善すべきか」という問いに答えられるはずです。

ステージ２：アイデア出し

この段階では、アイデアの良し悪しに関係なく、スケッチによってできるだけ多くのアイデアを出すことが目的です。これは通常、最高のアイデアを磨き上げ、最悪のアイデアを脇に置くという、それ自体が反復的なデザインプロセスそのものです。

創造力を維持するために、Crazy 8s（チームメンバーが30~60秒ごとに合計8つの異なるアイデアを考え、それぞれを紙に書き出す手法）、Four-Step Sketch（1）重要な情報を確認、2）紙の上でデザイン、3）複数のバリエーションの検討、4）詳細な解決策の作成を元にコンセプトを作り上げる）などの反復的な方法論があり、プロセスを無駄なく、楽しく、生産的に保つために時間制限を設けています。

最終的に、我々やチームは、少し洗練されたアイデアを１つ選び、前進させることになります。そして選ばれたアイデアは、プロトタイプ担当が問題提起、明確に定められた実行可能なタスク、そして詳細で十分なビジュアルガイドを得ることができるように、よくユーザーストーリーとして表現されます。

ステージ３：プロトタイプ

プロトタイプの段階になると、特定のアイデアに集中するため、反復的なデザインプロセスが少しシンプルに感じられるようになります。

生産性を最大化するために、通常は時間制限が設けられているので、UXPin のようなワークフローをサポートするデザインツールを使うのがベストであり、製品チームが手元にデザインシステムを用意して、UXデザイナーがそれを徹底的に理解すれば、さらなる効果が期待できます。

ステージ４：テスト

テスト段階は、解決しようとしている問題をプロトタイプが解決しているかどうか、また、どの程度解決できているかの確認を目的としています。何かを実装したり、リサーチを統合したりすることはなく、適切なリサーチ方法を用いて、ソリューションについてできるだけ多くのことを学び、フィードバック、発見、インサイトを文書化するだけです。

ステージ５：レビュー

最終段階であるレビューでは、リサーチを総括して、ソリューションの有効性について結論を出します。

結論は通常、以下のカテゴリーのいずれかに分類されます：

「すばらすい」：実装の時期
「いいですけど、、、」：プロトタイプに戻る
「不具合あり」：アイデア出しに戻る

デザインイテレーションプロセスの「やるべきこと」と「やってはいけないこと」

やる：失敗を恐れない

たとえ失敗したとしても、失敗を恐れず、試行錯誤し、「やってはいけないこと」を学びましょう。失敗は避けられないものなので、早めに解決して、そこから学ぶようにするのが一番です。

やる：柔軟に行く

デザインの方法論は、イテレーションに時間をかけすぎず、自由な創造性を発揮できるように厳しいルールを設けていますが、それでもある程度の自由度は認められています。最終的に、どの機会を優先するか、どのタイミングでイテレーションやテストを行うか、また、同時にいくつのデザインイテレーションプロセスを実行するかは、私たち次第なのです。

その判断は、あらゆるデータやリサーチを駆使しながらも、直感と経験によるところが大きいです。

やる：非同期での作業

ツールやチームメイトなど、利用できるすべてのリソースを活用し、他のデザイナーが非同期で製品の他の側面を解決でき、デベロッパーも有効な解決策を実装し始めることができることによって、最短時間で最大の成果を得ることができます。この２つが行われることで、製品のタイムラインが大幅に短縮されるのです。

やる：連携して耳を傾ける

どの問題を解決すべきなのか？どのイテレーションがベストか？プロトタイプをテストする準備はできているか？このフィードバックにはどんな意味があるのだろう？チームメイトから新鮮な視点と独自の専門知識を得ることで、このような疑問に自信をもって答えられるようになります。

やらない：すべてを解決しようとする

デザインイテレーションプロセスで解決する問題が決まったら、それ以外の問題を解決しようとするのは避けましょう。テストや観察の時に改善すべき点が見つかるのは当然ですが、それが後のイテレーションで良い出発点になるかもしれないので、それは書き留めておきましょう。

スコープクリープ（デザインイテレーションプロセスに忍び込む新たな問題）を許すと、気が散ってスピードが落ち、イテレーションが主要なメトリクスに与える影響を測るのが難しくなるだけですからね。

まとめ

デザインイテレーションの基礎は理解できたので、次のステップは、自身やチームに合った反復デザインの方法論を選択し、全員がそれを習得するために十分な時間を確保しましょう。

ただ、完璧なデザイン手法なんてないので、もしうまくいかない場合は、ワークフローを変更するか、別の方法を試すことを検討してください。

UXPinによるイテレーション（反復）デザイン

UXPinは、製品チームの速やかなイテレーションやアイデアのコラボレーション、実用的なフィードバックの獲得、そして最終的にはコードベースの高忠実度プロトタイプをサポートし、デベロッパーがより多くの作業を行えるようにするために作られたエンドツーエンドのデザインツールです。

UXPinでは、デベロッパーが HTML、CSS、JavaScript に変換されたプロトタイプの仕様の実装、デザインシステムのドキュメントの共同作成、さらにUXPin Mergeを使った実際のReactコンポーネントをプロトタイプにインポートできるため、検証済みのイテレーション作業をより速やかにして生産に移ることができます。

気になった方は、まずは14日間の無料トライアルからぜひお試しください。

Discover Merge

The post デザインイテレーションプロセス入門 appeared first on Studio by UXPin.

NPMと言うのは？把握しよう！

tomotaka@xenon.io — Sun, 01 Oct 2023 01:45:31 +0000

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

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

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

NPM(Node Package Manager)とは

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

NPMは2種類あります：

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

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

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

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

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

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

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

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

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

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

NPMレジストリ

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

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

依存関係とは？

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

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

開発依存とは？

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

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

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

package.jsonファイルとは？

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

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

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

package-lock.jsonとは？

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

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

NPMの使用方法

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

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

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

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

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

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

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

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

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

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

UXPin Mergeで連携の強化

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

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

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

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

クロスプラットフォーム・エクスペリエンス【徹底ガイド】

Haruka Ikoma — Thu, 21 Sep 2023 01:14:01 +0000

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

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

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

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

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

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

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

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

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

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

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

ビジネスとしての価値

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

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

競争力

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

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

インクルーシブ

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

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

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

１．一貫性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

５．アクセシビリティ

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

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

６．適応性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Try UXPin for free

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

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

tomotaka@xenon.io — Thu, 21 Sep 2023 00:50:46 +0000

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. デザインの一貫性

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

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

3. 共有可能

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

8. デザインの拡張性

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

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

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

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

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

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

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

PayPal

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

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

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

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

Teampassword

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

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

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

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

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

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

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

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

プロトタイプ

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

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

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

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

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

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

Discover Merge

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

プロダクトデザイン完全ガイド – デジタル製品をデザインする

Haruka Ikoma — Wed, 06 Sep 2023 02:30:50 +0000

多くの人にとって “使いやすい” デジタル製品がある一方で、使いづらくてイライラしたりするデジタル製品に違いがあることを不思議に思ったことはありませんか。それは、「効果的なデジタル製品のデザイン」が鍵なんです。

そこで、このガイドでは、UX（ユーザーエクスペリエンス）、プロトタイプ、反復開発の重要性に焦点を当て、デジタル製品のデザインプロセスを包括的に解明します。また、プロダクトデザインで避けるべきよく起きやすい落とし穴も見ていきます。

主なポイント：

プロダクトデザインとは、ユーザーニーズ、ビジネス要件、技術的制約に沿ったデジタル製品のインタラクティブなインターフェースを作成するプロセスである。
プロダクトデザイナーとは、製品のデザインをつくる担当者のことであり、この仕事をするには、学位の取得やコースの受講、プロダクトデザインに関する知識がある。
プロダクトデザインには特徴的なステップが５つあるが、それは直線的なプロセスではなく、プロダクトデザイナーは、新たなインサイトを発見した場合に特定のステップに戻ることがある。
そのステップの１つとして、コードで製品を構築する前に、行動やユーザージャーニーを示す製品のインタラクティブなモックアップを作成する「プロトタイプ」である。
うまくいくプロダクトデザインは、UXライティングを重視し、エラーの管理、ユーザーに焦点を当て、イテレーションを真剣に行う。プロダクトデザインの成功例としては、 Apple が挙げられる。

本記事では、日常生活で役にたつデジタル製品をつくることに情熱がある全ての人に向けて、決定的なリソースの提供を目標としています。

革新的なMergeが持つ技術によって、製品開発プロセスを10倍速くデザインしてみましょう。インタラクティブなコンポーネントをドラッグ＆ドロップするだけで、最終製品のように動作し、デザインシステムに従った完全な機能性を持つプロトタイプを構築できます。詳しくはこちらのページをぜひご覧ください。

プロダクトデザインとは

デジタル製品のデザインとは、人が抱える特定のニーズや問題に対応するソリューションを生み出すことであり、以下は、デザイナーが従うべきプロダクトデザインのプロセスです：

ターゲットユーザーについて知る – 誰に向けてか？どのように行動するのか？何が好きで何が嫌いか？など。
ユーザーが直面する課題を特定する
その課題に対する潜在的な解決策をブレインストーミングする
自身の製品が観客の生活にどのようにフィットするかを見出す
デザインをテストし、実際に使うであろう人達からのフィードバックを集める。

プロダクトデザインについての詳細やそのステップについては、こちらの記事をお読みください：基礎が学べる！プロダクトデザインとは？

プロダクトデザイナーと UXデザイナー

プロダクトデザイナーとUXデザイナーは、どちらもデジタル製品の開発において重要な役割を担っていますが、共通点はあるもののまったく別の職種です。

UXデザイナーは、主に「製品がユーザーにとってどのように感じられるか」に焦点を当て、デザインプロジェクトの初期段階では、ユーザーの行動を研究して、彼らのニーズや動機を理解することに取り組みます。

また、UXデザイナーは、直感的で親しみやすいユーザージャーニーを作ることを目標としているので、各ステップの流れを注意深く考えます。ユーザーが確実に最も簡単な方法で目標を達成させたいという思いで、デジタル製品をより使いやすくするためにも認知心理学の原則をデザインに取り入れることもあります。

一方、プロダクトデザイナーは、UXのみならず、ビジネス目標や技術的制約も含めた幅広い役割を担っています。

最初のアイデアから最終的な実装まで、製品開発のあらゆる面に関与し、大局的な視点に立って、それぞれのピースが全てどのように組み合わさり、一貫した全体像を作り上げるかを考えます。これには、「製品がどのように見えるか」の　UI（ユーザーインターフェース）、「どのように機能するか」のインタラクションデザイン、「より大きな市場にどのように適合するか」などが含まれます。

つまり、UXデザイナーがユーザーの「ジャーニー」と「エクスペリエンス」に焦点を当てるのに対し、プロダクトデザイナーはビジネスや技術的な側面も含め、全体的な視点から製品全体を考えます。どちらもユーザーに愛される製品を作ることを目指しますが、そのアプローチや焦点を当てる領域は微妙に違います。

詳しくは、「プロダクトデザイナーと UX デザイナーの比較分析」の記事をお読みください。

プロダクトデザインの方法

ここでは、ユーザビリティをデジタル製品のデザインプロセスの中心に据えるための５つのステップについて見ていきましょう。

ステップ１：ユーザーに共感する

これは言うまでもなく、プロダクトデザインにおいて最も重要なステップです。ユーザーを理解することは、彼らの属性を知り、共感することでもあります。つまり、ユーザーが持つニーズ、習慣、フラストレーション、欲求など、自身の製品に関連するものを見つけるということです。

そのために、インタビューやアンケートの実施、実際環境でのユーザーの観察などを行います。ユーザーについて知れば知るほど、彼らの生活に親しみやすくフィットする製品をデザインするのに有利になりますからね。

ステップ2：問題の特定

ユーザーを理解したら、次のステップは「直面している問題の特定」です。

ここでは、ユーザーとの共感から得たインサイトを、ユーザーが経験している主な問題を捉えた明確な「問題ステートメント」に変換します。

そのステートメントは、指針となるべく明確かつ具体的である必要がありますが、過度に規定的になるべきではなく、柔軟性とクリエイティブなことが非常に重要です。

ステップ３：アイデア出し

このプロダクトデザインのステップでは、できるだけ多くのアイデアをブレーンストーミングすることが重要です。創造力を解き放ち、特定された問題を解決するためにできそうな方法を色々と考えてみましょう。

マインドマップ、スケッチ、ストーリーボードなどのツールで、頭に浮かぶアイデアを視覚化することができます。この時に、実用性や実現可能性は気にしないでください。目標は質ではなく量であり、アイデアが多ければ多いほど、次のステップのためのより多くの素材が得られます。

ステップ４：プロトタイプ

ここでは、浮かんだアイデアを実際に「プロトタイプ」を作成し、 ”製品のミニバージョン” として見てみましょう。

最初に、大まかなスケッチなどのペーパープロトタイプから始めます。これによって、時間やリソースをあまりかけずに、製品がどのように機能するかを簡単に確認することができます。

基本的な機能が十分だと思ったら、忠実度の高いプロトタイプに進みます。これはより詳細でインタラクティブなもので、最終製品がよりよく表現されます。

ステップ５：テスト

最後のステップでは、製品がデザインされた目的であるその「問題」が実際に解決されているかどうかを確認します。

プロトタイプを実際のユーザーに触れてもらい、様子を観察しながらフィードバックに耳を傾けましょう。

このステップは、学んで改善するためのものであって、自分が正しいことを証明するためのものではないということを覚えておいてください。問題があったとしても落ち込まず、製品を改良するチャンスととらえる機会として考えましょう。

こちらのトピックについては、「How to Design a Product in 5 Steps」（英語）の記事をご覧ください。

製品の UXデザインでの一番のコツ

以下のポイントをおさえておくことで、製品のUX 向上につながるはずです。

UXライティングを無視しない

UXライティングで、デジタル製品のための明確で有用なテキストが作られ、それによって混乱は減り、ナビゲーションは強化されます。ここでは、UXライティングでの絶対おさえておくべきコツを５つご紹介します：

コピーは短く簡潔に：目的は「必要な情報をできるだけ少ない言葉で伝えること」である。
最優先はアクセシビリティ：全ユーザーが理解しやすい文章にし、専門用語や口語体を避ける。
ビジュアルやフォーマットを使ってわかりやすく：言葉で説明するよりも画像で説明した方がわかりやすい場合は、画像で説明し、大きなコピーの塊は、より短く、より読みやすいリストに分ける。
能動態を使う：それによって文章がわかりやすくなる。
ストレートに話す：気の利いたことやユーモラスなことを使いすぎない（まわりくどくなりすぎない）ようにする。

常にデザインをテストする

常にデザインをテストすることは非常に重要です。そうすることで、製品の見た目だけでなく性能も上がって、ユーザーの期待に応えられるようになりますからね。

その際は様々なテスト方法を取り入れるといいでしょう。ターゲットユーザーを代表するユーザーからフィードバックを集めたり、オンラインプラットフォームを使って多くのリモートユーザーにアクセスしたり、詳細なインサイトを得るために対面パネルを実施したりしましょう。

早期のテストだと、まだ修正しやすく費用対効果の高い段階で問題が見つかります。そしてこれと同じくらい重要なことですが、早期のテストで優れたUXの提供に集中し続けることができ、最終的にユーザーに評価され愛される製品につながります。

ユーザーの行動を定期的に観察する

デザイナーとして、ユーザーが直感的に製品を理解してくれると思いがちですが、このようなミスを避けることで、ユーザーの行動を常に観察しましょう。ユーザーのインタラクションをモニタリングすることで、予期せぬ行動や誤解を発見することができ、現実を確認することができます。

テストは大規模である必要はありません。たった５人のユーザーでの検証でも製品が持つ７５％の問題が見つかることがあり、最終的に製品の直感性と使いやすさを知る上で役に立ちます。

ユーザーエラーに対処する

プロダクトデザインには、ユーザーのエラーに対処するための重要なステップが以下のように２つあります：

ユーザーがミスをしたときに手を差し伸べる。
UX を微調整するためにエラーを分析する – 例えば、ユーザーがフォームに記入する際に［必須事項］を見逃した場合、明確なエラーメッセージがそのユーザーを導くはずであるが、多くのユーザーがミスから立ち直れない場合は、デザインに見直しが必要である。

ユーザーの技術スキルやデバイスはさまざまであるため、あるユーザーにとっては些細な不具合でも、別のユーザーにとっては大きな障害になる可能性があることを忘れてはいけません。そのような障害を最小限に抑え、誰にとっても使いやすい体験を保証することがデザイナーの役割ですからね。

変更は徐々に加える

製品に変更や改良を加える場合は、すべてを一気に加えない方がいいです。

というのも、一度に多くの変更を加えてしまうと、どの変更がうまくいって、どの変更にさらなる微調整が必要かの判断が難しくなってしまうからです。

別の言い方をすれば、調整を１つ２つするだけで、解決しようとした問題がその変更で解決されているかどうかや、ユーザーがその変更を理解し、有益だと感じているかどうかを観察することができます。このアプローチだと、それぞれの変更の有効性を明確に把握することができるのです。

製品の UXデザインに関するヒントをお探しの方は、こちらの記事でも詳しく説明していますので、ぜひお読みください：「Best Tips on Product UX Design」（英語）

プロダクトデザインのためのプロトタイプの一番のコツ

プロトタイプとは、製品の基本的な機能を示す簡単な模型のことで、これによって製品のアイデアを現実のものにすることができます。この重要なデザイン段階を最大限に活用するためのコツを以下でご紹介します。

プロトタイプで何を見せるかを決める

プロトタイプのデザインを始める前に、以下の重要なステップに従いましょう：

プロトタイプに必要な機能について合意する。
主要なステークホルダーがプロトタイプで確認したいことを明確に理解する。
デベロッパーと製品の機能について話し合い、潜在的な技術的問題を特定する。
そのプロトタイプが現実的に完全な製品にできるかどうか、本当のビジネスチャンスになり得るかどうかを考える。

このような情報を前もって集めることで、プロトタイプのデザインが明確になり、時間とリソースの節約になります。

時間的なプレッシャーがある場合は、協働的ラピッドプロトタイピングを利用する

厳しい納期に追われている場合、ラピッドプロトタイピングでテスト段階がより早く進みます。

これは、最短１日で製品の実用的なモデルを作成するという考えです。出来上がったプロトタイプは通常、より簡素で洗練されてはいませんが、「構築、テスト、改良、繰り返し」というサイクルである反復的なデザインに重きが置かれています。

デジタルホワイトボードや、再利用可能なコンポーネントでプロトタイプを作成できる「Merge テクノロジー」が搭載された UXPin のような協働的なプロダクトデザインツールを使うと、チームメンバーは一緒に作業しやすくなり、それによって、お互いにアイデアを出し合いやすくなり、実行可能なデザインをより早く思いつくことができます。詳しくはこちらをご覧ください。

忠実度を選ぶ

「忠実度」として知られる特性である「プロトタイプをどの程度詳細かつ最終バージョンに近づけるべきか」を決定する際には、プロトタイプを誰に見せるのか、またデザインプロセスのどの段階にいるのかを考える必要があります。

シンプルなスケッチや基本的なワイヤーフレームのような 低忠実度プロトタイプは、社内のデザインチームのレビューには十分であり、通常は、同僚がアイデアを視覚化して議論を喚起するのに十分なものです。

高忠実度プロトタイプはもっと洗練されたもので、見た目や動作が最終製品に近いものであり、ターゲットユーザーからのフィードバックを集めるのに適しています。

中忠実度のプロトタイプは、デザインチームの一員でもターゲットユーザーでもないステークホルダーやチームメンバーに見せることができ、そのプロトタイプに含まれる詳細レベルは、低忠実度と高忠実度の中間です。

プロトタイプを実際のユーザーにテストしてもらう

同僚と機能デザインのテストをすることは有益かもしれませんが、実際のユーザーが直面する問題が見逃される可能性があります。

だからこそ、最終的に完成品を使うことになる人達にプロトタイプをテストしてもらうことが非常に重要になります。

前のセクションで述べたように、テストを行う前に、基本的で忠実度の低いプロトタイプを使うのか、より詳細で最終製品に近いものを使うのかを決める必要があり、そしてその決定は、どのようなフィードバックを求めているか、テストから何を学びたいかに影響します。

また、それでエンドユーザーのペルソナや、彼らが製品を使用するシナリオを特定することができ、それによって使用状況の理解や、それに応じたテストの計画を立てられるようになります。

実際に会ってテストすれば、ユーザーの反応を見たり質問をしたりできるので、より詳細なフィードバックが得られます。あるいは、より多くの潜在的なユーザーと関われるオンラインでのプラットフォームを利用するのもいいでしょう。

以下の記事に、プロトタイプのプロダクトデザインのヒントがさらに５つ紹介されています： プロトタイプのプロダクトデザイン – ９つのヒント

デジタル製品のデザインのベストプラクティス

Apple

Apple は、「多様なユーザーのニーズを念頭に置いてデザインし、アクセシビリティとユーザビリティを上げるために製品を常に改良している企業」の輝かしい例として際立っています。

視覚に障がいがある人のためにナレーション、ズーム、点字サポートなどの機能を提供しており、それによって、ユーザーは画面上や周囲の環境を理解することができる。
聴覚に障がいがある人のために字幕が用意されており、動画から会話まであらゆるものに対応している。また、こうしたユーザーが聞こえやすくなることを目的とした特注の機器も製造している。
音声ナビゲーションや目の動きで操作できるデバイスなど、運動面にハンデがある人に対応する機能を備えている。つまり、ユーザーはデバイスに触れることなく操作できるということである。
認知的な課題は、気が散るようなバックグラウンドノイズや視覚的なものをフィルタリングできるような、思考を凝らしたデザインによって解決されている。

画像出典: Apple

Discord

コミュニケーションプラットフォームである「Discord」は、当初はゲーマーが簡単に交流できるようにデザインされましたが、その後拡張され、現在ではユーザーがさまざまなトピックについて話し合うことができるようになりました。気が散ることなく使えるほどシンプルなデザインでありながら、特定のユーザーのニーズに応えるのに十分な深みも備わっています。以下に特徴を挙げてみましょう：

「サーバー」やチャットルームに参加したり、作成したりする機能があり、それは大規模な公開グループにも、小規模なプライベートグループにもなれる。
サーバー内に「チャンネル」を作り、それによって、さまざまなトピックに関するディスカッションを分けて整理しておくことができる。
ダイレクトメッセージや「Ping（通知）」により、個々のユーザーと迅速かつプライベートなコミュニケーションができる。
ユーザーは音声または文字によるコミュニケーションを選択できる。
カスタマイズ可能な UI（ユーザーインターフェース）により、文字、絵文字、ユーザー名、アイコンを好みに合わせて個別化できる。

TikTok

大人気なこのSNSアプリは、そのユニークなデザインでUXを一変させました。

それには、没入型視聴のためのフルスクリーン配信、明確なインタラクティブ機能、個別化された短いコンテンツのエンドレスストリーム、多様なユーザーニーズに対応する機能などが含まれます。

このようなデザイン要素と、自動キャプションや写真感度の警告などのアクセシビリティオプションの追加により、TikTokは世界的に人気があって使いやすいアプリとなりました。そしてその成功は、思慮深いプロダクトデザインの重要性を裏付けています。

ちなみに今回は、５つある最良のプロダクトデザイン例のうち３つだけを取り上げました。

良くないプロダクトデザイン例とその理由

前のめりなポップアップ

Webサイト上ですぐに表示されるポップアップは、ユーザーにとって大きな反感を買う可能性があります。何が提供されているのかを探るチャンスさえ与えられないうちに、ニュースレターへの登録や何かのダウンロードを要求されるのですから、これは邪魔で不快なものになりかねませんよね。

ここでは、「サイトを訪れる人は、多くの場合は限られた時間と注意力の中で答えを求めている」ということを頭に入れておくことが重要です。ポップアップに振り回されると、せっかくの体験が台無しになり、別の選択肢に行かれしまうかもしれませんからね。

もちろん、ポップアップが全て悪いというわけではありません。タイミングが重要なのです。ユーザーを説得して追加サービスやキャンペーンに申し込ませようとする前に、まずはコンテンツに興味を持ってもらう方が良いですよね。

ややこしすぎるナビゲーション

例えばAWS（Amazon ウェブサービス）は、クラウドコンピューティング・サービスを幅広く提供する人気のプラットフォームですが、その使い方はすごく難しいです。

製品のタブをクリックすると、大量の選択肢が表示され、特にモバイルではスクロールし続けなければならず、圧倒されることがあります。これだとユーザーはイライラしてしまい、必要なものが見つかりにくくなります。

AWSのデザインは美しいですが、使いづらいナビゲーションはUXを向上するためにも改善する必要があります。そうすれば、訪問者が探しているものを見つけられず、すぐにサイトから離れることもなくなるでしょう。

出典：AWS

差別的な表現に気をつける

プロダクトデザインにおいて、意図していなくても特定のユーザーグループに差別的な印象を与えてしまうケースがあります。

プロダクトデザインのよろしくない例については、こちらの記事（英語）で紹介されています。

就職に役立つプロダクトデザインの学位

プロダクトデザインやUXデザインなど、デザインのキャリアにつながる道は主に３つあります：

１．学士取得

大学でデザインの学位を取得すれば、この競争の激しい分野で他より優位に立つことができます。

大学では、色彩、タイポグラフィ、レイアウト、アイデアコミュニケーションなど、あらゆる専門分野を総合的に学ぶことができ、プロの世界で高く評価されるフィードバックの授受のスキルも養うことができます。

また、プログラミングの学位を取得すれば、プロダクトデザインに影響を与えうる技術的制約を理解することができることから、プログラミングの学位も検討の価値アリです。

（＋デザイン学位の主なメリットとして、より高い給与につながる可能性がある点です。）

ただし、コースに入るためには事前にポートフォリオの提出を求められます。その他にも、学費は高額になる傾向があり、学位取得修了までに長い時間がかかるという点も考慮した方が良いでしょう。

２．独学

独学は、実行可能で柔軟なルートです。（…自分で管理できるならの話ですが。）

Don Norman氏の「The Design of Everyday Things（日常品のデザイン）」のような本は、人間中心のデザインに欠かせないインサイトを与えてくれますが、プロダクトデザインは複雑であり、ただ読むだけでは不十分です。そのためメンターシップ、インターンシップ、オンラインコースなどを通して業界の専門家から学ぶことは非常に貴重なものとなります。

また、人脈作りも重要です。将来役に立つかもしれないので、同級生や業界関係者とのつながりを維持しておきましょう。

参考になる資料には以下のようなものがあります（英語）：

３．デザインのブートキャンプコース

デザインブートキャンプでは、選択した分野で短期間で学ぶことができます。

このようなプログラムは、対面式、オンライン、またはハイブリッド（半々）で受講することができ、奨学金や後払い制度を設けているところもあります。

新卒者であれ、キャリア転換を目指すプロフェッショナルであれ、ブートキャンプコースによって効率的にこの分野に入ることができ、知識のギャップを埋めることができます。

以下に、コースをいくつか挙げてみましょう（英語）：

プロダクトデザインのキャリアについてのより詳しいガイダンスについては、プロダクトデザインプログラムの記事をお読みください。

プロダクトデザインに関するオススメ書籍

以下４つの作品は、プロダクトデザインの分野に興味がある人にとって必読です。

「Hooked: How to Build Habit-Forming Products」Nir Eyal著

この本では、多くの成功した製品で使われている４つのステップである「フック・モデル」に焦点を当て、ユーザーを惹きつけて離さない製品を作るための貴重なインサイトを提供しています。

「Lean Startup」Eric Ries著

価値主導の製品を生み出すためのリースのガイドは、デザイナーにとって必読ともいえます。ビジネス戦略やユーザーニーズに最適なデザインを迅速にプロトタイプ化して、テストおよび反復する方法を教えてくれます。

「Laws of UX: Using Psychology to Design Better Products & Services」Jon Yablonski著

この本では、UXデザインにおける人間心理に重点が置かれ、広く使われているアプリの例を使い、使いやすい製品を作るために心理学の原則を適用するための実践的なガイドを説明しています。

「Continuous Discovery Habits: Discover Products That Create Customer Value and Business」Teresa Torres著

この本では、製品やサービスがユーザーにとって適切で価値のあるものであり続けるために、デザインにおける継続的な革新の重要性に焦点を当てています。

上で挙げた本などの詳しいレビューはこちら： Product Design Books that Will Push Your Skills Forward

デジタル製品においてのデザインの極意

デジタル製品のデザインは、機能性、ビジュアル、ユーザーニーズのバランスを取る必要があることから、多様で複雑な分野です。

今日のデジタル時代において、ユーザーにとって自然と「また使いたい」と思える製品をデザインすることの重要性は多くの場所で語られています。デザイナーとして、あなたの仕事が誰かの人生に大きく影響を与えるかもしれませんからね。

このブログで、みなさんがデジタル製品においての「デザイン」について多くのインサイト得られ、単に便利で見栄えがいいだけでなく、本当にユーザーにとって豊かな体験につながるデジタル製品を生み出せるようになりますように。

UXPin Mergeのテクノロジーを使って、実際にクリックできる製品のプロトタイプを作成してみましょう。UXPin Mergeでは、デザイナーとデベロッパーが「信頼できる唯一の情報源（Single source of truth）」を使えるため、プロダクトデザインを最初から共同作業で行うことができます。Mergeで製品をより早くリリースしましょう。14日間の無料トライアルはこちらより。

The post プロダクトデザイン完全ガイド – デジタル製品をデザインする appeared first on Studio by UXPin.

MUI とは？MUIについて何を把握すべき？

Haruka Ikoma — Wed, 23 Aug 2023 01:05:31 +0000

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

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

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

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

MUI とは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. デザインの一貫性

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

4. 拡張性

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

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

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

5. 容易なメンテナンス

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

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

https://t.co/OoMuzMpoMf 🚀MUI is a powerful library with extensive documentation. Check out how easily you can access the documentation in UXPin Merge. 🎉 Request Merge access and use MUI.

Many thanks to @MUI_hq 🙌#uxpinmerge #mui #reactlibrary #FrontEndDevelopment pic.twitter.com/CtAq2Y9bmJ
— UXPin (@uxpin) January 27, 2022

6. アクセシビリティ

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

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

7. スキルの強化

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

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

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

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

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

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

興味深い事実と数字

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

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

UXPinのMUI5キット

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

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

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

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

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

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

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

プロダクトデザイナーとUXデザイナーの比較分析

tomotaka@xenon.io — Thu, 17 Aug 2023 03:15:47 +0000

デジタルプロダクトデザインの役割として、プロダクトデザイナーとUXデザイナーという2つの職種があり、よく混同されます。基本的には、どちらも製品開発に焦点を当て、問題解決にデザイン思考プロセスを用いる職種です。では、プロダクトデザイナーとUXデザイナーの違いは何なのでしょうか？あなたはどちらのポジションに向いているのでしょうか？また、あなたの会社では両方の役割を果たす必要があるのでしょうか？

UXPinは、UXチームとプロダクトチームのコラボレーションを強化するために作られたデザインツールです。UXデザイナーとプロダクトデザイナーは、UXPinを使用して、デザインプロセスを通してコメント、タスクの割り当て、コミュニケーションを行うことができます。無料トライアルに登録して、デザインチームのためのUXPinのコラボレーション機能をお試しください。

UXデザイナーとは？

UXデザイナーは、ユーザビリティの問題を解決し、製品が論理的な流れに沿っていることを確認することに重点を置きます。UXデザイナーは、お客様が個々の要素やコンポーネントをどのように操作するかを検討するユーザーインターフェースデザイン（UIデザイン）も担当します。 UXデザイナーは初期のユーザー調査や市場調査に深く関わり、ユーザーの問題を特定して理解し、それを解決するためのデザインソリューションを開発します。

新製品や新機能の場合、UXデザイナーは、UI要素やコンポーネントのデザインを含め、コンセプトを実用的なプロトタイプに仕上げる責任があります。 UXデザイナーは、認知心理学を学び、UXデザイナーは、顧客が個々の要素やコンポーネントとどのように相互作用するかを検討するユーザーインターフェース（UI）のデザインも任されることがあります。

UXデザイナーの職務内容と責任

ユーザー、市場、競合他社の初期調査
ユーザーペルソナ、エンパシーマップ、ジャーニーマップの作成
ユーザーエクスペリエンスデザイン、インタラクションデザイン、ビジュアルデザイン、ユーザーインターフェースデザイン
情報アーキテクチャの設計
ユーザーフローとナビゲーションの設計と最適化
UXライティング（たまに）
ユーザビリティテスト
ワイヤーフレームやモックアップの設計
プロトタイプ作成（低忠実度、高忠実度)
デザインシステムガバナンス
製品チームと協力して新製品や新機能の開発
デザインハンドオフのためのドキュメントやアセットの作成

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

創造的かつ批判的思考
問題解決能力
グラフィックデザイン
様々なデザインツールを使いこなす能力
コミュニケーションとコラボレーション
プロジェクトマネジメント
共感する能力
パブリック・スピーキング（インタビュー、プレゼンテーション)
技術的に優れている
リサーチ力

米国におけるUXデザイナーの平均給与

Glassdoorによると、2021年における米国のUXデザイナーは平均年収95,944ドルを得ています。

プロダクトデザイナーとは？

プロダクトデザイナーは通常、既存のデジタル製品を扱う仕事です。UXデザイナーと同じような仕事をしますが、既存の製品の開発、新機能の設計、メンテナンスに重点を置きます。

また営業やマーケティングチームと密接に連携し、競合他社や市場、ユーザーの調査を通じてビジネスバリューの機会を見出します。デジタル製品が市場のトレンドやお客様の要望に合わせて進化し、競争力を維持するために重要な役割を担っています。

プロダクトデザイナーは、新しい要素やコンポーネントを設計するのではなく、ドラッグ＆ドロップ式のデザインツールを用いて、既存のデザインシステムを利用してユーザーインターフェースを構築するのが一般的です。

PayPalのプロダクトチームは、UXPin Mergeを使用して製品インターフェースを構築しています。UXPin のデザインエディタを会社のリポジトリに同期させることで、製品デザイナーは完全に機能するコードコンポーネントを使用して新製品や機能を設計しています。 PayPalの製品デザイナーは現在、Mergeテクノロジーの力を利用して、1 ページで完全に機能するプロトタイプを 10分以内に構築しています。これは、経験豊富な UXデザイナーが一般的なベクトルベースのデザインツールを使用した場合の 8 倍の速さです。

UXPin Mergeの詳細と、サインアップして貴社へのアクセスをリクエストする方法については、こちらをご覧ください。

プロダクトデザイナーの仕事内容と責任

製品管理
定期的なユーザー、市場、競合他社の調査
ユーザーのニーズに沿ったビジネスチャンスを特定するためのリサーチ
製品が常に適切で最新の状態であることの確認
製品ロードマップの作成と管理
製品戦略の策定と実行
製品の設計・開発が予算に見合ったものであることの確認
製品による市場シェア、収益の増加、新規ユーザーの獲得方法の特定
製品設計のための設計・開発プロセスおよび関連する制約条件の理解
営業およびマーケティングチームとの連携
ユーザーエクスペリエンスデザイン、ビジュアルデザイン
UXデザイナー、開発者、その他の関係者にアイデアや仕様を提示
UXデザイナーとのコラボレーションによるカスタマーエクスペリエンスの設計
ユーザビリティテスト
プロトタイプ（主にハイフィデリティ）のデザイン

プロダクトデザイナーのスキルセット

HTML、CSS、Javascriptの理解
クリエイティブでクリティカルな思考
長期的な計画と戦略
プロダクトデザイン
問題解決
プロジェクトマネジメント
共感する能力
パブリック・スピーキング（インタビュー、プレゼンテーション)
技術的に優れている
ビジネスの洞察力
データサイエンス
リサーチ力

米国におけるプロダクトデザイナーの平均給与

Glassdoorによると、2021年における米国でのプロダクトデザイナーは平均年収105,448ドルを得ています。

類似点と相違点

UXデザイナーとプロダクトデザイナーの間には、相違点よりも類似点の方がたくさんあります。 UXデザイナーとプロダクトデザイナーの最も大きな違いは、製品のライフサイクル（開発、導入、成長、成熟、飽和、衰退）における特定のタスクではなく、そのデザインの役割にあります。 UXデザイナーは、市場に出る前の製品や機能を開発します（製品ライフサイクルの開発段階）。一方、プロダクトデザイナーは製品の寿命が尽きるまで製品を管理し、改良し進化させます。 UXデザイナーは、デザインシステムの更新が必要な場合や、プロダクトデザイナーがユーザビリティの問題を解決するのに苦労している場合に、プロジェクトに戻ることが多い。

デザインアプローチ

UXデザイナーとプロダクトデザイナーは、人間中心のアプローチでデザイン思考プロセスを適用します。ユーザーのニーズに基づいて製品を設計します。
よくあることとして、UXデザイナーはユーザーを重視し、プロダクトデザイナーはビジネスニーズを重視すると勘違いされます。しかし、UXデザイナーもプロダクトデザイナーも、リサーチやデザインの際には常にユーザーとビジネスの両方を考慮します。
UXデザイナーやプロダクトデザイナーは、クロスファンクショナルなチームで仕事をすることが多いので、優れたコミュニケーションスキルが求められます。

リサーチ

UXデザイナーとプロダクトデザイナーは同じようなリサーチを行いますが、UXはユーザーや行動をより深く追求するのに対し、プロダクトデザイナーは市場や競合他社の分析に重点を置きます。
UXデザイナーは、製品がリリースされる前の早い段階でリサーチとユーザーテストを行います。
プロダクトデザイナーは新機能の実装やユーザーの課題解決、ビジネスチャンスの模索など、既存製品のテストを行います。

ツール

UXデザイナーは、主にプロトタイピングツールとテストツールを使用します。
一方、プロダクトデザイナーはジェネラリストであり、デザイン、開発、マーケティング、ユーザーテストなど、さまざまなツールを使用します。

プロトタイピング

UXデザイナーはデザインプロセスを通じて、紙やデジタルを含むさまざまなプロトタイプを作成します。
一方プロダクトデザイナーは、紙などの低忠実度のプロトタイプを使用することは少なく、製品のデザインシステムを利用して高忠実度のプロトタイプを作成することがほとんどです。

テスト

UXデザイナーは、製品や機能の発売前にユーザビリティテストを行い、ユーザーエクスペリエンスの要件を満たします。
プロダクトデザイナーは既存の製品をテストし、ユーザビリティの問題やビジネスチャンスを特定します。また、自らが設計した新製品やインターフェースのテストも行います。

まとめ

2つのデザインの役割にはいくつか重なる役割もありますが、プロダクトデザイナーとUXデザイナーはどちらも組織に大きな価値をもたらす存在です。UXデザイナーは製品の初期デザインを完成させた後、製品デザイナーにバトンタッチします。製品デザイナーは基本的に製品の管理者となります。

製品設計の初期段階ではUXデザイナーはユーザーとそのニーズに焦点を当て、デザインソリューションを見つけなければなりません。その解決策は、組織のビジョンやビジネスゴールに沿ったものでなければなりません。

プロダクトデザイナーもユーザーに焦点を当てますが、彼らは通常、UXデザイナーがユーザビリティの問題を特定して修正した製品を継承します。そのため、プロダクトデザイナーはビジネス価値や、製品の魅力と関連性を維持することに重点を置きます。

プロダクトデザイナーはジェネラリスト（デザイン、マーケティング、データ分析、コーディング、ユーザー行動）であり、UXデザイナーはユーザーエクスペリエンスのスペシャリストであると言えるでしょう。

UXPinによるデザインコラボレーション

UXPinは内蔵のドキュメント、デザインシステム、コメント（タグ付けと割り当てを含む）、プロトタイプのプレビューと共有などの機能により、UXチームと製品チームのデザインコラボレーションを強化します。

また、Mergeはデザインと開発のギャップを埋める強力な機能であり、製品チームのようなデザイナーではない人でも、完全に機能する高忠実度なプロトタイプを簡単に作成することができます。 UXPin Mergeは、デザインエディタとリポジトリからのコードコンポーネントを同期させることで、組織全体が同じデザインシステムコンポーネントを使って作業できるようにし、単一の情報源を提供します。

エンジニアがリポジトリに変更を加えると、組織全体のデザインシステムが更新されます。全員が同じバージョンを使用しているため、DesignOpsは各部門のデザインライブラリやシステムの更新を気にする必要がなくなります。 UXPin Mergeの詳細と、GitやStorybookとの統合を通じてデザインエディタをお好みのテクノロジーと同期させる方法については、こちらをご覧ください。

UXPinを始めよう

UXデザイナーやプロダクトデザイナーにとって、コードベースのデザインがどのようにプロトタイピングやテストを向上させるかを知る準備はできていますか？ UXPinの4つの強力な機能により、プロトタイプの忠実性と機能性を高めることができます。

ユーザーやキャンバスのアクションに応じて、要素やコンポーネントの異なるステートやプロパティをデザインできます。
変数を使用してユーザーデータを取得・保存し、その情報に基づいて要素を更新する。
条件付きインタラクションやルールを設定して、二次的なインタラクションやアニメーションを引き起こします。
Expressionを使用すると、ショッピングカートの更新やユーザー入力の検証など、プロトタイプにJavascriptのような関数を作成することができます。

今すぐチームでUXPinをお試しください。UXPinのコードベースのテクノロジーでデザイナーのコラボレーションを改善し、プロトタイプを強化するための無料トライアルにお申し込みください。

The post プロダクトデザイナーとUXデザイナーの比較分析 appeared first on Studio by UXPin.

プロダクトデザインの未来は？【テクノロジー】

Haruka Ikoma — Fri, 11 Aug 2023 02:15:23 +0000

私たちは、さまざまなトレンドやテクノロジーに注目し、プロダクトデザインの未来を予測していますが、空飛ぶ車が云々ではなく、現在の技術がどのように進化していくかに焦点を当て、プロダクトデザイナーやデベロッパーがイノベーションを起こす真の機会が明らかになりました。

本記事では、AI 、VUI、「コードからデザイン（code-to-design）」を含んだテクノロジーについてや、ARとVR、HCD、そしてスマートシティにおける主な６つの点についてお話します。今後１０年以上にわたって、デバイスやプラットフォームを超えた完全な相互接続システムが求められる中、プロダクトデザイナーにとってのチャンスは計り知れません。

「コードからデザイン（code-to-design）」は製品開発の未来であり、すでにここにあります。UXPin Merge テクノロジーでデザインと開発の間のギャップを埋めませんか。詳しくはMergeのページをぜひご覧ください。

１．AIとデザイン職の未来

プロダクトデザインの未来を語る上で、AI（人工知能）をまず持って来ないと何も始まりません。このテクノロジーがプロダクトデザインや UX をどのように形成するかについては、非常に多くの予測がありますが、ここでは私たちが知っていることをご紹介します。

データの解釈

AI や ML（機械学習）は、データの解釈に最も長けており、このようなモデルは、データを使ってユーザーの行動をよりよく理解し、結果の予測や、パターン（いい場合/悪い場合）の特定をできます。このデータ分析能力こそが、AI が短期的にデザインチームに最も貢献するところです。

AI モデルは、製品の分析、ヒートマップの作成などを行い、UX リサーチャーにデータの意味の正確な診断や、問題解決のための提案を行うことができます。このような分析により、調査時間が短縮され、チームはユーザビリティの問題をより早く解決できるようになります。

AI モデルの進化に伴い、AI のプログラミングが変更され、こうした細かい問題を自律的に解決することができるようになります。

QAの自動化と UXの監査

QA（品質保証）とUXの監査にはかなりの時間とリソースがかかりますが、高品質でエラーのない製品の開発には不可欠です。このタスクを AI に委ねることで、製品の品質を高めつつ、製品チームがより効率的に動けるようになります。

個別化の向上

AI によって、製品チームは個別化をもう一つ先行くものにできるようになり、デザイナーは、個別化されたコンテンツの代わりに、各ユーザーのニーズに合わせたナビゲーションやインタラクティブ性、レイアウトなど、カスタマイズされた製品を提供することができます。またAI で、ユーザーはアルゴリズムをカスタマイズして、特定のコンテンツ、データ、フィードバックを与えることができるようになります。

AIが作り出すデザイン

Galileo AI や Uizard のようなツールは、テキストの指示に基づいてUIデザインを生成します。このようなツールが進化すれば、製品のデザインシステムのコンポーネントを使って、より速くモックアップを作成することにより、UI デザイナーの手助けになることができます。

UXとChatGPT

すでに遭遇したチャットボットAIの意外な使い方で、以下のようなものがあります：

仕事の特性を理解し、ニーズをよりよく理解するための、（例えば飛行機のパイロットなど）狭いターゲットグループのユーザーへのインタビュー質問。もちろん、インタビューのサポートや知識を深めるためのもので、ユーザーインタビューに取って代わるものではない。
特定のターゲットグループのユーザーに合わせたランディングページの、キャッチーなマーケティングスローガンの生成。
業界イベントでの専門家によるプレゼンテーションのためのアジェンダ作成。

もちろんそれだけでなく、Chat GPTでのチャット上で、来年は UX/デザイン/リサーチでの分野でそのポテンシャルをどのように発揮できると思うか質問したところ、以下のような回答がありました。

「UX ライティング：UI（ユーザーインターフェース）の複数言語オプションを生成するためにチャットGPTが使われます。ボタン、ラベル、エラーメッセージなど、UI で使用する複数の言語オプションをサッと生成するのにChat GPTが使われるでしょう。それによって、デザイナーはどの言語オプションが目的の達成に最も効果的かを理解することができ、製品の UX を最適化できるようになるでしょう。」

「リサーチ：Chat GPTをユーザーリサーチに活用する方法の1つに、チャットボットインタビューの活用があります。チャットボットインタビューでは、デザイナーは Chat GPTを使って、ユーザーの好みや経験について質問する会話型チャットボットを作成することができるでしょう。そして、チャットボットはChat GPTを使って、ユーザーの回答に対して人間のような応答を生成することができ、それによってデザイナーは、ユーザーがどのように考え、製品に何を求めているのかの貴重なインサイトを得られるようになるでしょう。」

「デザイン：ユーザー向けに個別化された応答を生成するのにチャットGPTが使われます。チャットGPTは、ユーザーの好みや行動に基づいて、ユーザーに個別化された応答を生成するために使われるでしょう。例えば、チャットボットがチャットGPTを利用して、ユーザーの過去の購入履歴や興味に基づいて個別化されたおすすめ情報を生成することが考えられます。これによって、より個別化された魅力的な UX が実現され、製品へのロイヤリティやエンゲージメントが上がるでしょう。」

では、準備万端でしっかり注意深く見てテストすることを忘れないでください。AI で、私たちの仕事は支えられ、大切なことにもっと時間をかけられるようになりますからね。

２．VUI の充実

Statistaの調査によると、２０２０年の VUI（音声ユーザーインターフェース）は４２億件で、２０２４年には約８４億件までなると予想されています。このStatistaのレポートが AI を考慮したものかどうかは不明ですが、２０２２/２３年に AI や ML が急成長すれば、VUI は８４億を超えるかもしれません。

VUI は日常生活に浸透していますが、このシステムは、例えば自動車の音声制御や産業用アプリケーション、航空、その他の複雑なシステムなど急速に高度化・統合化されています。

２０２３年版の MBUX（メルセデス・ベンツユーザーエクスペリエンス）のシステムは、AI を活用したボイスコントロールとタッチコントロールを備えており、他のスマートホーム機器とペアリングすることで、「メルセデスさん、今、私の家に誰かいます？」、「見た感じ、最後に検知された動きは、１時間前にキッチンで検知されたものですね。」といったやり取りができるようになります。

テスラのボイスコマンドはさらに進化しており、ドライバーは車に特定の目的地までの運転を依頼したり、ワイパー、ライト、ミラーなどのコントロールを調整したりすることができます。

３．コードからデザイン

デザインツールの進化に伴い、デザインプロセスでより多くのコードを目にすることになるでしょう。UXPin はMerge テクノロジーでこの「コードからデザイン」革命を牽引しており、この技術により、プロダクトチームはレポジトリから UXPin のデザインキャンバスにデザインシステムを同期させることができ、デザイナーはフロントエンドデベロッパーが開発に使うのと同じ UI コンポーネントでプロトタイプを作成できるようになります。

「コードからデザイン」は、すでに PayPal の社内製品開発プロセスに大きな影響を与えており、PayPal の UXリードEPX であるエリカ・ライダー氏は、これを「DesignOps 2.0」と呼んでいます。DesignOps 2.0は、デザインと開発を分離した従来のモデルではなく、デザインと開発を単一の反復プロセスに統合するものです。

『信頼できる唯一の情報源（Single source of truth）』により、プロダクトチームは、より少ないエラーとより高い品質の成果で、より速いプロジェクトの提供が実現します。デベロッパーとデザイナーがまったく同じコンポーネントを使用するため、デザインハンドオフが摩擦なくスムーズに行われ、最終製品を提供するのに必要な文書や説明が少なくて済むのです。

「コードからデザイン」は、新しい製品開発の標準となり、デザイナーは画像ベースのデザインツールの代わりにコードコンポーネントを使って、製品のプロトタイプやテストを行うようになるでしょう。

４．AR と VR

AR （Augmented Reality：拡張現実）やVR（Virtual Reality：仮想現実）は以前からありましたが、企業がエンターテインメント目的ではなく、実用的な用途で技術を活用するようになったのは、最近になってからです。

例えば、ビジネステクノロジー大手の Accenture では、AR や VR を利用して、バーチャルでのコワーキングオフィスや新入社員のオンボーディング、トレーニングプログラム、その他のイベントなどで、グローバルに働く人々を繋いでいます。また、Microsoft Mesh は、こうした連携システムのための企業向け AR プラットフォームの１つで、Teamsと統合されています。

トレーニングは、このような AR システムアプリの中で最も成長しているものです。組織では、特にリスクの高い仕事、複雑な作業、最前線で働く従業員のトレーニングに AR や VR が使われており、Vsight と Glartek の２企業が、この種の AR トレーニングを牽引しています。

また、AR や VR は、B2C 市場でもブームになっています：

Houzzでは、ARを使った 3D での間取り図で、リフォームした家がどんな感じになるかを顧客に提供している。
Wayfair 社では、同様に 3D の間取り図を提供しいる。
「L’Oréal Paris Makeup Genius app 」アプリは、美容製品をバーチャルで試し、気に入ったものを購入することができる。

この技術はまだ発展途上であるため、今後１０年間はイノベーションの余地が大きいと思われ、AR や VR 技術の需要が高まるにつれて、プロダクトデザイナーの仕事や役割も増えていくでしょう。

５．HCD（人間中心のデザイン）

ニールセン・ノーマン・グループのドン・ノーマン氏が提唱した「ユーザー中心のデザインから人間中心のデザインへの転換」という興味深い記事が、インタラクションデザイン財団に掲載されています。HCD（人間中心のデザイン）は、個々のユーザーではなく、複雑な地球規模の問題に対する最良の解決策を求めるものです。

デザイナーは、「軽薄な欲求やドーパミンを満たすのではなく、社会にポジティブな影響を与える製品をデザインする」という目的のもとに、複雑で相互に関連する社会システムに製品がどのような影響を与えるか、そしてそれが将来どのように進化していくかを考慮しないといけません。

HCD は、新しい技術やトレンド以上に、製品をデザインする際に持続可能性や倫理を考慮し、製品が社会や環境にどのような影響を与えたいかを考えるというような、デザイン思考の考え方の転換を表しています。

６．身近なプロダクトデザイン

行政サービスのデジタル化が進むにつれ、デジタル製品や IoT に対する需要が高まっています。スマートシティが機能するには、相互に接続された多くのデバイスやシステムが必要であり、それは民間企業による大規模な製品開発とイノベーションであるということです。

そして、そのようなものには、デザインするためのインターフェースもちゃんとあるんです！

スマートシティがデジタル製品やインフラを必要とする事例は、 Microsoft でいくつか紹介されています：

クラウドコンピューティング

クラウドベースのインフラは、スマートシティのアプリやシステムのサポートに必要な基盤であり、国や都市は、国家や市民のデータを保護するために、Google Cloud Platform や AWS（Amazon Web Services）のローカライズ版を開発する必要があるでしょう。

AI（人工知能）

AI（人工知能）とML（機械学習）は、センサーやカメラの監視からデータの分析、リアルタイムでのフィードバックやソリューションの提供まで、スマートシティにおいて重要な役割を担っています。

IoT（モノのインターネット）

スマートシティでは、スマートゴミ箱から完全自動運転の公共交通機関まで、多くの IoT 製品が必要であり、このような製品には、自治体や県が管理するためのプラットフォームやソフトウェアと、ユーザー向けの操作のための接続されたデジタル UI やアプリが必要です。

ブロックチェーン

マイクロソフトによると、「組織や政府は、より効率的なサプライチェーンの構築、複雑なプロセスの簡素化、不正行為の削減、取引の迅速な検証のために、この革新的な技術に投資しています。」とあるように、ブロックチェーンの技術はスマートシティに不可欠です。

ブロックチェーンで都市の統治がより透明化されて、市民が予算や支出をより明確に把握できるようになります。ちなみにスマートシティの代表格であるドバイは、３億ドル以上を投じてブロックチェーンをサービスに組み込んでいます。

一都市でのこの支出は、製品開発者が世界中の国や都市を対象としたソリューションを作成・管理する機会が非常に大きいことを示しています。

UXPin Merge テクノロジーによる未来のプロダクトデザイン

従来の UX デザインの手法やワークフローは、遅くて面倒なものであり、デザインからコードまでのプロセスは非効率的で、現代のテクノロジーや要求に応えるために必要なスピードと正確さを促進することはできませんでした。

UXPin Merge テクノロジーと “コードからデザイン” は、製品開発の未来形です。効率的なデザイン手法により、経験があまりない個人事業主から多国籍企業まで、誰でもコードのように忠実で機能的なアイデアを試作・テストすることができるんです。

コードからデザイン（code-to-design）が製品開発を強化する理由は以下のとおりです：

一元化されたレポジトリからデザイナーとエンジニアの間に「信頼できる唯一の情報源（Single ource of truth）」ができることで、デザインからコードまでのワークフローにおける非効率と課題が軽減される。
製品チームがデザインプロセスにおいてより良い機会を特定し、より多くの問題を解決できるよう、リアルなプロトタイプがテストを改善する。
リアルでインタラクティブなプロトタイプは、ステークホルダーが最終製品を正確にイメージできるため、有意義なフィードバックが得られ、デザインプロセスへの信頼が高まる。
「コードからデザイン」で、品質はより良くなり、ユーザビリティの問題を減らすため市場投入までの時間を短縮し、それによってスタートアップ企業は企業組織との競争場に立てるようになる。

世界最先端のエンドツーエンドデザインツールで、製品のデザインプロセスを未来へと導きます。詳しくは、Merge テクノロジーのページをぜひご覧ください。

Discover Merge

The post プロダクトデザインの未来は？【テクノロジー】 appeared first on Studio by UXPin.

UXPin Merge によるレスポンシブデザイン

Haruka Ikoma — Tue, 08 Aug 2023 00:53:36 +0000

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

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

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

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

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

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

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

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

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

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

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

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

const useStyles = makeStyles((theme) => ({···
}));
 
function DeviceViewer(props) {
 const classes = useStyles(props);
 const [frameWidth, setframeWidth] = React.useState(0);
 const [frameHeight, setframeHeight] = React.useState(0);
 const [deviceView, setdeviceView] = 
 React.useState(props.defaultView);
 
 React.useEffect(() => {···
 }, [props]); 
 
 const handleChange = (event) => {
   setdeviceView(event.target.value);
 };
 
 const setViewportDimensions = () => {···
 };
 
 const IFrameResize = () => {···
 };
 
 return (
   
     
       
   
 );
}

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

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

useEffect()

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

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

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

handleChange()

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

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

setViewportDimensions()

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

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

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

IFrameResize()

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

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

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

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

まとめ

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

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

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

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

The post UXPin Merge によるレスポンシブデザイン appeared first on Studio by UXPin.

React Native と ReactJS – それぞれの違い

Haruka Ikoma — Thu, 03 Aug 2023 06:40:56 +0000

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

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

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

ReactJS とは

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

ReactJS の例

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

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

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

React Native とは

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

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

Facebookが React Native を作った理由

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

React Native の例

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

Coinbase
Shopify
Discord
Skype
Bloomberg
Pinterest
Baiduモバイル

React Native と ReactJS の違い

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ReactとUXPin Mergeでデザインする

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

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

Reactのプロップ

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

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

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

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

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

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

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

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

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

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

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

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

コードを使ったデザイン

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

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

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

コンポーネントライブラリを構築するためのStorybookフレームワーク

UXPin — Thu, 03 Aug 2023 00:22:42 +0000

コンポーネントライブラリを作ることで、UI開発を効率化し、失敗しないようにすることができます。（なぜUI開発に使う必要がある？）コンポーネントライブラリを作るメリットには以下のようなものがあります：

現在のガイドラインに沿った信頼できる唯一の情報源を作ることができる。
重要なマイルストーンやリリース日に間に合わせる必要がある場合、迅速にスケールアップすることができる。
製品チームのコラボレーションとコミュニケーションを向上させる。
コードの重複を減らす。
複数のデバイスで動作するデジタル製品の構築。

UXPinがStorybookの統合を提供している今、アクセスできるStorybookのフレームワークについて学んでみましょう。Storybookが普及しているということは、あなたの開発チームのメンバーは、すでにこれらの一般的なフレームワークを使った経験があるということです。もしそうでなければ、Storybookのフレームワークの長所と短所を知る機会を与えてあげましょう。

Storybook for React

Reactは、たくさんの利点を持つJavaScriptライブラリです。私たちは、以下のようなReactの機能に対する評価を投稿してきました：

コンポーネントの再利用性。
不具合を修正するための簡単なオプションを備えた安定したコード。
特にJavaScriptに慣れている人にとっては、学習曲線が短い。
ライブラリを動かし続ける信頼できるエンジニアリングチーム。
JSX拡張での条件文。

Reactは、UIライブラリの他のコンポーネントに影響を与えずに個々のコンポーネントを変更する方法をすでに提供しているため、Storybookに自然にフィットします。Storybookでは、コンポーネントを分離することで、この機能をさらに効果的にしています。サンドボックスでは、技術的な詳細に立ち入ることなく、UI全体を構築することができます。

また、React Storybookフレームワークは、コンポーネントを文書化することで再利用をこれまで以上に容易にし、コンポーネントを視覚的にテストすることでバグのあるコードを避けることができます。

StorybookでのReactの使用についてもっと知りたい方は、StorybookのReactの紹介を読み、ウェブサイト「Component Driven User Interfaces」をご覧ください。

Vue

Vue Storybookフレームワークでは、Storybook for Reactで得られるエッセンスをすべて提供しています。Vueフレームワーク用のStorybookとReactフレームワーク用のStorybookの最大の違いは、GraphQLアドオンを取得できないことで、これにより他のツールとの統合が若干難しくなります。

多くの開発者がVueを気に入っているのは、サイズが小さくてもパフォーマンスに妥協がないからだ。Vueは、強固なツールエコシステム、リアクティブな双方向データバインディング、仮想DOMレンダリングを提供します。

Angular

Storybook Angularフレームワークは、Reactで得られるエッセンスやアドオンをすべて提供しています。

少人数の開発チームで、シンプルなJavaScriptでHTMLの機能を拡張することに集中したい場合、Angularを選択するのは理にかなっています。基本的なJavaScriptのコーディングスキルがあれば誰でもこのフレームワークを使うことができ、コスト削減、開発時間の短縮、ミスの回避に役立ちます。

Angularがシンプルだからといって、弱いわけではありません。ディレクティブ、再利用可能なコンポーネント、データバインディング、ローカリゼーションなど、優れた機能を備えています。

コミュニティStorybookフレームワーク

コミュニティフレームワークは、大規模なコミュニティが存在しないため、ReactやVueなどの主要な Storybookフレームワークのように頻繁に更新されない傾向があります。

これらはStorybookの最良の選択肢ではありませんが、オープンソースのツールはまだ動作します：

Ember
HTML
Mithril
Marko
Svelte
Riot
Preact
Rax

これらのStorybookのフレームワークを使うと、いくつかの機能が失われることを覚えておいてください。Ember on Storybookだけが、必要なもの(Actions, Backgrounds, Docs, Viewport, Controls)をすべて備えています。コミュニティフレームワークの中には、GraphQLをサポートしているものはありません。また、他にも数多くのアドオンがないため、プロジェクトを迅速に終わらせるのが難しくなるかもしれません。

しかし、Storybookの柔軟性はこれらのフレームワークにも及びます。完璧ではありませんが、きっとうまくいくでしょう。

Storybook のDIYフレームワーク

Storybookは非常に柔軟なツールで、自分のチームのために特別に新しいフレームワークを足場にすることができます。Storybookは常にユーザーの成功を支援する優れた仕事をしているので、ウェブサイトにStorybookの新しいフレームワークを使用するための包括的なチュートリアルがあることは驚くことではありません。

Storybook とUXPinを統合して、製品をより効率的に作りましょう!

Storybookでコンポーネントライブラリを作成したら、それをUXPinに簡単にインポートすることができます。1分程度で完了するほど簡単です。

UXPinとStorybookを統合すると、Storybookの中でUIコンポーネントライブラリを管理できるようになります。変更を加えると、UXPinのライブラリにも自動的に反映されます。このようにして、Storybookで信頼できる唯一の情報源を維持し、Mergeテクノロジーを使用してUXPinで完全に機能するプロトタイプを作成することができます。

StorybookとMergeは、コードベースのデザインの力を誰もが使えるようにすることで、開発プロセスをより効率的かつ効果的にします。あなたは効率性を求めていますよね？今すぐStorybookとの統合を行い、その効果を実感してください。

The post コンポーネントライブラリを構築するためのStorybookフレームワーク appeared first on Studio by UXPin.

商品開発プロセスを改善する Storybook のベストプラクティス

UXPin — Sun, 30 Jul 2023 09:11:51 +0000

UXPinと Storybook を統合することにより、インタラクティブコンポーネントを持つUIライブラリを使って、これまで以上にデジタル製品を簡単に構築することができます。これによって、ワークフローが改善され、より効果的な製品開発につながります。しかし、単に2つのツールを統合しただけでは、すべてのメリットが得られるわけではありません。ここで紹介する Storybook のベストプラクティスをご活用いただき、製品開発プロセスをさらに効果的なものにしましょう。

まだUXPinのアカウントを持っていない場合は、まずは14日間の無料トライアルをお試しください。Mergeを希望の方はオンラインデモにてご案内します。

誰でも探しやすいコンポーネントの命名規則にする

Storybook には検索機能があり、新しいプロジェクトに追加したいストーリーやコンポーネントを見つけるのに役立ちます。しかし、この検索機能は調べたいものの名前を完璧に覚えている必要はありませんがだいたい覚えておいた方が良いでしょう。覚えていない場合だと、どうしても必要なアセットにたどり着くまで、延々とファイルを見続けることになってしまいます。

このような問題をなくすために、命名規則をしてください。現実的には、どのような命名規則を選んでも問題ありません。[ComponentName].stories.[js|jsx|tsx]は、多くのチームでうまく機能していますが、かならずしも全ての場所でうまくいくとは限りません。

最も重要なことは、一つの命名規則を選び、全員がそれを使うことを義務付けることです。デザインシステムの隅々にまで不正なコンポーネントが存在しないようにするためです。

Storybook のCSFフォーマットにこだわる

Storybookからコンポーネントをエクスポートする際、ファイルはデフォルトでCSFフォーマットになっています。デザイナーや開発者の中には、自分の編集ソフトに合わせてフォーマットを変更したくなる人がいます。しかし、それは決して良いことではありません。CSFフォーマットは、ファイルを他の環境に移動させても、メタデータが確実に残るようになっています。

その上、Merge ユーザーはファイル拡張子を変更する理由がありません。ツールを統合し、UI コンポーネントライブラリを UXPin の編集およびプロトタイピング環境に追加するだけです。

私たちは、誰もが理解できるように、これらのStorybookのベストプラクティスをできるだけシンプルで実用的なものにしています。CSFの使い方についてもっと知りたい方は、このトピックに関するStorybookのチュートリアルをご覧ください。

注意：ほとんどの内容はデザイナーよりも開発者の方が理解しやすいでしょう。このチュートリアルが無意味なものに見えても心配しないでください。StorybookとMergeは、ドラッグ＆ドロップのデザイン環境を提供しており、すぐに習得することができます。

１回に１つストーリーを作成する

クライアントはすぐに結果を求めます。それがデジタル製品を作るということの本質です。鳴り止まないメールに対して、マルチタスクで対応する人もいます。するとどうでしょう。問題を解決したり、プロジェクト間で生じた混乱を整理したりするのに多くの時間を費やすことになります。

そのためには、1つのストーリーに集中して取り組むことが大切です。そうすれば、プロジェクトのあらゆる側面を整理することができ、より良い結果が得られ、より早くマイルストーンに到達することができるでしょう。

ストーリーに着手したら、区切りのよいところまで整理してコンポーネントの追加とテストを続けます。そうすることで、すべてのコンポーネントが適切なストーリーに配置され、プロジェクトの進捗状況を正確に把握することができます。

もちろん、1つのプロジェクトを完成させるまで、1つの作業しかできないというわけではありません。ただ、一度に一つだけのストーリーに集中するように、一日のスケジュールを組む必要があります。

順序立てて進める。StorybookとMergeはコードベースのデザインアプローチを採用しているので、チームの時間を大幅に節約できるツールがすでに用意されています。急ぐ必要はありません。

カスタムドキュメントが必要性について開発チームと相談する

Storybookにデフォルトで搭載されているDocsPageを使うべきなのか、それとも独自のドキュメントを作成するべきなのか。この質問には、普遍的な正解はありません。しかし、あなたのチームが開発する製品の種類に応じて、一つの選択肢があると思います。

あなたがJavaScriptの経験が豊富でない限り、コンポーネントをドキュメント化する最善の方法については、開発チームと話し合う必要があります。どちらの方法がデザインや開発のニーズに合っているかは、専門家の意見を参考にしてください。

Storybookで遊ぶ時間を作る

Storybookには、クリエイティブなリスクを冒しても、ストーリーの他のコンポーネントに影響を与えないためのサンドボックスがあります。これはStorybookの最も優れた点のひとつですから、ぜひ活用してください。

遊ぶことは時間の無駄ではありません。あるツールがどのように機能するのか（機能しないのか）を学ぶ最も効果的な方法のひとつです。今、探索に費やす時間は、将来的にStorybookのより良いユーザーになるためのものです。練習だと思ってやってみてください。でも、楽しみながらやってくださいね！

Storybookのコミュニティに参加する

Storybookにはたくさんのチュートリアルがあり、UIコンポーネントライブラリやデザインシステムを作るための効果的な方法を見つけることができます。しかし、すべての質問にチュートリアルが答えてくれるわけではありません。

そこで、Storybookのコミュニティの出番です。他のオープンソースツールと同様に、Storybookにもユーザーや開発者の活発なコミュニティがあります。コミュニティに参加すれば、他のユーザーと知見やヒントを交換することができます。

また、コミュニティに参加することで、Storybookのアップデート情報や、それがデザインプロセスにどのような影響を与えるかを常に知ることができます。

StorybookとUXPinを始めよう

お気に入りのデザインまたはプロトタイピングツールとStorybookを統合してみなければ、Storybookのベストプラクティスを活用することはできません。この2つを統合して、コードコンポーネントを使ったデザインを始めましょう。

誰にでもできる1分程度の簡単な作業からすべてが始まります。デザインと開発のプロセスがどのように改善されるかご覧ください！

The post 商品開発プロセスを改善する Storybook のベストプラクティス appeared first on Studio by UXPin.

優れたUXデザインを生み出す心理的トリック

UXPin — Sat, 08 Jul 2023 10:06:00 +0000

UXデザインは、人間の心理を理解するプロセスです。ユーザー中心設計やユーザーエクスペリエンスなどの用語がデザイン思考プロセスを支配するのはそのためです。

UXデザイン心理学とは、問題を解決しようとしている人々の行動を理解し、それらの人間の行動に合わせてユーザーエクスペリエンスを設計することです。

UXPinは、UX心理学とゲシュタルト視覚の原則に従ったすぐに使用できるプロトタイプの例もありますので、ぜひ実際にお試しください。

UXPinの14日間の無料トライアルにサインアップして、UXPinの革新的なデザインエディターと高度なプロトタイピング機能を探索し、顧客のユーザーエクスペリエンスを向上させましょう。

UXデザインにおける認知心理学とは？

認知心理学は、注意と知覚、記憶、問題解決、創造的思考など、人間の精神的プロセスを研究します。これは、ユーザーエクスペリエンスデザインの基盤となります。

優れたUXデザイナーは、これらの人間の精神的プロセスと、認知心理学が精神的障壁を克服して改善するのにどのように役立つかを理解しています。

使いやすさ
ナビゲーション
読みやすさ
アクセシビリティ

人間の脳は、デジタル製品を含む周囲の環境を理解するために、パターンや認識可能なオブジェクトを絶えず検索しています。

認知的負荷とUXデザイン

認知的負荷は、新しい情報を処理して学習するために必要な精神的な努力、つまり人間の処理能力です。

優れたUXデザインは、ユーザーインターフェースを最適化し、コンテンツを提示するための認知的負荷の限界を理解しているため、ユーザーは情報をすばやく吸収して処理できます。

デジタル製品の情報を吸収して処理するために必要な処理能力がユーザーの認知的負荷を超える場合、ユーザーはそれを使い続ける可能性は低くなります。

3種類の認知的負荷

3種類の認知的負荷と、それらがUXデザインにどのように影響するかを次に示します。

本質的な認知的負荷は、タスクの固有の難しさに由来します。ユーザーは、目前のタスクに集中しながら、どのように情報を吸収しますか？良い例はオンラインショッピングのチェックアウトです。デザイナーはすべてのナビゲーションを削除し、ユーザーが購入を完了するために必要なコンテンツのみを提供します。設計者は、固有の認知的負荷を軽減することにより、ユーザーが目前のタスクを完了する可能性を高めます。
外部の認知的負荷は、脳がタスクの本質的でない問題（フォント、マイクロインタラクション、命令など）を処理する方法です。フォントを読んだり、指示を理解したりするのに苦労しているユーザーは、UXでの無関係な認知的負荷を超える例です。
ゲルマンの認知的負荷は、スキーマの処理、構築、および自動化です。ユーザーが情報のカテゴリと関係を整理する方法。何か新しいことを学ぶとき、人間の脳はスキーマを構築するためにコンテンツのなじみを探します。

ゲシュタルトの原則とビジュアルデザイン

ゲシュタルトの原則は、人間の脳が視覚を認識して見慣れた構造を作成する方法を説明しています。

ゲシュタルト心理学の有名な例は、19世紀後半のイギリスの漫画家による若い女性または老婆のイラストです。この「ゲシュタルトスイッチ」は、心がキャンバス上の要素をどのように解釈するか、そしてこれがビジュアルデザインに与える影響についての魅力的な洞察を提供します。

以下では、ビジュアルデザインに適用される6つの主要なゲシュタルト原則を紹介します。

1.フィギュアグラウンド -脳が前景と背景をどのように区別するか。 UXデザイナーは、認知的負荷を最小限に抑えるために、前景と背景を明確に区別する必要があります。

2. 近接の法則 – グループ化されたオブジェクトは、離れた場所にあるオブジェクトよりも関連性が高いように見えます。複数のカテゴリの情報がある場合、これらのカテゴリ間にスペースを作成すると、ユーザーはコンテンツをより速く区別できるようになります。

3. 類似性の法則 – 類似のオブジェクトは関連しているように見えます。たとえば、類似の形状、色、陰影、サイズ、およびその他の品質のオブジェクトです。

4. 閉鎖の法則 – 不足している情報を埋めることによって完全な形を見る脳の能力。

5. 連続の法則 – 人間の目は、デザインのパス、線、または曲線を自然にたどります。近接性と同様に、継続性はユーザーが関連コンテンツを識別するのに役立ちます。

6. 対称の法則 – オブジェクトを偶数の対称部分に分割するという脳の好み。

すべてのデザイナーが知っておくべき6つのUXデザイン心理学の原則

1.フォンレストルフ効果 (Von Restorff effect)

フォンレストルフ効果は、オブジェクトのグループ内で、異なるオブジェクトが目立つか、記憶される可能性が最も高いことを予測します。ユーザーに明確さと方向性を提供するのに役立つため、UXデザイン心理学の最も重要な原則の1つです。

UXデザイナーは、CTAを拡大したり、色を変えたりするなど、目立つ召喚ボタンを強調しようとするたびにフォンレストルフ効果を適用します。

フォンレストルフ効果は、ユーザーインターフェイスの他の部分でも役立ちます。たとえば、一連のタブがある場合、別の色にすることで、ユーザーが現在どのタブを使用しているかを示すことができます。ナビゲーションの現在のページまたはユーザーフローの現在のステップを強調表示する場合も同様です。

2.ヒックの法則 (Hick’s Law)

ヒックの法則は、あなたが誰かに与える選択肢が多ければ多いほど、彼らが決定を下すのに時間がかかると推定しています。なぜなら、あなたは彼らの認知的負荷を増やしているからです。

ヒックの法則は、eコマースデザインの重要な心理的原則です。まず、買い物客の選択肢が多すぎると、何を購入するかを決める前に何度も訪問する可能性があります。経験は圧倒的すぎるかもしれません、つまり彼らは何も購入しないというにつながります！

UXデザイナーは、チェックアウトプロセス中にヒックの法則にも注意を払う必要があります。販売を完了するために必要な手順、およびフォーム入力フィールドの数は、ストアのコンバージョン率に深刻な影響を与える可能性があります。

UXチームは、タスクまたは目標を完了するための選択肢の数が最も少ないことを確認するために、設計を継続的に評価する必要があります。

3. 最小努力の原則 (The Principle of Least Effort)

最小努力の原則は、ユーザーが最小量のエネルギーを必要とする選択または行動をとることを示しています。製品が複雑すぎる場合、または学習曲線が急な場合、ユーザーはそれを使用する可能性が低くなります。

レイアウトやユーザーインターフェイスを変更する場合も、最小努力の原則が重要です。ユーザーが製品を操作する方法を変更すると、新しいプロセスを学ぶのが面倒になる可能性があります。これを何度も行うと、ユーザーを失う可能性があります。

最小努力の原則は、設計者が問題を解決するために一度検討することではありません。これは、ユーザーのテストと反復の継続的なプロセスであり、継続的に改善点を探します。

4. 系列位置効果 (The Serial Positioning Effect)

系列位置効果は、リスト、文、またはコンテンツの最初（主効果）と最後（最新効果）の項目を覚えている可能性が最も高いことを示しています。

心理学者は、人々が最も意味のある情報が最初と最後に現れることを期待しているため、系列位置効果が発生するのではないかと疑っています。

UXデザイナーは、系列位置効果を使用して、より優れたユーザーエクスペリエンスを作成できます。たとえば、最も重要または最も使用されるナビゲーションリンクを最初と最後に配置します。

系列位置効果は、重要な情報を上下に表示することにより、画面レイアウトにも効果的です。

5. 永続的な習慣の原則 (The Principle of Perpetual Habit)

永続的な習慣の原則は、人々が身近な習慣や習慣に依存していると述べています。新しい車を設計する場合、クリーンでミニマリストなダッシュが必要なため、ハンドルをトランクに入れません。

創造性と革新性を発揮できる分野はありますが、決して変更してはならない普遍的な基準がいくつかあります。

たとえば、ユーザーはヘッダーとフッターにナビゲーションリンクを見つけることを期待しています。ハンバーガーアイコンは、モバイルユーザー向けのナビゲーションの場所を示しています。この構造を変更すると、ユーザーは基本的なナビゲーションに問題を抱え、ユーザーエクスペリエンスが低下します。

優れた製品設計は、モバイルデバイスからデスクトップ、iOSからAndroidまで、デバイス間でのさまざまなユーザーの習慣を認識し、ユーザーのニーズに合わせて製品を調整することです。

6. 感情的な伝染の原則 (The Principle of Emotional Contagion)

感情的な伝染またはカメレオン効果の原則は、人間が動物やアニメーションを含む他の人の感情や行動を模倣または共感することを示しています。

UXデザイナーは、感情的な伝染の原則を使用して、魅力的で没入型のユーザーエクスペリエンスを作成できます。

良い例は、DuolingoがLanguage Birdを使用して、ユーザーにアプリに戻るように促す方法です。ユーザーがレッスンを欠席すると、LanguageBirdの表情は泣いているように示されたり、クラスを終了すると明るい表情となるような反応を示します。

UXデザイナーには、ユーザーに害のある感情伝染の原理を乱用しないようにする必要があります。

まとめ

UX心理学を理解することで、ユーザーにとってより良い製品を構築できます。デザイン心理学は、製品とインタラクションデザインの背後にある理由を理解するのにも役立ちます。

ユーザーエクスペリエンスを向上させるために、人間の行動から多くのUXデザイン原則を導き出します。しかし、これらは強力な心理的ツールであり、善と同じくらい害を及ぼす可能性があります。

良い例は、ソーシャルメディア企業がデザイン心理学を使用して人々を操作し、利益の名の下にユーザーの注意を競う方法です。

デザイン心理学をよく理解して、ユーザビリティテストでのこれらの原則を認識することを学ぶことができます。あなたが観察する非言語的な手がかりがあるかもしれません、それはより充実したフィードバックを収集するうえでユーザーと接することができます。

UXPinによるユーザビリティテストの改善

意味のあるフィードバックを得るもう1つの方法は、最終製品のように見え、機能する忠実度の高いプロトタイプを作成することです。 UXPinを使用すると、洗練されていながら直感的なオールインワンプロトタイピングソフトウェアを使用して、アイデアをエクスペリエンスに変えることができます。

この記事からUXの原則を取り入れて、UXPinの次のプロジェクトに適用してください。 14日間の無料トライアルにサインアップして、今日からより良いCXデザインを始めましょう！

The post 優れたUXデザインを生み出す心理的トリック appeared first on Studio by UXPin.

ローコードツール、ノーコードツール

UXPin — Sat, 24 Jun 2023 10:46:52 +0000

ノーコードやローコードのアプリケーションプラットフォーム（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.

0から作るUXPin Merge + TypeScript + Storybookの環境

tomotaka@xenon.io — Thu, 22 Jun 2023 06:56:37 +0000

この記事は、綿貫様にご執筆いただきました。

デザインツールであるUXPin Mergeを導入するにあたり、TypeScriptでの環境構築の仕方をまとめた記事です

公式ドキュメントには通常のJavaScriptでの導入の仕方しか記載がなかったので書いてみました。

また、今回の記事内のコードはこちらのリポジトリに全て載せています。

前提

UXPinを導入する場所は、アプリケーションのコードが全て入っているリポジトリよりも、UIライブラリやデザインシステムといった単位で管理しているリポジトリの方が良いでしょう。

UXPin専用のコードを書かないといけない箇所もあるので、ライブラリを開発するためのリポジトリ内で管理した方が取り回しがしやすそうです。

というわけで、ライブラリとして開発するため実質的にStorybookはセット。
そのためこの記事ではStorybookの導入まで説明します。

0. 初期化

この記事ではyarnを使っていますが、npmを使っている方は適宜読み替えてください。

ターミナルでコマンドを叩きます。

yarn init -y

このような内容のpackage.jsonが生成されました。

{ "name": "uxpin-with-typescript", "version": "1.0.0", "main": "index.js", "author": "Keisuke Watanuki", "license": "MIT" }

1. React + TypeScriptの準備

ターミナルでコマンドを叩きます。

yarn add -D react @types/react react-dom @types/react-dom typescript


{
 "name": "uxpin-with-typescript",
"version": "1.0.0",
"main": "index.js",
"author": "Keisuke Watanuki",
 - "license": "MIT" + "license": "MIT",
+ "devDependencies": {
+ "@types/react": "^17.0.34",
+ "@types/react-dom": "^17.0.11",
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2",
+ "typescript": "^4.4.4"
 + }
  }

更にコマンドを叩きます。

npx tsc --init

tsconfig.jsonが生成されるので適宜設定して使います。
今はコメントアウトを消すなど、最低限にとどめておきました。

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"jsx": "react",
}
}

https://www.typescriptlang.org/tsconfig

2. Storybookの準備

ターミナルでコマンドを叩きます。

npx sb init

プロジェクトのルートに.storybookとstoriesというフォルダが追加されたり、package.jsonにdependenciesやscriptsが追加されたり、TypeScript + React用のコードが自動で追加されます。

※コンポーネント類が「stories」というディレクトリに格納されていて、実際の運用では「components」などにリネームすると思われますが、話を簡単にするためにこのまま進めます。

この段階で以下のコマンドを叩くと、localhost:6006でStorybookが起動します。

yarn add -D @uxpin/merge-cli

package.jsonにscriptsを追加しておきましょう

{ "name": "uxpin-with-typescript", ... "scripts": { "storybook": "start-storybook -p 6006",　- "build-storybook": "build-storybook" + "build-storybook": "build-storybook", + "uxpin": "uxpin-merge --disable-tunneling" } }

yarn add -D babel-loader ts-loader@^8.2.0 style-loader@^2.0.0 css-loader@^5.2.7

@uxpin/merge-cliの2.7.9においてはloaderのバージョンが最新だと動きませんでした。根本解決ではありませんがこれらのバージョンを指定してインストールすると動作することは確認したため、ひとまずこちらをお試しください。

追加でコマンドを叩きます。

touch uxpin.config.js uxpin.webpack.config.js

それぞれのファイルには以下を記載します。

module.exports = { components: { categories: [ { name: 'General', include: [ 'stories/Button.tsx', 'stories/Header.tsx' ] } ], webpackConfig: 'uxpin.webpack.config.js' }, name: 'UXPin Merge + TypeScript + Storybook' }

StorybookのイニシャライズでPage.tsxというファイルも生成されていますが、

ここでは登録していません。説明すると少し長くなってしまうので次回の記事で紹介します。


preconst path = require('path')


module.exports = {
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
publicPath: '/'
},
resolve: {
modules: [__dirname, 'node_modules'],
extensions: ['*', '.tsx']
},
devtool: 'source-map',
module: {
rules: [
{
loader: ['babel-loader', 'ts-loader'],
test: /\.tsx$/,
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 2
},
},
],
},
]
}
}

ここまで来たら、ターミナルで以下のコマンドを叩くとUXPinのexperimental modeが起動します。

yarn uxpin

ターミナル上に表示されたURLにアクセスすればexperimental modeで挙動を試せます。

次回

この記事で作った環境にCSS Modulesを適用します。

この記事からUXPinに興味をお持ちいただけた方は、 14日間の無料トライアルにサインアップして、今日からより是非ご利用を開始してみてください。また、UXPin Mergeをご希望の方は、こちらよりデモをご予約ください。

この記事は、株式会社Incrementsの綿貫様にご執筆いただきました。元記事は、こちらから。

The post 0から作るUXPin Merge + TypeScript + Storybookの環境 appeared first on Studio by UXPin.

プロダクトデザイン Archives

２０２４年に試すべき デザインハンドオフツール １０選

１．UXPin Merge

２．Zeplin

３．Marvel

４．Sympli

５．Avocode

６．InVision

７．Framer

８．Spectrr

９．Adobe XD

１０．Figma

デザインハンドオフが大変な理由

非現実的な期待

コードレンダリングに不十分な画像ベースツール

技術的制約

多すぎるデザインハンドオフツール

UXPin Mergeによるデザインハンドオフの改善

Figmaのデザインをインタラクティブなプロトタイプにしよう

Figma のデザイン、UXPinでプロトタイプを作る

Figma とUXPinでプロトタイプを作る意義

ステート

インタラクション

変数

エクスプレッション

FigmaのモックアップをインタラクティブなUXPinプロトタイプにする5つの理由

1. 高忠実度プロトタイピング

2. UIデザイン とリアルなプロトタイプのギャップを埋める

3. ユーザーテスト の強化

4. イテレーション の高速化

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

End – to – EndのデザインソリューションであるUXPin

これだけは知っておきたい！ プロダクトデザイナー になるには

プロダクトデザイナー の仕事とは

プロダクトデザイン と UXデザイナーは同じか

プロダクトデザイナー の役割

プロダクトデザイナー に必要なスキル

ハードスキル

ソフトスキル

プロダクトデザイナー になるのに必要な資格

正規教育

オンラインのデザインコースおよびワークショップ

独学

プロダクトデザイナー のキャリアアップ

典型的なプロダクトデザイナーのキャリアパス

プロダクトデザインにある専門分野

プロダクトデザインのリーダーシップやマネジメントの役割とは

プロダクトデザイナーとしてネットワークを築き、メンターを見つける方法

ネットワークの機会

プロダクトデザインのメンターを見つける

プロダクトデザインの仕事に就くには

UXPinのインタラクティブなプロトタイプで注目を集める

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

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

この方法論の由来

有用性

持続可能性

実現可能性

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

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

デザイン イテレーション プロセス入門

デザイン イテレーション とは

デザイン イテレーション がデザインプロセスの一部な理由

デザインプロセスを反復する利点

リソースの節約

連携の促進

本当のユーザーニーズへの対応

定期的な更新のしやすさ

イテレーション が使われる場所

デザインにおける イテレーション

ソフトウェア開発におけるイテレーション

プロジェクト管理におけるイテレーション

リサーチにおけるイテレーション

反復的なデザインプロセスとはどんな感じか

ステージ１：計画

ステージ２：アイデア出し

ステージ３：プロトタイプ

ステージ４：テスト

ステージ５：レビュー

デザインイテレーションプロセスの「やるべきこと」と「やってはいけないこと」

２０２４年に試すべきデザインハンドオフツール１０選

**2. UIデザインとリアルなプロトタイプのギャップを埋める**

3. ユーザーテストの強化

4. イテレーションの高速化

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

これだけは知っておきたい！プロダクトデザイナーになるには

プロダクトデザイナーの仕事とは

プロダクトデザインと UXデザイナーは同じか

プロダクトデザイナーの役割

プロダクトデザイナーに必要なスキル

プロダクトデザイナーになるのに必要な資格

プロダクトデザイナーのキャリアアップ

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

デザインイテレーションプロセス入門

デザインイテレーションとは

デザインイテレーションがデザインプロセスの一部な理由

イテレーションが使われる場所

デザインにおけるイテレーション

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

クロスプラットフォーム・エクスペリエンス【徹底ガイド】

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

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

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

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

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

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

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

プロダクトデザイン完全ガイド – デジタル製品をデザインする

プロダクトデザインとは

プロダクトデザイナーと UXデザイナー