「温泉宿のサイトなのに、なんだか冷たい感じがする……」
そんなお悩みのお宿様向けに今回は生成AIを活用にして
サイトに本物みたいな湯気をつけていきたいと思います。
AIとの対話と指示「こだわりもしっかり答えてくれます」
AIと何度かやり取りを重ねて、以下のポイントを作り込みました。
- 自然な動き（画面半分だけに湯気）
- 消え方を自然に（真上ではなく右上に消えるように）
- スマホは（機種によってはカクつく判断で、スマホ時は自動で停止）
💻 すると下記の湯気ソースコードが生成、答えてくれました！
それをサイト内容に貼り付けます！
/* 特製：温泉湯気アニメーション
※画像不要・CSSのみで動作
*/
@keyframes steamToTopRight {
0% { transform: translateY(0) translateX(0) scale(1.0); opacity: 0; }
15% { opacity: 0.8; }
100% { transform: translateY(-1300px) translateX(500px) scale(4.0); opacity: 0; }
}
main_visual::before {
content: “” !important;
display: block !important;
position: absolute !important;
bottom: -60px !important;
right: -10% !important;
width: 90% !important;
height: 600px !important;
background: radial-gradient(ellipse at bottom center, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.5) 40%, transparent 85%) !important;
filter: blur(30px) !important;
z-index: 50 !important;
pointer-events: none !important;
animation: steamToTopRight 4.0s infinite linear !important;
animation-delay: 0.5s !important;
}
@media screen and (max-width: 768px) {
#main_visual::before { display: none !important; }
}
今回は多くのユーザー様のいるWordPressの「追加CSS」に貼り付け
更新した所 サイトにも♨️温泉の湯気の温もりが ほのかに感じられる仕上がりになりました。
追加で画像を使わないので、サイトが今以上に重くなる心配もありません。
合わせて当サイトのTOPページも上記のソースを活用して温泉写真／湯気に変更しました。
もし良かったらご覧ください！
おわりに： AIは万能。でも、最後はやっぱり『人』 技術者様にも敬意！
今の時代、AIは単なる効率化の道具ではなく、こちらのこだわりを何度でも形にしてくれる、根気強く優しい「職人」のように感じています。これからもAIを良きパートナーとして、「デジタルだけど温かい」そんなWebサービスのあり方を追求していきたいと思います。
しかし、私がこうして十数年 歩みを止めずにこれたのは、決して自分一人の力ではありません。
今日まで10年以上の年月を活動し続けてこれた背景には、いつも素晴らしい技術者様の存在がありました。システムの構築はもちろん、不具合で動かなくなった時に夜遅くまで並走してくれたのも、他でもない技術者の皆様でした。これまで支えてくださった全ての技術者様に、この場を借りて心から感謝申し上げます。 皆様への深い敬意を胸に、これからも共に歩んでいければ幸いです。
今後とも、何卒よろしくお願いいたします。
今回上記のワードプレス用 湯気のソースは無料で公開しております。
良かったらお使いください。