フィッツの法則(Fitts's Law)とは、押したい場所が大きいほど、また指やカーソルの今の位置から近いほど、そこへ速く届くという法則です。押すと反応する領域(タッチターゲット)の大きさ、カーソルが止まる画面の端にボタンを置く理由、片手持ちのスマホで親指が届く位置、選択肢の数を扱うヒックの法則との違いを具体例で解説します。
記事タグ: フィッツの法則 / UX心理学 / 人間工学 / タッチターゲット / UIデザイン
プライミング効果とは、先に見聞きした言葉や画像が、その後の判断や行動に無意識の影響を与える心理現象です。ECサイトやWebサービスの画面での具体例、アンカリング効果・サブリミナル効果との違い、UI設計で使うときの注意点を解説します。
記事タグ: プライミング効果 / UX心理学 / 認知バイアス / 行動誘導 / UIデザイン
UIデザインの設計プロセスを6ステップで体系化。「なぜそのUIか」を説明できるようになるUX心理→UI原則→UIコンポーネントの思考順序と実践フレームワーク。
記事タグ: UI設計プロセス / UIデザイン / UXデザイン / 設計思想 / UIデザイン原則
Button・Modal・Toast・Sidebarなど、UIコンポーネント72記事を9カテゴリで体系化。各コンポーネントの設計判断・状態設計・アクセシビリティをまとめたハブページ。
記事タグ: UIコンポーネント / UIデザイン / コンポーネント設計 / アクセシビリティ
UI原則、UI設計原則、UXデザインの法則をWhy→What→Howで体系化。UX心理・UI原則・UIコンポーネントをつなげて学ぶUIXHEROの総合入口ガイド。
記事タグ: UIデザイン / UXデザイン / UIデザイン原則 / UIコンポーネント / UX心理
UIデザインの原則とは、UI設計で迷ったときに繰り返し使える判断の基準です。視覚設計・認知設計・操作と対話・情報構造・アクセシビリティなど8つのカテゴリで65の原則を一覧にし、各原則がどのUIコンポーネント(ボタンやフォームなど)に当てはまるかの早見表もまとめています。
記事タグ: UIデザイン原則 / UIデザイン / 視覚的階層 / 認知設計 / アクセシビリティ
UX心理学とは、心理学・認知科学・行動経済学の知見をUIやWebデザインの判断に使う考え方です。119の心理法則と認知バイアスを7つのカテゴリに分けて一覧にしています。あわせて、情報量・選択肢の数・目に入る順番・操作への反応の4つの観点から、ランディングページやフォームでの活かし方を解説します。
記事タグ: UX心理 / 認知負荷 / UXデザイン / UIデザイン / 行動心理学
見出しをクリックすると対応するコンテンツを展開・折りたたむUIコンポーネント。FAQ・設定セクション・段階的開示に使われ、単一展開と複数展開の使い分け・ARIA disclosure/accordion パターンの実装を解説する。
コンポーネントタグ: ui-components / accordion
AIアシスタントとの対話インターフェース。メッセージバブル・ストリーミング表示・ロール別スタイリング・入力欄・スケルトンローディング・エラー状態の設計パターンを解説する。
コンポーネントタグ: ui-components / ai-chat-ui
重要な情報・警告・エラー・成功をインラインで伝えるUIコンポーネント。Toastとの使い分け・4種類のセマンティック(info/success/warning/error)・role=alertとaria-liveの実装を解説する。
コンポーネントタグ: ui-components / alert
日付の選択・予定の表示・期間の選択を行う高度な複合UIコンポーネント。Date Picker・Event Calendar・Date Range Pickerの3種類の使い分け・キーボードナビゲーション・aria-labelの実装を解説する。
コンポーネントタグ: ui-components / calendar
複数のコンテンツアイテムを横スクロールまたはスライドで切り替える複合UIコンポーネント。自動再生・手動ナビゲーション・インジケーター・レスポンシブ対応・アクセシビリティ(aria-roledescription・aria-live)の設計を解説する。
コンポーネントタグ: ui-components / carousel