プロジェクト概要
Tokyo Compassは、東京を拠点に外国人観光客向けツアーを提供するチームです。新規創業に伴い、ランディングページが必要とされていました。弊社は、視覚的に魅力的でありながら、コンバージョン率を最大化するウェブサイトを、わずか1週間という短期間で構築しました。
課題
Tokyo Compassが直面していた課題は以下の通りでした：
- 新規事業のため、オンライン上での認知度がゼロからのスタート
- 限られた予算と時間の中で質の高いブランディングを実現すること
- 英語によるウェブサイトの整備と情報発信が求められていたこと
解決策
これらの課題に対して、以下のような解決策を実装しました：
1. 印象的なビデオバナー
ランディングページのトップに、東京の魅力的な風景を収めた高品質なビデオバナーを配置。 ユーザーの興味を惹きつけ、冒険心を刺激するビジュアルコミュニケーションを実現しました。下部にはスクロールインジケーターを設置し、ユーザーがコンテンツを探索するよう促しています。
2. 温かみのあるデザイン
ベージュを基調とした落ち着いたカラーパレットを採用。 「東京の喧騒の中の静けさ」というコンセプトを表現し、訪問者に安心感と温かみを提供しています。
3. メンバー紹介セクション
Tokyo Compassのガイドを紹介するセクションを設け、顔が見える安心感を提供。 各ガイドの経験や専門性をハイライトし、サービスの信頼性を高めました。
4. サービスフローの可視化
初回の問い合わせから実際のツアー実施までの流れを、図を用いて視覚化。 サービス内容を明確に伝え、顧客の不安を取り除く工夫をしています。
5. インタラクティブな料金表示
オンシーズン・オフシーズンで料金が切り替わる仕組みを実装。 顧客は自分の旅行スケジュールに合わせて正確な料金を確認できます。
6. 即時予約システム
Calendlyとの連携により、ウェブサイト上から直接ガイドとの相談予約が可能なシステムを構築。 顧客とガイド間のコミュニケーションをスムーズに仲介します。
7. 効果的なCTAボタン
サイト全体に戦略的に配置したCTAボタンにより、ユーザーを自然に予約や問い合わせへと導線設計しました。
8. FAQ セクション
プライベートツアーに関する一般的な質問や懸念事項に答えるFAQセクションを設置。 特に海外からの観光客が持つ疑問に焦点を当てた内容となっています。
9. モバイル最適化
モバイルユーザーの約53%は、読み込みに3秒以上かかるとサイトを離脱すると言われています。 パフォーマンスを最適化することで、モバイルでの高速表示を実現させました。
10. ネイティブによる翻訳・編集
英語のネイティブスピーカーがコンテンツを執筆し、自然で信頼感のある表現を実現させました。
技術スタック
- フレームワーク: SvelteKit
- スタイリング: Tailwind CSS
- デプロイ: Netlify
- 予約システム連携: Calendly API
実装結果
Tokyo Compassのウェブサイトは、開設からわずか数週間で具体的な成果を上げています：
- 公開初月で検索経由の問い合わせ3件を獲得
- 直予約率50%を達成
特筆すべき点
このプロジェクトでは、通常のウェブサイト制作に加え、以下のサービスも提供しました：
- ドメイン取得と継続的な管理
わずか1週間という短期間での開発でしたが、クライアントのニーズを的確に捉え、コンバージョンを最大化するランディングページを構築できました。 現在もTokyoCompassは成長を続けており、ウェブサイトはその事業拡大の重要な基盤となっています。
お客様からの声
限られた予算の中で素晴らしいサイトを作っていただきありがとうございます。