Design Vault 用途・構成・配色・本文で検索 /
索引 カテゴリ タグ English
索引に戻る

オーロラグラデーション SaaS ランディング

全面図版
オーロラグラデーション SaaS ランディング
160 120

1440 × 900 作品として見る

持ち帰る

コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。

全部入り

2026-04-15-gradient-saas-landing-everything.md

このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown

依頼文

991 B 
以下の仕様でページを 1 枚作ってください。

- 版面 1440 × 900
- 余白 上 120 右 160 下 120 左 160

## 文字（版面 1440px に対する px）
hero  72px / 700 / 字間 -.01em / 行送り 1.25
sub  18px / 400 / 行送り 1.9
cta  16px / 500
note  14px / 400

## 配色
地 #0B0224 / 面 #1A1131 / 文字 #F4F0FF / 補助 #A99EC8 / 強調 #2FB6A8 / 罫 #2E2350 / #3B1E8C / #6C3AC7

## 外すと崩れる点
- 4 ストップ以上のグラデは中間色が主役。繋ぎの色で印象が決まる
- 文字の占有を画面の 60% 以下に抑え、残りは背景に語らせる
- ガラス面は blur(20px) + 白 4〜8% の重ねが下限。薄いと沈む

内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/2026-04-15-gradient-saas-landing/pattern.html

仕様

1.0 KB

/ai/designs/2026-04-15-gradient-saas-landing.json 

format: web
density: low
layout:
  kind: full-bleed
  canvas:
    w: 1440
    h: 900
  margin:
    top: 120
    right: 160
    bottom: 120
    left: 160
type:
  hero:
    size: 72
    weight: 700
    tracking: -.01em
    leading: 1.25
  sub:
    size: 18
    weight: 400
    leading: 1.9
  cta:
    size: 16
    weight: 500
  note:
    size: 14
    weight: 400
colors:
  ground: "#0B0224"
  surface: "#1A1131"
  ink: "#F4F0FF"
  muted: "#A99EC8"
  accent: "#2FB6A8"
  rule: "#2E2350"
  series:
    - "#3B1E8C"
    - "#6C3AC7"
rules:
  - 4 ストップ以上のグラデは中間色が主役。繋ぎの色で印象が決まる
  - 文字の占有を画面の 60% 以下に抑え、残りは背景に語らせる
  - ガラス面は blur(20px) + 白 4〜8% の重ねが下限。薄いと沈む

ファイル

pattern.html

2.9 KB

/designs/2026-04-15-gradient-saas-landing/pattern.html — 版そのものの HTML。書体の部分集合ごと同梱で、開けばこの絵がそのまま出ます。

中身を見る 
<!doctype html>
<meta charset="utf-8">
<title>オーロラグラデーション SaaS ランディング</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  :root {
    --ground: #0B0224; --surface: #1A1131; --ink: #F4F0FF;
    --muted: #A99EC8; --accent: #2FB6A8; --rule: #2E2350;
    --series-1: #3B1E8C; --series-2: #6C3AC7;
    /* ガラス面の 3 値。役割は持たないが設計値なので、ここに名前で置く。 */
    --glass-fill: rgba(255, 255, 255, .07);
    --glass-edge: rgba(255, 255, 255, .14);
    --glass-rule: rgba(255, 255, 255, .2);
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1440px; height: 900px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }
  .artboard {
    width: 1440px; height: 900px; color: var(--ink);
    background: var(--ground);
    padding: 120px 160px;
    position: relative; overflow: hidden;
  }
  /* 4 ストップのグラデ。印象を作るのは端の色ではなく中間の 2 色。 */
  .aurora {
    position: absolute; inset: -20%;
    background:
      radial-gradient(58% 52% at 18% 22%, var(--series-1) 0%, transparent 62%),
      radial-gradient(52% 46% at 82% 30%, var(--accent) 0%, transparent 58%),
      radial-gradient(64% 58% at 52% 96%, var(--series-2) 0%, transparent 66%),
      var(--ground);
    filter: blur(10px);
  }
  .content { position: relative; height: 100%; display: grid; align-content: center; }
  /* 文字の占有は画面の 60% 以下に抑え、残りは背景に語らせる。 */
  .copy { max-width: 620px; display: grid; gap: 28px; }
  .hero { font-size: 72px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
  .sub { font-size: 18px; font-weight: 400; line-height: 1.9; color: var(--muted); }
  /* ガラス面は blur(20px) + 白 4〜8% が下限。薄いと沈む。 */
  .glass {
    margin-top: 20px; justify-self: start;
    display: flex; align-items: center; gap: 20px;
    background: var(--glass-fill);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-edge);
    padding: 20px 28px;
  }
  .cta { font-size: 16px; font-weight: 500; }
  .glass span { width: 1px; height: 20px; background: var(--glass-rule); }
  .note { font-size: 14px; font-weight: 400; color: var(--muted); }
</style>
<div class="artboard" data-artboard>
  <div class="aurora"></div>
  <div class="content" data-content>
    <div class="copy">
      <h1 class="hero" data-type="hero">問い合わせを、<br>止めずに減らす。</h1>
      <p class="sub" data-type="sub">窓口の運用はそのままに、一次受けだけを切り出します。既存の手順書を書き換える必要はありません。</p>
      <div class="glass">
        <p class="cta" data-type="cta">14 日間ためす</p>
        <span></span>
        <p class="note" data-type="note">クレジットカード不要</p>
      </div>
    </div>
  </div>
</div>

font.css

2.4 KB

/designs/2026-04-15-gradient-saas-landing/font.css — 全部入りには入れていない

中身を見る 
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
 * font    Zen Kaku Gothic New 400;500;700
 * chars   70 (f0a41cd9b0e1a48f)
 *
 * pattern.html の文字だけを含む部分集合。描画時に外部へ取りに行かないよう同梱する。
 * 版の文字を変えたら取り直すこと — 忘れると足りない字が豆腐になる。
 * その取り忘れは pattern-entries.test.ts が上の指紋で検出する。
 */

@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(./font-0.woff2) format('woff2');
  unicode-range: U+31, U+34, U+53, U+61, U+3001-3002, U+3042, U+3044, U+3048, U+304d-304e, U+3051-3052, U+3057-3060, U+306b, U+306e-3070, U+307e, U+3081, U+3089-308b, U+308f, U+3092-3093, U+3099, U+30a3, U+30aa-30ac, U+30af-30b0, U+30b7-30b8, U+30c3, U+30c6-30c9, U+30e7, U+30e9, U+30ec-30ed, U+30f3, U+30fc, U+4e00, U+4e0d, U+51fa, U+5207, U+53d7, U+53e3, U+5408, U+554f, U+5b58, U+5fc5, U+624b, U+63db, U+65e2, U+65e5, U+66f8, U+6b21, U+6b62, U+6e1b, U+7528, U+7a93, U+8981, U+904b, U+9593, U+9806;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url(./font-1.woff2) format('woff2');
  unicode-range: U+31, U+34, U+53, U+61, U+3001-3002, U+3042, U+3044, U+3048, U+304d-304e, U+3051-3052, U+3057-3060, U+306b, U+306e-3070, U+307e, U+3081, U+3089-308b, U+308f, U+3092-3093, U+3099, U+30a3, U+30aa-30ac, U+30af-30b0, U+30b7-30b8, U+30c3, U+30c6-30c9, U+30e7, U+30e9, U+30ec-30ed, U+30f3, U+30fc, U+4e00, U+4e0d, U+51fa, U+5207, U+53d7, U+53e3, U+5408, U+554f, U+5b58, U+5fc5, U+624b, U+63db, U+65e2, U+65e5, U+66f8, U+6b21, U+6b62, U+6e1b, U+7528, U+7a93, U+8981, U+904b, U+9593, U+9806;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(./font-2.woff2) format('woff2');
  unicode-range: U+31, U+34, U+53, U+61, U+3001-3002, U+3042, U+3044, U+3048, U+304d-304e, U+3051-3052, U+3057-3060, U+306b, U+306e-3070, U+307e, U+3081, U+3089-308b, U+308f, U+3092-3093, U+3099, U+30a3, U+30aa-30ac, U+30af-30b0, U+30b7-30b8, U+30c3, U+30c6-30c9, U+30e7, U+30e9, U+30ec-30ed, U+30f3, U+30fc, U+4e00, U+4e0d, U+51fa, U+5207, U+53d7, U+53e3, U+5408, U+554f, U+5b58, U+5fc5, U+624b, U+63db, U+65e2, U+65e5, U+66f8, U+6b21, U+6b62, U+6e1b, U+7528, U+7a93, U+8981, U+904b, U+9593, U+9806;
}

ノート

この構成について / About this pattern

出典を持たない自作パターン。pattern.html が版そのもので、cover.png と frontmatter の layout / type / colors はどちらもそこから機械的に測った結果。編集するのは pattern.html だけで、寸法を手で書き直すことはない。

A self-authored pattern. pattern.html is the artboard itself; both cover.png and the measurements in the frontmatter are derived from it, so the three cannot drift apart. Edit the artboard, never the numbers.

Techniques

Apply to