翠紅苑 ウェブサイトリニューアル 仕様・進捗
概要
2027年1月上旬の公開を目標に、設計・コンセプトがほぼ固まり、デザイン確定と実装の準備段階に入っています。予約システム連携は、スペースキーが担当する作業範囲と進め方が固まりました。
- コンセプト：「秘境に、本格旅館がある。」
- ターゲット：夢のつり橋・奥大井湖上駅などを目的に訪れる観光客。次いでインバウンド（訪日客）
- 公開目標：2027年1月上旬（公開後の不具合に早急に対応できるよう、年末年始を避ける）。翻訳・チャットボットは公開後に追加
体制
| 担当範囲 | 担当 |
|---|---|
| 全体進行・設計 | 川口（インターネット販売戦略サポート 翼）／補助：栗田プロダクション |
| デザイン | 栗田プロダクション |
| コーディング | 株式会社カボス |
| 撮影 | 必要に応じて都度依頼（複数社） |
| 動画制作 | 栗田プロダクション |
| 予約システム連携 | スペースキー |
| 天気予報ウィジェット | 川口 |
| チャットボット | talkappi（代理店：JTB）または、トリップAIコンシェルジュ（リクルート）（設定は川口） |
| 翻訳 | e-365株式会社（設定は川口） |
システム（ドメイン・URL・サーバー等）
新サイトはXSERVER（制作会社が選定）で構築し、ドメイン・URLは現行のまま公開する予定です。予約システムは別サーバーのため、ウェブサイトと同じドメインは使えません。
現在の管理状況
| 項目 | 管理先 |
|---|---|
| ドメイン管理・DNS設定 | スペースキー |
| ウェブサーバー | ヤドバンス専用サーバー（スペースキーが管理） |
| メールサーバー | wadax（翠紅苑が管理） |
仕様・設定・担当
| 項目 | 内容 |
|---|---|
| サーバー（ウェブサイト） | XSERVER（制作会社選定）を予定 |
| サーバー（予約システム） | 専用サーバー |
| ドメイン（ウェブサイト） | 現行と同じ |
| ドメイン（予約システム［プランページ］） | ウェブサイトのサブドメイン ※現状ではウェブサイトと同じドメインを利用できないため |
| ドメイン（予約システム［予約ページ］） | 予約システムで利用しているドメイン ※現状ではウェブサイトと同じドメインを利用できないため |
| URL（ウェブサイト） | 現行と同じとすることを予定 |
| 空室検索ボックス（予約システム連携） | JS制作およびウェブサイトへの設置はスペースキーが担当 |
| 翻訳機能（ウェブサイト） | shutto翻訳を導入（設定は川口） |
| 翻訳機能（予約システム） | ヤドバンスの英語機能を利用（英語以外は不可）※ドメインが異なるため、ウェブサイトと同じshutto翻訳アカウント利用不可（アカウント追加で対応可能だが、利用料負担が大きくなる） |
| チャットボット | talkappi（代理店：JTB）または、トリップAIコンシェルジュ（リクルート）（設定は川口） |
決定・予定事項
- XSERVERの接続情報（SFTP）をスペースキーへ共有する
- プラン一覧ページのサブドメイン名候補：plan
- ドメイン管理・DNS設定は、引き続きスペースキーが管理する
機能
予約連携はスペースキーの作業範囲が固まり、翻訳とチャットボットは公開後に追加します。
予約（ヤドバンス連携）
| 作業 | 状況 | 着手条件 |
|---|---|---|
| ① プラン画面のヘッダー・フッターを新サイトに合わせる | 未着手 | トップページのコーディング完了 |
| ② 空室検索（日付検索）ボックスの設置 | JS制作中 | JS完成＋サブドメイン設定＋トップページのコーディング完了 |
| ③ ドメイン切り替え（プラン画面のサブドメイン化・公式サイトの切替） | 未着手 | ウェブサイト公開時 |
- 空室検索の設置方法：スペースキーが新サーバーに直接アクセスして実装する方式に決定（同社推奨。工期が最短で不具合も起きにくい）
- 空室検索の仕様は確認済み
- 人気プラン表示：これまではヤドバンス管理画面で更新。新サイトではWordPress側で更新できる仕組み（カスタムフィールド）を予定している
- バナー制作：翻訳した時に対応するバナーはスペースキーが対応（言語ごとにバナーを制作する）
- 英語プランの作成（設定・翻訳等）は川口が担当
- 現サイトの運用対応も継続中：日帰り入浴の料金・時間の表記修正を本番反映（9月16日）、トップの人気プランは毎月更新
翻訳
- ウェブサイト：shutto翻訳を導入（ページにタグを1行追加するだけで多言語化できる方式。設定は川口）。公開後に追加
- 予約システム：ヤドバンスの英語機能を利用（英語以外は不可）
- 全ページを英語に翻訳する
shutto翻訳の主な機能
| 機能 | 内容 |
|---|---|
| 言語数 | 10言語まで対応可能（初期は英語のみとする） |
| 自動翻訳 | ページ内テキストを自動で翻訳 |
| セルフ翻訳 | 自動翻訳後のテキスト修正が可能 |
| 画像置換 | 言語ごとに画像を置き換えることが可能 |
| META／ALT翻訳 | 検索エンジン対応 |
| コンテンツ編集 | 言語ごとにHTML・CSSの編集が可能（レイアウト修正や要素の追加・削除など） |
| 辞書登録 | 商品名や施設名などの固有名詞を登録可能 |
チャットボット
- 公開後に追加。talkappi（代理店：JTB）または、トリップAIコンシェルジュ（リクルート）から選定。設定は川口
- 客室ページ構成案2で、画面右下にボタンを置く配置を確認済み
2サービス共通の主な機能
| 機能 | 内容 |
|---|---|
| 24時間自動応答 | お客様の質問にAIがチャット形式で即時に回答。夜間やスタッフ不在時も対応 |
| 多言語対応 | 訪日客の問い合わせにも外国語で対応 |
| 公式サイトへの設置 | ウェブサイト上に問い合わせ窓口（チャット画面）を設置 |
| 旅マエ・旅ナカ対応 | 予約前の検討客から滞在中のお客様まで、同じ窓口で対応 |
| 回答の登録・学習 | 施設の情報や回答を登録し、問い合わせの蓄積で回答精度を高める |
出典：talkappi、トラベルボイス（トリップAIコンシェルジュ）
その他の機能
| 機能 | 仕様 | 状況 |
|---|---|---|
| 天気予報（7日間） | 気象庁の公開データを自動取得 | 試作済み |
| 交通情報バー | 「交通情報」カテゴリーの最新お知らせ1件を表示する簡易機能。 更新は通常の投稿で行う |
仕様詳細を調整中 |
| 最新投稿を一覧表示 | 導入時期未定 実装時に方法を確定 |
|
| Googleストリートビュー | 玄関の様子を360°表示 | 現行サイトのものを流用 構成案に配置済み |
| モデルコース | 晴れの日／雨の日の2種 | 構成案に配置済み 別途取材・撮影が必要 場合によっては、サイトアップ後に追加 |
JS（プログラム）
プログラムが必要なのは主に5箇所で、空室検索はスペースキー、天気予報はJS制作を川口・設置をカボス、トップの動画は制作を栗田プロダクション・サイトへの組み込みをカボスが担当し、翻訳とチャットボットはタグ設置をカボス、設定・管理を川口が担当します。
| 箇所 | 内容 | 担当 |
|---|---|---|
| 空室検索 | 宿泊日・人数を入れて予約画面へ移動。当初は埋め込みコードの提供を依頼したが、サーバー上への直接実装に変更 | スペースキー |
| トップの動画 | ①無音で自動再生する背景動画（2～3周で最後の画面で止める）、②ボタンで開く音声つきのストーリー動画（閉じるボタンつき、最後に予約ボタンを重ねて表示） | 制作：栗田プロダクション／サイトへの組み込み：株式会社カボス |
| 天気予報 | 気象庁のデータを取得し、直近3日は精度の高い短期予報、残りは週間予報で表示 | JS制作：川口／設置：株式会社カボス |
| 翻訳 | shutto翻訳のタグを設置 | タグ設置：株式会社カボス／設定・管理：川口（公開後） |
| チャットボット | 選定したサービスのタグを設置 | タグ設置：株式会社カボス／設定・管理：川口（公開後） |
コーディング（構築）
WordPressで構築し、既製のテーマではなく、翠紅苑専用のオリジナルテーマで作る。
- 変更理由：既製テーマは、デザインや動画や独自レイアウトに制約があるため
- 更新のしやすさ：お知らせ・交通情報・プランなど宿側で更新する箇所は、管理画面から入力できる形にする
- お知らせ：旧ブログ記事は移行せず、新規に作り直す。カテゴリーは「お知らせ／交通案内／プラン」程度に絞る
- 確認の進め方：各ページの構成案を先にHTMLで作り、確認用URLで関係者が確認してから本実装する
制作スケジュール（2026年9月～2027年1月、ドラフト）
- 設計・コンセプト確定 — ほぼ完了
- 素材準備（写真・動画） — 進行中
- 実装 — デザイン確定後に着手
- レビュー — 2026年内予定
- 公開 — 2027年1月上旬予定
デザイン
トップページは「構成案2」をベースに進め、観光の魅力を先に見せる構成です。
進め方
- 下層ページのデザインは、トップページのデザインが確定してから着手
- 客室ページ以外の構成案は、客室ページの構成案の採用が決まってから着手
サイト構成
- メニューを5項目に整理：宿泊・プラン／お部屋／料理・温泉／周辺・観光／翠紅苑について
- 「宿の魅力」ページは廃止し、内容をトップページに統合
- 日帰り利用は1ページにまとめ、観光案内には子ページ（夢のつり橋ガイド・モデルコース）を設ける
トップページ
- 構成案2：全面の大きなビジュアル＋左右交互に写真と文章を並べる構成。観光（夢のつり橋・奥大井湖上駅）を上部に配置
- 構成案3：構成案2に交通情報・天気予報・Instagram・モデルコース・お知らせ・ストリートビューを加えた版
- 配色：渓谷のエメラルドグリーンと、暖簾の深紅を基調にする
客室ページ
- 構成案1・2を作成済み。構成案2は左右交互レイアウト＋間取り図＋写真ギャラリー＋「定員でさがす」機能
- 客室：家族風呂付き特別室・和室4タイプ・洋室2タイプ。茶香炉を「ネット予約限定特典」として訴求
トップの動画
| 動画 | 長さ | 役割 |
|---|---|---|
| ① ヒーロー動画 | 約25秒 | 無音・自動再生。第一印象づくり |
| ② ストーリー動画 | 約60秒 | クリックで再生。奥大井の旅と翠紅苑を拠点として紹介 |
- 10月に尺を見直し（以前は15秒／40秒）。1カットが短すぎて景色が伝わらないため
- 素材は撮影済み（ドローン映像 約70秒など）。動画制作会社向け仕様書を公開済み
写真
- 撮影リスト（写真68点）を作成し、「新規撮影」と「既存流用」に仕分け済み
確認用URL一覧
すべての構成案は「制作資料一覧」ページからたどれます。
| 資料 | URL |
|---|---|
| 制作資料一覧 | suikoen-index.pages.dev |
| サイトマップ | suikoen-sitemap.pages.dev |
| トップ 構成案1 | suikoen-home.pages.dev |
| トップ 構成案2・3 | suikoen-home-2.pages.dev |
| 客室 構成案1 | suikoen-room.pages.dev |
| 客室 構成案2 | suikoen-room-2.pages.dev |
| 動画① 背景動画 仕様書 | suikoen-movie-1-1.pages.dev |
| 動画② ストーリー動画 仕様書 | suikoen-movie-1-2.pages.dev |
進捗サマリー
最大の待ちは「デザイン確定」と「ヒーロー動画確定」で、トップページのコーディングは、この2点が決まり次第着手できます。
| 分野 | 状況 | 次のアクション |
|---|---|---|
| システム（ドメイン・URL・サーバー等） | 方針確定。サーバーはXSERVER予定 | 接続情報をスペースキーへ共有 |
| 予約連携 | 依頼内容・実装方法とも確定 | トップページのコーディング完了後にスペースキーが着手 |
| 翻訳・チャットボット | 公開後に追加（翻訳はshutto翻訳で決定） | 公開後に導入 |
| JS（プログラム） | 仕様確定、一部試作済み | 実装フェーズで制作 |
| コーディング | 構築方式・制作会社確定 | デザイン確定後に実装 |
| デザイン | 構成案・動画仕様書まで完了 | 方向性の最終確定 |
今後決めること・ToDo
先頭の2つが決まると、予約連携と実装が一気に進められます。
- デザインの最終確定と、トップページのコーディング完了（スペースキーのヘッダー・フッター、空室検索の着手条件）
- ヒーロー動画の確定（トップページのコーディング着手条件）
- 客室ページ構成案の採用を決める（決定後、客室ページ以外の構成案に着手）
- 写真の新規撮影と、動画の編集発注
- XSERVERの接続情報をスペースキーへ共有
- プラン一覧ページのサブドメイン名を確定する（候補：plan）
- 新旧URL対照表の作成（ページ確定後、スペースキー）