“GUI編集モード” で「ランディングページ」を作成/公開したい
回答
本記事では、b→dashのCMSアプリを利用して、ランディングページ(LP)をGUI編集モードで作成・公開する方法について紹介しています。
※b→dashで作成するランディングページは、同じURLであってもPC(パソコン)で表示する内容とSP(スマートフォン)で表示する内容を一度にどちらも作成する必要があります。
なお、b→dashで作成するランディングページは、GUI・HTMLで作成する場合のどちらもレスポンシブ対応しています。
作成手順は、大きく下記の5つです。
1. ランディングページ(PC)を作成する
2. ランディングページ(SP)を作成する
3. 検索結果のページタイトルと説明文を設定する
4. プレビューで確認する
5. ランディングページの公開設定をする
また、作成中にGUI編集モードからHTML直接編集モードに変更することはできませんのでご注意ください。
各手順の詳細は、以下をご参照ください。
1. ランディングページ(PC)を作成する
パソコン(PC)画面表示用のランディングページを作成します。GUI編集モードでは、テキストや画像、ページ内リンクなどの追加を行うことができます。
エディター画面を開く
1.「CMS」>「新規作成」をクリックします
2.「ランディングページ」を選択し、「適用」をクリックします
3.「GUI編集モードでコンテンツを作成」を選択し、「適用」をクリックします
4.「ページ編集」をクリックすると、エディター画面が表示されます
※ アンケート/フォームを作成したい場合は、「フォームを作成/公開したい」をご参照ください
要素を追加する
1.「ブロック追加」>「ブロック部分」をクリックします
2.「ブロック数」を選択し、「適用」をクリックします
3. ランディングページに必要な要素を追加します
※ 要素を選択することで、後述する「画像」や「テキスト」「ボタン」などを差し込むことができます
追加したブロックの底辺にカーソルを合わせて引き伸ばすことで、ブロックの高さ(余白)を変更することができます
画像を差し込む
1.「要素」>「画像」をクリックします
2. 差し込みたい「画像」を選択し、「適用」をクリックします
3. 同じ手順で他の要素にも画像を差し込みます
※ ランディングページに利用する画像の登録方法については、「コンテンツボックスを使用したい」をご参照ください
横幅を調整する
1.「横幅設定」をクリックします
2.「横幅の値」を選択し、「適用」をクリックします
背景を変更する
1.「背景」をクリックします
2. 表示される設定項目から背景の設定を変更します
テキストを入力する
1.「要素」>「テキスト」をクリックします
2.「フォント」「太字」「斜体」「アンダーバー」「斜線」「文字色」「ハイライト」「文字サイズ」「行間」などを変更します
3. 同じ手順で他の箇所にもテキストを入力します
ボタンを差し込む
1.「要素」>「ボタン」をクリックします
2.「ボタンのテンプレート」を選択し、「適用」をクリックします
3. 差し込まれたボタンをクリックし、「ボタン色変更」から「色」を変更します
4.「リンク挿入」をクリックし、「リンク先URL」を入力して「適用」をクリックします
5.「ボタン内のテキスト」をクリックし、テキストを編集します
※ ボタン編集画面で「ページセットURL」を選択すると、b→dash内で作成したフォーム/ランディングページのURLをボタンに差し込むことができます
※ ページセットに『データ挿入』をしたい場合は、「フォームを作成/公開したい」内の該当箇所をご参照ください
データ挿入が適用されるのは、b→dashから配信したメール経由で流入した場合のみです。同じページセットでも、貴社Webサイトなどから直接クリックして流入した場合は、データ挿入は反映されませんのでご注意ください。
2. 挿入されるデータがないユーザーの場合の表示
・GUI編集モードの場合: データ挿入箇所を削除し、空いた部分を詰めて表示されます
・HTML編集モードの場合: データ挿入箇所が非表示になります
ページ内リンクを設定する
ページ内リンクとは、ランディングページ内で指定した箇所に遷移することができる機能です。ページ内リンクに設定したブロックをクリックすると、リンク先に設定したブロックまで飛べるようになります。作成したランディングページの縦幅が長く、スクロールに時間がかかる場合などに設置することを推奨します。
1.「ページ内リンク」をクリックします
2.「ページ内リンクを設定するブロック」をクリックします(複数選択も可能)
3.「リンク先」をクリックし、「リンク先にしたいブロック」をクリックします
4.「適用」をクリックします
2. ランディングページ(SP)を作成する
スマートフォン(SP)画面で表示するためのランディングページを作成します。SP画面用の作成手順は、PC画面用と同様です。
1. 編集画面上部の「PC」をクリックします
2. SPの編集画面に切り替わるので、SP画面に合わせたデザインをGUIで入力します
※「横幅設定」や「背景」などの一部の機能は、SP画面用のランディングページ作成時には利用できませんのでご注意ください
3. 検索結果のページタイトルと説明文を設定する
検索エンジンの検索結果に表示される「ページタイトル」と、webページの内容を説明する「説明文」を設定します。任意で『GA(Google Analytics)』の計測タグや『GTM(Google Tag Manager)』のタグを設置することもできます。
1.「ページ詳細設定」をクリックします
2. 下記の表に従って『タイトル』『説明文』『任意headタグ』を入力し、「適用」をクリックします
# |
設定項目 |
設定する内容 |
最大文字数 |
1 |
タイトル (タイトルタグ) |
ブラウザのタブの「タイトル」や検索エンジンの検索結果の「タイトル」に設定したい内容 | 255文字 |
2 |
説明文 (メタディスクリプション) |
検索エンジンの検索結果のタイトルの下にある「説明文」に設定したい内容 | 1000文字 |
3 |
任意headタグ | SNS用の「メタタグ」や「GTMタグ」など | 10000文字 |
4. プレビューで確認する
作成したランディングページの表示を確認します。
1.「プレビュー」をクリックします
2. 確認したい「表示方法」(PC / SP)を選択し、「適用」をクリックします
3. プレビュー画面で表示を確認します
5. ランディングページの公開設定をする
作成したランディングページに公開URLと公開期間を設定し、公開します。
1.「次へ」>「公開設定」をクリックします
2.「公開URL」と「公開期間」を設定し、「適用」をクリックします
3.「名前」を入力し、「保存」をクリックします
4.「非公開」をクリックして公開状態に切り替え、「適用」をクリックするとランディングページが公開されます
