ノウハウ・活用事例
【LP作成の新定番！】 コーディング有りでも無しでもLP作成がひとつのツールで!?
本記事では、制作初心者の方から一流のLP製作者に至るまで、誰でも簡単にLPが作成、複製まで出来るようになる最新ツール「Squad...
近年、LP制作の現場で、「レスポンシブデザイン」、「レスポンシブ対応のLP」という言葉が当たり前のように利用されるようになり、もはやWeb広告業界の常識になりつつあります。本記事では、そんなレスポンシブに対応したLPの基本的な仕組みから、実際の導入方法まで詳しく解説していきます。
近年、LP制作の現場で、「レスポンシブデザイン」、「レスポンシブ対応のLP」という言葉が当たり前のように利用されるようになり、もはやWeb広告業界の常識になりつつあります。
本記事では、そんなレスポンシブに対応したLPの基本的な仕組みから、実際の導入方法まで詳しく解説していきます。
レスポンシブ対応のLPとは
レスポンシブ(Responsive)とは、直訳すると「反応性が有る」です。
Web広告業界では、このレスポンシブという言葉を用いて、ユーザーが利用しているデバイスに応じて同じ訴求内容でも、画像のサイズなどのデザインが切り替わるデザインのことを
「レスポンシブ(Web)デザイン」と呼んでいます。
スマートフォンやタブレット端末の普及とともにこのレスポンシブデザインはLP制作においても広く利用されるようになり、「レスポンシブ対応のLP」はWeb広告で広く利用されるようになりました。
これからLP作成を始める人や、まだレスポンシブ対応のLPを導入していない人にとっても、今後必ず必要になる要素といえるでしょう。
では早速、レスポンシブ対応のLPがどのように作成されているのかを見ていきましょう。
※もしコーディングでの作成ではなく、テンプレートで作成したLPのレスポンシブ対応についてご覧になりたい方は「レスポンシブ対応のLP｜テンプレート編」をご覧ください。
レスポンシブ対応のLP作成｜コーディング編
まず、一般的にLP を作成する場合、HTMLコードを用いてベースを作り、CSSやJavascriptを用いてLP全体の装飾や機能の追加をしていきます。
↓コチラの記事では、コーディングに関する詳しい内容を記載しています。
レスポンシブ対応のLPでは、主にHTMLとCSSを用いてスマートフォンやPCなどの各デバイスに対応させてたLPを作成していきます。
具体的にはHTMLでviewportと呼ばれる画像などのコンテンツに関する表示領域を決める指定を行い、CSSでコンテンツに関する詳細な記述をPC用とスマホ用で区別しながら書き進めていきます。今までPC用とスマホ用の別々のLPで書いていた画像の横幅、配置などに関する内容を一つのLP上で全てコーディングするという認識です。
ここでは具体的なコードなどは割愛しますが、実際にコーディングを行う上で、レスポンシブ対応させるには、スマホ用、PC用の要素を一度に記述する必要が有るため、無論1つのデバイス向けにコーディングするよりも時間がかかります。
レスポンシブ対応のLP作成｜テンプレート編
では、テンプレートにはめ込んでLPを作成している場合、レスポンシブ対応のLP作成は可能なのでしょうか？
結論から言うと可能です。
ですが、実際に利用するためには複雑な設定や作業が必要になります。今回はテンプレートのLPをレスポンシブ対応にするための2つの方法をご紹介します。
1つ目は、テンプレートでの作成を行ったあとに、上記のHTMLとCSSのコーディングを用いてレスポンシブ対応に設定する方法です。
テンプレートでLPを作成した場合、基本的にはLPを構成するためのコードが既に組み込まれているため、そのコードにレスポンシブ対応用のコードを組み込むことでテンプレートのLPでもレスポンシブ対応にすることが可能です。
しかし、実際にLPを作成するたびにこの作業を行う場合、そもそもの作業工程が増えてしまうことに加え、コーディングのための基本的な知識が必要になってしまったり、思うようにLPが作動せず何度も試行錯誤を繰り返す事になったりと、今までテンプレートのみで作成を行ってきた人や、これからテンプレートで作成する人にとってはややハードルが高い作業になってしまいます。
結局コーディングが出来る人に依頼し、実装してもらっては、テンプレートで作成した意味がなくなってしまい本末転倒です。
2つ目は、スマホ用とPC用で別々のLPを作成する方法です。
この場合、実際にはレスポンシブ対応と呼ぶことは出来ないかも知れませんが、スマホ版とPC版での出し分けも可能になります。テンプレートでの作成のため、コーディング等の専門的な作業は必要ありませんが、1つのLPを作成するたびに2種類ずつ同じ内容で画像のサイズや構成が異なるものを用意する必要があります。
そのため、1度に多くのLPを制作する場合は単純に必要なLP数も2倍に増加するため、作業工数も2倍近くに膨れ上がってしまいます。
またこの方法は、LP制作後の配信に関しても作業工数を増やす要因になります。
LPは作成して終わりではなく、実際に配信を行い顧客の反応をもとに改善を加え、最適化していく必要があります。Web広告業界ではこの工程はLPO(Landing Page Optimization)と呼ばれています。このLPOを行うためには、LPを制作した後に幾つかの設定が必要なのです。
LPOで最も利用される手法にABテストがあります。ABテストは中身や構成が同じ2つのLPで1~2箇所のみ画像やテキストが異なる状態で配信し、どちらの方が顧客の反応が良いかを調べる方法です。AB テストを行うためには、複数のLPが必要になるため、それぞれにユニークなURLを設定する必要があります。
さらに、LPの解析に不可欠なレポートや、ヒートマップツールなどを利用するために、LP内にタグを埋め込む必要もあります。
LPの数が増えれば、当然必要なURLやタグの量も増え、Excelなどの外部ツールで全てのURL,タグを管理するという作業に追われてしまいます。
もしも、スマホとPC用で別々にLPを作成するとすれば、タグやURLを追加で発行する必要があり、さらに媒体側でも「スマホ用URLに配信する広告」と、「PC用URLに配信する広告」といった形で個別の配信をしなければならないのです。
正直聞いてるだけで面倒ですよね？
簡単にまとめると、従来通りのWeb広告運用で、テンプレートで作成したLPは、
- 最低限のコーディングの知識を身に付けて、毎回コーディングする
- スマホ用、PC用にテンプレートを作成しそれぞれにURLやタグを埋め込む
の2種類の方法でしか、デバイスに応じたLPの出し分けは不可能だったということです。
「今からコーディングの勉強するのか…」
「毎回URLやタグの設置をして、管理が面倒になりそう…」
「もっと楽にレスポンシブ対応させたい…」
そんな人にオススメしたいツールが「Squad beyond」です。
Squad beyondはコーディング知識の有無に関係なく、デバイスに応じたLPの作成が可能になり、しかもURLやタグの設置が必要ありません！
そのワケを一緒に見ていきましょう！
制作から運用まで｜Squad beyond
Squad beyond（以下beyond）は、広告運用に特化したCMS(Content Management System)ツールです。
今まで、LP制作から運用に至るまで様々なツールを使う必要があった広告運用をよりスムーズで透明性の有るものに変えるため、beyondは新たなプラットフォームとして、制作から運用に必要な全ての機能を兼ね備えています。
あまりに機能が多すぎて、残念ながらここではその全てを紹介することは出来ません。。。
より詳細な機能が気になる方はコチラの記事↓を御覧ください。
本記事では、beyondを用いてレスポンシブ対応のLP配信を行う方法をご紹介します。
まず、beyondはHTMLなどのコードを用いたLP作成に加え、ノーコードでの作成も可能です。画像やテキストを貼り付けたり打ち込んだりすることが出来るのはもちろんのこと、beyondに標準搭載されている200種類以上の装飾を自由に利用することによって、はじめてLPを作成する人でも、思い通りのLP制作が出来る設計になっています。
作成したLPは、同じbeyondアカウントを持つチーム内での共有が可能で、誰かが変更を加えても全て変更履歴で確認が出来ます。
また、beyondでLPを作成した場合、必要なURLは一つだけです。
今までレポートやヒートマップなど、外部ツールとの連携や管理のためにユニークなURLの設定やタグの発行は必要不可欠でした。
しかしbeyondでは、それらの広告運用に必要な要素が全てひとつのツール上に標準搭載されているため、URLの設定やタグの設置など、LPOを煩わしくさせる要素がなくなります！
この2つの要素が合わさることにより、beyond上では、スマホ用とPC用2種類のLPを同一のURLで配信することが可能になります！ノーコードでLPを作成しても、今まで必要だったLPやタグの設定、管理も、コーディングによる出し分けも必要ありません。
さらにbeyondはLPのURLが同じだから、LPの複製もボタン一つで可能です。
PC用に作成したLP1Clickで複製し、スマートフォン用として作成、画像などの差し変えを行えば、デバイスに応じたLPの作成は完了です。
「URLが同じなのに、どうやってデバイスを区別して配信するの？」
という疑問をお持ちの方もいらっしゃると思います。
beyondにはデバイス別LP出し分け機能が搭載されており、スマホ用、PC用とLPを準備した後、任意のLPに対して出したいデバイスと配信割合を指定するだけで自動で配信されます。
Squad beyondを用いた運用
さらに制作だけではなく、配信したあとの運用面でもbeyondならではの便利な機能がたくさんあります。
今まではLP作成の後にレポートやヒートマップとの紐付けを行っていましたが、beyondを利用すればLPを作成をした瞬間にどちらも自動で作成されます。また、同じツール上で作成や運用を行うため、レポートなどの数値に乖離がなく、正確な数値を共有することが可能です。
また、ABテストのために同時配信した複数のLPのヒートマップを並べて表示し、LP内のどの部分が着目されているか、各LPに対するユーザーの反応比較することも可能になります。もちろん、PCとスマホを比較することだって可能です。
逆に、毎回ヒートマップを比較し、細かく見ていくのではなく、LPの良し悪しを簡単に把握したい場合にはFVER（First View離脱率）やSVER（Second View離脱率）などが全てレポート上に記載されており、迅速な判断が可能です。今まで当たり前のように行っていた、ツールを行き来や、乖離した数値の修正などの面倒な作業とはオサラバです。
そして、制作から運用まで一貫しているツールであるからこそ実現可能な機能があります。
それがBranch Operationです。
Branch Operationは、広告媒体で配信しているクリエイティブとLPの相性をbeyond上で確認することが出来る機能です。
今までの運用では、全てのLPのURLが異なり、媒体に配信する広告のURLも異なっていたため、一定以上の数クリエイティブやLPを配信すると、全ての組み合わせについて成果を追っていくことはほぼ不可能でした。そのため、LP単体で見て成果が低い場合、停止するという判断が下されていました。
しかし、beyondは全てのクリエイティブ×LPの結果をレポート上で自動で表示します。
さらにレポート上で任意の組み合わせについて配信のオン/オフを切り替えられます。
スマホ用、PC用のLPとクリエイティブとの組み合わせを評価することも出来るため、
「スマホでの成果は高いのに、PCでの成果が低すぎるためにLP自体停止してしまう。」
といった顧客獲得機会の損失の防止や、
「成果の低い組み合わせのみを配信停止する。」
などの無駄を省くための施策を行うことも出来ます。
つまり、beyondの導入で、デバイスごとの配信が可能になるだけでなく、配信の無駄を省き、より成果を上げるための施策を、簡単に判断、実行できるようになります。
↓実際にbeyondの導入で運用効率があがった事例を公開中！
いかがでしたでしょうか。Squad beyondは、LPをレスポンシブ対応させるだけではなく、Web広告の運用効率改善までお手伝いします。
ぜひ一度、Squad beyondをお試しください。