WORKS
LOGO
POTTO-YU LOGO ぽっと湯ロゴ
- Illustrator
- SVG
- JavaScript
- Animation
OVERVIEW
プロジェクト概要
狙い
架空銭湯「ぽっと湯」の屋号ロゴ。 「ぽ」 の半濁点を湯気の玉として読み替え、 ロゴそのものが温度を持って動くようにした。
技術ポイント
Illustrator で作字したSVGをそのままインライン埋め込み。 「ぽ」の周囲に配置した3つの円を、Catmull-Romスプライン補間 ＋ 正弦波スウェイで 湯気のように立ち上るループに仕立てた。
CRAFT
こだわった点
INTUITIVE WARMTH
ロゴを見た人が、お風呂上がりに体が温まりリラックスできる温泉施設だと 直感的にイメージできること。形だけで説明するのではなく、 動きの質感でその体験を感じ取れることを意識して制作した。
SEAMLESS BREATH
3つの円を1/3周期ずつズラした位相で循環させ、 常に「上が消える／中が昇る／下が生まれる」が同時進行する途切れないループに。 22秒で完全リセットされる。
ORGANIC SWAY
水平方向に周波数比 ≈ 7:3 の2本の正弦波を重ね、機械的な往復に見えない有機的な揺らぎを実装。
CSS blur(22px) で輪郭を溶かし、湯気越しの灯のような質感に。