ユーザーインターフェイススタイルガイド：コンポーネントベースと画面ベース
現在、社内でいくつかの創造的なプロセスと出力を更新しています。私たちが実験してきた項目の1つは、開発者とパートナー向けのUIスタイルガイドを生成する方法です。
過去には、アプリケーションまたはWebサイトの各画面について、非常に広範なドキュメントを作成してきました。ピクセルの完璧な寸法と、誰もが以前に見た吹き出しを使用した典型的なスクリーンショット。作成するのに長い時間がかかり、ほとんどの場合、非常に早く古くなります。
UIコンポーネントやパターンを実装する方法を指定するコンポーネントベーススタイルガイドを実装するのではなく、すべての単一のUI画面に特定の指示を適用する必要があります。これにより、効率が向上し、開発チームにより適切なドキュメントが提供され、更新を維持しやすくなります（特にレスポンシブデザインの場合）。
私たちの目標は、最終的に静的なPDFスタイルガイドの作成を停止し、HTMLバージョンを作成することです。しかし、最初のステップは、PDFバージョンを作成し、ゆっくりとHTML。
これを1つの主要なプロジェクトで試してみましたが、かなり成功しました。静的なPDFコンポーネントベーススタイルガイドを作成し、UI開発者に各コンポーネントのHTMLバージョンを作成してもらいました。2番目の開発チームがページを作成するときにHTMLドキュメントを使用したのではありません。マイナーな問題ですが、主に開発者がスタイルガイドを守らず、独自のことをしていることが原因です。
ただし、これを小さなプロジェクトで試しましたが、開発者が理解するのは困難でした。 70％成功したと思いますが、一部のページでフィードバックや指示を提供するために、設計者は開発者とより多くの時間を費やす必要がありました。これは、開発者側のスキルセットの問題である可能性があります。
この特定のトピックについて話しているリンクはたくさんありますが、同じ状況で他の人々が何を経験しているのかを見たかったのです。役に立ちましたか？改善が見られますか？あなたが遭遇した問題は？
UI要素のPSDを作成してみませんか。たとえば、これは Teehan + Lax によってサイト Medium で作成されたUIガイドです。
画面ベースのスタイルガイドを実行することはお勧めしませんが、各ビューの.pngビジュアルコンプを実行することをお勧めします。表記はカスタマイズされた要素を指しますが、ほとんどのビューは中央のオンラインスタイルガイドを参照することで作成できます。
私は、コンポーネントベースの、生きている（HTML）UIスタイルガイドを段階的に導入しています。これは要素タイプ（クイックアクセス用のアンカーメニュー付き）ごとに配置され、各要素には対応するHTMLコードがあります。
設計と開発のギャップを埋める上で、シニアのフロントエンド開発者がいることは非常に重要です。
インターフェイスを設計するときに、コンポーネントを分離して表記します。コンポーネントはその後、フロントエンド開発者によって作成され、完成したコンポーネントはオンラインでスタイルガイドに入ります。 QAを含め、すべてのチームが使用できる単一の「スターター」スタイルシートがあります。
QAとチームリーダーとのミーティングで、チームリーダーが新しい開発について確実に把握できるようにしています。また、時々フロントエンドの開発者とペアを組んで、コンポーネントを調整して作り上げます。新しいスタイルを作成するのではなく、既存のスタイルから新しいインターフェイスを作成するようにしています（16のテキストスタイル（2つのカスタムフォントから作成）、7つのメインカラー、6つのグレーシェード、およびシステムの赤、緑、青があります。）
最初のドラフトにはフォントスタイル、色、およびいくつかの要素しかありませんが、このプロセスと実際のオンラインスタイルシートは多くのプロセスを合理化し、製品全体の視覚的な品質と一貫性は非常に顕著です。私の視覚表記の手順は非常に簡単になり、場合によっては不要になりました。
私の開発チームは、あなたが言及する両方の目的を果たす生活様式ガイドを作成します。 PhotoshopファイルやPDFガイドなどのようなものは一切必要ありません。これらはすぐに古くなり、制作媒体（HTML）に変換する作業が必要になるためです。
HTMLを使用すると、すべてのコンポーネントの適切な使用法を示すとともに、全体的なページスタイルの例となる生きたテンプレートを作成できます。私たちはすべての開発プロジェクトのショーケースと出発点の両方として私たちのものを使用します。プロダクションメディアをスタイルガイドとして使用する最も良い点は、開発者がテンプレートを調べて適切な方法を確認するのが簡単なことです。スタイルガイドにスタイルガイドを実装させると、「ドッグフーディング」のメリットが得られ、スタイルが本番環境に対応していることが検証されます。
全体的なスタイルよりもコンポーネントに重点を置いていますが、 Bootstrapドキュメンテーションサイト は、リビングスタイルガイドの素晴らしい例です。
1つの考えは聴衆です。あなたは開発者について言及していますが、QAチームもいますか？要件を書いている人はどうですか？
他のオーディエンスメンバー、または「ドキュメント」のユーザーに言及する理由は、彼らのニーズが異なる可能性があるためです。
私が始めたときは、Word/.chmファイル（テキストベース）を使用していました。私のチームでは、重要な要素を取り、それらをvisio（psdsはこれに最適です）を介してビジュアルに変換し、カスタムコンポーネントを作成し、スタイル、標準、およびビジュアルアイデンティティに対処するための詳細に注釈を付けました。
これにより、BA、プロダクトマネージャー、QA、および開発者は、設計したもののビジュアルコンプを作成できます。
最終的には、すべてのHTMLに移行して、いくつかの静的な注釈付きガイドを作成します。したがって、どのようにして到達しても、コードを再利用することではなく設計標準を理解することを目的とする人がいる場合、静的出力には利点があります。