WebCabbers/WebBus

OVERVIEW

  • サイト種別 サービス紹介
  • 期間 3ヵ月

SCOPE

  • コーディング
  • デザイン
  • 戦略・要件定義・設計
  • 運用

PREFERENCE

安心感

斬新

明るい

ダーク

WebCabbers/WebBus
WebCabbers/WebBus

お客様の課題

タクシー配車システムとバス運行管理システムをそれぞれ別サイトで紹介していたため、サービス全体像が伝わりにくく、サイトを見ても理解が深まらず問い合わせも伸びない状況でした。

リニューアルのポイント

今回のリニューアルでは、両サービスが本質的には同じ機能をベースにしていることをわかりやすく整理し、1つのサイトで「タクシー」「バス」両方に対応できる見せ方に刷新しました。実際には両方を導入する企業が多いことから、連携や併用のメリットを打ち出すことで、別々のサービスでありながら一体的に活用できる価値を伝えられる構成としました。

直感的な理解を促すビジュアル

メインビジュアルにおいて、タクシーとバスの車体画像を背景から切り抜いて配置することで、サービス内容を一目で理解できるデザインを実現しました。

訪問者の皆様には「このシステムは自社の業務に直結するサービスだ」と瞬時に認識していただけるよう、抽象的な表現ではなく具体的な車両イメージを効果的に活用しています。運輸業界の忙しい経営者様にとって、短時間でサービスの本質を把握できる構成を心がけました。

奥行き感のある現代的なデザイン表現

車体の切り抜き画像と背景に配置したグラデーションにより、ニューモーフィズムの手法を取り入れた立体感のあるデザインを実現しています。この現代的なデザイントレンドを活用することで、従来の運行管理システムが持つ古い印象を払拭し、「最新技術を活用したモダンなシステム」という印象を持っていただけるよう意識しました。

柔らかな陰影とグラデーションの効果により、デジタル化による業務効率化という先進性を視覚的に表現し、技術革新に前向きな事業者様に訴求できるデザインとなっています。

二色の使い分け

タクシーとバスに特化した運行管理のシステムを提案するサイトということで、一眼で理解できようにそれぞれのカラーを設定して使い分けました。メインカラーはロゴにも使用されている「青」ですが、バスには「緑」を使用しています。
ロゴで使用されている丸い矢印を余白を埋めるために使用し、奥行き感を出しました。

大きくわかりやすく

ターゲットが企業の担当者で年配の方の可能性もあるため、フォントサイズは大きくわかりやすくしました 。英語表記や無駄な装飾を減らし、完結的なデザインで文字が一番に目に飛び込んでくるデザインです。
コンバージョンエリアも余白を大きく取り、大きく目立たせるように二つのテーマカラー青と緑のグラデーションを背景に使用しています。