こんにちは😆
はいチーズ！のデザインシステムを担当しているデザイナー🍓いちごです！
はいチーズ！デザインシステム特集 第3回となりました 🎉
現在はいチーズ！ではデザインシステムを「Cheese」と名付け、育てる準備の真っ只中です。
今回は、本格始動した「Cheese」をどのように進めてきたのか、水面下活動についてお話しします！
- はいチーズ！デザインシステム特集 第3回となりました 🎉
- 🤔 2023年5月：どうにかしたい
- 🌝 〜2024年9月：様子見の日々
- 🤔 2024年10〜12月：どうにかしたい再来
- 🤯 2025年3〜4月：横断という壁
- 🥳 2025年5月〜：委員会発足と開発部への宣言、そして選挙
- もっと！知りたい方👂
👇過去2回にわたるプロダクト横断デザインシステム導入のあゆみはこちら👇
まだの方は、合わせてチェックしてみてください！📣
第1回
プロダクト横断デザインシステム導入のあゆみ／（１）輪読会で共通認識を作る篇 - SEN PRODUCT BLOG
第2回
プロダクト横断デザインシステム導入のあゆみ／（２）共通スタイルガイド・個別コンポーネント作成 篇 - SEN PRODUCT BLOG
🤔 2023年5月：どうにかしたい
開発全体の報告会で、本格始動宣告をしたのは2025年5月なのですが、実は自分の水面下活動のスタートはなんと2年前に遡ります。
自分は2023年1月に千株式会社にジョインしました。当時は開発としてのオンボーディングは形としてはあったのですが、サービスのおおまかな話があるだけ。
チーム内の結束やデザイナー間の関わりも今のように強くなく、引き継ぎは何もありませんでした。（※この内容は2年前の話であり現状とは異なります※）
👇 現在はスーパーマンたちが立ち上がってくれていますのでご安心を！👇
上司から過去デザイナーさんがまとめた『デザインガイド』を渡されたのですが、コンポーネント集で背景や説明の記述はなく、デザインファイルをGoogleドライブ上で『.xd』と検索かけて手当たり次第ダウンロードして解読する苦しい日々でした。
画面を見ても、デザインガイドに則っているような違うような‥‥‥
結局『渡されたデザインガイドもまるっと信用してはいけないのだろうな』と入社1ヶ月経った時点でそう自分で落とし前をつけました。
ならば！作るっきゃない！という単純回路で決意。
すぐさま上司に相談し「改善する部分を洗い出して新しく作り替えても良いヨ」の言葉を信じて、気になる部分の洗い出し、1作目を作成したのが2023年5月と2年前に当たるわけです。
当時はAdobeのXDを使用しており『デザインガイドたるものと向き合うならば、Figmaに移行しなければいけない。』というまたもや単純回路で、XDからFigmaへの移行作業を事前準備として行いました。
1作目は、時間をかけずに叩き上げたので大層な代物ではなく、Figmaファイル上にスライド方式でルールを明記した簡易的なものでした。
🌝 〜2024年9月：様子見の日々
それから、工数などの関係もあり使用されることなく、
ただ自分としては『いつでも動けるように』と、自分のデザインガイドとともに日々を過ごしていました。
前の記事にも記述がある通り、当時のデザイナーリーダーが共通のデザインスタイルを作成してくれたのですが、まだ細かいルールまでは決めきれていない段階で止まっており、既存画面には今今反映できないということで様子見をしている状況が続いていました。
それからも、別チームで共通のデザインスタイルを用いて進めているのを指を咥えて眺めるしかできませんでした。
が！転機が！
2024年の夏頃から自チームも新環境への再構築の話が上がってきたのです！
これは『動き出すしかない！』と、そのタイミングで反映しようと動き始めたわけです。
チームのPdMに「直近のリリース画面の話と合わせて、目指す理想の未来像を描いて目線を揃えたい」と相談したところ、大きく『Yes！』をもらえたので、共通のデザインスタイルをどう落とし込むかのルール作りも含めて画面作成を進めました。
🤔 2024年10〜12月：どうにかしたい再来
共通のデザインスタイルがあるとはいえ、当時は『サービスに合う絵の具』があるという状況でした。
どういうパレットを使って、どの絵の具をどういう基準で選んでパレットに出すのか、その絵の具をどういうルールで使うかは何も決まっていません。
この状態で各プロダクトで使用しても『大枠のルールのみだと、デザイナーの独自の解釈でバラバラな画面が生まれてしまう』と考えたので、パレットに出すものを選別することから始めました。
作成にあたって大事にしている点が4つ。
- ルールの微妙な差異は作らない
- 人に説明できないこだわりはルールにしない
- レイヤーやコンポーネントの命名は統一する
- 無駄なグループ化はしない
横断を見据えての作業のため呪文のように唱えて、いかにスリムな状態で進められるかを今も心に留めて作業をしています。
会社内でFigmaのデザイン作成ルールはなく、各デザイナーが思い思いに自分の作業ファイルにカラーや数値を登録したり、人によってはそもそも設定を登録しなかったり、デザイナーの属人化状態でした。
各デザイナーがファイルに個々に設定を登録している状態では、同じものを登録したとて更新やミスが起きかねるので、同じものを使って1つ更新すれば反映される環境ではなければなりません。
思い立ったが吉日。
共通の公開アセットの作成に着手しました。
初回のバリアブルのカラーデータを見るとレベルが低くてこしょばゆいのですが、当時はこれでも考えた末の内容でした。
PrimitiveColorからの紐付けもしてなければ、コレクションも分ける脳もないという、今思うとなんと未熟なデータ‥‥
最初はこんなもんだという恥を晒してみます😅
使ってみなければ良し悪しもわからないので、1ファイルに作成し続け画面数が膨大になっていた自分のファイルに、Figmaに存在する機能をフルで使って反映し、作業できる環境を整えようと試みました。
が・・猛威を振いすぎてファイルが崩壊。
ファイルは分割できる体制を作らねばと身に沁みました・・
『刷新しなさい』という神の通達だろうなと思い、アセットだけでなくコンポーネントも見直しをかけ、公開コンポーネントを作成し直しを行いました。
そして公開アセットと公開コンポーネントを使用した形で、まず自分のファイルを刷新しました。
その後も研究の日々で、アセットを作成・公開をしては自分のファイルに追加をして反映・検証を繰り返し続け、ブラッシュアップし続けました。
この期間で、壊す壊れることへの強靭な精神は相当鍛えられました😅
（1人で作業してる特権です笑）
🤯 2025年3〜4月：横断という壁
ちょうどチームで『今後プロダクトとして、どう開発していくか』の話になり、正式に他チームとの連携を考える流れに。
自分のプロダクトのデザインについては自分でどうにかなるものの、横断して作成するにはやはり自分一人ではどうにかなりません。
連載第2回のインタビュイーのチームがリリースしたプロダクトのデザインをレビューなどで時々目にすることはあったものの、アセットの設定方法やデザインの細部のルールまで目を通したことがありません。
『何も把握してないままでは進まない！』ということで、そのチームのデザインを使って自分が担当するプロジェクトの画面デザインを作成することにしました。
統合するという未来も考え、他チームのデザインコンポーネントも公開コンポーネントとして構造を統一した形で作成し直し、デザイン意図を解読しながら対応することにしました。
コンポーネントを作り直して、原本と挙動があっているのか・デザイン意図は合っているのかも確認して、画面にはめ直すという作業は時間がかかる上、無駄になるかもしれないという状況下で、チームが賛同してくれたことは感謝しかありません。
この作業は横断していく上で、本当にやってよかったなと今も思っています。
他のデザイナーの考え方やルールを隅々まで理解してやったからこそ、イメージがはっきりしたなと感じています。
もっと効率的なやり方があったかもしれませんが、考えるよりも先に手を動かしてしまうタイプかつ、作業だけは早いという自負もあり、泥臭いやり方を取りました。
作成をしながら、どういうルールにしたら他チームのデザイン意図も殺さず活かせるのか、どうしても変えなければいけない部分や気になる部分はどこなのか、その理由はなにか、非常に頭を悩ませました。
一度は開き直って2パターンの方向性を活かす形で考えよう！と無謀な方法も試しつつ、最終的に『お互いの合意点はここかな』という叩き台を持って方向性の確認をしました。
ドキドキしながら持っていったところ、不安に思っている箇所でしっかり意見や感想をいただきつつ『GO！』と背中を押してもらえたので本格始動しました！
🥳 2025年5月〜：委員会発足と開発部への宣言、そして選挙
方向性確認後から正式に文書化をスタートさせ、Figma内への記載と詳細はBacklogのドキュメントを使用し記述する形で現在も進めています。
Backlogのドキュメントを選択した背景としては、社内の人であればいつでも確認できる＆業務の中で身近な環境だったからです。
加えて、同時期にデザイナー間のレビュー会場をBacklogに設けたため、参照してのレビューがしやすくなると考えました。
Figmaはビジュアルをメインとしつつ、詳細を明記したBacklogと見比べることで情報を得られるような形にできればと進めています。
ある程度の情報が整ったタイミングで、デザインシステムに関わるエンジニアやEM、そしてデザイナー全員を風紀委員として問答無用でアサインし、壁打ちと称して内容を共有会を開きました。
共有会を複数回開催したのち、自チームのスーパーエンジニアたちが始動し、開発着手するまで漕ぎ着けました！
開発部全体の報告会で高らかと開始宣言！
こういうプロジェクトは畏まれば畏るほど、関心を持たれにくくなると思っているので、どうにかこうにか遊び心を入れようと必死です☺️
命名選挙で無事『Cheese』に決定！
興味を持ってもらってなんぼ！楽しんでなんぼ！
出馬宣言も練りました 🐎
もっと！知りたい方👂
デザインシステムの細かい内容まで書きたかったのですが、本格始動までの道のりでボリューミーになってしまったので、第3回はここで切り上げたいと思います！
デザインシステムについてご興味ある方おりましたら、pittaにて是非お話ししましょう🍓語り合える日を楽しみにしています🍓
おしまい🍓
