賢威LPをセールスレターページ風にカスタマイズイメージ画像


賢威のLP(ランディングページ)を、縦長のセールスレターページ風にカスタマイズする方法です。
賢威自体は素晴らしいテンプレートです。
SEOやバージョンアップにおいて非常にメリットのあるテンプレートです。

この記事の投稿時点(2018年8月)での最新バージョンは賢威7(7.1)です。

前段階として次の話を頭の中に入れておいてください。
実は・・・

ガイド案内アフィリ王子

素晴らしいテンプレート・賢威7なのですが・・・そして
ヘッダー画像がフルスクリーンになるLP(ランディングページ)をつくる機能がありますが・・・

ワードプレス(WP)で作成したブログのトップページにはもってこれないのです。

ただ、固定ページ(普通の記事投稿ページと同じスタイル)は、WPの設定からトップページに
設定することができます。

ガイド案内ネット王女

つまり、ランディングページはつくれるけど、それをトップページには設定できない。
そこで・・・以前、ランディングページをトップページに設定するカスタマイズの方法を
記事として取り上げました。

⇒ 賢威7で固定ページをランディングページにする方法

ぜひ、思い出しておいてください。

よく情報商材の販売ページやネット通販などのセールスレターページで縦長のページがありますが・・・
今回は、その縦長のセールスレターページを賢威7のLP(ランディングページ)で作成しよう、
という試みです。

【html】のランディングページ 【WP】のランディングページ
今回はここの話です。 次回

※WP版でのランディングページをセールスレターページ風にカスタマイズする方法は、次回の記事でチャレンジしたいと思います。

セールスレターページ風とは? 縦長のセールスセター。縦にずっとスクロールしながら見ていく、お客さまを説得するメインのセールスページです。

【最近では、メルマガ(またはメルマガより開封率のいい@LINE)や、ローンチという仕組みも登場してきています】

メルマガやローンチは、(イメージとして)縦長のセールスセターを細かく分割して、
その分割した少しずつのセールスレターを使って、読者(お客さま)を『教育』というか、
お客さまと信頼関係を築いて、そして商品内容を理解してもらって、それから購入につなげる、
という時間をかけてセールスする仕組みのことです。

もちろん、セールスレターは今でもその重要な役割は変わっていません。

セールスレターは、その場で判断・購入してもらう、というイメージになります。
(セールスにおいて重要な役割を果たすものです。
ですから、セールスレターが書ける人はひっぱりだこになっているようですね)

秋田秀一秋田秀一

具体的には下図のようなイメージです。

※ 実際のサンプルはこちらから
⇒ 賢威7htmlセールスレターページのサンプル

セールスレターページイメージ画像

何となくイメージできましたか?

それでは具体的にカスタマイズしていきたいと思います。

賢威7のランディングページを情報商材の販売ページ風にカスタマイズする方法【html】

秋田秀一秋田秀一

実際には、ワードプレスを使って賢威を利用している人も、
htmlバージョンをのやり方を頭に入れておくといいかと思います。

というのは・・・

WP版でのカスタマイズでは、素人の私では(コードを理解してカスタマイズするのに)限界が
あったからです。

私は、賢威を作成した側の人間ではありませんから、html版のbase.cssをWP版に流用する、
という荒業でワードプレス版のカスタマイズをやりました。
(次回参照ください)

【html】版ランディングページカスタマイズのポイント

サンプルのページはこちらです。(再掲)
⇒ 賢威7【html】版ランディングページ(セールスレターページ風にカスタマイズ)のサンプルページ


大きなポイントとしては

  • サイトの横幅を925px
  • 見出しh2、/h2とh3、/h3をサイト幅いっぱいにしてアピールできるように
  • そのため(結果として)文章(コンテンツ)も左端ギリギリからスタートなってしまう
  • それを補正するために、テキストボックスを作成して
  • 文章は、テキストボックスの中に書き込む形

にしてあります。

また、赤色は自分の好みで朱色にしてあります。
(※元銀行員で印鑑を押すことになじみがあったため、赤=朱色という感覚です)

カスタマイズした主なところ(base.cssの変更点)

【主要なカスタマイズ・1】
私が個人的にセールスレターページのいちばん上に、1行か2行の文章を入れたかったために
ヘッダー部分に赤い帯を入れました。


賢威7カスタマイズイメージ画像

矢印イメージ画像

base.cssの下記の部分を削除したり、追加したりしました。
賢威7カスタマイズイメージ画像

矢印イメージ画像

賢威7カスタマイズイメージ画像
これに関連して、あと数か所カスタマイズしています。
詳しくは(あとからご案内いたしますが)、テキストファイルをダウンロードして参照してみてください。


【主要なカスタマイズ・2】
base.cssで、ヘッダーの背景画像を指定して、
ヘッダー部分の画像(ここではファイル名:top-image.png)、横925px高さ700pxは
index.htmlで指定するようにしてあります。

画像をh1に設定して、alt=?でh1のタイトル・キーワード等を入れ込んであります。

矢印イメージ画像

【html】版のindex.htmlファイル

賢威7カスタマイズイメージ画像
もちろん不都合な点等ありましたら、どうぞ自由に加筆・修正しながら
カスタマイズされてください。


【主要なカスタマイズ・3】
h2の背景画像、h3の背景画像をダウンロードできるようにしました。
また、ヘッダー部分の背景画像とヘッダー画像もサンプルとしてダウンロードできるようにしてあります。

賢威7カスタマイズイメージ画像 見出しh2
/images/common/midashi-h2.png
賢威7カスタマイズイメージ画像 見出しh3
/images/common/midashi-h3.png
賢威7カスタマイズイメージ画像 ヘッダー部分背景画像
base.cssで指定。1800px*1198px
/images/lp-image.png
賢威7カスタマイズイメージ画像 ヘッダー部分画像
index.htmlで指定。925px*700px
/images/top-image.png

もちろん、画像を差し替えてカスタマイズできます。
特に、ヘッダー画像は重要です。

チラッとみて興味を引く・引かない
(つまり、続けて下を読むか・読まずに他のサイト・ブログにいくか)
という勝負の世界です。

ヘッダー画像の作成には注力されることをお薦めします。
(外注化することも可能です)

カスタマイズしたcssのテキストファイルダウンロード

秋田秀一秋田秀一

他にも細かい点のカスタマイズもありますが・・・

いちいちチェックするのは大変だと思いますので、base.cssの内容をテキストファイルにしました。

ダウンロードまたは、テキストエディタで開いて
ご自分のcssにコピペしてください。

cssをカスタマイズしたものを私が、直接頒布することはできませんので
テキストファイルで保存したものを用意しました。

コピペしてチェック・活用してください。

※万が一のために
もともとのbase.cssはコピーしてバックアップされておくことをお薦めします。

⇒ 賢威7【html】base.cssのテキストファイル

セールスレターページ作成の注意点

あくまでも私個人の好みでのカスタマイズです。
自分なりの好みに合わせてさらに改良してみてください。

サンプルページのindex.htmlを、ブラウザで画面に表示している段階で
右クリックをすれば、ソースの表示が可能です。

どうぞコピペしてください。

もちろん賢威7のテンプレートは、【html】用をお使いください。

繰り返しになりますが再度、注意点(自己流のカスタマイズした点)を記載しておきます。

横幅いっぱいに見出し(h2/h2・h3/h3)をもってきている点

見出しのh2とh3を、インパクトのある形にしたくて、大きくカスタマイズしました。
(逆に、h4、h5、h6はそのままにしてあります)

もともとは賢威6でセールスレターページを作成していたのを、賢威7でも同じようなスタイルに
したかったことからの流れです。

※ただ、まだまだ発展途上なので見出しh2もh3も簡単に変更できるようにしてあります。
文章の内容や見出しなどが完全に『固まった』時点で、見出し部分を画像に変えてもいいかも知れません。

文章を記載する時は、テキストボックス内に記載(入力)する点

h2、h3を925pxの横幅いっぱいにしたことから、そのまま文章を作成すると
同じように左端から文字が始まってしまいます。

非常に読みにくいです。

そのため、枠線が白色の(背景色と同一の)テキストボックスを用意して、その中に
文章を入力していく、という形にしてあります。

それでも「よし」という方は参考にしてお使いいただけましたらうれしい限りです。

まとめ・賢威7でLPをセールスレターページ風にカスタマイズ【html】

今回は賢威7のテンプレートでも、html版でのカスタマイズでした。

一般的にはWPのブログでサイト運営している方が大半だと思います。
ワードプレスを設置しているドメイン内に、別にファイルをアップロードする必要がありますので、
そこの手間ひまだけは必要です。

ですので、次回はWP版でのLPをセールスレターページ風にカスタマイズする方法について
自己流ですが、ご案内したいと思います。

ただ、今回のhtml編は次のWP編のカスタマイズにおいても参考になるものだと思っています。

秋田秀一秋田秀一

参考までに、私が当ブログ内にてWPでセールスレターページ風にカスタマイズしたLPは、
次のようなものです。

⇒ パソコンできない・文字入力できない中高年でもできる『ほったらかし』の副業プログラム講座

※【 html 】ではありません。

次回はWP版のカスタマイズです。

⇒ 賢威7のランディングページをセールスレターページ風にカスタマイズ【WP】編