シンプル表示
ツールチップやバッジなど、情報を補足・強調して表示するシンプルなUIコンポーネントの比較
このページでわかること
- バッジ・モーダル・ツールチップ・トースト通知・スケルトン・マーキー・コードブロックなど、補助的に情報を表示するUIの違いと使い分け
- Mantine・Ant Design・shadcn/ui・Chakra UI・MUI の各実装比較
- 表示タイミング・寿命・ユーザー操作の必要性による選定基準
- ポータル・スタッキングコンテキスト・アクセシビリティの実装ポイント
シンプル表示UIとは
シンプル表示UIは、主要コンテンツを補助する形で情報や状態を伝える小さなUI群。バッジで状態を示し、ツールチップで補足説明を出し、モーダルで重要な選択を促し、トーストで処理結果を通知する、というように、適切なタイミングで適切な情報を控えめに伝える役割を持つ。
設計のポイントは「ユーザーの操作を妨げない」こと。常時表示・ホバーで表示・自動消滅・閉じるまで残る、など寿命と表示条件の組み合わせが多様で、用途に応じた選択が必要。
本ページでは、React で使われる代表的なシンプル表示UIを取り上げ、ライブラリごとの実装と特性を比較する。
目的別の選び方
| UI種類 | 表示トリガー | 寿命 | 主な用途 |
|---|---|---|---|
| バッジ | 常時 | 永続 | 件数・状態（新着・未読） |
| ツールチップ | ホバー/フォーカス | 操作中のみ | 補足説明 |
| モーダル | ユーザー操作 | 閉じるまで | 重要な選択・詳細編集 |
| トースト通知 | 処理完了 | 数秒で自動消滅 | 成功・エラー通知 |
| スケルトン | ロード中 | データ取得まで | プレースホルダ |
| マーキー | 常時 | 永続 | お知らせ・情報の流し |
| コードブロック | 常時 | 永続 | コード表示・コピー |
ツールチップ（Tooltip）
詳細を見る →ホバー・フォーカス時に補足情報を表示するツールチップUIの実装比較。表示位置・遅延・色・矢印・複数行など実践的なオプションをインタラクティブに確認
通知・トースト（Notification / Toast）
詳細を見る →操作結果・エラー・お知らせを伝えるオーバーレイUIの実装比較。表示位置・タイプ別スタイル・自動消去・プログレスバー・ローディング更新をインタラクティブに確認
モーダル・ダイアログ（Modal / Dialog）
詳細を見る →確認・フォーム・アラートなど、ユーザーの注意を引きつけるオーバーレイUIの実装比較。サイズ・アニメーション・Escape キー・確認ダイアログをインタラクティブに確認
このアイテムを削除しますか？
この操作は元に戻せません。
バッジ・タグ（Badge / Tag）
詳細を見る →通知数・ステータス・ラベルを視覚的に表現するUIの実装比較。カウントバッジ・ステータスドット・Ribbon・閉じるタグ・選択可能タグをインタラクティブに確認
スケルトンスクリーン（Skeleton）
詳細を見る →データの読み込み中にコンテンツの形を仮表示するローディングUIの実装比較。基本・複数行・カード型・アバター+テキスト・ロード完了切り替えをインタラクティブに確認
マーキー（Marquee）
詳細を見る →無限横スクロールを実現するマーキーUIの実装比較。Mantine・react-fast-marquee・CSSのみの3パターンをホバー停止・グラデーション・逆方向スクロールの観点でインタラクティブに確認
コードブロック（Code Block）
詳細を見る →シンタックスハイライト付きコードブロックの実装比較。Shiki・Prism.js・highlight.js・プレーンHTMLの4アプローチをSSR対応・バンドルサイズ・ハイライト品質の観点で比較
実装の落とし穴
- ポータルとz-index: モーダル・ツールチップは
Portalで<body>に描画されることが多い。親のoverflow: hiddenやtransformに影響されず重ねられる反面、z-index競合は別途管理が必要 - アクセシビリティ: モーダルは
role="dialog"+aria-modal="true"+ フォーカストラップ必須。ツールチップはaria-describedbyで関連付ける - トーストの連続発火: 同じトーストが何度も出るバグを防ぐため、ID指定で重複抑制する仕組みが多くのライブラリにある
- スケルトンとレイアウトシフト: スケルトンのサイズが実コンテンツと異なるとCLS（Cumulative Layout Shift）が悪化。実寸に近い高さ・幅で表示する
- マーキーのa11y: 動き続けるテキストはスクリーンリーダーで読まれにくい・
prefers-reduced-motion対応も検討する
よくある質問
トーストとアラートの違いは？
トーストは画面の端に短時間表示して自動で消える非ブロッキングな通知。アラート（または重要なバナー）はページ内に常時表示される注意喚起で、ユーザーが認知するまで残ることが多い。重要度と緊急性で使い分ける。
モーダルとドロワーの違いは？
モーダルは画面中央に重ねて表示し、背後をブロックする。ドロワーは画面端からスライドして開き、サイドバー的に使う。長文や複数ステップの入力はドロワー、確認や短い編集はモーダル、という使い分けが定番。
ツールチップが表示されない/位置がずれる
親要素の overflow: hidden や transform で切れているか、Portal 経由でないライブラリ実装が原因のことが多い。ライブラリの Portal オプションを有効にするか、shadcn/ui のように Radix UI 基盤で Portal 標準対応のものを選ぶ。
コードブロックは Shiki と Prism どちらが良い？
SSR でハイライト済みHTMLを返したい場合は Shiki（VS Code 同等の品質、サーバーサイド動作）。クライアントサイドで動的にハイライトしたい場合は Prism や highlight.js。SEO・初期表示速度・テーマの一貫性なら Shiki が優位。
Zenn