作例そのものから書いた、デザイン様式の辞典。
素のHTMLでできている。どのブラウザでも、どの端末でも、アプリも登録もなしに開く。同じページを機械もそのまま読む。
| 用語 | 598 |
|---|
スタイル名でも、作りたいものでも検索できます。 名称一致を最優先し、その上で用途・印象・媒体から近い候補を足します。
こう解釈しました信頼Web・UI金融
494
.png)
GOV.UK デザインシステム / 2012– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
英国政府の Government Digital Service が公開し維持する設計言語。装飾のない一列左寄せに GDS Transport を組み、角を丸めない緑のボタンは下辺の濃い帯で厚みを持ち、押すとその分だけ沈む。焦点の当たった要素は黄色い地と黒い下線で示す。
装飾のない一列の左寄せで、囲みも影もほとんど使われない / 角を丸めない緑のボタンの下辺に濃い緑の帯が敷かれ、押すとその厚みの分だけ沈む / 焦点の当たった要素だけが黄色い地に変わり、その下に黒い線が引かれる / 文字は 48 / 36 / 24 / 19 / 16px という粗い段しか持たず、中間の大きさが存在しない
539
スケルトン・スクリーン / 2013– / 技法 / UI表現
近い理由信頼Web・UI金融技術
読み込み中に回転印を出さず、内容が入る前の空の画面を先に見せて、そこへ情報を少しずつ流し込む方法。Luke Wroblewskiが2013年に自作アプリPolarでの反省としてこの名で紹介した。待たせている事実ではなく、進んでいることを見せる。
読み込み中に回転印や進捗バーが出ない / 本文や画像が入る場所に、同じ寸法の無地の面が先に置かれている / 内容が届く前からレイアウトが確定していて、届いても要素が動かない / 情報が一度に出ず、領域ごとに順番に埋まっていく
42
1
.jpg)
118
538
.png)
ソラライズド / 2011– / スタイル / UI表現
近い理由信頼Web・UI金融技術
Ethan Schoonoverが値ごと公開した、端末とエディタのための16色。八つの地色と八つの差し色からなり、地色のCIELAB明度差を対称に取ってあるので、明地と暗地を入れ替えても読みの調子が変わらない。明るさの差を下げ、色相の差で語を区別する。
地色が純黒でも純白でもなく、青緑に寄った濃色と黄に寄った淡色になる / 本文と地の明度差が小さく、白地に黒より弱い当たりで読ませる / 八つの差し色の明るさがほぼ揃い、色相の違いだけで区別が付く / 明地と暗地を切り替えても、同じ差し色が同じ役割のまま出てくる
554
Carbon Design System / 2015– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
IBMのデジタル製品を、2x Grid、IBM Plex、明快な情報階層、再利用部品で統一するオープンソースのデザインシステム。企業向け画面の高い密度を保ちながら、操作・状態・データの違いを規則で読ませる。
IBM Plexと2の倍数で刻む間隔 / 白・灰・黒の面に青い主操作 / 表、タブ、サイドナビの高い情報密度 / 四角い部品と明確な焦点線
472
マテリアルデザイン / 2014– / スタイル / Google UI
近い理由信頼Web・UI金融技術
紙とインクという物理の比喩を、影と重なりの規則へ落とし込んだ設計体系。要素に高さを与え、影で階層を示し、動きに物理的な因果を持たせる。以後のUI設計が「体系として配布される」ことの雛形になった。2021年の改訂では、端末の壁紙から色体系を導いて利用者ごとに配色が変わる仕組みが加わった。
高さで表す階層と影 / 紙のような面の重なり / 因果を示すモーション / 規格化された余白の単位
326
.jpg)
543
GitHub Primer / 2017– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
GitHubの高密度な開発画面を、色・文字・アイコン・間隔・部品の規則として共有するデザインシステム。装飾より作業の流れを優先し、小さな面に状態と操作を多く載せながら、アクセシビリティとレスポンシブ対応を崩さない。
無彩色の面に青いリンクと状態色を絞って置く / Octiconsと短いラベルで操作を詰める / 細い境界線でリスト、タブ、サイドバーを分ける / 密度が高くても見出しと間隔の段階が一定
568
GitLab Pajamas / 2018– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
コード、課題、レビュー、CI/CD、セキュリティを一つのDevSecOps製品で横断するGitLabの画面言語。GitLab SansとMono、常設ナビ、密な一覧、紫を含む中立パレットが開発作業の連続性を支える。
GitLab Sansとコード用GitLab Monoの併用 / 左ナビと上部クロームを基礎にした多層構造 / 課題・マージリクエスト・パイプラインの密な一覧 / 白または濃灰の面に紫をブランドの焦点として使う
229
534
ブリーズ / 2014– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
KDEがPlasma 5とともに導入した既定の視覚様式。発表文は高コントラストの平面的なテーマと自ら説明し、図像を単純で単色寄りに整理する。装飾の代わりに文字組みへ寄りかかって要素を見分けさせ、明暗2種を最初から対で用意する。
陰影のない平面で、要素の境目は色の差とコントラストだけで示される / アイコンと図像が単色寄りに整理され、使う色数が絞られている / 見出しと本文の対比が装飾の代わりに働き、文字組みが画面の骨格になる / 同じ図像のまま明るい版と暗い版が対で存在する
571
Canonical Vanilla / 2013– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
Ubuntu、MAAS、JujuなどCanonicalのウェブサイトとアプリを、Ubuntu書体、分割グリッド、上罫付きセクション、広い余白で統一するCSSベースの画面言語。長い技術情報を見出しから速く走査できることを優先する。
Ubuntu書体の細い大見出しと太い小見出し / 25/75、50/50を軸にした非対称な分割 / 各セクション上端の細い罫と広い上下余白 / 白い面、濃い文字、橙または茄子色の焦点
566
PatternFly / 2012– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
Red Hatが企業向け製品群のために育てたオープンソースの画面言語。複雑なインフラや管理対象を、高密度のナビゲーション、表、カード、状態表示で扱いながら、色を操作と異常へ絞って静かな作業面を保つ。
濃いマストヘッドと左サイドナビ / 白と淡い灰の作業面に密な表とフォーム / 青を主操作、赤・橙・緑を状態へ限定 / 複数ペインで一覧・詳細・操作を同時に見せる
556
7
%201%E2%80%935%20(1987)%2C%20Tate%20Modern%2C%20London%2C%20UK.jpg)
544
Adobe Spectrum / 2013– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
Adobeの制作アプリ群を横断するためのデザインシステム。Rational、Human、Focusedを原則に、デスクトップとモバイルで密度の尺度を切り替え、道具の数が多い画面でも制作物へ注意を戻せるようにする。
濃淡の異なる中立面に、選択中だけ鮮色を置く / アイコン、文字、境界線が同じ密度尺度で拡大する / ツールバーとプロパティパネルが細い区切りで連なる / 前景の制作物がUIより強く見える
489
アドワイタ / 2011– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
GNOME が自分の既定の見た目に与えた名前で、指針書は明るい版と暗い版と高コントラスト版を同じ部品で成立させると定める。窓の上端をヘッダーバーが1本横切り、そこに載る釦は背景も枠も描かれない。アイコンは16x16pxの単色シンボリックに統一される。
窓の上端を横切る1本のヘッダーバー。左と中央と右の三点に寄せ、中央に窓の見出しが座る / ヘッダーバーの釦は背景も枠も持たず、記号と文字だけが面に浮く / 16x16px で描かれた単色のシンボリックアイコン。主要な線は2px幅で、遠近を付けない正面の形 / Blue 3 の #3584e4 を含む、色相ごとに5段階そろえた公開パレット
546
Ant Design / 2015– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
企業向けウェブアプリの複雑さを、再利用できる部品とページの型で低エントロピーに保つ設計体系。Natural、Certain、Meaningful、Growingを価値に掲げ、表・フォーム・階層・状態を高い密度のまま規則化する。
小さな文字と細い罫線で密度の高い表を組む / 青い主操作と明確な成功・警告・危険色 / フォーム、ページャー、ツリー、表の部品が一貫する / 余白を広げず整列と反復で読みやすくする
561
Elastic UI / 2017– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
検索、ログ、監視、セキュリティの大量データを扱うElastic製品のためのUIフレームワーク。表、フィルター、時系列チャート、クエリ、状態を高密度のまま組み合わせる。
固定ヘッダーと左サイドナビ / 検索・フィルター・期間選択の常設 / 小さな表とチャートを同じパネルへ積む / 青緑・桃・黄をデータ系列に絞る
545
Atlassian Design System / 2012– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
JiraやConfluenceの複雑な共同作業を、トークン、文章、余白、グリッド、部品の共有規則へ落とす体系。調和と信頼を一貫性から作りながら、利用者が大量の課題・文書・状態を見失わないことを優先する。
白い面と薄い灰色の階層に青を主操作として置く / 角丸のカードとロゼンジ型の状態ラベル / サイドバー、表、詳細ペインの明確な分割 / 色・余白・角丸・影がトークンで揃う
557
555
Salesforce Lightning / 2015– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
営業、顧客、案件、活動という大量の業務情報を、カード、関連リスト、状態パス、再利用部品で一つの操作言語へまとめるSalesforceのデザインシステム。
淡い灰の地に白いカードを積む / 青いヘッダーと主操作 / 案件の段階を横一列のパスで示す / レコード、関連情報、活動を別パネルへ分ける
559
BBC GEL / 2010– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
ニュース、映像、音声、子ども向けまで広いBBCのデジタル体験を、読みやすさ、アクセシビリティ、強い見出し、再利用可能なメディア部品で統一するGlobal Experience Language。
黒いヘッダーと白いコンテンツ面 / 太く短い見出しと明確な階層 / 画像比率を揃えたニュースカード / 焦点、字幕、再生操作を強く可視化
547
Shopify Polaris / 2017– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
商品、注文、決済、顧客を扱うShopifyの画面を一つの商取引言語に揃えるUIフレームワーク。情報の塊をカードとセクションへ分け、状態と次の行動を短い言葉で示し、管理者が迷わず店を運営できることを中心に置く。
白いカードを淡い地の上へ積む / 緑をブランド色より成功や前進の合図として使う / ページ上部に題名、状態、主要操作をまとめる / 商品・注文・決済の状態を短いバッジで示す
558
580
CDEインターフェース / 1993–2000s / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
UNIXワークステーション各社が共通化したCommon Desktop Environmentの画面言語。Motif由来の厚い立体縁、前面パネル、ワークスペース切替、限定色のアイコンで、異なる機種でも同じ仕事場を作った。
画面下端に置く箱状のFront Panel / 明暗2本の縁で盛り上げたボタンと沈めた入力欄 / 小さな色数と黒い輪郭で描くピクセルアイコン / 複数ワークスペースを常設ボタンで切り替える
59
230
484
モチーフ / 1989– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
The Open Groupが維持するUNIXワークステーション向けの画面言語で、IEEE 1295として規格化され200を超える機種に載った。公式資料が自ら3Dの面取り外観と呼ぶとおり、灰色の面の縁に明暗2色を置いて全部品を押し出して見せる。
灰色の面の上辺と左辺が明るく、下辺と右辺が暗い縁で、部品が全部浮いて見える / 押している間だけ明暗が入れ替わり、部品が沈んで見える / 入力を受けている部品の外側を、細い矩形の枠がぐるりと囲む / スクロールバーは角の立った矩形で、両端に三角の矢印ボタンが付く
582
GNOME Clearlooks / 2005–2011 / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融静けさ
GNOME 2.12から標準となった、親しみやすさと単純さを優先するデスクトップ・テーマ。淡い灰の窓、青い選択、丸みを抑えた光沢、はっきりした境界が、GTKアプリ全体を静かな道具へ揃えた。
淡灰色の窓面と青い選択バー / 上側だけ明るい控えめなボタンの光沢 / 丸みを抑えたタブと入力欄 / 小さなGNOMEアイコンと簡潔な二段階の階層
532
ゼロックス・スター・インターフェース / 1981–1990s / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
1981年のXerox 8010の画面が定めた設計言語。フォルダ、イン/アウトのバスケット、ファイルの引き出しといった事務用品を名札付きの図像として並べ、当時のブローシャーはそれを電子の机上と呼んだ。画面の物はマウスで自由に動かし、複製し、捨てられる。
画面上の図像には必ず名札の文字が付き、図だけに意味を負わせない / 図像はフォルダやイン/アウトのバスケットやファイルの引き出しなど、事務机の上にある物を写している / 物はマウスで掴んで動かせ、移動と複製と削除が同じ操作の系列になっている / 表計算は行と列の格子として現れ、格子を操作する命令がメニューにまとまる
560
Mozilla Protocol / 2017– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
MozillaとFirefoxのウェブサイトを、meaningful、flexible、accessible、global、usefulという原則と、コード化された部品で結ぶデザインシステム。内容を装飾より前へ置き、翻訳や端末差を受け止める。
黒い見出しと広い白場 / 鮮色の大きな面とFirefoxのグラデーション / 柔軟に伸びるbillboardとcard / 太い見出し、短い本文、明確なCTA
6
490
メタル（Java ルック＆フィール） / 1998– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
SunがSwingの既定外観として作った、どのOSの上でも同じに見えることを狙った設計言語。Metal は社内の開発名がそのまま公称になったもので、青紫の面と1pxの直線の枠を持ち、端末側の様式を一切引き継がない。
薄い青紫の地に、濃い青紫の帯を敷いた内部ウィンドウのタイトルバー / タイトルバーや仕切りに刻まれた細かい点と斜線のテクスチャ / 角丸を持たない矩形のボタンに、1pxの濃い青紫の線を回した枠 / 外側のOSの窓枠は端末のものなのに、その内側だけが別の様式で描かれている二重構造
485
オープンルック / 1988–1990s / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
Sun Microsystems が仕様書として公刊した UNIX ワークステーション向けの画面言語。白黒表示用の版と立体表示用の版を同時に定め、共通要素はすべて一種類のサンセリフで組み、色は控えめに使うと決めた。ポップアップ窓の左肩には押しピンがあり、刺すと窓が作業面に残る。
ポップアップ窓のヘッダー左端にある押しピン。刺した窓は閉じずに作業面へ残る / ラベルの後ろに続く三つの点が別の窓を、輪郭だけの三角がメニューを予告する / スクロールバーはエレベータ、ケーブル、上下のケーブルアンカーに分かれ、ケーブルの濃い部分が表示割合を示す / 作業面は50パーセント、メニューの影は75パーセントの網点で作られる
491
ワンUI / 2018– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融静けさ
Samsung が Galaxy 向けに定めた設計言語。指が最も届きやすい高さで画面を割り、上を見るだけの領域、下を触る領域として、見出しを上に、ボタンとタブと対話箱を下へ集める。内容は角を大きく丸めた箱にまとめ、地は白か真っ黒、強調は青一色に絞る。
画面の上側が見出しと余白だけで占められ、操作できる部品が一つも置かれていない / 角を大きく丸めたカード状の箱に、文字や画像がひとまとまりずつ収められる / 上端の見出しは開いた状態と畳まれた状態の二つしか取らず、途中の高さで止まらない / 暗い主題では地が真っ黒になり、そこに青の強調だけが乗る
570
Ubuntu Yaru / 2018– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
Ubuntuの既定テーマとして、Adwaita由来のGTKとGNOME ShellへUbuntuの橙、濃いヘッダーバー、Suru系アイコンを重ねた共同制作の画面言語。窓、シェル、アイコン、カーソル、音まで一つのテーマ群として配る。
明るい窓面と濃いヘッダーバーの対比 / Ubuntu Orangeを選択と焦点へ使う / 円・正方形・縦横の長円を基礎にしたSuru系アイコン / アイコンの1px縁、弱いグラデーション、下方の影
32
8
58
31
24
2
347
425
448
IndexStyleは、デザインの周辺で使われる言葉を何でも載せる一覧ではない。独立項目にするのは、見分けられ、再現でき、近い様式との差を説明できる視覚言語だけ。 収録基準