見出し画像

営業がSTUDIOでLPを制作・運営するメリットとデメリットを紹介します!

スマートキャンプデザインブログ、Designer / Engineer のhaguriです。

スマートキャンプにはBALES(ベイルズ)という事業があり、Pardotという、Salesforceと一体型のマーケティングオートメーションツールによってすでに「BALES紹介用のWebページ(以下LP)」が作成されていました。

そのPardotからノンコーディングでWebサイト制作ができる「STUDIO」に移行させました。本記事はその理由と効果について紹介していきます。

Pardotで作ったLPについて

BALESにはもともと以下のキャプチャのようなLPが存在していました。
このLPはPardotで実装されています。

スクリーンショット 2020-04-01 午後5.19.06

Pardot上で実装するにはHTML/CSS、つまりコーディングをしなければなりません。

この運用を続けていたところ、いくつかの課題があったため、まずはLPを全面リニューアルするところから始まりました。

LPをリニューアルする理由

「事業的な課題」と「実務的な課題」があり、これらを解決するため、リニューアルを行いました。

事業的な課題
・事業内容の変更によりページ編集をしなければならない
・LPの内容が狙いたい層とズレていて変更しなければならない
・セミナー告知ページや事例資料ページなども追加で作りたい
実務的な課題
・LPの更新をするためには、コーディングできる人がやるしかない
・セミナー告知ページを追加することで、更新頻度が高まるため、デザイナーのリソース不足になる可能性がある

またこれらの課題を受け、非デザイナーも編集できた方が効果的だとも思いました。ゼロベースの新規デザインを除いて、型が決まっているセミナーページは非デザイナーも編集できれば効率的です。

それが可能になれば、デザイナーに依頼しなくても仮説検証のサイクルを非デザイナーだけで回すことができそうです。

そのため、過去に「Biscuet(ビスケット)」のLPや、弊社のコーポレートサイトなどでも導入実績のあるSTUDIOで作成することにしました。

以下が過去のSTUDIO導入に関する記事です。

リニューアルしたLPの構成と完成形

リニューアル後のLPの全体構造は、次の図の通りです。

画像2

その中で、型化できそうな部分は図のオレンジ色で囲った4つだと考えました。

画像3

トップページ以外は、型化すれば非デザイナー自身で運用できそうだと判断し、LPイメージを作成しました。以下はそのイメージです。

画像4

画像5

画像6

画像7

デザインが決まれば、STUDIOでの実装はかんたんなので、FigmaやSketchのようなデザインツールと同じように図形や文字を配置していき、調整していくだけです。

以下、完成後のページです。


これらの運用とLPの変更によって、実際にどのような効果があったのかを聞いてみました。

---  以下、運用者による声です

メリットの声1:「運用スピードの向上」

もともとLP系の依頼をするときは、スプレッドシートで依頼していました。単発のものや型化されたLPであればその依頼方法で問題ありませんでしたが、運用しながら文言を変えたり、事例資料をはじめ先方との調整があったりする場合は、都度デザイナーに依頼するのが手間になっていました。

それが、STUDIOによって自分たちでページの追加や文言調整ができるので、スピード感をもって変更できるようになりました。

メリットの声2:「自分たちで仮説検証ができる」

STUDIOだとページ内の文言だけでなく、title、description、OGPといったSEOやシェアに関係することも設定できます。

そのため、ユーザーがどんな検索キーワードからアクセスしてほしいかを自分たちで考えて、効果検証できる基盤ができました。

メリットの声3:「HTMLやCSSの基礎知識がついた」

STUDIOはdivを左上から積み上げていくというHTMLの仕組みや、padding、marginといったCSSの仕組みが直感的に見てわかるようになっています。

そのため、自分たちでページを作っていくことで、ある程度「こんな感じの構造になっているのかな」というイメージを持てるようになりました。

メリットの声4:「楽しい!」

シンプルなことですが、STUDIOでのLP作成は楽しいです。

STUDIOは作成過程が目に見えてわかるのと、難しいデザインツールと違って、操作するためのボタンが文字ではなく、アイコンになっていてわかりやすいのが特徴です。

そのため、デザインツールを使ったことがありませんでしたが、すぐに使いこなせるようになり、LP編集が楽しく感じられました。

デメリットの声:「同時編集によるミス」

STUDIOは複数人で同時に作業できます。それはメリットではあるものの、運用方法をしっかり決めてないせいで、思わぬミスが起こってしまいました。

STUDIOは1ページ単位での公開はできず、全ページが一括で公開されてしまいます。

自分が修正して「大丈夫だ!公開しよう!」と思って公開したら、別の人が修正途中の状態で公開されてしまった、ということが起こりました。

そのため、運用回避として下書き用の別プロジェクトを作成しています。そこでLPの作成や修正を行って、公開する直前に本番用のプロジェクトにコピペするようにしています。

--- 以上が、運用者の実際の声でした。

STUDIO移行はデメリット以上にメリットが大きい

他にもSTUDIOには、共通化機能(Figmaでいうところのコンポーネント)のようなものがありません。そのため、ヘッダーやフッターといった共通のものを修正するときは、全ページを地道に変えていかなければならないといったデメリットも存在しています。

それでも、Webサイト作成をデザイナーやエンジニアといったコーディングができる人だけでなく、誰でも簡単にできるようになったのは非常に大きな効果があったところです。

誰でも編集可能になることで、スピード感を持って仮説検証できるようになり、いい運用方法になったと感じています。

WRITER: 葉栗 雄貴 / haguri ( SMARTCAMP Designer&Engineer )
EDITOR : モリシゲ ( SMARTCAMP / Designer )



あなたのサポートがデザインブログ更新の意欲になります!いただけたらブログの中で恩返しできればと思います!