ランサーズ等のサービスを開発・運用する中で得た知識やノウハウを紹介しています。

thumbnail

Labels:  デザイン 投稿者:adachin

デザインシステムってなに? ~“Design Systems”を読んで~

はじめまして!ユーザーファーストデザイン室の加藤です。主にランサーズのフロントエンド開発を担当しています。

今回は現状のランサーズのデザイン/フロントエンド開発に関する課題感から、ある本を読んだので、そちらについて共有します。

現状ランサーズで感じている課題感

ランサーズに入社して三ヶ月ほどたちますが、よりユーザーに寄り添ったサービスにしていくためには以下の課題を解決することが必要ではないかと感じました。

機能や場面によってデザインが違う

機能や場面によって、ページのビジュアルが異なるケースが散見されました。ランサーズとしてユーザーさんに伝えたいこと(もしくはブランド)が存在するにも関わらず、統一しきれていない部分が発生してしまっていました。これはもうすぐ10年目に突入するサービスであることを考えるとある程度仕方がないことかなとも思うのですが、私たちの想いや考えをユーザーに強く感じていただくために、よりシンプルで統一された世界観を作っていきたいと思っています。

ページや担当者によってデザインやコンテンツのルールが違う/ルールがない

例えば、バナーを挿入できる箇所などに明確なルールがないと、担当者のさじ加減によって配置される場所やサイズが異なる結果となってしまいます。また、グローバルナビゲーションやサイドナビゲーションなど、大きなナビゲーションは比較的目立つので、訴求したいなにかが発生した場合、ルールがなければなんでもかんでもそこに追加されることになるでしょう。ビジュアルデザインのルールに限らず、表示/配置するコンテンツに関してもルールを設けるべきケースもありそうです。

UIコンポーネントの使われ方が統一されていない

細かなUIコンポーネントの使われ方が統一されていないところが見受けられ、運用に耐えうるルールも全てには存在していません。また、共通のコンポーネントそのものはいくつか存在しているのですが、あまり洗練されておらず、色/配置/インタラクションなどが個別最適を前提としたものになっているように感じました。ページや機能毎に個別最適を続けていくと、運用コストもどんどんかさんでいきます。何より、ユーザーが同じ目的を達成するのにビジュアルが異なると、不要な混乱を生むので、大きな理由がない限り統一したいところです。

どうすればいい

個人的にすぐに思いついたのは、デザインガイドラインの改善/拡充です。

デザインガイドラインとは

デザインガイドラインとは、デザインの品質の均一化/運用コスト削減/途中参画者の理解向上などを目的としたガイドラインです。デザインガイドラインとしてのアウトプットはサービスの特性/媒体、メンバーのスキルセット/スキルレベルなどで異なりますが、HTML/CSSの実装例を伴うものが多いようです。UIコンポーネント集としての傾向が強い場合はパターンライブラリと呼ばれることもあります。すでにランサーズのサービスでもパターンライブラリが存在し、比較的新しく実装されたページや機能ではそれに基づいたUIコンポーネントにより構成されたページも存在しています。

デザインガイドライン(パターンライブラリ)で問題は解決するのだろうか

先述の通り、すでにパターンライブラリは存在していました。しかし、抱えている課題はUIコンポーネントの統一だけではないことと、新しい機能やUIを追加する際に、守るべきルールや私たちが伝えたいブランド/想いが明確になっていなければ、またサービス全体が雑然とし始めると思います。これだけでは本質的な解決にはならないのではないかと感じ、もやもやしていました。

デザインシステム

そんなときに、”Design for scale”の文脈で、デザインシステムというものをサービス/企業全体で構築し、上記の課題を解決しようとしている事例を最近見かけるようになりました。

リサーチしていると、ちょうどそれに関する書籍が出版されたタイミングだったので、試しに買って読んでみました。

“Design Systems” by Alla Kholmatova’s

これです。FutureLearnというeラーニングサイトのシニアプロダクトデザイナーであるAlla Kholmatovaさんが書かれた本です。本書は、彼女が関心を持っていたデザインシステムと、それを活用したコラボレーティブな仕事の進め方に関して、実際にデザインシステムを運用しているAirBnB, Atlassian, TEDなどの企業の事例とともに、デザインシステムとはどうあるべきか、どう構築していけばいいのかを解説してくれています。

なぜデザインシステムが必要なのか

ウェブが急速に変化し続け、より複雑になるにつれて、静的なページの観点から考えると崩壊してしまい、多くの人がより体系的にデザインにアプローチし始めました。
基本的には、自分が感じた上記の問題を解決し、ユーザーに一貫した質の高いUXを提供することを目的にどの企業/サービスもデザインシステムを作成しているようです。

デザインシステムとはなにか

デザインシステムという概念にスタンダードな定義は存在していませんが、本書では

デザインシステムとは、デジタルプロダクトの目的を達成するために一貫して組織された相互接続のパターンと共有されたプラクティスのセットです。「パターン」はインタラクション、ボタン、テキストフィールド、アイコン、色、タイポグラフィ、マイクロコピーなどのインターフェイスを作成するために結合する、繰り返し使用される要素です。 「プラクティス」は、チーム内で作業するときに、それらのパターンをどうやって作成、取得、共有、使用するかを選択する方法です。
としています。

デザインガイドライン(パターンライブラリ)とは違うのか

既存のデザインガイドライン/パターンライブラリの概念とどう違うのかという疑問は読む前から感じていました。それに対して著者はこう答えています。

パターンライブラリは、デザインシステムと互換性があると考えられることがあります。しかし、最も包括的で生きたパターンライブラリでさえ、システムそのものではありません。これは、デザインシステムをより効果的にするのに役立つ「ツール」です。
パターンライブラリは、より一貫性のあるデザインを保証するものではありません。小さな不一致を修正したり、コードベースをより堅固にするのには役立つかもしれませんが、ツールだけではユーザーエクスペリエンスにはほとんど影響しません。
筆者は、パターンライブラリはデザインシステムを構築する一つのツールであって、その他に以下の要素を兼ね備えていると説きます。

デザインシステムは4つの要素を持っている

デザインシステムは、以下の4つの要素を持っているとしています。

デザインの原則
機能的なパターン
知覚的なパターン
共通言語
本書では、4つの要素を説明する際に、架空の10分で作れるレシピサイトのデザインを例として説明してくれています。これがすごくわかりやすいので、そのまま紹介します。

デザインの原則

製品の目的がすべてのことを通して明確に表現されていることを確認するには、いくつかの基本原則と価値を確立する必要があります。重要なのは、製品の創造に関わる人々が、それらの価値観に同意し、それらにコミットするということです。例えば、10分間の料理レシピサイトチームの皆は、時間の価値を理解しています。彼らはレシピに時間制限を付けることで動機づけられ、その結果、彼らはすべて、サイト上でのインタラクションを短く、シンプルに、速く、スムーズにするよう努めています。この原則は、デザインパターンだけでなく、サイトのパフォーマンス、言葉のトーン、チームの運営方法などによっても表現されます。これらの原則は必ずしも公式ではなく、書面でさえ明示されていないかもしれません。しかし、皆が努力と優先順位を同期させるためには、チームの合意と認識が不可欠です。また、使用方法、ボタンの外観、書体の選択など、様々な意思決定に役立ちます。

機能的なパターン

私たちは、ユーザーが自分の目標を達成するのを助けるために促し、有効にしたいいくつかの重要な行動を見つけ出します。
私たちは、人々がいつもファストフードまたはレンジでチンした食べ物よりも、家庭で調理された健康的な食事を選ぶことを望んでいます。これは、私たちの食事が美味しくて健康的に見える必要があり、電子レンジでチンした食べ物よりも魅力的である必要があることを意味します。魅惑的で美味しくてシンプルな食べ物を使った良いイメージは、私たちをここで助けることができます。
人々が10分以内に良い結果を達成できるようにしたいのです。つまり、簡単な手順でレシピを提示する必要があります。手順は、短く、明確で、焦点が合っている必要があります。10分の約束を守るために、各ステップにタイマーを設けることができます。
私たちは、人々が自発的で、好きなときにいつでも何かを準備できるようになるように促したいです。必要とするものではなく、すでに持っているものから始めましょう。贅沢な品揃えを買い物する必要はありません。 UIの面では、これは明確なラベルを持つ簡単に選択可能な成分のサムネイルによってサポートされる可能性があります。
話し合いをして楽しむことができます。どの成分がオプションで、どの成分をどの成分に置き換えることができるかを示します。面白いかもしれない予期しない組み合わせを試してみてください。
当然ながら、デザインの詳細はサイトで作業するにつれて変化しますが、それらの主要な動作は変わりません。これらの行動は、コンポーネントの中核となる機能モジュールと、要素のサムネイル、レシピカード、ステップシーケンス、タイマーの情報などが決定されます。

知覚的なパターン

同時に、私たちは10分間料理レシピサイトを使用している人がどのように知覚したいのかを理解する必要があります。私たちはシンプルで落ち着いていますか?魅力的で洗練されたものですか?真剣で遊び心がありますか?大胆または抑圧的?功利主義者か感情的な人ですか?インターフェースを通して表現したい人格と精神を捉える美学は何ですか?私たちはブランドについて考え始めます。
私たちは健康的な食べ物に情熱を燃やしていますので、サイトを訪れてみたいです。おそらく、それは有機的で、暖かく、健全な感じを持つでしょう。私たちはまた、調理は多くの計画と準備を必要としないと信じています。それは自発的で楽しいことがあり、10分の時間制限で実験して創造的にすることができます。
現時点では、おそらくいくつかのムードボードをまとめて、ブランドが正しいと感じるまでビジュアルを試してみることになります。これを達成すると、タイポグラフィ、カラーパレット、言葉のトーンなどの視覚的なブランド要素と、ブランドのイラスト、イメージスタイル、特定の形、私たちのサービスの本質を捉え、最良の方法でコンテンツを提示するユニークなインタラクションなどがあります。
暖かく素朴なカラーパレット、手描きのアイコン、読みやすさに焦点を当てたタイポグラフィ、健康的な食べ物の質の高い写真、およびいくつかの簡単なインターフェイス要素とコントロールを思いついてみましょう。これらのスタイルは私たちの知覚パターンになります。

共通言語

私たちが選ぶ言葉は、チームの考え方です。 間接的に、それらはデザインを形作るでしょう。最初は、パターンと言語の選択肢が非公式に共有されます。 しかし、私たちのチームとプロダクトが成長するにつれて、言語も変わります。 最終的には、デザインボキャブラリーを収集し、共有し、整理するために、より構造化された方法が必要になります。

まとめ/感想

「パターン」というものがサービス共通のUIコンポーネントが網羅されたものだけではなく、ブランドやエートスを表現するためのルールも含んでいて、そこまでをシステム化していくことがより良いプロダクトにしていくために必要なのだなと気付かされました。

ちなみにこれはまだDesign Systemsの導入のみの紹介ですので、興味を持たれた方は購入し読まれることをおすすめします。是非いろいろ議論しましょう:)

長くなってしまったので、今回はここまでにします。この学びを踏まえて少しずつアクションを起こしているところなので、それについてはプロセス編/実践編としてまたこちらで書きたいと思います。

ランサーズではサービスを成長させてくれるエンジニア、デザイナーを募集しています!
ご興味がある方は、以下URLよりご応募ください。


【中途採用】
フロントエンドエンジニア
サーバーサイドエンジニア
コーポレートエンジニア
SREエンジニア

【新卒採用・その他】
21・22新卒
その他採用情報

関連記事

thumbnail
AdobeXDを使ってLPを作ってみたお話

初めまして。デザイナーのchoponです。 今回私がお話するのは、AdobeXDを使って、ワイヤー・デザインの制作を行った過程といい点・悪い点について簡単にお話できればと思います。 AdobeXD(以下XD)とは、Adobeから今年リリースされた、新しいプロト …

thumbnail
ユーザーファーストと仕事について日々考えること

ユーザーファーストデザイン室の三宅です。 現在、ランサーズ株式会社とクオント株式会社の兼務で、クリエイティブディレクション・アートディレクションを担当しています。 社内の企画制作物の担当と、社外のクライアント様への案件を担当しています。(Web、動画、紙、他 …

thumbnail
デザイナー合宿をした話

ユーザーファーストデザイン室(以下UFD)室長兼デザイナーの竹中です。 多彩なバックグラウンドの仲間が集まる、血気盛んなベンチャーにおいて、組織として成長するためには考えることがいっぱいあるなと、日々感じております。 先日もデザイナーの組織課題を題材にした「デ …