2022年にローコードを超えて - Indigo.Design App Builder ホワイトペーパー

デザインとプロトタイプをコード生成で簡単に統合する

ローコードへの移行はここ数年で加速しており、2030年までに年平均成長率(CAGR)31.3%に達すると予測されています(Research and Markets)。しかし、どんなツールもそうですが、個人やチームが新しいものを導入するのは容易ではありません。デザイナーは使い慣れたデザインツールに親しんでいる一方、開発者はGitHubやお気に入りのIDEを使って作業をしています。

しかし、もし既存のツールをそのまま使いながら、その上にツールとプロセスを大幅に改善する軽量なレイヤーを重ねることができるとしたらどうでしょうか。

私たちは、デザインからコードへのレイヤーが、既存のデザインツール(SketchやFigma)と統合される一方で、開発者はVisual Studio Code、GitHubなど、自分たちが選んだツールを使い続けられるべきだと考えています。このタイプのツールは、AngularやBlazorでのコード生成を統合し、市場初のWYSIWYG IDEによって、デザイナーと開発者のより迅速なコラボレーションを可能にします。

この白書では、以下について解説します。

• なぜ開発チームは業務過多に陥っているのか

• なぜローコードツールでは不十分なのか

• アジャイルとデザインスプリントを使って、デザインからコードへの統合をプロセスに組み込む方法

• なぜ今こそデザイン・トゥ・コードツールの時代なのか

開発チームは業務過多に陥っている

開発チームは何年もの間、積み上がったバックログに悩まされてきました。私たちは、2022年以降、より多くの組織がローコード/ノーコードツールを採用し、「市民開発者(Citizen Developers)」の台頭が見られると予測しています。最近のApp Developer Magazineのトレンド記事では、一般の市民開発者が使うツールがアプリ開発のさまざまな側面を担うようになると述べられています。これは、すべてのエンタープライズアプリを指すわけではなく、複雑なアーキテクチャを必要としないアプリや、厳格なSLAを伴うミッションクリティカルとはみなされないアプリを指します。同記事は次のように述べています。

デザインからコードへ移行する際に、コストと時間の面で最大の節約機会を得る秘訣は、「コード化」し、そこからカスタマイズできるような、よく練られたUIパターンやUIコントロールのセットを活用することにあります。

これは、App Builder™のようなデザイン・トゥ・コードツールにぴったり当てはまります。UIコントロールや一般的なUIパターンにマッピングされた明確なデザインシステムがあれば、そこに大きな時間の節約を見出すことができます。デザインがそのままコードであるならば、デジタルリーダーが直面する二つの大きな課題に同時に対処していることになります。

ローコードツールでは不十分

これまで、テクノロジーリーダーたちは過去のブラックボックス型/コード生成型アプリケーションに「痛い目」に遭ってきました。1990年代から2000年代にかけて、多くのORM系ツールが約束したものは、実際には「期待過剰・実現不足」以外の何物でもありませんでした。コード自体は本番運用に耐えうるものであった可能性が高い一方で、編集することができず、再利用もできず、自動テスト製品にも適合しませんでした。今日、この過去の遺産が、本番運用可能でテスト可能なコード出力によって本当にアプリ配信を加速できる、より現代的なツールの足を引っ張っています。

最近のInformation Weekの記事で、私たちはローコードや市民開発者は誕生以来進化を遂げてきたものの、まだ成長の余地があると述べました。ローコード、ノーコードプラットフォームは、本当の意味で進化する必要があります。特に、ローコードは、消費者向けアプリケーションだけでなく社内向けアプリケーションを提供するうえでも、UXやデザインの専門家からの何らかのインプット(およびUXプロセス)を取り入れる必要があります。たとえコードが本番運用可能でテスト可能であったとしても、アプリケーションの体験がユーザーの期待に応えられなければ、その取り組み全体が失敗に終わってしまいます。

もしデザインチームが、通常の反復的なデザインプロセスの一環としてユーザーやステークホルダーを巻き込んでおり、それが開発チームが利用可能なコードによって得られる柔軟性と組み合わさっているのであれば、こうしたツールに対する見方は変わっていくでしょう。テクノロジーリーダーが――例えば――典型的なアプリ開発サイクルにおいて数週間から数ヶ月の時間節約という価値を目にすれば、デザイン・トゥ・コード、ローコードツールの採用は容易な意思決定となります。

私たちのプラットフォームは、UIプロトタイピング、デザインシステム、ユーザーテスト、アプリ構築、コード生成を統合しており、たとえ絶対位置指定されたコンポーネントを持つ一連のSketchのアートボードであっても、人工知能によるヒューリスティクスを通じて適切なWebレイアウトへと変換されます。このような複雑な問題がツールによって首尾よく解決されるにつれて、これらのツールへの信頼と依存はさらに高まっていくでしょう。GartnerやForresterの過去の調査を見ると、今後5年でローコードがソフトウェア構築のより主流な選択肢になっていくことがわかります。ユーザーエクスペリエンスデザイン、ユーザーテスト、そしてコード出力という観点から、より良い体験をより速くステークホルダーに届けようとする企業が増えている以上、テクノロジーリーダーがこのローコードの潮流に逆らうのは難しくなるでしょう。

デザインからコードへの統合をプロセスに組み込む

どんなツールもそうですが、個人やチームが新しいものを導入するのは容易ではありません。しかし、もし既存のツールをそのまま使いながら、その上にツールとプロセスを大幅に改善する軽量なレイヤーを重ねることができるとしたらどうでしょうか。私たちのCode Magazineの記事「Eliminating Waste During Designer to Developer Handoff」では、「反復的デザインスプリント」という考え方を取り上げ、このプロセスをどのようにご自身の業務に組み込み、App Builderのようなツールを使ってデザインスプリントでのコラボレーションを支援し、最終的に本番アプリケーションで使用できるコードをデザインから得られるかについて解説しています。

デザインスプリントとは、新しい製品、サービス、機能を市場に投入する際のリスクを軽減することを目的として、デザイン思考を用いる時間制約付きの5段階プロセスです。私たちはこれをさらに一歩進め、このプロセスをアジャイル開発プロセスにおけるスプリントそのものとして捉えています。目標は、課題に対処し、仮定を検証し、プロトタイプを作成し、開発プロセスより一歩先を行きながら、機能やエピックについてユーザーテストを行うことです(これは2週間、3週間、あるいはそれ以上の期間のスプリントとしてタイミングを設定することもできます)。つまり、アジャイルという言葉はアプリケーション開発者だけにとどまらず、デジタル製品チーム全体に及ぶということです。App Builderは、既存のツール(SketchやFigmaといったデザインツール)にこのレイヤーを追加し、ユーザーテスト、コラボレーション、開発者向けのWYSIWYGを付加する一方で、開発者はVisual Studio Code、GitHubなど自分たちが選んだツールを使い続けることができます。

実際には、デザインチームは反復的にデザインを作成し、ステークホルダーからのフィードバックやユーザーによるデザインテストの結果に基づいて変更を加えていきます。ユーザーテストを伴う反復的なデザインは、開発者よりも1スプリント先行してデザイン活動を行うことで、アジャイルプロセスにうまく組み込むことができます。スプリント1の間、デザインチームは最初の機能セットをデザインし、ステークホルダーからフィードバックを得て、迅速にユーザーとともにデザインをテストし、デザインを反復します。ユーザビリティテストは、低忠実度のプロトタイプを使って迅速に実施できます。開発チームは、その後のスプリントで、ユーザーテスト済みの最終デザインに取り組みます。この、デザイン用と開発用という2トラックのスプリントプロセスは、標準化されたツールと堅実なデザインシステムと組み合わさることで、成功する成果を保証します。

デザイン・トゥ・コードツールの時代は今

アプリケーションは真空の中で作られるわけではありません。複数のステークホルダー、顧客を含む反復的なデザインプロセス、効果的なユーザーテスト、そしてシームレスなコラボレーションこそが、勝利する製品を生み出します。しかし、7 Things Developers Need Designers to Knowで指摘されているように、「開発者への需要の高まり――しかし広く知られる技術人材の不足――は、開発者とデザイナーの役割、そして両者の力学を根本的に変えつつあります。かつてデザイナーは美しいインターフェースを構想することのみに責任を負っていましたが、今ではユーザーのためのフロントエンドUI/UX体験全体を定義することがしばしば求められています。そして、彼らは業務過多の開発者たちへの直接のゲートキーパーであるため、開発への引き渡し前に、余計なコーディングや不明瞭さにつながりかねないものを取り除くうえで極めて重要な存在なのです。」

テクノロジーリーダーとして、プロセスだけでなく、コラボレーションとコード出力を改善できるツールに目を向けることが重要です。開発者の採用は難しく、デザイナーはWeb開発やWebレイアウトの専門家ではありません。ツールがこうした複雑さを取り除き、かつて数週間から数ヶ月かかっていたことを、数分から数時間で実現できるようにします。

App Builderを使えば、デザインからコードへのアプリ制作を加速できます。あなたのチームはイノベーションと市場投入までの時間を速め、反復的で時間のかかる単調な作業を削減できます。App Builderは、UIプロトタイピング、デザインシステム、ユーザーテスト、アプリ構築、コード生成を統合したデジタルプロダクトデザインプラットフォームであり、デザインの引き渡しをなくし、コストのかかる手戻りを削減することで、真のUXデザインと開発のコラボレーションを実現します。

クラウドベースでWYSIWYGなApp Builderを使えば、開発者はSketchやFigmaのファイル、あるいは構築済みのテンプレートを実際のUIコンポーネントに素早くマッピングし、そのデザインを実際のコードとして即座にプレビューし、AngularまたはBlazorで本番運用可能なコードを生成して、GitHubへアップロードしたり、お気に入りのIDEへダウンロードしたりすることができます。