UIデザインスタイルと専門用語の網羅事典

## 一、 全体的なビジュアルスタイルと美学 (Visual Style Movements)

*製品/ウェブサイト全体の芸術的な雰囲気、第一印象のビジュアルトーン、テーマ属性を決定します。*

### 1. ピクセルアート風 (Pixel Art / 8-Bit / 16-Bit)

- **コア特徴**：ギザギザの正方形ピクセルを基本的な描画単位とし、高解像度や滑らかな曲線を意図的に避け、80～90年代初期のファミコン/携帯ゲーム機のビジュアルを再現します。
- **応用シーン**：レトロゲーム（例: 『スターデューバレー』『ピクセルファクトリー』）、Web3/NFTプラットフォーム、ギークやインディー開発者のブランド公式サイト。

### 2. カートゥーン / ベクターイラスト風 (Cartoon / Vector Illustration)

- **コア特徴**：滑らかなベクターライン、明るく鮮やかな配色を採用し、誇張されたユーモラスな人物やマスコットのイラストと組み合わせることで、製品に非常に強い親近感と面白みを与えます。
- **派生代表**：**Notion / コーポレートメンフィス風イラスト**（平坦で手足の長い人物）、**Duolingoスタイル**（ブランドIPがUIに極度に統合）。
- **応用シーン**：SaaS公式サイトのランディングページ、子供向け/語学学習アプリ、ブランドキャンペーンのポップアップ。

### 3. サイバーパンク風 (Cyberpunk / High-Tech Low-Life)

- **コア特徴**：純黒または濃い青の背景に、非常に鮮やかな蛍光ネオンカラー（高輝度マゼンタ、エレクトリックブルー、毒々しい緑）を組み合わせ、グリッチアート（Glitch）、データグリッド、機械的なライン、SF UI要素を融合させます。
- **応用シーン**：eスポーツハードウェアのコントロールパネル、暗号通貨/ブロックチェーンプラットフォーム、ハードコアSFゲーム/ソフトウェアインターフェース。

### 4. シンセウェーブ / レトロウェーブ / ヴェイパーウェーブ (Synthwave / Retrowave / Vaporwave)

- **コア特徴**：1980年代のポップカルチャーに敬意を表しています。グラデーションの紫/ピンク/オレンジ色のグリッド地平線、夕焼け、ヤシの木のシルエット、三次元の石膏像、古いVHSビデオテープのようなノイズの雪の結晶感が満載です。
- **応用シーン**：音楽プレーヤー、レトロファッションブランド公式サイト、パーソナルホームページ、アート展の視聴覚UI。

### 5. Y2K / アシッドグラフィックス (Y2K Aesthetic / Acid Graphics)

- **コア特徴**：ミレニアム（2000年前後）の未来テクノロジーへの想像を再現します。**メタリッククローム質感（Chrome）**、3Dの歪んだ流体フォント、レーザーのような虹色、高輝度の光る星、常識を打ち破る自由な非対称レイアウトを多用します。
- **応用シーン**：トレンドEC、ファッションブランドアプリ、若者向けの音楽・ソーシャル製品。

### 6. クレイモーフィズム (Claymorphism)

- **コア特徴**：インターフェース要素が粘土/カラフルな粘土のような3Dの膨らんだ質感を示します。非常に丸みを帯びた角、柔らかな内側と外側の影を持ち、視覚的に暖かく可愛らしく、立体的な弾力感に満ちています。
- **応用シーン**：子供向け教育アプリ、カジュアルゲームUI、メタバース/アバター生成ツール。

### 7. ネオブルータリズム (Neo-Brutalism)

- **コア特徴**：従来のUIの「優雅で洗練された」イメージを意図的に打ち破ります。高彩度の対照的な配色、100%純黒の太い枠線（2～4px）、ぼかしのない硬い影（Offset Hard Shadow）、そして強い非対称レイアウトを採用します。
- **応用シーン**：Figmaのキャンペーンページ、Gumroadクリエイタープラットフォーム、インディー開発者のポートフォリオ。

### 8. スキューモーフィズム (Skeuomorphism)

- **コア特徴**：実際の物理世界の素材（革のステッチ、金属のヘアライン加工、ガラスの屈折、リアルな木目、凹凸のある物理ボタンなど）を極めて忠実に再現します。
- **応用シーン**：iOS 6および初期のシステム、プロフェッショナルオーディオDSPプラグイン（ハードウェアノブのシミュレーション）、車載スマートコントロールスクリーン。

### 9. フラットデザイン (Flat Design)

- **コア特徴**：光影、グラデーション、テクスチャ素材を完全に排除し、純粋な色ブロック、シンプルな幾何学的図形、明確なフォントサイズとレイアウトのみでインターフェースを構築し、情報伝達効率とマルチデバイス対応性能を大幅に向上させます。
- **応用シーン**：Windows Metro UI、iOS 7+のモダンなモバイルインターフェース。

### 10. マテリアルデザイン (Material Design - M2/M3)

- **コア特徴**：Googleが提唱する体系的なデザイン言語。UI要素を実際の物理的特性を持つ「スマートな紙」と見なし、エレベーション（Elevation）と実際の物理的な影を通じてカードの上下階層関係を表現します。
- **応用シーン**：Androidネイティブシステム、Google Workspaceシリーズツール、Material-UI (MUI)。

### 11. ニューモーフィズム / ソフトUI (Neumorphism / Soft UI)

- **コア特徴**：背景とコンポーネントが同じベースカラーを使用し、「左上の白いハイライト」と「右下の濃い影」を精密に調整することで、コンポーネントがベース素材から「押し出されて隆起した」または「押し込まれて凹んだ」シリコンのような質感を表現します。
- **応用シーン**：スマートホームコントロールパネル、コンセプトダッシュボード、スマートウォッチUI。

### 12. グラスモーフィズム / すりガラス風 (Glassmorphism)

- **コア特徴**：半透明の背景 + ガウスぼかし（Backdrop Blur）、柔らかな多色グラデーションのベースカラー、そして非常に細い半透明の白いハイライト枠線により、透明感と浮遊感のあるモダンで洗練されたテクノロジー感を演出します。
- **応用シーン**：macOS Big Sur/Sonoma、Windows 11 Fluent Design、iOSライブアクティビティ通知カード。

### 13. メンフィススタイル (Memphis Style)

- **コア特徴**：80年代の反逆的なポップアートに由来します。ランダムに散りばめられた波線、水玉グリッド、三角形、円環などの基本的な幾何学模様が満載で、配色は陽気で高彩度、かつ何の規則性もありません。
- **応用シーン**：キャンペーンバナー、子供向け製品UI、クリエイティブデザイン事務所の公式サイト。

### 14. スイススタイル / 国際タイポグラフィスタイル (Swiss Style)

- **コア特徴**：厳密な数学的グリッドシステム（Grid System）、サンセリフ体（例: Helvetica）、非対称レイアウト、非常に強い視覚的階層感を強調し、抑制され、理性的で厳粛です。
- **応用シーン**：ニュースアプリ（例: Bloomberg）、高級ブランド公式サイト、文字密度の高いレイアウト。

### 15. 手描き / 落書き風 (Hand-Drawn / Doodle)

- **コア特徴**：不規則な揺らぎのある手描きの線、クレヨン/水彩画のような質感の塗りつぶし、手書き風フォントを使用し、ソフトウェアの工業的な冷たさを排除し、人間味と温かさを極めて強く表現します。
- **応用シーン**：手帳アプリ、ノートツール（例: GoodNotesテンプレート）、クリエイティブ製品のストーリーページ。

### 16. 2.5D / アイソメトリック視点 (Isometric Style)

- **コア特徴**：30°の正軸測投影により三次元シーンを描画し、立体的で豊かな空間構造と建築の詳細を示すことができ、かつ近景が大きく遠景が小さくなるような遠近法の歪みがありません。
- **応用シーン**：ビジネスアーキテクチャフローチャート、データビジュアライゼーションダッシュボード、シミュレーションゲームUI。

### 17. ローポリ (Low Poly)

- **コア特徴**：比較的少ない数の平坦な多角形メッシュ（通常は三角形）で三次元オブジェクトを構成し、シンプルな光影と組み合わせることで、クリスタルの屈折や折り紙のような幾何学的な硬質な質感を表現します。
- **応用シーン**：インディーゲーム、テクノロジー製品の背景ベクター画像、アート展のプロモーションUI。

### 18. ミニマリズム / 余白スタイル (Minimalism)

- **コア特徴**：「Less is More (少ないほど豊かである)」。余分な装飾的な線や色彩をすべて排除し、広大なホワイトスペース（White Space）、極めてシンプルなモノトーン、高精細な文字レイアウトを使用します。
- **応用シーン**：Apple公式サイト、高級ブランドEC、読書アプリ（例: WeChat読書、Medium）。

### 19. ダークモード / ピッチブラックOLEDスタイル (Dark Mode / Pitch Black)

- **コア特徴**：純黒（#000000）または極めて濃い灰色（#121212）をベースカラーとし、高コントラストの文字とネオンのアクセントカラーを組み合わせることで、目に優しく省電力でありながら、非常に没入感のある体験を提供します。
- **応用シーン**：開発者IDE（VS Code）、取引所/株式取引ターミナル、夜間読書モード。

### 20. 線画 / モノラインスタイル (Line Art / Monoline)

- **コア特徴**：インターフェース全体が、単一の太さのミニマルな線（Outlines）のみでアイコンやカードの輪郭を縁取り、ほとんど塗りつぶしがなく、クリーンで軽やかな幾何学的な美しさを表現します。
- **応用シーン**：ミニマルな建築/デザイン事務所のウェブサイト、ベクターアイコンライブラリ（例: Heroicons、Lucide）。

## 二、 特徴的なUIコンポーネントと空間コントロールの専門用語 (Component Vocabulary)

*特定の構造形態、視覚的階層、またはインタラクション特性を持つUI空間コンポーネントを記述します。*

| **コンポーネント専門用語 (中/英)**       | **視覚的特徴と機能形態**                                       | **典型的な応用例**                           |
| -------------------------------------- | ------------------------------------------------------------ | ------------------------------------------ |
| **ゴーストボタン (Ghost Button)**      | 背景に実色がなく、細い枠線と文字のみのボタンで、ホバー時に点灯します。主要でない操作の視覚的優先度を下げるために使用されます。 | 「キャンセル」、「詳細を見る」などの補助ボタン   |
| **スケルトンスクリーン (Skeleton Screen)** | データ読み込み時に表示される灰白色のグラデーションコンテンツの輪郭ブロックで、従来の回転するインジケーターに代わり、ユーザーの待機ストレスを軽減します。 | 最初の画面でデータが読み込み中のプレースホルダー |
| **フローティングアクションボタン (FAB)** | 画面右下に浮遊する円形/カプセル形の主要操作ボタンで、ページスクロール時も常に固定されます。 | メールアプリの「新規作成」、コミュニティの「投稿」 |
| **弁当グリッドレイアウト (Bento Grid)** | 日本の弁当箱の仕切りにヒントを得て、情報をサイズが異なり、高度にモジュール化された角丸長方形のカードグリッドに分割します。 | Apple発表会のスペックパラメータ図、iOSホーム画面ウィジェット |
| **セグメントコントロール (Segmented Control)** | 2～5個の排他的なオプションを同じ角丸ボックス内にまとめた単一選択切り替え器で、選択された項目はハイライトスライダーで覆われます。 | iOS設定の単一選択切り替え、「日/週/月」でビューを切り替える |
| **アコーディオン (Accordion)**         | 垂直に積み重ねられたタイトルリストで、クリックすると下部のコンテンツパネルが折りたたまれたり展開されたりします。通常、同時に1つの項目のみが展開されます。 | よくある質問 (FAQ)、多階層設定メニュー         |
| **パンくずリスト (Breadcrumbs)**       | 上部に `ホーム > 部門 > 従業員` のパスを持つ小さなリンクの連なりで、ユーザーが現在のページ階層を理解し、いつでも戻れるようにします。 | ECサイトのカテゴリページ、大規模なドキュメントシステム（例: GitBook） |
| **ボトムシート (Bottom Sheet)**        | 画面下部から上へスライドして表示される半画面または全画面の操作パネルで、大画面時代のスマートフォンの片手操作に非常に適しています。 | WeChatの共有ポップアップ、支払い確認パネル         |
| **ドロワー (Drawer)**                  | 画面の側面に隠されており、ハンバーガーメニュー（Hamburger Menu）をクリックすると左側または右側からスライドして表示されるナビゲーションパネルです。 | モバイルサイトのナビゲーション、管理画面のサイドバー |
| **カルーセル / スライドショー (Carousel)** | ユーザーが左右にスライドして複数の画像/カードパネルを閲覧できるコンポーネントで、小さな丸いインジケーター（Dots）が付属します。 | ECサイトのトップページバナー、おすすめカードグループ |
| **ステッパー / ウィザード (Stepper / Wizard)** | 数字の円と横線で接続されたプロセスインジケーターで、ユーザーが複雑なタスクを段階的に完了できるようにガイドします。 | ショッピングカートの決済、アカウント登録プロセス   |
| **ピルタグ / チップ (Pill Tag / Chip)** | 端が完全に丸い（カプセルのような）小型のタグまたはクリック可能なフィルターブロックです。 | 記事タグ、商品属性選択（例: 「赤/Lサイズ」）     |
| **スティッキーヘッダー/フッター (Sticky Header/Footer)** | ページを縦方向にスクロールしても、ビューポートの上部または下部に固定されるナビゲーションバーまたは操作バーです。 | モバイルECサイト下部の「今すぐ購入」バー         |

## 三、 質感、光影、視覚的詳細の専門用語 (Textures, Optics & Visual Effects)

*視覚的な精細度、レンダリングの詳細、光学的な質感を記述する専門用語。*

1. **スカークル / 連続曲率 (Squircle / Continuous Curvature)**：
   - *解説*：通常の角丸長方形（直角+正接円弧）を捨て、高次数学曲線を用いて直線から円弧への極めて滑らかなグラデーションを実現し、不連続な接点がありません。これはAppleの全ハードウェアとiOSアイコンが非常に高級感を持つ核心的な秘訣です。
2. **メッシュグラデーション / 拡散グラデーション (Mesh Gradient / Diffused Gradient)**：
   - *解説*：従来の単方向線形グラデーションを打ち破り、複数の色ノードが雲のように二次元平面上で互いに浸透し拡散することで、幻想的な雰囲気に満ちています。
3. **ノイズテクスチャ / フィルムグレイン (Noise Texture / Film Grain)**：
   - *解説*：滑らかなグラデーションや単色背景の上に、微細な単色/カラーノイズ粒子を重ねることで、デジタルカラーの冷たさを排除し、紙やフィルムのような触感を加えます。
4. **ハードシャドウ / オフセットシャドウ (Offset Hard Shadow)**：
   - *解説*：ガウスぼかし（Blur = 0）を全く使用せず、純黒または濃い色のブロックを右下へ2～6pxオフセットして影として使用します。ネオブルータリズム（Neo-Brutalism）の核心的な特徴です。
5. **アンビエントシャドウ vs ドロップシャドウ (Ambient Shadow vs Drop Shadow)**：
   - *解説*：**ドロップシャドウ (Drop Shadow)** は直射光によって生じる明確な方向性のある影です。**アンビエントシャドウ (Ambient Shadow)** は環境光の拡散反射によって生じる方向性のない、広範囲で非常に柔らかな拡散影で、コンポーネントが空中に浮いているような空気感を演出するために使用されます。
6. **デュオトーン (Duotone)**：
   - *解説*：画像の色を、対照的な2色（例: 濃い青 + 明るいオレンジ）のみで構成される画像スタイルにマッピングします。Spotifyの音楽カバーなどでよく使用されます。

## 四、 ページレイアウト、視線構成、マイクロインタラクション (Layout, Visual Flow & Motion)

1. **アバブザフォールド / ファーストビュー (Above the Fold)**：
   - *解説*：ユーザーがページを下にスクロールすることなく画面上で見ることができる、最初の完全な画面領域。これは製品の最も核心的な価値と **CTA（Call to Action 行動喚起ボタン）** が配置される場所です。
2. **ヒーローセクション (Hero Section)**：
   - *解説*：ウェブサイトのトップページのファーストビューで最も目立つ大きな画像/動画背景領域で、通常は力強いタイトルテキストと主要なコンバージョンボタンが組み合わされます。
3. **F字型とZ字型視線 (F-Pattern & Z-Pattern)**：
   - *解説*：**F字型**は文字密度の高いページ（例: ブログ、ニュース）に適しており、ユーザーの視線は左から右へ、行ごとに下へスキャンします。**Z字型**は情報が少なく、視覚要素が主体のランディングページ（ヒーロー -> 右上ナビゲーション -> 左下イラスト -> 右下CTA）に適しています。
4. **余白 / ネガティブスペース (Negative Space / White Space)**：
   - *解説*：要素と要素の間の空白領域。余白はスペースの無駄ではなく、視覚に「呼吸感」を与え、核心的なコンテンツを際立たせるものです。
5. **ベジェ曲線 / イージング (Cubic-Bezier / Easing)**：
   - *解説*：アニメーション調整の専門用語。機械的な等速運動（Linear）を避け、「イーズアウト」（Ease-Out）や「わずかな跳ね返り」（Bounce/Spring）のある物理曲線を採用することで、インタラクションアニメーションが非常に自然で滑らかに見えます。
6. **パララックススクロール (Parallax Scrolling)**：
   - *解説*：ページスクロール時に、背景レイヤーと前景カードが異なる速度で移動し、強い奥行き感と三次元的な空間感を創り出します。
7. **シマーエフェクト (Shimmer Effect)**：
   - *解説*：スケルトンスクリーン上に、左から右へ斜めに光が走る（光の筋が横切るように）効果で、ユーザーに「現在バックグラウンドで読み込み中である」ことを直感的に伝えます。

## 五、 部署間コミュニケーション早見表 (Everyday Talk vs Pro Terms)

デザイナーやフロントエンドエンジニアとコミュニケーションを取る際に、以下の表を使って「日常的な言葉」に対応する専門用語や技術的な実装方法を素早く確認できます。

| **あなたが言いたい「日常的な言葉」**     | **デザイナー専門用語**                      | **フロントエンド/CSSコードキーワード**              | **デザイナーへのコミュニケーション例**                               |
| -------------------------------------- | ------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------------ |
| 「モザイク/ファミコンゲームのような感じにして」 | **ピクセルアート風 (Pixel Art)**            | `image-rendering: pixelated;`                       | 「このキャンペーンページはピクセルアート風で、レトロゲームのような感じにしたい。」 |
| 「粘土/ソフトラバーでできたような3D効果」 | **クレイモーフィズム (Claymorphism)**       | `border-radius` + `inset shadow`                    | 「これらの主要機能アイコンはクレイモーフィズムに変更して、もっと親しみやすい見た目にしたい。」 |
| 「枠線は太く、影は黒く不透明な硬いブロック」 | **ネオブルータリズム (Neo-Brutalism)**      | `border: 3px solid #000; box-shadow: 4px 4px #000;` | 「トップページのカードスタイルはネオブルータリズムを採用し、強い黒枠と高コントラストの配色で。」 |
| 「高級感のある半透明のすりガラスのような感じ」 | **グラスモーフィズム / すりガラス風 (Glassmorphism)** | `backdrop-filter: blur(20px);`                      | 「トップナビゲーションバーはすりガラスのような浮遊効果にして、スクロール時に背景をぼかす。」 |
| 「色が霧のように滲む幻想的な背景」       | **メッシュグラデーション + ノイズ (Mesh Gradient + Noise)** | `radial-gradient` / Canvas                          | 「ヒーローエリアの背景はメッシュグラデーションにして、適度に微細なノイズ粒子感を加える。」 |
| 「コンテンツが表示される前に、いくつかの灰色のプレースホルダーを表示する」 | **スケルトンスクリーン + シマー (Skeleton with Shimmer)** | CSS Animation Gradient Offset                       | 「リストの読み込み時にはスケルトンスクリーンを使用し、光が走るシマーアニメーションも追加して。」 |
| 「Appleの発表会のように、ブロックごとに区切られたカード」 | **弁当グリッドレイアウト (Bento Grid)**     | `display: grid;`                                    | 「製品特性表示エリアは弁当グリッドレイアウトを採用し、異なるサイズの角丸カードをランダムに配置して。」 |
| 「角丸はiPhoneのアイコンのように非常に滑らかに」 | **スカークル / 連続曲率 (Squircle)**        | iOS 規範 / Figma Corner Smoothing                   | 「すべての大きなカードは100% Corner Smoothing（スカークル平滑角丸）を有効にして。」 |