こんにちは、デザイナーのSAYAです。
以前のブログで、私の担当するサイトでデザインシステムを制作中であることに少し触れましたが、 そもそもデザインシステムとは何なのか？何のために作るのか、どのように作っているのか、 制作に至った背景などを簡単にまとめてみました。
制作の背景
まず、制作に至った背景ですね。 現在、私が担当しているサイトでは、新規機能の追加やサイト内の改修が行われています。しかし、新規部分の制作にあたって、今までのサイトのデザインルールの中だと表現に限界があり、機能に対して最適な表現が難しい状態でした。そのため、今までのルールを踏まえつつ、ルールを拡張していく必要がありました。 拡張にするにあたり、都度デザインを追加していくと、デザイナー側もエンジニア側も管理がしにくい状態になってしまったり、複数のデザイナーがいるので、一貫性のないサイトになってしまったりする可能性があります。 それを防ぐためにルールを拡張するとともに、既存部分も含め整理してしっかり定義する必要があり、今のタイミングでデザインシステムの制作に着手し始めました。
デザインシステムとは
デザインシステムってちょこちょこ聞くこともあるかと思うのですが、 そもそもデザインシステム とは何かを簡単に整理してみました。
デザインに関するあらゆるルールを定めたもの
一般的なデザインシステムとは、デザインの原則、概念、ガイド、コンポーネントなど、デザインに関するあらゆるルールを定めたものです。 以下はデザインシステムの参考事例です。
polaris.shopify.com engineering.mercari.com www.lightningdesignsystem.com
チーム内での共通言語となる
共通言語とは、サービスに関わっているデザイナー、エンジニア、プランナーなどのチーム全体における共通項のことです。 サイトの運用の中で、デザイナーもエンジニア、プランナーも参照・利用できるものになります。
作って終わりではなく、運用していくもの
一回作って終わりではなく、新しいルールができたり新しいモジュールができたときは、追加・修正し、常にアップデートしていきます。
それぞれのPJに合う形をつくる
「これが絶対正解」や、「こうしないといけない」みたいなことはなく、 内容やルールのゆるさ・きつさ、運用の仕方など、PJの状態や体制に合わせて作るのが良いと言われています。 私の担当サイトでも、今のサイトの状態に適したかたちを模索しながら制作しています。
デザインシステムの細かい内容をみると一般的にはこのような感じです。
似たような言葉でスタイルガイドがありますが、スタイルガイド はデザインシステム 中の一部のイメージです。
コンポーネントライブラリというものは、そのままデザインデータとして利用可能な状態のライブラリです。コードもデザインシステムに入れている場合もあります。
このようなデザインシステムを参照・利用してプロダクトを制作します。
デザインシステムがあることによってできることは、 デザインの属人性を防ぎ、チームで一貫したデザイン制作が可能になります。 また、あらかじめ定義づけることでデザイナーとエンジニアで認識が合い、都度確認が必要なくなり、連携がスムーズになります。 チーム全体としても共通の認識を持つことができるようになります。
デザインシステムをどのように作っているか
現在デザインシステムを制作中なのですが、どのように制作を進めているか簡単に紹介します。 私が担当しているサイトは今既にあるサイトなので、まずは現状の状態を整理するためにスタイルガイド、コンポーネントライブラリの整理から着手しました。
また、デザイナーとエンジニアの制作の中での連携を効率化することも目的の一つなので、 実際にフロント実装する状態に紐づくように、エンジニアチームとすり合わせながら制作しています。 たとえば、コンポーネントの粒度はフロントで実装する粒度に合わせてライブラリ化しています。
デザインシステム自体はXDで制作しています。 複数のデザイナーで制作しており、常に更新していく必要があるので、クラウドドキュメントを共有状態にして、同時作業できるようにしています。 デザインシステムのXDファイルからライブラリを生成し、デザインチームでライブラリも共有して、制作時にコンポーネントをすぐに引っ張ってこられるような状態にしています。 PJメンバーにはXDのURLを発行して共有しています。
今後について
現在、コンセプトやブランドガイドラインを整理していくための材料をそろえるために、ユーザビリティテストや、ペルソナの再定義、デプスインタビューなどをPJメンバーと連携し行っています。 PJメンバーそれぞれが思ってる「このサイトっぽさ」や「このサイトのあり方」がバラバラにならずに、認識を合わせられるようにしていきたいと考えているので、 デザイナーだけで決めるのではなく、PJメンバーと連携し、認識を合わせながら整備していきたいなと思っています。
＼\『真のユーザーファーストでマーケットを創造する』仲間を募集中です!! /／
