コンテンツ
スタイルガイド：クイックリンクスタイルガイドとは何ですか？
それらはプロジェクトのどこに適合しますか？
何が含まれていますか？
どのようにスタイルガイドを作成しますか？
スタイルガイドはどのように使用しますか？
スタイルガイドは現在、最新のWebデザインワークフローの重要な部分としてしっかりと確立されています。 Webプロジェクトでのそれらの使用は、コミュニティの意識の高まりのおかげで、しばらくの間着実に増加しており、さまざまな業界の専門家がそれらの使用と有効性を示しています。したがって、サイトを最初から構築する場合でも、Webサイトビルダーを使用する場合でも、スタイルガイドを作成することが重要です。
スタイルガイドの台頭は、レスポンシブWebデザインの開発に部分的に関連していましたが、現在、デザイナーや開発者がより有能なWebやますます野心的なWebプロジェクトの要求に対処するのに役立っています（あなたが真剣に野心的である場合は、Webを確認してください）ホスティングはスクラッチまでです）。これらは、より正確で一貫性のある結果で、より迅速に設計および構築するのに役立ちます。また、誰もがアクセスできるように、共有クラウドストレージに保存することを忘れないでください。
この記事では、スタイルガイドとは何か、スタイルガイドをまとめる方法、使用方法について知っておく必要のあるすべてのことを説明します。右側のクイックリンクを使用して、目的のセクションにジャンプします。
スタイルガイドとは何ですか？
Sketch、Photoshop CCなどで作成された従来の静的なWebサイトのレイアウト構成とは対照的に、スタイルガイドは要素とコンポーネントのセットであり、一緒に使用すると、完全なレイアウトまたはそのレイアウトの一部を形成できます。正しく作成されると、スケーラブルで柔軟性があり、レスポンシブデザインを構築するための完璧なツールになります。優れたスタイルガイドの多くの例と詳細を学ぶためのリソースについては、styleguide.ioをご覧ください。
この記事では、「スタイルガイド」と「デザインシステム」という用語を同じ意味で使用します。スタイルガイドは、既存のデザインを管理し、新しいデザインを簡単に作成できるシステムを形成する場合に最も効果的であると考えています。
では、なぜ従来のワークフローから切り替えたいのでしょうか。まず、スタイルガイドを導入すると、ブラウザにすばやくアクセスでき、デスクトップWebデザインツールに費やす時間を減らすことができます。
最も便利なスタイルガイドを使用すると、ブラウザですべてのデザインコンセプトを作成し、レイアウトの構想に使用するものではなく、PhotoshopやSketchなどをアセット作成ツールに降格させることができます。
スタイルガイドはプロジェクトのどこに適合しますか？
スタイルガイドは主にWebデザイナーや開発者向けのツールですが、クライアントにとっても成果物になる可能性があります。スタイルガイドは、確立されているデザインシステムと製品を形成するパレットについての洞察をクライアントに提供します。サマンサウォーレンは、彼女のスタイルタイルでこのアイデアを詳細に調査しています。フォント、色、インターフェイス要素の形でクライアントに視覚言語を示すための方法。
クライアントに静的レイアウトのサインオフを求める従来のアプローチの問題は、これらが本質的にWebサイトがどのように見えるかの写真であるということです。もちろん、最終製品がこの写真で約束したように見えるように最善を尽くしますが、ウェブのすべての生きている部分と戦うことなく、理想的なレンダリングを作成しています。
タイプのレンダリングや間隔など、多くの小さなニュアンスが変わる可能性があります。これは、クライアントがPhotoshopのレンダリングに惑わされたように感じる可能性があります。
デザインの成果物としてスタイルガイドを使用することで、クライアントとのこれらの難しい議論を根絶できます。これらは、設計変更をそれほど面倒なことなく完了しやすくし、プロジェクトワークフローの初期段階からモジュール式の考え方を取り入れることができます。
良いスタイルガイドには何を含めますか？
理想的には、スタイルガイドは、PhotoshopやSketchを開かなくても、ページをデザインおよび構築するために必要なすべてのものを即座に提供する必要があります。フォーマットに関しては、スタイルガイドはライブHTMLであり、あなたやそれに接触する可能性のある他のデザイナーにとって簡単に保守できる方法で分類されている必要があります。
基本から始めて、良いスタイルガイドを作るものの成分を見てみましょう。ここで取り上げた見出しは、開始するためのベースとして役立ちますが、小見出しを追加して、より具体的にしてください。設計システムのこの部分を整理するための潜在的な方法論として、ブラッドフロストのアトミックデザインをご覧ください。
タイプ
これには、見出し、リスト、ブロック引用符、段落テキストを含む、活版印刷の階層全体が含まれます。また、キャプション、ドロップキャップ、その他の特別な活版印刷処理、ボタン、ナビゲーション、フォームフィールドなどのUIコンテキストなど、これらのカテゴリ内のバリエーションについても説明する必要があります。
グリッドと間隔
これには、水平レイアウトグリッドシステムと垂直レイアウトグリッドシステムの両方を含める必要があります。グリッドガイドラインを使用すると、時間のかかる間隔やマージンの調整を行うことなく、レイアウトのプロトタイプをすばやく作成して構築できます。
色
メインリンクの色、アクション、要素の色（ボタン、ラベル、アイコンなど）を含む原色パレット。このセクションでは、エラーやシステムメッセージ、検証など、理想的な設計状態以外の状況で発生する、このパレット以外の色も含める必要があります。
モジュール
モジュールは、ボタン、フォームフィールド、タブ、ナビゲーションなどの要素と、キャプション付きの画像やブログ投稿のメタデータなどの要素のコレクションで構成されます。また、一緒に機能する要素の組み合わせも含まれます。たとえば、記事の見出し、日付と紹介の段落、小さな見出しとテキストのツールチップなどです。
どのようにスタイルガイドを作成しますか？
スタイルガイドをどの程度正確にまとめていますか？ここでは、私が使用するプロセスについて説明します。
ワイヤーフレームから始める
設計システムの1行をコーディングする前に、そのために必要な部品を大まかに知る必要があります。プロジェクトの早い段階で、クライアントが作業する最初のコンテンツとアセットを提供したら、一連のワイヤーフレームスケッチを使用して設計システムの基盤を確立することを目指す必要があります。
ワイヤーフレームはスタイルガイドの秘密兵器です。ペンと紙を使用するか、ワイヤーフレームツールを使用して、時間をかけて製品のすべての画面をスケッチします。最終製品に必要になる可能性のある特定のUIデザインコンポーネントを含めます。
パターンを探す
この時点で、ワイヤーフレームスケッチを広げて、すべてを一度に表示し、確立しようとしているシステムの全体像を把握できる、広い物理的な作業領域を見つけることをお勧めします。スケッチを見て、出現するパターンに注目してください。おそらく、要素の組み合わせが頻繁に一緒に表示され、再利用可能なモジュールになる可能性がありますか？
また、出現しようとしているパターンを探します。たとえば、ブログ記事のリストは検索結果のリストと同様の形式をとることがありますが、要素が異なる順序で配置されているとします。おそらく、2つのうちの一方を他方と一致するように変更すると、ユーザーが製品の他の場所で無意識のうちに学習したパターンを読み取るのに役立ちます。
すべてをカタログ化する
ポストイットノートページマーカーのセットを使用して、参照用にワイヤーフレームページのすべての要素にラベルを付けるのが好きです。たとえば、スケッチ全体で発生するパンくずのようなモジュールには、「M01」というラベルを付けることができます。 「M」はそれがモジュールであることを示します。番号は、それが私のシステムにたまたまあるモジュールを示しています–次のモジュールはM02、M03などになります。
要素自体は他の場所で繰り返すことができるため、このブレッドクラムパターンは、製品ページとブログ記事に表示される可能性があります。どちらもM01というラベルが付いているため、プロトタイピングに関して同じ要素の複数のバージョンを設計および構築することはありません。ワイヤーフレーム。
HTMLに移動
ワイヤーフレームのカタログ化とラベル付けが完了したら、要素とモジュールのカタログを取得して、ライブHTMLスタイルガイドとして作成するだけです。
エアフィックスモデルのように考えてください。取扱説明書（ワイヤーフレームスケッチ）と、取扱説明書に対応するラベル付きパーツのセット（スタイルガイド）があります。作成したいものの概念がわかれば、必要なパーツがわかり、その時点で設計システムの構築を開始する準備が整います。
この方法で設計システムにアプローチすることの最良の部分は、新しい画面とコンポーネントを迅速に作成できることです。各シナリオは、ワイヤーフレームのスケッチだけです。スタイルガイドは、次のスケッチを描くときに、既存のコンポーネントとパターンを思い出させます。スケッチが完成したら、スタイルガイドの既製の要素を使用して、ワイヤーフレームを指示シートとして使用してすばやく作成する準備が整います。
スタイルガイドはどのように使用しますか？
技術的に言えば、スタイルガイドは決して完全ではありません。これは、プロジェクトとともに成長する進化し続けるドキュメントです。現在計画している以上に、存在する必要のある要素、パターン、モジュールのすべての組み合わせを事前に知ることは不可能です。でもそれは大丈夫です私たちのウェブの絶え間なく変化する性質に忠実に、スタイルガイドはあなたの製品の現在の状態と同じくらい完全であることができるだけです。
（ほとんど）完全な状態のスタイルガイドは、構築している製品の包括的な視覚言語のリファレンスです。これは、新しい機能がどのように形作られるか、およびそれらが採用するルックアンドフィールを視覚化できることを意味します。また、テスト済みの要素とコンポーネントの生きたライブラリであり、新しい画面や製品の一部をすばやく構築するために使用できるため、あらゆる規模のプロジェクトを迅速に構築するための最も効率的な方法です。
スタイルガイドが当初の概念を超えて維持されることが不可欠です。特定の時点での製品の設計システムのスナップショットではなく、最新の状態を維持する必要があります。これは、プロジェクトの視覚的な用語集である必要があります。スケッチ後に設計上の決定が下されるたびに参照するエンティティです。すべての新しいコンポーネントとモジュールはそのDNAから作られているため、ユーザーエクスペリエンスの観点からは、新しい部分は完全なブランド全体像の一部として一貫して見えます。
これまでWebプロジェクトでスタイルガイドを使用したことがない場合は、次のプロジェクトでスタイルガイドを試して、設計、構築、およびプロトタイプ作成を迅速に行うための違いを確認してください。練習すれば、作成が簡単になり、スタイルガイド内にパターンを見つけて、次のスタイルガイドの作成プロセスをスピードアップするために再利用することもできます。
便利なスタイルガイドは、視覚的な参照の機能を超えています。それはあなたの製品のDNAになり、現在および将来のデザインのすべての部分が、製品の他の部分の一貫したスタイルと特性を生み出すために生まれます。
この記事はもともと ネットマガジン. ここで購読してください。
