France Évasions
貸切バスの見積もりには8つの変数がある。課題は、尋ねる項目を5つに絞ることでした。
- 年
- 2026
- 制作期間
- 4週間
- 技術スタック
- React · Vite · Tailwind · Vercel
- デザイン
- 開発
- 概算シミュレーター
- ローカルSEO
- つの質問（8つではなく）
- 5
- Lighthouse SEO
- 100/100
- パフォーマンス — +30ポイントの改善計画あり
- 58/100
解決すべき課題。
背景
リヨンを拠点とする運転手付き観光バスの貸切会社です。送迎、日帰り旅行、団体旅行、学校や団体の輸送を手がけています。
制約
バスの見積もりは、乗客数、日程、行程、時間、台数、オプション、待機時間によって決まります。それをすべてフォームで尋ねれば人は離れていき、何も尋ねなければ見積もりは不可能です。
解決策
5つの質問ですぐに価格の幅を示す概算シミュレーターを作り、詳細は後から電話で詰めることにしました。最も技術的な3つの変数はフォームから外しています。金額の桁を変えることはなく、問い合わせの3分の1を失わせる原因になるからです。
納品時に計測したスコア。
本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。
すべての判断に、理由がある。
5つの質問で、ひとつの価格帯
乗客数、出発地、目的地、日程、サービスの種類。結果は前提条件を明記したうえで、あくまで価格の幅として示されます。
車両ではなく用途で
サイトが語るのは「55人乗りバス」ではなく、遠足、結婚式、セミナー、空港送迎です。顧客は機会ごとに考えるからです。
目的地の写真
画像は車両だけでなく、行き先を見せています。団体旅行では、決め手になるのは目的地です。
プロジェクトのカラーパレット
ロードブルー
#1F4F82
アイデンティティ
オレンジ
#E07B2C
アクション、見積もり
オフホワイト
#F7F8FA
背景
インク
#1C2026
テキスト
タイポグラフィ体系
見出し用書体
Outfit 700
本文用書体
Inter 400
乗客数と価格の幅は等幅数字にしています。揃っていない比較表は、大ざっぱな数字に見えてしまうからです。
その裏側にある技術。
- React
- Vite
- Tailwind
- Vercel
クライアント側の概算シミュレーター
サーバーへの呼び出しも、事前の個人データ収集もなく、即座に計算します。連絡先を尋ねるのは、価格の幅を表示した後だけです。
ポートフォリオで最も重いパフォーマンス課題
パフォーマンスは58です。原因は特定済みで、提供されたコンテンツから引き継いだ未最適化の目的地画像ライブラリと、トップページから読み込まれるインタラクティブな地図です。計画はできています。画像の規格化と、地図のオンデマンド読み込みで、それだけで30ポイント以上の改善が見込まれます。黙っているのではなく公開しています。誰でも1分で検証できることだからです。
検索で見つけてもらうための仕組み。
機会ごとに1ページ
「バス 貸切 結婚式 リヨン」「スクールバス ローヌ県」「団体 空港シャトル サン＝テグジュペリ空港」。これらが実際のクエリであり、「バス 貸切」だけで検索されることはありません。
出発エリアをマークアップ
リヨン発であることと対応範囲を宣言しています。輸送業では、車庫の位置が価格を左右し、したがって検索結果との関連性も左右します。
納品したもの。
- トップ — 概算シミュレーター
- 結婚式とイベント
- スクールバス
- セミナーと企業
- 空港送迎
- 保有車両
- 見積もり
プロジェクトの流れ。
フォームの削減
金額の桁を損なうことなく、8つの変数を5つに削減。
デザイン
機会ごとの入り口、目的地の写真。
開発
クライアント側の概算シミュレーター、見積もりの導線。
今後の予定
画像の規格化と地図のオンデマンド読み込み。
