機能紹介 · 機能紹介セクション
寒色グラデーションのAIツール機能紹介
紺の地に水色から藍色へのグラデーションを重ねた、AI議事録ツールの機能紹介セクション。見出しの一部だけを文字の幅で塗り、大きなカード1枚と小さなカード3枚で「何がどれだけ減るか」を数字と帯の長さで見せる。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/glacier-gradient-feature/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
AIへの指示文
寒色のグラデーションで組む、AI議事録ツールの機能紹介セクションを作ってください。 要件: - 地は紺 #07142b。左上と右上から、青 #3b82f6 と藍 #6366f1 の光を radial-gradient で2つだけ重ねる。 - 配色は寒色だけ。水色 #3fd0e8・青 #3b82f6・藍 #6366f1、文字は #e8f3ff、補助の文字は #9fb6d3。 - グラデーションはすべて `linear-gradient(90deg in oklch, …)` のように oklch で補間し、中間色を濁らせない。 - 上部に小さな丸枠のラベル「機能」、見出し「会議のあとの30分を、最初の3分に。」。「最初の3分」だけをグラデーションの文字にする（background-clip: text。対応しない環境では水色の単色に戻す）。 - その下に、何をするツールかを2文で説明するリード文。 - カードは3列。1段目は3列ぶち抜きの大きいカードで、左に説明、右に「清書した議事録 約4,800字」と「要約 約600字」を帯の長さで比べる図（role="img" と aria-label を付ける）。 - 2段目は小さいカード3枚（話し手の聞き分け・やることの抽出・録音の消去）。それぞれアイコン、見出し、説明、大きな数字を1つ。 - カードは角丸18px、上辺だけに細いグラデーションの線を引く。アイコンの色相をカードごとに少しずらす。 - 最後に、グラデーションの主ボタン「14日間 無料で試す」と、枠線だけの副ボタン。 - 本文の字間は 0、行間は 1.8。幅860px未満では1列にする。
バリエーション
明るい地の版
地を #f3f8ff の淡い青、文字を #0d2447 に変える。カードは白地に薄い青の枠線、 グラデーションは見出しの文字とボタンだけに残す。
機能を6つに増やす版
大きいカードを外し、小さいカードを3列×2段の6枚にする。 数字はカードの右上に小さく置き、見出しを主役にする。
このプレビューのコード
HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。架空の議事録ツールです。要約の見本と無料体験の説明へ移動できます。録音のアップロード・AI処理・登録・課金・音声消去は実装していません。
コードを表示
<!doctype html>
<!-- Vibehaus — CC0。外部素材・ライブラリ不要の1ファイル版。製品・性能値・認証は架空の表示見本です。 -->
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>寒色グラデーションで見せるAIツールの機能紹介 — Vibehaus プレビュー</title>
<style>
:root {
--night: #07142b;
--deep: #0d2447;
--ice: #e8f3ff;
--mist: #9fb6d3;
--cyan: #3fd0e8;
--blue: #3b82f6;
--indigo: #6366f1;
--gothic: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--gothic);
line-height: 1.8;
letter-spacing: 0;
color: var(--ice);
/* 地は紺。上から差す青い光を2つだけ重ねる */
background:
radial-gradient(60rem 30rem at 15% -10%, rgb(59 130 246 / 0.35), transparent 70%),
radial-gradient(50rem 28rem at 95% 10%, rgb(99 102 241 / 0.28), transparent 70%),
var(--night);
min-height: 100vh;
}
.section {
max-width: 72rem;
margin: 0 auto;
padding: clamp(3rem, 8vw, 6.5rem) clamp(1.25rem, 5vw, 3rem);
}
.eyebrow {
display: inline-block;
padding: 0.3rem 0.8rem;
border: 1px solid rgb(159 182 211 / 0.35);
border-radius: 999px;
font-size: 0.75rem;
letter-spacing: 0.12em;
color: var(--mist);
}
h2 {
margin: 1rem 0 0.9rem;
font-size: clamp(1.8rem, 4vw, 2.8rem);
line-height: 1.4;
font-weight: 800;
text-wrap: balance;
}
/* 見出しの一部だけを、文字の幅で塗る。oklch で補間して中間を濁らせない */
h2 .grad {
background: linear-gradient(90deg in oklch, var(--cyan), var(--blue) 55%, var(--indigo));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@supports not (background-clip: text) {
h2 .grad { color: var(--cyan); }
}
.lead {
max-width: 38rem;
margin: 0;
color: var(--mist);
font-size: 1rem;
}
/* ---- 機能カード: 2段。大きい1枚と小さい3枚 ---- */
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin-top: clamp(2rem, 5vw, 3.5rem);
}
.card {
position: relative;
padding: 1.6rem;
border-radius: 18px;
background: linear-gradient(180deg, rgb(13 36 71 / 0.9), rgb(7 20 43 / 0.9));
border: 1px solid rgb(159 182 211 / 0.16);
overflow: hidden;
}
/* 縁の上辺だけに細い光。カードごとに色相を少しずらす */
.card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg in oklch, transparent, var(--c1, var(--cyan)), transparent);
}
.card.wide {
grid-column: span 3;
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: 2rem;
align-items: center;
}
.icon {
width: 44px;
height: 44px;
border-radius: 12px;
display: grid;
place-items: center;
background: linear-gradient(135deg in oklch, var(--c1, var(--cyan)), var(--c2, var(--blue)));
box-shadow: 0 8px 24px -8px var(--c1, var(--cyan));
}
.icon svg { width: 22px; height: 22px; stroke: #04101f; }
.card h3 {
margin: 1.1rem 0 0.4rem;
font-size: 1.12rem;
line-height: 1.5;
}
.card p {
margin: 0;
font-size: 0.9rem;
color: var(--mist);
}
.card .num {
display: block;
margin-top: 1.2rem;
font-size: 1.9rem;
font-weight: 800;
line-height: 1.3;
color: var(--ice);
}
.card .num small { font-size: 0.8rem; font-weight: 500; color: var(--mist); margin-left: 0.3rem; }
.c-cyan { --c1: #3fd0e8; --c2: #3b82f6; }
.c-blue { --c1: #60a5fa; --c2: #6366f1; }
.c-indigo { --c1: #818cf8; --c2: #3fd0e8; }
/* 大きいカードの右側: 要約前後の比較を、帯の長さで見せる */
.bars { display: grid; gap: 0.9rem; }
.bar-row { display: grid; gap: 0.35rem; font-size: 0.8rem; color: var(--mist); }
.bar-row .track {
height: 12px;
border-radius: 999px;
background: rgb(159 182 211 / 0.12);
overflow: hidden;
}
.bar-row .fill {
height: 100%;
width: var(--w);
border-radius: inherit;
background: linear-gradient(90deg in oklch, var(--cyan), var(--indigo));
}
.bar-row.before .fill { background: rgb(159 182 211 / 0.45); }
.cta {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
margin-top: 2.5rem;
}
.btn {
display: inline-flex;
align-items: center;
padding: 0.85rem 1.4rem;
border-radius: 999px;
font-size: 0.92rem;
font-weight: 700;
text-decoration: none;
color: #04101f;
background: linear-gradient(90deg in oklch, var(--cyan), var(--blue));
}
.btn.ghost {
color: var(--ice);
background: transparent;
border: 1px solid rgb(159 182 211 / 0.35);
font-weight: 500;
}
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@media (max-width: 860px) {
.grid { grid-template-columns: 1fr; }
.card.wide { grid-column: auto; grid-template-columns: 1fr; }
}
/* 配布前の実幅監査: 内容を切らず、デモの行き先を示す */
.demo-note { max-width: 66rem; margin: 0 auto 2rem; padding: 0 1.25rem; color: var(--mist); }
.demo-note h3 { color: var(--ice); line-height: 1.4; }
.demo-note section { margin-top: 2rem; scroll-margin-top: 2rem; }
.demo-note dl { display: grid; gap: 0.5rem; }
.demo-note dt { color: var(--cyan); font-weight: 700; }
.demo-note dd { margin: 0 0 0.5rem; }
.demo-note { font-size: 0.85rem; line-height: 1.8; letter-spacing: 0; }
</style>
</head>
<body>
<section class="section" aria-labelledby="feat-title">
<span class="eyebrow">機能</span>
<h2 id="feat-title">会議のあとの30分を、<span class="grad">最初の3分</span>に。</h2>
<p class="lead">
録音をアップロードすると、要点・決定事項・次にやることを分けて書き出します。議事録を清書する時間を、次の会議の準備に回せます。
</p>
<div class="grid">
<article class="card wide c-cyan">
<div>
<div class="icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M4 12h10M4 18h6" /></svg>
</div>
<h3>60分の会議を、1画面の要約に</h3>
<p>発言をそのまま並べず、決まったこと・保留になったこと・担当者つきの作業に分けます。読み手が知りたい順番に並べ替えるところまでが要約です。</p>
</div>
<div class="bars" role="img" aria-label="議事録の分量の比較。清書した議事録は約4,800字、要約は約600字">
<div class="bar-row before"><span>清書した議事録 約4,800字</span><div class="track"><div class="fill" style="--w: 100%"></div></div></div>
<div class="bar-row"><span>要約 約600字</span><div class="track"><div class="fill" style="--w: 13%"></div></div></div>
</div>
</article>
<article class="card c-cyan">
<div class="icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8" r="3.5" /><path d="M5 20c1.5-3.5 4-5 7-5s5.5 1.5 7 5" /></svg>
</div>
<h3>話し手を聞き分ける</h3>
<p>声の違いから発言者を分け、名前を一度つければ次の会議からも覚えています。</p>
<span class="num">8<small>人まで同時に</small></span>
</article>
<article class="card c-blue">
<div class="icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round"><path d="M5 12l4 4 10-10" /></svg>
</div>
<h3>次にやることを取り出す</h3>
<p>「来週までに」「確認しておきます」といった言い回しから、期限と担当者つきの作業を拾います。</p>
<span class="num">3<small>形式で書き出し</small></span>
</article>
<article class="card c-indigo">
<div class="icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round"><rect x="4" y="10" width="16" height="10" rx="2" /><path d="M8 10V7a4 4 0 0 1 8 0v3" /></svg>
</div>
<h3>録音は社外に残さない</h3>
<p>文字にしたあと、音声は24時間で消去します。学習には使いません。</p>
<span class="num">24<small>時間で音声を消去</small></span>
</article>
</div>
<div class="cta">
<a class="btn" href="#trial-demo">14日間 無料で試す</a>
<a class="btn ghost" href="#summary-demo">要約の見本を見る</a>
</div>
</section>
<aside class="demo-note" aria-label="表示見本について"><p>架空の議事録ツールの表示見本です。性能値・音声の保存期間・学習への利用条件は説明用の設定です。録音・AI処理・登録・課金機能は含みません。</p><section id="summary-demo" tabindex="-1" aria-labelledby="summary-title"><h3 id="summary-title">要約の見本</h3><p>以下は架空の会議をまとめた文章です。AIの実行結果ではありません。</p><dl><dt>決まったこと</dt><dd>次の製品紹介ページは、機能と導入手順を分けて掲載する。</dd><dt>保留になったこと</dt><dd>公開日は、スマホでの確認が終わってから決める。</dd><dt>次にやること</dt><dd>担当の佐藤が金曜日までに原稿を用意し、田中が表示とリンクを確認する。</dd></dl></section>
<section id="trial-demo" tabindex="-1" aria-labelledby="trial-title"><h3 id="trial-title">無料体験について</h3><p>14日間の無料体験は架空のプラン設定です。この見本では申込みを受け付けず、登録・課金・録音のアップロードは行いません。</p></section></aside>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
青は、業務ツールでもっとも多く使われる色です。信頼や落ち着きを連想させる一方で、ただ青で塗るだけでは他社と見分けがつきません。この機能紹介は、青ひとつではなく水色から藍色までの寒色の幅を使い、紺の地に光を重ねて奥行きを作っています。
寒色の幅で、同じ青から抜け出す
寒色だけで組むと、色数が少ないぶん統一感は出やすくなります。差がつくのは、どの青を、どこで混ぜるかです。
崩れる形青1色でカードもボタンも塗る
どれが押せる場所で、どれが説明なのかが色で分からなくなります。よくある業務ツールの見た目に埋もれます。
効く形地は紺、光とボタンだけを明るい寒色に
暗い地に明るい寒色を置く場所を絞ると、視線が見出しとボタンに集まります。色の役割が分かれます。
グラデーションは oklch で補間しています。水色と藍色をそのまま混ぜると中間が灰色がかり、せっかくの透明感が濁るためです。
機能は、何が減るかで語る
機能紹介は、できることを並べるだけでは読み流されます。このセクションでは、大きいカードで清書した議事録と要約の分量の差を帯の長さで見せ、小さいカードにもそれぞれ数字を1つだけ置いています。
数字は1枚のカードに1つ。2つ以上並べると、どれが言いたいことなのかが伝わらなくなります。
仕上げの判断軸
3色水色・青・藍。暖色は入れない
1 + 3大きいカード1枚と小さいカード3枚
1pxカードの上辺だけに引く光の線
光の円を増やしたくなったら、2つで止めてください。3つ以上になると地が騒がしくなり、カードの上辺の細い線が見えなくなります。
機能紹介の構成要素
使いどころ
- AIツールや業務SaaSの、ランディングページの機能紹介
- 落ち着きと先進性を両方見せたい法人向けサービス
- 効果を数字で言えるプロダクトの説明セクション
- 青系のブランドカラーを持つサービスのリニューアル
このデザインの分類
背景と狙いどころ
よくある質問
寒色だけだと冷たい印象になりませんか？
紺の地に、明るさの違う青を重ねると奥行きが出て、冷たさより静けさが勝ちます。温かさが欲しければ、見出しの文言や写真で補うほうが配色を崩さずに済みます。
グラデーションに oklch を指定するのはなぜですか？
水色から藍色のように色相が離れた2色を既定の sRGB で混ぜると、中間がくすんだ灰色寄りになります。oklch で補間すると、明るさを保ったまま色相だけが移っていきます。
数字は実績がないと書けません。
分量や時間のように、使えば誰でも確かめられる数字を選んでいます。導入社数のような実績の数字でなくても、何がどれだけ減るかを示せば説得力は出ます。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
アイソメトリック投影の機能紹介セクション
30度傾斜の擬似3DでUIカードを浮かべる、未来感のあるアイソメトリック機能紹介。Stripe・Linear・Vercel系のモダンSaaSの定番表現を CSS だけで再現する尖った設計。
タイル型グリッドの機能紹介
大小が異なるタイルを組み合わせて 6 機能を並べる、暗背景のベントーグリッド (タイル型レイアウト) の機能紹介セクション。主役の機能を大きく、補助機能を小さく配置することで、説明文を読まなくても重みづけが伝わる設計。
B2Bコーポレートの機能紹介セクション
B2B SaaSやエンタープライズ製品向けの機能紹介セクション。落ち着いた寒色配色と整然としたグリッド、データ感のあるアイコンで「実用と信頼」を伝える設計。