「温かみ」を表現する
灯り、木のぬくもり、陽だまり、湯気。見ている人の心をほどく「あたたかさの温度感」を伝える表現テクニック。
このページについて
表現の引き出し
🎨 揺れる灯火
📝 表現の語彙
日本語: 灯火、ろうそくの炎、ランプの灯り、揺らめく光
英語: candle flame, warm lamplight, flickering glow
抽象キーワード: comfort, intimacy, hearth
💬 AIへの指示テンプレ
「暗がりに灯るキャンドルの炎を作ってください。炎は涙滴型を4層（外炎の橙→中炎→内炎の黄白→根元の青み）で重ね、揺らぎは『遅い大揺れ（rotate±4度+skew、周期2.3s）＋速い小刻み（scaleY、周期0.7s）』の1/fゆらぎにしてください。炎を中心とした暖色の光だまりを炎の揺れと連動して明滅させ（mix-blend-mode: screen）、火の粉を数個ゆっくり上昇させます。」
🎯 似合うシーン
カフェ/バー・アロマ/キャンドルEC・冬季・記念日/ディナー・瞑想・教会/チャペル
🔧 実装手法
4層涙滴の炎 + 1/fゆらぎ（遅い大揺れ×速い小刻み）+ 連動する光だまり（screen）+ 火の粉
📄 コード例を見る
html
<div class="candle-stage">
<!-- 炎を中心とした暖色の光だまり（炎の揺れと連動・screen合成） -->
<div class="candle-glow"></div>
<svg class="candle-svg" viewBox="0 0 200 180" width="200" height="180">
<defs>
<linearGradient id="candleBody" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f0e4d0" />
<stop offset="100%" stop-color="#d4c4a8" />
</linearGradient>
</defs>
<!-- ろうそく本体（上面に溶けた蝋のくぼみ） -->
<rect x="78" y="112" width="44" height="58" rx="6" fill="url(#candleBody)" />
<ellipse cx="100" cy="116" rx="21" ry="5" fill="#e6d6ba" />
<ellipse cx="100" cy="116" rx="12" ry="3" fill="#c9b48f" />
<!-- 芯（根元に赤熱） -->
<rect x="99" y="100" width="2" height="18" fill="#3a2a1a" />
<circle cx="100" cy="101" r="1.6" fill="#ff6622" />
<!-- 炎：4層の涙滴 + 異なる周期を重ねた1/fゆらぎ -->
<g class="flame-sway"> <!-- 遅い大揺れ（rotate, 2.3s） -->
<g class="flame-drift"> <!-- ゆるい横ぶれ（skewX+translateX, 3.1s） -->
<ellipse cx="100" cy="100" rx="3.5" ry="6" fill="#6a8cff" opacity="0.6" />
<path class="flame-outer" d="<外炎の涙滴>" fill="#ff9a3c" opacity="0.85" />
<!-- 内炎・中炎：速い小刻み（scaleY 0.7s × jitter 0.53s） -->
<g class="flame-flick">
<g class="flame-jitter">
<path d="<中炎の涙滴>" fill="#ffce5a" />
<path d="<内炎の涙滴>" fill="#fff3c0" />
</g>
</g>
</g>
</g>
</svg>
<!-- 火の粉：数個がゆっくり上昇して消える -->
<span class="candle-spark" style="left: calc(50% - 4px); --dur: 6s; --drift: 8px"></span>
</div>css
.candle-stage {
position: relative;
height: 180px;
border-radius: 8px;
overflow: hidden;
/* 炎を中心に暖色が広がる暗がり */
background: radial-gradient(ellipse at 50% 65%, #4a2e1a 0%, #2a1a10 60%, #160d08 100%);
}
.candle-glow {
position: absolute;
left: 50%; top: 24px;
width: 220px; height: 170px;
margin-left: -110px;
border-radius: 9999px;
background: radial-gradient(ellipse,
rgba(255, 140, 66, 0.28) 0%, rgba(255, 140, 66, 0) 70%);
mix-blend-mode: screen;
/* 炎の遅い大揺れ（2.3s）に概ね同期して明滅・伸縮 */
animation: candleGlow 2.3s ease-in-out infinite;
}
@keyframes candleGlow {
0%, 100% { opacity: 0.7; transform: scale(1); }
45% { opacity: 1; transform: scale(1.06); }
70% { opacity: 0.85; transform: scale(1.02); }
}
.candle-svg { position: absolute; left: 50%; bottom: 6px; margin-left: -100px; }
/* 形の1/fゆらぎ①：遅い大揺れ（rotate, 2.3s）。非対称キーフレームで一定に見せない */
.flame-sway {
transform-box: fill-box;
transform-origin: bottom center;
animation: flameSway 2.3s ease-in-out infinite;
}
@keyframes flameSway {
0% { transform: rotate(-4deg); }
22% { transform: rotate(1deg); }
38% { transform: rotate(4deg); }
60% { transform: rotate(-2deg); }
78% { transform: rotate(2deg); }
100% { transform: rotate(-4deg); }
}
/* 形の1/fゆらぎ②：別周期のゆるい横ぶれ（skewX + translateX, 3.1s）。
揺れ①と互いに素な周期にして合成すると、動きが反復して見えない */
.flame-drift {
transform-box: fill-box;
transform-origin: bottom center;
animation: flameDrift 3.1s ease-in-out infinite;
}
@keyframes flameDrift {
0% { transform: skewX(-3deg) translateX(-1px); }
33% { transform: skewX(3deg) translateX(1.5px); }
66% { transform: skewX(-1deg) translateX(-0.5px); }
100% { transform: skewX(-3deg) translateX(-1px); }
}
/* 炎の輪郭をわずかにぼかして硬さを取る */
.flame-outer { filter: blur(0.8px); }
/* 形の1/fゆらぎ③：速い小刻み（scaleY, 0.7s） */
.flame-flick {
transform-box: fill-box;
transform-origin: bottom center;
animation: flameFlick 0.7s ease-in-out infinite;
}
@keyframes flameFlick {
0% { transform: scaleY(0.9); }
35% { transform: scaleY(1.1); }
62% { transform: scaleY(0.96); }
100% { transform: scaleY(0.9); }
}
/* 形の1/fゆらぎ④：さらに速い微小な横ジッター（0.53s） */
.flame-jitter {
transform-box: fill-box;
transform-origin: bottom center;
animation: flameJitter 0.53s ease-in-out infinite;
}
@keyframes flameJitter {
0% { transform: translateX(-1px); }
40% { transform: translateX(1px); }
70% { transform: translateX(0); }
100% { transform: translateX(-1px); }
}
.candle-spark {
position: absolute;
top: 38px;
width: 3px; height: 3px;
border-radius: 9999px;
background: radial-gradient(circle, #ffd9a0 0%, #ff8c42 100%);
opacity: 0;
animation: spark var(--dur) ease-out infinite;
}
@keyframes spark {
0% { transform: translate(0, 0); opacity: 0; }
12% { opacity: 0.9; }
80% { opacity: 0.2; }
100% { transform: translate(var(--drift), -64px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.candle-glow, .flame-sway, .flame-drift, .flame-flick, .flame-jitter, .candle-spark { animation: none; }
}🎨 木のぬくもり
📝 表現の語彙
日本語: 木目、木のぬくもり、ウッド、ナチュラル素材
英語: wood grain, natural timber, warm wood texture
抽象キーワード: craft, organic, homeliness
💬 AIへの指示テンプレ
「木のぬくもりを感じる木目パネルを作ってください。オーク色の縦グラデをベースに、緩やかな曲線の木目線を8〜12本流し、1〜2箇所に節（同心楕円の渦、周囲の木目が迂回）を入れてください（4層構造: 地色→木目→節→ハイライト）。板の上の光のハイライトをゆっくり横に移ろわせ（周期17s）、木目の陰影を連動させてください。陽だまりの光斑とほこりを添えます。」
🎯 似合うシーン
家具/インテリアEC・カフェ・ハンドメイド/クラフト・ベーカリー・北欧系ブランド・住宅
🔧 実装手法
4層の木目パネル（地色→木目線→節→ハイライト）+ 光の移ろいと陰影の連動 + 陽だまり光斑
📄 コード例を見る
tsx
// 節（フシ）の位置。木目線はこの節と交わらず、遠くから緩やかに迂回させる
const knot = { x: 312, y: 96 };
const PUSH = 17; // 迂回の振り幅（節を避ける距離）
const RV = 46; // 迂回する木目の縦方向の範囲（プラトー）
const SIGMA = 34; // 迂回が始まる横方向の広がり（大きいほど遠くから曲がる）
// 木目線：ほぼ一定の間隔・太さ。節の近くだけ緩やかに迂回する曲線を11本
const grains = Array.from({ length: 11 }, (_, i) => {
const j = ((i * 7919) % 100) / 100;
const j2 = ((i * 104729) % 100) / 100;
const y0 = 10 + i * 15.2 + (j - 0.5) * 2;
const amp = 2.5 + j * 2;
const phase = j2 * Math.PI * 2;
const vd = y0 - knot.y;
const dir = vd >= 0 ? 1 : -1;
// 節に近い数本をほぼ同じ振り幅で押し出す（迂回線どうしの間隔を一定に保つ）
const reach = PUSH * Math.exp(-((Math.abs(vd) / RV) ** 6));
const pts = [];
for (let x = 0; x <= 420; x += 7) {
let y = y0 + amp * Math.sin((x / 420) * Math.PI * 1.5 + phase);
const dx = x - knot.x;
// 広いガウス分布で遠方から緩やかに迂回させる
y += dir * reach * Math.exp(-(dx * dx) / (2 * SIGMA * SIGMA));
pts.push(`${x},${y.toFixed(1)}`);
}
return {
d: `M${pts.join(" L")}`,
sw: 1.0 + j * 0.6, // 太さ
op: 0.34 + j2 * 0.12, // 濃さ
};
});
<div className="wood-stage">
<svg viewBox="0 0 420 180" width={420} height={180}>
<defs>
<linearGradient id="woodBase" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#c49a6c" />
<stop offset="50%" stopColor="#b0855a" />
<stop offset="100%" stopColor="#9a7048" />
</linearGradient>
</defs>
<rect width={420} height={180} fill="url(#woodBase)" />
{/* 木目線（節を迂回して流れる） */}
{grains.map((g, i) => (
<path key={i} d={g.d} stroke="#8a6038" strokeWidth={g.sw}
opacity={g.op} fill="none" />
))}
{/* 節（フシ）：同心楕円の渦 + 中心の濃い点 */}
<ellipse cx={312} cy={96} rx={26} ry={16} fill="none" stroke="#8a6038" strokeWidth={1.4} opacity={0.5} />
<ellipse cx={312} cy={96} rx={18} ry={11} fill="none" stroke="#7a5230" strokeWidth={1.2} opacity={0.55} />
<ellipse cx={312} cy={96} rx={10} ry={6} fill="none" stroke="#6e4a28" strokeWidth={1.2} opacity={0.6} />
<ellipse cx={312} cy={96} rx={4} ry={2.4} fill="#5a3c20" />
</svg>
{/* 板の上の光のハイライト：17秒周期で横に移ろう */}
<div className="wood-highlight" />
{/* 色温度のごくわずかな揺れ：23秒周期 */}
<div className="wood-warm" />
</div>css
.wood-stage {
position: relative;
height: 180px;
border-radius: 8px;
overflow: hidden;
background: #b0855a;
}
.wood-svg { position: absolute; left: 50%; top: 0; margin-left: -210px; }
/* 光のハイライト：窓の外の光や時間の移ろい。translateX±10px・17s */
.wood-highlight {
position: absolute;
left: 22%; top: -20%;
width: 56%; height: 140%;
background: radial-gradient(ellipse at center,
rgba(232, 212, 176, 0.45) 0%, rgba(232, 212, 176, 0) 65%);
mix-blend-mode: screen;
animation: woodHighlight 17s ease-in-out infinite;
}
@keyframes woodHighlight {
0%, 100% { transform: translateX(-10px); opacity: 0.85; }
50% { transform: translateX(10px); opacity: 1; }
}
/* 全体の色温度がごくわずかに揺れる（暖色オーバーレイ・23s） */
.wood-warm {
position: absolute;
inset: 0;
background: rgba(200, 120, 50, 0.08);
animation: woodWarm 23s ease-in-out infinite;
}
@keyframes woodWarm {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
/* 陽だまりの光斑・ほこり */
.wood-dust {
position: absolute;
border-radius: 9999px;
background: #fff4d8;
filter: blur(1px);
animation: woodDust 19s ease-in-out infinite alternate;
}
@keyframes woodDust {
from { transform: translate(0, 0); }
to { transform: translate(14px, -10px); }
}
@media (prefers-reduced-motion: reduce) {
.wood-highlight, .wood-warm, .wood-dust { animation: none; }
}🎨 陽だまり
📝 表現の語彙
日本語: 陽だまり、窓辺の光、午後の日差し、ぬくもりの光
英語: sunny spot, window light, afternoon warmth, sunbeam pool
抽象キーワード: serenity, contentment, glow
💬 AIへの指示テンプレ
「窓から差し込む光が床を照らす陽だまりを作ってください。室内は上が壁・下が板張りの床（横の継ぎ目は奥ほど詰め、縦は互い違いにしてパースを出す）。窓の光は床に台形（平行四辺形）に落ち、窓ガラスの桟で2列×3行のガラス面に分割（桟の隙間が影の格子になる）。中央が最も明るく縁へ柔らかく減衰させ、外側に淡いブルームを重ねます。光の中だけ埃がきらめき（普段opacity 0.05→光内で0.7）ゆっくり漂い、光全体は29秒周期でほぼ気づかないほどゆっくり移ろいます。」
🎯 似合うシーン
カフェ・住宅/不動産・福祉/介護・ライフスタイルメディア・午後の時間訴求・読書/文具ブランド
🔧 実装手法
板張りの床（パース）+ 台形に落ちる窓の光 + 窓ガラスの桟による格子分割 + 中央減衰のブルーム + 光内だけの埃
📄 コード例を見る
html
<div class="sunspot-stage">
<svg class="sunspot-svg" viewBox="0 0 420 180" width="420" height="180">
<defs>
<linearGradient id="floor" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#43321f" /><stop offset="100%" stop-color="#5c4630" />
</linearGradient>
<!-- 中央が最も明るく縁へ柔らかく減衰 -->
<radialGradient id="sunPool" cx="50%" cy="45%" r="60%">
<stop offset="0%" stop-color="rgba(255,241,205,0.55)" />
<stop offset="100%" stop-color="rgba(255,234,188,0)" />
</radialGradient>
<linearGradient id="pane" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="rgba(255,246,220,0.95)" />
<stop offset="100%" stop-color="rgba(255,235,196,0.7)" />
</linearGradient>
<filter id="sunBlur"><feGaussianBlur stdDeviation="6" /></filter>
</defs>
<!-- 上が壁、下が板張りの床（横＝奥ほど詰まる / 縦＝互い違いでパース） -->
<rect x="0" y="0" width="420" height="72" fill="#2a1f15" />
<rect x="0" y="72" width="420" height="108" fill="url(#floor)" />
<!-- 床板の継ぎ目（横線・縦線）は配列から描画 -->
<!-- 光全体：29秒周期でほぼ気づかないほどゆっくり移ろう -->
<g class="sun-light-group">
<!-- 床の光だまり（中央が明るく縁へ柔らかく減衰・ブルーム） -->
<polygon points="150,86 246,86 320,172 210,172" fill="url(#sunPool)" filter="url(#sunBlur)" />
<!-- 窓ガラスの桟越しの光：2列×3行（桟の隙間が影の格子になる） -->
<polygon points="..." fill="url(#pane)" opacity="0.85" /> <!-- ×6枚 -->
</g>
</svg>
<!-- 光の中だけ埃がきらめく（普段 opacity 0.05 → 光内で 0.7） -->
<span class="sunspot-dust"></span>
</div>css
.sunspot-stage {
position: relative;
height: 180px;
border-radius: 8px;
overflow: hidden;
/* 室内：上が壁・下が板張りの床 */
background: linear-gradient(180deg,
#241a13 0%, #2e2218 40%, #43321f 40.5%, #5c4630 100%);
}
.sunspot-svg { position: absolute; left: 50%; top: 0; margin-left: -210px; }
/* 光全体がごくゆっくり位置を変える（時間の移ろい・29s） */
.sun-light-group {
transform-box: fill-box;
transform-origin: center;
animation: sunDrift 29s ease-in-out infinite;
}
@keyframes sunDrift {
0%, 100% { transform: translate(-5px, 0); }
50% { transform: translate(7px, 2px); }
}
.sunspot-dust {
position: absolute;
border-radius: 9999px;
background: #fff6e0;
opacity: 0.05;
animation: sunDustDrift var(--dur) ease-in-out infinite;
}
/* 光の中でだけ明るくなる（中盤で 0.7 まで上がる） */
@keyframes sunDustDrift {
0% { transform: translateY(0); opacity: 0.05; }
35% { opacity: 0.7; }
70% { opacity: 0.5; }
100% { transform: translateY(-26px); opacity: 0.05; }
}
@media (prefers-reduced-motion: reduce) {
.sun-light-group, .sunspot-dust { animation: none; }
}🎨 湯気と湯のみ
📝 表現の語彙
日本語: 湯気、湯のみ、温かいお茶、ほっとする一杯
英語: rising steam, warm cup, hot tea, cozy drink
抽象キーワード: relief, hospitality, warmth
💬 AIへの指示テンプレ
「温かいお茶の湯のみを作ってください。湯のみは青磁/織部風の落ち着いた緑で、多段グラデの立体感・ろくろの跡（横の微細線）・口縁の釉だまり・半光沢のソフトハイライト・高台・リムライトで陶器の質感を出してください（半光沢=鋭すぎないハイライト）。湯気は2筋、淡い暖色で上昇・蛇行・拡散を合成しfeTurbulenceで揺らがせます。背景は障子越しの明るい和の空間で。」
🎯 似合うシーン
日本茶/茶葉ブランド・和カフェ・旅館・陶器/クラフトEC・冬季・福祉/介護・おもてなし訴求
🔧 実装手法
青磁風湯のみの立体造形（半光沢・ろくろ跡・釉だまり）+ 控えめ2筋の湯気（feTurbulence）+ 和の空間
📄 コード例を見る
html
<div class="teacup-stage">
<!-- 湯気のゆらぎ用フィルター（1デモ1層まで） -->
<svg width="0" height="0">
<filter id="teaWobble" x="-30%" y="-30%" width="160%" height="160%">
<feTurbulence type="fractalNoise" baseFrequency="0.013 0.04"
numOctaves="2" seed="4" result="noise">
<animate attributeName="baseFrequency" dur="15s"
values="0.013 0.04; 0.017 0.05; 0.013 0.04" repeatCount="indefinite" />
</feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="9" />
</filter>
</svg>
<!-- 控えめ2筋の湯気（上昇・蛇行・拡散の3軸合成・淡い暖色） -->
<div class="tea-steam-group">
<div class="tea-rise t1"><div class="tea-sway tw1"><div class="tea-band tb1"></div></div></div>
<div class="tea-rise t2"><div class="tea-sway tw2"><div class="tea-band tb2"></div></div></div>
</div>
<!-- 湯のみ：青磁/織部風。多段グラデ・ろくろ跡・釉だまり・半光沢で陶器の質感 -->
<svg class="teacup-svg" viewBox="0 0 200 110" width="200" height="110">
<defs>
<linearGradient id="teaBody" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#5e6e5c" />
<stop offset="26%" stop-color="#7a8a78" />
<stop offset="50%" stop-color="#9aab96" />
<stop offset="72%" stop-color="#88998a" />
<stop offset="100%" stop-color="#5e6e5c" />
</linearGradient>
</defs>
<ellipse cx="100" cy="100" rx="40" ry="7" fill="rgba(0,0,0,0.22)" /> <!-- 落ち影 -->
<path d="M62,26 L66,82 Q70,90 84,91 L116,91 Q130,90 134,82 L138,26 Z" fill="url(#teaBody)" />
<!-- 口縁の釉だまり / 暗い内壁（teaInside）/ 口縁より下げた水面（teaSurface）-->
<!-- ろくろの跡（横の微細線） / 半光沢ハイライト / 高台 / リムライト -->
</svg>
</div>css
.teacup-stage {
position: relative;
height: 180px;
border-radius: 8px;
overflow: hidden;
/* 白い湯気が映えるよう、暗い暖色の空間にする */
background: linear-gradient(170deg, #3b2c22 0%, #2a2018 55%, #1c140e 100%);
}
.tea-steam-group {
position: absolute;
inset: 0;
filter: url(#teaWobble);
}
.teacup-svg { position: absolute; left: 50%; bottom: 6px; margin-left: -100px; }
/* 上昇 + 拡散（scaleX拡大 + opacity漸減）。ease-outで立ち上がる */
.tea-rise {
position: absolute;
bottom: 84px;
opacity: 0;
animation: teaRise 6.5s ease-out infinite;
}
.t1 { left: calc(50% - 12px); animation-duration: 6.5s; animation-delay: -2s; }
.t2 { left: calc(50% + 12px); animation-duration: 8s; animation-delay: -5s; }
@keyframes teaRise {
0% { transform: translateY(12px) scaleX(0.7); opacity: 0; }
14% { opacity: 0.7; }
60% { opacity: 0.35; }
100% { transform: translateY(-72px) scaleX(1.7); opacity: 0; }
}
/* 蛇行：筋ごとに別周期 */
.tea-sway { animation: teaSway 4.6s ease-in-out infinite; }
.tw1 { animation-duration: 4.1s; animation-delay: -0.8s; }
.tw2 { animation-duration: 5.3s; animation-delay: -2.4s; }
@keyframes teaSway {
0%, 100% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
}
/* 湯気の本体：純白でなく、ごく淡い暖色 */
.tea-band {
height: 80px;
border-radius: 9999px;
background: linear-gradient(0deg,
rgba(255, 250, 244, 0) 0%, rgba(255, 250, 244, 0.78) 32%,
rgba(255, 250, 244, 0.42) 72%, rgba(255, 250, 244, 0) 100%);
}
.tb1 { width: 9px; filter: blur(4px); }
.tb2 { width: 7px; filter: blur(5px); }
@media (prefers-reduced-motion: reduce) {
.tea-rise, .tea-sway { animation: none; }
}よくある質問
「温かみ」と「癒し」の表現はどう使い分ける？
温かみは「あたたかさの温度感」（灯火・木・陽だまり）、癒しは「鎮静・ゆらぎ」（呼吸・浮遊・波紋）が核。暖色＋素材の質感で温度を感じさせたいなら温かみ、寒色も含めた静けさで緊張をほどきたいなら癒し。カフェやぬくもり系ブランドは両方を組み合わせると深みが出る。
温かみを出す色の選び方は？
暖色（橙・黄・赤茶・オーク）が基本だが、彩度を上げすぎると「派手・安っぽい」になる。深みのある低〜中彩度の暖色（焙煎色・象牙・オーク・テラコッタ）が上質な温かみを作る。寒色を完全排除せず、暖色の中にごく少量の寒色（影や陶器の青磁）を混ぜると奥行きが出る。
炎や灯火が安っぽくならないコツは？
「形のゆらぎ」を1/f（遅い大揺れ＋速い小刻み）にすること。単純な周期的明滅や一定速度の揺れだと作り物に見える。さらに炎を単色にせず、外炎（橙）→内炎（黄白）→芯（青み）の層構造にし、周囲の光を炎と連動して揺らすと本物の灯火に近づく。
AIに温かみのある演出を頼むコツは？
「温度を感じる具体物」で指示する。「灯火がゆらぐ」「木目の質感」「窓の陽だまり」「湯気の立つ湯のみ」など。さらに「暖色は低〜中彩度で上質に」「炎は1/fゆらぎで」など本ページの理屈を添えると、安っぽくならない出力になる。各カードのAIプロンプトはこの理屈込みで書いてある。
Zenn