草津温泉VANの静かな多言語の顔。
バーホテル「草津温泉VAN」の公式サイトをデザイン・実装・SEOまで一貫してリード。FigmaでのUI設計、Next.jsでの多言語実装（日英）、Lighthouseチューニングを担当した。
機能より先に、宿そのものと同じ「丁寧さ」を設計する。
草津温泉VANは、群馬県・草津温泉にある「BAR and stay HOTEL」。長く続いた老舗がバーホテルとして生まれ変わり、滞在の各場面でバーテンダーが一杯をペアリング、客室には個別のプライベート温泉と湯船を望むアイランド型ミニバーが据えられている。サイトに求められたのは、機能ではなくトーン──宿そのものと地続きの空気感。デザイン・実装・インフラ・SEOまで一貫してリードした。
トーンは機能要件より壊れやすい。
- 「トーンが正しいこと」が成功条件だが、定性的。宿らしさを語る指標はない──感じるか感じないか。
- 多言語をリリース後に足すのは高い。ルーティング・レイアウト・コピーの境界に後からi18nを差し込むコストは、最初から組み込むより明らかに高い。
- SEOはすべてのレイヤーに触れる。マークアップ、画像戦略、パフォーマンス、コンテンツ──仕上げ扱いにすれば全レイヤーで手戻りが発生する。
静けさを設計し、それを高速に動かす。
Figmaでブランドの静かな声を設計
バーホテルはナイトライフ的な華やかさに振れがちだが、VANはその逆──「席に着いた瞬間にだけ劇場的になる」体験。抑制されたタイポグラフィ、ゆとりのある余白、大きな横長写真が主役。動きも抑える。サイトの役割は、現地での体験への期待値を整えることに絞った。
コンテンツより先に、多言語の構造を作る
日英の2言語対応にあたり、i18n構造をコンテンツより先に設計。ルーティングとコピーのインターフェースを整え、翻訳者がレイアウトに触らず並行作業できる状態にした。後続言語の追加コストも下がる。
SEOは仕上げではなく、初日からの制約として
コンテンツ着手前にSemrushでキーワードリサーチ。実装中もLighthouseでチューニング──画像最適化、フォントサブセット、慎重なコンポーネント設計。SEOは「後で対応する仕上げ」ではなく、デザイン判断を形作る制約として扱った。
リリース後、静かに機能し続ける構造。
- 宿のトーンと一致するサイトをリリース。機能数ではなくトーンが成功条件。
- 多言語は構造で対応、後付けではない。後続言語の追加もコンテンツ作業で済み、リファクタにならない。
- SEOがビルドに織り込まれた。パフォーマンスとディスカバラビリティに後追い対応が不要。
雰囲気を、担当者の感覚だけに閉じ込めない。
保守運用では、新しい告知や写真を足すたびに静かなトーンが少しずつ崩れやすい。そこで、写真の大きさ、本文の長さ、余白の取り方、日英コピーの粒度を揃え、後から触ってもVANらしさが崩れにくい形にした。ブランドの静けさは、見た目の好みではなく、更新時にも守れる編集ルールとして扱った。