Makibi Cuisine

熾 -OKI-

薪火料理・レストラン　／　LP（1ページ）

自主制作（実案件を想定し、要件整理から公開まで実案件と同一フローで制作）

本番サイトを開く
  1. 狙い

    「外せない夜」を探す層に、価格と内容を先に見せて予約へ迷わず進ませる

  2. 打ち手

    熾火の背景動画で世界観を刻みつつ、価格・コース全8品・個室の条件を隠さず開示する

  3. 効果

    価格の不透明さで候補から外れず、世界観に共感した層が記念日に選ぶ設計

スクリーンショット

PC
熾 -OKI- のPC表示（ページ全体）

▼ 枠内スクロールで全体を確認できます

SP
熾 -OKI- のスマートフォン表示（ページ全体）
01Approach

工夫したポイント

  1. 01

    背景動画を載せてもパフォーマンスは落ちないことを実証した

    1080pの熾火ループを自前ホスティングしながら Performance 100・LCP 1.25秒を達成しました。暗い映像は圧縮が非常に効くため、音声トラックを削除して 338KB まで落とせています。LCPを律速していたのは動画ではなく見出しフォントで、原因を実測で特定してから対処しました

  2. 02

    動画が無くても壊れない構造にした

    静止画を常に敷いた上に動画を重ね、動画ファイルが存在しないときはビルド時の判定で video 要素自体を出力しない設計にしました。素材の到着を待たずに実装を完成させられるうえ、読み込み失敗時もファーストビューが成立します。スマートフォンと prefers-reduced-motion 環境では動画を1バイトも読み込みません

  3. 03

    自動再生する映像に停止手段を用意した

    5秒以上動き続けるコンテンツには制御手段が必要（WCAG 2.2.2）なため、映像が実際に流れる環境でのみ表示される一時停止ボタンを設けました。キーボードだけで到達・操作でき、ボタンの表示状態は動画の実際の再生状態から同期させています

  4. 04

    競合と被写体が重なるリスクを構図で回避した

    調査した大手1社のファーストビューが同じ「炉の熾火」で、素直に作ると酷似する状況でした。静止画ではなく動画にする／中央対称ではなく被写体を右下に寄せて左上に余白を作る／欧文ロゴではなく日本語の明朝コピーを主役にする、の3点で意図的に差を作っています

  5. 05

    価格を1名あたりで明示し、比較検討の負荷を下げた

    コース一本 13,200円／1名（税・サービス料込）をファーストビューとコースセクションの両方に同じ表記で出し、ペアリングを付けた場合の総額も併記しました。調査した競合は高価格帯ほど価格を公開しておらず、予約前に総額が計算できる状態にすること自体が差別化になっています

02Overview

制作概要

恵比寿の薪火料理店を想定した1ページ完結のLP。「炎の店ではなく、熾の店。」というコピーを軸に、熾火のループ動画を背景に敷いた没入型のファーストビューを作りました。商圏の競合11社を実地調査したところ、自前ホスティングの背景動画・ページ全体を黒で通す設計・和文明朝を見出しの主役に置く構成は、いずれも実施している店がありませんでした。映像を主役に据えながら Lighthouse 全4項目 100点・LCP 1.25秒を達成しています。

制作区分
自主制作（実案件を想定し、要件整理から公開まで実案件と同一フローで制作）
業種
薪火料理・レストラン
サイト種別
LP（1ページ）
制作目的
記念日・プロポーズ・顔合わせという「外せない夜」の店を探している層に、Web予約（主CV）へ迷わず進んでもらう。価格とコース内容を完全公開して、予約前の不確実性をなくす。
想定ターゲット
32〜45歳のカップル・夫婦。記念日の2〜4週間前に恵比寿・代官山圏で店を比較検討している層。失敗回避志向が強く、「1人いくらで、何が出て、個室は取れるのか」を予約前に確定させたい。副次的に6〜10名の貸切（両家顔合わせ・会食）を検討する層。
訴求軸
燃え上がる炎ではなく「熾（おき）＝最も熱く静かな状態」で焼くという思想。ジャンルにとらわれない薪火のコース一本 13,200円／1名を税・サービス料込で完全公開し、価格の不透明さで比較検討から外れないようにする。
納期目安
実案件想定で 2〜3週間
担当範囲
  • 競合サイト実地調査（11社）
  • 競合デザインリサーチ（6サイトを実測）
  • 要件定義
  • 構成設計
  • 画像・映像プラン設計
  • コピーライティング
  • アートディレクション
  • モーション設計（motion-spec 策定）
  • AI画像生成（9点）
  • AI動画生成のディレクション・検品・最適化
  • 実装
  • レスポンシブ対応
  • SEO・構造化データ
  • アクセシビリティ対応（WCAG 2.2.2）
  • クロスモデルレビュー
  • 公開前検証
  • デプロイ
使用技術
  • Astro（静的）
  • GSAP 3.12 + ScrollTrigger
  • 背景動画（H.264 / 338KB・自前ホスティング）
  • Webフォント自前配信（サブセット化）
  • AI画像生成（9点）+ WebP最適化
  • Vercel

Lighthouse ／ mobile

Performance
100
SEO
100
Accessibility
100
LCP
1.25秒
CLS
0.003