デザイン・サイロに陥っていますか？ - Indigo.Design ホワイトペーパー

デザインからコードへ、サイロから抜け出す

2010年のSketchの正式ローンチを皮切りに、ソフトウェアデザインツールはアプリケーションデザインを一変させてきました。デザインをデジタルで作成し、クラウド上で他のデザイナーやユーザーと共有し、最終的には動作するプロトタイプへと変えることを、よりシンプルかつ迅速にしてきたのです。

しかし、デザインはデザイン/プロトタイプを実際に動くアプリケーションへと変える工程のほんの一部にすぎません。課題となっているのは、多くのデザイン製品が「デザインサイロ」にユーザーを閉じ込めてしまうことです——プロトタイプはあっても、それを完成したアプリへとスムーズに変換するプロセスがないのです。そして従来のデザインと開発のハンドオフは、コミュニケーション不足や遅延、エラーに悩まされ続けてきました。

では何が必要なのでしょうか? デザイナーと開発者がそれぞれお気に入りのツール——たとえばデザイナーならSketchやFigma、開発者ならVisual Studioやお気に入りのIDE——を使いながらも、標準化されたツールチェーンやプラットフォーム全体でツールの統合性・拡張性を実現する、デザインからコードへのプロセスです。

その結果として得られるのは、SketchやFigmaファイルなどの静的なデザイン/プロトタイプを、開発者と協力しながらAngularやBlazorの本番運用可能なコードへと迅速に変換できる能力です。本ホワイトペーパーでは、このデザインからコードへの統合について詳しく解説します。

デザインサイロとは

Sketchの正式ローンチ以降、ソフトウェアデザインツールはアプリのデザインやプロトタイプ構築をより速く、より効率的に行えるよう進化してきました。Figma、Adobe XD、Zeplinなどは、Sketchに挑戦する形で登場したツールのほんの一例です。

一つの視点から見れば、これらのツールはアプリ作成プロセスの改善に劇的に貢献してきました。しかし、デザインからコードまでアプリケーションを完成させるために必要な工程全体を俯瞰すると、これらは問題の一部を解決しているにすぎず、私たちが「デザインサイロ」と呼ぶ状態にユーザーを取り残してしまいます。

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

デザインは、対象ユーザーのニーズを満たす動作するアプリケーションを構築するために必要なすべて——画面デザイン、ユーザーフロー、共同編集、ユーザーテスト、デザインシステム、プロトタイピング、そしてコード生成の組み合わせ——を含むデジタルプロダクトデザインプロセスの、たった一つのステップにすぎません。これはデザイン・トゥ・コードとも呼ばれます。

このデジタルプロダクトデザインプラットフォームを構成する要素を、以下の図に示します。

Infragisticsは、App Builder™と呼ばれる完全なデジタルプロダクトデザインプラットフォームをリリースしました。初期の社内テストでは、これらすべての要素を単一の統合プラットフォームに組み込むことで、アプリの構築速度が最大10倍になることが示されています。

デザインからコードまでの一連のプロセス全体を考慮すると、今日のデザインツールは以下のような点でユーザーをデザインサイロに留めていることがわかります。

Sketch

Figma

Adobe XD

Zeplin

Macのみ対応
ユーザーテストなし
コード生成なし
コラボレーション機能が限定的

ユーザーテストなし
コード生成なし

ユーザーテストなし
コード生成なし
コラボレーション機能が限定的

プロトタイピングなし
ユーザーテストなし
コード生成なし
コラボレーション機能が限定的

ご覧の通り、これらのデザインソフトウェアツールのほとんどにはユーザーテスト機能がなく、コラボレーションツールも限定的で、コード生成を提供しているものは一つもありません——長年の課題であるデザインと開発のハンドオフ問題は、依然として解決されていないのです。

デザインサイロからの脱却

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

Gartner, Technology Insight for Digital Product Design Platforms1

前述の通り、デザインからコードへのソリューションは、デザインサイロから脱却し、長年アプリ開発を停滞させてきた根深いボトルネックを解消するための手段です——長きにわたりデザインと開発の連携を阻んできた、遅く、エラーが起きやすく、ストレスの多いハンドオフを克服することによってです。

App Builderのようなデジタルプロダクトデザインプラットフォームを使えば、デザインチームと開発チームは単一のプラットフォーム上で作業し、共通のデザインシステムを共有できます——これによりアプリ構築が劇的に加速します。デザイナーと開発者は簡単に連携でき、たとえば画面デザインやプロトタイプを共有したり、コードが生成される前に実際のコードや実コンポーネントを使ったアプリケーションを確認したりできます。これにより煩わしいハンドオフがなくなり、フラストレーションが軽減され、完成したアプリケーションがプロダクトマネージャー、デザイナー、開発者すべての期待に応えるものになることが保証されます。

以下は、デジタルプロダクトデザインプラットフォームが備えるべき具体的な機能の一部です。

• 柔軟なデザインシステム — UXパターンとブランドスタイルガイドラインの一覧で、ソフトウェアアプリケーション構築のために再利用したり文脈に応じて調整したりできるソフトウェアコンポーネントに対応づけられているもの。

• SketchやFigmaといったデザイナーお気に入りのベクターデザインツールに対応(Figmaのフルサポートも近日提供予定)。

• 任意のプロトタイプに対するスレッド形式のコメント機能を備えた安全なワークスペースを通じて、チーム、ステークホルダー、顧客とデザインの反復作業を協働で行える。

• リアルタイム分析を伴う、無制限のリモート・無人ユーザーテスト。

• デザインからCSS、色、サイズ/配置のコードを取得できる、Zeplinのようなインスペクトツール。

• リアルタイムのコードプレビューとAngularおよびBlazor向けのコード生成(近日ReactおよびWeb Componentsにも対応予定)を備えたWYSIWYGアプリデザイン・構築機能。

デザイン・トゥ・コードはローコードの上に成り立つ

デザインからコードへのソリューションは、ローコードムーブメントの一部です。ローコードツールが数千行ものコードを書く必要をなくすのと同じように、デジタルプロダクトデザインプラットフォームは、画面デザイン、ユーザーフロー、コード生成にかかる時間やフラストレーション、潜在的なUXバグを取り除くための構成要素を提供します。

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

デザイン・トゥ・コード・プラットフォーム

デザインからコードへの最速の道を求め、ユーザーテストのような初期段階の機能には関心がないデザイナーや開発者にとって、App Builderを使えば静的なFigmaやSketchのデザインから、実際のUIコンポーネントとスタイリングを備えたインタラクティブでレスポンシブなアプリを作成できます。App BuilderはローコードでクラウドベースのWYSIWYGドラッグ&ドロップツールであり、デザイナーがプロトタイプを完成させた後、開発者がソースコードをリアルタイムでプレビューできるようにします。準備が整えば、開発者はAngularまたはBlazorの本番運用可能なコードを迅速かつ簡単に生成し、GitHubリポジトリにアップロードしたり、Visual Studio Codeやお気に入りのIDEで実行したりできます。

デザインからコードへの速さに加えて、画面デザイン、ユーザーフロー、プロトタイピング、ユーザーテストにもさらに注力したいデザイナーは、ローコードのApp Builderを利用できます。

アイデアから1分足らずでコードへとたどり着く方法をご覧になりたい方は、今すぐデモにお問い合わせください。または、Sketchのベクターデザインを使用可能・テスト可能・更新可能なAngularコードへと変える短い動画をご覧ください。

出典

1. Gartner, “Technology Insight for Digital Product Design Platforms,” November 24, 2020, Brent Stewart, Van Baker, Magnus Revang
2. Gartner forecast, February, 2021