seraphim transportのホームページのファーストビュー

seraphim transport様

信頼されるスピーディーで正確な運送サービス

大田区を中心に活動する運送会社のリニューアルサイトを制作しました。

#HP #コーポレートサイト
Webサイトを見る

QUICK LOOK

  • 担当領域

    企画デザインロゴ制作コーディング

    企画からサイトの公開まで全工程を一人で担当させて頂きました。

  • 利用ツール

    PhotoshopIllustratorHTML5CSS3JavaScriptjQuery
  • 主な機能

    レスポンシブ動画タブメニューアコーディオンパネルページトップリンク ローディング画面画面遷移地図お問い合わせフォーム
  • 制作期間

    2ヶ月間(企画2weeks デザイン4weeks コーディング3weeks)

  • 制作時期

    2021年7月〜9月

  • サイト制作

    新規サイト

    リニューアル

  • お客様情報

    • 事業内容

      運送サービス

      大手運送会社からの業務委託を受けて大田区を中心としたエリアで運送サービスを行なっている。

      独立支援サービス

      運送業を始めとした分野で独立を目指している方の支援をしている。

    • HPを制作する背景

      仮設のHPを持っているが内容が簡素なので本格的なHPを制作したいと考えられている。

  • 現状の課題

    • 課題

      仮設で建てたHPを運用しているが、ネットでの集客が0件に留まっている。問い合わせすらもない状況になっている。

    • 考えられる原因

      情報量が圧倒的に少ない。サービス内容がわかりづらく、魅力が伝わりにくい。

  • ゴール

    魅力が伝わるHPを制作することで問合せを増やし、ネット集客を向上させる

  • 施策

    • 実績やお客様のメリットをアピール

      サービス品質(取り扱い個数、クレーム発生率、配達スピード)の高さで表彰状を頂いたことをアピールして、信頼度を上げる。
      お客様から感謝状を頂いたことを示してお客様満足度の高さをアピールする。
      ・独立支援サービスのページではお客様のメリットである収入イメージをお伝えし、具体的なイメージを抱けるようにする。

    • ファーストビューでスピード感、正確性を表現する

      サービスの「スピード」「正確性」のイメージを与えるため、また一目で何をしている会社かわかるようにするため、ファーストビュー では交通の早い道路とスムーズに運ばれる荷物の様子を動き(動画)で示した。

    • 問合せを目立たせる

      ・ヘッダーとフッターの問合せボタンだけ背景に色をつけて目立たせる。またヘッダーは固定することでいつでもお問い合わせできるにする
      ・TOPの問合せセクション、背景をキーカラーにして目立たせる

  • 作品のコンセプト

    • 信頼・安心・実績

      速くて正確、実績に基づいた信頼されるサービス

    • クライアント様のご要望

      シンプル、高級感、やさしい、スタイリッシュ、清潔感・信頼感、親しみやすさ・フレンドリー、落ち着いた配色

  • ターゲットユーザ

    • ターゲットユーザ

      ・都内在住
      ・年齢20〜60歳
      ・男性8割女性2割
      ・正確、スピーディーで対応の良い運送サービスを探している方
      ・独立・収入アップを目指している方

    • ペルソナ

      会社員の山田次郎(37歳・男性)は都内で法人用の電気の切り替え営業をしている。年収は500万円。現在の営業成績は良いが、将来のことを考えると管理職に就いたとしても労力が減らないため、体力面・金銭面で不安を抱いている。また、いくら成績を伸ばしても収入が上がらないためモチベーションが保てずにいる。そこで、今後より良い労働環境で働き収入アップできるよう独立開業についての情報収集をしている。

  • デザイン

    • カラー

      • メインカラー

        #0088cc

      • サブカラー

        #e0eff7

        #212b37

      • ベースカラー

        #ffffff

        #fafafa

      コーポレートカラーが青で、また作品のコンセプトである「信頼」や「高品質」を表現できる色のため青(#0088cc)をメインカラーとした。また落ち着いた配色を好むと伺っていたため、色相の近い配色にした。

    • フォント

      • 和文

        ヒラギノ角ゴシック Pro W3

        フォントの見本
      • 英文

        Josef Sans

        フォントの見本

      全体のLine-heightは1.5。目立たせたいところ(見出し)では2を使う(会社紹介ページの経営理念など)。Josef Sansは数字にも使用しており、カーニングやフォントウェイトを大きくして使用した。

    • デザイン

      • PCデザイン
      • スマホデザイン