2020.06.15

基本的な操作方法について

             

LP制作・改善支援ツール「CVX」でご利用できる基本機能のご説明や
管理画面上での操作方法について、実際の動画を交えて解説しています。

【機能01】初期設定(プロジェクトの新規作成)

CVXを利用するにあたり最初にプロジェクトの設定をする必要がございます。
プロジェクト一覧ページ右上、緑のボタン「プロジェクト新規作成」ボタンを押し、任意のプロジェクト名を設定すると、その名称のプロジェクトが作成されます。

【機能02】ページの新規作成/テンプレート選択

プロジェクトの作成が済みましたら、次はそのプロジェクト内で運用していくランディングページを作成します。
該当プロジェクト内、ページ一覧画面の右上、「ページ新規作成」という緑のボタンを押すとモーダルウィンドウが出現し、そこでページの種類(PC/スマートフォン専用/レスポンシブ)、ページ名を設定することでページを新規作成することができます。

ページを新規作成することができましたら、ページのレイアウトなどのデザインについてはデザイン編集ボタンから、URLやメタタグなどに関する設定はページ設定からそれぞれ行うことができます。

テンプレートギャラリーからのページ新規作成

CVX管理画面の画面左上に「テンプレートギャラリー」というボタンがあります。
こちらをクリックすると、CVXで搭載されている、PC/SP/レスポンシブのテンプレートが全て閲覧できるようになっています。
お好みのテンプレートがございましたら、該当のテンプレートをクリックすることでページの新規作成ができますので、ぜひご活用くださいませ。

【機能03】要素の複製

CVXではマウスカーソルが合った際に青枠で表示されるコンテンツを自由に複製することが可能です。
複製したいコンテンツを右クリックすると、「複製」というボタンが出現します。
これをクリックすることで該当コンテンツを複製することができます。

【機能04】要素の削除

CVXではマウスカーソルが合った際に青枠で表示されるコンテンツを自由に削除することが可能です。
削除したいコンテンツに対し右クリックすると、「削除」というボタンが出現します。
これをクリックすることで該当コンテンツが削除されます。

【機能05】要素の移動

CVXでは簡単に画像やテキストといったコンテンツを移動させることができます。
移動させたいコンテンツに対して、右クリックすると「移動・リサイズ」という項目が出現します。
これをクリックすると該当コンテンツが赤枠で囲まれ、ドラッグすることにより任意の位置へと移動させることができるようになります。
※レスポンシブテンプレートではこの操作は行うことができません。

【機能06】要素のリサイズ

テキストや画像の大きさを変更したい際には、変更したいコンテンツを右クリックし、それに伴い出現する「移動・リサイズ」のボタンを押します。
そうすると選択中のコンテンツが赤枠で囲われ、その四隅や中点をドラッグすることにより、選択中のコンテンツの大きさを自由に変更することができます。
※レスポンシブテンプレートではこの操作は行うことができません。

【機能07】テキストの書き換え

デバイスフォントで書かれているテキストに関して、該当箇所にカーソルを合わせると、テキストを書き換えることができます。
画像で作成されたテキスト以外は全て変更できるため、元のテンプレートから全く違うテーマのテンプレートへ作り変えることが可能です。

【機能08】テキストの編集

CVXではテキストのフォントサイズや種類、カラー、文字の太さなどを簡単に変更することが可能です。
変更したい箇所に対してドラッグをすると、該当箇所の上部に緑のツールバーが出現します。そのツールバーからテキストの編集ができるようになっております。

【機能09】画像の差し替え

画像に対してクリックをすると、画像設定画面が出現し、クリックした画像に対して詳細な設定を行うことができます。ここでは新たにアップロードした画像と変更したり、画像に対してリンクの設定や任意のaltタグを挿入することが可能です。

【機能10】画像のリサイズ・トリミング

画像に対してクリックした際に出現する、画像設定画面から自由に画像のリサイズやトリミングを行うことができます。
画像設定画面内の左、元の画像項目の下にある「複製して加工」ボタンや画像変更項目内、各画像の右下にある「画像を複製して加工」ボタンを押すと、画像編集窓が出現し、その右下にある「リサイズ」、「切り抜き」、「回転」ボタンからそれぞれの加工操作が行えます。
また編集を行った後は「保存」ボタンを押すことで、加工を施した画像をCVX内に保存することができます。

【機能11_1】セクションの追加(共通パーツ編)

CVXでは汎用性の高いセクション(大きくまとまったコンテンツ)を自由に利用できる「共通パーツ」機能を有しています。

各セクションの右上にあるツールバーの「+」ボタンを押すと、モーダルウィンドウが出現します。モーダルウィンドウの上部、「共通パーツ」から、全テンプレート共通で利用できる汎用性のあるセクションを選択することができ、自由に編集することが可能です。

「共通パーツ」には、編集の自由度を考えてカテゴリーごとに様々なセクション・パーツをご用意しています。
例えば、ヘッダーのセクションにはボタンの数やメニューの実装などご要望に合わせたセクションがあります。
他に、画像とテキストを組み合わせたセクション、画像のみのセクション、表を作るためのセクション、ユーザーアクションを促すコンバージョンエリアのセクションなどパターンは様々です。

また、「共通パーツ」は、随時、新しいセクションも定期的にアップデートしています。

【機能11_2】セクションの追加(共用テンプレート編)

CVXでは元のテンプレートから新しくセクション(大きくまとまったコンテンツ)の追加をすることや、すでにページ内にあるセクションを削除することが可能です。

各セクションの右上にあるツールバーの「+」ボタンを押すと、モーダルウィンドウが出現し、その中から任意のセクションを追加することができます。
モーダルウィンドウ内の「テンプレート」ボタンを押すと、現在選択しているテンプレートの元のテンプレートが表示されますので、こちらのモーダルウィンドウ内から必要なセクションを追加することができます。

また、「ー」ボタンを押すと、現在選択しているセクションを削除することができます。

【機能12】セクションの入れ替え

CVXではセクション(大きくまとまったコンテンツ)の順番を入れ替えることが可能です。
各セクションの右上にあるツールバーの中の上/下矢印をクリックすることで、セクションの順番を入れ替えることができ、理想とするコンテンツ順でCVまでの導線設計が行えます。上矢印をクリックすると上にあるセクションと位置を入れ替え、下矢印なら下にあるセクションと順番が入れ替わります。

【機能13】HTMLの編集

CVXでは選択しているテンプレートのHTMLコードを直接編集することができます。
各セクションの右上にあるツールバーの中の「html」ボタンを押すと、該当セクションのhtmlソースが出現し、こちらから背景色の変更や動画の挿入などを行うことが可能です。

【機能14】フォームの作成・編集

プロジェクト一覧ページの左、プロジェクトメニューバーにあるフォーム設定から簡単にフォームの詳細設定が行えます。
CVXでは問い合わせフォームのタイプをLP一体型にしたタイプと別ページに遷移させるタイプの2パターンから選べます。

また、自社でDBと連携させたお問い合わせフォームをお持ちの場合にはそちらへリンク設定させることも簡単に行うことができます。

CVXのフォーム設定では、入力項目を自由に生成、必須や任意項目の策定も設定することが可能です。

【機能15】ページの詳細設定
(公開に関する設定、OGPやファビコンなどの設定)

プロジェクト一覧 / ページ一覧画面から作成したランディングページのURL、ページタイトル、キーワードやディスクリプションなどの設定行うことができます。
また、OGPやファビコンの設定についてもこちらから行うことができます。
OGPの画像パスについては貴社サーバー側でアップロードした画像の絶対パスを指定ください。
参考URL:

https://conversion-labo.jp/report/lp_design/8318/

【機能16】ページの複製

作成・編集したLPを複製したい場合、プロジェクトメニュー/ページ一覧画面から簡単に行うことができます。
ページ一覧画面、複製したいLPの右側「コピーして新規作成」ボタンをクリックしすると、
新しいページの「ページ名の入力」と「コピー先のプロジェクトの選択」を促されます。
それぞれ設定が済み、モーダルウィンドウ内の「コピーして新規作成」ボタンをクリックすると、選択したプロジェクトに対して、新規ページがコピーされます。
A/Bテストなど複数のLPを運用をお考えの際や、コンテンツを変更する前にバックアップをとっておきたい場合などにお使いください。

【機能17】画像の遅延読み込みについて

CVXではランディングページの表示速度の施策としまして、画像の遅延表示機能がございます。
ランディングページにアクセスされた際に、全ての画像を読み込むのではなく、閲覧者のスクロールに応じて画像を読み込むことで初回リソースのロードを軽減させる機能です。

設定を行いたいページの右側、「ページ設定」より、
この機能をご利用頂くことができます。
設定画面一番下の「Lazy Loadを使う」にチェックを入れて、保存をするとこの機能がONになります。
※この機能はベータ版ですので、必ず動作に問題ないか実際の公開ページでお試しください。

【機能18】デザイン用 CSS / JavaScriptについて

デザイン編集画面の右上にある3本線ボタンの中に、
「 CSS / JavaScript」というボタンがあります。
そのボタンをクリックすると、「デザイン用 CSS / JavaScript」というウィンドウが表示されます。
そのウィンドウから、現在作成中のLPのHTMLに対して、CSS/Javascriptを自由に記述することができます。
クラスにCSSのプロパティを記述したり、Javascriptを記述することで、背景色の変更やスライダーなどを実装することができます。

【機能19】編集したセクションの複製について

CVXではセクションの編集した内容を引き継ぎ、複製することが可能です。ツールバーの「このセクションをコピーします」のボタンをクリックすると、直下に複製したセクションが追加されます。
またツールバーの上/下矢印をクリックすることで、複製したセクションを移動させることも可能です。

【機能20】保存履歴の復元について

CVXでは保存履歴を復元することが可能です。右上の「New」のプルダウンから「保存履歴から復元する」を選択します。
モーダルが立ち上がり、保存履歴の一覧が表示されるので該当の履歴をクリックすることで保存履歴が復元されます。また保存履歴にメモをつけることが可能です。

【機能21】ヘッダー・フッターの固定について

CVXではヘッダー、フッターを固定することが可能です。
ヘッダー(フッター)のツールバーから「このセクションを固定表示します」ボタンをクリックすることで固定されます。

【機能22】PC/モバイル転送について

CVXでは、PCとモバイル間でのデバイス転送設定が可能です。
PC側LPのURLと、SP側URLを紐付け設定をすることで、PCでアクセスしたユーザーにはPC側のLPを表示させることができ、逆にSPでアクセスしたユーザーにはSP側のLPを表示させることができます。
※ページの種類がPC専用・スマートフォン専用で作成しているLPに限る