合理的なデザイン作業のための UI スタイルガイド入門 | アドビ UX 道場 #UXDojo

デジタル製品やサービスをコンセプトデザインから始めて、成熟し洗練された製品へと仕上げるには、ブランドに合わせた標準化、体系化、コミュニケーションを一定レベルで行うことが必要です。これらを効果的に行うために、デザインチームは UI スタイルガイドを使用することがあります。UI スタイルガイドは、ブランド要素、メッセージ、デザインに関する唯一の参照先として機能します。

UI スタイルガイドの作成は時間のかかる作業ですが、新しい制作物をデザインするためのプロセスを合理化し、チームメンバー全員の認識を揃えるのに役立ちます。この記事では、UI スタイルガイドとは何か、そして、デザインチームが効率的かつ一貫性を持って作業でき、優れたユーザー体験を提供するためにスタイルガイドに必要な情報は何かを紹介します。

UI スタイルガイドとは何か

UI スタイルガイドは、ユーザーインターフェイスのデザインに関連する必要な詳細情報を含んだリソースで、 UI デザインの一貫性を確保するために使用されます。ガイドには、ブランドガイドラインに沿って使用が承認されたタイポグラフィー、カラー、レイアウト、コンポーネントなどの要素が定義されます。

十分に検討して作成されたスタイルガイドがあれば、デザイン全体に統一された原則を組み込めます。これにより、ユーザーはワークフローの過程でどの画面を操作している時も一貫した体験を得られます。また、プロジェクト独自の UI スタイルガイドを構築して、その中にデザインに関するすべての決定事項や指示を収録すれば、将来 Web やアプリデザインをアップデートする際も、ブランドのルック&フィールに確実に一致させることができます。

UI スタイルガイドが便利な場面

デジタル製品開発の初期段階で UI スタイルガイドを作成すると、デザイン決定に費やす時間を削減し、不要な UI 資産（一貫性のないデザインの結果として）のために発生する無駄なコストを防げます。また、デザインの指針がスタイルガイド内にすでに実装されているため、担当するデザイナーによって方向性が変わることを防げます。

デザインチームを拡大するタイミングでは、UI スタイルガイドの作成が特に有効です。新しくチームに加わったデザイナーに UI スタイルガイドを提供すると、素早く製品のルック&フィールを学んで、デザインに取り入れられるようになるでしょう。

UI スタイルガイドの作成方法

UI スタイルガイドは、チーム内のコラボレーションとコミュニケーションを改善します。しかし、つくり始めるには、製品デザインのあらゆる細部についての議論が必要です。どんなに些細に見えることでも見逃してはなりません。重要なのは、それぞれの要素がどのような見た目になるのかを決めることです。そうすれば、新しい機能や側面が追加されても、デザインの一貫性を保てます。

UI スタイルガイドに含めるべき項目

UI スタイルガイドには、さまざまな種類のデザイン要素やコンポーネントを柔軟に含められます。デザイン組織の成熟度次第では、最初は大まかな定義から着手し、徐々に詳細を追加して、スタイルガイドの完成度を高めるという方法も可能でしょう。

すべてのスタイルガイドが同じように見えるわけではなく、すべて同じ項目について記述されているわけでもないことを理解するのは重要です。つまり、UI スタイルガイドはカスタマイズ可能なものであり、デザインチームと開発中の製品に必要であれば何でも含めることができます。

大抵の UI スタイルガイドには、タイポグラフィー、アイコン、レイアウト、カラーパレット、コンポーネントに関する記述が含まれています。ここではそれぞれのカテゴリについて、どのような項目が記述されるのかを簡単に説明します。

タイポグラフィ

スタイルガイドのタイポグラフィーのセクションには、以下の項目を明記します。

• 選択されたフォント
• 階層を明確にするためのフォントのサイズとウェイトの種類
• リンク表示方法などのタイポグラフィーの追加要素

Web ブラウザに表示されるデザインに関しては、異なるブラウザや OS 間のフォント互換性を確認することも忘れないようにしましょう。デザインに採用したフォントがすべてのユーザーに同じように表示されない可能性があるからです。

アイコン

アイコンは、製品のアクセシビリティを向上させるための単純でとても有効な方法です。アイコンはその意味やユーザーの移動先を明確にするために、タイポグラフィと組み合わせて使われることがあります。また、複雑なシステムの場合は、さまざまな機能を整理するためにアイコンが使用されます。同じような振舞いをするコントロール、データ、ツール、ナビゲーションなどがその場合の候補です。

レイアウトとグリッド

レイアウトとグリッドは、視覚的な要素の配置を体系化するために使用されるフレームワークで、各画面のデザインに、一貫性と連続性を確保するためには欠かせません。グリッドとレイアウトによって標準化されていなければ、ユーザーが別のページへとクリックしたときに、画面の構成要素が動き回っているように見えるでしょう。

カラーパレット

カラーパレットを定義することは、デジタル製品のトーンとフィールを設定し、一貫したブランド体験を提供するために重要です。色は、インターフェイスを使用するユーザーの感情に大きな役割を果たすため、どのようなカラーパレットを選択したとしても、最初から最後まで一貫した色使いをすることはとても重要です。

コンポーネント

コンポーネントの選択とその表示方法の決定は、ユーザー体験に大きな影響を与えます。製品内のコンポーネントの使い方を標準化すると、どのコンポーネントがどの機能を担っているかを明確にして、ユーザーの混乱を防ぐために役立ちます。UI スタイルガイドを補足する資料として、各コンポーネントの仕様をより詳細に指定したデザインシステムを作成することもできます。

製品の UI の構築にはさまざまな種類のコンポーネントが必要です。さらに、コンポーネントを組み合わせたパターンが必要になる場合もありますが、その際は、複数のコンポーネントを組み合わせた時の見た目を定義します。テキストフィールドとタイポグラフィとボタンを含むモーダルウインドウはその例です。

前述のように、コンポーネントを整理するより良い方法はデザインシステムの採用です。デザインシステムは、デザインチームの貴重な時間を節約するために効果的ですし、開発者のデザインの実装をより簡単にするためにも役立ちます。

UI スタイルガイドとデザインシステム

UI スタイルガイドもデザインシステムも、デザインチームが新しいデザインに取り組む際に参照するリソースです。両者の違いは、UI スタイルガイドが製品全体の視覚的なルールを取りまとめた資料であるのに対し、デザインシステムはそのルールの中で、コンポーネントがどのような見た目と機能を持つかを規定するという点です。

たとえば Web ページをデザインする場合、UI スタイルガイドは、フォントやカラーが正しく使われていることをデザイナーが確認するときに使用する資料です。一方、デザインシステムは、ページ上部のグローバルナビゲーションの、あるべき位置や使われ方を指示します。デザインシステムには、他にも、ボタン、検索フィールド、問い合わせフォームなどが定義されます。それぞれのコンポーネントに期待されるインタラクションも記述されるため、デザイナーだけでなく開発者にも有益です。

UI スタイルガイドとデザインシステムのどちらもアクセシブルなデザインを念頭に作成することが重要です。気付かないうちにアクセシビリティの課題がデザインに組み込まれてしまうことは、誰しも避けたいでしょう。

UI スタイルガイドとデザインシステムのどちらかを選ぶ必要はありません。デザイン全体の一貫性と標準化を確実にするためには、両方採用するのがお勧めです。

おわりに

まだ UI スタイルガイドが手元にないなら、今が作成に取り掛かる絶好のチャンスです。デザインチームの規模に関係なく、UI スタイルガイドは時間を節約できるリソースです。また、製品のあるべきルック&フィールを検討して、それをドキュメントとしてまとめておけば、デザインチームが参照すべき唯一のリソースとなって、将来のヒューリスティック評価で発見される UI の問題点も避けられるでしょう。

この記事は A Brief Guide to Creating a UI Style Guide（著者: Dan Silveira）の抄訳です