厳選・オープン・無料
Theseawebreathe
大気感のある写真とデータ駆動のUI要素を組み合わせた、没入感のある映画的なウェブ体験。
Dark ModePhotographicExperimentalCalmEditorial
01
デザイン DNA
海洋没入型データ可視化接続環境
深海探査のためのミッションコントロールダッシュボード。
02
カラー
#E5FAFFInk
#94E6FBInk soft
#083D63BG
rgba(148, 230, 251, 0.5)Line
大気感のある写真とライトシアンのアクセントに依存した、厳格なモノクローマティックなブルーパレットで、没入感のあるデータ豊富な環境を構築する。
03
タイポグラフィ
geometric-sans
- display
80px · 500 - display-sm
44px · 500 - body
14px · 400
全テキスト要素で一貫して大文字変換を使用する。 · 可読性を確保するため、小さいテキストには広めの文字間隔(1.5px以上)を維持する。 · 技術的な雰囲気を保つため、見出しと本文の両方でジオメトリック・サンセリフを使用する。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
没入感を強調し、データポイントが窮屈に感じられるのを防ぐための、ゆったりとしたスペーシング。
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
ライトシアン(#94E6FB)またはネアホワイト(#E5FAFF)の細い1pxボーダーを、複雑なボーダーショートハンドパターンで使用。
06
レイアウト
1920container
12columns
24pxgutter
768 / 1024breakpoints
UI要素を四隅と中心に絶対位置指定で配置した、ビューポート全体のキャンバス。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.16, 1, 0.3, 1)easing
放射状プログレスインジケーターの滑らかな回転アニメーション。 · 連続するデータポイントの段階的なフェードイン。 · 映画的な雰囲気を維持するための、優雅なページトランジション。
インタラクティブ要素に対する、繊細な色の変化や構造の露出。 · 没入型の旅の次のフェーズを開始する。
08
コンポーネント
- button 実体のある背景ではなく、コーナーブラケットデコレーターを使用したテキストベースのアクション。
- card N/A - 従来のカードコンポーネントではなく、大気感のある画像を使用するレイアウト。
- chip N/A - ステータスインジケーターは、テキスト階層に直接統合される。
- input N/A
- hero 中央に放射状データ可視化と大きなタイポグラフィオーバーレイを持つ、フルスクリーンの写真背景。
09
文体と禁止事項
- トーン 技術的でありながら詩的で、データポイントと環境意識を融合させる。
- 見出し 大胆で大文字、大気感があり、複数行に分割されることが多い。
- CTA ミニマルで指令的で、技術的なコーナーブラケットでフレーミング。
- ボタンに実体のある背景を使用しない — スクリーンショットは、コーナーブラケット付きのテキストのみのアクションを示している。
- 小さく密集したテキストブロックを使用しない — スクリーンショットは、広めの文字間隔を持つ大きく空気感のあるタイポグラフィを示している。
- 暖色や鮮やかな色を使用しない — スクリーンショットは、厳格でクールなモノクローマティックなブルーパレットを示している。
- UI要素に角丸を使用しない — スクリーンショットは、シャープでボーダーラジウスゼロのボーダーを示している。
- 重いドロップシャドウを使用しない — スクリーンショットは、完全にフラットで大気感のある照明スタイルを示している。
- 混合されたフォントスタイルを使用しない — スクリーンショットは、見出しと本文の両方で一貫してジオメトリック・サンセリフを使用している。
- 避ける: 暖色
- 避ける: 遊び心のある言葉
- 避ける: 密集したテキストブロック
- 避ける: 雑然としたUI要素
- 避ける: 明るく彩度の高いグラデーション
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
このサイトは、Blue Marine Foundationのための没入感のある映画的なウェブ体験です。深海ブルー(#083D63)とライトシアン(#94E6FB / #E5FAFF)のアクセントを厳格なモノクローマティックパレットで使用しています。タイポグラフィは専らジオメトリック・サンセリフで、技術的でデータ駆動の美学を維持するために大文字で広めの文字間隔で表示されます。重要なデザインルール:暖色は一切避け、実体のあるボタンではなくテキストのみのアクションをコーナーブラケット付きで使用し、従来の情報密度よりも視覚的な没入感を優先する、ゆったりとした大気感のあるレイアウトを維持する。全体的な印象は、美しい海洋写真の上に重ねられたハイテクなミッションコントロールインターフェースです。
en · zh-CN · zh-TW · ja · ko