UIXHERO
群青

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

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

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

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

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

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

役割の分担

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

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

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

UIコンポーネント 69章と、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(通知センター)
ページネーションとは?UIの使い方・表示件数・無限スクロールとの違い
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(トースト通知)
トグルボタンとは?意味・使い方・Switch/Buttonとの違い
Toggle Group(トグルグループ)
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(棒グラフ)
Donut Chart(ドーナツチャート)
Gauge Chart(ゲージチャート)
Heatmap Chart(ヒートマップ)
Line Chart(折れ線グラフ)
Pie Chart(円グラフ)
Radar Chart(レーダーチャート)
Sparkline Chart(スパークライン)
Stacked Bar Chart(積み上げ棒グラフ)

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