はじめに

Kaze (風) は、白と温かみのあるグレーを基調にした超ミニマルな React デザインシステムです。 日本語組版とデータ密度の高い管理画面・金融 UI に最適化されており、明快さ・情報密度・ 落ち着いた美しさを軸に設計しています。派手な装飾ではなく、長時間見続けても疲れない静かな インターフェースを目指しています。

前提条件

• React 18 以上（React 19 推奨）
• TypeScript 5 以上（任意・推奨）
• 任意のバンドラー: Vite, Next.js, Remix, webpack
• SSR / RSC 対応: CSS カスタムプロパティのみで動作
• Tailwind CSS と併用可（レイヤーは kaze.* に分離。併用時は css/core を読み込む）

インストール

npm で Kaze デザインシステムのパッケージをインストールします。

npm install kaze-design-system

CSS の読み込み

推奨: CSS を一括で読み込む方法です。

import "kaze-design-system/css/all";

上級: 個別の CSS ファイルを読み込んで、必要なスタイルだけに絞ることもできます。

import "kaze-design-system/css/tokens";      // デザイントークン（カラー、スペーシング、タイポグラフィ）
import "kaze-design-system/css/reset";       // CSS リセット
import "kaze-design-system/css/components";  // コンポーネントスタイル
import "kaze-design-system/css/utilities";   // ユーティリティクラス

基本的な使い方

パッケージからコンポーネントを import して、React アプリケーションで使用します。

import { Button, Card, CardHeader, CardTitle, CardBody } from "kaze-design-system";

function Dashboard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>ポートフォリオ</CardTitle>
      </CardHeader>
      <CardBody>
        <p>資産の概要をご確認ください。</p>
        <Button>詳細を見る</Button>
      </CardBody>
    </Card>
  );
}

LP・キャンペーンページ向けの Marketing コンポーネント（Hero, PricingGrid, CTABanner など）は kaze-design-system/marketing サブパスからも import できます。管理画面では Application UI 層だけを、LP では Marketing 層だけを使う、というレイヤーの使い分けを import 文で表現できます。

// Marketing レイヤー（ルートからの import も引き続き有効）
import { Hero, PricingGrid, CTABanner } from "kaze-design-system/marketing";

テーマの設定

アプリケーションを ThemeProvider で囲むと、 ライト / ダークテーマの切り替えが有効になります。

import { ThemeProvider } from "kaze-design-system";

function App() {
  return (
    <ThemeProvider defaultTheme="light">
      <YourApp />
    </ThemeProvider>
  );
}

ThemeProvider の defaultTheme には "light"、 "dark"、 "system" を指定できます。

テーマは CSS custom properties （カスタムプロパティ）で実装されています。data-theme 属性の切り替えだけで全コンポーネントが自動的にテーマに追従するため、ランタイムコストはゼロです。 トークンの上書きも通常の CSS で簡単に行えます。

収録コンポーネント

Kaze には 9 カテゴリ・78 個のプロダクション対応コンポーネントが含まれています。 詳細は コンポーネント一覧をご覧ください。

デザインの考え方

Kaze は可読性・情報密度・視覚的な静けさを重視した、明確なデザイン原則に基づいています。