スタイルガイドの作成方法:UIフレームワークから始める

AdRollのUXデザイナーとのやり取りとその理由と学んだことに関するQ&A

このブログ投稿は、スタイルガイドの作成から作成まで、チームに成熟したUIフレームワークを提供し、最終的には製品のユニークな声とトーンを抽出するまでの、シリーズガイドの最初の記事です。

こんにちは! AdRollのUX研究者であるArya Srinivasanです。 AdRollのネイティブ広告API製品に取り組んでいるUXデザイナーのMason Leeと話をして、AdRollのスタイルガイドを開発している彼の仕事について話しました。

Arya:物事を始めるために、なぜスタイルガイドプロジェクトを始めたのですか?解決が必要な問題は何でしたか?

メイソン:問題は、製品間および単一の製品内の両方での設計の不一致でした。たとえば、どこでも同じように見えるが、実際には色、フォントの太さ、境界線のスタイルが異なるボタン。

ボタンは、個々のデザイナーのモックとアプリケーションで異なります。

AdRollの急速な成長は、スピードに重点を置いていたことを意味しました。現在、私たちは複数の製品を持つ大企業です。デザイナーとして、デザインを通して製品を提示する方法の一貫性を強調することが重要だと思います。

設計に集中するには、まず既存の不整合を修正する必要がありました。ここでのUXデザイナーは通常1つまたは2つの製品に焦点を当てているため、私たちのチームにすべての製品の設計について考えさせるために、UIガイドラインを議論する「UIスマックダウン」ミーティングを毎週開催します。

各会議では、設計の矛盾を調べて、単一の設計を決定しました。いくつかの会議の後、デザイナーから正しい色やパディングなどについての質問がありました。すべての回答を含む中央ドキュメントが必要だったため、デザイナーのリソースとしてSketchでUIフレームワークを構築しました。不足しているコンポーネントがあることに気付いたとき、または新しいコンポーネントを追加したいときはいつでも、それについて話し合い、それをマスターUIフレームワークファイルに追加します。

Arya:AdRollをデザイン中心の会社にしたいとおっしゃいましたが、それはどういう意味ですか?

メイソン:AdRollが競争力のある差別化要因となるようにデザインを最前線に置き、顧客がニーズを本当に解決する適切に設計された製品として認識されるようにしたいと思います。

Arya:スタイルガイドの当面の目標は何でしたか?このプロジェクトの長期的なビジョンはありますか?

メイソン:私の短期的な目標は、UIコンポーネントを標準化することにより、設計者間で設計の一貫性を保つことです。デザイナーがデザインについて話すとき、同じ言語を話してほしい。たとえば、モーダルまたはドロップダウンでは、エンジニアはデザイナーの提案に基づいて構築します。設計要素が設計者間で異なる場合、エンジニアは同じ要素を異なる方法で作成します。

私の中期目標は、AdRollの内部UIコンポーネントライブラリ「RollUp」のコードでこのスタイルを定義することです。定義済みのスタイルシートがある場合、エンジニアが行う必要があるのはそれをコピーすることだけです。デザイナーとエンジニアは同じ言語を話すことができます。

Arya:スタイルガイドの作成中に問題が発生しましたか?それらをどのように解決しましたか?

メイソン:最大のハードルの1つは、製品チーム全体の人々から賛同を得ることでした。全員が参加できるように、議題の明確なリストを記載した会議を開催しました。製品間でドロップダウンメニューが異なるなど、設計の不整合を示しました。視覚的な証拠を提供することで会話が始まり、最終的に人々は製品に関心を持ち、一貫性を求めます。

もう1つの課題は、ルールを決定することでした。コンポーネントの標準化について話すとき、それはあらゆるコンテキストで、どこでも適用できるはずです。すべてのエッジケースについて考える必要があります。コンポーネントは柔軟である必要がありますが、同時に十分に機能が完全であるため、簡単に使用、消耗、および適用できます。

スタイルガイドの柔軟性の例を次に示します。このジオターゲティングドロップダウンのパディングに関する最初の決定は大きすぎたため、このユースケースを考慮してスタイルガイドを修正しました。前(左)、後(右)

私は実際にもう一つの挑戦を呼びたいです!命名は難しい場合があります。前にも言ったように、デザイナーとエンジニアに同じ言語を話してもらいたいのですが、これは慎重に行う必要があります。ドロップダウンのような単純なものについては、実際にはいくつかのバリエーションがあります(1つはチェックボックス付き、もう1つはチェックボックスとテキストブロック付き、もう1つは標準のドロップダウンメニューです)。 3つの異なるドロップダウンにどのように名前を付けるので、どれがどれであるかが普遍的に理解されます

セマンティクスは挑戦的です。私たちの命名は理にかなっている必要があります。名前を決める際に、いくつかの素晴らしいコラボレーションツールを使用してコンセンサスを得ました。たとえば、Wakeは、Slackとの統合を通じて、未解決の質問や問題をすべて収集し、ソリューションについて話し合い、UI Smackdownの決定を監視し、より大きな製品チームとの会話を継続するのに役立ちました。

Wakeを使用してUIの不整合を議論し、コンポーネントルールで協力した方法。

Arya:スタイルガイドを作成する際に考慮しなければならないAdRollのUIにユニークな点はありますか?

メイソン:私たちのダッシュボードは非常にデータ量が多いです。さらに、キャンペーン作成フローにより、広告主はプルするための多くのレバーを利用できます。経験の浅い広告主のニーズを満たすため、効果的なデフォルト設定を目指しています。当社の製品では、コンポーネントは複雑な機能を備えていますが、見た目はシンプルで使いやすいです。

Arya:スタイルガイドの作成を開始したときに知ってほしいことはありますか?

メイソン:すべての製品が最初からどのように機能するかについて、より深く理解してほしい。たとえば、毎週のデザイン批評会議で各製品の動作を共有しているため、SendRoll(電子メールのリターゲティング製品)が表面上でどのように機能するかは知っていますが、SendRollのデザイナーの深い知識はありません。製品の微妙な理解は、スタイルガイドに取り組む際に間違いなく役立つと思います。なぜなら、潜在的なすべてのユースケースをよりよく理解できるからです。

Arya:では、デザイナーのプロセスとその製品についての共通の理解を達成するための最良の方法は何ですか?

メイソン:製品の出荷に真剣に取り組んでいますが、私たちは毎週のデザイン批評会議でデザインプロセスを共有しています。各会議の後にループを閉じることについて、私たちのほうが良いと思います。デザイナーは会議からのフィードバックをどのように取り入れましたか?製品が出荷されて広告主によって使用されると、分析から得た洞察に基づいて、広告主が製品をどのように使用しているかを共有することもできます。

Arya:このプロジェクトの作業中に参照したリソースはありましたか?

メイソン:ブラッドフロストのアトミックデザインを読み、オンラインで調査し、MeetUpsで他のUXデザイナーと話をしました。特定の会社が優れたデザインを実践していると思われる場合、彼らはオンラインのどこかでスタイルガイドについて話している可能性が高いです。

Arya:スタイルガイドのステータスはどうですか?

メイソン:さまざまな製品で使用するすべてのUI要素をキャプチャして再検討し、それらをUIデザインの真実の源泉となる基盤、コンポーネント、パターン、ページにグループ化しました。

Dribbbleで基盤とコンポーネントのUI要素を確認できます。アトミックデザインに精通している場合は、「原子」と「分子」のレベルを「コンポーネント」と呼ぶものにグループ化しました。たとえば、フォームタイトルと入力を組み合わせると、完成したフォームを他のデザイナーが簡単にコピーできますフィールド。

読んでくれてありがとう!

スタイルガイドを作成する際に、これらの今後のトピックに注目してください。

  • UIフレームワークがコラボレーションを簡素化する方法
  • UIフレームワークに基づいた新しいスタイルシートの開発
  • スタイルガイドWebサイトの構築方法
  • 私たちの声とトーンを見つける旅