UX心理、UIデザイン原則、UIコンポーネント、リサーチ記事を横断して探せるUIXHEROのナレッジ一覧です。目的に合わせて絞り込みながら、設計や実装の判断材料を見つけられます。
処理中であることをユーザーに伝えるUIパターン全体の設計指針。Spinner・Skeleton・Progress Barの使い分け・知覚的な待機時間の最適化・aria-busyとaria-liveの実装を解説する。
アプリ内の通知を一覧・管理するUIコンポーネント。Toast・Alertとの使い分け・未読バッジ・既読管理・グループ化・通知設定への導線の設計を解説する。
トリガー要素をクリックすると展開するフローティングパネルUIコンポーネント。TooltipとModalの間を埋める存在として、インタラクティブなコンテンツ（フォーム・リンク・設定）を小さなパネルで提供する設計を解説する。
処理の進捗率を横棒グラフで視覚的に伝えるUIコンポーネント。Spinnerとの使い分け・不定時間進捗（Indeterminate）の設計・role=progressbarとaria-valuenowの実装を解説する。
ユーザーがドラッグ操作でパネルの幅・高さを自由に変更できるUIコンポーネント。分割ペイン・サイドバー幅の調整・エディタースプリッターの設計・最小・最大サイズの制約・アクセシビリティを解説する。
画面サイズに応じてUIレイアウトを適応させる設計パターン集。ナビゲーションの変形・グリッドの折り畳み・コンポーネントの切り替えなど、モバイル・タブレット・デスクトップでの代表的な対応パターンとブレークポイント設計を解説する。
コンテンツエリアの右側に配置する補助的なサイドカラム。関連リンク・広告・目次・ウィジェットなどを収容する設計・スティッキー配置・レスポンシブでの折り畳み・コンテンツとの優先順位付けを解説する。
コンテンツのオーバーフローをスクロールで制御するUIコンポーネント。ネイティブスクロールバーとカスタムスクロールバーの使い分け・スクロール位置の保持・overflow設計・アクセシビリティを解説する。
コンテンツのURL・アクセス権・共有先を設定・送信するためのモーダルダイアログ。リンクコピー・メール招待・権限設定・SNSシェアの設計パターンと、アクセシビリティ（フォーカストラップ・aria-modal）を解説する。
無限の2D空間でノード・カード・図形を自由に配置・接続・拡大縮小するインタラクティブキャンバスUI。Figma・Miro・Excalidraw・React Flowのようなホワイトボード・フロービルダーのパン・ズーム・ノードドラッグ・コネクター線の設計パターンを解説する。
処理中・読み込み中を回転アニメーションで伝えるUIコンポーネント。Skeletonとの使い分け・遅延表示（点滅防止）・サイズと配色の設計・role=statusとaria-labelの実装を解説する。
システムやコンテンツの現在の状態を画面の固定位置に常時表示するUIコンポーネント。接続状態・保存状態・選択件数・処理進行状況などをコンパクトに伝える設計とARIA実装を解説する。