ウェブインターフェースデザインでウェブサイトのスタイルガイドを作成する方法（画像とテキスト付き）

スタイルガイドとは何でしょうか? 簡単に言えば、ストーリーを伝える方法を説明するドキュメントです。コピーの書き方、フォーマット方法、視覚要素やインタラクティブな方法の作成方法などの標準を確立します。スタイルガイドは新聞などの印刷業界で生まれました (The Guardian のスタイルガイドを参照)。Web でも大きな価値があります。
従来の印刷物であっても、インターネットであっても、最も重要なのは「コンテンツ」です。スタイルガイドの最終的な目標は、コンテンツを明確で一貫した視覚スタイルで提示することです。 BBC の Global Experience Language (GEL) は、Web サイトのスタイルガイドの優れた例です。まず簡単に理解するために、ページの右側にある「GEL Web スタイルガイドのダウンロード」から PDF ドキュメントをダウンロードすることをお勧めします。
ウェブサイトのインターフェースデザインにおけるウェブサイトのスタイルガイドの作成方法 123WORDPRESS.COM

ウェブサイトのインターフェースデザインにおけるウェブサイトのスタイルガイドの作成方法 123WORDPRESS.COM

システムに関するストーリー<br />優れたスタイルガイドは、サイトの自伝のように読めるため、他のユーザーがそれを使用してサイトをさらに理解し、拡張することができます。スタイルガイドには、Web サイトプロジェクト中に関係者が蓄積した知識と経験が含まれ、わかりやすく説明されている必要があります。また、プロジェクトプロセスにおけるさまざまなデザインアイデアをデザインシステムのレベルで解釈し、チーム内の他のデザイナーや将来のチームがプロジェクトをよりよく理解して作業を開始できるようにします。
デザイナーとして、これらは本能的に知っているべきことではないでしょうか。なぜドキュメントに含める必要があるのでしょうか。実際の作業では、デザイナーがすべてを処理することは不可能です。たとえば、ビジネスリサーチ、コンテンツ戦略、ユーザーエクスペリエンス、技術開発、QA、展開などの側面に関与する人やチームは多数存在する可能性があります。必要に応じて、Webサイトの製品の特性をより正確に理解できるように、適切な段階でドキュメントを対応する協力部門に渡す必要があります。
通常、Web サイトのインターフェース設計作業が完了すると、インタラクションデザイナーとビジュアルデザイナーがスタイルガイドの作業を開始します。次のようなシナリオに心当たりがあるでしょうか。Photoshop または Fireworks で完璧なビジュアルプロトタイプを作成しました。すべてのピクセルが完璧で、行間隔は適切に制御されており、配色は適切で意味があります。さて、いよいよフロントエンド開発者にデザインを引き渡すときです。デザインの詳細をすべて開発者に伝えるにはどうすればよいでしょうか? デザインプロセス中に下した重要なデザイン上の決定、背景の 60% の不透明度、コンテナーの 1 ピクセルのライトグレーの境界線、ピクセル単位の正確なパディングとマージンの設定などを思い出してください。開発者がこれらの重要な詳細を理解できるように、これらすべてをどのように伝えればよいでしょうか?
デザインスタイルガイドグリッドウェブページ

一貫性<br />デザインプロセスでは、大小を問わず何百、何千ものデザイン上の決定を下す必要があります。明らかな要素や隠れた要素には特定の意味が含まれ、ページの全体的なユーザーエクスペリエンスに影響を与える可能性があります。これらすべての詳細を文書化すると、設計プロセス自体よりも長い時間がかかるため、プロジェクトチームにはそのようなコストを負担できない可能性があります。
スタイルガイドでは、すべてのデザイン要素のすべてのピクセルを説明する必要はありません。必要なのは、一連の一般的なデザイン原則を要約して、プロジェクトの関係者が理解し、評価できるようにすることです。この比較的抽象的なアプローチは、デザインのアイデアや意図を反映することもできます。
「一貫性」は、インターフェース内のすべての要素が持つべき普遍的な品質です。デザインシステムの一部として、それらはすべて一貫したデザインコンセプトを反映する必要があります。ユーザーがさまざまな種類のデバイスを使用してサイトにアクセスする場合でも、視覚的なスタイルとエクスペリエンスの一貫性を保つことが重要です。
Nathan Borror 氏は 2009 年にインターフェースの調和に関する記事で次のように述べています。「優れたインターフェースの一貫性はユーザーには気づかれません。」言い換えれば、優れたインターフェースの調和によってもたらされる素晴らしい体験は、ユーザーに気づかれずに幸福感を与えるのです。
私は通常、この記事で紹介した「インターフェースハーモニーキャンバス」をスタイルガイドで使用し、プロジェクトに含まれるすべての一般的なデザイン要素を、それらのさまざまな状態や対応するコードスニペットを含めてキャンバス上に同時に表示します。
インターフェースハーモニーキャンバス

このアプローチは、比較的自由なデザインパターンライブラリの構築にも役立ちます。確かに、プロジェクトによってビジュアルデザインスタイルは異なりますが、これらのプロジェクトから抽象化されたパターンは比較的統一されたままになります。
スタイルガイドの作成はプロジェクトの終盤まで待たないでください。デザインプロセスが進むにつれて、成熟したインターフェイススタイル標準を少しずつドキュメントに追加できます。インターフェース要素を作成する際には、一貫性と標準化について慎重に考える習慣をつけるとよいでしょう。
インターフェーススタイルガイドオーバーレイ

公式 DrupalCon Chicago スタイルガイド、グローバルグリッドとインターフェースレイアウトのセクション。
コミュニケーションに焦点を当てる
デザイナーとして、私たちはデザインの細部にこだわりがちですが、デザインの本質は情報を伝えること、つまりコミュニケーションであることを忘れないでください。全体的な「デザインソリューション」は、特定のマクロな問題に対する対応でもあります。また、コミュニケーションを目的として、デザインの決定とその背後にある考え方を説明する、高レベルのスタイルガイドを作成する必要もあります。
つまり、これらの「大きな」要素を出発点としてスタイルガイドを作成し、作業を進めながら徐々に改良していく必要があります。設計プロセスが詳細段階に入る前に、全体的な要素について考え続けることができれば、その後の設計作業は非常に穏やかで調和のとれたものになると言えます。実際、このプロセスは CSS (カスケーディングスタイルシート) の原理に少し似ています。いわゆるカスケーディングスタイルシートは、マクロ構造からミクロの詳細までカスケードすることを目的としています。したがって、このスタイルガイドは「カスケーディングスタイルガイド」と呼ぶこともできます。
ウェブサイトスタイルガイドタイル

カスケードスタイルガイドを作成する<br />CSS の仕組みを思い出してください。スタイルシートの早い段階でグローバル要素のデフォルトのスタイルプロパティを定義すると、特定の要素にさらに具体的なスタイルプロパティを追加するまで、その設定はすべての子要素に継承されます。同様に、スタイルガイドでは、最も一般的で普遍的な要素から始めて、詳細な要素に特定のルールを徐々に追加していきます。
ここまで多くの内容を説明してきましたが、次はスタイルガイドを作成するための基本的な手順とプロセスを見てみましょう。
1. 概要プロジェクトの目標とソリューションの紹介を含む、プロジェクトの簡単な説明。この部分では、いくつかの主要な方向性の問題について他のメンバーとコミュニケーションをとり、プロジェクト全体の焦点と重点を理解してもらう機会があります。同時に、Web サイトに必要なスタイル、トーン、コンテンツ戦略についても簡単に説明できます。
2. レイアウトページデザインで使用するグリッドシステム、基本的なレイアウト条件、ページモジュールの配置ルールなど。いくつかのグローバルページ要素の配置や、関連する空白のルールなどを記述する必要があります。いくつかの典型的なページのワイヤーフレームプロトタイプも、このセクションにイラストとして表示されます。
3. ブランドアイデンティティには、配色、グローバルブランドイメージ、ブランドイメージの使用に関するルールや制限などが含まれます。
4. タイポグラフィ: フォントスタイル、そのフォントを選択した理由など、Web サイトで使用されているタイポグラフィスキームを紹介します。ここでは、フォントスタイルとページコンテキストの関係を示すために、代表的な具体的な図もいくつか使用します。
5. ナビゲーション: グローバルメインナビゲーション、セカンダリナビゲーション、ドロップダウンメニュー、カテゴリエントリのテキストリンク、検索など、ユーザーがサイト内を移動する際に役立つ要素はすべてこの部分に含めることができます。ここからは徐々に詳細に入っていきます。開発者が一目で理解できるように、さまざまな状態のナビゲーション要素のリンクの色や背景色などの属性の定義もここで詳しく説明する必要があります。
6. HTML 要素タイトル要素 (h1、h2、h3...)、順序付きリスト、順序なしリスト、ボタン、フォーム、フィールドセット、表など、いくつかの一般的な要素の HTML タグの使用ルール。このルールのリストは網羅的である必要はありませんが、可能な限り包括的かつ代表的なものにする必要があります。必要に応じて、フロントエンド開発者と協力してこの部分を完成させることができます。
7. 画像、音声、動画ファイルなどのメディアファイルの使用シナリオ、サイズ制限、表示比率、キャッシュ設定などに関するルール。
8. その他のリソースのこの部分に含まれるオブジェクトは、基本的に詳細レベルです。上記の 7 つのカテゴリに分類できず、カスタマイズ度が高いデザイン要素は、ここに配置できます。たとえば、特定の状況でさまざまなモジュールの表示をどのように変更するか、サイドバーの広告ルール、検索エラーの処理方法、コメントリストの表示ルール、写真コレクションの閲覧方法などです。通常、この部分では、再利用性の高いいくつかのデザインパターンを調査してまとめることができます。
9. インターフェース調整キャンバスは、上記のすべてを 1 つの大きなキャンバスに結合します。いわゆるキャンバスは画像の形式にすることもできますが、HTML ページの形式にするのが最適です。これは、コピーライティングや HTML または CSS コードコンテンツをより柔軟に伝えることができ、フロントエンド開発者がページ要素のデザインルールに従って対応するコードスニペットを直接使用できるためです。さらに、ビジュアルスタイルに関連するすべてのコンテンツを同じキャンバスに配置することで、デザイナーはページ要素の全体的な調整を簡単に確認することもできます。
10. UX ドキュメントのトピックは確かに小さくはなく、サイトマップ、ワイヤーフレームプロトタイプ、高忠実度プロトタイプ、ユーザー調査ドキュメントなど、プロジェクトでこれまでに作成された成果物を含める必要があります。これらの初期の製品成果物は、その後の設計および開発プロセスで機能、ビジュアル、およびインタラクション方法を定義する上で重要な役割を果たすことができます。
スタイルガイドの使用スタイルガイドを作成することは最初のステップに過ぎません。それを実践することが最も重要なステップです。ガイドをプロジェクト管理ツールに添付するか、プロジェクトチーム内の関連者に電子メールで送信します。誰が本当に「関連」しているか不明な場合は、プロジェクトリーダーまたは製品マネージャーにこの作業を任せてください。つまり、スタイルガイドで実現したいのは、チームでのコラボレーションであり、全員が協力してプロジェクトを完了できるようにすることです。
スタイルガイドをチームメンバーに提供した後は、プロジェクトの重要な段階でこのガイドの重要性について頻繁に話し合って、徐々にワークフローや製品文化の一部になるようにしてください。
時々、スタイルガイドが少し退屈だと感じることがあるのは認めざるを得ませんが、それは問題ありません。少なくとも、それをスタイルガイドを作成しない言い訳にすることはできません。信じてください。スタイルガイドは、デザインプロセスとプロジェクト全体の成功に重要な役割を果たします。

<<: ドラッグ可能で編集可能なガントチャートの詳細な説明（HighchartsはVueとReactで使用できます）

>>: Linux の操作とメンテナンスの基本的なスワップパーティションと LVM 管理のチュートリアル