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

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

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

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

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

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

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

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

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

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

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

という流れがスムーズにできるレイアウトなのです。

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

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

という流れがスムーズにできるレイアウトなのです。

商品価格についても、すぐに見込み客に知られてしまってはいけません。じっくり価値を説明し、価格の妥当性を説明した上でプレゼンしないといけません。でなければ高いと思われてしまいます。
https://presentnote.com/11-technics-show-the-price/
そのため、購入ボタンは全てのプレゼンが終わったあと（主にページの最下部）に配置しましょう。

ランディングページでサイドバーを固定表示させるテクニック

これは CSS をちょっといじれば簡単に実装できます。

position: fixed;

これをサイドバーの id にでも指定すれば、指定した位置に常に固定表示されます。追尾型のサイドバーを用意するケースもありますが、そちらは jQuery などを使って実装できます。

2. ランディングページの横幅の決め方

ランディングページやセールスページの横幅はいくらがいいのか？　どのような基準で横幅を決めればいいのでしょうか？
1 つはセールスコピー本文の読みやすさです。あまりにも大きく左から右へ目線を動かさないと読めないような幅では、可読性を損ない離脱率を高めてしまうでしょう。なので、目線はできるだけ上下運動に抑えられる幅にするのがよいと思います。

そういう点では、重要なのはページの幅よりもコンテンツ部分の幅です。
実際に成約率の高いセールスページの横幅を調べてみました。

サイトの幅もコンテンツ部分の幅も様々ですね。
ただ、冒頭 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）と呼ばれています。
ウェブサイトだけではなくスマホアプリのデザインにも使えるガイドラインですが（むしろスマホアプリのデザインのためのガイドラインだと思われ）、そのガイドラインの中に色のスキームも提供されています。
セールスデザイン的にはとても使いやすそうなのでぜひ参考にしてみてください。

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

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

フォントカラー

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

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

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

フォントサイズ

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

字体（フォントファミリー）

字体は大きく 2 パターン、ゴシック体か明朝体です。
アルファベットの場合はサンセリフかセリフ体です。

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

CSS タグはこちら

<span style="font-family:serif;">明朝体にしました。</span>

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

参考資料・参考記事

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

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

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

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

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

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

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

審査員はお客さん

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

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

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

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

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

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

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

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

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

間違い2. パクらない

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

真似をする際の注意点

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

参考：ヨドバシ.com
ただし、真似する対象のデザインには気をつけてください。ほとんどのデザインはクリエイティブなデザインで、セールスデザインとは程遠いものです。参考にはならないものばかりです。エゴの少ない売れている広告やウェブサイト、ランディングページのデザインを探してみてください。

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

つまり、文字の読めるデザインにしてください。
当たり前のようですが、これができていないデザインが多いです。セールスというゴールより、クリエイティブというエゴを優先するとそうなります。
例えば次の 2 つの文字を比べてみてください。どちらが読みやすいでしょうか？

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

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

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

可読性とは、読めるかどうかのこと。例えば次の 2 つの文章を比べると、左は可読性が高いデザイン。右は可読性が低いデザインです。文字として認識はできますが、小さいため読みにくくなっていますよね。

判読性とは、意味を判断できるかどうかのこと。濁点なのか半濁点なのか、文字としてではなく意味として伝わるかどうかなどのことです。
ちなみに、視認性・可読性・判読性の違いや文字の読みやすさのロジックについては、こちらの記事がとても分かりやすかったです。

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

文字も記号ではありますが、もっと象徴度の高い記号ってありますよね。
例えばハートマーク。心臓を表したり心を表したり、恋愛を表したり好きという気持ちを表したり、文脈によって解釈も幅広くなる特徴があります。
ウェブサイトでもこのような記号をよく見ると思います。

例えばこれはハンバーガーメニューと呼ぶそうで、グローバルメニューの表示/非表示を切り替えるボタンとして、主にモバイル向けウェブサイトやスマホアプリのデザインで使われているのをよく見ると思います。
しかし、このメニューアイコンが本当にクリックされるのかどうか、ちゃんとテストをしてくださった方がいます。そのテスト結果によると、、、最もクリックされるのは
Menu + ボーダー
だったのです。

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

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

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

オファーを用意する

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

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

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

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

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

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

ウェブデザインに限った話ですが、つまりスマホ対応は必須ということです。
次のグラフを見てください。

総務省の調査によると、平成 26 年にはスマートフォンの利用率が全体で 6 割超えています。フィーチャーフォン（いわゆるガラケー）とスマホの利用率がすでに逆転しているのです。
さらに、年代別にみると、20 代は 94.1％、30 代が 82.2％、40 代 72.9％、50 代でも 48.6％ と、幅広い年代層でスマホの利用率が高まっています。

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

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

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

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

売れるデザインが正解

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

文字のサイズ

ウェブコンテンツの文字サイズは 3 段階くらいにしましょう。基本の文章に使う文字サイズは 14 px 〜 16 px くらいがよいとされています。迷った場合は、小さくするくらいなら大きくした方がいいです。文字サイズが大きいとかっこわるいですか？　それでいいんです。読みやすさを優先してください。
それとは別に 2 パターンくらい使い分ければ OK です。ベーシックなところで言うと、タイトル文字のサイズと本文中に使う見出し用のサイズです。
なんで 3 つくらいまでに抑えた方がいいかというと、素人が色んな文字のサイズを使うと、バランスが悪くなって読みにくくなるからです。ウェブのコンテンツは紙媒体のコンテンツとは違い、集中しにくいという研究結果があります。本なら 1 時間ぶっ続けで読めても、ウェブ上の文章を 1 時間読み続けるのって、結構きつくないですか？
そのため、全体的な文章のスタンスとして、読みやすさには気をつけるようにしましょう。

文字のスタイルはゴシックで

文字のスタイル、CSS で言うと font-family と呼ばれるものの設定は、基本ゴシック体にしましょう。文字のスタイルには主にゴシック体と明朝体があります。紙媒体は明朝体の方が読みやすく、ウェブ媒体はゴシック体の方が読みやすくなります。
ですので、基本はゴシック、たまに変化を付けたい部分（見出しなど）は明朝を使うなどにしましょう。テーマにもよりますが、WordPress を使っていれば、基本はゴシックで指定されていると思います。少なくとも Twenty Eleven はゴシック系です。

文字の色は

文字の色は基本 3 色までにしておきましょう。本文は黒（濃いめのグレーも可）。強調したい文は赤、＋α の三色です。背景は白で、基本の文字色が黒（濃いめのグレー）です。背景が白だという前提で、読みやすい色を選ぶようにしましょう。
また、素人が下手にたくさんの色を使うと、サイトが見にくくなります。基本は 3 色で済ませてください。強調したい部分が強調されず、注目して欲しい部分へ注目させることができなくなります。
よく、大事な言葉に色を付けるときに、統一感なく付けているサイトを見かけます。ここは赤で強調してるのに、あっちはピンク、こっちは緑、みたいな感じです。結局どこか大事か伝わらなくなります。そもそもちかちかして目に悪い。つまり読みたくなくなります。
メッセージが伝わらない、イコールあなたのサイトはわけの分らないサイトということです。わけの分らないサイトから、商品を買うお客さんはいません。

文字色と背景の関係

また、サイトによっては、基本の文字自体が青とか紫とか黒背景に白になっているところもあります。これもやめた方がいです。サイトの雰囲気によっては、ありなんじゃないかと思うかもしれません。しかし、人が一番読みやすいのは白背景に黒文字（若干グレーも可）なんです。これはもう覆りません。
コントラストを付ける意味で一部のバナーなどは、赤にしたり、背景黒の白文字にしたりはありですが、ベース（つまり記事の部分）は白背景に黒文字でいきましょう。見た目を気にしてお客さんを逃がす、売上を落とすなんてのは本末転倒です。

行数が多くなりすぎないようにする

紙媒体の文章と違って、ウェブ媒体の文章は段落が固まると非常に読みにくくなります。目安はだいたい PC のサイズで 5 行以内に収めましょう。スマホやタブレットで見ると行数が増えますので、それも考慮すると、PC で閲覧したときは、若干少ないかなと思うくらいで OK です。
たま〜に、ごくたま〜に何ですが、1 ページのコンテンツが全て改行なしに文字が敷き詰められているサイトを見かけます。改行の仕方をご存知ないのでしょうか？　さすがにビジネス用のサイトでは見かけた記憶はないですが、行数にもちゃんと気を配るようにしましょう。
また、行数が 1 行ばかりになるように改行しているサイトも逆に読みにくくなります。個人のブログとかではよく見ますよね。そういう場合はいいんですが、ビジネス用のサイトだと、行の取り方でも文章の信頼度が変わりますので気をつけてください。

改行の位置に気をつける

改行位置については、もう 1 点重要なポイントがあります。それは、文章の途中で改行はしない、ということです。改行する場合は、句点（。）にしましょう。
ウェブ上の文章は、それを見る媒体によって表示に差が出てきます。特に改行の影響が出るのはブラウザの幅です。例えば、次の表示を見比べてみてください。

ブラウザの幅は、使っているパソコンやスマホ、タブレットの画面の横幅が影響してきます。そのため閲覧媒体（デバイス）によって、横幅に納まる文字数にも差が出てくるのです。これを意識していないで、自分がエディタを使っているデバイスで見える感覚のみで文章を書き、改行をすると、とてつもなくみにくいコンテンツが出来上がる可能性があります。
読点（、）や言葉の区切りでむやみやたらに改行せずに、一文はまとめておきましょう。また、これと同じ理由でスペースの使い方も気をつけましょう。

レスポンシブデザインに対応できているかどうか、各デバイスごとにどのように見えるのか、ということをものすごく簡単にチェックできるサイトです。使い方もものすごく簡単で、右上にチェックしたいサイトの URL を入力して、【View】ボタンをクリックするだけ。あとは、ヘッダーメニューにあるデバイスのアイコンをクリックすると、そのデバイスでの表示が確認できます。
スマホ、タブレットがそれぞれ縦と横の 2 パターン。PC が 1 パターンですね。スマホを持っていなくても！　iPad を持っていなくても！　これでどんな風に表示されるのかチェックすることができますね。レスポンシブデザイン対応を考えているなら、必須のツールだと思います！
それでは、また。

header.phpの構成をなんとなくつかんでおく

グローバルメニューを一番上に持って来たり、タイトルと画像の間にメニューを挟んだり、とにかくヘッダー部分のパーツのレイアウト表示を入れ替えるためには、php の構成をつかんで、それぞれ該当箇所を入れ替えれば OK みたいです。
というわけで、header.php の構成を見てみましょう。
確認方法は Firefox の Firebug なんかを使って、CSS の id、もしくは class を確認し、それが指定している箇所をheader.php から見つけ出す、という単純作業です。
ヘッダーパーツの id の指定は、CSS についてまとめたこちらの記事でも紹介しておりますが、改めてここでも紹介しておきます。

WordPressテーマTwenty Elevenのヘッダーに関するCSSのまとめ

【 header.php 】を開いて、これらのidに該当するの範囲を確認します。必要なのは 70 行目辺りの<body>タグ以降です。

<body <?php body_class(); ?>>
<div id="page" class="hfeed">
<!-- ■ここからヘッダー全体を指定している【 #branding 】が始まっています -->
	<header id="branding" role="banner">
<!-- ★ここからヘッダーのタイトルや検索窓部分のスペースを指定している【 #hgroup 】が始まっています -->
			<hgroup>
				<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
			</hgroup>
<!-- ★ヘッダーのタイトルや検索窓部分のスペースを指定している【 #hgroup 】はここまで -->
<!-- ヘッダー画像に関する記述はここから -->
			<?php
				// Check to see if the header image has been removed
				$header_image = get_header_image();
				if ( $header_image ) :
					// Compatibility with versions of WordPress prior to 3.4.
					if ( function_exists( 'get_custom_header' ) ) {
						/*
						 * We need to figure out what the minimum width should be for our featured image.
						 * This result would be the suggested width if the theme were to implement flexible widths.
						 */
						$header_image_width = get_theme_support( 'custom-header', 'width' );
					} else {
						$header_image_width = HEADER_IMAGE_WIDTH;
					}
					?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
				<?php
					/*
					 * The header image.
					 * Check if this is a post or page, if it has a thumbnail, and if it's a big one
					 */
					if ( is_singular() && has_post_thumbnail( $post->ID ) &&
							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) &&
							$image[1] >= $header_image_width ) :
						// Houston, we have a new header image!
						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
					else :
						// Compatibility with versions of WordPress prior to 3.4.
						if ( function_exists( 'get_custom_header' ) ) {
							$header_image_width  = get_custom_header()->width;
							$header_image_height = get_custom_header()->height;
						} else {
							$header_image_width  = HEADER_IMAGE_WIDTH;
							$header_image_height = HEADER_IMAGE_HEIGHT;
						}
						?>
					<img src="<?php header_image(); ?>" width="<?php echo esc_attr( $header_image_width ); ?>" height="<?php echo esc_attr( $header_image_height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
				<?php endif; // end check for featured image or standard header ?>
			</a>
			<?php endif; // end check for removed header image ?>
<!-- ヘッダー画像に関する記述はここまで -->
<!-- ●検索窓に関する記述はここから -->
			<?php
				// Has the text been hidden?
				if ( 'blank' == get_header_textcolor() ) :
			?>
				<div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>">
				<?php get_search_form(); ?>
				</div>
			<?php
				else :
			?>
				<?php get_search_form(); ?>
			<?php endif; ?>
<!-- ●検索窓に関する記述はここまで -->
<!-- ▲ここからグローバルメニューを指定する【 #access 】が始まっています -->
			<nav id="access" role="navigation">
				<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
				<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
				<div class="skip-link"><a class="assistive-text" href="#content"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
				<?php if ( ! is_singular() ) : ?>
					<div class="skip-link"><a class="assistive-text" href="#secondary"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
				<?php endif; ?>
				<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</nav><!-- #access -->
<!-- ▲グローバルメニューを指定する【 #access 】はここまで -->
	</header><!-- #branding -->
<!-- ■ヘッダー全体を指定している【 #branding 】はここまで -->
	<div id="main">

なるべく分かりやすくなるように、●とか★とか記号を割り振っておいたので、共通する記号に挟まれた部分をカットして好きな場所に貼付ければ、表示位置が変わるというわけです。
ちなみに、検索窓の位置変更は CSS をいじった方が思い通りにいきましたので、ヘッダー部分から検索窓を消したい！　検索フォームなんてじゃまだ！　という場合に、【 header.php 】内の該当箇所を削除すればOKだと思います。
というわけで、あとは該当箇所を入れ替えればいいだけなんですよね。
では実際にいくつか試してみましょう。

グローバルメニューを一番上に持ってくる

まずはグローバルメニューを一番上に表示させる方法です。ブログタイトル部分の上に表示させるわけですね。
グローバルメニューは▲で囲んである部分

<!-- ▲ここからグローバルメニューを指定する【 #access 】が始まっています -->
			<nav id="access" role="navigation">
				<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
				<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
				<div class="skip-link"><a class="assistive-text" href="#content"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
				<?php if ( ! is_singular() ) : ?>
					<div class="skip-link"><a class="assistive-text" href="#secondary"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
				<?php endif; ?>
				<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</nav><!-- #access -->
<!-- ▲グローバルメニューを指定する【 #access 】はここまで -->

こちらを【 <header id=”branding” role=”banner”> 】のすぐ下に移動させればOKです。つまり【 <hgroup> 】の直前ですね。
すると、こんな感じでグローバルメニューが一番上に表示されます。

ブログ上部の余白を消す

グローバルメニューとブラウザの間、というかブログそのものとブラウザとの間にある余白を消して、グローバルメニューを画面上部に引っ付けたい場合、これは CSS の方を書き換える必要があります。
【 #page 】の【 margin 】の top を 0 にすれば OK です。

#page {
	margin-top: 0;
}

これでブログ上部の余白が無くなります。

検索窓を削除してグローバルメニューは真ん中に

次は検索窓を削除します。
これはもう●で囲んでおいた箇所を削除すればいいだけなので楽勝です。

<!-- ●検索窓に関する記述はここから -->
			<?php
				// Has the text been hidden?
				if ( 'blank' == get_header_textcolor() ) :
			?>
				<div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>">
				<?php get_search_form(); ?>
				</div>
			<?php
				else :
			?>
				<?php get_search_form(); ?>
			<?php endif; ?>
<!-- ●検索窓に関する記述はここまで -->

検索フォームを表示させているのは

<?php get_search_form(); ?>

という部分のようなので、これを削除するだけでも大丈夫そうです。
また、

<div class="only-search　〜

から始まっている部分は、ヘッダーを消した際の検索窓がグローバルメニュー内に移動した時の表示を指定しているようです。CSS 側で【 .only-search 】を探すとスタイルの変更が可能です。

グローバルメニューの下の余白を消す

グローバルメニューをタイトルスペースとヘッダー画像の間に持って来たら、グローバルメニューとヘッダー画像との間に微妙な余白ができてしまいました。
これは CSS ではグローバルメニューの下マージン（margin-bottom）に余白が指定されているからのようです。ですので該当箇所のマージンの値を0にすると、グローバルメニューと画像が引っ付いて、余白がなくなります。

#access {
	margin-bottom: 0px; /* デフォルトでは 6px なので、0 や好きな値に */
}

最後はヘッダー画像を一番上、次にブログタイトル、一番下にグローバルメニューの順番で配置してみます

これも単純で★でかこっている部分【 <hgroup> 】をヘッダー画像（）とグローバルメニュー（▲）の間に移動させるだけです。

検索窓は動きませんでしたが、こっちは CSS で好きな位置に表示させれば OK だと思います。

WordPressテーマTwenty Elevenのヘッダーに関するCSSのまとめ

あとは、【 #site-title 】と【 #site-description 】を入れ替えてみると、ブログタイトルとブログの説明部分が入れ替わります。CSS で微妙なレイアウトのずれを調節すれば、だいたいのことは実現できるのではないかと思います。
以上、Twenty Eleven のヘッダーレイアウト変更についてでした。