ALCHEMY BOWL
一杯のラーメンのように、すべてのピクセルが意図的なレストランサイト。
The Alchemist Bowlは新宿ゴールデン街にある6席のラーメンカウンター。カウンターに座っているような感覚 — 暗く、親密で、こだわり抜いたサイトを求められた。インタラクティブなメニューシステム、ベントグリッドのホームページ、予約フロー、そしてラーメンを芸術として扱うブランドストーリーテリングを備えたNext.jsアプリケーションを構築した。
The
Challenge
東京の路地裏にある6席のラーメン店にウェブサイトは不要だ — そのウェブサイトが体験の一部でない限り。料理と同じくらい意図的なものを、ありきたりな飲食店サイトのパターンに頼らずに作ることが課題だった。
レストランの偏執的な職人哲学を、一般的なフードサイトのパターンに頼らずデジタル体験に変換する。
カテゴリー、商品詳細ページ、栄養情報、トレイ追加UXを備えたインタラクティブメニューを、可能な限り静的生成で構築する。
動的メニュールートのSSRを備えつつ、Cloudflare Workersエッジネットワークに1秒以下のグローバルパフォーマンスでデプロイする。
The
Solution
Next.js 16とReact 19、Framer Motionを使い、シネマティックなダークテーマの体験を構築した。ベントグリッドのホームページは、カードを通じてブランドストーリーを語る — それぞれがThe Alchemist Bowlの世界への異なる入口となる。
ダーク（#181112）ベースとクリムゾン（#ec1337）アクセントが、夜の東京のムーディーな雰囲気を演出。ホームページのベントグリッドが従来のレストランサイトの型を破る。タイポグラフィは太字、大文字、広いトラッキング。
Next.js 16 App Routerで、ほとんどのページを静的生成、動的メニューアイテムルートをエッジSSR。OpenNextアダプターを介してCloudflare Workersにデプロイし、グローバルエッジ配信を実現。
サイト
ウォークスルー
シグネチャーディッシュヒーロー、麺タイプセレクター、予約CTA、ロケーションカード、シェフストーリーティーザー、レビュー、グッズドロップ、ニュースレター登録 — すべてファーストビューに収まるベントグリッドレイアウト。
タブ式カテゴリーシステム。ラーメンの写真、カロリー表示、バッジ（シグネチャー、辛口、ヴィーガン、限定、新作）、価格、トレイ追加インタラクション。
シェフの生い立ち、24時間のスープ製法、産地直送の仕入れ、ゴールデン街の街並み、メディア掲載を紹介するブランドナラティブページ。
人数選択、日付ピッカー、時間帯、ハウスルールを備えた2ステップ予約フロー — 来店前に期待値を設定するデザイン。
The
Results
Cloudflare Workersエッジネットワークにデプロイ。静的ページは即時ロード、動的メニュールートはエッジでレンダリング。全Lighthouseカテゴリーでほぼ満点。
Final
Reflection
The Alchemist Bowlに必要だったのは、他のレストランと同じように見えるウェブサイトではなかった。店そのもののように感じるサイトだ — 暗く、偏執的で、堂々とニッチ。錬金術のメタファーをすべてのタッチポイントに貫いた：化合物のように名付けられたメニュー、マニフェストのようなシェフプロフィール、日付を選ぶ前にハウスルールを提示する予約フロー。Cloudflare Workers上のNext.js 16が、季節ごとに変わるメニューでもグローバルに高速な動的ルートと静的ページを両立させる。4週間、一つの鍋、雰囲気への妥協ゼロ。
こんなサイトを作りたい？
埋もれることを拒むビジネスのために、プレミアムなウェブサイトを制作します。プロジェクトについてお聞かせください。24時間以内にご連絡いたします。