この記事の要点
- 頼めるものは方針・実装・運用の3層に分かれます。見積もりの多くは2層目までで、3層目が入っていないことがあります
- いちばん多い失敗は「作ってもらったが使われない」です。原因は作りの質ではなく、納品後に誰が持つかを決めていないことです
- だから最初に決めるのは、作る範囲ではありません。社内に持ち続ける人がいるかどうかです。いないなら、作らずに既製のものを使うほうが向いています
画面ごとにボタンの見た目が違う。同じ意味の言葉が画面によって違う。新しい画面を作るたびに、色と余白を毎回決め直している。そろそろデザインシステムを作りたい、と考えて外注先を探し始めるところから、この記事は始まります。
ところが、この領域は作ったものが使われないという形での失敗がとても多い場所です。作りの質が低いからではありません。納品の時点では完成しないものを、納品で終わる形の契約で買ってしまうためです。
頼めるものは3層
| 層 | 何が納品されるか | これが無いとどうなるか |
|---|---|---|
| ① 方針と規約 | 色・文字・余白の決め方、部品を使う場面の判断基準 | 各自の好みで決まり、増やすたびにばらつく |
| ② 実装されたコンポーネント | 画面に組み込める形のものと、デザインツール側の対応物 | 文書はあるが、毎回作り直すことになる |
| ③ 運用の仕組み | 追加と変更の手順、レビューの通し方、配布のやり方 | 半年で元の状態に戻る |
見積もりの多くは②までです。 ③が入っているかどうかは書いていないことも多いので、こちらから聞いてください。
使われるかどうかを分けるのは③です。 ①と②がどれだけよくできていても、③が無いと次の画面で足りないものが出た瞬間に、各自がその場で作り始めます。考え方そのものは デザインシステムの考え方 にまとめてあります。
いちばん多い失敗は「作ってもらったが使われない」
原因は、たいてい次の2つです。
1つめは、使う人が決まっていないこと。 誰のために作るのかが曖昧なまま作ると、デザイナー向けの資料としては立派なのに、実装する人が読まないものができます。逆もあります。②を頼むときは、デザインツール側とコード側のどちらが正なのかを最初に決めてください。 ここが決まっていないと、両方あるのに食い違う状態になります。
2つめは、更新する担当がいないこと。 デザインシステムは、納品された時点が完成ではありません。画面を作るたびに足りないものが出てきます。 そこで足す人がいないと、足りないぶんが各画面の中で個別に作られ、しばらくすると「デザインシステムはあるが、実際の画面はそれで出来ていない」という状態になります。
だから外注する前に決めるべきなのは、作る範囲ではありません。納品後に誰が持つかです。
頼む前に決めておく6つ
| 決めること | 決まっていないと何が起きるか |
|---|---|
| 対象のプロダクトと画面の数 | 見積もれない。あとから範囲が膨らむ |
| 既存のUIを、どこまで移すか | 新規ぶんだけの見積もりになり、既存が置き去りになる |
| 使う人は誰か（デザイナー・実装する人・両方） | 片方が読まないものができる |
| デザインツールとコード、どちらを正にするか | 両方あって食い違う |
| 納品後、誰が持つか | 使われなくなる |
| 実装の枠組み（React・Vue など） | 作り直しになる |
2つめは見積もりから漏れやすい項目です。新しく作る費用だけを見て契約すると、あとから「既存の何百画面をどうするか」という話が別に出てきます。 移行を含めるか、含めないなら既存はそのまま残すのか、を先に決めてください。
見積もりが何で動くか
- コンポーネントの数と種類（表・日付の入力・データの可視化は、ボタンや入力欄の何倍もかかります）
- 対応する実装の枠組み（複数に対応するなら、そのぶん増えます）
- デザインツールとコードの両方を作るか
- ドキュメントの厚み（「いつ使うか」まで書くのか、見た目の一覧だけか）
- 既存のUIをどこまで移すか
- 運用の仕組みまで含むか
4番目は差が出やすいところです。 見た目の一覧だけのドキュメントは、作るのは速いのですが、使う人が「どれを選べばいいか」で毎回止まります。 コンポーネントの一貫性 が問題になるのは、部品が無いときよりも、似た部品が複数あってどれを使うか決まっていないときです。
比べられる形にするには、返ってきた見積もりを金額の前に次の4つで並べてください。
- コンポーネントは何点で、その一覧はもらえるか
- 納品物はデザインツール側か、コード側か、両方か
- ドキュメントに「いつ使うか」が入るか、見た目の一覧だけか
- 既存のUIの移行は含まれるか
誰に頼むか
依頼先の種類と向き不向きは、ユーザビリティテストはどこに依頼すればいいか の整理がそのまま当てはまります。ここでは、この領域に固有の4つ目を足します。
| 選び方 | 向く場面 | 気をつけること |
|---|---|---|
| 専門の会社・フリーランスに作ってもらう | 社内に持ち続ける人がいて、立ち上げを速めたい | ③運用の仕組みが見積もりに入っているか |
| 作った制作会社に頼む | いまの画面の事情を踏まえて作ってほしい | 既存の作りを前提にするので、整理が中途半端になることがある |
| 社内で作る | 持ち続ける人がいて、時間もある | 立ち上げに数か月かかる |
| 既製のものを使う | 持ち続ける人がいない | 自由度が下がる。見た目が自社のものにならない場合がある |
判断の軸は1つです。社内に持ち続ける人がいるかどうか。
いるなら、外注は立ち上げの加速として効きます。いないなら、外注して作ったものは使われなくなる可能性が高いので、既製のものを使うほうが向いています。既製のものは自由度が下がりますが、更新と保守が自分たちの手を離れるので、持ち続ける人がいない状態でも成立します。
作るか買うかで先に考えないでください。持てるか持てないかで分けるほうが、判断を間違えません。
外注では買えないもの
- 使われている状態そのもの。 納品されるのは物であって、使われる状態は運用でしか作れません
- 社内の合意。 「これからはこれを使う」という決定は、外の会社には出せません
- 完成。 画面を作り続ける限り、足りないものは出続けます
- AIが作った画面の品質。 デザインシステムがあれば揃うわけではありません。デザインシステム群青（GUNJO）で行っているコールドテストという実験では、その画面の主役を受け持つコンポーネントが揃っていた回はAIがほとんど作り足していない一方で、主役のコンポーネントが無かった回は、画面でいちばん大きく見せる部分がその場で組まれていました。揃っていない領域では、AIは黙って自分で組みます。 詳しくは AIが作った画面は、出していいのか にまとめてあります
既製のものを使う、という選択肢
最後に、UIXHERO が関わっている選択肢を1つ置いておきます。上の表の4つ目、既製のものを使うに当たるものです。
群青（GUNJO） は UIXHERO が作っているデザインシステムで、コンポーネントとドキュメントを公開しています。自社の見た目に合わせて作りたい場合や、既存のUIを土台に整理したい場合には向きません。 その場合は、この記事の1つ目か2つ目を選んでください。
どのコンポーネントについて「いつ・なぜ使うか」を書いてあるかは UIコンポーネント から辿れます。UIXHERO 側の対応表は 群青とUIコンポーネントの対応 にあります。実物と、実際にAIに組ませた記録は gunjo.jp（gunjo.jp を新しいタブで開く） で公開しています。
この記事は、UIXHEROがAI（Claude）と協働で制作しています。構成の判断と公開前の事実確認は人間が行い、下書き執筆はAIが担っています。
GunjoUI by UIXHERO
