設計サイロに陥っていませんか?

Sketchの正式リリース後、ソフトウェア設計ツールは進化し、アプリを設計してプロトタイプを構築するためのより高速かつ効率的な方法を提供しました。Figma、Adobe XD、Zeplin は、Sketch対抗するために登場した少数の企業です。

ある観点から見ると、これらのツールはアプリ作成プロセスの改善に劇的に貢献しています。しかし、設計からコードまで完全なアプリケーションを構築するために必要なプロセス全体を考慮して全体的に見ると、それらは問題の一部を解決するだけであり、私たちが「設計サイロ」と呼ぶものに取り残されます。

デザインサイロとは何を意味するのでしょうか?

デザインは、デジタル製品デザイン プロセスの 1 ステップにすぎません。このプロセスには、画面デザイン、ユーザー フロー、共同編集、ユーザー テスト、デザイン システム、プロトタイピング、およびコード生成。デザインからコーディングとも呼ばれます。

このデジタル製品設計プラットフォームの要素を以下の図に示します。

Infragistics は、App Builder ™と呼ばれる完全なデジタル製品設計プラットフォームをリリースしました。初期の内部テストでは、これらすべての要素が単一の統合プラットフォームに含まれている場合、アプリを最大 10 倍高速に構築できることが示されています。

設計からコードまでの完全なプロセスを考慮すると、今日の設計ツールがどのようにして設計サイロに陥ってしまうのかを次に示します。

ご覧のとおり、これらの設計ソフトウェア ツールのほとんどはユーザー テストを欠いており、提供するコラボレーション ツールも限られており、コード生成を提供するものはありません。つまり、設計と開発の引き継ぎに関する長年の問題を解決できていません。

前述したように、デザインからコードまでのソリューションを使用すると、デザインのサイロ化を打破し、デザインと開発を妨げていた遅くてエラーが発生しやすくイライラするハンドオフを克服することで、長年にわたってアプリの作成を遅らせてきた長年の障害を解決できます。長年にわたる開発協力。

Indigo.Design with App Builderのようなデジタル製品設計プラットフォームを使用すると、設計チームと開発チームが単一のプラットフォームで作業し、共通の設計システムを共有できるため、アプリの構築が劇的に加速します。デザイナーと開発者は、画面デザインやプロトタイプを共有したり、コードが生成される前に実際のコードや実際のコンポーネントを含むアプリケーションを表示したりして、簡単にコラボレーションできます。これにより、面倒な引き継ぎがなくなり、フラストレーションが軽減され、完成したアプリケーションが製品マネージャー、デザイナー、開発者全員の期待に確実に応えられるようになります。

​デジタル製品設計プラットフォームが提供すべき具体的な機能の一部を次に示します。

• 柔軟な設計システム- ソフトウェア アプリケーションを構築するために再利用またはコンテキスト化できるソフトウェア コンポーネントにマッピングされる UX パターンとブランド スタイル ガイドラインのインベントリ。
• ​SketchやAdob e XDなどのデザイナーのお気に入りのベクター デザイン ツールと連携し、Figmaも近日完全サポートされる予定です。
• プロトタイプにスレッドでコメントできる安全なワークスペースを介して、チーム、関係者、顧客と共同で設計を反復できます。
• リアルタイム分析による無制限のリモートおよびモデレートなしのユーザー テスト。 (Indigo.Designのみ)
• デザインから CSS、色、サイズ / 位置コードを取得するための検査ツール (Zeplin と同様)。
• AngularとBlazorのリアルタイム コード プレビューとコード生成を備えた WYSIWYG アプリの設計と構築。また、間もなくReactとWeb Componentsも使用できるようになります。

デザインからコードまでのソリューションは、ローコード運動の一部です。ローコード ツールによって数千行のコードを記述する必要がなくなるのと同じように、デジタル製品設計プラットフォームは、画面設計、ユーザー フロー、およびコード生成にかかる時間、フラストレーション、潜在的な UX バグを軽減する構成要素を提供します。

ローコード ツールがあらゆる規模の企業や組織にとってどれほど劇的な効果をもたらすかを示すスナップショットを以下に示します。

ユーザーテストなどの事前の機能には興味がなく、デザインからコードに最速で移行したいデザイナーや開発者にとって、App Builder使用すると、静的な Adob e XD またはSketchデザインを使用して、実際の UI コンポーネントとスタイルを備えたインタラクティブで応答性の高いアプリを取得できます。App Builderは、ローコードのクラウドベースの WYSIWYG ドラッグ アンド ドロップ ツールで、デザイナーがプロトタイプを完成させた後、開発者はソース コードをリアルタイムでプレビューできます。準備ができたら、開発者はAngularまたはBlazorで実稼働対応のコードを迅速かつ簡単に生成し、それを GitHub リポジトリにアップロードしたり、Visual Studio Code やお気に入りの IDE で実行したりできます。

デザインからコードまでのスピードを求めながらも、画面デザイン、ユーザー フロー、プロトタイピング、ユーザー テストにも重点を置きたいデザイナーは、完全なデジタル製品デザイン プラットフォームであるIndigo.Designを使用できます。

アイデアからコードに 1 分以内で移行する方法を確認するには、今すぐデモについてお問い合わせいただくか、Sketchベクター デザインを使用可能、テスト可能、更新可能なAngularコードに変換するこの短いビデオをご覧ください。

情報源

1. Gartner、「デジタル製品設計プラットフォームのテクノロジーに関する洞察」、2020 年 11 月 24 日、Brent Stewart、Van Baker、Magnus Revang
2. Gartner の予測、2021 年 2 月