モダンWeb UI/UX & 高密度ワークスペース設計

高密度で無駄のないWebアプリケーション、ユーティリティダッシュボード、生産的なWebワークスペースをエンジニアリングするための包括的な運用ガイドです。

1. ゼロウェイストWeb哲学

生産的なWebアプリケーション（ツール、管理パネル、コミュニケーションリレー、開発者ダッシュボード）はランディングページではありません。ユーザーはタスクを実行するために訪れ、マーケティンググラフィックを鑑賞するために訪れるのではありません。

1.1 アンチヒーロールール

❌ アンチパターン: アプリ画面の上部に巨大な300pxの装飾的ヒーローバナー（「あなたの受信トレイへようこそ！」、浮遊する抽象イラスト、巨大なグラデーション背景）を配置し、実際のデータやインタラクティブなコントロールをスクロール以下に押しやる。
✔️ ゼロウェイストパターン: ログイン状態からマーケティングヒーローバナーを完全に排除する。代わりに、以下の要素を統合したコンパクトな56pxトップバーを使用する。
1. 控えめなブランドアイデンティティ/アイコン。
2. ライブシステムテレメトリまたはクォータメーター（例：ストレージピル: 14 MB / 2 GB）。
3. アクションモーダルトリガー（例：「デバイスをペアリング」）。
4. クイックテーマ切り替え（ダーク/ライト）。
5. 明確なローカルログアウトとセキュリティオプションを備えたコンパクトなユーザードロップダウン。

1.2 ビューポート最大化

100vhレイアウト: ルートビューポートの高さを固定し（height: 100vh; overflow: hidden;）、コンテンツリストと詳細インスペクター用に独立したスクロール可能なコンテナーを作成する。
スクロールバーゼロ: overflow-y: autoを内部のリストコンテナーにのみ適用し、二重スクロールバーを排除する。

2. Linearスタイルの高密度美学

Linear、Vercel、Raycastによって広められたデザインパラダイムに着想を得ています。

2.1 視覚的階層とトークン

控えめな1pxボーダー: 重いドロップシャドウは避け、細い1pxボーダー（border-border/40 または #1E293B）で構造を確立する。
深いスレート/黒曜石の背景: 純粋な黒（#000000）やくすんだグレーではなく、高コントラストで彩度の低い背景（#0B0F17 または #090D16）を使用する。
モノスペース表形数字: 日付、タイムスタンプ、ファイルサイズ、カウンターには必ず font-mono tabular-nums を適用し、数値がレイアウトのジッターなく垂直に揃うようにする。
コンパクトなスペーシンググリッド: 4px/8pxのリズムを標準化する。行のパディングは縦8px～10px、横12pxに設定し、視覚的に窮屈にならない範囲で最大の情報密度を実現する。

2.2 コマンドメニューパレット（`cmdk`パターン）

標準の検索バーに加えて、⌘K または Ctrl+K で起動するグローバルコマンドパレットを統合する。

グループ化されたアクション: ナビゲーション、作成、システム設定、アカウント操作。
アイテム、ファイル、ショートカットに対するインスタントファジー検索。
完全にアクセス可能なキーボードナビゲーション（ArrowDown、ArrowUp、Enter、Escape）。

3. 統合コンポーズハブパターン

アプリケーションがユーザーにさまざまな種類のデータ（テキストノート、URL、ドキュメントなど）の作成、アップロード、送信を許可する場合、エントリポイントをさまざまなページに散らばらせたり、下部に埋め込んだりしない。

+-------------------------------------------------------------+
| コンポーズハブ                                               |
| [ 📝 テキスト ]  [ 🔗 Webリンク ]  [ 📁 ファイルアップロード ] |
+-------------------------------------------------------------+
|                                                             |
|  アクティブフォーム / ドラッグ＆ドロップターゲットエリア       |
|  - メモ用のマルチラインテキストエリア                         |
|  - 自動検証付きのクリーンなURL入力                            |
|  - インスタントファイルステージングプレビュー付きドラッグゾーン |
|                                                             |
+-------------------------------------------------------------+
| 保持期間: [ 1日 ] [ 3日 ] [ 7日 ]             [ ボールトにドロップ ↵ ] |
+-------------------------------------------------------------+

効果的なコンポーズハブの主要要素:

セグメント化されたタブスイッチャー: フォームをリセットせずにインスタント切り替えができるクリーンなピルタブ。
ドラッグ＆ドロップゾーン: 視覚的なボーダーハイライト（border-dashed border-accent）とバイトサイズ検証を備えたネイティブHTML5ドラッグ＆ドロップ処理。
ライブ文字数・バイト数カウント: 実際のUTF-8バイト数をリアルタイムで計算する（例：124 bytes または 18.4 MB / 100 MB）。
ライフサイクル/保持期間コントロール: ユーザーが事前に有効期限を設定できるようにし、システムが一時的なアイテムを自動的にクリーンアップできるようにする。
キーボード送信: アクティブなテキスト入力から Ctrl + Enter（または Cmd + Enter）で送信。
高コントラストアクティブ状態（WCAG 1.4.11）:
- アクティブタブのコントラスト: ダークモードでは、アクティブタブがそのコンテナーに決して溶け込まないようにする（#0F172A のコンテナー上の #111827 は1.02:1にすぎない）。常に --card-elevated: #1E293B、明示的な1pxセマンティックボーダー（1px solid var(--accent)）、アクティブグローアウトライン（box-shadow: 0 0 0 1px var(--accent-glow)）、アクティブな着色アイコンでアクティブタブを強調する。
- フォームコントロールの境界線: ダークモードでの保持期間入力、ドロップダウンのシェブロン、セカンダリボタンは、暗い背景に対して3:1の非テキストコントラスト要件を満たすために、白の不透明度が18%以上（rgba(255, 255, 255, 0.18) または #334155）のボーダーを使用する必要がある。

4. 高密度マスターディテール（2ペーン）レイアウト

データ参照において、マスターディテールレイアウトはコンテキストを表示しつつ、詳細な検査を可能にする。

flowchart LR
    subgraph MasterPane["マスターペイン（左: 40% - 45%）"]
        SearchBar["インスタント検索バー（ホットキー: /）"]
        FilterChips["フィルターチップ: [すべて] [ファイル] [リンク] [テキスト]"]
        ListItems["仮想化/スクロール可能なアイテム行
        - タイプアイコン + タイトル
        - 送信デバイスバッジ
        - 相対タイムスタンプ
        - クイックスワイプ/アクション"]
    end

    subgraph DetailPane["詳細ペイン（右: 55% - 60%）"]
        DetailHeader["アイテムタイトル & タイプバッジ"]
        PreviewArea["ライブコンテンツプレビュー:
        - クリック可能なリンク
        - シンタックスハイライトされたテキスト
        - 画像/ドキュメントプレビュー"]
        ActionRow["プライマリアクション:
        [ リンクを開く ] [ テキストをコピー ] [ ファイルをダウンロード ] [ 削除 ]"]
    end

    MasterPane -->|"選択状態"| DetailPane

ベストプラクティス:

固定フィルター＆検索ヘッダー: 検索入力とフィルターチップは、アイテムリストがその下をスクロールしている間も固定されている必要がある。
空状態＆ゼロ結果状態: 明確な視覚状態を提供する。
- まだアイテムがない場合: "受信トレイは空です。上のコンポーズハブを使用して最初のアイテムをドロップしてください。"
- 検索結果がない場合: "'tax-return' に一致するアイテムはありません。[検索をクリア]"

5. キーボードナビゲーション & アクセシビリティ（a11y）

パワーユーザーはキーボードの流暢さを期待します。

ショートカット	アクション	実装
`/` または `⌘K`	検索入力をフォーカス	`document.addEventListener('keydown', ...)` と `input.focus()`
`Escape`	検索をクリア / アクティブモーダルを閉じる	最上位のモーダルを閉じるか、検索フィールドのフォーカスを外す
`Ctrl + Enter`	アクティブフォームを送信 / アイテムを送信	フォームの `onKeyDown` ハンドラー
`Tab` / `Shift + Tab`	論理的なDOMフォーカス順序	アクセス可能な `:focus-visible` リング（2pxの青いアウトライン）を適用

5.1 WCAG 2.2 AA / AAA 色コントラスト監査

未検証または低コントラストのデザイントークンでWebアプリケーションを出荷しない。

通常テキストのコントラスト（AA: 4.5:1以上、AAA: 7:1以上）:
- ライトモードのトラップ: #FFFFFF 上のスレート400（#94A3B8）は2.57:1（AAに不合格）。ライトモードのセカンダリテキストを少なくともスレート500（#64748B）まで暗くし、4.77:1にする。
- 警告/アンバーバッジのトラップ: #FFFFFF 上のアンバー600（#D97706）は3.22:1（AAに不合格）。テキストバッジはアンバー700（#B45309）まで暗くし、4.82:1にする。
- ダークモードのテキスト: text-primary（#F8FAFC、15.6:1 AAA）と text-secondary（#CBD5E1、11:1 AAA）が深いスレートカード上で楽に読めるようにする。
コンポーネントとボーダーのコントラスト（3:1以上、WCAG 1.4.11）:
- ダークモードのフォーム入力、検索フィールド、セグメントコントロールのボーダーは、隣接するコンテナーに対して3:1以上のコントラストを満たす必要がある。
- フォーカスインジケーターには高コントラストのプライマリリング（box-shadow: 0 0 0 2px var(--focus-ring)）を使用する。

6. 細粒度のセキュリティ & 認証UX

通常の日常的なユーザーアクションと高リスクのセキュリティアクションを混同しない。

6.1 ローカルログアウト vs. グローバル失効

サインアウト（ローカル）: 現在のブラウザ上でのみセッションCookieをクリアする。これはユーザーが共有コンピューターで行うルーチン操作である。
すべてのデバイスからサインアウト（グローバル）: 登録されているすべての電話、ラップトップ、ブラウザにわたって、すべてのアクティブなリフレッシュトークンとデバイスセッションを無効にする。
- 安全ルール: 「すべてのデバイスからサインアウト」を標準メニュー内のワンクリックボタンとして直接配置しない。必ず、明示的な確認ステップ（「本当によろしいですか？電話や他のデバイスが切断されます。」）を備えた専用モーダルの背後にゲートする。

6.2 デバイスペアリングUX

軽量なダイアログでペアリング用QRコードを表示する。
- 高コントラストのSVG QRコード。
- リアルタイムカウントダウンタイマー（例：「残り時間 09:42」）。
- カメラが動作しないデバイス向けに、ワンクリックコピーボタン付きのフォールバックテキストシークレット。

7. 参考オープンソースリポジトリ

これらの業界をリードするリポジトリを、デザイン、トークン構造、実装のインスピレーションとして調査する。

shadcn/ui: Radix UI と Tailwind CSS を組み合わせた、スタイルなしでアクセス可能なコンポーネントプリミティブ。モダンな高密度デフォルトを提供。
pacocoursey/cmdk: Linear、Vercel、Raycast で使用されている、アクセス可能なコマンドメニューコンポーネントのゴールドスタンダード。
henrikzabel/linearlike: Linear の美学を採用したプロダクショングレードのWebアプリケーションの厳選インデックス。
ln-dev7/circle: 高密度テーブルとサイドバーナビゲーションを実証する、Linear にインスパイアされたオープンソースの課題トラッカー。
calcom/cal.com: クリーンなマルチペイン設定、細粒度のダイアログ、インスタントナビゲーションを備えたエンタープライズグレードのReactワークスペースレイアウト。

axewhyzed/agentic-skills

agentic-skills とは？

お気に入りのAIに質問する

ドキュメント