オンラインストアは、何よりもシンプルで明示的かつ階層的なボタンを使用する必要があります: 製品シートの「カートに追加」 、 カートの「支払いに進む」 、 ナビゲーションをガイドするための「コレクションを発見する」 、 サポートが本当に便利なときに「アドバイスを求める」 最良のボタンが最もオリジナルではありません: それは次のステップを明確に示すものです。
アクションボタンは実際何のためにあるのでしょうか?
アクションボタン、またはCTAは、意図を具体的なステップに変えます それは購入に向かって移動し、コレクションを開き、カートに製品を追加し、情報を要求するか、注文を最終決定することができます その有効性は、その色と同じくらいその場所と言葉に依存します。
最も便利なルールは簡単です: 画面には明らかな優先順位が必要です。 利用可能な製品シートでは、主なアクションは、一般的にカートに追加されています サイズガイドへのリンク、共有またはお気に入りへの追加は二次的なままです バスケットでは、優先度は支払いになります。
オンラインストアの必須ボタン
カートに追加
これは製品シートのメインCTAです。バリアントを選択した後も表示されたままにし、オプションが欠落しているかどうかを明確に示す必要があります。
支払いに進みます
バスケットでは、このボタンは明確にチェックアウトにつながります。 「買い物を続ける」と同じように見えないようにしてください。
コレクションを発見してください
ホームページや編集ページでは、正確な選択に向けられます。 「もっと学ぶ」という漠然としたタイトルよりも、具体的なタイトルの方が優れています。
アドバイスを求めてください
技術的な、カスタマイズ可能な、または関与の高い製品に役立ちます。メインボタンを不必要に取り替えることなく購入を完了します。
返却を知らせて
使用できない製品の場合、在庫復帰アラートにより、購入ボタンを非アクティブにするのではなく、正直な次のステップが得られます。
私の注文を参照してください
購入後、追跡アクションは商用 CTA とは別に、目的地を正確に記述する必要があります。
ページによってどのボタンを使うか?
同じ訪問者がウェルカム、コレクション、製品シートに対して同じ意図を持っているわけではありません。したがって、階層はコース全体にわたって進化する必要があります。
| ページ | 主なアクション | 二次アクション可能 | 避けるために |
|---|---|---|---|
| 家 | 特定のコレクションやオファーを見つけてください | 新しいものを見る | 同じバナー内のいくつかの競合ボタン |
| コレクション | 製品を見る | フィルターまたはソート | 十分な情報がないまま、手っ取り早く購入 |
| 製品シート | カートに追加 | サイズガイドまたはアドバイス | 購入よりもソーシャル CTA の方が目立ちます |
| バスケット | 支払いに進みます | ショッピングを続ける | チェックアウトから気をそらした外部プロモーション |
| ブログ記事 | 関連する製品またはサービスをご覧ください | リンクされたガイドを読む | 題材とは無関係の業務用ボタン |
クリックしたくなるような文言の書き方は?
テキストはクリックした直後の結果をアナウンスする必要があります。 action動詞から始めて、簡潔に保ち、過度の約束を避けてください。 「夏のドレスを見る」は「ここをクリック」よりも有益です。 「ガイドを受け取る」は「送信」よりも正確です。
デザイン、コントラスト、モバイル: 尊重すべきルール
優先CTAの最も目に見える色を予約し、二次的な行動にはより控えめなスタイルを使用してください。ボタンは、快適なクリック領域、読み取り可能なテキスト、ホバリング時またはフォーカス時の表示状態を備えた、クリック可能な要素として認識できる必要があります。
モバイルでは、メインボタンは重要な情報を隠すことなく簡単に到達できるはずです 側面の余白を維持し、複数の固定バーを積み重ねない限り、全幅はうまく機能することがよくあります 長いバリエーション、拡大されたテキストと翻訳も確認してください。
行動への呼びかけを弱める間違い
すべて色
各ボタンがそれほど目を引く場合は、どれも優先度を示しません メインアクションのために支配的な色を維持します。
語彙を変更
「購入」、「注文」、「追加」で同じステップをランダムに指定しないでください。一貫性は心強いです。
条件を隠す
CTA は、決定に必要な価格、納期、入手可能性、または変動情報を置き換えるべきではありません。
受信のみを最適化します
製品シートとバスケットは変換に近いことがよくあります。それらの階層は優先的に注目されるに値します。
旅のより広い視野については、こちらもお読みください shopifyショッピングカートを改善する方法 そして 訪問者が購入せずに店舗を離れる理由.
CTA を改善するにはどのサービスを選択する必要がありますか?
無料ミニ監査
より広範な介入を検討する前に、目に見える優先事項を特定したい場合に適しています。
製品シートの最適化
問題が製品のプレゼンテーション、購入に関する階層、情報の明確さに焦点を当てている場合を選択します。
Shopify ストアの再設計
CTA、ナビゲーション、コレクション、製品シート、バスケットを調和させる必要があるかどうかに関係します。
パーソナライズされたリクエスト
適切な推奨事項を受け取るために、コンテキスト、関連するページ、および技術的な制約を提示します。
ボタンを公開する前の実用的なチェックリスト
- 1 つのメイン アクションが各画面を支配します。
- この文言は次のステップを正確に説明しています。
- メイン CTA は、読みやすさを失うことなく背景と対比されます。
- 二次的なアクションは視覚的により控えめです。
- ボタンは 375 px の幅で使用可能なままです。
- バリエーションとエラーにより、明確な命令が表示されます。
- クリックすると、発表された宛先が表示されます。
- キーボードとフォーカスによりボタンを使用できます。
- 価格、配送、在庫状況は購入前も引き続き確認できます。
- ルートは受信から確認までテストされます。
eコマースアクションボタン FAQs
カートに追加ボタンにはどの色を使用すればよいですか?
製品シート環境と十分に対照的な色を使用し、メインアクションのために予約してください。普遍的に勝つ色はありません。ブランドとの一貫性と読みやすさがより重要です。
「今すぐ購入」と書くべきですか、それとも「カートに追加」と書くべきですか?
「カートに追加」は、ショッピングを続けることができる古典的なルートに対応します。 「今すぐ購入」は、クリックが実際に直接購入の旅につながり、この加速が役立つ場合にのみ適しています。
商品シートに表示できるボタンはいくつですか?
いくつかの行動がある可能性がありますが、1 つだけが支配する必要があります 購入は主なままです; サイズガイド、アドバイス、お気に入り、または共有は二次的で明確に区別されるべきです。
画面下部の固定ボタンはモバイルで推奨されていますか?
それはあなたがコンテンツ、バリアントの選択や重要なメッセージを隠さない限り、長い製品シート上のカートに追加することを容易にすることができます それはいくつかの画面サイズでテストされなければなりません。
アイコンはテキストなしで使用できますか?
ショッピングカートや検索などの一般的なアクションの場合、その意味が明白でアクセスしやすい文言が提供されていれば、アイコンは機能します。決定的なアクションの場合、明示的なテキストが引き続き好ましいです。
製品シートのメインボタンはどこに置きますか?
価格、バリエーション、決定に必要な情報の近く、すぐに見える部分に配置します。必須の選択の後、非常に詳細な二次コンテンツの前に表示する必要があります。
CTAを変更する必要があるかどうかを知るにはどうすればよいですか?
クリック数、ドロップアウト数、ユーザーからのフィードバックを分析し、まずジャーニーの明確さを確認します。言葉遣い、コントラスト、位置、階層など、一度に 1 つの変更をテストして、その効果を理解します。
途中でボタンをクリアなステップに変えます
SiteQuiVend は、ストアの実際の状態に応じて、CTA、製品シート、購入ジャーニーの階層を調べて、ターゲットを絞った最適化やよりグローバルな再設計に導くことができます。
