「機能美と体験」を構築するための、UIパーツ別デザイン掟とプロンプト。 資料に基づいた高度な言語化により、一貫性のあるプロダクト開発を支援します。
モバイルファースト時代の象徴。情報を「隠す」ことで画面のホワイトスペースを確保し、主要なアクションへの集中を促します。
「SVGアニメーションを用いたミニマルなハンバーガーメニューを。クリック時に3本のラインが滑らかに『×』に変化し、背景がグラスモーフィズムのオーバーレイで覆われる。遷移は0.4秒のイージングを設定。」
大規模サイトの「地図」。多階層の情報を一度に提示し、ユーザーが「どこに何があるか」を瞬時にスキャンできるよう、グリッドとタイポグラフィで秩序を作ります。
「4カラム構成のメガメニュー。見出しにはセカンダリカラーと太字を使い、各リンクはマイクロタイポグラフィに基づいた適切な行間を維持。ホバー時には対象カラム以外の不透明度を微細に下げる視線誘導を実装。」
情報の「密度」を美しく見せる技法。矩形のカードを敷き詰めることで、異なる性質の情報を一つのキャンバスに統合します。
「8の倍数ルールに基づいたBento UI。情報の重要度に応じてカードの占有面積を変え、アスペクト比を数学的に制御。全体に12pxのギャップと24pxの角丸を適用し、統一感を演出。」
Apple Vision Pro等の空間UIにインスパイアされた質感。背景ぼかしにより「奥行き（Depth）」と「透明感」を共存させます。
「すりガラス状の背景ぼかし（blur: 20px）と、極細のインナー境界線を用いたグラスモーフィズム。背景のオーロラグラデーションを透過させ、物理的な空間レイヤーを感じさせる設計に。」
洗練されすぎたデザインへの知的アンチテーゼ。太いボーダーとハードシャドウを用い、未完成感と強烈な個性を表現します。
「ネオ・ブルータリズム形式。3pxの黒い外形線、彩度の高いブルー背景、ぼかしのないオフセットシャドウ（8px）を使用。フォントはシステムデフォルトのような無骨なゴシック体を選択。」
文字を「読む」ものではなく「見る」UIとして扱う。巨大なタイポグラフィがヒーローイメージとして画面を支配します。
「画面全幅を占めるほど巨大なメガ・タイポグラフィ。セリフ体を使用し、カーニングを極限まで詰め（-0.05em）、文字自体をデザインの骨格として配置。背景との高いジャンプ率を確保。」
認知負荷（コグニティブ・ロード）の軽減。読み込み完了後のレイアウトを予感させ、ユーザーの待機ストレスを最小化する機能美。
「実際のコンテンツ形状を模したスケルトンスクリーン。パルス状のアニメーション（不透明度0.1〜0.4）を付与し、読み込み中の期待感を醸成。配置は本番データのグリッドと1pxの狂いなく一致させる。」
滑らかなグラデーションや単色塗りの上に、微細なノイズ（粒状感）を重ねる手法。デジタル特有の「冷たさ」を和らげ、アナログフィルムのような温もりや高級感、紙などの物質感（タクタイル感）を与え、のっぺりとした印象を防ぎます。
「ベースとなる背景色（単色またはグラデーション）の上に、不透明度5〜15%程度の微細なノイズテクスチャ（TVの砂嵐のようなフラクタルノイズ）を重ねる。必要に応じてノイズレイヤーを『mix-blend-mode: overlay』や『multiply』で合成し、背景色になじませる。」
雑誌のような情緒的配置。あえてグリッドの秩序を崩した「計算された崩し」が、知的でアーティスティックな印象を与えます。
「伝統的な雑誌のレイアウトをウェブに再解釈。繊細なセリフ体、画像と文字の大胆なオーバーラップ、そして極めて広いマクロ余白を使い、情報の『余白の美』を最大限に引き出す。」
静止画のデザインは死んだデザイン。スクロールや時間経過に合わせて文字が蠢き、変形することで、ユーザーの視線を強く惹きつけます。
「スクロール速度に連動して文字のウェイト（太さ）が可変する可変フォント（Variable Font）演出。または文字が円周上を無限に流れるキネティック演出により、画面にリズムを生む。」
PC閲覧時の「手触り」。カーソル自体をデザイン要素化し、要素への近接に応じて形状が変化するマイクロインタラクションが没入感を高めます。
「円形のカスタムカーソル。リンクホバー時には背景色を反転させながら拡大（スケール1.5倍）し、テキストを吸着させるアフォーダンスを付加。慣性のある動きで上質な操作感を演出。」
最優先の行動（Primary Action）。画面の最前面に常に配置することで、ユーザーが迷わず次に進むべき道を示します。
「アクセントカラーを適用したFAB。スクロール中も右下に固定し、ホバー時には微妙な浮遊感を伴う浮き上がり（Shadow拡大）を実装。クリック時は放射状にメニューが展開するアニメーションを追加。」
現在地と階層構造を視覚化する命綱。ユーザーが迷子になるのを防ぎ、SEO効果も高める必須コンポーネントです。
「3階層以上のページ構成に対するパンくずリスト。セパレーターにはSVGアイコン（シェブロン右）を使用し、カレントページ以外はホバー時にメインカラーへのトランジション（0.2s）を設定する。」
情報量をコントロールする開閉式UI。FAQや詳細設定などで、必要な時だけ情報を表示し認知負荷を下げます。
「FAQ用のシンプルなアコーディオン。タイトルクリックでコンテンツ領域がスライドアニメーション（max-heightの可変）と共に展開。展開時は右端の『+』アイコンが45度回転して『×』になる。」
アイコンや難解な用語に即座に意味を持たせる補助UI。マウスオーバーですぐに現れ、操作の確実性を高めます。
「アイコンホバー時に0.15秒の遅延を持たせてフェードアップ（translateY: 5px -> 0）するツールチップ。背景色はコントラストの高いブラック/ホワイト反転を使用し、小さな三角形の矢印（しっぽ）を付与。」
要素が背景から「押し出された」ような柔らかい立体感。物理ボタンのような触覚的なアフォーダンスを提供します。
「ニューモーフィズムスタイル。要素と背景を同色（例: #E0E5EC）にし、右下に暗いドロップシャドウ、左上に明るいホワイト系のハイライトを設定。クリック状態（Active）にはInsetシャドウを適用して押し込みを表現。」
状態を一目で伝えるためのカラー暗号。タグやシステム状態表示において、色と文字の組み合わせで認知スピードを上げます。
「情報の性質に合わせたステータスバッジ。背景色は対象カラーの透明度10〜15%、テキストカラーは100%の同一色相を使用。角丸をフル（9999px）にしてピル型のソフトな印象に仕上げる。」
設定のオン/オフを即座に反映させる直感的なスイッチ。チェックボックスよりも「即時実行」のニュアンスが強く伝わります。
「iOS風のトグルスイッチ。背景領域（トラック）とつまみ（サム）で構成。クリック時にサムが右へスライドし、トランジション0.3sのバウンス効果（cubic-bezier）を適用。同時にトラックの背景色がアクセントカラーに変化。」
フォームの省スペースと明瞭さを両立。入力開始時にプレースホルダーが上部に移動し、ラベルとして機能し続けるスマートな手法。
「フローティングラベルのテキストフィールド。デフォルトは入力欄中央にラベル兼プレースホルダーを配置。フォーカス時または文字入力時に、ラベルが上部境界線（ボーダー）上に縮小移動（scale(0.8)）するアニメーションを付与。」
液体のように混ざり合う幻想的なグラデーション。モダンでクリエイティブなプロダクトのアイキャッチとして絶大な効果があります。
「ランダムな3〜4色のオーロラ状メッシュグラデーション。CSSのradial-gradientを複数重ね合わせ、各レイヤーを異なる周期で微細に移動・回転させることで、有機的で流体のような背景アニメーションを実現。」
情報が絶え間なく流れるテロップ風の演出。ブランドメッセージやパトロンロゴなどをスペースを節約してダイナミックに提示します。
「CSSによる無限ループのマーキー（ティッカー）。同じ要素を2つ並べ、translateX(0) から translateX(-50%) へリニアなアニメーションをループさせる。文字はアウトライン（テキストストローク）のみの太字装飾。」
ワンページスクロールサイトにおける現在地ガイド。画面右端に控えめに配置され、縦長ページの進捗を視覚的にナビゲートします。
「画面右側に固定されたドットナビゲーション。スクロール量（Intersection Observer等）に応じて、アクティブなセクションに対応するドットのサイズが拡大し、アクセントカラーに点灯する。」
写真の上にテキストを載せる際の絶対的ルール。背景写真の暗部を強調するグラデーションを敷くことで、文字の可読性を100%保証します。
「ヒーロー画像の最下部から上に向かって、黒の透明度80%から0%へ緩やかに変化するリニアグラデーション（Scrim）を重ねる。これにより、どんな写真が背景に来ても白文字のコントラストと可読性を完全に担保する。」
自然界で最も美しいとされる「黄金比（1:1.618）」。メインコンテンツとサイドバーの幅などに適用し、無意識の心地よさを生み出します。
「メインカラムとサイドバーの比率を『62% : 38%』（近似の黄金比）で分割した2カラムレイアウト。CSS Gridの『grid-template-columns: 1.618fr 1fr;』を用いて数学的な美しさを骨格に組み込む。」
システム状態のフィードバック。ファイルのアップロードやステップ入力などで、ユーザーに「あとどれくらいか」という推測の時間を奪います。
「極細（4-6px）のプログレスバー。トラック背景は不透明度10%、進行バロメーターにはブランドカラーのグラデーションを使用し、完了時にバー全体が一瞬発光するようなボックスシャドウのアニメーションを追加。」
マテリアルデザインから派生した波紋のアニメーション。クリックした「まさにその地点」から広がる視覚的フィードバックが満足感を与えます。
「ボタンクリック時の起点（event.clientX/Y）から、円形の波紋（Ripple）が広がるエフェクトをjsとCSSで実装。波紋は背景色より少し明るい半透明色とし、scale(0)からscale(2.5)への拡大と同時にフェードアウト（opacity:0）させる。」
スクロールに対する賢いヘッダー制御。下スクロールで隠れ、上スクロールで即座に現れる挙動は、画面領域の最大化と回遊性を両立します。
「スクロール検知によるヘッダー表示制御。下スクロール時には『transform: translateY(-100%)』で隠し、上スクロール検知で即座に『translateY(0)』で再表示。背景にはすりガラス効果（backdrop-filter）を適用する。」
ユーザーの作業を中断させない通知システム。数秒で消える受動的なアラートで、システムの状態変化をスマートに伝達します。
「画面右下からスライドイン（translateY）するトースト通知。成功（緑）、エラー（赤）、警告（黄）等の色分けを行い、3〜5秒で自動的にフェードアウトしてDOMから削除する仕組みを構築。」
「ここを見て！」という控えめだが確実なアテンション。新機能のハイライトや録音中インジケーターなど、生命感（鼓動）を与える表現。
「要素の背後に絶対配置された擬似要素（::before/::after）を使用。自身のサイズをscale(1)からscale(1.5)へ拡大させつつ、不透明度を1から0へ下げる『box-shadow』または『transform』アニメーションを無限ループさせる。」
大量のデータを分割し、探求の道標となるシステム。数字の羅列だけでなく、前後への直感的な移動ボタンが不可欠です。
「現在のページ番号をプライマリカラーのベタ塗りで強調し、他はミニマルなアウトラインで構成。ホバー時に微妙な浮き上がりと背景色の変化を加え、最初/最後のページでは無効化（opacity: 0.5 & cursor: not-allowed）を明示する。」
大画面の贅沢な使い方。対立する2つの選択肢や、「テキストとビジュアル」という主従関係を対等に並べる大胆なレイアウト。
「画面中央で厳格に2分割（50vw : 50vw）するスプリットレイアウト。片側に高解像度画像や動画をフルブリードで配置し、もう片方にタイポグラフィとCTAを配置。モバイル幅（768px以下）では自然な1カラムの縦積みに切り替える。」
発光体のような柔らかい光の表現。ダークモードにおいて、要素のエッジを際立たせるのではなく、空間全体をじんわりと照らします。
「要素の背面に、非常に大きなブラー（filter: blur(80px)以上）をかけた不透明度20%程度の円形グラデーションを配置。要素自体を持たせるのではなく、その周辺の空気を光で染めるアンビエントな演出を行う。」
PCに最適化された直感的なファイル操作UI。ファイルが通過した瞬間に視覚的なフィードバックを返し、ユーザーの不安を払拭します。
「点線ボーダーで囲まれたドロップゾーン。jsの『dragover』イベント検知時に、ボーダーを実線化し背景のアルファ値を上げ、要素全体をわずかに拡大（scale(1.02)）。ドロップ可能であることをシステム側から能動的に明示する。」
OSに依存しない、ブランドに統合されたフォーム要素。ブラウザデフォルトの野暮ったさを排除し、細部に至るまで世界観を統一します。
「デフォルトのinput要素を『appearance: none』または絶対配置でvisually-hidden化。隣接シブリングセレクタ（input:checked + label::before）を用いて、独自デザインのSVGアイコンやCSS図形を用いた美しい状態切り替えを実装。」
文字を「窓」として機能させる高度なタイポグラフィ技法。文字の内部に画像や動画、複雑なパターンを透過させて見せます。
「太いウェイトのフォント（Black / 900）を指定し、『-webkit-background-clip: text』と『color: transparent』を組み合わせる。背景にはブランドイメージの動画ループ、または微細な斜線パターン（Repeating linear-gradient）を適用する。」
同一ページ内でコンテンツを切り替える定番手法。画面遷移を伴わず、文脈を維持したまま大量の情報を整理できます。
「各タブボタンの下部に2pxのインジケーター（Border-bottom）を配置。アクティブなタブのインジケーターはアクセントカラーと太字で強調し、タブ切り替え時にはコンテンツ領域がスライドイン・フェードのトランジション（0.3s）で切り替わるよう実装。」
履歴やプロセスを時系列に沿って表現するレイアウト。複雑な経緯も、一本の線で繋ぐことで物語としてユーザーに理解させます。
「左側に『垂直な線（幅2px）』を固定配置し、各イベントに円形のマーカー（ノード）を重ねる。最新または現在進行中のノードはプライマリカラーで塗りつぶし、過去や未来のノードはアウトラインのみ、またはグレーアウトして進行度を視覚化する。」
マウスの動きに合わせて要素が傾くマイクロインタラクション。デジタルの中に強烈な「重力」と「物理特性」を感じさせます。
「親コンテナに『perspective: 1000px』を設定。マウスのX/Y座標（mousemoveイベント）を計算し、カード自体の『transform: rotateX() rotateY()』にマッピングして傾け、同時に内部の画像やテキストをZ軸手前（translateZ）に浮かせる。」
右クリック時の標準メニューを上書きし、Webアプリをネイティブ化。ユーザーの「次にやりたいこと」を文脈に応じて最適化して提示します。
「ブラウザデフォルトの『contextmenu』イベントをe.preventDefault()でキャンセル。マウスポインタの座標を基準に、絶対配置（position: absolute）でリスト状のカスタムメニューを展開する。領域外クリック時（document onclick）に閉じる処理も必須。」
数値の調整を視覚と指先で行うコンポーネント。価格帯や音量など、直感的で連続性のあるデータ入力に最適です。
「input[type=range]のデフォルトスタイルを完全にリセット（-webkit-appearance: none）。トラック部分はグラデーションまたは2トーン（現在値までがアクセントカラー）、操作するツマミ（thumb）はホワイトベースに影をつけ、掴みやすさを演出。」
画面の余白を埋めるための幾何学的なドット。主張しすぎないパターンの存在が、ハイテク感やエンジニアリングの文脈を強調します。
「背景プロパティに『radial-gradient』を組み合わせるか、SVGの埋め込みパターンを用いて、極小（半径1〜2px程度）のドットが等間隔（20px〜40px間隔）で並ぶ幾何学的なグリッドテクスチャを生成。不透明度は5%以下に抑える。」
重要な見出しを光らせる手法。ブランドのメイングラデーションをテキスト流体のように動かすことで、無言の強調と特別感を作り出します。
「『-webkit-background-clip: text』に対して、横長（background-size: 300% 100%など）のマルチカラーグラデーションを指定。keyframeアニメーションを用いてbackground-positionをX方向に往復させ、文字内で色が滑らかに遷移するようにする。」
複雑な階層データを折りたたみながら一覧する構造。IDE（開発環境）やSaaSの設定画面などで、情報の網羅性とアクセシビリティを確保します。
「インデント（左padding）を活用した再帰的なリスト構造ベース。親要素にあるトグル用シェブロンアイコン（▶ / ▼）のクリックで子要素リストをスライドトグル。ホバー時には行全体（full-width）の背景色がわずかに明るくなるハイライトを設定する。」
認証コード入力時に、1文字ずつ独立したマス目を持たせるフォーム。コピペ対応や自動フォーカス移動など、見た目以上のUX配慮が必要です。
「入力枠ごとにinputを分割したデザイン。jsで『入力後自動で次の枠へフォーカス移動』『Backspaceで前の枠へ戻る』『クリップボードからのペースト時に全枠へ分割入力』の3つの制約を完備させる。」
Pinterestに代表される、縦幅の異なる要素を隙間なく敷き詰めるレイアウト。画像ギャラリーや記事一覧で視覚的なリズムと密度を生み出します。
「CSSの『column-count』と『break-inside: avoid;』を使用するか、最新のCSS Gridの『grid-template-rows: masonry;（一部ブラウザのみ）』を利用して、縦方向の隙間を自動的に詰める段組みを構築する。」
幕の内弁当のように、大小のパネルを美しく敷き詰めるトレンドのレイアウト。Appleの製品ページなどでも多様され、機能美と整理感を与えます。
「CSS Gridを用いて、各パネル（カード）ごとに『grid-column』と『grid-row』の占有スパンを緻密に計算。角丸（border-radius: 20px〜）を統一し、各要素の間隔（gap）も均等に設定した美しいタイル状のGUIを作成。」
ローディングスピナーの進化形。データを待っている間に「どういうレイアウトが表示されるか」の骨組みだけを先に見せ、体感の待ち時間を短縮します。
「実際のコンテンツ領域と同じサイズのグレーアウトした長方形/円形で構成。その疑似要素の上に、左から右へ流れるようなハイライトアニメーション（Shimmer Effect）を無限ループさせ、通信中であることを示す。」
ハッカーや開発者向けのプロジェクトで刺さる、ターミナル風のテクスチャ。バイナリやASCIIアートを背景装飾として活用し、ギークな雰囲気を醸成します。
「等幅フォント（monospace / Courier New）を使用し、文字サイズは極小（0.5rem程度）に設定。背景や文字色には『#00FF41（ターミナルグリーン）』等を使用し、不透明度を限りなく下げてウォーターマークのように配置する。」
ポインター自体をデザインの一部にする手法。ユーザーの指先（マウス）の動きを拡張し、クリエイティブなサイトでの没入感を高めます。
「CSSでbodyの『cursor: none;』を指定し、jsにてマウス座標（clientX/Y）を追従するカスタムdiv要素（円形のドットと、遅延してついてくる大きな輪郭線）を作成。リンクやボタンのホバー時には輪郭線が拡大し、背景色が反転（mix-blend-mode）する。」
マウスが近づくと、磁石のようにボタンがポインターに吸い寄せられるエフェクト。操作の「的」を物理的に広く錯覚させ、クリックスルー率を向上させます。
「ボタンの周囲（padding等）に『当たり判定』の不可視エリアを設ける。ホバー＆マウス移動時（mousemove）に中心点からカーソルまでの距離（X/Y）を計算し、ボタン自体と中のテキスト（span）を少しだけカーソル側に『transform: translate()』で引っ張る。」
スクロールスピードの差異を利用し、画面に奥行き（Z軸）を生み出す視覚効果。平面的なディスプレイの中に巨大なスケール感を表現できます。
「背景画像レイヤーを『position: sticky』や『絶対配置＋jsのtranslateY』で固定/遅延させ、その手前を通常スクロールのコンテンツが通り過ぎるように構成。Z軸方向にレイヤーが分かれている空間を演出する。」
スマートフォンやプレゼン向けサイトで必須の挙動。ユーザーのスクロールが中途半端に止まらず、必ずセクションの区切りに吸着（Snap）します。
「親コンテナに『scroll-snap-type: y mandatory;』と『overflow-y: scroll;』を設定。各子要素（セクション）には『scroll-snap-align: start;』を設定し、スワイプ/スクロール時に必ず要素が画面の最上部にピタッと吸着するようにする。」
キーボード操作を愛するユーザー（パワーユーザー）への究極のおもてなし。画面のどこからでも検索やアクションをショートカットで呼び出せます。
「全体を覆う暗いオーバーレイの上に中央配置されたモーダルウィンドウ。Ctrl+K（Macは⌘+K）のキーダウンイベントで表示をトグル。そのままインプットにオートフォーカスし、矢印キーで検索結果を行き来できるキーボードファーストの実装を行う。」
通知領域を物理的・流動的に変形させるUI。邪魔なハードウェアの制約（ノッチ）をソフトウェアで巧みに隠し、逆に「魔法のような」アニメーション体験を与えます。
「インジケーター（div要素）のwidthとheightを、表示する通知（着信、音楽再生、アラート）のコンテキストに応じて変更。`transition: all 0.4s cubic-bezier`を用いて、有機的な膨張・収縮アニメーション（Morphing）を実装する。」
生成AI時代の標準的インターフェース。ユーザーの発話とシステム（AI）の思考・ストリーミング生成プロセスを明確に分離して表示します。
「送信バブルは右寄せ（角丸の右下を鋭角に）、受信（AI）バブルは左寄せで。生成待機中は、スケルトンアニメーションや、タイプライターのように1文字ずつフェードインするストリーミングエフェクト（Typing Effect）を入れる。」
Mesh Gradientよりもさらに不規則で、極北のオーロラのように光が漂うような背景。モダンなSaaSのヒーローセクションで神秘性を演出します。
「真っ黒な背景の上に、極端なブラー（filter: blur(80px)〜120px）をかけた、青・紫・ピンクなどの複数の巨大な円形要素（absolute）を配置。それらを異なる中心を軸に回転・移動させることで、神秘的な光のカーテンを作る。」
システムエラーやサイバーパンクな世界観を表現する定番エフェクト。静寂の中に突然ノイズを走らせることで、強烈なアテンションを引きます。
「同一テキストを`data-text`属性を用いて疑似要素(::before/::after)に複製。それぞれを赤(Cyan)と青(Magenta)等に色付けして左・右へ数pxずらし、`clip-path: inset()`をランダムな高さとタイミングで切り替えるkeyframeアニメーションを適用する。」
メニューホバー時に、隣接する要素が連動して動く（避けたり縮んだりする）表現。タイポグラフィ自体をUIの主役に抜擢するアプローチです。
「ナビゲーションメニューの各リンクに対し、ホバーされた要素は『color: プライマリ & transform: translateY(-5px)』。同時に兄弟要素セレクタやjsを用いて、ホバーされていない隣接要素等のopacity（不透明度やブラー）を下げて主役を際立たせる。」
巨大な長文コンテンツにおいて「あとどれくらいで読み終わるか」を明示する細いプログレスバー。ユーザーの離脱率低下に寄与します。
「画面上部（ヘッダー下部）、または右側面に固定配置（position: fixed）。jsの`(scrollTop / (scrollHeight - clientHeight)) * 100`でスクロール位置をパーセント換算し、インジケーターの`width`（縦なら`height`）にリアルタイムでバインディングする。」
SaaSのコンバージョンを左右する命綱。複数の選択肢の中から「運営が売りたいプラン」を意図的かつ構造的に目立たせる構成。
「推しプラン（Most Popularプラン）のみ、ボーダーをアクセントカラーにし、`transform: scale(1.05)`等で物理的に他より大きく見せる。上部には『おすすめ』バッジを絶対配置し、背景色もわずかに異なるトーンにしてヒエラルキーを確立する。」
動画や音声の再生ボタンに仕込む小さな魔法。静的アイコンではなく、形が変形（Morph）することで「状態が切り替わった」ことを確実に伝えます。
「SVGの中のパス（Path/Polygon）を操作するアニメーション。▶︎（再生）アイコンから ‖（一時停止）アイコンへの変化を、CSSの中間フレームやアニメーションライブラリを用いて滑らかな変形（Morphing）として実装し、オン/オフの状態を視覚で感じさせる。」
太い見出しを単調に見せないタイポグラフィの工夫。同じ文字でもベタ塗りと縁取りを交互に繰り返すことで、ポスターのようなグラフィックアート感が出ます。
「非常に太いサンセリフ体（Black/900ウェイト）を使用。特定の行だけに対して`color: transparent`とし、`-webkit-text-stroke: 1px currentColor`を設定。塗りつぶし文字と輪郭線だけの文字を同居させ、コントラストの高いモダンタイポグラフィを作る。」
「他に誰が見ているか」「誰が参加しているか」というソーシャルプルーフ（社会的証明）を生み出すUI。数人のアイコンを重ね、超過分は「+5」のように数字にまとめます。
「丸いアバター画像（border-radius: 50%）を横に並べ、2番目以降の要素にネガティブマージン（例: `margin-left: -10px`）を指定して一部を重ね合わせる。境界線（各画像のborderに背景と同色を使用）を太めに設定し、重なりによる埋没を防ぎくっきりと分離させる。」
大量のデータをソート可能でスキャナブル（拾い読みしやすい）に整理する業務用の基幹UI。不要な線を排除し、余白とタイポグラフィで列を整頓します。
「旧来のtableタグではなく、CSS Grid（grid-template-columns）等を用いて列幅を固定したモダンなリストビュー。縦線（border-left/right）をすべて排除し、水平方向の細いボーダーとホバー時の背景ハイライトのみで各行の可読性を高める。」
コピーライティング（言葉）の力や、強烈な見出し自体を最優先に見せる、SaaS等で王道のセンター配置ヘッダー。中央揃えで重みのある見出しと2つのCTAボタンが特徴的です。
「画面の中央に各要素を配置（text-align: center）。H1は特大サイズ（clamp関数を使用）で太文字にし、グラデーションのテキストクリップを適用する。その直下にサブコピーと、プライマリ・セカンダリの2つのCTAボタンを並べる。」
左側にメッセージとボタン、右側にメインビジュアル（画像・3D・イラスト）を配置する定番の2カラム。BtoBサイトや物販で、説得力と視覚的魅力を両立させます。
「CSS Grid または Flexbox を使用し、デスクトップでは1:1（50%:50%）の2カラム分割にする。左側は左揃えのテキスト群、右側にはプロダクトのモックアップや3Dイラストをダイナミックに見切れるように配置する。モバイルでは1カラムにスタックさせる。」
画面全体に美しい写真や背景動画を敷き詰め、黒や白の半透明オーバーレイ（Scrim）を重ねて文字を見せる、没入感の高いシネマティックな構成。
「セクションの高さを min-height: 100vh または 100dvh に設定。絶対配置した画像またはvideoタグに対し object-fit: cover を適用し背景に置く。その上に background: rgba(0,0,0,0.4) 等の黒半透明レイヤー（Scrim）を重ね、手前のテキストの可読性を担保する。」
中央にキャッチコピーを配置し、その画面下部から巨大なスマートフォンのモックアップやダッシュボードのUI画面が「競り上がってくる」ように見せる構成。
「上半分をテキスト領域とし、下半分に絶対配置によるUIモックアップ画像を配置。CSSの transform: perspective(1000px) rotateX(15deg) translateY(50px) 等を用いて、立体的に手前から奥へ向かって倒れ込んでいるようなパース（遠近感）をつける。」
タイポグラフィの輪郭線（アウトライン）だけを描画したり、SVGパターンをアニメーションさせて背景に用いる、グラフィックデザイン要素の強いヒーロー。クリエイティブエージェンシーやブランドサイト向け。
「CSSの `-webkit-text-stroke` を用いて、巨大な文字の塗りを透明（color: transparent）、枠線のみに設定し、背景に透かしのように配置する。または、SVGの格子柄パターンを背景に設定し、ゆっくりと斜めに移動するアニメーション（@keyframes）を付与する。」
左右、または上下の境界線をあえて「斜め（Diagonal）」にカットするレイアウト。スポーティさやスピード感、先進性をアピールしたい場面で非常に効果的です。
「CSSの `clip-path: polygon()` を使用して、画像や背景カラーのセクションのエッジを斜めに切り取る。例えば右側の画像領域に対して `clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%)` を当て、ダイナミックな境界線を作る。」
JSのライブラリを使わず、CSSだけで実装する横スクロールギャラリー。スマホのネイティブアプリのような、1枚ずつ「ピタッ」と止まるスクロール体験を提供します。
「親コンテナに `display: flex; overflow-x: auto; scroll-snap-type: x mandatory;` を指定し、スクロールバーは非表示にする。子要素（カード）に `scroll-snap-align: center;` を設定し、幅を `flex: 0 0 80%` のように固定して横並びに並べる。」
中央のアイテムを真正面、左右のアイテムを奥に傾けて配置する3Dカバースクロール。昔のiTunesなどに採用されていた、リッチなショーケース表現です。
「Swiper.js 等のライブラリを使用し、effect を `coverflow` に設定。中央要素はスケール1倍・不透明度100%、左右の要素は `transform: rotateY()` や `scale()` を用いて傾きや縮小をかけ、奥行き（perspective）を表現する。」
導入企業ロゴやブランドメッセージを、画面の端から端へゆっくりと一定速度で無限ループ（ティッカー）させるアニメーション。もはやSaaS系の必須要素です。
「親要素に `overflow: hidden; white-space: nowrap;` を指定。子要素にはコンテンツを2つ複製して横並びにし、`@keyframes` で `transform: translateX(0)` から `translateX(-50%)` までを `linear`（一定等速）でループさせるCSSアニメーションを適用する。」
スライダーの現在の位置を示すインジケーター。単純なドットではなく、現在位置のドットが「カプセル型（Pill）」に横へ伸びる、モダンなマイクロインタラクション。
「スライダーのドットナビゲーションについて、非アクティブ時は `width: 8px; height: 8px; border-radius: 50%`。アクティブ時のみ `width: 24px; border-radius: 4px;` とし、色がプライマリカラーへと滑らかに変化するよう `transition: all 0.3s ease` を入れる。」
複雑な画面で説明を補足する小さな吹き出し。ホバーやクリック時に現れ、UIをクリーンに保ちながら必要な情報を提供します。
「対象要素にホバー（またはフォーカス）した際、`position: absolute` で吹き出し（Tooltip）を出現させる。吹き出しの下部（または横）にはCSSのborderを用いた三角形（`border-color: 背景色 transparent transparent transparent`）を配置し、方向を明示する。」
ユーザーが現在Webサイトの「どの階層にいるか」を可視化。ECサイトや記事メディア等の深い階層構造を持つサイトで必須のナビゲーション機能。
「`<ol>`や`<ul>`を用いて階層を示すリンクを横並び（`display: flex`）にする。区切り文字（> や /）はテキストとして直書きせず、`::after` などの擬似要素を使って非セマンティックに挿入し、カレントページ（現在位置）の色を強調表示に切り替える。」
登録フォームやカート画面などで「いま何手順目か」を視覚化。プログレスバーとステップ番号を組み合わせることで完了への動機づけを高めます。
「横並びの円形要素（ステップ番号）の奥（`z-index: 0`）に、進行状況の線（プログレスライン）を敷く。完了済みのステップと線はプライマリカラーで塗りつぶし、未完了の要素はグレーやボーダーのみとして状態を明確に描き分ける。」
データの読み込み中に表示される、ぼんやりした骨組み（スケルトン）。ローディングスピナーよりも体感の待ち時間を短縮させる効果があります。
「最終的なコンテンツ（画像やテキスト）と同じ形・サイズの要素に対して、薄いグレーを基本色とし、ハイライトとなる斜めのグラデーション（`linear-gradient`）を左から右へ絶え間なくアニメーション移動（`background-position`）させる。」
5段階評価の星表示。小数点以下を半端な星（部分的な塗りつぶし）で表現し、ECサイトなどで信憑性を提供します。
「星（SVGやUniCode）を5つ並べ、小数点スコアを表現する場合は、下層にグレーの星、上層にゴールドの星（`position: absolute`）を重ね、上層の横幅（`width` / `overflow: hidden`）をパーセント制御することで部分的な塗りつぶしを実装する。」
右クリック操作時に現れるカスタムメニュー。複雑なWebアプリ（SaaS、Google Drive等）でネイティブアプリさながらの操作感を作ります。
「ブラウザ標準の右クリック（contextmenuイベント）を `e.preventDefault()` で防ぎ、マウスポインタの座標（e.pageX/e.pageY）を基点として `position: absolute` な自作メニュー（`box-shadow` や細かいリスト構成を持つ）を出現させる。」