最初に

かつてのソフトウェア開発では、どんなプロジェクトでも高額な先行投資とコード構築における専門家チームが必要でした。

しかし最近では、最小限の手動コーディングだけで、ソフトウェア開発プロセスをよりスピーディーに行うことができる「ローコード開発」が注目されています。

本記事では、 ローコード開発 とは何か、デザインとどこで重なるのか、より広い製品開発プロセスの中でどのようにフィットするのかを見ていきましょう。

主なポイント

• ローコード開発とは、構築済みのコンポーネントを使ってアプリを作成する手法。従来型開発とは違い、デベロッパーはゼロからコーディングを始める必要がない。

• ローコードは、ソフトウェア開発の民主化、高速開発、メンテナンスのしやすさ、コスト削減、コーディングの共同作業化を実現する。

• 従来型開発は、プロセスを完全にコントロールできるが時間がかかってしまうことがあり、より高度なコーディングの専門知識を必要とする。

ローコード開発のUIデザインソリューション「UXPin Merge」を体験してみませんか？

コード化されたコンポーネントをドラッグ＆ドロップするだけで、アプリのレイアウトやユーザーフローを簡単に作成できます。

UXPin Mergeについての詳細はこちらをご参照ください。

 ローコード開発 とは

 ローコード開発とは、GUI（グラフィック・ユーザー・インターフェース）を通じてコーディングできるようにして、アプリ開発のプロセスを高速でシンプルなものにするソフトウェア開発手法です。

テキスト（文字）に依存する従来のアプリ開発環境に従う代わりに、事前に用意されているドラッグ＆ドロップ可能な要素を使ってアプリを構築できることで、手動コーディングの必要性を最小限に抑えることができます。

また、ソフトウェア開発だけでなく、製品チームはローコード開発ツールを使ってプロトタイプを作成と、アプリの最新バージョンをライブ環境にデプロイすることもできます。

「ノーコード開発」という手法も耳にしたことがあるかもしれませんが、ローコードと同義ではありません。

ノーコードとローコードの違いについて

ノーコード開発は名前からもわかるように、”ノー・コード（コーディングが不要）”なので、コーディングの知識がゼロの人でも使うことができます。一方、ローコードでは、必要最低限のコーディングは必要になります。

ローコード開発 と 従来型開発のプロセス の違い

ローコードと従来型開発のプロセスには主に開発スピード、コスト、カスタマイズオプションに関して、大きな違いがあります。

それぞれの違いを詳しく見てみましょう。

コーディングの民主化

ローコードツールには、ビジュアルインターフェースと事前構築済みのコンポーネントがあるのでコーディングのスキルがあまりない人でも使うことができます。

また、既製のテンプレートやドラッグ＆ドロップツールのライブラリを活用することで、さらにローコードプラットフォームが使いやすくになります。

対する従来のアプリ開発プロセスでは、開発者の協力なしには行うことができません。

開発者は複数のプログラミング言語に精通している必要がある上に、手動での作業も多く含まれます。

開発のスピード

ローコードツールを使用する最大のメリットの１つとして、「製品開発のスピードアップ」が挙げられます。

プロトタイプや検証などの開発プロセスでの多くの段階を自動化することができます。

対する従来型の場合だと、プログラマーがゼロからコードを書き、QA（品質保証）のスペシャリストが大規模な検証を実施し、必要に応じて開発チームがイテレーション（反復）を実施する流れが必要になるでしょう。

このような流れは、製品のリリースを遅らせる要因になってしまいます。

カスタマイズ

カスタマイズに関しては、標準化された機能に主にこだわりたいのであれば、ローコード開発は素晴らしいパフォーマンスを発揮します。

一方、例えばもう少しクリエイティブになって、幅広い統合を提供することで目立つようにしたい場合は、従来の製品開発プロセスを採り入れる方がいいでしょう。

カスタマイズされた複雑でユニークな機能においては手動コーディングが必要です。

メンテナンス

ローコードツールの要素は標準化されていて既製であり、徹底的に検証されているのでバグや統合の問題が少なくなります。

しかし、プログラマーが開発したものと比べると高性能ではないという欠点があります。

対する従来型開発のプロセスでは、メンテナンスをより細かく制御でき、より多くのスケーリングの可能性が提供されますが、デベロッパーの手による継続的な製品の更新も必要になります。

連携

ローコードプラットフォームはコーディングスキルがほとんどいらないため、技術的なバックグラウンドを持たない人でも理解して使うことができます。

その結果、ITチームとビジネスチームの連携が促され、より包括的な開発環境が実現します。

一方、従来型アプリ開発プロセスは、専門知識に大きく依存するため、デベロッパーと非技術系チームメンバーとの間に摩擦が生じる可能性があります。

コスト

シンプルな製品を作りたいのであれば、ローコードを使うべきです。

開発コストは従来型開発のプロセスよりもずっと低くなり、市場投入までの時間も短縮されます。

ただし、ライセンス料には注意が必要で、必要なライセンスが多ければ多いほど、コストは高くなります。

一方、従来型アプリ開発プロセスを使ってアプリを開発することにした場合は、より多くの先行投資が必要になるかもしれませんが、コストを完全にコントロールすることができるでしょう。

どちらが自身のプロジェクトに適しているか

まとめると、ローコード開発にはスピード、アクセシビリティ、使いやすさがありますが、複雑で高度にカスタマイズされたアプリケーションを扱うには限界があるかもしれません。

対する従来型開発だと、完全な制御、柔軟性、拡張性が得られますが、より時間がかかる傾向があり、より高いレベルのコーディングの専門知識が求められます。

そして、ローコード開発と従来型開発のどちらを選ぶかは、特定のプロジェクト要件、アプリケーションの複雑さ、利用可能な開発リソースによって決まります。

組織によっては、ローコードと従来型の開発を組み合わせたハイブリッドなアプローチを採用する場合もあります。

ローコードと従来型開発は同じプロセスを踏む

従来のコーディングのルートに従うか、ローコードソリューションに転向するかにかかわらず、製品開発のステップは同じです。

ソフトウェア開発は最終段階であり、その前にアイデア出し、リサーチ、プロトタイプ、デザインがあります。

以下で製品開発プロセスでの７ステップを簡潔に見ていきましょう：

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

最初にチームでミーティングを行い、アイデアを出し合ってブレインストーミングを行います。

これは、創造性を引き出し、さまざまな解決策を探り、初期段階で実行可能かを検討することを目的としています。

ステップ２：リサーチおよびスクリーニング

アイデアを絞り込んだ後、潜在的なユーザーや広範な市場に対して調査・検証するという PoC（Proof of Concept：概念実証）に移ります。

方法としては、ターゲットとするユーザーと同じ特徴を持つ人々へのアンケートやインタビューの実施などがあります。

また、アイデアが有望で、さらに検討する価値があることが証明されたら、プロトタイプの作成に移りましょう。

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

ここで最初のビジュアルを生成します。

プロトタイプには、Lo-Fi（低忠実度）と Hi-Fi（高忠実度）の ２つの形式があり、 どこでテストするかに応じて、デジタルでのプロトタイプか切り抜きや紙のワイヤーフレームなどアナログでのプロトタイプを使うといいでしょう。

ステップ４：詳細なUIデザイン

UXPinで作成された忠実度の高いプロトタイプは、実際の製品を忠実に再現します。

本番で必要なすべてのインタラクティブ性とブランディングが備わっているため、テスターに リアルな体験を提供します。

ステップ５：検証とテスト

この段階では、デザインの最終的な検証を行います。

テスターからフィードバックを集め、チームにいる他のメンバーとブレインストーミングを行い、市場にある競合他社からソリューションを差別化することを目指します。

ステップ６：開発

従来だと、このステップはよく「デベロッパーのハンドオフ」と呼ばれました。デザインチームは、包括的なデザインガイドライン・仕様書とともに、ソフトウェアエンジニアに渡します。

このガイドラインを使用して、デベロッパーはデザインをコード化されたアプリに変換します。

ステップ７：起動

ここでやっと、GTM戦略（Go-to-Market）を立てて、アプリを市場投入します。

各ステップの詳細については、こちらの製品開発ガイドをお読みください。

しかし、アイデアを優れた製品にするためには、デザイン段階と開発段階の移行がいかに重要であるかについて理解する必要があります。

そこで、ローコード開発プロジェクトと従来型開発でどのような影響があるのかを見ていきましょう。

ローコード および 従来型開発でデザインが重要な理由

デザインに重点を置くことで、以下のような効果があります：

１．アイデアの検証およびリスクの最小化

PMF（プロダクトマーケットフィット）の欠如と資金不足は、スタートアップが失敗する二大原因ですが、これらの問題は、プロトタイプをテスターに操作してもらい、アプリのアイデアを検証することで回避できます。

これによって、時間と資金を投入しても市場に響かない、あるいはまだ大幅な改良が必要な製品を出さないようにすることができます。

２．GTMプロセスのコスト効率を維持する

Lo-Fi、Hi-Fiを問わず、プロトタイプの作成は非常に費用対効果が高く、洞察力のあるプロセスになります。

UXPinのようなプロダクトデザインツールを使うことで、最終製品の機能性、特徴、全体的な「イメージ」が反映されたビジュアルを作成することができます。

さらに、すでにコード化されたコンポーネントがあれば、プロトタイプと統合させることもできます。

それによって、デザインのテストを高速化させ、初期投資をさらに最小限に抑えることができます。これが次のポイントに繋がります。

３．反復と改善

この段階では最終的なアプリのコーディングに取り掛かっていないため、デザインの改善および反復を継続的に行うことができます。

この俊敏性により、テスターからのフィードバックを取り入れることができ、デザインの変更を必要とする市場のトレンドや変動に対応することができます。

４．リソースとの整合性

明確なデザインがなければ、アプリ開発への投資がどのくらいになるかは把握しづらいかもしれません。

しかし、デザインに重点を置くことで、リソースを効果的に配分し、どのようなツールなどを使うのか、開発に要する時間、プロジェクトを成功させる上で必要なスキルなどを知ることができます。

５．コミュニケーションの強化

優れたデザインがあることで、ステークホルダーや潜在的な投資家などのプロジェクト関係者間のコミュニケーションの改善につながることがよくあります。

アイデアが視覚的に示されるので、誰でも簡単にビジョンの把握やフィードバックの提供、そして賛同を得ることができるようになります。

UXPinのようなプロトタイピングツールを使うことで、新製品をより早く市場に投入できるだけでなく、デベロッパーとデザイナー間のコミュニケーションも大幅に改善されるのです。

UXPin Mergeでローコードをお試し

エンジニアが製品を作るのと同じUIコードコンポーネントを要素をドラッグ＆ドロップしてデザインできます。

UXPin Merge を使って、美しく機能的なUIを構築して、製品開発のプロセスをスピードアップしましょう。

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

The post 「 ローコード開発 」とは？従来型との違い – どちらが最適か appeared first on Studio by UXPin.

UXデザイナーは、ビジネスゴールやデザインの調整、プロセスの最適化、ユーザーのニーズに合った製品をつくることが求められます。そのためには、チームや部門、ステークホルダーといかに効率的に連携できるかが肝心です。

効率的に連携できることで、デザイナーのネットワーキングスキルが向上し、優れたUX（ユーザーエクスペリエンス）が実現できることから、組織でのUXの重要性が明確になります。

UXPinでインタラクティブで高度なプロトタイプを作成して、製品開発プロセスの部門横断的なコラボレーションの効率化と連携を強化しましょう。

また、UXPinで作った高忠実度なプロトタイプをチームで共有し、１つのツールだけでデザインハンドオフを行うことができます。

機能やプランに関しての詳細は、こちらのページをご覧ください。

UXデザイナー向け「 部門横断型 連携 」の重要性

製品開発がますます複雑化するなかで、一貫性のあるユーザー中心の体験を提供するには、UXデザイナーと組織、チームの連携が鍵になります。

また、連携がうまく取れることによって、デザインをビジネス目標の整合、プロセスの効率化、ユーザーのニーズや期待に応えることができる “良い製品” につながります。

組織内の「効果的」な連携における目標と利点：

• 製品開発の加速：上手く連携しているチームは業務効率化、市場投入までの時間短縮、ユーザーの要求に対する応答性の向上が実現する。
• イノベーションの強化：多様な視点によって創造性を生み、革新的なソリューションにつながる。
• より良い意思決定：複数のステークホルダーからの意見を聞くことで、より良い結果を出すことができる。デザイン上での問題の削減、手戻り防止につながる。
• より高い適応性：ユーザーのニーズや市場環境の変化に効果的に対応し、製品の一貫性と競争力を維持することができる。
• 従業員のエンゲージメントの向上：連携によって当事者意識や仲間意識、仕事への満足感が育まれ、生産性の向上や離職率の低減につながる。

組織構造が 部門横断型 連携に与える影響

以下で、典型的な４つのUXチームの構造と部門横断型 連携における影響です：

1. 一元型：他のチームと接する機会が少なく、サイロ化に繋がる可能性がある。デザイナーが各プロジェクトや部門固有の要件や制約を理解しづらくなることがある。
2. 組込型：：デザイナーが特定のプロジェクトや部署に集中しすぎるあまり、組織のより大きなデザイン目標や一貫性が見失われる可能性がある。
3. 分散型：デザインチームが組織内に分散してる場合、作業調整やデザインの一貫性の維持がしにくい。潜在的なズレや矛盾を引き起こす可能性がある。
4. 契約型：（派遣などの）契約によって雇われているデザイナーだと、組織内のリソース、知識、コミュニケーションチャネルに同じレベルでアクセスできない場合がある。社内チームやステークホルダーとの効果的な連携がしづらい。

デザイナーの連携相手とは？

成果を上げてイノベーションを促進させるには、UXデザイナーは組織のさまざまなステークホルダーとの連携が必要です。

そのうえ、効果的な連携を行うために製品開発プロセスにおける各役割の貢献度を理解することが不可欠です。

UXデザイナーの主な連携相手は以下の通りです：

• プロダクトマネージャー：デザイン目標を製品戦略、優先順位、ビジネス全体の目標と整合させる。
• デベロッパー：技術的な制約や可能性を考慮しながら、デザイン実装が正確かつ効率的であるよう緊密に連携する。
• マーケティング部門：ユーザーデータを充実させ、ターゲットを絞ったインパクトのあるマーケティングキャンペーンを作成するために、連携してユーザーリサーチ、ペルソナ、ユーザージャーニーを行う。
• セールス部門：顧客のニーズ、好み、ペインポイントに関する貴重なフィードバックとインサイトを集め、デザインの意思決定に活かす。
• カスタマーサポート部門：ユーザーとのやりとりを活かして問題に対処し、製品体験の向上に使えるフィードバックを集める。
• QA（品質保証）部門：製品発売前に、デザインがユーザビリティ、アクセシビリティ、性能の基準を満たしているか確認する。
• 幹部ステークホルダー：デザインの目標、進捗、結果を伝えることで組織の意思決定者の賛同と支持を得る。

 部門横断型 連携におけるDesignOpsの影響

DesignOps（デサインオペレーション）とは、組織のデザインプロセスとワークフローを効率化する戦略的アプローチであり、デザインチーム、ステークホルダー、その他の部門間のリソース、ツール、コミュニケーションを最適化します。

DesignOpsを導入することで、組織では創造性、革新性、効率性をサポートできる連携環境が育まれることから、デザインチームは高品質でユーザー中心の製品を確実に提供できるようになります。

DesignOpsによるコミュニケーションとチームワークの向上

DesignOpsは、連携のための明確なチャンネル確立や期待値の設定、役割と責任を明確にすることによって、コミュニケーションとチームワークを促す重要な役割します。

DesignOpsの目的としては、プロセスの標準化、効果的なコラボレーションのためのツールの提供、デザイン目標とビジネス目標の整合、そしてデザイナー、デベロッパー、ステークホルダー間のギャップを埋めることです。

これらによって、部門横断チームが円滑に連携できるようになり、より良い意思決定、製品の品質向上、イノベーションの拡大につながります。

DesignOpsによる連携の促進

DesignOpsを効果的に実行するには、組織はまず現在のデザインプロセスを評価して非効率な部分を特定し、連携のための明確な目標を設定しないといけません。

次に、効果的な連携をサポートするのに必要なツール、プロセス、コミュニケーションチャネルをまとめた計画を作成します。

ここには、チームワークと連携を促すための定期的な機能横断的会議、デザインレビュー、ワークショップなどが含まれます。

さらに、組織はプロジェクトのタイムライン、製品品質、従業員満足度などのKPI（主要業績評価指標）の追跡によって、DesignOps 導入がうまくいっているかをモニタリングする必要があります。

DesignOpsのアプローチを継続的に改良・調整することで、組織は製品の成功を促すコラボレーション文化を築くことができるのです。

部門横断チームにとってのデザインシステムの役割

デザインシステムで連携を効率化する方法

デザインシステムは、一元化された、包括的で一貫性のあるガイドライン、コンポーネント、パターンのセットを提供することで、  部門横断型 チームの連携が効率化されます。

また、デザイン言語を共有することで、デザイナー、デベロッパー、その他のチームメンバーが一体となって効率的に作業することができます。

これによって、意思疎通の行き違いがなくなり、反復作業も減らすことができます。

また、デザインシステムは製品やプラットフォーム間で一貫したUXを提供し、統一されたブランドアイデンティティを構築します。

デザインシステムを活用することで、チームはブレーンストーミング、イノベーション、問題解決に集中することができ、より良い成果とUXをもたらすことにつながります。

組織内のデザインシステムの確立と維持

デザインシステムを構築する際には、機能横断的なチームの参加が非常に重要です。

このような連携のアプローチにより、デザインシステムは全ステークホルダーのニーズを確実に満たし、ビジネス目標に沿うことができます。

まずは既存のコンポーネント、パターン、ガイドラインをドキュメント化することから始め、デザイナー、デベロッパー、その他のチームメンバーから意見を聞きながら、反復的なプロセスで改良していくのがいきましょう。

デザインシステムを導入したら、その効果を継続的に評価し、フィードバックを取り入れ、組織の進化するニーズに適応させることで、最新かつ適切な状態を維持することが非常に重要です。

メンテナンスと定期的なアップデートを優先することで、デザインシステムは部門横断型チームの連携に対応し、製品を成功に導く貴重な資産であり続けることができるのです。

デザインプロセスの様々な段階での連携

研究・発見

「研究・発見」の段階では、UXデザイナーはステークホルダーや専門家と連携し、プロジェクトに関する重要な情報を集めないといけません。

この連携によって、ユーザーニーズ、ビジネス要件、業界トレンドに関する貴重なインサイトが得ることができます。

また、ユーザーや他のチームと関わることによって、デザイナーは問題点、改善の機会、解決策の可能性を見出すことができます。

オープンなコミュニケーションを育み、多様な視点を積極的に取り入れることで、デザイナーはデザインプロセスを通じて、情報に基づいた意思決定を行うための強固な基盤を築くことができるのです。

デザインとプロトタイプ段階

「デザインとプロトタイプ」の段階においてまとまりのある機能的な製品を作るには、UXデザイナー、デベロッパー、その他のデザインチーム間の効果的な連携が不可欠です。

共に作業することによって、チームは技術的な制約や実現可能性を考慮しながら、ビジネス目標やマーケティング戦略に沿ったデザインコンセプトを実現することができます。開かれたコミュニケーションチャネル、定期的なデザインレビュー、共有ツールによってスムーズな連携ができるようになることから、チームはデザインアイデアの反復、潜在的な問題への対処、全体的な UXの改良ができるのです。

ユーザーテストと検証

最終製品が確実にユーザーのニーズと期待に応えるようにするには、「ユーザーテスト・検証」の段階が非常に重要です。この段階でユーザー、テスター、プロダクトマネージャーと連携することで、UXデザイナーは必要なフィードバックを集め、改善のための領域を特定することができます。

ステークホルダーと積極的に関わることで、デザイナーはフィードバックをプロトタイプに反映させ、修正の優先順位をつけ、データに基づいたデザインの意思決定を行うことができます。このような協力的なアプローチにより、最終的にはユーザーとビジネスの目標に沿った、よりユーザー中心の成功する製品を生み出すことができるのです。

デザインハンドオフとスムーズな連携

効果的なデザインハンドオフの重要性

デザイン段階から開発段階へのスムーズな移行を実現するには、効果的なデザインハンドオフが不可欠です。ハンドオフがうまく行われることによって、意思疎通のすれ違いが最小限に抑えられ、プロジェクトの遅延が減り、不要な手戻りを防ぐことができます。

デザイン仕様を明確に理解することで、UXデザイナーとデベロッパーはより効率的に連携でき、ユーザーのニーズを満たし、ビジネス目標に沿ったより質の高い製品を生み出すことができるのです。

ハンドオフを成功させるためのベストプラクティス

デザインハンドオフを成功させるために、デザイナーとデベロッパーは連絡と連携を促すベストプラクティスを採用すべきです。

デザインコラボレーションプラットフォームやバージョン管理システムなどのツールやテクノロジーを活用することで、ハンドオフプロセスが効率化され、エラーの可能性を下げるといいでしょう。

さらに、カラーパレット、タイポグラフィ、レスポンシブレイアウトなど、デザイン仕様に関する明確なドキュメントとガイドラインがあれば、デベロッパーは意図したデザインを正確に理解して実装できるようになります。

このようなベストプラクティスに従うことで、チームはハンドオフプロセスの全体的な効率と効果を大幅に上げることができるのです。

デザイナーとデベロッパーの強固な関係を築く

製品開発プロセスにおいて、連携をうまくいかせるには、デザイナーとデベロッパーの良好な関係構築が不可欠です。

オープンなコミュニケーション、相互尊重、共感を育むことで、デザイナーとデベロッパーは互いの視点、制約、目標をより理解することができるでしょう。

また、定期的なミーティング、意思決定の共有、共同での問題解決は、チームメンバー間の信頼と親密さを築き、よりまとまりのあるいい製品に繋がります。

このような関係に投資することで、組織で 部門横断型 の連携を促す環境が作られ、最終的にユーザーとビジネスの成果を上げることができるのです。

効果的な 部門横断型 チームのためのヒント

• チームメンバーとの信頼関係構築：チーム構築の活動に参加し、各メンバーの役割、強み、課題を理解するよう努め、協力的な環境を育みましょう。
• オープンなコミュニケーションとフィードバックを促す：最新情報を共有や、課題についての話し合い、および建設的なフィードバックの提供のためにチームメンバーとの定期的なミーティングやタッチポイントを設けることで、透明性と継続的な改善という文化を育みましょう。
• コラボレーションツールやソフトを活用する：Trello、Slack、UXPin のコメント機能などのプロジェクト管理、コミュニケーション、デザインコラボレーションツールを活用して、ワークフローの効率化、コミュニケーションの向上、誰もが関連するUXリソースへの自由なアクセスを実現しましょう。
• 連携力を継続的に高める：連携、連絡、チームワークに焦点を当てたワークショップ、ウェビナー、会議に参加し、多様なチームと効果的に仕事をして、多様なワークスタイルに適応する能力を高めましょう。
• UXとユーザーを提唱する：ユーザーリサーチの結果、インサイト、成功事例をチームやステークホルダーと共有し、ユーザー中心のデザインの重要性に対する認識を高め、ビジネス目標達成におけるUXの価値を実証しましょう。

UXPin Merge – 至高のコラボレーションツール

UXPin Mergeは、デザインシステムとフロントエンド開発のギャップを埋めることで、デザイナー／デベロッパーの連携を促進します。

このギャップを埋めることで、UXPin Mergeでは誰もが「同じ言葉を話し」、デザインシステムと製品のコードによって定義された同じ制限と制約の中で作業できるので、より良いコラボレーションを促します。

UXPin Mergeの「信頼できる唯一の情報源（Single source of truth）」で、製品開発のプロセスを効率化し、チームの連携を強化してみませんか？

詳細とアクセスリクエスト方法については、Mergeのページをぜひご覧ください。

The post 【デザイナー向け】 部門横断型 連携 ガイド appeared first on Studio by UXPin.

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

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

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

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

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

グリッドとは

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

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

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

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

グリッドの種類

原稿グリッド

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

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

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

カラムグリッド

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

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

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

モジュールグリッド

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

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

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

階層グリッド

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

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

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

ベースライングリッド

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

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

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

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

正方形グリッド

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

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

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

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

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

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

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

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

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

グリッドの構造

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

グローバルデザインシステムのコミュニティであるInto Design Systemsは、２０２３年７月にデザイナー、デベロッパー、デザインリーダー、デザインマネージャー、DesignOps実践者に向けたバーチャル会議を開催しました。講演では、ゲストスピーカーであるMarcel Bertram氏が「Systematic Design With Code（コードによる体系的デザイン） 」について語りました。

ゲストスピーカー：Marcel Bertram氏について

世界的な自動車メーカーでデザインシステムチームを率いるブランドデザイン専門家。また、UXデザイン運用のコンサルタント会社のMUDX.designの共同設立者兼UXコーチも務める。

また、ベクターとコードベースでデザインツール比較を行い、組織が「信頼できる唯一の情報源（Single source of truth）」を持つためにコードベースデザインツールの活用方法を紹介しました。このコミュニティのイニシアチブは、業界と組織の成長に役立つ知識の共有です。

本記事は、Marcel氏のInto Design Systemsの講演「The Power of Design, Code & Ai in Design Systems（デザインシステムにおけるデザイン、コードおよびAIの力）」の要約となります。

ウェビナー全体（３時間）はこちらからご覧いただけます。

主なポイント：

• ベクターベースデザインツールは、デジタル環境でのさまざまな解像度にも対応可能なスケーラビリティと鮮明さを実現するために誕生した。
• ２０１９年に開発されたUXPin Mergeテクノロジーを使用することで、デザインパラダイムに大きな変化をもたらし、コードコンポーネントをデザインプロセスに直接融合させて一貫性のあるUIライブラリを提供する。
• コードを「信頼できる情報源」として認識することで、一貫性、効率性を確保し、デザイン・開発チーム間でアプリケーションの仕組みについて全体的な理解力が深まる。
• ドイツ拠点のIT企業dotSourceはUXPin Mergeを利用して、コード、デザイン、ドキュメントを同期させてデザインと開発のギャップを埋めることに成功した。
• UXPin Mergeテクノロジーでプロトタイピングの質を高めることができ、ユーザーインタラクションの検証においてより正確なインサイトを得ることができる。

コードコンポーネントをデザイナーとデベロッパー間の「信頼できる唯一の情報源」として使ってみませんか？

UXPin Mergeを使って製品開発プロセスのギャップを埋めて、製品のリリースを高速化しましょう。

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

ベクターベースのデザインツールがある理由

デジタルデザインの黎明期には、フィジカルアートの精密さを再現することが求められていました。

ピクセルベース手法のように小さな点から画像を構成するのではなく、ベクターは数式を使ってグラフィックを形作ります。

その結果、画像サイズに調整を加えても正確で、柔軟な状態を保つことができます。

ベクターツールは従来のグラフィックデザインによって築かれました。業界ではAdobe Illustratorのようなツールが採用され始め、プラットフォームや解像度を問わず一貫した鮮明なデザインを提供できようになりました。

また、Webサイト、アプリケーション、デジタル広告の増加に伴い、アダプティブなデザインへのニーズが高まったことでデザイナーは自然とベクターベースのツールを使用する人が増加しました。

ベクターベースのデザインツールは、単に美的なものだけでなく、デジタル環境における実用的なニーズに応えるものだったのです。

コードベース革命

2019年に、UXPin Mergeテクノロジーが登場するまで、ベクターベースツールではデザインと開発のギャップを埋めることはできませんでした。

Mergeのコードベース手法は、コードコンポーネントをデザインプロセスに取り込むことで、デザイナーはプロトタイプに、エンジニアは最終製品での開発で同じUIライブラリを使うことができます。

ベクターベースとコード化されたデザインシステム

デジタル製品デザインは徐々にベクターベースのシステムから革新的なコードベースへとシフトしてきました。

デザインプロセスにコードが統合されたことで、デベロッパーとデザイナーの連携方法が変わり、製品開発プロセス全体の効率化に繋がりました。

次のチャプターからは、この進化をさらに深掘りしてデザインシステムとプロトタイプへの影響をみていきましょう。

ベクターベースのシステムを理解する

それは何？：

• コンピュータグラフィックスで画像を表現するために数式が使われるツールのこと。
  FigmaやAdobe Illustratorなどが有名。

メリット：

• 静的なプロトタイプとビジュアルデザインに最適
• デザイナーが直感的に視覚化し、下書きなど、すぐに変更を加えることができる

デメリット（制限）：

• 実際のアプリケーションの使用感がわかりづらい
• ユーザーとのインタラクションやトランジション、高度なコンポーネントの動作を、常に正確に模倣できるわけではない。
• コードの複雑さと可能性が見えづらい。

コード化されたデザインシステムを理解する

それは何？：

• UXPinのように、デザインキャンバス上で実際にコード化されたコンポーネントを使用するデザインツールのこと。

メリット：

• デザイナーとデベロッパーの自動更新により、組織全体にわたる「信頼できる唯一の情報源（Single source of truth)」を作成できる。
• デザインと開発のシームレスな移行。
• リアルなプロトタイプのために、コンポーネントの実際の動きなどを正確に表現する。
• より有意義なユーザーテストやステークホルダーからのフィードバック
• 複雑なプロトタイプにおいてエンジニアリングチームへの依存が減る。
• アクセシビリティ機能、セマンティクス、パスワード管理などのブラウザ機能の統合。
• 実際にコード化されたUI要素に基づく探索がしやすくなる。
• デザイナーはコードのメリットを得ながら、使い慣れたデザインツールのインターフェースで作業できる。

デメリット（制限）：

• 変更を実装できるのはデザインシステムチームのみのため、ガバナンスにおいて有益である。

「信頼できる情報源」としてのコード

最終的なデジタル製品はコードに基づいており、デベロッパーはコードを使って作業をします。

一方デザインチームはベクターベースのツールを使うため、彼らと最終的な製品の間にはギャップが生じてしまいます。

そのため、コードを中心的な参照点、つまり「信頼できる情報源」として認識することが極めて重要です。

この哲学で以下が保証されます：

• 一貫性と結束： デザイナーとデベロッパーが同じレポジトリからコンポーネントを作成することで、全体的な統一性が確保される。
• 効率性： 全員が同じライブラリや文書を参照することで、伝達ミスや食い違いが発生する余地が少なくなる。
• 深い理解： アプリケーションがどのように機能するかの「中核となるメカニズム」を理解するようデザイナーに促し、それによってより総合的なデザイン手法を促進する。

UXPin Mergeによる「信頼できる唯一の情報源（Single source of truth）」

dotSourceのユースケース

ドイツを拠点とするソフトウェア開発会社であるdotSourceはUXPin Mergeを導入する以前、製品開発フローにおいて問題を抱えていました。

新しいパターンやコンポーネントをデザインシステムに追加するには、多くの重複したプロセスが必要です。

デザインシステムのリリースのほとんどは、少なくとも以下の3か所の更新を必要とします：

1. デザインシステムのコードベース（コンポーネントライブラリ）
2. デザインチームが使用するUIキット（デザインツール）
3. デザインシステムのドキュメント

「各UIコンポーネントに”信頼できる唯一の情報源（Single source of truth）”を３つ持つのはは、直観通りにはいかず、エラーの増加につながります。このようなデザインシステムの更新プロセスとテクノロジーの整合性がとれないと、１つの変更のために３つの場所での更新が必要になります。チームは余分な作業を終始することになってしまいます。」

dotSourceは、この問題に対する唯一の解決策は、コードベースのデサインプロセスを実装し、デザインと開発の間に本当の「信頼できる唯一の情報源（Single source of truth）」の作成が必要であるとわかりました。

そこでUXPin Mergeを導入し、デザイナーはコードコンポーネントを使ってプロトタイプの作成、製品のデザインシステムをUXPinにインポートできるようになりました。

「UXPinのStorybook統合を利用したことで、デザイナーはUXPinのエディタ上ででデザインシステムの Storybookコンポーネントを使用できます。

これによって、コード、デザイン、ドキュメントの同期が全て揃ってできるようになるため、次のことを実現します：

• デザイナーの QA（品質保証）への参加および、デベロッパーのバグの特定のサポート

• デザイナーとエンジニア間の連携強化
• 高忠実度のインタラクティブ コンポーネント （コンポーネント駆動型プロトタイプ）による、テストの改善と反復の高速化」

最新のプロトタイプ – スタティック vs. インタラクティブ

静的なプロトタイプ

Figmaのようなベクトルベースのツールの使用は、複雑なインタラクティブレイヤーを使わずに静的な視覚表現を提供するため、理解度や美的感覚を測ることが目的の場合で効果的です。

デザイナーは通常、ベクターベースツールからプロトタイピングツールに移行しますが、これにはコストと運用の負担がかかり、コードに匹敵する結果は得られません。

インタラクティブプロトタイプ

コードベースのデザインツールは、より包括的な機能とユーザージャーニーテスト向けにプロトタイピングの範囲を広げます。

UXPinのようなツールで、実際のインタラクション、トグル機能、入力フィールドの動作などを再現し、よりリアル感のあるユーザー体験を提供します。

UXPin Mergeのテクノロジーは、プロトタイプの実際の使い心地を体験するために、見えるもの以上の情報を提供します。

デザインチームは、検証で得たインサイトを活用し、より正確な反復と改善を行うことができます。

デザイナーはユーザビリティを向上させ、デザインプロセスにおいてより多くのビジネスチャンスを特定することで企業価値向上にもつながります。

コードベースのデザインワークフローへの移行

デジタルデザインの世界は広大で、進化し続けています。ベクターベースツールは初期のデザイン段階では効果的かもしれません。

しかし、非効率やミスコミュニケーションを減らし、検証において正確性のあるユーザー体験を提供できることから、コード化されたデザインシステムを取り入れることが将来的に必要になるでしょう。

デザイナーとデベロッパーが連携をするなかで、最終目標はユーザー中心、効率的、見た目にも美しいアプリケーションを作成することだと覚えておくことが重要です。

そのため、適切なツールを理解し活用することは重要な選択の一つです。

UXPin Mergeでデザインシステムの成熟度を高める

UXPin Mergeは現代の製品開発フローにおける課題を解決するオールインワンのUXデザインツールを提供します。

組織間でUIライブラリやドキュメントを共有で使うためにデザイナーとデベロッパーとの完全に統合するには何年もかかるかもしれません。

組織にとって、”成熟したデザインシステム” つまり、デザイナーとデベロッパーが使用するUIライブラリやドキュメントなどを統合するには時間がかかるかもしれません。

そして大抵はそこにたどり着かずに、dotSourceのケースのように「信頼できる情報源」を複数持ってしまうことになります。

しかし、UXPin Mergeを使用することで、デザインと開発のギャップを埋めることができます。

組織は初期段階から完全統合されたデザインシステムを構築でき、リソースの無駄を省くことができるのです。

また、UXPin Mergeの使用で次のことができるようになります：

• GitやStorybookを使って、React、Vue、Angular、Ember などの Javascript ベースのデザインシステムをインポートする。
• UXPinのPatterns（パターン）機能を使って複数のデザインシステムからUI要素を組み合わせ、新しいデザインシステムのコンポーネントを作成する。
• オープンソースのデザインシステムからコンポーネントをインポートして、開発に着手する前に新しいパターンを検証する。
• 従来のベクターベースのデザインツールより８倍速くプロトタイプを構築する。
• バージョン管理を使って、デザイナーが更新とデザインシステムのバージョン履歴を管理できるようにする。
• 製品チームのためのドキュメントを作成し、すべてを１つのプラットフォームで管理する。
• JSONを介してプロトタイプに実データを使う。

ここまで読んでいただきましてありがとうございます！コードベースをメリットを実感してみたくなりましたか？

こちらのページからアクセスをリクエストし、デザインシステムにおける「信頼できる唯一の情報源（Single source of truth）」を作成しましょう。よりユーザーフレンドリーな製品体験を提供する方法をぜひご覧ください。

The post コード と デザイン ‐ どっちがより信頼できる情報源？ appeared first on Studio by UXPin.

プロトタイピングツールは、デザイナーが最終製品のレプリカを作成するための製品で、ユーザーテストやステークホルダーへのプレゼンテーションや、デベロッパーへの引き渡しに使われます。デザインツールには、大抵追加機能としてプロトタイプがありますが、専用のツールを使うことで、より高度なプロトタイプができるようになります。

コードベースのデザイン革命を牽引する企業の１つである UXPin の１４日間の無料トライアルにサインアップして、次のデジタル製品や Web デザインのプロジェクトで UXPin の高度なプロトタイプ機能をぜひお試しください。

１．UXPin

UXPin は、デザインを完全にインタラクティブにすることができる、コードベースのプロトタイピングツールです。多くの主要なデザインソリューションとは違い、UXPin にはプロトタイプとテストに必要なものがすべて組み込まれているので、プラグインは必要ありません！

UXPin は、デスクトップ（Mac および Windows）へのダウンロードか、ブラウザでの使用を選択できますが、UXPin のダウンロードの方には、オフラインでも作業を継続できるというメリットがあります。

そして、ブラウザでのプロトタイプのテストや、UXPin の Mirror アプリを使って、iOS や Android などのモバイルデバイスでのプロトタイプの実行ができます。また、UXPin のドキュメントは素晴らしく、１ステップごとの説明やビデオによるチュートリアルで、このツールのあらゆる側面がカバーされています。

さらに UXPin には、他のプロトタイピングツールにはないもう１つの利点として、React コンポーネントで完全に機能するプロトタイプを構築するための UXPin Merge というのものがあります。

Merge を使うと、Git レポジトリや npm 経由での React コンポーネントの同期や、Vue、Angular、Web コンポーネント、Ember 向けの Storybook 統合の使用などのオプションがあります。また、Merge でレイアウトのデザインや、製品を １０ 倍速く立ち上げることができます。

２．Figma

Figma は、最も広く使われているデザインツールの１つであり、多くの YouTube コンテンツや詳細なドキュメントを備えた大規模で熱心なコミュニティがあります。

また、Figma には、複数のデバイスでプロトタイプをテストできるモバイルアプリを備えた「プロトタイピング機能」が内蔵されており、ブラウザでの作業も、Figma をダウンロードしてデスクトップでのオフラインの作業もできます。

ただ、Figma は初期段階のコンセプトには優れていますが、高度なプロトタイプはまだ完璧ではありませんし、デザイナーはユーザーテストに対応できるプロトタイプを作れるとは思えません。

２０２３年、Figma にはインタラクティブなプロトタイプをシンプルにする多くの機能が加わりましたが、Figma の入力はまだ制限されており、UX リサーチャーは、ユーザーの情報入力が必要なアクションをテストすることができません。このツールだと、ユーザーのインタラクションに適応する動的なユーザーフローは作りにくいです。

ただし、Figma で作成したプロトタイプにインタラクションを追加できます。Figma のデザインを UXPin にインポートして、インタラクティブなプロトタイプを作成するためのプラグインを使います。詳しく次のチュートリアルをご覧ください：Figmaのデザインをインタラクティブなプロトタイプにしよう

３．Adobe XD

Adobe XD も人気のある UX デザインツールですが、２０２３年に廃止されました。

Adobe UX のプロトタイプの面白い機能の１つに、特定のインタラクションの時間を節約してくれるオートアニメーションがあります。オートアニメーションで、アニメーションシーケンスの最初と最後のフレームを作成すれば、あとは Adobe XD が埋めてくれます。この機能は全アニメーションで機能するわけではありませんでしたが、パララックス（スクロールエフェクト）のようなものを作成する際にはかなりの時間の節約になりました。

４．Invision

Invision は長年にわたって強力なプロトタイピングコンポーネントでしたが、Figjam に似たコラボレーション用のツールに焦点を当てることにしました。プロトタイピングツールはまだありますが、市場にある他のツールに比べると、２０２４年にインタラクティブな製品を作るには物足りない感じです。

Invision には素晴らしい DSM（デザインシステム管理）機能があり、デザインシステムの管理や、デベロッパーへの CSS やスターターコードの提供に便利です。また、DSM は Storybook と統合されているので、デザイナーとデベロッパーはデザインシステムを同期することができます。ただ残念ながら、デザイナーは UXPin Merge のようにコードコンポーネントを使ったプロトタイプの作成はできません。

５．Framer

Framer は、２０２４年の Web レイアウト作成向けのプロトタイピングツールにおいてトップに君臨するうちの一つです。ラピッドプロトタイピングのための AI 機能を備えており、ユーザーが希望する Web サイトの種類を入力すると、Framer がカスタマイズするデザインを提供します。 Framer では AI が非常に早く取り入れられました。

その他の特筆すべき機能には、レイアウトと挿入メニューがあり、その機能によって、コンセプトのデザインや反復をサッと行うことができます。これは印象的ですが、UXPin にもオートレイアウトとビルトインのデザインライブラリによる同様の機能があります。

Framer の Smart Components 機能には、UXPin の ステートに似た機能がありますが、それほど包括的ではありません。バリアントと変数を使って、スイッチの切り替えやチェックボックスのアクティブ化など、要素にホバーまたは押された状態を付けることができるくらいです。

また、Smart Components は、他のベクターベースのデザインツールからステップアップしたとはいえ、UXPin のステート、インタラクション、エクスプレッション、変数の機能ほど忠実ではありません。

その他のデザインツール比較

その他にも、よく使われている以下のようなプロトタイピングツールと UXPin の比較もご覧ください：

• Marvel App
• Justinmind
• Proto.io
• Axure
• Zeplin
• Balsamiq

UXPin を体験してみよう

デザインツールをお探でしたら、上記の５つも含め、デザイナーが見た目のいい Lo-Fi（低忠実度）ワイヤーフレームやモックアップを作成するのに使えるのがたくさんあります。

ただ、UX のデザインにはテストが必要であり、つまりモックアップではなく、Hi-Fi（忠実度の高い）プロトタイプが必要だということです！UX デザイナーはコード化された製品をデザインしますが、画像ベースのプロトタイプでユーザーテストを行います。ただ、それだと正確で意味のある結果を得ることは不可能であり、必ずユーザビリティの問題が発生し、それが最終製品に反映されてしまいます。

そこで、UXPin のようなコードベースのツールがあれば、デザイナーは機能するHi-Fi（忠実度の高い）プロトタイプを作成できるので、ユーザビリティの参加者は、ボタンや入力が機能することを「想像」する必要はありません。

UX デザインの革命に繰り出しませんか。１４日間の無料トライアルにサインアップして、UXPin でより優れたプロトタイプとテストをぜひご体験ください。

The post ２０２４年のおすすめ プロトタイピングツール ５選 appeared first on Studio by UXPin.

デザインをReactのコード に変換することは極めて重要なステップである一方、多くの場合で誤った解釈、非効率性、一貫性の欠如といった課題が伴います。

UXPin Mergeのような新しいテクノロジーは、コードからデザイン（Code-to-Design）のワークフローを促進し、Reactコンポーネントでデザインできるようにすることで、この時代遅れのプロセスを合理化することを目指しています。

主なポイント：

• 従来の「Design to Code」のワークフローでは、デザインの詳細が失われ、反復サイクルが長くなり、バージョンが不一致になることが頻繁に起きる。
• UXPin Mergeの技術には、デザインから機能的なReact コードへの変換を効率化させるコードベースのデザインアプローチを提供する。
• Mergeでは、ReactコンポーネントをUXPinのデザインエディタに直接インポートして、より動的でインタラクティブなデザイン体験を実現できる。
• UXPin Mergeを使うと、レポジトリ内のReactコンポーネントへの変更が自動的に同期され、メンテナンスやカスタマイズがしやすくなる。
• UXPinの「Code-to-Design」のワークフローで、デザインの効率化、最初と最終製品間でのより高い忠実度を得ることができる。

直感的なデザインインターフェースとMerge技術を使って、Reactコードでデザインしてみませんか？

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

デザインから React コード に変換する方法

従来の製品開発のワークフローでは、デザイナーはSketchやFigmaのようなツールを使ってモックアップやプロトタイプを作成します。

そして、そのデザインとドキュメントをデベロッパーに渡し、デベロッパーはそれらに機能性を持たせるReactコードに変換します。

ハンドオフでは通常、デザインを標準フォーマットにエクスポートして、寸法、色、アセットなどの詳細な注釈を付けます。

このプロセスでは、デザイナーとデベロッパーの協力、あるいは両方のスキルを持つデベロッパーに依存しますが、デザインと開発の能力を身につけるには何年もかかるため、両方をマスターすることを選ぶ人はあまりいません。そして、課題は他にもあります。

「デザインから Reactコード 」での課題

• 変換時での取りこぼし： 最善を尽くしても、デザインの詳細が失われたり、ハンドオフ時に誤解されたりすることがよく起こる。
• 反復の遅れ： デベロッパーに説明が必要だったり、デザイナーに変更が必要な場合、反復サイクルは長くなり、時間とリソースを浪費してしまう。
• コンポーネントの不整合： 共有の言語やツールセットがないと、デザイナーやデベロッパーは、再利用可能な同じコンポーネントなのにそれぞれ独自のバージョンを作成することになり、一貫性がなくなる。
• 静的なデザイン： 従来のデザインツールは、動的なデータや状態を考慮しない静的なモックアップを作成することが多く、最終製品の表現にギャップが残ってしまう。
• バージョンの混乱： デザインやコードが進化するにつれ、最新バージョンの把握がとんでもないことになる。

より良い代替案が必要な理由

旧式のワークフローにも利点はありますが、UX（ユーザーエクスペリエンス）が製品を左右する世界では最適とは言い難いところであり、Reactコンポーネント中心のアーキテクチャが加われば、さらにエラーは増えるでしょう。

そこで、次のような理由で従来の「Design to Code」のワークフローに代わる選択肢が必要になります：

• 時間効率：従来の方法では、プロジェクトのスケジュールが延びてしまう。開発サイクルの短縮は単なる願望ではなく、ニーズである。
• デザインの完全性： 最初のデザインに対する最終製品の忠実性は損なわれることがよくあるが、新しいアプローチは、デザイナーのビジョンを忠実に守ることができる。
• ダイナミックなリアルさ： 最近のUIはインタラクティブでデータ駆動型であり一方で、静的なデザインハンドオフではリアルさを表現することはできない。
• 一貫性： 一貫性のあるUIには、デザイナーとデベロッパーにとっての「信頼できる唯一の情報源（Single source of truth）」が必要だが、従来のプロセスではそれが欠けている。
• フィードバックのループ： リアルタイムでの連携だと、事後的な修正ではなく、その場で問題を解決することができる。

また、従来のモデルでは、デベロッパーが一人でプロトタイプの作成とテストの実施をするのは大変であり、時間がかかってしまいます。デベロッパーでもデザインツールを学ぶ必要があるまたは、コードでビルド、テスト、反復しなければならないことから、プロジェクトに多大な時間がかかることになるのです。

幸い、このようなデザインワークフローに代わって、Reactコードを使うという方法があります。

React でデザインする方法

Reactコードを書いたり編集したりする代わりに、コンポーネントをドラッグ＆ドロップするだけでUIのプロトタイプを作る方が簡単だと思いませんか？

UXPin Merge の技術によって、それが実現可能です。

FigmaやAdobe XD などの画像ベースのデザインツールと違って、UXPin はコードベースであり、HTML、CSS、Javascript を裏でレンダリングします。

このコードベースは、Mergeの技術によって、キャンバス上でコードコンポーネントをノーコード環境で使えるということです。

Mergeを使うと、レポジトリからUXPinのデザインエディタに Reactコンポーネントを読み込むことができます。

また、UI要素は UXPinのデザインシステムライブラリに表示され、プロトタイプ作成のためにドラッグ＆ドロップできます。

そして、コンポーネントのReactプロップ で定められたプロパティパネルで、スタイリングやインタラクティブ性を編集可能です。

UXPin MergeでReactコードコンポーネントに役立つ理由

デベロッパーは、標準のプロパティパネルのインターフェースを使うか、JSXモードに切り替えて、より使い慣れたコード環境を使うことができます。

また、レポジトリ内のReactのコンポーネントに加えた変更は自動的にUXPinに同期され、UI要素、パターン、テンプレートの更新、保守、カスタマイズができるようになります。

この「Code-to-Design」ワークフローで、デベロッパーは「コードベースとレポジトリの完全なコントロール」と、「デザインツールのインターフェースのシンプルになったワークフロー」という両者の長所が得られます。

デベロッパーはコードを編集する代わりに、ドラッグ＆ドロップで UI上のコンポーネントを移動したり、プロパティパネルで調整を行うことができるのです。

Merge をレポジトリに統合する方法

UXPinには、コンポーネントライブラリを同期する方法として以下の２つがあります：

Git統合（Reactのみ）：

これは、GitHub、GitLabなどのReactコンポーネントのレポジトリへの直接統合です。

Git統合は、以下のようなMergeの機能が得られることからオススメです：

• バージョン管理
• パターン
• JSX のオーサリング

Storybook統合

React、Vue、Angular、Emberなど、あらゆるStorybookをUXPinに連携できます。

Mergeのすべての機能を利用できるわけではありませんが、Storybookにはコンポーネントライブラリを管理するためのアドオンやプラグインなど、多くの利点があります。

npm統合およびMergeコンポーネントマネージャー

npm 統合やMergeコンポーネントマネージャーを使って、npmレジストリのオープンソースのデザインシステムから各UI要素を読み込むこともできます。

また、UXPinには、Fluent UI （Git）、Ant Design（npm統合）、MUI （Git）、Material UI（Storybook）、UXPinのボイラープレート（Git）など、セットアップなしでもプロトタイプを開始できるMergeのデザインシステムがいくつか内蔵されています。

MergeのGit統合で Reactコンポーネントを追加・UXPinに同期する方法

UXPinのアカウントを作成し、オンボーディング プロセスを完了し、Mergeへのアクセスをリクエストができるようになったら、MergeのBoilerplateレポジトリを使ってレポジトリのセットアップを始めましょう。

UXPin公式ドキュメントより、以下の前提条件があります：

• Easy Startチュートリアルを完了している（Mergeへのアクセスのリクエストが必要）
• HTML、CSS、および Javascriptに精通している
• React.jsの基本的な理解がある

ステップ１：Merge Dev環境を実行する

Merge Devの環境を実行します。ルートでnpm startを実行すると、次のスクリプトが実行されます：

uxpin-merge –webpack-config ./webpack.config.js –wrapper ./src/UXPinWrapper/UXPinWrapper.js –uxpin-domain merge.uxpin.cloud

• -webpack-config：webpackの設定場所を指定する。
• -wrapper： Reactコンポーネントにテーマプロバイダーのようなラッパーが必要な場合に使う
• -uxpin-domain： Mergeを正しいサーバーへ向ける

ステップ２：命名規則

ディレクトリ名、ファイル名、コンポーネント名を同一にします。

• 例：./src/NewComponent/NewComponent.js

ステップ３：コンポーネントをエクスポートする

コンポーネントにエクスポートのデフォルトがあることを確認します。

• 例： export default NewComponent;

ステップ４：プロップを確定する

プロップの確定（リリース予定のTypescriptインターフェース）には、PropTypesまたは Flowを使いましょう。そして、Propaties Panel（プロパティパネル）で編集可能になります。

ステップ５：JSXプリセット

コンポーネントフォルダ内のプリセットのディレクトリに JSXプリセットのファイルを作成します。

例： ./src/NewComponent/presets/0-default.jsx

ステップ６：構成の更新

いよいよ、ルートディレクトリにあるuxpin.config.jsにコンポーネントを追加します。

ステップ７：Merge の再起動

新しいコンポーネントを追加した後、ターミナルで Command + C を押して Merge プロセスを再起動します。

新しい Merge プロセスの開始時にライフサイクル エラーが発生した場合は、ターミナルに killall node -9と入力して再試行してください。

UXPin「Reactコードからデザイン」の仕組み

初期設定が完了すると、Mergeで加えられた全ての変更がUXPinのデザインシステムライブラリに自動的に同期されます。

そして、Mergeのバージョン管理が更新を通知し、自分で最新リリースに切り替えるタイミングを選択できます。

またバージョン管理では、以前のデザインシステムバージョンに戻すことも可能です。

ページの設定

フレームやアートボードを使った従来のデザインツールとは異なり、UXPinはデベロッパーにとってより馴染みのあるプロジェクト構造であるページアプローチを使います。

デザインキャンバスの左側にあるPages & Layersパネルで、プロジェクトのページを追加・管理できます。全ページを表示させ、プロジェクトファイルの概要を見ることもできます。

また、UXPinでは、デスクトップ、テレビ、モバイル（iOS、Windows、Android）、タブレット、ウェアラブルなど、多くの標準ページ/画面サイズを提供しています。カスタムビューポートを作成もできます。

Reactコードコンポーネントを使ったデザイン

コンポーネントをデザインキャンバスにドラッグ＆ドロップして、プロトタイプを作成してみましょう！

コンポーネントを「snap together」で結合し、コード化されたUIのようにシームレスなレイアウトを作成できます。

Properties PanelでUI要素のプロパティを調整し、ページ遷移、アニメーション、マイクロインタラクション用のインタラクションを追加できます。

そして UXPinには、「if-then」および「if-else」条件を使った Javascript のような条件付きインタラクションがあり、コードと区別できない動的なプロトタイプを作成します。

また、レポでプログラムした API、インタラクティブ機能、その他のプロパティはすべて UXPin で利用でき、最終製品の正確なレプリカを生成できます。

UXPinのPatterns（パターン）機能を使ってコンポーネントライブラリを増やす方法

UXPinのPatternsを使えば、コードを書かずに要素を組み合わせてデザインシステムを進化させることができます。

そして Gitまたはnpm統合を使ってインポートした どの Mergeライブラリでも使うことができます。

※しかし、残念ながらパターン機能はStorybookではご利用いただけません。

新しいパターンを作成したら、それをパターンのライブラリに保存してチームメンバーと共有することができます。

この機能により、UI要素をコーディングする前にプロトタイプを作成し、包括的にテストすることができるため、修正時間は大幅に短くなり、秘術的負債を減らすことができます。

また、Patternsの使用で以下のようなことも可能です：

• プロトタイプのワークフローを最適化するために、Patternsのバリアブルを複数保存する。
• （デザインライブラリになくても）高度なコンポーネントでデザインできる。

「Design to Code」がより速く

Reactコンポーネントを使ったデザインは、コンポーネントライブラリをプロジェクトに読み込み、UXPinからレイアウトをコピーするだけなので、デザインプロセスから開発へのスムーズでシームレスな変換を実現します。

また、Mergeが、UXPinのSpecモードからIDE（統合開発環境）にコピー/ペーストするためのプロダクションレディなJSXを生成します。

導入事例

「Code-to-Design」が非デザイナーのデザインをシンプルにする方法

TeamPasswordは５人のスタートアップ会社で、デベロッパーは２人、デザイナーはいません。

開発チームは ２０２２年に Reactに切り替え、MUIのカスタムバージョンを採用しました。

そして、TeamPasswordのエンジニアは Mergeを使ってUIライブラリをUXPinに同期させて、プロトタイプとテストを行っています。

Mergeを使うことで、TeamPasswordは製品や機能をより速く、より高い一貫性とより少ないエラーで出荷することができ、競争の激しいセキュリティ技術市場で優位に立つことができます。

また、デザインと開発に同じコンポーネントを使っているため、ドリフトもなくなりました。

「この市場ではブランドは不可欠です。弊社は顧客のログイン記録という機密情報を扱っているため、デザインの一貫性がなかったり、古いままでは情報を安全に保てているのか不安に思うお客様もいるかもしれません。フロントエンド開発もまた、バックエンドのパフォーマンスに対する信頼と信用を築くのです。」‐ TeamPassword  Director of Operations – Tony Caccavos氏

「Design to Code」から、UXPin の「Code-to-Design」のワークフローに切り替えることで、プロトタイプの作成とテストをスピードアップすることができます！

詳細とアクセスリクエスト方法については、Mergeのページをぜひをご覧ください。

The post デザインから Reactコード – UXPin Mergeで製品開発を高速化 appeared first on Studio by UXPin.

テーマの 切り替え は、プロトタイプをデザインする上で欠かせません。

ライトモードとダークモードの切り替え、または１つのプロトタイプで複数のクライアント向けにテーマの変更テストでのプロセスなどは、全てのデザイナーが慎重に考える必要があります。

さらに、Material-UIのようなオープンソースのデザインシステムが登場したことで、テーマ切り替え機能の重要性はますます高くなりました。

この機能によって、デザインシステムやレイアウトを複数使用することなく、その場でテーマを動的にテストできるようになりました。これは驚くほど効率的で便利な機能です。

本記事では、「テーマ切り替え」機能の重要性について説明し、Mergeとコードでデザインアプローチによって、UXPinでテーマ切り替え機能がどのように使えるのかをご紹介していきます。

Mergeがデザインをどのようにレスポンシブにできるかはこちらをご覧ください。

実際にMergeの機能性を試してみたい方はこちらからアクセスしてください。

 テーマ切り替え 機能が必要な理由

テーマ切り替え機能を利用するのは、ホワイトラベルのWebデザイン会社や複数のブランドを抱える大企業だけではなく、新しい配色を素早くテストするために使用する個人開発者もいます。しかし、テーマの切り替えは簡単ではありません。。

プロトタイプ一つをさまざまなテーマで複数のレイアウトにすることは避けたいですよね。

 Material UIライブラリを使って、この制限を説明します。Material UIにはすでにテーマがコンポーネントに組み込まれていますが、UXPin（その他プロトタイピングツール）には、開発者もデザイナーも使用できる、テーマをダイナミックに切り替える統一された方法がないのです。

Mergeテクノロジー – コードでデザイン

もうベクターベースのツールだけに制限される必要はありません。代わりに、UXPin Mergeを活用することで、どんなものでも自由に作成できます。

Mergeでは、「実際の」Reactコードとベクターベースのツールを使って自由にデザインできます。これが Mergeの大きな魅力です。

styled-componentsを利用してみましょう。styled-componentsは、CSSに Javascript を注入して編集可能なテーマ機能を作成できます。

そのため、テーマの作成は簡単です。

テーマごとにstyles-components に注入したい CSS 値をプロパティとして含むファイルを作成していきます。インポートされたテーマの一覧から好きなものを選ぶだけで、そのテーマのスタイリングが html要素にプロップとして渡されます。

そこで、必要なテーマごとにファイルを作成し、それらをラップするテーマ切り替え機能の styled-component にインポートして、入れ子になった各子コンポーネントにその値を渡すとしたらどうなるでしょう。

その場合、styled-components CSS に注入された Javascript propsを使って、トップレベルのコンポーネントでテーマを変更するだけです。

テーマ切り替え機能のコンポーネント構築

まず、トップレベルのラッパーコンポーネントとして機能し、選択したテーマのスタイルをネストしたすべてのコンポーネントに渡す『ThemeSwitcher』という名前のコンポーネントを作成します。

コンポーネントが ThemeSwitcher にネストされている場合、インポートされたテーマを動的に切り替えることができます。

コンポーネントの機能を全て維持しながら、完全にコンポーネントのルック＆フィールを変更することができるテーマですね。

以下のコードは、簡略化された ThemeSwitcher の構造を示しています。動作の詳細は後ほど説明します。

import blue from "./themes/blue";
import red from "./themes/red";
import dark from "./themes/dark";
import light from "./themes/light";
 
 
function ThemeSwitcher(props) {
 let selectedTheme;
 
 function getTheme(themeProfile) {
   switch (themeProfile) {
     ...
   }
   return selectedTheme;
 }
 
 function makeCustomTheme() {
   const customTheme = createMuiTheme({
     ...
   });
   return customTheme;
 }
 
 return (
   <MuiThemeProvider theme={getTheme(props.themeProfile)}>
     {props.children}
   </MuiThemeProvider>
 );
}

見ての通り、これはMaterial UIのインポートフックを使ったシンプルなReactコンポーネントで、２つの関数、テーマをプロップとして渡すためのreturnステートメントだけです。

returnステートメントの中には MuiThemeProvider のコンポーネントがありますが、これは選択されたテーマを子コンポーネントにプロップとして渡すラッパーコンポーネントとして使用されます。

getTheme()

ここではMaterial UIのスタイリングガイドラインを使ってテーマを作成し、それをTheme Switcherコンポーネントにインポートしました。

import blue from "./themes/blue";
import red from "./themes/red";
import dark from "./themes/dark";
import light from "./themes/light";

どのテーマが選択されたかを追跡するために、ドロップダウンのターゲット値を getTheme関数に渡し、その結果をMuiThemeProviderコンポーネントのテーマプロップとしてreturnステートメントで渡します。

function getTheme(themeProfile) {
   switch (themeProfile) {
    // _.merge combines two themes together
     case "light":
       selectedTheme = _.merge({}, igloo, light);
       break;
     case "red":
       selectedTheme = _.merge({}, igloo, red);
       break;
     case "dark":
     selectedTheme = dark;
     break;
     case "custom":
       selectedTheme = makeCustomTheme();
       break;
     case "blue":
       selectedTheme = selectedTheme;
       break;
     default:
       selectedTheme = selectedTheme;
   }
   console.log(selectedTheme)
   return selectedTheme;
 }

return (
   <MuiThemeProvider theme={getTheme(props.themeProfile)}>

UXPinエディタでは、getTheme関数から入力されたテーマセレクタはこのように表示されます。

makeCustomTheme()

完成したテーマをインポートするオプションがあるだけでなく、UXPinエディタ内でカスタムの一時的なテーマを作成することもできます。

わかりやすくするために、原色や二次色などのいくつかのプロパティのみご紹介しましたが、必要に応じて細かく設定もできます。

以下は makeCustomTheme 関数のコードです。これは Material UI の内蔵されたコア関数である createMuiTheme を利用したもので、受け取ったオプションに基づいてテーマを作成します。

function makeCustomTheme() {
   const customTheme = createMuiTheme({
     ...selectedTheme,
     palette: {
       primary: {
         main: props.primaryColor
           ? props.primaryColor
           : selectedTheme.palette.primary.main,
       },
       secondary: {
         main: props.secondaryColor
           ? props.secondaryColor
           : selectedTheme.palette.secondary.main,
       },
       decoration: {
         main: props.decorationColor
           ? props.decorationColor
           : selectedTheme.palette.decoration.main,
       },
       headerBadges: {
         main: props.headerBadgesColor
           ? props.headerBadgesColor
           : selectedTheme.palette.headerBadges.main,
       },
     },
   });
   return customTheme;
 }

これで、デザインシステムに動的なテーマ切り替え機能を組み込む方法が１つ完成しました。

ラッパーコンポーネント（Theme Switcher）がネストした子コンポーネントにプロパティを渡すだけで、新しいデザインシステム、ページ、レイアウトを作成することなく、動的にテーマを変更することができます。

UXPin Mergeでテーマ切り替えを試してみる

他のデザインツールと比較すると、UXPin Mergeを使った場合では非常に多くの柔軟性と創造性を得ることができます。

コードベースの、スタイリングと機能のための「信頼できる唯一の情報源（Single source of truht）」に焦点を当てることで、相互接続されたシステムが構築され、デザイナーと開発者のハンドオフ間のギャップを埋めることができます。

また、React のコンポーネントで作成できるものは、すべてデザインシステムで実現できます。

デザインシステムに重要な機能を追加するためにサードパーティのプラグインや API に頼る必要はなく、コマンドひとつでスタイルを変更しながら、ダイナミックでインタラクティブなプロトタイプを自由に作成できます。

UXPin Mergeのインタラクティブなプロトタイプで製品開発を効率化しましょう！

The post UXPin Mergeでテーマの切り替えを簡単に appeared first on Studio by UXPin.

ワイヤーフレームの作成は、UXデザインプロセスにおける重要なステップであり、最終製品の設計図としての役割を果たします。

このガイドでは、コードベースのテクノロジーと内蔵機能で際立つエンドツーエンドのデザインツールであるUXPinを使って効果的なワイヤーフレームを作成する方法を詳しくご紹介します。

本記事では、基本的なUI要素の組み立てからユーザーフィードバックの組み込みまで、アプローチを一つずつ詳細に提供しています。

インタラクティブなフォーム要素や「Code-to-Design（コードからデザイン）」の機能など、UXPinのユニークな機能が、どのようにデザインプロセスの効率化や連携強化、よりユーザーにとって使いやすい製品への貢献をできるかを見ていきましょう。

主なポイント：

• UXPinには、デザイナーが完全にインタラクティブで機能的なワイヤーフレームを作成できるようになるコードベースのワイヤーフレーム作成機能がある。
• UXPinは、デザインライブラリや高度なプロトタイピング機能などが内蔵されていることによって、他のデザインツールとは一線を画している。
• UXPinは、ワイヤーフレームから忠実度の高いプロトタイプへのシームレスな移行をしやすくすることから、複雑なインタラクションや API連携まで実現し、包括的なフルスタックデザインソリューションとなる。

UXPin でデザインプロセスを効率化し、ワイヤーフレームをもっと速く作成しませんか。こちらから無料トライアルにサインアップして、UXPin のフルスタックデザインソリューションをぜひお試しください。

UX のワイヤーフレームとは

UX のワイヤーフレームは、UI（ユーザーインターフェース）の基本的なフレームワークを表現する、低忠実度（Lo-Fi）の視覚的な設計図であり、通常は色やグラフィック、複雑な詳細はなく、主にスペースの割り当て、コンテンツの優先順位、および意図された機能に焦点を当てています。

デザイナーは、Web ページやアプリ、システムの構造を伝えるために、デザインプロセスの初期段階でワイヤーフレームを作成しますが、ワイヤーフレームは、詳細なモックアップや高忠実度（Hi-Fi）プロトタイプに入る前に、基本的なレイアウトとインタラクションのパターンを確立することを主な目的としています。

ワイヤーフレームの利点

ワイヤーフレームには、デザインプロセスの効率化や、チームメンバー間の効果的なコミュニケーションの促進を実現するさまざまなメリットがあります。以下に、その利点を挙げましょう：

• 明瞭性： ワイヤーフレームが、レイアウトを視覚的に表現することで曖昧さを取り除き、関係者は誰でも明確なロードマップを得られる。
• 効率性： ワイヤーフレームが早期に問題を解決することで、開発後期の時間とリソースが節約される。
• 整合性： ワイヤーフレームで、プロジェクトの目標と機能性に関するステークホルダーとチームメンバーの足並みが揃う。
• ユーザビリティ：UX（ユーザーエクスペリエンス）を評価する機会を提供することから、 直感的なナビゲーションとレイアウトが確保される。
• 連携： ワイヤーフレームがディスカッションのツールとして機能することから、デザイナー、デベロッパー、ステークホルダーが初期のデザインのフィードバックを提供できるようになる。
• 優先順位付け： デザインの最も重要な要素を特定し、コンテンツの効果的な階層化が実現する。
• 柔軟性： ワイヤーフレームで、反復と変更がしやすくなることから、実験のための Lo-Fi（低忠実度）モデルとして機能できる。
• アーキテクチャ：ワイヤーフレームは、デジタル製品の情報アーキテクチャのベースとなる。

UXPinはワイヤーフレーム作成に適したツールか

UXPinは、優れたUXを実現できるワイヤーフレームが作成可能なエンドツーエンドのデザインツールです。デザイナーは次のような機能を使用してインタラクティブなワイヤーフレームを簡単に作成できます：

• ボックス（Box）：テキストを追加できる柔軟な UI 要素
• シェイプ（Shape）：長方形、楕円、円、丸、線、矢印、多角形、星形
• テキスト（Text）：基本的なテキストブロック
• フォーム（Form）：ボタン、テキストエリア、セレクト/マルチセレクト、チェックボックス、ラジオボタンなど、基本的なスタイルのないフォーム要素のセット
• ホットスポット（Hotspot）: UIの任意の要素や特定の場所をインタラクティブにする
• アイコン（Icon）：マテリアルデザイン、Fonts Awesome、Retina アイコンなど、複数のアイコンセットから選ぶ

他のデザインツールとは違い、UXPinのUI要素はデフォルトでもインタラクティブなものです。

例えば、UXPinのすべてのフォーム要素は完全に機能し、チェックボックスやラジオをキャンバス上にドラッグ＆ドロップするだけで、クリック可能なオン/オフの状態のインタラクティブ機能がすでに備わっています。

このようなインタラクティブな要素により、デザインチームは、デザインプロセスのよりコストのかかる忠実度の高い（Hi-Fi）段階に移行する前に、ワイヤーフレームのプロセスでより多くのデータとフィードバックを集めることができます。

UXPinと他のワイヤーフレームツールの違い

UXPin の最も大きな違いは、このプラットフォームがコードベースのテクノロジーを採用している点です。UXPin は、SketchやFigmaのようにベクターグラフィックスを生成するのではなく、HTML、CSS、Javascript を裏でレンダリングします。

このコードベースのアプローチにより、デザインチームは完全にインタラクティブなワイヤーフレームやプロトタイプを構築するための機能が強化できます。

たとえば、画像ベースのツールでは、入力フィールドはグラフィカルな表現ですが、UXPinではユーザーデータをキャプチャ、保存、共有できる機能的になります。

内蔵機能とプラグイン

もう一つの違いは、UXPinは他のワイヤーフレームツールよりも多くの機能を標準で提供し、プラグインや拡張機能を必要としない点です。UXPin のプランには、デザインシステム、ビルトインデザインライブラリ、コンテンツとデータ、フォント（Googleとカスタム）、アクセシビリティ機能など、他のデザインツールではプラグインが必要なものが多数含まれています。

Code-to-Design（コードからデザイン）

UXPin Mergeのテクノロジーにより、デザインチームはコードコンポーネントをデザインプロセスにインポートしてプロトタイプを作成を可能にします。デザイナーは、デベロッパーが最終製品に使うのと同じ UI ライブラリを使って、完全に機能するインタラクティブなプロトタイプを作成できます。

エンジニアリングチームで特定のワイヤーフレームのコンポーネントライブラリが使われている場合、Merge を使ってこれを UXPin にインポートできます。

また、Merge にはインタラクティブなプロトタイプの作成に使えるビルトインライブラリ（例：Material UI、MUI、Ant Design、Fluent UI、ボイラープレートなど）があり、ワイヤーフレーム作成から忠実度の高いプロトタイプ作成まで、コンセプトやアイデアをすぐにテストすることができます。

UXPin でワイヤーフレームを構築する方法

ここでは、フィードバックの収集やステークホルダーとの連携など、UXPin でワイヤーフレームを作成するためのステップをご紹介します。

このステップバイステップのチュートリアルに従うには、UXPin のアカウントが必要です。

まだお持ちでない方は、１４日間の無料トライアルにサインアップしてください。

ステップ１: UXPin を開いて新規プロジェクトを作成する。

• UXPin を開き、青い［＋New project］のボタンをクリックする。
• プロジェクト名を入力し、［ Create New Project（新規プロジェクトの作成）］をクリックする。
• 次に、「What do you want to start with today?（今日は何から始めますか？）」画面から［New prototype］を選択する。

ステップ２：ワイヤーフレームのキャンバスサイズを選ぶ

右側のプロパティパネル（Propaties Panel）で、ワイヤーフレームのキャンバス（CANVAS）のサイズを選択します。

UXPin には、デスクトップ、タブレット、モバイル、ウェアラブルなど、幅広い標準ビューポートが用意されています。

グリッドとガイドを使って、水平または垂直方向の一貫性を保ちましょう。

ステップ３：各画面のページを作成する

アートボードやフレームが使われる FigmaやSketchとは異なり、UXPinは画面ごとに独立したページが使われます。

• 左サイドバーの下部にある［Pages & Layers］を選択する
• サイドバー上部の［＋］のアイコンをクリックし、新規ページを作成する（［OPTION + N］のキーボードショートカットでも可能。）
• ページ名をダブルクリックして変更する（今回は「Login（ログイン画面）」と「Welcome（ウェルカムページ）」の２つのページを作成する）

アドバイス：ユーザーフローライブラリを使って、ユーザージャーニーと情報アーキテクチャを設計し、プロジェクトの画面数とナビゲーションレイアウトを決定しましょう。

ステップ４：ワイヤーフレームの UI 要素の作成

UXPinのシェイプ、フォーム、ボックスなどを使ってワイヤーフレームのパターンやレイアウトを組み立てることができます。

また、オートレイアウト（Auto Layout）では、サイズ、ギャップ、配置、分布など、グループ要素を効率的に管理できます。

UXPinのコンポーネントを使って、再利用可能なワイヤーフレーム要素を作成しましょう。これによって、より迅速な反復と最大限の一貫性を実現できます。

ステップ５：インタラクションを定義する

このデモでは、ログイン画面からウェルカムスクリーンに基本的なナビゲーション・インタラクションを追加します。

• 要素をクリックして選択し、Properties Panel（プロパティパネル）の Interactionsをクリックする。
• 以下のようにナビゲーションのインタラクションを作成する：
  • Trigger：Click (Tap)
  • Action： Go to Page
  • Page：ドロップダウンリストから Welcomeを選択
  • ［Add（追加）］をクリックしてインタラクションを完了する

Trigger、Action、Animation、条件などのインタラクションの設定方法をご覧ください。

ステップ６：連携とフィードバックの収集

UXPinのPreview（プレビュー）と Share（共有）機能を使って、ステークホルダーにワイヤーフレームを共有します。

また、Comments（コメント）機能で、ステークホルダーはデザインに注釈を付けてフィードバックしたり、特定のチームメンバーにコメントを割り当てることができます。

UXPin でワイヤーフレームからプロトタイプへ移行する方法

UXPinでは、ワイヤーフレームからプロトタイプまで簡単にできます。

ゼロからコンポーネントをデザインしてモックアップを作成することも、デザインシステムを使って忠実度の高いインタラクティブなプロトタイプをすばやく構築することもできます。

UXPinには、プロトタイピング機能を強化する主要機能が以下のように４つあります：

1. ステート（状態）: UI要素１つに対して複数のステートを作成でき、メニューやドロワーなどの複雑なインタラクティブコンポーネントをデザインできる。
2. Variables（変数）：ユーザーの入力からデータを取得し、登録後に個別に送るウェルカムメッセージのように、個別化された動的なユーザー体験を作成する。
3. Expression： 複雑なコンポーネントや高度な機能を作成するための Javascript のような関数であり、コードは不要。
4. 条件付きインタラクション：ユーザーのインタラクションに基づいて「if-then」や「if-else」の条件を作成し、複数の結果を持つダイナミックなプロトタイプを作成して、最終的な製品エクスペリエンスを正確に再現する。

API連携でより高度なプロトタイプにする

UXPinのIFTTT統合で、例えば、ユーザーのカレンダーへの予定の追加や、ウェルカムメッセージのようなメールの送信など、API連携を通じて外部の製品やサービスと連携することができます。

UXPinのデザインシステム、高度なプロトタイピング機能、および API機能を使うことで技術的な知識やエンジニアからのサポートがなくても、複雑な製品のレプリカを作成できます。

この洗練されたプロトタイプによって、ユーザーやステークホルダーから有意義なフィードバックを得ることができ、製品のUXを向上させることにつながります。

世界最先端の製品デザインツールを使って、ワイヤーフレームとプロトタイプを作成しませんか？

無料トライアルにサインアップして、UXPin でインタラクティブなワイヤーフレームを作成してみましょう！

The post 【プロダクトチーム向け】UXPin ワイヤーフレーム 入門 appeared first on Studio by UXPin.

最初に

ダッシュボードは、アプリケーション内の主要なイベントの整理や、さらなる分析に使える統計情報を確認できることから営業、マーケティングなどのを含むさまざまなチームまたはビジネスでよく使用されます。

一見、ダッシュボードのデザインは複雑そうに思うかもしれません。大量の情報とデータセットが統合されていますからね。

しかし、実際にダッシュボードを作成してみると、意外ととても簡単に１つにまとめることができます。

ここで重要なのはデザイン上の決定を導くために役立つ、すぐに使えるコンポーネントを用意しておくことです。

本記事では、Reactライブラリである Material UI （既製の要素の完全に文書化された人気のライブラリの１つ ）を使ってレスポンシブなダッシュボードをデザインする手順を見ていきましょう。

レスポンシブなレイアウトを短時間で簡単に作ってみませんか？

完全にインタラクティブな要素をドラッグ＆ドロップするだけで、プロ並みのUIを数分で簡単に作成することができます。

詳しくはUXPin Mergeのページをぜひご覧ください。

ダッシュボードの構築に MUI コンポーネントを使う理由

MUIは、React向けのコンポーネントライブラリであり、Googleのマテリアルデザインガイドラインに従って開発されました。

開発当時でもMUIは画期的なコンポーネントライブラリであり、React開発者はレスポンシブレイアウトをより速く構築できるようになりました。

また、MUIチームはライブラリを進化し続け、新しいバージョンを随時リリースしているため今日でも変わらず人気があります。詳しくは、MUI に関するこちらの記事をご覧ください。

MUI はデータ表示コンポーネントでいっぱい

MUI には、ダッシュボードに最適なUI（ユーザーインターフェース）の要素が数多くあり、広範囲にカスタマイズ可能です。

コンポーネントの種類

カード

特定のデータポイント、または強調したい関連データのグループを表すカードを作成できる。

データテーブル

MUIは、ソートとフィルタリング機能を持つシンプルな外観の Reactコンポーネントに公開されている。

日時ピッカー

詳細な日付または時刻での並べ替えが必要な場合は、 Material UIコンポーネントを使用する。

入力コンポーネント

チェックボックス、レーティング、セレクトなど、データテーブルで使いたいあらゆるタイプのボタンや入力フィールドが見つかる。

きちんと文書化されたライブラリ

Material UIは、最も文書化された UIコンポーネントライブラリの１つです。

ライブラリの進化とともにドキュメントを更新し続けるというコミットメントから、包括的な公式ドキュメントを備えています。

MUIがライブラリを最新の状態に保つ努力をしていることはもちろんですが、ライブラリはコミュニティからの強力なサポートを受けています。

例えば、開発者は Material UIを使ったアプリ構築のチュートリアルを頻繁に共有し、ヘルプが必要な人たちを手伝うことも十分できます。

アクセスしやすくレスポンシブである

MUIには、「使いやすい」と「レスポンシブ」という２つの大きな特徴があり、これは現代のインターフェースのデザインにおけるポイントなっています。

MUIはアクセシビリティを重視しており、「ARIA属性の使用」などのアクセシビリティのベストプラクティスに関するヒントが含まれています。

また、レスポンシブデザインにおいて、MUIは最も優れたコンポーネントライブラリの１つです。

デバイスや画面サイズに関係なく動作するレスポンシブレイアウトを簡単に作成できます。

MUIコンポーネントでダッシュボードを構築する方法

ここからはUXPin Mergeを使って、MUIコンポーネントを使ったシンプルで機能的、かつレスポンシブなダッシュボードを構築する方法をご紹介します。

UXPinのアカウントをまだお持ちでない方は、こちらでUXPinのアカウントを作成してください。

それでは実際に作成してみましょう！こちらのUXPinプレビュー画面を開き、コードをみながらインタラクティブ性と応答性の高さをぜひご確認ください。

ステップ１：プロトタイプを新規で作る

UXPinのDashboardから［Design with coded components（コード化されたコンポーネントでデザインする） ］にカーソルを合わせ、MUIライブラリを選択します。

次にエディタが表示され、中央にはキャンバスが表示されます。

このキャンバスが作業フィールドになるので、レイアウトをデザインしたいデバイスに調整するには、右側にある「CANVAS SIZE」でキャンバスサイズを設定してください。

その他に、右側のメニューでは背景色の変更や、要素を整列させるためのグリッドの追加も可能です。 

キャンバスの左側では、ページやレイヤー、既成のコンポーネントなどが全て確認できます。

ちなみにMUIライブラリの場所は、左下の［Design System Libraries］から［MUI V5］を見つけましょう。（MERGE LIBRARIESの中にあります）

あとは、好きなコンポーネントをキャンバスにドラッグ&ドロップまたは、クリックすると中央に表示されます。

いかがでしょうか？簡単にできますね！

ステップ２：ThemeCustomizer にアクセスする

MUIライブラリを開き、［ThemeCustomizer］を検索します（検索バーを使って見つけましょう）

MUIコンポーネントの外観の調整に便利で、 ThemeCustomizerをキャンバスの上と外側に配置すると、操作しやすくなります。

ステップ３：キャンバスに MUI コンポーネントを配置する

デザインしたいコンポーネントを選びます。アプリバーやパンくずリストなどの操作から始めましょう。

アプリバーでは、ユーザーは他のページへのアクセスまたはアプリ内移動がしやすくなり、パンくずリストでは、アプリ内でのユーザーの位置付けを可能にします。

下のチュートリアル動画をご覧ください：

コンポーネントの四隅をクリックして拡大や縮小することで、簡単にサイズを調整できます。

他のコンポーネントも見てみましょう。

Cards（カード）

さまざまなインサイトを強調するために、このコンポーネントを複製する。

Paper（ペーパー）

テキストボックスです。

Typography（タイポグラフィ）

ライブラリからドラッグ&ドロップして、Paperコンポーネントに入れる。フォントの操作ができる。

Table（テーブル）

ソートできるデータのテーブルになる。

これでコンポーネントの準備ができたので、キャンバスの上に配置したThemeCustomizerでテーマを切り替えることができます。

ステップ４：コンポーネントをカスタマイズする

ここからが楽しくなってきますよ！

コンポーネントを移動させたり、独自のコンテンツやデータで埋めるたり、パディングやサイズを編集など、好きなように触ってみてください。

これは、基本的なコンポーネントだけでなく複雑なコンポーネントを作成するステップでも同じです。

テキストボックスのコンポーネントを取り出し、その中にいくつかの子要素をコピーした方法をご覧ください。

次に、実際のコンテンツを入力し、テキストのサイズを調整して、パディングを追加しました。 テーブルも同様です。

テーブルのセルをコピーして、［Pages and Layers］パネルに貼り付けるだけで、さらに行が追加されました。

ステップ５：グリッドとレイアウトを設定する

レイアウトがレスポンシブかどうかを確認します。コンポーネントをキャンバスの外に出し、レイアウト要素を配置しましょう。

その方法は次の通りです。

メニュー用のコンテナから始めます。コンテナをキャンバスの上に置き、幅に合わせてサイズを変更して、アプリバーを戻します。コンテナが必ず 「responsive（レスポンシブ）」 に設定されているようにしてください。

その後は、パンくずリスト用のBoxをドラッグ&ドロップし、データテーブル、カード、テキストボックス用のグリッドを追加します。

メニュー内のコンポーネントを移動させてグリッドをコピーして、その中に別のコンポーネントを配置するだけなのでとても簡単です。

ステップ６：デザインのプレビューと共有をする

これでダッシュボードを見たり、他の人と共有できる準備が整いました。

［Share］ボタンをクリックし、プロトタイプをプレビューするためのURLをコピーしてブラウザに貼り付けるか、Previewボタン（▶️）をクリックして確認してください。

できましたか？いいですね！！これで、ウィンドウのサイズを変更して、プロトタイプが実際にレスポンシブデザインのようにサイズを調整できるかが確認できます。

また、そのリンクを他の人と共有して閲覧してもらうこともできます。

ステップ７：実装作業

デザインは完了したので、最後のステップはコードをReactアプリケーションにコピーするだけです。

必要な依存関係や設定がすべて含まれた 初心者向けのReactボイラープレートを用意しましたので、こちらからCodeSandboxやStackBlitzですぐに編集を始めることもできます。

React App Boilerplateのインストール実行手順

1. ボイラープレート のレポジトリをダウンロードまたはクローンする。

2. npm install を指定してプロジェクトをインストールする。

3. npm start を指定してプロジェクトを実行する。 

テーマのインポート

1. UXPinのSpecモードにあるThemeCustomizerのコンポーネントのJSXをコピーする。

2. プロジェクトのtheme.jsファイルに JSX を貼り付ける。

コンポーネントのインポート

1. UXPinのSpecモードから、目的のコンポーネントコンポジションのJSXをコピーする。

2. JSX をApp.jsファイルに貼り付ける。

3. MUI からインポートする各コンポーネントに import のステートメントが追加されていることを確認する。例：’@mui/material/Button’から「Button」 をインポートする。

より詳細な手順については、CoderOneのビデオチュートリアルの最後の部分をご参照ください。

UXPin Merge でレイアウトを１０倍速で作成する

これで完了です！これで、完全にレスポンシブでMUIコンポーネントライブラリと一貫性のある、アプリ用の新しいダッシュボードがセットアップされました。

作成したダッシュボードがプレビューのダッシュボードと同じようになっているか見てみてください。

UXPin Mergeを使用して、ダッシュボード以上のものも作成することができます。

デザインスキルがなくても、簡単にコードに変換できるアプリ、ウェブサイト、その他のデジタル製品の完全なUIを効率的にデザインできます。

無料トライアルはこちらから

The post 【React向け】 ダッシュボード デザインのチュートリアル appeared first on Studio by UXPin.

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を提供する方法をぜひご覧ください。

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

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

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

主なポイント：

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

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

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

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

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

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

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

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

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

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

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

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

シンプルでわかりやすい

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

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

応答性とフィードバック

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

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

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

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

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

柔軟性と制御

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

段階的開示の促進

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

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

ビジュアルキューを使う

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

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

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

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

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

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

Airbnb

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

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

Booking.com

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

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

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

Spotify

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

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

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

Amazon

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

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

Googleマップ

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

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

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

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

高度なプロトタイプ機能

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

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

テストの強化

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

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

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

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

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

Reactのデザインシステムをゼロから構築するには、慎重な計画と配慮が必要です。

組織とエンドユーザーに役立つコンポーネントライブラリを作成するには、複数の部門と利害関係者からの意見が重要になります。

そこで本記事では、Reactデザインシステムについての基礎について解説し、コンポーネント開発、ドキュメント、ガバナンス、デザインツールなどのアプローチ方法について見ていきます。

また、デザインシステムの構築において覚えておくべきポイントを１２項目にまとめたデザインシステム構築のステップバイステップガイドの内容も含めてご紹介します。

主なポイント

• Reactデザインシステムは、ReactJSを使用して構築された、再利用可能なコード化されたコンポーネント、開発ガイドライン、アセットのコレクションのことを言う。
• Reactデザインシステムのコンポーネントには、あらかじめビルドされたボタン、フォーム、ナビゲーションメニュー、カード、その他のユーザーインターフェイスが含まれる。
• Reactデザインシステムを始めるにあたり、オープンソース（例：MUIやFluent UI）のReactコンポーネントを使用するか、ゼロから構築できる。
• プロトタイピングでReactデザインシステムを使用するためのベストなツールの1つとしてUXPin Mergeがある。

UIコンポーネントをUXPinに取り込み、Reactデザインシステムをベースにデザイン性の高いプロトタイプを作成することができます。アプリ制作が10倍速くなり、開発フローをスピードアップしましょう。

詳しくは、Mergeのページをご覧ください。

Reactデザインシステムとは？

Reactデザインシステムは、Reactアプリを構築するための再利用可能なReactコンポーネントとデザインガイドラインの集まりです。一貫性があり、スケーラブルで、メンテナンスしやすいユーザーインターフェースの作成と維持に役立ちます。

Reactデザインシステムのメリット

React デザインシステムの使用や構築には、多くの利点があります。

React のコンポーネント駆動型の開発手法は、デザインシステムに最適なモジュール形式の UIライブラリとなっており、フロントエンジニアは、React のコンポーネントを原子まで分解して、それを組み合わせて新しいUI要素やパターン、テンプレートを作成することができます。

React は最も広く使われている UIライブラリの一つであり、デザインシステムを構築する上で以下のような多くのメリットがあります：

• 質問や問題解決ができる、エンジニアの大きなコミュニティ
• 豊富な Javascript ツールや統合機能
• インスピレーションの源となる、多くの定評のあるデザインシステム

React デザインシステムを採用している企業

以下は、デザインシステムに React を採用している企業の一部です：

• Instacart – Snacks
• Shopify Polaris
• Atlassian – デザインシステム
• Salesforce Lightning
• IBM – Carbon Design System
• Microsoft – Fluent UI
• Google のマテリアルデザインに構築された MUI (Material UI)

コンポーネントのシンタックス、ドキュメント、ガイドラインなど、デザインシステムの要素を学ぶために、このようなデザインシステムをチェックすることをお勧めします。

デザインシステムのアイデアの参考として、Adeleをチェックしてみてください。

公開されているデザインシステムとパターンライブラリのレポジトリであり、ダウンロードや分析ができる GitHub レポへのリンクがあります。

React デザインシステムの基礎知識

アトミックデザインの原理についての理解

アトミックデザインとは、ブラッド・フロスト氏が考案したシステムであり、UI要素を以下５つのカテゴリーに分類します。：

• 原子：HTMLタグ、フォント、ボタン、アニメーション、カラーパレットなど、これ以上分解できない基本的なUI要素
• 分子：検索入力、ナビリンク、ドロップダウンメニューなど、特定の機能や目的を果たすコンポーネントを作成する原子の集まり。
• 有機体: ヘッダーナビゲーションバー、フッター、画像カルーセルなど、複合的に組み合わせて UI を構成するUIパターン。
• テンプレート：ダッシュボード、ニュースフィード、チャットUI など、複数の有機体が連携して動作する完全な UI を表したもの。
• ページ：ニュースフィードのコンテンツ更新や、チャットでのメッセージ受信など、テンプレートのさまざまなインスタンスと、画面内でコンテンツがどのように変化するかを表したもの。

React デザインシステムでアトミックデザインが重要な理由

アトミックデザインの手法で、React のモジュール性と再利用性の利点を活用することができます。デザインシステムを多くのアトム（またはレゴのピース）の集合体としてアプローチすることで、製品に適応して進化できる柔軟でスケーラブルな UI ライブラリを開発しやすくなるのです。

デザインシステムのチームは、原子や分子を組み合わせることで新しいコンポーネントやパターンをより早く構築することができます。また、このモジュラーアプローチは、ゼロから開発するのではなく、今あるものを組み合わせればいいので、単発のソリューションも構築しやすくなり、コスト効率も高くなります。

React デザインシステムにおけるコンポーネントの役割

React コンポーネントは、UI やアプリの一貫性、再利用性、保守性を確保するための構成要素であり、このような UI要素は、以下のような多くの重要な役割を果たします：

• モジュラリティ： React のコンポーネントは設計上モジュール化されており、それによってUIライブラリの組み合わせや、再利用、管理がしやすくなる。
• 一貫性： React の楽な再利用性により、エンジニアはデザイン原則、スタイル、インタラクションを各コンポーネントに組み込み、アプリケーションのどこからでも呼び出すことができる。
• 再利用性： エンジニアは、再利用可能なコンポーネントの UI ライブラリを活用することで、新製品を開発する際の時間とリソースを節約することができる。また、エンジニアはゼロからコードを書く必要がないため、この再利用性によってエラーや技術的負債を減らすことができる。
• カスタマイズ性：エンジニアは、デザインのガイドラインを守りながら、あるいはUIライブラリに影響を与えながら、特定のコンポーネントを難なくカスタマイズでき、必要なときに柔軟に対応することができる。
• 維持性：一元化されたレポジトリにコンポーネントが格納されているため、エンジニアは更新やバグフィックスを一か所からプッシュすることができる。これにより、デザインシステムとその製品の維持や改良がしやすくなる。
• スケーラビリティ（拡張性）： エンジニアは、製品や新しい技術に合わせて React コンポーネントを拡張・適応させることができる。
• アクセシビリティ： エンジニアは、コンポーネントレベルで基本的なアクセシビリティ標準を組み込むことができ、それによって製品全体で実装しやすくなる。

デザイントークンの重要性

デザイントークンには、Reactデザインシステムのコアバリューが組み込まれており、複数のプラットフォームやデバイスおよび OS（オペレーティングシステム）で一貫したデザイン言語を維持するための色、タイポグラフィ、間隔、サイズ、ステート、インタラクティブ性などのプロパティが含みます。

デザイントークンは、複数のプラットフォーム用に多くの値を含むことができます。

例えば、UXPinのホームページでは、CTAに黄色を使用していますが、この黄色のヘックスコードは#FCC821で、以下のような方法で表現できます：

• HEX: #FCC821
• RGB (CSS): rgb(252, 200, 33)
• RGBA: rgba(252, 200, 33, 1)
• Octal (Android/Flutter): 77144041

UXPinでは、上記4つの値すべてを1つのデザイントークンにカプセル化できます：

• cta-background-primary

つまり、この色をプラットフォームで実装する場合は、コードの代わりにトークンを使います。

また、「あるチームはHEXを参照、別のチームはRGBを参照、別のチームが8進数を参照する」というような、ミスや混乱を招くようなものではなく、全員が同じ言語を使用することから、デザイントークンの使用によって部門間連携が強化します。

デザイントークンで、デザインシステムチームは、トークンファイルのプロパティを変更するだけで製品全体の変更を実施できるようになります。

例えば、cta-background-primary のデザイントークンを黄色から青色に変更する場合、インスタンスやスタイルシートを個別に更新するのではなく、４つのコードを１か所で調整することにより、製品のエコシステム全体での変更ができます。

React デザインシステムを始める

表面的には、デザインシステムはシンプルに見えますが、実際には、これらのUIライブラリは、多くの構成要素を持つ複雑な構造なのです。

ここでは、Reactのデザインシステムを作成する上で考慮すべき点をいくつか紹介します。

その要素は、デザインシステムガバナンスのプロトコルと手順の基礎となるものであるため、この初期の意思決定プロセスの全段階を文書化することが重要です。

モノレポ と ポリレポ のレポジトリの比較

デザインシステムの React コンポーネントライブラリを単一のレポジトリ（モノレポ）にするか、複数のリポジトリ（ポリレポ）にするかを決めましょう。

モノレポは依存関係の管理をシンプルにし、複数のパッケージの同時作業をしやすくします。

一方、ポリレポは、パッケージ間のモジュール性と分離性を高め、個々のコンポーネントを独立して維持や使用しやすくします。

Accenture では、モノレポ と ポリレポ の使い分けの メリットとデメリットが紹介されています（英語）。

コンポーネントの整理

コンポーネントライブラリは、製品やチームにとって最も便利な方法で整理しましょう。

例えば、機能別、ドメイン別、アトミックデザイン別などで分けられますね。

ちなみに MUIでは、以下のような機能別に UI ライブラリを整理できます：

• 入力：ボタン、スイッチ、テキストフィールドなど
• ナビゲーション：ドロワー、メニュー、ページネーションなど
• レイアウト：ボックス、コンテナ、グリッドなど
• データ表示：アバター、アイコン、リストなど

このコンポーネントをどのように分類しても、それぞれに独自のソースコード、スタイル、テスト、およびドキュメントがないといけません。

デザイントークンの管理

デザイントークンの管理は、デザインシステムチームが管理する専用のフォルダやパッケージに一元化されます。

この集中管理により、変更と更新をシンプルにしながら、より良いメンテナンスとガバナンスを促すことができます。

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

デザインシステムのテーマ設定とカスタマイズは、現代の製品開発には不可欠であり、通常、「ライトモード」と「ダークモード」の少なくとも２つのテーマが必要です。

マルチブランドのデザインシステムでは、より高いカスタマイズ性と柔軟性が求められるため、開発前にこのような要素を検討する必要があります。

React ライブラリのテーマ設定方法については、CSS Tricksの「Theming and Theme Switching with React and styled-components（Reactによるテーマ設定およびテーマ変更とスタイルコンポーネント）」で詳しく解説されているので、ぜひチェックしてみてください。

ドキュメント

デザインシステムのドキュメントは、採用の成功と一貫した実装に不可欠です。

ドキュメントには、デザイン言語、ガイドライン（コンテンツ、デザイン、コード、アクセシビリティなど）、スタイルガイド、使用事例、コード例、ツール、その他の重要な情報が含まれてないといけません。

Storybook のようなツールによって、デザインシステムのドキュメントの管理と更新を一元化できます。

Merge を使って Storybook を UXPin に同期させて、デザインと開発にわたる「信頼できる唯一の情報源（Single source of truth）」を作るといいでしょう。

テスト

コンポーネントテストを管理・整理するための構造を計画することも、Storybook を検討するもう一つの理由です。

Storybookは、ビジュアル、インタラクション、アクセシビリティ、スナップショットなど、複数のバグ防止テストを含むコンポーネントテストの自動化が内蔵されています。

バージョン管理とリリース管理

確実にデザインシステムの更新と製品との互換性を維持できるようにするために、React ライブラリのバージョン管理戦略とリリース管理プロセスを確立しましょう。

デザインツール

デザイナーは、プロトタイプとテストのために、React デザインシステムへのアクセスが必要です。

一般的な戦略として、ベクターベースのツールの使用がありますが、これは React デザインシステムの以下の２つのフォーマットを更新および維持するということです：

• レポジトリにあるコンポーネントライブラリ
• デザインチーム向け UI キット

UXPin Merge があれば、Reactライブラリを UXPinのデザインエディタにインポートできるので、デザイナーとエンジニアは同じUIコンポーネントを使用することができます。

React コンポーネントを使ったプロトタイプの試してみませんか？

詳しくはUXPin Merge をぜひご覧ください。

UXPin Mergeを使用すると、ReactライブラリをUXPinのデザインエディタにインポートできるので、デザイナーとエンジニアはまったく同じUIコンポーネントを使用できます。コードコンポーネントの同期にはいくつかのオプションがあります。

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

The post Reactデザインシステム – どこから作り始めるべき？ appeared first on Studio by UXPin.

最初に

多くのチームが、デザインシステムの作成は大変で時間のかかるプロジェクトであると想定しています。

UI監査や、デザインシステムの要素とデザインガイドラインのレポジトリの作成、組織全体が使えるようにデザインシステムを組み合わせることをチームメンバーに強制しますからね。

デザインシステムを構成する方法は、これだけではありません。デザインプロセスのスピードアップを目的としたこのツールキットには、よりシンプルな作成方法がいくつかあります。

そこで本記事では、このような目的を達成するためのデザインシステム作り方の最適なアプローチを探っていきます。

プロトタイプでデザインシステムを最大限に活用しませんか。

デザインシステムのビルディングブロックを UXPin に取り込み、デベロッパーがすぐにコードに変換できるインタラクティブなプロトタイプをデザインしましょう。

詳しくはUXPin Mergeをぜひご覧ください。

デザインシステムを 構造 する方法

デザイン要素と関連するドキュメントやガイドラインを組み合わせると、システムはブランドのUI構築に重要なことを、一貫したレポジトリとして形成していくはずです。

ただし、最適なデザイン効率とシステム効果を得るには、まず、それを識別可能な構成にアレンジする必要があります。

つまり、チームのニーズと組織のデザイン目標に最も適したものです。

では、デザインチームが使う３大 構造 をみてみましょう。

１．シンプルなビジュアルデザインレポジトリ

これはデザインシステムの最も基本的な構造です。

Nielsen Norman Groupの説明にあるように、こういったビジュアルデザインレポジトリにはさまざまな構成がありますが、ここでは「シンプルさ」に重点を置いています。

基本的なレベルでは、シンプルなレポジトリの主要なデザインシステムのコンポーネントは【スタイルガイド】、【コンポーネントライブラリ】、【パターンライブラリ】で構成されています。

これらが一体となって、機能性のあるデザイン システム レポジトリの基本要素を形成します。

この構造には、システムを構成するのに必要不可欠なものだけが含まれています。

チームメンバーに必要なものを最初から提供することが意図されているので、チームメンバーは他のアセットやドキュメントの作成や追加ができます。ちなみに、Shopify の PolarisやAtlassian Design Systemはこのタイプのデザインシステム構造を採用しています。

メリット

• 配置の作成や実施が簡単。

• デザインシステム チームがシステムの基本構造を最初から識別できるようになる。

• 意思決定が稼働中に行われ、開発が早まる。

デメリット

• この配置には、厳格なヒエラルキーが提供する構造が欠けている。

• チームは、重要な違いを無視して、デザイン システムの要素をアルファベット順や重要度順に並べる傾向がある。

• 配置の更新や維持がしにくい場合がある。

２．アトミックデザイン

『アトミックデザイン』の 構造 は、デザインシステムの提唱者であり、著者でもあるブラッド・フロスト氏によって作られた、効果的な UI デザインシステムの構築のために、秩序と構造化された階層（ヒエラルキー）を使うことに焦点を当てたものです。

アトミックデザインの方法論は、プロセスを５つのステージに分けることで、デザインシステムの構造手法です。

最初の３つは化学の世界をモデル化し、後の２つは目に見える世界の側面に関連するものになっています。アトミックデザインシステムとそのコンポーネントについては、別の記事でご紹介しましたが、ここでは最も重要な情報をまとめておきましょう。

各ステージは、前のステージを基礎としており、各階層は、前段階のものを集約して構成されています。

原子が分子を構成し、分子が有機体を構成するように、最小の構成要素から大きな構成要素に移行していくという構造です。

原子

デザインシステムの最も基本的なコンポーネント。

分子

その「原子レベル」の個々の要素がグループに結合されると、より大きな要素が見え始め、レゴのピースのように合わさる。

有機体

デザイン要素の組み合わせを分子単位で発展させることで、「有機体」ができ、より複雑なデザインシステム UI コンポーネントを形成する。

テンプレート

次のステージは、化学の領域を離れ、より「マクロ」な世界になり、有機体はテンプレートで整理されて、まとまりのあるデザインに仕上がる。

ページ

テンプレートを使ってカスタマイズすれば、１つのページができあがり、テンプレートのプレースホルダーのコンテンツをデザインのコンテンツに置き換えることで、デザインシステムの最終的な具体的な成果物が得られる。全ケースに逐一対応する必要はないかもしれないが、バリエーションをいくつか用意しておくといい場合がある。

メリット

• アトミックデザイン構造には、再利用可能なコンポーネントが利用される。チームは様々な要素を基本的な原子に分割することができ、それをさまざまな組み合わせや構成で適用や再適用ができる。

• Webサイトやアプリの中で、さまざまな要素コンポーネントを必要とする部分をチームで簡単に見つけ出し、それに応じた分子や有機体を作ることができる。

• この配置により、デザイナーはコンテンツと構造の分離をハッキリと確定するデザイン言語を使うことがができる。

• 同じコンポーネントでさまざまなバリエーションが生まれ、よりクリエイティブになる。

デメリット

• アトミックなデザイン構造では、長く複雑な部品リストになってしまう可能性がある。

• 場合によっては、コンポーネントの数が少ないと、複数のカテゴリーを用意しても意味がなく、それが、全体の方法論を複雑にする可能性がある。

３．コードベースのデザインシステム 構造 

このアプローチは、システム構造をデザインする上で最も強力で効果的な方法のひとつであり、デジタル製品や新機能の開発に携わるデザインチームに最適です。

例えばマテリアルデザインや Fluent UI デザインシステムについて考えてみましょう。

この構造により、デベロッパーが作った最終製品と同じような外観と動作をするプロトタイプを開発することができます。

これによって、デザイナーとデベロッパーの連携が促され、プロダクトチーム全体が、「信頼できる唯一の情報源（Single source of truth）」を頼りに、作業をすることができるのです。

コードベースのデザインシステムの構造は、デジタル製品のシステムデザインにおいて比較的新しいアプローチと考えられています。

デザイナーは、デジタル製品のデザインを拡張するために、デベロッパーが認めた機能的なコード化された UI 要素を採用することができるようになりました。

メリット

• この構造でデザイナーとデベロッパーの協力関係がよくなる。

• チームは、UI 要素の変更をより効果的に追跡できる。

• プロトタイプからデザインハンドオフまで、全体的な効率が上がる。

デメリット

• デザイナーがコードベースのデザインシステムの恩恵を受けるには、UXPinと Mergeテクノロジーのようなツールが必要。

• コンポーネントの作成に時間がかかる。

• デザイナーは、システム開発にデベロッパーの助けが必要な場合がある。

自分に合ったデザインシステム構造の選び方

より効率的なデザインに必要なフレームワークをチームに提供するには、正しいデザインシステムの構造を決めることが重要です。

例えば、製品デザインの目的に沿ったデザインシステム構造は、デザイナーの連携を促し、それによってデザイナーは、自分たちの能力を発揮できるデジタル製品を生み出すことができるようになります。

製品チームのニーズに合ったデザインシステム構造をきちんと選ぶために、以下について考えてみて下さい：

• 誰のためのデザインシステムの最適化なのか：組織全体の全員のためなのか、UXデザイナーのためなのか、それとも例えばフロントエンドデベロッパーだけのためなのか。

• デザインパターン、コード化された UIコンポーネント、デザインガイドラインからロールアウトプラン、ベストプラクティスのポリシーまで、どれだけのコンポーネントとコンテンツタイプをシステムに統合しようとしているのか。

• 現在使っているデザインシステムはどのような成熟段階にあるのか

効果的なデザインシステムは、成長と変化に伴う課題に適応することができるダイナミックな存在です。

デザインシステムの本来の価値は、無駄な労力を減らし、連携を促進する能力にあるのです。

UXPin がコードベースのデザインシステムのを好む理由

デザインシステムでコード化されたコンポーネントを使うことで、デザインチームとデベロッパーチームの間での共有が実現します。

それによって、デザインチームと開発チームは、「信頼できる唯一の情報源（Single source of truth）」に依存することができ、より効果的な連携が実現します。

また、組織内の各チームは、デザインやプロトタイプのプロジェクトをすべて同時に管理することができ、それによってより高度な一貫性を保つことができます。

その結果、デベロッパーはデザインパターンのデベロッパー向け言語への翻訳に集中できるようになります。

UXPin Mergeは、コードベースのデザインシステム構造を使って、「信頼できる唯一の情報源」でプロトタイプをデザインします。

これにより、デザイナーはデベロッパーのワークフローと整合性のあるデジタル製品のプロトタイプを作成することができます。

詳しくは、UXPinの Code-to-Designソリューションをぜひご覧ください。

The post デザインシステム 構造 トップ３ appeared first on Studio by UXPin.

最初に

UX（ユーザーエクスペリエンス）デザインとは、ユーザーとデジタル製品の関係を保証するためにあります。

いくつかの最新ツールがあるおかげで、デザインチームはリアルタイムでのデザインコラボレーションや、ユーザビリティテスト、デザインのイテレーション（反復）がしやすくなりました。

しかし、UXデザインツールがどれも同じというわけではありません。

デザインプロセスの一部（ワイヤーフレーミングツールなど）にしか焦点を当てないものもあれば、より包括的でアイデアから実装まで行うことができるもの、デザインシステムの要素を使用することで一貫性を保つことができるものもあります。

ニーズによって、直接コーディングできるような高度なツール、またはライブラリからドラッグ＆ドロップだけでデザインできるような機能があるものが欲しいという人もいるでしょう。

たくさん調べてツールを選ぶのも1つの方法ですが、自分にとって最適なUXデザインツールを探すには実際に使ってみることが一番です。

UXPinで “実物のような” プロトタイプをデザインしてみませんか？こちらから無料でお試しください。

デザインプロセスを効率化する最高の UXデザインツール とは

情報アーキテクチャ、ワイヤーフレーム、プロトタイプをデザインし、ユーザーに最適な”体験”を作成するための多くのコラボレーション機能を備えた UXデザインツール は多数あります。

 UXデザインツール の中には、デザイナーチーム全員がシームレスに同じプロジェクトに取り組むことができる、コラボレーション要素を備えたものもあります。

ほとんどの UXデザインツール はユーザー体験に焦点を当てています。そのため、ツールを通してユーザーが製品を使うときに「どのように見えるのか」、またはユーザーが「どのように製品を使うのか」について明確なアイデアを得るのに役立つでしょう。

また、デザインの整理、プロトタイピング、ユーザーと製品の関わりを把握するのにも役に立ちます。

初心者から上級者まで使えるものも含め、あなたのニーズに合ったUXデザインソフトはたくさんあります。プロトタイプを作成し、技術チームと簡単に共有できるものもあります。

これらを念頭に置いて、あなたに合った最適な選択肢をいくつか見ていきましょう。

Adobe XD

Adobe XDは有名なデザインプラットフォームのひとつです。全員が同じプロジェクトに取り組む UI/UX チームのために設計され、Mac と Windows の両方のコンピュータで利用が可能です。

このツールの最も便利な機能の1つは、ボタンやナビゲーションバーなどのUIコンポーネントを簡単に再利用できることです。Adobe Creative Cloudを介して、デザイナーにプロトタイプが共有および同期されます。

また、チームメンバーがデザインに変更を加えた際には通知を受け取ることもできるため、チーム全体とステークホルダーの足並みを揃えることに繋がります。

UXPin

デザインプロセスのある側面に焦点を当てたプロトタイピングツールとは違って、UXPin は、実際の製品を使っているような感覚を体験できる、高忠実度のプロトタイプをデザインするために必要な機能が揃っています。

UXPinには、効率的にデザインしたりチーム全体で一貫性を保つことが簡単にできるようになるUI（ユーザーインターフェース）の要素が何百種類もあります。

最もよく使われるインタラクティブなプロトタイプ機能には、以下のようなものがあります：

変数（Variables）

変数は、デザインプロセス全体を通してユーザー入力を作成および保存できる機能です。仕様に合わせてカスタマイズでき、プロトタイプ全体で利用することができます。デザインを他の場所で使うデータの収集や、動的なテキストの使用、ユーザーに特別にマッチするデザインコンテンツの作成も可能です。この機能の最も便利な点のひとつとして、設定した変数の画面遷移ができることです。プロジェクト全体の流れを確認できるので、それをベースに構築したり、別の変数を追加したりすることができます。

ステート

例えば、デザイン全体でいくつかの場面で使うボタンがある場合、そのボタンに対して複数のステート（状態）を設定し、簡単に切り替えることができます。

条件付ロジック

条件付きUXデザインツール では珍しい機能です。デザイナーはインタラクションに対して特定の条件を設定することができ、その条件が満たされた場合に、事前に定義されたアクションが発生します。

このようなデザインオプションには、プロトタイプを機能的にさせるため、デザイナーにとってもユーザビリティテストにおいて大いに役立つでしょう。

さらに、ステークホルダーやデベロッパーがデザインの意図を明確に理解することができ、デザインハンドオフを含む製品開発全体のワークフローがより効率化します。

UXPinの最大の利点の１つに、プロジェクトにおけるチームのハイレベルな連携を実現する独自の「Mergeテクノロジー」があります。

Mergeを使えば、デザインチームは実際にデベロッパーが使っている同じコードコンポーネントを使って作業することができます。

つまり、コード化されたデザインの一部をUXPinにインポートし、それらを使ってデザインを改善することができるのです。

それだけではなく、UXPinには何千ものコンポーネントライブラリがあり、デザイン要素を０から作る必要はなく、デザインにドラッグ＆ドロップするだけで使うこともできます。

アニメーションやアイコンのほか、iOS や Bootstrap のような他のシステム用に設計されたコンポーネントも含まれます。

また、自分でアニメーションの作成や、Photoshopなどを使ってデザインファイルを UXPin にインポートすることもできます。UXPin は他ツールと簡単に統合できるようにレイヤーを保存するため、アニメーションのレイヤーが消去される心配はありません。

Figma

Figma はインターフェースデザインとブレインストーミングに特化しています。Googleドキュメントのように、プロジェクトに取り組んでいるユーザーや、入力しているものがリアルタイムで確認できることから共同作業を便利に行うことができます。また、モックアップや忠実度の高いプロトタイプを作成することができます。

Figmaのプロトタイピイング機能はあまりインタラクティブではありませんが、FigmaのプロジェクトをUXPinエディタに統合することで、インタラクティブで忠実度の高いプロトタイプを簡単に作成可能です。さらに、簡単なコピー＆ペースト操作のみで、UXPinのエディタ内で Figma のプロジェクトの作業に取り掛かることができます。

Sketch

Sketch は、共有ライブラリやレイアウトに対応し、他のユーザーとのデザインの共有やエクスポートができる、コラボレーティブなプロダクトデザインプラットフォームです。また、ベクターツールやプラグインツールなど多くの編集ツールを備えています。複雑なデザインに取り組んでいる場合は、拡大してより細かく編集を加えることができます。コマンドでデザインの一部をリサイズできるのも便利な機能です。

Sketch は独自のアイコンやデザインを作成、ライブラリに保存するのに適しています。例えば１つのアイコンを複数のデザインを比較的簡単に使うことができるといったように、プロジェクト間の共有を簡単に行うことができます。

クラウド上にデザインを保存できるので、チームや組織はデザインに簡単にアクセスでき、より流動的なデザインプロセスが実現します。

もう１つの重要な機能として、同時編集機能があります。ファイルにコメント、編集、変更を加えることができ、加えられた変更などは自動でクラウドに同期されます。

InVision

InVision Studioは製品のデザインプロセスをシンプルにし、デザイナーはコーディングなしでデザインを描くことができます。

また、デザイナーはリアルタイムの共同作業環境でプロトタイプの管理やテストをすることができます。

さらに、デザインの具体化、スケッチやワイヤーフレームの作成、他のデザイナーからのフィードバックを集めることができるホワイトボード機能も内蔵されています。

デザインに命を吹き込むアニメーションや、デザインに変更があった場合にチームメンバー全員に通知する通知システムがあります。

Marvel

Marvelはクラウドベースのプラットフォームで、Web デザインを自動的にクラウドに同期する上に、外出先でも簡単に変更可能なモバイルサポートもあります。

また、簡単にアクセスしてプロジェクトに実装することができるテンプレート、画像、ボタンなどのスクリーンコンポーネントのライブラリもあります。

Marvelは初心者の人にも使いやすく、ドラッグ＆ドロップだけでコーディングなしでデザインを作成することができます。

他のチームメンバーがフィードバックを提供したり、独自のデザインを入力したりできる共同デザイン プラットフォームでもあります。

また、タブレット、スマートフォン、デスクトップパソコンなど、さまざまなデバイス向けに設計されたテンプレートがあります。そのうえ、モックアップは実物同様にテストすることができるため、デザイナーはサッと欠点を見つけ、必要に応じてデザインを変更することができます。

そして、モバイル用のアプリを提供しており、スマートフォン端末でもアイデアのテストや、共有を簡単に行うことができます。

最適な UXデザインツール を選ぶ

上記の例からわかるように、最も人気のあるデザインプラットフォームの中には、デザインプロセスの１つの要素に集中できるものもあり、Marvel のようにカジュアルなデザインに最適なものもあれば、より複雑なデジタル製品やモバイルアプリの制作に適したものもあります。

しかし、ここで覚えておきたいのは複数のソリューションの使用は、デザインツールキットが増えてしまい、作業が遅くなる可能性があるということです。

デザイナーは日々の仕事の中で、多くのツールを統合させたり、アプリ間を移動する必要が出てきますからね。

幸いなことに、アイデアから完成まで一貫してデザインに取り組むことができる高度なツールを利用することもできます。

UXPinでは、開発者がデザインからHTMLやCSSコードをワークフローにコピーして使うことができます。

他のソリューションと比べると、UXPinは業界で最も包括的な UXデザインツール の１つと言えるでしょう。

Axure、Proto.io、Figmaのような、従来デザインプロセスの特定のフェーズで使用されてきたソフトウェアに代わる、新しい選択肢として注目されてきています。

UXPinのツールを使えば、最終製品のユーザー体験がわかる完全にインタラクティブなプロトタイプをデザインすることができます。

UXPinを使って、よりリアルにプロトタイプをデザインする方法をぜひご覧ください。

14日間の無料トライアルのお申し込みはこちら。

The post 試すべきおすすめ UXデザインツール appeared first on Studio by UXPin.

Figma、AdobeXD、UXPin の３つは、デジタル製品をデザインするための主要なUX（ユーザーエクスペリエンス）デザインツールです。

この記事では、これら３つを比較してUIデザイン、モックアップ、プロトタイプ、連携に関してそれぞれの位置付けや特徴を紹介していきます。

どのデザインツールがあなたのプロジェクトやチーム・組織のニーズに最適か、ぜひご覧ください。

主なポイント

• AdobeXD は、Creative Cloud Suiteとシームレスに統合することで、Photoshop や Illustrator などのツールとのスムーズなデザインワークフローを実現する。

• Figma は、リアルタイムでの連携に最適なプラットフォームであり、複数のユーザーによる同時デザインが実現する。

• UXPin は他のデザインツールとは違い、コードベースのデザインツールであるため、複雑なプロトタイプを作成することができる上に、Mergeテクノロジーによってデザインとコードのギャップを埋める。

• 適切なデザインツールの選択は、プロジェクトの複雑さ、連携の必要性、統合の好み、プロトタイプ機能によって決まる。

世界最先端のUXデザインツールを使って、デザインプロセスに隠れたユーザビリティの問題を解決し、より多くのビジネスチャンスを特定しましょう。

デザインと開発をつなぐ「信頼できる唯一の情報源（Singel source of truth）」を作成しましょう。こちらからUXPin Mergeをぜひご覧ください。

AdobeXD とは

料金

Creative Cloud は ＄８２.４９（Photoshop、Illustrator、InDesign、Premiere Pro、Acrobatなどの２０以上のクリエイティブデスクトップおよびモバイルアプリケーションを含む）

最適な用途

Adobeユーザー、UIデザイン

機能の概要

• Photoshop や Illustrator などの Creative Cloud とのシームレスな統合

• 自動アニメーションで、スムーズなマイクロインタラクションとトランジションが実現し、プロトタイプのリアリズムが充実する

• 音声機能付きプロトタイプの統合で、UIデザイナーが音声UI をテストできるようになる

• リピートグリッドは、デザイン要素の迅速な複製を促進し、それによって反復作業を最適化し、デザインの一貫性を保証する

AdobeXD は、Adobe の Creative Cloud Suiteに含まれる UX および UIデザインツールです。

これは、インタラクティブなデザインを設計、プロトタイピング、共有するためのプラットフォームです。

Adobe のエコシステム内に統合されているため、デザイナーは Photoshop や Illustrator などのツール間を簡単に移行できるため、デザインプロセスが効率化します。

Figmaとは

料金

＄１２〜＄７５

最適な用途

UI（ユーザーインターフェース）デザイン、連携（コラボレーション）

機能の概要

• リアルタイムの連携により、複数のユーザーが同時にデザインを行うことができ、チームワークと即時のフィードバックを促進する

• 統合機能により、多くのプラグインやサードパーティ製アプリが提供される場合があり、それによってプラットフォームの機能が強化する

• ブラウザおよびデスクトップアプリケーション

• 開発モードで、エンジニアがデザインを分析し、スターターCSS でコードに変換しやすくなる

• バリアブルを使うと、デザイナーはユーザーのインタラクションに基づいてコンポーネントのプロパティを変更できる

Figmaは、リアルタイムの連携のために構築された、ベクターベースのデザインプラットフォームです。

ブラウザベースのツールであるため、アクセスの障壁がなく、それによって場所やデバイスに関係なくチームが同期して作業できることが保証されます。

また、Figmaの直感的なインターフェースとパワフルなプロトタイピング機能は多くの人に愛され、UXプロフェッショナルも愛用しています。

複数のデザイナーが同時にプロジェクトを編集できる機能など、コラボレーションに重点が置かれています。デザイン空間におけるチームワークが再定義されたことで Figmaはデザインツールのトップとして確立しました。

 FigmaはAdobeに買収されたのか

Adobe は２０２２年９月に Figmaの買収計画を発表しましたが、この買収はまだ成立しておらず、２０２３年８月の欧州委員会の調査を含む規制当局の精査を通過しないといけません。

規制当局は、Adobeによる買収で「インタラクティブ製品デザインのソフトウェアとデジタル資産作成ツールの供給に関する世界市場での競争を低下させる可能性がある 」ことを最も懸念しています。

そして、この契約が成立すれば、AdobeはAdobeXDを廃止し、UXデザインツールとして Figmaを Creative Cloud にバンドルすると噂されています。

UXPinとは

料金

＄３９〜＄１４９

最適な用途

UI デザイン、インタラクションデザイン、デザインシステム

機能の概要

• ブラウザとデスクトップアプリケーション

• 高度なインタラクティブプロトタイプにより、デザイナーはデザインプロセスにおいて、より多くのユーザビリティの問題を解決し、より良いビジネスチャンスを特定することができる

• UXPin のコメント機能を使ったリアルタイムの連携とコミュニケーション

• ステートにより、デザイナーは１つの要素に対して複数のステートを作成し、ドロップダウンメニュー、タブメニュー、ナビゲーショナルドロワーなどの複雑なインタラクティブコンポーネントをデザインできる

• Variables（変数）がユーザーの入力からデータを取得し、アプリバーに表示される名前やプロフィール画像のように、個別化されたダイナミックなユーザー体験を作り出す

• Expression（式） 複雑なコンポーネントや高度な機能を作成するための Javascript のような関数 – コードは不要！

• 条件付きインタラクションは、ユーザーのインタラクションに基づいて［if-then］と［if-else］の条件を作成し、複数の結果を持つダイナミックなプロトタイプを作成して、最終的な製品エクスペリエンスを正確に再現する

• UXPin の Merge テクノロジーを使って、React、Vue、Angular などのコードコンポーネントでデザインする

• UXPin の IFTTT 統合を使って、API やその他のデジタル製品を連携する

• UXPinのデザインシステムで、アセット、ドキュメント、UI 要素、カラー、タイポグラフィなどのコンポーネントライブラリを作成および共有する

• ネイティブアプリケーション（iOSとAndroid）の UXPin Mirror を使ったクロスプラットフォームのプロトタイプテスト

UXPinはコードベースのデザインツールで、デザイナーはリアルなプロトタイプを簡単に作成できます。

そしてデザイナーは、ツールのフォームとビルトインのデザインライブラリにより、 Figma や AdobeXD のような従来の画像ベースのデザインツールよりも速くモックアップやプロトタイプの作成や、テストおよび反復をすることができます。

UXPinの強みは、ベクターグラフィックスではなくコードをレンダリングできることです。

このコードベースのアプローチで、プロトタイプの範囲が広がり、ステークホルダーやユーザーからのより良いフィードバックのテストを強化するのです。

UXPinのMergeテクノロジーでデジタル製品デザインをレベルアップしてみませんか？

デザイナーはレポジトリからUIコンポーネントをインポートし、”実物に近い” 動きや操作・機能性のあるプロトタイプを作成しましょう！

UXPinとFigmaの違い

UXPinとFigma は、一見似ているように見えます。デザイナーは、左側にコンポーネントライブラリとレイヤー、右側にプロパティとインタラクションがあり、どちらのツールもデザインキャンバスが中央にあります。特に、Figmaでデザインし、UXPinでプロトタイプを作成するのが好きなUXデザイナーにとっては、このような親しみやすさでツールの切り替えがしやすくなります。

では、UXPinとFigma の主な違いを以下に挙げましょう：

• UXPinはコードベースで、Figmaはイメージベースである。UXPinのコードベースアプローチは、デザイナーが Figma や AdobeXD では再現不可能なコードのような機能やインタラクションを作成できるということである。
• UXPinには、テキスト入力などのフォームフィールドがあり、対する Figmaの入力フィールドは、使用不可で非インタラクティブなグラフィカル表現である。
• 「Code-to-Design（コードからデザイン）」か「Design-to-Code（デザインからコード）」の違いがある。Figma は「Design-to-Code（デザインからコード）」アプローチであり、デベロッパーは静的デザインをコードに変換しなければいけない。対する UXPinでは「Design-to-Code（コードからデザイン）」のワークフローを提供する一方で、「Code-to-Design（コードからデザイン）」へのソリューションも提供している。デザイナーはMergeを使ってコードコンポーネントをデザインプロセスにインポートできる。
• Figmaはアートボードとフレームを使い、UXPinは画面をページに分ける。

プロトタイプに最適なデザインツール

Figma や AdobeXD のような画像ベースのデザインツールは、ワイヤーフレームやモックアップ、基本的な低忠実度（Lo-Fi）プロトタイプには最適ですが、UXPinのインタラクティブプロトタイプ機能にはかないません。

例えば、Figma や AdobeXD では、美しいフォームやユーザーフローを作成できますが、入力はインタラクティブではありません。

そのため、デザイナーはテスト中に意味のあるインサイトを得ることができず、何か外部ツールを使うか、エンジニアと協力して実用的なプロトタイプを作成しないといけません。

一方、ステート、インタラクション、変数、Expressionなどの UXPinのインタラクティブ機能を使えば、デザイナーはコードベースのプロトタイプが反映されたインタラクション、ユーザーフロー、機能をデザインできます。

このような高度な機能により、プロトタイプの範囲が大幅に広がり、複雑なプロトタイプ機能や API統合であっても、デベロッパーを巻き込む必要がなくなります。

デザインツールの選び方

以下に、Figma、AdobeXD、または UXPinのいずれかを選択する際の重要な判断基準を挙げましょう：

• プロジェクトの範囲と複雑さ: どの３つのツールも、簡単なデザインに対して同等のエクスペリエンスと結果を提供するが、インタラクティブなプロトタイプを構築したい場合、またはデザインと開発を同期したい場合は、UXPinが最適なオプションである。

• 連携のニーズ: リアルタイムの連携がリストの上位にある場合、Figma の同時マルチユーザー機能は不可欠であり、 UXPinだと、Slackと統合されたコメント機能を通じて同様のソリューションを提供する。

• プラットフォームのアクセシビリティ: Figma と UXPin のブラウザベースのアプリケーションは、どこからでもアクセスを優先するには非常に重要であるが、もし Adobe Suite愛用者であれば、AdobeXDがエコシステムによりよく適合する。

• 統合と拡張機能: Figmaの豊富な統合エコシステムは、ワークフローがサードパーティ製プラグインで成り立っている場合は便利。Photoshopのようなツールとのシームレスな同期ではAdobeXDがお勧め。デザインと開発の同期を優先する場合、UXPinとMergeテクノロジーが最適である。

• フィードバック ループ: 効率化されたフィードバック プロセスは、最新の非同期製品開発にとって極めて重要。 UXPinのプレビューに関するコメント機能を使うと、ステークホルダーや他のチームは、UXPinのアカウントを持っていなくても、特定のチームメンバーにコメントを割り当てるなど、プロトタイプに関するフィードバックに注釈を付けることができる。

• 高度なプロトタイプ: UXPinは最も洗練されたプロトタイプ機能を提供するが、AdobeXDの音声プロトタイプはVUIデザイナーにとってユニークで便利な機能である。

• 信頼できる唯一の情報源（Single source of truth）： UXPin は、これら３つのツールの中で、Mergeテクノロジーを介して「Code-to-Design（コードからデザイン）」のソリューションを提供する唯一のツールである。Mergeがデザインと開発用の単一のUIライブラリでデザイナーとエンジニア間のギャップを埋め、シームレスな製品開発ワークフローとスムーズなハンドオフが実現する。

• 学習曲線: AdobeXD、Figma、およびUXPinには同等の学習曲線があるが、UXPinの高度な機能を習得するには少し時間がかかる。その代わり、デザインの迅速な反復と市場投入までの時間の短縮が得ることができる。

「以前まではBalsamiqを愛用していまいしたが、Figmaを使い始めてからはとても気に入りました。ですが、UXPinと出会って強力なスクリプト機能が使えるようになり、エンジニアの同僚が最終製品で使うのと同じライブ HTML UIコントロールを使ってインタラクティブなUIをデザインできるようになった今、もうFigmaには戻れません。」 シニアUXデザイナー、Anthony Hand

UXPinの「Code-to-Design（コードからデザイン）」が FigmaやAdobe XDを上回る理由

Figma と AdobeXD はビジュアルデザインを実現しますが、UXPin の「Code-to-Design（コードからデザイン）」へのアプローチは、デザインと開発間のギャップを埋めることで差別化を図ります。

また、UXPinは、ベクター グラフィックスの代わりに実際のコードをレンダリングすることで、プロトタイプの信頼性を確保し、それによってベクターベースのプロトタイプとインタラクティブ性の誤解による「よくある落とし穴」を回避します。

UXPinのMergeテクノロジーで、レポジトリから UIコンポーネントを統合し、それによって最終製品を正確に反映する、完全に機能する高忠実度のプロトタイプが実現します。

Figma と AdobeXDは視覚的な表現に依存しており、デザインに動きなどを加えるために追加のツールや開発者のサポートが必要になることがよくあります。ですが、UXPinはここで紹介したようなコードベースのアプローチと多機能性によって、シームレスで正確かつ迅速なデザインから開発までのプロセスを実現できます。

UXPin Mergeテクノロジーを使って「Code-to-Design」アプローチで製品開発ワークフローに革命を起こし、より良いデザインを効率的につくりましょう。デザイナーとデベロッパーの連携を改善し、顧客により良いUXを提供しましょう。

詳細とアクセスのリクエスト方法については、こちらのページをぜひご覧ください。

The post 【必見】Figma と AdobeXD と UXPin の違い appeared first on Studio by UXPin.

デザインシステムは、製品のデザインプロセスを効率化し、チーム間の一貫性と拡張性を確保します。

Figma と UXPin には、それぞれさまざまなニーズに合わせた独自の機能を備えた、強固なソリューションがあります。

そこで本記事では、Figmaのチームライブラリやとその利点、そして潜在的な欠点についてお話します。

また、UXPinのデザインシステムとMergeの技術を使った、チームライブラリの代替案もご紹介します。

主なポイント：

• Figmaのチームライブラリで、デザインシステムの作成と共有がしやすくなり、それによって一貫性が保証される。

• Figmaのデザインシステムは先進的ではあるが、デザイナーとデベロッパー間のギャップを埋めるという点では課題がある。

• UXPin Mergeは、一元管理、究極の一貫性、複数のフロントエンド開発をサポートし、デザインと開発プロセスを統一するという点において、Figmaのプロトタイプ ・ チームライブラリを上回る。

UXPin の Merge技術で、組織・プロトタイプ全体 で「信頼できる唯一の情報源（Single source of truth）」を作成し、製品開発プロセスをシンプルにしませんか。詳しくはUXPin Merge をぜひご覧ください。

Figma でデザインシステムを作成できるのか

チームライブラリ機能により、デザイナーは Figma でデザインシステムを作成することができます。

さまざまなファイルやプロジェクト間で、UIコンポーネントやスタイルを公開し、共有することができます。

デザインの要素が更新されると、その要素が使われている各デザインファイルに一貫性と最新性が保たれ、それによって組織全体は最新リリースが同期された状態が保たれます。

アトミックデザインとは ‐ Figma のデザインシステムに適用するために

Figma は、ブラッド・フロスト氏の「アトミックデザインの原則」に基づき、チームライブラリを設計しました。

アトミックデザインは、UI （ユーザーインターフェース）を以下のように分解します：

• 原子： カラースタイル、ラベル、テキストスタイル、スペーシングなど、Web ページの基本的な構成要素。

• 分子： 例えばボタン、フォーム入力、チェックボックスなど、色のように原子をいくつか組み合わせ、ラベルと形をつけると分子になる。

• 有機体：複数の分子を結合させると有機体になる。サイドバーやヘッダーなど、より複雑な UI 要素になることもある。

• テンプレート： さまざまな生物を組み合わせると、ページ全体のレイアウトを形成するテンプレートができあがる。

Figma のアトミックユニット：コンポーネントとスタイル

コンポーネントとスタイルは、Figma のデザインシステムの原子単位です：

• コンポーネント： ボタンやアイコンのような再利用可能なデザイン要素

• スタイル： 色やタイポグラフィなどのデザイン仕様

この要素は、デザインシステムのチームが作成したオリジナルのファイルに存在しています。

さまざまなファイル間でアクセスできるようにするには、ファイルの所有者がチームライブラリに公開するといいでしょう。

Figma のチームライブラリにアクセスするには？

コンポーネントとスタイルを公開すると、Figma のチームライブラリで見つけることができます：

• デザインファイルを作成するか、開く

• Assets のタブから［Team Library（チームライブラリ）］をクリックして開く

• 目的のチームライブラリを検索または参照する

• ライブラリを有効にして、そのコンポーネントをアセットパネルで利用できるようにする

チームライブラリを有効にすると、デザイナーはそのコンポーネントのインスタンスをデザインファイルに簡単にドラッグ＆ドロップでき、それによってデザインの一貫性が確保されます。

Figma のデザインシステムの主な特徴

• スタイル： コンポーネントの色、文字、エフェクト、レイアウトグリッドを確定する

• 変数（ベータ）： 色値、数値、文字などの再利用可能な値を保存して、コンポーネントを半インタラクティブにしたり、明暗モードを切り替えたりできる

• バリアント： コンポーネントとパターンのバリアントとステートを作成する

• デザイントークン： デザインシステムチームが複数のデザインファイルで共有できる動的なスタイルで、変更と更新を一元管理する

• Storybook：デザイナーは、Figma のデザインをStorybookコンポーネントに埋め込むことができ、関連する Figma コンポーネントとともにストーリーをインポートして参照することができる

• ライブラリー分析： デザインシステムのチームがパターンやコンポーネントの使用状況や採用を監視できるようにする

• バージョン履歴： Figma ファイルのバージョン履歴を表示し、古いバージョンを復元する

Figma のチームライブラリを使うデメリット

Figma のデザインシステムは、デザインをシンプルにするために進化してきましたが、デザイナーとエンジニア間のギャップを埋めることはできません。

デザインシステムチームは、Figma 用とコード用の２つのライブラリを管理が必要になります。

UXPinは、２０２３年に Whitespaceと共同出版し、そこでデザインシステムの課題とその克服方法について、世界的に有名な１９社にインタビューをしたレポートを発表しました。

インタビューを行った企業では、Figma や Sketch のような画像ベースのツール を使用して いました。

筆者たちは、各組織にとっての主要な目標が「信頼できる唯一の情報源（Single source of truth）」であることがわかりました。

企業はこの目標を達成するためにプラグインやカスタムソリューションに依存し、コストを増加させ、フローを複雑にしているのです。

以下に、デザインシステムに画像ベースのツールが使われる場合での、主な問題点を挙げてみましょう：

• デザイナーと開発者は別々のライブラリ (Figma用のUIキットとデベロッパー用のコードコンポーネント) を使用するため、組織が「信頼できる唯一の情報源（Single source of truth）」を得ることはできない。

• 変更の更新には、デザインシステムレポジトリ、Figma、プロトタイピングツール、関連ドキュメントなど、複数の場所の変更が必要。

• 単一のUIライブラリを一元管理しないと、さまざまなバージョンを使っているチーム間でエラーが発生する。

• ハンドオフでは、インタラクションを説明するための長いドキュメントが必要であり、２０２３年のリリースでも、コードに匹敵するインタラクティブ性を実現できない。

• デザイナーは、プロトタイプやテストのために追加のツールやプラグインを使わなければならず、それによってコストや運用の負担、ミスの可能性が増大する。

UXPinのデザインシステムと Figmaのチームライブラリの比較

UXPinは、デザインシステムの成熟度に応じて２つのソリューションを提供しています：

• デザインシステム： コンポーネント、アセット、タイポグラフィ、ドキュメントを含むデザインシステムを作成する。

• Merge技術： レポジトリから UXPin にコードコンポーネントライブラリをインポートして、プロトタイピングとテストを行う。

UXPin のデザインシステム

UXPinのデザインシステムは、Figmaのチームライブラリと同じように機能します。

組織は、デザインシステムを作成し、チームメンバーと共有することができ、デザインシステムチームは、権限のない変更を防ぎ、システムの完全性を確保するために、権限 を設定することができます。

UXPin のビルトインデザインライブラリの活用

組織は、iOS、マテリアルデザイン、Bootstrap、Foundation など、UXPinのビルトインデザインライブラリのいずれかを基盤として使うことで、デザインシステムをサッと構築して拡張することができます。

インタラクティブ性の向上

FigmaとSketchは画像ベースのデザインツールで、デザイナーは最小限の機能しか持たない静的なプロトタイプしか作成できません。

一方、UXPinはコードで動き、ベクターグラフィックスを生成する代わりに、キャンバスは HTML、CSS、Javascript を裏でレンダリングします。

つまり、UXPinのようなコードベースのプラットフォームを使うことは、デザイナーが、完全に機能する入力要素、状態管理、複雑な UI パターンなど、最終製品のコンポーネントを忠実に模倣したインタラクティブ性を実現できるということです。

以下に、UXPinが他のデザインツールと一線を画す４つの特徴を挙げましょう：

• ステート（状態）：デザイナーは、１つのUI要素に対して複数のステートを設定し、ドロップ ダウンメニュー、タブメニュー、ナビゲーショナルドロワー などの複雑なインタラクティブコンポーネントをデザインできる。

• バリアブル：ユーザーの入力からデータを取得し、アプリバーに名前やプロフィール画像に表示され るなど、個別化された動的なユーザー体験を作成する。

• Expression： Javascript のような関数で、複雑なコンポーネントや高度な機能を作成できる

• 条件付きインタラクション：ユーザーのインタラクションに基づいて「if-then」と「if-else」の条件を作成し、複数の結果を持つダイナミックなプロトタイプを作成して、最終的な製品エクスペリエンスを正確に再現する。

UXPinの高度なコードベース機能により、企業はプロトタイプやテストに外部ツールやプラグインを必要とせず、それによってコストや重複したワークフロー、運用タスクが削減されます。

UXPinのデザインシステムは、デザインシステム成熟の初期および中期段階を支援し、Merge の技術により、組織は最終段階である完全に統合された「信頼できる唯一の情報源（Single source of truth）」を達成することができます。

Merge の技術で「信頼できる唯一の情報源（Single source of truth）」を実現する方法

Mergeの技術は、デザイナーとデベロッパーがまったく同じコンポーネントライブラリで作業するという究極の成熟を実現します。

１回の更新で、ドキュメントを含むデザインとエンジニアリングの変更が同期されるのです。

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

Mergeを使うと、組織はレポジトリから UXPinにUIライブラリをインポートできます。

そのため、デザイナーはデザインプロセスで、エンジニアが最終製品を開発するのと同じデザインシステムコンポーネントを使うことができます。

レポジトリへの変更は自動的にUXPinに同期され、最新バージョンがチームに通知されます。

この新しい UXPin Mergeのアプローチにより、より連携しやすく統合的なデザインプロセスが実現します。

デザイン、プロトタイプ、開発を分離するのではなく、UXPinを使うことで、プロセス全体を通してエンジニアリングチームと製品チームを関与させる統合フローを構築することができます。

そしてその結果、製品の最終品質は劇的に上がりました。

ー エリカ・ライダー氏、プロダクト、UX、DesignOps のソートリーダー。

バージョン管理でチームの同期を保つ

デザイナーは UXPinのバージョン管理を使って、最新リリースに切り替えるタイミングを選択し たり、必要に応じて古いバージョンに戻すことができます。デザイナーとエンジニアが同じバージョン管理で同期しているため、混乱や伝達ミスがなく、デザインシステム全体の変更履歴が１つで済みます。

Merge が Figma のチームライブラリより秀でている点

Figmaのチーム ライブラリを使う場合、組織は 2 つのバージョンのデザインシステムを維持する必要があります。

さらにプロトタイプとテストにさまざまなツールを使う場合は、さらに多くのバージョンを維持することもあります。

一方、それがMergeの場合、管理するのはデザインシステムのレポジトリのみです。

一元管理

デザインシステムチームは、デザインチームとエンジニアリングチームのためのレポジトリを一元で管理します。

この一元管理によって、チームはコンポーネントライブラリ、更新、ガバナンス、ドキュメント化、パターンの推進を完全にコントロールできるのです。

究極の一貫性

デザインシステムを一元管理することで、コンポーネントライブラリへの不正な変更を防ぐことができ、インタラクティブ性やスタイリングなどのプロパティは、コンポーネントやパターンに織り込まれます。

デザイナーがコンポーネントを取り外して調整できる Figma とは違って、Merge の要素とそのプロパティは固定されます。

デザイナーは、UXPin のプロパティパネルに表示される、デザインシステムのレポジトリで定義されたプロパティのみを扱うことができます。

デザインシステムチームは、React propsまたはStorybook Argsを使ってコンポーネントのプロパティを確定でき、デザイナーは、プロパティパネルで確認および調整をすることができます。

このような制約は、デザイナーとエンジニアが常に同じパラメータと制限の中で作業するということであり、リリースのたびにピクセルパーフェクトな一貫性がもたらされます。

MergeはUX負債と技術的負債を大幅に削減しながら、ドリフトを排除するのです。

複数のフロントエンド技術に対応

ほとんどの Javascript フロントエンド技術を 以下２つの統合機能を使って UXPin と同期させることができます：

• Git統合： Reactレポジトリに直接接続

• Storybook 統合： React、Vue、Ember、Angular など、あらゆる Storybook ライブラリを同期する

Figmaの Storybookプラグインは、componentとStoryを視覚化させるだけですが、UXPinのStorybook統合は、エディター内で完全にインタラクティブなプロトタイプを構築するためにコンポーネントライブラリをインポートします。

デザイン、プロトタイプ、テストを１つのツールで

Figmaではインタラクティブなエフェクトやアニメーションなどの制限もまだあるため、多くの企業はデザインとプロトタイプに複数のツールを使わないといけません。（例：プロトタイプに Zeplin の使用など）

一方、Mergeテクノロジーの場合、１つのツールだけで完結するので、ワークフローはシンプルになり、同時にコストも削減されるでしょう。

デザインプロセスでコードコンポーネントを使うことは、デザイナーが最終製品のような外観と感触のプロトタイプを作成できるということであり、プロトタイプの幅は広がるため、ステークホルダーやユーザーテスト参加者からのより良いフィードバックの取得に繋がります。

オープンソースのコンポーネントライブラリを使ってプロトタイプを作成して進化させる

UXPinには、Fluent UI、Ant Design、MUI、UXPin BoilerplateなどのMergeライブラリがあります。これらの使用によって、完全に機能する高忠実度なプロトタイプやテストのための MVP（実用最小限の製品）を作成することができます。

また、MergeのGit統合を使っているチームは、上記のライブラリからコンポーネントを組み合わせて、新しいパターンの構築や新しいパターンの検証できるのです。開発者のサポートなしでもデザインシステムの進化が促進されるのです。

UXPinのコードベースのソリューションを使用することで、ワンランク上の製品設計をしてみましょう。

Mergeテクノロジーを使って、「信頼できる唯一の情報源（Single source of truth）」でデザインと開発をつなげましょう。

詳細とアクセス権については、Merge のページをぜひご覧ください。

The post FigmaとUXPin【 デザインシステム 徹底比較】 appeared first on Studio by UXPin.

最初に

HTML はマークアップ言語であり、React は JavaScript ライブラリです。

どちらもフロントエンド開発に使われ、Web サイトや Web アプリをデザインしているときに耳にしたことがあるかもしれません。

では早速ですが、HTML と React のこれら２つの違いを見ていきましょう。

覚えておくべきポイント

• HTMLはマークアップ言語であり、ReactはJSライブラリである。

• Reactはコンポーネントベースだが、HTMLはデフォルトではこのような構造には対応していない。

• HTMLはインタラクティビティやステートを独自に管理できないが、Reactではステートの管理が可能。

• HTMLのウェブサイトではフルリロードが必要、Reactは変更を加えた要素だけを更新できる。

• Reactは一方通行のデータバインディングを可能にするが、HTMLはデフォルトでデータバインディングを持たない。

• HTMLは通常、静的なウェブサイトのコンテンツを構造化し、Reactは動的なアプリのUIを構築する。

コード化されたコンポーネントでプロトタイプを作成し、デザインと開発の間のギャップを埋めませんか？デザインハンドオフの改善、製品開発フローとUIの完全な一貫性を実現することが可能です。

詳しくは、こちらのUXPin Mergeについてのページをぜひご覧ください。

HTML とは

HTMLについて

HTML（HyperText Markup Language）は、Web の基本的なプログラミング言語構造であり、フロントエンドフレームワークが使われているかどうかに関わらず、皆さんが訪れるWeb サイトは全て、HTML、CSS、Javascript で構成されています。

また、HTMLが見出し、段落、リンク、メディアオブジェクトなどの要素を様々なタグで確定することによって、ブラウザはコンテンツを正しく解釈して表示できるようになります。

HTMLは、全ての ウェブサイトや多くの Webアプリケーションの出発点であるため、Web デザインや開発に携わる人にとって、基本的な理解が不可欠なのです。

React とは

Reactについて

React（React.JS）は、Facebook社が開発したオープンソースの JavaScript ライブラリです。開発者は当初、React を主に SPA（シングルページアプリケーション）に使っていましたが、SEO 機能を備えたマルチページサイトに対応すべく進化しました。

コンテンツを構造化する HTML とは異なり、開発者は React で再利用可能なコンポーネントを作成することができます。

そして React の各コンポーネントには独自のロジックがあり、そのレンダリングを制御します。

このレンダリングは、ページの残りの部分は静的なままでリロードの必要はありませんが、単一の要素を変更することができるように なってい るため、非常に重要です。

例えば、SNS で投稿に「いいね！」をすると、親指を立てたアイコンやハートのアイコンのみが変化しますが、同じページに HTML、CSS、Javascript が使われていたら、「いいね！」を押したり、コンテンツに触れたりするたびに、ページ全体のリロードが必要になります。

また、React は、従来の HTML、CSS、Javascript のコードと比べて、ワークフロー上のメリットも多くあります。

複雑な UI をよりシンプルなコンポーネントに分解できるため、React はその効率性と柔軟性から、開発者の間で高い人気を誇っています。

HTML と React の主な違い

React と HTML のどちらを使っても同じ Web サイトやWeb アプリケーションの構築 が可能ですが、HTML を使用してコンテンツを構造化し、React を使用してインタラクティブ性とコンポーネントベースのアーキテクチャを追加することで、両者が連携することがよくあります。

HTML と React は異なるアプリケーションを持つ２つの異なるフロントエンド技術であり、ほとんどが互いに補完し合っているのです。

では、この比較で、HTMLで作られたサイト と Reactで作られたサイト、または Web アプリケーションを構築した場合にどうなるかを検証していきます。

• 機能性：HTMLは Web 上のコンテンツを構造化し、JavaScript のライブラリである React は動的でインタラクティブなユーザーインターフェースを作成する。

• コンポーネントベース：HTMLは本来、コンポーネント構造に対応していない。対する Reactは、コンポーネントベースのアーキテクチャを採用しており、各コンポーネントは UI の一部を表し、アプリケーション全体で再利用できるため、開発効率と一貫性が上がる。

• インタラクティビティ：HTML 単体では、動的なコンテンツの作成やアプリケーションの状態の管理などはできず、Web ページにインタラクティブ性を持たせるには、JavaScrip tや同様の言語が必要。一方、JavaScript ライブラリである React は、インタラクティブな UI を作成し、アプリケーションの状態を効果的に管理する。

• レンダリング：従来のHTMLベースのアプリケーションでは、ビューの変更の実装には、全ページのリフレッシュが必要なことがよくあったが、React は、仮想 DOM（ドキュメントオブジェクトモデル）を使って、変更するコンポーネントのみを更新するため、完全なページ更新の必要がなくなり、より効率的でスムーズな更新を提供できるようになる。

• データバインディング: HTMLにはデータバインディングのためのシステムが内蔵されておらず、ユーザー入力のような UI の変更で、アプリケーションのデータも自動更新されるというわけではない。一方 React を使用した場合では、一方向のデータバインディングが可能になり、それによって、基礎データに影響を与えることなく UI コンポーネントの効率的な更新が実現する。

• ユースケース：HTML は通常、静的な Web サイトのためのコンテンツを構造化する。対する React は動的でインタラクティブなUIを構築するため、複雑な SPA（シングルページアプリケーション）やReact Nativeを使ったモバイルアプリケーションに最適。

HTML と React の違いを見抜けるか

React と HTML の Web サイトや Web アプリケーションの違いを見分けるのは簡単ではありません。

Angular、Vueなど、どの フレームワークを使っても、ブラウザは HTML、CSS、Javascript のレンダリングが必要です。

ビルト・ウィズ のような Web サイトでさえ、開発者がこの情報を明示的に共有するか、GitHub の公開レポなどのプロジェクトのレポジトリを公開しなければ、デジタル製品の技術スタックを確認することはできません。

HTMLを掘り下げる

HTML の仕組み

ユーザーが Web ページを要求すると、ブラウザはサーバーから HTML ファイルを取り込み、それを解釈してページの構成や内容を表示します。HTML では、確定済みの HTML タグのセットを使って、段落の <p>、見出しの <h1> ～ <h6>、リンクの <a>、画像の <div>、<img> などのコンテンツ タイプを確定します。

HTML の構造

HTML は、<html> タグをルートとし、<head> タグと <body> タグが２本の枝として機能するツリー状の構造をしています。

<head> タグには、ページのスタイルや機能のためのメタデータ、スタイルシート、スクリプトが格納され、

<body> タグには、テキスト、画像、リンクなど、目に見えるすべてのコンテンツが含まれます。

このような主枝の中には、「子要素」と呼ばれる他のタグがあり、コンテンツを確定し構造化しています。

ページの読み込み

ページが読み込まれると、ブラウザは HTML を上から下へ読み、タグを解釈して、ページの構造を表す DOM（ドキュメントオブジェクトモデル）を構築します。

その後、ブラウザは DOM に従ってコンテンツを表示します。

HTML に CSS スタイルシートや JavaScript ファイルへのリンクが含まれている場合、ブラウザはそれらを取得して適用し、それがコンテンツの見た目（CSS）や動作（JavaScript）に影響を与える場合があります。

HTML の構造は、ブラウザが解釈しやすく、開発者が理解し操作しやすいようになっています。

HTMLは Web の基本的な構成要素であり、スタイル（CSS）や、JavaScript や React などのライブラリ/フレームワークのインタラクティブ機能を追加するための土台となるものです。

Reactを掘り下げる

React の仕組み

Reactは、DOM の仮想的な表現（仮想 DOM）を作成し、それを利用して性能を上げます。

ユーザーがアプリケーションと対話するとき、時間がかかる可能性がある 「DOM 全体の更新」の代わりに、React は状態が変化した 仮想DOM の部分のみを更新します。

そして、仮想DOM と実際の DOM を最も効率的な方法で整合させ、実際の DOM の変更箇所のみを更新します。このプロセスは “diffing” と呼ばれています。

React の構造

React は、JSX を返す再利用可能なコード片であるコンポーネントにコードを整理します。また、このようなコンポーネントは、ボタンのように単純なものから、ページ全体のテンプレートのように複雑なものまであります。

コンポーネントは、時間とともに変化するデータであるステートを保持し、props を介して親コンポーネントからデータを受け取り、子コンポーネントにデータを渡すこと が可能です。

このデータフローにより、明確で予測可能なコーディング構造が確立されるのです。

ページの読み込み

React アプリケーションが読み込まれると、コンポーネントを初期化し、ReactDOM ライブラリを使用して JSX を実際の DOM にレンダリングします。

この過程で、ユーザーとのインタラクションのためのイベントリスナーも設定されます。

ユーザーがアプリケーションを操作する（例：ボタンをクリックする）と、1つ以上のコンポーネントの状態がトリガーされることがあります。

React は、このような状態変化を反映するために仮想DOMを更新し、実際の DOM を効率的に更新して一致させます。

React の構造とDOM 操作のアプローチは、高速で応答性の高い複雑でインタラクティブな Web アプリケーションを構築するのに適しています。学習曲線はプレーンな HTML よりも急ですが、性能とコード整理のメリットは大きいです。

HTML や React が開発者に選ばれる理由

HTML を選ぶ理由

HTML は React よりも素直で強力でないように見えるかもしれませんが、それでも Web 開発において重要な役割を担っています。

その理由は以下の通りです：

• 基本的かつ普遍的：HTMLは、Web の基礎となる言語であり、どのブラウザもHTMLを解釈できるため、普遍的に認識され、支持される。

• 静的コンテンツに最適：ほとんどが静的なコンテンツで構成される Web サイトを構築する場合、HTMLは、わかりやすく効率的な選択肢となる。

• 習得しやすい：HTML は、初心者にとって最も簡単な言語の一つであり、Web 開発に興味のある人にとっては、出発点として最適な言語である。

• SEOと相性がいい：検索エンジンは HTML をクロールして理解しやすいため、SEO 対策に有利。

例えば、製品やサービスを紹介するシンプルな Web サイトを作りたいビジネスには、HTMLが最適であり、Web 開発について学ぶ初心者の方にも賢い選択肢です。

React を選ぶ理由

React には、多くの開発者に好まれるような機能が以下のように備わっています：

• コンポーネントベースのアーキテクチャ：React のコンポーネントベースのアプローチは、アプリケーション全体の再利用性と一貫性を促進し、それによって開発がより効率的になる。

• 効率的な更新：React は、Virtual DOM を使って、ページの変更が必要な部分のみを更新するため、特に複雑なアプリケーションでは高いパフォーマンスを発揮する。

• 高度な JavaScript：React は、高度な JavaScript の機能と概念を利用しているため、開発者はより強力で柔軟な力を得られる。

• 強いコミュニティとエコシステム：React には大規模で活発なコミュニティがあり、つまり、学習やトラブルシューティングのためのリソースが豊富で、ライブラリやツールのエコシステムも充実している。

例えば、Facebook、Instagram、WhatsApp では、複雑でインタラクティブ性の高い UI に React が使われており、スタートアップ企業やハイテク企業も、その効率性、拡張性、生産性から React を愛用しています。

また、フロントエンドライブラリ のコンポーネントベースの性質から、組織ではデザインシステムの構築に React が使われています。

HTMLとReact：どちらを選ぶべき？

HTMLとReactのどちらを選択するかは、以下のようにプロジェクトのニーズによって異なります：

• 静的な Web サイト向け：シンプルでほとんど静的な Web サイトを構築するのには、HTML が適した選択肢であることが多い。

• 動的で複雑なアプリケーション向け：複雑で高度にインタラクティブな Web アプリケーションを構築する上で、React は HTML よりもはるかに優れた選択肢である。

HTML と React の UX への影響

性能

HTML ベースのWeb サイトは、その静的な性質上、一般的に読み込みが速いですが、ユーザーの操作のたびに新しいページを読み込む必要がある場合だと、操作に時間がかかることがあります。

一方、変化するコンポーネントのみを更新する React の機能は、スムーズで高速なインタラクションにつながり、特に複雑なアプリケーションにおいて、より流動的な体験をユーザーに提供します。

インタラクティビティ

HTML だけでは、動的でインタラクティブな UX （ユーザーエクスペリエンス）を生み出すことはできず、インタラクティブな要素を追加するには、JavaScript などの言語が必要です。

それに対して、JavaScript ライブラリである React は、ユーザーの入力に瞬時に反応する動的でインタラクティブな UI を構築することに長けています。このインタラクティブ性は、より魅力的でアプリのような UX をもたらすこともあります。

一貫性

HTML だと、一貫性の確保には、手作業での慎重なコーディングが必要です。

対する React は、そのコンポーネントベースのアーキテクチャにより、開発者はアプリケーション全体で UI 要素の一貫した実装を保証することができ、この統一性により、一貫した LnF（ルック＆フィール）が促され、それが優れた UX にとって欠かせないものとなります。

PWA（プログレッシブ Web アプリ）

HTML、CSS、JavaScript を使った PWAの開発も可能ですが、そのプロセスはより複雑で時間がかかるものです。なので 開発者は、PWA（プログレッシブ Web アプリ）の構築に React をよく使います。PWAは、オフライン機能を含むアプリのような体験を Web 上で提供することができ、それで UX が大幅に上がります。

SEO 対策と初期読み込み時間

HTMLは、検索エンジンがクロールしてインデックスしやすく、SEO 対策につながります。また、HTML ページは、最初の HTML ファイルが読み込まれた後、すぐにレンダリングを開始することができます。

一方、React アプリケーションでは、一般的にレンダリングを開始する前に JavaScript バンドル全体を読み込む必要があります。

このレンダリングにより、初期の読み込み時間が長くなり、UX や SEO に影響を与えることがありますが、SSR（サーバーサイドレンダリング）や Next.js などの技術により、React アプリケーションのこのような問題を解決することができます。

UXPin で Merge を使ってインタラクティブなプロトタイプを作る

UXPin の Merge 技術で、プロダクトチームはレポジトリから UIコンポーネントをインポートして、UXPin のデザインキャンバスで完全に機能するインタラクティブなプロトタイプを構築できるようになります。

そしてデザインチームは、エンジニアが最終製品の開発に使うのと同じ UI 要素をプロトタイプに使用し、デザインと開発の間に「信頼できる唯一の情報源（Single source of truth）」を作成します。

Merge を使用した場合、デザイナーは React を学ぶことなく、React で アプリケーションを作成することができ、コンポーネントをドラッグ＆ドロップするだけで、さまざまなインタラクティブなプロトタイプを作成することができます。

このような高度なプロトタイプによってテストは強化され、デザインチームは改良するための有意義で実用的な結果を得ることができます。

いかがだったでしょうか？今回のブログが少しでも HTML と Reactの学習 で ぜひ参考にしていただけると幸いです。

「Code-to-Design（コードからデザイン）」を体験してみませんか？詳細とアクセスリクエスト方法については、Merge のページをぜひご覧ください。

The post React と HTML – 違いを見抜けるか？ appeared first on Studio by UXPin.

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

主なポイント：

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

世界最先端のプロダクトデザインツールを使って、インタラクティブなプロトタイプで他のデザイナーに差をつけましょう。無料トライアルにサインアップして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の洗練されたツールと機能性で、一歩先を行く製品デザインスキルを身につけませんか？無料トライアルにサインアップして、インタラクティブなプロトタイプを作成しましょう。

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

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

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

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

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

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

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

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

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

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

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

この方法論の由来

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

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

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

有用性

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

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

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

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

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

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

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

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

持続可能性

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

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

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

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

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

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

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

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

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

実現可能性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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