UIXHERO
群青

未だ青ならず、青になりつつあるもの。

GUNJO — 言語化した設計を、実装で確かめる

UIXHERO は、UI 設計を言語化してきました。デザイン原則 65章、UX心理法則 119章、UIコンポーネント 72章。

けれど、言語化には弱点があります。「本当にそれで作れるのか」を、言葉だけでは証明できないことです。

GUNJO(群青)は、その検証のために UIXHERO の運営者が作った、あなたと AI のためのデザインシステムです。言語化してきた UIコンポーネントを、208個の React 実装として形にしています。

さらに、GUNJO を一度も見たことのない「文脈ゼロの AI」に 170 の画面を組ませ、部品が本当に見つかるか・docs だけで組めるか・どこで手組みが起きるかを記録しています(コールドテスト)。

役割の分担

UIXHERO が「いつ・なぜ使うか」の判断を、GUNJO が「実際に使える実装」を受け持ちます。

部品判断(UIXHERO)実装(GUNJO)
Buttonいつ・なぜ使うか実際に使える実装

UIコンポーネントと GUNJO の対応

UIコンポーネント 72章と、GUNJO の実装の対応です。判断は UIXHERO の解説で、実装は GUNJO で確かめられます。

UIコンポーネント(UIXHERO・判断)実装(GUNJO)
Accordion(アコーディオン)
Alert(アラート)
AlertDialog(警告ダイアログ)
App rail(アプリレール)
Avatar(アバター)
Badge(バッジ)
Breadcrumb(パンくずリスト)
Button(ボタン)
Calendar(カレンダー)
Card(カード)
Carousel(カルーセル)
Checkbox(チェックボックス)
Command Palette(コマンドパレット)
Context Menuとは?contextmenuイベントとUI設計の使い方
Dropdown Menu(ドロップダウンメニュー)
Empty State(空状態)
Floating Panel(フローティングパネル)
Hover Card(ホバーカード)
Inspector Panel(インスペクターパネル)
List(リスト)
Menubar(メニューバー)
Notification Center(通知センター)
ページネーションとは?デザインの要点と無限スクロールとの違い
Popover(ポップオーバー)
Resizable(リサイザブル)
Right Rail(ライトレール)
Scroll Area(スクロールエリア)
Select(セレクト / プルダウンメニュー)
Separator(セパレーター)
Share Modal(シェアモーダル)
Sheet / Drawer(ドロワー / シート)
Sidebar / Side nav(サイドバー / サイドナビゲーション)
Slider(スライダー)
Spatial Canvas(スペーシャルキャンバス)
Spinner(スピナー)
Status Bar(ステータスバー)
Switch(スイッチ)
Table(テーブル / 表)
Tabs(タブ)
Textarea(テキストエリア)
Toast(トースト通知)
トグルボタンとは?意味とデザインの要点・スイッチとの違い
トグルグループとは?ラジオボタンとの違いと単一・複数選択
Tooltip(ツールチップ)
File Upload(ファイルアップロード)
Text Input(テキスト入力)
Progress Bar(プログレスバー)
Sort(ソート)
Search(検索)
Radio Button(ラジオボタン)
Filter(フィルター)
Dialog(ダイアログ / モーダル)
AI Chat UI(AIチャットUI)
Image / Media(画像・メディア)
Loading(ローディング)
Table of Contents(目次)対応なし
Dashboard Patterns(ダッシュボードパターン)対応なし
Density Patterns(密度パターン)対応なし
Editor Patterns(エディターパターン)対応なし
Responsive Patterns(レスポンシブパターン)対応なし
Bar Chart(棒グラフ)
Day Band(いちにちの帯)
Donut Chart(ドーナツチャート)
Gauge Chart(ゲージチャート)
Heatmap Chart(ヒートマップ)
Line Chart(折れ線グラフ)
Live Badge(LIVEの札)
Pie Chart(円グラフ)
Radar Chart(レーダーチャート)
Sparkline Chart(スパークライン)
Stacked Bar Chart(積み上げ棒グラフ)
Time Transport(時間の操作盤)

UIXHERO も GUNJO も、まだ育っている途中です。GUNJO には現在 208 個の部品があり、UIXHERO でまだ言語化していないものも多くあります。UIコンポーネントの章も、GUNJO の実装も、この対応もこれから増えていきます。