Yakiniku Kokuyou

焼肉黒耀

Web Site
Renewal Plan
企画・デザイン・実装提案書

恵比寿の高級焼肉店ブランドサイト
新規制作プロジェクト

Project: Yakiniku Kokuyou Renewal
Document: Pitch Deck / Vol. 01
Submission: For Portfolio Review

黒耀

Renewal Plan

Est. 2026

View Live Site 焼肉黒耀公式サイトを見る

— A proposal for refined
digital hospitality —

02

Index

プロジェクト概要

— Vision in three lines —

恵比寿の高級焼肉店「焼肉黒耀」のブランドサイトをゼロから企画・設計・実装。
「実店舗の格を、画面の中でも保つ」ことを最優先に、富裕層・接待層に選ばれる体験を構築する。

案件名	焼肉黒耀 / 公式ブランドサイト新規制作
業種・業態	飲食 / 高級焼肉（接待・記念日・デート利用が中心）
想定クライアント	個人オーナー経営の独立系高級焼肉店（恵比寿エリア）
制作範囲	企画 / 情報設計 / デザイン / フロントエンド実装 / 予約システムUI設計
成果物	HTML / CSS / JavaScript（静的サイト・予約ページ含む全2画面構成）

Target ARPU

¥18,000／人

想定客単価・コース料金帯

Visit Reason

82%

接待・記念日・デート利用

Mobile Share

68%

想定モバイルアクセス比率

Yakiniku Kokuyou Renewal Plan Chapter I · Strategy

04

02 · Purpose & KPI

サイト制作目的

— What this site must achieve —

課題仮説

高級店ながら従来サイトでは料金や雰囲気が伝わりづらく、新規予約が口コミ依存になっている
電話予約に依存しており、営業時間外の機会損失が発生
競合の焼肉店も類似のデザインで、ブランド差別化が弱い

本サイトの目的

ブランド価値の可視化：実店舗の格を画面でも体現し、見るだけで「価格に納得できる」状態にする
予約導線の最短化：24時間オンライン予約を可能にし、機会損失をゼロへ
ローカル検索での発見性向上：「恵比寿高級焼肉」での自然検索流入を強化

KPI設計（公開後3ヶ月）

KGI

月間Web経由予約件数

+ 40件 / 月

KPI ①

予約ページ完了率

35% 以上

KPI ②

サイト滞在時間

2分以上

指標

「恵比寿焼肉高級」検索順位

10位以内

指標

モバイルPSI スコア

90 以上

Yakiniku Kokuyou Renewal Plan Chapter I · Strategy

05

03 · Target Persona

ターゲット設定

— Who we design for —

利用シーンの異なる2つのペルソナを設定。両者ともに「失敗できない夜」を共通の文脈として持つ。

A

Main · Business User

高橋直人／ 42歳

職業: 外資系コンサル・マネージャー
年収: 1,400万円
利用シーン: 取引先との会食・接待（月2〜3回）
情報行動: 移動中スマホでGoogle検索→上位3店比較
判断軸: 個室の有無・価格帯の明示・口コミの質

「来店経験のない店をクライアントに紹介するのは怖い。サイトを見て
『ここなら間違いない』と確信できる情報が欲しい。」

B

Sub · Anniversary User

山本美奈／ 35歳

職業: 広告代理店プランナー
年収: 世帯1,800万円
利用シーン: 誕生日・記念日・両親のお祝い
情報行動: Instagram→公式サイト→食べログ確認
判断軸: 写真の世界観・サプライズ対応・予約しやすさ

「大切な日を任せる店なので、雰囲気と細やかな対応が見えること。
サイトで予約まで完結できると安心して決められる。」

Yakiniku Kokuyou Renewal Plan Chapter I · Strategy

06

03 · Deep Dive — User Journey

ターゲットの行動・心理動線

— Five stages from search to visit —

ペルソナの「気づき → 来店」までを5フェーズで分解。各フェーズでユーザーが何を感じ、何を必要とするかを起点にコンテンツとUIを設計する。

Phase

気づき
Awareness

検討
Consideration

比較
Comparison

決定
Decision

来店
Visit

タッチポイント

Google検索
Instagram
口コミ

公式サイト
ヒーロー＋コンセプト

食べログ／
競合サイト往復

予約ページ
電話／オンライン

アクセスページ
マップアプリ

心理状態

「失敗できない夜
に使える店は？」

「自分にふさわしい
店だろうか」

「他より高い理由が
納得できるか」

「予約で失敗
したくない」

「迷わず
たどり着きたい」

感情のピーク

?

!

??

○

◎

本サイトの打ち手

SEOで上位表示
OGPで第一印象

世界観で圧倒
大判KV＋キャッチ

価格・コース・
個室を明示

4ステップ
オンライン予約

徒歩動線3ステップ
マップ連動

ディレクター視点：ペルソナの「失敗できない夜」という共通文脈は、「比較フェーズで感じる不安をどれだけ早く解消するか」がCVRに直結する。本サイトは「世界観の圧倒」→「価格の透明性」→「予約の確実性」の3手で不安を順番に潰す設計。

Yakiniku Kokuyou Renewal Plan Chapter I · Strategy

07

04 · Competitor Analysis

競合分析

— Mapping the market —

恵比寿・広尾エリアの同価格帯3店を仮想競合として設定し、5軸でスコアリング。

	A社老舗高級店	B社新進気鋭	C社和牛特化	本案件黒耀
ビジュアル品位	◎	○	○	◎
予約UI完成度	△	○	△	◎
スマホ最適化	△	◎	○	◎
SEO対策	○	○	△	◎
情報の網羅性	◎	△	○	◎

差別化ポジションの可視化

High Design Low Design Low Function High Function

A社（老舗）

B社（新進）

C社（和牛特化）

★ 黒耀

分析結果：競合は「美しいが予約しづらい（A社）」「機能的だが格が出ない（B社）」に二極化。 → デザイン性と機能性の両立が本案件の差別化軸となる。

Yakiniku Kokuyou Renewal Plan Chapter I · Strategy

08

05 · Issues & Solutions

課題と改善案

— Before / After approach —

競合分析と一般的な飲食店サイトのレビューから抽出した主要3課題を、本案件でどう解決するかを定義する。

Issue 01 / Before

予約までのクリック数が多い
「予約」を押す→電話番号と入力フォームしか出ず、空席状況が分からない。日時を決められないまま離脱。

→

Solution / After

空席を可視化したカレンダー＋時間帯UI
○△×で一目で空き状況を把握。日付→人数→時間→個人情報の4ステップで完結する設計に。

Issue 02 / Before

スマホで読みづらく操作しづらい
PCサイトをそのまま縮小しただけで、文字が小さく、CTAボタンが押しづらい。電話ボタンも判別困難。

→

Solution / After

モバイルファースト設計
4段階のブレイクポイントで最適化。タッチターゲット44px以上、ドロワーUI、電話導線をヘッダーに常駐。

Issue 03 / Before

高級店としての世界観が伝わらない
テンプレート的なデザインで「価格に見合う格」が画面から感じられず、価格を見て離脱する層が発生。

→

Solution / After

和洋融合タイポと黒×金の編集デザイン
Cormorant Garamond × 游明朝で品位を表現。余白と金線で「読ませる雑誌」のような没入を作る。

Yakiniku Kokuyou Renewal Plan Chapter I · Strategy

09

05 · Deep Dive — Issue Analysis

想定店舗サイトの課題分析

— Root cause × business impact —

実在する高級焼肉店サイトのレビューと業界ヒアリングから抽出した6つの典型課題。「原因」と「ビジネスインパクト」を併記し、優先順位の根拠を明示する。

01

高級感が伝わりにくい

Root Cause テンプレート的なレイアウト・縮小写真・賑やかすぎる装飾。高単価の根拠が画面から伝わらず、「思っていたより安く見える」逆効果すら発生。

Business Impact 価格を見て離脱するユーザーが増加。価格対効果の納得感が画面で作れていないことが、新規予約率の天井になる。

02

予約導線が弱い

Root Cause 予約ボタンがヘッダーにしかない／空席状況が見えない／電話番号を控えて掛け直す必要がある。結果、来店意欲のピーク時に予約が完結しない。

Business Impact 営業時間外の機会損失。「予約しようと思った瞬間に予約できない」のは、高級店ほど痛い。離脱したユーザーは戻ってこない。

03

スマホで見づらい・操作しづらい

Root Cause PCサイトの単純縮小／フォントが小さすぎる／タップ領域が狭い。接待利用層が移動中に確認しても情報が拾えない。

Business Impact 想定アクセスの68%がモバイル。SP体験の質がそのままCVRの上限になる。改善せずに広告投下しても回収できない構造。

04

店舗情報が分かりづらい

Root Cause 住所・電話・営業時間が散在／徒歩動線の説明がない／マップが小さい。来店当日に「どう行けばいい」が解決できない。

Business Impact 初来店時の遅刻・道迷いはリピート率を直接下げる。アクセス情報の質はホスピタリティの一部として設計すべき。

05

価格・コース内容が不透明

Root Cause コース料金は「お問い合わせください」表記が多く、心理的ハードルが上がる。高級店ほど明示しない傾向だが、現代の顧客は逆を求める。

Business Impact 価格を聞きにくい心理が予約阻害要因に。「予算が読める安心」こそが接待利用層の意思決定を後押しする。

06

SEO・ローカル検索で発見されない

Root Cause 構造化データ未対応／メタタグが汎用的／title・descriptionで地域・業態キーワードを抑えていない。

Business Impact 「恵比寿焼肉高級」で検索しても表示されない＝そもそも認知の入口に立てていない。広告依存からの脱却ができない。

Yakiniku Kokuyou Renewal Plan Chapter I · Strategy

10

06 · Site Concept

サイトコンセプト

— The guiding principle —

火と静寂が交わる、極上の一夜。

炭火の熱気と、和の静謐さ。
相反するふたつが、ひとつの店にしかない時間をつくる。
その「対比の美」をデジタル体験にも翻訳することが、本サイトの設計思想です。

火

温度のある体験

炭火の写真、深い影、ゴールドのアクセント。料理の熱を画面越しに感じる構成。

静

余白の品位

情報を詰め込まず、ひとつの要素にじっくり目線を留める。高級店らしい間の取り方。

和

編集の文体

游明朝×Cormorantで「美術館の図録」のような知的な静けさを設計に持ち込む。

Yakiniku Kokuyou Renewal Plan Chapter II · Design

11

07 · Design Concept

デザインコンセプト

— Visual language system —

Color Palette

主役は「漆黒」と「古金色」。差し色は使わず、ゴールド一色で格を支える。

Sumi

#0A0805

Sumi-Brown

#18150E

Ko-Gold

#C9A84C

Kinari

#D4C9B4

Off-White

#F5F0E8

Visual Tone

Editorial Refined High-Contrast Spacious Cinematic

黒は背景の70%以上を占有、ゴールドは全体の3%以内に抑える。
「使う場所が限られているからこそ、効く」設計。

Typography

和洋ペアリングで「日本の高級店らしさ」と「グローバル感」を両立。

Display · Cormorant Garamond

Yakiniku Kokuyou

Headline · 游明朝

焼肉黒耀

UI · DM Sans

RESERVATION · 03-1234-5678

選定理由：セリフ体イタリックの「Cormorant」が西洋的格調を、細字の「游明朝」が日本の静けさを担う。UIだけサンセリフで触感を保つ三層構成。

Yakiniku Kokuyou Renewal Plan Chapter II · Design

12

08 · Design Rationale

デザイン意図 — なぜそうしたか

— Every choice has a reason —

デザインは感覚ではなく「ビジネス課題への解答」として組み立てる。すべての主要判断に「なぜ」を持つことを徹底した。

Q.

なぜ黒ベースなのか？

「光」を引き立てる土台が必要だったから

高級店の本質は「特別な照明設計」。黒は単に高級感を出すための色ではなく、料理写真の艶・炭火の赤・金色のサインを最大コントラストで際立たせる「画面の暗闇」として機能する。実店舗の薄暗い照明をデジタルで再現する手段。

Q.

なぜ余白を広く取ったのか？

情報量＝価値ではないと判断したから

ファミレスのチラシは情報を詰め込む。高級店は「ひとつの料理にじっくり目線を留めさせる」。セクション間に clamp(80px,10vw,160px) の呼吸を入れることで、「読み急がせない」店主の姿勢そのものを画面に込めた。

Q.

なぜ写真を大判で使ったのか？

焼肉は「視覚で食べる」料理だから

霜降りの艶、炭火の炎、肉が焼ける瞬間の煙――これらは小さく見せると価値の50%が消える。ヒーローは1920×1080px、コンセプト写真も最低800×600pxで配置。「画面を写真で殴る」ぐらいの覚悟で食欲と憧れを直撃させる。

Q.

なぜ金色を「点」で使うのか？

使う場所を絞ったときだけ「効く」から

金色を多用するとパチンコ屋のようになる。本サイトでは画面全体のわずか3%以内に抑え、ロゴ・CTA・装飾線・チャプター見出しなど「ユーザーに反応してほしい場所」のみに配置。視線誘導の道標として機能させる。

Q.

なぜ和洋融合タイポなのか？

日本の高級店の「文体」を再現するため

ホテルオークラ、虎屋の包装紙、銀座の和食店のメニュー――日本の伝統的な高級ブランドは必ず和文と欧文を併置している。Cormorant Garamond × 游明朝のペアは、その文体を画面で再現する装置。海外客にも違和感がない品位を担保する。

Q.

なぜスクロール演出を控えめにしたか？

「動き」は格を下げる方向に働きやすいから

派手なパララックス・大胆なアニメーションは「テクニックの誇示」になりがちで、高級店の落ち着きを壊す。フェードイン＋微小なY軸移動のみに抑え、「気づくか気づかないか」の上品さを選んだ。読書を邪魔しない装幀のような演出設計。

Yakiniku Kokuyou Renewal Plan Chapter II · Design

13

09 · Information Architecture

情報設計・サイトマップ

— Hierarchy & flow —

ユーザーの「比較→納得→予約」の心理動線に沿い、トップで全要素に1スクロールで触れる縦長LP構造を採用。

— TOP —

index.html

01

こだわり

02

メニュー

03

ギャラリー

04

コース

05

店舗情報

06

アクセス

07

予約 →

— Sub Page —

reserve.html ／オンライン予約

設計判断 ①

下層ページを増やさず、トップ1枚＋予約1枚の最小構成に。離脱ポイントを物理的に減らす。

設計判断 ②

セクション順序は「世界観→具体→価格→予約」。「いくらかかるか」を見せる前に「価値」を伝える。

設計判断 ③

予約だけ独立ページに切り出し、予約に集中できる無音の空間を作る。トップとの行き来も明確化。

Yakiniku Kokuyou Renewal Plan Chapter III · Structure

14

10 · Wireframe

ワイヤーフレーム

— Layout intentions —

PC / Desktop トップページ

HEADER · LOGO · NAV · TEL · 予約CTA

HERO · 大判ビジュアル + キャッチコピー + 予約CTA

CONCEPT · こだわり3点（写真+テキスト）

メニュータブ

メニュー画像

メニュー説明

COURSE · 3コース横並び（桐・竹・松）

INFO · 店舗情報・アクセス（マップ埋込）

RESERVE · 電話 + オンライン予約導線

FOOTER

SP / Mobile 予約ページ

HEADER · ← ホーム · TEL

ご予約 · Online Reservation

ステップインジケーター 01-02-03-04

① カレンダー（○△×表示）

② 人数選択（2-8名タイル）

③ 時間帯（○△× ボタングリッド）

④ お客様情報フォーム

予約サマリ + 送信ボタン

PCではサマリを右カラム
sticky、SPでは縦積み配置。

グリッド設計：最大幅1140px・PC12カラム／SP4カラム。余白設計：セクション間は clamp(80px, 10vw, 160px) で画面幅に応じて呼吸させる。

Yakiniku Kokuyou Renewal Plan Chapter III · Structure

15

11 · UI / UX Design

UI/UXで意識したこと

— 5 design principles —

01

「迷わせない」より「迷っても戻れる」

高級店のユーザーは情報探索を嫌う。トップに戻る／予約に進むの2導線を常にヘッダーに残し、迷いを意思決定の遅延に変えない。スムーズスクロールとアンカーリンクで現在地を失わない構造に。

02

マイクロインタラクションは「贅沢」で「静か」に

スクロールリベール、ホバー時の金線アニメーション、ボタンのpress feedback。cubic-bezier(.16,1,.3,1)で「上質な手応え」を統一。動きすぎず、しかし無反応でもない。

03

フォームの心理的負荷を最小化

日付・人数・時刻を「選ぶ」UIに変換し、テキスト入力は最小限に。リアルタイムバリデーション・進捗バー・予約サマリ常時表示で「いま自分が何を選んでいるか」を即座にフィードバック。

04

アクセシビリティを「守り」ではなく「品位」として扱う

セマンティックHTML、ARIA属性、フォーカスリングのデザイン、prefers-reduced-motion対応。コントラスト比は WCAG AA 準拠以上。誰でも使えることが、高級店の品格そのもの。

05

「自分の選んだものが反映される」体験設計

予約ページの右カラムサマリは選択と同時に更新。Storeパターンで状態を一元管理し、人数・日付・時刻の変更がリアルタイムに進捗バーと連動。入力進捗をパーセントで可視化することで完了までの距離感を伝える。

Yakiniku Kokuyou Renewal Plan Chapter III · Structure

16

12 · Responsive Design

スマホ対応について

— Mobile-first thinking —

想定モバイル比率68%。「移動中の高橋さんがクライアント前で開いて恥ずかしくない画面」がモバイルデザインの基準。

ブレイクポイント設計

SP

Mobile

— 600px

TB

Tablet

601 — 959

PC

Desktop

960 — 1339

XL

Wide

1340 —

モバイル固有の設計

タッチターゲット 44px 以上を全インタラクションで確保（iOS HIG 準拠）
ハンバーガードロワーで7メニュー＋電話CTAを集約
電話CTAを常時表示。タップで直接発信、移動中でも即予約可能
カレンダーは数字＋マークを縦並びに、人数選択は4列固定で押しやすく
右カラムサマリはSPで縦積みに変換、画面下部に固定しないことでスクロール阻害を回避

パフォーマンス配慮

画像の遅延読み込み（loading="lazy"）でファーストビュー軽量化
WebP対応＋適切なサイズ配信でモバイル通信量を削減
Google Fonts は preconnect 必須2種のみ読込
JS は IIFE で全モジュール集約、CSSは Critical 部分のみ初期描画
PSI モバイルスコア90以上を制作中継続計測

Yakiniku Kokuyou Renewal Plan Chapter III · Structure

17

12 · Responsive Detail

PC / SP レイアウト変更の意図

— Same brand, different ergonomics —

レスポンシブは「縮小」ではなく「再設計」。PCの体験をそのまま小さくするのではなく、デバイスごとのユーザーの手の使い方・目線の動きを起点にレイアウトを組み直した。

PC

Desktop / 960px 以上

Header

水平ナビ＋右上CTAを常時露出。
マウス操作前提でホバー演出を入れ、視線誘導を金色の下線で表現。

Reserve

2カラム構成でカレンダー＋右にサマリ sticky。
選択内容を常に視界に置き、入力進捗を可視化。

Calendar

7列×6行のフルカレンダー。マウスホバーで日付情報を浮かせる。

Course

3コース横並び。値段・特徴・予約ボタンが視線移動なしで比較可能。

Access

マップ・徒歩案内・住所を並列表示。プリントアウト用途も視野。

SP

Mobile / 600px 以下

Header

ハンバーガー＋電話アイコンに集約。
親指リーチ範囲を意識し、右上配置の電話タップで即発信可能。

Reserve

縦積みステップで1画面1タスクに分割。
サマリは最下部に配置、スクロール阻害なし。

Calendar

日付の数字＋マークを縦配置。1セル44px以上で誤タップ防止。

Course

縦スクロールに変換。1コース1画面で集中して読める形へ。

Access

徒歩案内を縦タイムライン化。マップタップで Maps アプリ起動。

Touch Target

最小 44×44px（iOS HIG）／予約ボタンは56px確保

Drawer UI

背景スクロール固定／ESC・外側タップで閉じる

Tel CTA

SPのみ電話アイコン常駐／タップで即発信

Yakiniku Kokuyou Renewal Plan Chapter III · Structure

18

13 · Reservation Flow

予約導線設計

— Path to conversion —

設計指針：サイト内のどこにいても、最大2クリックで予約ページに到達できる状態を保つ。

予約CTAの配置（全11箇所）

01ヘッダー右上 · 常時表示の金ボタン

02ハンバーガーメニュー内リンク

03ドロワー最下部金ボタンCTA

04ヒーロー · スクロール前の主CTA

05コンセプト末尾

06–08コース3種それぞれに「予約する」

09店舗情報セクション「個室を予約する」

10予約セクション · オンライン予約ボタン

11フッターナビゲーション

予約完了までの4ステップ

Step 01

日付選択

カレンダーで空席状況を確認しながら来店日を選ぶ。月送り対応・60日先まで予約可能。

Step 02

人数選択

2〜8名のタイル式UIで選択。9名以上は電話誘導でケース別対応。

Step 03

時間選択

30分刻みで○△×を表示。満席時間帯は無効化し、選択ミスを防止。

Step 04

情報入力 → 完了

名前・電話・メール・同意のみ。バリデーション後、確認画面を経て完了。

Yakiniku Kokuyou Renewal Plan Chapter III · Structure

19

14 · Scroll Flow & CTA Design

スクロール導線・CTA階層設計

— Psychology of vertical reading —

縦スクロールでの心理動線

「読みながら、徐々に予約したくなる」順序で情報を配置。

— Section 01 —

ヒーロー｜世界観の提示

「ここは特別な店だ」を3秒で伝える。文字情報を最小化し写真で殴る。

— Section 02 —

こだわり｜価値の言語化

「なぜ高いか」の根拠を3点で。和牛・炭火・個室の三本柱で価格を正当化する。

— Section 03 —

メニュー｜具体の魅力

タブ切替で「読み疲れ」させず、欲しい情報だけを露出。食欲喚起の中心地。

— Section 04 —

コース｜価格透明性

3コースを横並びで比較しやすく。「予算が読める安心」を提供。

— Section 05 —

店舗情報・アクセス｜安心の補強

来店イメージを具体化。「行ける気がする」感覚をマップ＋徒歩動線で作る。

— Section 06 —

予約｜決断の場

ここまでで「行きたい」が最大化。電話／オンライン2導線で決断を取りこぼさない。

CTAの階層設計

予約CTAは均一に置かない。プライマリ／セカンダリ／ステルスの3階層で誘導する。

Primary

金色の塗りつぶしボタン

ヒーロー／ヘッダー／コース直後／予約セクション。最も目立つ場所に配置。

Secondary

金色アウトラインボタン

コース紹介の桐・松など。「比較したあと選ばせる」場面で使用。

Stealth

テキストリンク

フッター／ドロワー内。「気づいた時だけ使う」位置に静かに置く。

Tel Link

電話番号テキスト

ヘッダー右／予約セクション。SPではタップで即発信。

設計判断：金ボタンの数を絞ることで「ここを押せば予約できる」が即理解できる状態を作る。ボタンを増やすと逆に意思決定が鈍る。

Yakiniku Kokuyou Renewal Plan Chapter III · Structure

20

15 · Booking UI

空席予約UIについて

— Calendar & time-slot design —

設計のポイント

「見ただけで分かる」を最優先
○△×の記号は世代を問わず即理解できる。色情報に頼らない色覚多様性配慮も兼ねる。
満席は「選べないように」する
クリック不能化＋透明度低下で「無理な期待」を生まない設計。
凡例を画面内に常時掲出
カレンダー直下に○△×凡例を配置し、認知負荷を減らす。
日付選択で時間帯が即更新
状態管理で「いまの選択に紐づく情報」だけを表示。

技術的な工夫

空席データは 決定論的擬似乱数 で生成し、同じ日付なら毎回同じ表示を再現。
AvailData.fetch(date) を実APIに差し替えるだけで実運用に移行可能な設計。

UI模式図 · 5月のカレンダー（一部）

11○

12○

13△

14×

15○

16△

17○

18○

19○

20×

21△

22○

23×

24△

5/17（土）の時間帯

17:00○

17:30○

18:00△

18:30×

19:00○

19:30×

20:00△

20:30○

金色 = 選択中｜淡い金 = 残りわずか｜消灯 = 満席

Yakiniku Kokuyou Renewal Plan Chapter III · Structure

21

16 · Map & Access

Googleマップ導線について

— Friction-free arrival —

接待利用では「来店までの不安をゼロにする」ことがリピートの分岐点。アクセス情報は単なるマップ埋め込みでは足りないと判断し、徒歩動線の段階的説明を組み込んだ。

情報の階層構造

01

最寄り駅と所要時間を最初に明示
「JR恵比寿駅西口より徒歩4分」

02

徒歩ルート3ステップで迷いを排除
改札→駅前ロータリー→駒沢通り→店舗

03

Googleマップ埋め込み（高さ400px）
クリックでマップアプリへ即遷移可能

04

タクシー利用時の伝え方を補足
「恵比寿1丁目交差点近く、◯◯ビル」

SP / PC 出し分けの工夫

スマホでの配慮

徒歩案内は縦タイムラインに変換。マップはタップで Google Maps アプリが起動する https://maps.app.goo.gl/... 形式のリンクを併設。

PCでの配慮

マップ・徒歩案内・住所・営業時間・電話を2カラム並列で表示。プリントしてタクシーに見せる用途も想定。

構造化データへの連動

住所・電話番号・営業時間を Restaurant Schema に出力。Googleナレッジパネル・マップ検索結果での表示精度を最大化する。

Yakiniku Kokuyou Renewal Plan Chapter III · Structure

22

17 · Craft Highlights

制作で工夫したポイント

— Six craft details —

ディレクターとして「ここは絶対に妥協しない」と決めた6つの細部。全体の品位を決めるのは、こうした目立たない作り込みの集積。

01

Photography

写真の見せ方

ヒーローは1920×1080、コンセプトは800×600以上を厳守
サムネイル使い回しを禁止、各セクションに専用素材
暗部の階調を残す現像指示（黒つぶれ回避）
ホバー時のサブトルなズーム演出（scale 1.03）で「見惚れる時間」を作る

02

Mobile UX

スマホでの操作性

親指リーチ範囲を意識した右寄せCTA配置
タップターゲット最小44px・予約ボタン56px
ドロワー内CTAを最下部に配置し、片手操作を完結
横スワイプ干渉なし・スクロール阻害ゼロ

03

Reservation

予約UI

○△×の記号＋色＋ラベルの3層情報設計
満席は無効化＋透明度で「期待を生まない」
Storeパターンで選択状態を一元管理
進捗バー＋サマリで「ゴールまでの距離」を可視化

04

Map & Access

Googleマップ導線

マップ＋徒歩案内3ステップで道迷い防止
SPでは縦タイムライン化、PCは並列表示
タップで Maps アプリ起動の maps.app.goo.gl 形式
住所・電話・営業時間は構造化データ連動

05

Motion

アニメーション

IntersectionObserver でスクロールリベール
Y軸 12px の微小移動＋フェードのみ
イージングは cubic-bezier(.16,1,.3,1) 統一
prefers-reduced-motion で全停止可能

06

Maintainability

実務想定のフォルダ構成

CSS変数でデザイントークン一元管理
JSはIIFEモジュール分割で名前空間衝突なし
画像差し替えガイドをHTML冒頭にコメント明記
引き継ぎ用 README で運用フェーズに備える

Yakiniku Kokuyou Renewal Plan Chapter III · Structure

23

18 · SEO Strategy

SEO対策について

— Local search optimization —

想定ターゲットは「恵比寿焼肉高級」「恵比寿接待個室」などのローカル検索流入。
構造化データ＋メタタグ＋内部対策の3層でテクニカルSEOを徹底する。

構造化データ（JSON-LD）

Restaurant Schema を埋め込み、検索結果でのリッチ表示を狙う。

          {

            "@type": "Restaurant",

            "name": "焼肉 黒耀",

            "servesCuisine": "Japanese Yakiniku",

            "priceRange": "¥¥¥¥",

            "address": { ... },

            "telephone": "03-...",

            "openingHours": [ ... ]

          }

メタタグ・OGP設計

title は「店名｜エリア×業態×訴求軸」の30文字以内
description は 120文字で、価格帯・個室・接待・予約可を網羅
OGP画像は1200×630pxで「店名＋ヒーロー画像」のソーシャル最適化

内部SEO チェックリスト

✓セマンティックHTML（header/main/section/article）

✓h1は1ページ1つ、h2-h3の階層を厳守

✓画像 alt 属性を全画像に付与

✓canonical URL 指定で重複回避

✓モバイルフレンドリーテスト合格

✓Core Web Vitals 全項目グリーン

✓sitemap.xml / robots.txt 設置

✓パンくず構造化（Schema連動）

✓HTTPS化＋HSTS設定

✓Search Console / GA4 連携

ローカルSEO補強：Googleビジネスプロフィール最適化を別途提案。サイトとGBPの NAP（店名・住所・電話）情報の完全一致が、ローカル検索順位の決定要因。

Yakiniku Kokuyou Renewal Plan Chapter IV · Technical

24

18 · SEO Strategy Layers

SEO対策の7レイヤー戦略

— Beyond technical checklist —

SEOは技術対策の集合ではなく「7つのレイヤーの積み上げ」。本案件で実装した各レイヤーの意図と具体施策を整理する。

Layer 01 キーワード戦略

店舗名 × 地域名 × 業態の3軸組み合わせを起点に。
「焼肉黒耀」「恵比寿高級焼肉」「恵比寿接待個室」「恵比寿焼肉デート」をtitle・h1・OGPで網羅。検索意図ごとに着地点を変える。

Layer 02 metaタグ最適化

title は30文字以内で店名＋地域＋業態＋訴求を凝縮。
description は120文字で価格帯・個室・接待・予約可を網羅。CTRを上げる「クリックしたくなる説明」を意識。

Layer 03 見出し構造（h1〜h3）

h1は1ページ1つで店舗名＋ブランドコピー。h2は各セクションタイトル、h3はサブカテゴリ。論文のような階層でクローラビリティを担保。section＋aria-labelledbyでセマンティクスも完備。

Layer 04 alt属性・画像SEO

全画像に意味のあるalt属性を付与。「料理の写真」ではなく「炭火で焼く黒毛和牛のサーロイン」のように具体的に。Google画像検索からの流入も飲食店では無視できない経路。

Layer 05 表示速度（Core Web Vitals）

画像 loading="lazy"・WebP変換・preconnect による Google Fonts 高速化。LCP 2.5秒以内・CLS 0.1以下・INP 200ms以下をクリア。表示速度はランキング要因かつ離脱率に直結。

Layer 06 モバイル対応（MFI対応）

Google はモバイル版を評価基準とする「Mobile-First Indexing」。viewport設定・レスポンシブ画像・タッチターゲット44px以上を全画面で担保し、モバイルフレンドリーテスト合格を制作中継続検証。

Layer 07 ローカルSEO（NAP一致＋構造化データ）

NAP（Name・Address・Phone）の完全一致をサイト／Googleビジネスプロフィール／食べログ間で徹底。Restaurant Schema の JSON-LD でナレッジパネル表示を狙う。地域検索の上位獲得の決め手。

Yakiniku Kokuyou Renewal Plan Chapter IV · Technical

25

19 · Tech Stack

使用技術・フォルダ構成

— Selected with intent —

技術選定と理由

「クライアントが将来自社で運用できる」前提で、フレームワーク不要のバニラ構成を選定。

Markup

HTML5 · Semantic

SEO・アクセシビリティ・将来のCMS化を考慮した意味的構造

Styling

CSS3 · Variables

CSS変数でデザイントークン管理、運用時のテーマ変更を容易に

Behavior

Vanilla JS (ES6+)

フレームワーク不要、IIFE モジュール構成で保守性確保

Typography

Google Fonts

Cormorant Garamond / DM Sans。preconnect で初期描画最適化

Embed

Google Maps Embed

APIキー不要の埋め込み形式で、コスト・運用負荷を軽減

Hosting

Static Hosting

Netlify / Vercel など。SSL自動・CDN配信で速度＆セキュリティ確保

フォルダ構成

yakiniku-kokuyou/ ├── index.html // トップページ（LP構造） ├── reserve.html // 予約専用ページ ├── style.css // 全スタイル（変数 → リセット → コンポーネント） ├── script.js // 全JS（IIFE・モジュール分割） ├── assets/ │ ├── images/ │ │ ├── hero/ // KV・ヒーロー画像 │ │ ├── concept/ // こだわり・個室写真 │ │ ├── menu/ // 料理写真 │ │ └── course/ // コース紹介画像 │ └── favicon/ └── README.md // 引き継ぎ用ドキュメント

Yakiniku Kokuyou Renewal Plan Chapter IV · Technical

26

20 · Schedule

制作期間想定

— 6 weeks total —

実務想定の標準工数。クライアント確認2回（中間レビュー・公開前最終）を組み込んだ現実的スケジュール。

Week 01

Week 02

Week 03

Week 04

Week 05

Week 06

企画・要件定義

情報設計・WF

デザイン（PC/SP）

コーディング

予約UI実装

QA・PSI最適化

マイルストーン 01

Week 02 末
WF・サイトマップレビュー

マイルストーン 02

Week 04 末
デザイン全画面レビュー

マイルストーン 03

Week 06 末
本番公開・引き渡し

Yakiniku Kokuyou Renewal Plan Chapter IV · Technical

27

21 · Production Notes

制作で意識した実務ポイント

— Director's perspective —

「作って終わり」ではなく、クライアントが運用し続けられる状態で渡すことを最重要に。ディレクター視点での5つの実務的判断を以下に記す。

Maintainability

CSS変数によるデザイントークン化

色・余白・タイポグラフィを :root 一箇所で管理。「金色を少し明るくしたい」が1行で完結する状態を作り、運用フェーズでの修正コストを最小化。

Handover

写真差し替えガイドをHTML内に明記

HTML 冒頭コメントに「assets/images/hero/kv.jpg 1920×1080」と必要な画像パスとサイズを記載。クライアントが写真を発注する際の指示書を兼ねる。

Future-proof

予約API差し替え前提の設計

AvailData.fetch(date) 1関数を実APIに置換するだけで本番稼働可能な構造。「いまはダミー、後で本物に」という現実的な段階運用に対応。

Edge Case

「定休日」「9名以上」の例外設計

満席だけでなく定休日も別表示。9名以上は電話誘導とし、「対応しきれないケースを正直に伝える」導線を組み込み、現場運用との齟齬を防ぐ。

Performance

レンダリングコストを意識した実装

パララックスは requestAnimationFrame でスロットリング。スクロールイベントは passive 化。体感速度を犠牲にする演出はカットする判断。

Accessibility

ARIA属性・キーボード操作の確認

予約ステップは role="radiogroup" 等で意味付け。aria-live で動的更新を読み上げ可能に。スクリーンリーダーでも完了まで到達できる状態を担保。

Yakiniku Kokuyou Renewal Plan Chapter IV · Closing

28

22 · Future Improvement

今後の改善案

— Beyond launch —

公開はゴールではなくスタート。運用データを元にした継続的改善を3フェーズで提案する。

Phase 01 · 公開〜3ヶ月

運用と計測の整備

GA4・Search Consoleで予約完了率・離脱ポイントを計測。

ヒートマップツール（Microsoft Clarity 等）で実際のユーザー行動を可視化。

A/Bテストで予約CTAの文言・配色を検証。

Phase 02 · 3〜6ヶ月

予約システムの本実装

ダミーデータからリアルタイム空席連動へ。

POSレジ・店舗予約台帳との連携API構築。

予約完了メールの自動化（SendGrid等）・キャンセル機能の実装。

Phase 03 · 6〜12ヶ月

多言語化・CMS化

英語・中国語（繁体）対応で訪日富裕層を取り込む。

microCMS等でメニュー・コースの自社更新を可能に。

Instagramフィード連携でリアルタイム発信。

Phase 04 · 1年以降

ブランド体験の拡張

公式LINE連携で予約・リマインダー一括化。

会員ランク制度・ギフトカード販売の追加。

姉妹店展開時のブランドサイトテンプレート化を視野に。

— Closing Message —

Web は完成させるものではなく、育てるもの。
サイト公開後の数字こそが、本当の評価軸だと考えています。

Yakiniku Kokuyou Renewal Plan — End of Document —

29

23 · Top Page Preview

トップページ表示イメージ

— Same world, two devices —

PC／SPで世界観を崩さず、予約導線まで自然につなげる設計。炭火の熱と漆黒の余白、古金色の差し色で「画面の中の照明設計」を再現し、実店舗の格をデバイスを問わず一定に保つ。

焼肉黒耀トップページのデスクトップ表示とスマートフォン表示のモックアップ。炭火で焼かれる和牛の大判ヒーロー画像に「炭火が宿す最高の一品」のキャッチコピー、ヘッダーナビゲーション、ご予約CTA、SINCE 2016 / 個室4室 / A5黒毛和牛の3点訴求が並ぶ

01 Hero / 視覚の主役

大判ヒーローで「食欲」と「格」を同時に伝える

炭火で焼かれる和牛の艶を画面の半分以上に配置。「炭火が宿す最高の一品」のコピーで来店動機を3秒で伝える。

02 CTA / 予約導線

ご予約ボタンを常時ヘッダー＋ヒーロー2層で露出

ファーストビュー内で「ご予約はこちら」が必ず視界に。迷わせない主従関係をボタンの塗りとアウトラインで階層化。

03 SP Adaptation / 再設計

スマホは「縮小」ではなく「再構成」

ナビをドロワーへ集約し、予約CTAを親指リーチ範囲に。PCと同じ世界観を保ったまま、移動中の片手操作で完結する設計に。

04 Brand Proof / 信頼の補強

3点訴求で「価格に納得できる根拠」を即提示

SINCE 2016（実績）／個室4室（接待適性）／ A5黒毛和牛（品質）。数字で店の格を語らせる。

Yakiniku Kokuyou Renewal Plan Top Page Preview

30

24 · Public Resources

公開サイト・リポジトリ

— Live site & source code —

本提案書で設計したサイトは、実装まで進めて公開済みです。下記のQRコード／URLからご確認いただけます。ソースコードはGitHubで公開しており、提案からコードまで一気通貫でレビュー可能な状態にしています。

— Scan to visit —

スマートフォンからサイトを
ご確認いただけます

01 Live Site

公開サイト

https://hirotonozaki.github.io/yakiniku-kokuyou/

本提案書の設計をそのまま実装。 PC／スマートフォン両対応、予約UIまで動作する状態で公開しています。

02 GitHub Repository

ソースコード

https://github.com/hirotonozaki/yakiniku-kokuyou

GitHub上でソースコードを公開しています。 HTML／CSS／JavaScriptの実装方針、フォルダ構成、コメント記述まで確認可能です。

Yakiniku Kokuyou Renewal Plan ／設計から実装、公開まで全工程を担当

Yakiniku Kokuyou Renewal Plan Public Resources

Web SiteRenewal Plan企画・デザイン・実装提案書

課題仮説

本サイトの目的

KPI設計（公開後3ヶ月）

Color Palette

Visual Tone

Typography

ブレイクポイント設計

モバイル固有の設計

パフォーマンス配慮

予約CTAの配置（全11箇所）

予約完了までの4ステップ

縦スクロールでの心理動線

CTAの階層設計

設計のポイント

技術的な工夫

情報の階層構造

SP / PC 出し分けの工夫

構造化データ（JSON-LD）

メタタグ・OGP設計

内部SEO チェックリスト

技術選定と理由

フォルダ構成

Web Site
Renewal Plan
企画・デザイン・実装提案書