ウェブサイトのスタイルガイドを作成する方法

旅行から戻って、すべて順調です。 5日間はとても短いです。振り返ってみると、青い海と空、そして白い砂浜しか見えませんでした。興味のある方は、私のWeiboで風景写真をご覧ください。

幸いなことに、帰ってきてから普段の生活に適応できないと感じることはありませんでした。両者の違いは「状態1」と「状態2」だけです。すぐにやるべきことをやり始めると、気持ちが楽になります。前回の記事は「iOS Wow Experience - 第6章 インタラクションモデルと革新的な製品コンセプト-」の前半でした。今日は、ウェブサイトのスタイル ガイドを作成する方法についての短い記事を共有したいと思います。本文に入りましょう、カラン、カラン。

スタイル ガイドとは何でしょうか? 簡単に言えば、ストーリーを伝える方法を説明するドキュメントです。コピーの書き方、フォーマット方法、視覚要素やインタラクティブな方法の作成方法などの標準を確立します。スタイル ガイドは新聞などの印刷業界で生まれました (The Guardian のスタイル ガイドを参照)。Web でも大きな価値があります。

従来の印刷物であっても、インターネットであっても、最も重要なのは「コンテンツ」です。スタイル ガイドの最終的な目標は、コンテンツを明確で一貫した視覚スタイルで提示することです。 BBC の Global Experience Language (GEL) は、Web サイトのスタイル ガイドの優れた例です。まず簡単に理解するために、ページの右側にある「GEL Web スタイルガイドのダウンロード」から PDF ドキュメントをダウンロードすることをお勧めします。

システムについての物語

優れたスタイル ガイドはサイトの自伝のようなもので、他のユーザーがサイトとやり取りしてサイトをさらに理解し、拡張することができます。スタイル ガイドには、Web サイト プロジェクト中に関係者が蓄積した知識と経験が含まれ、わかりやすく説明されている必要があります。また、プロジェクト プロセスにおけるさまざまなデザイン アイデアをデザイン システムのレベルで解釈し、チーム内の他のデザイナーや将来のチームがプロジェクトをよりよく理解して作業を開始できるようにします。

デザイナーとして、これらは本能的に知っているべきことではないでしょうか。なぜドキュメントに含める必要があるのでしょうか。実際の作業では、デザイナーがすべてを処理することは不可能です。たとえば、ビジネスリサーチ、コンテンツ戦略、ユーザーエクスペリエンス、技術開発、QA、展開などの側面に関与する人やチームは多数存在する可能性があります。必要に応じて、Webサイトの製品の特性をより正確に理解できるように、適切な段階でドキュメントを対応する協力部門に渡す必要があります。

通常、Web サイトのインターフェース設計作業が完了すると、インタラクション デザイナーとビジュアル デザイナーがスタイル ガイドの作業を開始します。次のようなシナリオに心当たりがあるでしょうか。Photoshop または Fireworks で完璧なビジュアル プロトタイプを作成しました。すべてのピクセルが完璧で、行間隔は適切に制御されており、配色は適切で意味があります。いよいよ、フロントエンド開発者にデザインを引き渡すときです。デザインの詳細を開発者にどのように伝えますか? デザイン プロセス中に下した重要なデザイン上の決定を思い出してください。背景の 60% の不透明度、1 ピクセルのライト グレーの境界線、ピクセル単位の正確なパディングとマージンの設定... これらの重要な詳細を開発者に理解してもらうには、どのように伝えればよいでしょうか?

一貫性

デザインプロセスでは、大小を問わず何百、何千ものデザイン上の決定を下さなければならない場合があります。明白な要素や隠れた要素には特定の意味が含まれ、ページの全体的なユーザー エクスペリエンスに影響を与える可能性があります。これらすべての詳細を文書化すると、設計プロセス自体よりも長い時間がかかるため、プロジェクト チームにはそのようなコストを負担できない可能性があります。

スタイル ガイドでは、すべてのデザイン要素のすべてのピクセルを説明する必要はありません。必要なのは、一連の一般的なデザイン原則を要約して、プロジェクトの関係者が理解し、評価できるようにすることです。この比較的抽象的なアプローチは、デザインのアイデアや意図を反映することもできます。

「一貫性」は、インターフェース内のすべての要素が持つべき普遍的な品質です。デザイン システムの一部として、それらはすべて一貫したデザイン コンセプトを反映する必要があります。ユーザーがさまざまな種類のデバイスを使用してサイトにアクセスする場合でも、視覚的なスタイルとエクスペリエンスの一貫性を保つことが重要です。

Nathan Borror 氏は 2009 年にインターフェースの調和に関する記事で次のように述べています。「優れたインターフェースの一貫性はユーザーには気づかれません。」言い換えれば、優れたインターフェースの調和によってもたらされる素晴らしい体験は、ユーザーに気づかれずに幸福感を与えるのです。

私は通常、この記事で紹介した「インターフェース ハーモニー キャンバス」をスタイル ガイドで使用し、プロジェクトに含まれるすべての一般的なデザイン要素を、それらのさまざまな状態や対応するコード スニペットを含めてキャンバス上に同時に表示します。

このアプローチは、比較的自由なデザイン パターン ライブラリの構築にも役立ちます。確かに、プロジェクトによってビジュアル デザイン スタイルは異なりますが、これらのプロジェクトから抽象化されたパターンは比較的統一されたままになります。

スタイル ガイドの作成はプロジェクトの終盤まで待たないでください。デザイン プロセスが進むにつれて、成熟したインターフェイス スタイル標準を少しずつドキュメントに追加できます。インターフェース要素を作成する際には、一貫性と標準化について慎重に考える習慣をつけるとよいでしょう。

公式 DrupalCon Chicago スタイル ガイド、グローバル グリッドとインターフェース レイアウトのセクション。

コミュニケーションに焦点を当てる

デザイナーとして、私たちはデザインの細部にこだわりがちですが、デザインの本質は情報を伝えること、つまりコミュニケーションであることを忘れないでください。全体的な「デザインソリューション」は、特定のマクロな問題に対する対応でもあります。また、コミュニケーションを目的として、デザインの決定とその背後にある考え方を説明する、高レベルのスタイル ガイドを作成する必要もあります。

つまり、これらの「大きな」要素を出発点としてスタイル ガイドを作成し、作業を進めながら徐々に改良していく必要があります。設計プロセスが詳細段階に入る前に、全体的な要素について考え続けることができれば、その後の設計作業は非常に落ち着いてまとまりのあるものになると言えます。実際、このプロセスは CSS (カスケーディング スタイル シート) の原理に少し似ています。いわゆるカスケーディング スタイル シートは、マクロ構造からミクロの詳細までカスケードすることを目的としています。したがって、このスタイル ガイドは「カスケーディング スタイル ガイド」と呼ぶこともできます。

カスケードスタイルガイドの作成

CSS がどのように機能するかを思い出してください。スタイルシートの早い段階でグローバル要素のデフォルトのスタイル プロパティを定義すると、特定の要素にさらに具体的なスタイル プロパティを追加するまで、その設定はすべての子要素に継承されます。同様に、スタイル ガイドでは、最も一般的で普遍的な要素から始めて、詳細な要素に特定のルールを徐々に追加していきます。

ここまで多くの内容を説明してきましたが、次はスタイル ガイドを作成するための基本的な手順とプロセスを見てみましょう。

1. 概要

プロジェクトの目的と解決策を含む、プロジェクトの簡単な説明。この部分では、いくつかの主要な方向性の問題について他のメンバーとコミュニケーションをとり、プロジェクト全体の焦点と重点を理解してもらう機会があります。同時に、Web サイトに必要なスタイル、トーン、コンテンツ戦略についても簡単に説明できます。

2. レイアウト

ページデザインで使用するグリッドシステム、基本的なレイアウト条件、ページモジュールの配置ルールなど。いくつかのグローバル ページ要素の配置や、関連する空白のルールなどを記述する必要があります。いくつかの典型的なページのワイヤーフレーム プロトタイプも、このセクションにイラストとして表示されます。

3. ブランドアイデンティティ

これには、配色、グローバルブランドイメージ、ブランドイメージの使用に関するルールや制限などが含まれます。

4. タイポグラフィ

フォント スタイルやそのフォントを選択した理由など、Web サイトで使用されている書体のスキームについて説明します。ここでは、フォント スタイルとページ コンテキストの関係を示すために、代表的な具体的な図もいくつか使用します。

5. ナビゲーション

グローバル メイン ナビゲーション、セカンダリ ナビゲーション、ドロップダウン メニュー、カテゴリ エントリのテキスト リンク、検索など、ユーザーがサイト内を移動する際に役立つ要素はすべて、コンテンツのこの部分に含めることができます。ここからは徐々に詳細に入っていきます。開発者が一目で理解できるように、さまざまな状態のナビゲーション要素のリンクの色や背景色などの属性の定義もここで詳しく説明する必要があります。

6. HTML要素

見出し要素 (h1、h2、h3...)、順序付きリスト、順序なしリスト、ボタン、フォーム、フィールドセット、表など、いくつかの一般的な要素に対する HTML タグの使用ルール。このルールのリストは網羅的である必要はありませんが、可能な限り包括的かつ代表的なものにする必要があります。必要に応じて、フロントエンド開発者と協力してこの部分を完成させることができます。

7. メディアファイル

画像、オーディオ、ビデオ ファイルの使用シナリオ、サイズ制限、表示比率、キャッシュ設定などのルールが含まれます。

8. その他のリソース

この部分に関係するオブジェクトは、基本的に詳細レベルです。上記の 7 つのカテゴリに分類できない、カスタマイズ度の高いデザイン要素は、ここに配置できます。たとえば、特定の状況でさまざまなモジュールの表示をどのように変更するか、サイドバーの広告ルール、検索エラーの処理方法、コメント リストの表示ルール、写真コレクションの閲覧方法などです。通常、この部分では、再利用性の高いいくつかのデザイン パターンを調査してまとめることができます。

9. インターフェース調整キャンバス

上記のすべてを 1 つの大きなキャンバスにまとめます。いわゆるキャンバスは画像の形式にすることもできますが、HTML ページの形式にするのが最適です。これは、コピーライティングや HTML または CSS コード コンテンツをより柔軟に伝えることができ、フロントエンド開発者がページ要素のデザイン ルールに従って対応するコード スニペットを直接使用できるためです。さらに、ビジュアル スタイルに関連するすべてのコンテンツを同じキャンバスに配置することで、デザイナーはページ要素の全体的な調整を簡単に確認することもできます。

10. UXドキュメント

この部分のトピックは確かに小さくはなく、サイトマップ、ワイヤーフレーム プロトタイプ、高忠実度プロトタイプ、ユーザー調査ドキュメントなど、プロジェクトでこれまでに作成された成果物を含める必要があります。これらの初期の製品成果物は、その後の設計および開発プロセスで機能、ビジュアル、およびインタラクション方法を定義する上で重要な役割を果たすことができます。

スタイルガイドを使用する

スタイル ガイドを作成することは最初のステップに過ぎません。それを実践することが最も重要です。ガイドをプロジェクト管理ツールに添付するか、プロジェクト チーム内の関連者に電子メールで送信します。誰が本当に「関連」しているか不明な場合は、プロジェクト リーダーまたは製品マネージャーにこの作業を任せてください。つまり、スタイル ガイドで実現したいのは、チームでのコラボレーションであり、全員が協力してプロジェクトを完了できるようにすることです。

スタイル ガイドをチーム メンバーに提供した後は、プロジェクトの重要な段階でこのガイドの重要性について頻繁に話し合って、徐々にワークフローや製品文化の一部になるようにしてください。

時々、スタイル ガイドが少し退屈だと感じることがあるのは認めざるを得ませんが、それは問題ありません。少なくとも、それをスタイル ガイドを作成しない言い訳にすることはできません。信じてください。スタイル ガイドは、デザイン プロセスとプロジェクト全体の成功に重要な役割を果たします。

この記事はもともとこのサイトでまとめられたものです。転載する場合は、次のことを明記してください: この記事はBe For Webから提供されています

オリジナルの英語:

http://www.netmagazine.com/features/create-website…

翻訳者情報: c7210 - ユーザーエクスペリエンスデザインおよびコードプレーヤー。現在、Dianping.com の UED 部門で働いています。

ウェブサイトのスタイルガイドを作成する方法

キーワード: 方法、ウェブサイト、作成、スタイル ガイド、旅、すべて、ウェブマスター、ウェブサイトのプロモーション、収益化