ウェブサイトデザイン分析: アクションリクエストボタンをデザインするための6つの必須事項

ここが実践の場です。

アクションリクエストボタンは、Web トラフィックを商業価値に変換する上でどの程度の役割を果たしますか?

ウェブサイトのユーザー エクスペリエンス デザイナーは、このコンバージョンにおけるアクション要求ボタンの重要な役割を理解しているかもしれませんが、ウェブサイトから商業的な利益を得たいと考えているすべての人が次の 6 つの要素を理解する必要があります。

リクエストアクションボタンとは何ですか?

アクション リクエスト ボタンは、Web 訪問者からクリック アクションを取得できるボタンです。

一般的に、クリックするとダウンロード、登録、または販売につながる可能性があります。また、より詳しい情報が記載されたページにユーザーを誘導し、ユーザーにアクションを促すこともあります (例: 「…についてさらに詳しく」)。

アクションボタンへのリクエストの 6 つの要素

1. サイズ

理想的には、CTA ボタンは、ページを混雑させることと背景に溶け込むことの間でバランスを取る必要があります。 ページ上の要素が大きいほど、その要素が重要であると認識されるため、ページ上で最も大きなボタンにする必要があります。

(上図のように) NCover の Web サイト ページでは、アクション要求ボタンを大きく表示して強調しています。さらに、「21 日間無料トライアル」などのその他の重要な情報を掲載するスペースも十分に確保されています。強いコントラストの色は、ユーザーがダウンロード ボタンをページの背景から区別するのにも役立ちます。

2. 場所

アクション要求ボタンを Web ページの折り返し部分に配置すると、この位置がユーザーにとって視覚的に対称的な中心となり、ユーザーに Web サイトの第一印象を与えることができるため、非常に効果的です。

(上図のように) Envy Store のログイン ページでは、真ん中にアクション リクエスト ボタンが表示され、ユーザーを迎えます。この丸いボタンは白い枠線に対して目立ち、周囲のテキストを読んだ後に買い手と売り手の両方に Web サイトに参加する強い動機を与えます。

(上記参照) 「寄付」、このアクション リクエスト ボタンは、戦争中の子どもたちを助けるために寄付をするよう全員に呼びかけるために使用されます。ページの上部にセカンダリ メニューを配置すると、ユーザーのアクションを効果的に誘導できます。そして戦略的に、テキストは、ユーザーが他のページを閲覧した後に戻ってくるように促すような背景に配置されています。

3. 色

行動喚起ボタンと背景色の間に色のコントラストがあることを確認してください。これにより、ユーザーがボタンに気づきやすくなり、アクションを起こす可能性が高まります。同時に、ボタンが再生できる最大の色空間を制限することを目的として、ボタンの色がページ全体のトーンとどのようによりよく一致するかを考慮する必要もあります。

(上図参照) このアプリのアクションリクエストボタンは、彩度の高い色によって背景色と明確に区​​別されています。その存在を無視しますか？

(上記のように) Resumator はナビゲーション バーで非常にわかりやすい色を使用して、「サインアップ」ボタンを強調しています。同じ赤が別のアクション ボタン「ツアーを開始」にも適用されており、これもこのコンセプトを反映しています。

4. スペースを残す

アクション要求ボタンがユーザーの注意を引くためには、空白も重要な要素です。ボタンの色が淡い場合や小さい場合は、空白スペースを戦略として使う方が効果的です。この戦略では、隣接する要素がより明確に区別されるため、ユーザーの注目をすぐに引き付けることができます。

(上図参照) MintThemes の Web サイト上のアクション リクエスト ボタンは、ユーザーの注意を引くために目立つ手段を使用するのではなく、代わりに空白スペースを使用して、ユーザーにアクションを促すこともできます。このアプローチは、Web ページの上部と下部にあるアクション要求ボタンに使用されます。

(上図のように) Blaz Robar の Web サイトはすっきりとシンプルで、アクション リクエスト ボタンに十分なスペースが与えられています。 このボタンはユーザーの注意を引くために競争する必要はなく、ユーザーのクリック動作をうまく引き起こすことができます。

5. コピーライティング

コピーライティングはユーザーのコンバージョン率において非常に重要な役割を果たします。

ユーザーに行動を促す簡潔で明確なコピーを目指します。 「今すぐ購入」や「カートに追加」などのボタンを読んだとき、すぐにクリックしたいという強い衝動を感じますか?一方、ユーザーが最初にコピーの意味を尋ねなければならない場合、コンバージョン率が低下します。

(上図のように) Intrahost では、このページのアクション要求ボタンのコピーが非常に簡潔かつ直接的であり、操作手順などの情報を読まなくても、ユーザーが直接作業を開始できるように誘導します。

(上図参照) Commendable Kids というウェブサイトでは、ユーザーに「今すぐ始めましょう」と呼びかけ、無料で使用できることをユーザーに明確に伝えています。 この追加情報は非常に役立ち、ユーザーがそのような情報を探すためにウェブサイトの奥深くまで進む必要がなくなります。

6. ユーザーにとってのメリット

チャンスを逃すかもしれないと感じたとき、私たちはより迅速に対応する傾向があります。ボタンに目を引くような励ましのコピーを組み込み、ユーザーが享受できるメリットを伝え、ユーザーの心を刺激します。

(上記参照) FileShare HQ Web サイトのアクション リクエスト ボタンには、メンバーになるメリット (数分以内にファイルをアップロードできる) がユーザーに伝えられます。

(上図のように) アプリ テンプレート ページのアクション リクエスト ボタンは、ユーザーがクラブにすぐに参加して、そのメリットをはっきりと伝えることで、このメリットを獲得するように促します。

アクションリクエストボタンは、ページのコンバージョン率において非常に重要な役割を果たします。現在、すべてのウェブサイトの目標はより均質化しています。上記の 6 つのデザイン要素を使用してアクション リクエスト ボタンを設計し、ユーザーの操作行動を刺激する必要があります。これにより、ウェブサイトのコンバージョン率に非常に良い影響がもたらされます。

（下図参照）Alipay 操作バナーのアクション ポイントをいくつか見てみましょう。もちろん、他の製品関連のアクション ボタンもいくつかあります。上記の設計要素を試して、アクティビティのコンバージョン率にどの程度役立つかを確認できます。アクションリクエストボタンのデザインについて、他にもアイデアがあるかもしれません。一緒に話し合いましょう。

元のタイトル: ウェブサイトデザイン分析: アクションリクエストボタンデザインに必要な 6 つの要素

キーワード: ウェブサイト、リクエスト、ボタン、必須、キラームーブ、これ、どこ、ウェブマスター、ウェブサイトのプロモーション、お金を稼ぐ