目次
ランディングページとは
ランディングページとは、検索結果や広告などを経由してユーザーが最初にアクセスするページのことを指します。b→dashでは、CMSアプリを用いることにより画面上でランディングページを作成することができます。
b→dashで作成するランディングページは、同じURLであってもPC(パソコン)で表示する内容とSP(スマートフォン)で表示する内容を一度にどちらも作成する必要があります。
ランディングページのレスポンシブ対応について
レスポンシブ対応とは、ユーザーが使用している端末の画面サイズに合わせてホームページ側でデザインを調整する機能を指します。b→dashで作成するランディングページは、GUIとHTMLで作成する場合のどちらもレスポンシブ対応しています。
作成方法は「ランディングページ(PC)を作成する」「ランディングページ(SP)を作成する」の順にご紹介いたします！
ランディングページ(PC)を作成する
「CMS」をクリックします
「新規作成」をクリックします
「ランディングページ」を選択し、「適用」をクリックします
アンケート/フォームの作成に関しては、こちらの記事をご参照ください。
「HTML編集モードでコンテンツを作成」を選択し、「適用」をクリックします
「ページ編集」をクリックします
エディター画面が表示されるので、こちらでランディングページを編集します
今回は、以下のランディングページを作成する例をもとに、説明していきます！
➊ソースコードを入力する
PC画面に合わせたデザインのソースコードを入力します
以下のようにソースコードが反映されます
➋画像を差し込む
差し込みたい箇所にカーソルを合わせ「画像」をクリックします
「画像」を選択し、「適用」をクリックします
ランディングページに利用する画像の登録方法に関しては、こちらの記事をご参照ください。
画像のソースコードが差し込まれます
以下のように画像が反映されます
他の箇所にも画像を差し込みます
画像のサイズは変更することができます
差し込んだ画像のサイズは、style属性のwidthの値を変更することで調整が可能です。変更箇所は以下を参照ください。
❸リンクを差し込む
差し込みたい箇所にカーソルを合わせ「リンク」をクリックします
ページセットを選択すると、b→dashで作成したフォームのリンクを挿入することができます！
「リンク先のURL」を入力します
リンクのソースコードが差し込まれます
以下のようにリンクが反映されます
リンクのテキストは変更することができます
差し込んだリンクのテキストは、リンク先URL以降の「<a href=”リンク先URL/”>{テキスト}</a>」の{テキスト}部分に入力したテキストが反映されます。変更箇所は以下を参照ください。
PCで表示するランディングページを作成したら、続いてはSPで表示するランディングページを作成します！
ランディングページ(SP)を作成する
「PC」をクリックします
SPの編集画面に切り替わります
SP画面に合わせたデザインのソースコードを入力します
※画像/リンクの差し込み方法は、「➋画像の差し込み」「❸リンクの差し込み」を参照ください
以下のように編集が反映されます
画像サイズやフォントサイズなどは、PC画面と同じサイズにしていても実際に表示される大きさが異なるので、調整するようお願いいたします。
プレビューで確認する
「プレビュー」をクリックします
確認したい「表示方法」を選択し、「適用」をクリックします
プレビュー画面を確認することができます
※以下の画像はPCでのプレビュー画面となります
ランディングページの公開設定をする
「次へ」をクリックします
「公開設定」をクリックします
「公開URL」と「公開期間」を設定し、「適用」をクリックします
「名前」を入力し、「保存」をクリックします
「作成したコンテンツ」をクリックします
「非公開」をクリックします
「適用」をクリックします
ランディングページが公開されます
念のために、設定したURLにアクセスして、ランディングページが公開されたことを確認しましょう！