アプリの機能を拡張することは、刺激的であると同時に挑戦的でもあります。大規模なユーザー ベースと新機能に対応できる新しいアーキテクチャを構築するには、多くの準備、調査、新しいチーム メンバーの採用、部門間のコラボレーションの管理、およびかなりの財源の投資が必要です。 このジャーニーに着手することを決定する前に、すべてのスケーリングの機会を使い果たしたことを確認してください。  ‍ コストを最小限に抑えながら成長 多くの起業家は、「スケーリング」を「成長」と混同し、この用語を同じ意味で使用しています。コストとリソースを最小限に抑えながら、より多くのユーザーにリーチして収益を増加させるという大きなビジネスの可能性を見逃しています。これを実現する 1 つの方法は、デザイン システムをアプリ開発サイクルに統合することです。 過去数年間でデザインシステムが多くの人気を得たとしても、特にその分野の専門家ではない人にとっては、その概念についてまだ混乱しているようです. それでは、基本から始めましょう。 デザインシステムとは？ デザイン システムとは、デジタル製品の作成時に使用できるデザイン ルール、インタラクション パターン、ガイドライン、再利用可能なコンポーネント、およびドキュメントの集まりです。これは、既存の機能を維持するだけでなく、新しい機能を設計および構築するための基盤を提供する生きたドキュメントです。 その結果、設計者と開発者の間のより良いコミュニケーションが促進され、反復時間の短縮、コストの削減、および設計の一貫性が確保されます。これらは、シームレスなユーザー エクスペリエンスに貢献します。  ‍ システム コンポーネントの設計 すべてのデザイン システムは異なりますが、一般的に、4 つの主要な柱があります。 色、タイポグラフィ、グリッド システムなど、システムのコンポーネントを定義するすべての視覚要素です。これらは、一貫した設計を維持し、コンポーネント ライブラリのプロパティを作成するためのベースとして機能するために、 によって使用されます。 デザイン トークンは、 製品チーム 、アバター、ボタン、バッジ、チェックボックス、日付ピッカー、入力要素、ラジオ ボタン、プログレス バーなど、アプリ インターフェイスの構築に使用されるインタラクティブな要素を再統合します。前述のように、それらは動的にする設計言語要素に基づいた特定のプロパティで設計されています。これらは、  コンポーネント ライブラリは 開発段階のプログラマーにとって特に重要です。 ナビゲーション メニューやフォームなど、アプリ内の共通パスで使用されるコンポーネントとデザイン トークンが含まれます。一般に で実装され、コンポーネントをいつ、どのように使用する必要があるか、およびそれらのさまざまな状態 (ホバー、クリック、トランジションなど) を示します。これにより、アプリのエンド ユーザーに一貫したエクスペリエンスが保証されます。 パターン ライブラリには、 アトミック デザイン手法 設計システムのユーザーがシステムを操作する際に考慮しなければならないすべてのルールと原則です。これは、コンポーネントの動作と相互作用を示すマニュアルとして機能すると同時に、新しいメンバーのオンボーディングをより効率的にします。 ガイドラインは、 基礎について説明したので、多くのリソースを投資することなく、デザイン システムを活用してアプリをスケーリングする方法を見てみましょう。  ‍ アプリの機能拡張コスト 製品機能の開発期限に間に合わないという課題に直面し、利害関係者や投資家の期待に応えるために解決策を見つける必要がある、初期段階のテクノロジー B2C 企業の例を考えてみましょう。 同社の製品チームは、製品所有者 1 名、デザイナー 1 名、開発者 (フロントエンドとバックエンド) 5 名、品質保証 1 名で構成されています。 意思決定者がこれを実装するために通常検討する可能性のあるシナリオをさらに調査し、各オプションのコストとリソースの割り当てをカバーします。 ‍  ‍  : この場合、既存のチーム メンバーに日常業務に加えて新しい機能をサポートするよう割り当て、プロジェクト ベースのスペシャリストを雇って追加のワークロードを処理することができます。これには、新しいメンバーの登録に必要な膨大な時間に加えて、追加の人件費をサポートするためにかなりの財源が必要です。 オプション A これらすべてに代わるものは、設計システムに投資することです。 デザイン システムの開発を専門のデザイン エージェンシーに外注し、システムが整った後にサブスクリプション パスを社内で設計します。 オプション B: オプション A オプション B 追加の労働力 1×UXデザイナー（  )  2 x 開発者 ( ) 平均時給: 49$ 平均時給: 57$ フロントエンド開発者 デザイン事務所・フリーランス（ ただし、料金は代理店の場所と専門知識によって異なります）   分。 $60/時間 プロジェクトの実施期間 - 募集: 分。 1ヶ月（スカウト、面接、書類作成）  - オンボーディング: 2 週間 サブスクリプション パスの設計: 1 か月 (調査、ワイヤーフレーム、設計、テスト、フィードバック ループ、更新)  - サブスクリプション パス開発: 2 か月 - テストと最適化: 2 週間 - UI/UX エージェンシーの募集とコラボレーションのセットアップ: 2 週間 ・デザインシステム開発：±2ヶ月 - サブスクリプションパスの設計: 1 週間 - サブスクリプション パス開発: 2 週間 - テストと最適化: 3 日間 合計時間 5ヶ月 4ヶ月 追加費用 $40,000  (1 x デザイナー $8,000 + 2 x 開発者 $32,000)  ±2万ドル (設計システムの平均±$60/時間の場合、サブスクリプション パス自体は既存のチームによって開発されるため、追加コストとは見なされません) 上記のシナリオに基づいて、サブスクリプション パスをより迅速に開始するための設計システムの実装について検討を開始する方がはるかに効率的であるだけでなく、これは実際には少なくとも 5 年間は結果をもたらす投資です。 この演習の目的のために、エンドユーザーの支払いのための新しいパスの設計と開発を必要とするサブスクリプション ベースのモデルを実装するために必要な時間とリソースの基本的な分析を提供しました。 デザインシステムの実装は退屈な作業であり、多くの時間とリソースを必要とするという一般的な誤解を変えるために、簡単に理解できる最小限のアプローチを採用することにしました。このため、多くの起業家は導入を先延ばしにする傾向があり、ビジネスを実際に自動化および最適化する機会を失います。 もちろん、この計算はビジネス固有のケースごとに異なるため、起業家はケースバイケースで実際のコストを調べることをお勧めします.  ‍ それでは、成長中の新興企業がデザイン システムを検討すべき理由を詳しく見ていきましょう。  ‍ 設計システムの利点 私たちの経験によると、設計システムを実装すると、フルサイクルのチームで設計と実装の速度が 65% 向上し、作業が 2 週間のスプリントから 10 日から 3.5 日に短縮されました。構築とセットアップには数か月かかりますが、チームがこのアプローチを選択するたびに、素晴らしい結果が得られます.  ‍ デザイン システムの主な利点の 1 つは、スケーラビリティです。すべてのコンポーネントが設計されたら、それらを複製し、特定のニーズに基づいて微調整を行うのは簡単です。 ワークロードとコストの削減 このように、アプリに新しい機能が必要になるたびにゼロから始めるのではなく、チームはデザイン システムの一部を選択し、それらの上に構築することができます。ボタンの外観を決定するのに時間を無駄にするのではなく、ユーザー フローの改善や、コストを削減するだけでなく、実際に追加のキャッシュ フローを生成する問題の解決など、ビジネスのより重要な側面に集中できます。 チーム間のコラボレーションを改善する デザイン システムが整っていれば、デザイナーと開発者は複数のプロジェクトで同じ情報 (UI パターンやコンポーネントなど) にアクセスできるため、より効果的にコラボレーションできます。フィードバック ループと会議で無駄になる無数の時間を削減し、当て推量を排除します。プロセスがより予測可能になり、オンボーディングが容易になります。新しいメンバーがチームに加わるたびに、デザイン システムのドキュメントによってチームの連携が可能になります。 迅速な製品展開 設計システムは、例とガイドラインを提供することで、新しい設計者のオンボーディングにかかる時間を短縮できます。これは、彼らがより迅速に貢献を開始できることを意味し、結果としてチームの結束が高まることを意味します。同じパターンを何度も使用することで、チームを拡大できます。これにより、新入社員のトレーニングに費やす時間が減り、優れた製品の作成により多くの時間を費やすことができます。 このシステムは、開発者が物事の見た目や感じ方を理解するのにも役立ちます。新しい機能を構築したり、既存の機能に変更を加えたりする際にスタイル ガイドを参照でき、美学に時間を無駄にすることはありません。これにより、すべてのプラットフォームとデバイスですべてが一貫して表示されます。 顧客維持率の向上 直感的でよく考えられたエクスペリエンスには、コンバージョンを増やし、顧客ロイヤルティを構築する力があり、長期的には複合的な効果を生み出します。  Nielsen Norman Group は次のように 。「タスクがユーザーの期待に比べて特に簡単に達成できた場合、その経験は製品にプラスの影響を与える可能性があります。ユーザーはその製品を友人に勧め、リピーターになる可能性があります。」 . 述べています 一貫性、より優れたチーム コラボレーション、インテリジェントなリソース割り当てにより、プラットフォームやアプリ内で顧客にシームレスなエクスペリエンスを提供し、効率的な方法で長期的な成長の舞台を整えることができます。 設計システムの採用オプション これらの利点をビジネスに統合する方法についてすでに考え始めている場合は、次の 2 つの導入オプションから選択する必要があります。 カスタムデザインシステムの作成 オープンソースのような既存のものの適応 設計システム プロジェクトを設定し、トレードオフを慎重に評価する前に、組織のニーズを明確に理解することが不可欠です。 オープンソースの設計システムでは満たすことができない特定の要件が組織にある場合、カスタム設計システムを作成することは賢明な投資です。 デザイン システムをテストするには、最も一般的なオープン ソース システムのいくつかを確認できます。  最終的な考え アプリケーションの拡張には多くの方法がありますが、設計システムは効率的なスケーラビリティのための堅牢な基盤を提供するため、システム全体の将来を保証するソリューションとなります。それは長期的な利点をもたらすだけでなく、私たちの迅速な計算は、当面の計画にとってさらに賢明な経済的選択であることを証明しています. 設計システムを使用することで、車輪の再発明に費やす時間を削減し、製品全体の一貫性を向上させ、コンポーネントを毎回ゼロから構築するのではなく再利用することでコストを削減できます。   最初に公開された ここで

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story contains new, firsthand information uncovered by the writer.

Let's Design Your App

Portfolio

Hire Me

このオーディオは、ストーリーの元の言語で制作されています。

デザインシステム: アプリを効率的にスケーリングするための鍵

About Author

コメント

ラベル

この記事は

Related Stories

Telegram: クリプト島と本土を結ぶ橋

フロキのヴァルハラがインドのスリランカツアーのアソシエイトスポンサーに加わる

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

Telegram: クリプト島と本土を結ぶ橋

フロキのヴァルハラがインドのスリランカツアーのアソシエイトスポンサーに加わる

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps

デザイン システム: アプリを効率的にスケーリングするための鍵