厳選・オープン・無料

Theseawebreathe

大気感のある写真とデータ駆動のUI要素を組み合わせた、没入感のある映画的なウェブ体験。

01

デザイン DNA

深海探査のためのミッションコントロールダッシュボード。

02

カラー

大気感のある写真とライトシアンのアクセントに依存した、厳格なモノクローマティックなブルーパレットで、没入感のあるデータ豊富な環境を構築する。

03

タイポグラフィ

geometric-sans

• display80px · 500
• display-sm44px · 500
• body14px · 400

全テキスト要素で一貫して大文字変換を使用する。 · 可読性を確保するため、小さいテキストには広めの文字間隔（1.5px以上）を維持する。 · 技術的な雰囲気を保つため、見出しと本文の両方でジオメトリック・サンセリフを使用する。

04

余白

没入感を強調し、データポイントが窮屈に感じられるのを防ぐための、ゆったりとしたスペーシング。

05

サーフェス (角丸 / 影 / 罫線)

ライトシアン（#94E6FB）またはネアホワイト（#E5FAFF）の細い1pxボーダーを、複雑なボーダーショートハンドパターンで使用。

06

レイアウト

UI要素を四隅と中心に絶対位置指定で配置した、ビューポート全体のキャンバス。

07

モーションとインタラクション

放射状プログレスインジケーターの滑らかな回転アニメーション。 · 連続するデータポイントの段階的なフェードイン。 · 映画的な雰囲気を維持するための、優雅なページトランジション。

インタラクティブ要素に対する、繊細な色の変化や構造の露出。 · 没入型の旅の次のフェーズを開始する。

08

コンポーネント

• button 実体のある背景ではなく、コーナーブラケットデコレーターを使用したテキストベースのアクション。
• card N/A - 従来のカードコンポーネントではなく、大気感のある画像を使用するレイアウト。
• chip N/A - ステータスインジケーターは、テキスト階層に直接統合される。
• input N/A
• hero 中央に放射状データ可視化と大きなタイポグラフィオーバーレイを持つ、フルスクリーンの写真背景。

09

文体と禁止事項

• トーン 技術的でありながら詩的で、データポイントと環境意識を融合させる。
• 見出し 大胆で大文字、大気感があり、複数行に分割されることが多い。
• CTA ミニマルで指令的で、技術的なコーナーブラケットでフレーミング。

• ボタンに実体のある背景を使用しない — スクリーンショットは、コーナーブラケット付きのテキストのみのアクションを示している。
• 小さく密集したテキストブロックを使用しない — スクリーンショットは、広めの文字間隔を持つ大きく空気感のあるタイポグラフィを示している。
• 暖色や鮮やかな色を使用しない — スクリーンショットは、厳格でクールなモノクローマティックなブルーパレットを示している。
• UI要素に角丸を使用しない — スクリーンショットは、シャープでボーダーラジウスゼロのボーダーを示している。
• 重いドロップシャドウを使用しない — スクリーンショットは、完全にフラットで大気感のある照明スタイルを示している。
• 混合されたフォントスタイルを使用しない — スクリーンショットは、見出しと本文の両方で一貫してジオメトリック・サンセリフを使用している。
• 避ける: 暖色
• 避ける: 遊び心のある言葉
• 避ける: 密集したテキストブロック
• 避ける: 雑然としたUI要素
• 避ける: 明るく彩度の高いグラデーション

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko