1.0UX TIMEShttps://uxdaystokyo.com/articles高橋 祐哉https://uxdaystokyo.com/articles/author/yuya-takahashi/rich600338<blockquote class="wp-embedded-content" data-secret="RIg0c7hu3j"><a href="https://uxdaystokyo.com/articles/simple-cta-design/">中堅デザイナーでも気づかなかった、シンプルに促すことがCTAの基礎</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/simple-cta-design/embed/#?secret=RIg0c7hu3j" width="600" height="338" title="“中堅デザイナーでも気づかなかった、シンプルに促すことがCTAの基礎” — UX TIMES" data-secret="RIg0c7hu3j" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://uxdaystokyo.com/articles/wp-includes/js/wp-embed.min.js </script> https://uxdaystokyo.com/articles/wp-content/uploads/2024/06/multi-cta-design-mono.png923894WebサイトやアプリケーションのUIで、ユーザーを促すためのCTA（Call To Action）は重要です。 UX DAYS TOKYOオーガナイザーの大本さんと、問題のあるCTAデザインについてディスカッションをしました。私はデザイナーになって5年ほど経ちますが、そのCTAのどこに問題があるのかわからなかったので、きっと多くの方もCTAを正しく設計できないのでは？と思い紹介します。 3つのCTAをどうデザインする？ ディスカッションでは、実際のランディングページ（LP）のユーザーインターフェース（UI）について話し合いましたが、この記事ではダミーデザインで解説します。 問題となっているUIには、「月額プラン」、「年額プラン」、「無料でお試し（無料登録）」の3つのボタンがあります。問題を考えるために、あえてボタンの色を設定していません。あなたなら、この3つのボタンを、どのような色にデザインしますか？ 青とコントラストの強い暖色系の色を候補に考えたと思いますが、悩むのは3つのボタンそれぞれにどの色を使うかです。全て同じ色にするべきでしょうか？それとも微妙に変えたほうが良いでしょうか？ 実際のデザインのボタンの色は以下のようになります。このデザインの問題点は、CTAボタンの色選びに関連しています。どう改善すべきか分かりますか？ スーパーの試食に例えて問題を理解する 先ほどのUIの問題を理解するために、スーパーマーケットの試食コーナーで例えてみます。試食コーナーでは、販売員が「美味しいのでおひとつどうぞ」と顧客に勧めます。顧客は「美味しい」という言葉に引かれて試食し、その味が気に入れば商品を購入する行動に繋がります。 試食を「食べたい」と思わせて、試食を食べれば、購入する行動につながる 問題のあるデザインを「試食コーナー」で例えるなら、産地や肉の特徴、販売価格、お得感などたくさんのことを一生懸命説明し、最後に「試食もできますよ」と試食を勧めるようなものです。 顧客が価格やお得感について尋ねてもいないのに、販売員がそれらを詳細に説明して判断を迫ることで、顧客は戸惑って購入せずにその場を離れてしまいます。つまり、CTAが多すぎるとユーザーが迷い、ページを離れてしまう状況に似ています。 あれもこれも説明してしまうと、顧客は迷って離脱する このデザインの問題は、本来ユーザーの望む行動ができるようにするCTAが、ユーザーを迷わせて行動できないUIになっていることです。 「あわよくば」での設計はユーザーを獲得できない ユーザーが望む行動が曖昧だと、無料登録や有料登録、資料請求など、運営者がユーザーにしてほしいことが先行し、「あわよくば押してほしい」と多くのボタンを並べてしまうでしょう。結果としてコンバージョン率は低下します。 ユーザーが、どこで、何をしたいのかをの目的も含めてリサーチし、行動できるようにするのがCTA設計です。 ユーザーの行動を設計する 先ほどのデザインであれば、アプリに興味がある未登録者がLPに訪れます。未会員のユーザーはアプリを実際に使ってみて、便利かどうか知りたいと考えます。 そして、試している間に便利だと感じれば、有料登録を検討します。3ヶ月後でも利用していたら、お得な年額プランに切り替えるでしょう。 このように、ユーザーの目的と行動パターンを考慮すると、まず無料で試せることに焦点を当てるべきだとわかります。このページでは、無料体験を前面に押し出し他の情報は伏せるべきです。 ユーザーが望む行動がしやすいiOS使用制限アプリ ユーザーが望む行動をしやすくするデザインの例として、iOSに搭載されているスマホ使用制限アプリを紹介します。このアプリは、スマホを長時間利用しすぎないようにサポートするために設計されています。 例えば、ユーザーが設定した使用時間の上限に達すると、スマホの操作が中断され、時間制限に達したことが通知されます。この通知には、「OKボタン」と「制限を無視ボタン」の2つが表示されます。 「制限を無視ボタン」をクリックすれば、引き続きスマホを利用し続けることが可能です。しかし、スマホの使いすぎを避けたいというユーザーの要求に合わせて、アプリは「OK」ボタンをCTAとして配置しています。この「OK」ボタンをクリックすると、スマホの利用が継続できなくなり、ユーザーがスマホから離れるように促されます。 マイクロコピーで行動しやすくなる マイクロコピー（ボタンや短いメッセージのテキスト）の設計によって、ユーザーの行動をより効果的にサポートできます。先ほどの時間制限アプリの「OK」というマイクロコピーは、ユーザーにとって曖昧なため、「押せばスマホを継続使用できる」と逆の解釈ができてしまうので改善すべきです。 「制限をかける」や「利用を停止する」などの具体的なアクションを示す言葉を使うことで、ユーザーが正しい選択をしやすくなります。 行動しやすい会話体ライティング 会話体ライティングとは、人間が会話で使う自然な言葉遣いをアプリケーションに用いる方法です。『お世辞を言う機械はお好き? コンピューターから学ぶ対人関係の心理学』によると、人は機械に対しても人間と同じように接する傾向があり、話し言葉を使用することで、アプリへの信頼性が高まり、ユーザーが行動しやすくなることが示されています。 「時間制限」という表示は、次のように改善できます。 「本日の利用時間はここまでです。」 「制限時間が来たので、アプリを休ませましょう。」 「また明日お楽しみください」 ポジティブなトーンで今日の利用を終了することを伝え、ユーザーがスマホの使用を中断することを快く受け入れるようにすると良いでしょう。 ユーザー心理に影響するので注意 UXデザイナーとして心理学を学んでいると、人が言葉からどのように影響を受けるかがよくわかります。すべての人がそうではありませんが、人の行動は言葉や映像に誘導されることが多くあります。 CTAの「無料でお試し」というマイクロコピーは、一見すると良いアプローチに見えます。しかし、ユーザー心理を考慮すると改善の余地があります。 問題は「お試し」という言葉にあります。この言葉はユーザーに「試すだけで十分」と考えさせ、プロダクトを継続的に使用する意欲を減少させてしまう可能性があります。 プロダクトとしては、当然ながらユーザーに使い続けて欲しいわけですから、「試す」よりも「使う」に変更するべきです。 自分の作ったCTAを振り返って改善しよう 私は、今回の複数のCTAの問題から、「ユーザーが行動できることがCTAの目的」という基本的な理解が不足していたことに気づきました。CTAが多すぎると、ユーザーはどの選択肢を選べばよいか迷ってしまい、最終的に行動を起こさないということです。 ユーザーがどのような心理状況でページに訪れたのかを見極め、望む行動を簡単に取れるようにすることが、効果的なCTAのデザインには不可欠です。また、マイクロコピーの重要性も学びました。適切な言葉を選ぶことで、ユーザーに対するメッセージの伝わり方や行動への影響を大きく左右すると実感しました。 これまでのデザインを見直し、ユーザーの心理を深く理解した上で改善することで、より良い結果が得られると感じています。