作例そのものから書いた、デザイン様式の辞典。
素のHTMLでできている。どのブラウザでも、どの端末でも、アプリも登録もなしに開く。同じページを機械もそのまま読む。
| 用語 | 776 |
|---|
スタイル名でも、作りたいものでも検索できます。 名称一致を最優先し、その上で用途・印象・媒体から近い候補を足します。
こう解釈しました信頼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
ベントーグリッド / 2020s / レイアウト / 情報デザイン
近い理由信頼Web・UI金融技術
異なる種類の情報を独立した箱へ分け、ひと目で全体像をつかませる。
大小のカード / 整列した隙間 / 一画面の要約 / モジュール
1
118
フルーエント2 / 2022– / スタイル / Microsoft UI
近い理由信頼Web・UI金融技術
色・文字・間隔・角丸・奥行きをトークン化し、Solid、Acrylic、Mica、Smokeという素材を用途ごとに使い分けてMicrosoft製品を横断する。
MicaとAcrylic / 中立色の階層 / 柔らかな角丸 / トークン化された奥行き
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
紙幣のギヨシェ / 18th century– / 技法 / 公共デザイン
近い理由信頼Web・UI金融技術
旋盤彫刻機が生む幾何学的な連続曲線ギヨシェと肖像彫刻で、偽造を拒みながら信用を可視化する紙幣の様式。1896年米国「教育シリーズ」は紙幣を寓意画の傑作に高めた。
ギヨシェの連続曲線 / 凹版の肖像彫刻 / 精緻な地紋 / 額面の階層表示
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
スキーマティック路線図 / 1933– / レイアウト / 情報デザイン
近い理由信頼Web・UI金融技術
地理的正確さを捨て、水平・垂直・45度の線と等間隔の駅だけで路線網を描く図法。ベックの1933年ロンドン地下鉄図が確立し、世界中の交通図の共通言語になった。
45度に制限された線 / 等間隔の駅 / 路線色のコード / 地理からの独立
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
SAP Fiori / 2013– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
巨大な業務トランザクションを役割ごとの小さなアプリへ分解し、role-based、adaptive、simple、coherent、delightfulの五原則で揃えるSAPの画面言語。
役割別のタイルとカード / 上部の常設シェルバーと検索 / 表とフォームを床面図の型で整理 / 端末幅に応じて詳細面を段階的に開く
7
%201%E2%80%935%20(1987)%2C%20Tate%20Modern%2C%20London%2C%20UK.jpg)
ミニマリズム / 1960s– / スタイル / 機能主義
近い理由信頼Web・UI金融静けさ
要素を減らし、残したものの意味と緊張感を最大にする。
大きな余白 / 少数の要素 / 静かな色 / 精密な間隔
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
米国Webデザインシステム / 2015– / スタイル / 公共デザイン
近い理由信頼Web・UI金融静けさ
米国連邦政府のウェブサービスを、アクセシブル、モバイル対応、一貫した体験へ揃える公共デザインシステム。旗、公共色、明快な見出し、検証済みのフォームと案内パターンを共有する。
白地に濃紺と赤の公共色 / 太い見出しと読みやすい本文 / 公式サイトを示すバナー / 明瞭なフォーム、警告、手順表示
555
Salesforce Lightning / 2015– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
営業、顧客、案件、活動という大量の業務情報を、カード、関連リスト、状態パス、再利用部品で一つの操作言語へまとめるSalesforceのデザインシステム。
淡い灰の地に白いカードを積む / 青いヘッダーと主操作 / 案件の段階を横一列のパスで示す / レコード、関連情報、活動を別パネルへ分ける
IndexStyleは、デザインの周辺で使われる言葉を何でも載せる一覧ではない。独立項目にするのは、見分けられ、再現でき、近い様式との差を説明できる視覚言語だけ。 収録基準