賢威6を縦長のセールスレターページ・ランディングページ(LP)風にカスタマイズしてみた!

秋田です

今回ご案内するハウツーは賢威6のカスタマイズ、しかも、html です。
(WP でのカスタマイズはまた別の機会にご案内予定)

あなたが情報商材の発行者であったり、プロモーターとして販売しているなら・・・意識して縦長のページをながめたことがあるかと思います。

縦にずっとスクロールしていく形のサイトです。
たぶん普通の人だと、スクロールバー等を操作して飛ばし読みしながら一気に最下部まで流し読みして、気になったところだけをピックアップする、というやり方が圧倒的に多いはずですね。

ほんと自分のフックに引っかかった任意のところだけを注視するという読み方です。
具体的な縦長のセールスレターページ・ランディングページのイメージ画像は下記のような感じです。

下記サイトは横幅を925px にして作成したものです。
[br num=”1″]
賢威カスタマイズ・セールスレターページ・ランディングページイメージ画像

※ちなみにサイトアドレスは ⇒ https://www.eym7.com/

[br num=”1″]
セールレターページ(ランディングページ)は、一般的には・・・
長ければ長いほど「良い」と言われています。
文字数にして約3万~5万文字くらいが標準形として求められたりもします。(凄い文字量です)

この文字数の中に・・・
■ 体験者(実践者)の喜びの声、
■ 手に入れることのできる未来の姿、
■ チャレンジすることのメリット、
■ 今ここで選択しなかった場合の苦痛・苦悩・・・
などなどを書いて感情に訴えることになります。

実は売れている商品・商材はパターン化したセールスレターページになっているものです。
競合サイトや売れている商品のサイトのセールスレターに何が書いてあるかを調べてみることは
非常に大切です。

ぜひトライされてみることをお薦めします。

今回の記事では

・賢威6をセールスレターページ、ランディングページ風にカスタマイズする方法

を解説します。
[br num=”1″]

スポンサードリンク



目次

縦長セールスレターページ・ランディングページへのカスタマイズ

サイトを上から見ていくとまずはヘッダーと呼ばれる部分になります。
イメージ画像でいうと・・・下の赤点線の部分になります。
[br num=”1″]
ヘッダー部分

※ちなみにサイトは ⇒ 夢実現預金通帳

ヘッダー画像を用意する

いわゆる『ファーストビュー』というところです。
ここをみて(見込み客は)サイトを離脱するか、下まで読んでみようか、と判断するところです。

重要なポイントは全部記載する、訴えるつもりでヘッダー画像は作成してください。
(ヘッダー画像の作成の仕方などについては、また別の機会で取り上げたいと思います)

サンプル例としてあげたサイトでのヘッダー画像は 925×1120px で作成しました。
[br num=”1″]

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

[br num=”1″]
画像ができたら index.html の内容を修正します。
[br num=”1″]
賢威カスタマイズイメージ画像
[br num=”1″]
もし、上記の index.html の画像部分のファイル名が違う時は、アップロードしたファイル名に合わせてください。

同じように css も修正しておきます。
テンプレートのキモの部分です。

layout.css の修正

賢威6の css には5つの css ファイルがありますが、そのうちの2つ、layout.css と design.css を修正します。

まずは
【 layout.css 】の修正です。

下記のように全部の横幅を 925px に修正しておきます。
もちろん、自分のお好みのサイズで 900px でも構いません。

当然、その場合は上記のヘッダー画像の横幅は 900px で作成してください。
[br num=”1″]
権威カスタマイズイメージ画像
[br num=”1″]
全体のバランスを考えるならば、たとえ1カラム以外のカラム数のページは用意しない、という形でも2カラム、3カラム、まで全部変更しておいても構いません。

ヘッダー部分の背景画像を用意してみる(背景色は単色でいいという人は不要です)

サンプルサイトでは副業・お小遣い稼ぎをテーマにしたサイトでしたちので、金色をイメージしました。
背景画像などをダウンロードできるサイトから持ってきたものです。

ヘッダー画像と合わせるために作成したものです。
高さは意図的にヘッダー画像といっしょにしてあります。

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

実際は、横幅 1920px、高さ 1120px で作成。
(ただしここに記載されているのは大きさを 640×400px に縮小したものです)

design.css を修正する

賢威カスタマイズイメージ画像
[br num=”1″]
アップした画像のファイル名と合わせてください。

※ちなみに、画像をアップする際は、賢威6のテンプレートの中の images のフォルダにアップするようにしてください。
(先のヘッダー画像の場合も同様です)

※記事作成のページから画像をアップするのと同じようにアップすると表示されない場合があります。

⇒ サイトアドレス ⇒ サイトアドレス/blog/ またはサイトアドレス/wp/ などの中にある
⇒ サイトアドレス/blog(またはwp)/wp-contents/themes/賢威テンプレート/

の中にある
⇒ (中略)/themes/賢威テンプレート/images/ にアップロードしてください。

横幅のラインに影(シャドウ)をつけて浮き立たせる

実際のイメージ画像は次のような感じです。
[br num=”1″]
賢威カスタマイズイメージ画像
[br num=”1″]
何となく浮き出る感が強調されるかと思います。

次のようにカスタマイズしてください。
シャドウがつくラインの色が#ccc(グレー)の場合です。

design.css を修正する2

下記のように修正します。
5px は影(シャドウ)の幅だと認識してください。

[br num=”1″]
1805019

テキストボックスのカスタマイズ

上記やり方で横幅を示すラインにシャドウ(影の部分)を作成したと思いますが・・・
場合によっては、テキスト入力部分が左端のラインぎりぎりになる場合があります。
(上記シャドウの処理の有無にかかわらず)

それで、左端から若干のスキ間をあけるボックスを表示させて(しかも場合によってはボックスラインを表示させずに)文章の配置についてバランスをとることもできます。

※その場合のカスタマイズ方法は別ページ(テキストボックスのカスタマイズ)に記載しました。
良かったら参考にしてください。

賢威6カスタマイズまとめ(縦長のセールスレターページ・ランディングページにする方法)

賢威6カスタマイズまとめ
ランディングページ(セールスレターページ)はクロージングのためのページです。
ここから購入してもらえるか、離脱されるのか、(他に検索したりして)よその商品・商材にいってしまうのか・・・非常に大切です。

一般のブログなどと違って、セールスレターページ・ランディングページは縦長のものが多いですね。
これは当然ながら、これまでのいろんな試行錯誤の中で購買に結びつけるためには効果のある手法・テクニックだということの裏返しでもあります。

もちろんこういったセールスレターやランディングページとしてのテンプレートが販売されたりもしています。
でも、実際は「帯に短し、たすきに長し」だと思います。

もしあなたが賢威6をお持ちでセールスレターのようにカスタマイズしようと思ったら簡単に見栄えよくすることが可能です。

良かったら試してみてください。

【まとめ】
・賢威6を縦長のセールスレターページ・ランディングページ風にカスタマイズする方法をご案内しました。
・ただし、最近ではスマホでのネット閲覧が主流になってきていますので下の方にずっとスクロールしていくレターは・・・ターゲットによっては抵抗感を感じることもあります。
・アピールしたい商品とターゲットによっては一考することも必要です。

さらに・・・老婆心からのアドバイスです。

この手のカスタマイズは・・・やりだせばキリがありません。
正解もありません。

カスタマイズに時間を掛け過ぎても自己満足の世界での追求になる場合があります。
あくまでも最終的には、アクセスアップであったり、集客であったり、さらにはそこからの売上アップであったり、というのが狙い・目的であるはずです。

あまり横道にそれないようにすることも大切です。
[br num=”1″]
ここまで本当にありがとうございました。
[br num=”1″]

スポンサードリンク



よかったらシェアしてね!

この記事を書いた人

秋田秀一と申します。銀行に31年勤務して定年退職後、二足の草鞋を履いています。副業・起業・借金(資金調達と返済)についてお手伝いできましたらうれしい限りです。⇒ プロフィール

目次
閉じる