スタイルガイド主導の開発によるモジュラーUIシステムの設計

開発を推進するためにスタイルガイドを使用することは、フロントエンド開発で多くの注目を集めている慣行です—そして正当な理由があります。 開発者は、新しいコードを追加するか、既存のコードを更新することでスタイルガイドを開始します。これにより、後でアプリケーションに統合されるモジュラーUIシステムに貢献します。 しかし、モジュラーUIシステムを実装するには、モジュラー方式で設計に取り組む必要があります。

モジュラーデザインは、UIとUXをパターンで考えてデザインすることを奨励します。 たとえば、ユーザーがタスクを実行できるように一連のページまたはビューを設計する代わりに、UIシステムの構造と、そのコンポーネントを使用してユーザーフローを作成する方法を理解することから設計プロセスを開始します。

SmashingMagの詳細：

• 効果的なスタイルガイドの作り方
• リビングスタイルガイドツールの詳細な概要
• スタイルガイド主導の開発の自動化
• 作家と編集者のためのフリースタイルガイドアイコンセット

この投稿では、UIデザインにおけるモジュール性の価値と、それがスタイルガイド主導の開発プロセスにどのように結びつくかを説明します。これにより、柔軟でユーザーフレンドリーなアプリケーションの実装が改善され、デザイナーと開発者のコ​​ラボレーションがより生産的になります。

UIのモジュラーデザイン

モジュラー設計とは、設計を小さなパーツ（モジュール）に分割し、それらを個別に作成してから、後でそれらを組み合わせてより大きなシステムにすることです。 私たちの周りを見ると、モジュラー設計の多くの例が見つかります。車、コンピューター、家具はすべてモジュール式です。 モジュール性があるため、これらのシステムの一部を交換、追加、削除、および再配置できます。 ニーズに合わせてシステムをカスタマイズできるため、これは消費者にとって素晴らしいことです。 サンルーフ、より強力なモーター、レザーシートが必要ですか？ 了解しました！ 車のモジュラー設計により、これらのタイプのカスタマイズなどが可能になります。

もう一つの素晴らしい例はIKEAの家具です。 下の図では、デザインのモジュール性が本棚の形になっていることがわかります。これにより、さまざまな方向にセットできるようになります。また、開口部だけでなく、非常に多くの場所にインサートを追加できるようになります。同じパターンを繰り返す、サイズの異なる長方形である、作品自体を構成するパーツ。

製造の観点から、モジュラー設計も費用効果が高いです。 これの重要な側面の1つは、後で接続できる小さな単純なパーツを作成する方が、一度に1つの大きな複雑なパーツを作成するよりも簡単で安価なことです。 さらに、ソリューションは何度も再利用できるため、生産性が最大化されます。

UIデザインを作成する際の目標は似ています。 デザイナーとして、構築と運用の両面で効率的なUIシステムを作りたいと考えています。 問題の解決策を見つけたら、その解決策をさまざまな場所で再利用できるようにしたいと考えています。 これにより、時間を節約できるだけでなく、ユーザーが一度学習してアプリケーションの他の領域に再適用できるパターンが確立されます。 また、すべてを再構築することなく、特定のシナリオに合わせてシステムをカスタマイズできるようにしたいと考えています。

これはまさにモジュール性がUIデザインにもたらすものです。それは、柔軟性があり、スケーラブルで、コスト効率が高いだけでなく、カスタマイズ可能で、再利用可能で、一貫性のあるシステムにつながります。

モジュラー設計の例

モジュラーUIデザインのいくつかの例は、レスポンシブグリッド、タイルウィンドウデザイン、カードデザインなどのパターンで見ることができます。 それらすべてにおいて、モジュールは繰り返し使用され、さまざまな画面サイズに簡単に適応できる柔軟なレイアウトを提供します。 さらに、モジュールはコンポーネントのコンテナとして機能し、IKEAキャビネットに追加できるインサートのように、さまざまなタイプのコンテンツや機能を挿入できます。

これは均質ですか？

モジュラー設計がシステムの設計に関するものであり、UIシステムがほとんど同じ部分（ボタン、書体、アイコン、グリッドなど）で構成されている場合、疑問に思うかもしれません。

• モジュール式のデザインはすべて同じように見えませんか？
• これはブランドアイデンティティにどのように影響しますか？
• 製品のUIをどのようにユニークにすることができますか？

これらの質問は有効ですが、根本的な質問を提起します。製品設計の革新と独自性はどこにあるのでしょうか。 この議論は最近取り上げられていますが（「デザインの耐え難い均質性」と「均質なデザインの擁護」を参照）、ビジュアルデザインが最初に目にするものであるため、イノベーションと独自性はにあると考える傾向があります。デザインの見た目。 ただし、ビジュアルデザインはその一部にすぎません。 製品デザインの革新性と独自性は、製品全体で説明する必要があります。つまり、製品が提供する本質的な価値と、外観を含む人々がそれを体験する方法です。 椅子を取りなさい。 椅子である必要がありますが、すべての椅子のデザインが同じように見えたり、感じたり、機能したりするわけではありません。 実際、椅子のデザインは歴史的にデザインと素材の革新の分野でした。 同様に、UIには独自の要件があり、機能することが証明されているパターンを使用しても、イノベーションと独自性を犠牲にすることにはなりません。 それどころか、顧客が抱える特定の問題を解決するには、革新性と独自性が必要になります。 モジュラー設計の利点は、異なるために孤立した方法で元のソリューションを見つけるのではなく、相互接続されたパーツのシステムとしてこれらのソリューションにアプローチすることを奨励することです。 つまり、UIコントロールに適用された革新的なデザインは、アプリケーション内の1つの場所に追いやられることはなく、代わりにシステム全体に浸透し、まとまりを維持し、使いやすさを向上させます。

スタイルガイドのモジュール性-ドライブ開発

実装側から見ると、スタイルガイド主導の開発も非常にモジュール化されています。 手始めに、プロセスは発見フェーズから始まります。解決する必要のある問題を理解し、要件を収集し、設計ソリューションを反復処理します。 設計ソリューションは通常、パッケージ全体または機能として提示されますが、実際には、スタイルガイドに記載されているシステムの多くの部分の組み合わせである必要があります。 デザインの一部は新しい場合がありますが、それでもモジュールとして作成する必要があります。 重要なのは、スタイルガイドを使用して、デザインを作成するために再利用または拡張できるUIシステムで使用可能なモジュールを決定することです。

（スタイルガイドがない場合はどうなりますか？心配しないでください！スタイルガイドを使用していない場合でも、モジュール方式で設計する方法を次のセクションで説明します。）

スタイルガイド主導の開発の次のステップは抽象化フェーズです。これは基本的に、設計ソリューションをより小さな部分に分解する演習です。 このフェーズでは、設計者と開発者が協力して、提案された設計を識別し、使用または拡張される要素とコンポーネント（つまり、モジュール）を特定します。これらは、実装のために作成する必要があります。

抽象化フェーズは、次のステップである実装と文書化の計画を追跡するのにも役立ちます。 このフェーズでは、モジュールは既存のモジュールの残りの部分から分離して構築または拡張されます。 Web開発では、これは、アプリケーションから独立してコンポーネントを構築するか、要素のスタイルを定義することを意味します。 これはモジュール性の重要な側面です。これは、プロセスの早い段階で問題を特定し、システムの他の部分との予期しない依存関係を防ぐのに役立つためです。 その結果、全体として統合しやすい、より安定した部品が得られます。

スタイルガイド主導の開発のユニークな点は、実装が進行する一方で、後から考えるのではなく、文書化も行われることです。 これが可能なのは、スタイルガイドジェネレーターを使用すると、ドキュメントが生きたスタイルガイドになり、実装のフレームワークとサンドボックスの両方として機能するためです。

• リビングスタイルガイドは、UI要素（見出し、リスト、リンク、入力コントロールなど）の定義のフレームワークとして、およびコンポーネントのライブラリ（ナビゲーションシステム、ツールバー、検索ツール、グリッドテーブルなど）として機能します。 ）使用可能です。 これは、開発が毎回ゼロから開始されるわけではないことを意味します。 代わりに、UIシステムの既存の定義に基づいて構築され、それに貢献します。
• また、実装を構築およびテストするためのデモンストレーションスペースとして機能するため、サンドボックスでもあります。 これはまさに、アプリケーションに統合される前に開発が行われる場所です。

スタイルガイド主導の開発の最後のステップである統合フェーズは、モジュラー設計の組み立てステップに似ています。 必要なUI要素またはコンポーネントが開発され、アプリケーションに統合する準備ができています。 残っているのは、それらを構成およびカスタマイズすることです。 統合中のスタイルガイドは、物理的なモジュラー設計を組み立てるために使用される優れた取扱説明書のようなものです。

モジュール設計とスタイルガイド主導の開発の基本的な概念を特定したので、それらを使用してみましょう。

モジュール方式での設計

これを想像してみてください。優れたユーザーフローを考え出し、モックアップとプロトタイプを組み合わせて相互作用を説明し、すべての部分を文書化しました。 あなたのデザインはすでにスタイルガイドに従っている可能性があり、それはあなたに大きなアドバンテージを与える可能性があります。 （そうでない場合は、汗を流さないでください！）一歩下がって、設計ソリューションの主要部分を高レベルでマッピングし始めます。 これらの部分は、特定のことが達成される相互作用ポイントである可能性があります。 たとえば、チェックアウトフローは次のようになります。

しかし、あなたの銃を持ってください！ これらはまだモジュールではありません。 そこにたどり着くには、次のようなフローで永続的なUI要素を特定する必要があります。

• チェックアウト手順インジケーター、
• 情報の入力に使用されるフォーム要素、
• カート内の製品の表現、
• 他の人が購入した関連製品の表現、
• 購入に関するポリシー、
• ヘルプテキスト、
• メッセージとアラート。

もう少し深く掘り下げると、スタイルとインタラクションパターンも見つかります。

• スタイル：

• を表すために使用される色：

  • エラー、成功、警告、および情報メッセージ。
  • 一次アクションと二次アクション。
  • 非アクティブ状態と選択状態と無効状態。
  • リンクと通常のテキスト。
  • ブランディング;

• さまざまな種類のコンテンツを表すために使用されるタイポグラフィ：

  • 情報を階層的にレイアウトするためのフォントサイズ。
  • メッセージを強調表示したり、追加情報を提供したりするためのフォントタイプ。
  • 情報を要約するリスト。

• 視覚的な意味を伝え、一般的なアクションをすばやく参照するための図像。

• 相互作用パターン：

  • 今後の手順を表示する（無効）。
  • 前の手順を表示する（情報を編集できるように有効になっている）。
  • 編集可能な要約を表示する。
  • ユーザーがフィールドをクリックした後の情報の検証。
  • ロールオーバーに関するヘルプテキストを提供する。
  • 選択が行われた後、カートを更新します。

デザインがこれらすべての小さな部分に分解されると、最終的にモジュールが完成します。 この時点で、それらの多くがチェックアウトプロセスだけでなく、アプリケーションの他の多くの領域にも適用されていることがわかりやすくなっています。 モジュラー設計アプローチを使用すると、これらのモジュールを作成して、この特定の設計だけでなく将来の設計でも使用できるようにすることができます。

アトミックデザインは、モジュラーデザインを作成するこのプロセスを加速できる方法論として言及する価値があります。 この方法論では、化学を類推して、システムのさまざまな部分間の関係とそれらがどのように相互に関連しているかを分析します。 手順を実行することは、前の演習とほぼ逆です。

1. システム内で最小のモジュールであるアトム（この例では、ボタン、タイポグラフィ、図像）から始めます。
2. モジュールは複雑さを増し、分子に結合して、より多くの機能を提供します（この例では、チェックアウトステップインジケーターと関連製品モジュール）。
3. 次に、アプリケーション内でグループ化された分子である有機体があります（この例では、アプリケーションのヘッダーとさまざまな形式）。
4. 化学の例えを残して、次のレベルはテンプレートです。これは、生物が配置される事前定義された構造です。
5. 最後に、テンプレートのインスタンスであるページがあります。

ここで欠けている部分は、識別されたモジュールを文書化する方法です。 これは、モジュールの構築方法を把握するための仕様書を作成することや、ブランドの色やフォントファミリ（標準的なスタイルガイドに典型的）などの高レベルの定義を把握するためのガイドラインを作成することだけではありません。 むしろ、ドキュメントはより洗練された動的なものである必要があります。そうすれば、これらのモジュールが変更されたときに（そして、変更されることがわかっている場合でも）、ドキュメントが古くなることはありません。 これはまさに、生活スタイルガイドがギャップを埋める場所です！

リビングスタイルガイドの使用

リビングスタイルガイドは、いくつかのことを提供するため、設計プロセス中に非常に役立ちます。

使用するベースライン

スタイルガイドは、毎回ゼロから始めるのではなく、視覚的な方向性と、デザインの作成に使用する必要のあるモジュールを提供します。

リビングスタイルガイドは実際のコードから生成されるため、実装されたデザインの最新かつ最高のバージョンを反映しています。

設計ソリューションのドキュメント

特定のUIまたはUXの問題を解決するために取得した知識は、後で使用するために委託することができます。

これは、実装の一貫性を維持するのに役立ち、新しいソリューションを現在の設計の一部に適合させることができます。

ユーザーが慣れ親しむことができるパターンを開発し、使いやすさを向上させます。

コミュニケーションのしやすさ

このガイドは、UIの最新の表現を提供することにより、設計を伝達するのに役立ちます（静的なモックアップはすぐに古くなります）。

スタイルガイドのさまざまな要素に名前を付ける必要があるため、一般的なUI言語が開発されています。 これには、UIデザイナー間だけでなく、デザイナーと開発者間のコラボレーションが必要です。これは、デザインの実装方法を伝える必要がある場合に大きな利点です。

既存のスタイルガイドがある場合でも、作成を計画している場合でも、プロセスを自動化することで正しい方向に進み、モジュール方式で設計プロセスを推進できます。 したがって、リビングスタイルガイドのジェネレーターを購入する準備ができている場合は、次のリソースをお勧めします。

• 「リビングスタイルガイドツールの詳細な概要」、Robert Haritonov、Smashing Magazine
• 「パターンライブラリジェネレータの概要」、David Hund、GitHub
• 「スタイルガイドジェネレーターのまとめ」、Susan Robertson、A List Apart

極端にしないでください！

モジュール性を組み込むために設計プロセスを微調整する方法と、生活スタイルガイドの利点について見てきたので、途中で遭遇する可能性のある一般的な落とし穴のいくつかを調べてみましょう。

スタイルガイドは設計作業に取って代わるものではありません

生活スタイルガイドが設置されると、ほとんどの設計作業が完了するとマネージャーから聞くのは珍しいことではありません。 多くの反復的で些細な作業が行われていますが（ボタンのさまざまな状態を何度もプロトタイプ化するなど）、次のことを考慮してください。

• 新しい機能を継続的に構築する必要がありますが、
• 解決策を見つけるには、設計上の決定を行う必要があります。

ですから、そうです、生きているスタイルガイドを持ち、スタイルガイド主導の開発に従うことは開発ワークフローを改善しますが、それはデザイナーを方程式から外すことはありません。 ワークフローをスピードアップし、コミュニケーションを促進するツールを持つことは、設計者と開発者の両方にとって有利です。 しかし、このアプローチの優れている点は、UIをカスタマイズするための多くの余地があり、それによってユーザーエクスペリエンスが向上することです。そして、それを理解することがデザイナーの役割の一部です。

極端なパターンに従わないでください

アプリケーションでは常にパターンを使用するように努める必要があります。 たとえば、色とフォントサイズを一貫して使用することで、操作可能なUIの要素をユーザーにすばやく示すことができます。 ただし、以前に実装されたという理由だけでパターンを使用することは避けてください。 むしろ、目前の問題を本当に解決するので、それを使用してください。

たとえば、画面の上部にツールバーを表示するパターンを確立している場合、このパターンはほとんどの場合機能しますが、ユーザーがアクションを実行している場所に近いコンテキストツールバーを表示する方が理にかなっている場合があります。 。 したがって、パターンの再利用がユーザーエクスペリエンスよりも実装の容易さを優先するかどうかを常に疑問視してください。

デザインの反復を見落とさないでください

これは前のポイントと少し結びついています。 一見スタイルガイドに従わなくても、新しいパターンを試したり、インターフェイスを設計する方法を見つけたりするときは、反復と革新の価値を見逃さないでください。 スタイルガイドは、可能な限り最高のユーザーエクスペリエンスを作成するための努力を妨げるものであってはなりません。 むしろ、その名前が示すように、これはガイドであり、以前の作業と経験を利用して問題を解決するのに役立つ出発点である必要があります。 設計段階での反復はこれまでと同じように重要であり、確立されたパターンを改善するためにあなたを駆り立てるはずです。

メンテナンス負担

あなたの仕事に伴う膨大な数の事柄の中で、スタイルガイドを維持することは負担のように感じる最後のことであるべきです。 これを克服するには、次の方法が役立ちます。

• インストールが簡単で、定期的に操作しやすいドキュメントシステムを見つけてください。
• ドキュメントの更新をワークフローの一部にします。実装がすでに終了した後の考えではありません。 あなたが行くように文書化！
• 誰もがドキュメントに簡単に貢献できるようにするガイドラインを確立します。 これにより、ワークロードが分散され、所有権の感覚が高まります。

モジュラーを構築するためのモジュラーの設計

一貫性があり、カスタマイズが容易でありながら、スケーラブルでコスト効率の高い柔軟なUIシステムを作成することは、その構築方法だけでなく、設計方法にも依存します。 確立された標準とパターンを無視して、すべての新しい設計が独立して作成された場合、コンポーネントのライブラリはほとんど価値がありません。

逆に言えば、便利なため、同じスタイルとパターンを再利用するCookie-Cutterインターフェイスを作成することではありません。 優れたデザインは、その独自性のためではなく、形と機能の両方を組み合わせて素晴らしい体験を生み出すために効果的です。 この目標は常に念頭に置く必要があり、スタイルガイド主導の開発などの方法を使用して設計と開発の両方にモジュール性をもたらすと、この目標を達成するまとまりのあるUIシステムを作成するのに役立ちます。