UI/UX Design Library

UI・UX・デザインの定義

UIとは

ユーザーインターフェース（UI: User Interface）は、人間とシステムが相互作用する具体的な接点である。画面上のボタン・テキスト・アイコン・カラー・レイアウトといった視覚要素のみならず、音声・触覚・ジェスチャーなどマルチモーダルな接点も含む。ISOはUIを「ユーザーと対話型システムの間の情報・コマンド交換に使用されるコンポーネントの集合」（ISO 9241-161:2016）と定義する。UIはUXの実現手段であり、ユーザーが体験を得る唯一の物理的・知覚的インターフェースである。The User Interface (UI) is the concrete point of interaction between humans and systems. It encompasses not only visual elements — buttons, text, icons, colours, and layout — but also multimodal interfaces including voice, haptics, and gestures. ISO defines a user interface as "a set of components used to exchange information and commands between a user and an interactive system" (ISO 9241-161:2016). The UI is the means by which UX is realised: it is the only physical and perceptual surface through which users receive their experience.

UXとは

「ユーザーエクスペリエンス（UX）」という概念は、1990年代にAppleのドナルド・ノーマン（Don Norman）が提唱した。ISO 9241-210:2019はUXを「製品・システム・サービスの使用や期待から生じる人の知覚と反応」と定義している^{[ISO9241-210]}。UXはUIよりも上位の概念であり、プロダクトとの接触前（認知・期待）から使用中、使用後（記憶・推奨）までを包括する。The concept of "User Experience (UX)" was coined by Don Norman at Apple in the 1990s. ISO 9241-210:2019 defines UX as "a person's perceptions and responses that result from the use or anticipated use of a product, system or service."^{[ISO9241-210]} UX is a superordinate concept that encompasses the full arc of human engagement: before use (awareness, expectations), during use, and after use (memory, recommendation).

デザインとは

「デザイン（design）」という語はラテン語の designare（印をつける・計画する）に由来し、意図をもって形や構造を計画する行為全般を指す。デザインは美的装飾に限らず、機能・形態・意味の三つを統合した問題解決のプロセスである。"Design" derives from the Latin designare (to mark out, to plan), and refers broadly to the act of planning form and structure with intention. Design is not limited to aesthetic decoration; it is a problem-solving process that integrates function, form, and meaning.

Herbert Simon（1969）は著書 The Sciences of the Artificial でデザインを「現在の状況をより好ましい状況へと変換する行為（transformation of existing conditions into preferred ones）」と定義した^[Simon1969]。この定義はデザインを「作ること」ではなく「問題を解くこと」と位置づける点で、UI/UXデザインの実践にも通底する。Herbert Simon (1969), in The Sciences of the Artificial, defined design as "the transformation of existing conditions into preferred ones."^[Simon1969] This definition frames design not as "making things" but as "solving problems" — a principle that runs through UI/UX design practice as well.

Victor Papanek（1971）は「すべての人間はデザイナーである（All men are designers）」と述べ、デザインを「意味ある秩序を作ろうとする意識的な努力」と捉えた^{[Papanek1971]}。また世界デザイン機関（WDO／旧 ICSID）は工業デザインを「製品・プロセス・サービス・システム・体験・ビジネスにわたって革新的な解決策を創出する戦略的な問題解決プロセス」と定義しており、デザインの対象が物質的な造形物から体験・システムへと拡張していることを示している。Victor Papanek (1971) declared that "all men are designers," framing design as "a conscious effort to impose meaningful order."^{[Papanek1971]} The World Design Organization (WDO, formerly ICSID) defines industrial design as "a strategic problem-solving process that drives innovation across products, processes, services, systems, experiences, and businesses," indicating how the scope of design has expanded from physical artefacts to experiences and systems.

これらの定義に共通するのは、デザインが「意図をもった問題解決」であるという認識である。UI/UXデザインはこのデザインの実践領域として、デジタルプロダクトにおけるユーザー体験の設計に特化した分野に位置づけられる。Common to all these definitions is the understanding that design is intentional problem-solving. UI/UX design sits within this broader practice of design, specialising in the architecture of user experience within digital products.

UI/UXデザインとは

UI/UXデザインとは、UIデザインとUXデザインを統合した実践領域であり、デジタルプロダクト・サービスにおけるユーザー体験の設計を包括的に担う職能である。上記の定義が示すように、UIとUXはそれぞれ独立した概念でありながら、実務においては不可分の関係にある。UIは体験の物理的・知覚的インターフェースであり、UXはその体験全体の質と意味を規定する。UI/UX design is an integrated practice combining UI design and UX design — the profession responsible for the comprehensive design of user experiences in digital products and services. As the definitions above illustrate, UI and UX are conceptually distinct yet practically inseparable: the UI is the physical and perceptual surface through which experience is delivered, while UX defines the overall quality and meaning of that experience.

5段階モデルに照らすと、UI/UXデザインは全5層にわたる設計判断を統合する。UXデザイン（戦略層・要件層・構造層）が「なぜ・何を・どう構造化するか」を問うのに対し、UIデザイン（骨格層・表層）は「どう見せ・どう操作させるか」を具体化する。この2つの設計思想を一気通貫で実践する点に、UI/UXデザインという分野の独自性がある。Mapped to UI/UX Design 5-Stage Model, UI/UX design integrates design decisions across all five layers. UX design (Strategy, Scope, Structure) asks "why, what, and how to organise," while UI design (Skeleton, Surface) concretises "how to present and how to interact." The distinctive character of UI/UX design as a discipline lies in executing both design philosophies as a seamless continuum.

UI/UXデザインの5段階モデル

※ Jesse James Garrett（2000/2002）の原著 The Elements of User Experience は、5段階モデルをUXの構成要素として提示した。本書ではギャレットの枠組みを踏まえつつ、上位3層をUXデザイン・下位2層をUIデザインとして整理している（詳細は「本書の用語の使い分け」を参照）。※ Jesse James Garrett's original work (2000/2002), The Elements of User Experience, presented the 5-layer model as components of UX. This book builds on Garrett's framework, treating the upper 3 layers as UX design and the lower 2 as UI design (see Terminology Used in This Book).

Jesse James Garrett は著書 The Elements of User Experience（2002）において、デザインを5つの抽象レイヤーで捉えるフレームワークを提唱した^{[Garrett2002]}。「具体性の低い抽象層から具体的な実装層へ」という下から上への構造を持ち、各レイヤーの決定が上位レイヤーの選択肢を制約する。In The Elements of User Experience (2002), Jesse James Garrett proposed a framework that views design through five layers of abstraction ^{[Garrett2002]}. The structure progresses bottom-up — from low-abstraction conceptual layers to concrete implementation layers — where decisions at each layer constrain the options available in the layer above.

ヒューマンセンタードデザイン（HCD）とデザイン思考

ISO 9241-210はHCDを「インタラクティブシステムの設計・開発において人間工学的・使いやすさの知識と技術を適用するアプローチ」と定義する。HCDは①使用状況の把握 → ②要件の明確化 → ③設計ソリューションの作成 → ④要件に対する評価、という反復プロセスで進む。スタンフォードd.schoolが体系化したデザイン思考（共感→問題定義→アイデア創出→プロトタイプ→テスト）はHCDと補完的な関係にある。ISO 9241-210 defines HCD as "an approach to systems design and development that aims to make interactive systems more usable by applying ergonomic and usability knowledge and techniques." HCD proceeds through an iterative process: ① Understanding the context of use → ② Specifying user requirements → ③ Producing design solutions → ④ Evaluating designs against requirements. Design Thinking as systematized by Stanford d.school (Empathize → Define → Ideate → Prototype → Test) is complementary to HCD.

UX・CX・EX・DX — 関連概念の整理

「体験デザイン」をめぐる語彙は急速に拡張しており、UXと隣接する概念を正確に理解することが実務上重要になっている。CX（Customer Experience）・EX（Employee Experience）・DX（Digital Experience / Digital Transformation）・HX（Human Experience）はそれぞれ異なる対象・文脈・観点から「体験」を捉える。The vocabulary around "experience design" has expanded rapidly. Understanding the concepts adjacent to UX is increasingly important in practice. CX (Customer Experience), EX (Employee Experience), DX (Digital Experience / Digital Transformation), and HX (Human Experience) each address "experience" from a different subject, context, and perspective.

概念の包含関係

これらの概念は互いに排他的ではなく、包含・補完の関係にある。最も広い概念が HX で、その下位に CX・EX が並び、UX は特定プロダクトとの相互作用に焦点を絞った概念として位置づけられる。These concepts are not mutually exclusive but stand in a containment and complementary relationship. HX is the broadest concept, with CX and EX as sub-categories. UX focuses specifically on the interaction with a particular product.

第1章　ビジネス目標とUX戦略

ビジネス目標とUX戦略は切り離せない。本章では、経営レベルの戦略（KPI・OKR・競合分析）をUXデザインの言語に変換するプロセスを学ぶ。「なぜこのプロダクトを作るのか」という問いへの答えが、以降のすべての設計判断を規定する。Business goals and UX strategy are inseparable. This chapter covers the process of translating executive-level strategy — KPIs, OKRs, and competitive analysis — into the language of UX design. The answer to "why are we building this product?" determines every design decision that follows.

KPI・OKRの設定Setting KPIs & OKRs

OKR（Objectives and Key Results）^[Doerr2018]はUX目標の設定に有効。代表的UX KPIとして、HEARTフレームワーク（Google）：Happiness / Engagement / Adoption / Retention / Task Success、NPS（推薦意向スコア）、SUSスコア、タスク達成率・完了時間・エラー率がある。OKRs (Objectives and Key Results) ^[Doerr2018] are effective for setting UX goals. Representative UX KPIs include the HEART Framework (Google): Happiness / Engagement / Adoption / Retention / Task Success; NPS (Net Promoter Score); SUS score; and task completion rate, time-on-task, and error rate.

競合分析・ベンチマーキング

UXベンチマーキングでは同一タスクを複数サービスで実行し、完了時間・エラー数・満足度を比較する。競合サービスのヒューリスティック評価を行い、業界標準のUI慣習を把握することも重要である。UX benchmarking involves performing the same task across multiple services and comparing completion time, error count, and satisfaction. Conducting heuristic evaluations of competing services to understand industry-standard UI conventions is also important.

第2章　ユーザーリサーチ

ユーザーリサーチはUXデザインの根幹である。設計者の思い込みを排し、実際のユーザーの行動・動機・文脈を理解するための体系的な調査活動を指す。User research is the backbone of UX design. It is the systematic investigation activity that eliminates designer assumptions and builds understanding of real users' behaviors, motivations, and contexts.

リサーチの種類

ユーザーインタビュー

半構造化インタビュー（Kvale, 1996）^[Kvale1996]はトピックガイドを準備しつつ会話の流れに応じて深掘りを行う形式で、UXリサーチに広く採用されている。Semi-structured interviews (Kvale, 1996) ^[Kvale1996] prepare a topic guide while allowing deep-dives following the conversation's natural flow. This format is widely adopted in UX research.

インタビュー設計の原則Interview Design Principles

• オープンクエスチョン：「はい/いいえ」で答えられない開かれた質問（「そのとき何をしましたか？」）Open questions: Questions that cannot be answered with yes/no ("What did you do at that moment?")
• 5 Whys：「なぜ？」を5回繰り返して動機を掘り下げる5 Whys: Repeatedly asking "Why?" five times to uncover root motivations
• 過去行動への注目：「〜したいですか？」より「最後に〜したのはいつですか？」Focus on past behavior: "When did you last do X?" rather than "Would you like to X?"
• 誘導質問の排除：答えを示唆しない質問設計Avoid leading questions: Design questions that do not suggest the answer

アンケート調査

Likert尺度（5〜7段階評価）は態度・意見の測定に広く使われる。標準化されたUXアンケートとして SUS（System Usability Scale）^[Brooke1996]（10項目・68点以上が許容水準）、UMUX、AttrakDiff などが存在する。Likert scales (5–7 point ratings) are widely used for measuring attitudes and opinions. Standardized UX questionnaires include the SUS (System Usability Scale) ^[Brooke1996] (10 items; score ≥68 is considered acceptable), UMUX, and AttrakDiff.

観察・エスノグラフィー

コンテクスチュアルインクワイアリー（Holtzblatt & Jones, 1993）^{[Holtzblatt1993]}は「マスター–アプレンティス」モデルで調査者がユーザーの作業を観察・対話する手法。自然な文脈でのみ得られる暗黙知を発見できる。Contextual Inquiry (Holtzblatt & Jones, 1993) ^{[Holtzblatt1993]} uses a "master–apprentice" model in which the researcher observes and converses with users during their actual work. It reveals tacit knowledge obtainable only in natural contexts.

グラウンデッドセオリーと文化人類学的リサーチ手法

ユーザーリサーチの理論的基盤は認知心理学だけでなく、社会学・文化人類学にも深く根ざしている。これらの質的研究手法は「なぜユーザーがそのように行動するのか」という文化的・社会的文脈を理解するための枠組みを提供し、インタビューや観察の設計・分析に学術的な裏付けを与える。The theoretical foundations of user research run deep not only into cognitive psychology but also into sociology and cultural anthropology. These qualitative research methods provide frameworks for understanding the cultural and social contexts behind "why users behave as they do," and lend academic grounding to the design and analysis of interviews and observations.

統計的セグメンテーションとデータ駆動ユーザー分類

定量データからユーザーグループを発見する統計的手法は、ペルソナ構築・機能優先度決定・パーソナライゼーション設計の根拠を数値的に補強する。質的リサーチが「なぜ」を掘り下げるのに対し、統計的手法は「どのくらい多くのユーザーが・どのようなパターンで行動するか」を明らかにする。Statistical methods for discovering user groups from quantitative data numerically reinforce the foundations of persona building, feature prioritization, and personalization design. Where qualitative research digs into "why," statistical methods reveal "how many users behave in what patterns."

第3章　ペルソナ

ペルソナはリサーチデータから典型的なユーザー像を合成的に構築するツールであり、設計判断の基準点として機能する。Alan Cooperが1999年に提唱して以来、HCDプロセスの中核的成果物として定着している。Personas synthesize research data into archetypal user profiles that serve as a reference point for design decisions. Since Alan Cooper introduced them in 1999, they have become a core deliverable in human-centered design processes.

ペルソナ

ペルソナはAlan Cooperが1999年に提唱^[Cooper1999]。リサーチデータから典型的ユーザー像を構築し設計判断の基準点とする。構成要素は①基本属性（名前・年齢・職業）②目標・動機 ③フラストレーション・Pain Points ④行動パターン ⑤ユーザー自身の引用、からなる。Personas were proposed by Alan Cooper in 1999 ^[Cooper1999]. They construct a representative user archetype from research data to serve as a reference point for design decisions. Components include: ① basic attributes (name, age, occupation), ② goals & motivations, ③ frustrations & pain points, ④ behavior patterns, and ⑤ verbatim user quotes.

キャスト概念・ペルソナの類型とライフサイクル

Alan Cooper（1999）はペルソナを「キャラクター1人」ではなく、製品に関わる多様なユーザー像の集合体として「キャスト（Cast of Characters）」という概念で提示した。単独のペルソナに最適化した設計は他のユーザーを疎外しうる。キャストとして複数のペルソナを定義し、その中から優先度を付けることで、より包括的かつ現実的な設計判断が可能になる。Alan Cooper (1999) presented personas not as "a single character" but as a collection of diverse user archetypes for a product, under the concept of a "Cast of Characters." Design optimized for a single persona risks alienating other users. Defining multiple personas as a cast and prioritizing among them enables more inclusive and realistic design decisions.

ペルソナのライフサイクルと批判的議論

Pruitt & Adlin（2006）^[Pruitt2006]は著書 The Persona Lifecycle でペルソナを「計画→概念化→導入→維持→廃棄」という組織的プロセスとして体系化した。またGrudin & Pruitt（2002）^[Grudin2002]は、ソフトウェアチームにおけるペルソナの採用障壁（エンジニアの懐疑・エビデンスの欠如・メンテナンスコスト）を実証研究で示した。Pruitt & Adlin (2006) ^[Pruitt2006] systematized personas as an organizational process — "planning → conception → introduction → maintenance → retirement" — in The Persona Lifecycle. Grudin & Pruitt (2002) ^[Grudin2002] used empirical research to identify adoption barriers for personas in software teams (engineering skepticism, lack of evidence, maintenance cost).

批判としては、Chapman & Milham（2006）が「ペルソナは科学的根拠を持たない創作物であり、設計者の偏見を正当化しうる」と指摘した。これに対しFlood et al.（2020）らはデータ駆動型・アルゴリズム的ペルソナ生成によりこの批判に応答している。現代では機械学習によるクラスタリングからペルソナを自動生成するアプローチも実用化されつつある。Chapman & Milham (2006) criticized that "personas are fictional constructs without scientific grounding and can rationalize designer biases." In response, Flood et al. (2020) and others have answered this critique with data-driven, algorithmic persona generation. Today, automatically generating personas from machine-learning clustering is increasingly practical.

ホフステッドの文化次元とクロスカルチュラルUX

Geert Hofstede（1980）^{[Hofstede1980]}は、IBM社員70カ国以上への大規模調査から国家間の文化差を数値化した文化次元理論を提唱した。2001年の改訂版^{[Hofstede2001]}では6次元に拡張された。この理論はペルソナの文化的コンテキスト設定・グローバルUIのデフォルト設計・ローカライゼーション方針の決定に広く参照される。Geert Hofstede (1980) ^{[Hofstede1980]} proposed Cultural Dimensions Theory by quantifying cultural differences between nations from a large-scale survey of IBM employees across 70+ countries. The 2001 revision ^{[Hofstede2001]} expanded it to six dimensions. This theory is widely referenced for setting cultural context in personas, default design for global UIs, and localization policy decisions.

カスタマージャーニーマップ・シナリオ・JTBD

カスタマージャーニーマップ・シナリオ・JTBDは、いずれも「ユーザーの時間軸上の行動・感情・意図」を可視化・言語化するツールである。ペルソナが「誰か」を定義するのに対し、これらのツールは「その人が何をしようとしているか・なぜか」を設計チームに伝える。Customer Journey Maps, scenarios, and JTBD are all tools for visualizing and articulating user behavior, emotion, and intent along a timeline. While personas define "who," these tools tell the design team "what the person is trying to do — and why."

カスタマージャーニーマップ（CJM）

ユーザーが目標達成までに経験するステップ・タッチポイント・感情を可視化したツール^{[Lewrick2018]}。主要構成要素はフェーズ（認知→検討→購買→使用→継続/離脱）、タッチポイント、感情曲線、機会領域、バックステージ。A tool that visualizes the steps, touchpoints, and emotions a user experiences on the way to achieving their goal ^{[Lewrick2018]}. Key components: phases (Awareness → Consideration → Purchase → Use → Retention/Churn), touchpoints, emotional curve, opportunity areas, and backstage actions.

Jobs-to-be-Done（JTBD）理論

Clayton Christensen（2003）が提唱^{[Christensen2003]}。「ユーザーは特定の『ジョブ』を片付けるために製品を雇用する」という視点でニーズを捉える。機能一覧ではなく「誰が、どのような状況で、何を達成しようとしているか」を核心にした設計が可能になる。Proposed by Clayton Christensen (2003) ^{[Christensen2003]}. It frames needs through the lens that "users hire products to get a specific job done." This enables design focused on "who is trying to achieve what, in which situation" — rather than a feature list.

シナリオとシナリオベースドデザイン

John M. Carroll が著書 Scenario-Based Design（1995）^{[Carroll1995]}で体系化したシナリオベースドデザイン（SBD）は、ユーザーの具体的な行動文脈を「物語形式」で記述し、それを設計・評価の核に置く手法である。シナリオは「誰が・何のために・どのような文脈で・何をするか」を語る短い物語であり、要求仕様を具体的なユースケースとして可視化する。Alan Cooper（1999）^[Cooper1999]はペルソナと組み合わせてゴール指向デザインの文脈で活用し、コンテキストシナリオ・キーパスシナリオ・バリデーションシナリオの3種類を定義した。John M. Carroll systematized Scenario-Based Design (SBD) in Scenario-Based Design (1995) ^{[Carroll1995]}. It places concrete user action contexts written as "narrative stories" at the core of design and evaluation. A scenario is a short story describing "who does what, for what purpose, in what context" — making requirements visible as concrete use cases. Alan Cooper (1999) ^[Cooper1999] integrated scenarios with personas in Goal-Directed Design, defining three types: context scenarios, key-path scenarios, and validation scenarios.

第4章　機能要件とコンテンツ要件

ユーザーニーズを「プロダクトで何を実現するか」に変換したものが要件である。本章では機能要件とコンテンツ要件をユーザーストーリーとして記述し、スコープを明確に管理する手法を学ぶ。Requirements translate user needs into "what the product must do." This chapter covers how to articulate functional and content requirements as user stories and manage scope clearly throughout the design process.

ユーザーストーリーとエピック

ユーザーストーリーの構造：「〔ロール〕として、〔機能〕できるようにしたい。なぜなら〔目的〕だから。」。Bill Wakeが提唱したINVEST原則^[Wake2003]は品質基準：Independent（独立）/ Negotiable（交渉可能）/ Valuable（価値ある）/ Estimable（見積もり可能）/ Small（小さい）/ Testable（テスト可能）。User story format: "As a [role], I want to [feature] so that [purpose]." Bill Wake's INVEST criteria ^[Wake2003] define quality: Independent / Negotiable / Valuable / Estimable / Small / Testable.

コンテンツ戦略

Kristina Halvorson（2009）^{[Halvorson2009]}はコンテンツ戦略を「有用で使いやすいコンテンツの計画・作成・提供・管理」と定義。コンテンツは後付けの要素ではなく、構造設計と並行して検討すべき核心的要素である。コンテンツインベントリ（全量把握）とコンテンツオーディット（有用性・正確性の評価）が基本作業。Kristina Halvorson (2009) ^{[Halvorson2009]} defines content strategy as "the planning, creation, delivery, and governance of useful, usable content." Content is not an afterthought — it is a core element to be considered in parallel with structural design. Content inventory (full audit of existing content) and content audit (evaluating usefulness and accuracy) are the foundational tasks.

第5章　優先度付けと要件管理

すべての要件を同時に実現することはできない。本章では、制約のある資源のなかで「どの機能・施策に投資するか」を判断するための優先度付けフレームワーク（MoSCoW法・RICEスコアリング等）を学ぶ。Not all requirements can be realized at once. This chapter covers frameworks for deciding which features and initiatives to invest in given constrained resources — including the MoSCoW method and RICE scoring.

限られたリソースの中で最大の価値を生み出すために、機能・施策の優先順位を科学的に決定するプロセスを扱う。MoSCoW法・RICEスコアリングをはじめとする複数のフレームワークを比較し、プロダクトバックログ管理の実践を学ぶ。This chapter examines how to scientifically determine the priority of features and initiatives to maximize value within resource constraints. Multiple frameworks are compared — MoSCoW, RICE scoring — alongside practical backlog management guidance.

MoSCoW法

RICEスコアリング

Intercomが開発^[Rice2018]。スコア＝（Reach × Impact × Confidence）÷ Effort。Reach：月間影響ユーザー数、Impact：1ユーザーへの影響度、Confidence：推定への自信度（%）、Effort：人月工数。スコアが高いほど優先度が高い。Developed by Intercom ^[Rice2018]. Score = (Reach × Impact × Confidence) ÷ Effort. Reach: monthly users affected; Impact: effect on one user; Confidence: confidence in estimates (%); Effort: person-months. Higher score = higher priority.

第6章　情報アーキテクチャ（IA）

情報アーキテクチャとは、ユーザーが必要な情報を「見つけられる」ように情報を組織化・構造化する設計活動である。LATCHの原理から図書館情報学の知見まで、IAの知的基盤と実践手法を体系的に学ぶ。Information architecture is the design activity of organizing and structuring information so users can find what they need. This chapter systematically covers both the intellectual foundations of IA — from LATCH principles to library and information science — and practical implementation methods.

IAの基礎理論

Peter Morville と Louis Rosenfeld が著書 Information Architecture for the World Wide Web（1998）^{[MorvilleRosenfeld1998]}で体系化。「検索システム・組織化システム・ラベリングシステム・ナビゲーションシステム」の4要素でIAを構成する。Morvilleは「Find ability Honeycomb」として、Findable / Accessible / Clear / Communicative / Useful / Credible / Controllable / Valuableの8属性でWeb体験の質を評価した。Systematized by Peter Morville and Louis Rosenfeld in Information Architecture for the World Wide Web (1998) ^{[MorvilleRosenfeld1998]}. IA is composed of four systems: search, organization, labeling, and navigation. Morville evaluated web experience quality through 8 attributes in the "Findability Honeycomb": Findable / Accessible / Clear / Communicative / Useful / Credible / Controllable / Valuable.

ワーマンのLATCHと情報組織論

リチャード・ソール・ワーマン（Richard Saul Wurman）は著書 Information Architects（1996）^[Wurman1996]で、あらゆる情報を組織化する5つの根本軸として LATCH を提唱した。この枠組みは図書館情報学の分類理論とも深く接続し、デジタル時代のIAに継承されている。Richard Saul Wurman proposed LATCH in Information Architects (1996)^[Wurman1996] as five fundamental axes for organizing any information. The framework connects deeply with library and information science classification theory, and has been carried forward into digital-age IA.

図書館情報学（LIS）とIAの接続Library & Information Science (LIS) and IA

IAの知的基盤の多くは図書館情報学（Library and Information Science: LIS）に由来する。LISはもともと書籍・文書を「どう分類し・どう見つけさせるか」を科学的に研究する学問であり、その概念はWebのIAに直接継承された。Morville ＆ Rosenfeld（1998）の『Web情報アーキテクチャ』はまさにLISとWebを橋渡しした著作である。Much of IA's intellectual foundation originates in Library and Information Science (LIS), which scientifically studies how to classify and surface documents. These concepts were directly inherited by web-based IA. Morville & Rosenfeld's Information Architecture for the World Wide Web (1998) was precisely the work that bridged LIS and the web.

カードソーティング

ユーザーのメンタルモデルに基づいたナビゲーション構造を発見する手法。A method for discovering navigation structures aligned with users' mental models.

ナビゲーションパターン

• 階層型（Hierarchical）：トップダウンのツリー構造。大規模サイトの標準形Hierarchical: Top-down tree structure. Standard for large-scale sites.
• シーケンシャル：ステップ順に進む。購入フロー・オンボーディングに適するSequential: Proceeds step by step. Suitable for checkout flows and onboarding.
• マトリクス型：複数軸で分類。Eコマースのファセット検索などMatrix: Multi-axis classification. E.g., faceted search in e-commerce.
• モバイルパターン：タブバー（iOS標準）、ハンバーガーメニュー、ボトムシート、ブレッドクラムMobile patterns: Tab bar (iOS standard), hamburger menu, bottom sheet, breadcrumbs.

第7章　インタラクションデザイン

インタラクションデザインは、人とシステムの「やりとり」を設計する営みである。認知科学・行動経済学・学習理論から蓄積された知見を土台に、ユーザーの行動サイクル・メンタルモデル・アフォーダンスを理解し、直感的なインタラクションを設計する原則を体系的に学ぶ。Interaction design is the practice of designing the "conversation" between humans and systems. Grounded in decades of research from cognitive science, behavioral economics, and learning theory, this chapter covers Norman's action cycle, mental models, affordances, and the principles for designing intuitive interactions.

認知心理学の法則

UI/UXデザインに直接適用できる認知科学の法則群。Jon Yablonski（2020）の Laws of UX はこれらを体系化した代表的な参照資料であり、各法則は特定のレイヤーや設計判断と対応している。

学習理論とUXデザイン

ユーザーはインターフェースを「学習」する。教育心理学・認知科学における学習理論は、UIの習熟設計・オンボーディング・エラーリカバリーの根拠として直接活用できる。Users "learn" interfaces. Learning theories from educational psychology and cognitive science directly inform the design of skill acquisition, onboarding, and error recovery in UI.

デネットの3つのスタンス

哲学者・認知科学者のダニエル・デネット（Daniel Dennett）は、著書 The Intentional Stance（1987）において、システムや存在を理解する際の3つの認識論的立場（スタンス）を定義した^{[Dennett1987]}。UIデザインにおいては、ユーザーがどのスタンスで製品を捉えるかによって、期待するフィードバック・エラーメッセージ・擬人化の許容度が根本的に異なる。Philosopher and cognitive scientist Daniel Dennett defined three epistemological stances in The Intentional Stance (1987)^{[Dennett1987]}. In UI design, the stance a user takes toward a product fundamentally shapes their expectations for feedback, error messages, and acceptable anthropomorphism.

行動経済学とUI/UXデザイン

Kahneman（2011）の Thinking, Fast and Slow に代表される行動経済学は、人間が「合理的ではなく予測可能な形で非合理」であることを実証した。UI/UXデザインはこの知見を、ユーザーの意思決定支援・デフォルト設計・リスク知覚のコントロールに活用する。

ミンスキーの心の理論

マービン・ミンスキー（Marvin Minsky, 1927–2016）はMITの人工知能研究の先駆者であり、認知構造を理解するための2つの重要なモデルを提示した^{[Minsky1986][Minsky2006]}。どちらもUXデザインにおけるユーザーの情報処理・期待形成・インターフェース設計の理論的根拠となる。Marvin Minsky (1927–2016) was a pioneering AI researcher at MIT who proposed two influential models for understanding cognitive structure^{[Minsky1986][Minsky2006]}. Both provide a theoretical basis for understanding how users process information, form expectations, and navigate interfaces.

① Society of Mind（心の社会）① Society of Mind

著書 The Society of Mind（1986）で提唱。知性・意識は単一の制御システムからではなく、「エージェント」と呼ばれる無数の小さなプロセスの相互作用から創発すると主張した。各エージェントは限定的な機能しか持たないが、集合的に複雑な認知行動を生み出す。Proposed in The Society of Mind (1986). Intelligence and consciousness emerge not from a single controlling system, but from the interaction of countless small processes called "agents." Each agent has limited function, but collectively they produce complex cognitive behavior.

② フレーム理論（Frame Theory）② Frame Theory

ミンスキーは1974年の論文 A Framework for Representing Knowledge でフレーム理論を提唱した。新しい状況に遭遇したとき、人は過去の経験から抽出した「フレーム（認知的テンプレート）」を適用して状況を理解しようとする。フレームは「デフォルト値」を持ち、情報が不完全な場合でも予測的な理解を可能にする。Minsky proposed Frame Theory in his 1974 paper A Framework for Representing Knowledge. When encountering a new situation, people apply "frames" (cognitive templates extracted from past experience) to make sense of it. Frames carry "default values" that enable predictive understanding even when information is incomplete.

アフォーダンス・Normanの7原則

Gibson提唱のアフォーダンス概念をNormanはデザインに転用。さらに「シグニファイア（アフォーダンスを知覚可能にするサイン）」を区別した。The Design of Everyday Things 改訂版（2013）の7原則：Norman adapted Gibson's affordance concept for design, further distinguishing "signifiers" (signs that make affordances perceptible). The 7 principles from The Design of Everyday Things revised edition (2013):

1. Discoverability：何が可能か分かるDiscoverability: It is possible to determine what actions are available.
2. Feedback：操作結果が明確に伝わるFeedback: The result of an action is communicated clearly.
3. Conceptual Model：一貫したモデルを提供するConceptual Model: Provides a consistent model of how the system works.
4. Affordances：操作を直感的に示すAffordances: Suggest operations intuitively.
5. Signifiers：意味を知覚できるサインSignifiers: Perceptible signs that convey meaning.
6. Mappings：操作と結果の対応が自然Mappings: Natural correspondence between controls and their effects.
7. Constraints：誤操作を防ぐ制約を設けるConstraints: Placing limits to prevent errors.

イメージスキーマと身体化認知

認知言語学者のジョージ・レイコフ（George Lakoff）とマーク・ジョンソン（Mark Johnson）は、人間の概念体系が身体的・物理的経験に根ざすという「身体化認知（Embodied Cognition）」の立場から、Philosophy in the Flesh（1999）などでイメージスキーマを体系化した^{[Lakoff1987][LakoffJohnson1999]}。イメージスキーマとは、反復的な身体経験から抽出される抽象的な構造パターンであり、言語・思考・インターフェース設計の基盤となる。Cognitive linguists George Lakoff and Mark Johnson systematized image schemas from the "embodied cognition" perspective — the view that human conceptual systems are grounded in bodily and physical experience — in works including Philosophy in the Flesh (1999)^{[Lakoff1987][LakoffJohnson1999]}. Image schemas are abstract structural patterns extracted from repeated bodily experience that underlie language, thought, and interface design.

メンタルモデルとコンセプチュアルモデル

メンタルモデルとはユーザーがシステムの動作について持つ内的な表象である。Don Normanは、デザイナーが意図する「コンセプチュアルモデル」とユーザーの「メンタルモデル」の一致度が使いやすさを決定すると論じた^[Norman1988]。A mental model is the internal representation users hold about how a system works. Don Norman argued that usability is determined by how closely the designer's intended "conceptual model" matches the user's "mental model" ^[Norman1988].

シュナイダーマンの8つの黄金律

Ben Shneidermanが著書 Designing the User Interface（1987, 第6版2016）で提唱した、インタラクティブシステムの設計原則。ニールセンの10ヒューリスティクスと並んで広く参照される専門家評価の基準であり、特にインターフェースの一貫性・効率・エラー対応を重視する。Design principles for interactive systems proposed by Ben Shneiderman in Designing the User Interface (1987, 6th ed. 2016). Widely cited alongside Nielsen's 10 Heuristics, with particular emphasis on interface consistency, efficiency, and error handling.

ノーマンの行動サイクルと知覚プロセス

認知科学者・デザイン研究者のドナルド・ノーマン（Donald Norman）は、著書 The Design of Everyday Things（1988/2013）でユーザーの行動を7段階のサイクルとして記述し^[Norman1988]、「実行のガルフ」と「評価のガルフ」という概念によってUIの断絶を分析した。Cognitive scientist and design researcher Donald Norman described user behavior as a 7-stage cycle in The Design of Everyday Things (1988/2013)^[Norman1988], and analyzed UI breakdowns through the concepts of the "Gulf of Execution" and "Gulf of Evaluation."

7段階行動サイクルThe 7-Stage Action Cycle

実行のガルフと評価のガルフGulf of Execution and Gulf of Evaluation

ノーマンは、ユーザーの意図とシステムの状態との間に生じる2種類の「断絶（ガルフ）」を定義した。Norman defined two types of "gulfs" — gaps between the user's intent and the system's state.

マイクロインタラクション

Dan Saffer（2013）^[Saffer2013]が体系化。「1つのタスクに集中した小さなデザイン瞬間」であり、トリガー・ルール・フィードバック・ループ/モードの4要素で構成される。いいねボタンのアニメーション、プルトゥリフレッシュ、送信後チェックマークなどが典型例。優れたマイクロインタラクションは機能を果たしつつ喜び（Delight）を生む。Systematized by Dan Saffer (2013) ^[Saffer2013]. "Small design moments focused on a single task," composed of 4 elements: Trigger, Rules, Feedback, and Loops/Modes. Classic examples include like-button animations, pull-to-refresh, and post-submit checkmarks. Great microinteractions fulfill a function while generating delight.

第8章　ワイヤーフレームとプロトタイプ

ワイヤーフレームとプロトタイプは、アイデアを可視化して素早く検証するための設計ツールである。忠実度（ローファイ〜ハイファイ）の選択基準と、目的に応じたプロトタイプ手法を理解し、無駄な作り込みを防いでフィードバックを最大化する。Wireframes and prototypes are design tools for visualizing ideas and validating them quickly. This chapter covers how to choose the right fidelity level — from low to high — and which prototyping method fits each purpose, helping teams maximize feedback while minimizing wasted effort.

アイデアを検証可能な形に具体化するワイヤーフレームとプロトタイプの技法を解説する。ローファイ（手書き・ブロック図）からハイファイ（実際のUI要素・実データ近似）まで忠実度の選択と、インタラクティブ検証の方法論を学ぶ。This chapter explains wireframing and prototyping techniques that turn ideas into testable artifacts. It covers choosing the right fidelity level from lo-fi sketches to hi-fi interactive mockups, and methods for validating interactions before engineering handoff.

ワイヤーフレーミング

ワイヤーフレームはインターフェースの構造・コンテンツ配置・機能を視覚的に表現する設計文書で、視覚デザインの詳細を意図的に省略する。A wireframe is a design document that visually represents interface structure, content placement, and functionality, intentionally omitting visual design details.

プロトタイピング

プロトタイプは「テストするために作る不完全な試作品」。IDEO のティム・ブラウンは「プロトタイプは考えを形にするプロセスそのもの」と述べている。A prototype is "an incomplete mock-up built to be tested." Tim Brown of IDEO describes it as "the process of making ideas tangible."

• ペーパープロトタイプ：最速・最安。ロールプレイ形式でテスト可能Paper prototype: Fastest and cheapest. Testable in role-play format.
• クリッカブルプロトタイプ：Figmaリンク等で画面遷移を実現。ユーザビリティテストに最適Clickable prototype: Screen transitions via Figma links. Ideal for usability testing.
• コードプロトタイプ：React/HTML実装。実機動作・パフォーマンス確認に有効Code prototype: React/HTML implementation. Useful for verifying real device behavior and performance.
• Wizard of Oz：AIや複雑な処理を人手でシミュレート。コンセプト検証に有効Wizard of Oz: Manually simulating AI or complex processes. Useful for concept validation.

ワイヤーフレームとプロトタイプの学術的背景

ワイヤーフレームとプロトタイプの実践は、HCI研究・ソフトウェア工学・デザイン方法論の知見を統合したものである。「なぜ作る前に試作するのか」「なぜ忠実度を意図的に下げるのか」という問いに対して、研究の蓄積が明確な答えを与えている。The practice of wireframing and prototyping integrates insights from HCI research, software engineering, and design methodology. Research has built a clear answer to the questions "why create prototypes before building?" and "why intentionally lower fidelity?"

第9章　UIデザインパターン

UIデザインパターンとは、特定のインタラクション課題に対する再利用可能な設計の解である。フォームデザイン・モバイルUXの基本から、オブジェクト指向UI（OOUI）のような設計思想まで、現場で使えるパターンを体系的に学ぶ。UI design patterns are reusable solutions to specific interaction problems. This chapter covers practical patterns from form design and mobile UX fundamentals to the object-oriented design thinking of OOUI.

OOUI（オブジェクト指向UI）

Jef Raskin が1980年代に提唱し、後に荻野剛仁・上野学らが体系化した UIデザイン手法。タスク（動詞）ではなくオブジェクト（名詞）を起点に UIを構造化する。「ファイルをどう操作するか」ではなく「ファイルという実体が画面にある」という考え方が基本となる。

OOUIの設計手順は①ドメインのオブジェクト（名詞）を洗い出す → ②各オブジェクトに対する操作（動詞）を定義する → ③コレクション画面（一覧）とシングル画面（詳細）のペアで画面を構成する、という流れになる。現代のSaaSプロダクトやOS（macOS Finder・Windows Explorer）はほぼ OOUI の構造を採用している。

OOUX（オブジェクト指向UX）

OOUX（Object-Oriented UX）は、Sophia V. Prater が2014年ごろに提唱し、OOUX.com（2018）で体系化したUX設計方法論。OOUIが「UIをどう構造化するか」というパターン言語であるのに対し、OOUXは要件定義・情報設計・UI設計を貫く設計プロセス全体の骨格を提供する。中心的な分析フレームワークは ORCA（Objects / Relationships / CTAs / Attributes）と呼ばれる。ORCA によって作成されるオブジェクトマップが、すべての画面設計の起点となる。

フォームデザイン

Luke Wroblewski著 Web Form Design（2008）^{[Wroblewski2008]}はフォームデザインの標準的参考書。Luke Wroblewski's Web Form Design (2008) ^{[Wroblewski2008]} is the standard reference for form design.

• シングルカラム：マルチカラムより完了率が高いSingle column: Higher completion rate than multi-column.
• ラベルは上配置：左配置より視線移動が少なく入力速度向上Labels above fields: Less eye movement than left-aligned labels, improves input speed.
• インラインバリデーション：送信後でなく入力中にリアルタイム検証Inline validation: Real-time validation during input, not after submission.
• プレースホルダー≠ラベル：入力後に消えるため、ラベルの代替には不適Placeholder ≠ Label: Disappears after input, unsuitable as a label replacement.
• エラーメッセージは具体的に：「入力エラー」→「メールアドレスに@が含まれていません」Specific error messages: "Input error" → "Email address must contain @"
• 必須/任意の明示：必須が多い場合は任意項目に「（任意）」を付けるMark required / optional: When most fields are required, mark optional ones with "(optional)".

モバイルUX設計

Steven Hoober の調査（2013）^[Hoober2013]では、スマートフォンユーザーの49%が片手で端末を持ち拇指で操作する。主要アクションは画面下部中央付近（到達容易ゾーン）に配置するのが基本原則。Steven Hoober's research (2013) ^[Hoober2013] found that 49% of smartphone users hold their device in one hand and operate it with their thumb. The core principle: place primary actions near the lower-center of the screen (the "easy reach zone").

タッチターゲットサイズ基準Touch Target Size Standards

文化・読字方向とUIデザイン：双方向性と方向性の設計

UIの「当たり前」の多くは英語圏の左→右（LTR: Left-to-Right）読字文化を前提に構築されてきた。しかしアラビア語・ヘブライ語・ペルシャ語・ウルドゥー語は右→左（RTL: Right-to-Left）、モンゴル語は上→下の縦書きを基本とする。読字方向の差異はレイアウト・ナビゲーション・進行方向の認知・視線の流れすべてに影響し、グローバルUIではこの文化的差異を設計レベルで考慮することが必須である。Many of UI's "obvious" conventions were built on the assumption of the English-speaking world's left-to-right (LTR) reading culture. However, Arabic, Hebrew, Persian, and Urdu are right-to-left (RTL); Mongolian is traditionally top-to-bottom vertical. Differences in reading direction affect layout, navigation, directionality cognition, and visual flow across the board. In global UI design, considering these cultural differences at the design level is essential.

① 読字方向とUIへの影響

② 読字方向と視線走査パターン

Chabris & Simons（1999）やPastor（2008）の研究は、読字文化によってアイトラッキングの初期視点や視線の流れが異なることを示している。LTR文化では左上に視線が固定されやすく（F字パターンの起点）、RTL文化では右上に固定される傾向がある。Kondratova & Goldfarb（2007）^{[Kondratova2007]}は「クロスカルチュラルWebデザイン」でこれを実証的に検討し、文化的背景が情報の認知優先度を規定することを示した。Research by Chabris & Simons (1999) and Pastor (2008) shows that initial eye fixation and visual flow differ by reading culture. LTR cultures tend to anchor attention at the top-left (origin of the F-pattern); RTL cultures tend to fixate at the top-right. Kondratova & Goldfarb (2007) ^{[Kondratova2007]} empirically examined this in "cross-cultural web design," demonstrating that cultural background governs cognitive prioritization of information.

③ CSSによる双方向性の実装

レイアウトパターンとUIレイアウト原則

レイアウトとは「何をどこに置くか」の体系的決定である。視線の流れ・情報の重み・インタラクションの優先順位を空間に落とし込む行為であり、骨格層における最も基礎的な設計判断を担う。レイアウトの原則は20世紀の印刷デザイン・建築・芸術運動から継承されており、デジタルUIはその文脈を引き継ぎながら独自の制約（デバイス多様性・インタラクション・動的コンテンツ）に対応している。Layout is the systematic determination of what goes where. It is the act of translating visual flow, information weight, and interaction priority into spatial placement — the most foundational design judgment of the Skeleton Plane. Layout principles are inherited from 20th-century print design, architecture, and art movements; digital UI continues that lineage while responding to its own constraints: device diversity, interaction, and dynamic content.

① 視覚的走査パターン

アイトラッキング研究が明らかにした「ユーザーの目の動き」の法則は、情報の配置優先順位を決定する根拠となる。Jakob Nielsen のNN/g研究（2006）^{[Nielsen2006]} が最も広く引用される。Laws of eye movement revealed through eye-tracking research form the basis for determining information placement priority. The NN/g research by Jakob Nielsen (2006) ^{[Nielsen2006]} is the most widely cited.

② UIレイアウトの基本原則

③ 代表的UIレイアウトパターン

画面遷移の構造分類と設計判断

画面遷移は「ナビゲーションの空間的論理」を視覚的に伝えるインタラクションである。どのタイプの遷移を選択するかは表層（モーションの速度・イージング）の問題ではなく、情報構造における要素間の関係性・タスクの文脈・割り込みの必要性という骨格層の判断に基づく。遷移タイプの誤選択はユーザーの空間的メンタルモデルを混乱させ、迷子感の原因となる。Screen transitions visually communicate the "spatial logic of navigation." Choosing a transition type is not a Surface-layer question of animation speed or easing — it is a Skeleton-layer judgment based on relationships between elements in information structure, task context, and whether interruption is warranted. Choosing the wrong transition type disrupts the user's spatial mental model and is a primary cause of disorientation.

① 遷移タイプの分類

② モーダル使用判断フレームワーク

モーダルは「ユーザーの現在のフローを強制停止する」という意味で最もコストが高い遷移パターンである。使いすぎは認知的疲労とフラストレーションを招く。以下の基準で使用判断を行う。Modals are the highest-cost transition pattern because they forcibly suspend the user's current flow. Overuse leads to cognitive fatigue and frustration. Use the following criteria to decide when modals are appropriate.

③ ナビゲーション構造と遷移タイプのマッピング

第10章　ビジュアルデザイン基礎

ビジュアルデザインは「見た目の好み」ではなく、情報の優先度・ユーザーの視線誘導・感情的反応を制御する専門技術である。タイポグラフィ・カラー理論・グリッドシステムの原則を理解し、視覚的な一貫性と可読性を設計する方法を学ぶ。Visual design is not about aesthetic preference — it is the professional discipline of controlling information hierarchy, directing user attention, and shaping emotional response. This chapter covers the principles of typography, color theory, and grid systems for designing visual consistency and readability.

タイポグラフィ

Robert Bringhurst の The Elements of Typographic Style^{[Bringhurst1992]}は組版の古典的参照書。UIデザインにおいてタイポグラフィは情報の階層・読みやすさ・ブランドを伝える最も基本的な要素である。Robert Bringhurst's The Elements of Typographic Style ^{[Bringhurst1992]} is the classic typesetting reference. In UI design, typography is the most fundamental element for conveying information hierarchy, readability, and brand.

日本語タイポグラフィの特殊性Japanese Typography Specifics

• 漢字・ひらがな・カタカナ・英数字の混在には欧文ルールの直接適用に注意Be careful when directly applying Western typography rules to mixed kanji/hiragana/katakana/alphanumeric text.
• JIS X 4051「日本語組版処理の要件」に準拠した行組版が基本Line composition should comply with JIS X 4051 "Requirements for Japanese Text Layout."
• 推奨本文フォント：Noto Sans JP、Hiragino Kaku Gothic（macOS/iOS）Recommended body fonts: Noto Sans JP, Hiragino Kaku Gothic (macOS/iOS).

カラーセオリーと配色

• Primary Color：ブランドを象徴するメインカラー。CTAに使用Primary Color: Main color representing the brand. Used for CTAs.
• Secondary Color：補助的な強調・アクセントSecondary Color: Supporting emphasis and accent.
• Neutral Colors：背景・テキスト・ボーダー。グレースケールNeutral Colors: Backgrounds, text, borders. Grayscale range.
• Semantic Colors：Success（緑）/ Warning（黄/橙）/ Error（赤）/ Info（青）Semantic Colors: Success (green) / Warning (yellow/orange) / Error (red) / Info (blue).

グリッドシステムとレイアウト

8pt グリッド：すべてのスペーシングを8の倍数（4, 8, 16, 24, 32, 48, 64px）で統一。デザイントークンとして spacing-1=4px / spacing-2=8px / spacing-4=16px 等の命名規約で実装と接続する。Webの標準的グリッドは12カラム（Bootstrap由来）だが、Material Designの4px基底グリッドも広く採用されている。8pt Grid: Unify all spacing to multiples of 8 (4, 8, 16, 24, 32, 48, 64px). Connect to implementation via Design Tokens with naming conventions like spacing-1=4px / spacing-2=8px / spacing-4=16px. The standard web grid is 12 columns (Bootstrap-derived), but Material Design's 4px base grid is also widely adopted.

ゲシュタルト原則

Max Wertheimer（1923）^{[Wertheimer1923]}が創始し、Wolfgang Köhler・Kurt Koffka らが発展させたゲシュタルト心理学は、「人間はバラバラな要素の集合ではなく、全体的なパターン（ゲシュタルト）として知覚する」という原理を核心とする。この知見は視覚デザインにおいて、ユーザーが要素間の関係性をどのように自動的に解釈するかを予測するための基盤理論として機能する。Founded by Max Wertheimer (1923) ^{[Wertheimer1923]} and developed by Wolfgang Köhler and Kurt Koffka, Gestalt psychology holds that humans perceive not collections of isolated elements but holistic patterns (Gestalten). In visual design, it serves as the foundational theory for predicting how users automatically interpret relationships between elements.

余白とホワイトスペース

余白（Whitespace / Negative Space）とは、コンテンツが存在しない領域そのものをデザイン要素として積極的に活用する概念である。Jan Tschichold（1928）^{[Tschichold1928]}が近代組版の基礎として体系化し、Josef Müller-Brockmann（1961）^{[MuellerBrockmann1961]}がグリッドシステムと組み合わせて発展させた。デジタルUIにおいても余白は「何もない無駄なスペース」ではなく、視線誘導・可読性・ブランド品質を決定する設計判断である。Whitespace (negative space) is the active use of content-free areas as design elements. Jan Tschichold (1928) ^{[Tschichold1928]} systematized it as the foundation of modern typography, and Josef Müller-Brockmann (1961) ^{[MuellerBrockmann1961]} developed it in combination with grid systems. In digital UI, whitespace is not "empty wasted space" — it is a design decision that determines gaze direction, readability, and brand quality.

色彩心理学

Johannes Itten（1961）^[Itten1961]がバウハウスで体系化した色彩論を起点に、Faber Birren（1961）・Eva Heller（1992）^[Heller1992]らが色と感情の関係を実証的に研究した。色彩は単なる美的選択ではなく、注意喚起・感情状態・ブランドの信頼性知覚を制御する認知的インターフェースである。ただし色彩の意味は文化圏によって大きく異なるため、グローバルプロダクトではローカライゼーション検討が必須となる。Building on Johannes Itten's (1961) ^[Itten1961] color theory systematized at the Bauhaus, Faber Birren (1961) and Eva Heller (1992) ^[Heller1992] empirically researched the relationship between color and emotion. Color is not merely an aesthetic choice — it is a cognitive interface that controls attention, emotional state, and perceived brand trustworthiness. However, the meaning of color varies significantly across cultures, making localization considerations essential for global products.

形状の心理作用

Rudolf Arnheim は著書 Art and Visual Perception（1954 / 1974年改訂）^{[Arnheim1954]}で、視覚的形状が感情・意味・動勢（Dynamic）を喚起することを体系的に論じた。UIデザインにおいては、角の丸み・線の太さ・形状の輪郭が、ユーザーの安心感・信頼感・緊張感に直接影響する。In Art and Visual Perception (1954, revised 1974) ^{[Arnheim1954]}, Rudolf Arnheim systematically argued that visual shapes evoke emotions, meanings, and dynamic tensions. In UI design, corner rounding, line weight, and shape contours directly affect user feelings of safety, trust, and tension.

UIの表現様式と潮流

UIデザインの視覚スタイルは、テクノロジーの変化・文化的文脈・ユーザー心理のトレンドを反映しながら変遷してきた。各様式は単なる「見た目」ではなく、当時のデバイス制約・インタラクション哲学・ブランド戦略と密接に結びついている。The visual styles of UI design have evolved in response to technological shifts, cultural contexts, and user psychology trends. Each style is not merely an aesthetic choice but is deeply connected to the device constraints, interaction philosophy, and brand strategy of its era.

UI様式の変遷タイムライン

アイコノグラフィと記号論：アイコンの意味論的基盤

アイコンは「最小のビジュアルコミュニケーション単位」であり、表層における情報伝達の効率を左右する。しかしアイコンの意味は自明ではなく、記号としての性質・文化的文脈・学習履歴に深く依存する。記号論（セミオティクス）と認知心理学の知見がアイコン設計の学術的基盤を提供している。An icon is "the smallest unit of visual communication" and determines the efficiency of information conveyance at the Surface layer. However, icon meaning is not self-evident — it depends deeply on semiotic properties, cultural context, and learned associations. Semiotics and cognitive psychology provide the academic foundation for icon design.

① パースの記号三分類（Semiotic Triad）

Charles Sanders Peirce（1867 / 1903）^[Peirce1903] が提唱した記号の3類型は、UIアイコンを設計・評価するための基礎的枠組みとなっている。The three-class typology of signs proposed by Charles Sanders Peirce (1867/1903) ^[Peirce1903] provides the foundational framework for designing and evaluating UI icons.

② アイコン理解の研究系譜

③ アイコン設計の実践原則