See how Stencil fits into the entire Ionic Ecosystem ->
Stencil is part of the Ionic Ecosystem ->

デザインシステムとは?

デザインシステムは、UIコンポーネントと明確に定義された視覚スタイルで構成され、コード実装とデザインアーティファクトの両方としてリリースされます。 すべての製品チームに採用されると、よりまとまりのあるカスタマーエクスペリエンスが生まれます。

デザインシステムはいくつかの側面で構成されています。

コンポーネント

コンポーネントは、多くのプロジェクトで再利用できるように設計されたスタンドアロンのUI要素です。 その目標は、さまざまなユースケースを可能にするのに十分な抽象性を保ちながら、1つのことをうまく行うことです。 開発者は、それらをビルディングブロックとして使用して、新しいユーザーエクスペリエンスを構築できます。 主な利点はすぐに明らかになります。各コンポーネントを使用するたびに、コアの設計と機能について心配する必要がないということです。 例には、ボタン、リンク、フォーム、入力フィールド、およびモーダルが含まれます。

パターン

パターンとは、コンポーネントの意見のある使用法です。多くの場合、標準化されたユーザーエクスペリエンス(UX)を作成するために、複数のコンポーネントが組み合わされます。それらの主な利点は絡み合っています:UXと開発者エクスペリエンス(DX)。パターンを実装した後、ユーザーはアプリケーションをよりよく理解し、タスクをより速く実行できるようになります。開発チームがコンポーネントを一緒に使用する適切な方法を理解すると、ソフトウェアアプリケーションが使いやすくなります。例としては、システムへのデータの保存、フォームからのデータのキャプチャ、データのフィルタリングと分析などがあります。

ビジュアルランゲージ

一体感のある企業ブランドは、顧客の心の中でその価値を強化します。デザインシステムのコンテキストでは、これは、色、タイポグラフィ、アイコンなど、視覚スタイルのさまざまな側面を定義することを意味します。一次色、二次色、三次色を定義すると、アプリケーションが目立ち、よりユーザーフレンドリーになります。適切なタイポグラフィにより、ユーザーがアプリの使用中に気を散らされることがなくなります。最後に、アイコンは製品へのエンゲージメントを高め、視覚的に「ポップ」にします。

デザインアーティファクトとコード実装

デザインシステムのコンポーネント、パターン、視覚言語を活用することで、デザイナーはUIワークフローを表すデザインアーティファクトを作成できます。開発者は、アーティファクトをコードを使用して設計を実装するためのガイダンスと呼びます。

デザインシステムの価値

デザインシステムが整っていると、その真の価値が明らかになります。製品開発チーム全体が解放され、顧客の問題の解決と価値の提供という最も重要なことに集中できます。さらに、チームが並行して作業し、同じUI要素を何度も再作成することを回避することは、市場投入までの時間の増加とコストの節約という点で、実際のプロジェクトに影響を与えます。

デザインシステムにより、プロジェクトチームはより適切に連携できます。設計者は、ソフトウェアアプリケーションのベストプラクティスの一元化された「真実の源」を定義し、製品組織の誰もが参照できるようにします。開発者は、アプリケーション検索やデータテーブルグリッドなどの一般的なアプリシナリオを構築する方法を再考するために時間を費やす必要がなくなりました。ビジネスが必然的にデザインシステムに変更を加える場合、それらはすべてのプロジェクトに簡単に適用できます。最終結果は、ユーザーにとってより良い製品です。

BackNext
Contributors