ダイレクトレスポンス広告は、お客さんの反応を具体的に数字で確認することができる広告です。ですので、1 つの広告を用意して終わりではなく、異なるパターンの広告と反応を比べて効果の高い広告にしていくプロセスが重要です。
特にインターネット上の広告は効果測定が簡単にできます。ウェブマーケティングを学んだことがある人は、広告はテストするものだということを十分理解しているかもしれません。
しかし広告の効果測定は、何もインターネットのおかげでできるようになったわけではありません。19 世紀ごろでも広告の効果測定は行われていました。それが今のインターネットの広告にも応用さているだけです。基本的な考え方は昔から変わりません。もちろんチラシや DM でも使える方法です。
ただ今回の記事では、特にインターネット上の広告における広告改善の方法、いわゆる A/B テストの基礎から Google アナリティクスの使用方法（WordPress で作った LP のケーススタディ）、ランディングページやセールスレターの広告パフォーマンスを改善する方法について紹介します。
A/Bテストとは？
広告の反応率を高めていくために行われるテストとして、もっとも一般的なものが A/B テストでしょう。
A/B テストとは、A パターンの広告と B パターンの広告を見込み客に見せて、どちらの方が反応が高いかを検証するテストのことです。
結局のところ、作った広告が成功するかどうかは、実際に広告を出稿して見込み客の反応を確かめないことには誰にもわかりません。ですので、このような A/B テストを実施して広告の効果を確かめ、より反応率の高い広告を作っていくのです。
A/B テストの目的
A/B テストの目的は、より反応の出る広告を作ることです。A パターンの広告と B パターンの広告をテストして検証し、反応の高かった方を次は C パターンの広告とテストして検証します。
この作業を繰り返し、広告をより反応率の高いものにしていきます。
A/B テストの方法
広告媒体によって方法が異なります。
例えばウェブ広告の場合は、Google の提供している無料のサービス「Google アナリティクス」を使えば簡単に A/B テストを実施できます（具体的な方法は後述します）。
チラシや DM などの紙媒体の場合は、申込フォームに広告パターンが分かるように特定のコードを記載しておくことで計測できます。広告パターン別に電話番号を変えておく方法もあります。
A/B テストの注意点
A/B テストをする上で、いくつか注意してほしいことがあります。
テスト項目を絞る
1 度にたくさんの項目をテストしようとしてはダメです。
例えばヘッドラインと保証と、申込ボタンのデザインを変えたパターンで A/B テストをしたとします。結果、B パターンの広告の方が成約率が 2% 高くなりました。では、何が要因で 2% も成約率が上がったのでしょうか？
分かりませんよね。判断できません。
ヘッドラインだけを変えていたら 1% 反応が下がったかもしれません。一度に複数の項目をテストすると、どの変更が影響して反応が上がったのか、もしくは下がったのか分からなくなります。ヘッドラインは同じで保証だけ変えていれば、3% 成約率が上がったかもしれないのです。
ですので、A/B テストは地道に 1 つずつ検証していきましょう。
テスト項目の優先順位
では、どのような項目をテストしたらいいのでしょうか？
実際のところテストしようと思えばいくらでもテストできます。例えば、ヘッドラインのコピー、商品名、価格、文字の大きさ、フォントのスタイル、色、写真の有無や写真の違い、レイアウトなどなど、、、大きな項目だけでもまだまだあります。
さらに細かく見ていくと、ヘッドラインの文字の大きさ、本文の文字の大きさ、ヘッドラインの文字の色、本文の文字の色・・・と、挙げていけばキリがなく、すべてを 1 つ 1 つテストするのは現実的ではありません。
目的は反応の高い広告をつくることですから、反応を左右する要因として影響力の大きいポイントから優先的にテストしていきます。
具体的には、以下の要素をテストしていくといいでしょう。
- ヘッドライン（キャッチコピー）
- オファー（サブ項目として価格、特典、保証など）
- レイアウト（特に申込ボタンや登録フォームなど）
- デザイン（特に申込ボタンや登録フォームなど）
1 つの要素で 3 パターン以上同時にテストするのはありか？
つまり、ヘッドライン A とヘッドライン B とヘッドライン C の 3 つのパターンを同時にテストするということです。
変更している要素は一箇所なので、どのヘッドラインが最も反応が高いか判断はできます。一度に 3 つのパターンを検証できるので効率もいいです。
ただし、十分なアクセスを見込めなければ信頼できる数字が集まるまで時間がかかってしまいます。その点に注意すれば 1 つの要素で複数パターンを同時にテストするのもありだと思います。
Beat The Control というテスト方法
Control（コントロール）とは、現状で最も反応の高い広告のことです。その広告と戦わせるという方法。つまり、今コントロールとなっている広告と別の広告をテストして、どちらの反応が高いかを勝負する方法が、Beat The Control です。
この場合、広告の一部を変えて A/B テストする方法とは異なり、全く異なる訴求やオファーのパターンでテストすることになります。いうなれば、コピーライター A が作ったコントロールとなっている広告 A と、挑戦者であるコピーライター B の作った広告 B を A/B テストする、ライター同士の戦いなのです。
広告を作るライターが異なるため、できあがる広告も全く異なるものになります。そのため、ヘッドラインだけ検証するというようなテストにはなりません。
アメリカではコピーライターが仕事を取る方法として知られていて、勝ったら私の広告を使ってくれ、その場合は報酬をくれ、というわけです。広告主にとってはリスクを最小限に抑えて売れる広告が手に入るかもしれないので嬉しいオファーですよね。
A/B テストの準備と方法
さて、ここからは Google アナリティクスを使ったウェブ広告の A/B テストの方法を説明していきます。
Google アナリティクスのアカウント設定の方法は省略します。また、WordPress で A パターンと B パターンのランディングページをつくったと仮定して説明を進めていきます。
WordPress のカスタマイズ方法がわからずテスト設定ができない方はこれで解決できると思います。
STEP1. 2 パターンの広告（LP）と、サンキューページを用意する
(1) テスト用の LP を用意する
まずはオリジナルとなるパターン A の広告（ランディングページ）を用意します。WordPress の投稿や固定ページでランディングページを 1 つ用意してください。
そしてパターン B の広告（ランディングページ）を用意します。この時、パターン A のページを複製してテストしたい要素を一部変更すれば OK です。
WordPress でページを複製するには、Duplicate Post というプラグインを使います。
(2) サンキューページを用意する
そしてもう 1 つ、サンキューページが必要です。
サンキューページとは、申し込み後に表示されるページのことで、登録完了ページや決済完了ページのことです。このページへアクセスがあれば成約したと判断されるため、コンバージョンの計測ページとして登録する必要があります。
基本的にサンキューページはテストするページと同一ドメイン上に用意します。
別ドメインにサンキューページを用意した場合、クロスドメイン設定を行えば問題なくコンバージョンを計測できますが、追加の設定がややこしので避けたほうが無難です。
どうしてもサンキューページを別ドメインにしなければならない場合は「クロスドメイン設定」などでググってください（別ドメインも自分が所有している必要あり）。
今回は以下の URL でテストの設定を行うと仮定します（アクセスしても何もありません）。
テストページ（一部を変更した別パターンのLP）：http://example.com/lp-b
サンキューページ（登録や注文完了ページ）：http://example.com/lp-thanks
STEP2. 目標を設定する
Google アナリティクスの【アナリティクス設定】から【目標設定】を行います。
(1) 新しい目標をクリック
(2) テンプレートもしくはカスタムから、目標の種類を選ぶ
目標とする行動が何なのかを選びます。
(3) 目標の説明を設定する
目標に分かりやすい名前をつけましょう。タイプを選択する部分では【到達ページ】を選択します。
(4) サンキューページの URL を設定する
到達ページにサンキューページを指定します。今回はサンキューページを【http://example.com/lp-thanks】と仮定したので、【/lp-thanks】と入力します。
(5) 保存して目標の登録を完了させる
全ての入力が終わったら【保存】をクリックします。以下のようなページに移動すれば成功です。
STEP3. ウェブテストを設定する – その1
目標設定が終わったら、いよいよ A/B テストの設定です。
Google アナリティクスのウェブテストという機能を使います。
(1) テストを作成をクリック
(2) テストの目標を設定
何のテストなのか、分かりやすく名前をつけておきます。テストの目的は先ほど設定した目標を選択します。
(3) テストするページを設定
テストするページを設定ます。オリジナルの方にコントロールとなっている LP の URL を、パターン１の方にテスト対象となる LP の URL を入力しましょう。いずれも http:// 部分は省きます。
今回の設定では、オリジナルページが【example.com/lp-a】、パターン１は【example.com/lp-b】になります。
STEP4. ウェブテストを設定する – その2 | head 内にテストコードを追記する（WordPress版）
STEP3 の (3) でテストするページを設定しましたが、その後にテスト用のコードを埋め込む必要があります。
埋め込む必要があるコードは 2 つ。
- Google アナリティクスの解析コード
- ウェブテスト用のコード
アナリティクスの解析コードは、すでに Google アナリティクスを使用しているなら埋め込み済みのはずなので、特別何もする必要はないでしょう。
新しく設定するのはウェブテスト用のコードです。
【手動でコードを挿入】をクリックすると、コードが表示されます。このコードをテストするページのうちオリジナルページの方に挿入します。
HTML ファイルでつくられたウェブページなら、単純に指示通りに該当ページのファイルにタグを埋め込めばいいのですが、WordPress の場合は 1 つの header.php ファイルが全ページの <head> に使われるため、編集に一工夫必要です。
ここの説明がピンとこない場合はこちらを読んでみてください。
https://presentnote.com/wordpress-php-for-beginner/
また、以下の操作をする前に子テーマをつくっておいてください。編集作業は全て子テーマ内のファイルで行います。
https://presentnote.com/child-theme-customaize/
(1) header.php を開く
まず、WordPress の子テーマに親テーマの header.php を複製して用意しておきます。そして、この子テーマ内の header.php を編集します。
(2) オリジナルページの ID を確認する
オリジナルページの方の ID を確認します。ID の確認方法は、WordPress の管理画面からオリジナルページ（投稿、もしくは固定ページ）の編集画面を開いて、その時に表示されている URL を見ると分かります。
【?post=◯◯】となっている箇所の番号が ID です。この ID をメモしておきましょう。
post.php?post=4547&action=edit
(3) 条件分岐タグを使用する
ウェブテスト用コードの挿入が必要なのはオリジナルページの方だけなので、条件分岐タグを使って挿入します。
https://presentnote.com/how-to-use-conditional-tags-to-excerpt/
簡単に言うと、オリジナルページが表示されたときだけウェブテストのコードが埋め込まれるように条件付けを行うということです。
使用する条件分岐タグは以下になります。
ランディングページを【投稿】で作成した場合
<?php if (is_single( '投稿ID' )): ?> <!-- テストコード --> <?php endif; ?>
ランディングページを【固定ページ】で作成した場合
<?php if (is_page( '固定ページID' )): ?> <!-- テストコード --> <?php endif; ?>
(4) <head>の直後にテストコードを挿入する
テストコードを条件分岐タグで囲ったら、それを <head> 内に記載します。場所は <head> の直後です。
ID=523 の投稿が表示された場合に、ウェブテストのコードを出力する（表示させる）設定
<head>
<?php if ( is_single( '523' )): ?>
<!-- Google Analytics Content Experiment code -->
<script> <!-- 省略 --> </script>
<!-- End of Google Analytics Content Experiment code -->
<?php endif; ?>
(5) 子テーマの header.php を上書きする
編集が終わったら保存し、子テーマにアップロードして header.php を上書きします。これでコードの設定は完了です。
STEP5. テスト設定を検証しテスト開始
テストコードの埋め込みが終わった後に【次のステップ】をクリックすると、コードが正しく埋め込まれているかのチェックが始まります。
通常の Google アナリティクスの解析コードと今埋め込んだテストコードの 2 つのチェックし、問題なく埋め込みができていればチェックマークが表示されます。その後【テストを開始】をクリックすれば無事 A/B テストが開始されます。
どちらか一方に不備があれば教えてくれます。解析コードやテストコードが正しく埋め込まれているか確認し、修正をしたら【再検証】をクリックしてください。それでもう一度チェックしてくれます。
A/Bテストの効果測定
テストが開始されると、アナリティクスのウェブテストからテストの状況が確認できます。
基本的にはどちらか優位なパターンなのか、Google アナリティクスが勝手に判断します。多腕バンディット方式というものを採用しているようで、必ずしも各々のパターンに均等にアクセスが割り振られるわけではありません。細かい調整を自動で行い、できるだけ短期間で優位なパターンを見つけるために採用されているテスト方式とのことです。
十分な検証ができれば、「優位なパターンが見つかりました」ということで自動的に A/B テスト終了になります。
ですが、どちらが優位なのかなかなか判定されないケースもあります。オリジナルを上回る可能性という部分が 95% 以上であることが統計的にも確かな結果となるようですが、必ずしもこの条件を満たせるわけではありません。
広告費もテスト期間も有限である以上、中途半端な結果に終わることもあります。仮にテストした B パターンの方が成約率が高かったとしても、オリジナルを上回る可能性が 20% だとしたら、誤差だと考えられるでしょう。その場合は、テストを延長するのも 1 つの手ですが、明確な差が出ていないので、新たな C パターンを作ってテストし、有意差が確認できるまで改善・テストを繰り返した方がいいと思います。
マーケティングは常にテスト
以上が A/B テストの概要と、Google アナリティクスのウェブテストを使用した A/B テストの方法についてです。
ダイレクトレスポンスマーケティングで使用する広告はつくったら終わりではありません。広告の完成がスタートです。テストを繰り返して広告の反応率を高め、売れる広告をつっていきましょう。
このページの目的は明確です。それは集客やセールス（販売）など、売上や成果に直接的につながることです。そのため、クリエイティブだと思われがちなウェブデザインではなく、成果を上げるためのセールスデザインが求められます。
https://presentnote.com/5-mistakes-webdesign/
このページでは、セールスデザインに基づいた、売れるランディングページ（またはセールスページ）をつくるときに押さえておきたいデザインのポイントをご紹介します。
ちなみに、ランディングページとセールスページの言葉の使い分けですが、以下のような感じです（明確な決まりはありませんが）。
セールスページ：商品・サービスを販売するためのページ。ランディングページで獲得した見込み客を顧客にするのが目的。SP などと書くことも。
1. 売れるレイアウトはワンカラム
ウェブで成約率の高いページのレイアウトは決まっています。ワンカラムの縦長 1 ページ構成です。
多くのウェブサイトはサイドバーがあり、メニューがあり、下層ページがある構成になっています。しかしセールスページの場合は全て不要な要素です。
なぜなら、訪問者にやってほしいことはただ 1 つだけ、申し込みのボタンを押してもらうことだけだからです。ですので、それ以外のリンクやメニューは一切排除し、寄り道せずに集中してコピーを読んでもらうためのシンプルなレイアウトが有効なのです。
最近ページ内リンクはよく使われるようになっていますが、以前テストしたときはページ内リンクの無いパターンの方が CVR（コンバージョン率）が高かったです。
最近はテストしてないので分かりませんが・・・。
ちょっと古い記事ですが、WordPress でランディングページを作る場合はこちらが役に立つと思います。
https://presentnote.com/create-sales-page-one-column/
2カラムのレイアウトで成果を上げるケースもある
セオリーとしてはワンカラムですが、実は 2 カラムのランディングページやセールスページもあり、成果を上げているケースもあります。
例えばオプトイン用のランディングページの場合。右サイトバーを用意して、そこに常にオプトインフォームが表示されているデザインは有効です。
一般的に右利きの人が多くマウスは右手で扱うので、マウスポインタはディスプレイの右半分にあることが多いです。なので、右サイドバーにメルアドの登録フォームを配置しておくことで、ユーザーの動作を少しでも楽にして上げることができます。
また、セールスページの場合でも右サイドバーに購入ボタンを表示させることで成約率（コンバージョン率）をアップさせたケースがあります。
左サイドバーで成約率を改善させたケースも
人間の構造的な理屈（右手でマウスだとか、視線はまず左上からだとか）に則れば、サイドバーは右に配置し、そこに登録フォームや購入ボタンを配置した方がいいと考えられます。
ですが、この購入ボタンを設置したサイドバーを右ではなく左に配置したことで。成約率が改善したケースもあります。結局のところテストしてみないと分からないというわけです。
また、見込み客が既存のレイアウトに慣れてきている場合、あえてパターンを崩して新鮮さを出す方法もあります。要するに、確実な答えはありませんので常に改善・テストを繰り返していきましょう。
ランディングページ/セールスページでサイドバーを使う場合の注意点
① 別ページへのリンクや別商品のバナーを張らない
サイドバーの役目は、あくまでも成約率を高めて訪問者を次のステップへとコンバート（＝転換する）ことです。ですので、目的は登録や決済に限られます。間違ってもメニューや下層ページへのリンク、他の商品のバナーを貼ったりしてはいけません。
これはサイドバーに限りません。ナビゲーションメニューに外部リンクを貼ったり、ページ内で別ページへのリンクを貼るのも NG です。最低限必要な外部リンクはフッターには特商法や個人情報保護方針などの記載ページくらいです。
② 無料や低価格商品はCTAをファーストビューに
また、サイドバーを配置するレイアウトが通用するのは、無料オファーや低価格商品に限られると思われます。事実、高額商品でサイドバーを設置したレイアウトでテストしたところ、成約率を下げたケースがあります。
無料オファーであれば登録の敷居も低いですし、低価格商品であれば詳しく商品内容を確認せずに、価格だけで判断して衝動的に購入をする場合もあります。なので、ページを開くとすぐに次の行動（= 登録や購入）の方法を確認できる方が成約率が高まると考えられます。
つまり、サイドバーへの登録 or 決済ボタンの配置は、
② 良さそうだと思えばすぐに登録 or 購入できる
という流れがスムーズにできるレイアウトなのです。
③ 高額商品は上から順番にセールスコピーを読んでもらう構成に
一方高額商品の場合は、しっかりセールスページ内で商品の価値などをプレゼンしてから、購入の判断をしてもらう必要があります。
AIDA の法則に代表されるような、売れる広告コピーの構成通りに読み進めてもらいたいので、サイドバーは不要です。ワンカラムのレイアウトで、一切の脇道を許さず上から下へとスクロールしてもらえるようにしましょう。
つまり、ワンカラムのランディングページは、
② 興味を持たせ
③ 必要性や欲求に気づかせて
④ 今すぐの行動を促す
という流れがスムーズにできるレイアウトなのです。
商品価格についても、すぐに見込み客に知られてしまってはいけません。じっくり価値を説明し、価格の妥当性を説明した上でプレゼンしないといけません。でなければ高いと思われてしまいます。
https://presentnote.com/11-technics-show-the-price/
そのため、購入ボタンは全てのプレゼンが終わったあと（主にページの最下部）に配置しましょう。
ランディングページでサイドバーを固定表示させるテクニック
これは CSS をちょっといじれば簡単に実装できます。
position: fixed;
これをサイドバーの id にでも指定すれば、指定した位置に常に固定表示されます。追尾型のサイドバーを用意するケースもありますが、そちらは jQuery などを使って実装できます。
ランディングページのレイアウトは基本的にワンカラム。2 カラムの場合はサイドバーに登録フォームや購入ボタンを配置する。
セールスページのレイアウトはワンカラム。
2. ランディングページの横幅の決め方
ランディングページやセールスページの横幅はいくらがいいのか？ どのような基準で横幅を決めればいいのでしょうか？
1 つはセールスコピー本文の読みやすさです。あまりにも大きく左から右へ目線を動かさないと読めないような幅では、可読性を損ない離脱率を高めてしまうでしょう。なので、目線はできるだけ上下運動に抑えられる幅にするのがよいと思います。
そういう点では、重要なのはページの幅よりもコンテンツ部分の幅です。
実際に成約率の高いセールスページの横幅を調べてみました。
| 商品名 | サイト（ページ）の幅 | コンテンツの幅 |
|---|---|---|
| 国内の某商品NのSP | 679px | 580px |
| 国内の某商品HのSP | 656px | 555px |
| 国内の某商品BのSP | 900px | 900px |
| 海外の某商品GのSP | 992px | 992px |
| 海外の某商品FのSP | 760px | 760px |
| 海外の某商品RのSP | 900px | 727px |
| 海外の某商品MのSP | 1140px | 1100px |
サイトの幅もコンテンツ部分の幅も様々ですね。
ただ、冒頭 2 つの N と H は 5 年以上前からあるセールスページです。サイトの幅もコンテンツ部分の幅も 700px を超えることのない、比較的狭いデザインでした。
一方最近のデザインに傾向があるとすれば、横幅は 900px 以上の比較的広めの構成が主流になってきているようです。
とはいえ、 A/B テストをすると横幅が狭いランディングページの方が成約率が高いという結果を出したケースもあります。横幅も迷ったらテストしましょう。
ただ、横幅をテストするより重要度の高いテスト箇所は他にありますので（ヘッドラインとか）、売れているサイトの横幅をそのまま真似すれば問題ありません。
スマホやタブレットなど、各デバイスごとの幅も考慮する
モバイル対応がウェブサイトをつくる上での必須条件となってきていますし、ユーザーがどのデバイスでページを見るのかを考えて設計する必要性はどんどん高まっています。ですので、パソコン画面だけを基準にしてサイトの幅を考えるのでは不十分です。
タブレットやスマートフォンのディスプレイサイズの場合、パソコンのディスプレイとは違いコンテンツはディスプレイいっぱいに表示されるようにした方が読みやすくなります。ディスプレイの左右に数ピクセルだけ余白を確保するレイアウトにしましょう。パソコン用に指定した余白のままだと、画面の半分以上を余白で占めてしまう場合があります。
1段落は3〜5行に収め、むやみな改行はしない
また、改行の位置にも気を付けましょう。HTML では <p> ~ </p> で囲まれた範囲を段落として扱います。<br> タグを使うと、<p> で囲まれた範囲内でも改行ができます。
読みやすさを考えるなら、パソコンブラウザ基準で 3 行 〜 5 行に 1 回は段落を変えるようにしましょう。<p> タグで囲まれた段落も改行されますので、基本的に <br> タグによる改行は使わない方がいいです。
また、パソコンでの読みやすさばかりを気にして文章の途中で改行（<br> タグによる改行）をしてしまうと、スマホなどのサイズで見たときに読みにくくなってしまいます。
基本的に読点や意味の区切りで改行するのではなく、句点のみで改行するようにした方が全デバイスでの読みやすさに対応できます。
スマホで改行を無効にする方法
レスポンシブデザインの代表的な方法である、ディスプレイサイズごとにスタイルシートを切り替える方法です。
HTML の記述
<p>改行タグにセレクタを指定すれば、<br class="sp-br"> モバイルでの改行を無効にできます。</p>
CSS の記述
@media screen and (max-width: 643px) {
.sp-br {
display: none;
}
}
【ディスプレイサイズ 643px 以下のデバイスでは、class=”sp-br” と指定した要素を非表示にする】という指定方法です。どうしてもパソコン表示で改行したい箇所がある場合に使ってください。
いちいち <br> タグに class セレクタを追加するのが面倒なら、以下のように全ての <br> を非表示にすることで、スマホで改行を無効にできます。
@media screen and (max-width: 643px) {
br {
display: none;
}
}
3. 配色は 3 色で構成する
配色に関しては、ベースカラー・メインカラー・アクセントカラーの 3 色構成がベターです。あまり多くの色を使いすぎると統一感が出せなくなったり、重要な箇所が分からなくなったり、広告メッセージがぼやけたりします。なので、基本は 3 色でまとめた方がいいです。
ベースカラー
背景に用いる色です。基本は白です。
白文字を使って背景に白以外を持ってくるようなパターンもありますが、セールスデザインではセールスコピーを読んでもらうことが重要なので、文字色は読みやすい黒（明度の低いグレー）にします。ですので、背景色は白に近い色がいいです。
メインカラー
サイトの印象を決める色です。これは、商品・サービス、会社のイメージ、または見込み客に与えたい印象を元に決めてください。
メインカラーはヘッダーやフッター、サブヘッドなどで使用することが多いです。
イメージに合わせた色をどのように選べばいいか分からないときは、こちらのサイトがとても参考になります。
アクセントカラー
最も目立つ色です。主にコンバージョンボタン、登録ボタンや購入ボタンなどの、クリックしてほしい部分に使用します。いわゆる CTA（Call To Action）と呼ばれる部分です。
メインカラーに対してコントラストがはっきりしており、直感的にそこが重要な部分であることを伝える役目があります。
メインカラーを決めてから、以下のようなツールを使ってアクセントカラーを決めます。
Google 推奨のマテリアルデザインが参考になるかも
Google が公開しているデザインのガイドラインがあるんですが、そこで採用されているのがマテリアルデザイン（material design）と呼ばれています。
ウェブサイトだけではなくスマホアプリのデザインにも使えるガイドラインですが（むしろスマホアプリのデザインのためのガイドラインだと思われ）、そのガイドラインの中に色のスキームも提供されています。
セールスデザイン的にはとても使いやすそうなのでぜひ参考にしてみてください。
さらにこちらのツールは、いくつかの色を選択するだけで全体の配色を提案してくれます。マテリアルデザインの配色決めがとても簡単になります。
このようなツールで決めた配色をそのままパクるのが、間違いがなくておすすめです。
配色はベースカラー・メインカラー・アクセントカラーの 3 パターンを用意。
4. フォントカラー・フォントサイズ・字体
文字について決めることは、文字の色と文字のサイズ、そして字体です。
フォントカラー
セールスデザインの背景は基本白ですので、ベースとなる文字色は明度を少し上げたグレーを使います。真っ黒よりもグレーの方が読みやすいです。
しかし、ベースとなる色以外にも、2 ~ 3 色パターンを用意しておきましょう。
1 つは白。これはアクセントカラーなどを使用している部分のフォントカラーに使います。
例えばメインカラーが #3399CC の場合、これを背景色にしてサブヘッドを差し込む場合、以下のようにフォントカラーを白にします。
メインカラー #3399CC を背景色にして白色フォントのサブヘッド
他には、メインカラーやアクセントカラーで採用した色を、ヘッドラインやサブヘッドなどのフォントカラーとしても使ったり、セールスコピー本文中で目立たせたい文字や文章がある場合は赤文字にして目立たせたり、というような使い方です。
フォントサイズ
フォントサイズも 3 パターンくらいにまとめます。
セールスコピー本文のサイズと、その他見出しなどで使うサイズを 2 パターンほど決めておきましょう。
文字の大きさは可読性を左右しますので、ターゲットに合わせて調整しましょう。つまり、ターゲットとなる見込み客が普段よく目にする文字の大きさが最適サイズということです。
また、ウェブ媒体と紙媒体でも読みやすい文字の大きさは異なります。ウェブだと本文のフォントサイズに 14 ~ 16px くらいを使うことが多いです。
字体（フォントファミリー）
字体は大きく 2 パターン、ゴシック体か明朝体です。
アルファベットの場合はサンセリフかセリフ体です。
これもウェブ媒体と紙媒体で読みやすさに違いがでてきます。紙媒体は基本的に明朝体を使いますが、ウェブ媒体はゴシック体を使った方が読みやすくなります。
サブヘッドなどで明朝体を使って文字にリズムをつけることはありますが、その場合はフォントサイズを本文より大きくし、さらに太文字（ボールド）にするなどして文字をはっきり見やすくする必要があります。
ワードプレスなどで制作する場合、テーマにもよりますが、基本的にはゴシック体になってると思います。そのため、明朝体にしたいと思った箇所の字体を serif 体にすれば、日本語の明朝体扱いになります。
CSS タグはこちら
<span style="font-family:serif;">明朝体にしました。</span>
フォントカラー（文字色）：基本は黒より少し明度を上げたグレー。その他、サイトの配色に合わせて 2 パターンほど用意する。
フォントサイズ（文字の大きさ）：本文は 14px 〜 16px ほど。それ以外に 2 パターンほどの大きさを用意する。
フォントファミリー（字体）：基本的にゴシック体を使う。明朝体はアクセントとして使う。
5. 常に注意を引くきっかけをつくる
ウェブページを用意しても、見込み客は上から順番に読んでくれるわけではありません。ちゃんと構成に意図があるので本当は順番に読んでほしいのですが、結局は流し読みされてしまいます。
そのため、流し読みしている見込み客の注意をいたるところで引きつける工夫が必要です。
サブヘッドを使って注意を引く
セールスページはいくつかの段落でできていますが、各段落にはサブヘッドライン（サブキャッチコピー）と呼ばれる見出しをつけます。
この見出しは、ヘッドラインをつくるのと同じ要領で、流し読みしている見込み客の注意を引き、次の本文を読んでもらうためのものです。
ブラウザのサイズにもよりますが、だいたい 1 画面に 1 段落が収まる感じで、各段落の冒頭にはサブヘッドラインを挟むのが理想的です。
サブヘッドラインは他の文字よりも大きくデザインを区別して目立たせます。
またデザインとは異なりますが、このサブヘッドを上から拾い読みするだけでも、なんとなくセールスコピーの内容が伝わるようにします。
アイキャッチを使って注意を引く
見出しとは別に、アイキャッチとして写真を使い注意を引きつける方法もオススメです。
以下のタイプの写真は、人が無意識に注目してしまうため
- 人の顔
- 赤ちゃん
- 動物
そして、写真は人の目を引くため、その周辺には必ず読んで欲しい重要度の高いコピーを配置します。いわゆるキャプションです。アイキャッチをして、そしてどうしたいのかが大切なわけです。
パターンを崩して注意を引く
人は同じようなパターンが続くと飽きてしまいます。つまり、文章がずっと続いたり、同じようなデザインが続くと飽きられて離脱されてしまう可能性が高まります。
ですので、パターンを崩して見込み客の意識を再びコピーに引きつける工夫が必要です。サブヘッドを配置するのもこのテクニックの 1 つですが、他にも、、、
- 背景色と文字色のコントラストを変えてみる
- 文字を中央寄せにしてみる
- 段落を枠で囲ってみる（ジョンソンボックスなどと呼んだりします）
などのテクニックがあります。
図・イラスト・表で説明できないか？
文章主体のセールスコピーでは何かと軽視されている感じがありますが、文章で説明するよりも図やイラスト、表を使って説明した方が圧倒的に分かりやすい場合があります。
価格表や取引内容のまとめなどは積極的に表を使って表現しましょう。
また、商品やサービスをイメージできる写真やイラストは必須ですし、証拠を示すところではグラフを使ってみるのもいいですね。
何より、文字よりも圧倒的に見てもらえます。
まとめ
セールスコピーは “削る作業” なのですが、セールスデザインも同じです。つまり、あれもこれも詰め込みたくなるところをぐっと我慢して、削るのです。
何か物足りないな、、、と感じるくらいでちょうど良いと思います。余計なデザインをほどこして成約率が落ちることはあっても、上がることはないでしょう。
ワンカラム構成、配色は 3 つまで、フォントサイズも 3 パターンなど、これらはどれもいかに削ってシンプルにできるか、を考えた結果です。それが成約率の高いデザインだと過去の広告デザイナーたちがテストして検証してくれているので、エゴを挟まずに素直に従いましょう。
何か新しいアイデアを閃いても、まずはテスト。デザインの良し悪しは売れるかどうかが決めます。お客さんに判断してもらい、最も成約率の高いランディングページを目指してください。
参考資料・参考記事
]]>このページでは、できるだけ広告の知識がない方のために、どうすれば売れる広告をつくれるのか説明していきます。
まず初めに、これは誰のためのものか？
このページで説明している広告は、お客さんに具体的な行動を促すための広告です。このような性質の広告は「レスポンス広告」や「ダイレクトレスポンス型広告」と呼ばれています。
レスポンス広告は全てのビジネスに必要と言っても過言ではありません。特に中小企業や個人事業主などにとっては、いわゆるブランドをイメージさせるクリエイティブな広告ではなく、販売や集客につながるレスポンス広告が必要です。
ですので、この投稿はウェブで集客や商品を販売したいと思っている人のためのものです。
企業のイメージアップを図りたいとか、最近自社の広告に飽きてきたら新しい広告どうしようか……と、お客さんの方向を向いていない人のためのものではありません。
ウェブ広告に限定した理由
1 つは具体的に限定した方が、キーワードが明確になり検索エンジンの上位に表示される可能性が高まると考えたから。そして検索上位に表示された方が、より多くの人の役に立つと考えたからです。
もう 1 つは、ウェブ広告には制限がないというメリットがあるからです。1 ページにどれだけ文字を書こうと、サーバーの容量を超えない限りはお咎めなしです。
そして、広告制作は基本的に削る作業です。
A4 サイズのチラシをつくりたいとしても、ハガキタイプのダイレクトメールをつくりたいとしても、まずは制限を無視して広告コピーをつくっていきます。そこから本当に必要な情報のみを厳選します。
ですので、まず制限のないウェブ広告のつくり方を身につけておけばそこから応用ができます。
当然、制限のある広告の方が難しいです。伝えることを A4 サイズ両面にまとめてお客さんを集めようとするのと、いくらでもメリットや特典を盛り込んで説明していい制限のないウェブ広告でお客さんを集めようとするのとでは、圧倒的に後者の方が有利ですよね（実際ウェブのランディングページの成約率に比べ、チラシの成約率は 10 分の 1 以下になります）。
なので初心者に向けてはウェブ広告のつくり方を説明した方がいいと考えました。
広告の目的とは？
最初にお伝えした通り、このページで扱っている広告はレスポンス広告です。レスポンス、つまり反応を得るための広告です。
レスポンス広告の目的を具体的に挙げるならば・・・
- 商品を買ってもらう
- 資料請求をしてもらう
- サンプル請求をしてもらう
- メールマガジンに登録してもらう
- 会員登録してもらう
- 電話してもらう
- 申込書を返送してもらう
などです。
広告の目的を一言でいえば “売ること” だと思います。資料請求などは金銭の取引がないので厳密には売ることとは違うのかもしれませんが、請求してもらう資料自体を売っているとも言えますよね。
販売者と見込み客との間の取引を成立させるのが広告の目的です。
だからこのような広告コピーのことを、「セールスコピー」と呼んでいます。
売るためには何が必要か？ 広告成功に必要な 5 つの要素
では、売れる広告をつくるためには何が必要なのでしょうか？ 以下に広告を成功させるために必要な要素を 5 つご紹介します。
(1) マーケティング戦略
広告はあくまでもビジネス全体における道具の 1 つです。特に販売プロセスの中で使われる道具です。そしてこの広告による販売プロセスは、マーケティング戦略の上に成り立っています。
つまりマーケティングの方が上位概念で、広告やコピーライティングは下位概念です。
じゃあマーケティングって何？ ということになるわけですが、レスポンス広告を成功させるために必要なマーケティングはただ 1 つ。【ダイレクト レスポンス マーケティング】、略して DRM です。
この投稿はマーケティングがテーマではないため詳細は省きますが、簡単に説明すると「直接反応を得るためのマーケティング」のことです（そのままですね）。
マーケティングについてはこちらも参照ください。
(2) 行動心理
セールスコピーは行動心理だと言われることもあるくらいです。セールスコピーの目的である “売ること” を達成するためには、人が動く理由を知っている必要があります。
- なぜ、人はものを買うのか？
- どのような悩みが人を行動に掻き立てるのか？
- 今すぐ行動を起こさずにはいられない心理状態とは？
などの理論が、売れる広告を成り立たせています。
行動心理については広告のメッカであるアメリカで多くの研究がされていて、専門書もたくさんあります。広告マンは心理学者だと思われていた時代もあったそうです。セールスコピーが人の心を操るスキルと言われるのには、このような理由があるんですね。
行動心理や人を動かす心理トリガーについてのこちらの投稿も参照してください。
(3) 広告メッセージ
広告を成功させるためには中心となるメッセージが必要です。広告メッセージとは “広告の切り口” のことです。
つまり、「一体なぜこの広告を読む必要があるのか？」、そして「結局何をしてくれるの？」というお客さんからの問いに対しての答えです。
この広告メッセージを強力に売れるものにしてくれるのは、商品のメリットでもなければ特徴でもありません。詳しくは STEP2 企画のところで説明していきます。
(4) 広告媒体
広告をつくっても、広告を出す媒体がなければ話になりません。今回はウェブに絞ってはいますが、ウェブ媒体にもたくさんの広告出稿先がありますよね。
例えば・・・
- 検索エンジン
- Facebook などのソーシャルメディア
- メルマガ
- YouTube などの動画サイト
- Yahoo!などのポータルサイト
- まとめサイト
- キュレーションサイト
などなど。他にもスマートフォンのアプリにも広告を出せます。さらにウェブ以外の媒体もたくさんあります。
雑誌、新聞、電話帳、テレビ、ラジオ etc……
どの媒体を使うかによっても広告の反応は大きく変わってきます。当然、媒体ごとにメインとなる層のターゲットが異なるからです。
媒体ごとに年齢、性別、職業から、趣味趣向や価値観の偏りがあるはずなので、慎重に調査して狙っている見込み客がいるであろう媒体に広告を出稿しましょう。ただし、1 つの媒体に頼りっきりになるのも危険なので、複数の媒体に出稿して反応を計測していくことが重要です。
(5) お客さん
1 つ質問です。
もし、あなたが今からハンバーガーを売るビジネスを始めるとして、、、たった 1 つ望んだ条件を満たした状態でスタートすることができるとしたら、あなたは何を望みますか・・・？
これは、世界一のコピーライターと呼ばれた故ゲーリー・ハルバートが、セミナーの中で参加者に対して投げかけた質問です。
「今から私と君たちがハンバーガーショップを始めて、誰が一番売れるか競争するとする。競争に勝つためにどんな条件が欲しい？」
参加者からはどんな答えが返ってきたでしょうか？ 例えば、最高の肉・最高のソース・最高の場所……色々な答えが返ってきました。
しかしゲーリー・ハルバートは「君たちが望む条件は全てあげよう。私が欲しいのはたった 1 つだ。その 1 つさえあれば、私はこの競争で一番になれる。その条件は・・・」といい、こう答えたのです。
「飢えた群衆だ。」
商品からビジネスを考える人は少なくないと思いますが、実際それで成功するケースは稀です。ビジネスはお金を払うお客さんがいて成り立ちます。そして、現実的に商品がいいからといってお客さんはお金を払うわけではありません。
「飢えた群衆」つまり、強烈な欲求を持った人たちがいれば、ものは自動的に売れていきます。
人の悩みからスタートしましょう。ニーズとか欲求とか問題意識と言い換えてもいいです。
とにかく広告の成功には飢えているお客さんが必要です。
売れる広告をつくるのに商品は必要ない！？
売れる広告に必要な要素を挙げてきましたが、実はここまで商品という要素が出てきませんでした。
そうです、広告を成功させるのに商品は重要ではありません。
事実、商品ができる前に広告をつくり、実際に出稿して反応を確かめるケースもあります。広告の反応がよければ商品を生産ラインの乗せるわけです。在庫を大量に抱える前に売れるかどうか判断できるのでリスクも抑えられます。
飢えた群衆、つまり強烈な問題意識を持った人が求めているのは、当然問題の解決です。そのために商品・サービスを求めています。つまり、お客さんが本質的に求めているのは問題の解決であって商品・サービスそのものではありません。
ここを間違えないようにしてください。
広告では問題の解決方法を提示してあげるわけです。お客さんが抱えている問題がいかに重大な問題であるのか？ それを放っておくとどれほど深刻な事態に陥るのか？ お客さんが気づいていない本当の問題や原因はなにか？ そして必要とされる唯一の解決方法はなにか？
これらを伝えて行動を促しましょう。
売れるウェブ広告をつくる７つのステップ
さて、ここまでは前置きです。ここからが具体的な方法の話です。売れるセールスコピーをつくるための工程をを 7 つに分けてお伝えしていきます。
STEP0．計画を立てる
これは広告制作に限った話ではありませんが、プロジェクトを進めるためには計画を立てる必要がありますよね。
レスポンス広告をつくるプロセスは次の 7 つのステップがありますので、各ステップをいつまでに終わらせるのか期限を決めていきます。
(1) デッドラインを決める
まずは最終デッドラインを決めましょう。つまり、”いつ広告をリリースするのか” という期日です。
(2) 各 7 つのステップの時間配分比率を考える
これは経験則的な部分もありますが、これから説明する各ステップの作業それぞれに、どの程度の時間を割くかをざっくりと決めます。
例えばぼくの場合はこんな感じ
さらにウェブページ化の工程に関しては + 2 〜 3 日みてます。
(3) 逆算して 7 つのステップのデッドラインを決める
これが決まればあとは簡単です。デッドラインから逆算してスケジュールを組んでいきます。
例えば、今日が 7 月 1 日で 8 月 1 日にリリースする場合
| 8 月 1 日 | リリース |
|---|---|
| 7 月 31 日 | 購入テストなど最終チェック完了 |
| 7 月 29 日 | ウェブページ完成 |
| 7 月 24 日 | 広告コピーの原稿完成 |
| 7 月 17 日 | ライティング終了、編集開始 |
| 7 月 15 日 | リサーチ・企画完了、ライティング開始 |
| 7 月 1 日 | リサーチ開始 |
このようにして、まずはスケジュールを決めておきましょう。
STEP1．リサーチ
STEP1 はリサーチです。リサーチの目的は広告の素材集めです。
セールスコピーはクリエイティブではなくコネクティブ。つまり創造する作業ではなく、つなぎ合わせる作業です。売るために必要な情報を集め、それを分かりやすく構成し売れる文章に組み立てる作業です。
ですので、まずは売るために必要な情報を集めましょう。
リサーチする対象は次の 4 つです。
(1) お客さん
リサーチする要素の中で何が 1 番大事かと問われれば、おそらく「お客さん」のリサーチでしょう。飢えた群衆は一体何に飢えているのか、を調べます。
お客さんが求めているものを広告で提案できれば売れます。単純な理屈です。
ですので、お客さんが何を求めているのか、何にフラストレーションを感じ、何に憧れ、どんな願望を持っているのか？ などを調べていきましょう。特に次の 3 つ、
- 思い込み
- 欲求（得たい欲求 / 避けたい欲求）
- 感情
を重点的に探っていきます。
(2) 商品
商品・サービスについてリサーチする項目は大きく 2 つです。
・約束
商品に関しては、その商品がお客さんに対して “約束” してくれることは何か、をはっきりさせる必要があります。
つまり、
- どのような問題を解決してくれるのか？
- その問題が解決した結果、私（お客さん）はどうなるのか？
これが商品が約束してくれることになります。
商品には様々な特徴がありますが、その特徴はこの約束を果たすために備わっているはずです。
例えば、冷蔵庫には内部を低温に保つという特徴がありますが、、、この特徴が約束してくれることは「食材を長期間保存してくれること」です。この前提には、食材がすぐに腐ってしまうという問題があり、その解決方法として冷蔵庫という商品やその特徴があります。
つまり、商品の特徴を洗い出し、その特徴が何を約束してくれるのか、どんな結果をもたらしてくれるのかを探し出す必要があります。
・証拠
そしてもう 1 つ重要な要素は “証拠” です。
これはとても重要です。なぜなら、ほとんどの約束は信じてもらえないからです。つまり、ほとんどの広告は信じてもらえないという意味です。
その壁を越えるために、信じられる約束を提示するというのも大事ですが、それをバックアップするための証拠も大切です。なぜ約束が果たされるのか、根拠を説明する必要があります。その根拠を集めてください。
(3) マーケット
あなたの参入しているマーケットの状況についても調べましょう。具体的には競合の調査や流行などです。
- 競合はどのような価格帯でどのように商品を提供しているのか？
- 商品・サービスはどの程度受け入れられているのか？
- ライバルはどのような広告を打っているのか？
などの情報を集めましょう。結局あなたの商品・サービスは他の何かと比較されることになります。売るためには、自社の商品・サービスが比較対象とは違うものであることを示さないといけません。
どこを売りにすれば他との差別化が図れるのかを決めるためには、他の商品やサービス、ライバル企業の情報が必要です。
(4) 販売者
販売者についても深くリサーチしておきましょう。自社の商品を売る場合は自社のことについてです。
これは、「なぜその商品を売っているのか」という問いに対する答えです。
特に社長さんや創業者などの想いは商品や会社に強く反映されますので、開発秘話や創業の経緯などを振り返ってみてください。きっと他と差別化できるポイントが見つかるはずです。
もし、あなたがクライアントのために広告コピーを書こうとしているなら、クライアントさんについてより深く知ってください。同じように開発秘話や立ち上げのエピソードをヒアリングしていきます。
STEP2．企画
STEP2 は企画です。企画とはリサーチで集めた情報をまとめる作業です。使う情報、使わない情報を選別し、見込み客に響くであろう切り口を考えます。
これは成功する広告に必要な 5 つの要素のうち 3 つめにお伝えした「広告メッセージ」をつくるためのステップだと考えてください。
(1) 誰に？
まずは対象をはっきりさせておきましょう。ターゲット決めです。レスポンス広告は、広く宣伝をするための広告ではありません。必要な人に確実に購入してもらうための広告です。
そのため、対象を絞ることが重要です。
対象を広げて色々な人に響くようにメッセージを作ろうとすると、結局言葉が曖昧でぼやけたものになり、なんだかよく分からないものができあがります。つまり売れないということです。
対象とする人物像をはっきりさせましょう。複数いる場合は、複数の人物像をはっきりさせましょう。
(2) 取引内容（オファー）
結局のところ、どんなにうまいことを言おうが、センスのいいコピーを書こうが、取引内容に魅力がなければ売れません。
なのです。買わないほうがおかしい、この提案を無視するなんてバカだ、と思われるような取引内容を考えましょう。
取引内容として最低限決めておくべき項目は次の 6 つです。
- 約束する結果
- 価格（割引）
- 特典
- 保証
- 限定性
- 決済方法・提供方法
(3) 最大の約束（ビッグプロミス）
(2) のオファーの中にも含まれていますが、「結局、それは私に何をしてくれるの？」に対する答えです。お客さんの人生がどう変わるのかを具体的にしてあげることです。
商品をリサーチする中で、数々の約束してくれることが見つかるはずなので、その中から最も伝えるべき約束を 1 つに絞りましょう。
約束を魅力的に表現するための方法はこちらを参照してください。
(4) 他との違い
似たような商品・サービスが溢れている中で、なぜあなたを選ぶ必要があるのか？ に対する答えは大事だと思いませんか？
「またか」と思われることが、広告としては最悪な反応です。同じだと思われる結果は、絶対に避けたいところです。ですので、何か新鮮な印象を与えることが広告成功の鍵になります。
誰も打ち出していない、けれど魅力ある売れるポイントが見つかれば最高ですが、そうそう簡単に見つかるものではありません。
しかし、他と同じ商品・サービスであれば、正直売る必要があるのかと言わざる終えません。それでもお客さんが求めている商品・サービスであるなら、既存のお客さんに聞いてみてください。「なぜ他ではなく弊社（当店）を選んだんですか？」と。
きっと自分たちでは気づいていない強みが見つかるはずです。
(5) 訴求ポイント
訴求ポイントとは、広告メッセージそのものと言ってもいいでしょう。切り口やコンセプトと言い換えてもいいです。ここまでにお伝えしてきた【取引内容】や【約束】、【他との違い】などを含め、中心となるメッセージを絞る作業が必要です。
例えば、取引内容（オファー）が他社に比べて圧倒的に魅力的であるなら、取引内容を全面にプッシュした訴求が刺さるかもしれません。
例えば、他社が提供していない価値を圧倒的な差で提供できるなら、それが訴求ポイントになるかもしれません。
しかし、結局のところ、これもお客さんからスタートするのです。お客さんの知識や価値観が前提にあって訴求ポイントは決まります。取引内容を全面に押し出した訴求で売れる商品は、既に広く一般に認知されている商品です。まだ市場に浸透していない商品をいくら圧倒的な割引価格で提供します！ とアピールしたところで、全く魅力を感じません。
訴求ポイントを見つけるヒントとしては、見込み客が普段考えていることや、価値観、思い込みに対して、新しい世界を見せてくれると思ってもらうにはどうしたらいいかを考えることです。
これを見つける（もしくはつくる）ことが、売れる広告をつくるための秘訣です。
(6) ビッグアイデア
「広告という道具」の中では、最も重要かもしれません。
何せどれだけいい取引内容が書かれていたとしても、どんなに素晴らしいお客さんの声が載っていたとしても、今すぐ買わないといけないと思えるようなコピーだったとしても、、、まずは広告そのものに目を留めてもらわないければ全て無意味です。
そして、どうやって見込み客の注意を広告に集めるかというアイデアが、この「ビッグアイデア」と呼んでいるものです。
このビッグアイデアは、ほとんどの場合ヘッドライン（キャッチコピー）をつくっている時に思いつきます。経験を積めばリサーチ中にもいくつか出てくるでしょう。訴求ポイントを探す過程で、それがそのままビッグアイデアになることもあります。
他にも、広告のヘッドラインで注意を引くための方法がいくつもありますので、こちらの投稿も参照してください。
(7) 広告の構成（ストーリーボード）
企画では広告の流れを決めます。まず最初に◯◯で注意を引いて……次に◯◯を説明して問題点に気づいてもらって……そしたら原因を伝えて……のように、セールスの流れを決めます。
この時に大活躍するのが、「スワイプファイル」と呼ばれるコピーライターの必須ツールです。
スワイプファイルとは、過去にうまくいった広告のサンプルのことです。そして売れる広告をつくりたければ、このスワイプファイルから構成を真似すればいいだけです。
自分で考える必要はありません。できる限り真似してください。エゴを挟まずスワイプファイルに従えば、あなたの広告が成功する確率は格段に高まります。
実は (6) のビッグアイデアも、スワイプファイルから拝借できます。
STEP3．ライティング
STEP3 はライティングです。
正直ここはあまり説明することがありません。STEP2 までの工程で集めた素材と、それを元に決めた企画の内容にそって、言葉を並べていけばいいだけです。
言葉を並べるだけです。文章を生み出そうとするのではなく、既にどこかで書かれている情報を材料に料理し直す感じです。ですので、「文章は苦手です……」という人でも書けるはずです。スワイプファイルの構成や言葉をそのまま真似して描いていけば OK です。
もちろん、スワイプの通りにいかない場合は言い換えたり追記したり削除したりは必要ですよ。しかし、スワイプを真似するという基本姿勢を崩さなければ、少なくとも大失敗する広告をつくってしまうリスクは減るでしょう。
他にもセールスコピーライティングのテクニック的な文章術に関しては、こちらの投稿を参照してください。
STEP4．編集
STEP4 は編集です。
セールスコピーのライティングが終わったら、できるだけ 1 晩くらい寝かせましょう。
正直コピーを書き上げた瞬間はテンションが上がっています。「よっしゃ！」「書き上げた！！」「いい感じじゃね？」という感じで、半ば興奮している状態です。そのような状態で編集作業に入っても、冷静な判断で編集できません。ですので、まずは一旦自分の頭をクールダウンさせてから編集に取り掛かりましょう。
編集のための視点
個人的にはライティングより編集の方に時間を割きます。
そしてぼくの文章の癖は、だらだらと回りくどいこと。意識しないと読点ばかりの長ったらしい文章を書いてしまいがちです。なので特に一文の長さには注意しています。
何度も言うように、セールスコピーの目的は売ることです。決してかっこいい文章を書くことではありません。売るための文章に仕上げるには、徹底的にエゴを排除することが必要です。
つまり編集ではいかにコピーを書き上げた前日までの自分を否定するかにかかっています。
エゴを挟まずできる限り客観的な視点で編集に臨みましょう。
編集のポイント
- 分かりやすいか？
- 一文は短く読みやすいか？
- 誰のためのコピーかがはっきりしているか？
- ヘッドライン（キャッチコピー）は次を読ませる役割を果たせているか？
- 論理構成に矛盾はないか？
- 約束は具体的でイメージできるものになっているか？
- 証拠は足りているか？
- 今すぐ行動する理由はあるか？
などに注意して編集してください。
STEP5．レイアウト・デザイン
STEP5 は広告のレイアウトやデザインのサンプル作りです。
ウェブページ化する前に、配置や文字の大きさ・色、イメージ挿入の指示などをまとめます。ウェブデザインに入る前の簡単な設計図をつくるイメージです（ウェブ制作ではワイヤーフレームなどと言ったりしますね）。
ぼくはセールスページやランディングページをつくる際のデザインを「セールスデザイン」と呼んで、一般的なデザインとは区別しています。
過剰なデザインは悪
セールスデザインの目的もただ 1 つ。売ることです。
デザインというクリエイティブに近い作業は、うっかりすると自分のエゴを出してしまいがちです。しかしエゴを出すと途端に売れなくなるのがセールスというもの。
過剰なデザインはセールスにおいては全て邪魔になります。センスやクリエイティビティを発揮するのがレスポンス広告に求められるデザインではありません。注意してください。
売れるデザインが良いデザイン
セールスデザインのポイントは次のようなものがあります。
- ワンカラムの縦長 1 ページ構成にする
- レイアウト・デザインも売れているページを真似する
- 売れるかどうかが、良いデザインかどうかの判断基準である
- シンプルにする
- 玄人っぽさは成約率を下げる
以上のような点に注意することが、売れることにつながるとされています。
結局のところ、売れるデザインが正解であり、売れないデザインは間違いということです。ですので、今は売れるとされているデザインも、いつ売れないデザインになるかは分かりません。逆も然りです。
デザインもできる限りテストをして、結果の改善をしていきましょう。
STEP6．ウェブページ化
STEP6 はウェブページ化です。STEP5 でつくったウェブページの構成を元に形にしていきます。
今は専門的な知識がなくても簡単にウェブサイトをつくれるサービスがあります。このサイトでは WordPress に関しての情報もたくさん公開していますが、WordPress を使えば簡単にセールスページやランディングページがつくれます。
ぜひ参考にしてみてください。
売れるセールスページやランディングページのポイント
- 表示速度をできる限り縮める
- 決済ボタンを目立たせる
- ファーストビューでは注意を引く
以上は最低限対応しておきましょう。
STEP7．効果測定（テスト）
ウェブページまで仕上がったら、後は公開して実際に反応を確かめます。
レスポンス広告は実際の反応を計測してからがスタートです。A/B テストをして成約率を確認し、広告を改善してパフォーマンスを高めていきましょう。
A/B テストとは？
A/B テストとは、広告の効果を高めるテストの方法です。A という広告と B という広告を用意し、それぞれにアクセスを集めます。そして反応の高い方を採用します。これを繰り返して成約率を高めていきます。
例えば、ヘッドライン（キャッチコピー）だけを変えた広告 A と広告 B をテストした結果、広告 A の方が高い成約率であることがわかりました。次は保証内容を変えた広告 C を用意し、広告 A とテストします。そして成約率の高い方を採用したら、次は他のポイントを変えて……という感じです。
レスポンス広告では、価格すらもテスト要素です。答えはお客さんが持っています。テストし改善し、高いパフォーマンスを発揮する広告へと改善していきましょう。
A/B テストを無料で簡単に行える方法
天下の Google 大先生がご提供してくださっております Google Analytics という無料のアクセス解析ツールがございますが、こちらのおツールの中に【ウェブテスト】という御機能がお備わっているのでございます。
このウェブテストを使えば、Google Analytics が自動的に広告 A と広告 B にアクセスを割り振ってくれて、成約率を計測してくれます。そして、どちらの広告の方が高いパフォーマンスを発揮しているのか自動的に判断してくれます。
ぜひ使ってみてください。
まとめ
いかがでしたでしょうか？ できるだけ知識のない方が売れる広告をつくれるようにと考えて書いてきました。
とは言えば、ブログに公開する記事としてはかなりのボリュームになっているので、何度も目を通して理解していただければと思います。
全てはまずここから始まっています。売るために、マーケティング戦略があり行動心理がありオファーがあり訴求ポイントがあります。
そして、売るための広告はクリエイティブではなくコネクティブです。すでに世の中にある情報を取捨選択し、分かりやすく説得力を持って伝えるのが役目です。プラス、購入に繋がる心理トリーがを引いてあげて、判断を先延ばしにされないように仕掛けを入れておきましょう。
売れるウェブ広告をつくって、お客さんの知らない魅力溢れる世界を提供してあげてください。
参考資料・参考記事
]]>
動画を YouTube に公開する方法
ウェブ上で動画を再生できるように、サーバーなどに動画をアップロードします。サーバーにアップロードした場合は動画プレーヤーなどを設置する必要があり手間なので、今回は YouTube を使いたいと思います。
YouTube へのアップロードは簡単です。
１．右上の【アップロード】をクリックします
現在（2014.9）の YouTube は、右上のメニューバーに【アップロード】というボタンがあるのでクリックします。
２．動画をドロップするか、ファイルを選択してアップロードします
アップロード画面に切り替わります。動画ファイルをドラッグ＆ドロップでこの位置に持ってくるとアップロードできます。上矢印のアイコンをクリックするとローカル上のファイルを選択することができます。アップロードには数分かかります。
３．設定画面に移行するので、設定を行う
アップロード中も設定を変更することができます。YouTube 上での動画の加工などもできますが、とりあえず【情報と設定】の部分のみ設定を行います。セールス用の動画なので、それを踏まえて以下のように設定することをオススメします。
基本情報の設定
(1) タイトル
検索結果を意識してタイトルを付けましょう。検索キーワードを盛り込むようにしてください。
(2) 公開設定
全ての設定が終わるまでは「非公開」にしておくといいと思います。完成したら限定公開か公開を選びます。広告出稿する場合は「公開」で。自社のウェブサイト上のみで公開する場合は「限定公開」でも OK です。
詳細設定の設定
(3) コメント
コメントの許可のチェックを外します。コメントは受け付けない方がいいでしょう。【この動画の評価をユーザーに表示する】のチェックも外しましょう。
(4) 配信オプション
【埋め込みを許可】【チャンネル登録者に通知】いずれのチェックも外してください。
(5) カテゴリ
動画の内容に合うカテゴリを選択してください。
(6) 動画の統計情報
※【収益の受け取り】と【Call-to-Action オーバーレイ 】の設定は必要ありません。
セールスプレゼン動画を埋め込むランディングページの制作
セールスプレゼン動画（動画セールスレター）用のランディングページは、少し独特な作りをします。まずランディングページのようにワンカラムが基本です。そして、レイアウトとしては、ヘッダー部分にヘッドライン。ボディー部分に動画を埋め込み。そして動画の下に購入用の決済ボタンを設置します。
この購入ボタンは動画の再生時間に合わせて最初は非常時にし、価格のプレゼン辺りまで進んだ段階で始めて表示されるようにします。
以下サンプルを元に解説していきます。
＞ サンプルサイト
ヘッドラインで見込み客をその場に滞在させる
ヘッダー部分にはヘッドラインが必要です。このヘッドラインは、ランディングページにアクセスした人をそこに留めさせることが目的です。動画は基本、自動的に再生されるように設定するので、それまでの間が勝負です。「これは自分のためのページだ」と思わせることができるようなヘッドラインをつくりましょう。
ヘッドラインの作り方に関するこちらの記事も参考にしてみてください。
ボディー部分にセールス動画を埋め込み、自動再生させる
セールスプレゼン動画の埋め込みにも一工夫必要です。まず動画はページを開いたら自動的に再生されるようにしましょう。見込み客に判断を委ねてしまったらそれだけで再生されない可能性が高まります。動画の冒頭部分に強力なフックを用意して、そのページから離れようとは思えないようにしましょう。
また、再生ボタン・停止ボタン・再生時間のコントロールバーなどは全て非表示にしましょう。セールスプレゼンテーションを、順番通りに見てもらうことが重要です。セールスの成否を決めるのは、順番なのです。ですので、相手に主導権を握らせるようなことはしないでください。
YouTube の隠しパラメータ
YouTube には、再生方法やコントロールの表示・非表示などをカスタマイズできる隠しパラメータが存在します。これを埋め込みタグに付け加えれば簡単にセールスに最適化された動画をつくることができます。
隠しパラメータの使い方
まず、YouTube の埋め込みタグを取得します。これは YouTube の動画ページの【共有】から【埋め込みコード】をクリックすると表示されます。コピペする前に「動画が終わったら関連動画を表示する」のチェックを外しておきましょう。
埋め込みタグはこのような構造になっています。
<iframe width="560" height="315" src="動画のURL" frameborder="0" allowfullscreen></iframe>
隠しパラメータは、以下のようなつくりになっています。
動画の URL の後に【 ? 】を追記し、その後に追加していきます。複数のパラメータを追加する場合は【 & 】を使ってつなげていきます。
セールス動画制作に必要なYouTube隠しパラメータ5選
(1) 動画を自動再生させる【 autoplay=x 】
- 0：手動再生（デフォルト）
- 1：自動再生
(2) コントロールを非表示にする【 controls=x 】
動画の下部にあるコントロールを非表示にするには、【 controls=0 】と指定します。x に以下の値を入れることで、コントロールの表示／非表示を切り替えることができます。デフォルトは表示になっています。
- 0：コントロールの非表示
- 1：コントロールの表示（デフォルト）
(3) フルスクリーンボタンを非表示にする【 fs=x 】
セールスプレゼン動画のランディングページには、後述の自動出現ボタンを設置します。この自動出現ボタンは購入ボタンです。動画を見続けた人が購入できるようにするボタンを、適切なタイミングで表示させます。
ですが、フルスクリーンにされてしまうと、この自動出現ボタンが隠されてしまい、購入のボタンに気づいてもらえなくなります。それによって離脱してしまうことを避けるために、フルスクリーンにできないようにします。
フルスクリーンボタンを非表示にするには【 fs=0 】と指定します。x に以下の値を入れることで、フルスクリーンボタンの表示／非表示を切り替えることができます。デフォルトは表示になっているので、何も指定しなければ表示された状態となります。
- 0：フルスクリーンボタンを非表示
- 1：フルスクリーンボタンを表示（デフォルト）
(4) ビデオタイトルを非表示にする【 showinfo=x 】
YouTube 動画では通常、動画の上部にタイトルやアップローダーなどの情報が表示されています。これもセールスプレゼンを集中してみてもらうのに不要な情報なので、非表示にします。【 showinfo=0 】と指定すればビデオタイトルなどが非表示になります。x に以下の値を入れることで表示／非表示を指定できます。デフォルトは表示です。
- 0：ビデオタイトルを非表示
- 1：ビデオタイトルを表示（デフォルト）
(5) 動画の再生終了後の関連動画表示を非表示にする【 rel=x 】
YouTube では、動画の再生が終了すると関連動画が表示される機能があります。しかしセールスにおいて、購入ボタン以外の他の動画やページへリンクさせるのは絶対避けなければいけません。なので、この関連動画は非表示にします。
【 rel=0 】と指定すれば関連動画は表示されなくなります。x に以下の値を指定することで、関連動画の表示／非表示を切り替えることができます。デフォルトは表示設定になっています。
またこの設定は埋め込みコードを取得する際に、チェックを外すことで簡単に設定できます。
- 0：関連動画の非表示
- 1：関連動画の表示（デフォルト）
セールスプレゼン動画 YouTube 版に必須の隠しパラメータ設定
以上、5 つの隠しパラメータを紹介しました。これを YouTube の埋め込みコード内で指定することで、セールスプレゼンテーションに適した動画の表示・再生方法にすることができます。このパラメータの設定をまとめると、以下のようになります。
<iframe width="560" height="315" src="動画のURL?rel=0&autoplay=1&controls=0&fs=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
自動出現ボタンの設置
セールスプレゼン動画の大きな特徴の 1 つが、この自動出現ボタンです。ここでは「」と呼びたいと思います。これはページへアクセスしてから指定した時間が経過すると、自動的に表示されるボタンのことです。
なぜこのボタンが必要なのかというと、しっかりセールスプレゼンテーションを見てから購入ボタンを押してもらうためです。ほとんどの人はセールスだと分かった瞬間、真っ先に価格のことを気にします。そして、購入ボタンを押して価格を確認したくなります。
しかし、売り手側としては、しっかり商品の価値をプレゼンした上で価格を伝えたいわけです。そこで、購入ボタンの出現を調整することで売り手側のセールスプレゼンテーションの進捗に合わせて購入の行動を促すことができます。
ボタン設置の手順
ページアクセス後、指定した時間が経過すると自動で出現するボタンを設置する方法です。ボタンを出現させるためには、以下のコードを使います。
(1) タグの前に以下のスクリプトを埋め込みます。
<script type="text/javascript"> function display_buy_button() {
document.getElementById("hidden_contents").style.visibility = "visible"; }
setTimeout("display_buy_button()", 【時間指定】);
</script>
【時間指定】の部分に購入ボタンを表示させたい時間を指定します。指定方法は以下を参考にしてください。
1 秒 = 1000
1 分 = 60000
5 分 = 300000
10 分 = 600000
15 分 = 900000
例えば、動画開始後（正確にはページアクセス後なので動画の読み込み時間も含まれます）24 分 32 秒後に表示させたい場合は、以下のように指定します。
<script type="text/javascript"> function display_buy_button() {
document.getElementById("hidden_contents").style.visibility = "visible"; }
setTimeout("display_buy_button()", 1232000);
</script>
(2) 購入ボタンを表示させたい位置に、以下のタグを埋め込みます。
<div id="hidden_contents" style="visibility: hidden"> <a href=""><img src="購入ボタンの画像など"></a> </div>
ボタンは画像でなくても構いません。テキストリンクで、デザインは CSS で整えることもできます。
]]>同じサイト内であっても、別のページに飛ばされたりすると離脱率が上がり売上が下がります。これはすでに実証されている事実です。なので、商品（サービス）を売るページは、できるだけ無駄なリンクを削除し、シンプルに１つの商品を説明する専用ページである必要があります。
WordPress には固定ページという機能があります。この固定ページは商品紹介ページを作成するのに適していますが、グローバルメニューやサイドバー、フッターメニューなどを排除することができません。
Twenty Twelve を使うと全幅テンプレートというのがあり、グローバルメニュー以外の無駄なリンクを排除することができます。しかし、それでもグローバルメニューやヘッダーまでは基本的に排除できません。そこで、ヘッダーもフッターもサイドバーも排除したセールス専用のワンカラムのテンプレートを作成したいと思います。
つまりセールスレターやランディングページを作ろう！ ということ
このページの呼び方はプレゼンページとかセールスページとか勝手に名付けていますが、決して販売目的に限りません。一般的な言い方としては、ランディングページ・セールスレターなどでしょうか。見積もり依頼、資料請求、サンプル請求、予約など、見込み客に何かアクションを起こしてもらうためのページということです。
こういった目的のページは、ワンカラムにするというのがセオリーです。インターネット上で、お客さんを獲得したいと考えている全ての人は、会社紹介や事業内容を説明した一般的なホームページとは別に、このようなセールスページを用意するようにしましょう。そして、売りたいものはそこで売るのです。
WordPressでは異なるレイアウトのページを表示させることができる
例えばこちらのページ。このページは無料の PDF レポートを紹介しているページですが、WordPress の固定ページを使って作成しています。Twenty Eleven のサイドバーテンプレートです。
このサイトではサイドバーテンプレートを使用すると、他とはレイアウトが変わります。ヘッダーはなく、フッターも別のパターンになります。サイドバーもこのテンプレート専用の内容になっています。
Twenty Eleven には、元々サイドバーテンプレートやデフォルトテンプレート、ショーケーステンプレートといった、レイアウトの違うテンプレートが用意されています。この内サイドバーテンプレートを応用して、レポートの請求という目的のために無駄を省いたシンプルなページを作成しました。
なぜ、固定ページを使うのか？
それは編集がしやすいからです。WordPress のエディタを使えるので、文字の入力や画像の挿入が簡単にできます。タグ打ちが苦手な人でもビジュアルエディタを使えば、文字色や太さなどの変更も簡単です。そのため固定ページを使うことにしました。
手順
- 必要なファイルを複製する
- テンプレートファイルを書き換える
たったこれだけです。これだけで、無駄な情報を削除したセールス専用ページ（プレゼン専用ページ）を作成することができます。ランディングページにも使えます。WordPress のデフォルトテーマである Twenty Eleven を使って作成したページはこのような感じです。
１．必要なファイルを複製する
テーマは Twenty Eleven を使用します。まずはセールスページ用のテンプレートファイルを作成しましょう。固定ページ用のテンプレートを追加する方法は、こちらの「固定ページのテンプレートにオリジナルを追加・作成する方法」にまとめています。
簡単にまとめておくと、以下の３つのファイルを複製して、ファイル名を変更します。例えば、sideber-page.php を複製して、ファイル名を sales-page.php などとします。そして、これらのファイルを子テーマにアップすれば OK です。
| 親テーマのファイル | 子テーマにアップ | |
| sidebar-page.php | 複製してファイル名変更 → | sales-page.php |
| header.php | 複製してファイル名変更 → | header-2.php |
| footer.php | 複製してファイル名変更 → | footer-2.php |
２．テンプレートファイルを書き換える
複製したファイルを書き換えます。３つのファイルがありますので、それぞれ以下のように書き換えてみます。
(1) sales-page.phpの変更
- テンプレートファイル名の指定
- 出力するヘッダーを header-2.php に指定
- サイドバー出力タグを削除する
- 出力するフッターを footer-2.php に指定
<?php
/**
* ▼ テンプレートファイルの名前を指定 ▼
* Template Name: セールスページテンプレート
* Description: A Page Template that adds a sidebar to pages
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
get_header('2'); ?><!-- ()の中に数字を追加 -->
<div id="primary">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<!-- サイドバー出力タグを削除 -->
<?php get_footer('2'); ?><!-- ()の中に数字を追加 -->
(2) header-2.phpの変更
- 初期状態で73から始まるサイトタイトル部分（hgroup）を削除
- 初期状態で78行目から始まるヘッダー画像を削除
- 初期状態で115行目から始まる検索窓を削除
- 初期状態で128行目から始まるグローバルナビゲーションを削除
<body <?php body_class(); ?>> <div id="page" class="hfeed"> <header id="branding" role="banner"> <!-- 73行目からのサイトタイトルを削除 --> <!-- 78行目からのヘッダー画像を削除 --> <!-- 115行目からの検索窓を削除 --> <!-- 128行目からのナビゲーションを削除 --> </header><!-- #branding --> <div id="main">
(3) footer-2.phpの変更
- 初期状態で17行目から始まるフッターサイドバー（フッターウィジェット）の出力部分を削除
- 初期状態で25行目から記載されているクレジット等の表記を自由に変更
特定商取引法に関する表記やプライバシーポリシー（個人情報保護方針）へのリンクを記載するのが一般的
<?php /** * The template for displaying the footer. * * Contains the closing of the id=main div and all content after * * @package WordPress * @subpackage Twenty_Eleven * @since Twenty Eleven 1.0 */ ?> </div><!-- #main --> <footer id="colophon" role="contentinfo"> <!-- 17行目からのフッターサイドバー（ウィジェット）を削除 --> <!-- ▼ 25行目からの記述を自由に変更 ▼ --> <div id="site-generator"> <?php do_action( 'twentyeleven_credits' ); ?> <!-- ▼ 今回はこの部分を追記 ▼ --> <p><a href="">特定商取引法に関する表記</a>｜<a href="">プライバシーポリシー</a>｜Copyright © ＊＊＊＊＊ All Right Reserved.</p> <a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyeleven' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyeleven' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyeleven' ), 'WordPress' ); ?></a> </div> </footer><!-- #colophon --> </div><!-- #page --> <?php wp_footer(); ?> </body> </html>
これで、固定ページでコンテンツを作成する際に、新たに作成したテンプレート（この例ではセールスページテンプレート）を選べば、header-2.php と footer-2.php の内容が適用されるようになります。
今回は、これら２つのファイルのほとんどの記述を削除したので、実際は本文の内容くらいしか表示されません。また、お好みで好きなようにヘッダーとフッターの表示をカスタマイズすることもできます。その時は PHP とかあまり気にせず、HTML の要領でタグや文字を記述すれば OK です。
セールスページのスタイルシートも変更したい場合
ページ専用のスタイルシートを適用したい場合、いくつか方法があります。ぼくがよく使う方法は、そのページ専用の外部スタイルシートを読み込ませる方法です。サーバー上に別の CSS ファイルを用意して、そこで一括変更してしまおうというわけです。指定したページ以外のスタイルを変えることなく、そのページデザインの変更が可能です。
方法についてはこちらの「WordPressでページごとに別のスタイル（外部CSS）を適用させる方法」にまとめていますので、チェックしてみてください。
タイトルを非表示にしたい場合
ページタイトルは以外と邪魔になります。ページの冒頭、いわゆるヘッドライン（キャッチコピー）の部分に表示させたい言葉というのは、最も重要な部分です。理由は割愛しますが、この最も重要な部分を最も効果的に見せるためには、ページタイトルをそのままヘッドラインにするのは都合が悪いです。自由度が制限されるからです。
ですので、ページタイトルは非表示にして、ヘッドラインは本文に直接書くことをオススメします。
タイトルを非表示にする方法には次の２つを押さえておきましょう。
１．スタイルシートで display: none; を指定する
スタイルシートを使って表示を隠してしまう方法です。上記の「ページごとにスタイルを適用させる方法」を使って、まずはセールスページ専用の CSS ファイルを用意します。そこに以下のように書けば OK です。
.entry-title {
display: none;
}
２．phpのテーマファイルを用意してタイトル部分を削除する
これはちょっと知識が必要になります。詳しいことは割愛しますが、固定ページのコンテンツは、content-page.php というファイルが出力しています。このファイルを開くと、h1 といったタグや、タイトルを出力するタグなどが書かれているのを発見できると思います。
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"><!-- ▼ この部分がタイトルを出力 ▼ --> <h1 class="entry-title"><?php the_title(); ?></h1> </header><!-- .entry-header --> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?> </div><!-- .entry-content --> <footer class="entry-meta"> <?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- .entry-meta --> </article><!-- #post-<?php the_ID(); ?> -->
つまり、この記述を削除してしまえばタイトルは表示されなくなります。
ただし、この content-page.php は、全ての固定ページに適用されてしまうので、タイトル部分の記述を削除すれば、セールスページだけでなく、全ての固定ページのタイトルが表示されなくなってしまいます。そこで、セールスページテンプレート専用に、content-page.php と同じ役割のファイルを作成し、この新たに作成したファイルを適用させる必要があります。
手順は以下の通りです。
(1) content-page.php を複製しファイル名を変更する
content-page.php を複製しファイル名を変更します。ファイル名で変更するのはハイフン以降です。【 content 】と書かれている部分は変更しないように注意してください。例えば、【 content-sales.php 】と変更します。
(2) content-sales.php に記述されているタイトル部分を削除する
１．で作成した content-sales.php を開き、タイトルタグを削除します。結果的に以下のようになります。
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <!-- ヘッダー・タイトル部分のタグを削除 --> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?> </div><!-- .entry-content --> <footer class="entry-meta"> <?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- .entry-meta --> </article><!-- #post-<?php the_ID(); ?> -->
削除した後は、このファイルを子テーマフォルダにアップしてください。
(3) sales-page.php を使用した場合は、content-sales.php を出力するように変更する
今度はセールスページテンプレート用のファイルである sales-page.php（先ほど作ったテンプレートファイルです）を開きます。元々サイドバーテンプレート用のフィイルを複製して作ったものなので、記事本文に該当する部分では content-page.php を出力するように記述されています。この部分を content-sales.php を出力するように書き換えます。具体的には18行目のタグで、【 page 】の部分を【 sales 】に書き換えれば OK です。
<div id="primary"> <div id="content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', 'sales' ); ?><!-- pageの部分をsalesに書き換える --> <?php comments_template( '', true ); ?> <?php endwhile; // end of the loop. ?> </div><!-- #content --> </div><!-- #primary -->
以上で、セールスページテンプレートを使用した場合タイトルが表示されなくなります。この方法を使えば、セールスページテンプレート独自の内容を表示させたり、逆に非表示にさせたりできますので、WordPress カスタマイズの応用テクニックとして覚えておくといいと思います。
]]>