> 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-1/popup-bar-creation.md). # ポップアップ/固定バーの作成方法 ### 体験作成 1. 「体験を新規作成」から体験を作成し、「Web接客」を選択します。 2. 体験名を設定し、体験作成へ進めてください。 3. テンプレートまたは「空のポップアップを作成」を選択し、ポップアップ・固定バー作成画面に入ります。 ### ポップアップの編集 ポップアップ編集には下記の機能があります。 * 位置とサイズ\ ポップアップの配置、サイズを選択できます。「オーバーレイ」にチェックを入れると、ポップアップ表示時に背景がグレイアウトされます。\ ![](/files/Ihz37Dysvf3Iw6321qwc) * 背景とスタイル\ 背景をカラーコードまたは画像から選択、ポップアップの角の鋭角や、影、クローズボタンの設置を調整できます。\ ![](/files/VUO3rVJmBXTFV3ICdFGP) * クリックアクション\ ポップアップ内に配置した要素に対して、[クリックアクション](https://gitlab.com/PtmindDev/ptx/ptengine-helps/-/blob/main/DOCS/ja/experience/campaign/inline_gudie/editor.md#kurikkuakushonno)と[イベント計測](https://gitlab.com/PtmindDev/ptx/ptengine-helps/-/blob/main/DOCS/ja/experience/campaign/inline_gudie/editor.md#ibentono)を有効化できます。\ ![](/files/PGqyL7swidsoZ9dmDSGv) **Note：**「リンクへ遷移」「LINE公式アカウントを開く」を利用する場合は、下記の設定もご活用ください。\ 新しいタブで開く：指定したURLを新しいタブで開きます。\ クリック後、ポップアップを閉じる：この要素をクリックしたらポップアップが自動的に閉じます。\ ![](/files/UYEwJNwKnhCMSRIxM2Ob) * マイテンプレートに保存\ 編集したクリエイティブをテンプレートとしてライブラリーに保存でき、他の体験でも簡単に利用できます。\ ![](/files/RC2CJis5p5nrGVUG0DeQ) * 要素の追加・編集\ ポップアップには、左側のツールバーからテキスト、画像、動画、ボタン、図形、フォームといった要素を追加できます。追加した要素は簡単に編集することも可能です。 ### テキスト 新たにテキスト要素を追加したい場合は、左側のツールバーからテキストアイコンをクリックします。\ テキスト要素を選択すると、ツールバーが現れ、編集、クリックアクション、コピー、レイヤー、削除が可能です。フォントや行間、文字揃え、斜体、下線、取消線、ハイライト、箇条書、番号無しリストなどを編集したい場合は、「編集」をクリックしてください。 ![](/files/wrEUAZVrVNYZxlhItSpS) ### 画像 新しく画像を追加したい場合は、画像アイコンをクリックしてください。お手持ちの画像を追加することができます。ローカルフォルダからのアップロードまたはURLに対応しています。 ＜アップロード可能な画像形式＞\ 形式：jpeg,png,gif,avif,webp,ico,svg\ 容量：最大6メガバイト ![](/files/xV4wJyywzQrHJftbC2nw)画像要素をクリックすると、画像変更、スタイル編集（不透明度、枠線の太さ、角丸、影）、クリックアクション、コピー、レイヤー、トリミング、その他の設定が行えます。その他の設定からは、[代替テキスト(Alt)](https://gitlab.com/PtmindDev/ptx/ptengine-helps/-/blob/main/DOCS/ja/faq/page_edit/web-accessibility.md#tekisutoaltno)の設定が可能です。 ![](/files/dP1qqnq4NBY3FAKMn8wj) ### 動画 ビデオアイコンからは動画を追加することができます。YouTube URLまたはiframeをご利用ください。 ![](/files/lLNRIwPxmWrP54n1NmX3) (1) YouTube URL：ブラウザに表示されるリンク、または共有URLにて動画を追加できます。（例：）\ (2) iframe：様々な動画プラットフォームで発行されている埋め込み用のiframeコードにて動画を追加できます（例: \<iframe\>…\</iframe\>）。 #### サムネイルについて ビデオURLを選択した場合は、サムネイル用画像を追加できます。\ YouTubeリンクの場合は、YouTubeで設定したサムネイルが使用されます。 #### 再生設定について 動画を自動的に再生するか、ループ再生にするか、コントロールバーを表示するかについて設定することができます。 ### ボタン 新しくボタンを追加したい場合はボタンアイコンをクリックしてください。編集をクリックすると、フォント（サイズ、太さ、色）、行間、文字揃え、斜体、下線、取消線、ハイライト、箇条書きなどを設定できます。 ![](/files/LUfYwV1ZKxK9I1ZaTOkC) ### 図形 図の追加からは、ポップアップや固定バーの装飾として様々なアイコンを追加することができます。 ![](/files/alKs52H9DocKFzmQo9YG) ### フォーム フォームはポップアップまたは固定バーに1つまで追加できます。 ![](/files/pVhDNgLutOPGrSNWACZC) お好きなテンプレートから追加したフォームは、要素ごとにドラック＆ドロップで移動したり、サイズの調整、項目、入力欄などのフォント、色などを自由に編集できます。 ![](/files/lpARQsHf3lH2P1QroOuz) ### ユーザー属性として収集 フォームの項目に入力された内容は、ユーザー属性データとして収集することが可能です。ユーザー属性として収集すると、体験配信の対象ユーザーに指定したり、[ユーザーグループ](/experience/user-group.md)からレポートを確認することができます。 ![](/files/OVFrU1eaIvjnyLwknWKm) ユーザー属性としてデータを収集する場合は、項目の編集から、「ユーザー属性として収集」にチェックを入れれてください。 詳しくは[フォーム機能](https://gitlab.com/PtmindDev/ptx/ptengine-helps/-/blob/main/DOCS/ja/experience/campaign/popup/form-setting-text.md#fmunitsuite)をご参考ください。 ### 表示・停止条件の設定 クリエイティブを保存したら、表示・停止させるタイミングを設定してみましょう。（アドバンス編集モードの場合は、クリエイティブ編集画面よりポップアップの表示・停止条件の設定を行ってください。） 詳細は[こちらの記事](/experience/campaign/create-new-1/display-timing.md)をご参照ください。 ### Webアクセシビリティへの対応 Ptengine Experienceで設置するすべてのポップアップ・固定バーは、キーボード入力に対応しています。詳しくは[Webアクセシビリティへの対応](https://gitlab.com/PtmindDev/ptx/ptengine-helps/-/blob/main/DOCS/ja/faq/page_edit/web-accessibility.md)をご参照ください。