お風呂の設備と温泉に特化した国内旅行予約サイトのデモです。
- 風呂・トイレ別の客室だけを掲載 — ユニットバスの部屋は一室も載せない
- 温泉宿もビジネスホテルも同じ基準 — 都心の出張ステイでも「湯船を諦めない」
- 洗い場付きの浴室が基準 — かけ湯をして、ゆっくり浸かれる部屋だけ
- お風呂の設備から検索できる — 宿タイプ(温泉宿/ビジネスホテル)・貸切露天風呂・客室露天風呂・源泉かけ流し・大浴場・サウナ・泉質など
- 湯の情報を正直に表示 — 泉質、かけ流し/循環、加水加温、貸切風呂の料金と予約方法まで明記
| ページ | ファイル | 内容 |
|---|---|---|
| トップ | index.html |
検索パネル、お風呂タイプ別導線、おすすめ宿、掲載基準 |
| 検索結果 | search.html |
お風呂タイプ・泉質・エリア・料金でのフィルターと並び替え |
| 宿詳細 | detail.html?id=... |
温泉データ、貸切風呂一覧、客室ごとのお風呂スペック表、楽天トラベル・公式サイトへの送客CTA |
| エリア特集LP | tokyo.html / osaka.html / kyoto.html / okinawa.html / hokkaido.html |
SEO向けの静的ランディングページ。エリア別に「バストイレ別ホテル」を比較表・FAQ・構造化データ(FAQPage/ItemList/BreadcrumbList)付きで掲載。tools/gen-area-lp.js から生成 |
| 静的API | api/hotels.json |
全掲載データのJSON(アプリ・外部連携の土台) |
※ 旧予約デモ(booking.html)は送客型への移行に伴い廃止(旧URLは詳細ページへリダイレクト)。
サイト内では予約せず、楽天トラベル・公式サイトへ送客します。
- 送客CTAは
assets/js/ui.jsのbookingCtas()が生成 - 楽天アフィリエイトIDを取得したら
assets/js/ui.js先頭のRAKUTEN_AFFILIATE_IDに設定するだけで計測付きリンクに切替 - 楽天トラベルの施設URL(
rakutenUrl)は出典から確認できた施設に設定済み。未設定の施設は公式サイトのみ表示(楽天APIでの突合は今後) - 空室・最低価格のリアルタイム表示用サーバレス層の雛形:
server/(Vercel移行時に有効化)
ビルド不要の静的サイトです。
# リポジトリ直下で
python3 -m http.server 8000
# → http://localhost:8000 を開くindex.html をブラウザで直接開いても動作します。
main ブランチが更新されるたびに、GitHub Actions(.github/workflows/deploy-pages.yml)が
サイトを GitHub Pages へ自動デプロイします。
- 公開URL:
https://ttomoi-afk.github.io/desktop-tutorial/ - リポジトリが Public であることが必要です(無料プランの場合)。 Private のままだと Setup Pages ステップが失敗します。
assets/js/data.js には**実在する温泉宿23軒+ビジネス・シティホテル48軒(計71軒)**の情報を収録しています(関西30軒:大阪8・京都11・兵庫11、沖縄10軒、北海道12軒を含む)。
うち都心のビジネスホテル7軒は「温泉を売りにしていない、風呂・トイレ別のホテル」で、
ツナグ旅の記事「東京のバストイレ別で安いおすすめホテル7選」で紹介されている施設を、
公式サイト・大手予約サイトで照合のうえ掲載しています。
- 各施設の公式サイト・公的観光サイト・大手予約サイトの公開情報を基にした参考値です(調査時点)
- 調査は施設ごとに出典URLを記録し、別エージェントによる反証チェック(検証)を実施しています。 検証で判明した誤りは修正済み(例: 客室寝湯が温泉でない旨の明記、貸切風呂の新設情報の反映、 都心温泉の「温泉は露天のみ」の明確化など)
- 検証の結果「風呂・トイレ別」の基準を満たすと確認できなかった/掲載できない施設は見送り(福岡1軒、大阪3軒=ホテル阪神大阪・カンデオホテルズ大阪なんば・ホテルモントレ グラスミア大阪、神戸1軒=メリケンパークオリエンタル、沖縄2軒=EMコスタビスタ・ダブルツリー那覇首里城。いずれも客室がユニットバスのため。さらに休業中の嵐山辨慶、2025年閉館の有馬・古泉閣、実在確認できなかったソラリア西鉄ホテル那覇も除外)
- 城崎温泉の外湯文化の宿など「客室に浴室がなく入浴は大浴場・外湯めぐり」の宿は、客室内にユニットバスが無い点で基準を満たすものとして掲載し、詳細ページでその旨を明示(「風呂・トイレ別」ではなく「入浴は大浴場・外湯」と表示)
- 標準客室はユニットバスで一部の上位客室のみバス・トイレ別のホテル(北海道の都市ホテルに多い)は
sepScope: "partial"を付与し、「一部客室 風呂・トイレ別」と表示。掲載する客室情報はセパレートを確認できたタイプに限定 - セパレートが一部客室タイプのみのホテルは、その旨を明記(例: リッチモンドホテルプレミア浅草は ビュー/プレミアビュー/コーナー系のみ3点独立)
- 未確認事項は各宿の
uncertainフィールドと詳細ページの「出典・参考情報」に明記 - 調査・検証の全記録:
docs/hotel-research.json - 評価・クチコミは掲載しません(捏造を避けるため)。代わりに事実ベースの「お風呂の見どころ」を表示
- HTML / CSS / Vanilla JS のみ(フレームワーク・ビルドツールなし)
- 料金基準は宿タイプで自動切り替え(温泉宿=1泊2食・1名/ビジネスホテル=素泊まり・1名)、すべて「参考」表記
- 宿の画像は楽天ウェブサービス(トラベルAPI)の施設画像をホットリンク表示(規約に沿った送客目的の利用・フッターにクレジット表記)。画像URLは
imgフィールドに保存でき、未取得・読込失敗時は宿ごとのシード値から生成する風景SVGに自動フォールバック - 画像URLの一括取得は
tools/fetch-images.htmlを本番ドメインで開いて実行(APIレート制限のためブラウザから約1.2秒間隔で収集)。詳細ページは閲覧時にAPIから画像を取得し localStorage にキャッシュ - トップのヒーロー背景のみ、
assets/img/hero-1〜3.jpgを置くと写真のクロスフェード表示に切り替わる(画像が無い間は生成風景のまま)。掲載権利のある画像のみ使用すること(詳細:assets/img/README.md) - SNS共有用のOGP画像(1200×630)は
tools/gen-ogp.js(Playwright)でサイト自身の生成風景を背景に描画し、assets/img/ogp.png・ogp-<エリア>.pngとして出力。各ページのog:image/twitter:imageから参照(外部画像は使わずブランドで統一) - 客室データ構造上も「ユニットバス」は存在しない(風呂・トイレ別が全室必須)という掲載基準をデータモデルで表現
本サイトは非公式のポートフォリオ用デモです。掲載施設は実在しますが、当サイトは各施設と提携・関係はありません。 掲載内容は公開情報を基にした参考情報で、料金・設備・泉質・営業状況は変更される場合があります。 最新情報は必ず各施設の公式サイトでご確認ください。当サイトでの予約・決済はできません。