「行動を促す」ボタンのガイドライン、ベストプラクティス、および例

Webサイトのアクションボタンの呼び出しはしばしば無視されます. デザイナーは、魅力的で全体的なデザインに適合することを超えて、アクションボタンを適切に呼び出すことができるものを正確に理解していないことがあります。しかし、アクションボタンを呼び出すことは、ボタンを効果的にするものについてのある種の理解なしに設計するにはあまりにも重要です。結局のところ、アクションボタンへの呼び出しの主なポイントは、訪問者を獲得することです。行う何か.

色、縮尺、言語、およびその他の要因がアクションボタンへの呼び出しのコンバージョン率にどのように影響するかについて少なくとも基本的な理解を深めることが重要です。ここでの概念は複雑ではありませんが、与えられたデザイン内で可能な限り効果的なアクションボタンの呼び出しを作成するためには、少しの予測と計画が必要です。これらの各点についての詳細は、こちらをご覧ください。.

「行動を促す」ボタンの目的

アクションボタンを呼び出すと、さまざまな機能を実行できます。結局, “アクションの呼び出し” 本当に少しあいまいです。それが意味するのはそれが主な目的はあなたのサイトへの訪問者を得ることであるということです 何かをする. 買い物かごに商品を追加したり、ダウンロードしたり、情報を要求したり、あるいは他の何かについて考えてみましょう。.

アクションボタンの呼び出しにはさまざまな目的があるため、ボタンの目的を検討する必要があります。サイトの種類、ターゲット市場、および希望する行動はすべて、行動を促すボタンを最適にデザインする方法において重要な役割を果たします。.

「行動を促す」ボタンの種類

アクションボタンの呼び出しにはいくつかの種類があります。各タイプは訪問者に特定のアクションを実行させることを目的としていますが、そのアクションはかなり異なる場合があります。以下は、アクションボタンへの呼び出しの最も一般的な種類です。.

1.カートに入れるボタン

Eコマースサイトでは一般的にアクションボタンへの呼び出しを多数使用しますが、最も広く使用されているものは “カートに追加” ボタン。これらのボタンは通常、個々の製品ページに表示されます。彼らの目的は顧客に商品を購入するように誘惑することです。カートに追加ボタンの一般的なデザイン要素には、次のような簡単な表現があります。 “カートに追加” または “バッグに入れる” または “今買う“）アイコンの使用（通常はバッグやカート）.

2.ダウンロードボタン

ダウンロードボタンは、訪問者を商品の所持に誘惑させようとしているという点で、カートに追加するボタンに似ています。ダウンロードボタンの場合、多くのデザイナーは他の種類のボタンよりも多くの情報（バージョン情報やダウンロードサイズなど）を含めることを選択します。.

3.試用ボタン

いくつかのサイトは彼らの提供物を試すように彼らの訪問者を誘惑することを試みます、一般的に無料トライアルの形で。特定のサイトに応じて、これは無料ダウンロードまたは無料アカウントになります。一部のサイトでは “少ないほうがいいですね” 他の人が裁判に含まれているものについてより多くの情報を提供することを好む一方で、哲学と彼らのボタン上の言語を最小限に保つ.

4.もっと学ぶボタン

詳細情報ボタンは、通常、ティーザー情報のブロックの終わりに使用されます（多くの場合ホームページにあります）。これらのボタンは通常シンプルですが、訪問者の注意を引くために大きすぎることがよくあります。.

5.サインアップボタン

登録ボタンは2つの異なるバージョンで最も一般的に表示されます。最初のタイプは通常、サインアップフォームに直接関連付けられています。 2番目のタイプは通常同じように使われます。 “カートに追加” ユーザーが実際にサインアップフォームに到達する前に、サービスまたはアカウントを購入またはサインアップする方法としてのボタン.

アクションボタンを呼び出す方法は他にもありますが、最も一般的なものです。上記のガイドラインに適用されるガイドラインは、設計している可能性のある他の種類のアクションボタンの呼び出しにも当てはまる可能性があります。.

負のスペースを効果的に使用する

あなたは、アクションボタンへの呼び出しが周囲のコンテンツから際立っていて、本当にあなたのサイト訪問者から注意を喚起することを望みます。そのためには、これらのボタンの周囲にある負のスペースを利用する必要があります。コンテンツとアクションボタンへの呼び出しの間に空白を入れます。これは、カートに追加するボタンなど、一部のボタンではそれほど重要ではなく（あまり一般的ではありませんが）、他のボタンと一緒に使用すると、より多くのスペースを使用してうまく機能します.

ボタンの周囲にある負のスペースとボタン自体のサイズのバランスをとることが重要です。それはプロポーションについてです。あなたはあなたのボタン、その周りのスペース、そして周囲のコンテンツが、サイズの違いがあっても、それらが一緒になるように見えることを望んでいます。あなたはそれらをちょうど良く見えるようにするために物事を少しいじる必要があるかもしれません.

いくつかのガイドライン：

ボタンの周りに十分なスペースを確保して、ボタンが散らかっていないようにします。
含めるスペースの量を決定する際には、3分の1の法則や黄金比などの原則を考慮してください。
負のスペースは、他のコンテンツから目立つようにアクションボタンルームに電話をかけ、それを引き立たせる

サイズと色

アクションボタンの呼び出しの大きさは非常に重要です。大きすぎるボタンは、周りのものすべてを圧倒します。小さすぎるボタンは、ページ上の他のすべてのコンテンツのシャッフルで失われます。あなたはあなたのボタンがデザインを圧倒することなく目立つように十分大きくすることを望みます.

色はあなたのボタンのサイズのバランスをとるのを助けるために大きい効果に使用することができます。大きなボタンの場合は、デザイン内で目立たない色を選択します（それでも背景としては目立つ）。小さいボタンの場合は、ボタンを実際にポップにするために、明るく対照的な色を選択することをお勧めします。どちらの場合も、サイトの全体的なデザインとぶつかることなく、使用する色がボタンを引き離すようにしてください。.

いくつかのガイドライン：

アクションボタンの呼び出しは、理想的には特定のページで最大のボタンにする必要があります。
小さいボタンをより際立たせるために対照的な色を使う
特色のないボタンを使用して、特大のボタンのサイズを調整します。
あなたはあなたのデザインを圧倒することなく注意を払う必要があるアクションボタンを呼び出す

言語

アクションボタンへの呼び出しに使用することを選択した正確な表現は、変換に大きな影響を与える可能性があります。比較する “今買う” と “カートに追加“. 1つは他のものよりはるかに緊急です。またはどうですか？ “無料で試す” と “無料お試し“? 1つは他のものよりもはるかにパンチがあり、より際立っています.

アクションボタンの呼び出しに使用する言語は、できるだけわかりやすく簡単なものにする必要があります。ボタンをクリックしたときに表示される内容を一目で知ることができます。彼らがそれを疑問に思うならば、それは彼らが一時停止したことを意味します、それはより低いコンバージョン率につながることができます.

あなたのフォントサイズも忘れないでください。アクションボタンを呼び出すときのテキストは大きく太字にする必要があります。ボタン自体のサイズと色に合わせてください。十分なコントラストがあり、テキストが読みやすいことを確認してください.

いくつかのガイドライン：

シンプルで直接的な言葉を使う
本文のボタンに太字の太字フォントを使用する
言語が明確に特定の行動を要求していることを確認する

緊急性を作成する

あなたはあなたのサイトの訪問者ができるだけ少ない考えで望ましい行動を実行することを望みます。あなたはあなたの訪問者をだましたくありませんが、あなたが彼らにしていることをやめさせ、考えるためにあなたが彼らに与えるより多くの機会はあなたが彼らに言うためにあなたが彼らに言っているより多くの機会を与えます “いいえ”.

あなたはあなたのボタンにそれらがすぐに行動する必要があるという印象をそれらに与えることを望みます。あなたは彼らが今の拍車に基づいて、すぐに決断を下すように励ましたいです。これは、アクションボタンを呼び出すたびにはうまくいきませんが（特に高額商品を購入するために）、低コストまたは無料のアクションのために、訪問者に少しの思いやりでクリックさせることが望ましいです。.

いくつかのガイドライン：

あなたの訪問者にすぐに行動するように勧めなさい
訪問者に一時停止の理由を与えないでください
緊急性は重要ですが、決して訪問者を誤解させないでください。

追加情報を提供する

必要に応じて、アクションボタンの呼び出しを使用して、訪問者がボタンをクリックしたときに表示される内容についての追加情報を提供します。これは、トライアルボタンやダウンロードボタンでよく見られます。追加情報の一般的な例には、無料試用期間の長さやファイルのダウンロードサイズなどがあります。バージョン情報もよく見られます.

追加の情報を含めるときは、実際の行動を促すことに集中する必要があることを忘れないでください。訪問者に行動を起こさせる言葉のテキストが最も目立つようにし、他の情報は目に見えないようにします。.

いくつかのガイドライン：

ユーザーエクスペリエンスを向上させるときにのみ追加情報を含める
追加情報は、アクションボタン、特にダウンロードボタンまたはトライアルボタンへの呼び出しの一部の種類にのみ適切です。
主な行動を促すテキストが、ボタンの最も目立つテキストであることを確認してください。

優先順位を付ける

複数ある場合は、ページ上のアクションボタンの呼び出しを優先させることが重要です。これはいくつかの方法で行うことができますが、最も一般的なのは色とサイズの使用によるものです。.

色を使用して、ページ上の最も重要なボタンを強調表示したり、重要性の低いボタンを目立たなくしたりします。または、サイズを使用して最も重要なボタンを目立たせ（大きくすることで）、重要性の低いボタンを強調しないようにします。.

アイコンと画像

アクションボタンの呼び出しに視覚的な合図を含めると、コンバージョン率を高めるのにも役立ちます。ショッピングカートのアイコン、 “カートに追加” たとえば、ボタン、またはダウンロードボタン上の矢印は、どちらも良い例です。使用する独自のアイコンについても考えますが、ボタンの目的を明確にしてアイコンがユーザーエクスペリエンスを向上させ、混乱を招かないようにします。.