# UI 概要

- Human documentation: [https://docs.univer.ai/ja-JP/guides/docs/ui/overview](https://docs.univer.ai/ja-JP/guides/docs/ui/overview)

- Agent Markdown: [https://docs.univer.ai/ja-JP/guides/docs/ui/overview.md](https://docs.univer.ai/ja-JP/guides/docs/ui/overview.md)

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.1.0`

- Source: [docs/ui/overview.ja-JP.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/docs/ui/overview.ja-JP.mdx)

---

## アーキテクチャ

Univer のベース UI は、以下の図に基づいて設計されています：



さまざまなプラグインを組み合わせることで、ベースに様々な機能とビューが追加され、最終的に完全なアプリケーションが形成されます。

## デザインシステム

Univerのデザインシステムは Tailwind CSS をベースに構築されており、レンダリングエンジンによって再利用される一連のデザイントークンを作成し、レンダリングエンジンとビューレイヤー間のスタイルの一貫性を保証しています。これらのトークンを変更することで、アプリケーションのスタイルをカスタマイズできます。これらのトークンは `@univerjs/themes` パッケージに格納されています。

- [テーマとダークモード](https://docs.univer.ai/ja-JP/guides/fundamentals/ui/themes.md)

## コンポーネント

Univer はビューレイヤーの構築に React コンポーネントを使用しているため、同じく React を使用する開発者にとって、Univer のコンポーネントを使用したり、カスタムコンポーネントを登録したりすることが非常に簡単です。ただし、これは React のみでカスタムコンポーネントを作成できることを意味するわけではありません。Univer は Vue（バージョン 3.x）や Web Components など、他のフレームワークもサポートしています。

すべての基本コンポーネントは `@univerjs/design` パッケージに格納され、アイコンコンポーネントは `@univerjs/icons` パッケージに格納されています。これらのコンポーネントは Univer とは独立して使用することも可能です。

カスタムコンポーネントは以下のようなシナリオでよく使用されます：

* Ribbon / Context Menu でのカスタムボタンの追加
* Sidebar / Popup などでのカスタムコンポーネントの統合
* 組み込みコンポーネントの置き換え

カスタムコンポーネントの登録と使い方については、後続の章で詳しく説明します。

- [カスタムコンポーネント](https://docs.univer.ai/ja-JP/guides/docs/ui/components.md)

- [アイコン](https://docs.univer.ai/ja-JP/guides/icons.md)

## メニューの順序とグリッドレイアウト

[`order`、`gridLayout`、`updateMenuConfig()`](https://docs.univer.ai/ja-JP/guides/docs/features/core.md#menu-order-and-grid-layout) でタブ・グループ・項目の順序、グリッド配置、実行時の更新を設定できます。ガイドにはカスタムメニューの Facade オプションへのリンクもあります。