作例そのものから書いた、デザイン様式の辞典。
素のHTMLでできている。どのブラウザでも、どの端末でも、アプリも登録もなしに開く。同じページを機械もそのまま読む。
| 用語 | 776 |
|---|
スタイル名でも、作りたいものでも検索できます。 名称一致を最優先し、その上で用途・印象・媒体から近い候補を足します。
553
スポーツウェア・ファッション / late 19th century– / スタイル / ファッション史
競技や運動のための可動性・保護・新素材が日常服へ入り、逆に流行の形が競技服へ戻っていく系譜。分割スカートから伸縮素材、ナイロン、ネオプレンまで、身体を動かす機能が現代のカジュアル服の輪郭を作った。
動作を妨げないゆとりと伸縮 / ジッパー、リブ、ドローコードなどの調整部 / チーム色、番号、ストライプの識別 / ナイロン、スパンデックス、ネオプレンなどの機能素材
554
Carbon Design System / 2015– / スタイル / プラットフォームの画面言語
IBMのデジタル製品を、2x Grid、IBM Plex、明快な情報階層、再利用部品で統一するオープンソースのデザインシステム。企業向け画面の高い密度を保ちながら、操作・状態・データの違いを規則で読ませる。
IBM Plexと2の倍数で刻む間隔 / 白・灰・黒の面に青い主操作 / 表、タブ、サイドナビの高い情報密度 / 四角い部品と明確な焦点線
555
Salesforce Lightning / 2015– / スタイル / プラットフォームの画面言語
営業、顧客、案件、活動という大量の業務情報を、カード、関連リスト、状態パス、再利用部品で一つの操作言語へまとめるSalesforceのデザインシステム。
淡い灰の地に白いカードを積む / 青いヘッダーと主操作 / 案件の段階を横一列のパスで示す / レコード、関連情報、活動を別パネルへ分ける
556
SAP Fiori / 2013– / スタイル / プラットフォームの画面言語
巨大な業務トランザクションを役割ごとの小さなアプリへ分解し、role-based、adaptive、simple、coherent、delightfulの五原則で揃えるSAPの画面言語。
役割別のタイルとカード / 上部の常設シェルバーと検索 / 表とフォームを床面図の型で整理 / 端末幅に応じて詳細面を段階的に開く
557
米国Webデザインシステム / 2015– / スタイル / 公共デザイン
米国連邦政府のウェブサービスを、アクセシブル、モバイル対応、一貫した体験へ揃える公共デザインシステム。旗、公共色、明快な見出し、検証済みのフォームと案内パターンを共有する。
白地に濃紺と赤の公共色 / 太い見出しと読みやすい本文 / 公式サイトを示すバナー / 明瞭なフォーム、警告、手順表示
558
NHSデザインシステム / 2016– / スタイル / 公共デザイン
英国の医療情報とオンライン手続きを、臨床場面でも読み違えにくい言葉、強いコントラスト、大きな操作面、患者中心のパターンへ揃えるデザインシステム。
NHS Blueの広いヘッダー / 白地に大きな濃色本文 / 緑の主要操作と赤いエラー / 一問ずつ進むフォームと明瞭な警告箱
559
BBC GEL / 2010– / スタイル / プラットフォームの画面言語
ニュース、映像、音声、子ども向けまで広いBBCのデジタル体験を、読みやすさ、アクセシビリティ、強い見出し、再利用可能なメディア部品で統一するGlobal Experience Language。
黒いヘッダーと白いコンテンツ面 / 太く短い見出しと明確な階層 / 画像比率を揃えたニュースカード / 焦点、字幕、再生操作を強く可視化
560
Mozilla Protocol / 2017– / スタイル / プラットフォームの画面言語
MozillaとFirefoxのウェブサイトを、meaningful、flexible、accessible、global、usefulという原則と、コード化された部品で結ぶデザインシステム。内容を装飾より前へ置き、翻訳や端末差を受け止める。
黒い見出しと広い白場 / 鮮色の大きな面とFirefoxのグラデーション / 柔軟に伸びるbillboardとcard / 太い見出し、短い本文、明確なCTA
561
Elastic UI / 2017– / スタイル / プラットフォームの画面言語
検索、ログ、監視、セキュリティの大量データを扱うElastic製品のためのUIフレームワーク。表、フィルター、時系列チャート、クエリ、状態を高密度のまま組み合わせる。
固定ヘッダーと左サイドナビ / 検索・フィルター・期間選択の常設 / 小さな表とチャートを同じパネルへ積む / 青緑・桃・黄をデータ系列に絞る
562
Material You / 2021– / スタイル / Google UI
壁紙から生成するdynamic color、大胆に変化する形、個人に合わせた配色と動きで、同一外観ではなく変化を受け止める規則を一貫性とするMaterial Design 3の表現。
壁紙由来の調和した色調 / 大きな丸みを持つカードと操作面 / 選択状態で形と色が同時に変わる / 広い余白と大きな表示文字
563
ニュー・エステティック / 2011– / 世界観 / デジタル文化
James Bridleが集め始めた、機械視覚とネットワークの像が物理世界へ漏れ出す現代の見え方。ピクセル、衛星画像、監視カメラ、認識枠、ドローン視点など、機械が見る痕跡を意匠として読む。
現実の物体へ拡大されたピクセル / 顔・物体認識の矩形と座標 / 衛星・地図・監視カメラの俯瞰 / 圧縮、欠損、機械判定の誤り
564
ポスト・インターネット・アート / 2000s– / 世界観 / デジタル文化
インターネットを新奇な媒体ではなく生活と制作の前提として扱い、オンライン画像、流通、複製、展示、記録の往復そのものを作品化する美術動向。作品は画面内だけでなく、物体や展示へ戻ってくる。
ネット画像が印刷物や立体へ変換される / スクリーンショット、商品画像、3Dレンダーの混在 / 展示風景が再びSNS用画像になる / 高解像度と粗い圧縮像が同じ面にある
565
レトロフューチャリズム / 1970s– / 世界観 / デジタル文化
過去の人々が想像した未来を、当時の素材、乗り物、広告、宇宙観とともに現在から読み直す表現。懐古と未来予測を同時に置き、実現しなかった希望や偏りまで見せる。
流線形の乗り物と巨大な都市 / アナログ計器、クローム、真空管 / 宇宙時代の広告書体と図解 / 色褪せた印刷と発光する未来像の同居
566
PatternFly / 2012– / スタイル / プラットフォームの画面言語
Red Hatが企業向け製品群のために育てたオープンソースの画面言語。複雑なインフラや管理対象を、高密度のナビゲーション、表、カード、状態表示で扱いながら、色を操作と異常へ絞って静かな作業面を保つ。
濃いマストヘッドと左サイドナビ / 白と淡い灰の作業面に密な表とフォーム / 青を主操作、赤・橙・緑を状態へ限定 / 複数ペインで一覧・詳細・操作を同時に見せる
567
elementary OS / 2011– / スタイル / プラットフォームの画面言語
一貫して美しく、すぐ理解できるデスクトップ体験を目標に、簡潔な言葉、単一ウィンドウ中心の構造、固有形のアプリアイコン、控えめな奥行きを揃えるelementary OSの画面言語。
上端ツールバーに主要操作を少数だけ置く / 短い文と具体的な動詞で状態を伝える / 固有の輪郭と1pxの暗い縁を持つ多色アイコン / 白い作業面、淡い灰のクローム、青い推奨操作
568
GitLab Pajamas / 2018– / スタイル / プラットフォームの画面言語
コード、課題、レビュー、CI/CD、セキュリティを一つのDevSecOps製品で横断するGitLabの画面言語。GitLab SansとMono、常設ナビ、密な一覧、紫を含む中立パレットが開発作業の連続性を支える。
GitLab Sansとコード用GitLab Monoの併用 / 左ナビと上部クロームを基礎にした多層構造 / 課題・マージリクエスト・パイプラインの密な一覧 / 白または濃灰の面に紫をブランドの焦点として使う
569
Firefox Photon / 2017–2021 / legacy / スタイル / プラットフォームの画面言語
Firefox Quantumと同時に導入され、デスクトップからモバイルまでFirefoxらしい速度感と識別性を揃えた画面言語。四角く締まったブラウザクローム、鮮色、軽い図像、内容を邪魔しない動きを一つの系へまとめた。
角を抑えたタブとコンパクトなブラウザクローム / 白または濃紺の面に青・紫・橙の鮮色 / 細く単純化した線形アイコン / 短く速い遷移と明確な選択・焦点状態
570
Ubuntu Yaru / 2018– / スタイル / プラットフォームの画面言語
Ubuntuの既定テーマとして、Adwaita由来のGTKとGNOME ShellへUbuntuの橙、濃いヘッダーバー、Suru系アイコンを重ねた共同制作の画面言語。窓、シェル、アイコン、カーソル、音まで一つのテーマ群として配る。
明るい窓面と濃いヘッダーバーの対比 / Ubuntu Orangeを選択と焦点へ使う / 円・正方形・縦横の長円を基礎にしたSuru系アイコン / アイコンの1px縁、弱いグラデーション、下方の影
571
Canonical Vanilla / 2013– / スタイル / プラットフォームの画面言語
Ubuntu、MAAS、JujuなどCanonicalのウェブサイトとアプリを、Ubuntu書体、分割グリッド、上罫付きセクション、広い余白で統一するCSSベースの画面言語。長い技術情報を見出しから速く走査できることを優先する。
Ubuntu書体の細い大見出しと太い小見出し / 25/75、50/50を軸にした非対称な分割 / 各セクション上端の細い罫と広い上下余白 / 白い面、濃い文字、橙または茄子色の焦点
572
Firefox Proton / 2021–2026 / スタイル / プラットフォームの画面言語
2021年のFirefox 89で導入され、ブラウザを明るく穏やかに見せるため、ツールバーとメニューを整理し、丸く浮くタブ、軽い図像、広い間隔、紫を含む配色へ更新した画面言語。デスクトップ、iOS、Androidを同じ声へ揃えた。
ツールバーから浮く丸いアクティブタブ / 余分なアイコンを減らした文字中心のメニュー / 広い間隔と軽い線形アイコン / 白または濃色のクロームに紫・青の選択状態
573
ピクセルソーティング / 2010– / 技法 / デジタル画像技法
画像の画素を明度や色相の閾値で選び、行または列の中で並べ替えて、元の像から長い色の筋を引き出すデジタル画像技法。Kim Asendorfがコードを公開したことで、多数の作家へ再実装された。
人物や風景から水平・垂直に伸びる長い画素列 / 輪郭の一部だけが帯状に流れる / 選別されなかった領域に元画像が残る / 明度や色相の順に滑らかに並ぶ局所的な色帯
574
575
%20Steve%20Strange%20(right)).jpg)
ニュー・ロマンティック / 1979–1983 / スタイル / サブカルチャー・スタイル
ロンドンのBlitz周辺から生まれ、パンク後の黒と破壊を、海賊、摂政時代、キャバレー、未来服を混ぜた演劇的な自己演出へ反転したクラブ・ファッション。装いを完成品で買うより、一夜の人物像として作り上げる。
フリルシャツ、サッシュ、軍服や海賊服の引用 / 白く作った顔、強い頬紅、左右非対称のメイク / 帽子、羽根、宝飾を含む頭部の大きな輪郭 / 歴史衣装と合成繊維、未来的な光沢の混在
576
アシッドハウス・ファッション / 1988–1991 / スタイル / サブカルチャー・スタイル
セカンド・サマー・オブ・ラブの倉庫レイヴで、長時間踊るための大きなTシャツと機能服へ、黄色いスマイリー、蛍光色、反射素材を載せた装い。共同体の目印を一つの単純な顔へ圧縮した。
黄色地に黒いスマイリーフェイス / 大きなTシャツ、ゆるいパンツ、バケットハット / 蛍光黄・橙・緑と黒の強い対比 / 反射材、スポーツ素材、缶バッジの反復
IndexStyleは、デザインの周辺で使われる言葉を何でも載せる一覧ではない。独立項目にするのは、見分けられ、再現でき、近い様式との差を説明できる視覚言語だけ。 収録基準