デザインシステムは部品の一覧ではない｜崩れない土台の作り方

「部品の一覧は作りました。でも新しい画面は、いつも一から作られています」「同じ意味のボタンが、画面ごとに違う形で置かれています」。——制作を外に出している会社から、繰り返し届く声です。共通しているのは、一覧そのものは確かに存在しているという点です。足りないのは部品の数ではありません。本当は、1つの部品が取りうる状態と、部品を増やしてよい条件と、それを決める人が書かれていないので、迷った人がその場で新しい部品を作れてしまうのです。デジタル庁が公開しているデザインシステムには、ボタン、入力欄、表、通知、パンくずといった部品が49件並んでいます。ただし手厚く書かれているのは部品の絵ではありません。1つのボタンに見た目が3種類あり、大きさが4段階あり、触れたときの状態が4つある、という内訳のほうです。この記事では、部品と状態の決め方を軸に、作った土台が使われ続ける状態にどう持っていくかを整理します。

部品の一覧を配っただけでは、そろわない

崩れ方には順番があります。最初のうちは、一覧に載っている部品がそのまま使われます。次に、一覧に載っていない場面が来ます。押せないボタン、まだ何も登録されていない一覧、送信の途中、失敗した後。誰かがその場で一枚を作ります。それが次に作る人の見本になり、似た場面でそのまま真似られます。最後は一覧を開く人がいなくなり、直近に作られた画面が事実上の基準になります。

使われなくなる一覧には共通の欠けがあります。第一に、どれを使えばよいかの基準が書かれていないこと。似た部品が2つ並んでいて、選び分ける条件が無ければ、その日の気分で選ばれます。第二に、載っていない場面の扱いが書かれていないこと。第三に、直す人が決まっておらず、実装のほうが先に進んで一覧が古くなっていること。古い一覧は、無い一覧より始末が悪くなります。従った人が間違った側になるからです。

資料の側でも同じことが起きます。表紙や見出しの型が置いてあっても、新しい図が要るたびに一から作られ、線の太さも文字の大きさも毎回違うものができあがります。直す方向は、一覧を厚くすることではありません。迷いどころに答えを置くことです。この記事の残りは、その迷いどころを順に潰していく形で進みます。

部品はどの単位で切り出すか

最初に決めるのは、何を1件として登録するかです。層を3つに分けると扱いやすくなります。いちばん小さい層は、それ以上分けられないもの。ボタン、入力欄、見出し、注釈、区切り線です。次の層は、それらを組んだかたまり。検索の窓は入力欄とボタンの組ですし、申込の1行は見出しと入力欄と注意書きの組です。いちばん上の層は、画面の骨格。ヘッダー、目次、一覧の枠がここに入ります。

切り出す基準は1つに絞ります。2か所以上で同じ意味で使われる見込みがあるかです。1か所でしか使わないものは部品にしません。ここで気をつけるのは、判断を「見た目が似ているか」でやらないことです。見た目で切ると、同じ形をした違う意味の部品が1件にまとめられ、片方の都合で直した瞬間にもう片方が壊れます。同じ形でも意味が違うなら、別の部品として分けておくほうが後の事故が減ります。

公開されている実例が参考になります。デジタル庁の一覧では、チップタグとチップラベルが別の項目として並んでいます。見た目はよく似ていますが、押して絞り込む役割と、状態を表示するだけの役割で分けられているからです。同じように、注釈のブロックと、通知のバナーと、緊急時のバナーも別の項目です。役割が違えば分ける、というだけの基準で、一覧の粒がそろいます。

1つの部品が持つ状態を、先に数え上げる

ここが、部品の一覧と土台の分かれ目です。デジタル庁のボタンのページには、見た目の種類として塗り、外枠、文字だけの3つが書かれ、大きさが4段階、触れたときの状態として通常、指を乗せたとき、押しているとき、選ばれているときの4つが書かれています。1つのボタンでこの内訳です。部品を1件足すというのは、絵を1枚足すことではなく、状態の一覧を1組足すことだと分かります。

業務で使う画面や資料では、さらに足りません。押せないとき、送っている途中、失敗した後の3つは、ほぼ必ず出てくるのに書かれていないことが多い状態です。データを表示する部品なら、中身が空のとき、1件だけのとき、入りきらないほど多いとき、読み込んでいる途中、取ってこられなかったときを決めます。空のときの見た目を決めていない部品は、必ずどこかで真っ白な画面を作ります。

部品の種類	最低限そろえる状態	書いていないと起きること
押す部品	通常／指を乗せたとき／押しているとき／選ばれているとき／押せないとき	押せないことを薄い色だけで表し、読めない人に伝わらない
入力する部品	空／入力中／入力済み／誤りがあるとき／変えられないとき	誤りの伝え方が画面ごとに違い、直し方が読み取れない
一覧を出す部品	空／1件／多いとき／読み込み中／取得できなかったとき	空のときだけ枠ごと消え、壊れたように見える
知らせる部品	お知らせ／注意／失敗／完了	重さの差が色だけで表され、並べたときに区別できない
送る操作	送る前／送っている途中／送り終えた後／失敗した後	二重に押され、同じ申込が2件届く

状態を数え上げる作業は、絵を描く作業ではなく、言葉を書く作業です。だから設計の担当者だけで抱えず、実際に問い合わせを受けている担当と一緒に並べると早く終わります。現場が知っている失敗の場面が、そのまま書き落とされた状態の一覧になっているからです。

余白と文字の大きさは、値ではなく段階で持つ

余白を「ここは16画素」と個別に書いていくと、次に作る人が18画素を使います。悪気はありません。書いてある場所を探すより、目分量で置くほうが速いからです。避け方は決まっていて、値ではなく段階で持ちます。使ってよい余白を6段階ほどに絞り、その段階の名前で呼びます。段階に無い値を使えないようにすると、目分量が入り込む隙が消えます。

文字の大きさも同じです。見出しから注釈まで、使ってよい大きさを段階で並べ、太さも使ってよい範囲だけを残します。デジタル庁のボタンが4段階の大きさを持ち、それぞれ幅と高さの数値が決まっているのは、この持ち方の実例です。あわせて、触れられる範囲を44画素以上に保つという条件が書かれています。段階を決めるときは、見た目のきれいさより、押し間違えない大きさのような外せない条件を先に置きます。

段階は増やしたくなります。そのときの手順を先に決めておきます。まず、既にある段階の組み合わせで代用できないかを見ます。次に、代用できない理由を1行書きます。それでも必要なら足しますが、段階が10を超えたあたりから、選ぶ人が迷って結局目分量に戻ります。増やすと決めたら、どれか1つを使わない側に回せないかを同時に考えます。

部品の名前は、見た目ではなく役割で付ける

「青ボタン」「大見出し」という名前は、色や大きさを変えた日に嘘になります。名前は役割で付けます。いちばん進めたい操作、その次の操作、取り消す操作、という具合です。状態は名前の後ろに足します。役割で付けておくと、色を変えても名前を変えずに済み、直す範囲が一覧の中だけで収まります。名前を変えずに中身を変えられることが、後の運用を軽くします。

とはいえ、名前が変わることもあります。デジタル庁の設計データでは、2026年8月19日に公開された2.17.1版でパンくずナビゲーションの名称が変更されています。公的に公開されているものでも、名前は版とともに動くということです。だから、名前を変えるときの手順も先に書いておきます。旧い名前をいつまで残すか、どこに置き換えの案内を出すか、の2つです。

付け方の決まりは3行で足ります。役割で付ける、状態は後ろに足す、略さない。3つ目が抜けやすいところです。社内で通じている略し方は、外注先や新しく入った人には通じません。渡した先で名前が読めないと、一覧を探すより作ったほうが速いという判断に戻ってしまいます。

増やしてよい条件と、決める人を先に決める

部品が増える理由は、新しい要望が来るからではありません。既にあるものを探す時間より、その場で作る時間のほうが短いからです。この差がある限り、注意喚起では止まりません。止め方は2つで、探す時間を短くすることと、増やしてよい条件を書いて、当てはまらないものは止まるようにすることです。

条件は4つあれば足ります。2か所以上で使う見込みがあること。既にある部品の組み合わせでは作れないこと。この記事で挙げた状態を全部書けること。そして、直す人の名前が決まること。4つ目が書けない部品は、作った日を頂点に古びていきます。逆に言えば、4つ目さえ決まっていれば、多少ばらついた部品でも後から寄せられます。

決める人は3つの役に分けます。全体の持ち主を1人置き、部品ごとの担当を割り当て、残りは使う側です。相談の窓口は1か所にまとめます。ここを合議にすると、決まるまでの待ち時間が「その場で作る」ほうを有利にしてしまいます。決める速さは、正しさと同じくらい定着に効きます。

• 急ぎの案件だけ例外にする——例外の回数が増え、やがて例外のほうが通常になる
• 使う側に増やす権限まで渡す——似た部品が3つ並び、選び分ける基準が誰にも書けなくなる
• 増やす判断を月1回の会議に集める——待てない案件が先に作られ、会議は事後報告の場になる
• 作った本人を直す人にする——異動した瞬間に持ち主が消え、誰も触れない部品になる
• 使われていない部品を残したままにする——一覧が長くなり、探す時間が延びて作る側に傾く

版の上げ方と、古い部品の畳み方

直したら版を上げます。上げ方は3段階に分けます。直しても使っている側は何もしなくてよいもの。使い方が変わるので案内が要るもの。使えなくなるもの。この3つ目だけ、予告の期間を置きます。3つのどれに当たるかを、直す人が自分で判断できる形にしておくのが要点です。判断が要る書き方にすると、忙しい日には案内が省かれます。

古い部品はいきなり消しません。順番があります。まず、これから使わないという印を付けます。次に、代わりに何を使うかを同じ場所に書きます。そのうえで、その部品を使っている場所の一覧を出します。最後に期限を決めて消します。置き換え先を書かずに印だけ付けると、使っている側は消えるまで気づきません。

版を書いておく効き目は、外に出すときに出ます。制作会社や外注に渡すとき、どの版で作るかを合意できるからです。版が無い一式を渡すと、納品されたものが古い決まりで作られていても、どちらが正しいのかを議論できません。デジタル庁が設計データにも文章の一式にも版を付けて配っているのは、同じ理由からです。

公開されている実例から、並べ方を借りる

一から考える必要はありません。デジタル庁が公開しているデザインシステムには、部品が49件並んでいます。並びは五十音で、部品ごとに見た目の種類、大きさ、状態、どういうときに使うかが書かれています。自社の一覧をこれと突き合わせると、足りないのが部品なのか、部品ごとの記述なのかがすぐに分かります。たいていは後者です。

借りるのは並べ方であって、中身ではありません。色や書体は自社の決まりに従います。そこは表現の決まりの側にある話で、部品の一覧に書き写すと、二重に管理することになって必ずずれます。部品の側には「この段階を使う」とだけ書き、実際の値は表現の決まりを参照する形にします。

もう1つ借りられるのは、配り方です。デジタル庁は、サイトを構成する文章一式とアクセシビリティの指針を、機械が読みやすい文章の形式でまとめて配布しています。版は2026年8月19日版で、一つの圧縮ファイルにまとまっています。自社の一式も同じように、絵ではなく文章として持っておくと、次の工程がまるごと楽になります。ここから先はその話です。

AIに作らせると、決めた部品から外れる

画面のもとになるものをAIに作らせると、社内で決めた共通の部品ではなく、世の中に広く出回っている既製の部品集を直接使ったものが返ってきます。2026年8月24日に公開された技術記事は、この現象を課題として明記したうえで、設計の道具と実装の対応づけを用意することで解決した手順を書いています。放っておくと外れる、というのが出発点です。

資料でも同じことが起きます。提案書やホワイトペーパーの図をAIに作らせると、毎回それらしい図ができあがります。ただし、前回作った図とは線の太さも配色の当て方も違います。理由は単純で、AIは学習してきた一般的な作り方に寄るからです。社内の部品の中身は知りません。指示に名前だけ書いても、中身を知らないので推測で作ります。

対策を置く場所は3つです。渡すときに選ばせること。受け取ったものを照らすこと。そして、部品を増やしてよいかどうかの判断を人が持つこと。この3つ目を落とすと、前の2つを丁寧にやっても部品は増え続けます。AIは、無ければ作るほうに倒れます。止まる指示を書かないと止まりません。

入口：決めた部品から選ばせる渡し方

渡し方の芯は1行です。新しい部品を作らず、次の一覧から選ぶこと。そのうえで、一覧そのものを一緒に渡します。名前だけの一覧では足りません。部品ごとに、役割、取りうる状態、どういうときに使うか、使ってはいけない場面を1件ずつ添えます。ここまで渡してはじめて、選ぶという指示が成立します。

対応づけを機械が読める形にしておくと、さらに効きます。設計の道具の上の部品と、実装の側の部品を一対一で結んでおけば、共通の部品を優先して使わせられます。ただし前提があります。前出の技術記事は、渡す側の設計で共通の部品が使われていないと、この対応づけが効かないと書いています。そろっていないものを渡して、そろえて返してもらうことはできません。

出口：決めた部品だけでできているかを点検させる

受け取ったものを、一覧と照らします。ここでAIに返させるのは、良い悪いの判定ではありません。使われている部品の名前と、一覧に無いものが混ざっている箇所です。判定まで任せると、根拠の書かれていない合格が返ってきて、確認が二度手間になります。位置と名前だけを返させれば、人は見るべき場所だけを見れば済みます。

任せてよい範囲と、人が見る範囲を分けておきます。任せてよいのは、決めた一覧と突き合わせれば答えが出る作業です。

• 使われている部品の名前を全部書き出し、一覧に無いものを別に並べる
• 余白と文字の大きさが、決めた段階のどれに当たるかを照合し、外れた箇所の位置を示す
• 1つの部品について、決めた状態のうち書かれていないものを挙げる
• 同じ意味で使われている部品が、画面や資料の間で違っていないかを突き合わせる
• 名前の付け方の決まりに合っていない名前を抜き出す

一方、人が見るのは4つです。その場面でその部品を使うのが適切か。状態の表し方が、色だけに頼っていないか。決めた部品で作った結果として、伝わり方が損なわれていないか。そして、増やす必要が本当にあるか。この4つは、部品の一覧ではなく、伝えたいことの側を知らないと判断できません。点検した結果は捨てずに残します。一覧に無かった部品が月に何件出たかは、後で必ず効く数字になります。

部品を増やす判断はAIに任せない

ここは明記します。部品を増やしてよいかどうかの判断は、AIに任せません。理由は、その判断が見た目の問題ではないからです。増やすというのは、誰かが今後ずっと直し続ける対象を1件増やすということです。誰が直すか、どこに影響するか、似た部品と紛らわしくないか。どれも社内の事情で、渡していない情報のほうが多い領域です。

実務では、止まったところを1件の申請として起こさせます。申請に書かせるのは5つです。人が週に一度まとめて見て、足すか、既存で代用させるか、そもそも要件のほうを見直すかを決めます。止まった回数が多い部品ほど、次に足すべきものが何かを正確に教えてくれます。

• どの場面で必要になったか——画面や資料の名前と、そこで何をさせたかったか
• 既存のどれで代用しようとして、なぜ足りなかったか
• 同じ場面が今後どこで出てきそうか——2か所以上の見込みが立つかどうか
• 取りうる状態を全部書けるか——書けないなら、まだ部品にする段ではない
• 直す人の候補——空欄のまま出てきた申請は、その時点で保留にする

この形にしておくと、AIを使う量が増えても部品の件数は増えません。増えるのは申請の件数です。申請が積み上がる場所は、一覧のどこが足りないかを指し示す地図になります。増やすかどうかを都度その場で決めていると、この地図は残りません。

制作会社や外注に渡すときの形

外に出す会社ほど、渡す形の設計が効きます。渡すのは部品の一覧ではなく、版の書かれた一式です。中身は6つ。部品の一覧、部品ごとの状態、余白と文字の段階、名前の付け方の決まり、増やしたいときの手順、そして窓口です。最後の2つが入っていない一式は、渡した先で必ず自作の部品を生みます。

取り決めの側にも2行足します。1行目は、成果物は指定した版で作ること。2行目は、一覧に無い部品を作った場合は、納品の前に申請を出すこと。あわせて、AIを使って作る場合にどこまで許すかも、同じ場所に書いておきます。使う量ではなく、決めた部品から選ばせているかどうかを条件にすると、確認できる形になります。

受け取り方も決めておきます。納品のときに、使った部品の一覧を一緒に出してもらいます。一覧に無い部品が混ざっていたら、その場で2つに分けます。棚に入れて自社の部品として引き取るか、既存の部品で作り直してもらうかです。この判断を先送りにすると、納品物の中だけに存在する部品が残り、次の改修で誰も触れなくなります。

資料の側とそろえられるのは、どこまでか

画面と資料は、そろえられる範囲が決まっています。共通にできるのは3つ。余白と文字の段階、名前の付け方、そして状態を数え上げるという考え方です。共通にできないのは、触れたときや押しているときの状態です。紙や配布用の資料には、そもそもその状態がありません。ここを無理に共通化しようとすると、資料の担当が画面の都合に付き合わされる形になり、離れていきます。

資料の側で部品にする値打ちがあるのは、図の型です。表、並べて比べる図、手順の図、注意書きの囲み。この4つは提案書でもホワイトペーパーでも繰り返し出てきます。画面の部品と同じように、それぞれの状態を決めます。手順の図なら、3段のとき、5段のとき、途中で分岐するとき。段数が変わったときの形を決めていない型は、5段目でレイアウトが崩れます。

共通化を進める順番も決まっています。まず名前、次に段階、最後に見た目です。逆から始めると、画面と資料でどうしても合わない見た目の話で止まり、そこまでで力尽きます。名前と段階だけそろっていれば、AIに渡す指示は画面と資料で使い回せます。実務で効くのは、見た目の一致より指示の使い回しのほうです。

使われ続けている状態を測る

最後に、定着しているかどうかの測り方を決めます。満足度を聞いても分かりません。数えるのは2つです。1つ目は、一覧に無い部品が使われた件数。出口の点検を残していれば、そのまま数になります。2つ目は、一覧の直しが止まっている期間です。この2つが両方とも悪くなっているなら、原因は使う側ではなく、持ち主の側にあります。

期間の上限は自社で決めます。たとえば、直しが3か月止まったら持ち主を見直す、と先に書いておきます。数字そのものに正解はありませんが、決めておかないと「そのうち直す」が続きます。あわせて、一覧に無い部品が使われた件数が減らない場合は、部品が足りないのか、探しにくいのか、どちらなのかを申請の中身から見ます。件数が減らない原因は、たいてい足りないことではなく、探すのに時間がかかることのほうです。

増やすだけの運用にならないよう、減らす日も置きます。年に一度、使われていない部品を洗い出して畳みます。畳む手順は先に決めてあるので、印を付けて、置き換え先を書いて、使っている場所を出して、期限を切るだけです。一覧が短く保たれている限り、探すより作るほうが速いという逆転は起きにくくなります。この逆転を起こさせないことが、定着という言葉の中身です。

まとめ

デザインシステムは部品の一覧ではありません。一覧だけを配っても、そろわないところから崩れます。実際に崩れ始めるのは、一覧に載っていない場面に出会ったときです。押せないボタン、中身が空の一覧、送っている途中、失敗した後。そこで作られた一枚が次の見本になり、やがて誰も一覧を開かなくなります。だから増やすべきは部品の数ではなく、1つの部品が取る状態の数です。

決めることは順番に並びます。何を1件として切り出すか。2か所以上で同じ意味で使われるかを基準にして、見た目ではなく役割で分ける。1つの部品が取る状態を数え上げる。余白と文字は値ではなく段階で持つ。名前は役割で付け、状態は後ろに足し、略さない。そのうえで、増やしてよい条件を4つ書き、直す人の名前を決め、版の上げ方と古い部品の畳み方まで先に書いておきます。

AIに画面や資料を作らせる前提になると、この順番の値打ちが変わります。放っておくと、社内の共通部品ではなく、世に出回っている既製の部品集を使ったものが返ってきます。渡すときは決めた部品から選ばせ、無ければ作らせずに止める。受け取ったら、使われた部品の名前と一覧に無い箇所を返させる。そして、部品を増やしてよいかどうかの判断だけは人が持ちます。増やすとは、誰かが直し続ける対象を1件増やすことだからです。

始め方は小さくて構いません。よく使う部品を5件選び、それぞれの状態を全部書き出す。余白と文字の段階を決める。増やしたいときの窓口を1か所決める。ここまでで、外注に渡せる一式の骨格はできあがります。この土台が返してくれるのは、そろった見た目そのものではなく、そろっていないと気づける状態です。作る速さだけが上がっていく環境では、気づける状態を先に用意しておいた側だけが、崩れずに済みます。

※本記事にはAIが活用されています。編集者が確認・編集し、可能な限り正確で最新の情報を提供するよう努めておりますが、情報の完全性、正確性、最新性、有用性等について保証するものではありません。本記事の内容に基づいて行動を取る場合は、読者ご自身の責任で行っていただくようお願いいたします。