# BT側 対応内容・工数（社内用）

| 項目 | 内容 |
|---|---|
| 対象サイト | TakaHisa Bluewaters（本店） |
| リポジトリ | `syn-okami/takahisa-lp` |
| 本番URL | https://takahisa.ae/ |
| デプロイ先 | `es-777/takahisa`（Azure Static Web Apps） |
| 技術スタック | 静的HTML / CSS / jQuery + 各種ライブラリ（Swiper, FontAwesome, LocomotiveScroll 等） |
| 多言語 | EN / RU / ZH（3言語別ファイル） |
| 関連設計書 | [DESIGN.md](DESIGN.md) |
| 関連issue | https://github.com/syn-okami/takahisa-lp/issues/5 |

---

## 0. 前提

- 翻訳文言（RU / ZH）、店舗写真等の素材は顧客側から即時提供される
- 中級フロントエンジニア + AI補助前提

---

## 1. ゴール（BT側だけの観点）

BTサイトに以下が追加される:

1. ヘッダーロゴ脇に「Bluewaters」サブテキスト
2. ナビゲーションに「Locations」メニュー項目（`locations.html` 等へリンク）
3. 新ページ「Locations」を3言語分追加
4. フッターに「Sister Restaurant」ブロック（DT本店へのリンク）
5. 構造化データ `Restaurant` + `sameAs`（DT本店URL）を新規追加
6. canonical / hreflang 設定の整備

---

## 2. 改修対象ファイル一覧

### 既存ファイル（編集）

| ファイル | 主な変更 |
|---|---|
| [`index.html`](../../git/takahisa-lp/index.html) | ヘッダー・ナビ・フッター・`<head>` |
| [`russian.html`](../../git/takahisa-lp/russian.html) | 同上、RU版 |
| [`chinese.html`](../../git/takahisa-lp/chinese.html) | 同上、ZH版 |
| `css/deco_n2.css` | サブテキスト・新セクション用スタイル（または `css/cross-link.css` 新規） |
| `sitemap.xml` | 新規Locationsページを追加 |

### 新規ファイル

| ファイル | 内容 |
|---|---|
| `locations.html` | Locationsページ（EN版） |
| `russian-locations.html` | Locationsページ（RU版） |
| `chinese-locations.html` | Locationsページ（ZH版） |
| `css/cross-link.css`（推奨）| 新規追加CSS（既存に直接書くより分離） |
| `images/locations/bluewaters.jpg` | Locationsカード用写真（顧客供給） |
| `images/locations/downtown.jpg` | Locationsカード用写真（顧客供給） |

---

## 3. タスク別 工数

| # | タスク | 工数 | 概要 |
|---|---|---|---|
| 3.1 | 準備・調査 | 0.25人日 | 既存CSS命名規則・ブランドカラー確認 |
| 3.2 | ヘッダー改修 × 3言語 | 0.2人日 | ロゴ脇 `<span>` 追加 × 3ファイル + CSS |
| 3.3 | ナビ改修 × 3言語 | 0.15人日 | `<li>` 1行追加 × 3ファイル |
| 3.4 | Locationsページ新規 × 3言語 | 0.7〜1.0人日 | EN版テンプレ作成 + RU/ZH翻訳流し込み + CSS |
| 3.5 | フッター姉妹店ブロック × 3言語 | 0.15人日 | 数行 × 3ファイル + CSS |
| 3.6 | 構造化データ（JSON-LD）× 3言語 | 0.3人日 | テンプレ作成 + 3ファイル展開 + Locations用@graph |
| 3.7 | canonical / hreflang | 0.1人日 | meta tag 6セット |
| 3.8 | sitemap.xml 更新 | 0.1人日 | 3言語Locationsエントリ追加 |
| 3.9 | テスト・検証 | 0.3〜0.4人日 | PRプレビュー・モバイル・SEO検証 |
| 3.10 | リリース | 0.2人日 | release/* → es-777/takahisa PR |
| | **BT側合計** | **約 3〜3.5人日** | |

---

## 4. タスク詳細

### 4.1 準備・調査（0.25人日）

- [ ] `css/deco_n2.css` 既存命名規則の確認
- [ ] ブランドカラーの抽出
- [ ] 3言語ファイル（index/russian/chinese）の構造差分把握
- [ ] Locationsカード写真の確認（顧客供給を待つ）

### 4.2 ヘッダー改修（0.2人日）

**改修箇所**: `index.html` line 195-198（および同等部分の russian.html / chinese.html）

```html
<!-- 現状（line 195-198） -->
<a href="index.html"><img src="images/logo.webp" alt="" width="200" height="258" fetchpriority="high" /></a>

<!-- 改修後 -->
<a href="index.html">
  <img src="images/logo.webp" alt="" width="200" height="258" fetchpriority="high" />
  <span class="logo-subtitle">Bluewaters</span>
</a>
```

CSS追加（`css/deco_n2.css` または新規 `css/cross-link.css`）:

```css
.logo-subtitle {
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: #b09465; /* 既存ブランドカラー確認後に確定 */
  text-align: center;
  margin-top: 0.5rem;
}
```

### 4.3 ナビゲーション改修（0.15人日）

**改修箇所**: `index.html` line 237-261（`<section class="navigation">` 内 `<ul class="tab_link">`）

```html
<!-- 現状（line 241-257） -->
<ul class="tab_link">
  <li><a href="#homepage" data-scroll-to>Home</a></li>
  <!-- 中略 -->
  <li><a href="#reservationspage" data-scroll-to>Reservations</a></li>
  <li><a href="#contactpage" data-scroll-to>Contact us</a></li>
</ul>

<!-- 改修後（Reservationsの直前にLocations追加） -->
<ul class="tab_link">
  <li><a href="#homepage" data-scroll-to>Home</a></li>
  <!-- 中略 -->
  <li><a href="locations.html">Locations</a></li>  <!-- 新規 -->
  <li><a href="#reservationspage" data-scroll-to>Reservations</a></li>
  <li><a href="#contactpage" data-scroll-to>Contact us</a></li>
</ul>
```

各言語ファイルで Locations 表記は言語別に翻訳（または英語表記統一は顧客確認）。

### 4.4 Locationsページ新規作成（0.7〜1.0人日）

**新規ファイル**:
- `locations.html`（EN版、基準）
- `russian-locations.html`（RU版）
- `chinese-locations.html`（ZH版）

**構成**:
- 既存サイトの `<head>`・ヘッダー・フッターを流用
- メインコンテンツ: Hero + 2店舗カード + 地図セクション
- JSライブラリは最小限のみ読み込み

**工数内訳**:
- EN版テンプレ作成（HTML + CSS）: Hero 0.5h + カード×2 1.5h + 地図 0.5h = 2.5h
- RU/ZH 翻訳流し込み + 微調整: 0.5h × 2 = 1h
- 共通CSS整備（`css/cross-link.css`）: 1〜1.5h
- 計: 約 5〜6h = **0.7〜1.0人日**

#### 注意点

- Locomotive Scroll は使うか判断（軽量化目線で外す選択肢あり）
- jQuery / Swiper / FancyBox 等の依存は必要最小限に絞る

### 4.5 フッター姉妹店ブロック追加（0.15人日）

**改修箇所**: 各HTMLファイルの footer 部分（`index.html` line 1101 周辺のコピーライト直前）

「Sister Restaurant」ブロックをコピーライト上に追加。DT本店URL（`https://downtown.takahisa.ae/`）を別タブで開く。

### 4.6 構造化データ追加（0.3人日）

**現状**: BT側に JSON-LD は**存在しない**（OG/Twitter meta タグのみ）

**改修箇所**: 各HTMLの `<head>` 内（既存 meta タグの直後）

```html
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Restaurant",
  "name": "TakaHisa Bluewaters",
  "url": "https://takahisa.ae/",
  "sameAs": [
    "https://downtown.takahisa.ae/",
    "https://www.facebook.com/takahisadubai/",
    "https://www.instagram.com/takahisa_dubai/"
  ],
  ...
}
</script>
```

Locationsページには `@graph` で2店舗の `Restaurant` を記述。

### 4.7 canonical / hreflang 設定（0.1人日）

各既存ページ + 各Locationsページに `<link rel="alternate" hreflang>` を相互設定。

```html
<link rel="alternate" hreflang="en" href="https://takahisa.ae/" />
<link rel="alternate" hreflang="ru" href="https://takahisa.ae/russian.html" />
<link rel="alternate" hreflang="zh" href="https://takahisa.ae/chinese.html" />
<link rel="alternate" hreflang="x-default" href="https://takahisa.ae/" />
```

### 4.8 sitemap.xml 更新（0.1人日）

3言語分の Locationsページを `<url>` エントリで追加。

### 4.9 テスト・検証（0.3〜0.4人日）

- Azure SWA PRプレビューで3言語ページの表示確認
- リンク動作（Locations / 姉妹店 / 予約導線）
- モバイル表示確認
- Lighthouse / Google Rich Results Test

### 4.10 リリース（0.2人日）

`README.md` のリリースフローに従う:
1. `git fetch deploy && git log main..deploy/main --oneline`
2. `release/YYYY-MM-DD-N` を `es-777/takahisa` に push
3. 顧客リポで PR 作成 → プレビュー確認 → マージ
4. `syn-okami` 側にリリースタグを残す

---

## 5. 懸念点（バッファ外、注記のみ）

| # | 懸念点 | 対処方針 |
|---|---|---|
| 5.1 | 顧客レビュー追加ラウンド | 1ラウンド前提。追加発生時は別途相談 |
| 5.2 | 既存CSSの命名衝突・読みづらさ | 新規CSSは別ファイル（`css/cross-link.css`）に分離 |
| 5.3 | 既存JSライブラリの依存度 | Locationsページは最小限のみ読み込み |
| 5.4 | 顧客側（`es-777/takahisa`）先行コミット | リリース前のチェックで吸収 |
| 5.5 | 写真素材の解像度 | 顧客供給前提、解像度確認は受領時に実施 |

---

## 6. 受入条件

実装完了の判定基準:

- [ ] 3言語すべてでヘッダーロゴ脇にサブテキストが表示される
- [ ] 3言語すべてのナビに「Locations」が表示され、各言語別 Locations ページへ遷移する
- [ ] Locationsページから「View Restaurant」「Book a Table」がそれぞれ別タブで起動する
- [ ] フッター姉妹店リンクが3言語すべてで動作する
- [ ] 各ページの JSON-LD が Google Rich Results Test で valid
- [ ] hreflang が3言語間で相互設定されている
- [ ] sitemap.xml に新Locationsページが含まれる
- [ ] Azure SWA PRプレビューで表示確認完了
- [ ] モバイルレイアウトも動作する

---

## 7. 関連リンク

- 全体設計書: [DESIGN.md](DESIGN.md)
- DT側 scope: [dt-scope.md](dt-scope.md)
- BT側 README: [`takahisa-lp/README.md`](../../git/takahisa-lp/README.md)
- BT本番サイト: https://takahisa.ae/
- 関連issue: https://github.com/syn-okami/takahisa-lp/issues/5
