Troose Tours
旅行会社のウェブサイト
インドから日本へのプライベートツアーを運営する小さな旅行会社のウェブサイトです。トップページは写真のスライダーではなく、小さな旅。スクロールするとガチョウが地球の上をデリーから東京まで歩き、そのまま旅の詳細へとつながります。
サイトを見る
多くの旅行サイトは、写真のスライダー、料金表、フォームと、どれも似ています。まだ口コミのない新しい会社は、まず覚えてもらう必要があり、そして給料1か月分を超える旅を任せてもらえるだけの信頼が必要です。
主な特長
スクロールでたどる旅
ガチョウのTrooseが、インドの上で地図を広げて3Dの地球に立っています。スクロールすると地図をたたんで翼の下にしまい、東へ歩きはじめます。足もとで地球が回り、点線の足跡が続き、東京までの残りキロ数が減っていきます。スクロールを戻せば、すべて巻き戻ります。
飛び出す絵本のような名所
インド門、クトゥブ・ミナール、タージ・マハルが地球から立ち上がり、地平線の向こうへたたまれていきます。日本が見えてくると、富士山、東京タワー、スカイツリーが飛び出します。空はデリーの朝から東京の夕暮れへ変わり、到着すると提灯が灯ります。
9日間を1本の点線で
旅程は、ロゴの地図と同じ点線で描いたタイムラインです。日ごとに都市、見どころ、宿泊先、写真を表示します。内容はすべて1つのデータファイルから作られるため、新しいツアーはデータを足すだけで追加できます。
わかりやすい2つのプランと予約フォーム
Flockは往復の航空券込み、Waddleは航空券を自分で手配する人向けの同じ旅です。料金はルピー表示、SIMカードなどのオプションはチェックするだけ。各項目の「？」で内容を説明します。予約フォームは、チームにメールを送る前にすべての申し込みを保存します。
ガチョウが質問に答える
含まれるもの、ベジタリアンの食事、ビザ、旅の日程などをガチョウに聞けます。サイトに載っている旅の情報だけを使うので、料金や日付を作り話しません。予約したくなったら「今すぐ予約」ボタンを表示します。
チームのための裏側の仕組み
予約とメッセージを一か所に
予約の申し込みとお問い合わせはすべて管理画面に届き、チームが対応済みかどうかを管理できます。
開発者なしでメール設定
メールアカウントは管理画面で設定し、テストメールで確認できます。コードに触れずに通知を動かし続けられます。
何でも探せる検索
⌘K（またはCtrl K）で、サイトのどこからでもツアー、都市、ページ、予約フォームへ移動できます。
プロジェクト概要
- クライアント
- インドから日本へのプライベートツアーを運営する小さな旅行会社、Troose Tours。チームはインドと日本にいます。
- 担当
- スクロールの物語と地球、ガチョウのアニメーション、ツアーページ、予約、チャットアシスタント、管理画面まで、ウェブサイト全体のデザインと開発を担当しました。
- 納品したもの
- 3Dの地球とアニメーションするガチョウのスクロール型トップページ
- 東京ツアーの旅程、プラン、ギャラリー、お客様の声、FAQ
- 予約フォームとお問い合わせページ
- AIアシスタント「Troose the goose」のチャット
- サイト内検索（⌘K）
- 予約・メッセージ・メール設定の管理画面
- 状況
- troosetours.comで公開中。
海外からのお客様向けに日本語と英語のサイトをお考えなら、多言語ホームページ制作もご覧ください。
開発者向けの技術情報
使用技術・アーキテクチャ・作り方について。
スタック
アーキテクチャ
1つの進行度でヒーローを動かす
固定されたヒーローは、スクロールを0（インド）から1（日本）までの1つの滑らかな進行度に変換します。地球、ガチョウ、名所、空、スタンプ、距離カウンターはすべて小さなReactコンテキスト経由でこの値を読み、しきい値は1つのタイムラインファイルにまとめています。すべてが進行度の純粋な関数なので、スクロールを戻すと歩きも正確に巻き戻ります。
3Dで手描きの見た目
地球はReact Three Fiber経由のthree.jsで、陸地はworld-atlasのデータから描き、トゥーンシェーディングをかけています。木や雲はインク線の輪郭付きインスタンスメッシュで、それぞれ2回の描画で済みます。そのため3Dでも、ガチョウのロゴと同じ太い輪郭のフラットな見た目になります。ガチョウは描き直さず、ロゴの元のパスをそのままアニメーションさせています。
ガチョウのチャット
ルートハンドラーからClaude Haikuを呼び出します。システムプロンプトはページと同じツアーデータから作るので、アシスタントの内容がサイトとずれることはありません。会話の長さには上限があり、IPごとにレート制限をかけています。予約を勧めるときは専用のトークンで返答を終え、サイト側でそれを「今すぐ予約」ボタンに変えます。
ハイライト
メールの前に保存
予約とメッセージはまずCloudflare D1に保存してからメールで送るため、メールが止まっても申し込みは失われません。サイトはOpenNext経由でCloudflare Workers上で動きます。
堅牢な管理画面
管理画面のパスワードはscryptハッシュとしてのみ保存し、セッションは署名付き。フォームとサインインは訪問者の実際のIPでレート制限しています。
このようなサイトをお考えですか？
記憶に残るウェブサイトを、小さなビジネスに必要な予約・問い合わせの仕組みと一緒に制作しています。