デザインシステム構築で150万円を無駄にしないために｜6つの壊れ方と立て直しの手順

アーム代表の伊藤です。
デザインシステム構築は一式で150万円〜かかります（アームの場合・2026年8月時点・税別）。ただし作ったあと誰が維持するかを決めていなければ、1年から2年で元の状態に戻り、その費用は償却されずに消えます。この記事では、現場で繰り返し見てきた6つの壊れ方と、作り直す前の棚卸しの手順を整理します。

こんな方におすすめのコラムです

• 「デザインシステムを作ったのに、誰も使っていない」という方
• 「Figmaを開くと画面が何百枚もあって、どれが最新か誰も答えられない」という方
• 「デザイナーが何度か代わって、なぜこの値なのかを知っている人がいなくなった」という方
• 「作り直しの見積もりが出てきたが、半年後にまた同じ状態になる気がして踏み切れない」という方
• 「AIに実装させれば早いと言われたが、渡すデータがこれで大丈夫なのか分からない」という方

デザインシステム構築が失敗する原因は、作り方ではなく運用の設計にある

デザインシステム構築とは、UIの部品・値・命名のルールを1か所にまとめ、誰が作っても同じ品質の画面になる状態をつくる仕事を指します。デザイン原則、スタイルガイド、コンポーネントライブラリの3つで構成されるのが一般的な説明です。ただし実務で成否を分けるのは構成要素の数ではなく、作ったあとに誰がそれを維持するかが決まっているかどうかです。

失敗したデザインシステムを見にいくと、たいてい中身は悪くありません。ボタンも色もきちんと登録されています。壊れているのは部品ではなく、部品を使い続ける仕組みのほうです。

デザインシステム構築の「作る」と「使われ続ける」は別の仕事

デザインシステム構築の見積もりには、作る工数が入っています。入っていないのは、使われ続けるための工数です。新しい画面が増えたときに部品へ還元する時間、命名を判断する時間、例外を記録する時間。これらは誰の見積もりにも入っていないまま、暗黙に誰かの善意で埋められます。

その善意が続くのは、だいたい担当者が代わるまでです。デザインシステムの導入を検討している段階なら、まず小さく作る手順を整理したデザインシステムの導入はまず3点だけ。小さく作って育てる手順と作り方を先に読んでください。この記事は、その先で起きることを扱います。

デザインシステム構築のあとに起きる、6つの壊れ方

ここからは、実際の現場で繰り返し見てきた壊れ方を6つに分けて並べます。特定の案件が分からないよう、複数の現場で共通して見た形にまとめています。

読んでいただきたいのは、6つが独立した問題ではないという点です。上から順に連鎖していて、最後の6番目に到達した時点で、そのデザインシステムは設計図ではなくなります。

1. コンポーネントになっていない

いちばん多いのがこれです。見た目は整っていて、色もフォントも揃っている。ただしボタンもカードもヘッダーも、すべてがただの図形の集合として置かれています。

症状は1つで、変更コストが画面数に比例します。色を1つ変える作業を考えてください。部品になっていれば1箇所です。なっていなければ、その色を使っている画面の数だけ手で直します。100画面のうち40画面で使われていて、1画面あたり3分なら2時間。単純計算ですが、これが年に4回あれば8時間です。

金額よりも重いのは、その8時間が「今回は直さない」という判断を生むことです。乖離はここから始まります。

2. カラースタイルが「color1」のまま残っている

登録はされている。ただし名前が color1、color2、color3 のまま、一度もリネームされていない。これも頻繁に見ます。

登録は5分で終わりますが、命名は設計です。color1 という名前は、その色が何のために存在するかを誰も決めなかった証拠になっています。次に入った人は、どれを使えばいいか判断できません。判断できないと、スタイルを使わずに直接カラーコードを打ち込みます。

ここから、デザインシステム構築の健康度を測る軸が1つ出ます。見るべきは整備率ではなく使用率です。何個作ったかではなく、実際に何割が使われているか。登録数だけを報告書に書くと、この壊れ方は最後まで見えません。

3. 画像が部品化されていない

画像は装飾だと思われがちなので、部品化が後回しにされます。ところが変更頻度でいえば、画像はテキストより高いことが多い領域です。

部品になっていないと、比率とサイズの一括変更ができません。カード内のサムネイルを16対9から4対3に変えたい、というよくある要望が、総当たりの作業になります。そして総当たりになる作業は、やはり実行されません。

4. バリアブルの代わりに、マスターコンポーネントを複製している

バリアブルを作らずに、マスターコンポーネントごと複製して色違い・サイズ違いを作っている状態です。Figmaの公式ガイドでは、バリアブルは「デザインのあらゆるプロパティやプロトタイプの動作に適用できる、再利用可能な値を保存する」ものと説明されています（出典: Figma「Guide to variables in Figma」）。差分を値として持つための仕組みです。

複製は、その差分を値ではなく実体として持つやり方になります。厄介なのは、複製した当日は誰も困らないことです。動くので。困るのは3ヶ月後、ブランドカラーが変わったときで、複製の数だけ作業が増えます。複製は、未来の自分あての請求書です。

5. 担当者が代わり、何が正か分からなくなる

デザイン担当者は、いつか必ず代わります。業務委託なら数ヶ月単位で代わることもあります。それ自体は事故ではなく前提です。

問題は、代わるときに引き継がれるのがファイルだけで、判断の履歴が引き継がれないことです。なぜこの余白が24pxなのか、なぜこのボタンだけ角丸が違うのか。理由を知っている人がいなくなると、後任は触れなくなります。触ると何かが壊れるかもしれないからです。そして触られないデータの隣で、本番の実装だけが進んでいきます。

6. 本番環境を正として、デザインデータを後追いで直し始める

最後がこれです。何が正しいか分からなくなった結果、いま公開されている本番環境を正とみなし、それに合わせてデザインデータを後から修正していく運用に変わります。

この時点で、デザインデータは設計図ではなくなっています。実装より後ろを歩いているものは、設計図ではなく記録です。しかも更新が手作業なので、記録としても不正確になっていきます。

ここが崩壊の完了地点です。維持コストだけがかかって、誰の意思決定にも使われない。デザインデータが資産ではなく負債に変わったと言えるのは、この線を越えたときです。

壊れる理由は怠慢ではない。今日いちばん速い選択の積み重ね

6つを並べると、担当者の管理が甘かったように見えます。実際は逆です。

部品化しないほうが、今日は速い。複製したほうが、今日は速い。命名を考えないほうが、今日は速い。リリース日が決まっているなかで、どれも合理的な判断です。誰も怠けていません。むしろ締切に対しては誠実でした。

壊れるのは、その合理的な判断を打ち消す仕組みが置かれていないからです。だから担当者を責めても直りません。デザインシステム構築で本当に設計すべきなのは部品ではなく、忙しい日に部品を使うほうが速くなる状態のほうです。

自社のデザインシステムが壊れているかを判定する4つの質問

自社がいまどこにいるかは、4つの質問で判定できます。ファイルを開く必要はありません。

1. 色を1つ変えるとき、何画面を触る必要がありますか
2. 「いま何が最新ですか」と聞いて、即答できる人がいますか
3. 登録済みのスタイルとコンポーネントのうち、実際に使われているのは何割ですか
4. 新しい人が入った初日に、どこを見ればいいかを示せますか

1つでも答えに詰まるなら、6つの壊れ方のどこかがすでに始まっています。2番に即答できないなら、5番まで進んでいます。デザインデータを本番に合わせて直した経験があるなら、6番に到達しています。

判定に迷う場合は、現状の棚卸しから相談していただけます。デザインシステム構築の現状を相談するところからで構いません。

AIに渡す時代、デザインシステム構築の品質は実装品質に直結する

ここ1年で前提が1つ変わりました。デザインデータをAIに渡して実装させる流れです。

Figmaの公式ガイドでは、MCPサーバーについて「バリアブル、コンポーネント、レイアウトのデータを直接IDEに取り込む」機能だと説明されています。あわせて「実際のコンポーネントを再利用することで出力品質が上がる」「Code Connectが生成コードの一貫性を保つ」とも書かれています（出典: Figma「Guide to the Figma MCP server」）。

読んでいただきたいのは、取り込む対象として挙げられているのが、バリアブル・コンポーネント・レイアウトだという点です。つまり、それらが無いファイルからは取り込むものがありません。MCPは構造を読む道具であって、構造を作る道具ではないというのが、アームが実際に触ってみた範囲での結論です。

もう一段深いことも起きています。これまで、データの構造の粗さは実装者が目で補完していました。「たぶんここは同じ部品だろう」と読み替えて、きれいに実装してくれていた。AIはその補完をしません。書いてあるとおりに出します。

結果として、デザインシステム構築の品質が、そのまま実装品質になりました。これまで人の善意で見えなくなっていた負債が、いま可視化されている段階です。AIを入れれば速くなるはずなのに現場が速くならない場合、原因はAIではなく、渡しているデータの構造にあることが多いです。

デザインシステム構築の立て直しは、作り直しではなく棚卸しから

壊れていると分かったとき、多くの現場が最初に検討するのは作り直しです。ただし作り直しは、たいていの場合いちばん筋の悪い選択になります。

なぜ作り直しても同じ場所に戻るのか

壊れたのはデータではなく運用だからです。新品のデザインシステムを、維持の担い手が決まっていない同じ組織に渡せば、同じ経路をたどって同じ場所に戻ります。半年から1年後に、同じ相談がもう一度発生するだけです。

作り直しの見積もりが出てきたら、その見積もりに維持の工数が入っているかを確認してください。入っていなければ、それは同じ失敗をもう一度買う契約になります。

デザインシステム構築の立て直しは、最小の4手から始める

全部を一度にやる必要はありません。順番があります。

1番目がいちばん重要で、いちばん軽い作業です。「これからはFigmaを正とします。本番と食い違ったらFigmaを直すのではなく、実装を直します」と宣言する。それだけで6番目の壊れ方は止まります。手を動かす前に、この線を引いてください。

デザインシステム構築の費用と、回収の考え方

アームの場合、デザインシステム構築は部分整備が50万円〜、一式が150万円〜です（2026年8月時点・税別）。現状の棚卸しだけを先にやりたい場合は、UIクイック診断・改善提案が15万円〜で、最短1週間です。金額の考え方は費用と相場の考え方にまとめています。

回収の見方は、作った金額ではありません。維持の工数が誰の見積もりに入っているかです。

初期費用150万円をかけても、維持の担い手が決まっていなければ、1年から2年で6番目の状態に戻ります。そのとき150万円は償却されずに消えます。逆に50万円の部分整備でも、維持の担い手と判断のルールが決まっていれば、新しい画面が増えるたびに効き続けます。

デザインシステム構築への投資が事業のどこに効くかも整理しておきます。効くのは売上ではなく販管費です。画面追加のたびに発生していた確認と手戻りの時間、新しい人が立ち上がるまでの時間、実装との差分を埋める時間。これらは毎月かかっている固定費なので、削れると効果が続きます。1回の制作費と比べるのではなく、3年分の運用工数と比べてください。

アームのデザインシステム構築の考え方

立派に作りすぎない

網羅性の高いデザインシステムは、作った瞬間がいちばん美しく、その後ずっと維持コストを払い続けます。アームは、いま困っている範囲から作ります。使われない部品は資産ではなく在庫なので、増やしません。

維持の担い手を決めてから作る

作る前に、誰がどのタイミングで部品へ還元するかを決めます。ここが決まらないまま着手すると、6つの壊れ方のどこかに必ず入ります。決められない事情がある場合は、決められる範囲までスコープを小さくします。

AIに渡せる構造まで作る

コンポーネント、バリアブル、オートレイアウト、命名。これらは見た目のためではなく、機械が読める状態にするために整えます。実装をAIに任せる前提が増えている以上、ここの精度がそのまま出力の精度になります。プロダクトのUI全体の設計から相談したい場合は業務システムUIUXデザインもあわせてご覧ください。

デザインシステム構築そのものの進め方と対応範囲はデザインシステム構築に整理しています。

よくある質問

まとめ

デザインシステム構築が失敗するのは、作り方の問題ではなく運用の設計が抜けているからです。壊れ方には順番があり、部品化されていない状態から始まって、命名の放置、複製による差分管理、担当者交代による履歴の消失と進み、最後は本番環境を正としてデザインデータを後追いする状態に着地します。この線を越えると、デザインデータは資産ではなく負債になります。

自社の位置は4つの質問で判定できます。色を1つ変えるのに何画面触るか、最新がどれか即答できるか、登録した部品の使用率、新しい人に示せる入口があるか。ここで詰まったなら、作り直しではなく棚卸しから始めてください。デザインシステム構築の立て直しは、正を1つ宣言するところから始まります。

アームは、デザインシステム構築の前段にある現状の棚卸しと、維持の担い手を決めるところから関わっています。作り直すべきかどうかの判断からで構いませんので、よければご相談ください。