受け取った改善提案を、今の環境で動く形に。CMSを前提にしたコンサルティング会社の提案を、CMSのないBtoB向けサイトで、JavaScriptを使って実現

業種:BtoB 従業員数:301〜500名

CMSを前提にしたコンサルティング会社の改善提案を、CMSのないBtoB向けサイトで実現した事例です。
記事ごとにカテゴリの目印を付けてJavaScriptで見せ方を切り替え、提案の目的を保ったまま実装しました。

  • AIO/LLMO対策
  • SEO対策
  • ブログ(投稿機能)の設計
  • CV最適化
  • UI/UX設計
  • 情報設計(IA)

こんな状態のサイトに向けた事例です

  • コンサルティング会社や代理店から改善提案を受けたが、実行に移せないまま止まっている
  • 提案の内容が、今のサイトの環境(CMSがあるかどうかなど)と合っていない
  • CMSが入っておらず、記事の追加や見せ方の変更に手間がかかっている
  • サーバーの管理がグループ会社などにあり、自社だけでは設定を変えられない
課題
コンサルティング会社が描いた改善の戦略を実行したいが、提案はCMSを使う前提で、サイトにはCMSもサーバー側の仕組みもなかった
提案
記事ごとにカテゴリの目印を付け、それを手がかりにJavaScriptで記事の見せ方を切り替える形に置き換えた
結果
CMSで行うような見せ方の設定を今の環境のままできる限り実現し、提案の戦略をサイトに反映できた

提案の施策を、3つに分けて進めた

分け方 当てはまる施策
そのまま実装する 今の環境でも、提案どおりに実装できる施策
置き換えて実装する CMSを前提にしていたが、別の方法で同じ目的を果たせる施策(コラムの一覧、カテゴリごとに表に出す記事の設定など)
見送る サーバー側の設定が必要で、管理の都合から現実的に対応が難しい施策

導入前の状況

提案は、CMSを使う前提だった

クライアント様は、外部のコンサルティング会社からサイトの数字を改善するための提案を受けていました。提案には、コラム(記事)をまとめて見せる一覧や、カテゴリごとにどの記事を表に出すかの設定など、CMS(記事の追加や管理を画面から行える仕組み)があることを前提にした施策が含まれていました。

サイトには、CMSもサーバー側の仕組みもなかった

サイトはCMSを使っておらず、サーバー側の仕組みも使えない環境でした。サーバーの管理はグループ会社などにあり、サーバー側の設定を変えることも現実的には難しい状況でした。提案を受けたものの、そのままでは実行に移せない状態でした。

設計判断1:提案の施策を、目的から読み替える

CMSを新しく入れれば、提案をそのまま実行できます。記事の追加や見せ方の変更も、画面から行えるようになります。ただ、このサイトではサーバー側の仕組みが使えず、CMSを入れること自体が現実的ではありませんでした。

そこで、提案の施策を一つずつ「何を実現するための施策か」に分けて整理しました。CMSは、その目的を果たすための手段の一つです。目的が同じなら、CMSがなくても別の方法で実現できる施策があります。

そのうえで、施策を「そのまま実装する」「置き換えて実装する」「見送る」の3つに分けました。置き換える施策と見送る施策は、コンサルティング会社も含めて認識を合わせてから進めています。

設計判断2:記事に目印を付け、見せ方はJavaScriptで切り替える

CMSでは、記事ごとにカテゴリを設定しておくと、カテゴリごとの一覧や表に出す記事が自動で組み立てられます。このサイトでは、その役割を2つに分けて置き換えました。

  • どの記事がどのカテゴリかは、記事の中に付けた目印で示す:カテゴリごとに決まった目印(HTMLのクラス。要素に付ける名札のようなもの)を各記事に付けておく
  • どこにどの記事を見せるかは、JavaScriptで決める:ページを開いたときに、JavaScript(ページを開いたあとに、ブラウザ上で表示を切り替える仕組み)が目印を読み取り、カテゴリごとに記事を表示したり表に出す記事を切り替えたりする

サーバー側の仕組みを使わずページの側だけで完結するため、今の環境のまま実装できます。

目印とJavaScriptによる出し分け(イメージ)

各記事にカテゴリの目印を付け、ページを開いたときにJavaScriptが目印を読み取って、カテゴリごとの一覧に記事を並べる流れの図
目印とJavaScriptによる出し分け。記事に付けた目印を手がかりに、表示する場所を決めている

取り組み

1. 提案の施策を、目的と実現の方法に分けて一覧にする

提案書の施策を、実装できる単位まで分けて一覧にしました。施策ごとに何を実現するためのものか、今の環境でどう実現するかを書き出し、「そのまま」「置き換え」「見送り」のどれに当たるかを決めています。社内のリソースも踏まえて優先順位をつけ、順に進めました。

2. コラムの一覧とカテゴリごとの見せ方を、目印とJavaScriptで実現する

コラムの一覧や、カテゴリごとに表に出す記事の設定は、記事に付けた目印とJavaScriptで実現しました。記事が増えても、目印を付ければ決めたルールどおりに表示されます。

3. CMSで行うことを、できる限りJavaScriptで置き換える

実装を進める中で、提案書に書かれていない部分でも、ふつうはCMSで設定するようなことをできる限りJavaScriptで実現する形を当社から提案しました。CMSを使えない環境でも、提案の目的に近づけるためです。

4. サーバー側の設定が必要な施策は、見送りを明確にする

提案の中には、サーバー側での設定が必要な施策もありました。管理がグループ会社などにあり、現実的に対応が難しいものは見送りとしています。見送った施策も一覧に残し、どこまでを実現したかがわかるようにしました。

改善施策の結果について

一般的にはCMSで行うような見せ方の設定を、CMSのない今の環境のままできる限り実現しました。サイトの数字を改善するというコンサルティング会社の戦略を、現場の環境に合わせた形でサイトに反映できています。

実行に移せずに止まっていた提案が、目的を保ったまま実装に進みました。初期構築のあとも運用の支援を続けており、1年以上にわたってサイトの改善に関わっています。

支援の概要

業種
BtoB
従業員数
301〜500名
システム
CMSなし
支援期間
初期構築は2か月程度。その後の運用も1年以上継続
担当範囲
提案内容の整理(実装の要件への分解と、実現の方法の判断)、設計、フロントエンドの実装、運用ルールの整備と引き継ぎ
関連する支援
BtoBサイト改善支援

※記載の内容は支援当時のものです。

受け取った改善提案が、実行できずに止まっていたら

提案の内容と今のサイトの環境が合わないときも、施策の目的に立ち返ると、別の方法で実現できることがあります。お手元の提案書をもとに、どこまでをどう実現できるかを整理してご提案します。

ほかのBtoBサイトの事例

BtoBサイトの事例をすべて見る