Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

KARTE
August 18, 2020

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

PDF資料です、画面右側のダウンロードアイコンよりダウンロードしてご活用ください。
▼読了後アンケートのご協力をお願いいたします。(4問のみ)
https://cxclip.karte.io/practice/4230/#kartedesign

KARTE

August 18, 2020
Tweet

More Decks by KARTE

Other Decks in Design

Transcript

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

    View full-size slide

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

    View full-size slide

  3. 3
    ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential
    デザインの基本原則
    正しく活⽤し、伝わりやすいデザインへ

    View full-size slide

  4. ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential
    4つの基本原則
    近接
    整列
    反復
    対⽐
    Design Principles

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. 13
    ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential
    インフォメーションの伝え⽅
          でできること

    View full-size slide

  14. 14
    ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential
    インフォメーションの伝え⽅
    情報を整理し、読みやすさを意識する

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. 18
    ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential
    インフォメーションの伝え⽅
    ユーザー視点になって、情報を共有をする

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. 22
    ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential
    インフォメーションの伝え⽅
    情報の質を分類し、適切な位置に適切な情報量で伝える

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. 26
    ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential
    インフォメーションの伝え⽅
    適切な配信頻度や配信制御の設定を⾒極める

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. 30
    ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential
    インフォメーションの伝え⽅
    遷移先にどんな情報があるか明確に表現する

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. 33
    ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential
    インフォメーションの伝え⽅
    ユーザーに何かしらの⾏動を促す

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. 37
    ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential

    View full-size slide

  38. 38
    ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential
    アンケートのご協⼒のお願い
    アンケート結果は
    今後の続編検討などに活⽤させていただきます。
    回答時間⽬安:1ʙ2分(全4問)

    https://cxclip.karte.io/practice/4230/#kartedesign
    Ξϯέʔτʹճ౴͢Δ

    View full-size slide