今回はDI事業本部がFigmaベースで作り上げた「Design System Kit（デザインシステムキット）」について、開発の裏側をお伝えします。
なぜこのキットが生まれたのか、どんな課題を乗り越えてきたのかーーー 現場の声とともに紹介します。

Design System Kitとは

デザインシステム導入のスターターキットとして、デザインガイドラインやUIパーツ、アイコン、テンプレート、スタイルなどを揃えています。Figmaのスタイル機能でブランドの一貫性を横断的に適用でき、要件定義〜画面設計の効率化、デザイン整合性の確保、コンポーネント再利用の促進が期待できます。

なぜDesign System Kitを作り始めたのか

Webサイト運用の属人化や、ページごとに異なるUXが課題として顕在化したことから、2024年にデザインシステムキット構築の構想が立ち上がりました。スケジュールの遅延防止、デザインガイドラインの順守、コンポーネントの利用率向上なども目的としています。

開発の裏側

デザインシステムの扱いは目的や粒度、実装方法がお客様により差があるので、利用する想定ユーザーで解釈に違いが出ないようにする必要がありました。マネージャー、ディレクター、エンジニアなど複数職種にヒアリングを行い、実際の案件進行での使われ方を想定しながら、プロトタイプ→検証→修正を何度も繰り返す日々。。。

特に力を入れたのは、コンポーネントの命名ルールとプロパティ設計。小さな命名の揺れが後々の混乱につながるため、「誰が見ても分かる」命名・プロパティの可視化に注力。その結果、ファイル内で誰でもプロパティを確認できる仕組みが整備され、利用者視点での利便性が向上しました。

コンポーネントの一例

プロジェクトにはアドバイザーや検証メンバーを含めると10名以上が関わっています。デザインチーム内でも何度も検証し、ブラッシュアップを重ねて作り上げました。

開発者からのコメント

左から、上部さん・下津さん・河邉さん

イノベーションデザイン部 UX推進課
河邉俊樹さん

益々人手不足が進む中、これまで以上に業務効率化の必要性を感じています。このキットを活用することで、作業プロセスの効率化を図り、より戦略的な業務にリソースを割くことで、お客様の様のビジネス拡大に寄与できることを期待しています。

イノベーションデザイン部 UX推進課
上部京子さん

Figmaでデザイン資産を整理・管理することで、制作の効率化とブランドの一貫性をはかることをを目指しました。 チーム全員が同じツールで作業することで、よりスムーズな連携が可能になり、長期的な運用にも活用ができます。 このキットを通じて、みなさまの業務がより快適になるお手伝いができれば幸いです。

エクスペリエンスデザイン部 UXデザイン課
下津理彩子さん

使用する方々が管理しやすく悩まずシステムを組み立てられるキットになっていると思います。気軽にドラフトに落としていただき、触ってみたりパーツを分解して中身の構成を確認してみたりと、使用感を試すところから始めていただくとうれしいです。

最後に～期待される効果

サイトオーナー：
Figma上でコンセプト共有→意思決定が早くなり、指示がシームレスに。作業時間短縮で人的リソースを再配分可能に。

エンドユーザー：
ページ間の一貫性により情報取得がスムーズになり信頼性も向上。

開発者：
スタイルやコンポーネントが整備されていることで、実装効率と品質が安定。

Design System Kitは現場の声を取り入れ続け、より使いやすくしていく予定です。導入や詳細にご興味がある方は、お気軽にお問い合わせください。

お問い合わせはこちら

デザイナー募集中！

お客様のビジネス課題を解決するためのさまざまなクリエイティブの制作に携わります。グラフィックにとどまることなく、UXを軸に戦略工程からプロジェクトに参画し、ユーザーの一連の体験づくりに深く関わります。

ご興味のある方はぜひご応募ください。