#ui-components

Floating Panel(フローティングパネル)

画面上に浮かんだ状態で表示し続けるパネルUIコンポーネント。ユーザーがドラッグで位置を変えたり、折りたたんだりできる永続的なフローティングUIの設計・実装を解説する。

2026年3月3日
約20分

Hover Card(ホバーカード)

リンクやアバターにホバーした時にユーザー情報・記事プレビュー・リポジトリ情報などをリッチなカード形式で表示するUIコンポーネント。TooltipとPopoverとの使い分け・ホバー遅延・キーボードアクセシビリティの設計を解説する。

2026年3月3日
約15分

Inspector Panel(インスペクターパネル)

選択したオブジェクト・要素のプロパティを表示・編集するサイドパネル。Figma・VS Code・DAWなどのプロ向けツールで使われるプロパティエディターのレイアウト・フィールドグループ化・リアルタイム更新・キーボード操作の設計を解説する。

2026年3月3日
約15分

Loading(ローディング)

処理中であることをユーザーに伝えるUIパターン全体の設計指針。Spinner・Skeleton・Progress Barの使い分け・知覚的な待機時間の最適化・aria-busyとaria-liveの実装を解説する。

2026年3月3日
約14分

Notification Center(通知センター)

アプリ内の通知を一覧・管理するUIコンポーネント。Toast・Alertとの使い分け・未読バッジ・既読管理・グループ化・通知設定への導線の設計を解説する。

2026年3月3日
約13分

Popover(ポップオーバー)

トリガー要素をクリックすると展開するフローティングパネルUIコンポーネント。TooltipとModalの間を埋める存在として、インタラクティブなコンテンツ(フォーム・リンク・設定)を小さなパネルで提供する設計を解説する。

2026年3月3日
約15分

Progress Bar(プログレスバー)

処理の進捗率を横棒グラフで視覚的に伝えるUIコンポーネント。Spinnerとの使い分け・不定時間進捗(Indeterminate)の設計・role=progressbarとaria-valuenowの実装を解説する。

2026年3月3日
約12分

Resizable(リサイザブル)

ユーザーがドラッグ操作でパネルの幅・高さを自由に変更できるUIコンポーネント。分割ペイン・サイドバー幅の調整・エディタースプリッターの設計・最小・最大サイズの制約・アクセシビリティを解説する。

2026年3月3日
約12分

Responsive Patterns(レスポンシブパターン)

画面サイズに応じてUIレイアウトを適応させる設計パターン集。ナビゲーションの変形・グリッドの折り畳み・コンポーネントの切り替えなど、モバイル・タブレット・デスクトップでの代表的な対応パターンとブレークポイント設計を解説する。

2026年3月3日
約16分

Right Rail(ライトレール)

コンテンツエリアの右側に配置する補助的なサイドカラム。関連リンク・広告・目次・ウィジェットなどを収容する設計・スティッキー配置・レスポンシブでの折り畳み・コンテンツとの優先順位付けを解説する。

2026年3月3日
約10分

Scroll Area(スクロールエリア)

コンテンツのオーバーフローをスクロールで制御するUIコンポーネント。ネイティブスクロールバーとカスタムスクロールバーの使い分け・スクロール位置の保持・overflow設計・アクセシビリティを解説する。

2026年3月3日
約13分

Share Modal(シェアモーダル)

コンテンツのURL・アクセス権・共有先を設定・送信するためのモーダルダイアログ。リンクコピー・メール招待・権限設定・SNSシェアの設計パターンと、アクセシビリティ(フォーカストラップ・aria-modal)を解説する。

2026年3月3日
約12分
#ui-components | Blog | UIXHERO