Design Guidelines & Atomic Design ー 社内勉強会を開催しました。

この記事は、2018-02-09に他ブログで書かれた記事の転載です

こんにちは。デザイナーの上田です。来週はDesign Systems Virtual Summit 2018が始まりますね。今から楽しみです。

さて、皆さんの会社のデザイン組織には、デザインのカラーやタイポグラフィー、ナビゲーションや情報設計などの共通の方針はありますか？

クラウドワークスでは5年ほど前にTwitter BootstrapをベースにしたUIライブラリを作って運用を始めました。

しかし、私を含むデザイナーの知見不足や組織編成など、様々な事情が重なりプロダクト開発の中で運用されなくなってしまい、サービス全体で部分的に最適化されたスタイルやコンポーネントが乱立するプロダクトになってきてしまっています。

「絶妙なバランスでプロダクトが成り立っている」「ガイドラインなんて無くてもなんとかなってるじゃん！」という視点もある一方で、プロダクトやチームの課題として、ちぐはぐなデザインの提供による使用感の低下や、デザインパターンのデザイナー同士の共通ルールの不足によるコミュニケーションコストの増加が続いており、クラウドワークスではこうした現状にメスを入れるべく、昨年の10月〜正式にデザインガイドラインのプロジェクトを立ち上げました。

特にデザイナー同士の共通ルールの不足に関しては、例えば中途デザイナーから既存のページのデザイン意図について質問を受けても説明がしづらく、口頭での昔話の伝承みたいになってめちゃくちゃコストがかかるので、ガイドラインの導入によって生産性をグイっと高められるんじゃないかと期待が高まっています。

（既存のボタンのデザインの種類を収集したインターフェースインベントリーの一部）

 （策定中のデザインガイドラインの一部。区切りの良いタイミングで外部にも公開したいと思っています。）

プロジェクト自体は現在も粛々と進めているのですが、そんな中、今年の1月からクラウドワークスのデザイン組織に新しいメンバーが4名増えたので、チームでデザインガイドラインとは何かについて共通の理解を持つ必要があると感じ、デザインガイドライン勉強会を開催しました。

今回は、その勉強会の内容をダイジェストで紹介したいと思います。

デザインガイドラインとは何か？

シンプルに、デザイン（色、文字、レイアウトなど）に関するガイドラインのことです。

スタイルガイド、デザインシステム、デザイン言語システム（DLS）といった呼び方もあり、各名称のカバー範囲の違いはありつつも、明確な線引きはよく分からないというのが正直なところです。

ただ、おそらく共通しているのは、サービス全体で一貫したデザインの提供を目指すことと、サービスとしての標準的なデザインのルールを定めることによって、チームのコミュニケーションの効率化を目指すことの大きく2点だと考えています。

その上で、会社やサービスのフェーズ、チームのカルチャーによって、例えばSketch上に定義されたスタイルガイド的なもので事足りるのか、動的なCSSフレームワークの構築とセットでデザインのワークフローをシステム化しないと運用しづらいのか、といった違いが生まれてくるのだろうと思います。

導入のメリットは色々ありますが、今回の勉強会では、大まかに分けて以下3つのメリットを挙げてガイドラインの必要性を説明しています。

どんなデザインガイドラインを作ろうとしているか

各コンポーネントの名称は変わってしまうかもしれませんが、クラウドワークスで作っているガイドラインの全体像は以下のような構成になっています。特徴は、デザイン原則、アクセシビリティ、情報アーキテクチャについてのパートを含んでいる点です。

クラウドワークスは仕事マッチングサイトという性質上、機能数や条件分岐も相当に多く、情報アーキテクチャの点である程度の方針を立てないとサービス全体の一貫性を持たせづらいのではないかという点と、フリーランスのエンジニア、デザイナーから主婦や在宅ワーカーなど幅広い層をターゲットとして捉えているので、アクセシビリティへの配慮を念頭に置いて今後のデザインの提供を行っていくべきなのではないかという意思を込めています。

ただ、もちろんこういった全てのパートを完璧に構築するのは非常に長い期間を要しますので、こういった全体感は持ちつつも、あくまで段階的にサービスに反映していけるマイルストーンを設計してプロジェクトの進行に取り組んでいます。

デザインガイドラインをAtomic Designの視点で見てみる

一般論としてのAtomic Design is 何？の話の他に、各社のデザインガイドラインをAtomic Designの視点で見てみる、というコンテンツを考えました。

デザインガイドラインの事例調査としてマテリアルデザインやAtlassian Design Guidelinesなどの研究をしていたのですが、AtlassianのようにAtomic DesignのAtomレベルから細かく定義しているケースもあれば、AirbnbのようにOrganismsレベルで定義してコンポーネントの組み合わせ方法にあえて制約を設けているケースもあります。

そのため、それぞれのパターンについての考察を共有しガイドラインとAtomic Designの組み合わせ方についての理解を深めました。これはやってみて面白かったので、Atomic Design的な話に興味がある方にはおすすめです。

以上、社内勉強会の内容をダイジェスト的に書いてみました。こちらのスライドが実際に勉強会で使用した資料です。よければご覧ください。

勉強会を開催してみてよかったことは、勉強会の最後に、各々の感想をフィードバックする場を設け、「堅牢性と拡張性のバランスの取り方はどうすべきか？」「マテリアルデザインはなぜ紙の概念を取り入れたのか」などメンバー同士でガイドラインについてディスカッションができたことです。

個人的にデザインガイドラインを作っていて強く感じるのは、ガイドラインそのものは単なるルールブックであり、それを武器として戦場で戦うプロダクトチームの中でいかにワークさせられるかという仕組み作りやカルチャーの面がとても重要だなということです。

そのためにも、デザイナー同士、プロダクト組織のメンバーとのコミュニケーションを丁寧に行なっていき、より良いプロダクトの提供に活かしていきたいと思います。

そんなクラウドワークスのUXデザイングループでは、デザイナーを募集してます。もしご興味あれば是非お気軽にご連絡いただけるとうれしいです。

ちなみに。今月はクラウドワークス初となる全社事業部参加のMeetupを開催予定です。もし弊社の事業に興味ある方がいらっしゃれば、ぜひご参加ください。

最後まで読んでいただきありがとうございました！