コンバージョン率が改善された実例から学ぶフラットデザインの効果的な使い方

一年くらい前は、フラットはただのトレンドでしょ、と言われることもありましたが、この一年で日本でも多くのWebサイトで採用されており、一過性のものではなくなりました。これから制作されるサイトの多くでフラットが採用され、またどんどん進化していくことと思います。

そんなフラットの見た目的な美しさだけでなく、実際に改善された事例を元にした効果な使い方を紹介します。

How Flat Design Increases Conversion Rates

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。
海外のブロガーから日本の他ブログでの無断転載や無断翻訳を聞くのでご注意ください。削除依頼しても無視っていうからひどい。

• ミニマリズムがコンバージョンレートを261%増やした例
• コンテンツファーストとモバイルファースト
• ボタンのデザインを変えたらコンバージョンが35%増えた例
• 良くないフラットデザインはコンバージョンを減らす
• 読みやすいことがコンバージョンに繋がります
• 効果のあるフラットデザインが難しい理由
• フラットデザインはコンバージョンに影響を与える

ミニマリズムがコンバージョンレートを261%増やした例

最初のケーススタディでは、ミニマリズムがどのようにコンバージョンを増やしたかを見てみましょう。「Underwater Audio」は、フラットなスタイルにデザインを変更し、2パターンを使用してA/Bテストを行いました。

左：要素がたくさんあるパターン、右：ミニマリズムのパターン

右のミニマリズムのパターンは、プロダクトの情報やイメージを削除し、デザインをよりシンプルにしました。よりシンプルにした方はコンバージョンレートが261%に増え、ビジターがミニマルなアプローチを好むことが分かりました。

コンテンツファーストとモバイルファースト

コンテンツファーストでWebデザインにアプローチする時、例えばワイヤーフレームを作成する前にコピーライトから始めるなど、そういった際にいくつかポイントがあります。
第一にあなたが多くのレイアウトのオプションを考える前に、ページの階層をビジュアル化するためのコンテンツ一覧で終わってしまうことがあります。第二にそれはあなたがコンテンツとコピーを洗練されたものにすることを助けます。

シンプルにすることで、あなたはページのユーザエクスペリエンスをよくすることができます。ユーザーが何を探しているか、次に何をするべきか明確であれば、ユーザーはその体験を楽しみます。
なぜこのページにいるのか、ここでどのようなことを得られるのか、ユーザーが瞬時に理解できるようにすべきです。ページの機能ではなくユーザーの利益を伝えてください、その利益があなたの売上に繋がります。

モバイルファーストのデザインは、スマホなどのモバイル端末でWebページを見る多くの人々を考慮にいれます。まずは小さいサイズのスクリーンで見ることに対応し、ページや画像の容量、コンテンツの見せ方を最適化します。良い制作者はページのパフォーマンスも気にかけます。

コンテンツファーストもモバイルファースト、そしてフラットデザインも、もはや当たり前と言ってもよいでしょう。エレメントはより大きく、よりシンプルで、テキストもより大きいです。空白スペースも増えます。タッチデバイスではより簡単なナビゲーションが好まれ、これは改善されたユーザエクスペリエンスであることを意味します。

コンテンツをシンプル化するということは、ブランドコミュニケーション全体に明快さと注目すべきコンテンツに影響を与えます。

ボタンのデザインを変えたらコンバージョンが35%増えた例

マーケティングの多くの人たちはボタンに、ドロップシャドウやグラデーションを使うべきだと言います。それらがユーザーのアクションへと繋がると信じています。しかし、ここで紹介するケーススタディはシャドウやグラデでなく、その対照に位置しています。

画像：unbounce

ボタンのデザインをフラットに変えたたけで、クリック率が上がっただけでなく、販売数も増えました。グラデやシャドウは無しです。また下の例ではボタンのスタイルを矩形から角丸にし、カラーを変更しただけでコンバージョンが35.81%増えました。

良くないフラットデザインはコンバージョンを減らす

ここまではフラットデザインにして良くなった事例でしたが、とにかくフラットにすればいい、ということではありません。

Windows 8のメトロUIはフラットデザインの失敗した典型的な事例です。

要素の明確な分離はなし、クリック可能なエリアや入力するエリアを見た目で判断することも非常に難しいです。新しい見た目は非常に楽しいですが、使えないのでればそれは不十分です。

しかし適切なアプローチを与え、ユーザビリティを考慮に入れると、ミニマリズムとして機能します。例えば、下記のサイトを見てみてください。

Pulse

繊細なアニメーションとデザインが気持ちよく、ボタンは一見してボタンと分かり、期待通りの動作をし非常に有用です。

読みやすいことがコンバージョンに繋がります

フラットなデザインは本当に優れたレジビリティ（視認性）とリーダビリティ（可読性）に対するフォーカスを持っています。MITの研究によると、文字を読みやすいということがそれを認知することに繋がると示してます。

フラットなデザインの根本的に重要なフォーカスは、UXを改善し、ユーザーがより容易に、そしてより速く目的を完了することができるようにします。

効果のあるフラットデザインが難しい理由

人々は直感的なインターフェイスを好みます。スキュアモーフィックデザインは実物に似せた質感を再現するもので、直感的に操作できることを目指します。これはデザインに親しみがあるように感じる効果があり、Appleもフラットの前まで積極的に取り入れていました。しかし、実世界のものをデザインで再現するためには、レジビリティやリーダビリティを削る決断も必要でした。

直感力というのは非常に大切で、ユーザーのもっている知識とシステムが必要する知識のギャップを埋めるものです。

フラットデザインは新しいデザインで、そのデザインパターンはまだ開発途上です。コンテンツファースト、モバイルファースト、タイポグラフィやコントラストなど、既存のデザインパターンをフラットデザインと組み合わせ、知識のギャップを埋めることが成功へと繋がります。

フラットデザインはコンバージョンに影響を与える

フラットデザインは単なる一過性のトレンドではありません。フラットはシンプルで、コンテンツにフォーカスされやすく、可読性に優れ、ユーザーの目的を達成させる可能性を増やすことができます。

ユーザーが目的を達成すると、コンバージョンがアップします、そしてそれは利益があがることを意味します。