UIキットの完全ガイド：メリットとデメリット
UIキットとは何で、どのように使うのか？UIキットの例を見つけ、当社の最新記事でメリットとデメリットについて学びましょう。
Jason Beres 1min read アイデアを本格的なアプリに実現する際に最も一般的な課題は以下の2つです。
- レスポンシブである必要があります。
- 素晴らしく機能的なUIデザインを備えている必要があります。
さらに課題を増やすと、チームは以下を行う必要があります。
- 厳しい期限に対処する。
- 厳しい予算内に収める。
- 部門間のマルチチャネルコミュニケーションをナビゲートして、プロジェクトの進捗について最新の情報を保つ。
呆れ返ってしまいませんか？
蓄積するカオスに対処し、特にデザインからコードへのプロセスと説得力のあるUXを提供するための1つの方法は、プロセスにデジタル製品デザインプラットフォームを追加することです。
具体的にはどのようなメリットが得られますか？
これらのプラットフォームの重要な部分は、プロトタイピング、ユーザーテスト、デザインからコードへのプロセスだけでなく、デジタル製品を構成するデザインシステムの基礎となるUIキットです。
App Builderを試す App Builderを試す App Builderを試す
そしてこれらすべてが素早く起こる一方で、技術的な専門家と創造的な思考を持つ人々は待機している状態ではいられません。絶えず進化するデジタル変革に対抗するために、ソフトウェア製品チーム内でより良い実践を確立し、アプリケーションの設計と開発プロセスを加速させなければなりません。
UIキットとは何か？
UIキットは、組織のデザインシステムの全側面を含む事前に構築されたコンポーネントとグラフィックファイルの包括的なセットです。これはアプリデザインの構成要素を規定するガイドラインを示しており、以下を含みます。
- UIコンポーネント
- UIパターン
- スクリーンテンプレート
- アイコノグラフィ
- フォント
- カラーパレット
時間を節約し、すべてのアプリデザイン全体で標準を持つことを目標とするUIキットは、スクリーン作成を合理化し、開発サイクルを加速させます。よく設計されたUIキットには、パターン、色、フォントの幅広いオプションが含まれており、さらなるカスタマイズと、対話型アプリをこれまで以上に高速に構築するための完全なコード生成が可能です。
UIキットが出現し、着実に必須になってきた別の理由は、UIキットがUIコンポーネントセットと組み合わせることで、設計者と開発者の間のギャップを埋めることができるからです。長い間、創造的な専門家と技術的な頭脳は異なる領域を占拠し、運営していたようです。しかし、デジタル変革プロジェクトをより迅速に提供することへの経営の焦点とともに、実際のUIコンポーネントの双子を持つUIキットの必要性が不可欠になります。これは本当にデジタル変革プロジェクトを加速させ、チームはリアルタイムの視覚的コラボレーション、シンプルでありながら創造的なスクリーン設計アプローチ、より高速なコード生成、プロトタイピング、1つの環境内のすべてのユーザーテストを許可されます。設計されたものと配信されたものの不一致が消えます。
様々な用語で話し、通常は異なるペースで作業し、異なるツールと技術を使用する製品チームが多い、ペースの速いテック業界では、UIキットは月曜日の朝の最初のコーヒーをすすったような気分になります。これは、重い作業のストレスを減らすことを約束するものです。このような設計と開発のアクセラレーターは、コスト最適化と開発時間短縮をもたらすだけでなく、次世代の開発環境も作成します。
UIキットの使用方法
UIツールの使用はかなり簡単で、すでに習得したスキル以外の特定のテクニカルスキルセットは必要ありません。通常、UIキットを使用すると、ビジュアルビルダーを使用してアプリを設計・開発できます。様々なコンポーネントとテーマ、データソースなどを含むツールボックスがあり、これがデザインの組み立てを支援し、開発を継続し、完成後に本番対応コードを生成するのに役立ちます。CSSを記述したりマークアップ言語を使用したりすることなく、すべてが可能です。
Sketchで Indigo.Design UIキットを使用するには、最初のステップはデザインシステムを新しいライブラリとしてSketchにダウンロードしてインストールすることです。これがどのように機能するかを理解するために、以下をお読みください。
- デザインシステムをダウンロードします。Indigo.Designにログインし、「スタートガイド」を選択してから、この画像でハイライトされたダウンロードボタンをクリックします。
Indigo Design Systemは、ページセクションで26ページを含むSketchファイルを含有し、以下のように分類されます。
- スタイリングページ：マテリアルアイコン、色、タイポグラフィ、標高、イラストレーションなど、すべてのスタイリングアセットは上部の5ページに含まれています。
- コンポーネントページ：デザインのアイデアをレイアウトするための広大なコンポーネントセット。Sketchの挿入メニューで利用可能な様々なプリセットとSketch UIの右パネルで設定可能な状態とレイアウトのオーバーライドを通じて、Ignite UI for Angularおよびコード生成エンジンと互換性のあるレイアウトを作成できます。
- パターンページ：コンポーネントは生産的なアプリケーション設計のための意味のあるパターンを形成し、残りのページに渡って見つけることができます。
- 次に、MacでSketchアプリを開き、AppleメニューからSketchアイテムをクリックして、環境設定を選択します。
- ダイアログで、ライブラリタブを選択して、**ライブラリを追加…**をクリックします。
- ライブラリをダウンロードしたフォルダに移動します。
- それを選択して、開くをクリックします。
- 環境設定ダイアログのリストに表示されていることを確認し、チェックされていることを確認します。
上の画像では、ライブラリがSketchクラウドにも表示されていることに気付いているかもしれません。別の方法として、Sketch 57以降を実行している場合は、Sketchのこのメカニズムを使用できます。セットアップは非常に簡単で、Indigo.Design Sketchファイルを開いてSketchクラウドに保存するだけです。 Indigo.Designをクラウドライブラリとして設定する方法の詳細な説明は、このMedium記事で見つけることができます。ライブラリが正常に追加されると、SketchのSketchの記号セクションに挿入メニューに表示されます。
これで、Indigo Design SystemとSketch用のUIキットを使用して新しいアプリケーションを作成できます。
Sketchでは、Sync to Indigo.Designプラグインを使用して、デザインをプレビューし、対話型プロトタイプを作成し、コードをレビューし、デザインから直接本番対応アプリ全体を生成することができます。
UIキットの利点
1. デザインからコードまでをカバーする1つのプラットフォーム
ビジネスアプリで作業する際の最も厄介なことの1つは以下の通りです。
- 機能不全の労働分割を排除する。
- 個々のタスクを統合するエコシステムを確立する。
- 事がより迅速に起こるよう相互理解を構築する。
多くの設計者はJira（またはプロジェクト追跡/バックログ追跡ツール）を通じてユーザーストーリーを確認して、開発者のように考え始め、特定の設計機能が実際には300行の余分な不要なコードに過ぎないと見なされた理由をより良く理解するようになります。そしてその逆。ソフトウェア開発者は、InVisionのようなツールのおかげで、設計者の思考で プロジェクトにアプローチします。そしてこれはそれぞれがコンポーネントとパターンをある程度分解し、同僚の仕事を理解するのに役立ちますが、それは時間がかかり、チームは別のままです。
ここはUIキットが輝く場所であり、具体的には デジタル製品デザインプラットフォームのコンテキストで使用されるUIキットです。彼らはオープンな文化と単一の真実のソースを作成し、設計者と開発者の両方が同じオンラインワーキング領域に住むことを許可します。Covid-19パンデミック後、これは世界中のほぼ全員がリモートで作業し始めたため、非常に重要になってきました。ある意味では、UIの設計と開発のアクセラレーターは、チームが一緒に作業し、フィードバックを与え、変更と進捗を監視し、製品を構築する「マルチプレイヤー」の必要性に対応しています。
チームは1つのプラットフォームでタスクを実行することができます。ブレーンストーミング、設計、ハンドオフの配信、プロトタイピング、バージョン管理、コード生成からユーザーテストと通信まで。設計のアイデアの背景を理解し、コードをレビューすることもはるかに簡単になり、日々のタスクの完了がはるかに簡略化されます。そして設計者はアイデアをより簡単に頭から出してアーティキュレートし始めることができ、エンジニアはアプリケーションのソースコードをリアルタイムでプレビューできます。
2. ワイヤーフレーミングステージは廃止。ワイヤーフレーミングステージ万歳！
各プロジェクトはワイヤーフレーミングを通過します。そしてプロセスがページレイアウト、ユーザーフロー、情報アーキテクチャなどのテスト間を行ったり来たりするため、理想化から開発への移行を本当に遅くします。速い速度のテクノロジー世界では、SPEEDが何もかもであるため、これは実際に解決する必要があります。
時には車輪を再発明するために時間を無駄にする必要はなく、特定の実践をセットアップの既製オプションや複製可能なワイヤーフレームに置き換える方がはるかにコスト効率が良く、時間効率が良いでしょう。
優れたUIキットを使用すれば、ワイヤーフレーミングはもはや別のステージとして必要ではありません。これらのツールは、全体的なレイアウトをマップアウトし、概念を早期にテストするための事前設計されたブロックを提供することで、プロジェクトを加速させることができます。さらに、アプリが全般的にどのようなことを伴うかについて、より現実的な感覚を与えます。
3. 再利用して削減（時間、お金、エネルギー）
設計者の視点から、アイコン、フォント、または他の詳細なパターンを作成する場合、繰り返し使用するか、必要に応じてどこでも変更できます。これには、最新の変更に応じてコードを書き直す必要がある開発者にも適用されます。
類似したプロジェクトまたは単純なプロジェクトのコンポーネントを再利用するというアイデアは、特にこれを支援するUIツールがある場合、近年ますます魅力的になってきています。設計者は事前に構築されたコンポーネントから選択するために使用でき、開発者はより簡単に変更をフォローアップし、エラーのないコードを生成できます。
調査2では、2020年デザインツール調査、UX Toolsは以下を強調しています。
「2019年に回答者の約20%がデザインシステムを使用していないと報告しましたが、その数は2020年には9%に低下しました（これはより人気のあるUIツールの機能セットの増加に起因する可能性があります）。」
調査からの主要な洞察は、3500人の回答者間でデザインシステムの使用が増加したことも示しています。
- Adobe XDでは2019年の1%から2020年の11%に増加
- Figmaでは2019年の26%から2020年の47%に増加しました。
UIキットがより高度で機能豊富になるにつれて、新しい複雑なUIパターン、ボタン、ヘッダー、ラベル、ドロップダウンメニューをゼロから作成する負担を排除します。それ以外の場合、多くの時間を消費しているでしょう。本質的に、設計者は必須の視覚コンポーネントを選択し、コピー/ペーストツールで共通のプロジェクトの事前構築されたパターンを引き出します。必要に応じて、カスタマイズを追加して、素晴らしいアイデアを一致させたり、特定の設計の目的のスタイルを達成したり、プロジェクトを開発ステージに移動したり、最後に、クライアントのニーズに対応したりできます。ライブラリとして作業全体を保存するオプションでは、要素、共有スタイル、パターンは他の複数のプロジェクトで簡単に再利用できます。そして彼らはすでに以前のアプリで実装されているため、テスト、エラー、壊れたコードは大幅に削減されます。
4. スターターレイアウト、美しいテンプレート、学習の場
優れたUIキットについての事実は次のとおりです。彼らは、アプリの設計と構築の方法を再定義しています。このようなツールを使用すると、アプリは事前に構築されたテンプレートと機能的なレイアウトでレコード時間で作成でき、すべてがブランディングとスタイリングガイドラインと一致して、アプリが管理層に素晴らしく見え、機能するようにしますが、もっと重要なことに、毎日それを使用するエンドユーザーに。
これはスピードと効率性に関する方法です。事前定義されたコンポーネントを備えており、UIテンプレートとレイアウトは調整可能で、必要に応じて簡単にカスタマイズできます。言い換えれば、あなたは基地と実験の自由を得ます。そうしている間、設計者と開発者の両方は、類似のコンポーネントを設計および構築する方法を学ぶことができます。彼らは要素、フォント、色、アイコンの構造の内部を見てもらう方法を提供され、彼らのために機能する設計と開発の実践を決定することができます。
5. ブランドの一貫性と「about-us-page-vers-5-2-final-final-version.jpg」はもう不要
最近では、機能と一貫性の維持に焦点を当てており、単に作成するだけではありません。しかし、多くのタスク（アイコンの作成、ページレイアウト、ボタン、モックアップの配信、フレームの飼育など）をやりくりしている間、一貫性と機能性が失われる可能性があります。特に矛盾したファイル、バージョン管理、ファイル管理に対処する場合。
設計と開発UIアクセラレーターを使用すると、ブランドの一貫性を構築および保持するのに役立つ単一の真実のソースがワンクリックオプションを備えています。
事前に構築された機能、テーマ、タイポグラフィ、色の配列から選択すれば、アプリ全体でコーポレートブランディングを構築および保持することがはるかに簡単になります。さらに、変更を加える必要がある場合、画像、アイコン、ページの多くのファイルとバージョン全体を掘る必要はもはやありません。更新はいくつかのレイヤーのみを変更することで迅速に行われます。
UIキットの欠点
利点と欠点を比較すると、UIツールの利点は欠点を上回るように見えます。しかし、いくつかのメモに強調する必要があります。
1. パーソナライゼーションのためのわずかなスペース
カスタマイズはこのようなキットを使用する場合に利用でき、フォント、色、レイアウトなどの機能に適用できます。しかし、いくつかの制限があります。目標がエンドユーザーをユニークさと特定の外観で驚かせることである場合、コンポーネントとスタイルが事前に決定されているため、達成できない可能性があります。それらのすべてに適合した性質により、設計で使用されるアイコンは他のアプリやウェブサイトでも見られる可能性があります。
これは設計全体で一貫性を保つため悪くはありませんが、目標がユーザーエクスペリエンスを区別することである場合、完全な視覚的分化の欠如はデメリットと見なされる可能性があります。それでも、いくつかの要素にカスタマイズを追加するための余地があります。
2. 不完全なキット - 数千の機能…しかしすべて同じ
ほとんどのUIツールキットには多くのコンポーネントが含まれていますが、すべてのツールが設計者と開発者に必要なものを正確に提供できるわけではありません。 数千の機能が含まれているが、異なる色のエレメントセットだけを表す場合、誰も幸せになりません。
3. 高価な月額プラン
時には、豊富にカスタマイズ可能な機能、素晴らしいテンプレート、機能的なレイアウト、インスタントコード生成を取得できます。ただし、特定の価格で。そしてその価格は月額プランで数百ドルまで跳ね上がる可能性があります。最終的に、代わりに節約して創造的および技術的スキルを呼び出してジョブを自分で行う方が良いと判断するかもしれません。
UIデザインと開発を合理化するトップ5UIキット
- Adobe XD UIキット
- Figma UIキット
- Flutter UIキット
- Sketch UIキット
- Indigo.Design用UIキット
- App Builder
上記のUIキットの例は主に設計者の作業を合理化することに焦点を当てていますが、開発チームはまだやや取り残されています。ただし、App Builderは、完全なデザインからコードへのソリューションを提供し、マネージャー、設計者、開発者のための統一されたワーキングプラットフォームとして機能する世界唯一のデジタル製品デザインプラットフォームです。
これは、完全なWYSIWYGデザイン体験を提供する、まったく新しい100%クラウドベースのドラッグアンドドロップツールです。設計、プロトタイピング、ユーザーテスト、アプリ構築、コード生成の合理化を支援する60以上の最適化されたUIコンポーネントが含まれています。それのすべてをカバーしながら、同時に重いデザインハンドオフを排除し、アプリケーション開発時間を80%削減します。
新しいApp Builderでは、設計されたすべてが本番対応のAngular、Blazor、Webコンポーネントコードになります。作成するとすぐに見ることができます。または、アプリの完全なzipファイルを抽出します。
また含まれています：
- 事前構築されたアプリシナリオベースのテンプレートとウェブベースのレイアウトのライブラリ
- ツールボックスでドラッグアンドドロップできる60以上のUIコントロール
- アプリケーション/コンポーネント相互作用：Navigate To、Open/Close、Show/Hide
- マテリアルの事前設定テーマとカスタムテーマ、Bootstrap、Fluent UI
- カスタムテーマのオプション
- SketchおよびFigmaファイルをApp Builderにアップロード
- ライブデータに接続するか、JSONファイルをアップロード
- 完全なコード生成
- インスタントアプリとソースコードプレビュー
- デザイン/デブコラボレーション用のGithubとの統合
Indigo Design Systemが設計者と開発者にどのように力を与えるかについて、さらに多くのことを発見することができます。それをより深く掘り下げたい場合は、App Builderの使用方法に関する手早い概要とヒントを含むYouTube上の有用なビデオライブラリがあります。
- Forrester、より良いUXの正当化のための6つのステップ、2016年12月28日
- UXツール、2020年デザインツール調査、Taylor＆Jordan、2020年12月
