作例そのものから書いた、デザイン様式の辞典。
素のHTMLでできている。どのブラウザでも、どの端末でも、アプリも登録もなしに開く。同じページを機械もそのまま読む。
| 用語 | 776 |
|---|
スタイル名でも、作りたいものでも検索できます。 名称一致を最優先し、その上で用途・印象・媒体から近い候補を足します。
481
visionOS 空間デザイン / 2023– / スタイル / Apple UI
Apple が Vision Pro 向けの指針書で定めた画面の言語。窓はガラスと呼ぶ素材の直立した面で、周囲の実景を透かし、鏡面反射と影で置かれた位置と大きさを伝える。点をピクセルではなく角度で定義するので、遠ざけても見かけの大きさが変わらない。
背景を差し替えられないガラスの直立面。実景が透け、鏡面反射と影が落ちる / 既定の窓は 1280x720 pt で、開いた直後は約2メートル先、見かけの幅は約3メートル / 見た要素だけが光るホバー効果。当たり判定は角の丸い一塊にまとめられる / 枠を持たない volume では、閉じる釦と窓バーが歩いた側へ向き直る
482
Windows 95 インターフェース / 1995–2001 / スタイル / Microsoft UI
Microsoftが1995年の公式ガイドライン本で文書化した画面言語。灰色の面を外縁と内縁の二重の線で彫り、影の向きだけで押せる場所を示す。画面下端に帯を常駐させ、すべてのソフトを同じ部品で組ませた。
灰色の面に、明るい線と暗い線を外側と内側に二重に重ねた立体の枠 / 画面下端に常駐する帯と、その左端に置かれた四角いボタン / 濃紺一色のタイトルバーと、その右端にまとめられた3つの小さな四角 / アンチエイリアスのない小さなビットマップ文字で、キーボード割当の1字にだけ下線が引かれる
483
ホロ / 2011–2014 / スタイル / Google UI
Google が Android 3.0 で導入し、4.0 では搭載を機種の互換要件にまでした設計言語。黒地に細い罫線を引き、選択と入力と進行だけを一色の青緑で光らせる。メーカーが独自の皮膚を被せた端末でも、この主題を指定したアプリは無改変で表示されるという約束と一体で配られた。
黒地に白文字、区切りは面ではなく1pxの細い罫線 / 選択・入力欄の下線・進行状況だけが #33B5E5 の青緑で光る / 画面上端に横一列のアクションバー、下端に戻る・ホーム・履歴の仮想キーの帯 / タブ見出しと一覧の小見出しが太字の全大文字で組まれる
484
モチーフ / 1989– / スタイル / プラットフォームの画面言語
The Open Groupが維持するUNIXワークステーション向けの画面言語で、IEEE 1295として規格化され200を超える機種に載った。公式資料が自ら3Dの面取り外観と呼ぶとおり、灰色の面の縁に明暗2色を置いて全部品を押し出して見せる。
灰色の面の上辺と左辺が明るく、下辺と右辺が暗い縁で、部品が全部浮いて見える / 押している間だけ明暗が入れ替わり、部品が沈んで見える / 入力を受けている部品の外側を、細い矩形の枠がぐるりと囲む / スクロールバーは角の立った矩形で、両端に三角の矢印ボタンが付く
485
オープンルック / 1988–1990s / スタイル / プラットフォームの画面言語
Sun Microsystems が仕様書として公刊した UNIX ワークステーション向けの画面言語。白黒表示用の版と立体表示用の版を同時に定め、共通要素はすべて一種類のサンセリフで組み、色は控えめに使うと決めた。ポップアップ窓の左肩には押しピンがあり、刺すと窓が作業面に残る。
ポップアップ窓のヘッダー左端にある押しピン。刺した窓は閉じずに作業面へ残る / ラベルの後ろに続く三つの点が別の窓を、輪郭だけの三角がメニューを予告する / スクロールバーはエレベータ、ケーブル、上下のケーブルアンカーに分かれ、ケーブルの濃い部分が表示割合を示す / 作業面は50パーセント、メニューの影は75パーセントの網点で作られる
486
ネクストステップ・インターフェース / 1988–1997 / スタイル / プラットフォームの画面言語
NeXTが1993年の公式ガイドライン書で定めた画面言語。文書は黒と白と灰だけの配色、陰影で立体感を出す簡潔な外観を目標に掲げる。メニューは画面左上に縦の柱として立ち、常駐アプリの箱は右端に縦に並ぶ。
画面左上に縦一列で立つメニューと、その右側へ接続されて開く下位メニュー / 画面の右端に縦に並ぶ正方形のアプリ用アイコン / 色相を持たない灰の階調だけで彫られた厚いベベル / 作業中の窓のタイトルバーが黒く塗られ、そうでない前面の窓は濃い灰になる
487
アミガ・ワークベンチ / 1985–1996 / スタイル / プラットフォームの画面言語
Commodore が自社のスタイルガイドで規定した Amiga の画面言語。初期は青地に白とオレンジの四色だけで組み、角ばったビットマップ書体 Topaz が 640×200 の格子に詰まる。窓ではなく画面そのものが層で、上端のバーを引き下ろすと後ろの画面が現れる。
青地に白とオレンジ、四色しか使わない画面 / 角ばったビットマップ書体が 640×200 の粗い格子に詰まる / 画面の上端を全幅のタイトルバーが走り、右端に前後を入れ替えるガジェットが並ぶ / 有効な部品は左上が明線・右下が暗線で浮き、押すと明暗が反転して沈む
488
BeOS インターフェース / 1995–2001 / スタイル / プラットフォームの画面言語
窓の上辺を占めるタイトルバーを捨て、題名の幅しかない黄色いタブだけを載せたBe社の画面言語。公式ガイドがBe窓だけの機能と呼ぶとおり、Shiftを押しながらタブを横へ滑らせられるため、窓を重ねてもタブだけが横に並んで残る。
手前の窓のタブだけが黄色く、ほかの窓のタブは灰色のまま / タブは窓の幅いっぱいではなく、題名の長さぶんしかない / Shiftを押しながらタブを掴むと、タブが窓の上辺を左右に滑る / 画面の右上隅にDeskbarが立ち、起動中のアプリが縦に積まれる
489
アドワイタ / 2011– / スタイル / プラットフォームの画面言語
GNOME が自分の既定の見た目に与えた名前で、指針書は明るい版と暗い版と高コントラスト版を同じ部品で成立させると定める。窓の上端をヘッダーバーが1本横切り、そこに載る釦は背景も枠も描かれない。アイコンは16x16pxの単色シンボリックに統一される。
窓の上端を横切る1本のヘッダーバー。左と中央と右の三点に寄せ、中央に窓の見出しが座る / ヘッダーバーの釦は背景も枠も持たず、記号と文字だけが面に浮く / 16x16px で描かれた単色のシンボリックアイコン。主要な線は2px幅で、遠近を付けない正面の形 / Blue 3 の #3584e4 を含む、色相ごとに5段階そろえた公開パレット
490
メタル（Java ルック＆フィール） / 1998– / スタイル / プラットフォームの画面言語
SunがSwingの既定外観として作った、どのOSの上でも同じに見えることを狙った設計言語。Metal は社内の開発名がそのまま公称になったもので、青紫の面と1pxの直線の枠を持ち、端末側の様式を一切引き継がない。
薄い青紫の地に、濃い青紫の帯を敷いた内部ウィンドウのタイトルバー / タイトルバーや仕切りに刻まれた細かい点と斜線のテクスチャ / 角丸を持たない矩形のボタンに、1pxの濃い青紫の線を回した枠 / 外側のOSの窓枠は端末のものなのに、その内側だけが別の様式で描かれている二重構造
491
ワンUI / 2018– / スタイル / プラットフォームの画面言語
Samsung が Galaxy 向けに定めた設計言語。指が最も届きやすい高さで画面を割り、上を見るだけの領域、下を触る領域として、見出しを上に、ボタンとタブと対話箱を下へ集める。内容は角を大きく丸めた箱にまとめ、地は白か真っ黒、強調は青一色に絞る。
画面の上側が見出しと余白だけで占められ、操作できる部品が一つも置かれていない / 角を大きく丸めたカード状の箱に、文字や画像がひとまとまりずつ収められる / 上端の見出しは開いた状態と畳まれた状態の二つしか取らず、途中の高さで止まらない / 暗い主題では地が真っ黒になり、そこに青の強調だけが乗る
492
クロスメディアバー / 2003–2013 / レイアウト / プラットフォームの画面言語
ソニーがXMBの名で商標に載せた、家庭用ゲーム機とテレビの画面言語。公式マニュアルの言うとおり横一列が機能の分類、縦一列がその分類でできることを並べ、二列が交わる一点だけが金色に灯って現在地を示す。ほかは暗い地の上で淡い青のまま眠っている。
画面のやや左寄りで横一列と縦一列が交差し、その交点の項目だけが金色に光る / 名前の文字が出るのは選択中の項目だけで、ほかはアイコンだけが並ぶ / 地は黒に近い濃紺一色で、アイコンは塗りでなく細い線の淡い青 / 十字キーの左右で分類、上下で項目が動くが、動くのは列のほうで交点は動かない
493
マジックキャップ / 1994–1998 / 世界観 / プラットフォームの画面言語
General Magic が携帯通信端末に載せた画面言語。物を似せるのではなく場所を似せ、机の上の電話とローロデックスとメモ帳から始まり、廊下を通ってゲーム部屋や倉庫へ入る。触れる対象がすべて絵として描かれ、手引きを読まずに使い始めた人が多かったと記録されている。
机の上に電話とローロデックスとメモ帳とカレンダーが並ぶ最初の画面 / 机の背後の壁に掛時計、書類の入出箱、書類棚が描かれている / 部屋から部屋へは廊下を通る。その廊下にも絵と家具が描かれている / 階調の粗い液晶に描かれた線画を、指ではなくペンで直接突く
494
.png)
GOV.UK デザインシステム / 2012– / スタイル / プラットフォームの画面言語
英国政府の Government Digital Service が公開し維持する設計言語。装飾のない一列左寄せに GDS Transport を組み、角を丸めない緑のボタンは下辺の濃い帯で厚みを持ち、押すとその分だけ沈む。焦点の当たった要素は黄色い地と黒い下線で示す。
装飾のない一列の左寄せで、囲みも影もほとんど使われない / 角を丸めない緑のボタンの下辺に濃い緑の帯が敷かれ、押すとその厚みの分だけ沈む / 焦点の当たった要素だけが黄色い地に変わり、その下に黒い線が引かれる / 文字は 48 / 36 / 24 / 19 / 16px という粗い段しか持たず、中間の大きさが存在しない
495
スクロールテリング / 2012– / レイアウト / ウェブの読み物
読む位置を送る動作そのものを話の進行に割り当てたウェブの版面。図版や地図や動画が送りに応じて入れ替わり、上へ戻せば同じ順で元へ戻る。研究の側では長文報道のウェブ版として整理され、筋は一本道か、望んだ人だけ深く潜れる伸縮式かに分かれる。
図版が画面に留まったまま、本文だけが細い一列で通り過ぎる / 図版の切り替えは不透明度の変化と地図の移動で行われ、逆に送ると元へ戻る / 写真と動画とデータ図の三種類が同じ記事の中に混在する / 筋は一本道か、途中で深掘りへ枝分かれして戻ってくるかのどちらか
496
インフィニット・キャンバス / 2000– / レイアウト / ウェブの読み物
Scott McCloud が2000年の『Reinventing Comics』で名付けたウェブ漫画の版面。画面をページではなく窓と見立て、どこまでも伸びる一枚の面にコマを置く。空間で時間を測る媒体なので、コマの間隔がそのまま話の速さになる。
紙の判型に収まらない縦長や横長の面に、ページの切れ目がひとつも無い / コマの間隔が広がるところで話が遅くなり、詰まるところで速くなる / 階段状や螺旋状に落ちていくコマ列など、ページの中では成立しない並び / 1コマの大きさが隣のコマの何十倍にもなる、判型に縛られない振れ幅
497
ウェブトゥーン（縦スクロール漫画） / 2003– / レイアウト / ウェブの読み物
韓国のポータルで育った、縦一列にだけ流れる漫画の版面。コマ間の空白そのものが表現になり、その長さが経過した時間や場面の変わり目を示し、背景色や降る雨、コマから出した台詞まで担う。読者は先を覗けず、スクロールした分だけ時間が進む。
コマが縦一列にだけ並び、横に目を動かす先がない / コマ間の空白がコマより長く取られ、そこに背景色や降る雨、台詞が置かれる / 幅に対して八倍ほど縦に長い一枚のコマが現れ、何度もスクロールしないと全体が見えない / はじめから全編フルカラーで、画面幅に合わせた一定の横幅で描かれる
498
エクスプローラブル・エクスプラネーション / 2011– / 技法 / ウェブの読み物
Bret Victorが2011年3月の同名の記事で名付けた、読み物の中に動く模型を埋め込む書き方。地の文の数値に点線の下線が引かれ、掴んで動かすと続きの文章と傍らの図が同時に書き換わる。主張の根拠を読者自身が揺すって確かめられる。
地の文の中の数値に点線の下線が引かれ、触れると青に変わる / その数値を左右に動かすと、続く文章と傍らの図が同時に書き換わる / 図が別枠のサンドボックスに隔離されず、段落と段落の間に地続きで置かれる / 何も触らない状態でも図が意味を成し、初期値のまま読み進められる
499
架空ユーザーインターフェース / 1997– / スタイル / UI表現
映画の劇中に映る画面を作る仕事に付いた呼び名。Mark Coleran の作品を指して広まったが、本人は命名の手柄を自分のものとは言い切っていない。使うための道具ではなく読ませるための絵で、光と形と動きと音だけを使い、見る場所を一点に決める。
1つの画面に読ませたい点が1つだけあり、それ以外は密度として置かれている / 等幅の数字が絶えず更新される欄。実際には何も計算していない / 黒地に発光する細い線。図形は輪郭で描かれ、塗りをほとんど持たない / 実在しそうな枠と釦の並び。純粋な抽象図形には振り切らない
500
ダイエジェティックUI / 2009– / 技法 / UI表現
ゲームの情報表示を、虚構の世界の中にあるかと、3D空間の中にあるかの2軸で置き直したとき、両方を満たす区画に付いた呼び名。2009年のチャルマース工科大学の修士論文が定めた。体力を主人公の装備そのものに光らせる設計を指す。
体力や弾数が画面の隅ではなく、主人公の装備そのものに表示されている / 地図が一時停止の画面ではなく、主人公が手に持って歩きながら見る道具として出てくる / 情報の板が空中に投影され、視点を動かすと一緒に傾く / 行き先の指示が、世界の中に立っている標識の色として置かれている
501
1ビットアイコン / 1982–1990s / 技法 / UI表現
Susan Kare が Macintosh のために確立した、白と黒の二値だけで描くアイコンの作法。方眼紙の一マスを一ピクセルとして下絵を起こし、はさみが切り取り、ごみ箱が削除を指すように、日用品の輪郭で命令を言い換える。その原画帳は美術館の収蔵品になった。
白と黒の二値しか使わず、灰色は市松に間引いた点の集まりで代用される / 輪郭が1ピクセルの線で閉じられ、内側は塗りつぶしか網点かのどちらかしかない / はさみ、ごみ箱、書類といったありふれた物の輪郭が、そのまま操作の名前になっている / 方眼の一マスずつ点を置いた跡が残り、斜めの線は階段状に折れる
502
ハイパーカードのスタック / 1987–2004 / レイアウト / デジタル・レトロ
素人が作って配った白黒二値の画面束。頁ではなく一枚のカードが画面を占め、絵と字が同じ面に貼り込まれ、下端に並んだ小さな図釦から別のカードや別の束へ跳ぶ。
一枚のカードが画面を占め、頁を送る動きがない / 白地に黒の二値で描かれ、灰色も写真も網点にほぐされる / カードの下端に、小さな正方形の図釦が横一列に固められている / 絵と字が同じ面に同居し、入力欄は一本の下線だけで示される
503
Winampスキン / 1997–2005 / スタイル / デジタル・レトロ
素人が描いて配った再生機の顔。矩形の窓枠を捨てて据置オーディオ機器の前面パネルを模し、数字も文字も書体ではなくビットマップの絵として一枚の画像に並べて描く。
矩形の窓枠を捨て、据置機器の前面パネルを模した外形になっている / 数字と英字が等幅の極小ビットマップとして一枚の画像に並ぶ / 金属の反射も液晶の発光も、階調ではなくドットの打ち分けで作られる / 本体・イコライザ・プレイリストの三枚が吸着して、縦に一つの装置に見える
504
ミニテルのサービス画面 / 1980–2012 / レイアウト / デジタル・レトロ
枡目の端末に載せるために作られた、一画面で完結するサービスの頁。上端にサービスの名前を置き、番号を打って選ぶ項目を縦に並べ、見出しと絵は升目を割った粗いブロックで組む。
上端にサービス名の帯があり、その下に番号を振った項目が縦一列に並ぶ / 見出しと絵が、一つの升目を縦3・横2に割ったブロックの塊で作られる / 飽和した8色だけで塗られ、中間色も階調も出てこない / 入力する場所が反転表示の帯で示され、強調は反転と下線しかない
IndexStyleは、デザインの周辺で使われる言葉を何でも載せる一覧ではない。独立項目にするのは、見分けられ、再現でき、近い様式との差を説明できる視覚言語だけ。 収録基準