KARTEでできるデザインの活用 #2

1
｜ © PLAID, Inc ｜ Confidential
でできるデザインの活⽤ #2

2
オンラインであってもオフラインであっても顧客との向き合い⽅、接し⽅には⼤きな違いはない
と考えています。どちらの場でも⼀貫性のある接客が、ブランド、プロダクト、サイトでの顧客
体験の向上に⼤きく関係してくるものだと思っています。
⼀貫性のあるデザインの延⻑として、「ユーザーの⾏動を促す導線」というテーマで、いくつか
の事例を交えて、情報を整理しました。
顧客体験を考え、実践する⼀歩になれば幸いです。
- PLAID Customer Experience Team
はじめに

3
⼀貫性のあるデザイン
分かりやすく快適に⽬的を達成してもらう

⼀貫性
Consistency in Design
デザインに⼀貫性を持たせること
はサイト内の体験を形成する上
で、⾮常に重要な役割を担ってい
ます。
デザインにおける⼀貫性には、⾒
た⽬の⼀貫性と機能の⼀貫性があ
ります。

⾒た⽬の⼀貫性
ページごとに違う⾒せ⽅や⾊が使われていた
り、同じアクションなのにさまざまなレイア
ウトパターンがあると、ユーザーは混乱し、
ストレスを感じてしまいます。
同じ性質のものは同じ表現で、違う性質のも
のは違う表現にし、ユーザーに認知してもら
いやすい状態にすることを意識しましょう。
形状やレイアウト、⽂字の⼤きさ、⾊などが
当てはまります。

「お知らせ」の場合
「アクションを促したい」場合
テンプレートをその都度選択するのではなく、「お知ら
せ」の場合は Aテンプレート、「アクションを促したい」
場合は Bテンプレートのような形で、伝えたい情報の質に
よって使⽤するテンプレートを決めておくのをおすすめ
します。あらかじめデザイナー・エンジニアに必要なテ
ンプレートを作成してもらうと良いでしょう。
KARTEにおける⾒た⽬の⼀貫性

機能の⼀貫性
⼈は無意識のうちにサイトの使い⽅を学習し
ていきます。⼀貫性が低いと、常に学習し続
けなくてはなりません。⼀貫性が⾼まると、
学習を助け、操作性が⾼まり、ユーザーの効
率性も向上させることができます。
このことからサービスの質が安定・向上する
ため、ユーザーはサイト内で良い体験を得や
すくなり、信⽤や満⾜にもつながります。
接客⾃体の表⽰⽅法や操作、ボタンクリック
後の挙動などが当てはまります。

表⽰⽅法や型も都度考えるのではなく、「機能紹介」の
場合は⾏動を阻害しない通知形式（モードレス）のテン
プレートで、「アクションを促したい」場合は全画⾯を
覆うモーダル形式（最⼩化あり）のテンプレートを利⽤
するといったルールを定めましょう。
アクションを促すボタンにはサイトカラーを利⽤するな
ど決めるとよいでしょう。⾒た⽬の⼀貫性同様、最初に
設計しておくことをおすすめします。
KARTEにおける機能の⼀貫性
「機能紹介」の場合、画⾯右下表⽰
「アクションを促したい」場合、モーダル表⽰

• 最初に設計し、⼀度テンプレートを作成すれば、デザイ
ナーや開発者が毎回製作する必要がなくなり、接客の
提供スピード＆提供サイクルが早くなる
• 接客の品質の担保ができている
• デザインやコーディングのことに時間を使うのではな
く、ユーザー体験の向上のための施策を考える時間を確
保できる
重要性 - 事業者
• サイトの情報を認識しやすくなり、ユーザーが混乱し、
ストレスを抱えることがなくなる（⾒た⽬）
• 学習することを助け、操作性が⾼まり、ユーザーの効率
性も向上させ、信⽤や満⾜にもつながる。その結果良
い体験を得やすくなる（機能）
• サイトの世界観やコンセプトを継続的に直接感じるこ
とができる
重要性 - ユーザー

まとめ
⼀貫性のあるデザインオフライン（実際の店舗）のシーンで考えても、店舗内装
や、スタッフから受ける接客は、個⼈差はあれど当然のよ
うに⼀貫していると思います。
同じ系列のある店舗ではお堅い接客で、別の店舗ではフレ
ンドリーというようでは、良い体験につながるとは思えま
せん。
オンラインにおける接客であっても考え⽅は同様です。サ
イトに及ぼす影響を考慮せずにアピールしたいという想い
だけで、⽬⽴たせるのではなく、あくまでもユーザーに分
かりやすく快適に⽬的を達成してもらうために接客を作り
ましょう。
デザインはその場のノリで作るものではありません。⼀貫
性のあるデザインを考えることは、顧客体験を考える最初
の⼀歩なのかもしれません。

11
ユーザーの⾏動を促す導線
でできること

12
状況にあわせて、欲しい時に欲しい情報を提供する

よくある質問が特定できている場合、ユーザーに問い合わせの導線や
回答を探させるのは得策ではありません。
その場でユーザーのペインを解消（回答への導線）できることは、問
い合わせ数を減らすことができるサービス提供者側のメリットよりも
価値があり、その積み重ねはユーザーの体験向上につながります。
☝ POINT
よくある質問の該当ページに、回答につながる
質問リストを⽤意してみましょう
• どのタイミングでどのように伝えるかが重要です。ユーザーの
⾏動を阻害しないことを意識してください。
GOOD

GOOD
BAD
よくある質問であってもトッ
プページや閲覧しているペー
ジで必要のない情報であれば
ノイズになる可能性がありま
す。
閲覧しているページに関連す
るよくある質問を配信するの
は有効であると⾔えます。
最初から表⽰するのではなく
滞在時間が⻑い or ページ下部
までスクロールという条件で
表⽰させるとよいでしょう。

15
ユーザーの⾏動⼼理を先読みし、最適なシナリオを提供する

オンライン相談∕⾯談などの対⾯コミュニケーションが発⽣する場
合、障壁をできるだけ取り除く必要があります。
内容を伝えるだけでなく、どんな状況で、どういう⼈が対応するのか
といったような情報を事前に伝えておくことのがよいでしょう。
対応者の写真や名前を⽤いるのは、オンラインの中でも「⼈」を感じ
ることができるので、信頼につながり、効果的だと⾔えます。
☝ POINT
ユーザーの⼼理的なハードルをできるだけ下げ
ることを意識しましょう
• 内容に沿うのはもちろんですが、いわゆる素材と感じるような
⼈ではなく、実際の担当者を使⽤すると良いでしょう。
GOOD

イメージ画像を利⽤すること
は重要ですが、コンテキスト
にあった画像を利⽤するよう
にしましょう。
クリック後にどうなるか想起
できるような説明や画像を⽤
いることで、ユーザーは安⼼
して⾏動することができるよ
うになります。
BAD GOOD サービス内容が理解できるこ
とと、誰が対応してくれるか
が想起できるだけで、ユー
ザーの⼼理的な障壁は低くな
ります。

18
ユーザーの⽬的を把握して、⾏動まで⾒据える

オンライン・オフライン限らず、イベントなどを実施する際、ユー
ザーに、「いま」が開催前・開催中・開催後のどの状態であるかを伝
えましょう。その状況に合わせた提案をすることで、期待値をコント
ロールした状態で、誘導先のコンテンツを閲覧してもらうことができ
ます。
状況を把握し、判断してもらい、⾏動してもらうことを意識しましょ
う。
☝ POINT
いまの状況を認識してもらい、状況に合わせた
案内をするよう意識しましょう
• 時間軸がはっきりしている施策は、状況に合わせたコンテンツ
への誘導を意識しましょう。
GOOD

BAD
さらに、ユーザーの⾏動を⾒
据え、⽬的を達成するための
導線を設置しています。
視聴へとつながる導線を設置
し、ユーザーの⽬的を完遂で
きるようにしましょう。
現在の状況といつまでその状
況が続くかを明⽰していま
す。
どういう状況かを伝える点で
はよいですが、いまのままで
は単なる情報でしかありませ
ん。
GOOD

21

KARTEでできるデザインの活用 #2

More Related Content

Similar to KARTEでできるデザインの活用 #2

More from CS KARTE