01101点の本番コンポーネント
プリミティブからページ全体の構成まで、101点のコンポーネントを提供します。いずれも単独で設計したものではなく、実際に提供中のプロダクトから抽出したものです。PDSに入っているコンポーネントは、すでに実戦を経ています。このサイト、プロダクトデモ、クライアント向けダッシュボードも、すべてPDSで描画されています。
PDS · デザインシステム
あらゆる提供物を支えるデザインシステム。
PDSはProtocore独自のデザイン言語です。自社で開発するプロダクトから抽出し、本番環境で鍛え上げました。ダークファースト、トークン駆動で、端から端までドキュメント化されています。自社プロダクトやクライアント向けダッシュボードを描画するのと同じコンポーネントを、チームが半日で導入できる形にまとめました。
機能
Protocore Design System の全機能。
- 01101点の本番コンポーネント
- 02デザイントークン
- 032つのテーマ、5つのアクセント
- 04ダークファースト
- 05フォームプリミティブ
- 06レイアウトと構成
- 07ナビゲーション
- 08オーバーレイ
- 09データ表示
- 10フィードバックとステータス
- 11タイポグラフィ
- 12モーション
- 13標準でアクセシブル
- 14ゼロランタイムCSS
- 15フレームワーク非依存のCSSレイヤー
- 16スタック別のトークンエクスポート
- 17テーマプロバイダーとフック
- 18ホワイトラベルテーマ
- 19llms.txtマップ
- 20MCPサーバー
- 21端から端までドキュメント化
- 22バージョン管理されたリリース
- 23プライベートレジストリ
- 24オフラインライセンスキー
- 25チーム単位のライセンス
全25機能を詳しく見る
02デザイントークン
色、タイポグラフィ、余白、モーションは、1つのトークンレイヤーから決まります。トークンを変更すれば、すべてのコンポーネントに反映されます。コンポーネントごとの上書きも、プロダクト間のズレもありません。
032つのテーマ、5つのアクセント
ダークとライトの2つのテーマ、5色のアクセントカラー。すべて同じトークンで動作します。ブランドの差異はフォークではなくトークンの差し替えで実現し、ファミリーのすべてのプロダクトが同じシステムから描画されます。
04ダークファースト
コントラスト、エレベーション、色は、まずダークテーマで設計し、ライトテーマは同じトークンから派生させます。反転ではなく、ネイティブに感じられるダークモードになります。
05フォームプリミティブ
ボタン、入力、セレクト、スイッチ、スライダー、そしてラベル、ヒント、エラーを含むフィールドの骨組み。フォーカス、無効、不正、読み込み中といった状態もすでに設計済みで、どのプロダクトでも同じように動作します。
06レイアウトと構成
スタック、グリッド、区切り線、ページシェルにより、場当たり的なCSSなしで画面を構成できます。最大のコンポーネントはページ全体の構成で、ヒーロー、セクション、フッターのパターンは、実際に公開しているページから抽出したものです。
07ナビゲーション
ヘッダー、タブ、パンくずリスト、メニューに、レスポンシブ対応とキーボード操作を組み込み済みです。このサイトのナビゲーションは、模倣ではなくコンポーネントそのものです。
08オーバーレイ
モーダル、シート、ドロワー、ポップオーバー、ツールチップを、1つのレイヤーモデルで統一。フォーカストラップ、閉じる操作、重なり順は一元的に処理されます。z-indexの計算を自前で抱えるプロダクトはありません。
09データ表示
テーブル、リスト、統計タイル、バッジ、タイムラインなど、数字を扱うプロダクトのためのコンポーネントです。ファミリー全体のオペレーターコンソールの情報密度は、これらのコンポーネントで実現しています。
10フィードバックとステータス
トースト、バナー、空の状態、プログレス、スケルトン。地味でも欠かせない状態を、最初から設計しています。PDSで作ったプロダクトは、読み込み中、空、失敗のそれぞれに、考え抜かれた答えを持ちます。
11タイポグラフィ
技術的なトーンを担うモノスペースのラベルと組み合わせた、エディトリアルなタイプスケール。Protocoreのあらゆる接点で目にする、共通の声です。スケールはトークンなので、システムを離れることなくプロダクトごとに調整できます。
12モーション
デュレーションとイージングは、すでにそれを使うコンポーネントとともにトークンとして提供されます。誰も手作業でアニメーションのタイミングを調整しないので、プロダクトをまたいで動きが一貫します。
13標準でアクセシブル
コントラスト、フォーカス状態、キーボード操作はコンポーネントに組み込み済みで、後回しにはしません。デフォルトのまま使えば、アクセシビリティも一緒についてきます。
14ゼロランタイムCSS
スタイリングはビルド時に解決される静的CSSです。CSS-in-JSのランタイムはなく、ブラウザで計算する処理もありません。スタイリングレイヤーがページに追加するJavaScriptはゼロです。
15フレームワーク非依存のCSSレイヤー
システムはプレーンなCSSパッケージとしても提供され、Reactなしでトークンとユーティリティクラスを使えます。サーバーレンダリングのページ、メール、React以外のスタックも、同じ信頼できる情報源を利用できます。
16スタック別のトークンエクスポート
トークンは、Web向けにCSS変数とTailwindプリセットで、モバイルプラットフォーム向けにネイティブ形式でエクスポートできます。ブランドの定義は1つだけ。プロダクトが動くあらゆる場所で使われます。
17テーマプロバイダーとフック
Reactレイヤーはアプリをプロバイダーで包み、トークンをフックとして公開します。コンポーネントは値をハードコードせず、現在のテーマとアクセントを読み取ります。テーマの切り替えは再ビルドではなく、状態の変更です。
18ホワイトラベルテーマ
PDSに5つのアクセントを与える仕組みが、そのままホワイトラベル製品にブランドを与えます。トークンの値を差し替えるだけで、コンポーネントはそのままです。ファミリーのホワイトラベルアプリすべてが、その実証です。
19llms.txtマップ
コンポーネント、トークン、パターンなど、システム全体の機械可読なマップをllms.txtとして公開しています。LLMにこれを参照させれば、生成されるコードは、もっともらしい架空のものではなく、実在するPDSコンポーネントを使います。
20MCPサーバー
MCPサーバーが、システムをコーディングエージェントに直接公開します。コンポーネント、props、トークンを、エージェントが構築している最中に照会できます。デザインシステムをプロンプトに貼り付けるのではなく、問い合わせに答えさせる仕組みです。
21端から端までドキュメント化
すべてのコンポーネントを、ライブ例、props、コピー＆ペーストできるコードとともに pds.protocore.io で公開しています。ドキュメント自体もPDSで描画されているので、読んだものがそのまま実際の成果物になります。
22バージョン管理されたリリース
PDSは、セマンティックバージョンと変更履歴を備えたバージョン管理パッケージとして提供されます。アップグレードは意図的に行えます。移行のタイミングはチームが決め、何が変わったかは変更履歴に正確に記されています。
23プライベートレジストリ
パッケージは、Protocoreのプライベートnpmレジストリから、.npmrc に設定したチームごとのトークンでインストールします。標準的なnpmのワークフローを、ライセンスを持つチーム向けに限定したものです。zipファイルの同梱も、コピー＆ペーストでの導入も不要です。
24オフラインライセンスキー
署名済みライセンスキーはローカルで検証されます。外部への通信もなく、ビルド中のネットワークチェックもありません。ライセンスの問題は開発時の警告として表示され、本番アプリが止まることはありません。
25チーム単位のライセンス
PDSはプロプライエタリで、チーム単位でライセンスされます。アクセスをご依頼いただければ、パッケージ、ドキュメント、トークンのソースまでセットアップします。チームは午後のうちに導入できます。
FAQ
デザインシステムQ&A。
チーム単位です。シート単位やプロジェクト単位ではありません。1つのライセンスで、チーム内でPDSを使って開発する全員が、トークン、コンポーネント、ドキュメントを利用できます。費用は導入するチーム数だけで決まります。なお、当社が開発するホワイトレーベル製品は、すでにPDSで描画されています。
npm.protocore.io のプライベートレジストリからインストールします。アクセス用の認証情報で、ビルドから @protocore パッケージを取得できます。トークンとコンポーネントは、通常の依存パッケージと同じようにインストールできます。
トークンはWeb、.NET、ネイティブ向けに出力されるため、1つの色や角丸の値が、出荷するすべてのプラットフォームで同じ意味を持ちます。コンポーネントはReact向けに提供し、Reactを使わないチーム向けには、同じトークンとクラスを備えたフレームワーク非依存のCSSレイヤーを用意しています。
ダークファーストで、アクセシビリティにも標準で対応しています。2つのテーマと5つのアクセントカラーをすべてトークンで制御し、ゼロランタイムCSSなので読み込み時のスタイリングコストもありません。当社のプロダクトも、クライアント向けダッシュボードも、同じコンポーネントで描画しています。
そのために設計されています。llms.txt のマップとMCPサーバーにより、エージェントがシステムを読み取り、正しく開発できます。pds.protocore.io には、すべてのコンポーネントとトークンについて、動作するサンプル、props、コピーしてそのまま使えるコードを掲載しています。
料金
PDSのライセンス体系。
01
チーム単位のライセンス
PDSのライセンスはシート単位やプロジェクト単位ではなく、チーム単位です。1つのライセンスで、そのチーム内でPDSを使って開発する全員が、トークン、コンポーネント、ドキュメントを利用できます。
02
組織の成長に合わせて拡張
まずは1チームから始め、導入が広がるにつれて対象チームを増やせます。費用を左右するのは、PDSで開発するチーム数だけです。
03
Protocoreの開発に標準搭載
当社が開発するホワイトレーベル製品は、すでにPDSで描画されています。単体ライセンスは、自社プロダクトにPDSを導入するチーム向けです。
ライセンスは人数や利用量ではなく、チーム単位です。アクセスをご依頼いただければ、開発に携わるチームに合わせて範囲をご提案します。
評価のポイント
PDSで画面をつくる。
01
ライブドキュメント
pds.protocore.io で全体をご覧いただけます。すべてのコンポーネントとトークンについて、動作するサンプル、props、コピーしてそのまま使えるコードを掲載しています。
02
トークンパッケージ
Web、.NET、ネイティブ向けに出力されるデザイントークン。1つの色や角丸の値が、出荷するすべてのプラットフォームで同じ意味を持ちます。
03
チーム単位のライセンス
PDSのライセンスはチーム単位です。1つのライセンスで、開発に携わる全員がトークン、コンポーネント、ドキュメントを利用できます。
04
レジストリアクセス
npm.protocore.io のプライベートレジストリにアクセスするための認証情報です。ビルドで利用する @protocore パッケージをインストールできます。
提供状況
PDSは独自開発のプロプライエタリ製品で、チーム単位でライセンスされます。アクセスをご依頼いただければ、セットアップをご案内します。
プロダクトを選ぶ。コアだけでも。
上記はすべて、本番稼働のデモでご案内できます。単体でも、ホワイトレーベルでも、1つのプラットフォームとしても導入可能です。ご検討中の内容をお聞かせください。最短の道筋をご提案します。