<p><a href="https://qiita.com/advent-calendar/2023/design-system" target="_blank" rel="nofollow noopener noreferrer">デザインシステム Advent Calendar 2023</a> 25日めの記事です。</p>
<p>Ubieでデザインエンジニアをしているtakanoripです。</p>
<p>この度UbieのデザインシステムであるUbie Vitalsのウェブサイトを公開しました。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__2add871d532b2" src="https://embed.zenn.studio/card#zenn-embedded__2add871d532b2" data-content="https%3A%2F%2Fvitals.ubie.life%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://vitals.ubie.life/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://vitals.ubie.life/</a><br style="display:none">
<img src="https://storage.googleapis.com/zenn-user-upload/ff4d9c013ed0-20231226.png" loading="lazy" class="md-img"></p>
<p>またUbie Vitalsを構成するUIコンポーネントライブラリであるUbie UIをOSSとして公開しました。（こちらはまだWIP）<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__eb78f88c6c75b" src="https://embed.zenn.studio/card#zenn-embedded__eb78f88c6c75b" data-content="https%3A%2F%2Fgithub.com%2Fubie-oss%2Fubie-ui" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/ubie-oss/ubie-ui" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/ubie-oss/ubie-ui</a></p>
<p>ウェブサイトやコンポーネントライブラリ公開に至った過程を振り返ります。</p>
<h2 id="ubie-vitals%E3%81%AE%E5%87%BA%E7%8F%BE%E3%81%A8%E5%A4%B1%E6%95%97">
<a class="header-anchor-link" href="#ubie-vitals%E3%81%AE%E5%87%BA%E7%8F%BE%E3%81%A8%E5%A4%B1%E6%95%97" aria-hidden="true"></a> Ubie Vitalsの出現と失敗</h2>
<p>Ubie Vitalsはデザインに関するガイドラインなどをまとめる箱として作られました。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7f5f717df4dc" src="https://embed.zenn.studio/card#zenn-embedded__7f5f717df4dc" data-content="https%3A%2F%2Fcocoda.design%2Fhirotakayoshii%2Fp%2Fp26874de1c7c7" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://cocoda.design/hirotakayoshii/p/p26874de1c7c7" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://cocoda.design/hirotakayoshii/p/p26874de1c7c7</a></p>
<p>Ubieではデザイン生産基盤の構築を2022年から進めていましたが、当初はデザインシステムという箱をつくらず必要なツールやドキュメントを必要に応じて作っていました。<br>
箱を作らないことで目先の課題を解決することに集中し、できるだけ低コストで基盤構築を進めていきたいという狙いもありました。</p>
<p>しかしツールやドキュメントが増えた結果、何がどこにあるかわからない、新しいメンバーへのオンボに困るなどの問題が出てきました。そこでそれらをまとめて格納し使いやすくするための箱として、Ubie Vitalsが作られました。</p>
<p>Ubie Vitalsが立ち上がった当初はNotionにページをつくり諸々を管理していましたが、組織の統廃合にあわせてNotionの設計や権限管理などが複雑になってしまい運用が難しくなっていきました。またNotionだとコードや実際に動いているコンポーネントを載せることも難しく、エンジニア向けのドキュメントを別途つくらないといけないという問題もありました。</p>
<p>そしてそうした問題を放置してしまったため、どこに何があるか誰がメンテナンスしているかが明瞭でなく、デザインシステムの運用は停滞しメンバーへの周知も進まず、中途半端で形だけのドキュメントが残される結果となりました。</p>
<h2 id="%E5%86%8D%E7%94%9F%E3%81%A8%E5%85%AC%E9%96%8B">
<a class="header-anchor-link" href="#%E5%86%8D%E7%94%9F%E3%81%A8%E5%85%AC%E9%96%8B" aria-hidden="true"></a> 再生と公開</h2>
<p>放置されてしまっていたUbie Vitalsですが、プロダクトの機能やエンジニアの数が増えてきたことでデザインシステムへの期待が大きくなってきたため、再始動することを決定しました。</p>
<p>再始動にあたってやったことは大きく3つあります。</p>
<ul>
<li>ドキュメントサイトの構築と公開</li>
<li>コンポーネントライブラリのOSS化および開発環境のアップデート</li>
<li>コンポーネントライブラリのアクセシビリティ改善</li>
</ul>
<p>また失敗の反省を生かして、ある程度作り込んでプロダクト開発で使うための要件を満たしてからプロダクトに適用していくという方針で進めています。</p>
<h3 id="%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E5%85%AC%E9%96%8B">
<a class="header-anchor-link" href="#%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E5%85%AC%E9%96%8B" aria-hidden="true"></a> ドキュメントサイトの公開</h3>
<p>もともとNotionでドキュメント管理していましたが、</p>
<ul>
<li>検索しにくい、場所がわかりにくい</li>
<li>コードやサンプルを載せにくい</li>
<li>一覧性が悪い</li>
</ul>
<p>などの問題がありました。</p>
<p>それらの問題を解決するためにドキュメントサイトを自分たちで構築することにしました。<br>
公開できるものは公開していくことで運用することへの意識を高める狙いもあります。</p>
<h3 id="%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AEoss%E5%8C%96%E3%81%8A%E3%82%88%E3%81%B3%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%81%AE%E3%82%A2%E3%83%83%E3%83%97%E3%83%87%E3%83%BC%E3%83%88">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AEoss%E5%8C%96%E3%81%8A%E3%82%88%E3%81%B3%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%81%AE%E3%82%A2%E3%83%83%E3%83%97%E3%83%87%E3%83%BC%E3%83%88" aria-hidden="true"></a> コンポーネントライブラリのOSS化および開発環境のアップデート</h3>
<p>もともとコンポーネントライブラリはプライベートリポジトリに作っていたのですが、プライベートリポジトリであるがゆえにプロダクトのドメインを含んだコンポーネントを含めたいという要望も出てきたり外部の方の意見を集めにくいなどの問題がありました。</p>
<p>そこで汎用的なコンポーネントはOSSとして別途切り出し、プライベートなほうがドメインを含んだコンポーネントを配信するものとして切り分けることにしました。</p>
<h3 id="%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E6%94%B9%E5%96%84">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E6%94%B9%E5%96%84" aria-hidden="true"></a> コンポーネントライブラリのアクセシビリティ改善</h3>
<p>デザインシステム構築再始動の大きな目的の一つに、アクセシビリティの担保があります。<br>
アクセシビリティを主語にしてしまうと動きにくい場面もあったので、現状はデザインシステムを使うとアクセシビリティに十分配慮したプロダクトが作れます、という状態を目指しています。</p>
<h2 id="ubie-vitals-website%E3%81%AE%E6%8A%80%E8%A1%93%E6%A7%8B%E6%88%90">
<a class="header-anchor-link" href="#ubie-vitals-website%E3%81%AE%E6%8A%80%E8%A1%93%E6%A7%8B%E6%88%90" aria-hidden="true"></a> Ubie Vitals Websiteの技術構成</h2>
<p>Ubie Vitals WebsiteはAstroを使用して作られています。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a6ce0665d38b3" src="https://embed.zenn.studio/card#zenn-embedded__a6ce0665d38b3" data-content="https%3A%2F%2Fgithub.com%2Fubie-oss%2Fubie-vitals-website" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/ubie-oss/ubie-vitals-website" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/ubie-oss/ubie-vitals-website</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ae164eef0eaa2" src="https://embed.zenn.studio/card#zenn-embedded__ae164eef0eaa2" data-content="https%3A%2F%2Fastro.build%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://astro.build/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://astro.build/</a></p>
<p>コンテンツはmdx+通常のMarkdownで管理しています。コンポーネントのプレビューやトークンをコピーできる機能などを載せたかったのでベースはmdxでつくり、テキスト部分は適宜Markdownに切り出しています。</p>
<p>特筆する点はないかなと思いますが、興味あればリポジトリのぞいてみてください。</p>
<h2 id="%E8%AA%B2%E9%A1%8C%E3%81%A8%E5%B1%95%E6%9C%9B">
<a class="header-anchor-link" href="#%E8%AA%B2%E9%A1%8C%E3%81%A8%E5%B1%95%E6%9C%9B" aria-hidden="true"></a> 課題と展望</h2>
<p>2024年は次のことに取り組んでいく予定です。</p>
<ul>
<li>デザインシステムの浸透</li>
<li>デザインシステムが自律的にメンテナンスされていく仕組みづくり</li>
</ul>
<p>デザインシステムやそれを活用したプロダクト開発に興味ある人、ぜひカジュアル面談しましょう！<br>
お待ちしてます！</p>


Rebooting Ubie Vitals Design Systems

コンポーネントライブラリのOSS化および開発環境のアップデート

Discussion