みなさん、こんにちは。
ジンジャーでプロダクトデザイナーをしている門阪です。
この度デザインパートナー「Goodpatch」と協業し、デザインシステム「jinjer sirup」を導入しました！（うおおおおお！おめでとう〜！！👏👏）
まだまだ成長段階のデザインシステムですが、私たちがどのようにデザインシステムに向き合ってきたか、その奮闘記を5回に分けてお届けします。
- Vol.01：「あの頃は手探りだった――デザインシステム導入までのなが〜い旅路w」
- Vol.02：「よーっし！デザインシステム作るぞお！【前編】〜 デザインシステムに込めた“らしさ”の正体 〜」
- Vol.03：「よーっし！デザインシステム作るぞお！【後編】〜 ペアデザインで磨くデザインシステム 〜」
- Vol.04：「実は導入してからが大変だった!? デザインシステム導入“後”のリアル」
- Vol.05：「さあ、実装じゃあ！従業員TOPリデザインの舞台裏」
現場だからこそ！の視点にフォーカスしてお伝えできるよう頑張ります！
👉ちなみに「なぜ今、デザインシステムが必要だったのか？」については別の記事で公開予定ですので、そちらもぜひご覧ください〜！
始まりは、Cacooだったー。
私が入社した頃、ジンジャーではCacooというツールを使ってプロダクト画面を作っていました。
この頃はまだ、いろんな画面で使っているパーツを画像で引っ張ってきて切り貼りしたり、必要に応じてその場でパーツを0→1で生み出して画面を作っていた時代です。
デザインを作る、というより要件書の作成がメインだったので
「じゃあ、既存画面に合う感じのデザインでよしなに実装よろしく！」って感じでしたw
もちろんこの頃は、コンポーネントという概念はありません。
しかしある時、誰かが気付きました。
「これよく使う素材、集めといた方が楽じゃね？？」
「・・・確かに・・・。天才だ・・・！」
ちょうどその頃ツールをXDに変えよう！と話していた時期だったこともあり、これを機に徐々にジンジャーでもデザインを意識した画面作成が進められることとなります。
（Cacooでも素材集を作った時期が一瞬あったような、なかったような気もするんですが、一瞬すぎて忘れましたw）
私たち、ちょっと進化しました。
XDへのツール転換は、デザインという意味で大きな進歩をジンジャーにもたらしました。
な・・・なんと！コンポーネントもどき群ができたんです（うおおおお！すごい！👏👏）
Auto Layoutが使われていなかったり、サイズがばらけてしまっていたりなど、今見返すとツッコミどころは満載なんですが、なんだか見た目だけはそれっぽくなってますよね！
何よりこの整備によって毎回いろんな画面をうろうろ〜うろうろ〜と徘徊して、それっぽい素材を引っ張ってくる必要がなくなりましたw
だがしかし・・・これには致命的な欠点があったのですーー。
「コンポーネント化されていない」
オーマイガ！！！😱
それ一番大事なやつうぅぅぅぅぅ・・・。もどきですw
いやあ、なんかあと一歩足りないんだよなあ。
そして時代はとうとうfigmaへー。
XDからfigmaへの移行にあたり、コンポーネントもどきについても見直すことになりました。
初めてちゃんとしたコンポーネントができたのはこのタイミングですw
（以前も単発で作ったりはしてたんですが、みんなで使うものには至っておらず・・・）
XD時代と比べて
- Auto Layoutを使うようになった
- 「enable」「hover」だけじゃなく「focus」「error」「disabled」等についても定義し始めた
- 挙動や使用時の注意点についても記述し始めた
- カラーやシャドウといったTokenもどきを定義し始めた
など、なんかXD時代と比べて成長したね・・・！！と今見返すとちょっと感動しましたw
これでジンジャーのデザインは守られた！！（ファンファーレ🎉🎉）となるはずだったんですが
「うーん、なんか惜しいんだよなあ。」
「絶妙に使いにくいw」
「まあ使えなくもないけどさあ。」
「いやカラー多すぎだろw」
「結局コンポーネント解除しなきゃ使えなくね？」
なんか色々問題が生じたw
僕らとつくろうデザインシステム👼
そんなタイミングで立ち上がったのが、「Goodpatch」と協業するデザインシステムプロジェクト。
どんなふうに作成を進めたのか、については次回以降の連載記事で紹介予定なので、今回は完成品をご覧ください！（ぱっぱらー🙌🙌）
ジンジャーのデザインシステムは、
- Figma Tokens（デザインのスタイル設定）
- Figma Components（コンポーネント設計）
- Zeroheight（デザインドキュメント）
- Storybook（UIカタログ／実装との連携）の4つから構成されています。
な・・・なんかめちゃくちゃすごいものができた・・・w
見た目の美しさはもちろんなんですが、何より感動したのはその使いやすさです。
「こうだったらいいのになあ」と思っていたことが、まさにそのまま実現されてる感じで。
例えばForm Controlを例にして見てみましょう！
プロパティパネルを操作するだけで、エラーテキストやヘルパーテキスト、入力フィールドのサイズ変更など、さまざまな表現が簡単にできます。
そして個人的に一番驚いたのが、Slot機能。
いやほんと、こんな考え方あるんだってレベルで衝撃でした。
👉 Slotについては、こちらの記事がとてもわかりやすかったのでぜひ！
また、StorybookやZeroheightを使って実際の動きや仕様を可視化できるようになったことで、関係者全員の認識もバッチリ揃いやすくなりました。これも本当に大きい！
まとめ。
本当はもっと感動ポイントをお伝えしたいんですが、無限にありすぎてキリがないのでここで切り上げます（いやあ、一歩どころか百歩くらい足りてなかったw）
こうして、本当になが〜い旅路を経て無事私たちのデザインシステム「jinjer sirup」が作られたのでした（ちゃんちゃん😊）
次回予告。
「よーっし！デザインシステム作るぞお！【前編】〜 デザインシステムに込めた“らしさ”の正体 〜」
お楽しみに🙋
始まりは、アンパンマンだったー。（余談ですw）
余談になりますが、みなさん初めてのツールを使う際ってどんな風に始めますか？
本を読んでみたり、Youtubeを参照してみたり、先輩に教えてもらったり、とかですかね？
私のデザインツールの始まりは、Cacooで作るアンパンマンでした。
「アンパンマンつくってみて。」
恥ずかしながら新卒研修までパワーポイントすら触ったことがなかった私。
そんな私が入社後初めてCaccoを触ることになった際、先輩が言い放った一言。
「・・・何言ってんだコイツ・・・。」
新卒にあるまじき悪態をつきながら渋々作ってみたアンパンマンがこちらです！
ヘッタクソ！！！ww
（頑張ってる私の横で応援コメントをくれる優しい同期と、余計な一言をくれる先輩の形跡も見えますねw）
ただこれ意外と良いCacooの練習方法だったなあと今なら思います！
初めて使うからわからないなりに試行錯誤しながら色々触ってみるし、既存の図形だけだと書けないのでパスとかも使うし、何よりCacoo楽しい！ってなる！
ジンジャーではこのアンパンマンの試練が今でも受け継がれているというーー。
（嘘です。でも暫くは続いてた記憶がありますw）
本記事を読んでくださった皆さんも「こんな風にして最初は慣れてもらってるよ〜！」「こういうのはどうかな？」等ありましたら是非教えてください🤍
最後まで読んでくださり、ありがとうございました〜！
Discussion