# タカヒサ BT-DT クロス導線 設計書 | 項目 | 内容 | |---|---| | プロジェクト | タカヒサ・ブルーウォーター（BT）↔ タカヒサ・ダウンタウン（DT）クロス導線強化 | | 関連issue | [takahisa-lp#5](https://github.com/syn-okami/takahisa-lp/issues/5) / [takahisa-downtown-lp#4](https://github.com/syn-okami/takahisa-downtown-lp/issues/4) | | 作成日 | 2026-05-11 | | 採用方式 | **別ページ方式（Locationsページ新設）** | | ステータス | ドラフト（社内レビュー前） | | 顧客承認状況 | 方針合意済み、デザイン未提示 | --- ## 1. ゴール（最終状態） 両サイトを訪問したユーザーが「もう1つの店舗の存在」を認識でき、迷わず店舗を選択して予約に進める。 具体的には、両サイトに以下が追加されている状態: | # | 場所 | 追加内容 | 目的 | |---|---|---|---| | 1 | ヘッダーナビ | 「Locations」メニュー項目（Locationsページへのリンク） | 能動的に店舗選択したいユーザーへの入り口 | | 2 | ヘッダーロゴ脇 | サブテキスト（`Bluewaters` / `Downtown`） | 現在地の明示 | | 3 | 新ページ | `/locations`（DT）または `locations.html` 等（BT、3言語分） | 両店舗を比較・選択する画面 | | 4 | フッター | 「Sister Restaurant」ブロック（姉妹店リンク） | 受動的にもう1店舗の存在を伝達 | | 5 | `` / `layout.tsx` | 構造化データに `sameAs`（姉妹店URL）追加 | SEO・検索エンジンに2店舗関係を伝達 | --- ## 2. 背景・目的 ### 現状の問題 | サイト | 現状 | |---|---| | BT（[takahisa.ae](https://takahisa.ae/)） | DT店への言及・リンクが**一切なし** | | DT（[downtown.takahisa.ae](https://downtown.takahisa.ae/)） | 本文中にBT本店への言及あり（`app/locales/en.schema.json` の `concept.body`: "second branch of TakaHisa on Bluewaters Island"）、しかし**リンクなし** | ### 目的 - 検索流入したユーザーに両店舗の存在を伝える - ロケーションを能動的に選択できる導線を整備 - 旅行客・予約検討中のユーザーが「適切な店舗」を選びやすくする --- ## 3. スコープ ### 含むもの - **両サイトのヘッダー**に「Locations」メニュー追加 - **両サイトのフッター**に姉妹店ブロック追加 - **両サイトに新ページ**「Locations」を追加（BT: 3言語、DT: EN） - **ヘッダーロゴ脇に現在地サブテキスト**追加 - **構造化データ**（Schema.org `Restaurant` + `sameAs`）の整備 - 予約導線（SevenRooms）との接続 - canonical / hreflang などのSEO設定 ### 含まないもの（別タスク化） - DT側 i18n半端実装の修正（`app/locales/locales.ts` の `ja` export 漏れ、`page.tsx` の `useLanguage()` 無効化等）→ クロス導線スコープ外、DT側は **EN単独で運用** のまま実装 - BT本店のサイトリブランディング - DT側にRU/ZH追加（今回はEN単独維持で確定） - メニュー詳細ページ統合 - お問い合わせフォームの統合 --- ## 4. 採用方式の選定 ### なぜ別ページ方式か（セクション方式・ドロップダウン方式と比較） | 観点 | 別ページ（採用） | セクション内蔵 | ドロップダウン | |---|---|---|---| | 元リクエストとの整合 | ◎「Locationページを追加」と明記 | △ | △ | | 「明確に選択できる」表現との整合 | ◎ 専用画面として成立 | ○ | △ | | 高級店2店舗の格 | ◎ | ○ | △ | | SEO（独立URL） | ◎ | △ | × | | 工数 | 中（8〜10人日） | 小（5〜7人日） | 小（3〜5人日） | | 拡張性（将来3店舗目） | ◎ | △ | △ | → **別ページ方式**を採用。お客様の元リクエスト「Locationページを追加し、相互リンクおよび予約ページへの導線を設置、ロケーションを明確に選択できる設計」に最も忠実。 --- ## 5. UX設計の柱 ### 5.1 ユーザーフロー ``` [検索流入] → BTのTOP着 ↓ ヘッダーで「自分はBluewaters店にいる」と認識（ロゴ脇 "Bluewaters" 表示） ヘッダーに「Locations」メニュー発見 ↓ 2分岐 ├─ A) すぐ予約: 既存のBook Nowで完結（変更なし） └─ B) 両店検討: 「Locations」クリック → Locationsページ ↓ 両店舗カード表示（写真・住所・特徴・予約ボタン） ↓ ニーズに合う店舗を選択 ↓ 選択した店舗のサイト or SevenRoomsへ遷移 ↓ 予約完了 or 詳細閲覧 ``` ### 5.2 ユーザー判断基準（Locationsページで提示する情報） ユーザーが「どちらの店舗にするか」を判断するための情報: | 判断材料 | BT本店 | DT姉妹店 | |---|---|---| | エリア | Bluewaters Island（観光地・海沿い） | Business Bay（中心市街地・ビジネス街） | | ポジション | Flagship（本店） | Second branch | | アクセス | Banyan Tree Dubai 1F | Volante Tower 1, 4F | | 受賞歴 | Michelin / MENA50 Best / Gault&Millau | Michelin / MENA50 Best / Gault&Millau 3 Toques | | 予約導線 | sevenrooms.com/reservations/takahisa | sevenrooms.com/explore/takahisabusinessbay | --- ## 6. 共通仕様 ### 6.1 現在地サブテキスト ロゴ直下または右側に小さく表示: - BT側: **`Bluewaters`** または **`Bluewaters Island`** - DT側: **`Downtown`** または **`Business Bay`** **配置案**: ロゴ画像の直下に控えめなフォントサイズで（既存ロゴに手を入れない） ### 6.2 Locationsメニュー（ヘッダーナビ追加） 両サイトとも既存ナビ末尾に追加: - リンク先: 自サイトの Locationsページ（同タブ遷移） - メニュー位置: ナビの末尾、または「Contact us」「Shop Information」の直前 ### 6.3 Locationsページの構成 ``` ┌─────────────────────────────────────────────┐ │ Header（現サイトのヘッダーを継承、ロゴサブテキスト表示）│ ├─────────────────────────────────────────────┤ │ Hero Section │ │ "Our Locations" / "Choose Your TakaHisa" │ │ サブコピー（両店舗の存在を伝える1行） │ ├─────────────────────────────────────────────┤ │ Restaurant Cards (2カラム、モバイルは縦並び) │ │ ┌───────────────────┐ ┌───────────────────┐ │ │ │ [BT写真・外観 or 内装]│ │ [DT写真・外観 or 内装]│ │ │ │ │ │ │ │ │ │ TakaHisa Bluewaters │ │ TakaHisa Downtown │ │ │ │ [Flagship Badge] │ │ [Second Branch Badge]│ │ │ │ │ │ │ │ │ │ 一言コンセプト │ │ 一言コンセプト │ │ │ │ │ │ │ │ │ │ 📍 Banyan Tree Dubai │ │ 📍 Business Bay │ │ │ │ 🕐 営業時間概要 │ │ 🕐 営業時間概要 │ │ │ │ 🏆 受賞バッジ │ │ 🏆 受賞バッジ │ │ │ │ │ │ │ │ │ │ [View Restaurant →] │ │ [View Restaurant →] │ │ │ │ [Book a Table →] │ │ [Book a Table →] │ │ │ └───────────────────┘ └───────────────────┘ │ │ │ │ ※ 現在地店舗カードには「You are here」バッジ追加 │ ├─────────────────────────────────────────────┤ │ Map Section（両店舗の位置を1つの地図に表示） │ ├─────────────────────────────────────────────┤ │ Footer（共通、姉妹店リンクは現在のサイトとは別店舗）│ └─────────────────────────────────────────────┘ ``` #### カード内容（共通フィールド） | フィールド | 内容例 | |---|---| | 店舗写真 | 外観 or 内装写真（各サイトから流用、解像度確認要） | | 店舗名 | "TakaHisa Bluewaters" / "TakaHisa Downtown" | | ポジションバッジ | "Flagship Restaurant" / "Second Branch" | | 一言コンセプト | 約30〜50字、各店舗の特色を伝える | | 住所 | 既存サイトの記載を流用 | | 営業時間 | 既存の構造化データから引用 | | 受賞バッジ | Michelin / Gault&Millau / MENA 50 Best | | アクション | [View Restaurant]（外部、別タブ）+ [Book a Table]（SevenRooms、別タブ） | ### 6.4 フッター姉妹店ブロック 全ページ共通フッターに、控えめなブロックを追加: ``` ───────────────────────────────────── SISTER RESTAURANT TakaHisa Downtown / Bluewaters → Business Bay / Bluewaters Island, Dubai ───────────────────────────────────── ``` - 既存のSNSアイコンやコピーライトとの並びを整える - リンクは **別タブ** で開く（`target="_blank" rel="noopener noreferrer"`） ### 6.5 リンク動作ルール | リンク先 | 動作 | 理由 | |---|---|---| | Locationsページ（自サイト内） | **同タブ** | 通常のサイト内遷移 | | 姉妹店サイトTOP（外部） | **別タブ** | 元サイトを失わないため | | SevenRooms予約（外部） | **別タブ** | 既存サイト挙動に合わせる | 全外部リンクに `rel="noopener noreferrer"` 必須。 --- ## 7. BT側実装方針（静的HTML） ### 7.1 前提 - 静的HTMLサイト（3言語別ファイル） - 取り込み済みソース: `C:\WorkSpace\AI\takahisa\git\takahisa-lp\` - デプロイ: `release/YYYY-MM-DD-N` → `es-777/takahisa` PR 経由 - 多言語: EN / RU / ZH（注: README記載の "ja/zh/ru" は誤り、実際は EN/RU/ZH） ### 7.2 既存ファイル構成（参考） | ファイル | サイズ | 役割 | |---|---|---| | [index.html](../../git/takahisa-lp/index.html) | 44KB | EN版（メイン） | | [russian.html](../../git/takahisa-lp/russian.html) | 50KB | RU版 | | [chinese.html](../../git/takahisa-lp/chinese.html) | 42KB | ZH版 | | [css/deco_n2.css](../../git/takahisa-lp/css/deco_n2.css) | - | メインスタイル | | [css/sticky_icon.css](../../git/takahisa-lp/css/sticky_icon.css) | - | アイコン位置 | ### 7.3 改修箇所詳細 #### (a) ヘッダー改修（各3言語ファイル共通） **対象**: `index.html` line 195-231（および同等部分の russian.html / chinese.html） ```html Bluewaters ``` CSS追加（`css/deco_n2.css` または新規 `css/cross-link.css`）: ```css .logo-subtitle { display: block; font-size: 0.9rem; letter-spacing: 0.1em; color: #b09465; /* TBD: 既存ブランドカラー確認 */ text-align: center; margin-top: 0.5rem; } ``` #### (b) ナビゲーション改修 **対象**: `index.html` line 237-261（`
` 内） ```html ``` **配置の意図**: ユーザーが「予約前に店舗を確認」できる位置（Reservationsの直前）。 #### (c) Locationsページ新規作成 **新規ファイル**: - `locations.html`（EN版） - `locations-ru.html` または `russian-locations.html`（RU版、既存命名規則を尊重） - `locations-zh.html` または `chinese-locations.html`（ZH版） → **命名規則**: 既存パターン（`russian.html` / `chinese.html`）に合わせ、`russian-locations.html` / `chinese-locations.html` を採用。 各ページの構造: - 既存サイトのヘッダー / フッター / CSS を流用 - メインコンテンツのみ Locationsページ用に - 既存のJSライブラリ（Swiper等）は最小限のみ読み込み #### (d) フッター姉妹店ブロック追加 **対象**: 各HTMLファイルの footer 領域（line 1101周辺） 既存のコピーライト直前に Sister Restaurant ブロックを挿入。 #### (e) 構造化データ追加（**現状なし、新規追加**） **現状**: BT側は JSON-LD なし、OG/Twitter meta のみ **追加箇所**: `` 内（既存 meta タグの後） ```html ``` #### (f) canonical / hreflang 設定 **現状**（line 20）: ```html ``` **追加**: ```html ``` 各Locationsページにも同様の hreflang を設定。 --- ## 8. DT側実装方針（Next.js） ### 8.1 前提 - Next.js 16.1 + React 19 + Tailwind v4 - `output: 'export'` 静的書き出し（SSR・dynamic route 不可） - 取り込み済みソース: `C:\WorkSpace\AI\takahisaDT\git\takahisa-downtown-lp\` （DT側セッション管轄、本セッションは参照のみ） - 多言語: 実質EN単独（`app/locales/locales.ts` line 6: `export const locales = { en }`）── 今回スコープ外で維持 ### 8.2 改修箇所詳細 #### (a) ヘッダー改修 **対象**: `app/sections/HeaderSection/HeaderSection.tsx` ```tsx // 現状（line 31-38） const navLinks: NavLink[] = [ { href: "#concept", label: "Shop Concept" }, { href: "#awards", label: "Awards" }, { href: "#intro", label: "Chef Introduction" }, { href: "#grandmenu", label: "Grand Menu" }, { href: "#gallery", label: "TakaHisa Gallery" }, { href: "#shop", label: "Shop Information" }, ]; // 改修後（Locations追加） const navLinks: NavLink[] = [ { href: "#concept", label: "Shop Concept" }, { href: "#awards", label: "Awards" }, { href: "#intro", label: "Chef Introduction" }, { href: "#grandmenu", label: "Grand Menu" }, { href: "#gallery", label: "TakaHisa Gallery" }, { href: "/locations", label: "Locations" }, // 新規、別ルート { href: "#shop", label: "Shop Information" }, ]; ``` ロゴサブテキスト追加（line 314-320 周辺）: ```tsx // 現状
TakaHisa Downtown
// 改修後（サブテキスト追加）
TakaHisa Downtown Business Bay
``` #### (b) Locationsページ新規作成 **新規ファイル**: `app/locations/page.tsx` `output: 'export'` のため静的ルーティング。既存セクションコンポーネント設計を踏襲。 ```tsx "use client"; import HeaderSection from "../sections/HeaderSection/HeaderSection"; import FooterSection from "../sections/FooterSection/FooterSection"; import LocationsSection from "../sections/LocationsSection/LocationsSection"; // 新規 import { locales } from "../locales/locales"; export default function LocationsPage() { const translations = locales['en']; return ( <>
); } ``` #### (c) Locations セクションコンポーネント新規作成 **新規ファイル**: `app/sections/LocationsSection/LocationsSection.tsx` 既存のセクションコンポーネント（`ShopSection.tsx` 等）のスタイルパターン踏襲。 #### (d) フッター姉妹店リンク追加 **対象**: `app/sections/FooterSection/FooterSection.tsx` 既存の email button (line 21-46) と SNS (line 47-62) の間、または copyright (line 63-68) の上に Sister Restaurant ブロックを追加。 `Props` を拡張するか、または定数ファイルでBT本店URLを管理: ```tsx // 新規: app/lib/sisterRestaurant.ts export const SISTER_RESTAURANT = { name: "TakaHisa Bluewaters", url: "https://takahisa.ae/", location: "Bluewaters Island, Dubai" }; ``` #### (e) 構造化データ拡張 **対象**: `app/layout.tsx` line 66-112（既存 `structuredData` オブジェクト） ```ts // 現状（line 108-111） "sameAs": [ "https://www.facebook.com/takahisadubai/", "https://www.instagram.com/takahisa_downtown/" ] // 改修後（BT本店URL追加） "sameAs": [ "https://takahisa.ae/", // BT本店追加 "https://www.facebook.com/takahisadubai/", "https://www.instagram.com/takahisa_downtown/" ] ``` Locationsページ用に `app/locations/layout.tsx` を新設し、`@graph` で2店舗の `Restaurant` エンティティを記述するのも検討。 #### (f) ロケールスキーマ追加 **対象**: `app/locales/en.schema.json` ```json { ...既存キー..., "locations": { "hero": { "title": "Our Locations", "subtitle": "Choose your TakaHisa experience in Dubai" }, "items": [ { "name": "TakaHisa Bluewaters", "badge": "Flagship Restaurant", "concept": "Our flagship restaurant on Bluewaters Island...", "address": "Banyan Tree Dubai, 1st Floor", "siteUrl": "https://takahisa.ae/", "reservationUrl": "https://www.sevenrooms.com/reservations/takahisa", "image": "/assets/images/locations/bluewaters.jpg", "isCurrent": false }, { "name": "TakaHisa Downtown", "badge": "Second Branch", "concept": "Our Downtown branch in Business Bay...", "address": "Volante Tower 1, 4F, Business Bay", "siteUrl": "https://downtown.takahisa.ae/", "reservationUrl": "https://www.sevenrooms.com/explore/takahisabusinessbay", "image": "/assets/images/locations/downtown.jpg", "isCurrent": true } ] } } ``` `ja.schema.json` にも同じ構造を追加（中身は英語 or 翻訳、運用方針による）。 --- ## 9. 想定スケジュール・工数 ### 前提 - 必要な素材（翻訳文言、店舗写真等）は顧客側から即時提供される - 顧客レビューは1ラウンドで完了する想定 ### 工数（人日基準） | フェーズ | 工数 | 成果物 | |---|---|---| | 1. 設計書ドラフト | 完了 | 本資料 | | 2. WBS（BT/DT別） | 完了 | [bt-scope.md](bt-scope.md) / [dt-scope.md](dt-scope.md) | | 3. デザインカンプ制作（実LP注釈オーバーレイ方式） | 0.5〜0.8人日 | mockups/ 配下 | | 4. 社内レビュー → 修正 | 0.5人日 | mockups/ 更新 | | 5. 顧客共有資料作成 | 0.3〜0.5人日 | customer-share/ 配下 | | 6. お客様レビュー対応（1ラウンド） | 0.5人日 | mockups/ 更新 | | 7. BT側実装 | 3〜3.5人日 | [bt-scope.md](bt-scope.md) 参照 | | 8. DT側実装 | 2.5〜3.5人日 | [dt-scope.md](dt-scope.md) 参照 | **合計**: **約 7.5〜9.5人日** ### 懸念点（バッファには含まない、注記のみ） - 顧客レビューが2ラウンド以上発生する場合、+0.5〜1.0人日 - BT側の既存CSS構造による予期せぬ干渉が発生した場合、+0.5人日 --- ## 10. お客様確認事項 デザイン提示時に併せて確認したい項目: 1. **DT側 RU/ZH対応の要否** ── 今回スコープ外（EN単独維持）でよいか 2. **Locationsページの店舗紹介内容** ── 簡易カード or 詳細紹介、どこまで載せるか 3. **店舗写真の素材提供** ── 既存サイトから流用でよいか、新規撮影は不要か 4. **フッター姉妹店ブロックの位置・文言** ── "Sister Restaurant" 等のラベル 5. **「View Restaurant」/「Book a Table」のラベル文言** ── 各サイト個別ラベル or 統一 6. **公開タイミング** ── 両店舗同時公開か段階公開か 7. **DT顧客リポ/デプロイ先** ── まだ未共有のため、共有依頼 --- ## 11. 未確定事項（社内） | # | 項目 | 対応方針 | |---|---|---| | 1 | DT顧客リポ/デプロイ先 | 顧客側からのURL共有待ち（DT側 issue で追跡） | | 2 | DT側 i18n半端実装 | 別タスク化、本プロジェクトでは触らない | | 3 | BT側 README記載の言語（"ja/zh/ru"） | 実態は EN/RU/ZH。README修正は別タスク | | 4 | モックアップ制作ツール | 「実LPにスクショ＋注釈オーバーレイ」方式（合意済み） | | 5 | 翻訳ワークフロー | RU/ZHの Locations文言は顧客提供 or 翻訳業者を確認 | | 6 | BT側 brand color | CSS確認後に確定（サブテキスト・バッジ色） | | 7 | 店舗写真の URL | 各サイトの既存画像から流用予定（高解像度確認要） | --- ## 12. 参照 ### リポジトリ・ソース - BT側ソース: `C:\WorkSpace\AI\takahisa\git\takahisa-lp\` - DT側ソース: `C:\WorkSpace\AI\takahisaDT\git\takahisa-downtown-lp\`（参照のみ） ### 主要参照ファイル | ファイル | 役割 | |---|---| | [index.html line 195-261](../../git/takahisa-lp/index.html) | BTヘッダー・ナビゲーション・言語切替 | | [index.html line 293-294](../../git/takahisa-lp/index.html) | BT予約リンク（SevenRooms） | | [index.html line 1101](../../git/takahisa-lp/index.html) | BTコピーライト（フッター末尾） | | `app/page.tsx` (DT) | DTメインページ構成 | | `app/sections/HeaderSection/HeaderSection.tsx` (DT) line 31-38 | DT navLinks 配列 | | `app/sections/FooterSection/FooterSection.tsx` (DT) | DTフッター | | `app/layout.tsx` (DT) line 66-112 | DT構造化データ | | `app/locales/locales.ts` (DT) | DT i18n（EN単独運用） | | `app/locales/en.schema.json` (DT) | DT英語翻訳キー | ### 関連issue / リンク - BT側 issue: https://github.com/syn-okami/takahisa-lp/issues/5 - DT側 issue: https://github.com/syn-okami/takahisa-downtown-lp/issues/4 - DT側 運用整備 PR: https://github.com/syn-okami/takahisa-downtown-lp/pull/6 - BT本番サイト: https://takahisa.ae/ - DT本番サイト: https://downtown.takahisa.ae/