フリーページを使ってランディングページを作ろう

  • 広告を出すときランディングさせるページが欲しい!
  • イベントやセールなど、特別な訴求したい!
  • 目玉商品について普通の詳細ページとは別に、訴求するページが欲しい!

そんなあなたにぴったりなのが、フリーページを使ったランディングページの作成です!

特に広告を出稿されている・もしくは出稿する予定のある方は、せっかく予算をかけるものですから、
訴求に適したページがない場合は、ランディングページ=LPを用意することをお勧めします。
ネットショップ内にLPを作るとヘッダーやフッターがあるので、他商品への流入も見込めますし、デザインテイストの統一感を出すことができます。

例えば、このようなLPが簡単に作れてしまいます!
カラーミーショップのツールをうまく使って、魅力的な商品アピールを行いましょう!

 

1.訴求内容を決める

まず訴求商品を決めます。
要素としては画像、テキスト、カートボタンの3つが必要になります。
カートボタンはカラーミーツールで設定できますので、商品の訴求に使える画像とテキストを用意してください。

内容についてはこちらをご参考ください。
効果が上がるランディングページの作り方

 

2.フリーページを作成する

まず、フリーページを作成します。

「フリーページ」ボタンをクリックします。
フリーページ一覧ページにある、「新規作成」ボタンをクリックしてください。

 

3.画像やテキストを配置

フリーページの編集で、画像やテキストを使ってページを作成します。
下記のような詳細設定を行う場合は、本文を「ソース」に切り替えて編集してください。

フリーページで使える!画像をエリアいっぱいに表示する方法

  • 「画像を追加」ボタンから画像を追加する(幅1000px以上の大き目の画像を追加しましょう。)
  • imgタグのalt=""の後ろに半角スペースを入れて、その後ろにstyle="width:100%;"を追加する

コード例:

<img src="https://......shop-pro.jp/......jpg" alt="" style="width:100%;">

※表示がうまくいかないケースもございます。参考程度にお使いください。
(htmlやcssに対するお問い合わせは受け付けておりませんのでご了承ください。)

フリーページで使える!背景色ありのテキストエリア

テキストを下記のように、エリアいっぱいに背景色ありで配置したい時に使えるコードです。 コード例:

<div style="margin:0;padding:0;width:100%;background-color:#111111;">
<p style="margin:0;padding:30px;color:#eeeeee;line-height:2;">
この水は、蓼科連峰の山々からいただく、雪解け水です。<br>
雪解け水が数十年の時を経て、地中で濾過されて美しい湧水となって出てきた天然水になります。<br>
ほのかな甘みがあり、日本でも有数の透明度を誇ります。<br>
商品詳細ページだけでは語りきれない、いろいろな説明・訴求テキストを自由にご入力いただけます。<br>
商品のプロモーション、成り立ち、製作者の想いなど、特徴を表現しましょう。<br>
</p>
</div>

変更できるところ

background-color : 文字エリアの背景色 → #ffffffなど16進数の色設定
padding : 文字エリアの上下左右の余白 → 30pxなどピクセルで設定
color : 文字色 → #ffffffなど16進数の色設定
line-height : 行間 → 文字何個分あけるか。1.2なら文字の高さ1.2個分行間をあける

※表示がうまくいかないケースもございます。参考程度にお使いください。
(htmlやcssに対するお問い合わせは受け付けておりませんのでご了承ください。)

 

次は購入につなげる、「カート」を設置します。

 

4.どこでもカラーミーを使う

商品検索・変更(要ログイン)から、対象商品の「修正」ボタンを押します。
商品名の右上にある「どこでもカラーミー(カートJS機能)」をクリックします。

5.スクリプトをコピーする

どこでもカラーミーをクリックすると下記のような画面が立ち上がります。 こちらで商品画像や商品名、説明テキストなどの表示・非表示を設定し、デザインを選んで、下のJSコードのところに出ているスクリプトをコピーします。
(どこでもカラーミーの設定詳細についてはこちらをご確認ください。)

 

6.フリーページの本文にペースト

まず、設定したいフリーページを開き、「ソース」になっているか確認します。(下記の状態)
もしなっていない場合は「ソース」ボタンをクリックしてください。
画像やテキストの後にペーストします。(下のキャプチャー赤枠部分)

フリーページで使える!カートエリアの背景色を変える!

どこでもカラーミーのデザインタイプ「ノーマルグレー」を選んでいただいたときのみ、ご利用可能です。
上記のように、カート部分の背景色を変更したい時に使えるコードです。
本文の一番最後に追加してください。(このときも「ソース」が選択されてることを確認してからペーストしてください)
コード例:

<style type="text/css"> .cartjs_box { background-color:#efefef; } </style>

変更できるところ

background-color : カートエリアの背景色 → #ffffffなど16進数の色設定

 

これでランディングページができあがりました!
訴求するコンテンツが多く、LPのページが長くなる場合は、箇所箇所にカートエリアへのリンクボタンを設置すると良いでしょう。
ブログやSNSでリンクを貼ったり、広告を出したり、ページに入ってくる仕組みを作って訴求しましょう!

 

カラーミーにはこちらの広告機能がついています。集客にお悩みの方は是非お試しください。

かんたんリスティングはこちら
GoogleショッピングPROはこちら

 

2018.04.27