サイト編集

ページ編集では、Webページ内のコンテンツの修正または追加・削除が簡単にでき、コンバージョン向上に役立てることができます。テキストや画像、ボタン、レイアウトの編集はもちろん、様々なタイプのコンテンツを追加・削除することが可能です。効果的なページ編集のアイデアを確認したい場合は、インスピレーションギャラリーをご覧ください。

Note:インライン編集を使う前に必ずお読みください
ページ編集で変更する前のクリエイティブが一瞬チラついて表示されてしまう「フリッカー」という現象があります。これを防ぐためPtengineの基本タグをHTMLソースの内に直接設置することをお願いしております。詳細はこちらのページをご確認ください。

ページ編集の始め方 #

  • 1Ptengine Insightから始める場合

    ヒートマップにて、訪問者の関心の高いコンテンツや離脱の多いポイントなど、最適化のインサイトを得たら、すぐにページ編集画面に切り替えることができます。Webビューヒートマップの画面右上の「施策する」ボタンから「ページを編集」を選択し、ヒートマップで得たインサイトをもとにコンテンツの追加や削除、テキストや画像、CTAの編集をしてみましょう。

  • 2Ptengine Experienceから始める場合

    Ptengine Experienceにて「+体験を新規作成する」ボタンを押すと、体験の編集方法リストが表示されます。ここで「ページ編集」または「アドバンス」を選択すると、ページ編集画面を起動することができます。オリジナルの体験を作成したい場合は空白の「+オリジナル作成」を、アイデアやテンプレートを参考にしたい場合はそれぞれのコンテンツをクリックし、体験名と編集ページを指定して編集を開始しましょう。

テキストの変更 #

「テキスト変更」では、ページ内のテキストを直接変更することができます。製品やサービスの価値を表現するタグラインやコピー、またはCTAボタンのテキストを変更することで、コンバージョンが増えるかどうか検証してみましょう。

訪問者の関心をより引くようなデザインを検証するために、ツールバーのスタイル編集のアイコンからテキストやボタンの色や形を変更することも可能です。スタイル編集には、要素やテキストのサイズ、字体、テキストの太さ、行間、配置、色、下線や斜体、取り消し線などの装飾、選択した要素の背景や枠線の色、太さの選択、余白などが設定できます。

画像の変更 #

画像コンテンツを選択すると、ツールバーに「画像変更」が表示されます。アイキャッチ画像やバナー画像などを変更して、効果を検証してみましょう。テキストの変更と同様にスタイル編集も可能です。

コンテンツの追加 #

コンテンツ追加では、テキストや画像、動画などのコンテンツを新たにページに追加できます。例えば、「カートに追加する」ボタンの近くで「7日間の返品保証つき」というような返品ポリシーを訴求したり、新着記事へのバナーを追加してみたり、ページの中間に重要なCTAを追加するなど、様々な方法があります。

コンテンツの追加方法

  • 1追加したい場所の周辺のコンテンツをクリックします。緑色で表示されているレイヤー選択機能を活用すれば適切なレイヤーを選択することができます。Ptengineでは親レイヤーを選択することを推奨しています。レイヤー選択機能の詳細はこちらをご確認ください。
  • 2「コンテンツ追加」をクリックして、コンテンツを追加したい場所を選択します。2022年6月現在、次の5つのタイプのコンテンツを追加することが可能です。(見出しテキスト、本文テキスト、画像、ボタン、HTML)
  • 3コンテンツを追加後、ツールバーのテキスト編集、画像変更、スタイル編集を利用してコンテンツを編集することができます。

コンテンツを追加する場所の違いは?

  • 1「選択した要素の前」「選択した要素の後」

    多くの場合、下の例のように選択した要素の上部(または下部)にコンテンツが追加されます。しかし、このロジックは編集中のページ構成に影響を受けるため、実際にお試しいただくことをお願いしております。

  • 2「選択した領域内の先頭」「選択した領域内の末尾」

    多くの場合、下の例のように選択した要素の左側(または右側)にコンテンツが追加されます。しかし、このロジックは編集中のページの構成に影響を受けるため、実際にお試しいただくことをお願いしております。

※コンテンツを追加したい場所にうまく追加できない場合は、チャットサポートもしくは弊社担当者までお問い合わせください。お客様のお声をもとにサービスの利便性向上に取り組んでまいります。

コンテンツ追加後、既存コンテンツとの間隔を調整するには?

スタイル編集アイコンをクリックし、ツールボックスを下にスクロールすると内側余白と外側余白を編集できます。

下の図のように、内側余白ではコンテンツの枠線内の余白を、外側余白ではコンテンツの枠線外の余白を調整できます。

コンテンツ追加後、配置を調整するには?

見出しテキストまたは本文テキストを追加した場合、左寄せ、中央寄せ、右寄せ、均等割り付けから配置を指定することができます。

画像またはボタンを追加した場合、レイヤー選択機能で1つ前(これに限らならい場合もあります)のレイヤーを選択してからスタイル編集アイコンをクリックし配置を選択します。


コンテンツのコピーと貼り付け #

既存のコンテンツと類似するコンテンツを追加したい場合、ツールバーの「コピーを作成する」アイコンをクリックすればコンテンツをコピーすることができます。そして、「貼り付け」アイコンをクリックしてコピーしたコンテンツをページ内の別の場所に貼り付け、ツールバーからコンテンツを編集することが可能です。


クリックアクションの有効化と変更 #

クリックアクションを有効化または変更する必要があるのはどんな時でしょうか?

  • 1リンクが貼られていないコンテンツにクリックが集中している場合。コンテンツにリンクを追加しましょう。例えば、クリックヒートマップでページを確認したところ導入企業のロゴにたくさんのクリックが集まっていた場合、訪問者はより詳細な導入背景を求めている可能性があるので、事例記事などをリンク先に設定してみましょう。
  • 2アイキャッチ画像やボタンを追加した場合。クリックアクションを追加して、より多くのエンゲージメントを獲得しましょう。
  • 3既存のリンクに対して検証を行う場合。現在のリンク先とは異なるページを設定し、より多くのコンバージョンに繋がるかどうか確認してみましょう。

クリックアクションを有効化または変更するには?

クリックアクションアイコンをクリックして、「クリックアクションを有効化する」をONにします。2022年6月現在、次の4タイプのクリックアクションが選択できます。(リンクへ遷移、電話をかける、テキストやURLのコピー、ファイルのダウンロード)

クリックをイベントとして計測する

コンテンツに対するクリックアクションを基に体験のパフォーマンス評価したい場合、「イベント計測を有効化」をONにします。このイベントは体験のゴールとして利用できるだけでなく、Ptengine Insightでの数値確認やヒートマップにてセグメント条件としても利用できます。もちろん、体験を配信する際のユーザーグループとしても利用可能です。

「イベント計測を有効化」すると、既にPtengine Insightのイベント設定をご利用いただいている場合は既存のイベントが表示されます。「会員登録ボタンのクリック」や「問い合わせボタンのクリック」など、類似のクリックアクションが既存のイベントの中にある場合はそれを選択しましょう。または、「イベントを新規設定」から新しいイベントを追加することも可能です。イベントを新規設定する場合は新しいイベント名を入力してください。そうすると、デバイスに関わらず計測が開始されますが、体験のパフォーマンスを測るためにイベントを使用する場合は、体験の公開前に体験のゴールとしてここで作成したイベントを選択してください。

コンテンツの削除 #

訪問者の関心が低いコンテンツは削除アイコンから1クリックで削除することができます。アテンションヒートマップでページを確認し、訪問者にあまり見られていないコンテンツは削除してみましょう。

HTMLの編集 #

より高度な編集を行いたい場合は、ツールバーのHTML編集アイコンからHTML編集をすることができます。

レイヤーの選択 #

レイヤー選択機能は適切なサイトの構成要素を選択するのに役立ちます。例えば、バナーとその中のテキストも含めて全体を選択したい場合、レイヤー選択バーの中間にある div を選択します。選択されている要素には薄緑の背景がかかるので、適切な要素を選択できているかどうかご確認ください。レイヤー選択バーの要素名をクリックするだけで要素を選択できます。

上のコンテンツのサイト構成は下の図のようになっています。

レイヤー選択機能はどのような時に使うのでしょうか?

  • 1バナーリンクの変更だとしても、レイヤー選択機能が必要とあるサイトもあります。例えば下の例では、画像をクリックするとツールバーからは「画像変更」しか選択できません。ここでバナーにリンクされているリンク先を変更したい場合は、レイヤー選択バーから a タグを選択することでクリックアクションの編集エディターに入ることができます。
  • 2下の例のように、赤枠全体を選択したいが、カーソルを合わせると画像やテキストしか選択できない場合にレイヤー選択機能を利用します。この場合は、全体のコンテナが後ろに隠れているため、レイヤー選択バーを利用して適切な要素を選択してください。
  • 3HTMLの知識無しでページに新たなコンテンツを追加したい場合に利用します。下の例の場合、レイヤー選択機能を利用して異なるレイヤーにカーソルを合わせると、真ん中の div が親レイヤーであることがわかります。 div を選択してこのレイヤーの後にコンテンツを追加しましょう。

ページ編集履歴 #

全てのページ編集履歴はメニューバーから確認できます。「変更数○箇所」をクリックすると、コンテンツの変更や追加した内容が確認できます。それぞれの変更履歴をクリックすれば変更箇所に誘導されます(削除したコンテンツを除く)。また、削除アイコンをクリックすると、その変更自体を取り消し、オリジナルに戻すことができます。

画面操作モード #

メニューバーのような、ページ上でクリックをしないと表示されないインタラクティブコンテンツを編集したい場合、画面操作モードを利用します。画面操作モードに切り替えた後、クリックしてコンテンツを表示したら当モードを終了し、通常の編集モードに戻りページ編集を行います。

この記事についてどう思いますか?

  • いいですね!
  • よくないです

評価いただきありがとうございました

  申しわけありません!理由を教えてください。

    サポートチームに直接問合せたい場合、こちらをクリックしてチャットしましょう