作例そのものから書いた、デザイン様式の辞典。
素のHTMLでできている。どのブラウザでも、どの端末でも、アプリも登録もなしに開く。同じページを機械もそのまま読む。
| 用語 | 776 |
|---|
スタイル名でも、作りたいものでも検索できます。 名称一致を最優先し、その上で用途・印象・媒体から近い候補を足します。
こう解釈しました信頼Web・UI金融
559
BBC GEL / 2010– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
ニュース、映像、音声、子ども向けまで広いBBCのデジタル体験を、読みやすさ、アクセシビリティ、強い見出し、再利用可能なメディア部品で統一するGlobal Experience Language。
黒いヘッダーと白いコンテンツ面 / 太く短い見出しと明確な階層 / 画像比率を揃えたニュースカード / 焦点、字幕、再生操作を強く可視化
547
Shopify Polaris / 2017– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
商品、注文、決済、顧客を扱うShopifyの画面を一つの商取引言語に揃えるUIフレームワーク。情報の塊をカードとセクションへ分け、状態と次の行動を短い言葉で示し、管理者が迷わず店を運営できることを中心に置く。
白いカードを淡い地の上へ積む / 緑をブランド色より成功や前進の合図として使う / ページ上部に題名、状態、主要操作をまとめる / 商品・注文・決済の状態を短いバッジで示す
558
NHSデザインシステム / 2016– / スタイル / 公共デザイン
近い理由信頼Web・UI金融静けさ
英国の医療情報とオンライン手続きを、臨床場面でも読み違えにくい言葉、強いコントラスト、大きな操作面、患者中心のパターンへ揃えるデザインシステム。
NHS Blueの広いヘッダー / 白地に大きな濃色本文 / 緑の主要操作と赤いエラー / 一問ずつ進むフォームと明瞭な警告箱
580
CDEインターフェース / 1993–2000s / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
UNIXワークステーション各社が共通化したCommon Desktop Environmentの画面言語。Motif由来の厚い立体縁、前面パネル、ワークスペース切替、限定色のアイコンで、異なる機種でも同じ仕事場を作った。
画面下端に置く箱状のFront Panel / 明暗2本の縁で盛り上げたボタンと沈めた入力欄 / 小さな色数と黒い輪郭で描くピクセルアイコン / 複数ワークスペースを常設ボタンで切り替える
59
230
案内用ピクトグラム / 1964– / スタイル / 情報デザイン
近い理由信頼Web・UI金融技術
言語に頼らず施設と行為を示す統一図記号の体系。東京1964オリンピックが競技と案内の体系化を確立し、AIGA/DOTの交通標識シンボルがパブリックドメインの標準として世界に定着した。
幾何学化された人体 / 統一された線の太さ / 体系としての一貫性 / 言語からの独立
484
モチーフ / 1989– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
The Open Groupが維持するUNIXワークステーション向けの画面言語で、IEEE 1295として規格化され200を超える機種に載った。公式資料が自ら3Dの面取り外観と呼ぶとおり、灰色の面の縁に明暗2色を置いて全部品を押し出して見せる。
灰色の面の上辺と左辺が明るく、下辺と右辺が暗い縁で、部品が全部浮いて見える / 押している間だけ明暗が入れ替わり、部品が沈んで見える / 入力を受けている部品の外側を、細い矩形の枠がぐるりと囲む / スクロールバーは角の立った矩形で、両端に三角の矢印ボタンが付く
582
GNOME Clearlooks / 2005–2011 / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融静けさ
GNOME 2.12から標準となった、親しみやすさと単純さを優先するデスクトップ・テーマ。淡い灰の窓、青い選択、丸みを抑えた光沢、はっきりした境界が、GTKアプリ全体を静かな道具へ揃えた。
淡灰色の窓面と青い選択バー / 上側だけ明るい控えめなボタンの光沢 / 丸みを抑えたタブと入力欄 / 小さなGNOMEアイコンと簡潔な二段階の階層
532
ゼロックス・スター・インターフェース / 1981–1990s / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
1981年のXerox 8010の画面が定めた設計言語。フォルダ、イン/アウトのバスケット、ファイルの引き出しといった事務用品を名札付きの図像として並べ、当時のブローシャーはそれを電子の机上と呼んだ。画面の物はマウスで自由に動かし、複製し、捨てられる。
画面上の図像には必ず名札の文字が付き、図だけに意味を負わせない / 図像はフォルダやイン/アウトのバスケットやファイルの引き出しなど、事務机の上にある物を写している / 物はマウスで掴んで動かせ、移動と複製と削除が同じ操作の系列になっている / 表計算は行と列の格子として現れ、格子を操作する命令がメニューにまとまる
560
Mozilla Protocol / 2017– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
MozillaとFirefoxのウェブサイトを、meaningful、flexible、accessible、global、usefulという原則と、コード化された部品で結ぶデザインシステム。内容を装飾より前へ置き、翻訳や端末差を受け止める。
黒い見出しと広い白場 / 鮮色の大きな面とFirefoxのグラデーション / 柔軟に伸びるbillboardとcard / 太い見出し、短い本文、明確なCTA
599
Palm OSインターフェース / 1996–2009 / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
小さなモノクロ画面、スタイラス、少ないメモリという条件から、アプリ名を置くTitle、右上のCategory、下端のCommand Bar、直接書き込むGraffiti領域を一貫した仕事道具へまとめた携帯端末の画面言語。
160×160前後の低解像度モノクロ画面 / 上端のTitleと右上のCategoryポップアップ / 下端から現れるCommand Barと四つのアプリボタン / 細い1bitアイコン、罫線、Graffiti入力領域
6
490
メタル（Java ルック＆フィール） / 1998– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
SunがSwingの既定外観として作った、どのOSの上でも同じに見えることを狙った設計言語。Metal は社内の開発名がそのまま公称になったもので、青紫の面と1pxの直線の枠を持ち、端末側の様式を一切引き継がない。
薄い青紫の地に、濃い青紫の帯を敷いた内部ウィンドウのタイトルバー / タイトルバーや仕切りに刻まれた細かい点と斜線のテクスチャ / 角丸を持たない矩形のボタンに、1pxの濃い青紫の線を回した枠 / 外側のOSの窓枠は端末のものなのに、その内側だけが別の様式で描かれている二重構造
485
オープンルック / 1988–1990s / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
Sun Microsystems が仕様書として公刊した UNIX ワークステーション向けの画面言語。白黒表示用の版と立体表示用の版を同時に定め、共通要素はすべて一種類のサンセリフで組み、色は控えめに使うと決めた。ポップアップ窓の左肩には押しピンがあり、刺すと窓が作業面に残る。
ポップアップ窓のヘッダー左端にある押しピン。刺した窓は閉じずに作業面へ残る / ラベルの後ろに続く三つの点が別の窓を、輪郭だけの三角がメニューを予告する / スクロールバーはエレベータ、ケーブル、上下のケーブルアンカーに分かれ、ケーブルの濃い部分が表示割合を示す / 作業面は50パーセント、メニューの影は75パーセントの網点で作られる
491
ワンUI / 2018– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融静けさ
Samsung が Galaxy 向けに定めた設計言語。指が最も届きやすい高さで画面を割り、上を見るだけの領域、下を触る領域として、見出しを上に、ボタンとタブと対話箱を下へ集める。内容は角を大きく丸めた箱にまとめ、地は白か真っ黒、強調は青一色に絞る。
画面の上側が見出しと余白だけで占められ、操作できる部品が一つも置かれていない / 角を大きく丸めたカード状の箱に、文字や画像がひとまとまりずつ収められる / 上端の見出しは開いた状態と畳まれた状態の二つしか取らず、途中の高さで止まらない / 暗い主題では地が真っ黒になり、そこに青の強調だけが乗る
600
OS/2 Workplace Shell / 1992–2001 / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
フォルダー、プリンター、ドライブ、設定を単なるアイコンではなく操作可能なオブジェクトとして扱うOS/2のデスクトップ。厚い3D縁、影付きアイコン、Notebook形式の設定、ドラッグ＆ドロップで、仕事場の物を直接扱う発想を画面全体へ通した。
淡灰色の面と明暗を二重に置く立体縁 / 色数を抑えた斜め視点のオブジェクト・アイコン / 背表紙のようなタブを重ねたNotebook設定 / フォルダー、シュレッダー、ドライブ間の直接ドラッグ
570
Ubuntu Yaru / 2018– / スタイル / プラットフォームの画面言語
近い理由信頼Web・UI金融技術
Ubuntuの既定テーマとして、Adwaita由来のGTKとGNOME ShellへUbuntuの橙、濃いヘッダーバー、Suru系アイコンを重ねた共同制作の画面言語。窓、シェル、アイコン、カーソル、音まで一つのテーマ群として配る。
明るい窓面と濃いヘッダーバーの対比 / Ubuntu Orangeを選択と焦点へ使う / 円・正方形・縦横の長円を基礎にしたSuru系アイコン / アイコンの1px縁、弱いグラデーション、下方の影
32
フラットデザイン / ベクターミニマリズム / 2010s– / スタイル / UI表現
近い理由信頼Web・UI金融
情報を単純な面と色へ還元し、画面や媒体を越えて扱いやすくする。
均一な面 / 単純図形 / 少ない影 / 明快な色
8
ウェブ・ブルータリズム / 2014– / スタイル / UI表現
近い理由信頼Web・UI金融
ブラウザの既定表示をそのまま画面に出し、整えられたテンプレートの見た目を拒む。HTMLの素の構造が、そのまま様式になる。
ブラウザ既定の見出しとリンク / 下線つきの青いリンク / 極端な文字サイズの落差 / 装飾のない罫と余白
58
WPAポスター / 1935–1943 / スタイル / 公共デザイン
近い理由信頼Web・UI金融
公共の目的を、簡潔な図像と限られた印刷色で広く力強く伝える。
簡略化した風景 / 太いサンセリフ / シルクスクリーン色 / 明快な行動喚起
31
ニューブルータリズム / 2010s– / スタイル / UI表現
近い理由信頼Web・UI金融
太い枠と露骨な色で、洗練しすぎたWebへ親しみある反抗をする。
太い黒枠 / 硬い影 / 鮮色 / 平坦な部品
24
スキューモーフィズム / 2000s–2010s / スタイル / UI表現
近い理由信頼Web・UI金融
現実の素材や道具の手がかりを借り、未知の操作を理解しやすくする。原理の名なので、Aquaもブラシドメタルもこの原理を特定の製品で実装した姿にあたる。
革・金属・紙 / 立体的な影 / 現実の比喩 / 細かな質感
2
347
グループf/64 / 1932–1935 / スタイル / 写真運動
近い理由信頼Web・UI金融技術
ウェストンとアダムスらが絞りf/64の隅々まで鋭い描写を旗印にした、ストレート写真の宣言。ピクトリアリズムの霞を拒否し、大判の精密と豊かな階調そのものを写真の美とした。
全面パンフォーカス / 大判カメラの精密 / 豊かなグレースケール / 操作を拒む直接性
IndexStyleは、デザインの周辺で使われる言葉を何でも載せる一覧ではない。独立項目にするのは、見分けられ、再現でき、近い様式との差を説明できる視覚言語だけ。 収録基準