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 ウェブマスター向け公式ブログ

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

売れるデザインが正解

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

動画を YouTube に公開する方法

ウェブ上で動画を再生できるように、サーバーなどに動画をアップロードします。サーバーにアップロードした場合は動画プレーヤーなどを設置する必要があり手間なので、今回は YouTube を使いたいと思います。
YouTube へのアップロードは簡単です。

１．右上の【アップロード】をクリックします

現在（2014.9）の YouTube は、右上のメニューバーに【アップロード】というボタンがあるのでクリックします。

２．動画をドロップするか、ファイルを選択してアップロードします

アップロード画面に切り替わります。動画ファイルをドラッグ＆ドロップでこの位置に持ってくるとアップロードできます。上矢印のアイコンをクリックするとローカル上のファイルを選択することができます。アップロードには数分かかります。

３．設定画面に移行するので、設定を行う

アップロード中も設定を変更することができます。YouTube 上での動画の加工などもできますが、とりあえず【情報と設定】の部分のみ設定を行います。セールス用の動画なので、それを踏まえて以下のように設定することをオススメします。

基本情報の設定

(1) タイトル

検索結果を意識してタイトルを付けましょう。検索キーワードを盛り込むようにしてください。

(2) 公開設定

全ての設定が終わるまでは「非公開」にしておくといいと思います。完成したら限定公開か公開を選びます。広告出稿する場合は「公開」で。自社のウェブサイト上のみで公開する場合は「限定公開」でも OK です。

詳細設定の設定

(3) コメント

コメントの許可のチェックを外します。コメントは受け付けない方がいいでしょう。【この動画の評価をユーザーに表示する】のチェックも外しましょう。

(4) 配信オプション

【埋め込みを許可】【チャンネル登録者に通知】いずれのチェックも外してください。

(5) カテゴリ

動画の内容に合うカテゴリを選択してください。

(6) 動画の統計情報

【動画再生ページでの動画統計情報を一般公開する】のチェックを外します。
※【収益の受け取り】と【Call-to-Action オーバーレイ 】の設定は必要ありません。

セールスプレゼン動画を埋め込むランディングページの制作

セールスプレゼン動画（動画セールスレター）用のランディングページは、少し独特な作りをします。まずランディングページのようにワンカラムが基本です。そして、レイアウトとしては、ヘッダー部分にヘッドライン。ボディー部分に動画を埋め込み。そして動画の下に購入用の決済ボタンを設置します。
この購入ボタンは動画の再生時間に合わせて最初は非常時にし、価格のプレゼン辺りまで進んだ段階で始めて表示されるようにします。
以下サンプルを元に解説していきます。
＞ サンプルサイト

ヘッドラインで見込み客をその場に滞在させる

ヘッダー部分にはヘッドラインが必要です。このヘッドラインは、ランディングページにアクセスした人をそこに留めさせることが目的です。動画は基本、自動的に再生されるように設定するので、それまでの間が勝負です。「これは自分のためのページだ」と思わせることができるようなヘッドラインをつくりましょう。
ヘッドラインの作り方に関するこちらの記事も参考にしてみてください。

成約率20倍の差を生むヘッドライン（キャッチコピー）を７つのテンプレートで簡単に書く方法

ボディー部分にセールス動画を埋め込み、自動再生させる

セールスプレゼン動画の埋め込みにも一工夫必要です。まず動画はページを開いたら自動的に再生されるようにしましょう。見込み客に判断を委ねてしまったらそれだけで再生されない可能性が高まります。動画の冒頭部分に強力なフックを用意して、そのページから離れようとは思えないようにしましょう。
また、再生ボタン・停止ボタン・再生時間のコントロールバーなどは全て非表示にしましょう。セールスプレゼンテーションを、順番通りに見てもらうことが重要です。セールスの成否を決めるのは、順番なのです。ですので、相手に主導権を握らせるようなことはしないでください。

YouTube の隠しパラメータ

YouTube には、再生方法やコントロールの表示・非表示などをカスタマイズできる隠しパラメータが存在します。これを埋め込みタグに付け加えれば簡単にセールスに最適化された動画をつくることができます。

隠しパラメータの使い方

まず、YouTube の埋め込みタグを取得します。これは YouTube の動画ページの【共有】から【埋め込みコード】をクリックすると表示されます。コピペする前に「動画が終わったら関連動画を表示する」のチェックを外しておきましょう。
埋め込みタグはこのような構造になっています。

<iframe width="560" height="315" src="動画のURL" frameborder="0" allowfullscreen></iframe>

隠しパラメータは、以下のようなつくりになっています。
動画の URL の後に【 ? 】を追記し、その後に追加していきます。複数のパラメータを追加する場合は【 & 】を使ってつなげていきます。

セールス動画制作に必要なYouTube隠しパラメータ5選

(1) 動画を自動再生させる【 autoplay=x 】

(2) コントロールを非表示にする【 controls=x 】

動画の下部にあるコントロールを非表示にするには、【 controls=0 】と指定します。x に以下の値を入れることで、コントロールの表示／非表示を切り替えることができます。デフォルトは表示になっています。

(3) フルスクリーンボタンを非表示にする【 fs=x 】

セールスプレゼン動画のランディングページには、後述の自動出現ボタンを設置します。この自動出現ボタンは購入ボタンです。動画を見続けた人が購入できるようにするボタンを、適切なタイミングで表示させます。
ですが、フルスクリーンにされてしまうと、この自動出現ボタンが隠されてしまい、購入のボタンに気づいてもらえなくなります。それによって離脱してしまうことを避けるために、フルスクリーンにできないようにします。
フルスクリーンボタンを非表示にするには【 fs=0 】と指定します。x に以下の値を入れることで、フルスクリーンボタンの表示／非表示を切り替えることができます。デフォルトは表示になっているので、何も指定しなければ表示された状態となります。

(4) ビデオタイトルを非表示にする【 showinfo=x 】

YouTube 動画では通常、動画の上部にタイトルやアップローダーなどの情報が表示されています。これもセールスプレゼンを集中してみてもらうのに不要な情報なので、非表示にします。【 showinfo=0 】と指定すればビデオタイトルなどが非表示になります。x に以下の値を入れることで表示／非表示を指定できます。デフォルトは表示です。

(5) 動画の再生終了後の関連動画表示を非表示にする【 rel=x 】

YouTube では、動画の再生が終了すると関連動画が表示される機能があります。しかしセールスにおいて、購入ボタン以外の他の動画やページへリンクさせるのは絶対避けなければいけません。なので、この関連動画は非表示にします。
【 rel=0 】と指定すれば関連動画は表示されなくなります。x に以下の値を指定することで、関連動画の表示／非表示を切り替えることができます。デフォルトは表示設定になっています。
またこの設定は埋め込みコードを取得する際に、チェックを外すことで簡単に設定できます。

セールスプレゼン動画 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>

【時間指定】の部分に購入ボタンを表示させたい時間を指定します。指定方法は以下を参考にしてください。

例えば、動画開始後（正確にはページアクセス後なので動画の読み込み時間も含まれます）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 で整えることもできます。

どうしたら、集客できるページが作れるか。ホームページが必要ないと思っている顧客に必要と感じてもらうにはどういうサイトを作ったらよいかが知りたいです。

さて、この質問に対してあなたはどう考えますか？
この質問から察するに、集客したい見込み客はホームページを持っていない人ということでしょう。そして、ホームページが必要と認識してもらい制作の受注につなげたいと考えている。おそらくそうですよね。さて、どうしたらいいでしょうか？

セールスをする前提は、問題に気付いてもらうこと

まず、セールスとは「問題を解決する方法を提供すること」であるとするなら、あなたが見込み客に伝えなければならないことは、ホームページがないことによる問題点です。
しかし、これを聞き入れてくれる前には、まず見込み客が関心のあることから話し始めなければなりません。ホームページがないことによる問題になんて興味ないので、いきなりそんな話をしても響かないのです。
見込み客はどんなことに普段問題意識を持っていて、関心を持っているのでしょうか？　その関心ごとから始めることで、見込み客を集めることができます。ホームページの話をするのは、その次の段階です。

問題を解決する手段として必要性を感じてもらう

その後の展開は、その問題を解決する方法こそがホームページをつくることだと伝えることです。つまり、あなたがしなければならないことは、見込み客が今抱えていて、すぐにでもどうにかしたい問題を解決する手段として、自社のホームページを売ることができないか？　ということです。
では、これを実現するためにはどのように自社のホームページを設計していけばいいのでしょうか？

サイト設計のポイント1
問題解決型のコンテンツサイトにする

まず、ホームページを問題解決型のサイトにするということです。問題を抱えている人は検索エンジンで解決方法を探しますよね。そして検索結果の 1 ページに表示されたサイトを、多くのケースで上位からチェックしていくでしょう。
途中で自分の求めているサイトが見つかれば、それ以降の他のサイトはチェックしないかもしれません。検索キーワードと、コンテンツの充実が必要になります。
もしくは広告を出して、同じように問題解決方法を提供してもいいでしょう。広告を出せば、画面の上位（第一画面と呼ばれるスクロール無しに目に入る部分）に表示させることができます。いずれにしても、まずは見込み客の関心ごとから始めましょう。
ホームページの必要性を訴えるのではなく、今見込み客が抱えている問題を解決できるような内容のコンテンツをつくっていくのがポイントです。

サイト設計のポイント2
個人情報を取得するためのオファーを用意する

次にすることは、見込み客の個人情報を入手することです。そのためには、魅力的なオファーを用意する必要があります。つまり、個人情報をもらうための交換条件です。それを自社のホームページに目立つように掲載するのです。
そのオファーの目的は、それによって見込み客が問題を解決できそうだと感じてもらうことです。実際は、そのコンテンツ自体で解決できるというよりは、ホームページの必要性や、ホームページが無いことの問題点を訴える内容になるわけですが・・・。
そのコンテンツは、価値与えるものであると同時に、見込み客に問題に気付いてもらうためのものというわけです。
このような、個人情報を登録してもらうという 1 つの目的を達成するためのページは、ワンカラムが最も反応が高くなります。ですので、他のページのレイアウトやデザインとは異なるものを作りましょう。雰囲気は同じでありながらも、サイドバーやナビゲーション、他のページへのリンクを排したシンプルなつくりにしてください。

サイト設計のポイント3
サイトのファーストビューに全力を注ぐ

検索結果が上位から順番に見られるように、ホームページも上から見られます。ページを開いた瞬間にぱっと表示されるその画面が勝負になります。下に書かれていること、他のページに書かれていることを見てもらえるかは、第１画面で決まるのです。
そのため、第１画面は相手に「このサイトこそ探していたサイトだ」と思ってもらう必要があります。冒頭で見込み客が普段から問題意識を持っていることから始めましょう、と言いました。つまり、その関心ごとにマッチするキャッチコピーが必要です。
全貌を伝える必要はありません。「このサイト、もう少し詳しく見てみるか」というほんの一瞬のつかみを得られればいいのです。一般的に人は 3 秒 〜 5 秒程度でそのウェブページを見るかどうかの判断をすると言われています。その短い間に、見るべきだと判断してもらう、それができるのは、言葉の力です。

ぼくたちはホームページを作りたいかもしれないが、お客さんはホームページが欲しいわけではない

これは大事なポイントなので、ぜひ忘れないでいてほしいです。お客さんが求めているものは、モノやサービスそのものではないということです。ホームページをつくることで得られるものはなんでしょうか？　数十万というお金を払ってつくってもらうホームページから、何を得たいと思っているのでしょうか？
集客力のアップでしょうか？　売上アップでしょうか？　他社との差別化を図れるようなブランド力でしょうか？　立派なホームページがあることで得られる信用でしょうか？　逆に無いことで信用を失うことを恐れているのでしょうか？
リサーチしていくと、見込み客の求めているものが見えてくると思います。それこそが、見込み客が抱えている問題であって、求めているものなのです。ホームページそのものを求めているわけではない、ということを意識しておきましょう。

配色に役立つサイト・ツール集

配色

レイアウトにそって配色を決めてくれるサイト
 ウェブ配色ツール Ver2.0
色の組み合わせを提示してくれるサイト
https://kuler.adobe.com
こちらも色の組み合わせを教えてくれるサイト
 http://colourco.de/
フラットデザイン向きの配色を提案してくれるサイト
 http://hue360.herokuapp.com/
色についての基礎がまとめてあるサイト
http://iro-color.com
Webで使える色辞典
http://www.colordic.org

WEBデザインサンプル集

http://webdesignsample.net
 http://www.ysig.jp
 http://bm.s5-style.com
 http://lp-web.com
 http://e-32.net
 http://www.landingpage-link.jp
 http://onepagelove.com
 http://muuuuu.org
 http://land-book.com

ブラウザ上の色をチェックする方法

GoogleChromeプラグイン
カラーピッカー
Firefoxプラグイン
Rainbow Color Tools

おまけ

各種雑誌の配色を確認できるサイト
 http://colorchart.jp

素人がやってしまいがちなダメな配色

ぼくはセールスコピーライターなので、デザインをするときに重視することが文章中心の視点です。つまり、いかに文章・コピーに注目してもらうか？　読んでほしい部分を読んでもらうにはどうしたらいいか？　どうやって重要な言葉を目立たせるか？　訪問者に迷わず商品購入までいってもらうにはどうしたら分かりやすいか？　などの点がデザインの基準になります。
実際集客やセールスをするためには、商品・サービスの良さや必要性、メリットなどを “言葉を通して” しっかり伝えないといけません。商品自体のデザイン性を売りにしているのでない限り、誰もデザインが決め手になって買ったりはしません。
もし、中学生対象の塾を探している親が「このサイトのデザインおしゃれだからここにしよう」なんて言い出したら、その親の判断基準を疑いますよね？　他の商品・サービスにも、ほとんどこの原則が当てはまります。ですので集客やセールスを目的としたサイトをつくるなら、コンテンツ（＝中身、そのサイトが何を言っているか？）が重要になってくるのです。

サイトのデザインは信頼性に影響する

ちなみに、逆はありえます。逆というのは、「このサイトのデザインは素人っぽいからやめとこう」という判断です。
サイトのデザインが購買決定などの直接的な動機になることはまぁ考えにくいのですが、逆はありえるというわけですね。デザインは信頼性や印象に関わってきますので、ビジネスの内容に合わせて相応のデザインが必要になります。この点も業種によってどうすればいいかは変わってきます。例えば弁護士のホームページなら、信頼感のある落ち着いた色である方がいいですよね。

正直、引き立て役が大事

話を元に戻します。配色の重要性は今更語るまでもないと思いますが、重要なのは、どうやったら大事な部分、見てもらいたい部分を目立たせることができるかという点です。素人がやってしまいがちなのは、この大事な部分が多すぎるとうことです。至る所が主張しすぎています。たくさんの色を使って目が痛くなるような目立たせ方をしています。
配色だけじゃなく、写真やイラストを使うときもやってしまいがちです。色んな写真やイラストが主張しすぎて、どれが大事なのかが分からないのです。
もしかしたら、これらはデザインの問題ではなく、企画やコンセプトの問題かもしれません。重要な部分を絞りきれていないのです。なんでもかんでも伝えようとして、色々サイト内に盛り込みすぎてしまっているのです。しかしユーザーからは、ごちゃごちゃしすぎて何が大事なのか分からなくなります。それで結局何も伝わらないのです。
集客するなら集客に目的を絞る。販売するなら商品を絞る。このような構成が効果的です。大事な部分を目立たせるためのデザイン。そのために大事な部分を絞るという視点。大事な部分でも捨てるという戦略。本筋からそれる部分は潔く削るという作業が必要になってきます。
こういった点を踏まえて配色・デザインを考えていってください。

１．クオリティの高い写真やイラストなどのグラフィック素材を使う

写真や画像のクオリティはとても重要です。プレーンで面白みのないサイトも、クオリティの高い写真があるだけで全然違う印象になります。これはお金をかけるのが一番手っ取り早いですが、最近は無料でも高解像度でクオリティの高い写真やイラストを入手できるので、いくつか有用なサイトをご紹介しておきます。

pixabay

＞ http://pixabay.com/

無料ですし、パブリックドメインの写真やイラストを見つけることができますパブリックドメインについてはこちら）。もちろん商用でも使えますし、加工も自由です。著作権のない素材なのであなたの好きに使うことができます。

写真AC

＞ http://www.photo-ac.com/

こちらも無料・商用利用可・クレジット表記不要・リンク不要の高品質素材があつまっています。日本のサイトなので日本人の写真もそろっています。

モデルピース

＞ http://www.modelpiece.com/

最近色んな媒体でここのモデルさんの写真を見るようになりましたよね。基本的に商用利用 OK で、クレジット表記やリンクなども不要です。モデルリリースも取得済みなのでとても使いやすく探しやすいサイトです。かわいい、美人なモデルさんがそろっています！
※2014.11 月現在、ポイント制の有料素材となっています。

ぱくたそ

＞ http://www.pakutaso.com/

こちらもとてもクオリティの高い写真がそろっています。商用利用も OK ですし、クレジット表記やリンクもいりません。モデルリリースに関しては、モデルさんごとに違うので、使用する前に必ずチェックしましょう。
そして、このサイトの写真は面白いのが多いです。時事ネタをすぐに素材にしてくれたり、、、注目を集めるアイキャッチ素材としてパワーを発揮するでしょう。

Freepik

＞ http://jp.freepik.com/

こちらは色んな素材サイトで提供されている写真やイラストを、横断的に検索できるサイトです。いろんなサイトをあちこち探さなくていいので、便利です。ただし、著作権や利用規約などは各サイトのルールに従ってください。

Icons DB

＞ http://www.iconsdb.com/

フラットデザインには欠かせない、フラットなアイコンが豊富にあります。サイズ、形式（jpg, png, gif など）、カラーなどが自由に選べます。変に凝っていないのでデザインのカスタマイズもとてもやりやすくなっています。商用利用も OK です。

写真やイラストの加工に関して

高品質な写真やイラストがあっても問題はそれを加工できないことです。加工できない理由は規約のせいではなく、スキルがないから（もちろん、ライセンスによっては加工不可の素材もありますが）。画像加工はノンデザイナーにとって一番厄介なものかもしれません。そこで、最低限これだけできれば問題ないという加工方法をご紹介します。
それは、、、

写真（イラスト）＋キャプション

です。写真の下に文字を入れるわけです。写真は人の目を引きます。そこにキャッチコピーなどを組み合わせると、メッセージがより明確に伝わるようになります。キャプションの入れ方にはポイントがあります。

広告の父・オグルヴィのレイアウトの法則に従う

広告の父を呼ばれるデビッド・オグルヴィは、広告のレイアウトに関してシンプルな法則を提唱しました。それが、「3 分の 2 ／ 3 分の 1 法則」です。この法則を説明すると、

この法則に従って、画像にもキャプションをつけましょう。画像が上 3 分の 2、キャプションが下 3 分の 1 の構図にします。もしくはその逆で、キャプションが上 3 分の 1、画像が下 3 分の 2 という構図です。ここに書き添える文字は読まれる確率が高いので、相手の中をさらに引くコピーにするとよいです。

その他は黄金比や白銀比などを参考にしてみてください。

画像の上に文字をもってこない

できるだけ画像の上に文字を持ってこないようにしましょう。画像の上に文字をかぶせてしまうと、文字が読みにくくなります。読みにくい文字を読もうとすると、目を細めたり目を凝らしたり若干のストレスを感じます。そのようなストレスを相手に与えないようにしましょう。
なるべく写真の背景がごちゃごちゃしておらず、単一色に近いような場所だとキャプションを入れやすくなります。もしくは、写真とキャプションは別枠にして表示させる、写真の上に半透明のレイヤーを重ねてその上にキャプションを記載する、などの方法がオススメです。

できれば覚えた方がいいテクニック……切り抜き

画像の加工で唯一スキルっぽいものを覚えるとしたら、それは切り抜きだと思います。写真の背景を除いて人物だけにしたい、被写体だけを使いたい、といったニーズが一番多いと思います。
そこで、切り抜きして背景をまっさらにする、そんなテクニックがあれば色々幅が広がるのは間違いありません。まぁでもブログコンテンツを更新していくような使い方なら、別に必要ないとは思います。
さて、切り抜きに関しては Gimp というフリーソフトを使った方法が、色んなサイトで紹介されていますので、参考にしてみてください。

２．1px のドロップシャドウをかける

ドロップシャドウとは影のことです。例えば文字にドロップシャドウを加えると、、、

また、一定の範囲（要素）にドロップシャドウを加えると、、、

分りやすく黄色の影にしていますが、通常はグレーで OK です。1px でもありませんので、だいぶぼやっとした感じにみえると思います。実際はこんなぼやっとした感じで使うことはないでしょう。

やってしまいがちなダサいドロップシャドウ

ぼくもこの CSS の記述を知ったときはやってしまっていました。今思うととてもかっこわるい使い方してたな〜と思います。それは、影を大きくつけることです。5px とか・・・。ぼかしも中途半端だったり。

もちろん、全体のデザインに応じて影の付け方もそれぞれですが、専門スキルのない素人は無難に 1px で、ぼかしも 1 px か　0px の影にしておきましょう。それで十分玄人っぽく見えます。

３．ほんのわずかに、微妙〜にグラデーションをかける

フラットデザインが流行しているので、べた塗りのサイトもよく見かけるようになりましたが、一見べた塗りっぽく見えても、微妙にグラデーションがかかっていたります。
グラデーションをかけるには、このようなウェブ上のサービスを利用するのが簡単です。そして、微妙なグラデーションのポイントは明度を微妙に上げるか落とすかすることです。
見た感じ分かるか分からないかのきわどいくらいに明度を変更させてください。それで質感に落ち着きがでます。はっきり分かり過ぎるグラデーションを付けるとダサくなるので注意。

４．リンクにマウスカーソルを乗せた際、ゆっくりした変化を付ける

リンク部分にマウスのカーソルを合わせると、アンダーバーが現れたり色が変化したりといった効果を付けているサイトがほとんどだと思います。この変化をスローにすることで、ちょっと落ち着いた感じが醸し出されます。変化が自然な感じでかっこいいのです。

CSS3 によって実現できます。

/* トランジションの設定：つまりスローな動き・変化の設定 */
a {
color: #004f8c;
text-decoration: none;
-webkit-transition-property: background,color;
-webkit-transition-duration: 1s;
-webkit-transition-delay: 0s;
-webkit-transition-timing-function: ease;
-moz-transition-property: background,color;
-moz-transition-duration: 1s;
-moz-transition-delay: 0s;
-moz-transition-timing-function: ease;
-o-transition-property: background,color;
-o-transition-duration: 1s;
-o-transition-delay: 0s;
-o-transition-timing-function: ease;
}
/* リンク部分の設定 */
.example a {
display: inline-block;
margin-bottom: 1em;
padding: 0.1em 1em;
float: right;
color: #eee;
background: #424242;
}
.example a:hover,
.example a:focus,
.example a:active {
border-bottom: 0px;
background: #004f8c;
}

５．サイトのカラー決めで迷った時はこの配色をパクる

ここで紹介されているシーン別の配色をそのまま参考にして取り入れれば、とんでもない配色になってしまうことは、避けられると思います。あとは配色パターンの中から 3 ~ 4 つくらいの色を選び、あまり複数の色を使いすぎないように注意してデザインを整えましょう。
また緩急が大事ですので、目立たせるべき部分とそうでない部分をはっきりさせ、色のコントラストで目立たせるべきところが目立つように整えていきましょう。

② コンテンツのフィードを、CSS だけでグリッドデザインする方法はあるのでしょうか、参考になるサイトがあれば教えていただけないでしょうか。わたしは以下のような記述をつかっていますが、レスポンシブには対応できません。

.content {
 width: 730px;
 margin: 0 auto;
}
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8 {
 float: left;
 display: inline;
 margin: 4px 0 4px 17px;
 padding: 10px 0;
}
.grid1 {width: 66px;}
.grid2 {width: 149px;}
.grid3 {width: 232px;}
.grid4 {width: 315px;}
.grid5 {width: 398px;}
.grid6 {width: 481px;}
.grid7 {width: 564px;}
.grid8 {width: 647px;}
.first {margin-left: 0; clear: left;}
.cf:before,
.cf:after {
 content: “”;
 display: table;
}
.cf:after {
 clear: both;
}
.cf {
 zoom: 1;
}

さて、早速ですが回答です。
このサイトでも、グリッドデザインを取り入れているページがいくつかあります（例えばこちらの WordPress のカテゴリーページ）。ここでは 2 カラムを CSS で表現しています。で、その時に参考にさせて頂いたのがこちらのサイトです。

ただ、、、質問者さんがお困りのように、レスポンシブデザインに対応するにはこれだけではダメでした。iPhone とかで見ると、右側が切れて表示されてしまいます。なので、スマホなどで見るときは 1 カラムになるようにする必要がありました。そしてこのサイトはそれを行っています。

グリッドデザインをスマホやタブレットなどでキャンセルするCSSの書き方

ぼくの環境（このサイト）で行った記述は以下の通りです。

グリッドデザイン対応

.container {
	width: 940px;
	margin: 0 auto;
}
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
	float: left;
	display: inline;
	margin-left: 20px;
	margin-bottom: 2em;
}
.grid1 {width: 60px;}
.grid2 {width: 140px;}
.grid3 {width: 220px;}
.grid4 {width: 300px;}
.grid5 {width: 380px;}
.grid6 {width: 460px;}
.grid7 {width: 540px;}
.grid8 {width: 620px;}
.grid9 {width: 700px;}
.grid10 {width: 780px;}
.grid11 {width: 860px;}
.first {margin-left: 0;clear: left;}
/* clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
 /* IE6 */
* html .clearfix { zoom: 1;}
 /* IE7 */
*:first-child+html .clearfix {zoom: 1;}

レスポンシブデザイン対応

@media (max-width: 800px) {
	.container {
		width: auto;
	}
	.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
		float: none;
		margin-left: 0px;
		}
		.grid1 {width: auto;}
		.grid2 {width: auto;}
		.grid3 {width: auto;}
		.grid4 {width: auto;}
		.grid5 {width: auto;}
		.grid6 {width: auto;}
		.grid7 {width: auto;}
		.grid8 {width: auto;}
		.grid9 {width: auto;}
		.grid10 {width: auto;}
		.grid11 {width: auto;}
}

解説

グリッドデザインの方はぼくも参考にさせて頂いたサイトからコピペしただけですし、解説は省きます。ただ、グリッドデザインはうまくいったんですが、スマホで見ると非常に見にくくなってました。
他はレスポンシブデザインになっているのに、2 カラムにしたところだけレスポンシブデザインに対応できていなかったのです。そこで、スマホや iPad などのタブレットの場合はグリッドデザインをキャンセルして 1 カラムになるようにしました。
上記の CSS を見てもらうと分かると思いますが、レスポンシブデザイン対応の方では、グリッドデザインのために指定した内容をことごとく打ち消しています。もっと具体的に言うと、グリッドデザインのために指定した横幅（ width ）を、全て auto にしています。あと大きなポイントは周り込みを解除したりといったところですね。

レスポンシブデザインに対応させるための CSS のポイント

上記のレスポンシブデザイン対応の CSS では、１ 行目と 20 行目をハイライトしています。この【@】で始まるハイライトで囲まれた範囲が、スマホやタブレットでのレイアウトやデザインを決めています。【 max-width 】で指定した数値以下になった場合に、スタイル変化させることができます。
Twenty Eleven の元々のスタイルシートにも、2286 行目からこの記述が見つかると思います。【 max-width: 800px 】から始まり、【 max-width: 650px 】、【 max-width: 450px 】と横幅がだんだん小さくなっています。このように、段階的にスタイルを変化させているわけですね。
このサイトは Twenty Eleven を親テーマにカスタマイズしています。Twenty Eleven は元々レスポンシブデザインに対応していますが、カスタマイズする中で PC 向けに色々変更していると、スマホなどで見た場合にレイアウトが崩れていることがあります。
そんな時は、レスポンシブデザインに対応させるために、変更箇所を指定しなおす必要があることを知りました。その方法が、【 @media (max-width: 800px) 】のような記述から始まる部分だったわけです。
スマホやタブレットでレイアウトが崩れている場合は、この部分の記述を変更・追記する必要が出てくると思います。グリッドデザインを取り入れた場合も、同様にスマホやタブレットでのレイアウトはどうするのかを指定し直しましょう。

グリッドデザインを取り入れたページをレスポンシブデザイン対応にしたページをチェック

以上が、ぼくの知識範囲での回答になります。ただ、もしかしたらもっとスマートな方法があるのかもしれません。もし他の方法を知っている方がいたら、ぜひ教えてください。
ちなみに、レスポンシブデザインの対応状況を確認できる便利サイト、Demonstrating Responsive Design を使うと、スマホやタブレットでのレイアウトの違いを簡単にチェックできますよ。
このサイトを使って、いろいろなサイトのページレイアウトを確認してみてください。上記のような CSS で、実際どのようなページレイアウトになるのか、またデバイスごとにどのようにレイアウトが変わるのかがイメージできると思います。

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

iconsDB.comの基本的な使い方

(1) ロゴやアイコンを検索する

検索窓にキーワードを入力して検索したり、トップに表示されているアイコンを選択したり、サイドバーのタグからキーワードを選びます。該当するアイコンやロゴが検索結果にいくつか表示されます。

(2) 色を指定してロゴやアイコンを選択する

カラーバリエーションも複数選択肢が表示されていますが、任意の色を指定することもできます。結構細かい指定もできるようです。アイコンやロゴのタイプが複数あるときは、好きなものをクリックしてください。

(3) サイズとファイル形式を選んでダウンロードする

好きなファイル形式の列で、好きなサイズを選んでダウンロードします。全サイズを一括でダウンロードすることもできますし、任意のサイズにカスタムしてダウンロードすることも可能です。

自由度の高いアイコン・ロゴ素材が手に入る

このサイトの特徴は、

となっているところです。
しかもアイコンのデザインもフラットでシンプル。変な装飾もないから使いやすいはずです。個人利用・商用利用どちらも無料で使えます。クレジット表記も不要。まぁようするに好きに使って構わないということですね。ただし、感謝の気持ちは忘れないように＾＾
とにかく色々なタイプのアイコンが、色々なカラーで、デフォルトで 8 サイズ分用意されています。各色のアイコンと、その反転バージョンのアイコンもあったり、ダウンロードできるタイプも、ICO・PNG・GIF・JPG とそろっていたり、、、もうここを押さえておけばアイコンで困ることはないのではないでしょうか？

まとめると・・・

あなたのサイトのイメージに合わせて、マッチする色のアイコンをダウンロード、あとはソーシャルボタンの画像をオリジナルに変更すれば OK ですね。ちなみに、これについては Google で検索するとたくさんのサイトが出てきます。
どこを見てもだいたい同じことが書かれていますが、Facebook など、ボタン仕様変更の影響で一部正常に作動しない場合もあります。できるだけ最新の記事を参考にした方がいいでしょう。
＞ ソーシャルボタンでオリジナル画像の使用方法 ― 参照
ソーシャルボタンなどのオリジナルアイコン使用、ちょっと暇つぶしにでもチャレンジしてみてはどうでしょうか？

問題）レスポンシブデザインに対応できなくなった

Twenty Elevenはもともとレスポンシブデザインになっていました（レスポンシブデザインって何？　という場合は、ググってみてください）。しかし、横幅いっぱいにヘッダーやフッターを広げると、なぜかレスポンシブデザインではなくなってしまったのです。iPhone で確認すると、サイトは単純に縮小されたように表示され、第一印象では「小さすぎて何が書かれているか分からない……」という感じです。なのでタップして拡大しないといけません。
そういう不具合もあり、レスポンシブウェブデザイン対応の Twenty Eleven であるにも関わらず、WPtouch というプラグインを使ってスマホ表示を最適化していました。
しかし、せっかくのレスポンシブデザインを無下にするのももったいないと思い、なんとか解決してみようと思いました。また、レスポンシブデザインが昨年から流行のようなので、対応するための考え方や基礎を知るためにも必要な取り組みでした。
そういうわけで、改めて、ヘッダーやフッター、またはナビゲーションメニュー（グローバルメニュー）などを、ブラウザの横幅いっぱいに広げて表示させるカスタマイズ方法をまとめたいと思います。

ブラウザの幅を超えて表示させるCSSの基本的な考え方

こちらは過去にメニューやヘッダー背景だけをブラウザの横幅いっぱいに広げる方法の記事で取り上げていますので、詳しくはそちらを見て頂きたいのですが、簡単にまとめておきます。

メニューやヘッダー背景だけをブラウザの横幅いっぱいに広げる方法

主にマージンとパディングによって実現しています。ネガティブマージンという、マージンに負の値を指定して要素をはみ出す方法を使います。しかし、そのままだと中のコンテンツまではみ出してしまうので、パディングで同じ値だけ内側に押し込みます。そうすれば、見かけとして上の図のような、メニューなどの要素が body をはみ出して表示されるようになります。
ただし、このままだと右にいくらでもスクロールができてしまいます。マージンがはみ出した分、サイトの幅自体が広がってしまったのです。

そこで登場するのが【 overflow 】です。これを使うことで、はみ出した要素を表示させないようにできます。overflow を使うときのポイントは２つです。

【 overflow: hidden; 】によって、ブラウザの幅をはみ出した部分を非表示にしてくれます。なので、マージンを広げてもブラウザの幅以上にサイトが広がって表示されることはありません。そういうわけで、過去の記事に書いていた CSS の指定方法はこちらでした。

/* 前提条件の記述 */
html {
    overflow: auto;
}
body {
    overflow: hidden;
    position: relative;
    min-width: 1000px;
}
/* 横幅を背景いっぱいに広げたい場所に追記 */
#example {
    margin: 0 -500%; /* 上下の margin は元の値に合わせて適宜変更 */
    padding: 0 500%; /* 上下の margin は元の値に合わせて適宜変更 */
}

ただ、既に言ったようにこれだとレスポンシブデザインに対応してくれなくなります。そこで、Twenty Eleven のレスポンシブデザイン対応を活かしつつ、ブラウザや背景いっぱいに要素を広げて表示させる方法が必要になります。

結論）追記するのは overflow だけで良かった件

上記の書き方は、参考にさせて頂いたサイトからそのまま引っ張ってきたものなんですが、どうも Twenty Eleven の場合、不必要な記述があるようでした。まず、【 min-width 】はいりません。これが一番の原因です。これのせいでレスポンシブデザインがレスポンシブルじゃなくなっていたわけです。
また、【 position:relatvie; 】も不要でした。これが無くても問題なく横幅を広げられるようです。ただし、他の要素との関係で、【 positoin:relative; 】の指定がないと上手くいかないことがあったので、適宜追記して頂くといいと思います。なんかうまくいかない時は、position プロパティを疑ってください。
要するに、以下をスタイルシートに追記すればOKです。

html {
	overflow: auto;
}
body {
	overflow: hidden;
}

そして、ブラウザいっぱいに広げたい要素にネガティブマージンとパディングを指定します。この書き方に関しても、まとめて記述するより分けて記述した方が安全です。なぜなら、元々上下にマージンやパディングが指定されていた場合、うっかりその指定を打ち消してしまう可能性があるからです。そういうわけで、以下のような書き方がいいと思います。

#example {
	margin-left: -500%;
	margin-right: -500%;
	padding-left: 500%;
	padding-right: 500%;
}

Twenty Eleven の場合、記述する場所は以下のようになります。

画面いっぱいに広げたい要素のidと【 #example 】を置き換えてください。
さて、以上でうまくいくはずです。画像じゃ分かりにくいですが、スマホで表示した際にレスポンシブデザインに対応しています。