SlideShare a Scribd company logo
1|    © PLAID, Inc    |    Confidential
       でできるデザインの活⽤ #2
2|    © PLAID, Inc    |    Confidential
オンラインであってもオフラインであっても顧客との向き合い⽅、接し⽅には⼤きな違いはない
と考えています。どちらの場でも⼀貫性のある接客が、ブランド、プロダクト、サイトでの顧客
体験の向上に⼤きく関係してくるものだと思っています。
⼀貫性のあるデザインの延⻑として、「ユーザーの⾏動を促す導線」というテーマで、いくつか
の事例を交えて、情報を整理しました。
顧客体験を考え、実践する⼀歩になれば幸いです。
- PLAID Customer Experience Team
はじめに
3|    © PLAID, Inc    |    Confidential
⼀貫性のあるデザイン
分かりやすく快適に⽬的を達成してもらう
|    © PLAID, Inc    |    Confidential
⼀貫性
Consistency in Design
⼀貫性のあるデザイン
デザインに⼀貫性を持たせること
はサイト内の体験を形成する上
で、⾮常に重要な役割を担ってい
ます。
デザインにおける⼀貫性には、⾒
た⽬の⼀貫性と機能の⼀貫性があ
ります。
|    © PLAID, Inc    |    Confidential
⾒た⽬の⼀貫性
Consistency in Design
⼀貫性のあるデザイン
ページごとに違う⾒せ⽅や⾊が使われていた
り、同じアクションなのにさまざまなレイア
ウトパターンがあると、ユーザーは混乱し、
ストレスを感じてしまいます。
同じ性質のものは同じ表現で、違う性質のも
のは違う表現にし、ユーザーに認知してもら
いやすい状態にすることを意識しましょう。
形状やレイアウト、⽂字の⼤きさ、⾊などが
当てはまります。
|    © PLAID, Inc    |    Confidential
Consistency in Design
⼀貫性のあるデザイン
「お知らせ」の場合
「アクションを促したい」場合
テンプレートをその都度選択するのではなく、「お知ら
せ」の場合は Aテンプレート、「アクションを促したい」
場合は Bテンプレートのような形で、伝えたい情報の質に
よって使⽤するテンプレートを決めておくのをおすすめ
します。あらかじめデザイナー・エンジニアに必要なテ
ンプレートを作成してもらうと良いでしょう。
KARTEにおける ⾒た⽬の⼀貫性
|    © PLAID, Inc    |    Confidential
機能の⼀貫性
Consistency in Design
⼀貫性のあるデザイン
⼈は無意識のうちにサイトの使い⽅を学習し
ていきます。⼀貫性が低いと、常に学習し続
けなくてはなりません。⼀貫性が⾼まると、
学習を助け、操作性が⾼まり、ユーザーの効
率性も向上させることができます。
このことからサービスの質が安定・向上する
ため、ユーザーはサイト内で良い体験を得や
すくなり、信⽤や満⾜にもつながります。
接客⾃体の表⽰⽅法や操作、ボタンクリック
後の挙動などが当てはまります。
|    © PLAID, Inc    |    Confidential
Consistency in Design
⼀貫性のあるデザイン
表⽰⽅法や型も都度考えるのではなく、「機能紹介」の
場合は⾏動を阻害しない通知形式(モードレス)のテン
プレートで、「アクションを促したい」場合は全画⾯を
覆うモーダル形式(最⼩化あり)のテンプレートを利⽤
するといったルールを定めましょう。
アクションを促すボタンにはサイトカラーを利⽤するな
ど決めるとよいでしょう。⾒た⽬の⼀貫性同様、最初に
設計しておくことをおすすめします。
KARTEにおける 機能の⼀貫性
「機能紹介」の場合、画⾯右下表⽰
「アクションを促したい」場合、モーダル表⽰
|    © PLAID, Inc    |    Confidential
Consistency in Design
⼀貫性のあるデザイン
• 最初に設計し、⼀度テンプレートを作成すれば、デザイ
ナーや開発者が毎回製作する必要がなくなり、接客の
提供スピード&提供サイクルが早くなる
• 接客の品質の担保ができている
• デザインやコーディングのことに時間を使うのではな
く、ユーザー体験の向上のための施策を考える時間を確
保できる
重要性 - 事業者
• サイトの情報を認識しやすくなり、ユーザーが混乱し、
ストレスを抱えることがなくなる(⾒た⽬)
• 学習することを助け、操作性が⾼まり、ユーザーの効率
性も向上させ、信⽤や満⾜にもつながる。その結果良
い体験を得やすくなる(機能)
• サイトの世界観やコンセプトを継続的に直接感じるこ
とができる
重要性 - ユーザー
|    © PLAID, Inc    |    Confidential
まとめ
Consistency in Design
⼀貫性のあるデザイン オフライン(実際の店舗)のシーンで考えても、店舗内装
や、スタッフから受ける接客は、個⼈差はあれど当然のよ
うに⼀貫していると思います。
同じ系列のある店舗ではお堅い接客で、別の店舗ではフレ
ンドリーというようでは、良い体験につながるとは思えま
せん。
オンラインにおける接客であっても考え⽅は同様です。サ
イトに及ぼす影響を考慮せずにアピールしたいという想い
だけで、⽬⽴たせるのではなく、あくまでもユーザーに分
かりやすく快適に⽬的を達成してもらうために接客を作り
ましょう。
デザインはその場のノリで作るものではありません。⼀貫
性のあるデザインを考えることは、顧客体験を考える最初
の⼀歩なのかもしれません。
11|    © PLAID, Inc    |    Confidential
ユーザーの⾏動を促す導線
      でできること
12|    © PLAID, Inc    |    Confidential
ユーザーの⾏動を促す導線
状況にあわせて、欲しい時に欲しい情報を提供する
|    © PLAID, Inc    |    Confidential
よくある質問が特定できている場合、ユーザーに問い合わせの導線や
回答を探させるのは得策ではありません。
その場でユーザーのペインを解消(回答への導線)できることは、問
い合わせ数を減らすことができるサービス提供者側のメリットよりも
価値があり、その積み重ねはユーザーの体験向上につながります。
☝ POINT
よくある質問の該当ページに、回答につながる
質問リストを⽤意してみましょう
ユーザーの⾏動を促す導線
• どのタイミングでどのように伝えるかが重要です。ユーザーの
⾏動を阻害しないことを意識してください。
GOOD
|    © PLAID, Inc    |    Confidential
GOODBAD
よくある質問であってもトッ
プページや閲覧しているペー
ジで必要のない情報であれば
ノイズになる可能性がありま
す。
閲覧しているページに関連す
るよくある質問を配信するの
は有効であると⾔えます。
最初から表⽰するのではなく
滞在時間が⻑い or ページ下部
までスクロールという条件で
表⽰させるとよいでしょう。
15|    © PLAID, Inc    |    Confidential
ユーザーの⾏動を促す導線
ユーザーの⾏動⼼理を先読みし、最適なシナリオを提供する
|    © PLAID, Inc    |    Confidential
オンライン相談∕⾯談などの対⾯コミュニケーションが発⽣する場
合、障壁をできるだけ取り除く必要があります。
内容を伝えるだけでなく、どんな状況で、どういう⼈が対応するのか
といったような情報を事前に伝えておくことのがよいでしょう。
対応者の写真や名前を⽤いるのは、オンラインの中でも「⼈」を感じ
ることができるので、信頼につながり、効果的だと⾔えます。
☝ POINT
ユーザーの⼼理的なハードルをできるだけ下げ
ることを意識しましょう
ユーザーの⾏動を促す導線
• 内容に沿うのはもちろんですが、いわゆる素材と感じるような
⼈ではなく、実際の担当者を使⽤すると良いでしょう。
GOOD
|    © PLAID, Inc    |    Confidential
イメージ画像を利⽤すること
は重要ですが、コンテキスト
にあった画像を利⽤するよう
にしましょう。
クリック後にどうなるか想起
できるような説明や画像を⽤
いることで、ユーザーは安⼼
して⾏動することができるよ
うになります。
BAD GOOD サービス内容が理解できるこ
とと、誰が対応してくれるか
が想起できるだけで、ユー
ザーの⼼理的な障壁は低くな
ります。
18|    © PLAID, Inc    |    Confidential
ユーザーの⾏動を促す導線
ユーザーの⽬的を把握して、⾏動まで⾒据える
|    © PLAID, Inc    |    Confidential
オンライン・オフライン限らず、イベントなどを実施する際、ユー
ザーに、「いま」が開催前・開催中・開催後のどの状態であるかを伝
えましょう。その状況に合わせた提案をすることで、期待値をコント
ロールした状態で、誘導先のコンテンツを閲覧してもらうことができ
ます。
状況を把握し、判断してもらい、⾏動してもらうことを意識しましょ
う。
☝ POINT
いまの状況を認識してもらい、状況に合わせた
案内をするよう意識しましょう
ユーザーの⾏動を促す導線
• 時間軸がはっきりしている施策は、状況に合わせたコンテンツ
への誘導を意識しましょう。
GOOD
|    © PLAID, Inc    |    Confidential
BAD
さらに、ユーザーの⾏動を⾒
据え、⽬的を達成するための
導線を設置しています。
視聴へとつながる導線を設置
し、ユーザーの⽬的を完遂で
きるようにしましょう。
現在の状況といつまでその状
況が続くかを明⽰していま
す。
どういう状況かを伝える点で
はよいですが、いまのままで
は単なる情報でしかありませ
ん。
GOOD
21
|    © PLAID, Inc    |    Confidential
22|    © PLAID, Inc    |    Confidential
アンケートのご協⼒のお願い
アンケート結果は
今後のコンテンツ作成の参考にさせていただきます。
アンケートに回答する
回答時間⽬安:2∼3分
📮
https://support.karte.io/post/3Q8xNVoYmttIGmsB9fVqg5#kartedesign2

More Related Content

More from CS KARTE

KARTE マンガアプリ資料
KARTE マンガアプリ資料KARTE マンガアプリ資料
KARTE マンガアプリ資料
CS KARTE
 
KARTEで実現する Webサイト / アプリ改善事例 資料
KARTEで実現する Webサイト / アプリ改善事例 資料KARTEで実現する Webサイト / アプリ改善事例 資料
KARTEで実現する Webサイト / アプリ改善事例 資料
CS KARTE
 
Karte nps
Karte npsKarte nps
Karte nps
CS KARTE
 
KARTE blocks 資料
KARTE blocks 資料KARTE blocks 資料
KARTE blocks 資料
CS KARTE
 
Growth Pickups Apr 2021
Growth Pickups Apr 2021Growth Pickups Apr 2021
Growth Pickups Apr 2021
CS KARTE
 
2021apr growth pickups
2021apr growth pickups2021apr growth pickups
2021apr growth pickups
CS KARTE
 
Mar growth pickups_min
Mar growth pickups_minMar growth pickups_min
Mar growth pickups_min
CS KARTE
 
KARTE Growth Pickups 2021年2月号
KARTE Growth Pickups 2021年2月号KARTE Growth Pickups 2021年2月号
KARTE Growth Pickups 2021年2月号
CS KARTE
 
Growth Pickups Jan.2021
Growth Pickups Jan.2021Growth Pickups Jan.2021
Growth Pickups Jan.2021
CS KARTE
 
Dec growth pickups
Dec  growth pickupsDec  growth pickups
Dec growth pickups
CS KARTE
 
Karte bot 202011
Karte bot 202011Karte bot 202011
Karte bot 202011
CS KARTE
 
Nov growth pickups
Nov growth pickupsNov growth pickups
Nov growth pickups
CS KARTE
 
Oct growth pickups3
Oct growth pickups3Oct growth pickups3
Oct growth pickups3
CS KARTE
 
Oct growth pickups 2
Oct growth pickups 2Oct growth pickups 2
Oct growth pickups 2
CS KARTE
 
Oct growth pickups
Oct growth pickupsOct growth pickups
Oct growth pickups
CS KARTE
 
Globalnavi
GlobalnaviGlobalnavi
Globalnavi
CS KARTE
 
Sep growth pick ups
Sep growth pick upsSep growth pick ups
Sep growth pick ups
CS KARTE
 
July growth pick ups
July growth pick upsJuly growth pick ups
July growth pick ups
CS KARTE
 
Aug growth pick ups
Aug growth pick upsAug growth pick ups
Aug growth pick ups
CS KARTE
 
新ユーザーストーリー画面のご紹介
新ユーザーストーリー画面のご紹介新ユーザーストーリー画面のご紹介
新ユーザーストーリー画面のご紹介
CS KARTE
 

More from CS KARTE (20)

KARTE マンガアプリ資料
KARTE マンガアプリ資料KARTE マンガアプリ資料
KARTE マンガアプリ資料
 
KARTEで実現する Webサイト / アプリ改善事例 資料
KARTEで実現する Webサイト / アプリ改善事例 資料KARTEで実現する Webサイト / アプリ改善事例 資料
KARTEで実現する Webサイト / アプリ改善事例 資料
 
Karte nps
Karte npsKarte nps
Karte nps
 
KARTE blocks 資料
KARTE blocks 資料KARTE blocks 資料
KARTE blocks 資料
 
Growth Pickups Apr 2021
Growth Pickups Apr 2021Growth Pickups Apr 2021
Growth Pickups Apr 2021
 
2021apr growth pickups
2021apr growth pickups2021apr growth pickups
2021apr growth pickups
 
Mar growth pickups_min
Mar growth pickups_minMar growth pickups_min
Mar growth pickups_min
 
KARTE Growth Pickups 2021年2月号
KARTE Growth Pickups 2021年2月号KARTE Growth Pickups 2021年2月号
KARTE Growth Pickups 2021年2月号
 
Growth Pickups Jan.2021
Growth Pickups Jan.2021Growth Pickups Jan.2021
Growth Pickups Jan.2021
 
Dec growth pickups
Dec  growth pickupsDec  growth pickups
Dec growth pickups
 
Karte bot 202011
Karte bot 202011Karte bot 202011
Karte bot 202011
 
Nov growth pickups
Nov growth pickupsNov growth pickups
Nov growth pickups
 
Oct growth pickups3
Oct growth pickups3Oct growth pickups3
Oct growth pickups3
 
Oct growth pickups 2
Oct growth pickups 2Oct growth pickups 2
Oct growth pickups 2
 
Oct growth pickups
Oct growth pickupsOct growth pickups
Oct growth pickups
 
Globalnavi
GlobalnaviGlobalnavi
Globalnavi
 
Sep growth pick ups
Sep growth pick upsSep growth pick ups
Sep growth pick ups
 
July growth pick ups
July growth pick upsJuly growth pick ups
July growth pick ups
 
Aug growth pick ups
Aug growth pick upsAug growth pick ups
Aug growth pick ups
 
新ユーザーストーリー画面のご紹介
新ユーザーストーリー画面のご紹介新ユーザーストーリー画面のご紹介
新ユーザーストーリー画面のご紹介
 

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