デザインのサイロに閉じ込められてはいませんか?

デザインサイロ

Sketchの正式発表後、ソフトウェアデザインツールは、アプリをデザインしプロトタイプを構築するための、より迅速で効率的な方法を提供するために進化してきた。FigmaやAdobe XD、Zeplinなどが、Sketchに挑戦するために登場した。

ある観点から見ると、これらのツールはアプリ作成プロセスの改善に大きく貢献しています。しかし、設計からコードまで完全なアプリケーションを構築するために必要なプロセス全体を考慮すると、全体的に見ると、問題の一部しか解決できず、いわゆる「設計サイロ」に陥ってしまいます。

デザインサイロとはどういう意味ですか?

デザインは、デジタル製品のデザイン プロセスにおける 1 つのステップにすぎません。このプロセスには、対象ユーザーのニーズを満たす実用的なアプリケーションを構築するために必要なすべての要素 (画面デザイン、ユーザー フロー、共同編集、ユーザー テスト、デザイン システム、プロトタイピング、コード生成など) が含まれている必要があります。デザイン ツー コードとも呼ばれます。

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

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

設計からコードまでのプロセス全体を考慮すると、今日の設計ツールでは次のように設計がサイロ化されます。

Sketch	Figma	アドビ	ゼプリン
Macのみ ユーザーテストなし コード生成なし 限定的なコラボレーション	ユーザーテストなし コード生成なし	ユーザーテストなし コード生成なし 限定的なコラボレーション	プロトタイピングなし ユーザーテストなし コード生成なし 限定的なコラボレーション

ご覧のとおり、これらのデザイン ソフトウェア ツールのほとんどにはユーザー テストが欠如しており、提供されるコラボレーション ツールも限られており、コード生成機能も提供されていないため、デザインと開発の引き継ぎという長年の課題は解決されていません。

デザインのサイロ化を打破する

アプリケーション リーダーは、デジタル製品設計プラットフォームの主要な機能を理解し、画面設計からコード生成まですべてをカバーするツールを導入する必要があります。

ガートナー、デジタル製品設計プラットフォームのテクノロジーインサイト¹

前述のように、デザインからコードまでのソリューションにより、デザインサイロから抜け出し、長年アプリ作成を遅らせてきた長年の障害を解消できます。これは、長年デザインと開発のコラボレーションを妨げてきた、遅く、エラーが発生しやすく、ストレスのかかるハンドオフを克服することによって実現します。

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

​デジタル製品設計プラットフォームが提供すべき具体的な機能は次のとおりです。

• 柔軟な設計システム- ソフトウェア アプリケーションの構築に再利用またはコンテキスト化できるソフトウェア コンポーネントにマッピングされる UX パターンとブランド スタイル ガイドラインのインベントリ。

• SketchやFigmaのようなデザイナーお気に入りのベクターデザインツールで動作します。Figmaは近日中に完全サポートされる予定です。

• あらゆるプロトタイプにスレッド形式でコメントできる安全なワークスペースを介して、チーム、関係者、顧客と共同でデザインの反復作業を行います。

• リアルタイム分析による無制限のリモートおよび非モデレート ユーザー テスト。

• デザインから CSS、色、サイズ/配置コードを取得するための検査ツール (Zeplin と同様)。

• WYSIWYG アプリの設計と構築、AngularとBlazorのリアルタイム コード プレビューとコード生成、そして近々ReactとWeb Componentsにも対応します。

コード設計はローコードに基づいて構築されます

デザイン・ツー・コード ソリューションは、ローコード ムーブメントの一部です。ローコード ツールによって何千行ものコードを記述する必要がなくなるのと同様に、デジタル製品設計プラットフォームは、画面設計、ユーザー フロー、コード生成から時間、フラストレーション、潜在的な UX バグを取り除くビルディング ブロックを提供します。

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

設計からコードまでプラットフォーム

設計からコードへの最短の移行方法を求めており、ユーザーテストなどの事前機能には興味がないデザイナーや開発者にとって、App Builderは静的なFigmaまたはSketch設計から、実際の UI コンポーネントとスタイルを備えたインタラクティブでレスポンシブなアプリを作成できます。App App Builder、ローコードのクラウドベースの WYSIWYG ドラッグ アンド ドロップ ツールであり、デザイナーがプロトタイプを完成すると、開発者はソース コードをリアルタイムでプレビューできます。準備ができたら、開発者はAngularまたはBlazorで本番環境対応のコードをすばやく簡単に生成し、GitHub リポジトリにアップロードするか、Visual Studio Code またはお気に入りの IDE で実行できます。

デザインからコードまでのスピードを求めているだけでなく、画面デザイン、ユーザーフロー、プロトタイピング、ユーザーテストにも重点を置きたいデザイナーは、ローコードのApp Builderを使用できます。

1 分未満でアイデアからコードを作成する方法を確認するには、今すぐデモを依頼するか、Sketchベクター デザインを使用可能、テスト可能、更新可能なAngularコードに変換するこの短いビデオをご覧ください。

出典

1.ガートナー、「デジタル製品設計プラットフォームのテクノロジーインサイト」、2020年11月24日、ブレント・スチュワート、ヴァン・ベイカー、マグナス・レヴァン
2.ガートナー予測、2021年2月