デザインスタイル辞典

作例そのものから書いた、デザイン様式の辞典。

素のHTMLでできている。どのブラウザでも、どの端末でも、アプリも登録もなしに開く。同じページを機械もそのまま読む。

用語776

用語辞典

スタイル名でも、作りたいものでも検索できます。 名称一致を最優先し、その上で用途・印象・媒体から近い候補を足します。

例バウハウス高級感のある採用サイト信頼できる金融アプリ

24/48件表示

こう解釈しました高級Web・UI採用・組織

298

Corporate Modernism — ポール・ランド《IBM ロゴ 8本ストライプ》1972年 — Wikimedia Commons / Public domain

Corporate Modernism

企業モダニズム / 1950s–1970s / スタイル / 現代ブランド

近い理由高級Web・UI採用・組織信頼

ランドやチャマイエフらが確立したCIの黄金期。幾何学ロゴ、グリッドのデザインマニュアル、一貫適用の規律が、企業を近代主義の抽象言語で語る存在に変えた。

幾何学の抽象ロゴ / デザインマニュアル / グリッドの適用規律 / 単色の力強さ

design.md画像プロンプト

42

Bento Grid — AI生成の解釈イメージ
AI解釈イメージ(参考作品ではない)

Bento Grid

ベントーグリッド / 2020s / レイアウト / 情報デザイン

近い理由Web・UI採用・組織信頼技術

異なる種類の情報を独立した箱へ分け、ひと目で全体像をつかませる。

大小のカード / 整列した隙間 / 一画面の要約 / モジュール

design.md画像プロンプト

1

Swiss — Josef Müller-Brockmann《Musica Viva》ポスター — Wikimedia Commons / Public domain

Swiss

スイス・スタイル / 1950s– / スタイル / 機能主義

近い理由Web・UI採用・組織信頼静けさ

秩序を前面に出し、情報そのものを主役にする。

厳密なグリッド / サンセリフ / 非対称 / 客観写真

design.md画像プロンプト

7

Minimalism — Dan Flavin《Untitled (to Don Judd, Colorist) 1–5》1987, Tate Modern — Wikimedia Commons / CC BY 2.0 · © Grand Parc—Bordeaux, France from France

Minimalism

ミニマリズム / 1960s– / スタイル / 機能主義

近い理由Web・UI採用・組織信頼静けさ

要素を減らし、残したものの意味と緊張感を最大にする。

大きな余白 / 少数の要素 / 静かな色 / 精密な間隔

design.md画像プロンプト

230

Pictogram System — AIGA/DOT シンボル「レストラン」 — Wikimedia Commons / Public domain

Pictogram System

案内用ピクトグラム / 1964– / スタイル / 情報デザイン

近い理由Web・UI採用・組織信頼技術

言語に頼らず施設と行為を示す統一図記号の体系。東京1964オリンピックが競技と案内の体系化を確立し、AIGA/DOTの交通標識シンボルがパブリックドメインの標準として世界に定着した。

幾何学化された人体 / 統一された線の太さ / 体系としての一貫性 / 言語からの独立

design.md画像プロンプト

59

Isotype — Otto Neurath & Gerd Arntz, Gesellschaft und Wirtschaft, 1930 — gerdarntz.org より引用

Isotype

アイソタイプ / 1920s–1940s / レイアウト / 情報デザイン

近い理由Web・UI採用・組織信頼技術

数を同じ大きさの記号の反復へ翻訳し、比較を言語より先に読ませる。

統一ピクトグラム / 記号の反復 / 比較軸 / 限定色

design.md画像プロンプト

26

Glassmorphism — Apple《macOS Big Sur の Spotlight》 — Wikimedia Commons / Public domain

Glassmorphism

グラスモーフィズム / 2020s / スタイル / UI表現

近い理由高級Web・UI採用・組織静けさ

半透明の層で奥行きと階層を示し、情報を軽く浮かせる。

背景ぼかし / 半透明 / 細い白枠 / 色のにじみ

design.md画像プロンプト

229

Schematic Transit Diagram — スキーマティック路線図の現代例(CC BY-SA 3.0) · © Oslo_Metro_diagram.svg : Arsenikk derivative work: Arsenikk (talk)

Schematic Transit Diagram

スキーマティック路線図 / 1933– / レイアウト / 情報デザイン

近い理由Web・UI採用・組織信頼技術

地理的正確さを捨て、水平・垂直・45度の線と等間隔の駅だけで路線網を描く図法。ベックの1933年ロンドン地下鉄図が確立し、世界中の交通図の共通言語になった。

45度に制限された線 / 等間隔の駅 / 路線色のコード / 地理からの独立

design.md画像プロンプト

74

Corporate Memphis — Katharina Brenner《コーポレート・メンフィス様式のイラストレーション》2019 — Wikimedia Commons / CC BY 4.0

Corporate Memphis

コーポレート・メンフィス / mid-2010s– / スタイル / イラストレーション様式

近い理由Web・UI採用・組織信頼親密

単純化した人物、幾何学、柔らかな色で、デジタルサービスを安全で親しみやすく説明する。

誇張した人体比率 / 平面色 / 幾何学植物 / 白い背景

design.md画像プロンプト

403

Brushed Metal — Transmission 1.50 の画面 2009 — Wikimedia Commons / CC BY-SA 3.0 · © Alv

Brushed Metal

ブラシドメタル / 1999–2007 / スタイル / Apple UI

近い理由高級Web・UI採用・組織信頼

iTunesやSafariが纏った金属ヘアライン質感のウィンドウ。アプリの用途を素材で語るスキューモーフィズムの分派で、プロ機材の信頼感をデスクトップに持ち込んだ。

金属ヘアラインの面 / リベット風の細部 / 機材のメタファー / 灰色の階調

design.md画像プロンプト

495

Scrollytelling — AI生成の解釈イメージ
AI解釈イメージ(参考作品ではない)

Scrollytelling

スクロールテリング / 2012– / レイアウト / ウェブの読み物

近い理由Web・UI採用・組織信頼技術

読む位置を送る動作そのものを話の進行に割り当てたウェブの版面。図版や地図や動画が送りに応じて入れ替わり、上へ戻せば同じ順で元へ戻る。研究の側では長文報道のウェブ版として整理され、筋は一本道か、望んだ人だけ深く潜れる伸縮式かに分かれる。

図版が画面に留まったまま、本文だけが細い一列で通り過ぎる / 図版の切り替えは不透明度の変化と地図の移動で行われ、逆に送ると元へ戻る / 写真と動画とデータ図の三種類が同じ記事の中に混在する / 筋は一本道か、途中で深掘りへ枝分かれして戻ってくるかのどちらか

design.md画像プロンプト

326

Banknote Guilloche — 米国 教育シリーズ2ドル 1896 — Wikimedia Commons / Public domain

Banknote Guilloche

紙幣のギヨシェ / 18th century– / 技法 / 公共デザイン

近い理由高級Web・UI採用・組織信頼

旋盤彫刻機が生む幾何学的な連続曲線ギヨシェと肖像彫刻で、偽造を拒みながら信用を可視化する紙幣の様式。1896年米国「教育シリーズ」は紙幣を寓意画の傑作に高めた。

ギヨシェの連続曲線 / 凹版の肖像彫刻 / 精緻な地紋 / 額面の階層表示

design.md画像プロンプト

656

Genericana — AI生成の解釈イメージ
AI解釈イメージ(参考作品ではない)

Genericana

ジェネリカーナ / mid-1980s–early 2010s / スタイル / 現代ブランド

近い理由高級Web・UI採用・組織信頼

1920–50年代の米国包装、看板文字、工場ラベルを、具体的な地域史を薄めた現代ブランドの“本物らしさ”へ再編集する様式。広い余白と上質な素材で、汎用的な昔の商店をプレミアムな現在として見せる。

太いサインペインティング体と小さな産地風ラベル / 盾、リボン、星、工場印を単純化した紋章 / 生成り、濃紺、赤、クラフト茶の限定色 / 古い包装図版を広い余白へ一つだけ置く

design.md画像プロンプト

618

Academic Art — William-Adolphe Bouguereau, Homer and His Guide, 1874 — Milwaukee Art Museum, Layton Art Collection — Wikimedia Commons / Public domain

Academic Art

アカデミック美術 / 17th–late 19th century / スタイル / 具象絵画

近い理由高級Web・UI採用・組織信頼

美術アカデミーとサロンが定めた素描、解剖、古典研究、主題の序列を基礎に、輪郭の制御、滑らかで筆跡を隠す表面、理想化した人体、読みやすい歴史・神話場面を完成度の規範として磨いた制度的な様式。

筆触を消した滑らかな画面と明瞭な輪郭 / 古典彫刻を基準に理想化した解剖と姿勢 / 歴史、聖書、神話を頂点に置く主題の序列 / 舞台のように整理された多人物構図と仕上げ

design.md画像プロンプト

611

Roman Art — アウグストゥス・プリマ・ポルタ像 — Wikimedia Commons / CC BY-SA 4.0 · © Justin Benttinen

Roman Art

古代ローマ美術 / c. 509 BCE–476 CE / スタイル / 歴史様式

近い理由高級Web・UI採用・組織信頼

ギリシャ、エトルリア、帝国内各地の造形を取り込みながら、写実的な肖像、歴史叙事の連続浮彫、都市を包む建築と壁画によって、家系、公共生活、皇帝権力を具体的な人物と場所へ結びつけたローマの視覚文化。

年齢や個人差を刻む写実的な肖像頭部 / 出来事を連続場面で追う歴史叙事の浮彫 / アーチ、ヴォールト、ドームを反復する公共建築 / 建築空間や庭園を錯視的に開く室内壁画とモザイク

design.md画像プロンプト

463

Renaissance — マザッチオ《聖三位一体》1425〜1428年 — Wikimedia Commons / Public domain

Renaissance

ルネサンス / 14th–16th century / スタイル / 歴史様式

近い理由高級Web・UI採用・組織信頼

古代の比例と人体を再発見し、線遠近法で三次元を平面に定着させた運動。数学が絵画と建築の共通言語になり、対称・柱式・黄金比といった以後五百年の規範がここで確立した。

一点透視の線遠近法 / 古典柱式と対称 / 人体の比例に基づく構成 / 明快な三角構図

design.md画像プロンプト

609

Ancient Egyptian Art — An official and his wife, ca. 1300–1080 BCE — Ny Carlsberg Glyptotek; photo: Jakub Hałun — Wikimedia Commons / CC BY-SA 4.0

Ancient Egyptian Art

古代エジプト美術 / c. 3000–30 BCE / スタイル / 歴史様式

近い理由高級Web・UI採用・組織信頼

王権、神々、死後の生を永続する秩序として示すため、人物の重要度を尺度へ置き換え、頭部と脚を側面、眼と肩を正面から組む複合視点、水平の場面帯、定型化した姿勢を長期にわたり反復した古代エジプトの造形様式。

頭部と脚は側面、眼と肩は正面に置く複合視点 / 身分や神聖さを人物の大きさで示す階層尺度 / 場面を水平のレジスターへ分ける構成 / 輪郭線と平坦な鉱物色、正面性の強い彫像

design.md画像プロンプト

613

Romanesque — Saint-Sernin, Toulouse — nave vault and round arches; architectural detail — PierreSelim — Wikimedia Commons / CC BY 3.0

Romanesque

ロマネスク / c. 1000–1150 / スタイル / 歴史様式

近い理由高級Web・UI採用・組織信頼

巡礼と修道院文化の広がりの中で、厚い壁、半円アーチ、樽形ヴォールト、明快な量塊を建築の骨格とし、入口のタンパンや柱頭へ引き伸ばされた人物と終末論的な物語を建築と一体化した中世西欧の様式。

厚い石壁と小さな開口、半円アーチ / 樽形または交差ヴォールトと重い柱 / 教会入口の半円形タンパンを埋める浮彫 / 建築枠へ合わせて引き伸ばされる人物と動物

design.md画像プロンプト

486

NeXTSTEP Interface — NeXTSTEP 上の WorldWideWeb ブラウザ — Wikimedia Commons / Public domain

NeXTSTEP Interface

ネクストステップ・インターフェース / 1988–1997 / スタイル / プラットフォームの画面言語

近い理由高級Web・UI技術静けさ

NeXTが1993年の公式ガイドライン書で定めた画面言語。文書は黒と白と灰だけの配色、陰影で立体感を出す簡潔な外観を目標に掲げる。メニューは画面左上に縦の柱として立ち、常駐アプリの箱は右端に縦に並ぶ。

画面左上に縦一列で立つメニューと、その右側へ接続されて開く下位メニュー / 画面の右端に縦に並ぶ正方形のアプリ用アイコン / 色相を持たない灰の階調だけで彫られた厚いベベル / 作業中の窓のタイトルバーが黒く塗られ、そうでない前面の窓は濃い灰になる

design.md画像プロンプト

612

Byzantine Art — サン・ヴィターレ聖堂 ユスティニアヌス帝モザイク — Wikimedia Commons / Public domain

Byzantine Art

ビザンティン美術 / c. 330–1453 / スタイル / 歴史様式

近い理由高級Web・UI採用・組織信頼

キリスト教の聖なる存在を日常空間から切り離し、正面性、階層的な尺度、金地、非自然主義的な光、反復する聖像の型によって、目に見えない秩序を教会建築、モザイク、イコンへ現した東ローマ帝国圏の様式。

鑑賞者を正面から見返す静止した聖像 / 奥行きを消して光そのものに見せる金地 / 地位と聖性を大きさや中央配置で示す階層構成 / 細かなテッセラの角度で光が揺れる壁面モザイク

design.md画像プロンプト

647

Paperback Chic — AI生成の解釈イメージ
AI解釈イメージ(参考作品ではない)

Paperback Chic

ペーパーバック・シック / late 2010s– / スタイル / 出版と編集

近い理由高級Web・UI採用・組織静けさ

柔らかな色、文学的なセリフ体、平たい切り紙風イラスト、広い余白で、日用品を新しい独立系出版社の本のように見せるブランド様式。高級さを艶ではなく、編集された親密さからつくる。

Didoneまたはレトロなセリフ体の大見出し / クリーム、くすみ橙、緑、青の柔らかな色面 / 切り紙や版画を思わせる平たい植物と人物 / 表紙のような縦の余白と小さな説明文

design.md画像プロンプト

6

Modernism — Mies van der Rohe《バルセロナ・チェア》とバルセロナ・パヴィリオン — Wikimedia Commons / CC BY-SA 4.0 · © Cl3phact0

Modernism

モダニズム / 1920s–1970s / スタイル / 機能主義

近い理由Web・UI採用・組織信頼静けさ

装飾を理由のある形へ置き換え、普遍性を目指す。個々の答えは項目として分かれており、バウハウス、スイス・スタイル、ミニマリズム、ストリームライン・モデルヌは、いずれもこの一つの構えから出た別々の解き方にあたる。

単純化 / 明確な階層 / 機能優先 / 普遍的な形

design.md画像プロンプト

51

Vienna Secession — Alfred Roller, XIV Vienna Secession exhibition poster, 1902 — Wikimedia Commons / CC BY 2.0 · © Jean-Pierre Dalbéra

Vienna Secession

ウィーン分離派 / 1897–1910s / スタイル / 世紀末芸術

近い理由高級Web・UI採用・組織信頼

有機的な装飾を幾何学と平面構成で締め、芸術とデザインの境界をなくす。

正方形の骨格 / 反復文様 / 金と黒 / 平面的な人物・植物

design.md画像プロンプト

368

Persian Garden — フィン庭園(CC BY-SA 4.0) · © Amir Pashaei

Persian Garden

ペルシャ庭園 / 6th century BC– / スタイル / 庭園の様式

近い理由高級Web・UI採用・組織信頼

十字の水路で四分割するチャハルバーグ形式の原点。砂漠に水と木陰の楽園を築く設計思想は「パラダイス」の語源となり、イスラム世界からムガルまで庭園の祖型を供給した。

十字水路の四分割 / 水盤と水路の軸 / 壁に囲まれた楽園 / 並木の木陰

design.md画像プロンプト

収録方針

IndexStyleは、デザインの周辺で使われる言葉を何でも載せる一覧ではない。独立項目にするのは、見分けられ、再現でき、近い様式との差を説明できる視覚言語だけ。 収録基準

ページ上部へ戻る