6人のデザイン会社が、自社デザインシステムをWEBで公開してみた話

「デザインシステム」と聞くと、SmartHRやfreeeのような大きなプロダクトチームが整備するもの、というイメージがあるかもしれません。何十人、何百人のエンジニアやデザイナーが関わるからこそ必要になる仕組み、という感覚です。

正直に言うと、私自身もそう思っていました。picks designは6名のWEB/UIデザイン制作会社です。「うちみたいな小さい会社がデザインシステムなんて大げさじゃない？」と。

でも、社内のFigmaに閉じていたデザインの決めごとを、WEBページとして公開してみたら、思っていた以上に面白いことが起きたんです。

この記事では、デザインシステムでプロダクト開発を加速させる方法でも触れた「デザインシステム」を、小さな会社が実際にWEB公開してみて何が変わったのか。その実体験を書いてみようと思います。

そもそも何を作ったのか

まず、私たちが公開したデザインシステムの中身を簡単に紹介させてください。

picks design Design System では、以下を定義・公開しています：

すごく特別なものではないんですよね。自分たちが普段使っている色やフォント、UIパーツのルールを一覧にまとめただけです。

Figmaだけでは完結しなかった理由

もともと、これらのルールはすべてFigma上で管理していました。実装ズレを防ぐ、Figmaコンポーネントライブラリ戦略でも書いたとおり、Figmaは本当に素晴らしいツールで、今も毎日使っています。

ただ、アプリのUI改善や業務システムのUXデザインなど、複数の案件を並行して進める中で、一つ気づいたことがありました。

picks designの6名のうち、全員がFigmaを日常的に使うわけではありません。エンジニアはコードエディタの中にいるし、ライターはドキュメントツールを使っている。経理担当にFigmaを開いてもらうのは、さすがに無理があります。

非デザイナーにとってFigmaは「重い」「どこに何があるかわからない」ツールなんです。でも、ブランドカラーや基本的なルールは全員が知っておきたい。

公開してみたら、3つのことが変わった

正直、最初は社内向けのリファレンスとして公開しただけでした。でも使い始めてみると、思っていなかった変化がいくつか起きたんです。

一番わかりやすかった変化がこれです。

以前はSlackで「あのピンク使って」「もうちょっと薄いやつ」みたいな、あいまいな色指定が飛び交っていました。デザイナー同士ならなんとなく通じますが、エンジニアやライターには伝わりません。

些細なことに思えるかもしれませんが、「あのFigmaのどこかにあったやつ」を探す時間がゼロになるのは、地味にうれしい変化でした。エンジニアもライターも、URLを一つ開くだけでブランドカラーを確認できる。それだけで「聞く→探す→確認する」のやり取りが消えたんです。

これは完全に副産物でした。

私たちはClaude CodeなどのAIツールを制作の補助に使うことがあります。ある日、デザインシステムのHTMLをAIに読み込ませてみたら、ブランドカラーに準拠した制作物を出してくれたんです。

「AIにデザインの意図を伝える」なんて、デザインシステムを作ったときには考えてもいなかった使い方です。でも結果として、「Pink 500を使って」「グラデーションはPink→Blue 135deg」といった指定が、AIとの会話で自然に通じるようになりました。

あくまで「やってみたら意外と便利だった」という話で、AI対応を狙って作ったわけではありません。でも、これからAIを活用する場面が増えていく中で、デザインルールが機械可読な形で存在していることの価値は、じわじわ大きくなるんじゃないかと感じています。

3つ目は、対外的な効果です。

ポートフォリオは「過去の成果」を見せるものです。どんなサイトを作ったか、どんなアプリをデザインしたか。一方、デザインシステムは「思考の構造」を見せるものだと思っています。

どんな色を選び、どんなルールで組み合わせ、どんな一貫性を大切にしているか。それは、私たちのデザインに対する姿勢そのものです。

6名規模でデザインシステムをWEB公開している日本のWEB制作会社は、調べた限り他に見当たりませんでした。大きな意味はないかもしれません。でも「この会社、ちゃんと考えてやってるな」と思ってもらえるきっかけにはなるはずです。

それに、小さいチームだからこそメンテナンスも回しやすい。「この色、もう使ってないよね」「じゃあ外そう」で終わる。利益を生むDesignOPSとは？事業をスケールさせる仕組みの作り方でも書きましたが、大企業のように何ヶ月もかけて承認を取る必要がない。6人だから、変更が必要になったらその週のうちに更新できる。このフットワークの軽さは、小さいチームの大きな武器だと思っています。

まとめ

振り返ると、私たちがやったことは「社内のデザインルールをHTMLにして、URLを発行した」だけです。完璧なデザインシステムには程遠い。SmartHRさんやfreeeさんのような洗練されたドキュメントと比べたら、ずっとシンプルなものです。

でも、それでいいと思っています。

もし同じように小さなチームでデザインの仕事をしている方がいたら、まずは自分たちのカラーパレットとフォントの一覧をHTMLにしてみるのもいいかもしれません。完璧じゃなくていい。小さく始めて、使いながら育てていく。うちもまだその途中です。

あわせて読みたい：デザインシステムでプロダクト開発を加速させる方法