2019/08/09
Confitでデザインシステムを導入しました
目次
こんにちは、ConfitでPM兼デベロッパーをしてます、あらきです。
現在Confit（オンライン抄録Web版）では、画面デザインを全面リニューアルすべく開発を進めています。これについてはデザイン担当のさいとう（くろ）もConfitスタッフブログの中で触れています。Confitロゴのリニューアルを皮切りに、利用ガイドなどを切り出して、リリースしやすいものは既にリニューアルして公開しています。
今回、画面デザインのリニューアルにあたり、アトラスで初めて「デザインシステム」を構築しました。そして構築したデザインシステムを元に、実装を進めています。
このブログではデザインシステムってなに？デザインシステムがあるとなにがいいの？ということを説明し、まだまだ途上にある画面リニューアルプロジェクトの一端を知っていただこうと思います。
デザインシステムとは
デザインシステムは昨今注目を集めている手法で、導入している企業の中にはGoogleのMaterial DesignやShopifyのPolarisのように一般公開しているものもあります。
デザインシステムがどんなものか、というと「プロダクトのデザイン原則や方針、ルールを明文化し、かつデザインパターンなどのツールキットも含んだもの」とするとイメージしやすいかもしれません。言い換えると「なぜこのようなデザインになっているのか？を構造的に示したもの」という感じでしょうか。
デザインに関してデザイナーやエンジニアが従うべきルールを示したものとして「スタイルガイド」や「パターンライブラリ」のツールキットなどがありますが、デザインシステムは、それだけでなくその背景にある理念・考え方も含めて明文化したものです。
Confitのデザインシステムを少しお見せすると、デザインコンセプトは「シンプルに」「分かりやすく」「使いやすく」。「Confitにおいて最も大切なのは、コンテンツである『演題情報』です」「Confitは学術大会を簡単便利にするためのサービスです。運営側、参加者側、運用側も含めユーザにとっての使いやすさを追求しましょう。」など。学術大会向けのシステムだからこその考え方が出てきますね。
この原則に従って、配色やテキストなどの指針を「基本方針」に示し、さらに「コンポーネント」でサイト内共通で使うUIを列挙し、定義されているクラスの内容など説明を書いています。現在進めている画面デザインリニューアルの開発でも、プロジェクトメンバー全員がまずデザインシステムの内容を確認した上で実装を始めました。
デザインシステムを作る目的・利点
ではデザインシステムがあると何がいいのか？というと、デザイン原則やルールを明文化することでチーム内でデザインに関する認識の齟齬をなくし、プロダクト全体のデザインの一貫性を保つことができる点が上げられます。
極端な例ですが、あるデザイナーは「Confitは学術向けのシステムなんだから”お堅い”雰囲気がいいよね」と思っていて、他のあるデザイナーは「学術向けといってもイベントなんだから、”派手”なことが大事だよね」と思って開発を進めたら、なんとなく全体的にちぐはぐなデザインになってしまいそうですよね。作った後に「あれ、なんだかちぐはぐだな」と気づいてもう一度直す、ということをしていると余計な時間がかかってしまいます。直す時間があればまだ良いですが、最悪ちぐはぐなままリリース・・・ということにもなりかねません。
少人数プロジェクトであれば都度認識合わせをしながら進めることもできなくはないですが、別々の人が同じ質問をして何度も同じ話をすることになったり、明文化していないために「あの時どういう結論になったっけ？」ということが起きかねません。
デザインを作る大本となる価値観や判断基準をあらかじめ共有しておけば、デザイン品質を保ちながら効率的に開発を進めることができるのです。
Confitの場合、そこまで多人数で開発しているわけではなく、デザイナーに限って言えば、これまでさいとう（くろ）がほぼ担ってきました。
しかし、Confitというシステムそのものが機能拡張を進め広がりを見せている中で、他のデザイナーやエンジニアにも仕事を分担しつつ、Confit全体としてデザインの一貫性を保てるようにするため、デザインシステムの導入を決めました。先に紹介したConfitのデザインシステムは、これまでConfitのデザインを担ってきたさいとう（くろ）が導入を決め、時間を見て少しずつ構築してきたものです。
おわりに
またリリースの節目節目にブログで告知する予定ですが、今回は「リニューアルのために裏でこんな取り組みをしてます」というお話でした。
最近、アトラスコーポレートサイトのリニューアル、当開発者ブログのリニューアルと画面デザインのリニューアルが続いていますが、これらを中心的に進めてきたデザイナーの面々が、Confitの画面デザインリニューアルも担ってくれています。どうぞご期待ください。
参考
デザインシステムについて調べた際に参考にした書籍・Webサイトです。
