カラーミーショップでランディングページを作成する方法

カラーミーショップでランディングページを作成する方法

カラーミーショップで
ランディングページて作れるの?


カラーミーショップでランディングページ(LP)を作りたいんだが・・・
どうしたらいいの?って悩んでいる人は多いと思います。

ランディングページとは1商品の販売に目的を特化した
コンバージョン(成約率)の高いページの事です。

ランディングページは通常のwebサイトとは少し異なった作り方をするのですが、
カラーミーショップのテンプレートに成約が多いので
カラーミーショップでランディングページを作るのは無理だと諦めていませんか?


ランディングページとは?

一般的に言われているランディングページ(LP)とは
1つの商品やサービスを販売を目的とした長文縦長のページの事です。

このページを見ていただくとランディングページ(LP)の参考例が
いっぱい載っているんで参考にしてください。

ランディングページ(LP)はコンバージョン(成約率)を高めて
売り上げを上げるためには非常に重要なページの作りです。


ランディングページ(LP)に必要な物。不要な物は?

圧倒的な情報量が必要


ランディングページには商品の圧倒的な情報量が必要です。

ランディングページは、多くの画像や商品説明文章を1つのページにするため
1ページあたりの情報量が非常に多くなる傾向にあります。

情報量が多い点に関しては、カラーミーショップでは特に問題なく
掲載する事ができますので、この点はクリアできます。

カートに入れるボタン以外の全てのリンクが不要

ランディングページ(LP)はコンバージョン(成約率)を高めるために、
カートに入れるボタン以外の全てのリンクが不要です。

サイドバーリンク
ヘッダーメニューリンクフッターリンク
お知らせ情報、最近見た商品、ランキング、オススメ商品、新着商品、
twitter、facebook、ブログ、メルマガ登録・・リンクというリンク全て不要です。

「不要てことは別にあってもいいの?」と思われるかも知れませんが
カートに入れるボタン以外のリンクはあってはいけないです。


理由は、他にリンクがあるとお客さんが商品情報に集中が出来ないからです。


お客さんには、商品情報だけに没頭して貰います。
他のリンクがあると気が散りますし、他のページに行ってしまうと商品購入に
至らない可能性も出てきます。


ランディングページの考え方というのはコンバージョンを高めるために
他の商品ページや別のコンテンツ等、購入以外の選択肢を与えてはいけないんです。

商品を購入するのに必要な情報はどうしたらいいのか?

では送料とか決済方法とかはどうしたらいいの?
送料のページや決済方法のページに案内してはいけないの?

と思うかも知れません。
送料や決済方法も、全部ランディングページに書いてください

他のページへ行かせないで1ページで完結させるんです。


ヘッダーやサイドバーはどうすればいいのか?

前述のとおりランディングページにはありとあらゆるリンクが不要です。
ヘッダーメニュー、サイドバーメニューも要りません。

しかし、通常ネットショップのデザインテンプレートには
ヘッダーもサイドバーもあります。

またカラーミーショップのテンプレートは1種類しか使えませんよね。
商品カテゴリ毎に応じてデザインを変えるとか言った事は出来ないんです。


ではどうすればいいのか?
ちょこっとだけPHPもいじりますが、カラーミーショップを使って
比較的簡単にランディングページを作る方法があるのでご紹介いたします。


カラーミーショップでランディングページを作る方法


共通テンプレートで条件分岐のphpコードを書く

フリーページの○ページ目の時だけ、ヘッダー、サイドバー、フッターなしの
デザインを
表示する
という命令のphpコードをテンプレートの
共通html部分に書きます。

1
テンプレートの共通「HTML編集」領域の一番上
以下のソースコードを入力してください。

<{if $tpl_name == "free8"}>
<{include file = $file_name}>
<{else}>

free8の数字はフリーページの番号を表しているのでフリーページの番号に合わせて変更してくださいね。





2

引き続きテンプレートの共通「HTML編集」領域の一番下に以下のソースコードを入力してください。

<{/if}>


3
更新を選択してください。


フリーページでランディングページを作成する

条件分岐で指定した○ページ目のフリーページでランディングページを作成。

ヘッダー、サイドバー、フッターはありませんので
フリーページに入力した情報だけが表示ページに出力されます。

4

フリーページ(1で指定したフリーページの番号)で
ランディングページを作成してください。






3 買物カートはどこでもカラーミー(カートJS機能)を利用する。



どこでもカラーミー(カートJS機能)を使い購入ボタンを設置します。




1
各商品詳細ページの編集画面で右上の方に表示される
「どこでもカラーミー(カートJS機能)」を選択してください。



2
各種設定を行ってください。

3
JSコードが表示されるのでコードを全てコピーしてフリーページの
一番最後に貼り付けてください。








以上でカラーミーショップでランディングページを
作成する方法のご紹介は完了です。

うまく出来ましたか??


うまく出来ない方は・・・


上手くできない方は、私川那辺が無料サポートいたしますので、
以下のメール講座にお申込みください。

メール講座の特典である
ネットショップ運営の無料相談会(SKYPEor電話)のご招待
をご利用いただく事が出来ます。

カラーミーショップでランディングページを作成する方法を
スカイプでご案内させていただきます。


メールアドレス*
お名前*
ショップURL (空欄可)




カラーミーショップでランディングページを作成する方法” に対して13件のコメントがあります。

  1. 店長 より:

    いつも参考にしてます。質問ですが、フリーページの全ページをヘッダー、サイドバー、フッターなしのデザインにする方法はありますか?

    1. kawanabe より:

      コメントありがとうございます。

      んー。たぶん全ページをまとめてと言うのはできないと思いますね。
      ここの記事で書いている方法

      free8の場合はヘッダーサイドバーフッター無しで、他はありと言うプログラムにしています。

      これを応用して、

      free1の場合はヘッダーサイドバーフッター無し
      free2の場合はヘッダーサイドバーフッター無し
      free3の場合はヘッダーサイドバーフッター無し
      free4の場合はヘッダーサイドバーフッター無し
      free5の場合はヘッダーサイドバーフッター無し
      free6の場合はヘッダーサイドバーフッター無し
      free7の場合はヘッダーサイドバーフッター無し
      free8の場合はヘッダーサイドバーフッター無し
      free9の場合はヘッダーサイドバーフッター無し
      free10の場合はヘッダーサイドバーフッター無し

      他はあり

      みたいに全部コードを書けばできると思います。

      1. 店長 より:

        ありがとうございます!

      2. 青木 より:

        上記に記載されている、複数ページのランデイング表示のHTMLの書き方を教えてください。
        たとえば、8ページと9ページをランデイング表示したい場合は、具体的にどう書けばいいのですか?
        レクチャーにある表示で1ページはうまくいったのですが、同様のものを重ねて書いてもエラーとなってしまって。

        1. kawanabe より:

          青木さん

          こんな感じでうまく行けると思います。
          健闘を祈ります!!

          フリーページ2つを使う場合:
          ---------------------------------------------------------
          <{if $tpl_name == "free1"}>
          <{include file = $file_name}>

          <{elseif $tpl_name == "free2"}>
          <{include file = $file_name}>

          <{else}>

          【共通テンプレートのコード】

          <{/if}>

          ---------------------------------------------------------

          フリーページ3つを使う場合:
          ---------------------------------------------------------
          <{if $tpl_name == "free1"}>
          <{include file = $file_name}>

          <{elseif $tpl_name == "free2"}>
          <{include file = $file_name}>

          <{elseif $tpl_name == "free3"}>
          <{include file = $file_name}>

          <{else}>

          【共通テンプレートのコード】

          <{/if}>

          ---------------------------------------------------------

  2. だい より:

    フリーページの調整について調べていて参考にさせてもらいました。
    フリーページのURLは自動付与になっていますが、これは変更したりすることは可能なのでしょうか?

    ランディングページを作成した際に、告知をしたい場合など変数だと伝えにくい印象があります。
    良い方法はあったりしますでしょうか?

    1. kawanabe より:

      だいさん

      残念ながらフリーページのURLを変更する事は出来ないと思います。
      URLにこだわるようでしたら、新規ドメイン取得➡LPを別に作成した方が良さそうですね。

      1. だい より:

        早速の返信ありがとうございます。
        ちなみに、短縮URLにすることは、よいのでしょうか?

        1. kawanabe より:

          短縮URLはカラーミーに関係ない所で作るのだと思いますのでそれは特に問題ないと思います。
          が、独自ドメイン部分も短縮URLの所になってしまうので微妙かなと思いますが。

  3. だい より:

    返信ありがとうございます。
    やはりそうなりますよね。

    別ドメインにした方が分かりやすく、
    視認性もいいんですね。
    費用が別に掛かってしまうので、そこが困っているところではあります。

    1. kawanabe より:

      だいさん

      >別ドメインにした方が分かりやすく、視認性もいいんですね。
      そうですね。私もそう思います。

      >費用が別に掛かってしまうので、そこが困っているところではあります。

      ●ドメイン料金(ムームードメインで.comなら年間¥1,280)
      ●ロリポップサーバーのエコノミープランなら月額100円
      で、初期費用を入れても年間5000円もあれば足りると思います。

      より良い物を作りそれで売上があがるなら年間5000円程は高くない投資だと私は考えておりますが・・・
      参考にしてくださいね^^

  4. だい より:

    色々、お答えいただき感謝します。

    早速フリーページの作成をしてみていましたが、
    CSSを適用する際は、どのようにすればよいのですか?

    本来は外部読み込みは一般的かと思いますが、
    そういったことは可能なのでしょうか?

    1. kawanabe より:

      だいさん

      フリーページのCSS適用はテンプレートの「共通」のHTML・CSS編集からCSSを適用できますよ。

      外部読み込みはカラーミーでは一般的ではないと思いますが、
      カラーミー管理画面から「集客」> 「検索エンジン対策」 >「headタグ内フリースペース設定」でhead内に外部CSSを読み込ませることができると思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA