Bar Chart（棒グラフ）
カテゴリごとの量を棒の長さで比べるチャート。ゼロ基線の扱い、並び順、縦横の選び方、しきい値の見せ方という設計判断と、色だけに頼らないアクセシビリティ要件を解説する。
記事アーカイブ
公開時期ごとに、記事を振り返れるアーカイブです。
年月ごとに整理しているので、その時期に追加されたテーマの流れや広がりを追いながら読めます。
カテゴリやタグ、概要を手がかりに、気になる記事からたどってみてください。
全408件の記事
2026年08月に公開した記事
Donut Chart（ドーナツチャート）
中央をくり抜いた円で構成比を示すチャート。中央に置く値の選び方、円グラフとの使い分け、リングの太さ、凡例の作りという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。
Gauge Chart（ゲージチャート）
1つの値を範囲の中に置いて示す半円のチャート。範囲の両端に意味があるかという条件、しきい値の帯の設計、色だけで良否を伝えない書き方という設計判断とアクセシビリティ要件を解説する。
Heatmap Chart（ヒートマップ）
行と列の交点をセルの濃淡で示すチャート。濃淡で読めるものと読めないもの、色の段階の切り方、行列の並び順、値を数字でも出す判断とアクセシビリティ要件を解説する。
Line Chart（折れ線グラフ）
時間に沿った値の動きを線で示すチャート。点をつないでよいデータの条件、縦軸を切るときの書き方、系列数の上限、直接ラベルという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。
Pie Chart（円グラフ）
全体に対する構成比を扇形で示すチャート。合計が意味を持つ条件、区分数の上限、並び順、値をどこに書くかという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。
Radar Chart（レーダーチャート）
複数の軸のスコアを多角形で示すチャート。軸の順序で形が変わるという性質、正規化の根拠、重ねられる系列数、面積を読ませない書き方という設計判断とアクセシビリティ要件を解説する。
Sparkline Chart（スパークライン）
軸も目盛りも持たない小さな傾向線。数字と並べて置く理由、複数を並べるときに縦軸をそろえる必要、期間の明示という設計判断とアクセシビリティ要件を解説する。
Stacked Bar Chart（積み上げ棒グラフ）
グループごとの内訳を積み上げて比べるチャート。正確に読めるのは最下段と合計だけという制約、系列の順序、100パーセント正規化の使いどころという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。
AIを使いこなすとは、プロンプトの話ではなかった｜1つの会話に全部やらせるのをやめて、5つの役に分ける
AIに仕事を頼むとき、指示も生成も確認も直しも、1つの会話の中でやっていませんか。私たちは記事や翻訳や図を作る13種類の仕事の流れを、人・司令AI・生成AI・照合プログラム・文脈ゼロのAI（事情を何も知らないAI）の5つの役に分けて回しています。いちばん効いているのは、その文脈ゼロのAIに検品させる段でした。この記事自身を例に、5役の流れと、明日から1つの会話を分ける手順をまとめます。
予備知識ゼロのAIに170画面組ませたら、デザインシステムに26個のコンポーネントが加わった
群青を一度も見たことのない予備知識ゼロのAIに、公開ドキュメントとnpmだけを渡して実業種の画面を170枚組ませた記録の総集編です。3回手組みされたものだけを作るという運用で26のコンポーネントが加わるまでと、その過程で見えた5つの法則をまとめます。
AIを「忖度しない検査役」にする方法論 — 手組みの跡は、足りないコンポーネントの地図
AIにUIを作らせるのではなく、AIに「何が作れなかったか」を書かせる方法論です。予備知識ゼロのAIの「無い」が強い証拠になる理由、手組みの跡を次に作るコンポーネントの仕様として読む手順、AIが正直に書ける環境の作り方をまとめます。
「作るべき理由」には強さの段階がある — なぜ『HTML構造上つくれない』が最強か
そのコンポーネントを作るべきかの判断根拠は、弱・中・強の3段に分かれます。最も強いのは「既存のコンポーネントではHTML構造上つくれない」です。書類ダウンロード行を例に、拡張で足りる場合と新設しかない場合の線を引きます。
「ユースケース別の対応表」の落とし穴 — 予備知識ゼロのAIが誤誘導された6パターン
やりたいことからコンポーネントを引く一覧は、間違った先へ誘導すると、載せないより危険です。予備知識ゼロのAIに170画面を組ませて見つかった誤誘導を6つのパターンに整理し、対応表の質を測る4つの軸（型・アクセシビリティ・形・扱う対象）を示します。
3回確認で生まれたコンポーネントたち — 26の新コンポーネントはどう群青に加わったか
3つの別々の画面で独立に手組みされたら初めて作る、という運用を170画面続けて群青に加わった26のコンポーネントを、8つのグループに束ねて紹介します。どの3画面が根拠になったかを、画面の番号つきで辿れます。
作ってから再発見までの距離が縮む — コンポーネントの蓄積が育つとはこういうことだった
デザインシステムが育ったかどうかは、作ったコンポーネントが次に自力で見つかるまでのラウンド数で測れます。170画面のコールドテストで、この距離は初期の17から終盤の1〜2まで縮みました。距離を縮める3つの仕組みも並べます。
「完走」の定義が変わった — 運輸5モードを、事業者向けと利用者向けの両面で走り切った記録
鉄道・航空・バス・タクシー・トラックの5モードを、事業者向けと利用者向けの両面で60画面以上走り切った記録です。利用者向けを1枚で締めかけた失敗から、完走の定義を「両面が同じ厚みになったとき」に引き直すまでを書きます。
AIが作った画面で、実際に起きた29の失敗
自分たちがAIに作らせた業務画面175枚を検品し、実際に起きた失敗を29個並べました。すべて画面の番号つきです。動く画面が出てくることと、出してよいことは別です。各項目に、手元の画面で確かめるための目安を1行添えています。
アクセシビリティ診断はどこに頼めばいいか — 頼めるもの4種類と、試験だけでは「準拠」を名乗れない理由
「アクセシビリティ診断」で頼めるものは、JISの様式で試験結果を出す試験、様式を取らない点検、方針の策定、実装の手直しの4つに分かれます。それぞれの向く場面、頼む前に決めておくこと、見積もりが何で動くか、そして試験を受けただけでは「準拠」も「一部準拠」も名乗れない理由をまとめます。
デザインシステムの構築を外注するとき — 頼めるもの3層と、いちばん多い失敗
デザインシステムの構築を外注すると、いちばん多い失敗は「作ってもらったが使われない」です。頼めるものを方針・実装・運用の3層に分け、それぞれが向く場面、頼む前に決めておくこと、見積もりが何で動くか、そして外注では買えないものをまとめます。既製のものを使う選択肢も並べます。
ユーザビリティテストはどこに依頼すればいいか — 依頼先5種類の向き不向きと、頼む前に決めておくこと
ユーザビリティテストの依頼先には、UXリサーチの専門会社、作った制作会社、フリーランス、セルフサービスのツール、人を呼ばない専門家レビューの5つがあります。それぞれが向く場面と向かない場面、頼む前に用意しておくもの、見積もりが何で動くか、外注では買えないものをまとめます。
UX診断・UIレビューを外部に頼むと、何が返ってくるか — 依頼する前に確認する5つのこと
「UX診断」「UIレビュー」という名前で売られているものは、会社によって中身が違います。返ってくるものは指摘の一覧なのか、改善案なのか、画面の作り直し案なのか。依頼する前に確認することと、届いた報告書が使えるかどうかの見分け方をまとめます。
UI検品の観点「Action（行動）」とは — 押す前に結果が分かるかを確かめる3つの手順
Actionは、UI検品で使う6つの観点のうちの3つめです。主な行動が1つに定まっているか、入力が最小限で済むか、押した結果が予測できるかを見ます。AIが作った1画面を材料に、Actionが何を見る観点なのかと、自分の画面で確かめる3つの手順をまとめます。
UI検品の観点「Feasibility（実装性）」とは — 型が通っても画面が出ないことを確かめる3つの手順
Feasibilityは、UI検品で使う6つの観点のうちの6つめです。文字量が増えても崩れないか、狭い画面でも成立するか、運用しても一貫性が保てるかを見ます。静止画では判定しきれないため点を付けません。AIが作った1画面では、型チェックが緑でコンソールも静かなのに画面が出ませんでした。
UI検品の観点「Flow（導線）」とは — 自分の画面で迷わないかを確かめる3つの手順
Flowは、UI検品で使う6つの観点のうちの2つめです。前の画面からの流れがつながっているか、次の一歩が見つかるか、戻る・やり直すができるかを見ます。AIが作った1画面を材料に、Flowが何を見る観点なのかと、自分の画面で確かめる3つの手順をまとめます。
UI検品の観点「Friction（摩擦）」とは — 詰まらずに最後まで進めるかを確かめる3つの手順
Frictionは、UI検品で使う6つの観点のうちの5つめです。目的までのステップが必要なものだけか、一度に受け止められる量に収まっているか、エラーや空の状態に手当てがあるかを見ます。AIが作った1画面を材料に、Frictionが何を見る観点なのかと、自分の画面で確かめる3つの手順をまとめます。
UI検品の観点「Trust（信頼）」とは — 画面の数字が信じられるかを確かめる3つの手順
Trustは、UI検品で使う6つの観点のうちの4つめです。主張に根拠が添えてあるか、お金や個人情報に安心材料があるか、表記が事実と釣り合って一貫しているかを見ます。AIが作った1画面を材料に、Trustが何を見る観点なのかと、自分の画面で確かめる3つの手順をまとめます。
AIが作った画面は、出していいのか｜文脈ゼロのAIに175画面つくらせて分かったこと
生成AIにUIを作らせると、動く画面はかなりの確率で出てきます。では出していいかどうかは何で判断するのか。文脈ゼロのAIにデザインシステムだけで175画面を組ませた記録から、満点の回と最低点の回で何が違ったのかを、実際の画面を並べて確かめます。
UI検品の観点「Clarity（明瞭さ）」とは — 自分の画面が分かりにくいかを確かめる3つの手順
Clarityは、UI検品で使う6つの観点のうちの1つです。「何の画面か」「いちばん大事な情報はどれか」「次に何をすればいいか」が画面から読み取れるかを見ます。AIが作った1画面を材料に、Clarityが何を見る観点なのかと、自分の画面で確かめる3つの手順をまとめます。
AIが作った施工写真台帳を、出す前に検品した — UI裁判 第1回
AI生成UIの検品を、公開された物差しで1画面ずつ行う連載「UI裁判」の第1回。デザインシステム群青のコールドテスト#175「施工写真台帳」を6観点で測り、要再構築の判定に至るまでの筋道をそのまま公開します。
2026年03月に公開した記事
Context Menuとは？contextmenuイベントとUI設計の使い方
Context Menuとは、右クリックや長押しで表示するコンテキスト依存のメニューUIです。contextmenuイベント、Dropdown Menuとの違い、ARIA menu、モバイル対応を解説します。
UXとは？UIとの違い・UXデザインの基本をわかりやすく解説
UXとは、ユーザーが製品やサービスを通じて得る体験全体のことです。本記事では、UIとの違い、UXデザインの考え方、なぜ重要なのかを初心者向けにわかりやすく解説します。
アクセシビリティとインクルーシブデザインの違いとは？目標と手段の正しい関係
「アクセシビリティ」と「インクルーシブデザイン」は混同されやすい概念です。本記事では、両者の決定的な違いと、デザインプロセスでの正しい関係性を解説します。
一貫性と標準の違いとは？UIデザインにおける2つの「揃える」を区別する
「一貫性」と「標準」は混同されやすい概念です。本記事では、ニールセンのヒューリスティクスにおける決定的な違いと、デザイン判断での正しい使い分けを解説します。
フィードバックとフィードフォワードの違いとは？UIにおける「事後」と「事前」の設計
「フィードバック」と「フィードフォワード」は混同されやすい概念です。本記事では、UIデザインにおける決定的な違いと、ユーザーの行動を支援する正しい設計方法を解説します。
ヒューリスティクスとガイドラインの違いとは？UI評価における正しい使い分け
「ヒューリスティクス」と「ガイドライン」は混同されやすい概念です。本記事では、UI評価・設計における決定的な違いと、実務での正しい使い分けを解説します。
情報アーキテクチャとナビゲーションの違いとは？設計と実装の正しい関係
「情報アーキテクチャ（IA）」と「ナビゲーション」は混同されやすい概念です。本記事では、UIデザインにおける決定的な違いと、構造設計から画面実装への正しい流れを解説します。
メンタルモデルと概念モデルの違いとは？UIデザインにおける「ズレ」の正体
「メンタルモデル」と「概念モデル」は混同されやすい概念です。本記事では、ドン・ノーマンの定義に基づき、UIデザインにおける決定的な違いと、両者の「ズレ」が引き起こす問題を解説します。
ナッジとスラッジの違いとは？行動設計における倫理的な境界線
「ナッジ」と「スラッジ」は行動経済学から生まれた対照的な概念です。本記事では、UIデザインにおける決定的な違いと、ユーザーのための設計とユーザーを利用する設計の境界線を解説します。
ペルソナとセグメントの違いとは？UXデザインで混同しない正しい使い分け
ペルソナとセグメントの違いをUXデザインとマーケティングの両面から解説。セグメントは「誰に届けるか」を決める集団分類、ペルソナは「どう設計するか」を導く人物像。図解とケース比較で正しい使い分けがわかります。
定量調査と定性調査の違いとは？UXリサーチでの正しい使い分け
「定量調査」と「定性調査」は混同されやすい概念です。本記事では、UXリサーチにおける決定的な違いと、目的に応じた正しい使い分けを解説します。
ユーザーリサーチとユーザビリティテストの違いとは？発見と検証の正しい使い分け
ユーザーリサーチとユーザビリティテストの違いを図解で解説。リサーチは「何を作るべきか」を発見し、テストは「ちゃんと使えるか」を検証する。EC・社内ツール・新規プロダクトのケース比較で正しい使い分けがわかります。
スキューモーフィズムとは？フラットデザインとの違いと使い分け
スキューモーフィズムとは、実物の質感や立体感をUIに再現する表現です。フラットデザインとの違いを、見た目・押せそうに見えるか（アフォーダンス）・情報密度の3点で比較し、現代UIが両者の間のどこに立っているかを画面例で示します。
UIとUXの違いとは？デザイン現場で混同しない正しい理解
UIはユーザーと製品の接点、UXは体験全体。UIはUXの一部であり、UIだけ良くてもUXが良いとは限りません。定義・具体例・実務での使い分けをわかりやすく解説します。
ユーザーフローとジャーニーマップの違いとは？設計と分析での正しい使い分け
ユーザーフローは画面遷移の設計図、ジャーニーマップは体験全体の時系列分析です。本記事では、両者の違いと、プロジェクトのどのフェーズでどちらを使うべきかをわかりやすく解説します。
ワイヤーフレームとプロトタイプの違いとは？設計フェーズでの正しい使い分け
ワイヤーフレームは構造を決める設計図、プロトタイプは動きを検証するモデルです。本記事では、両者の違いと、設計プロセスのどの段階でどちらを使うべきかをわかりやすく解説します。
アクセシビリティとユーザビリティの違いとは？両立させる設計の考え方
「アクセシビリティ」と「ユーザビリティ」は混同されやすい概念です。本記事では、WCAGとISO 9241の定義に基づき、両者の決定的な違いと、UIデザインで両立させる方法を解説します。
再認と再生の違いとは？UIデザインで「思い出させない」設計をする理由
「再認（Recognition）」と「再生（Recall）」は認知心理学の基本概念です。本記事では、ニールセンのヒューリスティクスに基づき、UIデザインにおける決定的な違いと「記憶に頼らせない」設計原則を解説します。
UXとユーザビリティの違いとは？混同しやすい2つの概念を正しく使い分ける
「UX」と「ユーザビリティ」は混同されやすい概念です。本記事では、ISOとニールセンの定義に基づき、UXデザインにおける決定的な違いと正しい使い分けを解説します。
アクセシビリティテストの手法（Accessibility Testing）｜アクセシビリティ
開発プロセスに組み込む持続可能なテスト戦略。自動化ツールによる文法検証、泥臭いキーボード検証、そしてスクリーンリーダーの実機テスト入門。
色彩とコントラスト比（Color & Contrast）｜アクセシビリティ
色覚多様性に配慮し、誰にでも見やすい配色を。WCAG基準と、色だけに頼らない情報伝達のベストプラクティス。
フォーカスインジケーター（Focus Visible）｜アクセシビリティ
キーボード操作時の「現在地」を視覚化するフォーカスリング。美観を損なわずに実装するデザイン手法と「outline: none」の罠。
フォームとエラーハンドリング（Forms & Errors）｜アクセシビリティ
誰もが迷わず入力でき、失敗から確実に回復できるフォーム設計。ラベルの適切な紐付け、エラー状態の明示、そしてユーザーの認知負荷を下げるアプローチ。
インクルーシブデザイン思考｜アクセシビリティ
マイノリティのための特別対応ではなく、使いにくさや排除をデザインの初期段階で見つけ出す「手法」としてのインクルーシブデザイン。
キーボードナビゲーション（Keyboard Navigation）｜アクセシビリティ
マウスなしで論理的に移動できるUIの実装。DOMの順序、適切なフォーカス管理、そして視覚的な順序とのギャップを埋める設計手法。
アクセシビリティ概論｜アクセシビリティ
なぜ重要で、どこから取り組むべきか。法対応や特別対応ではなく、使いやすさの土台となる「品質の基盤」としてのアクセシビリティ。
スクリーンリーダーUX（Screen Reader UX）｜アクセシビリティ
視覚に依存しない「音声による情報取得」の体験設計。読み上げのノイズを減らし、見えない構造を伝えるためのWAI-ARIA活用術。
セマンティクスとWAI-ARIA（Semantics & ARIA）｜アクセシビリティ
HTMLが本来持つ文脈（セマンティクス）の重要性と、それを適切に補うWAI-ARIAの実装ガイド。過剰なARIAを避けるためのベストプラクティス。
タイポグラフィと余白（Typography & Spacing）｜アクセシビリティ
文字の可読性と、誤クリックを防ぐための余白設計。ロービジョンや認知特性、運動障害のあるユーザーにとって使いやすいUI表現の基礎。
WCAGの4原則（POUR）｜アクセシビリティ
アクセシビリティの世界基準であるWCAG。知覚・操作・理解・堅牢という4つの原則から、誰もがアクセスし続けられるUI設計の解像度を上げる。
アクセシビリティ実装｜エンジニアリング
すべてのユーザーに同じ情報と機能を届ける。特別な対応ではなく、HTMLとWebの標準仕様を守り抜く「コードの品質」の最前線。
API設計｜エンジニアリング
デザイン（画面）とデータ（サーバー）をつなぐ契約書。通信の回数と重さが、そのままアプリの体感速度を決定する。
アーキテクチャパターン｜エンジニアリング
システムをどう区分けし、どう繋ぐか。「MVC」や「マイクロフロントエンド」など、開発の地図となる大きな「間取り」の指針。
コンポーネント設計｜エンジニアリング
UIパーツの責務と分割を定める技術。再利用性と合成可能性が、デザインシステムと実装をつなぐ。
CI/CDとデプロイ｜エンジニアリング
スピードは品質。手作業のリスクを排除し、デザインの変更や新機能を安全かつ最速で本番環境に届ける自動化の仕組み。
DRY原則｜エンジニアリング
Don't Repeat Yourself。デザインの重複、コードの重複を排除し、一つの変更が全体に伝播する一貫性の高いシステムを作る。
KISS原則｜エンジニアリング
単純さを保つ設計技術。複雑さはバグ、遅延、負債の根源。UIにもコードにも効く最重要原則。
エンジニアリング技術概論｜エンジニアリング
デザインを実装可能にし、技術的負債をUXの問題として捉えるための、UIXHEROのエンジニアリング技術セクションの歩き方。
パフォーマンス最適化｜エンジニアリング
デジタルプロダクトにおいて速さはUXの中心。遅延読み込み、キャッシュ、Core Web Vitalsを理解する。
セキュリティと認証｜エンジニアリング
無防備なシステムは一瞬で信頼を失う。「守り」をUXの障害にせず、ユーザーに安心を提供する実装と設計。
関心の分離（SoC）｜エンジニアリング
デザインとロジックを切り離す。システムの変更箇所を最小に抑え、UIを安全に変更しやすくするための境界設計。
SOLID原則｜エンジニアリング
「硬直化」を防ぎ、変更に強く壊れにくいシステムを作るための5つの強力な設計原則。
状態管理｜エンジニアリング
「どこにデータを持たせるか」の設計技術。データの持ち方が画面の矛盾を防ぎ、システム全体の体験を左右する。
テスト戦略｜エンジニアリング
品質を「人の目」ではなく「仕組み」で保証する。変更によるデグレ（機能退行）を防ぎ、安心してUX改善を続けるための土台。
YAGNI原則｜エンジニアリング
「今いらないもの」を作らない。将来の不安に基づく過剰設計を防ぎ、素早くユーザーに価値を届けるための原則。
親和図法｜インタビュー技術
コーディングしたデータをグルーピングし、テーマを発見する親和図法（アフィニティダイアグラム）の技法。
バイアス制御｜インタビュー技術
インタビューで発生するバイアスを特定し、制御するための技法。確証バイアス、社会的望ましさバイアスへの具体的な対処法。
倫理・同意｜インタビュー技術
インタビュー参加者の権利を守るための倫理的配慮と同意取得の技法。
ジャーニーマップ接続｜インタビュー技術
インタビューのインサイトをジャーニーマップに統合し、ユーザー体験の改善ポイントを特定する技法。
傾聴技術｜インタビュー技術
ユーザーの発話を正確に受け止め、深い語りを引き出す傾聴（アクティブリスニング）の技法。
インタビュアーマインド｜インタビュー技術
インタビュー技術の前に必要な姿勢と心構え。好奇心、中立性、沈黙への耐性。
インタビュー技術概論｜インタビュー技術
インタビュー技術セクションの全体像。21本の技術記事がどう繋がり、どの順で学ぶべきかを示すガイドマップ。
ペルソナ接続｜インタビュー技術
インタビューのインサイトをペルソナに統合し、ユーザー像をデータで裏付ける技法。
調査設計｜インタビュー技術
インタビュー調査の目的設定、スコープ定義、計画立案の技法。調査設計がインタビューの成否を決める。
記録・文字起こし｜インタビュー技術
インタビューの記録方法と文字起こしの技法。データを分析可能な状態にする。
リモートインタビュー｜インタビュー技術
オンラインでのインタビューを成功させる技法。対面との違い、環境設定、リモート特有の傾聴・深掘りテクニック。
リサーチクエスチョン設計｜インタビュー技術
「聞きたいこと」を構造化し、インタビューで答えられる問いに変換する技法。
スクリーナー設計｜インタビュー技術
インタビュー対象者を確実に選別するスクリーナーの設計技法。条件をYes/Noに変換し、プロ参加者を排除する。
沈黙の技術｜インタビュー技術
インタビューにおける「間」の使い方。沈黙を味方にして、ユーザーの本音を引き出す技法。
インサイト抽出｜インタビュー技術
分析結果からアクショナブルなインサイトを導出する技法。テーマを施策につなげるシンセシスの方法。
インタビュー形式｜インタビュー技術
構造化・半構造化・非構造化インタビューの違いと使い分け。UXリサーチでは半構造化が標準。
UXデザイン完全ガイド｜リサーチから実装までを体系化
UXデザインとは何か、なぜ重要か。UXリサーチ・インタビュー技術・UIデザイン・エンジニアリング・アクセシビリティを体系化したUIXHEROの総合入口ガイド。
アクセシビリティとは？Webアクセシビリティの基本・WCAG・UIデザインへの活かし方
アクセシビリティとは障害の有無に関わらず誰もが使える状態のこと。Webアクセシビリティの基本、WCAG、UIデザインへの具体的な活かし方をUIXHEROの3レイヤー構造で解説します。
UIとは？インターフェースデザインとUXとの違いをわかりやすく解説
UIとは、ユーザーが見て・触れて・操作する接点のことです。本記事では、インターフェースデザインとは何か、UXとの違い、UIデザインの基本要素を初心者向けにわかりやすく解説します。
ユーザビリティとは？定義・評価方法・UIデザインへの活かし方を解説
ユーザビリティとは製品やサービスの「使いやすさ」を表す品質属性。定義、5つの構成要素、評価方法、UIデザインへの活かし方をUIXHEROの3レイヤー構造で解説します。
UXリサーチとは？手法・進め方・UIデザインへの活かし方を解説
UXリサーチとはユーザーの行動・動機・課題を体系的に調査するプロセス。代表的な手法、進め方、UIデザインへの活かし方をUIXHEROの3レイヤー構造で解説します。
コーディング分析｜インタビュー技術
インタビューデータを体系的に分類・整理するコーディング技法。オープンコーディングからアクシャルコーディングまで。
深掘り技術｜インタビュー技術
ユーザーの表面的な回答から本質的なインサイトを引き出す深掘り（プロービング）の技法。ラダリング、5 Whys、具体化質問の使い分け。
質問設計｜インタビュー技術
効果的な質問を設計する技法。オープン質問とクローズド質問の使い分け、誘導を避ける聞き方、質問の順序設計。
ラポール形成｜インタビュー技術
ユーザーとの信頼関係を築き、本音を引き出すための関係構築技法。アイスブレイクから心理的安全性の確保まで。
リクルーティング｜インタビュー技術
インタビュー対象者の選定・募集・スクリーニングの技法。適切な参加者を集めることで、インタビューの質が決まる。
ベンチマーク調査
競合製品や業界標準と自社製品を比較し、強み・弱み・改善機会を特定する調査手法。
認知的ウォークスルー
初めて使うユーザーの視点で、タスク完了までの各ステップを検証するユーザビリティ評価手法。
コンセプトテストとは？進め方と実務チェックリスト
コンセプトテストとは、新しい製品や機能のコンセプトをユーザーに提示し、受け入れられるか・正しく理解されるか・ユーザーが何を期待するかを確かめる初期段階の調査手法です。使いどきの見極め方、実施の5ステップ、実務チェックリストまでを解説します。
CSAT（顧客満足度スコア）
特定の体験やタッチポイントに対する満足度を1問で測定し、改善ポイントを特定する指標。
デザインレビュー
チームやステークホルダーがデザインを評価し、問題点や改善案を議論する協働プロセス。
エスノグラフィー
ユーザーの生活や仕事の現場に入り込み、長期間にわたって観察・参与することで深い文脈を理解する調査手法。
アイトラッキング
ユーザーの視線の動きを専用機器で計測し、注視点や視線パターンを分析する調査手法。
ファーストクリックテスト
ユーザーが最初にクリックする場所を測定し、ナビゲーションやレイアウトの問題を発見する簡易テスト。
5秒テスト
画面を5秒間見せた後に印象を聞くことで、第一印象とメッセージの伝達力を測定するテスト。
フォーカスグループ
複数のユーザーを集めてグループディスカッションを行い、態度や意見を収集する定性調査手法。
ヒートマップ分析
ユーザーのクリック、スクロール、視線の分布を色で可視化し、行動パターンを把握する分析手法。
ヒューリスティック評価
ユーザビリティの専門家が経験則に基づいてUIの問題点を発見する、ユーザー不在の評価手法。
ジャーニーマップ
ユーザーが目標を達成するまでの体験全体を時系列で可視化し、課題と機会を発見するツール。
ペルソナ
リサーチデータに基づいて作成する架空のユーザー像。チーム全体でユーザー理解を共有し、設計判断の軸を揃える。
A/Bテスト
2つの異なるバージョンをランダムに表示し、どちらがより効果的かを統計的に検証する定量評価手法。
アクセス解析
ユーザーのWeb上の行動データを継続的に収集・分析し、改善機会を発見する定量手法。
カードソート
ユーザーにコンテンツや機能をグループ化してもらい、情報設計の基盤となるメンタルモデルを発見する手法。
コンテキスチュアルインクワイアリ
ユーザーの作業環境で観察とインタビューを同時に行い、行動と意図を統合的に理解する調査手法。
日記調査
ユーザーに一定期間記録をつけてもらい、時間経過に伴う行動・感情の変化を追う定性調査手法。
フィールドスタディ
ユーザーの実際の環境に赴き、自然な文脈での行動を観察する定性調査手法。
NPS（ネットプロモータースコア）
顧客ロイヤルティを1つの質問で測定し、推奨者・中立者・批判者に分類する定量指標。
UXリサーチとは
ユーザーを理解し、根拠に基づいた設計判断を行うための体系的な調査手法の総称。
リサーチ計画
目的・仮説・手法・スケジュールを明確にし、成果につながるUXリサーチを設計する方法。
UXリサーチプロセス
発見→定義→設計→検証のサイクルで、継続的にユーザー理解を深めるリサーチの進め方。
SUS（システムユーザビリティスケール）
10項目の標準化された質問票で、システムの主観的ユーザビリティを定量評価する指標。
ツリーテスト
サイトやアプリの階層構造だけを提示し、ユーザーが目的の情報を見つけられるかを検証する手法。
サーベイ
多数のユーザーに同じ質問を行い、定量的なデータを収集する調査手法。
ユーザビリティテスト
実際のユーザーに製品を使ってもらい、行動を観察して問題点を発見する評価手法。
ユーザーインタビュー
ユーザーと直接対話し、行動の背景・潜在ニーズ・価値観を深く理解する定性調査手法。
A/Bテスト完全ガイド｜統計的に正しい意思決定を行う実験設計
A/Bテストとは2つのパターンを比較し、どちらが良い成果を出すかをデータで検証する手法。仮説設計から統計的有意性の判断、よくある失敗パターンまで解説。
カードソート完全ガイド｜ユーザーの頭の中を可視化する情報設計手法
カードソートとは、ユーザーに情報をグループ分けしてもらい、自然な分類構造を探る調査手法。オープン・クローズドの使い分けから、分析方法まで解説。
UXリサーチ完全ガイド｜定性・定量×行動・態度の4象限で手法を体系化
UXリサーチとは、ユーザーを体系的に調査するプロセス。定性・定量×行動・態度の4象限で手法を分類し、開発フェーズごとの使い分けを解説。
サーベイ設計完全ガイド｜バイアスを排除して正確なデータを集める技術
サーベイ（アンケート調査）とは、多数のユーザーから定量的なデータを収集する調査手法。質問設計・選択肢設計・バイアス回避の実践ノウハウを解説。
ユーザビリティテスト完全ガイド｜5人で85%の問題を発見する実践手法
ユーザビリティテストとは、実際のユーザーに製品を使ってもらい問題点を発見する評価手法。5人テストで85%の問題が見つかる理論から、具体的な実施手順・分析方法まで解説。
ユーザーインタビュー完全ガイド｜「なぜ」を引き出す質問設計と実践技法
ユーザーインタビューとは、ユーザーと直接対話し、行動の背景や潜在ニーズを深く理解する定性調査手法。質問設計・ラポール形成・分析方法まで解説。
分析麻痺とは？UXデザインにおける「考えすぎて動けない」の心理と対策
分析麻痺（Analysis Paralysis）とは、情報を集めすぎ・分析しすぎることで逆に決断できなくなる状態です。UXデザインにおける具体例・選択のパラドックスとの関係・UI設計での対策を解説。
権威バイアスとは？UXデザインにおける「専門家が言うなら正しい」の心理と活用法
権威バイアスとは、専門家や権威ある組織の意見を無批判に信じやすくなる心理傾向です。UXデザインにおける具体例・社会的証明との違い・UI設計への活かし方を解説。
バーナム効果とは？UXデザインにおける「これは私のことだ！」の心理と活用法
バーナム効果（フォアラー効果）とは、誰にでも当てはまる曖昧な記述を「自分だけに当てはまる」と感じる心理現象です。UXデザインにおける具体例・診断コンテンツへの活用・倫理的注意点を解説。
認知的倹約家とは？UXデザインにおける「脳は手抜きをしたがる」の心理と活用法
認知的倹約家（Cognitive Miser）とは、人間の脳ができるだけ思考エネルギーを節約しようとする性質です。UXデザインにおける具体例・デフォルト設計への活かし方・認知負荷との関係を解説。
ドハティの閾値とは？UIデザインにおける「0.4秒」の応答速度が生産性を決める
ドハティの閾値とは、システムの応答時間が0.4秒（400ms）を下回るとユーザーの生産性が飛躍的に向上するという法則です。楽観的UI・スケルトンスクリーン・即時フィードバックの設計への活かし方を解説。
ヤコブの法則とは？UIで「普通のデザイン」が強い理由を解説
ヤコブの法則とは、ユーザーは他のサイトで培った操作パターン（メンタルモデル）が自分のサイトでも通用することを期待する法則です。ナビゲーション・フォーム・EC・SaaS設計への具体的な活かし方を解説します。
単純接触効果とは？UXデザインにおける「見慣れる」が「好き」に変わる心理法則
単純接触効果（ザイオンス効果）とは、繰り返し接触するうちに対象への好感度が高まる心理現象です。UXデザインにおける具体例・一貫性との関係・UI設計への活かし方を解説。
テスラーの法則とは？UXで「複雑さは消せない」理由を解説
テスラーの法則（複雑性保存の法則）とは、どんなシステムにも削減できない複雑さが存在し、それをユーザーかシステムのどちらかが負担しなければならないという法則です。住所自動入力・デフォルト値・予測提案への活かし方を解説。
現状維持バイアス（デフォルトバイアス）とは？UIデザインにおける「初期値」の設計力
現状維持バイアス（デフォルトバイアス）とは、人間が現状を維持しやすく、あらかじめ設定されたデフォルト値をそのまま受け入れる認知バイアスです。オプトイン・オプトアウト・スマートデフォルトなどUI設計への活かし方を解説。
ヒックの法則とは？UIデザインにおける「選択肢の数」と意思決定スピードの関係
ヒックの法則とは、選択肢の数が増えるほど意思決定にかかる時間が対数的に増加するという法則です。ナビゲーション・料金プラン・フォーム設計への具体的な活かし方を解説。
アンカリング効果とは？UIデザインにおける「最初の数字」が判断を変える仕組みと活用法
アンカリング効果とは、最初に提示された情報が基準となり、その後の判断や評価が歪められる認知バイアスです。料金ページ・割引表示・プラン比較におけるUI設計への活かし方を解説。
認知負荷とは？UIデザインにおける「脳の処理限界」を設計で解決する方法
認知負荷とは、脳のワーキングメモリが処理できる情報量の限界です。UIデザインにおける認知負荷の3分類・チャンク化・段階的開示など、具体的な軽減手法を解説。
ピークエンドの法則とは？UIデザインにおける「最高の瞬間」と「終わり方」の設計術
ピークエンドの法則とは、体験の「最も感情が動いた瞬間」と「最後」の印象が回顧的な全体評価に強く影響する心理法則です。UIデザインにおける完了画面・エラー回復・オンボーディングへの活かし方を解説。
利用可能性ヒューリスティックとは？UXデザインにおける「思い出しやすさ」の影響と活用法
利用可能性ヒューリスティックとは、記憶から引き出しやすい情報を優先して判断する認知バイアスです。UXデザインにおける具体例・ピークエンドの法則との違い・UI設計への活かし方を解説。
確証バイアスとは？UXデザインにおける「思い込み」の影響と対策
確証バイアスとは、自分の信念を肯定する情報ばかりを集め、反証を無視する認知バイアスです。UXデザイン・ユーザーリサーチにおける影響と具体的な対策を解説。
ハロー効果とは？UIデザインにおける「第一印象」が評価を変える仕組みと活用法
ハロー効果とは、ある特徴の良し悪しが他の特徴の評価まで歪める心理現象です。UIデザインにおける第一印象設計・美的ユーザビリティ効果との関係・具体的な活かし方を解説。
フィッツの法則とは？UIデザインにおけるボタンサイズと配置の設計原則
フィッツの法則とは、ターゲットへの到達時間がターゲットの大きさと距離に依存するという人間工学の法則です。UIデザインにおけるボタンサイズ・配置・タッチターゲットの最適化方法を解説。
プライミング効果とは？意味と具体例・アンカリングとの違い
プライミング効果とは、先に見聞きした言葉や画像が、その後の判断や行動に無意識の影響を与える心理現象です。ECサイトやWebサービスの画面での具体例、アンカリング効果・サブリミナル効果との違い、UI設計で使うときの注意点を解説します。
UI設計プロセス完全ガイド｜Why→What→Howで設計判断を言語化する
UIデザインの設計プロセスを6ステップで体系化。「なぜそのUIか」を説明できるようになるUX心理→UI原則→UIコンポーネントの思考順序と実践フレームワーク。
UIコンポーネント完全ガイド｜UIパーツ設計の全69記事
Button・Modal・Toast・Sidebarなど、UIコンポーネント69記事を9カテゴリで体系化。各コンポーネントの設計判断・状態設計・アクセシビリティをまとめたハブページ。
UIデザイン完全ガイド｜UI原則・UXデザインの法則・コンポーネントを体系化
UI原則、UI設計原則、UXデザインの法則をWhy→What→Howで体系化。UX心理・UI原則・UIコンポーネントをつなげて学ぶUIXHEROの総合入口ガイド。
UIデザイン原則まとめ｜UI設計を支える65の原則
UI原則とは何か、UI設計でどう使うかを解説。視覚設計から認知設計、操作・対話、情報構造、アクセシビリティまで65のUIデザイン原則を体系化。
UX心理学119の法則｜認知心理学をUI/UX・Webデザインに活かす完全ガイド
認知心理学をUX・Webデザインに活かすための119の心理法則・認知バイアスを体系化。認知負荷、意思決定、記憶、感情をUI設計へ翻訳する実践ガイド。
Accordion（アコーディオン）
見出しをクリックすると対応するコンテンツを展開・折りたたむUIコンポーネント。FAQ・設定セクション・段階的開示に使われ、単一展開と複数展開の使い分け・ARIA disclosure/accordion パターンの実装を解説する。
AI Chat UI（AIチャットUI）
AIアシスタントとの対話インターフェース。メッセージバブル・ストリーミング表示・ロール別スタイリング・入力欄・スケルトンローディング・エラー状態の設計パターンを解説する。
Alert（アラート）
重要な情報・警告・エラー・成功をインラインで伝えるUIコンポーネント。Toastとの使い分け・4種類のセマンティック（info/success/warning/error）・role=alertとaria-liveの実装を解説する。
Calendar（カレンダー）
日付の選択・予定の表示・期間の選択を行う高度な複合UIコンポーネント。Date Picker・Event Calendar・Date Range Pickerの3種類の使い分け・キーボードナビゲーション・aria-labelの実装を解説する。
Carousel（カルーセル）
複数のコンテンツアイテムを横スクロールまたはスライドで切り替える複合UIコンポーネント。自動再生・手動ナビゲーション・インジケーター・レスポンシブ対応・アクセシビリティ（aria-roledescription・aria-live）の設計を解説する。
Dashboard Patterns（ダッシュボードパターン）
KPI・グラフ・テーブル・アラートを1画面に集約したデータ可視化UIのレイアウトパターン。グリッドレイアウト・ウィジェット設計・レスポンシブ対応・スケルトンローディング・フィルタリングの設計を解説する。
Density Patterns（密度パターン）
UIの情報密度をユーザーや用途に合わせて切り替える設計パターン。Compact・Default・Comfortable の3段階・テーブル行・リスト・カードへの適用・ユーザー設定との連動を解説する。
Editor Patterns（エディターパターン）
テキスト・コード・リッチコンテンツを編集するためのUIパターン。ツールバー・コマンドパレット・スラッシュコマンド・マークダウン入力・コードエディター・インラインフォーマットの設計を解説する。
Empty State（空状態）
コンテンツが存在しない状態をユーザーに伝えるUIコンポーネント。「データなし」「検索結果なし」「エラー」の3種類の設計・イラスト/アイコン/テキスト/CTAの組み合わせ・アクセシビリティの実装を解説する。
Floating Panel（フローティングパネル）
画面上に浮かんだ状態で表示し続けるパネルUIコンポーネント。ユーザーがドラッグで位置を変えたり、折りたたんだりできる永続的なフローティングUIの設計・実装を解説する。
Hover Card（ホバーカード）
リンクやアバターにホバーした時にユーザー情報・記事プレビュー・リポジトリ情報などをリッチなカード形式で表示するUIコンポーネント。TooltipとPopoverとの使い分け・ホバー遅延・キーボードアクセシビリティの設計を解説する。
Inspector Panel（インスペクターパネル）
選択したオブジェクト・要素のプロパティを表示・編集するサイドパネル。Figma・VS Code・DAWなどのプロ向けツールで使われるプロパティエディターのレイアウト・フィールドグループ化・リアルタイム更新・キーボード操作の設計を解説する。
Loading（ローディング）
処理中であることをユーザーに伝えるUIパターン全体の設計指針。Spinner・Skeleton・Progress Barの使い分け・知覚的な待機時間の最適化・aria-busyとaria-liveの実装を解説する。
Notification Center（通知センター）
アプリ内の通知を一覧・管理するUIコンポーネント。Toast・Alertとの使い分け・未読バッジ・既読管理・グループ化・通知設定への導線の設計を解説する。
Popover（ポップオーバー）
トリガー要素をクリックすると展開するフローティングパネルUIコンポーネント。TooltipとModalの間を埋める存在として、インタラクティブなコンテンツ（フォーム・リンク・設定）を小さなパネルで提供する設計を解説する。
Progress Bar（プログレスバー）
処理の進捗率を横棒グラフで視覚的に伝えるUIコンポーネント。Spinnerとの使い分け・不定時間進捗（Indeterminate）の設計・role=progressbarとaria-valuenowの実装を解説する。
Resizable（リサイザブル）
ユーザーがドラッグ操作でパネルの幅・高さを自由に変更できるUIコンポーネント。分割ペイン・サイドバー幅の調整・エディタースプリッターの設計・最小・最大サイズの制約・アクセシビリティを解説する。
Responsive Patterns（レスポンシブパターン）
画面サイズに応じてUIレイアウトを適応させる設計パターン集。ナビゲーションの変形・グリッドの折り畳み・コンポーネントの切り替えなど、モバイル・タブレット・デスクトップでの代表的な対応パターンとブレークポイント設計を解説する。
Right Rail（ライトレール）
コンテンツエリアの右側に配置する補助的なサイドカラム。関連リンク・広告・目次・ウィジェットなどを収容する設計・スティッキー配置・レスポンシブでの折り畳み・コンテンツとの優先順位付けを解説する。
Scroll Area（スクロールエリア）
コンテンツのオーバーフローをスクロールで制御するUIコンポーネント。ネイティブスクロールバーとカスタムスクロールバーの使い分け・スクロール位置の保持・overflow設計・アクセシビリティを解説する。
Share Modal（シェアモーダル）
コンテンツのURL・アクセス権・共有先を設定・送信するためのモーダルダイアログ。リンクコピー・メール招待・権限設定・SNSシェアの設計パターンと、アクセシビリティ（フォーカストラップ・aria-modal）を解説する。
Spatial Canvas（スペーシャルキャンバス）
無限の2D空間でノード・カード・図形を自由に配置・接続・拡大縮小するインタラクティブキャンバスUI。Figma・Miro・Excalidraw・React Flowのようなホワイトボード・フロービルダーのパン・ズーム・ノードドラッグ・コネクター線の設計パターンを解説する。
Spinner（スピナー）
処理中・読み込み中を回転アニメーションで伝えるUIコンポーネント。Skeletonとの使い分け・遅延表示（点滅防止）・サイズと配色の設計・role=statusとaria-labelの実装を解説する。
Status Bar（ステータスバー）
システムやコンテンツの現在の状態を画面の固定位置に常時表示するUIコンポーネント。接続状態・保存状態・選択件数・処理進行状況などをコンパクトに伝える設計とARIA実装を解説する。
Toggle Group（トグルグループ）
複数の選択肢を排他選択（単一選択）または複数選択できるボタングループUIコンポーネント。RadioとCheckboxとの使い分け・単一/複数選択の設計・ARIA rolegroupパターンの実装を解説する。
Tooltip（ツールチップ）
要素にホバーまたはフォーカスした時に補足情報を表示する小さなフローティングUIコンポーネント。TooltipとPopoverの使い分け・モバイル対応の限界・role=tooltip ARIAパターン・aria-describedbyの実装を解説する。
Command Palette（コマンドパレット）
キーボードショートカット（⌘K / Ctrl+K）で呼び出す全機能横断の検索・実行UIコンポーネント。アプリ内のコマンド・ページ・設定を横断検索し、キーボードだけで操作を完結させるパワーユーザー向けUI設計を解説する。
Dropdown Menu（ドロップダウンメニュー）
トリガー要素をクリック/ホバーすると展開するメニューUIコンポーネント。Context MenuやSelectとの使い分け・フォーカス管理・サブメニュー設計・ARIA menuパターンの実装を解説する。
Sort（ソート）
コンテンツを特定の基準（日付・価格・名前・評価など）で並べ替えるUIコンポーネント。ソートUIの形式選択・現在の並び順の可視化・昇順/降順トグルの設計基準を解説する。
Avatar（アバター）
ユーザーやエンティティを表す小さな円形または正方形の画像UI。プロフィール写真・イニシャル・アイコンの3種とフォールバック設計、グループ表示（Avatar Group）の判断基準を解説する。
Badge（バッジ）
ラベル・ステータス・数値を小さな丸みを帯びたチップで示すUIコンポーネント。カテゴリタグ・未読数・ステータス表示に使われ、視覚的に素早く情報を補完する。
Card（カード）
1つのエンティティに関連する情報（画像・タイトル・説明・アクション）をひとまとめにした独立したコンテナUI。ECサイトの商品一覧・記事サムネイル・ダッシュボードのウィジェットに使われる。
Filter（フィルター）
コンテンツを条件（カテゴリ・日付・価格・ステータスなど）で絞り込むUIコンポーネント。チェックボックス・ドロップダウン・トグル・レンジスライダーの使い分けと、フィルター状態の可視化設計を解説する。
Image / Media（画像・メディア）
UIにおける画像・動画・音声などのメディアコンテンツの表示設計。アスペクト比固定・レイジーロード・スケルトンUI・alt属性の設計基準を解説する。
List（リスト）
複数の情報を縦に並べる最基本のUIパターン。Ordered / Unordered / Description の3種と、インタラクティブなAction list・Selection listの使い分けを押さえる。
Search（検索）
ユーザーが入力したキーワードでコンテンツを絞り込むUIコンポーネント。インクリメンタルサーチ・サジェスト・空の状態・キーボード操作の設計基準を解説する。
Separator（セパレーター）
コンテンツ間の論理的・視覚的な区切りを表現するUIコンポーネント。水平線・余白・色の違いなど実装手段の選択基準と、装飾と意味論的区切りの使い分けを解説する。
Table of Contents（目次）
長いページ内のセクション構造を可視化し、読者が任意の場所へジャンプできるナビゲーションUI。スクロール連動・アクティブ追跡・スムーズスクロールの設計基準を解説する。
2026年02月に公開した記事
トグルボタンとは？意味・使い方・Switch/Buttonとの違い
トグルボタンとは、押した状態を保持してON/OFFや選択中を示すUIです。Switch・Button・Checkboxとの違い、使う場面、aria-pressedの設計を解説します。
Undo Redoとは？意味・アンドゥ/リドゥの違いと使い方
Undo Redoとは、操作を元に戻すUndoと、取り消した操作をやり直すRedoのこと。意味、アンドゥ/リドゥの違い、Undoの逆、UI設計での使い方を解説します。
ページネーションとは？UIの使い方・表示件数・無限スクロールとの違い
ページネーションとは、一覧を複数ページに分けて移動しやすくするUIです。表示件数、ページ送り、無限スクロールとの違い、アクセシビリティ要件を解説します。
プログレッシブディスクロージャーとは？意味・UI例・段階的開示の使い方
プログレッシブディスクロージャーは、必要な情報や操作を段階的に見せるUI設計です。段階的開示の意味、使う場面、フォーム・設定画面での設計ポイントを解説します。
スキャンしやすさ (Scannability)
Scannability（スキャンしやすさ）は、ユーザーがページを読まずに走査しても目的の情報へたどり着けるようにするUI設計原則。見出し、太字、リスト、余白、F字型パターンを使った改善方法を解説。
App rail（アプリレール）
画面左端に縦並びするアイコン主体のナビゲーション。Sidebarより薄く、Bottom navより画面を広く使えるモバイル〜タブレット向けの省スペースナビゲーションコンポーネント。
Breadcrumb（パンくずリスト）
現在地と階層構造を同時に伝えるナビゲーション補助コンポーネント。ユーザーが「今どこにいるか」と「どこから来たか」を一目で把握できる設計基準。
File Upload（ファイルアップロード）
ファイル選択・ドラッグ&ドロップ・進捗表示・エラーハンドリングを統合したコンポーネント。ユーザーが「今どの状態にあるか」を常に把握できる設計が品質の核心。
Menubar（メニューバー）
アプリ上部に横並びするトップレベルメニュー。ファイル・編集・表示などの機能カテゴリをクリックでドロップダウン展開するデスクトップアプリ型ナビゲーションコンポーネント。
Sidebar / Side nav（サイドバー / サイドナビゲーション）
画面左端に固定された垂直ナビゲーション。階層の深いアプリや管理画面で「常に全メニューを見せる」ことでユーザーの現在地把握とページ間移動を支援するコンポーネント。
Slider（スライダー）
連続した数値の範囲を直感的に選択させるコンポーネント。正確な値入力より「だいたいこの辺」という曖昧さを許容する場面でのみ使う。
Switch（スイッチ）
ON/OFFを即座にシステムへ反映させる設定コンポーネント。操作した瞬間に副作用が発生するため、確認なしに取り返せない設定には使用しない。
Textarea（テキストエリア）
複数行の自由テキストを入力させるコンポーネント。1行のText Inputとの使い分け、自動リサイズ設計、バリデーションとアクセシビリティの基準。
AlertDialog（警告ダイアログ）
不可逆なアクション（削除・リセットなど）の実行前に、ユーザーに重大な結果を警告し最終確認を求めるダイアログ。
Button（ボタン）
UIで最も重要なインタラクション要素であるボタンの、機能（階層）、状態、配置を一貫させるための設計基準。
Checkbox（チェックボックス）
単独あるいは複数の項目を「オン / オフ」するUI。RadioやToggle Switchとの使い分けの基準。
Dialog（ダイアログ / モーダル）
ユーザーの作業を中断し、緊急性の高い決定や情報の確認を求めるモーダルウィンドウ。使い所とアクセシビリティ（フォーカストラップ）の設計基準。
Radio Button（ラジオボタン）
複数の選択肢から「必ず1つだけ」を選ぶ排他選択UI。CheckboxやSelectとの使い分けと、安全な初期状態の設計。
Select（セレクト / プルダウンメニュー）
複数の選択肢から1つを選ぶUI。適切な使用場面と、Radioボタン群やNativeのSelectとの使い分けの判断基準。
Sheet / Drawer（ドロワー / シート）
画面の端（左右や下部）からスライドして現れるダイアログの一種。スマートフォンのメニューや、親画面の文脈を保ったまま詳細を表示する際に用いる。
Table（テーブル / 表）
大量のデータを比較・俯瞰するためのUI。文字揃え・罫線の引き算・スクロール耐性という「データグリッド」の基本設計。
Tabs（タブ）
同一画面内でパネル（コンテンツ）を切り替えるUI。ナビゲーションとの違いと、画面遷移させずに情報を整理するルールの解説。
Text Input（テキスト入力）
ユーザーからの入力を受け付けるフォーム部品。ラベル、プレースホルダー、エラー処理の設計ルール。
Toast（トースト通知）
ユーザーの操作を妨げずに、システムの処理結果を一過性で伝える軽量な通知UI。モーダル・アラートとの使い分け。
ダブルループ学習 (Double-Loop Learning)
シングルループ学習が「問題を修正する」のに対し、ダブルループ学習は「なぜその問題が起きるのか、前提・ルール・目標そのものを問い直す」深い学習。プロダクト改善における根本的な仮説の見直しに不可欠な概念。
エビデンスベースデザイン (Evidence-Based Design)
「デザイナーの直感」ではなく「研究・データ・実証された知見」に基づいてデザインを決定するアプローチ。医療分野の「エビデンスベース医療（EBM）」の概念をデザインに応用したもの。
仮説検証型プロダクト開発 (Lean Startup)
「作ってから検証する」ではなく「検証してから作る」。リーンスタートアップは、最小限の実験（MVP）で仮説を素早く検証し、学習を積み重ねることで、無駄な開発を排除しながらプロダクトを進化させるフレームワーク。
OODAループ (OODA Loop)
Observe（観察）→ Orient（状況判断）→ Decide（意思決定）→ Act（行動）の4段階を高速で繰り返す意思決定フレームワーク。不確実な状況下での素早い判断と行動を可能にする。
ファットフィンガー問題 (Fat Finger Problem)
モバイル端末のタッチスクリーン操作において、指の接触面積が広いために意図しない要素を誤タップしてしまう問題。ユーザーの「不器用さ」ではなく、UIの「設計ミス」として捉えるべきモバイルUXの基本原則です。
問題空間と解決空間 (Problem-Solution Space)
「顧客が抱える課題（問題空間）」と「それをどう解決するか（解決空間）」を明確に区別する思考法。優れたプロダクトは、解決策のアイデア出しからではなく、問題空間の探求から生まれます。
UIデザインの基本 (Overview)
「UIデザイン＝画面を綺麗にすること」と思われている——この誤解がプロダクトを壊す。ユーザーとシステムの間にある「対話」を設計し、目的達成を邪魔しない道具を作るUIデザインの根本原則。
価値仮説 (Value Hypothesis)
「そのプロダクトは本当に誰かの役に立つのか？」という問いへの仮説。PMF（Product Market Fit）を目指すすべての出発点であり、これを検証せずにデザインや開発を進めることは、誰も通らない橋を美しく作るようなものです。
コントラストと可読性 (Contrast & Readability)
「おしゃれ」と「読めない」は違う。薄いグレーの文字、低コントラストのボタン——視覚的に美しくても読めないUIは、全ユーザーの体験を損なう。WCAGに基づくコントラスト設計の原則。
アフォーダンス (Affordance)
「押せそう」「引けそう」「入力できそう」——UIが操作方法を説明なしに伝える力がアフォーダンス。シグニファイアを正しく設計し、ユーザーが迷わず直感的に操作できるUIを作る原則。
整列 (Alignment)
数ピクセルのズレが積み重なったUIは、ユーザーに「雑に作られた」という無意識の不信感を与える。見えない線に沿って要素を揃えることで、秩序・関係性・信頼感を同時に作り出す整列の設計原則。
代替テキスト・ARIA (Alt Text & ARIA)
スクリーンリーダーが「画像」と読み上げるだけのUIは、視覚障害者にとって意味がない。alt属性とARIAで、すべてのユーザーに同等の情報を届ける設計原則。
ストレスを増やさない (Avoiding Dark Patterns)
「いいえ、私は損をしたいです」——ユーザーを心理的に追い詰めるダークパターンは短期の数字を作るが、長期の信頼を壊す。ユーザーのストレスを増やさない設計原則。
選択肢の最適化 (Choice Reduction)
選択肢が多いほど、ユーザーは選べなくなる。ヒックの法則と選択のパラドックスに基づき、ユーザーが迷わず決断できる選択肢の数と提示方法を設計する原則。
チャンク化 (Chunking)
人間の短期記憶には限界がある。情報を意味のある小さな塊（チャンク）に分けることで、ユーザーの記憶負荷を下げ、理解と操作のスピードを上げる設計原則。
不確実性を減らす (Clarity & Certainty)
「これで本当に合ってる？」という不安がユーザーの手を止める。操作の結果・現在地・次のステップを明示し、ユーザーが自信を持って進めるUIを設計する原則。
認知特性への配慮 (Cognitive Accessibility)
ADHD・ディスレクシア・高齢者——認知特性の多様性を前提にしたUIは、すべてのユーザーの認知負荷を下げる。シンプルな言葉・明確な構造・予測可能な動作で「考えさせない」設計原則。
色だけに頼らない表現 (Color Independence)
赤いエラー、緑の成功——色だけで状態を伝えるUIは、色覚多様性を持つ約5%の男性ユーザーに情報が届かない。色＋形＋テキストの多重コード化で、すべてのユーザーに伝わる設計原則。
配色設計 (Color System)
ブランドカラーを並べただけでは配色設計ではない。プライマリ・セマンティック・ニュートラルの役割を定義し、色を「装飾」ではなく「情報」として機能させる配色システムの設計原則。
比較・検討の支援 (Comparison / Decision Support)
人は比べないと選べない。選択肢の差分を整理し、ユーザーが「自分に合った答え」に辿り着けるよう意思決定を支援する設計原則。
コンポーネントの視覚一貫性 (Component Consistency)
同じ役割を持つUIコンポーネントが、画面をまたいで異なる見た目・振る舞いをしていると、ユーザーは毎回「これは何だ？」と学習し直す羽目になる。コンポーネント単位で視覚的一貫性を担保するための原則です。
コントラスト (Contrast)
「おしゃれで淡い」デザインは、誰も読めないサイトを生む。色・サイズ・明度の「差」を意図的に設計し、情報の優先順位と役割をユーザーの視線に直接語りかけるコントラストの設計原則。
意思決定の瞬間を設計する (Decision Moments)
ユーザーは「プランを選ぶ」「削除する」「購入する」——これらの意思決定の瞬間に最も迷い、最も離脱する。情報・比較・リスク提示を最適化し、ユーザーが後悔しない選択をできるよう設計する原則。
デザインと実装が壊れない設計 (Design & Implementation Durability)
Figmaでは美しいが、実装すると崩れる——デザインと実装の乖離は、コンポーネントの状態・余白の定義・フォントの扱いが「実装不可能な形」で設計されているときに起きる。壊れない設計の原則。
ルール化して再利用する (Design System Thinking)
同じボタンが画面ごとに微妙に違う色・サイズ・角丸——「なんとなく作った」UIは、スケールするにつれて一貫性が崩れる。コンポーネントとトークンでルール化し、再利用可能な設計資産を作る原則。
空状態 (Empty State)
何もない画面は、ユーザーへの最悪の歓迎だ。初回利用・検索0件・データ削除後——「空」の瞬間こそ、次のアクションへ誘導する最大のチャンスと捉える設計原則。
誤操作を防ぐ (Error Prevention)
優れたエラーメッセージよりも、エラーそのものを発生させないUIが上。制約・デフォルト値・インラインバリデーションを活用し、ユーザーが間違えられない設計を作る原則。
エラーから回復できる (Error Recovery)
エラーは必ず起きる。問題はその後だ。エラーメッセージが「何が起きたか」「なぜ起きたか」「どう直すか」を伝え、ユーザーが迷わず回復できるUIを設計する原則。
期待値を揃える (Expectation Management)
「思っていたのと違う」がユーザーの信頼を壊す。リンク先・操作結果・処理時間——ユーザーが「次に何が起きるか」を正確に予測できるよう、UIが事前に約束する設計原則。
既知パターンの活用 (Familiar Patterns / Mental Model)
ユーザーは他のサービスで学んだ操作パターンを、あなたのUIにも期待する。ヤコブの法則に基づき、既存のメンタルモデルを活用して学習コストをゼロにする設計原則。
フィードバック (Feedback)
ユーザーの操作に対してシステムが反応を返さないUIは、沈黙という最悪の体験を生む。あらゆる操作に適切な反応を返し、ユーザーとシステムの対話を成立させる設計原則。
迷わせない情報設計 (Findability)
ユーザーが求める情報を「探せない」UIは、情報がないUIと同じ。ナビゲーション・ラベル・検索・構造を通じて、目的の情報に最短でたどり着ける設計原則。
クリック領域・到達しやすさ (Fitts's Law / Touch Targets)
小さすぎるボタン、遠すぎるリンク、密集したタップ領域——これらはすべてユーザーの操作コストを増やす。フィッツの法則に基づき、押しやすく・届きやすいUIを設計する原則。
フォーカス管理 (Focus Management)
モーダルを開いたら、フォーカスはどこへ行く？動的UIにおけるフォーカスの制御は、キーボードユーザーとスクリーンリーダーユーザーの「現在地」を守る設計原則。
入力の負担を減らす (Form UX Principles)
フォームは離脱の最大の原因だ。不要な項目を削り、ラベルを明確にし、適切なキーボードを出し、エラーを事前に防ぐ——入力コストを最小化してコンバージョン率を守る原則。
視線誘導 (Gaze Guidance)
ユーザーの視線は画面上でランダムに動くわけではありません。ZパターンやFパターンなどの自然な眼球運動を利用し、目的のアクションまで迷わずユーザーを「案内」する設計技術です。
目的と制約を先に置く (Goals & Constraints First)
「どんなUIにしたいか」より先に「ユーザーは何を達成したいか」「何ができないか」を定義する——目的と制約を起点にした設計が、機能する最小のUIを生み出す。
グリッドシステム (Grid System)
要素をなんとなく並べると、画面は「整っているようで整っていない」状態になる。カラム・ガター・マージンを定義し、すべての要素を見えない格子に揃えることで一貫性あるレイアウトを作るグリッドシステムの設計原則。
ヘルプ・ガイダンス (Help & Guidance)
困ったユーザーを助けるのではなく、困らせないUIを作る。それでも迷ったとき、必要な瞬間に必要な助けを届けるコンテキスチュアル・ガイダンスの設計原則。
アイコン設計 (Iconography)
アイコンは「言語の壁を越える道標」であると同時に、「意味が伝わらなければただのノイズ」になる両刃の剣です。直感的な機能理解を助けるためのアイコン設計原則です。
情報アーキテクチャ (Information Architecture)
機能があっても見つけられなければ存在しないのと同じ。ユーザーのメンタルモデルに合わせた情報の整理・構造化で「迷子ゼロ」を実現する設計原則。
情報密度の最適化 (Information Density)
画面に載せる情報量は「多ければ多いほど良い」でも「少なければ少ないほど良い」でもない。ユーザーの目的と認知能力に合わせて最適な密度を設計する原則です。
多言語/i18n 前提のUI (Internationalization UI)
日本語で設計したUIをそのまま英語に翻訳したら、ボタンのテキストが溢れた——i18nを後付けにすると必ず壊れる。最初から多言語・多文化を前提に設計するUI原則。
一時停止・中断・再開 (Interruption Handling)
ユーザーは必ず中断する。電話が来る、通知が来る、急用が入る。中断しても「続きから始められる」設計が、完了率を守り、ユーザーの信頼を保つ原則。
キーボード操作 (Keyboard Navigation)
マウスが使えなくても、すべての機能が使える——キーボードだけでUIを操作できるかどうかは、運動障害・高齢者・パワーユーザー全員に影響する。WCAGが定めるキーボード操作の設計原則。
マイクロコピー (Microcopy)
ボタンの一言が、コンバージョンを変える。UIに散りばめられた小さなテキスト——ラベル・エラー文・プレースホルダー——がユーザーの行動と感情を左右するマイクロコピーの設計原則。
モーションの品位 (Motion Quality)
アニメーションは「動けばいい」ではない。意味のない過剰な動きはユーザーの邪魔になり、遅すぎる動きは操作を妨げる。UIにおけるモーションを「機能」として設計するための原則。
ナビゲーション設計 (Navigation Design)
「今どこにいるか」「どこへ行けるか」「どうやって戻るか」——この3つが答えられないナビゲーションはユーザーを迷子にする。現在地・行き先・帰り道を常に示す設計原則。
計測できる形にする (Observability & Metrics)
「リニューアルして良くなった気がする」——感覚ではなくデータで判断するために、UIは最初から計測可能な形で設計する必要がある。何を・どこで・どう計測するかを設計に組み込む原則。
オンボーディング (Onboarding)
登録直後の離脱を防ぐ。新規ユーザーが「最初の成功体験」に辿り着くまでの道筋を設計し、サービスの価値を体感させるオンボーディング設計の原則。
ピーク/終わりの体験設計 (Peak-End Experience)
ユーザーはサービスの「平均」ではなく「最高潮」と「最後」で全体を評価する。購入完了・タスク達成・解約——感情が動く瞬間を意図的に設計するピーク・エンドの法則の実践原則。
わかる言葉で書く (Plain Language)
専門用語・社内用語・曖昧な表現はユーザーを迷わせる。ユーザーが日常的に使う言葉でUIを書くことで、理解のコストをゼロに近づける設計原則。
主要導線を先に決める (Primary Path)
すべてのボタンが同じ大きさ・同じ色——ユーザーは「次に何をすべきか」がわからない。主要導線（プライマリパス）を先に定義し、UIの視覚的階層でユーザーを迷わず導く設計原則。
達成感・進捗 (Progress & Reward)
「あと少し」が人を動かす。プログレスバー・バッジ・ストリーク——進捗の可視化と達成の報酬設計がユーザーのモチベーションを維持し、継続率を高める設計原則。
近接 (Proximity)
ラベルと入力欄が同じ距離で並んでいると、どれとどれがペアかわからない。線や枠を使わずに「近づける・遠ざける」だけで情報のグループを作る、近接の設計原則。
記憶に頼らせない (Recognition over Recall)
ユーザーに「覚えておくこと」を要求するUIは失敗する。情報を見せて「思い出させる」のではなく、「認識させる」設計でユーザーの記憶負荷をゼロにする原則。
レスポンスと待ち時間設計 (Response Latency)
「遅い」より「わからない」がユーザーを壊す。待ち時間を正直に伝え、体感速度を設計する原則。スケルトン・プログレスバー・楽観的UIの使い分けと実装チェックリスト。
検索とフィルタ (Search & Filter)
検索は「知っている人」のための機能、フィルタは「探している人」のための機能。この違いを理解し、ユーザーが大量の情報から目的のものを素早く見つけられる設計原則。
単純化 (Simplicity)
機能を増やすことは簡単だが、削ることは難しい。UIの単純化とは「何を見せないか」を決める設計判断であり、ユーザーの認知負荷を下げ、目的達成を加速させる原則。
状態と例外を先に設計する (States & Edge Cases)
デザインは「うまくいったとき」だけ描かれている——ローディング中・エラー時・空状態・長すぎるテキスト。これらを後回しにすると、実装後に必ず壊れる。状態と例外を先に設計する原則。
トーン&ボイス (Tone & Voice)
同じ「エラーが発生しました」でも、ブランドによって言葉は変わる。UIのすべてのテキストに一貫した「人格」を持たせ、ユーザーとの信頼関係を言葉で設計する原則。
透明性 (Transparency)
「なぜこの情報が必要なの？」という疑問がユーザーの手を止める。データの利用目的・アルゴリズムの根拠・料金の内訳を隠さず開示することで、ユーザーの信頼を設計する原則。
課金・個人情報の安心設計 (Trust & Safety)
クレジットカード情報を入力する直前——ユーザーの不安が最高潮に達するその瞬間に、UIが信頼を設計できているか。課金・個人情報まわりの安心感を作る設計原則。
タイポグラフィ設計 (Typography)
フォントを選んで並べるだけではタイポグラフィ設計ではない。サイズ・太さ・行間・コントラストで情報に強弱をつけ、ユーザーが「読まずに理解できる」テキスト体験を設計する原則。
ユーザーコントロール (User Control)
ユーザーが「自分でコントロールできている」と感じられないUIは、不安と不信を生む。操作の自由度・取り消し可能性・中断・再開を設計し、ユーザーに主導権を渡す原則。
状態の可視化 (Visibility of System Status)
ユーザーが「今何が起きているか」を把握できないUIは、不安と誤操作を生む。システムの現在状態を適切なタイミングで伝え、ユーザーに安心して操作させる設計原則。
反復・一貫性 (Visual Consistency)
画面ごとにボタンの色や位置が違うUIは、ユーザーに毎回「これは何のボタンか」を学習させる。同じ機能には同じ見た目を繰り返し適用し、ユーザーの予測を裏切らない一貫性の設計原則。
余白 (Whitespace)
「スペースがもったいない」と要素を詰め込むと、すべての情報が同じ重要度に見えて何も伝わらない。余白を「空き」ではなく「見えないブロック」として意図的に設計する原則。
アフォーダンスとシグニファイアの違いとは？UXデザインにおける正しい使い分け
「アフォーダンス」と「シグニファイア」は混同されやすい概念です。本記事では、ノーマンが定義した本来の意味に基づき、UXデザインにおける決定的な違いと正しい使い分け（可視化の重要性）を解説します。
努力の正当化とは？意味と心理的な仕組み・IKEA効果との関係
努力の正当化とは、苦労して手に入れたものほど価値を高く感じる心理です。なぜそう感じるのかという心の仕組み、IKEA効果やゲーミフィケーションなどの具体例、使いすぎると逆効果になる境界までを解説します。
Confirm Shamingとは？UXでやってはいけない理由と具体的な対策
Confirm Shamingとは、拒否の選択肢に罪悪感や羞恥心を抱かせる文言を用い、ユーザーを特定の行動へ誘導するダークパターンの一種である。
2026年01月に公開した記事
Progressive Disclosureとは？段階的開示の意味とUX設計
Progressive Disclosure（段階的開示）とは、最初に基本情報だけを見せ、必要なタイミングで詳細を開示するUX設計手法です。認知負荷、情報の匂い、アコーディオンとの違いを解説します。
スキューモーフィズム（Skeuomorphism）とは？意味・UI例・フラットデザインとの違い
Skeuomorphism（スキューモーフィズム）とは、現実世界の形や質感をUIに取り入れる考え方。意味、具体例、フラットデザインとの違い、現代UIでの使いどころを解説します。
視覚的階層とデザイン階層の作り方
視覚的階層とは、デザインにおける情報の優先順位をサイズ・コントラスト・余白・配置で示す設計原則です。デザインの階層を作り、ユーザーの視線を主役からCTAへ誘導する方法を解説します。
バナーブラインドネスの意味と対策
バナーブラインドネス／banner blindnessの意味、広告のように見えるUIが無視される理由、重要なお知らせやCTAを見てもらうための配置・表現の対策を解説します。
テスラーの法則と複雑性保存の法則
テスラーの法則（Tesler's Law）とは、すべてのシステムには誰かが負担しなければならない「減らせない複雑さ」が存在するという複雑性保存の法則です。UXでユーザー負担を減らす判断軸を解説します。
ユーザーの「目」は騙せない：アテンション・エコノミーと視覚的階層
一生懸命作ったバナーがクリックされないのはなぜ？それはユーザーの脳が「広告っぽいもの」を自動的に無視するように進化しているからです。バナー・ブラインドネスと強調のインフレ、ユーザーの注意資源（アテンション）を巡る攻防戦を解説します。
選択のパラドックスと満足の関係：なぜ「1択」が最強なのか？
「選択肢は多い方がいい」と思っていませんか？ジャムの実験が示す「選択のパラドックス」と決断麻痺のメカニズム、そしてユーザーを後悔させないための「選択肢の絞り込み」テクニックについて解説します。
防衛的デザインとエラー回避：ユーザーはあなたの説明を読まない
「使い方が分からない」と言われた時、あなたは説明文を追加していませんか？防衛的デザイン（Defensive Design）は、ユーザーのミスを先回りして防ぐためのアプローチです。テキストによる説明ではなく、UIの制約によってエラーそのものを不可能にする手法を学びます。
オンボーディングの極意：「教える」のではなく「気づかせる」
最初のチュートリアルで全てを説明しようとしていませんか？ユーザーは「今すぐ使いたい」のです。空の状態（Null State）を活用したオンボーディングや、段階的開示（Progressive Disclosure）など、ユーザーの学習意欲を削がない教育戦略について学びます。
体験の「長さ」は重要ではない：UXにおける時間と記憶のメカニズム
ユーザー体験（UX）の良し悪しは、体験全体の平均値ではなく、「最も感情が動いた瞬間（ピーク）」と「去り際（エンド）」だけで決まります。待ち時間が長くても満足度が高いディズニーランドのマジックや、サービス解約時の印象が重要な理由を解き明かします。
質問の技術 (The Art of Questioning)
良い質問と悪い質問の違い、誘導尋問の回避、そしてラダリング法について。
善意の詐称 (Benevolent Deception)
ユーザーの利益のために、システムがあえて「嘘」をつくデザイン手法。
防衛的デザイン (Defensive Design)
ユーザーは必ずミスをするという前提に立ち、エラー未然に防いだり、起きたエラーからの回復を容易にしたりする設計思想。
二重符号化説 (Dual Coding Theory)
人間は「言語（テキスト）」と「非言語（画像）」の2つの経路で情報を処理しており、両方を同時に提示すると学習効果と記憶定着率が劇的に向上するという理論。
エビングハウスの忘却曲線 (Forgetting Curve)
人の記憶は学習直後に急速に失われる（20分で42%忘れる）が、適切なタイミングで「復習」することで記憶の定着率を維持できるという理論。オンボーディングや学習アプリ設計の基礎。
Job-to-be-Done (JTBD)
「顧客はプロダクトそのものではなく、プロダクトによって自分が成し遂げたい『仕事（Job）』を買っている」という理論。ユーザーの深層心理と動機を理解し、真の競合を見つけるためのフレームワーク。
狩野モデル (Kano Model)
ユーザーの満足度を「当たり前品質」「一元的品質」「魅力的品質」などの5つの要素に分類し、機能の優先順位を決定するためのフレームワーク。
認知負荷の適正化：7±2の呪縛からの解放と現代のマジカルナンバー
「人間は一度に7つのことしか覚えられない」という通説は、現代のUIデザインにおいては危険な誤解です。ジョージ・ミラーの論文の真意、ネルソン・コーワンの「4±1」理論、そしてワーキングメモリの限界を突破する「チャンキング」の本質的効果について解説します。
MAYA理論 (MAYA Principle)
「Most Advanced. Yet Acceptable.（最も先進的でありながら、なおかつ受け入れられる）」の略。新しさと親しみやすさのバランスが取れたデザインこそが、最もヒットするという法則。
ペルソナ (Persona)
ターゲットユーザーの属性、行動パターン、動機、ゴールなどを詳細に定義した架空の人物像。チーム全体で「誰のために作るのか」という認識を統一し、意思決定のブレを防ぐためのツール。
デジタル空間における物理メタファーの効用：スキュアモーフィズムの進化とアフォーダンス
スキュアモーフィズム（現実模倣）は過去の遺物ではありません。フラットデザインが抱える「不確実性」の問題を浮き彫りにし、ニューモーフィズムやグラスモーフィズムといった現代のトレンドが、なぜ再び「物理的な質感」を求めているのかをアフォーダンスの視点から解説します。
スラッジ (Sludge)
ユーザーの行動を阻害するために意図的に作られた「泥沼」のような摩擦や障壁（悪いナッジ）。
エラー誘発のメカニズムとデザインの責任：なぜ「ユーザーは間違っていない」のか
「ヒューマンエラー」という言葉は、思考停止の産物です。心理学的なエラー分類（スリップとミステイク）、スイスチーズモデル、そして正常性バイアスに基づき、システム側が負うべき責任と具体的な防止策を論じます。
審美ユーザビリティ効果 (Aesthetic-Usability Effect)
「美しいものは使いやすい」とユーザーが知覚する効果。見た目が魅力的だと、ユーザーは少々の使いにくさやエラーに対して寛容になり、全体的な満足度が高まる。
アフォーダンス (Affordance)
対象物が持つ「操作の可能性」を示唆する性質。ボタンが「押せる」ように見える、ドアノブが「回せる」ように見えるなど、ユーザーが直感的に使い方を理解するための核心的概念。
アンカリング効果 (Anchoring Effect)
最初に提示された情報（アンカー）が基準となり、その後の判断や評価が歪められる心理現象。価格交渉や割引表示で強力に作用する。
権威バイアス (Authority Bias)
「専門家」や「権威ある組織」の意見を、内容の正当性に関わらず無批判に信じてしまう心理傾向。
利用可能性ヒューリスティック (Availability Heuristic)
「すぐに思い出せる情報（最近のこと、衝撃的なこと）」を重視して判断してしまう心理傾向。頻度や確率の判断を誤らせる原因となる。
バンドワゴン効果 (Bandwagon Effect)
「みんながやっているなら、きっと良いものに違いない」と、多数派の意見や行動に同調してしまう心理現象。
傍観者効果 (Bystander Effect)
自分以外に傍観者がいる時、「誰かがやるだろう」と考えて率先して行動しなくなる心理。人数が多いほど、行動への責任感が分散され（責任の分散）、誰も動かなくなる。
変化盲 (Change Blindness)
目の前で何かが変化しても、視界がいったん遮られたり、注意が他に向いていると、その変化に気が付かない現象。
認知負荷 (Cognitive Load)
脳のワーキングメモリ（作業記憶）が処理できる情報量には限界がある。負荷が高すぎると、ミスが増え、理解度が下がり、ユーザーは離脱する。
コミットメントと一貫性 (Commitment & Consistency)
人は一度、自分の立場や方針を（特に公の場で）表明すると、その後の行動もそれと一貫させようとする強い心理的圧力が働く。
確証バイアス (Confirmation Bias)
自分の信念や仮説を肯定する情報ばかりを集め、反証する情報を無視・軽視する傾向。SNSのエコーチェンバー現象の主因。
制約 (Constraints)
ユーザーのエラーを防ぐために、あえて操作の選択肢を制限するデザイン原則。物理的、論理的、文化的な制約を活用し、正しい操作へと誘導する。
情報の空白 (Curiosity Gap)
知っていることと知りたいことの間にギャップ（空白）がある時、人はそれを埋めようと強烈な好奇心を抱き、クリックやスクロールといった行動を起こす。
決断疲れ (Decision Fatigue)
短期間に多くの決断を下すと、精神的なエネルギーが枯渇し、判断の質が低下したり、決断そのものを放棄（現状維持）してしまう現象。
おとり効果 (Decoy Effect)
二つの選択肢の間で迷っている時、明らかに劣る「第三の選択肢（おとり）」を追加することで、特定の選択肢を選ばせやすくする心理的戦術。
デフォルト効果 (Default Bias)
人間は「何もしない（現状を維持する）」ことを最も楽な選択肢と感じ、あらかじめ設定された「デフォルト値」をそのまま受け入れる傾向。
ドハティの閾値 (Doherty Threshold)
「0.4秒」という応答速度の境界線。システムがこの速度以内で反応すると、ユーザーは生産性を維持し、対話的な体験を感じることができる。
ドア・イン・ザ・フェイス (Door in the Face)
最初にわざと無理な要求をして断らせ、その直後に本来の（小さな）要求を出すことで、「譲歩してくれた」という罪悪感を利用して承諾率を上げる交渉術。
ダニング・クルーガー効果 (Dunning-Kruger Effect)
能力が低い人ほど、自分の能力を過大評価してしまう認知バイアス。「知らないこと」を知らないため、正しく自己評価できない。
エコーチェンバー現象 (Echo Chamber Effect)
閉ざされた空間で、自分と同じ意見ばかりが反響（エコー）し合い、特定の信念が強化・増幅される現象。異論が排除され、偏った思想が過激化しやすい。
共感ギャップ (Empathy Gap)
人は冷静な時（Cold状態）、感情が高ぶった時（Hot状態）の自分がどう行動するかを正しく想像できない。逆に、Hotな時は冷静に判断できない。
授かり効果 (Endowment Effect)
自分が所有しているもの（または所有していると感じているもの）に対して、客観的な市場価値よりも高い価値を感じ、手放すことを極端に嫌う心理。
期待バイアス (Expectation Bias)
「こうなるはずだ」という事前の期待が、実際の観察や体験の感じ方を歪めてしまう現象。待ち時間の体感などに強く影響する。
F型パターン (F-Shaped Pattern)
Web上のテキストコンテンツを見る際、ユーザーの視線はアルファベットの「F」の字を描くように動く傾向がある。
偽の合意効果 (False Consensus Effect)
「自分の意見や行動は一般的であり、大多数の人が自分と同じように考え、行動するはずだ」と思い込んでしまうバイアス。
親近性バイアス (Familiarity Bias)
「見慣れているもの」や「知っているもの」を無条件に好ましく、安全だと感じる心理傾向。
フィードバック (Feedback)
ユーザーの操作に対するシステムからの反応。ボタンを押した感触、送信完了の通知、エラー表示など、対話の成立を確認し安心感を与えるための必須要素。
図と地の関係 (Figure-Ground Relationship)
人間は視覚情報を見た時、それを「意味のある対象（図）」と「背景（地）」に瞬時に分離して認識する。ゲシュタルト心理学の基本原理。
フィッツの法則 (Fitts's Law)
「ターゲットへの到達時間は、ターゲットまでの距離とターゲットの大きさに依存する」という法則。ボタンは大きく、押しやすい場所に配置すべきという原則の根拠。
フロー状態 (Flow State)
自分のスキルと課題の難易度が釣り合った時、時間を忘れるほど没頭し、最高のパフォーマンスを発揮できる心理状態（ゾーン）。
フット・イン・ザ・ドア (Foot in the Door)
最初に小さな負担の少ない頼み事をして承諾させ、徐々に要求を大きくしていくことで、最終的に大きな頼み事を承諾させる交渉術。「一貫性の原理」を利用したもの。
フレーミング効果 (Framing Effect)
同じ情報でも、その提示のされ方（フレーム）がポジティブかネガティブかによって、受け取り手や意思決定が大きく変わる現象。
ゲーミフィケーション (Gamification)
ポイント、バッジ、ランキング、レベルアップといったゲームの要素を、ゲーム以外のサービス（学習、業務、健康管理など）に応用し、モチベーションを高める手法。
生成効果 (Generation Effect)
単に情報を受動的に「読む」よりも、自分の頭を使って情報を「生成」したり、手を動かして入力した方が、記憶への定着率が高まる現象。
ゲシュタルト原則 (Gestalt Principles)
人間は個々の要素をバラバラに認識するのではなく、まとまり（グループ）や全体的な構造として認識する傾向がある。
目標勾配効果 (Goal Gradient Effect)
ゴール（目標）に近づけば近づくほど、やる気が高まり、行動のスピードが加速する心理傾向。スタンプカードやプログレスバーで活用される。
黄金比 (Golden Ratio)
「1:1.618」の比率。自然界に多く見られるこの比率をレイアウトやタイポグラフィに取り入れることで、人間が本能的に美しいと感じる調和の取れたデザインを作ることができる。
ホーソン効果 (Hawthorne Effect)
人は「観察されている」「注目されている」と知ると、期待に応えようとしたり、良いところを見せようとして、行動やパフォーマンスを変える傾向がある。
ヒックの法則とは？UXで「選択肢が多いと決められない」心理を解説
ヒックの法則とは、選択肢が多いほど意思決定に時間がかかるという心理法則です。メニュー、フォーム、レコメンドで判断負荷を下げるUX設計の方法と、「ただ減らす」ではない整理の考え方を解説します。
後知恵バイアス (Hindsight Bias)
結果を知った後になって、「最初からそうなることは分かっていた」と思い込んでしまう心理現象。
フックモデル (Hook Model)
ユーザーを製品に習慣的に（無意識に）アクセスさせるための4段階のサイクルモデル。「トリガー」「アクション」「リワード」「インベストメント」で構成される。
双曲割引 (Hyperbolic Discounting)
「遠い将来の大きな利益」よりも「近い将来（今すぐ）の小さな利益」を不合理なほど優先してしまう心理傾向。
IKEA効果 (IKEA Effect)
未完成品を自分で組み立てたり、少し手を入れたりすることで、その対象物に実態以上の価値や愛着を感じる心理。
非注意性盲目 (Inattentional Blindness)
特定の対象に注意を集中していると、それ以外の予期しない事象（たとえそれが目立つものであっても）が全く見えなくなる現象。
意図的な摩擦 (Intentional Friction)
ユーザーの行動をあえて妨げ、立ち止まらせるデザイン手法。誤操作の防止、熟考の促進、確認のために戦略的に用いられる「良い摩擦」について。
内発的動機づけ (Intrinsic Motivation)
「報酬がもらえるから」「怒られるから」といった外部要因ではなく、「楽しいから」「興味があるから」という自分の内側から湧き出る意欲。
ヤコブの法則 (Jakob's Law)
「ユーザーは、あなたのサイト以外のサイトで多くの時間を過ごしている」。つまり、ユーザーは慣れ親しんだ既存の操作パターン（メンタルモデル）が、あなたのサイトでも通用することを期待している。
労働の錯覚 (Labor Illusion)
「ユーザーは、労力がかかっている（ように見える）ものに対して、より高い価値を感じる」という心理現象。あえて待ち時間を作ることで信頼性を高める。
好意の原理 (Liking Principle)
人は、自分が好意を持っている相手（魅力的、類似している、親切な人）からの頼み事を受け入れやすい。
マッピング (Mapping)
コントロール（操作部）と、それによって動く対象との対応関係。自然なマッピングは、学習なしで直感的な操作を可能にする。
メンタルモデル (Mental Model)
ユーザーが頭の中に持っている「システムがどう動くか」という理解や予測。デザインをユーザーのメンタルモデルに合わせることで、直感的な体験が生まれる。
単純接触効果 (Mere Exposure Effect)
興味がなかったものでも、何度も見たり聞いたりして接触回数が増えるにつれて、次第に好感度や評価が高まっていく心理現象。（ザイオンス効果）
ミラーの法則 (Miller's Law)
「マジックナンバー7±2」。人間が短期記憶に同時に保持できる情報の数は、およそ7個（プラスマイナス2個）であるという法則。
オッカムの剃刀 (Occam's Razor)
「必要なしに存在を増やしてはならない」。ある事象を説明するのに、必要以上に多くの仮定をするべきではないとする指針。デザインにおいては「最もシンプルな解決策が最良である」と解釈される。
楽観バイアス (Optimism Bias)
「自分だけは大丈夫」「早く終わるだろう」と、将来をポジティブに予測しすぎる傾向。計画錯誤の原因となる。
選択のパラドックス (Paradox of Choice)
選択肢が増えれば増えるほど、自由になるどころか、選ぶことの難しさや、選んだ後の後悔（「あっちの方が良かったかも」）が増大し、幸福度が下がる現象。
パレートの法則 (Pareto Principle)
「結果の80%は、原因の20%から生じる」という経験則（80:20の法則）。UXにおいては、ユーザーが利用する機能の80%は、全機能のわずか20%に集中していることが多い。
パーキンソンの法則 (Parkinson's Law)
「仕事は、完了のために割り当てられた時間をすべて満たすまで膨張する」という法則。UXにおいては、ユーザーの行動を促すための時間的制約などに活用される。
ピーク・エンドの法則 (Peak-End Rule)
人間は過去の経験を判断する際、その期間の「合計」や「平均」ではなく、「最も感情が動いた瞬間（ピーク）」と「最後（エンド）」だけで全体を評価してしまうという法則。
画像優位性効果とは？UXで「文字より画像が記憶に残る」心理を解説
画像優位性効果とは、画像が文字よりも記憶に残りやすく認識されやすい心理現象です。本記事では、アイコン・図解・グラフがUXで効く理由と、活用事例・注意点をわかりやすく解説します。
ポステルの法則 (Postel's Law)
「入力に関しては寛容に、出力に関しては厳格に」。堅牢性原則（Robustness Principle）とも呼ばれ、ユーザーの多様な振る舞いを受け止める設計思想。
現在バイアス (Present Bias)
将来の大きな利益よりも、目先の小さな快楽や「楽（ラク）」を優先してしまう心理。先延ばし（Procrastination）の主原因。
プライミング効果 (Priming)
先行する刺激（プライマー）が、その後の判断や行動に無意識の影響を与える現象。「準備効果」とも呼ばれる。
心理的所有感 (Psychological Ownership)
自分が所有していなくても、「自分のものだ」と感じる心理。カスタマイズ、投資した時間、コントロール感が所有感を生み、愛着やロイヤリティを高める。
心理的リアクタンス (Psychological Reactance)
自分の選択の自由が脅かされたと感じた時、それに反発して自由を回復しようとする心理。禁止されるとしたくなる「カリギュラ効果」もその一種。
ピグマリオン効果 (Pygmalion Effect)
「君ならできる」と期待されると、人はその期待に応えようとしてパフォーマンスが向上する現象。逆に期待されないと成果が下がる現象はゴーレム効果と呼ばれる。
反応型オンボーディング (Reactive Onboarding)
ユーザーが困ったり、特定のアクションを起こした瞬間にだけ表示されるガイド。一方的なツアー（プロアクティブ）とは異なり、ユーザーのペースを尊重する支援手法。
返報性の原理 (Reciprocity)
「誰かに何かをしてもらうと、お返しをしなければならない」と感じる心理的義務感。
代表性ヒューリスティック (Representativeness Heuristic)
「AはBに似ている」という表面的な類似性だけで、AはBのカテゴリーに属すると直感的に判断してしまう思考の近道。
希少性 (Scarcity)
手に入りにくいものほど価値があると感じる心理。「残りわずか」「期間限定」と言われると、焦燥感（FOMO）から欲求が高まる。
選択的注意 (Selective Attention)
膨大な情報の中から、自分にとって重要だと判断した情報だけに意識を向け、それ以外を無視（フィルタリング）する脳の機能。（カクテルパーティー効果）
自己効力感 (Self-Efficacy)
「自分ならできる」「うまくやれる」という自信のこと。これが高いユーザーは、新しい機能に挑戦したり、困難なタスクをやり遂げたりする可能性が高まる。
自己参照効果 (Self-Reference Effect)
「自分自身に関連する情報」は、他の情報よりも記憶に残りやすく、興味を惹きやすいという現象。パーソナライズの強力な根拠となる。
自己奉仕バイアス (Self-Serving Bias)
成功は「自分の能力」のおかげ、失敗は「運や環境」のせいだと考える心理傾向。自尊心を守るための防衛機制。
系列位置効果 (Serial Position Effect)
リストや一連の情報において、最初（初頭効果）と最後（親近効果）の項目が最も記憶に残りやすく、中間の項目は忘れられやすいという記憶の法則。
シグニファイア (Signifier)
アフォーダンス（操作 가능性）をユーザーに発見させるための「視覚的な手がかり」。アイコン、ラベル、矢印など、適切な行動を誘導するためのサイン。
社会的手抜き (Social Loafing)
集団で作業を行う時、一人で作業する時よりも、一人当たりの努力量（パフォーマンス）が低下する現象。「自分一人がサボってもバレないだろう」という心理が働く。
間隔効果 (Spacing Effect)
「短期間の集中学習」よりも、時間を空けて繰り返す「分散学習」の方が、長期的な記憶定着が良いという現象。
スポットライト効果 (Spotlight Effect)
自分の外見や行動が、実際以上に他人に注目されていると思い込んでしまう心理傾向。
現状維持バイアス (Status Quo Bias)
「変える」ことによる利益よりも、損失や労力を過大に見積もり、現在の状況に固執してしまう心理。
サンクコスト効果 (Sunk Cost Effect)
すでに費やしたお金、時間、労力（回収不可能なコスト）が惜しくなり、損をすると分かっていてもやめられずに投資を続けてしまう心理。（コンコルド効果）
調査バイアス (Survey Bias)
質問の表現や順序によって、回答者の答えが誘導されたり歪められたりする現象。
誘惑バンドル (Temptation Bundling)
「やらなければならないこと（苦痛）」と「やりたいこと（快楽）」をセット（バンドル）にすることで、先延ばしを防ぎ、行動を促進するテクニック。
テスト効果 (Testing Effect)
「繰り返し読む」よりも、記憶から情報を「思い出す（テストする）」行為の方が、長期的な記憶定着に効果的であるという現象。
不気味の谷 (Uncanny Valley)
ロボットやCGキャラクターが人間に近づくにつれ、ある一定のラインを超えると急激に「不気味さ・嫌悪感」を感じる現象。リアリティの追求には落とし穴がある。
ユーザーディライト (User Delight)
ユーザーの期待を満たすだけでなく、その期待を「超える」ことで生まれる驚きや喜びの感情。愛されるプロダクトに不可欠な要素。
変動報酬 (Variable Reward)
「毎回必ずもらえる」報酬よりも、「いつ、どれくらい貰えるか分からない（ランダムな）」報酬の方が、脳のドーパミン放出量が増え、行動が強化・習慣化される。
視覚的アンカー (Visual Anchor)
スキャン（流し読み）しているユーザーの視線を繋ぎ止め、次の情報を読むための足がかりとなる目立つ要素。
視覚的階層 (Visual Hierarchy)
情報の重要度に応じて、大きさ・色・配置に強弱をつけることで、ユーザーの視線を「見るべき順序」通りに誘導するデザイン原則。
フォン・レストルフ効果 (Von Restorff Effect)
「孤立効果」とも呼ばれる。複数の類似したオブジェクトが存在する場合、他と異なる（孤立した）オブジェクトが最も記憶に残りやすいという心理現象。
ウェーバーの法則 (Weber's Law)
「違い」を感じるために必要な変化量は、元の刺激の強さに比例するという法則。リデザインや価格変更において、ユーザーに気づかれる（または気づかれない）ための最小単位（JND）を知るのに役立つ。
Z型パターン (Z-Shaped Pattern)
テキストが少なく、画像やCTAが中心のページ（LPなど）において、ユーザーの視線は左上→右上→左下→右下と「Z」の字を描くように動く。
ツァイガルニク効果 (Zeigarnik Effect)
「完了したタスク」よりも「中断されたタスク・未完了のタスク」の方が強く記憶に残るという心理現象。この「モヤモヤ」を利用してユーザーのエンゲージメントを高める。