作例そのものから書いた、デザイン様式の辞典。
素のHTMLでできている。どのブラウザでも、どの端末でも、アプリも登録もなしに開く。同じページを機械もそのまま読む。
| 用語 | 598 |
|---|
スタイル名でも、作りたいものでも検索できます。 名称一致を最優先し、その上で用途・印象・媒体から近い候補を足します。
529
%2C%20cassettone%20in%20stile%20gustaviano%2C%20con%20ripiano%20in%20marmo%2C%20stoccolma%201773-1797%20circa.JPG)
グスタヴィアン様式 / 1770s–1790s / スタイル / 家具とインテリア
グスタフ3世のもとで成立したスウェーデンの新古典。手本はルイ16世様式の形式的な古典主義で、王はヴェルサイユを訪れ、フランスの職人を宮廷に招いている。ただし高価な素材は国産のガラスに置き換えられた。
抑制のきいた新古典の輪郭で、ルイ16世様式の形をそのまま写している / ロッククリスタルの飾りが、小さな透明ガラスの玉に置き換わっている / コバルトの青いガラスが、透明なガラスの中に少量だけ差し込まれる / 金メッキの金具と鎖が、ガラスをつなぐ骨として表に出ている
530
.jpg)
531
マシン・アート / 1934 / スタイル / 近代デザイン運動
1934年にニューヨーク近代美術館が開いた展覧会の名。ばね・鍋・計器といった量産の実用品を台座に載せ、彫刻と同じ扱いで見せた。会場は19世紀の褐色砂岩館の繰形を覆い隠して作られており、無装飾の品を無装飾のまま見せることが展示の条件だった。
台座の上に、実用の量産部品がひとつずつ間隔をあけて置かれる / 壁と天井の繰形が覆われ、背景の面に模様が一切ない / 対象はばね、鍋、計器のように、もともと見せるために作られていない品 / 作者の欄に個人名ではなく製造会社の名が並ぶ
532
ゼロックス・スター・インターフェース / 1981–1990s / スタイル / プラットフォームの画面言語
1981年のXerox 8010の画面が定めた設計言語。フォルダ、イン/アウトのバスケット、ファイルの引き出しといった事務用品を名札付きの図像として並べ、当時のブローシャーはそれを電子の机上と呼んだ。画面の物はマウスで自由に動かし、複製し、捨てられる。
画面上の図像には必ず名札の文字が付き、図だけに意味を負わせない / 図像はフォルダやイン/アウトのバスケットやファイルの引き出しなど、事務机の上にある物を写している / 物はマウスで掴んで動かせ、移動と複製と削除が同じ操作の系列になっている / 表計算は行と列の格子として現れ、格子を操作する命令がメニューにまとまる
533
PLATO端末の画面 / 1972–1980s / スタイル / プラットフォームの画面言語
イリノイ大学が1960年代初めに始めた教育用ネットワークPLATOの画面。プラズマの平面板と触れる画面の上に、TUTORの命令が座標で文字と図を直接置くため、文書のような行送りを持たない。掲示や会話の画面もここで型になった。
黒い面に、発光する一色のオレンジだけで文字と線が出る / 文字が行送りに従わず座標で置かれ、図の途中にも割り込む / 文字と線画が同じ面に重なり、枠で領域が分けられていない / 画面に指で直接触れて答える設問がある
534
ブリーズ / 2014– / スタイル / プラットフォームの画面言語
KDEがPlasma 5とともに導入した既定の視覚様式。発表文は高コントラストの平面的なテーマと自ら説明し、図像を単純で単色寄りに整理する。装飾の代わりに文字組みへ寄りかかって要素を見分けさせ、明暗2種を最初から対で用意する。
陰影のない平面で、要素の境目は色の差とコントラストだけで示される / アイコンと図像が単色寄りに整理され、使う色数が絞られている / 見出しと本文の対比が装飾の代わりに働き、文字組みが画面の骨格になる / 同じ図像のまま明るい版と暗い版が対で存在する
535
.png)
アクメ・インターフェース / 1994– / スタイル / プラットフォームの画面言語
Rob Pike が1994年の論文で示した、窓とシェルと編集機を一つにした画面。メニューもアイコンも持たず、画面上のどの文字列も中ボタンで実行でき、右ボタンで開ける。窓は縦の列に積まれ、一行のタグと本文という二段だけでできている。
窓が縦の列に積まれ、各窓は一行のタグと本文の二段でできている / スクロール帯が本文の左端にあり、右端には何も置かれない / 中ボタンで文字列をなぞると、押している間だけその文字列に下線が引かれる / 本文は淡い黄色、タグは淡い水色で、押すためのボタンもアイコンも一つもない
536
オベロン・システムの画面 / 1988– / レイアウト / プラットフォームの画面言語
ヴィルトとグートクネヒトがETHで1986年から89年に作ったシステムの画面。窓を重ねず、画面を縦の帯に割ってその中を上下に敷き詰める。画面上のどの文字も M.P の形なら中ボタンで実行できるため、メニューという専用の部品を持たない。
窓が重ならない。画面がまず縦の帯に割られ、帯の中で上下に敷き詰められる / 右に細い帯があり、上にログ、下にコマンドを並べたテキストが置かれる。左の広い帯が作業用 / 各ビューアの上端に一行分の細い枠があり、文書名と System.Close などのコマンドが文字として並ぶ / 1ピクセル1ビットの白黒。枠は細い直線だけで、影も丸みも階調もない
537
リボン / 2007– / レイアウト / Microsoft UI
ウィンドウ上端にタブの列として命令を並べる命令帯で、メニューバーとツールバーの両方を置き換える。Office 2007で導入され、Microsoftはタブ、グループ、文脈タブ、ギャラリーという語彙を公式の指針で定義した。命令には必ずラベルが付き、使う頻度によって大きさが変わる。
ウィンドウ最上部にタブで切り替わる帯が常駐し、その高さは48ピクセルに固定される / 帯の中は名前の付いたグループに区切られ、区切りの下端にグループ名が並ぶ / 命令の絵は32×32と16×16の二段階で、頻度の高い命令だけが大きい絵で先に置かれる / 選択した対象の種類に応じて色の付いた文脈タブが現れ、そのタブ集合の名前は Tools で終わる
538
.png)
539
スケルトン・スクリーン / 2013– / 技法 / UI表現
読み込み中に回転印を出さず、内容が入る前の空の画面を先に見せて、そこへ情報を少しずつ流し込む方法。Luke Wroblewskiが2013年に自作アプリPolarでの反省としてこの名で紹介した。待たせている事実ではなく、進んでいることを見せる。
読み込み中に回転印や進捗バーが出ない / 本文や画像が入る場所に、同じ寸法の無地の面が先に置かれている / 内容が届く前からレイアウトが確定していて、届いても要素が動かない / 情報が一度に出ず、領域ごとに順番に埋まっていく
540
スタメンの地図様式 / 2010s– / スタイル / 情報デザイン
Stamen Design が公開した3つの名前つき地図様式で、Toner は白黒二値、Terrain は陰影と植生の色、Watercolor は紙の目に滲む面でできている。基図の見た目を配色の設定ではなく画風として選べるようにした点が、それまでのウェブ地図と違う。
Toner は黒と白だけで描かれ、灰色の中間調を持たない / Watercolor では海と陸の境が筆の縁のように滲み、拡大しても紙の目が残る / Watercolor の水面は青にターコイズと紫が混ざり、道路は橙から赤茶へ振れる / 注記と線と地色が別の層に分かれていて、必要のない層を外した状態で配れる
541
シングルサービング・サイト / 2008– / レイアウト / ウェブの読み物
専用のドメインを取り、1ページだけで一つのことしかしないサイト。2008年2月にJason Kottkeが名前を与え、読者から約400通の実例が寄せられて型として定着した。案内も回遊もなく、問いに対する答えが画面いっぱいに出るだけで終わる。
ドメイン名がそのまま問いになっていて、ページの中身はその答え一語だけ / 見出しも段落もなく、一語か一枚が画面の中央を占める / メニューも検索もフッターのリンクもない。次に行ける先が用意されていない / Is It Christmas? や Is Twitter Down? のように、はいかいいえで答えられる題名が多い
542
.png)
ADV／NVL（ノベルゲームの文字組み） / 1990s– / レイアウト / 遊戯とゲームの意匠
ノベルゲームの文字組みには名の付いた型が二つあり、ADVは台詞と地の文を一行ずつ画面下部のウィンドウに出す。NVLは画面全体を占めるウィンドウに複数行を積み、区切りごとに頁を改める。制作環境Ren'Pyの公式文書が、この対として両者を定義している。
ADVでは画面下に横長のウィンドウが常駐し、そこに一度に一行だけ文が出る / NVLでは文字が画面いっぱいに広がり、読み進めた行が上に積み上がっていく / NVLは頁の切り替えで積んだ行が一度に消え、次の頁が空の状態から始まる / 選択肢の出方が型で変わり、NVLでは全画面のメニューではなく、いま読んでいる文の直後に選択肢が並ぶ
543
GitHub Primer / 2017– / スタイル / プラットフォームの画面言語
GitHubの高密度な開発画面を、色・文字・アイコン・間隔・部品の規則として共有するデザインシステム。装飾より作業の流れを優先し、小さな面に状態と操作を多く載せながら、アクセシビリティとレスポンシブ対応を崩さない。
無彩色の面に青いリンクと状態色を絞って置く / Octiconsと短いラベルで操作を詰める / 細い境界線でリスト、タブ、サイドバーを分ける / 密度が高くても見出しと間隔の段階が一定
544
Adobe Spectrum / 2013– / スタイル / プラットフォームの画面言語
Adobeの制作アプリ群を横断するためのデザインシステム。Rational、Human、Focusedを原則に、デスクトップとモバイルで密度の尺度を切り替え、道具の数が多い画面でも制作物へ注意を戻せるようにする。
濃淡の異なる中立面に、選択中だけ鮮色を置く / アイコン、文字、境界線が同じ密度尺度で拡大する / ツールバーとプロパティパネルが細い区切りで連なる / 前景の制作物がUIより強く見える
545
Atlassian Design System / 2012– / スタイル / プラットフォームの画面言語
JiraやConfluenceの複雑な共同作業を、トークン、文章、余白、グリッド、部品の共有規則へ落とす体系。調和と信頼を一貫性から作りながら、利用者が大量の課題・文書・状態を見失わないことを優先する。
白い面と薄い灰色の階層に青を主操作として置く / 角丸のカードとロゼンジ型の状態ラベル / サイドバー、表、詳細ペインの明確な分割 / 色・余白・角丸・影がトークンで揃う
546
Ant Design / 2015– / スタイル / プラットフォームの画面言語
企業向けウェブアプリの複雑さを、再利用できる部品とページの型で低エントロピーに保つ設計体系。Natural、Certain、Meaningful、Growingを価値に掲げ、表・フォーム・階層・状態を高い密度のまま規則化する。
小さな文字と細い罫線で密度の高い表を組む / 青い主操作と明確な成功・警告・危険色 / フォーム、ページャー、ツリー、表の部品が一貫する / 余白を広げず整列と反復で読みやすくする
547
Shopify Polaris / 2017– / スタイル / プラットフォームの画面言語
商品、注文、決済、顧客を扱うShopifyの画面を一つの商取引言語に揃えるUIフレームワーク。情報の塊をカードとセクションへ分け、状態と次の行動を短い言葉で示し、管理者が迷わず店を運営できることを中心に置く。
白いカードを淡い地の上へ積む / 緑をブランド色より成功や前進の合図として使う / ページ上部に題名、状態、主要操作をまとめる / 商品・注文・決済の状態を短いバッジで示す
548
549
550
551
552
553
スポーツウェア・ファッション / late 19th century– / スタイル / ファッション史
競技や運動のための可動性・保護・新素材が日常服へ入り、逆に流行の形が競技服へ戻っていく系譜。分割スカートから伸縮素材、ナイロン、ネオプレンまで、身体を動かす機能が現代のカジュアル服の輪郭を作った。
動作を妨げないゆとりと伸縮 / ジッパー、リブ、ドローコードなどの調整部 / チーム色、番号、ストライプの識別 / ナイロン、スパンデックス、ネオプレンなどの機能素材
554
Carbon Design System / 2015– / スタイル / プラットフォームの画面言語
IBMのデジタル製品を、2x Grid、IBM Plex、明快な情報階層、再利用部品で統一するオープンソースのデザインシステム。企業向け画面の高い密度を保ちながら、操作・状態・データの違いを規則で読ませる。
IBM Plexと2の倍数で刻む間隔 / 白・灰・黒の面に青い主操作 / 表、タブ、サイドナビの高い情報密度 / 四角い部品と明確な焦点線
555
Salesforce Lightning / 2015– / スタイル / プラットフォームの画面言語
営業、顧客、案件、活動という大量の業務情報を、カード、関連リスト、状態パス、再利用部品で一つの操作言語へまとめるSalesforceのデザインシステム。
淡い灰の地に白いカードを積む / 青いヘッダーと主操作 / 案件の段階を横一列のパスで示す / レコード、関連情報、活動を別パネルへ分ける
556
557
558
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
.jpg)
563
564
565
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
574
575
ニュー・ロマンティック / 1979–1983 / スタイル / サブカルチャー・スタイル
ロンドンのBlitz周辺から生まれ、パンク後の黒と破壊を、海賊、摂政時代、キャバレー、未来服を混ぜた演劇的な自己演出へ反転したクラブ・ファッション。装いを完成品で買うより、一夜の人物像として作り上げる。
フリルシャツ、サッシュ、軍服や海賊服の引用 / 白く作った顔、強い頬紅、左右非対称のメイク / 帽子、羽根、宝飾を含む頭部の大きな輪郭 / 歴史衣装と合成繊維、未来的な光沢の混在
576
アシッドハウス・ファッション / 1988–1991 / スタイル / サブカルチャー・スタイル
セカンド・サマー・オブ・ラブの倉庫レイヴで、長時間踊るための大きなTシャツと機能服へ、黄色いスマイリー、蛍光色、反射素材を載せた装い。共同体の目印を一つの単純な顔へ圧縮した。
黄色地に黒いスマイリーフェイス / 大きなTシャツ、ゆるいパンツ、バケットハット / 蛍光黄・橙・緑と黒の強い対比 / 反射材、スポーツ素材、缶バッジの反復
IndexStyleは、デザインの周辺で使われる言葉を何でも載せる一覧ではない。独立項目にするのは、見分けられ、再現でき、近い様式との差を説明できる視覚言語だけ。 収録基準