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

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

2
KARTEを使って、⽇々変化する状況に合わせたインフォメーションを配信する機会が増えている
かと思います。
正しく適切なタイミングでインフォメーションをお届けするために、デザインの基本原則やおす
すめのテンプレート、配信設定のTipsなど、すぐにご活⽤いただける情報を「KARTEでできるデ
ザインの活⽤」としてまとめました。
インフォメーションの伝え⽅からも顧客体験を変えていく、その⼀助になれば幸いです。
- PLAID Customer Experience Team
はじめに

3
デザインの基本原則
正しく活⽤し、伝わりやすいデザインへ

4つの基本原則
近接
整列
反復
対⽐
Design Principles

近接
関連する項⽬を近づけることで、まとまりのあるグループ
であることをユーザーに知ってもらうための⽅法。
近づけたり離したりすることでグループ化できる。
Design Principles
4つの基本原則
要素の余⽩が⼀定

• ⼈は⽬に⾒える要素をバラバラではなくグループ化して
理解するから
• ⼈は無意識に分類してしまうから
• ⼈が⼀度に認識できる数には限りがあるから
Design Principles
4つの基本原則
なぜ近接させることが重要なのか？
GOOD
関係する要素の余⽩関係しない要素の余⽩

整列
ページ上に配置するものを意識的に揃えること。
要素が離れていても、整列すれば⾒えない線で紐付けるこ
とができる。
Design Principles
4つの基本原則

• ⼈の視覚野には、縦線、横線、端、斜め40度のような
特定の図形に反応する細胞がある
• 基準となる線が無いと、視線が泳いでしまい読みにくさ
の原因となる
• 物事のあらましをつかむ際には周辺視野が使われる
Design Principles
4つの基本原則
なぜ整列させることが重要なのか？
GOOD

反復
デザイン上の何かの特徴を、全体を通じて繰り返し使う⽅
法。繰り返すことでリズムになり、同じ機能をもったグ
ループだと認識できる。
Design Principles
4つの基本原則

• ⼈が⽬で素早く物を認識できるのは、対象をパターン化
して認識しているから
• 複数の情報を1つのパターンとして定義し、繰り返し使
うことで、⼈はそのグループ全体を1つの種類の情報の
集合体として捉えることができます
Design Principles
4つの基本原則
GOOD
なぜ反復させることが重要なのか？

対⽐
はっきりした違いを出すことで、情報の区切りを明確にす
る⽅法。要素にメリハリが出ることで、読みやすさを上げ
ることができる。視線を誘導したい時にも⽤いられる。
Design Principles
4つの基本原則

• タイトル/メインコピー/本⽂という⽂字のレベルを区別
して、⼤きさを使い分ける
• ⽂字の⼤きさだけではなく、太さでも対⽐を表現できる
• ⾊の濃淡でも表現できる
• ⽬⽴たせる要素の数は、増えすぎないよう管理すること
が必要
Design Principles
4つの基本原則
GOOD
対⽐させるために必要なことは？

13
インフォメーションの伝え⽅
でできること

14
情報を整理し、読みやすさを意識する

コミュニケーションであることを意識しましょう。
より多くの情報を伝えようとした結果、⽂字数が多くなりすぎて、読
みにくくなったり、読み⾶ばされたりすることで、伝えたいメッセー
ジが届かないのは本末転倒です。
⽂字や⽂章の⾒やすさやはデザインにおいて⾮常に重要です。
読みやすく、ちょうどいい⽂字数にすることを⼼がけましょう。
☝ POINT
読みやすさを意識し、適切な⻑さで伝えるよう
に⼼がけましょう
• ⽂章を読みやすくするには、⾏間や⽂字間、⽂章の周りの余⽩
に意識するようにしましょう
GOOD

GOOD
BAD
⽂字量が多く、⾏間もつまり気味
で、⽂章周りの余⽩も⼗分にとられ
ていないため、読みづらく、読まれ
ることなく閉じられる可能性が⾼く
なります。
情報を整理し、⽂字量を調整した上
で、確実に届けたい情報を太字で⽬
⽴たせることで、認知しやすくして
います。

☝ POINT
ストア > 接客シナリオ > 「特定ユーザーへ関連特集をスライド形式で複数同時訴求」
スライダーを使ったテンプレート 👉
伝えるべき情報が多い場合、情報を整理し、ス
ライダー形式のテンプレートを活⽤してみま
しょう
Tips
• 情報を整理して分割する
• それぞれのメッセージの詳細ページへの導線を設ける
• 情報の重要度の⾼い順に並べる

18
ユーザー視点になって、情報を共有をする

サイト閲覧時に突然全画⾯を覆うようなモーダル表⽰や、⾏動を阻害
するようなサイズの⼤きい通知のメッセージはユーザーの体験を損ね
る可能性があります。
確実に届けたい重要なメッセージや⼤規模なセールやイベント以外
は、モーダル表⽰は極⼒控え、「最⼩化」を利⽤し、ユーザーが能動
的に情報を閲覧できるようにしておくのがよいでしょう。
☝ POINT
ユーザーの⾏動を阻害することなく、メッセー
ジを届けることを意識しましょう
• 繰り返し伝えたいメッセージの配信はユーザーがコントロール
できように配慮する
GOOD

GOOD
BAD
最⼩化表⽰には開いた時の内容が想
起できるテキストやアイコンを使⽤
することで、ユーザーを正しく導く
ことができます。
⽬⽴たせたいという理由で、サイト
で使⽤しているカラー以外を安易に
使⽤するのは控えましょう。

☝ POINT
テンプレート > やりたいことから探す >
ユーザーに「⾒せる」 >
「バージョンがv2」もしくは
「タイトルに最⼩化」
最⼩化表⽰を使ったテンプレート 👉
繰り返し表⽰するメッセージの場合、最⼩化を
利⽤し、ユーザーが能動的に情報を閲覧できる
ようにしておきましょう
Tips
• 緊急性かつ重要度の⾼いお知らせかを改めて確認する
• ⼀定期間、継続して配信するか否かを判断し、配信の仕⽅を決
定する

22
情報の質を分類し、適切な位置に適切な情報量で伝える

サイト内を回遊する度にポップアップでメッセージが表⽰されるよう
な体験は避けなければなりません。
常に表⽰したい・認知してもらうために継続的に表⽰したい、といっ
た情報は「埋め込み」テンプレートを利⽤し、特定の箇所にサイトの
要素として埋め込み表⽰させましょう。
どのようにコミュニケーションするかは情報の質や重要度で決めるこ
とが、⼀貫した体験を提供する⼀歩になります。
☝ POINT
メッセージの重要度を整理し、どのように伝え
るべきかを決めましょう
• ⼀辺倒なコミュニケーションになっていないか再度確認しま
しょう。正しく伝えるために伝え⽅も⼯夫しましょう
GOOD
埋め込みで表⽰

GOOD
BAD
サイトロゴやメニューバーなどのサ
イトの導線を隠しているので、ユー
ザーの⾏動を阻害しています。
明確にボタンを配置することで、詳
細情報の存在を認知させることがで
き、ユーザーを迷わせることなく誘
導することが可能です。
下部固定でスクロール率で⾮表⽰に
するなどの設定を⾏うと、ユーザー
の⾏動を阻害しないいましょう。
埋め込みを利⽤すれば、導線を隠す
ことなく⼤事な情報を伝えることが
できるようになっています。
詳細情報へのリンクが他のテキスト
と同様の扱いなので詳細情報がある
ことを認識しづらくなっています。

☝ POINT
サイト内で常に⾒せたいメッセージがある場
合、埋め込みを活⽤し、ポップアップが過多に
ならないように注意しましょう
Tips
• 期間が決まっている施策で、配信ページが明確の場合、サイト
の要素であるように訴求することを意識する
• サイトの要素のように違和感ないように表⽰する
テンプレート > やりたいことから探す > ユーザーに「⾒せる」 >「埋め込み」>
「埋め込み - HTMLを変更・挿⼊する」
埋め込みテンプレート 👉
埋め込みで表⽰
※埋め込みテンプレートはご利⽤開始にあたり弊社側での設定が必要になります。また、ご契約内容に
よっては利⽤できない場合もありますので、カスタマーサクセス担当までお問い合わせください。

26
適切な配信頻度や配信制御の設定を⾒極める

⼀度確認すれば、来訪のたびに表⽰する必要のないメッセージを配信
し続けるのは良い体験とは⾔えません。
表⽰回数の上限や、クリック回数、閉じられた回数で配信を制御する
配信停⽌条件を必ず設定しておきましょう。
同じページ内に複数のポップアップが出ることはかなりの確率でユー
ザー⾏動の阻害＝邪魔と認識されます。
☝ POINT
同じメッセージを⻑期間出し続ける場合、配信
停⽌条件を設定しましょう
• ⾃分⾃⾝が不快・邪魔と感じる回数はおおよそ間違っていない
と思います。ユーザー視点になって決定しましょう

☝ POINT
ストア > 接客シナリオ >
「サポート時間変更のお知らせを適正な⽅法で通知する」
再表⽰しないボタンを使ったテンプレート 👉
繰り返し表⽰するメッセージには再表⽰しない
ボタンを設置して、表⽰頻度の制御をユーザー
が選択できるよう配慮しましょう
• 配信停⽌条件で設定した上で、ユーザー側にも配信制御のコン
トロールをできようにする
GOOD
⼀度確認すれば、来訪のたびに表⽰する必要のないメッセージを配信
し続けるのは良い体験とは⾔えません。
表⽰回数の上限や、クリック回数、閉じられた回数で配信を制御する

GOOD
BAD
同じメッセージが来訪の度に何度も
表⽰されるのは、有益な情報であっ
てもユーザーにとっては邪魔になる
可能性があります。
「今後表⽰しない」のように、ユー
ザー側で表⽰の制御ができるように
すると、体験を損ねることはありま
せん。

30
遷移先にどんな情報があるか明確に表現する

接客にリンクを設定している場合、遷移先のページにどのような情報
が記載されているか判断できる表現にしましょう。
遷移したものの有益な情報を得られなかった場合、ユーザーにとって
は無駄な⾏動になってしまいます。ただし、接客内での情報量が多く
なっては意味がありません。適切なテンプレートと⽂章量になるよう
に意識しましょう。
☝ POINT
ユーザーにとって有益な情報かどうか判断でき
る表現を⼼がけましょう
• すべて⽂章で伝えるのは難しいですが、リスト型のテンプレー
トを利⽤すれば、必要な情報を判断しやすくなります
GOOD

GOOD
BAD
⾒る⼈を不安にさせるような⾊はで
きるるだけ避けましょう。サイトに
あった落ち着きのある⾊を選択しま
しょう。
ユーザーの知りたい情報によって導
線を分けることで、ユーザーを迷わ
すことなく、最短で情報にアクセス
できるようになります。
詳細情報にどんな情報があるのか想
起できる⽂章とボタンの内容にする
必要があります。

33
ユーザーに何かしらの⾏動を促す

ただ単に情報の共有だけでは、ユーザーは思うように⾏動してくれま
せん。ユーザーが⾏動しやすくなるように⽂章やボタンの表現を⼯夫
し、迷わせることなく、正しく誘導していきましょう。
ボタンを視覚的に強調するのも⼀つの⼿段ですし、簡易的な説明の後
に、詳細説明が記載されているページへのリンクを設置するのも有効
な⼿段となります。
☝ POINT
CTA（Call to Action）が⾃然に⾏われるよう
に構成を意識しましょう
• CTAを意識しすぎるあまり、煽るような表現をするのは控えま
しょう。わかりやすい表現になってることを確認しましょう。
GOOD

GOOD
BAD
案内通りにそれぞれの遷移先を設け
ることで、ユーザーが対象ページを
探すことなくスムーズに誘導できる
ようになっています。
案内をしているものの、導線がない
ので、ユーザーの⾏動はストップし
てしまいます。適切なページへ遷移
できるようにしてあげましょう。

☝ POINT
解決策は、ユーザーの環境や状況を考慮した選
択肢を複数⽤意し、⾏動を促進できるようにし
ましょう
Tips
• 実現可能な⼿段を、ユーザーの状況や環境（同期/⾮同期性、
対⾯など）に合わせて複数⽤意する
ストア > 接客シナリオ > 「電話やメールなどの「お問い合わせ」を常設表⽰」
おすすめのテンプレート 👉

37

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

More Related Content

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

More from CS KARTE

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