mesh-gradient-dark-blue-clean

メッシュグラデーション・ダークブルー・クリーン

使用する場面

• ページ全体に、未来的で上質かつクリーンな、インフラを思わせる印象を持たせたい場合。
• ダークブルーのメッシュグラデーションを、ありきたりな背景としてではなく、構成の核として使いたい場合。
• 中央のヒーローシェル、控えめなナビゲーション、浮遊するネットワークのヒント、枠で囲まれたセクション、ゆっくりとした技術的な動きを取り入れたい場合。

デザインの方向性

限りなく黒に近いベースに、深いネイビーまたはスチールブルーの色味を加えます。シェーダーのようなメッシュグラデーション、CPPN風のフィールド、抽象的なWebGLのベール、またはキャンバスのライトフィールドを、メインのヒーローシェル内に配置します。周囲のシステムは規律あるデザインにします。シャープなタイポグラフィ、細いレール、コーナーマーカー、小さなステータスドット、目立たないフレーム、控えめなノードの注釈を取り入れます。

風通しのよい青いページではありません。ありきたりなグラスモーフィズムでもありません。メッシュは、ミニマルなシステムシェルの内側で視覚的なエンジンとして機能します。

システムのレシピ

1. ベース：フラットな黒ではなく、限りなく黒に近いネイビー。
2. ヒーローシェル：白から透明への控えめなグラデーションの境界線と、暗い内側の塗りを備えた大きな角丸コンテナ。
3. メッシュフィールド：シェル内に配置した、ブルーを基調とするプロシージャルなキャンバスまたはWebGLレイヤー。
4. タイポグラフィ：白い見出し、グレーブルーの補足テキスト、控えめなアクセント。
5. ナビゲーション：明るいエッジグラデーションのある、コンパクトで暗く半透明なピル。
6. ノード：浮遊するガラス風ピル、アクティブドット、小さなラベル、接続線を少数配置。
7. 構造：細い縦レール、コーナースクエア、数字のマーカー、枠で囲んだ下部セクション。
8. CTA：明るい塗りのカプセルを1つと、かすかな境界線グラデーションのあるゴーストまたはガラス風のカプセルを1つ。
9. 動き：ゆっくりとしたメッシュのドリフト、控えめなスキャンストリーク、マスクされたテキストのリビール、またはノードのわずかなきらめき。

カラートークン

:root {
  --mesh-bg: #030712;
  --mesh-bg-blue: #07111f;
  --mesh-shell: rgba(7, 13, 25, 0.82);
  --mesh-shell-inner: rgba(4, 9, 18, 0.72);
  --mesh-line: rgba(191, 219, 254, 0.14);
  --mesh-line-strong: rgba(226, 232, 240, 0.28);
  --mesh-text: #f8fafc;
  --mesh-copy: #9fb2ca;
  --mesh-muted: #64748b;
  --mesh-accent: #dbeafe;
  --mesh-cobalt: #1d4ed8;
  --mesh-indigo: #312e81;
  --mesh-steel: #385a7c;
}

ページのベース

.mesh-page {
  min-height: 100vh;
  color: var(--mesh-text);
  background:
    radial-gradient(circle at 50% 0%, rgba(29, 78, 216, 0.18), transparent 34rem),
    linear-gradient(180deg, var(--mesh-bg-blue), var(--mesh-bg) 48%, #01030a);
}

.mesh-page::selection {
  color: #020617;
  background: var(--mesh-accent);
}

ヒーローシェル

境界線グラデーションのラッパーと、より暗いコンテンツ面を使います。メッシュキャンバスはシェル内でコンテンツの背後に配置します。

.mesh-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 32px;
  background:
    linear-gradient(var(--mesh-shell), var(--mesh-shell)) padding-box,
    linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(147, 197, 253, 0.18), rgba(255, 255, 255, 0.04)) border-box;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.mesh-shell__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.78;
  pointer-events: none;
}

.mesh-shell__content {
  position: relative;
  z-index: 2;
  min-height: clamp(560px, 72vh, 820px);
  padding: clamp(28px, 6vw, 84px);
  background:
    linear-gradient(180deg, rgba(4, 9, 18, 0.22), rgba(4, 9, 18, 0.62)),
    var(--mesh-shell-inner);
}

<section class="mesh-shell">
  <canvas class="mesh-shell__field" data-dark-blue-mesh></canvas>
  <div class="mesh-shell__content">
    <nav class="mesh-nav">...</nav>
    <h1>Infrastructure for intelligent interfaces.</h1>
    <p>...</p>
  </div>
</section>

キャンバスのメッシュフィールド

最終ビルドでは、利用できる場合はWebGLまたはThree.jsを使います。この2Dキャンバスパターンは、歪んだグラデーション、柔らかなメッシュの動き、煙のようなブルーのハイライトを表現するための優れた代替手段です。

function initDarkBlueMesh(canvas) {
  const ctx = canvas.getContext("2d");
  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  let width = 0;
  let height = 0;
  let frame = 0;
  let rafId = 0;

  const points = [
    { x: 0.18, y: 0.30, r: 0.45, color: "rgba(29, 78, 216, 0.55)" },
    { x: 0.68, y: 0.22, r: 0.38, color: "rgba(49, 46, 129, 0.58)" },
    { x: 0.78, y: 0.72, r: 0.52, color: "rgba(56, 90, 124, 0.48)" },
    { x: 0.42, y: 0.58, r: 0.34, color: "rgba(219, 234, 254, 0.18)" },
  ];

  function resize() {
    const rect = canvas.getBoundingClientRect();
    const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
    width = Math.max(1, rect.width);
    height = Math.max(1, rect.height);
    canvas.width = Math.floor(width * dpr);
    canvas.height = Math.floor(height * dpr);
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  }

  function draw(time = 0) {
    ctx.clearRect(0, 0, width, height);
    ctx.fillStyle = "#030712";
    ctx.fillRect(0, 0, width, height);
    ctx.globalCompositeOperation = "screen";

    points.forEach((point, index) => {
      const drift = reduceMotion ? 0 : Math.sin(time * 0.00018 + index) * 24;
      const x = point.x * width + drift;
      const y = point.y * height + Math.cos(time * 0.00016 + index) * 18;
      const radius = Math.max(width, height) * point.r;
      const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
      gradient.addColorStop(0, point.color);
      gradient.addColorStop(1, "rgba(3, 7, 18, 0)");
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, width, height);
    });

    ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle = "rgba(255, 255, 255, 0.035)";
    for (let y = (frame % 28); y < height; y += 28) {
      ctx.fillRect(0, y, width, 1);
    }

    frame += 1;
    if (!reduceMotion) rafId = requestAnimationFrame(draw);
  }

  function handleResize() {
    cancelAnimationFrame(rafId);
    resize();
    draw();
  }

  resize();
  draw();
  window.addEventListener("resize", handleResize);

  return () => {
    cancelAnimationFrame(rafId);
    window.removeEventListener("resize", handleResize);
  };
}

ナビゲーション

.mesh-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(rgba(5, 12, 24, 0.76), rgba(5, 12, 24, 0.76)) padding-box,
    linear-gradient(120deg, rgba(255, 255, 255, 0.28), rgba(96, 165, 250, 0.16), rgba(255, 255, 255, 0.04)) border-box;
  backdrop-filter: blur(18px);
}

.mesh-nav a {
  color: var(--mesh-copy);
  border-radius: 999px;
  padding: 9px 14px;
  text-decoration: none;
}

.mesh-nav a:hover,
.mesh-nav a[aria-current="page"] {
  color: var(--mesh-text);
  background: rgba(255, 255, 255, 0.08);
}

ノードとレール

.mesh-node {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(191, 219, 254, 0.18);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--mesh-copy);
  background: rgba(5, 12, 24, 0.58);
  backdrop-filter: blur(14px);
  font-size: 12px;
}

.mesh-node::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #bfdbfe;
  box-shadow: 0 0 18px rgba(147, 197, 253, 0.72);
}

.mesh-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--mesh-line), transparent);
}

.mesh-corner {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--mesh-line-strong);
}

CTAの組み合わせ

.mesh-cta-primary {
  color: #020617;
  background: #f8fafc;
  box-shadow: 0 16px 36px rgba(219, 234, 254, 0.18);
}

.mesh-cta-secondary {
  color: var(--mesh-text);
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(5, 12, 24, 0.62), rgba(5, 12, 24, 0.62)) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(96, 165, 250, 0.12), rgba(255, 255, 255, 0.04)) border-box;
}

モーションのデフォルト設定

• メッシュのドリフト：非常にゆっくりと動かし、ループは12秒から28秒に設定します。急なイージングは使いません。
• スキャンストリーク：縦方向に落ちる線または横線をまばらに配置し、不透明度を低く保ちます。
• テキスト：ヒーロー見出しとセクションラベルにのみ、マスクされたリビールを適用します。
• ノード：きらめきやパルスは強度を低く抑え、常時点滅させないようにします。
• 動きを減らす設定：メッシュを停止し、きらめきをなくします。レイアウトとコントラストは維持します。

調整項目

• メッシュの視認性：雰囲気が伝わる範囲でのみ不透明度を上げます。コピーを常に主役にします。
• ブルーの色相：暗いベースを保ちながら、インディゴ、ネイビー、コバルト、スチールブルーの間で調整します。
• シェルのコントラスト：外側の境界線、内側の塗り、キャンバスの不透明度を調整し、各レイヤーをシャープに見せます。
• ネットワークの密度：高級感を重視する場合はノードを減らし、技術インフラを強調する場合はマーカーを増やします。
• 動きの強さ：ゆっくりとした雰囲気のある動きにし、ゲームのような演出は避けます。

避けること

• メッシュらしい奥行きやプロシージャルな特徴のない、平坦なCSSグラデーション。
• 鮮やかなシアンの多用や、あらゆる場所でのエレクトリックブルーのグロー。
• 情報を詰め込んだダッシュボード、過剰な数の浮遊ウィジェット、互いに競合するカード。
• レール、フレーム、マーカー、システム構造がない、ありきたりな半透明の塊。
• 可読性を損なう、過剰に作り込んだシェーダー効果。
• 暗く上質な雰囲気を損なう、風通しのよいライトブルーのセクション。

簡易チェック

• メッシュがヒーローシェル内に見え、立体感がある。
• ベースがフラットな黒や明るいブルーではなく、限りなく黒に近いネイビーに見える。
• シェルにシャープな境界線グラデーションがあり、内側の面はより暗い。
• フィールドの上でもタイポグラフィが明るくシャープで、読みやすい。
• ノード、レール、マーカー、スキャンラインがまばらに配置され、整列している。
• CTAのコントラストが明確で、プライマリは塗り、セカンダリはガラス風になっている。