デジタル製品設計プラットフォーム完全ガイド
デジタル製品設計プラットフォームは、デザイナーと開発者のプロセスの主要な要素をすべて統合することで、アプリ開発を劇的に加速させます。詳しく見てみましょう。
Jason Beres 1min read 近年、デジタル製品を作成するすべての段階を説明するための新しくて興味深い製品コンセプトが登場しています。それが_デジタル製品設計プラットフォーム_です。このブログでは、このデジタル設計ツールの新しいカテゴリーについて詳しく見て、SketchやFigmaなどの他の設計およびプロトタイピングツールとどのように異なるかについて説明します。
デジタル製品設計プラットフォームが何を提供するかを理解するためには、まずデジタル製品設計プロセス全体を広く見ることが役立ちます。このプロセスの主要な部分は何ですか、そしてそれらはどのように対処されていますか。その後、デジタル製品設計プラットフォームが進むにつれて果たすと予想される重要な役割をより詳しく見ることができます。
App Builderを試す App Builderを試す App Builderを試す
デジタル製品設計とは
デジタル設計、デジタル製品設計、デジタル製品設計プロセスをGoogleで検索すると、ほとんどの検索結果はモックアップ、ワイヤーフレーム、またはプロトタイプなどの概念に焦点を当てます。最終的な製品設計の成果結果であるコード生成と実際に動作するアプリケーションについては触れられることがあまりありません。
たとえば、Adobeはそのソフトウェア「Adobe XD」を「チームが世界最高の体験を協力して実現するために必要なツールを提供する、強力で使いやすいベクターベースの体験設計プラットフォーム」と説明しています。
WikipediaではFigmaを「ベクターグラフィックエディタおよびプロトタイピングツールで、主にウェブベースであり、macOSおよびWindows用のデスクトップアプリケーションによる追加のオフライン機能が有効になっています。Figmaの機能セットはユーザーインターフェースおよびユーザーエクスペリエンス設計での使用に焦点を当てており、リアルタイム協力に重点を置いています。
そしてSketchは「初期的なアイデアからピクセルパーフェクトなアートワーク、実行可能なプロトタイプ、開発者ハンドオフまで、あなたの全体的な協力デザインプロセスの場所です」と説明されています。
溝を埋める: デザイナーと開発者のハンドオフ
上記の最後の文の最後に組み込まれた_開発者ハンドオフ_というフレーズに注意してください。このプロセスのこの部分はしばしば二番目の考慮事項として扱われていますが、実際には開発チームとの連携はアプリ構築の成功に不可欠です。それは多くの場合、フラストレーション、失われた時間、およびUXのバグやエラーの大きな原因です。
このについては、デザイナーと開発者のハンドオフガイドで詳しく読むことができます。
問題の一部は、デザイナーがUIに行うほど、彼らは開発者に伝達する必要があるということです。したがって、たとえばSketchデザインファイルを引き渡して、開発者にそれを実行させるだけでは不十分です。デザイナーは、すべての動く部分をどのように配置、間隔、スタイル、色付け、操作する必要があるかを説明する設計仕様を提供する必要があります。これがアプリが最終的にピクセルパーフェクトに仕上がることを確保するための唯一の方法でした。それでも、開発者がそのIDEの中に入ると、かなりの実装作業が必要です。
全体を統合する: デジタル製品設計プラットフォーム
デジタル製品設計プラットフォームは、デザインおよび製品完成アプリケーションを作成するために必要なすべてのステップを含む「力の乗数」として機能する単一のプラットフォームを提供します。画面設計、ユーザーフロー、プロトタイピング、ユーザーテスト、コラボレーション、アプリ構築、コード生成、および設計システム。図で見ることができるように、特定のステップはデザインチームに属し、他のステップは開発チームに属しています。プラットフォームの価値は、統合されたプラットフォームであるため、ほとんどのアプリ構築の取り組みを引きずるサイロとハンドオフを排除することです。
デジタル製品設計プラットフォームは、ピクセルパーフェクトなコード生成出力をもたらします。ベクターベースの設計から使用可能なHTML、CSS、およびTypeScriptに進み、開発者が設計コンプを解読して作業可能なコードを作成する必要を排除します。
デジタル製品設計プラットフォームの基礎は、設計システムです。設計システムは、簡単に言えば、UXパターンとブランドスタイルガイドの意図的なインベントリを表し、その後、ソフトウェアアプリケーションの構築のために再利用またはコンテキスト化できる一致するソフトウェアコンポーネントとして実現されます。これは、ローコードを使用してアプリケーションを構築するときの製品チームの単一の情報源として機能し、デザインと開発の間の協力契約を表しています。
デジタル製品設計プラットフォームの要素
デジタル製品設計プラットフォームを広く定義する要素は以下のとおりです。
画面設計
画面設計には多くのことが関わっています。これはディスプレイ上のユーザーインターフェースの図形設計とレイアウトを指します。レイアウトはインターフェースの視覚的なコンポーネントをサポートする構造です。画面設計では、ユーザーとの対話をできるだけシンプルで効率的にすることで、ユーザビリティとユーザーエクスペリエンスを最大化することに焦点が当たっています。
このトピックの詳しい概要については、ユーザーインターフェース設計（UI）のレイアウトの基礎をお読みください。
一部のデジタル製品設計プラットフォームは、SketchやAdobeなどの設計プログラムからUI設計を統合したり、プロセスをスピードアップするのに役立つ事前構築されたテンプレートを提供したりすることでこのステップを簡素化することに注意してください。
重要なのは、Sketchファイルであろうと事前構築されたテンプレートであろうと、ファイルはプラットフォームの設計システムおよびUIコンポーネントと統合されていることです。これはアプリ構築の劇的な加速に不可欠です。実際のUIコンポーネントの周りに構築されたデザインにより、開発者はハンドオフや設計者との長い行き来がなくてもコードを生成できます。
ユーザーフロー
ユーザーフローは、製品を使用するときにユーザーが取るパスを表示する図です。ユーザーフローは製品を通じたユーザーの動きを示し、ユーザーが取る各ステップ（多くの場合、エントリーポイントから最終的なインタラクションまで）をマッピングしています。
プロトタイピング
プロトタイプは、作成したいソリューションのモックアップです。すべてのインタラクションと表示をモックアップして、開発者を使用することなく、完全に開発された製品と同じ方法で経験できます。
以下は、ローコードApp Builder™で構築された実際のホーム予算アプリケーションのプロトタイプです。これには、イメージファイルとSketchアートボードからインポートされたすべてのスクリーンショットが含まれています。見ることができるように、ユーザーフローは、クリックしてドラッグしてホットスポットを作成し、目的地のスクリーンにリンクすることで簡単に作成できます。これは、ユーザーフロー内の他のスクリーンを選択することで簡単に編集できます。スワイプ、長押し、ダブルタップなど、さまざまなトランジションオプションを編集することもできます。
このApp Builderで構築されたプロトタイプは、スクリーンショット間のユーザーフローとユーザーインタラクションを示しています。
ユーザーテスト
既存のデザイン、プロトタイプ、およびアプリが意図したユーザーを効果的にエンゲージしているか確認する唯一の方法は、それらをテストすることです。ユーザーテストフェーズでは、実際のユーザーでテストし、洞察を集めて、コードを書く前にユーザビリティを最適化でき、アプリが最高のUXで輝くことを確保できます。
コラボレーションと共同編集（HTML、CSS、コードマークアップ）
これは、デザイナー、製品マネージャー、および開発者が、デジタル製品チーム全体の精度、品質、コミュニケーション、およびイノベーションを促進するために、リアルタイムの視覚的なコラボレーションと資産の共同編集を行うフェーズです。図は線形フローでこのフェーズを示していますが、これは非常にインタラクティブなフェーズであり、頻繁に発生する必要があることに注意してください。設計のさまざまなポイントで、チームメンバーは開発チームとのコラボレーションを開始することができます。たとえば、完成したアプリケーションでスクリーンレイアウトのアイデアがどのように見えるか、またはコード生成後のユーザーフローがどのように感じられるかなどの質問に関します。
アプリ構築（ローコードツール、データ統合）
デジタル製品設計プラットフォームで最も求められている機能の1つは、開発チームがアクセラレートできる使用可能で本番対応でテスト可能なコードの実際の構築です。デジタル製品設計プラットフォームに関する物語の多くは、プロセスの「設計段階」（プロトタイピング、ユーザーテスト、ドキュメンテーションなど）に関するものですが、実際に使用可能なコードの取得は、アプリ開発プロセスで最も時間と費用がかかります。以下のような機能を含むツールを使用することで、チームはこの費用を削減できます。
- デザイナーがプロセスで使用するようなもの（Sketch、Figma、Adobe XDなど）に類似した開発者向けIDE。
- 設計システムおよびUIキット内のUIコンポーネントとパターンにマップする豊富なUIコンポーネントのツールボックス。
- 設定/プロパティエディターパネルは、コンポーネントを簡単に設定し、データバインディングプロパティを設定するために使用されます。
- 単一ページアプリケーションを構成するマスターページとサブページの階層表示、および画面設計の移動可能なアウトラインと共に完成しています。
- 任意のRESTデータソースまたは他の一般的なデータソースに接続できるデータソースオプション。
- 組み込みテーマと、必要なカスタマーまたはブランドエクスペリエンスに合わせるためのカスタムテーマビルダーを含むテーマオプション。
効果的なアプリ構築体験の鍵は、デジタル製品設計プラットフォームを使用するさまざまなチームが、愛する非常に生産的であるアプリを使い続けられるようにすることです。これは、このようなプラットフォームが、静的なスクリーン作成と限定的なプロトタイピングに適したベクターベースの設計ツールだけでなく、開発者がコードを書くのに最も快適に感じるVisual StudioやVisual Studio Codeなどの開発者ツールともよく統合される必要があることを意味しています。
コード生成（ソースコントロールとコードエディタ）
画面設計とプロトタイプを本番対応プレゼンテーションレイヤーコード（HTML/CSS/JavaScriptなど、ReactおよびAngularを含む）に変換します。
App Builderはどのようにしてデジタル製品設計プラットフォームですか
Infragisticsがこの新しいプラットフォームコンセプトにもたらし、他のプラットフォームと区別する主要な属性の中には、UIツールキットとUIコンポーネントの開発と展開に関する30年の経験があります。Fortune 500企業の多くが、毎日リアルタイム金融取引を処理し、大規模インフラストラクチャの変換をサポートするか、ストリーミングIoTデータを処理するため、毎日当社のグリッドとチャートに依存しています。
私たちは、使用可能で、デバッグ可能で、時間の試練に耐えることができるクリーンで本番対応コードを生成しています。そして、デザインツール互換性、設計システム、UIキット、プロトタイピング、ユーザーテスト、および100%本番対応コード生成を含むパッケージ全体を取得できます。
App Builderの主な利点の概要をまとめると：
- このプラットフォームは、Figmaへの完全なサポートを備えたSketchなどのデザイナーのお気に入りのベクター設計ツールと連携しています。
- これにより、デザインと開発チーム、利害関係者、および顧客とのデザイン反復の協力が有効になります。スレッド化されたコメントでプロトタイプのいずれかを保護するワークスペースを使用します。
- リアルタイム分析を使用した無制限のリモートおよび非管理ユーザーテストが含まれています。
- デザインからCSS、色、およびサイズ/位置コードを取得するための検査ツール（Zerinと同様）を提供します。
- Angular用のコード生成を備えた完全なWYSIWYGアプリ構築エクスペリエンス、そして間もなくReact、Webコンポーネント、およびBrazorとともに提供します。
別の視点については、ホワイトペーパー「デジタル製品設計プラットフォームが必要な4つの理由」をご覧ください。
