Webにおけるデザインシステムに関わるヒトと役割

Advertisement

先日、デザインシステムについて書いたので、今回はデザインシステムに関わるヒトについて整理してみます。どんな人が、どのようにデザインシステムに関わり、どのように利用するのかをクリアにしてデザインシステムとはいったいなんなのか、さらに掘り下げて考えるのが狙いです。

前回の記事で、デザインシステムを以下のように定義しました。

デザインシステム =
目的達成のためのデザインの仕組み。また、そのデザインの考え方を構造化したもの。ユーザとのコミュニケーションを補助・補完し、組織の意思や意図の伝達をよりスムーズに、より効果的に行うために利用する

この定義を頭の隅に置きつつ、今回の内容を整理していきます。

ビジネスでのデザインシステムの位置付け

ビジネス活動の中でのデザインシステムの位置づけを簡単な図にしてみます。

まず、大枠となるビジネスゴールがあります。その中で、デザインを使って達成するゴール(デザインで解決する領域)があり、その達成を助けるデザインシステムがあります。当然のことなんですけど、デザインシステムを構築するにはビジネスゴールやデザインで解決する領域を明確にする必要があり、これらの理解なしに良いシステムの構築は難しいはずです。また、デザインシステムで目的とする成果を出すのも、これらの理解なしには不可能です。

ただ、これらすべてをデザインシステムに関わるすべてのヒトが理解していないといけないかというと、そうでもありません。使うヒトの「レベル」によっては表層の使い方の理解だけでも利用できる「システム」の構築が望ましいと考えます。

デザインシステムの構築に必要なもの

次にデザインシステムを構築する際に必要なものを考えてみます。

設計

以下を明確にしたもの。

  • デザインシステムのスコープと目的
  • システムを構成するデザイン要素
  • 各要素の意図と目的・目標、デザインの背景
  • 要素間の関係
  • 異なる文脈での使い方

デザイン(実装例)

設計をベースに作られたデザインの実装例やプロトタイプ。設計だけでは見えてこないこともあるので、実装例やプロトタイプがあった方が良いと考えます。

ドキュメンテーション

  • システム利用者に設計を簡単に説明するもの
  • デザインシステムの仕様
  • デザインシステムの使い方
  • デザイン一覧

以前書いた「スタイルガイドとパターンライブラリの違い」では、スタイルガイドやパターンライブラリの例を取り上げましたが、こうやって「デザインシステム」を定義していくと以下あたりが、いわゆる「デザインシステム」の良い例と言えそうです。

反対に、よく見る一般的なスタイルガイドやパターンライブラリは、デザインシステムの一部を説明するドキュメンテーションであって、それらをもって完全なデザインシステムとは言いにくそうです。

デザインシステムに関わる人たち

さて、デザインシステムの位置づけと必要な要素を整理したところで、今度は誰がなにをどこまですべきなのか、まとめていきたいと思います。

デザインシステムに関わるヒトは大きく以下の3つのグループに分けられます。

  1. マスタープランナー(設計者)
  2. インプルメンター(実装者)
  3. ユーザ(利用者)

マスタープランナー(設計者)

マスタープランナーは、デザインシステム自体を考案し策定する人。組織のビジョンやビジネスの目的にあわせて、デザインシステムの目的や目標を明確にします。そして、それらを達成するためのデザインの仕組みを考えシステムを構築します。言い換えると、デザインで組織やビジネスのなにを達成するかを明確にして、それを達成するためのデザインをロジカルに組み立てます。

さっきの2つの図のすべてを理解したうえで、デザインを実装できる能力を持っている必要があります。

また、デザインシステムの単純な使い方の説明だけでなく、そのデザインに至った理由や経緯をインプルメンター(実装者)に伝え、自らが構築したデザインシステムを使って実装されたウェブサイトが目的を達成できるようにインプルメンターとユーザをサポートする仕組みを考えます。

UIデザインの知識に加えてビジネスやマーケティング、さらには広報などの知識も持ち合わせていると良いですね。

インプルメンター(実装者)

インプルメンターは、マスタープランナーが考案したデザインシステムの意図や意味、また、その「なぜ」を深く理解し、デザインシステムを用いてさまざまなデザインを実装する人たちです。

ビジネスゴールやその中でのデザインシステムの位置付けの理解も必要ですが、どちらかというとデザインシステム自体の深い理解が重要です。デザインシステムの設計や使い方をマスタープランナーと同等に理解しユーザに教える必要があります。

また、システムの使い方をユーザに教えるだけでなく、システムへのより深い理解、いわゆる「デザインのなぜ」をユーザに啓蒙します。ユーザからのシステム利用についてのリクエストや質問に応え、システムに則った実装を徹底してもらうように促します。

ユーザ(利用者)

ユーザはシステムの理解度に関わらず、システムを使ってデザインを利用する人たち。マスタープランナーやインプルメンターがデザイン制作に直接関わる人や部署なのに対し、ユーザはさまざまな部署で企業の情報を発信する役割を担う人たちというイメージです。ある意味、組織に属するすべての人といっても良いかもしれません。

もちろん、デザインの理念や詳しい仕様などを理解してもらうのがベストですが、まずは使い方を理解しルールに従ってデザインシステムを利用することが大切です。

また、ユーザにとって難解なシステムではなく、ある程度直感的に使えるシステムの構築を目指すべきです。

まとめ

デザインシステムの位置付け、構築に必要なもの、それから、デザインシステムに関わるヒトについてまとめてみました。まだまだ机上の空論なところからは逸しないですが、まずはこういった情報を整理していくことで、効果的なデザインシステムの構築に向けて準備ができればと考えています。

なにごとも段取り八分。準備をしっかりしておけば、のちの作業の効率も上がります。

ということで、Enjoy Building A Design System!

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net Twitter @rriver 、またはFacebook までご連絡ください。