Rtoasterのデザインシステムを構築する
この記事はBrainPad Advent Calender 2022 10日目の記事です。
はじめに
2022年11月1日入社のプロダクトデザイン部の 岡田 創(おかだ はじめ) です。
入社して1ヶ月間で色んな方とお話できて理解や課題感が深まりました。
今後とも部署横断で広く関わっていきたいので宜しくお願いします。
前職では、UIの共通パーツを活用してプロダクトを作っていたり
新規プロダクト開発でUXやUIを一緒に考えたりしていたので
その知見も活かしつつ、今はデザインシステム構築に関わっています。
今回は、入社後から着手しているデザインシステム構築の話をします。
グループリーダー
"プロダクト内でも画面が複数になって担当者が分かれるようになった今だと、構築方法が属人化して異なる使い勝手になってしまっている。今後、共通言語ができれば属人化も防げて、開発チームだけでも話が進められる箇所も増えて効率化出来ると思うんですよね。"
現状だと、皆の頭の中から情報を持ち寄って考えてを繰り返しているんですね。そうすると綻びだとか工数が増えてしまう。そこで、ブレインパッドでもデザインシステムを構築して運用していこうとしています。
デザインシステムとは
デザインシステムとは、プロダクト開発の際にルールや使用するツールを定めることで、品質やブランド価値に一貫性があり安定したプロダクト開発に役立つものです。
3つのメリット
・認識に一貫性が生まれ品質が向上する。
・コミュニケーションコストが下がり効率的に進められる。
・プロダクト開発の生産性が向上する。
一つ一つ見ていきましょう。
"認識に一貫性が生まれ品質が向上する。"
一貫性と標準化（Consistency and standards）
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
（ユーザーに、異なる単語、状況、あるいは動作が同じことを意味するかどうか疑問に思わせてはいけません。プラットフォームと業界の慣例に従ってください。）
1994年にヤコブ・ニールセンによって提唱され、良いUIデザインの10の原則をまとめたリストがあり、その4原則目になります。
そこで、"認知負荷"というワードが重要になります。
認知負荷が高いとユーザは集中力を持って情報を読みながら、次にどうすれば起こしたい行動が実行に移せるか探して、画面毎に考える必要があります。
機能的には課題が解消するプロダクトを提供していても、ユーザが発見出来なかったり、行動を実行に移せなければ意味がありません。
一貫性があると予測可能になり、学習コストも下がり利用しやすくなります。同じ文脈には同じパターンを提供し、予測しやすく認知負荷を軽減すること、それが一貫性です。
"コミュニケーションコストが下がり効率的に進められる。"
プロダクト開発では、色んな部署や知見を持った方と進めていきます。そこで、関わるメンバーのコミュニケーションを円滑にする必要があります。同じ方向を向いてコミュニケーションを取るには、一定のルールが必要です。ルールを明確にすることで、主観ではなく一定の認識を揃えた上で意見が交わされ、建設的なコミュニケーションが取りやすくなります。
"プロダクト開発の生産性が向上する。"
定義をしていなかった場合、同じ目的や形に対して過去のデータから探したり、1から考えて作る必要があります。定義をしていた場合、デザインシステム内のデータを持ってくるだけで高品質なものが簡単に置かれるので、UI〜開発間のデータの受け渡しもスムーズになり生産性が向上します。なので、開発の方と一緒にデザイントークンの構築も行いたいと考えています。
デザインシステムの3つの要素
・実現したい姿
・スタイルガイド（ルール）
・コンポーネント（ツール）
一つ一つ見ていきましょう。
"実現したい姿"
ブランドの方針や大事にしたいこと
デザインの原則（デザインの基準となる考え方）
表現の指針（トーン＆マナー）
用語集
プロダクトを作っていく上で大事にすることを言語化したものです。何を優先して作っていくのかという指標にもなります。
"スタイルガイド（ルール）"
カラースケール（使用できる配色）
タイポグラフィ（テキストのルール）
ライティング（口調のルール）
アイコンのルール
余白のルール
実現したい姿をもとに、カラースケール、パターンやタイポグラフィなどのガイドラインです。一貫性を担保するために必要なものです。
"コンポーネント（ツール）"
ボタン
ナビゲーション
アラート
ページネーション
再利用可能ですぐ使用できるコンポーネント群です。作業工数を減らすことにも繋がります。
デザインシステムの構築
参考にしている企業
実際に着手する際に、色んな企業がデザインシステムを定義しているので参考にしています。その中で、幾つかピックアップしてみます。
1 Smart HR
弊社でも参考にしている日本企業です。
2 LINE
膨大な量を定義していて勉強になります。
1 Zendesk Garden
シンプルかつ丁寧に書かれていて、理解しやすいです。
2 Hudl
利便性を損ねないための利用方法を厳密に定めています。
Rtoasterに当てはめてみる
今回は、例としてスタイルガイドの一部行っていることをご紹介します。
1 現在各プロダクトで使われている配色を全て書き出す。
現状把握をするために、どこにどんな色が使われているか記載します。
2 グルーピングを行います。
各プロダクト毎に配色パターンをグループとしてまとめます。
3 各プロダクトを統合します。
最終的に統一させるために統合したグループ群を作ります。
4 カラーグラデーションとしてまとめます。
グラデーションとして配置することで色の分布図が分かります。
5 以降デザインシステムに定義していく作業が始まります。
こんな感じで、現状把握〜再定義まで行っています。
まとめ
これから築き上げていく段階ですが、完璧なものを時間を掛けて作っていくというより、プロダクトと伴走しながら運用していくことが大切だと考えています。なので、一緒に試行錯誤しながらより良いプロダクトになるようにやっていきましょう！
参考資料
1 デザインシステムとは何か
2 デザインシステムの目的を考える
3 デザインシステムの浸透について
この記事が気に入ったらサポートをしてみませんか？