📐

「デザインシステム」の必要性をやっと実感した話

に公開
UI
UX
デザインシステム
idea

法人・団体専用のパーティー会場検索サイト「会場ベストサーチ」を運用する株式会社アイデアログの取締役CTOの松川と申します。

デザインシステムを検討するきっかけとなった背景

当社では現在、レンタルスペースサイト「スぺなび」のリニューアル（2026年年始公開予定）を今年注力してきておりますが、主力事業である「会場ベストサーチ」のリニューアルに着手し始めました。

会場ベストサーチは10年ほど稼働を続けてきまして、当社の成長とともにサービスも成長してきましたが、増改築を繰り返してきて保守性が低下し始めているのと、事業計画上他のプロダクトの連携を見据えてリニューアルを実施することとなっています。

増改築を繰り返していると、住宅でもそうですが、どこか「ちぐはぐ」な箇所が増えてきています。
それは、

  • 機能間の業務仕様・挙動の整合性
  • データベース設計
  • UI/UX
  • インフラ構成

など様々な箇所で表面化します。

上記のうち、特に「UI/UX」については、「ちぐはぐ」になやすい傾向にあります。
この記事では主にこの「UI/UX」がいつの間にか「ちぐはぐ」になる問題とその解決に向けて当社が取り組もうとしていることについて話します。

「UI/UX」がいつの間にか「ちぐはぐ」になる背景を分解

ずばり、「UI/UX」については、関わる関係者が「意見を出しやすい分野」であることが背景としてあるのではないかと考えています。もっと肯定的に表現すると「多くの関係者が当事者意識を持ちやすい分野」とも言えると思います。

エンジニア以外の関係者はデータベースの設計や、インフラ構成、プログラムの構成についてはブラックボックスに見えます。この部分については「意見を出しにくい分野」になるので、関係者からの要望や意見で「ちぐはぐ」が発生はしにくい部分です。（「ちぐはぐ」が発生するのであればエンジニアの設計ミスや時間的制約の中でもやむを得ない妥協の類になってくると考えています）
この部分は専門スキル・知識が前提として必要になるので当事者意識をもって協力したい気持ちがあっても、専門職に委ねるほかない部分となります。

UI/UXで発生しがちな「ちぐはぐ」の例としては、

  • ボタンの色・形が様々
  • ボタンの配置位置
    • 「戻る」「次へ」ボタンの左右配置
    • センタリング、左寄せ、右寄せ
  • ページネーションの配置
  • グレー色が何種類もある
  • モーダルダイアログを表示して入力する場面と画面遷移して入力する場面の使い分けに明確な法則性がない
  • エラーメッセージの表示方法
  • 案内文、注意書き、エラーメッセージなどの文言の丁寧さ
    • 「～してください」「～して下さい」
    • 「～します」「～致します」
    • 「こちら」「コチラ」
    • 「お問合せ」「お問い合わせ」
  • マージン、パディングの取り方がバラバラ
  • フォントサイズ

などなど、これらが統一されていないな～と感じたことがある方も多いのではないでしょうか。

それもそのはずで、長年システムを運用していると、

  • 営業
  • CS
  • 管理部門
  • 外部ベンダー
  • 協力会社
  • アライアンス企業

など、様々な関係者が関係することが多く、その結果色んな立場・考え方の方からの意見や要望を反映していくことになると思います。
その際に統一された判断基準やルールがないと、「ちぐはぐ」が生まれてくるのも至極自然なことなのかもしれません。

このような問題は「仕組み」で解決するしかないと考えます。

デザインシステムとは

ググると以下の様に説明があります。

デザインシステムに含まれる要素

  • デザイン原則: ブランドの根幹をなす基本的な考え方や、デザインを導くための上位概念。
  • スタイルガイド: 色、タイポグラフィ、スペーシングなどのビジュアルスタイルを定義するルール集。
  • コンポーネントライブラリ: ボタンや入力フォームなど、再利用可能なUIコンポーネントとそのコード。
  • デザイントークン: 色、フォントサイズなどのデザイン要素をコード化されたもの。システム全体で一貫性を保つために使用。
  • パターン: 具体的なUIの構成方法やインタラクションの例。

デザインシステムのメリット

  • デザインの一貫性を担保する: ブランドイメージを強化し、ユーザーに統一感のある体験を提供します。
  • 開発効率を向上させる: 共通のコンポーネントを再利用することで、開発スピードが上がり、コスト削減にもつながります。
  • コミュニケーションを円滑にする: デザイナーとエンジニアが共通の「デザイン言語」で話すため、認識のずれが減り、手戻りを防ぎます。
  • 品質のベースラインを向上させる: デザインの品質基準が上がり、常に一定以上の品質が保たれます。

結構大それたもので、作成するのも大変そうです。また、この手のものは作る事よりも、メンテナンスして運用に浸透していくほうが大変なことはこれまでの経験則からわかっている事でもあります。

当社が参考にしている情報

SmartHR様が公開頂いているデザインシステムを大いに参考にさせていただいています。

Webサイトと書籍を拝見すると、進め方のコツや実例も豊富に掲載されていて、我々でもコツコツやっていけばできそうな実感が持てる内容になっています。

特に「目次をはじめに作らない」という考え方は斬新で、こういうのを作成するときは往々にして大きな構想を立てて、情報を整理・構造化した「目次」を作ってスケールの大きいことを考えがちです。

で、その後にあるバッドエンドの結末としては内容が充実せず、心が折れてお蔵入りしてしまう・・といった経験は何度もありました（反省）。

この考えに沿ってスタートを切ったばかりですが、コツコツ育てていこうと思います。
外部に公開できるようなレベルに成長したら、公開しようかとも考えています。

この記事を書いた人

この記事を書いた人 アイデアログ 取締役CTO 松川徹

Discussion