レイアウト（Layout）関連
ページやコンポーネントの配置・構造を決めるときに使う用語です。
グリッド・配置
- ベースライングリッド： 文字の高さを揃えるための見えない行ガイド。
- モジュラーグリッド： 均等に分割されたマス目でレイアウトを組む手法。
- ベントーグリッド： お弁当箱のように大小のカードを組み合わせたデザイン。
- マルチカラムレイアウト： 複数の縦列（カラム）で構成するレイアウト。
- カードレイアウト： 各要素をカード状にまとめて並べる形式。
- スプリットレイアウト： 画面を左右（または上下）に分割したデザイン。
- フルブリード： 余白なしで画面端まで画像やセクションを広げる。
- ヒーローセクション： サイトの最上部に大きく配置する印象的な見せ場エリア。
- ファーストビュー（Above the Fold）： 最初に画面に表示される部分。
方向・形状指定
- アイソメトリック： 斜め45度の立体的な表現。
- ダイナミックレイアウト： 動きや大胆な構図で視線を誘導するレイアウト。
- レスポンシブデザイン： 画面サイズに応じてレイアウトが自動調整される仕組み。
- アシンメトリック： 左右非対称で動きのあるデザイン。
- スケルトンスクリーン： 読み込み時に表示する灰色の仮レイアウト。
ビジュアルスタイル（Visual Style）
デザインの雰囲気や質感を指定するための用語です。
トレンド系スタイル
- グラスモーフィズム： 透明ガラスのようなぼかし表現。
- ニューモーフィズム： 浮き出し・へこみを使った柔らかい立体表現。
- クレイモーフィズム： 粘土のような丸みと濃い影が特徴の3Dスタイル。
- スキューモーフィズム： 現実の質感を模したリアルなデザイン。
- フラットデザイン： 影を使わないシンプルで平面的なデザイン。
- ミニマリズム： 必要最小限の要素だけを使ったデザイン。
- ブルータリズム： 大胆な構図や無骨さを強調したデザイン。
- メタリックデザイン： 金属の光沢や反射を使ったスタイル。
- サイバーパンク： ネオンカラーで未来感のある世界観。
- レトロフューチャー： 昔の未来予想図のようなデザイン。
- ノイズテクスチャ： ザラつき・粒子感のある質感。
- モルフォロジカル： 形状変形や有機的なラインを強調したデザイン。
特徴的な質感・効果
- フロストガラス： 白く曇ったガラスのようなぼかし。
- グラデーションブラー： 色の変化に合わせてぼかす効果。
- ソフトシャドウ： ふんわりした影。
- ハードシャドウ： くっきりとした影。
- ロングシャドウ： 長く伸びる影で立体感を出す表現。
- インナー/アウターグロー： 内側や外側に発光するような効果。
色（Color）関連
配色を指定するときに使う基本的な概念。
- モノクロマティック： 同じ色相の明暗違いを使う配色。
- アナロガス： 隣り合う色を組み合わせた調和のある配色。
- コンプリメンタリー： 反対色を使ったコントラストの強い配色。
- トライアド： 色相環上で三角形になる3色の配色。
- テトラード： 4色を等間隔で使うバランスの良い配色。
- デュオトーン： 2色だけでデザインする手法。
- グラデーション： 色がなめらかに変化する表現。
- パステルカラー： 明るく柔らかい色調。
- ビビッドカラー： 鮮やかで強い色。
- アースカラー： 自然を想起させる落ち着いた色。
- ダークモード： 黒背景を基調とするテーマ。
- ライトモード： 白背景の標準的なテーマ。
タイポグラフィ（Typography）
文字の見た目や読みやすさを調整するための用語。
- サンセリフ： 装飾のないシンプルな字体。
- セリフ： 文字に小さな飾り（セリフ）が付いた字体。
- モノスペース： すべての文字幅が同じフォント。
- ラインハイト： 行間の高さ。
- レタースペーシング： 文字同士の間隔。
- カーニング： 特定の文字ペアの間隔調整。
- トラッキング： 全体的な文字間隔の調整。
- ウェイト： フォントの太さ。
- オールキャップス： 全て大文字で表示すること。
- ドロップキャップ： 文章の最初の1文字を大きく装飾する表現。
UI/UX 用語
UI コンポーネント
- CTAボタン： 行動を促す強調ボタン。
- ドロワーメニュー： 横からスライドして出るメニュー。
- アコーディオン： 折りたたみ式で開閉するUI。
- トグルスイッチ： ON/OFF を切り替えるスイッチ。
- ブレッドクラム： 現在の位置を表示する階層ナビ。
- カラーピッカー： 色を選択するツール。
- タブナビゲーション： 複数の内容を切り替えるタブ。
UX パターン
- アフォーダンス： 触れそう、押せそうといった見た目の手がかり。
- ヒューリスティック： ユーザビリティを評価する基準。
- ユーザーフロー： ユーザーの行動の流れ。
- インフォメーションアーキテクチャ： 情報整理の構造設計。
- オンボーディング： 初回利用者の案内フロー。
- マイクロインタラクション： ボタンの反応など小さな動き。
アニメーション・モーション（Motion Design）
動きの表現に関する用語。
- パララックス： 背景と前景のスクロール速度を変える効果。
- ホバーアニメーション： マウスを乗せた時に動く表現。
- フェード： 徐々に表示・非表示になる動き。
- スライドイン： 横や下から滑り込むアニメーション。
- スムーススクロール： なめらかにスクロールする動き。
- スプリングアニメーション： バネのような自然な動き。
- イージング： 動きの加速・減速のカーブ。
画像生成・イラスト指示（Prompt Design）
描写スタイル
- アイソメトリック： 立体を斜めから見た表現。
- フラットイラスト： 平面的でシンプルなイラスト。
- ベクター風： カクっとした輪郭のあるイラスト。
- ローポリ： 多角形で構成された3D風デザイン。
- フォトリアル： 写真のようにリアルな質感。
- セルアニメ風： アニメの塗り方を模した表現。
- ウォータカラー： 水彩画のような柔らかい表現。
- ピクセルアート： ドット絵のスタイル。
- ラインアート： 線だけで描かれたシンプルな表現。
カメラ・構図
- トップビュー： 真上から見た構図。
- ワームズアイビュー： 地面から見上げるような視点。
- バードビュー： 高い位置から俯瞰する構図。
- クローズアップ： 対象を大きくアップで捉える。
- ワイドショット： 広い範囲を写す構図。
- 被写界深度（DOF）： ピントの合う範囲を調整する効果。
- ボケ： 背景をぼかした表現。
コーディング関連
- コンポーネント： UIの再利用可能な部品。
- アトミックデザイン： UIを小さな単位から組み上げる手法。
- CSSユーティリティクラス： クラス名で簡単にスタイルを適用する方法。
- フルードデザイン： 画面幅によって自然に伸び縮みするデザイン。
- モバイルファースト： スマホ向けから順にデザインする考え方。
- DOM構造： HTML要素の階層構造。
- セマンティックHTML： 意味に合ったタグを使う書き方。
コメント