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

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

推薦する

NodeサイトのForever+nginx導入方法例

私は最近、最も安い Tencent クラウド サーバーを購入しました。これは主に、Web テクノロジ...

dockerカスタムイメージでphp7をビルドする方法

まず、簡単な Docker インストールを実行します。イメージをカスタマイズするには、ベースイメージ...

WeChatアプレットは左にスワイプしてリスト項目を削除する効果を実現

この記事では、WeChatミニプログラムの具体的なコードを共有し、左にスワイプしてリスト項目を削除す...

jsのディープコピーを理解しましょう

目次js ディープコピーデータ保存方法浅いコピー/深いコピーとは何か一般的なディープコピーの実装1....

Linux lnコマンドの使用

1. コマンドの紹介ln コマンドは、ファイルのリンクを作成するために使用されます。リンクは、ハード...

Linux の MySQL 設定の変更が有効にならない問題の解決方法

背景AWS EC2 を使用するプロジェクトサービスがあります。セキュリティとパフォーマンスを考慮して...

JavaScript の document.activeELement フォーカス要素の紹介

目次1. デフォルトの焦点はボディにあります2. テキストボックスのフォーカスを手動で取得する3. ...

フレックスインサイドボタンの垂直方向の中央揃えが中央揃えにならない問題の解決方法

問題の説明ボタンのスタイルはアイコン + テキストです。フレックス レイアウトを使用して垂直方向に中...

ページデザインにおけるテーブルとdivの適切な適用についての簡単な説明

この記事の冒頭で、以前書いた入門記事の間違いを訂正したいと思います。初心者を再び誤解させないように、...

LinuxにNginxをインストールする正しい手順

序文私のように、Java バックエンドに勤勉な人であれば、多数のプロジェクト機能を実装することに加え...

フロントエンドJSサンドボックスを実装するいくつかの方法についての簡単な説明

目次序文iframeはサンドボックスを実装しますdiffメソッドを使用したサンドボックスの実装プロキ...

thead、tfoot、tbodyを使用して表を作成します

これらの 3 つのタグを間違った方法で使用して、タイトルを表に沿わせたり、tbody の高さを固定し...

DockerでPython環境をパッケージ化するプロセスの詳細な説明

docker パッケージング Python 環境の手順は次のとおりです。 1 pip listの下に...

Linux で特殊文字のファイル名やディレクトリを削除する方法

inode番号でファイルを削除するまずls -iを使用して、削除するファイルのinode番号を見つけ...

Vue の v-model ディレクティブと .sync 修飾子の違いの詳細な説明

目次vモデル.sync微妙な違い機能シナリオを要約します。 vモデル <!--親コンポーネント...