カテゴリー: 広告レイアウト・デザイン

  • 【ノンデザイナー向け】5つの秘訣で売れるランディングページをデザインする方法

    インターネットで集客やセールスを成功させるには、ランディングページやセールスページと呼ばれる縦長ワンカラム構成のウェブページが必要です。
    このページの目的は明確です。それは集客やセールス(販売)など、売上や成果に直接的につながることです。そのため、クリエイティブだと思われがちなウェブデザインではなく、成果を上げるためのセールスデザインが求められます。
    https://presentnote.com/5-mistakes-webdesign/
    このページでは、セールスデザインに基づいた、売れるランディングページ(またはセールスページ)をつくるときに押さえておきたいデザインのポイントをご紹介します。
    ちなみに、ランディングページとセールスページの言葉の使い分けですが、以下のような感じです(明確な決まりはありませんが)。

    ランディングページ:見込み客を獲得するためのオプトインページ。メールアドレスや住所などの個人情報の登録が目的。LP などと書くことも。
    セールスページ:商品・サービスを販売するためのページ。ランディングページで獲得した見込み客を顧客にするのが目的。SP などと書くことも。

    1. 売れるレイアウトはワンカラム

    ウェブで成約率の高いページのレイアウトは決まっています。ワンカラムの縦長 1 ページ構成です。
    多くのウェブサイトはサイドバーがあり、メニューがあり、下層ページがある構成になっています。しかしセールスページの場合は全て不要な要素です。
    なぜなら、訪問者にやってほしいことはただ 1 つだけ、申し込みのボタンを押してもらうことだけだからです。ですので、それ以外のリンクやメニューは一切排除し、寄り道せずに集中してコピーを読んでもらうためのシンプルなレイアウトが有効なのです。
    最近ページ内リンクはよく使われるようになっていますが、以前テストしたときはページ内リンクの無いパターンの方が CVR(コンバージョン率)が高かったです。
    最近はテストしてないので分かりませんが・・・。
    ちょっと古い記事ですが、WordPress でランディングページを作る場合はこちらが役に立つと思います。
    https://presentnote.com/create-sales-page-one-column/

    2カラムのレイアウトで成果を上げるケースもある

    2カラムランディングページ
    セオリーとしてはワンカラムですが、実は 2 カラムのランディングページやセールスページもあり、成果を上げているケースもあります。
    例えばオプトイン用のランディングページの場合。右サイトバーを用意して、そこに常にオプトインフォームが表示されているデザインは有効です。
    一般的に右利きの人が多くマウスは右手で扱うので、マウスポインタはディスプレイの右半分にあることが多いです。なので、右サイドバーにメルアドの登録フォームを配置しておくことで、ユーザーの動作を少しでも楽にして上げることができます。
    また、セールスページの場合でも右サイドバーに購入ボタンを表示させることで成約率(コンバージョン率)をアップさせたケースがあります。

    左サイドバーで成約率を改善させたケースも

    人間の構造的な理屈(右手でマウスだとか、視線はまず左上からだとか)に則れば、サイドバーは右に配置し、そこに登録フォームや購入ボタンを配置した方がいいと考えられます。
    ですが、この購入ボタンを設置したサイドバーを右ではなく左に配置したことで。成約率が改善したケースもあります。結局のところテストしてみないと分からないというわけです。
    また、見込み客が既存のレイアウトに慣れてきている場合、あえてパターンを崩して新鮮さを出す方法もあります。要するに、確実な答えはありませんので常に改善・テストを繰り返していきましょう。

    ランディングページ/セールスページでサイドバーを使う場合の注意点

    ① 別ページへのリンクや別商品のバナーを張らない

    サイドバーの役目は、あくまでも成約率を高めて訪問者を次のステップへとコンバート(=転換する)ことです。ですので、目的は登録や決済に限られます。間違ってもメニューや下層ページへのリンク、他の商品のバナーを貼ったりしてはいけません。
    これはサイドバーに限りません。ナビゲーションメニューに外部リンクを貼ったり、ページ内で別ページへのリンクを貼るのも NG です。最低限必要な外部リンクはフッターには特商法や個人情報保護方針などの記載ページくらいです。

    ② 無料や低価格商品はCTAをファーストビューに

    また、サイドバーを配置するレイアウトが通用するのは、無料オファーや低価格商品に限られると思われます。事実、高額商品でサイドバーを設置したレイアウトでテストしたところ、成約率を下げたケースがあります。
    無料オファーであれば登録の敷居も低いですし、低価格商品であれば詳しく商品内容を確認せずに、価格だけで判断して衝動的に購入をする場合もあります。なので、ページを開くとすぐに次の行動(= 登録や購入)の方法を確認できる方が成約率が高まると考えられます。
    つまり、サイドバーへの登録 or 決済ボタンの配置は、

    ① ファーストビューで興味を引いて
    ② 良さそうだと思えばすぐに登録 or 購入できる

    という流れがスムーズにできるレイアウトなのです。
    2カラムLPレイアウトの意図

    ③ 高額商品は上から順番にセールスコピーを読んでもらう構成に

    一方高額商品の場合は、しっかりセールスページ内で商品の価値などをプレゼンしてから、購入の判断をしてもらう必要があります。
    AIDA の法則に代表されるような、売れる広告コピーの構成通りに読み進めてもらいたいので、サイドバーは不要です。ワンカラムのレイアウトで、一切の脇道を許さず上から下へとスクロールしてもらえるようにしましょう。
    つまり、ワンカラムのランディングページは、

    ① 注意を引いて
    ② 興味を持たせ
    ③ 必要性や欲求に気づかせて
    ④ 今すぐの行動を促す

    という流れがスムーズにできるレイアウトなのです。
    1カラムLPのレイアウトの意図
    商品価格についても、すぐに見込み客に知られてしまってはいけません。じっくり価値を説明し、価格の妥当性を説明した上でプレゼンしないといけません。でなければ高いと思われてしまいます。
    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> タグによる改行)をしてしまうと、スマホなどのサイズで見たときに読みにくくなってしまいます。
    改行表示の違い(PCとスマホ)
    基本的に読点や意味の区切りで改行するのではなく、句点のみで改行するようにした方が全デバイスでの読みやすさに対応できます。

    スマホで改行を無効にする方法

    レスポンシブデザインの代表的な方法である、ディスプレイサイズごとにスタイルシートを切り替える方法です。
    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 色でまとめた方がいいです。
    ウェブデザインの配色

    ベースカラー

    背景に用いる色です。基本は白です。
    白文字を使って背景に白以外を持ってくるようなパターンもありますが、セールスデザインではセールスコピーを読んでもらうことが重要なので、文字色は読みやすい黒(明度の低いグレー)にします。ですので、背景色は白に近い色がいいです。

    ※文字色は RGB(0,0,0)の真っ黒ではなく、若干明度を上げたグレーがいいです。背景色もRGB(255,255,255) の真っ白ではなくても、若干明度を下げたほんのり淡いグレーや、明度の高い色など、文字の視認性や可読性などが損なわれなければ大丈夫です。

    メインカラー

    サイトの印象を決める色です。これは、商品・サービス、会社のイメージ、または見込み客に与えたい印象を元に決めてください。
    メインカラーはヘッダーやフッター、サブヘッドなどで使用することが多いです。
    イメージに合わせた色をどのように選べばいいか分からないときは、こちらのサイトがとても参考になります。

    アクセントカラー

    最も目立つ色です。主にコンバージョンボタン、登録ボタンや購入ボタンなどの、クリックしてほしい部分に使用します。いわゆる CTA(Call To Action)と呼ばれる部分です。
    メインカラーに対してコントラストがはっきりしており、直感的にそこが重要な部分であることを伝える役目があります。
    メインカラーを決めてから、以下のようなツールを使ってアクセントカラーを決めます。

    Google 推奨のマテリアルデザインが参考になるかも

    Google が公開しているデザインのガイドラインがあるんですが、そこで採用されているのがマテリアルデザイン(material design)と呼ばれています。
    ウェブサイトだけではなくスマホアプリのデザインにも使えるガイドラインですが(むしろスマホアプリのデザインのためのガイドラインだと思われ)、そのガイドラインの中に色のスキームも提供されています。
    セールスデザイン的にはとても使いやすそうなのでぜひ参考にしてみてください。

    Google Material Design Style cColor
    Google Material Design Style Color

    さらにこちらのツールは、いくつかの色を選択するだけで全体の配色を提案してくれます。マテリアルデザインの配色決めがとても簡単になります。
    このようなツールで決めた配色をそのままパクるのが、間違いがなくておすすめです。
    Material Palette
    Material Palette

    まとめ
    配色はベースカラー・メインカラー・アクセントカラーの 3 パターンを用意。

    4. フォントカラー・フォントサイズ・字体

    文字について決めることは、文字の色と文字のサイズ、そして字体です。

    フォントカラー

    セールスデザインの背景は基本白ですので、ベースとなる文字色は明度を少し上げたグレーを使います。真っ黒よりもグレーの方が読みやすいです。
    しかし、ベースとなる色以外にも、2 ~ 3 色パターンを用意しておきましょう。
    1 つは白。これはアクセントカラーなどを使用している部分のフォントカラーに使います。
    例えばメインカラーが #3399CC の場合、これを背景色にしてサブヘッドを差し込む場合、以下のようにフォントカラーを白にします。

    メインカラー #3399CC を背景色にして白色フォントのサブヘッド

    他には、メインカラーやアクセントカラーで採用した色を、ヘッドラインやサブヘッドなどのフォントカラーとしても使ったり、セールスコピー本文中で目立たせたい文字や文章がある場合は赤文字にして目立たせたり、というような使い方です。

    ※文字を赤くする場合も、原色の赤( RGB(255,0,0) )は使わずに、明度・彩度を調整した方がいいです。そもそもの話として原色系は避けたほうがいいです。

    フォントサイズ

    フォントサイズも 3 パターンくらいにまとめます。
    セールスコピー本文のサイズと、その他見出しなどで使うサイズを 2 パターンほど決めておきましょう。
    文字の大きさは可読性を左右しますので、ターゲットに合わせて調整しましょう。つまり、ターゲットとなる見込み客が普段よく目にする文字の大きさが最適サイズということです。
    また、ウェブ媒体と紙媒体でも読みやすい文字の大きさは異なります。ウェブだと本文のフォントサイズに 14 ~ 16px くらいを使うことが多いです。

    字体(フォントファミリー)

    字体は大きく 2 パターン、ゴシック体か明朝体です。
    アルファベットの場合はサンセリフかセリフ体です。
    字体(ゴシック体/明朝体・サンセリフ/セリフ)
    これもウェブ媒体と紙媒体で読みやすさに違いがでてきます。紙媒体は基本的に明朝体を使いますが、ウェブ媒体はゴシック体を使った方が読みやすくなります。
    サブヘッドなどで明朝体を使って文字にリズムをつけることはありますが、その場合はフォントサイズを本文より大きくし、さらに太文字(ボールド)にするなどして文字をはっきり見やすくする必要があります。
    ワードプレスなどで制作する場合、テーマにもよりますが、基本的にはゴシック体になってると思います。そのため、明朝体にしたいと思った箇所の字体を serif 体にすれば、日本語の明朝体扱いになります。

    明朝体にしました。

    CSS タグはこちら

    <span style="font-family:serif;">明朝体にしました。</span>
    まとめ
    フォントカラー(文字色):基本は黒より少し明度を上げたグレー。その他、サイトの配色に合わせて 2 パターンほど用意する。
    フォントサイズ(文字の大きさ):本文は 14px 〜 16px ほど。それ以外に 2 パターンほどの大きさを用意する。
    フォントファミリー(字体):基本的にゴシック体を使う。明朝体はアクセントとして使う。

    5. 常に注意を引くきっかけをつくる

    ウェブページを用意しても、見込み客は上から順番に読んでくれるわけではありません。ちゃんと構成に意図があるので本当は順番に読んでほしいのですが、結局は流し読みされてしまいます。
    そのため、流し読みしている見込み客の注意をいたるところで引きつける工夫が必要です。

    サブヘッドを使って注意を引く

    セールスページはいくつかの段落でできていますが、各段落にはサブヘッドライン(サブキャッチコピー)と呼ばれる見出しをつけます。
    この見出しは、ヘッドラインをつくるのと同じ要領で、流し読みしている見込み客の注意を引き、次の本文を読んでもらうためのものです。
    ブラウザのサイズにもよりますが、だいたい 1 画面に 1 段落が収まる感じで、各段落の冒頭にはサブヘッドラインを挟むのが理想的です。
    サブヘッドラインは他の文字よりも大きくデザインを区別して目立たせます。
    またデザインとは異なりますが、このサブヘッドを上から拾い読みするだけでも、なんとなくセールスコピーの内容が伝わるようにします。

    アイキャッチを使って注意を引く

    見出しとは別に、アイキャッチとして写真を使い注意を引きつける方法もオススメです。
    以下のタイプの写真は、人が無意識に注目してしまうため

    • 人の顔
    • 赤ちゃん
    • 動物

    そして、写真は人の目を引くため、その周辺には必ず読んで欲しい重要度の高いコピーを配置します。いわゆるキャプションです。アイキャッチをして、そしてどうしたいのかが大切なわけです。

    パターンを崩して注意を引く

    人は同じようなパターンが続くと飽きてしまいます。つまり、文章がずっと続いたり、同じようなデザインが続くと飽きられて離脱されてしまう可能性が高まります。
    ですので、パターンを崩して見込み客の意識を再びコピーに引きつける工夫が必要です。サブヘッドを配置するのもこのテクニックの 1 つですが、他にも、、、

    • 背景色と文字色のコントラストを変えてみる
    • 文字を中央寄せにしてみる
    • 段落を枠で囲ってみる(ジョンソンボックスなどと呼んだりします)

    などのテクニックがあります。

    図・イラスト・表で説明できないか?

    文章主体のセールスコピーでは何かと軽視されている感じがありますが、文章で説明するよりも図やイラスト、表を使って説明した方が圧倒的に分かりやすい場合があります。
    価格表や取引内容のまとめなどは積極的に表を使って表現しましょう。
    また、商品やサービスをイメージできる写真やイラストは必須ですし、証拠を示すところではグラフを使ってみるのもいいですね。
    何より、文字よりも圧倒的に見てもらえます。

    まとめ

    セールスコピーは “削る作業” なのですが、セールスデザインも同じです。つまり、あれもこれも詰め込みたくなるところをぐっと我慢して、削るのです。
    何か物足りないな、、、と感じるくらいでちょうど良いと思います。余計なデザインをほどこして成約率が落ちることはあっても、上がることはないでしょう。
    ワンカラム構成、配色は 3 つまで、フォントサイズも 3 パターンなど、これらはどれもいかに削ってシンプルにできるか、を考えた結果です。それが成約率の高いデザインだと過去の広告デザイナーたちがテストして検証してくれているので、エゴを挟まずに素直に従いましょう。
    何か新しいアイデアを閃いても、まずはテスト。デザインの良し悪しは売れるかどうかが決めます。お客さんに判断してもらい、最も成約率の高いランディングページを目指してください。

    参考資料・参考記事

  • なぜクリエイティブは不要なのか?売れないホームページが陥っている5つの間違い

    「セールスデザイン」という言葉を聞いたことがありますか? 読んで字のごとくセールスのためのデザインです。
    特に広告のデザインにおいて、反応率の高い広告をつくるためのデザインを「セールスデザイン」と呼んでいます(ぼくが勝手に呼んでいるだけかもしれませんが……)。
    セールスデザインはクリエイティブなデザインとは異なります。目的は売ることです。なので、時にはカッコ悪い、ダサい、センスがないと感じてしまうデザインになるかもしれません。ですが、目的が売ることなのでそれでいいのです。
    実は広告の反応を決める要因の中でデザインの重要度は低いと言われています。デザインよりも重要な成功要因はリスト(誰に見せるか)や広告の訴求、オファーです。しかし、全く無視していいわけでもありません。
    最低限、押さえておいた方がいいポイントを押さえ、デザインが悪い方に影響して売れない広告やウェブサイトになってしまわないようにしましょう。
    では、その最低限押さえておいた方がいいポイントにはどんなものがあるのでしょうか?

    セールスデザインの必要性

    広告とは言っても、ここでは特にウェブサイトやウェブページのデザインについて説明していきます。
    中でも特に、ランディングページやセールスページ、セールスレターと呼ばれる販売に特化したウェブページ。または集客や問い合わせ、資料請求で新規見込み客を獲得するためのウェブサイト(いわゆるホームページも含む)などのウェブデザインについてです。
    とは言え、すべてのビジネスにおいて集客・セールス(販売)は必須です。見込み客を獲得し、顧客を維持しなければいけません。ビジネスにインターネットを取り入れようとした場合、ただ「認知」してもらえればいい、とはいきません。
    一部の大企業ならいざ知らず、中小企業に必要なウェブサイトの目的はウェブサイトへの訪問者に行動を起こしてもらうことです。認知度アップやイメージアップを目的とするのは間違った判断です(やりたくなる気持ちは分かりますが……)。
    つまり、セールスデザインは、ウェブデザインやインターネットマーケティングの基本として必要な要素なのです。

    セールスデザインの判断基準とは?

    ほとんどの人にとってデザインとは見た目のことなので、感覚的な判断をしてしまいます。そのため、何が良くて何が悪いのか、どのデザインを採用すべきでどのデザインは修正すべきなのかよく分からないままです。
    最終的にはセンス、となってしまいます。
    ですが、セールスデザインの目的はシンプルで、ただ売れるかどうかです。そのサイトから反応があるかどうかです。
    ダイレクトレスポンス広告の場合(つまり全てのウェブ広告)は、明確に数字が分かりますので判断も簡単です。成約率の高いデザインが正解で、成約率の低いデザインが間違い、となります。

    ※成約率とは、広告へのアクセス数に対する、広告のゴール達成の割合のこと。例えば、資料請求がゴールのウェブサイトの場合、そのサイトに 10000 アクセス集まると 10 件の資料請求があった場合、成約率は 0.1% となる。

    ほぼ全てのウェブサイトも何か目的があってつくられていますので、その目的を達成できているデザインが正解で、達成できないデザインが間違いなのです。

    エゴかゴールか、クリエイティブかセールスか

    ですが、私たちはどうしてもかっこよさとか、クリエイティブさとか、インパクトなどを広告やウェブデザインに求めます。
    しかし、それは結局のところ販売者やデザイナーのエゴでしかありません。自分が納得できるか、自分が満足できるかが基準となっているだけです。視点が自分です。自分の密度が濃すぎます。
    そもそもお客さんにとってデザインはどれほど重要でしょうか? ウェブサイトに訪問する目的が何なのかを考えれば、デザインが果たす役割は決して見た目ではないことが分かります。
    つまり、お客さんにとって優しい設計がされているか、ということです。
    悪質な商品を売っているというケースは除いて、まともな商品・サービスを提供しているなら、お客さんにとって最も価値があることは、あなたの商品やサービスでお客さんの悩みや問題を解決してあげることです。それを果たすのがセールスという行為であり、全てのウェブサイトやインターネットマーケティングで扱われるレスポンス広告のゴールでもあります。
    そのゴールを達成するために、ウェブサイトがおしゃれがどうかは関係ありません。おしゃれかどうか、クールかどうか、かっこいいかどうかではなく、お客さんが迷わず行動できるかどうかです。
    そこに販売者やデザイナーのエゴを挟む必要性はないのです。ウェブサイトや広告は自分や自社を表現する場ではないからです。
    お客さんは自分にとってメリットや興味があれば行動を起こすし、魅力的な商品・サービスだと感じれば購入を決断するだけです。しかし、必要ないと思えばページを閉じるか戻るボタンをクリックして、2 度とあなたのサイトには戻ってこないでしょう。

    審査員はお客さん

    クリエイティブなウェブデザインや広告というのももちろん存在します。認知度やブランドイメージの向上などが目的です。ですが、なかなか達成されたかどうかの計測が難しい目的でもあります。さらに、認知度が上がりイメージアップを図れたからといって、売上が上がるかどうかは分かりません。
    このような広告は、ある意味芸術の分野に近いかもしれません。広告の賞なるものもありますが、ここでは審査員という偉い人がいて、広告やデザイン、コピーの優劣を評価します。
    ですが、セールスデザインにおいては審査員からの評価など一銭の価値もありません。審査員はお客さんです。お客さんが選んでくれれば優れていると判断できる、それだけです。
    Apple 創業者のスティーブ・ジョブズはデザインについて次のように語っています。

    デザインというのはおもしろい言葉だ。外観のことだと思う人もいる。本当は、もっと深いもの、その製品がどのように働くかということなんだ。マックのデザインというのは、単にどう見えるかの問題ではない。もちろん、そういう面もあるけどね。でも一番大事なのは、どのように働くかということだ。
    出典:スティーブ・ジョブズ 驚異のプレゼン(日経BPマーケティング/2010)

    製品のデザインのことについて言及しているのですが、セールスデザインとも通じるものがあるように思います。つまり、お客さんがどのような体験するのかを大切にしていることが感じ取れます。自分のエゴや重要感を満たすためにデザインを追求してはいないということではないでしょうか。

    やってはいけないウェブデザイン 5 つの間違い

    では実際に売れるデザインにするにはどのような点に注意したらいいのでしょうか? 売れるデザインのポイントをお伝えしようと思いますが、その前に、ウェブデザインでやってしまいがちな致命的な間違いを 5 つお伝えします。

    間違い1. じっくり時間をかけてデザインする

    つまり時間をかけずにさっさとデザインのフェーズを終わらせるのが正解です。
    インターネットはユーザーからの反応がすぐに分かるのが大きな特徴です。広告を出せばすぐにウェブサイトにアクセスを集めることができ、実際に訪問者が狙い通りの行動を起こしてくれるのかどうか判断できます。
    反応が分かれば、そのウェブサイトが良いのか悪いのか分かります。
    つまり、さっさと判断してもらって改善フェーズに移行した方がいいのです。
    例えば時間とコストかけてランディングページを作り込んでみても、実際にリリースしたら鳴かず飛ばずだった、なんてことになる可能性は大いにあります。そしたら時間も無駄になりますしランディングページの制作費が単なる無駄遣いになってしまいます。
    ウェブサイトはむしろリリースしてからが重要です。解析して分析して改善する。PDCA サイクルを回して反応率を高めていくフェーズが重要です。
    ですので、あまりこだわりすぎず、完璧主義を捨て、さっさと公開しましょう。

    オフライン広告も同じく、まずは反応を確かめるのが正解

    ウェブサイトやランディングページに限らず、チラシや DM などのダイレクトレスポンス広告の場合、やはりすぐに反応を確かめるのが正解です。
    実際に見込み客に見てもらって反応を確認し、そのフィードバックを元に改善して次の広告をテストする。この流れを繰り返して成約率の高い広告をつくっていきます。
    お客さんに見せる前にあれこれ考えても、その悩みは杞憂に終わるでしょう。なぜなら、いくら考えても答えは出ないからです。答えはお客さんが教えてくれます。もちろん、最低限反応の取れる広告としてのクオリティは担保したいですが……。
    しかし、誤植のある広告とない広告でテストした結果、誤植のある広告の方が成約率が高かったというテスト結果もあるくらいです。綺麗にデザインされたチラシより、手書きで書きなぐったチラシの方が成約率が高いというテスト結果もあります。
    あまり細かい部分に目くじらを立てずにどんどんお客さんからの反応をもらうようにしましょう。

    まとめ
    セールス型のウェブサイト、セールス型のウェブページの良し悪しを判断するのはお客さん。あまり時間をかけ過ぎず、お客さんの反応を確認することを優先しよう。

    間違い2. パクらない

    つまりパクるのが正解です。
    一般的に、クリエイティブな世界ではパクることは悪だと思われています。クリエイターは自分のセンスや個性を発揮することに価値を置いていて、他人のデザインをパクってデザインしようものならバッシングの嵐でしょう。
    ですが、セールスデザインの場合この考えは捨てましょう。
    売れる広告の文章(セールスコピー)は、過去にうまくいった広告のサンプルである「スワイプファイル」を真似てつくります。つまり、創造性や個性を発揮して言葉を紡ぐのではなく、すでにうまくいっている文章構成を真似するのがポイントです。
    これと同じように、セールスデザインも真似をすることが失敗しないポイントです。
    うまくいっている広告のレイアウトやデザインをそのまま真似てください。売れているデザインなのですから、上手くいく可能性が高いと判断できます。
    わざわざ時間をかけてオリジナルでデザインする必要はありません。2 つめの間違いでも言ったように、さっさとリリースして見込み客からの反応を確認した方が圧倒的にマシです。

    真似をする際の注意点

    しかし、もちろん権利に触れるようなパクリ方はアウトです。著作権とか商標とか。
    ただレイアウトに関してはそのまま同じで大丈夫です。むしろレイアウト・構成こそが重要で、そのレイアウト・構成だからこそ売れているはずです。訪問者が迷わずに購入や問い合わせまでたどり着けるように設計されているはずなので、それは真似しましょう。
    細かいデザインに関しても、もちろん画像とか写真をそのままパクったら著作権違反ですが、文字の大きさ、アクセントカラーの使い方、配色、商品画像の見せ方など、できる限りアイデアをいただくようにしましょう。
    例えば、ヨドバシ.com は完全に Amazon のウェブサイトをパクっています。レイアウトなんてそのまんまです。しかし、それでいいのです。むしろそれがいいのです。1 から使い方を覚えてもらう必要がなく迷わせない。本当にユーザーにとって親切な設計だと思います。
    ヨドバシ.comウェブサイト
    参考:ヨドバシ.com
    ただし、真似する対象のデザインには気をつけてください。ほとんどのデザインはクリエイティブなデザインで、セールスデザインとは程遠いものです。参考にはならないものばかりです。エゴの少ない売れている広告やウェブサイト、ランディングページのデザインを探してみてください。

    まとめ
    セールス型のウェブサイトにオリジナリティやクリエイティビティ、センスや感性を求めても時間の無駄。自分のエゴを出す場ではないので、すでに結果の出ているサイトのレイアウトやデザインを真似してさっさとお客さんからの反応をもらおう。

    間違い3. 文字が読めないデザインにする

    つまり、文字の読めるデザインにしてください。
    当たり前のようですが、これができていないデザインが多いです。セールスというゴールより、クリエイティブというエゴを優先するとそうなります。
    例えば次の 2 つの文字を比べてみてください。どちらが読みやすいでしょうか?
    読みやすさは?
    文字が読めないということは、お客さんが商品・サービスについて理解できないということです。理解できないということはお金を払わないということです。
    セールスデザインの目的は売ることでした。では、お客さんは訳のわからないものにお金を払おうと思うでしょうか? 不安感を抱えたまま申し込もうとするでしょうか?
    人は納得してから行動したいのです。問い合わせをするにしても資料請求をするにしても、見積もり依頼をするにしても無料メルマガに登録するにしても、ほんの些細な分かりにくさがお客さんの行動を躊躇させてしまいます。
    その壁を取り除く道具は言葉しかありません。結局は言葉で伝えるしか方法はないのです。なぜなら、人間は全てのことを「言葉」を通して理解するからです。
    ですので、文字が読めないのはセールスデザインにとって致命的な欠陥になります。

    視認性・可読性・判読性を損なわないデザインを

    印象の話で申し訳ないですが、かっこよさやおしゃれさを追求すると文字が読みにくくなるケースが多いように思います。
    例えば、画像の上に文字を重ねるデザイン。よく見ると思いますが、果たして読みやすいでしょうか?
    例えば、メニューを英語表記にする。業界によっては当然のように使われていますが、果たして簡単に理解してもらえているでしょうか?
    文字の使い方については、視認性・可読性・判読性を意識する必要があります。
    視認性とは、文字として確認できるかどうかのこと。例えば次の 2 つの文字を比べると、左は視認性が高いデザイン。文字と背景のコントラストがはっきりしています。一方右は視認性が低いデザイン。文字と背景の色が同化しつつあり、読みにくくなっています。
    視認性
    可読性とは、読めるかどうかのこと。例えば次の 2 つの文章を比べると、左は可読性が高いデザイン。右は可読性が低いデザインです。文字として認識はできますが、小さいため読みにくくなっていますよね。
    可読性
    判読性とは、意味を判断できるかどうかのこと。濁点なのか半濁点なのか、文字としてではなく意味として伝わるかどうかなどのことです。
    ちなみに、視認性・可読性・判読性の違いや文字の読みやすさのロジックについては、こちらの記事がとても分かりやすかったです。

    記号の使い方も注意! その記号は理解されているか?

    文字も記号ではありますが、もっと象徴度の高い記号ってありますよね。
    例えばハートマーク。心臓を表したり心を表したり、恋愛を表したり好きという気持ちを表したり、文脈によって解釈も幅広くなる特徴があります。
    ウェブサイトでもこのような記号をよく見ると思います。
    ハンバーガーメニュー
    例えばこれはハンバーガーメニューと呼ぶそうで、グローバルメニューの表示/非表示を切り替えるボタンとして、主にモバイル向けウェブサイトやスマホアプリのデザインで使われているのをよく見ると思います。
    しかし、このメニューアイコンが本当にクリックされるのかどうか、ちゃんとテストをしてくださった方がいます。そのテスト結果によると、、、最もクリックされるのは
    Menu + ボーダー
    だったのです。

    参考:Mobile Menu AB Tested: Hamburger Not the Best Choice?
    日本語圏の場合、「Menu」と書くのか「メニュー」と書くのか検証が必要かとは思いますが、少なくとも記号を使うときはユーザーにどのように認識されるのか注意しないといけません。
    とか言っておきながら、このサイトのテーマもモバイルで表示させるとハンバーガーメニューになるんですが、、、。

    まとめ
    お客さんを行動させるには言葉の力が必要。文章や広告コピーをデザインの犠牲にしてはいけない。

    間違い4. 事業紹介目的で名刺代わりのウェブサイトをつくる

    つまり、会社案内、事業紹介を目的としたウェブサイトをつくってもお金の無駄だということです。
    ウェブサイト制作に入る前に、、、まずはサイトのゴールを明確にしましょう。
    おそらくゴール設定は誰でもすると思いますが、ウェブサイトをつくるならそれがマーケティング全体の中でちゃんと売上を上げてくれる仕組みとして機能しないと意味がありませんよね?
    認知度アップとかブランドイメージ向上とか話題性獲得とか、そんな自己重要感にまみれた目標を設定せずに、しっかり売上を上げることをゴールにしましょう。

    オファーを用意する

    しかし、多くのサイトがウェブサイト単体として何を目的にするかしか考えていませんので、マーケティング全体の中で役に立たないのです。
    ですので、マーケティングの設計から考えてウェブサイトを用意する必要があります。
    インターネットでうまくいくマーケティングは、今も昔もダイレクトレスポンスマーケティングと決まっています。では、ダイレクトレスポンスマーケティングの観点から見たウェブサイトの目的は何でしょうか?
    それは、
    見込み客のリストを集めること
    です。
    一般論としてですが、中小企業や個人事業者はこれをゴールに設定した方がいいでしょう。
    そしてそのために必要なことは【オファー】です。サイトに訪問してくれた方がメールアドレスや個人情報を登録してもらうだけの価値を感じるオファーです。

    ウェブサイトを活用したマーケティングの全体像とは?

    ダイレクトレスポンスマーケティングを活用してインターネットで成功するなら、以下のマーケティングの流れを組み立ててください。
    DRMの流れ

    HP = ホームページ(ウェブサイト) LP = ランディングページ SP = セールスページ

    ウェブサイトはマーケティングプロセスの入り口としての役目を果たします。

    ダイレクトレスポンスマーケティングのプロセス
    ① アクセスを集める
    ② リストを集める
    ③ 見込み客とコミュニケーションを取る
    ④ 商品・サービスを販売する
    ⑤ ①から④を繰り返す

    マーケティングの記事ではないので簡単に終わらせますが、まずは無料オファーや低価格商品を購入してもらうなどしてリスト集めをします。そしてメルマガなどで見込み客にセールスプロモーションを仕掛けていき、最後は販売専用のセールスページで売ります。
    このようなマーケティングのプロセスを理解せずにウェブサイトをつくっても、宝の持ち腐れなので絶対にやめましょう。

    まとめ
    ウェブサイトの目的は売り上げを上げること。顧客を獲得し顧客を維持するために用意するのが正解。マーケティングの仕組みの一部としてウェブサイトを活用しよう。

    間違い5. スマホ対応にしない

    ウェブデザインに限った話ですが、つまりスマホ対応は必須ということです。
    次のグラフを見てください。
    スマホ利用率の推移
    総務省の調査によると、平成 26 年にはスマートフォンの利用率が全体で 6 割超えています。フィーチャーフォン(いわゆるガラケー)とスマホの利用率がすでに逆転しているのです。
    さらに、年代別にみると、20 代は 94.1%、30 代が 82.2%、40 代 72.9%、50 代でも 48.6% と、幅広い年代層でスマホの利用率が高まっています。

    モバイル対応しなければ検索順位が下がる

    しかも、Google からは以下のような発表もありました。

    Google では、4 月 21 日より、ウェブサイトがモバイル フレンドリーかどうかをランキング要素として使用し始めます。
    参考:検索結果をもっとモバイル フレンドリーに|Google ウェブマスター向け公式ブログ

    この結果、スマートフォンに対応していないサイトは、検索順位が下がる恐れがあると焦り始めているわけですね。
    ウェブサイトを作る場合は、モバイルでの表示を考えない選択肢はもはやなくなりました。むしろモバイルファーストという考え方も出てきていて、モバイル向けの設計から始めるケースも増えてきました。
    レスポンシブデザインを採用したり、スマホからのアクセスで別デザインのサイトに表示を切り替えるなどの対応は必須となったのです。

    まとめ
    ウェブマーケティングで成果を上げるには、Google の方針は無視できない。結局ユーザーにとって使いやすいサイトをつくることでもあるので、今すぐモバイル向けに表示を最適化しよう。

    売れるデザインが正解

    デザイン(ウェブデザイン)にもトレンドというものがあって、時代が流れるにつれて変化していますが、セールスデザインにおいて優先するべきなのは結果です。
    売れているデザインが正解であって、売れないデザインは間違いです。また、売れているデザインにも当然トレンドや流れがありますので、いつ売れるデザインが売れないデザインになり、売れないとされていたデザインが売れるデザインになるかも分かりません。
    現在はワンカラムが売れるとされていますが、いつかは変わるかもしれません。
    ですので、デザインも常にテストしていくことが大切です(正直ここまで回らないケースが多いけど、、、)。

  • 商品販売用のランディングページを作成しよう-売れるプレゼン用ページの作成法-

    商品を売るためには、売るという目的に特化したページを作成すべきです。一般的なサイトではたくさんリンクが貼ってあります。場合によっては別のサイトへ飛ばされたりもします。たくさんの商品が1つのページに並べられていたり、商品を買うために何ページもクリックして移動しなければならなかったり、、、。
    同じサイト内であっても、別のページに飛ばされたりすると離脱率が上がり売上が下がります。これはすでに実証されている事実です。なので、商品(サービス)を売るページは、できるだけ無駄なリンクを削除し、シンプルに1つの商品を説明する専用ページである必要があります。
    WordPress には固定ページという機能があります。この固定ページは商品紹介ページを作成するのに適していますが、グローバルメニューやサイドバー、フッターメニューなどを排除することができません。
    Twenty Twelve を使うと全幅テンプレートというのがあり、グローバルメニュー以外の無駄なリンクを排除することができます。しかし、それでもグローバルメニューやヘッダーまでは基本的に排除できません。そこで、ヘッダーもフッターもサイドバーも排除したセールス専用のワンカラムのテンプレートを作成したいと思います。

    つまりセールスレターやランディングページを作ろう! ということ

    このページの呼び方はプレゼンページとかセールスページとか勝手に名付けていますが、決して販売目的に限りません。一般的な言い方としては、ランディングページ・セールスレターなどでしょうか。見積もり依頼、資料請求、サンプル請求、予約など、見込み客に何かアクションを起こしてもらうためのページということです。
    こういった目的のページは、ワンカラムにするというのがセオリーです。インターネット上で、お客さんを獲得したいと考えている全ての人は、会社紹介や事業内容を説明した一般的なホームページとは別に、このようなセールスページを用意するようにしましょう。そして、売りたいものはそこで売るのです。

    WordPressでは異なるレイアウトのページを表示させることができる

    例えばこちらのページ。このページは無料の PDF レポートを紹介しているページですが、WordPress の固定ページを使って作成しています。Twenty Eleven のサイドバーテンプレートです。
    このサイトではサイドバーテンプレートを使用すると、他とはレイアウトが変わります。ヘッダーはなく、フッターも別のパターンになります。サイドバーもこのテンプレート専用の内容になっています。
    Twenty Eleven には、元々サイドバーテンプレートやデフォルトテンプレート、ショーケーステンプレートといった、レイアウトの違うテンプレートが用意されています。この内サイドバーテンプレートを応用して、レポートの請求という目的のために無駄を省いたシンプルなページを作成しました。

    なぜ、固定ページを使うのか?

    それは編集がしやすいからです。WordPress のエディタを使えるので、文字の入力や画像の挿入が簡単にできます。タグ打ちが苦手な人でもビジュアルエディタを使えば、文字色や太さなどの変更も簡単です。そのため固定ページを使うことにしました。

    手順

    1. 必要なファイルを複製する
    2. テンプレートファイルを書き換える

    たったこれだけです。これだけで、無駄な情報を削除したセールス専用ページ(プレゼン専用ページ)を作成することができます。ランディングページにも使えます。WordPress のデフォルトテーマである Twenty Eleven を使って作成したページはこのような感じです。

    1.必要なファイルを複製する

    テーマは Twenty Eleven を使用します。まずはセールスページ用のテンプレートファイルを作成しましょう。固定ページ用のテンプレートを追加する方法は、こちらの「固定ページのテンプレートにオリジナルを追加・作成する方法」にまとめています。
    簡単にまとめておくと、以下の3つのファイルを複製して、ファイル名を変更します。例えば、sideber-page.php を複製して、ファイル名を sales-page.php などとします。そして、これらのファイルを子テーマにアップすれば OK です。

    親テーマのファイル 子テーマにアップ
    sidebar-page.php 複製してファイル名変更 → sales-page.php
    header.php 複製してファイル名変更 → header-2.php
    footer.php 複製してファイル名変更 → footer-2.php

    2.テンプレートファイルを書き換える

    複製したファイルを書き換えます。3つのファイルがありますので、それぞれ以下のように書き換えてみます。

    (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 の内容が適用されるようになります。
    今回は、これら2つのファイルのほとんどの記述を削除したので、実際は本文の内容くらいしか表示されません。また、お好みで好きなようにヘッダーとフッターの表示をカスタマイズすることもできます。その時は PHP とかあまり気にせず、HTML の要領でタグや文字を記述すれば OK です。

    セールスページのスタイルシートも変更したい場合

    ページ専用のスタイルシートを適用したい場合、いくつか方法があります。ぼくがよく使う方法は、そのページ専用の外部スタイルシートを読み込ませる方法です。サーバー上に別の CSS ファイルを用意して、そこで一括変更してしまおうというわけです。指定したページ以外のスタイルを変えることなく、そのページデザインの変更が可能です。
    方法についてはこちらの「WordPressでページごとに別のスタイル(外部CSS)を適用させる方法」にまとめていますので、チェックしてみてください。

    WordPressでページごとに別のスタイル(外部CSS)を適用させる方法

    タイトルを非表示にしたい場合

    ページタイトルは以外と邪魔になります。ページの冒頭、いわゆるヘッドライン(キャッチコピー)の部分に表示させたい言葉というのは、最も重要な部分です。理由は割愛しますが、この最も重要な部分を最も効果的に見せるためには、ページタイトルをそのままヘッドラインにするのは都合が悪いです。自由度が制限されるからです。
    ですので、ページタイトルは非表示にして、ヘッドラインは本文に直接書くことをオススメします。
    セールスページでのタイトル設定
    タイトルを非表示にする方法には次の2つを押さえておきましょう。

    1.スタイルシートで display: none; を指定する

    スタイルシートを使って表示を隠してしまう方法です。上記の「ページごとにスタイルを適用させる方法」を使って、まずはセールスページ専用の CSS ファイルを用意します。そこに以下のように書けば OK です。

    .entry-title {
    display: none;
    }

    2.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 に記述されているタイトル部分を削除する

    1.で作成した 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 カスタマイズの応用テクニックとして覚えておくといいと思います。