Pathport丨UI
UI/UXデザイン
伊藤 悠希デザインシステム構築
「似たボタンが何種類もある」は、スピードの問題です。
プロダクトが育つほど、画面の一貫性は崩れ、新しい画面を作る速度は落ちていきます。アームは、デザイン原則から部品・運用ルールまでを、実際に運用が回る規模で整えます。
このような課題を諦めていませんか？
- 機能を足すたびに、似たようなボタンや部品が増えていく
- 画面ごとに色や余白、文字の大きさがバラバラになっている
- デザインと実装にズレがあり、毎回の確認に手間がかかる
- Figmaのデータが整理されておらず、どれが最新か分からない
- 一度作ったものの、運用されず形だけになっている
先に結論
デザインシステムは、要る会社と要らない会社がはっきり分かれます。先に書きます。
このサービスで決まること
繰り返し使う部品を定義し、複数の画面・プロダクトで共通化します。部分50万円〜／一式150万円〜。
向いている状態・向いていない状態
向いているのは、画面が20を超えて部品がばらついている状態。向いていないのは、画面が10未満の状態。まだ要りません。その場合はそう申し上げます。
アームの特徴
規模
立派に作りすぎません
デザインシステムの最大の失敗は、作ったのに運用されないことです。実際に使われる範囲に絞り、小さく作って育てる進め方をとります。
体制
設計した本人が部品まで作ります
原則・トークン・コンポーネント・ガイドラインを一人で一貫して整えます。決めたルールが工程をまたいで薄まりません。
連携
デザインと開発の共通言語をつくります
色や余白のルール（デザイントークン）を実装とつなぐ前提で設計します。状態違いまで部品化してFigmaでお渡しします。
定着
内製化まで見据えます
作って渡して終わりにしません。お客様のチームが自分たちで運用し続けられるよう、更新ルールと社内への根づかせ方まで支援します。
クリーンな商流
UIデザインの案件は、開発会社や大手ファームから下請けに流れるのが当たり前になっています。工程ごとにマージンが乗り、設計の意図は人を経るたびに薄まります。アームは発注者と作る人の間に誰も挟みません。
対応できる範囲
Webサービス・アプリ・SaaSプロダクトのデザインシステム構築を支援します。プロダクトの「らしさ」を定めるデザイン原則から、色・余白・文字の基本ルール（デザイントークン）、コンポーネントライブラリ、Figmaでの運用までを一貫して整えます。
- 現状のUIの棚卸しと、整備する範囲の設計
- デザイン原則・デザイントークン（色・余白・文字）の定義
- 状態違いまで含めたコンポーネントライブラリの整備（Figma）
- 使い方をまとめたスタイルガイド・運用ルールの文書化
- アクセシビリティ観点のルールへの組み込み
- 内製化支援（社内で運用が回る体制づくり）
一般的な進め方との違い
工程 | 一般的な進め方 | アームの場合 |
|---|---|---|
範囲 | 理想形をフル装備で設計する | 実際に使われる範囲に絞り、小さく作って育てる |
部品 | 見た目のパターンを網羅する | 状態違い（押せる・エラー時など）まで含めて部品化する |
実装連携 | デザインデータを渡して終わり | トークンを実装とつなぐ前提で設計し、共通言語をつくる |
運用 | 完成時がピークで形骸化する | 更新ルールと浸透の進め方まで含めて設計する |
デザインシステムは「作る」より「回る」が難しい。運用が回る規模に絞ることが、結局いちばんの近道です。
得られる成果
新しい画面が速く作れる
部品とルールが揃うので、毎回ゼロから考えなくなります。デザインと開発の両方のスピードが上がります。
誰が作っても崩れなくなる
デザイナーや担当が変わっても、プロダクトの見た目と操作感が保たれます。ルールが人の頭の中から仕組みに移ります。
確認の手間が減る
デザインと実装の共通言語ができるので、「ここの余白は？」のやりとりが減ります。開発チームが迷わず部品を選べます。
支援実績
失敗しないために
外部に頼まず自社で進める場合にも使える観点です。ここに書いたことだけでも、定着率はかなり変わります。
1. 全部を最初に作らない
フル装備のデザインシステムは、ほぼ確実に形骸化します。よく使う部品と、色・余白・文字のルールの3点から小さく始めてください。
2. 実装とつなぐ前提で決める
Figmaの中だけで完結するルールは、実装とズレていきます。トークンの命名から、実装側とつなぐ前提で設計してください。
3. 状態まで部品化する
ボタンの見た目だけ部品化しても、エラー時や押せない状態でバラつきます。状態違いまで含めて初めて部品です。
4. 運用ルールを先に決める
部品を追加したいとき、誰がどう判断するか。このルールがないと、システムの外に部品が増殖し始めます。
5. 例外を記録する
ルールに合わない画面は必ず出ます。例外を握りつぶさず記録しておくと、次の改訂で仕組みに取り込めます。
6. 浸透に時間を使う
作る労力と同じくらい、チームに使ってもらう働きかけが要ります。説明の場と質問窓口を、リリースとセットで用意してください。
関連するコラム
デザインシステムとUI設計について、実務で使える内容を継続して書いています。まだ相談する段階ではない方も、こちらからどうぞ。
部品のばらつきを止めたい方、ぜひご相談ください
アームは、要件の整理から画面設計、開発に渡す仕様づくりまでを一人で担うデザインスタジオです。
動くものなら数日で作れる時代です。問われるのは、作る速さを保ちながら一貫性を守れるか。要件が固まっていない段階からご相談いただけます。
代表伊藤 悠希
代表伊藤 悠希
愛媛出身、東京在住。複数の制作会社でオンスクリーン領域のデザインを経験後、屋号「アーム（英名：aaam）」で独立。戦略設計からデザイン・実装、公開後のグロースまでをひとりで一気通貫に担う。
こんな方はご相談ください
- 画面ごとのバラつきが、もう手に負えなくなってきた
- デザインと実装の確認コストを減らしたい
- 作ったものの、運用されず形だけになっている
他のスタジオとの決定的な違い
課題を聞いた本人が、設計から実装、公開後の数字まで担当します。境界を1つ越えるごとに意図が1割薄まるとすれば、4回渡ったあとに残るのは6割ほど。伝言ゲームが0回なので、雑談でこぼれた本音まで画面に残ります。見積もりには工程間の伝達と管理の人件費が入りません。
ワンマンスタジオに頼む不安について
倒れたら止まります。これは消せません。だからアカウントは最初から貴社名義で作り、標準的な道具で作り、判断の記録を残して、いつでも他社へ引き継げる状態にしています。一度に大量には作れません。24時間の監視もできません。合わない場合は初回の面談でそう申し上げます。
できないことの一覧は、「大量には作れませんし、倒れたら止まります」のページに書いています。
アームがやらないこと
- 囲い込み。名義もデータも引き継ぎ資料も、すべてお渡しします
- 一式見積もり。工程ごとに金額と内訳を出します
- 進め方の押し付け。いまの運用に近い導線を優先し、変える箇所を絞ります
- 作って終わり。公開後の数字を見て、改善まで続けます
- 合わない案件を引き受けること。大量生産や、できないことは先にお伝えします
支援の進め方
- STEP 01
お問い合わせ・ヒアリング
プロダクトの現状と、困っている場面を伺います。Figmaデータや画面キャプチャがあれば共有ください。
目安1週間
- STEP 02
お見積り・ご契約
工程ごとの内訳を明示したお見積りをお出しします。整備する範囲をここで確定します。
目安1週間
- STEP 03
現状の棚卸し・方針設計
既存の画面と部品を棚卸しし、デザイン原則と整備の優先順位を決めます。
目安2〜3週間
- STEP 04
トークン・部品の整備
色・余白・文字のルールを定義し、状態違いまで含めてコンポーネントを整備します。
目安1〜2ヶ月
- STEP 05
運用ルール・引き渡し
使い方のガイドと更新ルールを整え、チームへの説明まで行います。以降は内製化や継続支援で伴走できます。
目安2週間〜
料金・期間の目安
料金は、対象とするプロダクトの規模と定める範囲で決まります。正式なお見積りでは、工程ごとの内訳を明示してお出しします。
依頼パターン | 含まれるもの | 期間・金額の目安 |
|---|---|---|
UI/UXクイック診断 | 現状の棚卸しと進め方の整理 | 約1週間〜・15万円〜 |
部分整備 | デザイントークンと主要コンポーネントの整備 | 約1〜2ヶ月・50万円〜 |
構築一式 | デザイン原則からコンポーネント・運用ルールまで | 約2〜4ヶ月・150万円〜 |
継続支援・月額契約 | 業務委託デザイナーとして参画（週1日〜ほぼ専属） | 月額12万円〜 |
料金の目安は税別・下限表記です。まずは診断で現状の棚卸しから、という始め方もできます。月額契約は週あたりの稼働量に応じて変動します。
組み合わせで、成果を最大化
デザインシステムは、UI/UX改善とあわせて進めると効果的です。画面の設計から、ブランドの一貫性までを続けて担えます。間に人を挟まないぶん、決めたことがそのまま形になります。
よくあるご質問
Q
相談だけで費用はかかりますか
かかりません。初回は30〜60分・無料で、その場で見立てをお出しします。見立てだけ持ち帰っていただいて構いません。
Q
うちの規模で頼むのは大げさではないですか
決める人が一人の会社が、いちばん相性がいい相手です。小さく確かめられる入口（15万円〜）から始められます。
Q
まだ要件が固まっていないのですが
固まっていない段階のご相談こそ役に立てます。要件定義書は不要です。何を決めるべきかから一緒に整理します。
Q
途中で止められますか
止められます。工程ごとに区切って見積もるので、どの段階で止めても、それまでの成果物はお渡しします。伴走契約は1ヶ月前通告・違約金なしです。
Q
コストをかけずに、小さく始めることはできますか？
できます。最初からすべてを整えるのではなく、よく使う部品と色・余白の基本ルール（デザイントークン）から小さく始める進め方をおすすめしています。まずはUI/UXクイック診断（15万円〜）で現状の棚卸しからでも対応できます。
Q
社内にデザイナーがほとんどいないのですが、大丈夫ですか？
大丈夫です。更新の頻度や運用体制に合わせて、無理のない規模でご提案します。自分たちで運用できるよう、社内に根づかせる内製化支援も行っています。
Q
コンポーネントはどんな形で納品されますか？
Figmaを基本に、状態の違い（押せる・エラー時など）まで含めて部品化し、使い方をまとめたガイドラインを添えてお渡しします。実装側の部品との対応づけもご相談いただけます。
Q
一度作ったものの、運用されず形だけになっています。立て直せますか？
立て直せます。よくあるのは、立派に作りすぎて運用が回らなくなるケースです。実際に使われる範囲に絞り込み、更新ルールと浸透の進め方まで含めて、回る形に整え直します。
Q
複数のプロダクトをまたいだデザインシステムも作れますか？
作れます。共通で使える土台を定めつつ、それぞれのプロダクトの個性も保てるよう設計します。まずは現状をうかがったうえで、最適な範囲をご提案します。
Q
AIを使うなら、費用は安くなりませんか？
作業時間は短くなりますが、お渡しするものの量と確度は上がっています。方向を確かめてから作り込める形でお返ししており、時間ではなく成果物に対して金額を決めているため、AIの利用を理由とした値引きはしていません。
最後に
いま出せる情報が揃っていなくても構いません。Figmaのデータか画面キャプチャを拝見できれば、どこから整えるべきかの見立てはお出しできます。まず話してみて、合わなければそれで構いません。