Blueprompt - UI Component Encyclopedia

Glass

Style

Glassmorphism

背景をすりガラスのように透過させ、奥行きと洗練さを持たせるスタイル。重層的なUIにおいて、コンテキスト（背景の環境）を感じさせる役割があります。

Material PromptCopy

「背景は不透明度を10%〜30%程度に落とした白（または黒）。『backdrop-filter: blur(12px)』で背景にブラー効果を適応し、要素のアウトラインに1pxの極細半透明ボーダー（border: 1px solid rgba(255,255,255,0.2)）を付与してエッジを立たせる。」

Style

Neo-Brutalism

徹底的にフラットで生々しく、原色や強い境界線を多用する反骨的なデザインスタイル。過度な親切さを排除し、強烈なインパクトを残します。

Style PromptCopy

「角丸（border-radius）は完全に排除（0px）、または完全な真円。ボーダーは極太（3-4px）の真っ黒を使用し、ドロップシャドウの代わりに『ボカシ（blur）がゼロの絶対配置のソリッドカラーの影（box-shadow: 8px 8px 0 #000）』を使用する。」

Duotone

Style

Duotone Filter (Blend Mode)

どんな写真が来てもブランドカラーに強制的に染め上げるテクニック。Spotifyが多用したことで有名になり、サイト全体のトンマナを劇的に統一します。

Visual PromptCopy

「画像レイヤーの上（または兄弟要素）に、ブランドのメイン2色による強いグラデーションレイヤーを絶対配置で乗せる。上のグラデーションレイヤーに『mix-blend-mode: multiply』や『screen』『color』をかけて、写真の陰影を残しつつ色調をジャックする。」

Soft

Style

Neumorphism (Soft UI)

要素が背景から「押し出された」ように見える、立体的で柔らかいデザインスタイル。明るいグレーやパステルカラーを基調としたクリーンなインターフェースに向いています。

Visual PromptCopy

「背景色と要素の背景色を全く同じ（例えば #e0e5ec）にする。その要素に対して、右下に暗いドロップシャドウ、左上に明るい（白い）ドロップシャドウの2つの box-shadow を同時にかけることで、背景から隆起しているような錯覚を生み出す。」

Clay

Style

Claymorphism

粘土（クレイ）で作られたような、ふっくらとしたマットな3D感が特徴。Web3やモダンなテック系サイトで、親しみやすさと最先端のテイストを両立させます。

Material PromptCopy

「要素に大きめの border-radius（丸み）を持たせ、パステル系のマットな背景色を設定する。立体感を出すために、内側への光（inset box-shadow 白）と内側への影（inset box-shadow 黒成分）、そして全体を落とすドロップシャドウの3つの影を組み合わせる。」

CYBER

Style

Cyberpunk / High-Tech

暗闇に浮かび上がるネオンカラーや、グリッド線、デジタルノイズを取り入れたSF風のデザイン。ゲーミング、クリプト、AI関連のプロダクトで強烈な世界観を構築します。

Aesthetic PromptCopy

「背景は完全な黒（#000）または極めて暗いグレー。メインカラーには高彩度のシアン（#00ffff）やマゼンタ（#ff00ff）、ネオングリーンを使用する。要素の境界線（border）やテキストに text-shadow や box-shadow で強い発光（Glow）を持たせ、背景に細いグリッド線を敷く。」

HOLO

Style

Holographic / Iridescent

CDの裏面やシャボン玉のように、見る角度によって色が複雑に移り変わる表現。コスメティック、ファッション、あるいはWeb3の先進的なトークンなどを表現する際に使われます。

Color PromptCopy

「3色以上の彩度の高いパステルカラー（ピンク、水色、紫、イエロー等）を用いたリニアグラデーション、あるいはラジアルグラデーションを複数重ねる。さらにCSSの `mix-blend-mode` や `filter: hue-rotate()` などを組み合わせ、光の干渉のような複雑で虹色のテクスチャを生み出す。」

START GAME

Style

Retro 8-bit / Pixel Art

昔のビデオゲームのようなピクセルアートや、Windows 95のようなレトロなシステムUIを模倣したスタイル。ノスタルジーを喚起し、コアなファン層のエンゲージメントを高めます。

Style PromptCopy

「ピクセルフォント（DotGothic16等）または等幅フォントを使用。要素の角丸は一切使わず（0px）、ボーダーには白線の内側に黒線を引くなどして疑似的な立体感を出す。色は原色に近いブルーやイエロー、マゼンタなどを使用し、画像には `image-rendering: pixelated;` を当てる。」

Box Model

Style

Wireframe / Blueprint

完成品ではなく、あえて設計図やワイヤーフレームのような「製作途中」のルックを見せるスタイル。開発者向けツールやエンジニアリングブログなどでインテリジェントな印象を与えます。

Aesthetic PromptCopy

「背景はダークネイビーにし、要素の背景色は完全に透明（transparent）にする。すべてのコンポーネントの境界線を破線（1px dashed）や極細のソリッドラインで描き、四隅にリサイズハンドルのような小さな四角形（疑似要素）を配置してCADやデザインツールのような見た目にする。」

PURE.

Black & White

Style

Minimalist Monochrome

色を完全に排除し、白と黒のコントラスト、タイポグラフィのジャンプ率（大小の差）、そして究極の余白だけで構成するハイブランドやポートフォリオ向けの至高のスタイル。

Style PromptCopy

「配色は #ffffff と #000000 の2色のみに制限（グレーすら極力使わない）。文字サイズはセオリーを無視して極端に巨大（6rem 等）な要素と、極端に小さい要素を組み合わせ、強烈なコントラストを生み出す。要素を極限まで減らし、マージン・パディングの余白幅を通常の2〜3倍取る。」

Style

Classic Skeuomorphism

現実世界の物理的な質感（革、木材、金属、ガラスの反射）を極限まで模倣するスタイル。フラットデザインの反動として、一部の高級オーディオアプリやシンセサイザーアプリで根強く人気です。

Material PromptCopy

「フラットな塗りを全て排除し、複数の `linear-gradient` や `radial-gradient` を使用して表面のハイライトと深いシャドウ（反射・照り返し）を描画する。強いドロップシャドウと、要素の内側に光沢を持たせる白い `inset box-shadow` を組み合わせ、現実世界のボタンの質感を再現する。」

VAPORWAVE

Style

Vaporwave / Synthwave

80年代のレトロヒューチャー、輝くヤシの木、ネオンピンクとパープルの夕焼けをイメージさせるスタイル。ノスタルジックかつエッジの効いた音楽系・アパレル系のサイトに。

Aesthetic PromptCopy

「背景は濃いパープルからネイビーへのグラデーション。画面下部にCSSの `perspective` と `rotateX` を用いて、奥へ向かって伸びる『ネオンピンクのグリッド線（床）』を表現。タイポグラフィにはクロムのような金属光沢か、マゼンタの強いネオン発光（text-shadow）を持たせる。」

Aero

Style

Y2K / Frutiger Aero

2000年代初頭のWeb 2.0時代や、Windows Vista/7、初期iOSに見られた「透明感のあるプラスチック・水滴・泡・オーロラ・地球」などがモチーフの、ツヤツヤでポジティブなスタイル。

Material PromptCopy

「要素は青や緑を中心とした明るい色使いで、ボタンや窓枠を『透明なプラスチックや水滴』のように見せる。上から下へ白から透明に変わるリニアグラデーション（ハイライト）をかぶせ、強い光沢感と丸みのある（角丸の大きい）UIを構築する。」

BAU
HAUS

Style

Bauhaus / Swiss Design

機能主義に基づき、装飾を排除して「三原色（赤・青・黄）」と幾何学図形（正方形・真円・直線）のみで構成するスタイル。厳密なグリッドとHelvetica等のサンセリフ体を使用。

Style PromptCopy

「色は白、黒、赤（#e63946 等）、青、黄のみを基本とする。太さのあるソリッドな黒線（3-5px）で画面を非対称（アシンメトリー）なグリッド構造に分割する。角丸を使用せず幾何学的（四角形と真円のみ）に構成し、タイポグラフィは巨大なサンセリフ体を厳密な左揃えで配置する。」

CHROME

Style

Liquid Metal / Chrome Effect

近年Web3やハイエンドアパレルで流行している、液状の銀色金属（クロム）や水銀のような質感の表現。テキストや3Dオブジェクトをギラついたメタリックに仕上げます。

Visual PromptCopy

「暗い背景に対して、テキストの塗りを `linear-gradient` に設定。グラデーションのカラーストップを『白 → 薄いグレー → 濃いグレー → 急激に白』のように複数回上下させることで、周囲の環境を反射しているようなクロム金属のハイライトとシャドウを疑似的に描画する。」

Style

Gooey Effect / Blob UX

2つの要素が近づくと水滴のように「ぬるっ」と融合する表現（メタボール）。有機的で遊び心のあるインタラクションを生み出します。

Motion PromptCopy

「CSSのフィルター機能を活用し、親要素に `filter: contrast(20);`、その中で動く子要素の円形に `filter: blur(10px);` をかけることで、境界線が溶け合うスライム状の「Gooey効果」を実装する（またはSVGのfeColorMatrixを使用する）。」

Style

Isometric 3D

斜め上からの俯瞰視点（アイソメトリック）で描かれた2Dの3D表現。都市開発、物流、SaaSのダッシュボードイラストなどで「システム全体を見渡す」感覚を与えます。

Visual PromptCopy

「通常の2Dアイコンや四角形に対して、CSSの `transform: rotateX(60deg) rotateZ(-45deg)` 等を用いて斜影投影（アイソメトリック図法）に変形させる。さらに厚みを持たせるため、段階的なずらしを入れた複数の `box-shadow` を適用する。」

GLITCH

Style

Data-Mosh / Glitch Art

映像の乱れやRGBの色ズレ（クロマティック・アベレーション）を意図的に引き起こすスタイル。反逆的でエネルギッシュなストリート系やサイバーカルチャーで使用します。

Aesthetic PromptCopy

「テキストや画像に対して、シアン（#00ffff）とマゼンタ（#ff00ff）のレイヤーを `position: absolute` でわずかに（2px〜4px）ズラして重ねる（RGBシフト）。さらに `@keyframes` や `clip-path` を用いて、一瞬だけ要素がノイズで切り刻まれるようなグリッチアニメーションを入れる。」

PUNK'S

NOT DEAD

Style

Ransom Note / Grunge

雑誌から切り抜いた文字（身代金要求状）や、ガムテープ、破れた紙のテクスチャを使うパンクな（アンチデザインの）スタイル。強烈なDIY感と反骨精神を表現します。

Style PromptCopy

「見出しの各単語（または文字）ごとに、意図的に異なるフォント（セリフ体、サンセリフ体、等幅など）を混合する。それぞれに背景色（黒や白）を敷き、`transform: rotate()` で微妙な角度（-5度から5度など）をつけて不規則に配置し、切り貼りしたようなコラージュ感を作る。」

POP!

Style

Pop Art / Comic Book

太い黒の輪郭線（セルシェーディング）、ハーフトーン（網点）、そして鮮やかな原色。アメリカンコミックやロイ・リキテンスタインのアートのような、極めてキャッチーなデザイン。

Visual PromptCopy

「全要素のアウトラインに太い黒の境界線（`border: 3px solid #000`）を引き、影は真っ黒なドロップシャドウ（`box-shadow: 5px 5px 0 #000`）にする。背景や要素の局所に `radial-gradient` をパターンのように繰り返した『ハーフトーンドット（ド真円の細かい水玉模様）』を忍ばせる。」

Melancholia

Chapter VII.

Style

Dark Academia / Goth

古典文学、古い図書館、ベルベットの質感、キャンドルの光を彷彿とさせる、エレガントで陰鬱な美学。高級ワイン、香水、またはゴシックな世界観のゲームなどに。

Style PromptCopy

「背景は漆黒（#000）または極めて深いブラウンやワインレッド（#271815等）。タイポグラフィは非常に細く優雅なセリフ体（明朝体）を使用し、文字色にはくすんだゴールド（#d4af37）や羊皮紙のようなオフホワイトを用いる。要素の中心を揃え、儀式的なシンメトリーなレイアウトを組む。」

Style

Y3K / Cyber-Organic (Aliencore)

Y2Kの次に来る進化系。サイバーパンクの無機質さと有機体（スライム、植物、エイリアンのような流体）が融合した、不気味で艶やかな超未来スタイル（エスパやハイパーポップ）。

Visual PromptCopy

「流体シェイプ（border-radius: 40% 60% 70% 30% 等の歪な角丸）と、強烈なネオングリーンやアシッドイエローのグラデーションを組み合わせる。金属的な光沢と、生身の細胞がうごめくような不規則なCSSアニメーション（メタボール的変形）を混在させる。」