Oli Gardner氏は、マーケター向けのランディングページ制作会社であるUnbounceのクリエイティブディレクターであり、コンバージョン中心設計（CCD）の提唱者です。彼は、CCDによって、Webサイト上の各ページが「責任あるコンテンツ」になると言います。さらには、Webサイトの訪問者を顧客にするために各ページが果たす役割の影響力や成功、意義を測定することができます。
デザインとは問題解決のことを意味することが多く、デザイナーが対処する問題の多くはユーザーに関する問題です。しかし、問題解決に関して言えば、ほかにも考慮すべきことがあります。それは、ビジネスに関する問題解決です。
コンバージョン中心設計（CCD）は、デザイナーがビジネスゴールの達成へとつながるユーザー体験を設計するためにあります。
目標には、別のページをクリックするという単純なものもあれば、Webサイトでの売上や登録といった複雑なものもあります。
また、訪問者を顧客に変える役割を果たせなかったとき、CCDはどこにデザイン上の問題があるのかを簡単に特定することができます。あらゆるモノのデザインと同様に、CCDは芸術（ビジュアル、UX、コンテンツデザイン）と科学（結果の測定と分析）のハイブリッドなのです。
Oli氏は、デザインプロジェクトでCCDが機能するために重要な７つの原則を提案しています。
- カプセル化
- コントラスト
- 道順のヒント
- ホワイトスペースの多様
- 緊急性と希少性
- 購入前のお試し
- 社会的証明
これらの原則について、いくつかの例とともに詳細を見てみましょう。
CCDの７つの原則
CCDの第１原則 - カプセル化
カプセル化とは、もっとも重要なコンテンツを入れる包装です。誕生日プレゼントに注目を集めるために使われる包装紙のように、コンテンツが訪問者にとって重要であることを明確にするためのものです。
ではCCDにおいては何を包むのでしょうか？ もし期待するアクションを引き起こすコンテンツがクリックするものならば、ボタンを大きく包み、関心を引くものにしましょう。もし登録をするコンテンツならば、注意を引き付けるものにしましょう。
カプセル化の例（ソーシャルメディアのボタン）
著者/著作権者：Free Stock Images。著作権条項とライセンス：CC BY 2.0
CCDの第２原則 - コントラスト
明るい赤色の背景に、大きな赤いボタンを置いたら何が起こるでしょうか？ 背景と見分けがつかなくなってしまいます。
CCDにおいて、重要なのは使用する色ではありません。背景とのコントラストです。
CTAがほかのすべてに溶け込んてしまっていたら、誰がCTAを見てくれるでしょうか？ 誰も見ないでしょう。コントラストを使って、CTAが目立つようにしてください。たとえば、黒と白、赤と緑などがあります。コントラストを最大化する方法がわからない場合は、以下のカラースターを確認してください。反対の位置にある色がコントラストを最大にします。
著者/著作権保有者：Kwamikagami。著作権条項およびライセンス：CC BY-SA 4.0
CCDの第３原則 - 道順のヒント
CCDでは、顧客ができるだけ簡単に行動を起こせるようにしなければいけません。それはつまり、顧客に取ってほしい行動を促進するページを構築するということです。矢印を使用して画面上の特定の領域を強調したり、三角形を使って焦点を作り出したりすることができます。写真を使用する場合は、CTAを目立たさせるために視線誘導を利用します。
以下の写真を見てください。ユーザーが次にどこに行けばいいのかわかりやすいように、赤ちゃんの視線上にCTAを配置すべきでしょう。
著者/著作権者：Pixabay。著作権の用語とライセンス：無料
CCDの第４原則 - ホワイトスペースの多用
空白が多くなればなるほど、デザインの煩雑さが軽減され、視界の情報から行動を取るべき場所を決めやすくなるでしょう。また、これによってユーザーに１つの重要なメッセージを伝えやすくなります。
説得力のある空白の使用例は、Googleのトップページのほかはないでしょう。
著者/著作権者：Emperyan。著作権条項とライセンス：パブリックドメイン
CCDの第５原則 - 緊急性と希少性
人々にすぐに行動を起こさせたいのであれば、その理由を伝えなければなりません。心理学では、意思決定の時間を制限することで人々を行動に導くことができるとされています。 「７台のカメラだけがこの価格で購入可能です。そのあと999ドルに値上がりします。」というように供給数を制限したり、「明日の午前中に発送するには、あと23分以内に注文してください」というように時間を制限したりすることによって、心理学の技術を活用できます。
このようなメッセージは、できる限りCTAの近くに配置するのが理想的です。
次のAmazonのWebサイトの画像を見ると、この特別価格は数量限定で、このセット商品の35％がすでに売れていると書いてあります。「今すぐ行動してください、そうでなければチャンスを逃す」という明確なメッセージを読み取れるでしょう。
著者/著作権者：不明。著作権条項およびライセンス：公正使用
CCDの第６原則 - 購入前のお試し
スーパーに行ったことがあれば、製品のサンプルを提供されたことがあるでしょう。そのサンプルは、メーカーの親切心から提供されているわけではありません。それを気に入ると確信したら、製品の購入を決定するのに役立つからです。オンラインでコーラを１口、あるいはチーズ１枚を試供することは不可能かもしれませんが、このサンプルを試供するというアイデアはデジタルで複製することができます。
レポートのアブストラクトや、書籍の章のサンプル、最新のトレーニングビデオの最初の10分などが無料で提供されているのを思い浮かべてください。
このアイデアはシンプルで、その製品に投資価値があるという安心感を顧客に与えています。たとえその投資がメールアドレスだけの場合であっても効果はあります。
例としてThe Reading Roomでは、販売している書籍の章の無料プレビューを提供しています。
著者/著作権者：不明。著作権条項およびライセンス：公正使用
CCDの第７原則 - 社会的証明
契約を結ぶための最後の鍵は、顧客になっても大丈夫だという訪問者からの十分な信頼です。信頼を築くためのもっとも単純な方法の１つは、「社会的証明」を提供することです。社会的証明とは、ほかの顧客や訪問者が製品やサービスをどのように感じたかというシンプルなフィードバックです。
社会的証明は、上記のThe Reading Roomのような星でのレーティングや、次の保険会社Legal and Generalのようにそのまま顧客の声の形式で示すことができます。
著者/著作権者：Legal and General。著作権とライセンス：Img source
上記のように、ちょっとした説明と推薦文を加えて、それが何なのかはっきりさせることは必ず得策になります。
CCDの使用例 - Wistia.Com
Wistiaのランディングページを見て、CCDのどの原則に従っているのか探してみましょう。
著者/著作権者：不明。著作権条項およびライセンス：公正使用
「アカウントを作成（Create account）」は完全にカプセル化されていて、背景とのコントラストがはっきりとしています。画面には余計な選択肢がありませんし、多くのスペースが空白と「フォームに記入してください」というわかりやすい道順に使われています。また、「私たちのすべてのプランには２週間の無料トライアルが付いています。少しでもお金を払う前に、サービスに満足できるかどうか確かめてください。」という文言とともに、購入前のお試しオプションが提供されています。
実際、Wistiaで不足しているのは社会的証明と希少性だけです。しかし、デザインするすべてのページにすべてのCCDの原則を適用させる必要はないことに注意してください。CTAを促進するのに十分な原則に焦点を絞ればいいのです。
Wistiaを例として取り上げた理由は、HubSpotが2015年のベストランディングページに選んだからです。
まとめ
CCDはデザインの新しいコンセプトで、UnbounceのOli Gardner氏はそれを牽引する実践者です。しかし、CCDが意図していることは完全に新しいものではありません。Webサイトの所有者や企業はコンバージョンを求めます。コンバージョンは、彼らが取り組むべき一番のビジネス課題です。
デザインがユーザーにとって魅力的である必要は依然としてあります。しかし、デザインがユーザーに受け入れられて成功するためには、本当のビジネス課題に取り組むことが重要です。もし取り組まないのであれば、誰もデザインにお金を払う気にはならないでしょう。
CCDを実践するということは、カプセル化、コントラスト、道順のヒント、空白、緊急性と希少性、購入前のお試し、社会的証明の原則を使用するかどうかというだけの問題です。
