MORI
森の旅館のための静謐なマルチページプラットフォーム — 三室、一人の料理人、古代の火山性温泉、そして箱根の森と同じ呼吸で息づくデジタルプレゼンス。
森は箱根の深い森に佇む三室の旅館。火山性温泉、一人の懐石料理人、そして全室を囲む樹齢80年の檜。必要だったのは、物件そのものと同じ静かな意図を伝えるウェブサイト — 予約エンジンではなく、訪問者が到着する前に足を止めるデジタルの敷居。
The
Challenge
三室の旅館のマーケティングは、ホテルチェーンのマーケティングとは正反対です。42℃の温泉の温もり、檜の香り、玄武岩に積もる雪の静けさ — 触覚的で感覚的な体験をピクセルに変換する必要がありました。プロジェクトを定義した3つの制約：
物件の価値はアメニティではなく雰囲気にある — インフィニティプール、スパ、ルームサービスはない。サイトは機能リストではなく、抑制によって排他性を伝えなければならない
バイリンガルコンテンツ（英語・日本語）で文化的に適切なトーン — 日本語のお客様には格式高くも親密に、海外のお客様には情緒的かつ情報豊かに
季節のローテーションが体験の核心 — 献立、庭園、温泉の儀式はすべて変わる — 静的なパンフレットではなく、その瞬間を映し出す生きたサイトが必要
The
Solution
物件の五つの柱 — 客室、食事、体験、哲学、ギャラリー — を中心に構成したマルチページのNext.js 16アプリケーションを構築しました。デザイン言語は日本のエディトリアルタイポグラフィと侘び寂びの原則から — 温かなニュートラルカラー、贅沢な余白、忍耐に報いるスローリビールアニメーション。
漆黒に近い#0C0A09のキャンバスに、経年変化した檜と灯籠の灯りを想起させる温かなゴールド#C4976Aのアクセント。見出しにはディスプレイセリフ体、本文には軽量のサンセリフ体。フルブリードの写真にグラデーションオーバーレイで奥行きを出しつつ、画像と競合しない。すべてのトランジションは遅く、意図的 — 最低700ms。
Next.js 16、React 19、Tailwind CSS v4、そしてビューポートトリガーのリビールにFramer Motion。客室、食事、体験、哲学、ギャラリー、お問い合わせの6つの専用ページ — それぞれが独立したエディトリアルスプレッド。バイリンガルコンテキストプロバイダーがページリロードなしで英語と日本語を切り替え。Cloudflare Pagesにデプロイしグローバルエッジパフォーマンスを実現。
Inside
the Build
三つの言葉がFramer Motionのリビールで段階的に現れる。夕暮れの旅館のフルビューポート写真の上に。ナビゲーションオーバーレイもなく、予約ウィジェットもない — 障子越しの温かな灯籠の灯りと、一本のゴールドアクセントラインだけ。ヒーローが体験全体のペースを設定する：遅く、意図的で、大気的。
6つの指標を水平スタッツバーに凝縮 — 3室、42℃火山性温泉、4km調達半径、1人の料理人、森（Mori）、2泊以上。各スタッツにはサブラベル付き。シネマティックなヒーローとエディトリアルギャラリーの間のトランジションとして機能。
MORI体験の三つの柱 — 檜風呂、懐石料理、檜スイート — を紹介する非対称エディトリアルグリッド。各カードはフルブリード写真にダークグラデーションオーバーレイとホバーリビールCTAを配置。創設建築家の引用がコンポジションを支える。
雪景色の露天風呂写真と今季の提供内容 — 柚子入り温泉、山のきのこ懐石、氷縁の苔庭 — を組み合わせたスプリットパネルモジュール。コンテンツはカレンダーに合わせて回転し、サイトが常に物件の「今」を反映する。
The
Results
樹齢80年の檜の梁と同じ精度で構築されたプラットフォーム。すべての指標が、森がゲスト体験の隅々に注ぐ心遣いを反映しています。
Final
Reflection
森は一つの原則でデザインされた：ウェブサイトは物件と同じ呼吸で息をすべきだ。ホスピタリティWebデザインのあらゆる慣習を取り除いた — ヒーローカルーセルなし、星評価なし、ファーストビューの空室カレンダーなし。代わりに、旅館が宿泊客に求めるのと同じ忍耐に報いるエディトリアル体験を構築した。ヒーローに三つの言葉。一人の料理人。一つの温泉。抑制こそが贅沢。Next.js 16とReact 19が300ms以下のページロードを実現し、Framer Motionのビューポートトリガーリビールが物件を歩くような発見の感覚を生む。5週間、雰囲気への妥協ゼロ。
こんなサイトを作りたい？
埋もれることを拒むビジネスのために、プレミアムなウェブサイトを制作します。プロジェクトについてお聞かせください。24時間以内にご連絡いたします。