> For the complete documentation index, see [llms.txt](https://helps.ptengine.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helps.ptengine.com/experience/campaign/create-new/editor-usage.md). # エディターの使い方 {% hint style="info" %} **動画↓↓↓** 順番と内容はテキストとやや異なりますが、初心者の方におすすめな内容をご案内しています。 {% endhint %} {% embed url="" %} *** {% hint style="info" %} **テキスト↓↓↓** {% endhint %} ## **テキストの変更** ### **テキスト編集** 変更したいテキスト要素をクリックすると、ツールバーに「テキスト変更」が表示されます。テキストはこの画面上で直接変更可能です。 ![](/files/gebTM5jwjj8Z1Fyez79A) コピーやCTAボタンのテキストなどを変更し、コンバージョン率を検証できます。 ![](/files/cKcxaqM7YYaqzUCiGE0Z) ### **スタイル編集** ツールバーの「スタイル編集」のアイコンをクリックすると、以下を変更できます。 * 要素のサイズ * フォント、フォントサイズ、太さ、フォントの色 * 行間、配置、 * 下線や斜体、取り消し線などの装飾 * 選択した要素の背景や枠線の色、太さ、余白 ![](/files/G4KgVJBgpf1JC5ygRa3O) ## **画像の変更** ### 画像の差し替え #### **基本手順 🖼️** 1. **要素の選択** * 変更したい画像要素をクリック 2. **ツールバーの表示** * 「画像変更」オプションがツールバーに表示
3. **画像のアップロード** * お手持ちの画像ファイルをアップロード * もしくは画像のリンクを入力する ![](/files/vTlznW6fTxMkfbltnCzl) 4. **画像の入れ替え** * アップロードした画像が元の画像と自動的に入れ替わる {% hint style="danger" %} 重要な注意点 * この機能は、imgタグで作成された画像にのみ適用可能です。 * 背景画像やCSS内で指定された画像には使用できません。 {% endhint %} **アップロード可能な画像形式と制限 📁** * **対応フォーマット**:　JPEG, PNG, GIF, AVIF, WebP, ICO, SVG * **最大ファイルサイズ**:　6メガバイト アイキャッチ画像やバナー画像などを変更して、効果を検証できます。 テキストの変更と同様にスタイル編集からサイズや余白を調整可能です。 ### **画像の設定（代替テキスト）** 画像要素を選択すると、ツールバーに「画像の設定」アイコンが表示されます。選択中の画像に代替テキスト(Alt)を設定することができます。 代替テキストについての詳細は、[Webアクセシビリティへの対応](/faq/experience-edit/web-accessibility.md)をご参照ください。 ![](/files/zqJqa7c9VnqSRE7Z1WoO) ## 動画の挿入と編集 ページに新しい動画を挿入したり、既存の動画を編集したりすることができます。 YouTube動画および直リンク動画（MP4/WebMなど）の2種類に対応しています。 *** ### 動画の挿入 🎬 #### 基本手順 1. **要素の選択** * 動画を挿入したい場所の近くにあるコンテンツ要素をクリックします。 2. **「コンテンツ追加」をクリック** * 挿入位置（前、後、内部など）を選択します。 3. **「動画」を選択** * コンテンツ追加のタイプ一覧から「動画」を選択します。
4. **動画の URL を入力** * YouTubeの動画リンクまたは動画ファイルの直リンク URL を入力します。
5. **再生オプションとサイズを設定し、「確定」をクリック** #### 対応している動画形式 | タイプ | 例 | | ------- | --------------------------------------- | | YouTube | `https://www.youtube.com/watch?v=xxxxx` | | 直リンク動画 | MP4、WebM など | {% hint style="warning" %} 動画の URL は `http://` または `https://` で始まる必要があります。有効なリンクアドレスを入力してください。 {% endhint %} #### 再生オプション 動画挿入ダイアログの「再生設定」で以下のオプションを設定できます。 * **自動再生**：ページ読み込み時に自動的に再生を開始します。 * **ミュート**：動画の音声をオフにします。自動再生を有効にすると自動的に有効になります。 * **ループ再生**：動画の再生終了後に自動的に繰り返し再生します。 * **コントロールを非表示**：再生プログレスバーなどの操作画面を非表示にします。 #### サイズ設定 「表示設定」で動画の幅と高さを設定できます。 * **ピクセル指定**：数字のみを入力します（例：`380`）。 * **パーセント指定**：数字に `%` を付けて入力します（例：`100%`）。 * 🔒 アイコンをクリックすると縦横比をロックできます。
*** ### 動画の編集 挿入済みの動画要素はツールバーから再編集することができます。 #### 操作手順 1. **動画要素をクリック** * ツールバーに「動画を編集」ボタンが表示されます。
2. **「動画を編集」をクリック** * 動画編集ダイアログが開き、現在の設定が自動的に入力されます。 3. **内容を変更して「確定」をクリック** * 動画リンク、再生オプション、サイズをそれぞれ変更できます。 ## コンテンツの追加と位置の調整 ### コンテンツの追加 コンテンツ追加では、テキストや画像、動画などのコンテンツを新たに追加できます。 （例） * 「カートに追加する」というボタンの近くに「7日間の返品保証つき」というようなテキストを追加 * 新着記事へのリンク用に画像バナーを追加 * ページの中間に重要なCTAを追加 #### **コンテンツの追加手順** 1. コンテンツを追加したい場所周辺のコンテンツをクリックします。 緑色で表示されているレイヤー選択機能を活用して、適切なレイヤーを選択します。親レイヤーを選択することを推奨しています。 {% hint style="warning" %} Note：コンテンツを追加する場所やスタイル調整には、いくつかポイントがございます。 詳しくは**「**[**コンテンツ追加のコツ**](/experience/campaign/create-new/notes-add-content.md)**」**もご覧ください。 {% endhint %} 1. **「コンテンツ追加」をクリックして、コンテンツを追加したい場所を選択します。**
次の5つのタイプのコンテンツを追加することが可能です。 * 見出しテキスト * 本文テキスト * 画像 * ボタン * HTML {% hint style="warning" %} コンテンツを追加する場所やスタイル調整には、いくつかポイントがございます。 **詳しくは「**[**適切なレイヤーの選択**](/experience/campaign/create-new/notes-layer.md)**」もご覧ください。** {% endhint %} ![](/files/uTRpXn9VMdnXZPDOF09c) 1. **追加したコンテンツは同様にツールバーから編集することができます。** ### **コンテンツの複製と貼り付け** 既存のコンテンツと同じコンテンツを追加したい場合、ツールバーの「コピーを作成する」アイコンからコピーすることができます。 ![](/files/XNZwQeU1mgbvWzC9tgSR) そして、「貼り付け」アイコンをクリックしてコピーしたコンテンツをページ内の別の場所に貼り付けることができます。 ![](/files/mr9qSzzsOOXkmkLOARVe) 貼り付けたコンテンツは同様にツールバーから編集することが可能です。 ### コンテンツの削除 削除したいコンテンツを選択肢、ツールバーの一番右にあるゴミ箱のアイコンをクリックして削除できます。
### コンテンツの位置調整 1. 場所を移動させたいコンテンツを選択し、ツールバーにある以下のアイコンをクリックします。
2. 以下のポップアップが表示されます。
3. 移動先をクリックして、移動ボタンをクリックします。
4. 具体的な位置を選択します。
💡サイトの構造によっては、うまく移動できる場合があります。詳細は[こちら](/faq/experience-edit/rearrange-bug.md)でご参照ください。 ## **リンクの編集** リンクアイコンからは「クリックアクションの有効化」と「イベント計測の有効化」について編集できます。 ![](/files/HgJ1nMlNsvmV5htHzU1u) 何もリンクが貼られていない要素は、デフォルトで「クリックアクションの有効化」がOFFになっています。ONにスライドし、クリックアクションの設定を行なってください。 既にリンクが設定してある場合は、ツールボックスの内容を編集してください。 イベント計測についても同様です。 ### **クリックアクションの有効化** 要素にリンクを設定する機能です。アクションタイプからクリック後のアクションを指定することができます。 ![](/files/jFdNTc8AjcxxXtjunePl) #### **アクションタイプ** リンクへ遷移：指定のURLに遷移します **LINE公式アカウントを開く：**[LINE公式アカウントのURL](https://developers.line.biz/ja/docs/messaging-api/sharing-bot/#url-scheme-to-open-the-screen-for-adding-friend)を入力することで、当該ページに遷移します 電話をかける：指定した電話番号に発信します（例：03-1234-5678 ※15文字制限） テキストやURLのコピー：指定した文字列をクリップボードにコピーします（例：クーポンコードなど） ファイルのダウンロード：URLで指定したファイルをダウンロードします **コードを実行：**指定したJavaScriptコードを実行します。JavaScriptコード設定の際に入力枠が小さい場合は、右下の矢印から入力枠を拡大できます。 クリックアクションの利用シーンについては、関連記事も参考にしてください。 ### **イベント計測の有効化** 「イベント計測を有効化」をONにすると、対象要素のクリックをイベントとして計測できます。既存イベントへ合算する、もしくは新規でイベントを作成することが可能です。 ![](/files/AMkas1a9kTmZUR5Hn7tR) #### **イベント設定の手順** 1. **「イベント計測を有効化」をONにする** ![](/files/O604ksWf5P7KEACJfBQW) 2. **イベントを選択もしくは新規作成する** \ 既にPtengine Insightでイベントを計測している場合、プルダウンから選択できます（※計測数が 1 以上ないとExperienceに連携されませんのでご注意ください）。 新規のイベントを設定したい場合は新規作成をクリックしてください。 ここで設定したイベントはデバイスに関わらず計測されます。 ![](/files/ZBLnnSLTlGJTPZJCvFBW) 3. **作成したイベントを体験の評価軸として設定したい場合は、別途Experienceのゴールとして登録が可能です。** {% hint style="warning" %} ExperienceのゴールはUU（ユニークユーザー）単位で集計されるのに対し、Insightのイベントはセッション単位であるため、数値が必ずしも一致するわけではありません。 {% endhint %} ![](/files/6VweZpdquIbQX4PXgNhv) #### **新規作成する場合** * イベント名について 新規設定する場合は任意のイベント名を設定します。既に Insight で設定したイベント名と同じものを設定した場合は、そのイベントに今回の計測対象が合算されます。 * Insightへの連携について ここで作成したイベントは、Insightのイベント分析画面でも計測値を確認できます。なお、設定したイベント一覧はイベント設定画面の「コーディングイベント」で確認できます。 ![](/files/xzamhiiiSkSy8iqYfAFS) #### 変更・削除について 体験を配信中でも「イベント計測を有効化」をOFFにすれば、当該体験のイベント計測は停止します。もしイベント名ごとを削除したい場合は、チャットサポートから【体験で作成したイベントの削除依頼】として対象のイベント名をご連絡ください。 #### **既存のイベントを使用する場合** 既存のイベントの中に、計測を合算したいアクションがある場合はプルダウンから当該イベント名を選択ください。Insightで作成したイベントは計測数が 1 以上あれば、Experienceに連携されます。既存のイベント名が表示されない場合は、Insightのイベント分析画面で計測数をご確認ください。 {% hint style="success" %} このアクション計測で作成したイベントは、体験のゴールや配信ユーザーグループとして利用できるだけでなく、Ptengine Insightにも連携され、数値確認やセグメント条件としての利用も可能です。 {% endhint %} ## プレビュー クリエイティブ作成中にプレビュー機能で正しく表示されているか確認しましょう。 エディター内でプレビューすることができます。
## その他の機能 ### **HTMLの編集** より自由度高く編集を行いたい場合は、ツールバーの「HTMLを編集」アイコンまたは、メニューバーの「コードモード」からソースコードを編集することができます。詳しくは「[コードモードで体験を設定](/experience/campaign/code-mode.md)」をご覧ください。 ▼ツールバー ![](/files/pTZrAyOPeYlbI0RdOpTR) ![](/files/x1PluiR37qOv06Kci12w) ▼メニューバー ![](/files/hsJPPLlsCrZZ4dnklRlw) ### **ページ編集履歴** 全てのページ編集履歴はメニューバーにある「編集履歴」から確認できます。クリックすると、コンテンツの変更や追加した内容が左側に一覧に表示され、かつ右側に変更前後の違いを比較できます。 それぞれの変更履歴をクリックすれば変更箇所に誘導されます（削除したコンテンツを除く）。
また、削除アイコンをクリックすると、その変更自体を取り消し、オリジナルに戻すことができます。
### **画面操作モード** ページ上でクリックをしないと表示されないアコーディオンメニューの中のコンテンツ等（インタラクティブコンテンツ）を編集したい場合は、「画面操作モード」を利用します。 画面操作モードに切り替えた後、クリックしてコンテンツを表示したら、「編集モードに戻る」ことができますので、そのままページ編集が可能になります。 ![](/files/lmdqsomv6jpD8vTLAdXf) ![](/files/RjCOLT7G4je2kCSi5Rka)