UX心理、UIデザイン原則、UIコンポーネント、リサーチ記事を横断して探せるUIXHEROのナレッジ一覧です。目的に合わせて絞り込みながら、設計や実装の判断材料を見つけられます。
JIS X 8341-3:2016 の対応の段階としてサイトに書ける「準拠」「一部準拠」「配慮」は、どれもウェブアクセシビリティ方針の公開が条件です。自社サイトの状態に合わせて次に何を頼めばよいか、試験・点検・方針の作成・手直しの違い、見積もりの比べ方をまとめます。
画面を公開する前に見るデザインQAの確認項目を、8分野のチェックリストにして、合格ラインの数字の出典つきで示します。分野は余白・文字・押せるもの・色とコントラスト・配置と揃え・状態の表示・入力・画像です。デザインQA（Design QA）は、実装された画面が設計どおりに見えるか、使う人が迷わず操作できるかを公開前に確かめる工程で、動くかを見るQAテストとは別に行います。
1日を1本の帯にして、時間帯を面で、節目を印で、いまの時刻とつまみを重ねて見せるUIコンポーネント。器が1日に固定されることの意味、4つの層の重ね方、印のラベルと時刻の数字を分ける理由、触った瞬間に動かさない理由を解説する。
隣の数字がいまの値かどうかを示す小さな札。状態を表す語を枠で囲って独立させる理由、明滅と色を補助に留める理由、実時間から外れたときに「古い」ではなく「いつの値か」を出す設計判断とARIA実装を解説する。
いま映している時刻を、名前をつけた速さの段で動かし、決まった幅で飛ばし、ひと押しで「いま」へ戻すための操作盤。速さを連続値にしない理由、向きをアイコンに持たせる理由、状態を大きい表示の色で示さない理由を解説する。
AIに画面を作らせると、すでに手元にあるものが見つけてもらえず、作り直されることがあります。予備知識ゼロのAIに175画面を組ませた記録では、それが起きるかどうかは、AIの能力よりも「説明がどこに書いてあるか」に強く出ていました。同じコンポーネントの説明文を直す前と後を、実際の文面と語数で並べます。自分のコードベースで確かめる手順も付けました。
2026年9月2日、消費者庁の検討会に、ダークパターンを「表示・UI」の問題として扱う中間取りまとめ案が出ました。まだ案の段階です。悪意なく作った画面のどこが見られるのかを、一次資料に沿って整理します。
カテゴリごとの量を棒の長さで比べるチャート。ゼロ基線の扱い、並び順、縦横の選び方、しきい値の見せ方という設計判断と、色だけに頼らないアクセシビリティ要件を解説する。
中央をくり抜いた円で構成比を示すチャート。中央に置く値の選び方、円グラフとの使い分け、リングの太さ、凡例の作りという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。
1つの値を範囲の中に置いて示す半円のチャート。範囲の両端に意味があるかという条件、しきい値の帯の設計、色だけで良否を伝えない書き方という設計判断とアクセシビリティ要件を解説する。
行と列の交点をセルの濃淡で示すチャート。濃淡で読めるものと読めないもの、色の段階の切り方、行列の並び順、値を数字でも出す判断とアクセシビリティ要件を解説する。
時間に沿った値の動きを線で示すチャート。点をつないでよいデータの条件、縦軸を切るときの書き方、系列数の上限、直接ラベルという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。