KOBITブログ

成果が上がるUI/UXのベストプラクティスまとめ

この記事は約 7分 で読めます。

Man sketching design on paper

Webデザインに正解はあるのでしょうか。業界や顧客の好み、時代の流れや端末の機能などによって優れたデザインは移り変わっていきます。その中でも、多くのWebデザイナーによって効果が確認されたデザイン上の作法「ベストプラクティス」が提案されてきました。自社でWebデザインを行う際には、ベストプラクティスを基本として理解しながら、最適な設計を目指すのが望ましいとされます。本記事ではベストプラクティスとなっているデザイン要素を紹介します。

美しいデザインよりもユーザーを獲得するデザインを目指せ

優れたデザインは、それだけで経済的な価値があります。使いやすいWebサイトはユーザーに好まれ、多くの記事が読まれます。ユーザー登録や商品購入に至るユーザーが増えれば、Webサイト運営者の売り上げにも貢献していくでしょう。しかし、優れたデザインを施すのは簡単ではありません。アメリカの起業家パトリック・コンレイは、昨今のWebデザイン事情を以下のように評しています。

「多くのベンチャー企業が『美しい』Webサイトを作ろうとし過ぎるあまり、結果として、ユーザーが到達するべき本来の目的を忘れてしまっている。多くの企業では、新しい顧客獲得に貢献するWebサイトの構築を目指すべきだ。ユーザーがサイトに登録したくなる明確な理由と、分かりやすいCTA(行動喚起)を設置すれば、見込み顧客の獲得と育成が行えるだろう」

美しいデザインではなく、ユーザー獲得と育成に貢献する効果的なデザインとはどのようなものでしょうか?以下に効果的なデザインのベストプラクティスを紹介します。

成果を上げるWebデザインのベストプラクティス

行動を含んだ文言を使う

CTA(行動喚起)ボタンは、ユーザーが何をするかに焦点を絞った文言を載せるべきです。「送信する」「入力する」といった無味乾燥な文言ではなく、「試す」「予約する」といったユーザーの目的に合致したものにしましょう。

1

http://www.benesse.co.jp/udemy/

ボタンの文言は長すぎないように

行動を促す文言を入れたいからと言って、ボタンに過剰な文言を詰め込むのは望ましくありません。「製品を試す:60日間無料」くらいなら問題ないかもしれませんが、限界ギリギリと言ったところでしょうか。ボタンの文言は数文字に留めておくとよいでしょう。

洗練されたボタンの形

ボタンの形状は、ユーザーがボタンを押すかどうかに大きな影響を与えます。四角形のボタンがよいのか、角丸のボタンが良いのか十分にテストしてみる必要があるのです。いずれの形状も一般的なので、どちらが優れているかは他のデザイン要素との兼ね合いで変わってくる可能性がありますが、ボタンを角丸にしただけで35%のコンバージョン率向上を達成したケースも報告されています。

2

http://unbounce.com/conversion-rate-optimization/design-call-to-action-buttons/

大きく読みやすい文字

CTAボタンは十分に大きく分かりやすいものが望ましいとされます。他のコンテンツを邪魔するほど大きな文字にするのは馬鹿げていますが、他から際立つよう大きく記載するのは重要です。

急かす

軽い緊急性を持たせるとコンバージョン率が飛躍的に向上する場合があります。「本日のみ半額」「今だけ」という文言を含めてみましょう。

3

http://www.jp.playstation.com/psn/store/topics/

優先順位をつける

ページの中にCTAボタンと、そうでないボタンが混在している場合、CTAボタンを目立たせるようにしましょう。CTAボタンが最も大きく明るい色を使うようにし、重要でないボタンは白黒にして注意を引かないように工夫します。

4

http://www.starbucks.co.jp/

ボタン画像に装飾を加える

CTAボタンに小さな矢印や画像を付加すると、クリック率が上昇するケースがあります。ユーザーをかえって混乱させないよう注意すると、高い効果を得られるでしょう。

5

https://nestle.jp/brand/ndg/fan/

ボタンに一手間加える

CTAボタンに数行の補足説明を加える方法はよく使われています。「無料トライアルを試す」という文言の下に、小さく「30日間無料、クレジットカード不要」といった説明を加えるイメージです。

少ないことは良いこと

コロンビア大学の調査では、30個のチョコレートの中から一つを選んだ人よりも、6個のチョコレートから一つを得た人の方が満足度が高かったと言われています。ユーザーが何かを選択する際には、選択肢が少ないほど良いのです。特に、複数の選択肢がある場合は、一つを際立たせておくと、ユーザーにとって選びやすくなります。

余白を活用する

CTAボタンは適度な余白に囲まれていると良いと言われます。ユーザーの注意を引き、他のコンテンツから際立たせる効果があります。

6

https://www.airbnb.jp/

購入よりも先にプレゼント

人は何か助けてもらった際に、お返しをしたいと考える「返報性の法則」という心理を持っています。無料プレゼントを提供すると、ユーザーは企業と関係性を深め、長期的な関係を築く可能性が高まります。

7

http://lucido.jp/special/cp16ss-100000/

自社の声より「お客様の声」

「お客様の声」を掲載するとコンバージョン率の向上に寄与するケースが多々あります。既存顧客の推薦文や、ユーザーが製品を気に入っている状況を示すデータを掲載すると説得力が増すのです。

8

https://healthya-club.kao.co.jp/report/

大事なお願いは繰り返す

数ページにわたる長い文章を掲載したページであれば、CTAボタンを複数回掲載しても構いません。長い文章を読んだ末尾にCTAボタンがあれば、ユーザーはクリックしたくなる可能性が高くなります。

確認よりも「やり直し」

ボタンをクリックした際に、「本当に変更しますか?」といったポップアップが確認を強制するWebサイトが多く見られます。しかし、誤ってボタンを押す場合よりも、実行する意図があってボタンを押すケースの方が多いのではないでしょうか。確認という手間をとらせるよりも、誤って押してしまったという例外ケースの場合に、「やり直し」あるいは「戻る」方法だけを用意すれば、ユーザーの利便性が増します。

「データがない」状況を想定する

多くのWeb担当者はデータが10件、100件、10000件と存在するケースを想定して画面を設計しています。しかし、どのユーザーも登録して最初に目にするのは0件の状態であり、「何もデータがありません」と冷たいメッセージが表示されると、何をすればよいのか途方に暮れることがあります。データが登録されていなくても初めに何をするべきかを明確にすると、ユーザーの利用度が増します。

9

http://hajipion.com/1358.html

まとめ

美しいデザインも良いですが、ユーザー獲得や育成に貢献するデザインはより良いものと言えるでしょう。多くのWebデザイナーによって実証されたベストプラクティスを参考に、自社のWebデザインを見直してみてはいかがでしょうか。

参考文献


CATEGORY:

さあ、KOBITをスタートしよう。