投稿日:

    カテゴリー 技術 / デザイン / 制作

    バイタリフィのデザインシステム

    こんにちは、制作部の陳です!
    この度バイタリフィのデザインシステムを構築しましたので、紹介したいと思います。

    デザインシステムとは?

    デザインシステムとは、デザインに関わるロゴやカラー、フォント、スタイル、コンポーネントライブラリなどの要素をまとめたもので、プロダクトの統一感や一貫性を確保する役割を果たします。
    デザインシステムを導入することで品質向上や、生産性の向上等の効果を見込めます。

     

    完成品はこちら。
    バイタリフィ デザインシステム

    今回構築するに当たって活用したのは「zeroheight」です。

    zeroheightは、デザインシステムの構築と管理を支援するツールです。
    XDやFigmaのコンポーネントを簡単に取り込むことができ、ドキュメントの作成や必要な情報の更新や書き出しも容易に行えるという利点があります。

    プラグインを使用することでコンポーネントやスタイルを簡単に同期することができる。

    各ページには要素の基本的な考え方とコンポーネントの使用箇所等詳細が示されています。
    これにより、デザインシステムを利用するメンバーが迷うことなく必要な情報を把握できるようになりました。

    今後の展望

    本記事では、zeroheightを使用して会社のHPのデザインシステムを構築する方法とその利点について紹介しました。

    今後はデザインシステムが実際に運用される過程で、利用者からのフィードバックに基づいて、デザインシステムの改善点や課題を特定し、適宜、ガイドラインやドキュメントの更新を行っていきたいと思います。