アーム代表の伊藤です。デザインシステムの導入は、網羅的なドキュメントではなく、ボタンの使い分け・用語集・破壊的操作のルールの3点を1枚に決めるところから始めるのが正解です。小さく作って次の開発で使い、迷ったら追記する。この記事では、最初に作る3点の中身と、少人数でも過剰投資にならない5ステップの導入手順を解説します。
こんな方におすすめのコラムです
- 「半年かけてガイドラインを整備したのに、気づけば誰も参照していない」という方
- 「デザインシステムの作り方が分からず、着手できないまま画面だけ増えていく」という方
- 「画面ごとにボタンや用語がバラバラで、開発のたびに同じ議論をしている」という方
- 「少人数のチームで、デザインシステムに大きな工数は割けない」という方
- 「デザイナー不在のチームで、Figmaなしでも作れるのか知りたい」という方
デザインシステムとは。導入は「小さく始める」が正解です
デザインシステムとは、UIの部品と用語、その使い方のルールを1か所にまとめ、誰が作っても同じ品質の画面になるようにする仕組みです。スタイルガイドやコンポーネント集はその構成要素で、本体は「チームの決めごと」のほうです。
SmartHR Design Systemやデジタル庁デザインシステムのような公開事例を見ると、最初からあの規模を目指したくなります。ただ、あれは長い期間をかけて育てられた結果の姿であって、初日の姿ではありません。
導入の最初に必要なのは網羅的なドキュメントではなく、チームがよく揉める3点だけを決めた、1枚のルールです。デザインシステムは見た目を揃えるための投資ではなく、開発速度、UIのズレの再発防止、新しいメンバーのオンボーディング品質という、事業の効率に効く投資です。裏を返せば、効率に効かない範囲まで作り込むのは過剰投資です。この線引きが、デザインシステム導入を成功させる最初の判断になります。
まず作るのは3点だけ
別の記事、管理画面のUI改善の解説で、現場でよく見る3つのズレを紹介しました。名前と印がすれ違うアイコン、実行ボタンの隣に同じ見た目で並ぶリセット、モーダルのキャンセルと×の干渉です。この3つは偶然ではなく、決めごとがないまま画面が増えた結果として、ほぼ必ず現れます。デザインシステムの導入で最初に作るべきは、この再発を止める次の3点です。
ボタンの種類と使い分け（実行・通常・破壊的操作）
ボタンは「実行（プライマリ）」「通常（セカンダリ）」「破壊的操作」の3種類に絞り、それぞれの見た目と使いどころを決めます。1画面に実行ボタンは原則1つ、破壊的操作は実行と同じ見た目にしない。この2行だけでも、検索ボタンの隣に同じ顔でリセットが並ぶ事故は防げます。
用語集（呼び名を1つに）
同じ機能が画面によって「登録」「作成」「追加」と呼ばれるのは、呼び名を決める場所がないからです。1つの機能には1つの呼び名と決めた用語集を作ります。アイコンとラベルの対応もここに含めれば、名前と印のすれ違いに気づける基準になります。用語集は表計算ソフトの1シートで十分です。
破壊的操作のルール
削除やリセットなど、取り消せない操作の扱いを決めます。確認ダイアログを出す条件、ボタンの色と位置、「キャンセル」と「×」の役割の統一までがここに入ります。決めておけば、モーダルの中で閉じる操作同士が干渉する問題は起きなくなります。ユーザーのデータを守るルールなので、3点の中では最優先です。
デザインシステム導入の手順（小さく作って回す）
導入の手順は5ステップです。新しく何かを作るというより、いまある画面から決めごとを拾い上げる作業に近いです。
ステップ | やること |
|---|---|
1. 現状の棚卸し | よく使う画面のスクリーンショットを並べ、ボタン・用語・確認ダイアログのバラつきに印を付ける |
2. 頻出部品を3つ決める | 登場回数が多く、揉めた回数も多い部品を選ぶ。多くの場合はボタン・入力フォーム・確認ダイアログに落ち着く |
3. ルール化する | 決めたことを1枚にまとめる。「なぜそうするか」も一言添える |
4. 次の開発で使う | 新規や改修の画面から適用する。既存画面の一斉改修はしない |
5. 育てる | 迷いが出たら都度追記する。見直しの機会を決めて、決定を溜めない |
ポイントは2つあります。棚卸しは全画面を対象にせず、毎日使う画面だけに絞ること。そして、既存画面をいきなり全部直そうとしないことです。ルールは「これから作る画面」に適用し、既存画面は触るタイミングで合わせていけば、デザインシステム導入のコストは小さく保てます。
ツールと運用（Figma等）。仕組みは大げさにしない
ツールはFigmaが定番ですが、最初は1ファイル1ページで足ります。コンポーネント化するのも頻出の3部品だけで構いません。デザイナーがいないチームなら、用語集とルールはNotionやスプレッドシートでも十分に機能します。
運用で大事なのは、管理の仕組みの立派さよりも決定の置き場所が1つであることです。承認フローや専任の管理者を立てるのは、参照する人が増えてからで間に合います。運用ルールは「迷ったら、決めて、ここに書く」の1行から始めてください。
よくある失敗：立派に作って、使われない
デザインシステムの導入でいちばん多い失敗は、能力の問題ではなく順序の問題です。
- 網羅を目指して、完成する前にチームの熱が冷める
- 実際の開発と切り離れた場所で作られ、参照されない。引かれない辞書は、無いのと同じです
- 更新の承認が重く、現場が「ルール外」で画面を作り始める
- 作った人しか直せず、その人の異動や退職とともに止まる
共通するのは、使われる前に立派になろうとしていることです。順序は逆で、使われている状態を先に作り、立派さは後から追いつかせる。これが、デザインシステムを小さく始める理由です。
アームのデザインシステム導入の考え方
小さく作って、開発のたびに育てる
アームでは、デザインシステムを最初の成果物ではなく、開発の副産物として育つものと考えています。画面を設計するたびに、決めたことを1枚に足していく。この積み方なら、ドキュメントのためだけの工数がほぼ発生せず、書かれていることがすべて現役のルールになります。
事業の速度に効く範囲で止める
デザインシステムはそれ自体が売上を生むものではありません。効くのは、開発の手戻りが減る、レビューの論点が減る、新しいメンバーが迷わなくなるという、日々の速度の部分です。だからアームは、速度に効かない整備はやらないという線引きを守ります。管理画面や業務システムのUIについては、業務システムUI/UXデザインのサービスとして、画面設計とあわせて最小構成のデザインシステム作りまで支援しています。
自社の場合はどこから手をつけるべきか迷うときは、無料相談で現状を聞かせてください。棚卸しの範囲を一緒に決めるだけでも、最初の一歩はかなり軽くなります。
デザインシステムの導入でよくある質問
小規模なチームでもデザインシステムの導入は必要ですか？
本記事で紹介した3点（ボタン・用語・破壊的操作）の規模なら、2〜3人のチームでも作る価値があります。人数が少ないうちに決めておくほうが、後から揃えるより安く済みます。フルセットのデザインシステムが必要かどうかは、チームと画面が増えてから判断すれば十分です。
何から作ればいいですか？
ボタンの種類と使い分けからをおすすめします。登場回数が最も多く、決めた効果を全員がすぐ体感できるからです。次に用語集、破壊的操作のルールの順に進め、3点が終わったら一度立ち止まって、運用に乗っているかを確認してください。
エンジニアだけでもデザインシステムを導入できますか？
できます。用語集と破壊的操作のルールはデザインツールなしで作れますし、ボタンの3分類はコンポーネントの実装ルールとして決められます。後からデザイナーが加わったとき、その決めごとがそのまま土台になります。
Figmaは必須ですか？
必須ではありません。最初の3点はスプレッドシートやNotionでも運用できます。デザイナーが日常的に画面を作っているなら、Figmaのコンポーネント機能を使うほうが効率的、という位置づけです。
効果はいつから出ますか？
ルールを適用した次の開発からです。ボタンで迷わない、呼び名で揉めないという形で先に現れ、UIのズレの再発防止やオンボーディングのしやすさは、その後に積み上がっていきます。
アームは、伝言ゲームなしで課題の整理からデザイン、実装までを一人が担う戦略デザインスタジオです。
- サイトはあるのに、売上につながっていない
- 問い合わせは来るが、質が合わず商談にならない
- 何に投資すれば伸びるのか、判断がつかない
動くものなら数日で作れる時代です。問われるのは、何を作るかより、なぜ作るか。事業の分解から画面と実装まで同じ人間が担当するので、決めた方針が形になるまで薄まりません。ぜひアームに一度ご相談ください。
まとめ：デザインシステムの導入は、3点を決めるところから
デザインシステムの導入は、立派なドキュメント作りではなく、ボタンの使い分け、用語集、破壊的操作のルールという3点を1枚に決めるところから始まります。小さく作り、次の開発で使い、迷ったら追記する。この回し方なら、少人数のチームでも過剰投資にならず、開発速度とUIの一貫性という事業の効率を積み上げられます。
いま自社の画面のどこにズレが出ているかを確かめたい方は、あわせて管理画面のUI改善の記事をご覧ください。棚卸しの目の付けどころとして、そのまま使えるはずです。
