「さらに詳しく」では不十分。説明的なコールトゥアクションの必要性
Nov 17, 2021この記事はUX Content Collectiveのブログ: “Learn more” is not enough: A case for descriptive CTAsの翻訳転載です。著者のアリス・チェンさんの許可を得て公開しています。
いくつかウェブサイトを開いて見てみてください。おそらく「さらに詳しく」のリンクが少なくとも2つ、３つはあるはずです。このようなCTAリンクのテキストは、ウェブサイトやアプリ内のいたるところで見られますが、ユーザーエクスペリエンスの向上に役立つものではありません。
まず、CTAとは何か？
CTAとは、call-to-action（コールトゥアクション）の略で、ユーザーに行動を促すためのものです。ボタンでもハイパーリンクでも画像でも構いませんが、一般的にはユーザーにとってほしい行動をテキストで表現したものです。
なぜ 「さらに詳しく」がいたるところにあるのか？
ウェブサイトをご覧になったとき、おそらく「続きを読む」、「こちらをクリック」、「詳細はこちら」などのテキストを目にしたことでしょう。これらは似たような、説明的ではない、一般的なCTAリンクです。非常に幅広く対応でき、リンクに関しては一種の万能薬のような役割を果たします。
「さらに詳しく」が一般的になった理由は、いろいろ考えられます。コンテンツチームの人員が不足していて（よくあるケースです）、説明的なCTAを書く時間やリソースがないのかもしれません。あるいは、開発者でもなく、その分野に詳しいライター（SME）でもない人が、何を書いていいかわからず、CTAの一つを十把一絡げに使っているのかもしれません。あるいは、UI/UXコンサルティング会社のNielsen Norman Groupが指摘しているように、モバイルを意識しているのかもしれません。理由が何であれ、最近では説明的ではないCTAがかなり一般的になってきていることは確かです。
「さらに詳しく」は、ユーザーを次の画面やページに移動させる役割を果たすため、どのような場面でも間違いなく機能します。簡単に言えば、「詳しくはこちら」は素早くて簡単なCTAです。しかし、UXライターであれば、より効果的で、より良いユーザー体験を提供するCTAを作ることができます。
下のスクリーンショットのカナダロイヤル銀行のウェブサイトでは、両方のセクションに「さらに詳しく（Learn More）」というCTAがあります。適切なコンテキストを見定め、より説明的なリンクに変更すれば、「採用情報を見る」や「私たちの実績を見る」とすることができます。
説明不足のCTAの問題点
汎用型のCTAリンクが効果的でない理由は様々です。
ナビゲーション
このCTAは、「さらに詳しく」がよく使われるのと同じ理由で、効果的ではありません。漠然としすぎていて、情報の匂いが弱いのです。ユーザーを次の画面やページに移動させるのには役立つかもしれませんが、ユーザーの体験を導く助けにはなりません。1つのページに複数の「さらに詳しく」リンクがある場合、すべてのリンクが同じページにつながっているのではないかと、さらに混乱を招く恐れがあります。
「さらに詳しく」では、ユーザーが次のステップに進むための十分なコンテキストが得られません。Nielsen Norman Groupによると、このような不確実性は、迷いや混乱を生み、最終的には認知的な負担となります。UXライターの仕事は、ユーザーがしたいことをより簡単にできるようにサポートすることです。
ユーザーには、CTAの向こう側に何があるのかを確信してもらいたいものです。サプライズは歓迎されないので、適切な期待値を設定する必要があります。その一方で、魅力的なコピーでユーザーを惹きつけ、この次のステップが自分にとって有益なものだと確信させたいとも考えます。この2つのバランスはまさに芸術です。しかし、どちらかを選ばなければならないときは、常に「賢さ」よりも「わかりやすさ」を選ぶようにしましょう。
アクセシビリティ
視覚障がい者は、スクリーンリーダーや拡大鏡などの支援技術を使ってサイト内を移動します。スクリーンリーダーを使用しているユーザーのほとんどは、リンクテキストを耳で聞くだけで、汎用型のCTAを理解するための視覚的な助けがありません。また、「さらに詳しく」というCTAに戸惑っても、簡単に前のコンテンツを振り返ることができません。
SEO
説明不足のCTAは、SEO（検索エンジン最適化）に役立ちません。Googleは、検索者にとって有益なコンテンツを検索結果ページの上位に表示します。CTAがユーザーに十分なコンテキストを与え、ユーザーがどこに行くのかという期待感を持たせれば、Googleは役に立つコンテキストを好むので、ページのランキングが上昇します。
ページを検索エンジン向けに最適化するには、見出しやメタタグ、リンクなどの適切な場所にキーワードを含める必要があります。つまり、CTAに関連キーワードを含めることで、ページの視認性を高めることができるのです。
CTAにキーワードを使うときは、関連キーワードを最初に置くのがよいでしょう。見出しと同じように、ページに目を通してもらい、探しているものを見つけやすくなります。
デザイン
ビジュアルデザインの観点からすると、1つのページにいくつもの「詳しくはこちら」のCTAがあると、特にコンテンツの列が横に並んでいる場合には、繰り返しの印象を与えてしまいます。場合によっては、CTAリンクが必要ないこともあります。直感的に理解できる場合（例：ブログ記事）や、見出しや画像がクリック可能であることが視覚的に明らかな場合は、次の例のようにCTAは必要ないでしょう。
スクリーンショット：カナダのNational Student Loan Service Centreのサイトでは、タイトルが明確にリンクされており、その下部のコピーがリンク先の内容について十分なコンテキストを与えているため、個別のCTAを使用していません。
スクリーンショット：上記のサイトでは、画像とタイトルがクリック可能で、各記事を読むためのCTAはありません。私たちに馴染みある一般的なブログの慣習に従っているので、その操作を直感的に理解できます。
説明的なCTAを書くためのヒント
ウェブサイトでもアプリでも、CTAはユーザー体験において重要な役割を果たすため、それぞれのリンクが説明的で明確であることが重要です。
次のような質問を考えてみましょう。
- ユーザーは現在、どのような状況にあるのか？
- 次のステップは何か？
- 次のステップに進むために必要な情報は何か？
- ユーザーは次にどのページや画面を見るのか？あるいは、アクションの後に何が起こるのか？
- 特筆すべきプロダクトやサービスはあるのか？
- ユーザーにどのような行動をとってもらいたいのか？メルマガに登録するのか？それとも、お金を振り込むのか？プロジェクトに新規ユーザーを追加するのか？
次に何が起こるのかを明確にする
リンクがどこにつながっているのか、ユーザーがアクションを起こすと何が起こるのか、テキストで正確に伝えましょう。ユーザーのゴールを考え、関連するキーワードを含めることで、コンテキストを提供できるかどうかを考えます。ユーザーが安心して次のステップに進めるように、十分なコンテキストを与えることを常に心がけましょう。
わかりやすい言葉を使う
ユーザーにとって最も理解しやすい言葉を選びましょう。言い換えれば、ブランドの言葉や企業の専門用語は避けましょう。ユーザーに響く言葉を見つけるには、カードソートやA/Bテストなどのコンテンツリサーチやテストを行うとよいでしょう。
動詞を用いる
ユーザーに行動を起こしてもらいたいので、動詞を用いるようにしましょう。例えば、「探す」や 「購入する」などです。
キーワードを入れる
特に、プロダクトの詳細ページにリンクする場合は、できるだけプロダクト名やサービス名を入れるようにしましょう。
短く、簡潔に
あなたのボイス＆トーンが輝くときがあっても、CTAコピーは通常そのような場面ではありません。一般的に、ボタンにはユーザーに十分なコンテキストを与えるための十分なスペースがありません。ボタンにテキストを収めるには、できるだけ少ない文字数で、必要と思われるコンテキストを提供してください。
すべてのデバイスを考慮する
特定のデバイスでしか機能しないCTAは書かないようにしましょう。例えば、「クリック」という言葉を使ったCTAは、アプリやモバイル端末で見ている人には意味がありません。「タップ」がデスクトップで見ている人に通用しないのと同じです。
スクリーンショット：Squarespace（上）とSquare（下）は、説明的なCTAを見事に作成したサイトの好例です。彼らは、3つのセクションすべてに「さらに詳しく」と簡単に書くことができましたが、その代わりにパーソナライズされたCTAを書き、それぞれのリンクがどこにつながるのかというコンテキストを与え、ユーザーに適切な期待を持たせました。
「さらに詳しく」の例外
「さらに詳しく」などの独立したリンクテキストや、その他の説明的ではないCTAは、ユーザーエクスペリエンスに良い影響を与えないことがわかりました。しかし、いくつかの例外では、それらが機能することがあります。
1つ目は、「さらに詳しく」をカスタマイズして、より説明的にすることです。例えば「〇〇についてさらに詳しく」などです。下記のShopifyのウェブサイトにあるCTAは、この方法の一例です。
しかし、この方法には欠点があります。デスクトップではスペースに余裕があるので問題ありませんが、モバイル画面やアプリではスペースに余裕がないので注意が必要です。
説明的ではないCTAリンクが機能するもう一つのシナリオは、リンクの直前のコンテンツで十分なコンテキストが提供されている場合です。しかし、前述のように、視覚障がい者がリンク前のコンテンツをすぐに見返すことは簡単ではないため、アクセシビリティの観点からはベストな方法とは言えません。また、直前で2つ以上のトピックに言及すると、さらに混乱を招く危険性があります。「さらに詳しく」が何を指しているのか、誤解を招きかねません。
このように、説明的でないCTAを使用できる特別なケースもあるかもしれませんが、すべてのCTAをできるだけ説明的にすることがベストプラクティスであり、全体的なエクスペリエンスの向上につながります。
説明的なCTAは、よりアクセスしやすく、SEOフレンドリーで、説得力があります。また、ナビゲーション、読みやすさ、モバイル体験の面でも優れています。CTAリンクが説明的であることは、最終的にはより良いユーザー体験につながります。
