作例そのものから書いた、デザイン様式の辞典。
素のHTMLでできている。どのブラウザでも、どの端末でも、アプリも登録もなしに開く。同じページを機械もそのまま読む。
| 用語 | 776 |
|---|
スタイル名でも、作りたいものでも検索できます。 名称一致を最優先し、その上で用途・印象・媒体から近い候補を足します。
529
グスタヴィアン様式 / 1770s–1790s / スタイル / 家具とインテリア
グスタフ3世のもとで成立したスウェーデンの新古典。手本はルイ16世様式の形式的な古典主義で、王はヴェルサイユを訪れ、フランスの職人を宮廷に招いている。ただし高価な素材は国産のガラスに置き換えられた。
抑制のきいた新古典の輪郭で、ルイ16世様式の形をそのまま写している / ロッククリスタルの飾りが、小さな透明ガラスの玉に置き換わっている / コバルトの青いガラスが、透明なガラスの中に少量だけ差し込まれる / 金メッキの金具と鎖が、ガラスをつなぐ骨として表に出ている
530
.jpg)
531
マシン・アート / 1934 / スタイル / 近代デザイン運動
1934年にニューヨーク近代美術館が開いた展覧会の名。ばね・鍋・計器といった量産の実用品を台座に載せ、彫刻と同じ扱いで見せた。会場は19世紀の褐色砂岩館の繰形を覆い隠して作られており、無装飾の品を無装飾のまま見せることが展示の条件だった。
台座の上に、実用の量産部品がひとつずつ間隔をあけて置かれる / 壁と天井の繰形が覆われ、背景の面に模様が一切ない / 対象はばね、鍋、計器のように、もともと見せるために作られていない品 / 作者の欄に個人名ではなく製造会社の名が並ぶ
532
ゼロックス・スター・インターフェース / 1981–1990s / スタイル / プラットフォームの画面言語
1981年のXerox 8010の画面が定めた設計言語。フォルダ、イン/アウトのバスケット、ファイルの引き出しといった事務用品を名札付きの図像として並べ、当時のブローシャーはそれを電子の机上と呼んだ。画面の物はマウスで自由に動かし、複製し、捨てられる。
画面上の図像には必ず名札の文字が付き、図だけに意味を負わせない / 図像はフォルダやイン/アウトのバスケットやファイルの引き出しなど、事務机の上にある物を写している / 物はマウスで掴んで動かせ、移動と複製と削除が同じ操作の系列になっている / 表計算は行と列の格子として現れ、格子を操作する命令がメニューにまとまる
533
![PLATO Terminal Screen — PLATO V端末のプラズマ画面 1981年 — Wikimedia Commons / CC BY 3.0 · © Mtnman79 [1]](https://commons.wikimedia.org/wiki/File:Platovterm1981.jpg)
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
ブラック・ダンディズム / 18th century– / スタイル / ファッション史
仕立てた服と所作を自己形成の手段にし、人種化された見られ方を自ら編集し返す装いの系譜。華美か抑制かという一つの見た目ではなく、規範を熟知した上で細部をずらし、尊厳、抵抗、アイデンティティを同時に表す。
身体に合わせた精密な仕立て / 帽子、襟、タイ、靴まで統制された全身 / 古典的な紳士服に色・柄・所作のずれを入れる / 肖像として正面から自信を持って見せる
549
パワー・ドレッシング / 1970s–1980s / スタイル / ファッション史
職場の権威を服で可視化する装いで、1980年代には大きな肩を持つ鋭いスーツが、上昇志向の男女の記号になった。体を大きく、輪郭を硬く見せる一方、既存の組織規範へ同化する力も持つ。
肩幅を広げるパッド入りのジャケット / 腰を絞った逆三角形のシルエット / 濃色、ピンストライプ、光沢の少ない梳毛 / スーツ、シャツ、タイ、パンプスの統制
550
ファッションの脱構築 / 1980s– / スタイル / ファッション史
服を完成した一体物として隠すのではなく、縫い代、裏地、断ち端、型紙、非対称な接合を表へ出し、衣服を成り立たせる規則そのものを問い直す。破壊の演出ではなく、分解した構成要素から別の身体像を組み直す。
縫い代と裏地が表側へ出る / 未処理の断ち端と意図的なほつれ / 左右で異なる接合とずれた重心 / 型紙や芯地が完成面として見える
551
キャンプ・ファッション / 19th century– / スタイル / ファッション史
人工性、誇張、演劇性、パロディ、過剰を愛し、良い趣味と悪い趣味の境を楽しむ装いの感性。単なる派手さではなく、真面目さが大きくなりすぎて笑いと批評へ反転するところに力がある。
身体の尺度を越える誇張された輪郭 / 人工的な素材と過剰な装飾 / 歴史的衣装や大衆文化の引用 / ユーモア、パロディ、演劇的なポーズ
552
森ガール／森系 / 2007– / スタイル / 日本のストリート
都市の生活者が「森にいそうな女の子」を想像して作った日本のストリートファッション。身体の線を強く出さない服を何層も重ね、生成り、土、苔の色と天然素材、古物の小物で、急がない生活の物語まで装いへ含める。
ゆったりしたワンピースやスカートの重ね着 / 生成り、茶、苔色の低彩度 / レース、編み物、麻、ウールの手触り / 革靴、籠、古いアクセサリーなどの小物
IndexStyleは、デザインの周辺で使われる言葉を何でも載せる一覧ではない。独立項目にするのは、見分けられ、再現でき、近い様式との差を説明できる視覚言語だけ。 収録基準