「雨」を表現する
灰色の空から落ちる雨脚と、水面に生まれては広がる波紋。しっとりとした静かな雨を、写真に頼らず動きで伝える表現。
このページについて
- 「雨の表現」とは：寒色・下降・水面の反応で“雨”を感じさせる表現。降る雨脚（空間）と、落ちた先の波紋（水面）の2面で構成する。
- こんな時に使う：梅雨/雨季キャンペーン・カフェ/しっとり系ブランド・音楽/アンビエント・傘/レイングッズ・写真/映像・落ち着いた読み物。
- 関連タグ：❄️ 清涼感（水の質感・別アプローチ）🌊 海
- AIへの伝え方のコツ：「雨」だけでは曖昧。「被写界深度（近景は明るく長く速く・遠景は淡く短く遅く）」「わずかに傾けた平行な落下」「同心円の波紋を多地点で時間差・楕円で（水面のパース）」のように、奥行き・落下・波紋の物理を具体的に指示する。
表現の引き出し
🎨 降りしきる雨脚
📝 表現の語彙
💬 AIへの指示テンプレ
🎯 似合うシーン
梅雨LP・しっとり系ブランド・音楽/アンビエント・傘/レイングッズ・ヒーロー背景
🔧 実装手法
p5.jsで多数の雨粒線を共通角度で落下。被写界深度（depthで長さ・速度・太さ・明度・本数を階層化）、先端明＋尾の2本描画でモーションブラー、風はsin合成で角度を緩く揺らす。微フェードの寒色ヴェールで尾を残す（reduced-motionで静止）。
🎯 リアルさの核
大気遠近法＋落下の速度階層
📄 コード例を見る
// Petrichor I — rainfall: 大気遠近法＋落下の速度階層（p5.js）
// depth(0=遠景, 1=近景) で長さ・速度・太さ・明度・本数を階層化
function newDrop(i){
const d = Math.pow(jit(i*13+3), 1.4); // 遠景寄りにスキュー＝淡い糸を多めに
return {
x: random(width), y: random(-height,height), depth: d,
len: 9 + d*26, spd: 3.2 + d*9.5, w: 0.5 + d*1.4, a: 40 + d*150,
};
}
function stepRain(){
// 寒色ヴェールで微フェード（尾を残すモーションブラー）
noStroke(); const b=color(params.bg); b.setAlpha(params.fade); fill(b); rect(0,0,width,height);
// 風：sinの合成でゆっくり角度を揺らす（ガスト）
gust = Math.sin(tz*0.7)*0.06 + Math.sin(tz*1.9)*0.025;
const ang = params.angle + gust, dx=Math.sin(ang), dy=Math.cos(ang);
for(let i=0;i<drops.length;i++){
const p=drops[i];
// 淡い尾＋明るい先端の2本描画
stroke(200,214,228, p.a*0.5); strokeWeight(p.w);
line(p.x - dx*p.len*0.4, p.y - dy*p.len*0.4, p.x, p.y);
stroke(222,236,250, p.a); strokeWeight(p.w);
line(p.x, p.y, p.x+dx*p.len, p.y+dy*p.len);
p.x += dx*p.spd; p.y += dy*p.spd; // 落下は重力＝等速で良い唯一の例外
if(p.y > height+p.len){ drops[i]=newDrop(i*7+frameCount%97); }
}
tz += 0.02;
}
// 全文は配置済みファイル参照: public/demos/rain/sketch.js
// iframe で埋め込み: <iframe src="/demos/rain/index.html" height="180" sandbox="allow-scripts">🎨 水面の波紋
📝 表現の語彙
💬 AIへの指示テンプレ
🎯 似合うシーン
梅雨/雨季・瞑想/ウェルネス・音楽/アンビエント・水/ドリンク・静かな読み物
🔧 実装手法
p5.jsで着水イベントを多地点・素数的周期で発生。1イベント＝同心円3本の束、ease-outで拡大減速、寿命で減衰＋細線化、水面パースで楕円（squash）。芯＋ハローの2本描画で縁を発光。reduced-motionで静止。
🎯 リアルさの核
波紋の同心円
📄 コード例を見る
// Petrichor II — ripples: 波紋の同心円（p5.js）
function newRing(x,y,i){
return { x, y, age:0,
max: 70 + ((i*7919)%100)/100*60, // 寿命をジッター
rmax: 26 + ((i*104729)%100)/100*34, // 最終半径をジッター
squash: 0.34 + ((i*1299709)%100)/100*0.12, // 水面パース＝楕円
};
}
function stepRipple(){
drawWater(); // 毎フレーム水面を描き直す（輪はにじまない）
if(frameCount % params.spawn === 0) spawnOne();
if(frameCount % 17 === 0) spawnOne(); // 素数的周期で重ねて干渉させる
if(frameCount % 29 === 0) spawnOne();
for(let i=rings.length-1;i>=0;i--){
const r=rings[i], t=r.age/r.max; if(t>=1){ rings.splice(i,1); continue; }
const rad = easeOut(t)*r.rmax, ry = rad*r.squash; // ease-outで拡大しながら減速
const a = (1-t)*(1-t)*210, sw = Math.max(0.4, 1.7*(1-t)); // 大きくなるほど薄く・細く
for(let k=0;k<3;k++){ // 1イベント=同心円3本の束
const rr=rad-k*4.5; if(rr<=0) continue;
stroke(207,230,239, a*(1-k*0.32)*0.4); strokeWeight(sw*2.2); ellipse(r.x,r.y,rr*2,rr*r.squash*2);
stroke(223,240,247, a*(1-k*0.32)); strokeWeight(sw); ellipse(r.x,r.y,rr*2,rr*r.squash*2);
}
r.age++;
}
}
// 全文は配置済みファイル参照: public/demos/rain-ripples/sketch.js
// iframe で埋め込み: <iframe src="/demos/rain-ripples/index.html" height="180" sandbox="allow-scripts">よくある質問
なぜ雨脚は近くと遠くで描き分けるの？
大気遠近法によるものです。遠いものほど小さく淡く遅く見えるため、近景を長く明るく速く・遠景を短く淡く遅くすると、平面でなく「空間の奥行き」として雨が見えます。
波紋はなぜ真円でなく楕円なの？
水面を斜め上から見るとパースで円が横長の楕円に見えるためです。真円のままだと「真上から見た図」になり、空間に置けません。
重くないですか？
デモはloading="lazy"で初期表示に影響しません。p5本体は/demos/_shared/で配信しJSバンドル非対象です。背景常用時は粒子/着水数を絞る・モバイルで停止する運用が向きます。prefers-reduced-motionでは静止します。
「清涼感」の水と何が違う？
清涼感は結露・水面の光・氷など「静的な水の質感」が核、雨は降る雨脚と打面の波紋という「降水という現象」が核です。同じ水でも切り口が別で、組み合わせると表現の幅が出ます。情緒的な静けさを出したいなら清涼感とも併用できます。
同じカテゴリの他のページ
「海」をWebで表現する - 波・光・泡の演出パターンとAIプロンプト | UI Memo
海らしさをWebサイトで演出する表現テクニック4選。重なる波・海中の光・泡の上昇・水面のきらめきの実装デモとコード、AIへの指示プロンプト付き。写真素材に頼らないCSS/SVGの軽量表現。
「木漏れ日」をWebで表現する - 光斑・透過光・枝影の演出パターンとAIプロンプト | UI Memo
木漏れ日の柔らかい光をWebサイトで演出する表現テクニック4選。揺れる光だまり・逆光の葉・林間の光と塵・壁に揺れる枝影の実装デモとコード、AIへの指示プロンプト付き。
「空」をWebで表現する - 雲・夕焼け・星空の演出パターンとAIプロンプト | UI Memo
空の移ろいをWebサイトで演出する表現テクニック4選。流れる雲・夕焼けの移ろい・星のまたたき・月夜の雲の実装デモとコード、AIへの指示プロンプト付き。写真素材に頼らない軽量なCSS/SVG表現。
Zenn