タグ: レイアウト

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

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

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

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

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

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

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

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

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

売れるデザインが正解

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