ランドオペレータのB2Bパートナーサイト - フレームワークを使わない静的サイト

ベトナム・ホーチミンのランドオペレータが、日本の旅行会社に向けて開設するB2Bパートナーサイトを開発しました。フレームワークもビルド工程も持たない静的サイトとして構築し、動画背景やスクロール演出を含む表現を、素のHTML・CSS・JavaScriptだけで実現しています。

プロジェクト概要

• 日本の旅行会社向けB2Bパートナーサイト（日本語）
• 会社紹介・サービス・ツアー・対応実績・スタッフ紹介・問い合わせを1ページに集約
• 動画背景、パララックス、スクロール連動アニメーション
• ビルド工程を持たない静的サイト構成

依頼者の目指した目標と解決したい課題

ランドオペレータ（現地手配会社）は、旅行会社から依頼を受けて現地の手配を担う立場です。取引の相手は個人旅行者ではなく旅行会社であり、サイトに求められるのは「予約させること」ではなく、取引相手として信頼に足るかを判断してもらうことでした。

日本の旅行会社が現地のランドオペレータを選ぶとき、判断材料になるのは、日本語で確実に意思疎通できるか、どういう案件に対応できるか、実際にどんな手配をしてきたか、誰が担当するのか、といった点です。これらが分からなければ、そもそも問い合わせに至りません。

同時に、このサイトは頻繁に更新するものではありません。運用に手がかからないことも要件でした。

開発したシステムの特徴

• 1ページに判断材料を集約:
  • 選ばれる理由（日本語対応の窓口、プライベート・貸切ツアー特化、MICE・視察対応）
  • 対応可能な案件の種類（個人旅行、家族旅行、VIP接待、MICE、視察・研修、団体旅行）
  • 対応実績（企業視察旅行、VIP向けプライベートツアー、前日依頼の手配など）
  • ツアーラインナップ（メコン川クルーズ、アオザイフォトツアーなど）
  • スタッフ紹介、よくある質問、問い合わせフォーム
• 表現:
  • ヒーロー部分の背景動画
  • スクロールに連動して要素が現れるアニメーション
  • パララックス効果
• 問い合わせ導線:
  • ツアーごとの問い合わせボタンが、件名をあらかじめ埋めた状態で問い合わせにつながる

技術的背景

このプロジェクトで最も明確な判断は、フレームワークもビルド工程も採用しなかったことです。

構成は HTML 1ファイル、CSS 1ファイル、JavaScript 1ファイルのみ。npm によるパッケージ管理も、バンドラも、トランスパイルもありません。デザイントークンは CSS カスタムプロパティとして定義し、クラス名は BEM 規約で統一しています。

演出は素の JavaScript で実装しました。スクロール連動のアニメーションは IntersectionObserver で要素の表示を検知してクラスを付け替える方式、パララックスは CSS カスタムプロパティにスクロール量を書き込み、実際の描画は CSS 側に任せる方式です。背景動画は YouTube の埋め込みプレイヤーを利用しています。

この判断の理由は、サイトの寿命と更新頻度にあります。年に数回更新するかどうかの静的なサイトに対して、ビルド環境を持ち込むと、依存パッケージの更新やビルドの再現性といった保守作業が、コンテンツ更新の頻度を上回ります。ファイルを開けば直せて、そのまま反映される構成のほうが、この用途では長持ちします。

ホスティングは Netlify を使用し、ビルドコマンドなしでリポジトリの内容をそのまま配信しています。メインブランチへのマージで本番へ自動デプロイされます。あわせて、クリックジャッキング対策やMIMEタイプの推測抑止、リファラの制御、カメラ・マイク・位置情報の利用を無効化するなど、セキュリティヘッダを配信設定で付与しています。

デザインは「Modern Indochine Professional」というコンセプトのもと、深い青と金を基調とし、見出しに明朝体、本文にゴシック体を組み合わせています。ベトナムの雰囲気を残しつつ、B2Bの取引相手として見られることを意識した設計です。

解決された問題

日本の旅行会社が、取引先としての判断に必要な情報を1ページで確認できるようになりました。対応可能な案件の種類と実績が並んでいるため、「この規模・この種類の依頼を出せるか」がすぐに分かります。

運用面では、ビルド工程を持たないためデプロイの失敗要因が少なく、コンテンツの修正がそのまま反映されます。更新頻度の低いサイトを長く保守するための構成として機能しています。

チーム構成

• (KW) プロジェクトマネージャー
• (KW) フロントエンドエンジニア
• デザイナー

(KW) はKaito Wingsが担当

プロジェクト期間

• 要件定義・デザイン - 1ヶ月
• 実装・調整 - 1.5ヶ月

システム構成

• HTML / CSS / JavaScript（フレームワーク・ビルド工程なし）
• IntersectionObserver（スクロール連動アニメーション）
• YouTube IFrame API（背景動画）
• Netlify（ホスティング・自動デプロイ・セキュリティヘッダ）