Gftd Japan株式会社 / デザインシステム

Gftd Japan株式会社の「高い知性と倫理観に基づき、最先端の科学技術を用いた、サイバーセキュリティ技術を用いて、我らと我らの子孫が豊かで情緒的な暮らしを送ることができるよう、いい感じの社会を作る」の実現に寄与するデザインアセットです。

特徴

Rust + Sycamore: 安全で高速なWebフロントエンドを実現
アクセシビリティ: JIS X 8341-3:2016（WCAG 2.0）に準拠したアクセシブルなコンポーネント
Sycamoreコンポーネント: 型安全なコンポーネントAPIで開発効率を向上
WASMサポート: WebAssemblyで高速な実行を実現

インストール方法

Cargo.tomlに依存関係を追加:

[dependencies]
gftdcojp_designsystem = "0.1.0"

使用例

use sycamore::prelude::*;
use gftdcojp_designsystem::components::*;
use gftdcojp_designsystem::styles::utils::add_button_styles;

fn main() {
    sycamore::render(|cx| {
        // グローバルボタンスタイルを追加
        let _ = add_button_styles();
        
        view! { cx,
            div {
                h1 { "Gftd Japan株式会社 / デザインシステム" }
                
                // プライマリボタン
                Button(
                    variant=ButtonVariant::Primary,
                    size=ButtonSize::Medium,
                    children=create_signal(cx, "送信".to_string()),
                    on_click=|_| { /* ボタンクリック時の処理 */ }
                )
                
                // セカンダリボタン
                Button(
                    variant=ButtonVariant::Secondary,
                    size=ButtonSize::Medium,
                    children=create_signal(cx, "キャンセル".to_string()),
                    on_click=|_| { /* ボタンクリック時の処理 */ }
                )
                
                // 無効状態のボタン
                Button(
                    variant=ButtonVariant::Primary,
                    size=ButtonSize::Medium,
                    disabled=true,
                    children=create_signal(cx, "無効".to_string())
                )
            }
        }
    });
}

利用可能なコンポーネント

ボタン (Button)

デジタル庁デザインシステムに準拠したボタンコンポーネント:

スタイル: SolidFill（塗り）, Outlined（アウトライン）, Text（テキスト）
サイズ: XSmall（極小）, Small（小）, Medium（中）, Large（大）
状態: Default（通常）, Hover（ホバー）, Active（アクティブ）, Focus（フォーカス）, Disabled（無効）, FocusOnDisabled（無効時フォーカス）

各スタイル、サイズ、状態の組み合わせに対応し、アクセシビリティに配慮した実装となっています。

use sycamore::prelude::*;
use gftdcojp_designsystem::components::*;
use gftdcojp_designsystem::styles::utils::add_button_styles;

// ボタンの使用例
add_button_styles(); // グローバルボタンスタイルを追加

view! { cx,
    // 塗りボタン（デフォルト）
    Button(
        style=ButtonStyle::SolidFill,
        size=ButtonSize::Medium,
        state=ButtonState::Default,
        children=create_signal(cx, "送信".to_string()),
        on_click=|_| { /* ボタンクリック時の処理 */ }
    )
    
    // アウトラインボタン（ホバー状態）
    Button(
        style=ButtonStyle::Outlined,
        size=ButtonSize::Medium,
        state=ButtonState::Hover,
        children=create_signal(cx, "キャンセル".to_string()),
    )
    
    // テキストボタン（無効状態）
    Button(
        style=ButtonStyle::Text,
        size=ButtonSize::Small,
        state=ButtonState::Disabled,
        children=create_signal(cx, "詳細".to_string()),
    )
}

リンク (Link)

テキストリンクコンポーネント:

バリアント: Standard, Dense, Outline
サイズ: Small, Medium
太さ: Normal, Bold
状態: Default, Hover, Active, Visited, Focus
機能: 外部リンクアイコン表示、新しいウィンドウで開く

use sycamore::prelude::*;
use gftdcojp_designsystem::components::*;
use gftdcojp_designsystem::styles::utils::add_link_styles;

// リンクの使用例
add_link_styles(); // グローバルリンクスタイルを追加

view! { cx,
    // 標準リンク
    Link(
        variant=LinkVariant::Standard,
        size=LinkSize::Medium,
        weight=LinkWeight::Normal,
        text=create_signal(cx, "デジタル社会の実現に向けた重点計画".to_string()),
        href="https://example.com",
        new_window=true
    )
}

カード (Card)

コンテンツをまとめて表示するカードコンポーネント:

バリアント: WithoutLink, WithOneLink, WithFunction
レイアウト: Vertical, Horizontal
状態: Default, Hover, Focus
エリアタイプ: Main, Image, Sub
機能: リンク、アクション、背景画像、カスタムボーダー半径

use sycamore::prelude::*;
use gftdcojp_designsystem::components::*;
use gftdcojp_designsystem::styles::utils::add_card_styles;

// カードの使用例
add_card_styles(); // グローバルカードスタイルを追加

view! { cx,
    // 基本カード
    Card(variant=CardVariant::WithoutLink, layout=CardLayout::Vertical) {
        CardArea(area_type=CardAreaType::Main) {
            CardTitle(
                title="子育て支援補助金制度".to_string(),
            )
            CardContent(
                content="育児休業等の取得を促進し労働者の業務負担軽減や業務効率化を目指します".to_string(),
            )
        }
    }
    
    // 画像付きカード
    Card(variant=CardVariant::WithOneLink, layout=CardLayout::Horizontal, href=Some("#".to_string())) {
        CardArea(
            area_type=CardAreaType::Image,
            background_image=Some("path/to/image.jpg".to_string()),
            border_radius=Some("16px 0px 0px 16px")
        ) {}
        
        CardArea(area_type=CardAreaType::Main) {
            CardTitle(
                title="サービスのご案内".to_string(),
            )
            CardContent(
                content="詳細はこちらをご覧ください。".to_string(),
            )
        }
    }
}

エレベーション (Elevation)

コンテンツに立体感を与えるためのシャドウコンポーネント:

スタイル: Style1 ~ Style8 (影の強さを表す)
用途: コンテンツの重要性や階層を表現

use sycamore::prelude::*;
use gftdcojp_designsystem::components::*;

view! { cx,
    Elevation(
        style=ElevationStyle::Style3,
        class="custom-card"
    ) {
        // 内部コンテンツ
        div { "エレベーションを適用したコンテンツ" }
    }
}

緊急バナー (EmergencyBanner)

緊急情報を表示するためのバナーコンポーネント:

プラットフォーム: Desktop, Mobile
リンク: True, False (ボタンの有無)
状態: Default, Hover
コンテンツ: タイトル、日付、説明文、ボタン

use sycamore::prelude::*;
use gftdcojp_designsystem::components::*;
use gftdcojp_designsystem::styles::utils::add_banner_styles;

// バナーの使用例
add_banner_styles(); // グローバルバナースタイルを追加

view! { cx,
    // デスクトップ用緊急バナー (リンクあり)
    EmergencyBanner(
        platform=BannerPlatform::Desktop,
        link=BannerLink::True,
        state=BannerState::Default,
        title=create_signal(cx, "【緊急】防災情報".to_string()),
        date=create_signal(cx, "2023年1月1日".to_string()),
        description=create_signal(cx, "台風接近に伴う避難情報を確認してください。".to_string()),
        button_label=create_signal(cx, "詳細を確認".to_string()),
        on_button_click=|| {
            // ボタンクリック時の処理
            web_sys::window()
                .unwrap()
                .open_with_url("https://example.com/emergency")
                .unwrap();
        }
    )
}

プロジェクト構成

/
├── src/
│   ├── components/      # UIコンポーネント
│   │   ├── button.rs    # ボタンコンポーネント
│   │   └── mod.rs       # コンポーネントモジュール定義
│   ├── styles/          # スタイリング関連
│   │   ├── tokens.rs    # デザイントークン
│   │   ├── utils.rs     # CSSユーティリティ
│   │   └── mod.rs       # スタイルモジュール定義
│   ├── lib.rs           # ライブラリエントリポイント
│   └── main.rs          # デモアプリケーション
└── tests/               # テストファイル
    └── button_test.rs   # ボタンテスト

セットアップと開発

依存関係のインストール:
```
cargo build
```
開発サーバーの起動:
```
cargo run
```
テストの実行:
```
cargo test
```

パブリッシュ方法

Cargo.tomlの内容を確認（バージョンなど）
Cargo.lockを更新: cargo update
パッケージをチェック: cargo package --list
テストを実行: cargo test
クレートを公開: cargo publish

参考リソース

デジタル庁デザインシステム Figmaデータ v2.2.0

進捗状況

プロジェクト初期化
基本設計
ボタンコンポーネント実装
ボタンテスト実装
リンクコンポーネント実装
カードコンポーネント実装
カードコンポーネントテスト実装
その他コンポーネントの実装
ドキュメント整備

ライセンスと責任

このクレートの開発と保守、および法的責任は Gftd Japan 株式会社が負っています。Gftd Japan株式会社 / デザインシステムの実装に関するご質問やサポートについては、Gftd Japan 株式会社までお問い合わせください。

gftdcojp_designsystem 0.1.1