# Serendie Design System - Full Documentation > Complete documentation for the Serendie Design System, including all content details. Created with support from Takram Japan Inc. and protected as intellectual property of Mitsubishi Electric Corporation. ## Table of Contents ### About - About ### Get Started - Get Started - デザイン - 開発 - AIエージェント - LLMs.txt ### Foundations - Foundations - リファレンストークン - システムトークン - デザイントークン - カラー - カラーロール - カラーロール - データビジュアライゼーション - テーミング - タイポグラフィ - 寸法 - 階層 - アイコン - アイコン - イラストレーション ### Components - Accordion - Avatar - Badge - Banner - Bottom Navigation - Button - Chart - Check Box - Choice Box - Dashboard Widget - Data Table - Date Picker - Divider - Drawer - Dropdown Menu - Icon Button - List - Modal Dialog - Notification Badge - Pagination - Progress Indicator - Radio Button - Search - Select - Switch - Tabs - Text Area - Text Field - Toast - Tooltip - Top App Bar ### Terms - 利用規約 --- ## Full Documentation Content ### About #### About URL: https://serendie.design/about display: "grid", gridTemplateColumns: "1fr", mt: "sd.system.dimension.spacing.twoExtraLarge", sm: { gridTemplateColumns: "auto minmax(150px, max-content)", columnGap: "sd.system.dimension.spacing.extraLarge", }, }); fontSize: "24px", // TODO: テーマに追加 my: 0, }); my: "sd.system.dimension.spacing.medium !important", mdDown: { my: "sd.system.dimension.spacing.small !important", }, }); mb: "sd.system.dimension.spacing.twoExtraLarge", sm: { mb: "sd.system.dimension.spacing.threeExtraLarge", }, }); Serendie Design Systemは、三菱電機株式会社DXイノベーションセンターが提供するデザインシステムです。 デザインシステムは、デザインと開発の効率化、アクセシブルで一貫したプロダクト品質の担保、ナレッジの蓄積とベストプラクティスの波及、コミュニケーションの円滑化などを目的とします。そのために、ブランドやビジュアルに関するアイデンティティの定義、カラーやタイポグラフィなど視覚要素を定めたデザイントークン、再利用性の高いUIコンポーネント、アイコンやイラストなどのビジュアルアセットを提供します。これらは代表例であり、デザインシステムの構成要素は組織や状況に応じて様々です。 Serendie Design Systemは、三菱電機のモノづくり文化に寄り添いつつ、実験的で新しいサービスをスピーディーに生み出す基盤となることを目指しています。そのため、提供するアセットはデジタルプロダクト開発に即効性のあるものが中心です。完璧さや堅牢性だけを追求するのではなく、**軽やかで柔軟なプロダクトづくりを実現するためのデザインシステム**です。 SDS image デザインシステムの形は組織によって様々ですが、根底には共通の原則があります。「最新のデザインファイルがどこにあるかわからない」「再利用可能なアイコン集の存在を知らない」などを避け、Single Source of Truth (SSOT: 信頼できる唯一の情報源) を目指すことはその一つです。 これはSerendie Design Systemにおいても同様です。三菱電機の文化や目指す姿を背景に、Serendie Design Systemでは次の３つの原則を重視しています。

Adaptive

家庭から宇宙まで三菱電機の多様な事業領域や、価値検証から製品化まであらゆる事業フェーズに適応することを目指します。Serendie Design Systemは汎用性と普遍性を重視したベーシックなアセットを提供し、これを下敷きとして事業領域ごとにプロダクトの独自性やアイデンティティを柔軟に表現します。

Serendie Design Systemは、三菱電機が有する多様なブランド・多様なプロダクトに適応することがコンセプトの一つです。このような環境では、事業領域ごとにVisual Identityが定義され、特定のプロダクトに特化したUIコンポーネントが必要になることも多く、アクセシビリティ基準など満たすべき品質も異なります。ここでそれぞれの事業領域で完全に独立したデザインシステムを作ってしまうと、サイロ化が進み、BorderlessやCirculativeの原則が満たせなくなります。 そこで重要となるのが着せ替え型の設計です。Serendie Design Systemが提供するデザイントークンおよびSerendie UIは、その表層を変化させる仕組みを備えています。これをテーミングと呼び、デフォルトではSerendieブランドを踏襲した5つのテーマを提供しますが、ここに事業ごとのカスタムテーマを追加でき、そのテーマによってSerendie UIを上書きできます。 --- ### Get Started #### Get Started URL: https://serendie.design/get-started --- #### デザイン URL: https://serendie.design/get-started/design PageSection, PageA, PageARef, } from "../../../components/PageLayout.tsx"; Serendie UI KitはSerendie Design Systemの一部であり、Figma上でライブラリとして利用可能なデザインアセット集です。Figma Community にて公開しており、**三菱電機メンバーにかかわらずどなたでも利用できます。** 現在のところ下記のようなアセットを含んでいます。 1. デザイントークン ― カラー、タイポグラフィなどの定義を[Figma Variables](https://help.figma.com/hc/ja/articles/15339657135383-Figma%E3%81%A7%E3%81%AE%E3%83%90%E3%83%AA%E3%82%A2%E3%83%96%E3%83%AB%E3%81%AB%E9%96%A2%E3%81%99%E3%82%8B%E3%82%AC%E3%82%A4%E3%83%89)として提供 2. UIコンポーネント (Serendie UI) ― ButtonやText Fieldなど汎用的UIのFigmaコンポーネント集 3. アイコン (Serendie Symbols) ― Serendieらしさを表現する300種類以上のアイコン集 4. サンプル ― 1~3を活用した画面デザイン例。サンプルを起点にデザインを始めることも可能 このページでは、Serendie UI Kitを活用するための基本的な情報を紹介します。各項目について詳しく知りたい方は、[Foundations](/foundations)および[Components](/components)を参照してください。また、三菱電機メンバー向けにはブートキャンプも開催しています。開催予定は[社内ポータル](https://mitsubishielectricgroup.sharepoint.com/sites/014758/serendie_designsystem)を参照してください。 Serendie UI KitはFigmaでの利用を前提としています。デジタルプロダクトのUIデザインにおいて、Figmaは業界標準になりつつあるツールであり、画面を一枚絵としてデザインするのではなく、コンポーネントを組み合わせ構造的にデザインできる点が優れています。 コンポーネント、バリアント、オートレイアウト、VariablesはFigmaの特徴的な機能であり、Serendie UI Kitもこれらの機能を前提に設計されています。Figmaのヘルプ記事を参照しつつ、まずは基礎を抑えてみましょう。 ## Figmaファイルにライブラリを加える 三菱電機のFigma組織内では、ライブラリとしてSerendie UI Kitが利用可能な状態です。Serendie UI Kitを使いたいFigmaファイルから、ライブラリを検索し追加してください。社外の方向けには、Figma Communityにて最新のSerendie UI Kitを公開していますので、こちらを利用してください。

install library

## デザイントークンを使う Serendie UI Kitをライブラリとして追加した後は、カラー、タイポグラフィ、スペーシングなどの定義をFigmaファイル上で利用可能です。デザイントークンについての詳しい解説は、[Foundations](/foundations/design-tokens)を参照してください。

use design tokens

## UIコンポーネントを使う Serendie UI Kitが提供するコンポーネント (Serendie UI) は、Figma内のAssetsパネルから利用できます。各UIコンポーネントを追加する際には、適切なバリアントを選択してください。UIコンポーネント及びバリアントの解説は、[Components](/components)を参照してください。

use components

## アイコンを使う Serendie UI Kitが提供するアイコン集 (Serendie Symbols) は、Figma上ではコンポーネント化されており、Assetsパネルから利用できます。詳しくは、[Foundations](/foundations/icon)を参照してください。

use serendie symbols

## サンプルを使う ログイン画面やウォークスルー画面など、業務アプリケーションでよく登場するサンプルをSerendie UI Kit内のデザインアセットを使いつつ作成しています。これを土台にしてデザインをスタートすることも可能です。Serendie UI Kit内のExamplesページを参照してください。

use examples

Figma Variablesには、[Variablesモード](https://help.figma.com/hc/ja/articles/15343816063383-%E3%83%90%E3%83%AA%E3%82%A2%E3%83%96%E3%83%AB%E3%83%A2%E3%83%BC%E3%83%89)という機能があります。これはダークモードやレスポンシブデザインのような「コンテキストによるUIの変化」を、デザインファイル上で表現するうえで強力な機能です。 Serendie UI Kitでは、現在のところVariablesモードを使って、**マルチカラーテーマの切り替えと、デバイス幅に応じたタイポグラフィの切り替え**に対応しています。 切り替えは、Figma上でレイヤーなどに[Apply variable mode](https://help.figma.com/hc/ja/articles/15343816063383-%E3%83%90%E3%83%AA%E3%82%A2%E3%83%96%E3%83%AB%E3%83%A2%E3%83%BC%E3%83%89#h_01H3ADKDF7JBTRV1Z5P1X1DZVE)することで行います。 より詳しくは、[テーミング](/foundations/theming)及び[タイポグラフィ](/foundations/typography)を参照してください。

change variable mode

--- #### 開発 URL: https://serendie.design/get-started/dev @import "@serendie/ui/styles.css";`; Serendie UI Kit内で提供しているデザイントークンおよびUIコンポーネントを、Webフロントエンド開発でも利用できるように実装版を提供しています。特に開発シーンにおいてメインで活用することになるUIコンポーネント集を、Serendie UIと呼びます。 Serendie UIは、現在のところReact環境を前提としています。またOSSとして一般公開しているので、三菱電機に限らず誰でも利用可能です。 このページではSerendie UIを使い始めるための基本的な情報を紹介します。三菱電機メンバー向けにはブートキャンプも開催しています。開催予定は[社内ポータル](https://mitsubishielectricgroup.sharepoint.com/sites/014758/serendie_designsystem)を参照してください。 ## Figma - Devモード 三菱電機のFigma組織内では、開発者向けにDevモードアカウントを準備しています。Devモードは開発者向けのFigmaビューであり、実装時のヒントとなるインスペクタやアノテーションを活用できます。詳しくはFigmaヘルプページを参照してください。 ## Figma - Code Connect Serendie UIのコンポーネントはCode Connectに対応しています。Code Connectは、デザインファイル上のコンポーネントに対応するコードスニペットをFigma Devモードに表示する機能です。Code Connectを活用することで、デザインを確認しながら、Serendie UIを使った実装例を同時に確認することができます。 code connect ## Storybook またCode Connectと同等の内容を、[Storybook](https://storybook.serendie.design/)として提供しています。各コンポーネントの状態変化や、ReactコンポーネントのPropsとの対応など、より詳しく確認したい場合に利用できます。 ## GitHubチームに加わる Serendie UIはOSSのため誰でも利用できますが、三菱電機メンバー向けに[GitHub Discussions](https://github.com/orgs/serendie/discussions)による質疑や要望などのコミュニケーションの場を用意しています。三菱電機メンバーの方は、Serendie Design Systemチームに連絡しGitHubチームへの招待を受けてください。 Serendie UIはReact環境に対応しています。Reactコンポーネントを利用したい場合は、下記のようにインストールしてください。 ## 機能の拡張とスタイルの上書き Serendie UIはスタイリングライブラリとして[Panda CSS](https://panda-css.com/)を内部的に利用しています。Panda CSSが提供するユーティリティを使ったコンポーネントの拡張や、テーマの変更、スタイルの上書きなどが可能です。詳しくはSerendie UIの[README](https://github.com/serendie/serendie)を参照してください。 なお、プロジェクトへのPanda CSSの導入は任意です。機能拡張やスタイル上書きが不要な場合や、他のスタイリングライブラリを使いたい場合は導入の必要はありません。 Serendie UIとデザイントークンは別パッケージとなっており、デザイントークンだけを独立して利用することも可能です。 デザイントークンは、CSS/JavaScript環境であれば広く利用可能な形で配布しています。プロジェクトがReact環境ではないなどの理由で「Serendie UIは使えないが、カラーや書体定義だけは使いたい」シーンで活用できます。 npmなどのパッケージマネージャーで下記のようにインストールしてください。なお、デザイントークンの一覧は[こちら](/foundations/design-tokens/reference-tokens)を参照してください。 --- #### AIエージェント URL: https://serendie.design/get-started/ai-agent/mcp-server Serendie MCPサーバーは、デザインシステムを利用するユーザーが、AIエージェントを用いて快適にアプリケーションをデザイン・開発するためのModel Context Protocolサーバーです。 このMCPサーバーを、各種AIエージェントに接続することで、Serendie Design Systemが提供するガイドラインやベストプラクティス、コンポーネントやアイコンをはじめとするリソース一覧などをAIが自律的に入手できるようになります。 Model Context Protocolは、AIエージェントが外部のデータソースやサービスに接続するためのオープンなプロトコルです。Serendie MCPサーバーでは、本サイトで公開しているガイドラインや、Serendie UIの型情報などを提供しています。Serendie MCPサーバーを使うことで、Serendie Design Systemに則ったアプリケーション開発ワークフローを実現できます。 Serendie MCP サーバーは、リモートMCPサーバー(Streamable HTTP Transport形式)として公開しており、ローカルでのセットアップなしにすぐに利用を始められます。 MCPサーバーでは「ツール」という単位で、AIエージェントに道具の提供を行います。どのツールを使うのかは、AIエージェントが、プロンプトやコンテキストに基づいて決定します。現在Serendie MCPサーバーが提供しているツールは以下の通りです。 - Serendie UIのセットアップ方法など概要情報 (Overview) の取得ツール - Serendie UIコンポーネントの一覧とプロパティなどの詳細取得ツール - デザイントークンの一覧・詳細取得ツール - Serendie Symbolsの一覧・詳細取得ツール - 本サイトで提供している各種ガイドラインの取得ツール 各種ツールの実装は、GitHubリポジトリ (serendie/serendie-web) にて確認できます。 ## 自然言語によるプロトタイピング [Cursor](https://cursor.com/ja)や[Claude Code](https://docs.claude.com/ja/docs/claude-code/overview) など各種Agentic Codingツールを用いることで、自然言語によるプロトタイピングが可能ですが、ここにSerendie MCPサーバーを用いることで、Serendie UIを用いた実装がスピーディーに実現できます。 特にSerendie MCPのOverviewツールにより、Serendie UIのイントロダクションが提供されるため、Serendie UIを使うためのセットアップをAIエージェントが自律的行うことができます。また、各種リソース取得ツールを用いることで、AIエージェントはコンテキスト消費量を抑えながら、Serendie UIの活用に必要な知識を得ることができます。これはAgentic Codingにおいて質の高いプロトタイピングの実現に繋がります。 ## デザインから実装する Serendie UIは、Figmaコンポーネント(デザイン)とReactコンポーネント(実装) がセットで提供されていることが特徴の一つです。FigmaのMCPサーバーであるFigma MCP サーバーと、Serendie MCPサーバーを併用することで、Serendie UI Kitによるデザインを、高速かつ高品質に実装することが可能です。 Figma MCPサーバーを用いることで、AIエージェントは、デザインデータ (レイヤー情報) の読み取りが可能になります。これにより、 **「現在選択しているFigma上のデザインを、Serendie UIで実装して」** のように伝えることで、AIエージェントは自律的にSerendie UIのセットアップ、各種コンポーネントの使い方などの知識を得ながら、プロジェクト環境に応じた高品質なコードを生成できます。

install library

## Claude Code 下記のコマンドをターミナルから入力してください --- #### LLMs.txt URL: https://serendie.design/get-started/ai-agent/llms-txt LLMs.txtは、Serendie UIの各種ドキュメントを、AIエージェントが効率よく利用できるようにサポートするファイルです。MCPサーバーを利用できないシーンなどで、このLLMs.txtをお使いのAIエージェントに指定することで、本サイトで提供しているガイドライン相当の情報を得ることができます。 下記のリンクから、簡易版と詳細版の2つを提供しています。AIエージェントにはこのURLを指定してください。 - [LLMs.txt](https://serendie.design/llms.txt) -- ドキュメントの簡易な説明とURLの一覧 - [llms-full.txt](https://serendie.design/llms-full.txt) -- ドキュメントの全文 --- ### Foundations #### Foundations URL: https://serendie.design/foundations --- #### リファレンストークン URL: https://serendie.design/foundations/design-tokens/reference-tokens token.key.includes("sd.reference") ); --- #### システムトークン URL: https://serendie.design/foundations/design-tokens/system-tokens (token) => !token.key.includes("themes") && token.key.includes("sd.system") ); --- #### デザイントークン URL: https://serendie.design/foundations/design-tokens デザイントークンはKey/Value(名前と値)のペアからなり、[カラー](/foundations/color)や[タイポグラフィ](/foundations/typography)、[寸法](/foundations/dimension)、[階層](/foundations/elevation)などデジタルプロダクトの視覚要素を指します。デザインシステムにおける最も抽象度の高い構成要素であり、全てのUIコンポーネントを形づくります。 デザイントークンは**デザインと開発をつなぐ共通言語**となります。例えば、ボタン背景色を「#0A69CF」のような直値で指定するのではなく、デザイントークン「color.impression.primaryContainer」として指定することで、「ブランドにおけるキーカラー使った背景色」であるという意味が付与できます。デザイン上の意図をより詳細に伝達することで、円滑なプロダクト開発が期待できます。 共通言語としてコミュニケーションを円滑にするだけでなく、デザイントークンを利用することによる効果は、**最低限のデザイン品質の担保とプロダクト開発への集中**という効果もあります。 コントラスト比を確保したアクセシブルなカラー、ブランドやプラットフォームに合った書体、読みやすいフォントサイズのジャンプ率など、デザイントークンが示す値にはノウハウが詰まっています。デザイントークンを利用することで、例えデザイナーが不在のチームであっても、このノウハウをベースにプロダクト開発をスタートできます。 Serendie Design Systemが提供するUIコンポーネント集 (Serendie UI) は、デザイントークンをベースに作られているので、**Serendie UIをそのまま使う場合はデザイントークンについて意識する必要はありません。** Serendie UIのスタイルを上書きする場合や、オリジナルのコンポーネントを追加する場合は、デザイントークンの役割や設計について理解が必要になります。 また、Serendie UIは利用せず、デザイントークンだけを利用することも可能です。各プロジェクトの事情によりSerendie UIが使えない場合は、デザイントークンのみ利用することを検討してください。 Serendie Design Systemの**デザイントークンは「リファレンストークン」と「システムトークン」の2種類で構成**されます。リファレンストークンはカラーコードなど生の値を示し、システムトークンはリファレンストークンを参照 (エイリアス) するトークンです。 リファレンストークンは **color.scale.green.500 (カラースケール500番の緑色)** のような素朴な命名になり、システムトークンは **color.impression.positiveContainer (ポジティブな印象の背景色)** のような、UIにおける意味性の強い命名を行うのが特徴です。 さらに命名構造として、ドメイン (ブランドの略称) 、カテゴリ (system, reference) 、タイプ (color, typographyなど)を接頭辞としてつけ、一つのトークン名を構成します。このような構造にすることで、三菱電機内の多様なブランドに対応することを想定しています。 naming structure ### 参考文献 共通言語となるデザイントークンは、FigmaやWebフロントエンド環境などそれぞれから利用しやすい形であることが必要です。そのため、デザイントークンを管理する際には、まずは特定のプラットフォームに依存しないフォーマットで定義し、それを元に各プラットフォーム向けに変換するビルドパイプラインの整備が必要です。 Serendie Design Systemでは、W3C Community Groupの[Design Tokens Format Module](https://tr.designtokens.org/format/)で現在策定中の草案フォーマットを採用しています。このフォーマットでは、デザイントークンをJSON形式で表現し、デザイントークンの型 ($type) などを表記するのが特徴です。

format

このJSONファイルは、Serendie Design Systemの[GitHubリポジトリ](https://github.com/serendie/design-token)で管理され、このファイル群がデザイントークンのマスター (Single Source of Truth) となります。その上で、[Style Dictionary](https://amzn.github.io/style-dictionary)を使ったビルドパイプラインを構築し、JSONファイルを各環境 (CSS, TypeScriptなど) に適した形に変換しています。 ### 参考文献 デバイスやブラウザのサイズに応じてUIが変化するレスポンシブデザイン、デバイスがおかれている環境に応じてカラーが変化するダークモードなど、デザイントークンはコンテキストによってその値が変化します。この変化に対応するため、Serendie Design Systemのデザイントークンは、**システムトークンがリファレンストークンを参照する2層構造**になっています。 コンテキストが変更された際には、システムトークンが参照するリファレンストークンを変更することで、プロダクト側には変更を与えることなく、UIの変化に対応できます。UI内で直接リファレンストークンを参照してしまうと、このようなコンテキスト変化に対応できなくなるため、原則システムトークンを参照してください。

theming

前述したDesign Token Format Module草案では、2024年11月現在コンテキストを表現するフォーマットが定まっていません。そのためSerendie Design Systemでは、「typography.compact.json」や「typography.expanded.json」のようにコンテキストごとにJSONファイルを分けることで対応し、これはFigma上では[Variableモード](https://help.figma.com/hc/ja/articles/15343816063383-%E3%83%90%E3%83%AA%E3%82%A2%E3%83%96%E3%83%AB%E3%83%A2%E3%83%BC%E3%83%89)として展開されます。Variableモードについては[Get Started](/get-started/design#section-3)を参照してください。

variable mode

Serendie Design Systemでは、コードとデザイン間のSingle Source of Truthを実現するため、マスターファイルで管理されるデザイントークンが、**[Figma Variables](https://help.figma.com/hc/ja/articles/15871097384471-%E3%83%90%E3%83%AA%E3%82%A2%E3%83%96%E3%83%AB%E3%81%A8%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%AE%E9%81%95%E3%81%84)としてデザイン側にも自動同期されるのが特徴**です。 これによりFigma利用者は、Variablesを使うことで、マスターファイルに管理されるデザイントークンを使ってデザインすることができます。なお、この同期にはFigma REST APIを利用しており、2024年11月現在、[Figmaエンタープライズプラン](https://www.figma.com/ja-jp/pricing/?fuid=1212571380417963371)の契約が必要になります。 このような仕組みから、例えばprimaryカラーに変更があった際には、その変更がデザインファイルとWebアプリケーションに自動的に波及するなど、真の意味でデザイントークンを開発とデザインの共通言語とすることができます。

pipeline

デザイントークンは命名も重要です。Serendie Design Systemは、[Material Design 3](https://m3.material.io/foundations/design-tokens/overview)の設計から多くの影響を受けており、デザイントークンの命名規則もその一つです。 命名には下記のルールを採用しています。いずれも特定の技術やプラットフォームに依存しないことや、各種ツールの入力補完を前提とし省略記法を避けることを基本指針としています。 - 先頭小文字のキャメルケース (camelCase) とする - 頭文字にアラビア数字を避け、英単語を使う (2extraSmallではなく、twoExtraSmall) - Tシャツサイズを用いるときはxsのような省略記法を避け、extraSmallとする - デバイス種別 (PC/Mobile) ではなく、画面幅 (Expanded/Compact) に着目する - 特定のプラットフォームに依存しない用語選び ### 参考文献 --- #### カラー URL: https://serendie.design/foundations/color [Serendieブランド](https://www.mitsubishielectric.co.jp/serendie/)では日本の伝統色をベースにしたカラーを多様に組み合わせ、オフィス空間やコミュニケーションツールなど様々なタッチポイントで使用しています。Serendie Design Systemではその多様さを[5つのカラーテーマ](/foundations/theming)として定義し、それを継承した[データビジュアライゼーション用のカラーパレット](/foundations/data-visualization/)も備えています。本カラーパレットはそれらの基盤となります。 基本的に色相ごとに10段階の明度でスケールを設計していますが、UIのなかで必要となるWhiteとBlack、Transparencyは例外です。Transparencyの用途は[カラーロール](/foundations/color/role#section-4)を参照してください。
Serendieブランドの特性や、テーミングやデータビジュアライゼーションなど多様な用途の基盤となることを踏まえて、カラーパレットのコントラスト基準としてAPCA (Advanced Perceptual Contrast Algorithm) を採用しています。APCAはWCAG 3.0での採用が検討されており、より人間の知覚に近い基準として期待されています。 APCAのコントラスト基準 (Lc値) を前提に、色相ごとの人間の知覚特性を考慮しながら、色相間の明度レベルが揃うように調整しています。また、カラートークンとしての使いやすさを考慮し、明度のジャンプ率には意図的な傾斜をつけています。読みやすさが重要なテキストにおいては、カラートークン600番以上 (Lc値の75以上) を使用してください。 また、現在提供している[5つのカラーテーマ](/foundations/theming)は、前景色(テキスト色)と背景色がAPCAのコントラスト基準を満たすように設計しています。そのため、UIコンポーネントを追加設計する際は、[カラーロール](/foundations/color/role)を適切に使用してください。例えば、primaryとonPrimaryは合わせて使うことが推奨され、primaryとonPrimaryContainerを組み合わせることは非推奨です。 ### 参考文献 --- #### カラーロール URL: https://serendie.design/foundations/color/role base: { "& > img": { width: "100%", maxWidth: "310px", }, }, }); カラーロールは、Impression, Component, Interactionの3つの区分で整理されます。この区分はシステムトークンのKey名に含まれます。 ## ブランドカラーとUIカラー プロダクトを目にした**ユーザーが受ける「印象」に関するカラーロールがImpression**です。この区分の中には、ブランドカラーに関するロールと、UIカラーに関するロールが含まれます。 ブランドカラーに関するロールは、その優先度ごとにPrimary, Secondary, Tertiaryの3種類が存在します。Primaryカラーは、プロダクト及びブランドの印象を形づくり、UIの重要度を示す役割です。SecondaryおよびTertiaryカラーは補助的な役割で、プロダクト内で登場しないこともあります。 UIカラーに関するロールは、「成功」や「失敗」「警告」など、UIの持つ機能やインタラクションの結果を、ユーザーに伝える役割です。これをユーザーに与える印象という観点で、Positive, Negative, Noticeという3種類で整理します。Impressionのなかに合計6つの小区分を用意していますが、プロダクトによってはPrimaryとPositiveが同じ色を指すことも多く、全てに別の色を当てはめる必要はありません。 結果として同じ色を指す場合でも、**ロールを分けておくことで変化に強いデザイントークン**となります。 ## 前景色と背景色 Impression系のデザイントークンは、Buttonをはじめとして多くのUIコンポーネント内で使用されます。ここで重要となるのが、**前景と背景および色面積に応じてデザイントークンを分ける**考え方です。例えば、Primaryロールを担うデザイントークンは、次の4つです。（トークン名の一部を抜粋） 1. primary ― テキスト色や、色面積の小さな背景色 2. onPrimary ― primaryを背景とする前景色 3. primaryContainer ― 色面積の大きな背景色 4. onPrimaryContainer ― primaryContainerを背景とする前景色 前景色には接頭辞「on」が付き、色面積が大きな背景色には接尾辞「Container」が付くルールです。先に紹介したImpression系の6つのカラーロールは、全てこのルールが当てはまります。 アクセシブルなUIを設計する上で、**前景色と背景色のコントラスト比の確保は重要**であり、ダークモードなどコンテキストの変化に対応するためには、前景と背景でデザイントークンを分けることが必要になります。さらに同じロールを持つ色であっても、その色面積に応じて明度を調整することは多々あります。慣習的に赤色を用いることが多いNegativeロールはその代表例です。このような理由から、「on」及び「Container」がついたデザイントークンの使い分けが大切です。 Componentに区分されるロールは**UIを形作る役割**を担います。代表的なロールはSurfaceとOutlineです。Surfaceはデフォルトの背景色・テキスト色を指し、多くの場合ニュートラルカラーが使われます。Surfaceロールを担う代表的なデザイントークンは次の3つです。（トークン名の一部を抜粋） 1. surface ― Webサイト全体の背景色やカードUIの背景色など地色 2. onSurface ― surfaceを背景とするデフォルトのテキスト色 3. onSurfaceVariant ― surfaceを背景とするサブテキスト色 Outlineは、UIのボーダー色であり、視覚的な強弱によってバリエーションが存在します。 1. outline ― デフォルトのボーダー色 2. outlineBright ― より明るいボーダー色 3. outlineDim ― より暗いボーダー色 Interactionに区分されるロールは、UIコンポーネントの状態変化を担います。Hovered、Selected、Disabledの3種類のロールが存在します。 UIの選択状態を示すSelectedや、非活性状態を示すDisabledは、規定色 (Disabledはグレー系など) が用いられることが多く、Serendie Design Systemでもそのようにしています。 一方でHoveredは、ホバー前の色に応じてホバー後の色が変化し、1色に規定できないことに注意が必要です。Serendie Design Systemでは、Hovered系デザイントークンは半透明色 (Transparency) を指します。これを状態レイヤーとし、ホバー対象のコンポーネントに重ね合わせることで、そのホバー後の状態を表現します。 ### 参考文献 Serendie Design Systemでは、このページで紹介したカラーロールのプリセットをカラーテーマとして提供しています。カラーテーマについて詳しくは[Theming](/foundations/theming)を参照してください。 --- #### カラーロール URL: https://serendie.design/foundations/data-visualization-role PageMain, PageSection, PageAside, PageLinks, PageA, } from "../../../components/PageLayout.tsx"; デジタルプロダクトのUIデザインではチャートを扱う際に、チャート要素とUI要素がエリア内に同居することがあります。チャート要素はデータビジュアライゼーション用に設定しているカラートークン、UI要素は[通常のカラートークン](/foundations/color/role#section-3)を使用してください。 [データビジュアライゼーション用のカラーパレット](/foundations/data-visualization)は、単色相と複数色相の2つを用意しています。目的や扱うデータの種類によって使い分けてください。Serendie Design Systemの各カラーテーマとの共存やプロダクト画面をシンプルに保つために、複数色相を使用しないと表現できないケース以外では、**基本的に単色相の使用を推奨します**。 ## 単色相を使用する場合 同じカテゴリー、分析軸（ディメンション）、指標（メトリクス）、連続する数を表す場合は、同一の色を使用してください。明度はカラーパレットの01か06から、連続した数字を使ってください。 単色相の中の１つの明度で表せるものは、なるべくchart.mark.primary.05のみ使用するようにしてください。（例１参照） ## マーク間のマージン 複数／単色の色相両方において、マークの連続するカラートークン間 (例: mark.primary.01とmark.primary.02) には十分なコントラスト比がありません。この場合はマークに白線やマージンを入れて区別できるようにしてください。 ## 色だけに頼らない識別 グラフの種類を識別させる際に色だけで差を出すことは避け、シェイプ、ライン、パターン、テキストなどの補助要素を使用するようにしてください。 --- #### データビジュアライゼーション URL: https://serendie.design/foundations/data-visualization PageMain, PageSection, PageAside, PageLinks, PageA, } from "../../../components/PageLayout.tsx"; ## Single（単色相） チャート本体に使用する単色相のカラーパレットです。データ数が３以下の場合は偶数のカラーを使用してください。
sd.system.color.chart.mark.primary
チャート内での目盛やラベルなど、マーク（チャート本体）以外の要素はこちらのパレットを使用してください。
sd.system.color.chart.component
--- #### テーミング URL: https://serendie.design/foundations/theming 事業領域に応じたトンマナに対応するため、現在5つのカラーテーマを提供しています。各テーマは[Serendieブランド](https://www.mitsubishielectric.co.jp/serendie/)に用いられる日本の伝統色をベースに設計しています。今後ニーズに合わせてテーマの追加・更新をしていく予定です。 ## KONJO 紺青色をベースにしたテーマです。紺青色は[三菱電機Serendie St. Yokohama](https://www.mitsubishielectric.co.jp/serendie/)の拠点カラーでもあり、デフォルトのカラーテーマとしています。 konjo theme ## ASAGI 浅葱色をベースにしたテーマです。 asagi theme ## SUMIRE すみれ色をベースにしたテーマです。 sumire theme ## KURIKAWA 栗皮色をベースにしたテーマです。 kurikawa theme ## TSUTSUJI つつじ色をベースにしたテーマです。 tsutsuji theme 各テーマは、Figmaのなかで[Variableモード](https://help.figma.com/hc/ja/articles/15343816063383-%E3%83%90%E3%83%AA%E3%82%A2%E3%83%96%E3%83%AB%E3%83%A2%E3%83%BC%E3%83%89)として扱われます。Variableモードは、Figma Variablesに定義されたモード (テーマ) を、ページやセクション、フレームなどに割り当てる機能です。 theme selector 例えば、ページに「ASAGI」を割り当てることで、そのページ内の全てのSerendie UIをASAGIテーマに切り替えることができます。 theme switcher --- #### タイポグラフィ URL: https://serendie.design/foundations/typography PageSection, PageA, PageARef, } from "../../../components/PageLayout.tsx"; base: { px: "24px", pt: "20px", pb: "0px", bg: "web.system.color.articleFigure.background", overflow: "hidden", }, }); base: { fontSize: "13px", fontFamily: "var(--global-font-mono)", color: "sd.system.color.impression.primary", mt: "sd.system.dimension.spacing.extraSmall", lineHeight: "1", }, }); base: { color: "web.system.color.impression.onSurface", mt: "sd.system.dimension.spacing.extraSmall", textWrap: "nowrap", mb: "20px", }, variants: { isDefault: { true: { fontSize: "26px", }, }, isMono: { true: { fontFamily: "var(--global-font-mono)", }, }, isBold: { true: { fontWeight: "bold", }, }, }, }); font-family: Roboto, "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif; }`; [Serendieブランド](https://www.mitsubishielectric.co.jp/serendie/)は、欧文フォント「Roboto」、和文フォント「Noto Sans JP」を採用しています。Serendie Design Systemにおいてもそれを踏襲しつつ、等幅フォント「Noto Sans Mono」を追加しています。いずれのフォントもオープンソースであり、無償で商用利用可能です。 ## CSSで利用する WebアプリケーションにおいてはなどでWebフォントとして利用してください。Serendie UIにはバンドルされており、個別設定は不要です。 個別設定を行う場合は、下記を参考にCSSのfont-familyを記述し、システムフォントへのフォールバックを適切に設定してください。 により、サポートされない箇所にはNoto Sansが自動適用されます。これにより、特別なプラグイン無しで、RobotoとNoto Sansの和欧混植が実現できます。混植のための細かな設定はできませんが、運用性の高さを優先しています。 フォントサイズ (font-size) は、可読性や視認性に大きく影響します。また見出しや本文など役割に応じて、フォントサイズを一貫させることや、サイズを変化させることでリズムを生むことも大切です。 Serendie Design Systemでは調和数列をベースにフォントサイズスケールを設計し、リファレンストークンとしています。デザイン上の使い勝手を考慮し、16px (medium) を基準としつつ、使用頻度の高いmedium未満 (10px〜14px) はスケール間隔を小さくし、ジャンプ率が求められるmedium以上 (18px〜64px) はスケール間隔を大きくしています。 見出しや文章内の強調など、視覚的・意味的に強弱をつけたいときはウェイト (font-weight) を変化させます。通常 (regular) と太字 (bold) の2種類をリファレンストークンとして定義しています。数値はregularを400、boldを700としています。 行ボックスの高さ (line-height) は、文章の可読性や印象に影響します。normal (160%) を基準とし、ゆったりとした印象を与えるrelaxed (180%)、逆に情報量を優先させるtight (140%)、ボタンなどラベルテキストでの使用を想定した none (100%)の4パターンをリファレンストークンとして定義しています。 タイポグラフィは、フォント、ウェイト、サイズ、行の高さなどをグループ化し、グループごとに見出し、タイトル、本文、ラベルなど、UI上の役割を持つことが特徴です。これらをシステムトークンとして定義しています。 ## Display 最も大きなフォントサイズを使用し、視覚的に印象付ける役割を持ちます。表現を重視するプロダクトにおいて、PCなど比較的大きなブラウザ幅で用います。Displayロールは、smallとmediumの2つのサイズを持ちます。 と呼ばれます) に現在対応していません。そのため、タイポグラフィのシステムトークンは**VariablesではなくText Stylesとして定義**しており、他と適用方法が異なることに注意してください。 Bodyロールのmediumサイズは、ページ本文に用いることを想定しており、これをフォントサイズの基準として扱います。 ただしこの基準サイズは、ブラウザ幅によって変化するのが一般的です。Serendie Design Systemでは、ブラウザ幅がCompact (モバイル) の場合は16px、Expanded (PC) の場合は14pxを基準としています。これを基準として、全ロールが相対的にフォントサイズが変わることに注意してください。 Serendie Design Systemでは、これを[Variableモード](https://help.figma.com/hc/ja/articles/15343816063383-%E3%83%90%E3%83%AA%E3%82%A2%E3%83%96%E3%83%AB%E3%83%A2%E3%83%BC%E3%83%89)として扱います。Themingと同様に、ページやセクション、フレームなどにモード (Expanded/Compact) を割り当てることで、基準サイズを変更できます。 **デフォルトはCompactモード(モバイル)です。** Expanded(PC)用の画面をデザインするときには、ページ全体をExpandedモードに変更してください。 variable mode --- #### 寸法 URL: https://serendie.design/foundations/dimension PageSection, PageA, PageARef, } from "../../../components/PageLayout.tsx"; 調和数列をベースにした数列をリファレンストークンとして定義し、twoExtraSmallからsixExtraLargeまで13段階のサイズをシステムトークンとしています。 使う機会が多い最小〜中サイズは4の倍数で細かく定義し、中〜大サイズはジャンプ率が高くなるように設計しています。Figmaでレイアウトする際は絶対位置指定を避け、なるべくを使うことで、スペーシングトークンを活用できます。 ボーダーの幅は medium/thick/extraThick の3パターンをシステムトークンとして定義しています。medium (1px) が最もよく使われます。Figma上では、Strokeペインのボーダー幅入力欄を「右クリック」することで、トークンを適用できます。

border width settings

オブジェクトの境界線を丸める際に、その量をextraSmallからextaLargeまで5段階で定義しています。fullは例外的に9999として定義していて、これは長円形に用います。 ブラウザのビューポート幅などでスタイルを変更 (レスポンシブデザイン) する際のBreakpointとなるトークンです。実装時にSerendie UIのコンポーネントを使う場合は意識する必要はありません。 Serendie Design Systemではモバイルファーストな実装を前提に、Breakpointはビューポート幅の下限値 (min-width)としています。リファレンストークンとして、一般的に利用されることが多いBreakpointをsmallからextraLargeまで4種類定義しています。 また今のところcompact幅とexpanded幅の2種類で各種コンポーネントを用意しているため、expanded向けデザインに切り替えるBreakpointを768pxとしてシステムトークンを定義しています。今後タブレットやワイドデスクトップ用のシステムトークンを追加する場合は、相対的に参照先を変更してください。 --- #### 階層 URL: https://serendie.design/foundations/elevation ドロップシャドウは背景に影を落とす効果であり、その強さによって高低差を表現できます。Level1~5まで5段階のElevationを定義しています。 Level0はBody (surface)であり、ほとんどのUIコンポーネントはこのLevel0に位置します。の開閉メニューはLevel1、はLevel3、やはLevel5など、UIの一般的な振る舞いに合わせてLevelをコントロールすることが大切です。 と呼ばれます) に現在対応していません。そのため、シャドウは**VariablesではなくEffect Styles**として定義しており、他と適用方法が異なることに注意してください。 z-indexはオブジェクトの重なり順を制御するCSSプロパティであり、値が大きいほど階層が高くなります。システムトークンとしてz-index値を定義していますが、これはCSS実装用のトークンのためFigmaでは意識する必要はありません。 **シャドウは表現上の階層ですが、z-indexは実装上の階層**です。そのためシビアにz-index値をコントロールすることが堅牢なUIを作る上で大切であり、トークン名には意味性の強い名前を付けています。詳しくはの一覧を参照してください。 --- #### アイコン URL: https://serendie.design/foundations/icon Serendie Symbolsは、現在のところOutlined(線)とFilled(塗り)の2パターンがあり、それぞれ300種類程度のアイコンを提供しています。 ## Figmaで使う Serendie UI Kit (Figma)では、「SerendieSymbols」としてComponent化されており、UIコンポーネントと同様にバリアントプロパティによりアイコンを選択できます。 serendie symbols ## Reactで使う React環境向けにSerendie SymbolsをSVGコンポーネント化したライブラリを提供しています。アイコン名などはFigmaと共通です。詳しくは[GitHub](https://github.com/serendie/serendie-symbols)を参照してください。 Serendie Symbolsの設計原則と、デザインする際のTipsです。アイコンを更新・追加する際に意識してください。 ## Arcを生かす SerendieブランドのシンボルであるArc (半円) を表現の中で生かしてください。ただし、形の中にArcが多すぎると、アイコンの意味が伝わらず実用性を損なうため注意してください。 - 意味的にArcを含まない形であっても、Arc化 (ラインを切る) することでSerendieのアイデンティティを強調する。 - 基本的に「最も外側に位置する円」のラインを切ることで、Arcに見せる。逆に、内側に位置する円はArc化しない。 - 特に長円形を使うような箇所はArc化すると効果的。 ## 極端なシルエット 線と角のコントラストを意識しメリハリをつけ、全体的に形をはっきりさせてください。幾何学的な形を意識しつつ、必要に応じて有機的な形も利用しましょう。 - 大胆な形の組み合わせでメリハリのあるシルエットにする。 - 奥行を出さずに、平で左右対称な形にする。 - 角には小さい丸みを加え、線の端は四角をキープし、形に些細なコントラストを加える。 ## ユーザーを驚かせない Arcを生かすことによってアイコンの意味が変わってしまう恐れがある場合は、個性よりも一般性を重視してください。また、アイコンのコーナーに丸みを活かし、オンスクリーンで自然と存在するものを目指してください。 - 角丸を少し足すことで尖った印象を柔らげ、親しみやすい形にする。 - 余白を生かし、全体的に陽気な印象を与える。 ## 解剖 アイコンは1.2pxの線幅で作られており、角丸半径は0.25です。パスの間にギャップを作る際は、両端点の間に1.6pxの感覚を開けます。開いたパスの端にはキャップやティップは追加されません。 anatomy ## グリッドとキーライン アイコンシステム全体で一貫した比率を維持するために、24dp x 24dp のグリッドに配置されている幾何学的なキーラインシェイプをガイドラインとして使用します。 grid ## レイアウト 全体を24dp x 24dpとし、Paddingを2dp、Live areaを20dp x 20dpとします。 アイコン本体はLive area内に原則収めてください。一部がPadding領域に出ることも許容されますが、トリムエリアである枠外に出てはいけません。 layout ## 線幅 1.2pxの線幅で作り、線の終了点にキャップやティップは追加しません。ストロークの位置を「中央」に設定することにより、図形や線が一貫してスタイリングされます。デフォルトは「内側」に設定されているため注意してください。 stroke ## 角丸の大きさ 形に少し柔らかさを加えるために、角の半径は0.25pxに設定します。 radius ## 制約 横軸と縦軸に「拡大縮小」制約を適用することで、アイコンのサイズを変更しても、比率が維持されます。この制約はアイコン自体につけ、アイコンを囲むフレームには適用されません（横軸「左」、縦軸「上」を保つ）。 constraints ## 統合 アイコンを作成する際、すべての要素を選択し、コンテキストメニューから「統合」を選択して、レイヤーを1つのベクターパスにフラット化します。これにより完成したアイコンを1つのエンティティとして扱いやすくなり、アイコンの複雑さに応じてストロークのアウトラインを作成しやすくなります。 integrate ## アウトライン化 アイコンのスタイルが適切に設定されたら、線をアウトライン化してベクターオブジェクトに変換し、サイズ変更時に比率が影響を受けないようにします。 outline --- #### アイコン URL: https://serendie.design/foundations/icon-list --- #### イラストレーション URL: https://serendie.design/foundations/illustration PageMain, PageSection, PageAside, PageLinks, PageA, } from "../../../components/PageLayout.tsx"; Serendie Design System運用チーム向けに、新しくドキュメントを作成するシーンなどにおいて、Serendie Design Systemらしいイラストを簡単に作成できます。Serendie UI Kit (Figma)内のIllustrationページから利用できます。 現在のところ運用チーム向けに内部的に提供しているため、Figmaファイル内には含まれますがライブラリとしては公開されません。(Figma内Assetsパネルからは利用できません) illusts ## 1. テンプレートをコピーする イラストのテンプレートとして、「IllustrationTemplates Component」があります。このComponentにはコンポジション（イラストの構成・レイアウト）が4タイプあり、タイプごとにアイキャッチやメインビジュアル用途、アイコン用途を用意しています。さらに用途ごとに横長（Landscape）、縦長（Portrate）、正方形、円形のバリエーションを持っています。 目的に応じて、この中から好きなテンプレートをコピーしてください。 illust template ## 2. コピーしたテンプレートのパーツを入れ替える テンプレートは、図形パーツのComponentをさらに内包しています。この図形パーツComponentのバリアントプロパティを変更することで、新しいイラストを作成することができます。各図形パーツは、次のバリアントプロパティを持っています。 1. 🔒️Size ― Small, Medium, Largeの3サイズ 2. 🔒️Color ― Primary, Secondary, Tertiary1/2, Accentの5色 3. Shape ― Rectangle, Arc, Uniqueの3タイプ 4. Variation ― Shape毎の中の形のバリエーション バリアントプロパティにて🔒️マークのついているSizeとColorは変更せず、ShapeとVariationを変更して使用してください。こうすることで、統一感のある配色・配置のまま、イラストのバリエーションを出すことができます。 illust constraints ## 3. カラーテーマ対応できていることを確認する イラスト内のカラーはFigma Variablesで管理されています。そのため、[UIのテーミング](/foundations/theming#section-3)と同様にバリアブルモードを設定することで、各テーマに合わせたカラーが自動的に適用されます。バリアブルモードを設定して、テーマ毎の配色を確認してください。 theming --- ### Components #### Accordion URL: https://serendie.design/components/accordion Component Name: アコーディオン Description: 関連するコンテンツを列挙し、ユーザーが展開・折りたたむことができるコンポーネントです。表示スペースを節約しながら、ユーザーが詳細な情報を得る手段を提供します。 Last Updated: 2024-11-1 --- #### Avatar URL: https://serendie.design/components/avatar Component Name: アバター Description: ユーザーについて視覚的に表現するコンポーネントです。 Last Updated: 2024-11-1 --- #### Badge URL: https://serendie.design/components/badge Component Name: バッジ Description: ステータス、カテゴリなどを表すコンポーネントです。情報を簡潔に表示し、ユーザーの注意を引きつけます。 Last Updated: 2024-11-1 --- #### Banner URL: https://serendie.design/components/banner Component Name: バナー Description: エラーや警告など重要なメッセージを目立つように表示し、ユーザーの注意を喚起するコンポーネントです。 Last Updated: 2024-11-1 --- #### Bottom Navigation URL: https://serendie.design/components/bottom-navigation Component Name: ボトムナビゲーション Description: 画面下部に配置するモバイルやタブレット向けのグローバルなタブナビゲーションです。 Last Updated: 2024-11-1 --- #### Button URL: https://serendie.design/components/button Component Name: ボタン Description: アクションをトリガーするためのクリック可能なコンポーネントです。 Last Updated: 2024-11-1 --- #### Chart URL: https://serendie.design/components/chart Component Name: チャート Description: データビジュアライゼーションのためのチャートコンポーネントです。円グラフ、棒グラフ、折れ線グラフなどをサポートし、データの視覚化を容易にします。 Last Updated: 2025-07-28 --- #### Check Box URL: https://serendie.design/components/check-box Component Name: チェックボックス Description: ChoiceBoxにラベルを付けたコンポーネントです。複数の選択肢から、1つ以上を選択する際に使用します。 Last Updated: 2024-11-1 --- #### Choice Box URL: https://serendie.design/components/choice-box Component Name: チョイスボックス Description: CheckBoxとRadioButtonからラベルを除いたコンポーネントです。カードやリストと併用して使用できます。 Last Updated: 2025-05-23 --- #### Dashboard Widget URL: https://serendie.design/components/dashboard-widget Component Name: ダッシュボードウィジェット Description: ダッシュボード画面で使うことを想定したコンポーネントです。データをサマライズして表示する際に使用します。 Last Updated: 2024-11-1 --- #### Data Table URL: https://serendie.design/components/data-table Component Name: データテーブル Description: 構造化されたデータを表形式で表示・操作するコンポーネントです。ソート、選択、カスタムレンダリングの機能も提供します。 Last Updated: 2025-07-10 --- #### Date Picker URL: https://serendie.design/components/date-picker Component Name: デートピッカー Description: 日付を選択するためのコンポーネントです。カレンダー形式で日付を選択できます。 Last Updated: 2025-09-03 --- #### Divider URL: https://serendie.design/components/divider Component Name: ディバイダー Description: 視覚的に区切るためのコンポーネントです。コンテナ内でコンテンツをグループ化する際にも使用します。 Last Updated: 2024-11-1 --- #### Drawer URL: https://serendie.design/components/drawer Component Name: ドロワー Description: メニューやナビゲーションを格納するコンポーネントです。主に表示領域が限られるモバイルやタブレットにおいて使用されます。 Last Updated: 2024-11-1 --- #### Dropdown Menu URL: https://serendie.design/components/dropdown-menu Component Name: ドロップダウンメニュー Description: 複数のアクションを格納するためのコンポーネントです。メニュー内のアクションは、クリック時にイベントをトリガーします。アクションではなく、選択肢を表示する場合は、Selectを使用してください。 Last Updated: 2024-11-1 --- #### Icon Button URL: https://serendie.design/components/icon-button Component Name: アイコンボタン Description: アクションをトリガーするためのクリック可能なコンポーネントです。アイコンを使用してアクションの内容を視覚的に伝えます。 Last Updated: 2024-11-1 --- #### List URL: https://serendie.design/components/list Component Name: リストアイテム Description: 関連する項目を縦に並べて、メニューや一覧を構成するためのコンポーネントです。 Last Updated: 2024-11-1 --- #### Modal Dialog URL: https://serendie.design/components/modal-dialog Component Name: モーダルダイアログ Description: アプリケーションを覆うレイヤー上にダイアログを表示するコンポーネントです。Modal Dialogが表示されている間は、ユーザーはその他の操作ができなくなることに注意が必要です。 Last Updated: 2024-11-1 --- #### Notification Badge URL: https://serendie.design/components/notification-badge Component Name: バッジ Description: 未読の通知や新着情報をユーザーに知らせるためのコンポーネントです。 Last Updated: 2024-11-1 --- #### Pagination URL: https://serendie.design/components/pagination Component Name: ページネーション Description: 複数ページにまたがるデータやコンテンツのページ切り替えを行うためのコンポーネントです。 Last Updated: 2025-05-23 --- #### Progress Indicator URL: https://serendie.design/components/progress-indicator Component Name: プログレスインジケーター Description: ユーザーにアプリケーションの待機状態を視覚的に示すためのコンポーネントです。 Last Updated: 2025-09-18 --- #### Radio Button URL: https://serendie.design/components/radio-button Component Name: ラジオボタン Description: ChoiceBoxにラベルを付けたコンポーネントです。複数の選択肢から、一つを排他的に選択する際に使用します。 Last Updated: 2024-11-1 --- #### Search URL: https://serendie.design/components/search Component Name: サーチ Description: 検索用途に特化した入力コンポーネントです。検索キーワードを入力した際に候補をサジェストする機能も持ちます。 Last Updated: 2024-11-1 --- #### Select URL: https://serendie.design/components/select Component Name: セレクト Description: 複数の選択肢を格納し、ユーザーは1つの選択肢を選ぶコンポーネントです。選択肢ではなくアクションを表示する場合は、DropdownMenuを使用してください。 Last Updated: 2024-11-1 --- #### Switch URL: https://serendie.design/components/switch Component Name: スイッチ Description: オン/オフの2つの状態を切り替えるためのコンポーネントです。設定画面などでその状態を視覚的に伝えることができます。 Last Updated: 2024-11-1 --- #### Tabs URL: https://serendie.design/components/tabs Component Name: タブ Description: 複数のビューを切り替えるためのコンポーネントです。TopAppBarやBottomNavigationはグローバルなナビゲーションとして使用しますが、Tabsはローカルなナビゲーションであることに注意してください。 Last Updated: 2024-11-1 --- #### Text Area URL: https://serendie.design/components/text-area Component Name: テキストエリア Description: 複数行のテキストを入力するためのコンポーネントです。Buttonなどと合わせてフォームを構成します。 Last Updated: 2024-11-1 --- #### Text Field URL: https://serendie.design/components/text-field Component Name: テキストフィールド Description: 1行のテキストを入力するためのコンポーネントです。Buttonなどと合わせてフォームを構成します。複数行にはTextAreaを使用してください。 Last Updated: 2025-03-21 --- #### Toast URL: https://serendie.design/components/toast Component Name: トースト Description: 画面上に一時的に表示される短い通知メッセージです。アクションの結果やエラーメッセージなどをユーザーに伝えるために使用します。 Last Updated: 2024-11-1 --- #### Tooltip URL: https://serendie.design/components/tooltip Component Name: ツールチップ Description: ホバーやフォーカス時に追加情報を表示する小さなポップアップです。要素の説明や補足情報を提供するために使用します。 Last Updated: 2025-07-28 --- #### Top App Bar URL: https://serendie.design/components/top-app-bar Component Name: トップアップバー Description: 画面上部に配置するモバイルやタブレット向けのグローバルなナビゲーションです。 Last Updated: 2024-11-1 --- ### Terms #### 利用規約 URL: https://serendie.design/terms Figma Communityにて公開されているSerendie UI Kitは、Takram Japan株式会社の支援のもと創作され、三菱電機株式会社の著作物として保護されています。 CC BY 4.0のライセンス条件(コモンズ証 - 表示 4.0 国際 - Creative Commons)に従ってご利用ください。本ライセンスは、Serendie UI KitのFigmaファイルに含まれる全て(Design Token, UI Component, Examples, Icon, Illustration)に適用されます。