トグルボタンとは?意味とデザインの要点・スイッチとの違い
トグルボタンとは、押すたびにオンとオフが切り替わり、押した状態が残るボタンです。トグルスイッチ・チェックボックス・通常のボタンとの違い、使う場面と使わない場面、押した状態の見せ方、画面読み上げソフトに状態を伝えるHTML属性(aria-pressed)の指定方法を解説します。
UX心理、UIデザイン原則、UIコンポーネント、リサーチ記事を横断して探せるUIXHEROのナレッジ一覧です。目的に合わせて絞り込みながら、設計や実装の判断材料を見つけられます。
トグルボタンとは、押すたびにオンとオフが切り替わり、押した状態が残るボタンです。トグルスイッチ・チェックボックス・通常のボタンとの違い、使う場面と使わない場面、押した状態の見せ方、画面読み上げソフトに状態を伝えるHTML属性(aria-pressed)の指定方法を解説します。
Undo Redoとは、操作を元に戻すUndo(アンドゥ)と、取り消した操作をもう一度実行するRedo(リドゥ)の組み合わせです。Cmd+Z・Ctrl+Zなどのショートカット、削除前の確認ダイアログの代わりにUndoを使う場面、UI設計のチェックリストを解説します。
Context Menuとは、右クリックや長押しで表示するコンテキスト依存のメニューUIです。contextmenuイベント、Dropdown Menuとの違い、ARIA menu、モバイル対応を解説します。
ページネーションとは、一覧や検索結果を一定の件数ごとにページに分け、ページ番号や「次へ」で移動できるようにするUIです。デザインで守るルール、1ページの表示件数、下へ送ると続きが読み込まれる無限スクロールや「もっと見る」ボタンとの違い、アクセシビリティ要件を解説します。
プログレッシブディスクロージャー(段階的開示)とは、必要な情報や操作を、必要になった時点で段階的に見せるUI設計の原則です。見出しを押すと中身が開くアコーディオンや、押すと追加の項目が出る「詳細設定」などのUI例、使う場面、隠してはいけない情報、フォームや設定画面での設計ルールを解説します。
Progressive Disclosure(段階的開示)とは、最初に基本情報だけを見せ、必要なタイミングで詳細を開示するUX設計手法です。認知負荷、情報の匂い、アコーディオンとの違いを解説します。
Skeuomorphism(スキューモーフィズム)とは、現実世界の形や質感をUIに取り入れる考え方。意味、具体例、フラットデザインとの違い、現代UIでの使いどころを解説します。
UXとは、ユーザーが製品やサービスを通じて得る体験全体のことです。本記事では、UIとの違い、UXデザインの考え方、なぜ重要なのかを初心者向けにわかりやすく解説します。
視覚的階層とは、デザインにおける情報の優先順位をサイズ・コントラスト・余白・配置で示す設計原則です。デザインの階層を作り、ユーザーの視線を主役からCTAへ誘導する方法を解説します。
バナーブラインドネス/banner blindnessの意味、広告のように見えるUIが無視される理由、重要なお知らせやCTAを見てもらうための配置・表現の対策を解説します。
テスラーの法則(Tesler's Law)とは、すべてのシステムには誰かが負担しなければならない「減らせない複雑さ」が存在するという複雑性保存の法則です。UXでユーザー負担を減らす判断軸を解説します。
Scannability(スキャンしやすさ)は、ユーザーがページを読まずに走査しても目的の情報へたどり着けるようにするUI設計原則。見出し、太字、リスト、余白、F字型パターンを使った改善方法を解説。