更新日：2020.09.07
導入にあたっての最大の壁
ズバリ“会社のルール”です。
「B2Bマーケティングドライバー」は弊社のサービスであるため、利用すること自体への障壁は一切ありませんでした。
商品としてお客様に提供しているものなので、ご利用いただくお客様に万が一のことがあってはいけませんから当然ですね。商品化の前に、細かく厳しい各種基準をすべてクリアしています。
おかげで「リードビルダー」はお客様の情報を扱いますが、全く問題なく導入できました。
問題はWebサイトの方でした。
会社のサイトとして公開する以上、ルールに則っていることが第一条件です。
本サイトを構築するにあたり“サイトビルダーでの構築”が一番の難関でした。
「B2Bマーケティングドライバー」の導入をお考えの企業様に念入りに確認するところでもあります。
ガバナンスを強化していて、既にルールができあがっている企業であれば何処でも直面する課題です。ロゴの正確な表示位置やサイズ、必要最低限の項目やカラー指定などなど。。。
せっかく頑張って作ったサイトが、お客様の目に「偽サイト」と映ってしまっては本末転倒です。
Webサイトは、お客様の目を惹くものであることに意識が向かいがちですが、
会社の”顔”であることを常に意識していなければいけません。非対面での営業活動が当たり前となってきている今、営業員や、商品より先にWebサイトを見て比較検討をしていることが珍しくありません。
実際、「B2Bマーケティングドライバー」に興味を持たれるお客様は、Webサイトで既にふるいにかけられ、商談に進めない。といったことに危機感を持っている方を多くお見掛けします。
弊社には既に決まったテンプレートがありますので、「B2Bマーケティングドライバー」が用意しているテンプレートでどこまで再現可能なのか検討してみました。
弊社のテンプレートは表示位置やサイズの指定が細かく決まっており、「B2Bマーケティングドライバー」が用意しているテンプレートからの修正では余計に手間がかかってしまうことが判明し、サイト企画の使用を諦めました。
サイト企画が使えないため、テンプレートから制作が必要となります。
「サイトビルダー」の良いところは、テンプレート自体の制作が自分でできることです。とはいえ、通常は制作サービスの利用をお勧めしています。
というのも・・・
このあとの苦労話をご覧ください。
無謀にも今回は自力で作ってみることにしました。
実際の編集画面
「サイトビルダー」でテンプレート制作に挑戦
この便利な機能をブロックして、意図通りのデザインを作成するには「どこで、何の設定をしているのか」を正確に知る必要があります。
また、通常のHTMLでもそうですが、設定の優先順位というものがあるので、どこの設定が優位なのかを確認しておく必要もあります。細かく設定ができる分、あちこちに設定項目があり、覚えるのに苦戦しました。
前出の通り、素直に「サイト企画」や「制作サービス」を利用していれば、しなくて良い苦労だったのですが。。。
せっかくなので、少しご紹介します。
まず、あちこちで登場する「ボタン」のカラーやサイズの共通パーツは比較的カンタンに作ることができました。カラーの設定だけであれば一切コードを書く必要がなく、待機時とマウスオーバー時のカラーをパレットか、カラーコードで指定するだけです。作ったパーツに名前を付けておくと、同じデザインのボタンを作る際に、その名前をプルダウンメニューから選べば設定完了です。もちろん、ボタンに表示する文字や、リンク先は個別に設定できますので、コピー＆ペーストよりラクにできます。カラー以外の、サイズ指定などはcssの設定が必要になりますので、頑張って紐解きました。
とはいえ、それっぽい「 height」や「 width」などの項目があるので、ここの数値を変更しながら様子を見れば大抵は解決します。
苦戦したのは、横並びで表示する場合です。
「サイトビルダー」が判断してサイズを最適化してしまう為、普段ならむしろ歓迎な機能なのですが、今回は位置もサイズも決まっているので調整できるようになるまで、かなり悩みました。
他にも、レスポンシブ対応で苦戦しました。
「サイトビルダー」は自動でレスポンシブ対応していますので、特に指定がなければ問題ありません。
ところが今回は、スマホ表示の際の指定がありましたので、PC表示とスマホ表示を個別に設定しなければいけないところがありました。
PC表示で凝った指定をしてしまうと、スマホ表示で崩れてしまいがちなので、できるだけシンプルにすることを心掛けました。
テンプレートができあがってみると・・・
会社のルールに関わるパーツ作りが終わると、あとは猛スピードで構築が進みました。
ヘッダー／フッターのような、どのページにも必要なパーツは”共通ブロック”として名前を付けることで、他のページでも名前を指定するだけで反映できます。
共通ブロックに設定した中で修正が必要になっても、1か所を修正すれば、同じ共通ブロックを使用している全てのページに反映されます。
実はこの機能を利用して、別々のページで同じ内容を表示する必要があった部分の、”片方だけ更新漏れ”を防止しています。どこだかおわかりになりますか？
<iframe>というタグを使って、他のページを参照するやり方もありますが、ブロック単位で共通にする方がとても手軽です。
また、ブロック単位でコピーや並べ替えができるので、頻繁に変更する「イベント情報」や「お知らせ」もカンタンに増やしたり、順番を入れ替えることができるので重宝しています。
まとめ
このような取り組みの結果、公開されたのがこの【トレードエコシステム事業サイト】です。もちろん、子サイトである『Webマーケティング実践のためのウェブ活用ラボ』も『バックオフィスラボ』も同様です。
今後、更新の作業者を増やす場合でも、コードを書かずに更新ができるので作業者のスキルにあまり依存しませんし、コピーして文字を変更するだけであれば短時間に作業が終わるので外部委託からは比べ物にならないスピードアップが可能です。
まだ運用が始まったばかりなので期待値ではありますが、今後運用していく中でお役立ちしそうな取り組みができましたら、こちらでご紹介させていただきます。
※今回は自社でオリジナルテンプレートを作成しましたが、オリジナルテンプレートを作成するサービスも提供しています。同じようなお悩みをお持ちの場合、一度ご相談下さい。