架空の企業を想定した自主制作のコンセプトサイトです。受注案件ではなく、ここで紹介している企業は実在しません。
MORI
客室3室、料理人1人、火山性の温泉を持つ箱根の旅館MORIのための複数ページのサイト。周りの森と同じくらいゆっくり、静かに感じられるように作った。
MORIは箱根の森の中にある客室3室の旅館で、火山性の温泉、一人の懐石料理人、そして全室を囲む樹齢80年の檜がある。サイトは建物と同じように急がない印象でなければならなかった。予約エンジンを前面に出す代わりに、訪れる前から気持ちを落ち着かせるように作っている。
直面した
課題
客室3室の旅館の宣伝は、ホテルチェーンの宣伝とはほとんど共通点がない。サイトでは、42°Cの源泉の温かさ、檜の香り、玄武岩に積もる雪といった感覚を画面に置き換える必要があった。プロジェクトを形づくった制約は3つある。
インフィニティプールもスパもルームサービスもない宿なので、価値は空気感にある。機能の一覧ではなく、抑制によって特別な場所だと感じさせる必要があった。
日本語と英語の内容を、それぞれの読み手に合ったトーンで書く。日本のお客様には丁寧で温かく、海外の旅行者にはより描写的に。
献立、庭、温泉の過ごし方はすべて季節で変わるので、その時々の季節に合わせて更新しやすいサイトにする必要があった。
前提と
制約
このビルドが答えようとしたことと、意図的に止めた場所。
- ブリーフ
- 架空の客室3室の旅館のための自主制作。ホスピタリティの紋切り型の言葉と設備のカルーセルを使わず、宿が実際に提供できないものはページに載せないと決めた。
- スコープ
- 静的書き出しの6ページで、英語と日本語は自作のReactコンテキストで切り替える。この規模なら、ロケールルーターは中身より仕掛けのほうが大きくなる。
- 未接続
- 空室確認はブラウザ内で完了し、何も保存しない。客室3室の宿は会話で予約が決まるので、本物のカレンダーは女将がすでに管理しているものと連携させる必要がある。見せかけのカレンダーを作れば、間違った理由で見栄えが良くなるだけだった。
導いた
解決策
客室、食事、体験、哲学、ギャラリーという滞在の5つの要素を軸に、Next.js 16で複数ページのアプリケーションを構築した。デザインは日本の雑誌の組版と侘び寂びを参考にし、温かみのある中間色、たっぷりの余白、ゆっくり内容を見せるアニメーションで構成している。
ほぼ黒の背景（#0C0A09）に、古い檜や灯籠の光を思わせる温かいゴールド（#C4976A）を合わせた。見出しにはディスプレイ用のセリフ、本文には細いサンセリフを使う。全面写真にはグラデーションを重ねて奥行きを出し、トランジションはすべて700ms以上かける。
Next.js 16とReact 19、Tailwind CSS v4、そして各セクションが画面に入るときに表示するFramer Motion。6ページ（客室、食事、体験、哲学、ギャラリー、お問い合わせ）は、それぞれ独立した誌面のように作られている。バイリンガルのコンテキストプロバイダーで、ページを再読み込みせずに英語と日本語を切り替え、Cloudflare Pagesに配信している。
Inside
the Build
最初の画面にあるのは三つの言葉と一枚の写真だけで、予約ウィジェットはない。この画面の役目は、ゆっくりした速度を決めることだけだ。静けさを売る宿が、フォームで始まるべきではないからだ。
設備を並べた段落の代わりに、数字の帯を置いた。客室3室、42°Cの源泉、4km圏の食材、料理人1人、2泊以上。どれも旅館が自ら選んだ制限なので、この帯は宿の運営方針の説明にもなっている。
ギャラリーはカルーセルではなく非対称のグリッドだ。温泉、懐石、杉のスイートで面積を変えたのは、来館の理由として等価ではないからだ。勝手に動くものはなく、お客様は自分の速さで見られる。
載せる季節は一度に一つだけ。一年分を並べるほうが作るのは楽だが読みにくく、2月に迷っているお客様が見たいのは2月だ。このセクションは、季節が変わるたびに差し替える前提で書いている。
得られた
成果
サイトは静的書き出しで、画像はnext/image経由のWebP、多言語化はルーティングライブラリの代わりに自作のコンテキストで行っている。重さのほとんどはギャラリーだ。杉と静かな水面の全面写真こそ宿が売っているものなので、ページが重くなるのは避けられず、それが最も表れるのはモバイルだ。
、公開中のサイトを Lighthouse 13.0.3（各プリセット3回計測の中央値）で実測した値です。
最後の
振り返り
MORIは、サイトが宿と同じ速さで動くように設計した。そのため、ヒーローのカルーセル、星評価、ファーストビューの空室カレンダーといった宿泊サイトの定石を外し、宿がお客様に求めるのと同じ忍耐を求める、雑誌の誌面に近いものを作った。ヒーローには三つの言葉、宿には料理人が一人と源泉が一つあり、Framer Motionは読み進めるたびにセクションを現して、建物の中を歩くような感覚をつくる。代償は重さだ。MORIらしさを生む写真が、スマホでの表示を遅くしている。最初に直すならそこだ。
こんなサイトを作りたい？
中小企業のためのウェブサイトを、日本語と英語で設計・制作しています。プロジェクトについてお聞かせください。24時間以内にご返信します。