POTTO-YU LP 架空銭湯LP｜ぽっと湯
- HTML
- CSS
- JavaScript
- Figma
- Responsive
- Editorial Design
OVERVIEW
プロジェクト概要
課題
架空の下町銭湯「ぽっと湯」を題材に、ブランディングと導線を一枚の LP に落とし込む。 テンプレ的な銭湯サイトではなく、雑誌の特集記事のように読ませる Webとして成立させることが課題だった。
目的
「日常から少し離れて、湯気のなかでほぐれる時間」というコンセプトを、 和紙オフホワイト × 墨 × 朱 × 紺のトーンと、縦書き・漢数字・ヘアライン罫といった編集要素で スクロール体験ごと設計する。
PROCESS
制作プロセス
-
PLAN
銭湯「ぽっと湯」の世界観・ターゲット・必要な10セクションを定義。
-
DESIGN
和紙×墨×朱の配色と、明朝＋Cormorant Garamondで編集寄りのトーンを設計。
-
BUILD
CSS Grid・縦書き・clamp()流体タイポでマークアップを実装。
-
MOTION
IntersectionObserverでフェードインと固定ヘッダーの表示制御を実装。
-
DELIVER
880px以下のレスポンシブと仕様書(.md)まで含めて完成。
GALLERY
成果物ギャラリー
RETROSPECTIVE
振り返り・工夫した点
EDITORIAL TONE
色とタイポだけで世界観を立たせるため、影は一切使わず、1pxヘアラインと点線、紙のような微ノイズだけで余韻を作った。 アラビア数字も含めて全文を和風セリフで組み、章番号や「壱・弐・参・肆」など漢数字を差し込むことで雑誌の手触りに寄せている。
TOKENIZED CSS
色・書体・余白をすべて :root のCSS変数に集約し、14ブロックに分割した style.css を仕様書(.md)とセットで管理。
「新セクション追加」「色変更」が単一参照源で完結する保守性を担保した。