glass-dark-mode-clock

Glass Dark Mode Clock Skill

使用する場面

• すりガラスのシェル、柔らかなビームグリッド、時計のような円形の調整ダイヤル、精密なSF計器のフレーミングを備えた、ダークなグラスデザインシステムを作成する場合に使用します。

ワークフロー

適用範囲

• 背景、シェル、ナビゲーション、ヒーローレイアウト、コントロール、円形のフォーカル要素、モーションにわたって、デザインシステム全体の方向性として適用します。
• ガラスのような表面と、時計、ダイヤル、調整装置を中心とした、上質なダーク計器パネルのような印象をインターフェースに持たせたい場合に使用します。
• これは汎用的なグラスモーフィズムでも、単独の放射状ウィジェットでもありません。インターフェース全体で、時計のようなシステムの美学を支える必要があります。

ビジュアルの目標

• 黒または限りなく黒に近いベースに、ごく控えめなグリッド線、垂直・水平のビームガイド、かすかな構造上の十字線を配してページを構築します。
• ナビゲーションバー、ピル、コントロールにはダークガラスまたはすりガラスのような黒い表面を使い、ぼかし、細い白のエッジグラデーション、控えめな反射を加えます。
• リング、目盛り、角度表示、回転するテキストパスを備え、時計、調整ダイヤル、共鳴計器を思わせる、存在感のある円形のフォーカル要素を取り入れます。
• パレットはほぼモノクロに保ちます。黒、白、ジンク、スモーキーグレーを使います。アクセントの明るさは、彩度の高い色ではなく、ガラスのハイライトや柔らかな白い光で表現します。
• 円形のダイヤルが時刻計測装置や調整装置のようにページの中心を担い、精密で科学的、かつ少し映画的な印象に仕上げます。

実装ガイダンス

• ナビゲーション、ピル、アクションコントロールには、細いグラデーションの境界線、低不透明度の塗り、柔らかな背景ぼかしを使った、すりガラスのシェルを使用します。
• 十字線、調整目盛り、等幅フォントのラベル、放射状のリング、小さなインターフェースの手がかりを加えて円形の中心要素を支え、精巧に設計された印象にします。
• 時計やダイヤルは、外側のリング、目盛り、回転するラベルまたはテキスト、中心部、必要に応じて六角形や幾何学的な内枠を重ねた構造にします。
• ヒーローのコピーは簡潔で控えめに保ち、ダイヤルの横に置いて、分割レイアウトまたはバランスの取れた2カラム構成にします。
• モーションを加える場合は、ゆっくり回転するリング、漂うビーム、控えめな揺らぎ、穏やかな出現シーケンスを優先します。派手さではなく、途切れのない瞑想的な動きを目指します。
• ガラスの表現はダークで上質な印象に保ちます。半透明の白い塊は避け、コントロールされたスモーキーな塗りと鮮明なハイライトを使用します。

推奨パターン

• コントラストを抑えたグリッド状の背景フィールド上に、背景ぼかしと細い下線を施したダークな固定ナビゲーションを浮かべます。
• アイブロウのピルやボタンは、1pxのハイライトラッパーとすっきりした内側のダークな塗りを備えた、ダークガラスのカプセルとして作成します。
• 外側のテキストパス、角度ラベル、回転する目盛り群、シンプルな中央エンブレムを備えた円形のヒーローダイヤルを配置します。
• 背景のビームラインと十字線を円形モジュールやタイポグラフィに合わせ、調整機器としての設計意図を強調します。
• ダイヤルの領域内に柔らかな白い揺らぎ、霧、または放射状のハイライトを加え、ガラスや時計の表面に生き生きとした印象を与えます。

調整項目

• ガラスの強さ：ぼかし、不透明度、ハイライトの強さを調整し、表面を濁らせず上質に見せます。
• ダイヤルの複雑さ：システムをどれほど計器らしく見せるかに応じて、リング、目盛り、ラベル、技術的なマーカーを増減します。
• モーションのテンポ：回転やビームのスイープは、安定して制御された印象になるよう十分にゆっくり保ちます。
• コントラスト：白いテキスト、補足用のグレーのコピー、ダークガラスのレイヤーの間に、読みやすさを保つ強いコントラストを確保します。
• グローの抑制：柔らかな白いグローは、フォーカルなガラスの縁やダイヤルの内側だけに使い、ページ全体には広げません。

避けること

• 明るい半透明カードがカラフルな塊の上に浮かぶ、汎用的なパステル調のグラスモーフィズム。
• 時計のモチーフをレイアウトから切り離し、後付けの装飾として扱うこと。
• ダイヤルにラベルやモーションを詰め込みすぎて、雑然とさせること。
• モノクロの調整機器らしい美学を損なう強いアクセントカラーの使用。
• ガラスの奥行き、ビームの構造、放射状の階層がない、平坦な黒いボックスだけのデザインにすること。