補助用語
実務で検索する価値はあるが、独立した様式の条件を通らない語を、落ちた理由とともに残している。様式の件数には含めない。
Responsive Web Design
レスポンシブ・ウェブデザイン / 設計法
画面幅ごとに別のページを作るのではなく、可変グリッド、柔軟な画像、メディアクエリで一つの文書を組み替える設計法。Ethan Marcotteが2010年に名づけ、固定幅のページを端末へ適応するレイアウトへ転換した。
- 様式にしない理由
- 一つの文書を画面幅へ適応させる設計法であり、固有の見た目を決めない。
- 出典
- A List Apart — Responsive Web Design (Ethan Marcotte)
- 近い様式
- Swiss / Bento Grid
Dark Mode
ダークモード / 表示モード
低照度の環境へ合わせて、画面全体を暗い配色へ切り替えるシステム外観。黒へ反転するだけでなく、背景を基底と前景の段階へ分け、意味色・画像・透明度・コントラストを暗い地に合わせて再設計する。
- 様式にしない理由
- ほぼあらゆる様式へ適用できる配色モードで、独立した視覚言語ではない。
- 出典
- Apple Human Interface Guidelines — Dark Mode
- 近い様式
- Aqua / Solarized
VA.gov Design System
VA.govデザインシステム / 設計基盤
米国退役軍人向けの給付、医療、記録サービスを、Veteran-centeredな調査、平易な言葉、USWDS由来の部品で一貫させる公共デザインシステム。
- 様式にしない理由
- 公共サービス向けの有用な体系だが、USWDSから独立した様式として見分けられるだけの視覚文法が不足する。
- 出典
- VA.gov Design System
- 近い様式
- U.S. Web Design System / GOV.UK Design System
Base Web
Uber Base Web / 設計基盤
Uberが作った、複雑なウェブ製品を始め、育て、統一するためのReact UI基盤。低水準の部品、上書き可能なテーマ、組み込みアクセシビリティを中心に、ブランドより拡張性を先に置く。
- 様式にしない理由
- 製品ごとのテーマを受け入れる部品基盤であり、既定の外観だけでは独立した視覚系譜にならない。
- 出典
- Base Web — React UI framework
- 近い様式
- GitHub Primer / Ant Design
Microsoft FAST
Microsoft FAST / 設計基盤
見た目を固定した部品集ではなく、標準Web Components、基礎部品、design tokensを層に分け、各組織が自分のデザインシステムを構築するためのMicrosoftの基盤。
- 様式にしない理由
- 一つの外観を固定せず、各組織がデザインシステムを作るための基盤である。
- 出典
- Microsoft FAST — Creating a Component Library
- 近い様式
- Fluent 2 / design-tokens
Atomic Design
アトミックデザイン / 設計法
インターフェースをatoms、molecules、organisms、templates、pagesという五段階で同時に捉え、部品と完成画面の両方を往復しながらデザインシステムを作る方法。
- 様式にしない理由
- 部品を尺度別に整理する方法で、互いに異なる様式が同じ方法を使える。
- 出典
- Brad Frost — Atomic Design Methodology
- 近い様式
- design-tokens / Material Design
Design Tokens
デザイントークン / 設計法
色、寸法、間隔、書体、動きなどの設計判断へ人が読める名前を付け、ツールとプラットフォームを越えて同じ意味を共有する方法。
- 様式にしない理由
- 設計判断へ名前を付けて交換する方法であり、それ自体に固有の見た目はない。
- 出典
- Design Tokens Community Group
- 近い様式
- atomic-design / Adobe Spectrum
Progressive Enhancement
プログレッシブ・エンハンスメント / 設計法
内容と基本機能をHTMLで全員へ届け、その上へCSSとJavaScriptの能力を段階的に重ねるウェブ設計思想。最新機能が使えない環境でも目的だけは達成できる。
- 様式にしない理由
- 壊れにくく配信するための実装戦略で、完成画面の外観を規定しない。
- 出典
- A List Apart — Understanding Progressive Enhancement
- 近い様式
- Web 1.0 / responsive-web-design
Mobile First
モバイルファースト / 設計法
小さな画面、限られた回線、指での操作という厳しい条件から内容と機能を決め、余裕のある画面へ段階的に拡張する設計方法。
- 様式にしない理由
- 優先順位と制作順序の原則であり、反復可能な視覚文法ではない。
- 出典
- Luke Wroblewski — Mobile First
- 近い様式
- responsive-web-design / Material Design
Inclusive Design
インクルーシブデザイン / 設計法
障害を人の属性ではなく人と環境の不一致として捉え、除外されやすい人と一緒に設計することで、異なる能力・状況へ使い方の選択肢を広げる方法。
- 様式にしない理由
- 参加型の設計プロセスと倫理原則で、さまざまな視覚言語と両立する。
- 出典
- Microsoft Inclusive Design
- 近い様式
- universal-design / GOV.UK Design System
Universal Design
ユニバーサルデザイン / 設計法
特別な適応を後付けせず、可能な限り多くの人が同じ製品や環境を使えるようにする設計思想。公平、柔軟、単純、知覚可能、誤りへの寛容、低い負担、十分な空間という七原則を持つ。
- 様式にしない理由
- 利用可能性の原則群であり、それだけでは一つの識別可能な外観を生まない。
- 出典
- NC State Center for Universal Design — The Principles of Universal Design
- 近い様式
- inclusive-design / Braille
Calm Technology
カーム・テクノロジー / 理論
情報を常に中心へ割り込ませず、必要なときだけ周辺知覚から中心へ移す技術設計。通知の量ではなく、気配・光・音・動きの変化で状態を穏やかに伝える。
- 様式にしない理由
- 注意と相互作用の思想であり、特徴は安定した外観より振る舞いに属する。
- 出典
- Mark Weiser and John Seely Brown — Designing Calm Technology
- 近い様式
- Minimalism / Skeleton Screen
Content Design
コンテンツデザイン / 設計法
組織が言いたい情報からではなく利用者の必要から始め、適切な言葉・順序・形式・媒体を選んで目的達成までを設計する方法。文章を書くことより、不要な内容を削り、見つけて理解し行動できる構造を作る。
- 様式にしない理由
- 利用者の必要から言葉と情報を構成する方法で、視覚様式ではない。
- 出典
- GOV.UK — Understand content design
- 近い様式
- GOV.UK Design System / Single-Serving Site
Command Palette
コマンドパレット / UIパターン
多数の命令を階層メニューから探させず、キーボードで開く一つの検索窓へ集め、名前の一部から絞り込んで実行する操作パターン。
- 様式にしない理由
- どの製品様式でも描ける再利用可能なUIパターンである。
- 出典
- Visual Studio Code — Command Palette
- 近い様式
- Acme / Terminal UI
Feed Interface
フィード・インターフェース / UIパターン
独立した記事や投稿を時系列または推薦順に縦へ積み、スクロールに応じて新しい項目を読み込む画面構造。各項目をarticleとして区切り、位置と更新状態を支援技術にも伝える。
- 様式にしない理由
- 順序と読込方法で決まる情報提示パターンで、固有の見た目ではない。
- 出典
- W3C WAI-ARIA APG — Feed Pattern
- 近い様式
- Skeleton Screen / Web 2.0 Gloss
Card UI
カードUI / UIパターン
画像、題名、要約、状態、操作を一つの独立した面へまとめ、異なる幅や順序へ並べ替えられる情報単位。カード全体の押下範囲と内部操作を区別する。
- 様式にしない理由
- 互いに異なる視覚体系が共通して使う、汎用的な情報のまとめ方である。
- 出典
- Google Material Design 3 — Cards
- 近い様式
- Bento Grid / Material Design
Masonry Layout
メイソンリー・レイアウト / UIパターン
列幅を揃えながら高さの異なる項目を石積みのように詰め、縦方向の隙間を減らすレイアウト。画像比率や本文量が異なる一覧を切らずに見せる。
- 様式にしない理由
- 配置アルゴリズムとレイアウトの型であり、独立した様式の系譜ではない。
- 出典
- W3C CSS Grid Layout Module Level 3 — Masonry Layout
- 近い様式
- Bento Grid / responsive-web-design
Voice User Interface
音声ユーザーインターフェース / UIパターン
画面の階層をたどらず、発話の多様な表現をintentとslotへ結び、短い応答と聞き返しで目的を達成する音声中心のインターフェース。耳のために書き、誤認識から自然に戻れる会話を設計する。
- 様式にしない理由
- 中心となる文法が視覚ではなく発話にある、操作モダリティである。
- 出典
- Amazon Alexa — Fundamentals of Voice Experience Design
- 近い様式
- Diegetic UI / visionOS Spatial Design
Conversational UI
会話型UI / UIパターン
人とシステムのやり取りを吹き出しや発話ターンとして時系列に並べ、質問、回答、候補、確認、修正を会話の流れで進めるインターフェース。音声とテキストの両方を含む。
- 様式にしない理由
- どの視覚言語も継承できる、発話ターン中心の操作パターンである。
- 出典
- Google — Conversation Design Quick Reference
- 近い様式
- voice-ui / Terminal UI
Metamodernism
メタモダニズム / 理論
モダニズムの希望とポストモダニズムの懐疑、誠実さと皮肉、未来志向とノスタルジーの間を振り子のように往復する現代文化の感性。どちらかへ決着せず、矛盾を抱えたまま本気で試みる。
- 様式にしない理由
- 振り子運動を説明する広い文化理論で、作品を安定して識別できる視覚的特徴の組がない。
- 出典
- Notes on Metamodernism
- 近い様式
- Post-Modernism / The New Aesthetic