デザインシステムカタログ

注目の5件

5

GitHubスター数を参考に選定

67 件のデザインシステム — Sansan One Design System

Ant Design — 全体像 — 公式コンポーネントの実装見本Ant Design中国企業・OSS参考Microsoft Fluent 2 — 全体像 — 公式コンポーネントの実装見本Microsoft Fluent 2米国企業・OSS参考Astryx — 全体像 — 公式コンポーネントの実装見本Astryxアメリカ企業・OSSAdobe React Aria — 全体像 — 公式コンポーネントの実装見本Adobe React Aria米国企業・OSSGitHub Primer — 全体像 — 公式コンポーネントの実装見本GitHub Primer米国企業・OSS参考

公開日が新しい順

62
Cloudflare Kumo — 全体像 — 公式コンポーネントの実装見本Cloudflare Kumo米国企業・OSS参考Salesforce Lightning Design System 2 — 全体像 — 公式コンポーネントの実装見本Salesforce Lightning Design System 2米国企業・OSSSansan One Design System — 概要 — 公式サイトのキャプチャ公式サイトのキャプチャSansan One Design System日本企業・OSSCoinbase Design System — 全体像 — 公式コンポーネントの実装見本Coinbase Design System米国企業・OSS参考Serendie Design System — 全体像 — 公式コンポーネントの実装見本Serendie Design System日本企業・OSSkaonavi sugao — 概要 — 公式サイトのキャプチャ公式サイトのキャプチャkaonavi sugao日本企業・OSS参考Ubie Vitals — 全体像 — 公式コンポーネントの実装見本Ubie Vitals日本企業・OSS参考freee vibes — 全体像 — 公式コンポーネントの実装見本freee vibes日本企業・OSSAdobe Spectrum 2 — 全体像 — 公式コンポーネントの実装見本Adobe Spectrum 2米国企業・OSS一休 Design Guideline — 概要 — 公式サイトのキャプチャ公式サイトのキャプチャ一休 Design Guideline日本企業・OSSDBS Data Visualisation — デザイン活動 — 公式サイトのキャプチャ公式サイトのキャプチャDBS Data Visualisationシンガポール企業・OSSBits UI — 全体像 — 公式コンポーネントの実装見本Bits UI国際OSS企業・OSS参考GC Design System — 全体像 — 公式コンポーネントの実装見本GC Design Systemカナダ政府・公共Wise Design — 全体像 — 公式コンポーネントの実装見本Wise Designイギリス企業・OSSデジタル庁デザインシステム (DADS) — 全体像 — 公式コンポーネントの実装見本デジタル庁デザインシステム (DADS)日本政府・公共Kobalte — 全体像 — 公式コンポーネントの実装見本Kobalte国際OSS企業・OSS参考KoliBri — 全体像 — 公式コンポーネントの実装見本KoliBriドイツ政府・公共参考Cloudscape — 全体像 — 公式コンポーネントの実装見本Cloudscapeアメリカ企業・OSSpixiv Charcoal — 全体像 — 公式コンポーネントの実装見本pixiv Charcoal日本企業・OSSCookpad Apron — 公開紹介 — 公式サイトのキャプチャ公式サイトのキャプチャCookpad Apron日本企業・OSS参考Agriculture Design System (AgDS) — 全体像 — 公式コンポーネントの実装見本Agriculture Design System (AgDS)オーストラリア政府・公共Tencent TDesign — 全体像 — 公式コンポーネントの実装見本Tencent TDesign中国企業・OSS参考SPEEDA FALCON — 公開紹介 — 公式サイトのキャプチャ公式サイトのキャプチャSPEEDA FALCON日本企業・OSSArco Design — 全体像 — 公式コンポーネントの実装見本Arco Design中国企業・OSS参考Semi Design — 全体像 — 公式コンポーネントの実装見本Semi Design中国企業・OSS参考Spindle — 全体像 — 公式コンポーネントの実装見本Spindle日本企業・OSSFinastra Design System — 全体像 — 公式コンポーネントの実装見本Finastra Design System英国企業・OSS参考Decathlon Vitamin — 全体像 — 公式コンポーネントの実装見本Decathlon Vitaminフランス企業・OSS参考monday.com Vibe — 全体像 — 公式コンポーネントの実装見本monday.com Vibeイスラエル企業・OSS参考Système de Design de l’État (DSFR) — 全体像 — 公式コンポーネントの実装見本Système de Design de l’État (DSFR)フランス政府・公共参考SmartHR Design System — 全体像 — 公式コンポーネントの実装見本SmartHR Design System日本企業・OSSCzech Design System — 全体像 — 公式コンポーネントの実装見本Czech Design Systemチェコ政府・公共参考Twilio Paste — 全体像 — 公式コンポーネントの実装見本Twilio Pasteアメリカ企業・OSS参考SGDS — 全体像 — 公式コンポーネントの実装見本SGDSシンガポール政府・公共参考Airtable Blocks SDK UI — 概要 — 公式サイトのキャプチャ公式サイトのキャプチャAirtable Blocks SDK UI米国企業・OSS参考CFPB Design System — 全体像 — 公式コンポーネントの実装見本CFPB Design Systemアメリカ政府・公共参考Esri Calcite Design System — 全体像 — 公式コンポーネントの実装見本Esri Calcite Design System米国企業・OSS参考ING Lion — 全体像 — 公式コンポーネントの実装見本ING Lionオランダ企業・OSS参考BC Design System — 全体像 — 公式コンポーネントの実装見本BC Design Systemカナダ政府・公共参考Porsche Design System — 全体像 — 公式コンポーネントの実装見本Porsche Design Systemドイツ企業・OSS参考Contentful Forma 36 — 全体像 — 公式コンポーネントの実装見本Contentful Forma 36ドイツ企業・OSS参考GOV.UK — 全体像 — 公式コンポーネントの実装見本GOV.UKイギリス政府・公共Vaadin Design System — 全体像 — 公式コンポーネントの実装見本Vaadin Design Systemフィンランド企業・OSS参考Uber Base Web — 全体像 — 公式コンポーネントの実装見本Uber Base Web米国企業・OSS参考Gestalt — 全体像 — 公式コンポーネントの実装見本Gestaltアメリカ企業・OSS参考Kiwi.com Orbit — 全体像 — 公式コンポーネントの実装見本Kiwi.com Orbitチェコ企業・OSS参考Ariakit — 全体像 — 公式コンポーネントの実装見本Ariakit国際OSS企業・OSS参考Francfranc Design System — 概要 — 公式サイトのキャプチャ公式サイトのキャプチャFrancfranc Design System日本企業・OSSSegment Evergreen — 全体像 — 公式コンポーネントの実装見本Segment Evergreen米国企業・OSS参考Shopify Polaris — 全体像 — 公式コンポーネントの実装見本Shopify Polarisカナダ企業・OSS参考IBM Carbon Design System — 全体像 — 公式コンポーネントの実装見本IBM Carbon Design System米国企業・OSS参考Europa Component Library — 全体像 — 公式コンポーネントの実装見本Europa Component LibraryEU政府・公共参考Audi Brand Guidelines — 概要 — 公式サイトのキャプチャ公式サイトのキャプチャAudi Brand Guidelinesドイツ企業・OSS参考Designers Italia — 全体像 — 公式コンポーネントの実装見本Designers Italiaイタリア政府・公共参考GitLab Pajamas — 全体像 — 公式コンポーネントの実装見本GitLab Pajamasアメリカ企業・OSS参考Orange Boosted — 全体像 — 公式コンポーネントの実装見本Orange Boostedフランス企業・OSS参考U.S. Web Design System (USWDS) — 全体像 — 公式コンポーネントの実装見本U.S. Web Design System (USWDS)アメリカ政府・公共WFP UI Kit — 全体像 — 公式コンポーネントの実装見本WFP UI Kit国際機関政府・公共参考Liferay Lexicon — 全体像 — 公式コンポーネントの実装見本Liferay Lexicon米国企業・OSS参考Bristol Design System — 全体像 — 公式コンポーネントの実装見本Bristol Design Systemイギリス政府・公共参考Red Hat PatternFly — 全体像 — 公式コンポーネントの実装見本Red Hat PatternFly米国企業・OSS参考Atlassian Design System — 全体像 — 公式コンポーネントの実装見本Atlassian Design Systemオーストラリア企業・OSS参考

Sansan One Design System

公式サイト (新しいタブで開く)

SansanのBtoBプロダクト向けUIガイド。業務画面の入力操作や情報の並べ替えに関する設計仕様を確認できます。

公式サイトのキャプチャ
キャプチャの出典

デザイン資料

公開されたコード実装を確認できないため共通コンポーネントの見本は表示していません。公式のデザイン資料を参照できます。

公式資料を見る
Sansan日本React / Storybook
公開日
公開日の根拠と補足

公式技術ブログが紹介する2024年12月3日の公開発表を採用。実装パッケージは社内配布と説明されている。

公開日の根拠
利用条件と実装の出典

ライセンス: 公開資料（コードは社内配布。再利用条件は要確認）

公式サイトや公開紹介記事の画面を参考資料として掲載しています。コード実装の見本ではありません。原著作物の利用条件は出典で確認してください。

キャプチャの出典

Sansan One Design System概要

1 / 5

キーボード操作

↓↑JK
デザインシステムを選択
HomeEnd
最初・最後の項目を選択
←→HL
プレビューを切り替え
V
プレビューを拡大
O
公式サイトを開く
?
このヘルプを表示
Esc
オーバーレイを閉じる / 一覧に戻る
TabShift + Tab
操作対象を移動
EnterSpace
フォーカス中の操作を実行

入力欄や言語選択の操作中はショートカットを無効にします。