より良いUXのためのUIスタイルガイドの作成

この記事の音声バージョンを聞く

一貫性のある製品設計とユーザーエクスペリエンスを確保する

1976年、ジョニー・キャッシュは、組立ラインから盗まれたキャデラックの部品を収集するために20年を費やしたデトロイトの自動車労働者の物語を語る曲であるOne Piece ataTimeをリリースしました。

残念ながら、作業員が海賊版キャデラックの製造を開始すると、主要な設計機能が長年にわたって変更されたため、多くの部品に互換性がないことがわかりました。 少し工夫を凝らしてカスタムカーを組み合わせましたが、どこへ行っても嘲笑を呼び起こす見苦しいミッシュマッシュです。

バックエンドもちょっと面白そうだった
しかし、私たちはそれをまとめて、私たちが通過したときに
さて、それは私たちがテールフィンを1つしか持っていないことに気づいたときです。

今日のデジタルエクスペリエンスの設計者と開発者は、同様の課題に直面しています。 時間の経過は、デジタル製品の継続性に大混乱をもたらす可能性のある手ごわい敵です。 時間とともに、チームメンバーは行き来し、トレンドは進化し、機能は変化します。 さらに、現代のデジタルランドスケープの急速なペースは、製品の革新が数年ではなく四半期に発生することを意味します。

ビジネスチームまたはデザインチームが、製品の意図されたルックアンドフィールを文書化する共有レコードを持っていない場合、視覚的および経験的な不一致が発生し、ユーザーは不満を募らせ、ブランドの評判は打撃を受けます。

UIスタイルガイドは、デジタル製品のユーザーインターフェイスとエクスペリエンスにまとまりをもたらす設計および開発ツールです。 中核となるのは、次のとおりです。

• 製品内で発生するすべての設計要素と相互作用を記録します
• ボタン、タイポグラフィ、色、ナビゲーションメニューなどの重要なUIコンポーネントを一覧表示します。
• ホバー状態、ドロップダウンフィル、アニメーションなどの重要なUXコンポーネントを文書化します。
• 開発者が参照および使用するためのライブ要素とコードスニペットが含まれています

エキスパートレベルのUIスタイルガイドを組み立てる方法を詳しく見る前に、万能のアプローチはないことを理解することが重要です。 スタイルガイドの価値は、大規模な製品チームを持つ大規模なブランドを超えて広がります。 一貫したデジタルエクスペリエンスを求める中小企業も、UIスタイルガイドが特定のニーズに合わせてカスタムメイドされている場合にメリットがあります。

これらの重要なデザインコンポーネントをUIスタイルガイドに含める

ブランドアイデンティティのガイドラインに精通しているデザイナーは、含める必要のある重要なデザインコンポーネントの多くと十分に重複しているため、UIスタイルガイドへの移行に問題はありません。

上級者向けのヒント：関連する設計コンポーネントのみを文書化します。 無関係な情報により、UIスタイルガイドは肥大化し、操作が困難になります。

タイポグラフィスキーム

タイポグラフィは最も一般的なインターフェイスデザイン要素の1つであるため、製品で使用されている書体の名前をリストするだけでは不十分です。 タイトル、サブタイトル、見出し（H1、H2、H3）、本文、およびキャプションについて明確な指示を与える必要があります。

さらに、フォントサイズを指定し、太さを示し、スタイルを定義する必要があります。 行の高さとカーニングも必要です。特別な状況が発生したときに使用するgo-toフォントを選択することをお勧めします。

レスポンシブレイアウト

デジタル製品がレスポンシブグリッドシステムを中心に設計されている場合、UIスタイルガイドは画面サイズ全体のインターフェイスレイアウトに対応する必要があります。 これは、間隔、パディング、および配置に関するメモと例を含めることを意味します。 さまざまな画面サイズに関連して、製品のグリッドシステムのオーバーレイを表示することも役立ちます。

ここでの大きな目標は、1回限りの画面デザインの必要性を防ぐのに十分なコンテキストを提供することです。 時間が経つにつれて、これらは合計され、デジタル製品の結束を弱体化させます。

カラーパレット

インターフェイスを破壊する最も簡単な方法の1つは、一貫性のない色の使用であるため、色の組み合わせを明確に定義する必要があります。 色とその値（HEX、UIColor）を一覧表示することは良いスタートですが、特定の組み合わせと使用例も示す必要があります。

UIスタイルガイドが一連のブランドアイデンティティガイドラインを参照している場合は、より明るいアクセントカラーの二次スキームが利用可能かどうかを確認してください。 そうでない場合は、独自のドキュメントを作成してください。 グレー値の選択も役立ちます。

ボタン

ほぼすべてのインターフェイスにボタンが含まれているため、サイズ、スタイル、色、配置、間隔、および活版印刷の要素を文書化するために時間をかけてください。 さまざまなボタンがさまざまなコンテキストで使用されている場合は、それも明確にします。

必要になる可能性のある追加のUIコンポーネント

• 図像学
• ツールチップとポップオーバー
• モーダル
• フォーム要素
• データテーブル
• ナビゲーションメニュー
• チャートとデータの視覚化
• タブ
• オンオフスイッチ
• ダイアログ
• コンテンツグリッドリスト
• 垂直リスト
• ツールバー
• 日付と時刻のピッカー
• ローディングインジケーター
• チェックボックス
• アラート
• ドロップダウンメニュー
• スライダー
• ステッパー
• ページ付け

設計指示を整理してコンテキスト化する

必須のUIコンポーネントに加えて、企業や設計チームがUIスタイルガイドを参照、ナビゲート、および実装しやすくするための実用的な機能がいくつかあります。

目次

よく整理され、明確にマークされた目次は、誰もがドキュメントの内容をすばやく見つけるのに役立つ簡単な方法です。

コンテキストノート

製品の寿命にわたって発生する可能性のある問題のある設計上の決定をすべて予測することは不可能です。そのため、頻繁に使用されるUIコンポーネントの背後にある設計の根拠を明確にすると、予期しないシナリオを簡単に解決できます。

例えば：

「私たちの製品の核となるのは、世界中の最高の建築画像を紹介することです。 そのため、インターフェイスのレイアウトでは、テキストよりも大きくて派手な画像が優先されます。 可能な限り、画像を当社の製品の焦点にします。」

間隔と配置の手順

間隔と配置については、「レスポンシブレイアウト」セクションで説明することがよくあります。 デジタル製品の複雑さに応じて、指示は一般的な「経験則」で構成されている場合と、非常に詳細な場合があります。

規則ルール

多くの場合、設計の推奨事項と禁止事項の概要を明確に示すと役立つ場合があります。 例えば：

• 「インターフェイスフッターには、会社のロゴの白いワードマークバージョンを使用してください。」
• 「黒の背景に当社のワードマークの代替色バージョンを使用しないでください。」

すべきこととすべきでないことは、議論を防ぎ、設計と開発の時間を節約しますが、次のようなコンテキストのメモを提供することが常に最善です。

「この推奨事項と禁止事項のリストは、設計上の重要な決定事項を幅広く網羅していますが、製品の設計要素の誤用の可能性をすべて考慮しているわけではありません。 これを念頭に置いて、不確実性が生じた場合は最善の判断を下し、製品の全体的なルックアンドフィールを正確に反映する選択を行ってください。」

ライブ要素とコードスニペット

ブランドアイデンティティのガイドラインは通常静的なドキュメントですが、UIスタイルガイドには、最終製品と同じように機能するライブ要素が含まれています。つまり、ボタンはボタンのように動作し、ドロップダウンメニューは実際にドロップダウンし、アニメーションはアニメーション化されます。

コードスニペットを使用すると、開発者はライブ要素のコードをすばやくコピーして製品のバックエンドに貼り付けることができます。

設計チームがUIスタイルガイドに簡単にアクセスできるようにする

スタイルガイドの作成方法と、UIスタイルガイドに含まれるコンポーネントと機能を理解したので、共有とコミュニケーションに注意を向けます。 より具体的には、UIスタイルガイドを収容するためのオプションは何ですか？

従来、UIスタイルガイドはWebページとして存在していました。 これにより、設計者と開発者は簡単にアクセスでき、設計要素を製品内と同じように機能させることができます。

最近では、いくつかのクラウドベースのプラットフォームが登場し、チームが製品を共同で設計、プロトタイプ作成、およびテストできるようになりました。 これらの同じプラットフォームは、UIスタイルガイドを収容し、チームメンバーが継続的なフィードバックやアイデアを交換できるようにすることもできます。

これらのプラットフォームのいくつかがUIスタイルガイドへのアプローチをどのように説明しているかを見てみましょう。

フィグマ

「チーム全体が使用できるリンクされたUIコンポーネントを使用して設計システムを作成します。 共有コンポーネントに変更が加えられたときに更新を取得する」

段階

「ライブラリは常にあるべき姿でした。色、プロパティ、要素…さらには移行のタイミングも、コンポーネント内のすべてのものになりました。 その場で編集します—すべてがマスターです。 インスタンスごとに、不要なものをすべてオーバーライドします。」

InVision

「すべてのブランドおよびUXコンポーネント（使用法のドキュメントを含む）は、1か所で管理されます。 変更はチーム全体に同期され、設計者はいつでも最新バージョンに切り替えたり、更新をロールバックしたりできます。」

Material.io

「独自のマテリアルテーマを作成し、色、形、タイポグラフィにスタイルの変更を適用して、ブランドシンボルライブラリを作成します。 ギャラリーでデザインの反復を共有、アップロード、および提示します。 次に、検査モードを使用して開発者向けドキュメントにアクセスします。」

UIスタイルガイドは使いやすいものでなければなりません

UIスタイルガイドを組み立てるとき、コミュニケーションは当然のこととは言えません。 製品チームは、さまざまな分野、文化的背景、および専門的な経験を持つ人々で構成されています。 これらの原則を使用して、明確さと使いやすさを確保してください。

シンプルなレイアウト

UIスタイルガイドには、すっきりとした整頓された画面レイアウトが必要です。 各画面は、適切に整理され、明確にラベル付けされ、非常に読みやすいものである必要があります。 画面に視覚的な情報を詰め込むことにはメリットがないため、最小限で広々とした配置を目指してください。

簡潔な説明

指示は短くて甘くしてください。 長い段落は避け、箇条書きを使用してください。 可能であれば、言葉よりもビジュアルでデモンストレーションします。

有益な使用シナリオ

このスタイルのスライダーをその上でいつ使用するのか疑問に思っていますか？ 「シナリオの使用」は、この種の混乱を解決します。 繰り返しになりますが、ここでは視覚が言葉よりも強いので、シナリオと適切な前進の両方を明確に示す例を提供してください。

関連するバージョン履歴

デジタル製品は頻繁に更新されます。 製品チームはすべての最後のインターフェイスの詳細を改良しようとしているため、設計コンポーネントがどのように進化したかを継続的に記録することが重要です。 ここでは慎重に判断してください。中小企業や製品チームの場合、バージョン履歴の広範なライブラリを維持することは実用的でない場合があります。

UIスタイルガイドは貴重なリソースであり、強力なデザインツールです

現代の設計および開発チームは、効率と学際的なコラボレーションを重視しています。これは、MailChimp、Google、Salesforceなどの大手ブランドによって設計言語システムが宣伝されていることからも明らかです。

デザイン言語システムにより、洗練されたデジタル製品に取り組んでいる多様なチームが、標準化された視覚言語を使用してコミュニケーションをとることができます。 UIスタイルガイドは、デザイン言語システムのファブリックに組み込まれており、迅速な反復と一貫したデジタルエクスペリエンスのために信頼できるツールとして機能します。

同時に、デザインは大企業だけに限定された追求ではありません。 さまざまな製品チームとデジタルプロジェクトが、適切に構成されたUIスタイルガイドの恩恵を受けていますが、リソース（財務、時間、才能）はビジネスごとに異なります。

このため、UIスタイルガイドは、個々のビジネスや設計チームのニーズに合わせて調整されている場合に最も役立ちます。 すべてのUIスタイルガイドの最大の目的は、一貫して楽しいユーザーエクスペリエンスにつながる明快さと実用性のバランスです。

Toptal Designブログでさらに読む：

• Webおよび印刷デザインの書体スタイ​​ル
• レスポンシブデザイン–ベストプラクティスと考慮事項
• スタートアップがスタイルガイドを必要とする理由
• アイコンのユーザビリティとデザインのベストプラクティス
• インスピレーションを活用する–ムードボードのガイド