1.0UX TIMEShttps://uxdaystokyo.com/articles大本 あかねhttps://uxdaystokyo.com/articles/author/akaneohmoto/rich600338<blockquote class="wp-embedded-content" data-secret="1z2qzbL3Ae"><a href="https://uxdaystokyo.com/articles/ctadesign/">CTA設計のための優先順位</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/ctadesign/embed/#?secret=1z2qzbL3Ae" width="600" height="338" title="“CTA設計のための優先順位” — UX TIMES" data-secret="1z2qzbL3Ae" 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/2023/02/visibility.jpg1000750CTAは優先順位を付けて設計する必要があります。今回は、優先順位を考えた設計方法をご紹介します。 すべてのリンクを誘導することはできない ユーザーの行動を促すボタンは、解釈次第ではすべてのリンクが当てはまると言ってもいいでしょう。そのため、全てが目立つデザインになっているケースがありますが、どれも目立たせると、どこも目立たないことを覚えておきましょう。 ログインボタンはどこか？ 図はあるサイトのデザインですが、以前は最上部のナビ部分がなく、ログインしようとしてログインボタンを探しますが見つけられず、数分探してしまいました。この後は学習したことでココだと見つけられましたが、しばらくすると忘れてしまうので、また同じように迷ってしまいます。 このような体験をするユーザーの意見があったのでしょう。今では最上部にテキストでのボタンが設置されています。 この様なデザインになってしまうのは、ユーザーの行動をすべて目立つすように設計している思想であることが原因と言えます。 操作できれば良いわけではない UX DAYS TOKYOで教えているユーザビリティテストの方法の中には、（操作が）「できるかテスト」があり、できればOKとしてしまうケースで考えられる方・チームがいます。しかし、もう１つの数秒でどのサイトか理解できるかのテスト「わかるかテスト」のように、数秒で次のアクションに移す判断ができなければ、ユーザビリティテストで減点として考えるべきです。 つまり、操作ができれば良いわけではなくユーザーが何も考えずにスムーズに操作できることが重要なポイントになります。 ユーザーの声をそのまま実装するのは素人 ユーザーの行動やユーザーの声をそのまま入れるとすべてのアクションが最優先事項になってしまいます。このマインドも結果的に何をさせたいデザインかわからず混沌とし、結果的にユーザーを迷わせてしまいます。 ユーザーの声をそのままデザインするのはなく、ユーザーが本当は何をしたいのか？どの手順であれば迷わないのかを把握してデザインしましょう。言われたようにだけ実装するのは素人とかわりません。 患者が「風邪を引いたと思うのですが。」と病院に訪ねてきて、医者が「そうですね」と診断せずに言われた風邪薬をだすようなものです。プロとして意識を持って、クライアントやユーザーが何をしたいのか？本当の目的を見極めるようにしましょう。 CTAボタンの優先順位の付け方 優先順位の付け方にはいくつかの方法がありますが、私が行っている方法をご紹介いたします。まずは、3段階の優先順位を決定し、その階層ごとにまた段階を作ります。 はじめの3段階は、「詳細へ・もっと見る・＞・枠などで囲われていてhoverするとリンクがある」とわかるリンクです。テキストリンクレベルと考えて貰えば良いです。 次に、操作リンクレベルとして、ログイン・キャンセルなど、ユーザー行動で重要な優先度の高いレベルにわけます。デザインでいうと、ボタンなどの領域を取って実装するレベルです。 そして、本来のCTAというべき、ユーザー行動の優先度の一番高いお申し込み・購入・登録（キャンセル）などのアクションリンクレベルです。操作リンクとアクションリンクのレベルの両方に、キャンセルが入っているのは、その操作自体の優先度で両方に入るイメージです。 先程も紹介したように、この3つの段階の中にも最大5つくらいの優先度を設け、デザインの優先度と統一を図ります。スタイルガイドなどで、ボタンだけの白黒のデザインを作成して、カラーバージョンも用意するとヒエラルキーの崩れがなくデザインすることができます。 テキストリンク操作リンクアクションリンク詳細見る＞ (矢印など)hoverログインキャンセルお申し込み購入登録まずは３段階にわけ、グループごとに更に段階を設ける 情報を示す色やデザインカラーとのバッティング CTAボタンを実装する上で、配慮しておかなければならない点として、コンテンツや背景・デザイン自体のカラーとの兼ね合いがあります。背景とのコントラストは可読性にも繋がりますので、必ずツールでチェックしましょう。 コントラストチェックツール Contrast Grid colorable toptal