「清涼感」を表現する
結露、水面の光、氷、涼風。見ている人にひんやりとした「涼しさ・透明感」を感じさせる表現テクニック。
このページについて
表現の引き出し
🎨 結露のグラス
📝 表現の語彙
日本語: 結露、汗をかいたグラス、水滴、ひんやり、みずみずしい
英語: condensation, sweating glass, water droplets, dewy, ice-cold
抽象キーワード: cold, fresh, hydration
💬 AIへの指示テンプレ
「冷たい飲み物のグラスに付いた結露を作ってください。背景はグラス越しの飲み物（水色のグラデ）に半透明の白い霧（曇り）を重ね、霧は単色でなく多段グラデ＋feTurbulenceの薄いノイズでムラのある質感にします。水滴は小さなレンズとして描き、左上に鋭い白いハイライト（スペキュラ）、下側に向こうの環境色を映す屈折を付け、真円でなく重力で下がふくらむ歪んだ涙型にします（border-radiusを四隅で不揃いに）。大粒・中粒・微粒・霜の粉の4スケールで散らし、いくつかは『小滴が成長し近接滴を吸収して肥大→表面張力の限界で耐えたあと加速して蛇行しながら滑り落ちる』という成長→合体→滑落の連鎖にしてください。」
🎯 似合うシーン
飲料/ビール/ミネラルウォーター・夏季キャンペーン・冷蔵/保冷商品・化粧水/スキンケア・かき氷
🔧 実装手法
グラス越しの飲み物＋ムラのある結露の霧（多段グラデ＋feTurbulence）+ 涙型レンズの水滴（4スケール）+ 成長→合体→蛇行滑落の連鎖セル
📄 コード例を見る
html
<div class="dew-stage">
<!-- 結露の曇り：多段グラデ＋ムラで濃淡 -->
<div class="dew-frost"></div>
<!-- 霜・曇りの質感ノイズ（feTurbulence 1層） -->
<svg class="dew-frost-tex" viewBox="0 0 200 100" preserveAspectRatio="none">
<filter id="frost">
<feTurbulence type="fractalNoise" baseFrequency="0.9 0.9" numOctaves="2" seed="11" result="n"/>
<feColorMatrix in="n" type="matrix"
values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0"/>
</filter>
<rect width="200" height="100" filter="url(#frost)"/>
</svg>
<!-- 水滴＝歪んだ涙型（真円にしない・大中小+霜粒の4スケール） -->
<span class="dew-bead" style="left:18%; top:30%; width:7px; height:8px;
border-radius:54% 46% 58% 42% / 44% 42% 60% 58%; filter:blur(0.3px)"></span>
<!-- ...擬似乱数ジッターで52個散布... -->
<!-- 成長→合体→滑落の連鎖セル -->
<div class="dew-cell" style="left:53%; --dur:17s">
<span class="dew-cell-tail"></span> <!-- 蛇行する跡 -->
<span class="dew-sat" style="--dx:9px; --dy:-8px"></span> <!-- 吸収される衛星滴 -->
<span class="dew-cell-head"></span> <!-- 成長して肥大する主滴 -->
</div>
</div>css
.dew-stage {
position: relative; height: 180px; border-radius: 8px; overflow: hidden;
background: linear-gradient(180deg, #bfe9f0 0%, #8fd3e0 45%, #56b7cf 100%);
}
/* 曇り：単一の白でなく多段グラデ＋ムラ */
.dew-frost {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.42) 40%, rgba(245,252,254,0.5)),
radial-gradient(120% 80% at 28% 18%, rgba(255,255,255,0.35), transparent 60%);
}
.dew-frost-tex { position: absolute; inset: 0; opacity: 0.4; mix-blend-mode: screen; }
/* 水滴＝小さなレンズ：左上に白いスペキュラ、下に環境色の屈折。border-radiusで涙型に */
.dew-bead {
position: absolute;
background: radial-gradient(circle at 36% 26%,
rgba(255,255,255,0.95), rgba(255,255,255,0.42) 24%,
rgba(150,195,210,0.24) 58%, rgba(70,130,150,0.32));
box-shadow: inset 0 -1px 1.5px rgba(255,255,255,0.7), inset 0 1px 1px rgba(40,90,110,0.28);
}
/* 連鎖セル：外側で滑落（蛇行）、内側の主滴で成長、衛星滴で合体 */
.dew-cell {
position: absolute; top: 0;
display: flex; flex-direction: column; align-items: center;
animation: dewFall var(--dur) cubic-bezier(0.55,0,0.85,0.4) infinite;
}
.dew-cell-head {
border-radius: 54% 46% 58% 42% / 44% 42% 60% 58%; /* 真円にしない */
background: radial-gradient(circle at 36% 26%,
rgba(255,255,255,0.96), rgba(150,195,210,0.3) 60%, rgba(70,130,150,0.42));
animation: dewGrow var(--dur) ease-out infinite;
}
.dew-sat {
position: absolute; top: 22px; left: 50%; border-radius: 50%;
animation: dewAbsorb var(--dur) ease-in infinite; /* 主滴へ吸い込まれて消える */
}
/* 0〜55%は表面張力で耐える→蛇行しながら加速して滑落 */
@keyframes dewFall {
0%, 55% { transform: translate(0, -2px); }
70% { transform: translate(2.5px, 44px); }
85% { transform: translate(-1.5px, 116px); }
100% { transform: translate(0.5px, 198px); }
}
@keyframes dewGrow { 0% { transform: scale(0.32); } 46% { transform: scale(1); } 100% { transform: scale(1.06); } }
@keyframes dewAbsorb {
0% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0.85; }
42% { transform: translate(0, 0) scale(0.25); opacity: 0; }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.dew-cell, .dew-cell-head, .dew-sat { animation: none; }
}🎨 水面のコースティクス
📝 表現の語彙
日本語: 水面の光、コースティクス、揺らめく光、プールの底、水の屈折
英語: water caustics, rippling light, pool floor, refraction net
抽象キーワード: aquatic, shimmer, clarity
💬 AIへの指示テンプレ
「風で波立つ水面を真上から見たコースティクスを作ってください。線の網ではなく『不定形のセルの集合』で表現します。水彩タッチの青いセルを画面いっぱいに敷き、各セルは真円でなくふくらんだ不定形にします。セル同士はくっつかないよう間隔を空け、間に淡いターコイズの目地が通るようにします。青セルの下に藍色のセルを別配置でランダムに敷き、青を半透明にして藍を透けさせ深みを出します。各セルの輪郭に白いぼやけたアウトラインを付け、セルごとに膨らみ縮みのモーフを別周期で、2層全体を別々にゆっくりたゆたわせます。背景は薄いターコイズ。」
🎯 似合うシーン
プール/海/リゾート・夏季・飲料/ウォーター・アクアリウム・スパ/サウナ・清涼系プロダクト
🔧 実装手法
水彩タッチの不定形セルを青・藍2層でずらし敷き（半透明で藍が透ける深み）+ 白い柔らかアウトライン + セルごとのモーフ＋2層の別周期ドリフト + 薄ターコイズ背景
📄 コード例を見る
tsx
// 線の網でなく「水彩タッチの不定形セルの集合」で表現する。青・藍2層をずらし敷く。
// 各セルは d=パス・dur=モーフ周期。藍を下、青（半透明）を上に重ねて深みを出す。
const INDIGO_CELLS = [
{ d: "M30,4 Q70,-2 90,14 Q102,34 86,48 Q54,56 32,42 Q18,24 30,4Z", dur: "9s" },
// ...膨らんだ不定形セルを23個。互いに間隔を空ける（目地に背景が通る）...
];
const BLUE_CELLS = [
{ d: "M10,-8 Q54,-12 78,4 Q90,24 74,40 Q42,48 12,36 Q-4,18 10,-8Z", dur: "9.4s" },
// ...藍と独立配置で23個...
];
<svg viewBox="0 0 280 180" width={280} height={180} className="cau2-svg">
<defs>
<filter id="blur"><feGaussianBlur stdDeviation={2} /></filter> {/* 本体ぼかし */}
<filter id="outBlur"><feGaussianBlur stdDeviation={2.4} /></filter> {/* アウトライン */}
</defs>
<rect width={280} height={180} fill="#cdeef0" /> {/* 薄ターコイズ背景 */}
{/* 藍：本体（透過）→白アウトラインの順。layerごとに scale(0.84) で一回り小さく */}
<g className="cau2-indigo">
<g transform="translate(140,90) scale(0.84) translate(-140,-90)">
<g filter="url(#blur)" fill="#2a6aa8" opacity={0.6}>
{INDIGO_CELLS.map((c, i) => (
<path key={i} className="cau2-cell" d={c.d} style={{ "--dur": c.dur }} />
))}
</g>
<g filter="url(#outBlur)" fill="none" stroke="#fff" strokeWidth={3.5} opacity={0.85}>
{INDIGO_CELLS.map((c, i) => (
<path key={i} className="cau2-cell" d={c.d} style={{ "--dur": c.dur }} />
))}
</g>
</g>
</g>
{/* 青：半透明にして下の藍を透けさせる（同じく本体→白アウトライン） */}
<g className="cau2-field">
<g transform="translate(140,90) scale(0.84) translate(-140,-90)">
<g filter="url(#blur)" fill="#3aaedd" opacity={0.64}>
{BLUE_CELLS.map((c, i) => (
<path key={i} className="cau2-cell" d={c.d} style={{ "--dur": c.dur }} />
))}
</g>
<g filter="url(#outBlur)" fill="none" stroke="#fff" strokeWidth={3.5} opacity={0.9}>
{BLUE_CELLS.map((c, i) => (
<path key={i} className="cau2-cell" d={c.d} style={{ "--dur": c.dur }} />
))}
</g>
</g>
</g>
</svg>css
.caustic-stage {
position: relative; height: 180px; border-radius: 8px; overflow: hidden;
background: #cdeef0; /* 薄いターコイズ */
}
/* 青層・藍層は別々の周期でゆっくりたゆたう（2層をずらすと深みが揺れる） */
.cau2-field { transform-origin: center; animation: cau2Drift 18s ease-in-out infinite; }
.cau2-indigo { transform-origin: center; animation: cau2Drift2 22s ease-in-out infinite; }
@keyframes cau2Drift {
0%,100% { transform: translate(-5px,-4px); }
33% { transform: translate(5px,3px); }
66% { transform: translate(-3px,5px); }
}
@keyframes cau2Drift2 {
0%,100% { transform: translate(5px,4px); }
50% { transform: translate(-5px,-4px); }
}
/* セルごとに膨らみ縮みのモーフ（縦横を逆相に伸縮）。周期はセル単位でずらす */
.cau2-cell {
transform-box: fill-box; transform-origin: center;
animation: cau2Morph var(--dur) ease-in-out infinite;
}
@keyframes cau2Morph {
0%,100% { transform: scale(1,1); }
33% { transform: scale(1.07,0.94); }
66% { transform: scale(0.94,1.07); }
}
@media (prefers-reduced-motion: reduce) {
.cau2-field, .cau2-indigo, .cau2-cell { animation: none; }
}🎨 氷のきらめき
📝 表現の語彙
日本語: 氷、氷のきらめき、透明感、ロックアイス、ひんやり
英語: ice cube, icy sparkle, crystal clear, frozen, chill
抽象キーワード: frozen, crystalline, pure
💬 AIへの指示テンプレ
「透明な氷塊（ロックアイス）を作ってください。写実でなくイラスト/3Dアニメ画風に様式化します。角は丸く溶かし（直線立方体にしない）、上面・前面・右側面を別々のグラデで塗って面ごとに光が回り込むようにします（上面は明るく、右側面は陰）。内部はfeTurbulenceの薄いノイズで層状の濁りを敷き（中心は透明・周縁は白濁）、ハイライトは小さな点を散らすより大きな反射面1枚を柔らかい楕円で置きます。エッジは輪郭線だけでなく角の内側に強い光の帯を入れ、面と面の境界の稜線も光らせます。底には氷を通った青い色落ち（接地影に青のにじみ）を敷き、溶けて時々滴る雫＋着滴の波紋で水たまりとの因果を見せます。角の4点星きらめきは光条を4方向で不揃いにし、芯をぼかして“常時でなく間欠的に”光らせます（素数周期）。」
🎯 似合うシーン
かき氷/アイス・ウイスキー/ロック・飲料/ビール・冷凍食品・空調/冷却・夏季・ミント系プロダクト
🔧 実装手法
角丸の本体を上面/右側面の別グラデで立体化 + 内部の層状濁り（feTurbulence）+ 大きな反射面1枚 + エッジ内側の光の帯＆面境界の稜線 + 底の青い色落ち + 溶けて滴る雫→波紋の連鎖 + 間欠リズムの4点星（不揃いな光条）
📄 コード例を見る
html
<!-- 写実でなくイラスト/3Dアニメ画風に様式化。角は丸く溶かし、面ごとにグラデで光を回り込ませる -->
<svg class="ice-svg" viewBox="0 0 280 180" width="280" height="180">
<defs>
<!-- 本体・上面・右側面を別グラデにして立体に -->
<linearGradient id="iceBody" x1="0" y1="0" x2="0.5" y2="1">
<stop offset="0%" stop-color="#f2fbfe" stop-opacity="0.92"/>
<stop offset="72%" stop-color="#a9d6e6" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#8fc4d8" stop-opacity="0.88"/>
</linearGradient>
<!-- 大きな反射面1枚（柔らかい楕円） -->
<radialGradient id="iceReflect" cx="0.42" cy="0.32" r="0.5">
<stop offset="0%" stop-color="#fff" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#fff" stop-opacity="0"/>
</radialGradient>
<!-- 底に氷を通った青い色落ち -->
<radialGradient id="iceColorCast"><stop offset="0%" stop-color="#7fc1da" stop-opacity="0.55"/><stop offset="100%" stop-color="#7fc1da" stop-opacity="0"/></radialGradient>
<!-- 内部の濁り・霜（feTurbulence 1層） -->
<filter id="iceCloud"><feTurbulence type="fractalNoise" baseFrequency="0.05 0.07" numOctaves="3" seed="4" result="n"/><feColorMatrix in="n" type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0"/></filter>
<filter id="iceSoft"><feGaussianBlur stdDeviation="0.6"/></filter> <!-- ひびを溶かす -->
<clipPath id="iceClip"><path d="M96,64 Q100,58 110,57 L186,57 Q199,66 205,118 Q198,134 120,150 Q102,144 88,80 Q86,69 96,64 Z"/></clipPath>
</defs>
<!-- ⑤ 接地影＋氷を通った青い色落ち -->
<ellipse cx="150" cy="158" rx="62" ry="9" fill="#5a93a8" opacity="0.32"/>
<ellipse cx="150" cy="156" rx="40" ry="5" fill="url(#iceColorCast)"/>
<ellipse class="ice-ripple" cx="118" cy="156" rx="11" ry="2.6" fill="none" stroke="rgba(255,255,255,0.7)"/>
<!-- ① 角の丸い本体 → 上面・右側面を別塗りで立体に -->
<path d="M96,64 Q.. Z" fill="url(#iceBody)"/>
<path d="M110,57 L186,57 Q199,66 150,82 Q102,72 110,57 Z" fill="#ffffff" opacity="0.85"/> <!-- 上面 -->
<path d="M199,66 L205,118 Q198,134 150,140 L150,82 Z" fill="#7bb4cc" opacity="0.85"/> <!-- 右側面（陰） -->
<!-- ③④ 内部の層状濁り＋大きな反射面1枚（本体内クリップ） -->
<g clip-path="url(#iceClip)">
<rect x="80" y="50" width="140" height="110" filter="url(#iceCloud)" opacity="0.14"/>
<ellipse class="ice-shimmer" cx="124" cy="98" rx="30" ry="40" fill="url(#iceReflect)"/>
</g>
<!-- ⑥ 面の境界の稜線（光る） -->
<path d="M102,72 Q150,82 199,66" stroke="#fff" stroke-width="1.1" fill="none" opacity="0.55"/>
<!-- ② エッジの全反射（輪郭＋角の内側に強い光の帯） -->
<path d="M96,64 Q.. Z" fill="none" stroke="#fff" stroke-width="1.4" opacity="0.7"/>
<path d="M99,70 Q104,63 112,62" stroke="#fff" stroke-width="1.6" opacity="0.85"/>
<!-- 底の角から時々滴る（氷→水たまりの因果） -->
<ellipse class="ice-drip" cx="118" cy="148" rx="2.6" ry="3.4"/>
<!-- 角で間欠的にきらめく4点星（光条を4方向で不揃いに＋柔らかい芯） -->
<g class="ice-glint" transform="translate(103 70)">
<circle r="6" fill="rgba(255,255,255,0.5)"/>
<path d="M0,-10 L1.6,-2 L7,0 L2,1.8 L0,6 L-1.8,1.7 L-6,0 L-2.2,-1.8 Z" fill="#fff"/>
</g>
</svg>css
.ice-stage {
position: relative; height: 180px; border-radius: 8px; overflow: hidden;
background: linear-gradient(160deg, #ecf7fb 0%, #d2eaf3 52%, #aed8e6 100%);
}
.ice-svg { position: absolute; left: 50%; top: 50%; margin-left: -110px; margin-top: -90px; }
/* きらめき：普段は消えていて、ごく短い瞬間だけ強く光る（間欠リズム） */
.ice-glint {
transform-box: fill-box; transform-origin: center; opacity: 0;
animation: iceGlint var(--dur) ease-in-out infinite;
}
@keyframes iceGlint {
0%, 82%, 100% { transform: scale(0.2); opacity: 0; }
88% { transform: scale(1); opacity: 0.95; }
94% { transform: scale(0.7); opacity: 0.4; }
}
/* 溶けて底の角から滴る：大半は消えていて時々落ちる（間欠） */
.ice-drip {
transform-box: fill-box; transform-origin: center;
animation: iceDrip var(--dur) cubic-bezier(0.6,0,0.85,0.4) infinite;
}
@keyframes iceDrip {
0%, 62% { transform: translateY(0); opacity: 0; }
67% { opacity: 0.85; }
100% { transform: translateY(16px); opacity: 0; }
}
/* 着滴の波紋（雫の落下と概ね同期） */
.ice-ripple {
transform-box: fill-box; transform-origin: center;
animation: iceRipple var(--dur) ease-out infinite;
}
@keyframes iceRipple {
0%, 90% { transform: scale(0.4); opacity: 0; }
100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ice-glint, .ice-shimmer, .ice-drip, .ice-ripple { animation: none; }
}🎨 涼風
📝 表現の語彙
日本語: 涼風、そよ風、爽やか、抜ける風、涼やか
英語: cool breeze, fresh air, crisp wind, airy
抽象キーワード: airy, crisp, breath of fresh air
💬 AIへの指示テンプレ
「涼やかな風が吹き抜ける空気感を作ってください。風は見えないので、写実でなく『涼しげなリボンの束』に様式化します。太いリボン＋細い添え線が寄り添う束を上・中・下に流し、各リボンは両端を透明にフェードさせて画面を『通り抜ける』感を出します。色はミント〜空色の淡いグラデで、彩度を上げすぎず透明感を残してください。背景には半透明の白いヴェール（楕円のぼかし・screen合成）を素数的にずれた周期で重ね、白い微粒子をリボンの流線に沿って（offset-pathで）左→右へ流して『風に乗る』様子を見せます。リボンの動きはdashで切るとちぎれて見えるので、全体をゆっくり横にたゆたわせる方が自然です。」
🎯 似合うシーン
空調/エアコン・扇風機/サーキュレーター・制汗/デオドラント・ミント系・アウトドア/高原・春夏のリブランディング
🔧 実装手法
ミント〜空色グラデ + 太いリボン＋細い添え線の束（両端フェード・横たゆたい）+ 冷気のヴェール（screen・素数周期）+ 流線に乗る微粒子（offset-path）
📄 コード例を見る
html
<div class="breeze-stage">
<!-- 冷気のヴェール：整った楕円でなく、複数radialを重ねたちぎれ雲＋強めのblur -->
<span class="breeze-veil" style="top:66px; width:300px; height:78px; --dur:23s; --blur:12px"></span>
<!-- 風＝見えないので「涼しげなリボンの束」に様式化。太いリボン＋細い添え線、両端フェード -->
<svg class="breeze-flow-svg" viewBox="0 0 280 180" width="280" height="180">
<defs>
<linearGradient id="ribbon1" x1="0" x2="1">
<stop offset="0" stop-color="#fff" stop-opacity="0"/>
<stop offset="0.3" stop-color="#fff" stop-opacity="0.7"/>
<stop offset="0.7" stop-color="#d4f0ea" stop-opacity="0.6"/>
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
</linearGradient>
</defs>
<!-- 上の束：太いリボン＋細い添え線（中・下の束も同様に重ねる） -->
<path class="breeze-ribbon" d="M-20,70 C40,50 80,52 120,68 C160,84 200,82 240,62 C265,50 290,52 300,60"
stroke="url(#ribbon1)" stroke-width="7" fill="none" stroke-linecap="round" style="animation-duration:13s"/>
<path class="breeze-ribbon" d="M-20,78 C40,60 84,62 122,76 C162,90 202,88 242,70 C266,59 290,60 300,67"
stroke="url(#ribbon1)" stroke-width="3.5" fill="none" stroke-linecap="round" style="animation-duration:17s"/>
</svg>
<!-- 微粒子が風の流線（リボンの中心線）に「乗る」：offset-pathで経路を共有 -->
<div class="breeze-mote-layer">
<span class="breeze-mote" style="offset-path:path('M-20,70 C40,50 80,52 120,68 C160,84 200,82 240,62 C265,50 290,52 300,60'); --dur:14s">
<span class="breeze-mote-y"></span>
</span>
</div>
</div>css
.breeze-stage {
position: relative; height: 180px; border-radius: 8px; overflow: hidden;
background: linear-gradient(160deg, #eafaf4 0%, #d6f0ea 42%, #bfe4ef 100%);
}
/* ちぎれ雲のヴェール：複数radial＋blurで輪郭を溶かす。screenで透明感 */
.breeze-veil {
position: absolute; mix-blend-mode: screen; filter: blur(var(--blur));
background:
radial-gradient(ellipse 60% 72% at 32% 42%, rgba(255,255,255,0.5), transparent 70%),
radial-gradient(ellipse 52% 60% at 66% 56%, rgba(235,250,245,0.4), transparent 72%),
radial-gradient(ellipse 42% 50% at 50% 28%, rgba(255,255,255,0.34), transparent 70%);
animation: breezeVeil var(--dur) ease-in-out infinite;
}
@keyframes breezeVeil {
0% { transform: translate(-44px, -6px); opacity: 0; }
25% { opacity: 0.8; } 75% { opacity: 0.5; }
100% { transform: translate(64px, 16px); opacity: 0; }
}
/* リボンは塗りグラデのためdashで切らず、全体をゆっくり横にたゆたわせる（束ごとに周期差） */
.breeze-ribbon {
transform-box: fill-box; transform-origin: center;
animation: breezeRibbon 14s ease-in-out infinite alternate;
}
@keyframes breezeRibbon { from { transform: translateX(-12px); } to { transform: translateX(12px); } }
/* 微粒子は流線に乗って流れる（offset-path）。小さい粒ほど速い */
.breeze-mote-layer { position: absolute; left: 50%; top: 0; width: 280px; height: 180px; margin-left: -140px; }
.breeze-mote { position: absolute; offset-rotate: 0deg; animation: breezeRide var(--dur) linear infinite; }
.breeze-mote-y {
display: block; border-radius: 9999px;
background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(190,228,239,0.2));
animation: breezeMoteY var(--bdur) ease-in-out infinite alternate;
}
@keyframes breezeRide {
0% { offset-distance: 0%; opacity: 0; }
12% { opacity: var(--op); } 88% { opacity: var(--op); }
100% { offset-distance: 100%; opacity: 0; }
}
@keyframes breezeMoteY { from { transform: scale(0.82); } to { transform: scale(1.16); } }
@media (prefers-reduced-motion: reduce) {
.breeze-veil, .breeze-ribbon, .breeze-mote, .breeze-mote-y { animation: none; }
}よくある質問
「清涼感」と「癒し」の表現はどう使い分ける？
清涼感は「涼しさ・透明感・冷たさ」（水・氷・寒色）が核、癒しは「鎮静・ゆらぎ」（呼吸・浮遊・波紋）が核。寒色＋ガラス/水の質感で温度を下げたいなら清涼感、温度に関わらず緊張をほどきたいなら癒し。夏・飲料・空調系は清涼感、リラクゼーション系は癒しが合う。
なぜ水滴や氷で「涼しさ」が伝わるの？
寒色（青・水色・青緑）は心理的に温度を下げて感じさせ、加えて「透明感」が清潔さ・涼しさの記号になるため。水滴や氷は光を屈折させ、左上に鋭い白いハイライト（スペキュラ）と、向こう側の環境色を映す屈折を持つ。この「レンズらしさ」を再現すると、ただの円より一気に冷たく濡れた質感に見える。
水面の光の網（コースティクス）はなぜできる？
水面の波がレンズのように働き、光を屈折させて底に集めるため。波の山の部分では光が一点に集中して明るい線になり、谷では拡散して暗くなる。だから底には「明線が網目状に走り、間が暗いセル」ができる。実装では正弦波カーブの線をscreen合成で重ね、feTurbulenceで有機的に歪ませると本物に近づく。
AIに清涼感のある演出を頼むコツは？
「涼しさを感じる具体物」で指示する。「冷たいグラスの結露」「プールの底の光の網」「氷のきらめき」「涼風」など。さらに「寒色は透明感を残して」「水滴は左上にハイライト＋屈折のレンズに」「きらめきは間欠で（常時光らせない）」など本ページの理屈を添えると、安っぽくならない出力になる。各カードのAIプロンプトはこの理屈込みで書いてある。
同じカテゴリの他のページ
「疾走感」をWebで表現する - 演出パターンとAIプロンプト | UI Memo
車・スポーツ・配達などのWebサイトで疾走感を演出する具体的な表現テクニック4選。左右に動く・流れる風景・スピードライン・タイヤ回転の実装デモとAIへの指示プロンプト付き。
「癒し」をWebで表現する - ゆらぎ・呼吸・浮遊の演出パターンとAIプロンプト | UI Memo
癒される雰囲気をWebサイトで演出する表現テクニック4選。呼吸する背景・浮遊する光・ゆれる植物・水面の波紋の実装デモとコード、AIへの指示プロンプト付き。ヘルスケア・スパ・瞑想系サイトに。
「温かみ」をWebで表現する - 灯り・木質・陽だまりの演出パターンとAIプロンプト | UI Memo
温かみのある雰囲気をWebサイトで演出する表現テクニック4選。揺れる灯火・木のぬくもり・陽だまり・湯気と湯のみの実装デモとコード、AIへの指示プロンプト付き。カフェ・ぬくもり系ブランドに。
Zenn