【翻訳】コンバージョンを高めるビジュアルデザインの方法(Erik Messaki, Outcrowd, 2020)

medium.com

ユーザーに行動を促すビジュアルモチベーションの作り方とは?

ウェブデザインで使用されるイメージは、すべてがコンバージョンに貢献するわけではありません。デザイナーは、写真やイラストの美的パラメータを優先し、その本当の目的である視覚的動機付けを気にしないことがよくあります。多くのウェブサイトオーナーは、アイトラッキングを用いた分析を行った際に、不愉快な驚きを覚えます。訪問者が戦略的に重要なイメージを無視し、注目に値しないものに目を向けていることに気づくのです。美しく質の高い写真やイラストは、人々の心を揺さぶらないのです。その理由は何でしょうか。そして、ユーザーの注意を引き、望ましい行動を起こさせるために、ビジュアライゼーションをどのように利用すればよいのでしょうか?

1. すべてはゴール設定から始まる

ゴールを知ることで、それを達成するための手段を選択することができます。

すべてのデザイナーがビジュアルマーケティングとは何かを知っているわけではありません。多くの人は、そのルールを直感的に使ったり、誰かの成功した作品からアイデアを拝借したりしています。うまくいくこともありますが、そうでないことの方が多いのです。しかし、ビジュアルマーケティングの手法を意識的に使えば、ユーザーの愛着や高いコンバージョンを達成できる可能性は飛躍的に高まります。

"美しく高品質な写真で、このブロックにちょうどいい色だ "とデザイナーは嬉々として考え、最初に見つけたストックフォトをプロジェクトに挿入します。しかし、このようなミスを犯すと、後にリソースの所有者は顧客と資金を失うことになります。魅力と画質は、デザイナーがイメージを選択する際の最後の基準なのです。ここから始めるべきではありません。

ビジュアライゼーションの目標

ビジュアライゼーションで何を達成したいのでしょうか?

これは、デザイナーやビジュアルコンテンツの担当者が最初に自問すべき質問です。

企業やそのWebリソースの一般的なゴールと、プライベートなゴールがあります。プロジェクトの各情報ブロックは、一般的な目標に階層的に従属する形で、独自のタスクを解決しています。

可視化の手法

ゴールを理解することで、手法を決定することができます。この場合、写真、イラスト、ビデオ、アニメーションなど、何が一番適しているのでしょうか。マーケティング分析の結果に基づいて、技術的な課題に応じて選択するのが正しい選択です。

ビジュアライゼーションを作成する前に、以下の質問に対する答えを知っておく必要があります。

  • 企業やプロダクトの目標は何か?
  • デザインが解決すべきタスクは何か?
  • 主なターゲット層は?その目標、願望、嗜好、動機は?
  • そのターゲットに対して、企業のプロダクトはどのように見せるべきか?
  • ユーザーにとって最適なデザインとは?
  • ビジュアライゼーションは、どんな感情や欲求を呼び起こすべきか?
  • このページでユーザーは何をすべきなのか?
  • 具体的にどのように注意を引きつけ、誘導すればいいのか?

これらの質問に対する答えは、技術的なタスクを書き、プロトタイプを作成し、一般的なデザインコンセプトを開発するのに役立ちます。これには、スタイル、配色、タイポグラフィックス、デザイン要素などが含まれます。その後、目標をより具体的にし、適切なイメージ、インフォグラフィック、アニメーション、ビデオなどを選び始めることができます。

2. ターゲットオーディエンスを知る

多くのデザイナーは、すでに準備されたブリーフや技術的なタスクを受け取り、不必要な自発性や好奇心を示すことはありませんが、それは間違っています。デザイナーが企業やプロダクト、ユーザーについて知れば知るほど、魅力的なだけでなく、コンバージョンにつながるデザインを生み出すチャンスが増えるのです。特にユーザーを理解することは重要で、その理由は以下の通りです。

ユーザーの心をつかむ鍵は「感情」

"かっこいい写真だ!" - というのは、必要な感情ではありません。これは別にコンバージョンを上げることに貢献しないのです。

オーディエンスの知識と理解なくして、どのイメージが人々の感情を呼び起こすかを推測することは不可能です。ポジティブな感情のことを言っているのだと思う人もいるでしょう。感嘆を呼び起こすような写真やイラストをピックアップすればいいのです。いや、これだけでは不十分です。人はその写真に感心してページを閉じてしまうのです。

「"プロダクトとのコミュニケーションを楽しんでもらう "ことが必要なんですね。」―と言いたいところでしょう。

でも、それだけではダメなんです。

人は、自分が共感できるイメージに反応する傾向があります。ただ好きな写真を探せばいいというわけではありません。

共感を得ることが大きな課題です。そのためには、そのユーザーが抱く特別な感情を伝える映像が必要です。無関心でいられなくなるような感動を与えましょう。しかし、相手のことを知らなければ、感動は生まれません。

強い感動があれば、人は決断を下すきっかけを得ることができます。コンバージョンに直結するのは、「共感」という感情を呼び起こすイメージの選択なのです。

関連記事

配色・スタイル

人は色を瞬時に見て、一瞬で反応します。オーディエンスを知ることは、配色やスタイルの決定、適切なムードの設定、ユーザーの共感を得ることにつながります。

イメージは選ばれた配色をサポートし、スタイルの統一感を壊さないようにする必要があります。

3. プロダクトの正しいビジュアルプレゼンテーション

プロダクトの見せ方によって、ユーザーの興味や購入意欲が決まります。高画質な写真であればいいというわけではないのは、自明の理です。デザイナーにとって難しいのは、ユーザーに帰属意識を喚起し、あたかもその場にいるかのような感動を与えることです。では、どうすれば「参加型効果」を生み出せるのか。

思い思いにプロダクトに触れてもらう

オンラインコマースの特長は、人々がプロダクトに触れ、四方八方から見ることができないことです。そのため、疑問が生じ、購入意欲が減退してしまうことがあります。可能であれば、2つ、3つの角度からプロダクトを実演してみましょう。お客さまにとって、何が特に重要なのかを考えてみてください。細部をより近くで見せるために、マクロ撮影を利用する。ユーザーには、説明された効果を自分の目で見てもらいたいものです

すべてのサービスがイメージで示しやすいわけではありませんが、どのような仕組みになっているのか、イメージしてもらえるようにしましょう。人物と機材の写真、インテリアを背景にした人物など、視覚的に見せられるものであれば何でもOKです。

プロダクトを「手に取る」ように見せる

人は、自分がそのプロダクトの持ち主であることを精神的にイメージできると、より積極的にプロダクトを購入するようになります。洋服の場合、誰もがそれを理解しています。スーツの写真に、そのスーツを着ている人の写真を添えることで、売り上げアップにつながるのです。

マーケティングの専門家によるライフハックですが、これはどんなプロダクトでも有効です。バイヤーは、抽象的なプロダクト写真よりも、プロダクトを持った人の写真を無意識のうちに自分に投影しています。

例えば、ある会社が家具を売っているとします。ソファやアームチェアの写真を何十枚も並べても、見る人に何の感情も起こさせません。しかし、アームチェアにゆったりと座り、本を読んでいる人の写真は、同じようにゆったりとくつろぎたいという気持ちを呼び起こすのです。"いいアームチェアだなあ、しかもそんなに高くないのに" - という思いが勝手に湧いてくる。

何でも「所有」することは可能です。小さなものを手に取ることも、大きなものの隣に人を置くこともできます。

Image by Erik Messaki

上記は魅力のないビジュアル表現の一例です。セルフタッピングネジ、ただのネジです。そして、他に何が必要でしょうか?競合他社からではなく、あなたからこのネジを買わせなければならないのです。

ネジを魅力的にする方法、そしてネジを「所有」させる方法とは?とても簡単です。

Image by Erik Messaki

ほら、できました。こうするだけで、まるで実際に「所有した」かのように、見ているだけのあなたも重さやチクチク感を感じるでしょう?

ユーザーをプロセス参加者にする

これは「憑依」の特殊なケースです。サービスやプロセスに関するストーリーは、その人がそれに関わる自分を想像できるように、できるだけ明確にする必要があります。人は、想像できないものには興味を示さない。場合によっては、不安は恐怖にさえなります。人物の実写やプロセスの実像を使用することが望ましい。

写真よりもイラストが好まれることもあります。イラストは場所を取らず、細部に気を取られることもなく、何をすべきかをシンプルかつ明確に示すことができます。あらゆる種類の「手順」「指示」「ルール」「ガイドライン」は、写真の助けを借りて示すのがベストです。

ミニマルなイラストは、デザインを視覚的に「解き放ち」、直感的で理解しやすいものにします。

環境を見せる

企業やサービスの紹介が目的であれば、サービスの写真だけでなく、都市環境にある建物の写真やインテリアも見せることをおすすめします。特に、人が訪れることがある場所であれば、重要です。また、地図上にその場所を示しておくとよいでしょう。このようなビジュアル化は、企業の信頼性を高め、訪問者の不安を軽減します。

比較を用いる

人々は「前」と「後」を見たり、プロダクトを比較したりするのが好きです。しかし、視覚的な比較は、しばしば攻撃的なマーケティングに悪用され、人々の否定的な態度を喚起することがあります。したがって、Photoshopの助けを借りて人々を誤解させることなく、機転を利かせて有能に比較する必要があります。さもなければ、不信感を与えるだけです。

4. ユーザーの注意を管理する

オンラインストアのオーナーは、目の前でちらつく膨大な数の写真でページを埋め尽くしがちです。デザインが悪いと、プロダクトの品質が悪いという印象を与えてしまいます。人々はそれをじっくりと見ようとはしません。取引が低迷するのは、当然のことなのです。

強調する

どんなに良いイメージでも、サイズが小さすぎたり、逆に不当に大きかったりすると、見る人の印象は悪くなります。

ページ上の視覚的階層が欠落していたり、アクセントがなかったり、多すぎたりすると、視線は何も引っかからなくなります。イメージの過多、特に小さなイメージは、混沌とした汚さを感じさせます。クリーンでミニマルなデザインが最適な解決策です。一つの売り物について魅力的な支配的イメージを示せば、買い手自身が残りの部分を探索するために移動したくなるものです。不要なものはすべて取り除くか隠し、重要なイメージは論理的かつ視覚的にアクセスできるようにし、クリックで拡大できるようにする必要があります。

関連記事:デザインにおける強調:注目を集める方法

視線を管理する

優れたデザインは、ウェブサイトの目的に応じてユーザーを導き、誘導します。イメージの階層的な並びや、うまく配置されたアクセント、ガイドなどは、ナビゲーションのしやすさに貢献します。つまり、ポジティブなユーザーエクスペリエンスを生み出すのに役立つのです。

魅力的でありながら、気を散らさない イメージは、ページ上の目的からユーザーの気を散らさないようにしなければなりません。人はイメージを長く見ていると、注意が遠のき、弱まってしまいます。特に、過度に詳細なイラストや「魅惑的な」アニメーションに当てはまります。

注意力が散漫になる特殊なケースもあります。例えば、写真の背景が邪魔になることがあります。この場合は、単色のものに置き換えるのがよいでしょう。

5.情報性を追求する

それぞれのイメージは、割り当てられたタスクに対応し、機能的な負荷がかかるものでなければなりません。スペースを埋める必要があるからといって、意味のないイメージを挿入するのはNGです。

下記は効果的なビジュアライゼーションを作るための基本ステップです。

まとめ

コンバージョンを上げるための有効なビジュアライゼーション手法は、写真の選び方や加工方法の説明ではありません。ユーザーを無関心にさせず、望ましい行動を起こさせるようなイメージ、つまりビジュアルモチベーター(動機づけ)の作成です。適切なイメージを選ぶには、オーディエンスをよく研究する必要があります。そうして初めて、共感を呼び起こすことができるヴィジュアルが届くのです。そうすれば、「参加型効果」を生み出し、ユーザーに興味を持ってもらうことができるのです。

どんなに優れた理論も、実践してこそ、その良さがわかるのです。

新しい刺激的な体験ができることを祈っています。