UI キットのガイド: 長所と短所

アイデアをフル機能のアプリに実現する際に最も一般的な問題点を 2 つ挙げます。

1. 応答性が必要です。
2. 素晴らしい機能的な UI デザインが必要です。

これにさらに課題を加えると、チームは以下のことを行う必要があります。

3. 厳しい期限に取り組みます。
4. 厳しい予算に収まる。
5. また、部門間のマルチチャネルコミュニケーションを駆使して、プロジェクトの進捗状況に関する最新情報を常に把握します。

気が遠くなるようなことではないですか?

特に設計からコーディングまでのプロセスと魅力的な UX の提供に関して、蓄積する混乱を抑える 1 つの方法は、プロセスにデジタル製品設計プラットフォームを追加することです。

具体的にどのようなメリットがありますか?

これらのプラットフォームの重要な部分は、プロトタイピング、ユーザーテスト、コード設計だけではなく、デジタル製品を構成するデザインシステムの基盤として機能する UI キットです。

これらすべてが猛スピードで進む中、技術面とクリエイティブ面の両方で何もせずにじっとしているわけにはいきません。絶えず変化し続けるデジタル変革に立ち向かうには、ソフトウェア製品チーム内でワークフローを促進し、アプリケーションの設計と開発のプロセスをスピードアップする、より優れたプラクティスを確立する必要があります。

UI キットとは何ですか?

UI キットは、アプリ デザインを構成する要素のガイドラインを規定する組織のデザイン システムのすべての側面を含む、事前に構築されたコンポーネントとグラフィック ファイルの包括的なセットです。これには次のものが含まれます。

• UI コンポーネント
• UI パターン
• 画面テンプレート
• 図像学
• フォント
• カラーパレット

UI キットは、時間を節約し、すべてのアプリ デザインに標準を設けることを目的として、画面作成を効率化し、開発サイクルを加速します。適切に設計された UI キットには、さらなるカスタマイズのための幅広いパターン、色、フォント オプションと、これまでよりも迅速にインタラクティブ アプリを構築するための完全なコード生成が含まれています。

UI キットが登場し、着実に必須となったもう 1 つの理由は、UI キットと UI コンポーネント セットを組み合わせることで、デザイナーと開発者の間の溝を埋めることができるためです。長い間、クリエイティブ エージェントと技術に精通した頭脳は、別々の領域を占め、活動しているように思われていました。しかし、経営陣がより多くのデジタル変革プロジェクトをより迅速に提供することに重点を置いているため、実際の UI コンポーネント ツインを備えた UI キットの必要性が急務となっています。これにより、デジタル変革プロジェクトが真に加速され、チームはリアルタイムのビジュアル コラボレーション、シンプルでありながらクリエイティブな画面設計アプローチ、より高速なコード生成、プロトタイピング、ユーザー テストをすべて 1 つの環境で実現できます。設計と提供の不一致がなくなります。

製品チームがさまざまな用語を使い、通常はさまざまなペース、ツール、テクニックで作業する、ペースの速いテクノロジーの世界では、UI キットは月曜日の朝に飲む最初のコーヒーのような感覚で、重いタスクを実行するストレスを軽減してくれると期待できます。このような設計および開発アクセラレータは、コストの最適化と開発時間の短縮をもたらすだけでなく、次世代の開発環境も作成します。

UIキットの使い方

UI ツールの使用は非常にシンプルで簡単で、すでに習得した技術スキル以外の特別な技術スキルは必要ありません。通常、UI キットを使用すると、ビジュアル ビルダーを使用してアプリを設計および開発できます。さまざまなコンポーネントやテーマ、データ ソースなどを含むツールボックスがあり、設計を組み立て、開発を継続し、すべてが完了したら本番環境対応のコードを生成するのに役立ちます。これらすべてを、CSS を記述したり、マークアップ言語を使用したりすることなく実行できます。

Sketchで Indigo.Design UI キットを使用するには、まずデザイン システムをダウンロードし、Sketchの新しいライブラリとしてインストールします。この仕組みについては、以下をお読みください。

1. Indigo.Design にログインし、「はじめに」を選択してから、この画像でハイライト表示されている「ダウンロード」ボタンをクリックし、デザイン システムをダウンロードします。

Indigo デザイン システムには、ページ セクションに 26 ページあるSketchファイルが含まれており、次のように分類されます。

• スタイリング ページ: マテリアル アイコン、色、タイポグラフィ、高度、イラストなどのすべてのスタイリング アセットは、上部の 5 つのページにあります。
• コンポーネントのページ:デザインのアイデアをレイアウトするための膨大なコンポーネントのセット。Sketch挿入メニューで利用できるさまざまなプリセットと、Sketch UIの右側のパネルで構成する状態とレイアウトのオーバーライドを通じて、Ignite UI for Angularおよびコード生成エンジンと互換性のあるレイアウトを作成できます。
• パターン ページ: コンポーネントは、生産性の高いアプリケーション設計のための意味のあるパターンを形成し、残りのページ全体に広がっています。

2. 次に、Mac でSketchアプリを開き、Apple メニューからSketch項目をクリックして、環境設定を選択します。
3. ダイアログで、[ライブラリ]タブを選択し、[ライブラリの追加] をクリックします。
4. ライブラリをダウンロードしたフォルダーに移動します。
5. 選択して「開く」をクリックします。
6. ​環境設定ダイアログのリストに表示され、チェックされていることを確認します。

上の画像では、ライブラリがSketchクラウドにも存在しているように見えますが、代わりに、バージョン 57 以降を実行している場合は、Sketchでこのメカニズムを使用できます。セットアップは非常に簡単で、Indigo.Design Sketchファイルを開いてSketchクラウドに保存するだけです。Indigo.Design をクラウド ライブラリとして設定する方法の詳細については、この Medium の投稿を参照してください。ライブラリを正常に追加すると、Sketchの[挿入]メニューの[シンボル]セクションに表示されます。

これで、Indigo デザイン システムとSketchの UI キットを使用して新しいアプリケーションを作成できるようになりました。

Sketchでは、Sync to Indigo.Design プラグインを使用すると、デザインをプレビューし、インタラクティブなプロトタイプを作成し、コードを確認し、デザインから直接、本番環境対応のアプリ全体を生成できるようになります。

UIキットの利点

1. デザインからコードまで、すべてを統括する1つのプラットフォーム

ビジネス アプリを開発する際に最も難しいことの 1 つは、次の点です。

• 機能不全な分業を排除する。
• 個々のタスクを統合するエコシステムを確立する。
• 相互理解を構築することで、物事がより早く進むようになります。

多くのデザイナーは、Jira (またはプロジェクト追跡 / バックログ追跡ツール) でユーザー ストーリーを調べて、開発者のように少し考え始め、特定のデザイン機能が実際には 300 行の余分な不要なコードにすぎないと思われていた理由をより深く理解します。その逆も同様です。ソフトウェア開発者は、InVision などのツールのおかげで、デザイナーの考え方でプロジェクトに取り組みます。これにより、各側がコンポーネントとパターンをある程度分解し、同僚の仕事を理解するのに役立ちますが、時間がかかり、チームは別々のままです。

ここで UI キットが活躍します。特に、デジタル製品設計プラットフォームのコンテキストで使用される UI キットが活躍します。UI キットはオープンな文化と単一の真実のソースを作成し、デザイナーと開発者の両方が同じオンライン作業領域に存在できるようにします。新型コロナウイルス感染症のパンデミック後、世界中のほぼすべての人がリモートで作業するようになったため、これは非常に重要になりました。つまり、UI 設計および開発アクセラレータは、チームが集まって共同作業を行い、フィードバックを提供し、変更と進捗を監視し、製品を構築する「マルチプレイヤー」のニーズに応えていると言えます。

チームは、ブレインストーミング、設計、ハンドオフの配信、プロトタイピング、バージョン管理、コード生成からユーザーテストやコミュニケーションまで、1 つのプラットフォームでタスクを実行できます。設計アイデアの背景を理解し、コードを確認することも非常に簡単になり、日常のタスクの完了もはるかに簡素化されます。また、デザイナーは頭の中にあるアイデアをより簡単に取り出して、個々の機能がどのように機能するかを明確に表現できるようになり、エンジニアはアプリケーションのソース コードをリアルタイムでプレビューできます。

2. ワイヤーフレームの段階は終わりました。ワイヤーフレームの段階万歳!

各プロジェクトはワイヤーフレームを経ます。そして、そのプロセスはページレイアウト、ユーザーフロー、情報アーキテクチャなどのテストの間を行ったり来たりするため、アイデアの創出と開発の間の移行が本当に遅くなります。スピードがすべてであるペースの速いテクノロジーの世界では、これは実際に解決する必要があります。

場合によっては、車輪の再発明に時間を無駄にする必要はなく、特定のプラクティスを既成のオプションや複製可能なワイヤーフレームに置き換える方が、コストと時間の効率がはるかに高くなります。

優れた UI キットを使用すれば、ワイヤーフレームを別の段階として作成する必要がなくなります。これらのツールは、全体的なレイアウトを計画し、早い段階でコンセプトをテストするための事前に設計されたブロックを提供することで、プロジェクトを加速できます。さらに、アプリに一般的に含まれる内容について、より現実的な感覚が得られます。

3. 再利用して削減（時間、お金、エネルギー）

デザイナーの観点から見ると、繰り返し使用したり、必要に応じて変更したりできるアイコン、フォント、その他の詳細なパターンを作成するには、時間とリソースが必要です。最新の変更に応じてコードを書き直す必要がある開発者にも同じことが当てはまります。

近年、類似したプロジェクトや単純なプロジェクトでコンポーネントを再利用するというアイデアは、特にこれを支援する UI ツールがある場合、ますます魅力的になってきています。デザイナーはそれらを使用して事前に構築されたコンポーネントから選択できますが、開発者は変更をより簡単に追跡して、エラーのないコードを生成できます。

UX Tools の調査²、2020 年デザインツール調査では、次の点を強調しています。

「2019 年には回答者の約 20% がデザイン システムを使用していないと回答しましたが、その数は 2020 年には 9% に減少しました (これは、より人気のある UI ツールの機能セットが増えたことに起因する可能性があります)。」

調査から得られた重要な洞察によると、3,500 人の回答者の間でデザイン システムの使用が増加したことが示されています。

• 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. カスタマイズの余地がほとんどない

カスタマイズは、このようなキットを使用する場合に利用可能であり、フォント、色、レイアウトなどの機能に適用できます。しかし、それにはいくつかの制限があります。独自性と特定の外観でエンドユーザーを驚かせることが目標である場合、コンポーネントとスタイルが事前に決定されているため、それを達成できない可能性があります。デザインに使用されているアイコンは、その性質上、他のアプリやWebサイトでも表示される可能性があります。

これは、デザイン全体の一貫性を維持するため、それほど悪くはありませんが、ユーザーエクスペリエンスの差別化を目的としている場合、完全な視覚的差別化の欠如は欠点と見なすことができます。それでも、一部の要素にカスタマイズを追加する余地があります。

2. 不完全なキット – 何千もの機能…しかしどれも同じ

キット内の UI ツールのほとんどには多くのコンポーネントが含まれていますが、すべてのツールがデザイナーや開発者に必要なものを正確に提供できるわけではありません。何千もの機能が含まれていても、それらがさまざまな色の要素のセットだけを表しているのであれば、誰も満足しないでしょう。

3. 高額な月額プラン

また、豊富なカスタマイズ可能な機能、見事なテンプレート、機能的なレイアウト、即時コード生成など、すべてを一定の価格で手に入れることもできます。そして、その価格は月額プランで数百ドルに跳ね上がる可能性があります。最終的には、節約して、代わりに創造的および技術的なスキルを召喚して自分で仕事をした方が良いと判断するかもしれません。

UI 設計と開発を効率化するトップ 5 の UI キット

• 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 Componentsコードになります。アプリの完全な zip ファイルを作成または抽出すると、すぐにこれを確認できます。

以下も含まれています:

• 事前に構築されたアプリシナリオベースのテンプレートとWebベースのレイアウトのライブラリ
• ツールボックスにはドラッグ＆ドロップで使用できる 60 を超える UI コントロールがあります
• アプリケーション/コンポーネントのインタラクション: 移動先、開く/閉じる、表示/非表示
• Material、Bootstrap、Fluent UI のプリセットテーマとカスタムテーマ
• カスタムテーマのオプション
• SketchおよびFigmaファイルをApp Builderにアップロードする
• ライブデータに接続するか、JSON ファイルをアップロードする
• 完全なコード生成
• インスタントアプリとソースコードのプレビュー
• 設計/開発コラボレーションのための GitHub との統合

Indigo Design System がデザイナーや開発者にどのような力を与えるかについては、まだまだ多くのことが分かっています。さらに詳しく知りたい場合は、YouTube の便利なビデオ ライブラリをご覧ください。プロジェクトでApp Builder使用する方法についての簡単な概要とヒントが紹介されています。

1. Forrester、より良い UX を正当化するための 6 つのステップ、2016 年 12 月 28 日
2. UX ツール、2020 年デザイン ツール調査、Taylor & Jordan、2020 年 12 月