Webサイトリニューアル特集

STUDIO導入・内製化で運用コストが40分の1に! パシフィコ横浜のWebサイトフルリニューアルの成果

「サステナブルウェブデザイン」を掲げ、たった4か月でサイトリニューアルを実施。コスト削減のほかに、問い合わせ件数88.7%減、CO2排出量も6.8トン削減。リニューアルの舞台裏を聞いた。

1991年開業の大規模複合コンベンション施設「パシフィコ横浜」は2023年4月〜8月、Webサイトのフルリニューアルを実施した。ノーコードWeb制作プラットフォーム「STUDIO」を導入し、内製化したことにより運用コストが約40分の1に激減したという。

成果は、運用コスト削減だけではない。Webサイトの訪問者が得たい情報にたどりつけないために発生していた問い合わせ件数は88.7%減となり、社員の負担も大幅に軽くなった。またページ数や容量の削減により、年間のCO2排出量も約6.8トン削減。これは杉の木約772本が1年間に吸収する量に値するという。

どのように同プロジェクトを実施したのか。パシフィコ横浜の担当者に取材した。

(左から)株式会社横浜国際平和会議場 経営推進部 経営企画課 係長 松原正和氏、係長 西谷直子氏、甲(きのえ)香菜子氏
(左から)株式会社横浜国際平和会議場 経営推進部 経営企画課 係長 松原正和氏、係長 西谷直子氏、甲(きのえ)香菜子氏

訪問者が迷子になる、課題だらけだった旧サイト

8年ほど前に制作したWebサイトを長年使用していたパシフィコ横浜には、次のような課題が山積みだった。

  • UI/UXが悪く、訪問者が見たいページにたどりつけない
  • 制作会社に委託する作業が多く運用コストが高くつく
  • スマホ対応が不完全
  • CMSの操作が複雑で効率が悪い など
リニューアル前のウェブサイト。UI/UXが悪く、訪問者が欲しい情報にたどりつけなかった(画像:パシフィコ横浜提供)
リニューアル前のWebサイト。UI/UXが悪く、訪問者が欲しい情報にたどりつけなかった(画像:パシフィコ横浜提供)

当社のWebサイトは『来場者』と『主催者』の2者がターゲットとなり、それぞれ求める情報が異なります。にもかかわらず、両者への情報提供を同じドメインで運営しており、かつ約1000ページと膨大な量があったため、サイト内で迷子になる訪問者が続出。問い合わせが多く発生していました(甲氏)

営業部から経営推進部への異動後、Webサイトの問い合わせ対応を担った甲氏は、あまりの問い合わせ数に驚いたという。

ウェブサイトの問い合わせ対応の甲氏
Webサイトの問い合わせ対応を担当する甲氏

サイトリニューアルのきっかけは、2022年12月に実施された社長発信の社内コンペ企画です。そこで私が『サステナブルウェブデザイン』と題した企画書を提出し、着手が決まりました(松原氏)

松原氏は以前からリニューアルを視野に入れたWebサイトの分析を進めており、PV数やヒートマップの結果などを参照して課題点を洗い出していた。それを企画書に落とし込むことで、審査員を説得できたという。

STUDIOを導入し内製化、4か月でリニューアルを遂行

実際、どんなプロセスでリニューアルを進めていったのか。時系列は次のとおりだ。

  • 2022年: 旧Webサイトのデータ分析を実施
  • 2022年12月〜2023年2月: 新企画の社内コンペを実施
  • 2023年4月: 新体制発足&企画書のブラッシュアップ
  • 2023年5月〜7月: STUDIOでゼロからWebサイトを制作
  • 2023年8月: リニューアルしたWebサイトのリリース

チームメンバーは松原氏を含めた経営企画課の5名で、IT経験者は前職でWebディレクターを務めていた松原氏のみだった。メインの作業は松原氏が担当しつつ、西谷氏や甲氏は元営業担当という視点から改善点を出したり、FAQの内容をまとめたりしてサポートしたという。結果的に、約4か月でリニューアルを実現した。

トップページはスクロールなしでスッキリさせ、総ページ数は5分の1に減少。「主催者向け」の情報は、別ドメインで管理する仕様にした。

リニューアル後のウェブサイトのトップページ。(画像:パシフィコ横浜提供)
リニューアル後のWebサイトのトップページ(画像:パシフィコ横浜提供)

 このリニューアルを支えたのが、ノーコードWeb制作プラットフォームのSTUDIOだ。Webデザイナーをメインターゲットに開発されたSTUDIOは、直感的な操作でハイセンスなWebサイト制作をかなえる点を強みとしている。アップデートを重ねて利便性を高めており、2023年にはFigmaで作成したデザインをワンクリックでサイトに変換するプラグインも話題になった。

Figmaで作成したデザインをワンクリックでサイトに変換するプラグイン「Figma to STUDIO」(画像:STUDIO提供)

STUDIOはコードが書けない私でもサクサク使えて、多様なデザインも実現でき、当社のWebサイトのボリュームでも問題なさそうでした。大手のIT企業の導入実績もありますし、これなら大丈夫だと自信を持ってセレクトしました(松原氏)

社内コンペにWebサイトリニューアルの企画書を提出した松原氏
社内コンペにWebサイトリニューアルの企画書を提出した松原氏

STUDIOは低価格で使い始められるため、もしリニューアルに失敗しても大きな損害にならない点も魅力だったという。開発段階では、STUDIOに搭載されている「ライブプレビュー機能」が大いに役立った。これは、制作中のWebサイトがブラウザ上でリアルタイムにプレビュー画面を確認できる機能だ。

各部署に意見を聞きながら開発を進めるうえで、『こうしてほしい』という要望に対し、すぐに編集してリアルタイムでプレビューを見てもらえるのは、非常に便利でした。在宅環境でもスピーディーに作業できました。“神ツール”だと思っています(松原氏)

さらに、次の機能も開発時に重宝したという。

  • いつでも過去のバージョンに戻ることができる「バージョン管理」
  • 情報を収納して見せることができる「トグル」
  • 画面の上に別のウィンドウを表示して情報を伝える「モーダル」

以前のWebサイトは使い方が複雑で、記事を1つアップするだけでも大変でした。また社員が操作できるのはCMSのみで、それ以外の変更は制作会社に委託していたので、膨大なコストと時間がかかっていました。STUDIOは触っていくうちに、すぐに使えるようになりました(西谷氏)

元営業チームにいたため顧客視点から改善点を提案した西谷氏
元営業担当だったため顧客視点から改善点を提案した西谷氏

コスト40分の1、お問い合わせ88.7%減。リニューアルの成果

パシフィコ横浜では、Webサイトのリニューアルにより、次の成果をあげた。

  • 運用コストを約40分の1に削減
  • 全体のページ数を1000→200に削減
  • UU数は現状維持でPVを20%削減(=ほしい情報にたどり着きやすくなった)
  • 一般の問い合わせ数が88.7%減
  • 年間約6.8トンのCO2排出量を削減

PVを減らすことに最初は抵抗がありました。しかし広告費で稼いでいるビジネスモデルではありません。ユニークユーザー数は変わらずにPV数が減っているので、訪問者の迷子を減らせているということです(松原氏)

松原氏が掲げていた「サステナブルウェブデザイン」の通り、PVや容量が削減された結果、Webサイト運用にかかる電気量が削減され、CO2排出量の削減につながったという。削減量の計測には、脱炭素DXを推進するメンバーズ社の専門チームにも協力してもらった。運用コストや問い合わせ件数も大幅に削減し、社員の手間や業務の属人化も解消された。

松原氏によれば、現在のWebサイトは「フェーズ1」が完了した段階であり、Webサイトの引っ越しだけを完了した状態なのだという。デザインや掲載情報を洗練させていく過程を「フェーズ2」として、これから取り組んでいくそうだ。

現在、デザイン面についても社内協議を進めており、本格的なデザイン変更は、その方針が定まってからになると思います。さらに、リニューアル後も継続的なサイト分析を続け、その根拠も踏まえながら改善していく予定です(西谷氏)

すでに小さな改善は始まっている。たとえば、駐車場の利用状況をWebサイト上で表示できるようになった。サイト内にスプレッドシートを埋め込み、利用状況により警備員が【満車・空車】のタブを手動で動かせる仕様にしているという。

「Good Project Award 2023」で最優秀賞を受賞したパシフィコ横浜
「Good Project Award 2023」で最優秀賞を受賞したパシフィコ横浜

パシフィコ横浜のWebサイトリニューアルは、チームのコラボレーションツールを提供するヌーラボ社による「Good Project Award 2023」で最優秀賞を受賞している。たった社員5名でフルリニューアルし、数字で大きな成果をあげた点が評価に値したのだろう。サステナブルなWebサイトやSTUDIO活用の好例ともいえる。

インパクトのあるプロジェクトを短期間で実行したパシフィコ横浜、今後のWebサイトの進化も目が離せない。

用語集
CMS / DX / PV / UU / UX / クロール / サステナブル / ユニークユーザー / 訪問者
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

ディープリンク
WWW上でのリンクの張り方の1つ。サイトのトップページへのリンクではなく、個別コ ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]