「空」を表現する
昼の雲、夕焼け、星のまたたき、月夜。一日の空の移ろいを、CSS/SVGの軽量表現で再現するテクニック。
このページについて
表現の引き出し
🎨 流れる雲（昼）
📝 表現の語彙
日本語: 流れる雲、浮かぶ雲、積雲、昼下がりの空
英語: drifting clouds, floating cumulus, daytime sky
抽象キーワード: openness, ease, daydream
💬 AIへの指示テンプレ
「青空に積雲が流れる背景を作ってください。雲は重なる円8〜10個のグループで（円同士は必ず重ねる）、上面は白く明るく（radial-gradient）、底は平らでグレーがかった楕円にしてください（積雲の物理）。奥・中・手前の3層で大気遠近法（遠いほど小さく薄く遅く）を作り、横流れは等速、各雲にはscaleYのゆっくりした呼吸（±2%）を重ねてください。空は天頂が濃く地平線へ淡い縦グラデで。」
🎯 似合うシーン
旅行・航空会社・天気サービス・子供向け・引越し/新生活・アウトドアブランド
🔧 実装手法
重なり円+底面楕円の積雲造形 + 3層の大気遠近法 + 等速横流れ × scaleY呼吸の合成
📄 コード例を見る
tsx
// 積雲は「重なる円のもくもく」+「平らな底」で造形する。
// 本物の積雲は凝結高度で底が揃い、上から太陽に照らされて上面が白く底がグレーになる。
// seedごとに円の数・盛り上がりの位置・サイズをジッターし、同じ形の雲を作らない
function CumulusCloud({ id, seed }) {
const n = 8 + (seed % 3); // 円8〜10個（細かい粒度のもくもく）
const peakT = 0.3 + (((seed * 104729) % 100) / 100) * 0.4; // 盛り上がりの位置 0.3〜0.7
const puffs = Array.from({ length: n }, (_, p) => {
const j1 = (((seed * 13 + p) * 7919) % 100) / 100;
const j2 = (((seed * 13 + p) * 104729) % 100) / 100;
const t = p / (n - 1);
// 山形のドーム: peakT の位置が最も盛り上がり、端へ小さくなる
const dome = 1 - Math.abs(t - peakT) / Math.max(peakT, 1 - peakT);
const r = 8 + dome * 11 + j1 * 2;
return {
// 横ジッターは隣の円の半径より小さく抑え、円同士が必ず重なるようにする
cx: 16 + t * 98 + (j2 - 0.5) * 5,
cy: 54 - r * (0.82 + j1 * 0.2), // 底を揃えつつ上面に凹凸
r,
};
});
return (
<svg viewBox="0 0 130 64" width="100%" height="100%">
<defs>
{/* 上面の円群: 上が白く明るいradial（太陽に照らされる面） */}
<radialGradient id={`${id}-puff`} cx="0.5" cy="0.3" r="0.75">
<stop offset="0%" stopColor="#ffffff" />
<stop offset="60%" stopColor="#f4f9fd" />
<stop offset="100%" stopColor="#e2eef8" />
</radialGradient>
{/* 底辺で水平にクリップ = 凝結高度の平らな底 */}
<clipPath id={`${id}-flat`}>
<rect x="0" y="0" width="130" height="57" />
</clipPath>
{/* 影の境界をぼかす（底はclipPathで平らなまま、上側の境界だけ溶ける） */}
<filter id={`${id}-soft`} x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="2.5" />
</filter>
</defs>
<g clipPath={`url(#${id}-flat)`}>
{/* もくもくの上面（ジッター生成した円8〜10個） */}
{puffs.map((p, i) => (
<circle key={i} cx={p.cx} cy={p.cy} r={p.r} fill={`url(#${id}-puff)`} />
))}
{/* 盛り上がりの右下（太陽の逆側）のわずかな陰影。境界はぼかす */}
<ellipse cx={16 + peakT * 98 + 16} cy="50" rx="28" ry="8"
fill="#b8cadc" opacity="0.5" filter={`url(#${id}-soft)`} />
{/* グレーがかった平らな底面。境界はぼかす */}
<ellipse cx="64" cy="53" rx="50" ry="7"
fill="#c8d8e6" filter={`url(#${id}-soft)`} />
</g>
</svg>
);
}
// 大気遠近法: 遠い雲ほど小さく・薄く・遅い
const clouds = [
{ top: 12, scale: 0.5, opacity: 0.6, driftDur: 43, breatheDur: 17, blur: 0.6 }, // 奥
{ top: 30, scale: 0.42, opacity: 0.55, driftDur: 47, breatheDur: 13, blur: 0.6 }, // 奥
{ top: 22, scale: 0.75, opacity: 0.85, driftDur: 29, breatheDur: 11, blur: 0.4 }, // 中
{ top: 48, scale: 0.68, opacity: 0.8, driftDur: 31, breatheDur: 17, blur: 0.4 }, // 中
{ top: 55, scale: 1.05, opacity: 1, driftDur: 19, breatheDur: 13, blur: 0 }, // 手前
{ top: 5, scale: 0.95, opacity: 0.95, driftDur: 23, breatheDur: 11, blur: 0 }, // 手前
];
<div className="daysky-stage">
{/* 太陽の光のにじみ（静止） */}
<div className="daysky-bloom" />
{clouds.map((c, i) => (
// 横流れ（等速=風による等速運動で物理的に正しい例外）× scaleY呼吸 を親子分離
<div key={i} className="cloud-drift"
style={{ top: `${c.top}%`, width: 130 * c.scale, height: 64 * c.scale,
opacity: c.opacity, filter: c.blur ? `blur(${c.blur}px)` : undefined,
animationDuration: `${c.driftDur}s` }}>
<div className="cloud-breathe" style={{ animationDuration: `${c.breatheDur}s` }}>
<CumulusCloud id={`cl${i}`} seed={i + 1} />
</div>
</div>
))}
</div>css
.daysky-stage {
position: relative;
height: 180px;
border-radius: 8px;
overflow: hidden;
/* 空の光学: 天頂が濃く、地平線へ淡くなる青 */
background: linear-gradient(180deg, #4a9fd8 0%, #7cc0ea 55%, #b8def5 100%);
}
/* 右上の太陽の光のにじみ（静止、opacity 0.35） */
.daysky-bloom {
position: absolute;
top: -60px; right: -40px;
width: 220px; height: 190px;
background: radial-gradient(closest-side, rgba(255,255,255,0.85), transparent 70%);
opacity: 0.35;
}
/* 横流れ: 画面外→画面外のループ。雲の移動は風による等速運動なのでlinearが正しい */
.cloud-drift {
position: absolute;
left: -34%;
animation: cloudDrift 30s linear infinite;
}
@keyframes cloudDrift {
from { left: -34%; }
to { left: 104%; }
}
/* もくもく感の気配: scaleY 0.98〜1.02 のゆっくりした呼吸（周期11〜17s） */
.cloud-breathe {
width: 100%; height: 100%;
animation: cloudBreathe 13s ease-in-out infinite alternate;
}
@keyframes cloudBreathe {
from { transform: scaleY(0.98); }
to { transform: scaleY(1.02); }
}🎨 夕焼けの移ろい（夕）
📝 表現の語彙
日本語: 夕焼け、マジックアワー、黄昏、茜空
英語: sunset glow, golden hour, twilight gradient
抽象キーワード: nostalgia, closure, drama
💬 AIへの指示テンプレ
「夕焼けの空が刻々と移ろう背景を作ってください。重要: 単一グラデの色変化ではなく、地平線（濃橙・周期13s）・中層（桃紫・19s）・上層（藍・29s）の3帯を別レイヤーで明滅させてください。太陽は多段radialの円に内暈と外暈の2層のにじみを重ね、夕雲は上縁にだけ太陽色のリムライトを入れてください（逆光の雲は縁だけ光る）。」
🎯 似合うシーン
旅行・ウェディング・バー/ディナー営業・回想/メモリアル系・エンディング演出・写真館
🔧 実装手法
3帯別周期の色移ろい + 多段radial太陽と2層の暈 + 逆光雲のリムライト
📄 コード例を見る
tsx
// 夕焼けは「単一グラデの色変化」ではなく、高度ごとの3帯を別周期で移ろわせる。
// 地平線=濃橙(速い)、中層=桃紫(中間)、上層=藍(ゆっくり)
<div className="sunset-stage">
{/* 帯レイヤー1: 地平線の濃橙（周期13s・変化が速く劇的） */}
<div className="sunset-band sunset-band-low" />
{/* 帯レイヤー2: 中層の桃紫（周期19s） */}
<div className="sunset-band sunset-band-mid" />
{/* 帯レイヤー3: 上層の藍（周期29s・ゆっくり暗くなる） */}
<div className="sunset-band sunset-band-high" />
{/* 太陽: 多段radialの本体 + 内暈・外暈の2層のにじみ */}
<div className="sunset-sun-wrap">
<div className="sun-halo sun-halo-outer" />
<div className="sun-halo sun-halo-inner" />
<div className="sun-core" />
</div>
{/* 逆光の夕雲: 上縁にだけ太陽色のリムライト（縁だけ光る） */}
<svg className="sunset-clouds" viewBox="0 0 400 180" preserveAspectRatio="none">
<path d="M52,108 Q110,100 170,104 Q230,108 268,104 Q240,114 175,116 Q105,118 52,108 Z"
fill="#8a4a5a" opacity="0.85" />
<path d="M52,108 Q110,100 170,104 Q230,108 268,104"
stroke="#ffb347" strokeWidth="1.3" fill="none" opacity="0.8" />
{/* ...帯状の夕雲をあと1〜2本 */}
</svg>
{/* 鳥のシルエット（「く」の字、43sでゆっくり横切る） */}
<div className="sunset-bird">
<svg viewBox="0 0 16 8" width="16" height="8">
<path d="M1,6 Q4.5,1 8,5 Q11.5,1 15,6"
stroke="#3a2b40" strokeWidth="1.2" fill="none" strokeLinecap="round" />
</svg>
</div>
</div>css
.sunset-stage {
position: relative;
height: 180px;
border-radius: 8px;
overflow: hidden;
/* ベース: 上層の藍→中層の桃紫→地平線の橙 */
background: linear-gradient(180deg,
#2d3561 0%, #7b4a7e 35%, #c25b6a 60%, #e8814f 80%, #f5a623 100%);
}
.sunset-band { position: absolute; left: 0; right: 0; }
/* 帯1: 地平線の濃橙。keyframesの中間点を不均等に置き「刻々と変わる」感を出す */
.sunset-band-low {
bottom: 0; height: 40%;
background: radial-gradient(ellipse 70% 100% at 30% 100%, #ff8c42, transparent 75%);
animation: bandLow 13s ease-in-out infinite;
}
@keyframes bandLow {
0%, 100% { opacity: 0.25; }
35% { opacity: 0.7; }
55% { opacity: 0.45; }
78% { opacity: 0.75; }
}
/* 帯2: 中層の桃紫（overlay合成） */
.sunset-band-mid {
top: 28%; height: 38%;
background: linear-gradient(180deg, transparent, #d96a8a 50%, transparent);
mix-blend-mode: overlay;
animation: bandMid 19s ease-in-out infinite;
}
@keyframes bandMid {
0%, 100% { opacity: 0.15; }
42% { opacity: 0.45; }
68% { opacity: 0.25; }
}
/* 帯3: 上層の藍。ゆっくり暗くなる */
.sunset-band-high {
top: 0; height: 34%;
background: linear-gradient(180deg, #1f2850, transparent);
animation: bandHigh 29s ease-in-out infinite;
}
@keyframes bandHigh {
0%, 100% { opacity: 0.15; }
55% { opacity: 0.35; }
}
/* 太陽: 多段radial + ゆっくり明滅（±10%、7s）+ 61sの超長周期でわずかに沈む */
.sunset-sun-wrap {
position: absolute;
left: 27%; top: 56%;
width: 100px; height: 100px;
animation: sunSink 61s ease-in-out infinite alternate;
}
@keyframes sunSink { from { transform: translateY(0); } to { transform: translateY(3px); } }
.sun-core {
position: absolute; left: 33px; top: 33px;
width: 34px; height: 34px;
border-radius: 50%;
background: radial-gradient(circle at 50% 45%, #fff3d6 0%, #ffb347 60%, #ff8c42 100%);
animation: sunGlow 7s ease-in-out infinite alternate;
}
@keyframes sunGlow { from { opacity: 0.9; } to { opacity: 1; } }
/* 内暈（1.8倍径・opacity 0.4）と外暈（3倍径・opacity 0.15）の2層のにじみ */
.sun-halo { position: absolute; border-radius: 50%; }
.sun-halo-inner {
left: 19px; top: 19px; width: 62px; height: 62px;
background: radial-gradient(closest-side, rgba(255,179,71,0.4), transparent);
}
.sun-halo-outer {
left: 0; top: 0; width: 100px; height: 100px;
background: radial-gradient(closest-side, rgba(255,140,66,0.15), transparent);
}
/* 鳥: 右から左へ43sでゆっくり横切る（等速=滑空） */
.sunset-bird {
position: absolute; top: 30%; left: 105%;
animation: birdCross 43s linear infinite;
}
@keyframes birdCross {
from { left: 105%; }
to { left: -6%; }
}🎨 星のまたたき（夜）
📝 表現の語彙
日本語: 星空、星のまたたき、満天の星、天の川
英語: starry sky, twinkling stars, stellar scintillation, milky way
抽象キーワード: wonder, vastness, dream
💬 AIへの指示テンプレ
「夜空に星がまたたく背景を作ってください。重要: 星のサイズは等級分布にします — 大きく明るい星2〜3個（にじみ+十字の光条付き）、中程度8〜10個、1px前後の微光星25個以上。またたきは星ごとに独立した周期・delayで、同期を作らないでください。斜めに天の川の淡い帯を置き、流れ星は14秒に1回だけ走らせます（常時流すと安っぽくなります）。下端に山のシルエットを。」
🎯 似合うシーン
プラネタリウム・寝具/睡眠系アプリ・キャンプ/グランピング・ナイトイベント・占い/スピリチュアル
🔧 実装手法
等級分布のピラミッド配分 + 光条付き1等星の多層造形 + 全星独立周期のまたたき + 間欠の流れ星
📄 コード例を見る
tsx
// 夜空らしさの本体は「等級分布」= 明るい星は少なく、暗い星は圧倒的に多い。
// 1等星2〜3個（光条付き）/ 中星9個 / 微光星30個 のピラミッド型配分にする
const midStars = Array.from({ length: 9 }, (_, i) => {
const j1 = ((i * 7919) % 100) / 100;
const j2 = ((i * 104729) % 100) / 100;
return {
left: 6 + ((i * 9973) % 88), // %
top: 8 + ((i * 6271) % 55), // %（山並みの上に収める）
size: 2 + j1 * 1.2, // 2〜3.2px
dur: 1.7 + j2 * 3.6, // またたき 1.7〜5.3s
delay: -(j1 * 5),
};
});
const microStars = Array.from({ length: 30 }, (_, i) => {
const j1 = ((i * 7919) % 100) / 100;
const j2 = ((i * 104729) % 100) / 100;
return {
left: 2 + ((i * 6271) % 96),
top: 3 + ((i * 9973) % 64),
size: 1 + j1 * 0.5, // 1〜1.5px
peak: 0.35 + j2 * 0.4,
dur: 2.1 + j1 * 4.6, // 周期・delayを完全にジッター
delay: -(j2 * 6),
};
});
<div className="night-stage">
{/* 天の川: 斜めの淡い光の帯（37sでゆっくり明滅）+ 内部に微光星を高密度に */}
<div className="milky-way" />
{/* 1等星: 明点+にじみ2層+十字の光条。またたきはopacity±25% + scale 0.92〜1.08 */}
{brightStars.map((s, i) => (
<div key={i} className="star1" style={{ left: `${s.left}%`, top: `${s.top}%`,
width: s.size, height: s.size,
animationDuration: `${s.dur}s`, animationDelay: `${s.delay}s` }}>
<div className="star1-glow" />
<div className="star1-ray star1-ray-v" />
<div className="star1-ray star1-ray-h" />
<div className="star1-core" />
</div>
))}
{/* 中星・微光星（各starごとに独立した周期・delay。同期を絶対に作らない） */}
{midStars.map(/* ... */)}
{microStars.map(/* ... */)}
{/* 流れ星: 0.6sで走り、14sに1回の長い間欠（常時流すと安っぽい） */}
<div className="shooting-star" />
{/* 地上の気配: 山並みの低いシルエット */}
<svg className="night-mountains" viewBox="0 0 400 40" preserveAspectRatio="none">
<path d="M0,40 L0,26 Q60,10 120,22 Q180,32 240,16 Q300,4 348,20 Q380,28 400,24 L400,40 Z"
fill="#05070f" />
</svg>
</div>css
.night-stage {
position: relative;
height: 180px;
border-radius: 8px;
overflow: hidden;
/* 天頂が最も暗い夜空 */
background: linear-gradient(180deg, #0a0e23 0%, #141a38 60%, #1f2548 100%);
}
/* 天の川: 斜めの淡い帯。帯自体がごくゆっくり明滅（±30%、37s） */
.milky-way {
position: absolute;
left: -10%; top: 30%;
width: 130%; height: 56px;
background: linear-gradient(180deg, transparent, rgba(200,212,240,0.08) 35%,
rgba(200,212,240,0.08) 65%, transparent);
transform: rotate(-16deg);
animation: milkyPulse 37s ease-in-out infinite alternate;
}
@keyframes milkyPulse { from { opacity: 0.7; } to { opacity: 1.3; } }
/* 1等星: 全体がまたたく（opacity±25% + scale）。周期2.3〜3.7s */
.star1 {
position: absolute;
animation: star1Twinkle 3s ease-in-out infinite;
}
@keyframes star1Twinkle {
0%, 100% { opacity: 0.75; transform: scale(0.92); }
50% { opacity: 1; transform: scale(1.08); }
}
/* にじみ（radial 2層分を1つのgradientで） */
.star1-glow {
position: absolute; left: -9px; top: -9px; right: -9px; bottom: -9px;
border-radius: 50%;
background: radial-gradient(closest-side,
rgba(255,255,255,0.5), rgba(220,230,255,0.18) 50%, transparent);
}
/* 十字の光条（縦横の細線、opacity 0.5） */
.star1-ray { position: absolute; background: linear-gradient(transparent, rgba(255,255,255,0.5), transparent); }
.star1-ray-v { left: 50%; top: -11px; bottom: -11px; width: 1px; }
.star1-ray-h {
top: 50%; left: -11px; right: -11px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
}
.star1-core { position: absolute; inset: 0; border-radius: 50%; background: #ffffff; }
/* 中星: 2〜3pxの点+小さなにじみ（box-shadow） */
.star-mid {
position: absolute;
border-radius: 50%;
background: #e8edff;
box-shadow: 0 0 4px 1px rgba(220,230,255,0.45);
animation: starTwinkle 3s ease-in-out infinite;
}
/* 微光星: opacityのみ±40% */
.star-micro {
position: absolute;
border-radius: 50%;
background: #c8d4f0;
animation: microTwinkle 4s ease-in-out infinite;
}
@keyframes starTwinkle {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
@keyframes microTwinkle {
0%, 100% { opacity: calc(var(--peak) * 0.6); }
50% { opacity: var(--peak); }
}
/* 流れ星: 14s周期のうち0.6sだけ走る（0.6/14 ≒ 4.3%）。
移動方向は左下(-110px, 69px)。尾はその反対（右上）へ伸びるので
筋の角度は移動ベクトルに合わせて rotate(-32deg) にする */
.shooting-star {
position: absolute;
top: 16%; left: 72%;
width: 70px; height: 1.5px;
border-radius: 1px;
/* 左端=頭（明るい）、右端=尾（透明） */
background: linear-gradient(90deg, rgba(255,255,255,0.95), transparent);
opacity: 0;
animation: shoot 14s linear infinite;
}
@keyframes shoot {
0% { opacity: 0; transform: translate(0, 0) rotate(-32deg); }
1.5% { opacity: 0.9; }
4.3% { opacity: 0; transform: translate(-110px, 69px) rotate(-32deg); }
100% { opacity: 0; transform: translate(-110px, 69px) rotate(-32deg); }
}🎨 月夜の雲（月夜）
📝 表現の語彙
日本語: 月夜、月明かり、朧月、雲間の月
英語: moonlit night, moon halo, clouds crossing the moon
抽象キーワード: mystery, quietude, romance
💬 AIへの指示テンプレ
「満月の前を夜雲が横切る背景を作ってください。月は多段radialに暗斑2〜3個（クレーターの海）と内外2層の暈で造形します。重要: 雲が月にかかるタイミングで、月をぼかして暗くし（blur 0→2px）、代わりに雲自体をぼんやり光らせてください（光の散乱）。雲が抜けると月は再びシャープに。星は月の周辺を避けて微光星のみ（月明かりで星は見えにくい）。」
🎯 似合うシーン
和風旅館・バー/ナイトラウンジ・日本酒/月見キャンペーン・睡眠系・ロマンチック演出・中秋イベント
🔧 実装手法
多段radial+暗斑+2層暈の月 + 雲通過と連動する「月のぼけ⇄雲の発光」シーソー + 月周辺を避けた星配置
📄 コード例を見る
tsx
// 月夜の本物感 = 「月のシャープさ」と「雲の発光」のシーソー。
// 雲が月にかかると月はぼやけて暗くなり、代わりに雲全体が光の散乱でぼんやり光る
<div className="moonnight-stage">
{/* 微光星は月の周辺を避けて配置（月明かりで星は見えにくい、という光学） */}
{moonStars.map(/* 左端・下端寄りの10個 */)}
<div className="moon-set">
{/* 暈2層: 内暈（1.6倍径）+ 外暈（2.8倍径）。縁が23sでゆっくり明滅=大気のゆらぎ */}
<div className="moon-halo moon-halo-outer" />
<div className="moon-halo moon-halo-inner" />
{/* 雲の通過と同期して blur 0→2px / opacity 1→0.75 */}
<div className="moon-dim">
<div className="moon-body">
{/* 海（クレーターの暗部）2〜3個。これだけで「月」になる */}
<div className="moon-mare moon-mare-a" />
<div className="moon-mare moon-mare-b" />
<div className="moon-mare moon-mare-c" />
</div>
</div>
</div>
{/* 夜雲: 横流れは等速（風）。月の前を通過するタイミングで雲自体が明るくなる */}
<div className="nightcloud-drift nc1">
<svg viewBox="0 0 220 56" width="100%" height="100%">
<path className="nc-body nc-glow"
d="M12,38 Q40,22 84,26 Q130,14 168,26 Q204,30 210,40 Q170,48 110,46 Q50,48 12,38 Z" />
{/* 月側の縁に月色のリムライト */}
<path d="M12,38 Q40,22 84,26 Q130,14 168,26 Q204,30 210,40"
stroke="#d6c896" strokeWidth="1.2" fill="none" opacity="0.4" />
</svg>
</div>
<div className="nightcloud-drift nc2">{/* 2本目（47s・グロー同期なし） */}</div>
</div>css
.moonnight-stage {
position: relative;
height: 180px;
border-radius: 8px;
overflow: hidden;
/* 月明かりでわずかに青い夜空 */
background: linear-gradient(180deg, #11162e 0%, #1a2240 50%, #232c52 100%);
}
.moon-set { position: absolute; left: 58%; top: 18%; width: 56px; height: 56px; }
/* 月本体: 多段radial（中心が明るく縁へ象牙色） */
.moon-body {
width: 56px; height: 56px;
border-radius: 50%;
background: radial-gradient(circle at 38% 35%,
#fffbe8 0%, #f5edcc 55%, #e8dcb0 80%, #d6c896 100%);
}
/* 海（暗斑）: 淡い暗色+輪郭ぼけ */
.moon-mare {
position: absolute;
border-radius: 50%;
background: #c9bb8e;
opacity: 0.5;
filter: blur(1.5px);
}
.moon-mare-a { left: 12px; top: 14px; width: 14px; height: 11px; }
.moon-mare-b { left: 30px; top: 24px; width: 10px; height: 9px; }
.moon-mare-c { left: 18px; top: 34px; width: 8px; height: 6px; }
/* 暈2層。外暈の縁は23sでゆっくり明滅（大気のゆらぎ） */
.moon-halo { position: absolute; border-radius: 50%; }
.moon-halo-inner {
left: -17px; top: -17px; width: 90px; height: 90px;
background: radial-gradient(closest-side, rgba(245,237,204,0.3), transparent);
}
.moon-halo-outer {
left: -50px; top: -50px; width: 156px; height: 156px;
background: radial-gradient(closest-side, rgba(245,237,204,0.12), transparent);
animation: haloShimmer 23s ease-in-out infinite alternate;
}
@keyframes haloShimmer { from { opacity: 0.8; } to { opacity: 1.2; } }
/* 月のぼけ: 雲1（31s）の通過タイミング（左58%を通るのは周期の約30%地点）に合わせる */
.moon-dim { animation: moonDim 31s ease-in-out infinite; }
@keyframes moonDim {
0%, 22% { filter: blur(0); opacity: 1; }
30%, 40% { filter: blur(2px); opacity: 0.75; }
50%, 100% { filter: blur(0); opacity: 1; }
}
/* 夜雲の横流れ（等速）。31s / 47s の素数的周期差 */
.nightcloud-drift { position: absolute; animation: ncDrift 31s linear infinite; }
.nc1 { top: 22%; width: 160px; height: 40px; animation-duration: 31s; }
.nc2 { top: 52%; width: 130px; height: 34px; animation-duration: 47s; opacity: 0.8; }
@keyframes ncDrift {
from { left: 105%; }
to { left: -45%; }
}
.nc-body { fill: #2e3a5c; }
/* 雲の発光: 月にかかる30〜40%地点で雲色が月明かり色 #8a93b8 へ（光の散乱） */
.nc-glow { animation: ncGlow 31s ease-in-out infinite; }
@keyframes ncGlow {
0%, 22% { fill: #2e3a5c; }
30%, 40% { fill: #8a93b8; }
50%, 100% { fill: #2e3a5c; }
}よくある質問
空の背景はどの時間帯を選ぶべき？
ブランドのトーンに合わせる。昼の青空は開放感・誠実さ（旅行・教育）、夕焼けは情緒・締めくくり（ウェディング・メモリアル）、星空・月夜は静寂・特別感（ナイトサービス・睡眠系）。1つのLP内でスクロールに応じて昼→夜へ遷移させる演出も効果的。
雲をリアルに見せる一番のコツは？
「底を平らに、上面を明るく」の2点。積雲は凝結高度で底が揃い、太陽に上から照らされるため上面が白く底がグレーになる。この光学を守るだけで、単なる白いもこもこが「雲」になる。逆にどちらも無視した楕円の集合は途端に作り物に見える。
星空が「プラネタリウムの天井」っぽく安っぽくなってしまう
原因はほぼ「星のサイズが均等」なこと。本物の星空は明るい星が数個、暗い星が圧倒的多数というピラミッド型の等級分布を持つ。1等星クラス2〜3個・中星10個・1px微光星30個のような配分にし、またたきの周期も星ごとに完全にバラすと自然になる。
AIに空の演出を頼むコツは？
時間帯＋光学の理屈をセットで指示する。「夕焼けは地平線・中層・上層の3帯を別々の周期で移ろわせて」「星は等級分布で、明るい星は少なく」「雲は底を平らに上面を明るく」など。本ページのAIプロンプトテンプレはこの理屈込みで書いてあるので、そのままコピーして使える。
Zenn