デザインシステムとは？LYZONが自社初のデザインシステムを公開

「このボタン、前のプロジェクトとちょっと違う…」
「開発で実装されたUIと、デザインとで微妙に違う…」

そんな声、Webやアプリ制作の現場で聞いたことはありませんか？

プロジェクトごとにバラバラだったUIデザインやルールを統一し、チーム全体で一貫したプロダクト開発を実現するための仕組みが「デザインシステム」です。

この記事では、「デザインシステムって何？」「どんなメリットがあるの？」という基本から、株式会社LYZON（以下LYZON）がFigma上で一般公開したデザインシステム「LYZONデザインシステム v1.0.0」の紹介まで、分かりやすく解説します。

UI設計を支える“設計図＋共通言語”

デザインシステムとは、WebサイトやアプリのUIを設計・実装するうえでのルールと部品のセットです。
ボタンや入力フォーム、配色、タイポグラフィ、余白の使い方などを一貫したルールにまとめ、誰がデザインしても同じ品質になるようにするための仕組みです。

例えば、以下のようなものが含まれます。

• カラーガイドライン（ブランドカラーやアクセントカラー）
• タイポグラフィ（フォント、サイズ、行間など）
• UIコンポーネント（ボタン、モーダル、ナビゲーションなど）
• コードとの接続仕様（クラス名、命名ルールなど）

デザインシステムを導入することで、制作現場だけでなく、最終的なユーザー体験にも多くのプラス効果が期待できます。ここでは、主な3つのメリットをご紹介します。

メリット1：チーム間の認識ずれを解消できる

デザインシステムがあることで、デザイナー・エンジニア・ディレクターなど異なる職種のメンバー間で、「どのUIを使うか」の認識が統一されます。

メリット2：開発効率がアップする

一度定義されたUIコンポーネントは、何度でも使い回せるので、ゼロからUIを作る手間が省けます。コードの再利用性も高まり、開発スピードも向上します。

メリット3：ユーザー体験が安定する

色やレイアウトが統一されることで、ユーザーにとって分かりやすく・使いやすいUIを維持できます。

デザインシステムは、ただ作成するだけでなく、実際に活用してこそ価値を発揮します。現場での具体的な活用方法は、以下のようなものがあります。

Figmaなどのデザインツールで共有する

デザインシステムはFigmaなどのデザインツール上でライブラリ化され、社内外のチームメンバーとリアルタイムに共有できます。

コーディングルールと連携させる

デザインだけでなく、開発側のCSSやコンポーネント設計ともリンクさせることで、実装時のズレを最小限に抑えられます。

デザインと開発の垣根をなくすFigmaベースのデザインシステム

LYZONでは、これまでのWeb制作やシステム開発で培った知見を活かし、自社初のデザインシステム「LYZONデザインシステム v1.0.0」を構築し、Webサイトをフルリニューアルしました。その後、社会との情報共有のため社外でも誰もが閲覧できるようにFigma上で公開しました。

Lyzon v1.0.0をFigmaで見る

本デザインシステムは、以下の3つの特徴を備えています。

1. FigmaベースのUIコンポーネントライブラリ
   
   • ボタン、フォーム、ナビゲーションなどよく使われるUIパーツを体系的に整理
   • コンポーネントごとに複数の表示状態を定義
   • 再利用と拡張が可能な柔軟コンポーネントとして作成
2. デザイン原則とトーン＆マナーの明文化
   
   • カラー、タイポグラフィ、アイコンなどのガイドラインを一貫して提供
   • デザイナー間の意思疎通を加速し、認識を揃えることでレビュー回数の削減を実現
3. 開発との接続を意識した仕様設計
   
   • CSSクラスやフレームワーク実装を想定したコンポーネント設計がなされており、開発現場での展開もスムーズ

背景 - プロジェクトごとの“属人化”をなくしたい

近年、クライアントワークや複数チームでの開発が増える中、デザインや実装ルールの属人化がボトルネックになる場面が増えました。

「LYZONデザイン v1.0.0」は、そうした課題に対応すべく、”誰でも使える形での共有資産化”を実現する取り組みとして開発されました。

Lyzonでは今後、以下のような拡張を予定しています。

• デザイントークン化と開発ツールへの統合
• StorybookなどのUIドキュメントツールとの連携
• アクセシビリティ指針の整備
• 多言語・多ブランド対応の展開

社内利用にとどまらず、クライアントとの共創にも活用できるよう、より柔軟なアップデートを続けていきます。

デザインシステムは「大企業だけのもの」ではありません。
小規模なプロジェクトでも、UIの一貫性と再利用性を確保するための土台として機能します。

LYZONでは、今後も「LYZONデザインシステム v1.0.0」を進化させながら、より良いユーザー体験の実現と、開発現場の生産性向上に貢献していきます。