デザインスタイル辞典

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

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

用語776

用語辞典

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

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

24/776件表示

25

Neumorphism — Vectorium《ニューモーフィズムのUI要素集》2020 — Wikimedia Commons / CC BY-SA 4.0

Neumorphism

ニューモーフィズム / late 2010s– / スタイル / UI表現

背景と部品を同じ素材にし、柔らかな陰影だけで凹凸を示す。

同色面 / 二方向の影 / 丸い部品 / 低コントラスト

design.md画像プロンプト

26

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

Glassmorphism

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

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

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

design.md画像プロンプト

28

Cyberpunk — 新宿・歌舞伎町のネオンサイン — Wikimedia Commons / CC BY 4.0 · © ノボホショコロトソ

Cyberpunk

サイバーパンク / 1980s– / スタイル / 未来像

高度な技術と荒れた生活を同居させ、未来への期待と警戒を描く。

雨の夜 / 多言語ネオン / 密集した配線 / 暗い都市

design.md画像プロンプト

29

Maximalism — 19世紀ヴィクトリア朝の居間(オークランド)— Wikimedia Commons / CC BY-SA 3.0 · © Jorge Royan

Maximalism

マキシマリズム / recurring / スタイル / 装飾

量・色・柄を恐れず重ね、過剰そのものを個性と豊かさにする。

多層の柄 / 強い色 / 装飾文字 / 収集的な密度

design.md画像プロンプト

30

Gothic — シャルトル大聖堂 北のバラ窓 — Wikimedia Commons / Public domain

Gothic

ゴシック / 12th–16th century / スタイル / 歴史様式

垂直性と暗い装飾で、神秘・畏怖・永続性を呼び起こす。ここで扱うのは中世に成立した本体で、19世紀にそれを掘り起こした運動はゴシック・リヴァイヴァルとして別に立てている。

ブラックレター / 尖頭形 / 黒 / 細密装飾

design.md画像プロンプト

31

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

Neubrutalism

ニューブルータリズム / 2010s– / スタイル / UI表現

太い枠と露骨な色で、洗練しすぎたWebへ親しみある反抗をする。

太い黒枠 / 硬い影 / 鮮色 / 平坦な部品

design.md画像プロンプト

32

Flat Design / Vector Minimalism — Google《マテリアルデザインのUIコンポーネント》2015 — Wikimedia Commons / Public domain

Flat Design / Vector Minimalism

フラットデザイン / ベクターミニマリズム / 2010s– / スタイル / UI表現

情報を単純な面と色へ還元し、画面や媒体を越えて扱いやすくする。

均一な面 / 単純図形 / 少ない影 / 明快な色

design.md画像プロンプト

34

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

Future Funk

フューチャーファンク / 2010s / スタイル / デジタル・レトロ

日本の80年代ポップを高速に再編集し、眩しい多幸感へ変える。

80年代アニメ / シティポップ / 鮮やかな夜景 / 高速コラージュ

design.md画像プロンプト

35

Steampunk — 『Dickinson's Comprehensive Pictures of the Great Exhibition』1854 の機械展示図版 — Wikimedia Commons / Public domain

Steampunk

スチームパンク / Victorian retrofuture / スタイル / 未来像

蒸気時代の素材と機械を延長し、触れられる別の未来史をつくる。

真鍮 / 歯車 / 革 / 計器

design.md画像プロンプト

36

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

Acid

アシッド / 1990s–2020s / スタイル / 反文化

蛍光色と歪みを高圧でぶつけ、視覚を揺さぶる攻撃性をつくる。

蛍光色 / 歪み / 高コントラスト / 荒い3D

design.md画像プロンプト

37

Glitch — James Connolly and Eric Pellegrino によるグリッチ・アート — Wikimedia Commons / CC BY-SA 4.0 · © jonCates

Glitch

グリッチ / digital / スタイル / UI表現

エラーや破損を隠さず、デジタル媒体そのものの脆さを見せる。

色ずれ / ブロックノイズ / 走査線 / 欠落

design.md画像プロンプト

38

Kidcore — KazumiKawaii 撮影《レインボー・デコラ》2016 — Wikimedia Commons / CC BY-SA 4.0

Kidcore

キッドコア / 1990s nostalgia / スタイル / ポップ

玩具・シール・学校用品の記憶を、無条件に明るい色で呼び戻す。

原色 / スマイル / 虹 / 玩具の形

design.md画像プロンプト

40

Blueprint — University Bridge の青写真 1915, シアトル — Wikimedia Commons / CC BY 2.0 · © Seattle Municipal Archives from Seattle, WA

Blueprint

ブループリント / industrial / スタイル / 技術表現

完成物ではなく考え方の線を見せ、構造と可能性を伝える。

青地に白線 / 寸法 / 断面 / 手書き注釈

design.md画像プロンプト

41

Risograph — 2色刷りリソグラフ印刷 2014(CC BY 2.0) · © Mario Felipe

Risograph

リソグラフ / 1980s– / contemporary revival / 技法 / 孔版印刷

色ごとの版と偶然のズレを残し、複製物に一枚ずつの体温をつくる。

版ずれ / 特色インク / 網点 / 紙の透け

design.md画像プロンプト

42

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

Bento Grid

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

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

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

design.md画像プロンプト

43

Isometric Illustration — オーギュスト・ショワジー《ビザンティンの建築術》図版18 コンスタンティノープル 1883年 — Wikimedia Commons / Public domain

Isometric Illustration

アイソメトリック・イラストレーション / technical drawing–digital / 技法 / 図解表現

奥行きを保ったまま俯瞰し、複数要素の関係を一枚で説明する。

30度の軸 / 均一な縮尺 / 分解図 / 小さな世界

design.md画像プロンプト

44

Solarpunk — ソーラーパンクのイラストレーション(CC BY 4.0) · © The.lemonaut.ukr

Solarpunk

ソーラーパンク / 2000s– / 世界観 / 未来像

自然と技術を対立させず、手入れされる明るい未来として描く。

緑と太陽光 / 地域の手仕事 / 再生可能技術 / 共同体

design.md画像プロンプト

45

Afrofuturism — サン・ラー 1973 — Wikimedia Commons / Public domain

Afrofuturism

アフロフューチャリズム / 20th century– / 世界観 / 未来像

アフリカ系の歴史・文化・未来を接続し、失われた時間と新しい可能性を取り戻す。

宇宙的未来 / 文化的パターン / 金属と土 / 神話の再解釈

design.md画像プロンプト

47

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

Claymorphism

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

粘土のような丸い立体感で、デジタル部品を柔らかく遊べるものにする。

膨らんだ形 / 内側のハイライト / 柔らかな影 / パステル

design.md画像プロンプト

48

Gradient Mesh — Gradient-mesh line-editing operations in Inkscape — technical illustration by Stilfehler, 2020 — Wikimedia Commons / CC BY-SA 4.0

Gradient Mesh

グラデーション・メッシュ / digital–contemporary / 技法 / 絵画技法

複数の色の焦点を滑らかにつなぎ、平面に光と気配の奥行きをつくる。

多点グラデーション / にじむ光 / 大きな色面 / 柔らかな奥行き

design.md画像プロンプト

収録方針

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

ページ上部へ戻る