Separator（セパレーター）
10分で読める
コンテンツ間の論理的・視覚的な区切りを表現するUIコンポーネント。水平線・余白・色の違いなど実装手段の選択基準と、装飾と意味論的区切りの使い分けを解説する。
コンポーネントタグ: ui-components / separator
記事一覧
UX心理、UIデザイン原則、UIコンポーネント、リサーチ記事を横断して探せるUIXHEROのナレッジ一覧です。目的に合わせて絞り込みながら、設計や実装の判断材料を見つけられます。
UX心理、UIデザイン原則、UIコンポーネント、リサーチ記事を横断して探せるUIXHEROのナレッジ一覧です。目的に合わせて絞り込みながら、設計や実装の判断材料を見つけられます。
コンテンツ間の論理的・視覚的な区切りを表現するUIコンポーネント。水平線・余白・色の違いなど実装手段の選択基準と、装飾と意味論的区切りの使い分けを解説する。
長いページ内のセクション構造を可視化し、読者が任意の場所へジャンプできるナビゲーションUI。スクロール連動・アクティブ追跡・スムーズスクロールの設計基準を解説する。
画面左端に縦並びするアイコン主体のナビゲーション。Sidebarより薄く、Bottom navより画面を広く使えるモバイル〜タブレット向けの省スペースナビゲーションコンポーネント。
現在地と階層構造を同時に伝えるナビゲーション補助コンポーネント。ユーザーが「今どこにいるか」と「どこから来たか」を一目で把握できる設計基準。
ファイル選択・ドラッグ&ドロップ・進捗表示・エラーハンドリングを統合したコンポーネント。ユーザーが「今どの状態にあるか」を常に把握できる設計が品質の核心。
アプリ上部に横並びするトップレベルメニュー。ファイル・編集・表示などの機能カテゴリをクリックでドロップダウン展開するデスクトップアプリ型ナビゲーションコンポーネント。
画面左端に固定された垂直ナビゲーション。階層の深いアプリや管理画面で「常に全メニューを見せる」ことでユーザーの現在地把握とページ間移動を支援するコンポーネント。
連続した数値の範囲を直感的に選択させるコンポーネント。正確な値入力より「だいたいこの辺」という曖昧さを許容する場面でのみ使う。
ON/OFFを即座にシステムへ反映させる設定コンポーネント。操作した瞬間に副作用が発生するため、確認なしに取り返せない設定には使用しない。
複数行の自由テキストを入力させるコンポーネント。1行のText Inputとの使い分け、自動リサイズ設計、バリデーションとアクセシビリティの基準。
不可逆なアクション（削除・リセットなど）の実行前に、ユーザーに重大な結果を警告し最終確認を求めるダイアログ。
UIで最も重要なインタラクション要素であるボタンの、機能（階層）、状態、配置を一貫させるための設計基準。